diff --git a/src/css/category.css b/src/css/category.css
index c85fec5..f9267e8 100644
--- a/src/css/category.css
+++ b/src/css/category.css
@@ -596,23 +596,23 @@ div:has(> .props-table) {
 }
 
 .ssc-demo-1 {
-  background-color: #5227ff;
+  background-color: #35724d;
 }
 
 .ssc-demo-2 {
-  background-color: #f01e9c;
+  background-color: #333;
 }
 
 .ssc-demo-3 {
-  background-color: #5227ff;
+  background-color: #35724d;
 }
 
 .ssc-demo-4 {
-  background-color: #f01e9c;
+  background-color: #333;
 }
 
 .ssc-demo-5 {
-  background-color: #5227ff;
+  background-color: #35724d;
   text-align: center;
   justify-content: center;
   align-items: center;
diff --git a/src/demo/Components/ScrollStackDemo.vue b/src/demo/Components/ScrollStackDemo.vue
index bf6e135..680c165 100644
--- a/src/demo/Components/ScrollStackDemo.vue
+++ b/src/demo/Components/ScrollStackDemo.vue
@@ -11,7 +11,7 @@
           "
         />
         <p
-          class="top-[25%] left-[50%] absolute font-black text-[#271e37] text-[clamp(2rem,4vw,3rem)] text-center transition-all -translate-x-1/2 -translate-y-1/2 duration-300 ease-in-out pointer-events-none transform"
+          class="top-[25%] left-[50%] absolute font-black text-[#333] text-[clamp(2rem,4vw,3rem)] text-center transition-all -translate-x-1/2 -translate-y-1/2 duration-300 ease-in-out pointer-events-none transform"
         >
           {{ isCompleted ? 'Stack Completed!' : 'Scroll Down' }}
         </p>