diff --git a/Home/Views/ai-agent.ejs b/Home/Views/ai-agent.ejs
index fa8d361603..2e4933bd2f 100644
--- a/Home/Views/ai-agent.ejs
+++ b/Home/Views/ai-agent.ejs
@@ -213,7 +213,7 @@
           <div class="mt-12 lg:mt-0">
             <div class="relative">
               <!-- Subtle background -->
-              <div class="absolute -inset-4 bg-violet-100/50 rounded-3xl blur-2xl"></div>
+              <div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
 
               <!-- AI Chat Interface Mockup -->
               <div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
@@ -286,7 +286,7 @@
           <div class="relative order-2 lg:order-1 mt-12 lg:mt-0">
             <div class="relative">
               <!-- Subtle background -->
-              <div class="absolute -inset-4 bg-violet-100/50 rounded-3xl blur-2xl"></div>
+              <div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
 
               <!-- Diagnosis Visualization -->
               <div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
@@ -451,7 +451,7 @@
           <div class="mt-12 lg:mt-0">
             <div class="relative">
               <!-- Subtle background -->
-              <div class="absolute -inset-4 bg-violet-100/50 rounded-3xl blur-2xl"></div>
+              <div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
 
               <!-- Code Fix Card -->
               <div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
@@ -972,7 +972,7 @@
         <div class="mt-16 lg:mt-0">
           <div class="relative" id="ai-slack-demo">
             <!-- Decorative background elements -->
-            <div class="absolute -inset-4 bg-gradient-to-r from-violet-500/10 via-pink-500/10 to-orange-500/10 rounded-3xl blur-2xl"></div>
+            <div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
 
             <!-- Slack Window -->
             <div class="relative bg-[#1a1d21] rounded-2xl shadow-2xl overflow-hidden max-w-md mx-auto ring-1 ring-white/10">
diff --git a/Home/Views/dashboards.ejs b/Home/Views/dashboards.ejs
index 3fc2af3773..9fab943a26 100644
--- a/Home/Views/dashboards.ejs
+++ b/Home/Views/dashboards.ejs
@@ -202,7 +202,7 @@
           <div class="relative lg:order-last">
             <div class="relative">
               <!-- Subtle background -->
-              <div class="absolute -inset-4 bg-blue-100/50 rounded-3xl blur-2xl"></div>
+              <div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
 
               <!-- Dashboard Grid Builder -->
               <div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
@@ -333,7 +333,7 @@
           <div class="relative lg:order-first">
             <div class="relative">
               <!-- Subtle background -->
-              <div class="absolute -inset-4 bg-blue-100/50 rounded-3xl blur-2xl"></div>
+              <div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
 
               <!-- Chart Type Cards Grid -->
               <div class="relative max-w-md mx-auto">
@@ -588,7 +588,7 @@
           <div class="relative lg:order-last">
             <div class="relative">
               <!-- Subtle background -->
-              <div class="absolute -inset-4 bg-blue-100/50 rounded-3xl blur-2xl"></div>
+              <div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
 
               <!-- Data Sources Connection UI -->
               <div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
@@ -732,7 +732,7 @@
           <div class="relative lg:order-first">
             <div class="relative">
               <!-- Subtle background -->
-              <div class="absolute -inset-4 bg-blue-100/50 rounded-3xl blur-2xl"></div>
+              <div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
 
               <!-- Sharing & Permissions UI -->
               <div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
@@ -1130,7 +1130,7 @@
           <div class="mt-16 lg:mt-0">
             <div class="relative" id="dashboards-slack-demo">
               <!-- Decorative background elements -->
-              <div class="absolute -inset-4 bg-gradient-to-r from-indigo-500/10 via-purple-500/10 to-pink-500/10 rounded-3xl blur-2xl"></div>
+              <div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
 
               <!-- Slack Window -->
               <div class="relative bg-[#1a1d21] rounded-2xl shadow-2xl overflow-hidden max-w-md mx-auto ring-1 ring-white/10">
diff --git a/Home/Views/exceptions.ejs b/Home/Views/exceptions.ejs
index 5a535950ad..35a9e3dc74 100644
--- a/Home/Views/exceptions.ejs
+++ b/Home/Views/exceptions.ejs
@@ -202,7 +202,7 @@
           <div class="relative lg:order-last">
             <div class="relative">
               <!-- Subtle background -->
-              <div class="absolute -inset-4 bg-rose-100/50 rounded-3xl blur-2xl"></div>
+              <div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
 
               <!-- Stack Trace Viewer -->
               <div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
@@ -295,7 +295,7 @@
           <div class="relative lg:order-first">
             <div class="relative">
               <!-- Subtle background -->
-              <div class="absolute -inset-4 bg-rose-100/50 rounded-3xl blur-2xl"></div>
+              <div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
 
               <!-- Error Grouping Dashboard -->
               <div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
@@ -506,7 +506,7 @@
           <div class="relative lg:order-last">
             <div class="relative">
               <!-- Subtle background -->
-              <div class="absolute -inset-4 bg-rose-100/50 rounded-3xl blur-2xl"></div>
+              <div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
 
               <!-- AI Analysis Card -->
               <div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
@@ -597,7 +597,7 @@
           <div class="relative lg:order-first">
             <div class="relative">
               <!-- Subtle background -->
-              <div class="absolute -inset-4 bg-rose-100/50 rounded-3xl blur-2xl"></div>
+              <div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
 
               <!-- Release Tracking Dashboard -->
               <div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
@@ -993,7 +993,7 @@
           <!-- Slack Demo -->
           <div class="relative" id="exceptions-slack-demo">
             <!-- Decorative background elements -->
-            <div class="absolute -inset-4 bg-gradient-to-r from-orange-500/10 via-amber-500/10 to-yellow-500/10 rounded-3xl blur-2xl"></div>
+            <div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
 
             <!-- Slack Window -->
             <div class="relative bg-[#1a1d21] rounded-2xl shadow-2xl overflow-hidden max-w-md mx-auto ring-1 ring-white/10">
diff --git a/Home/Views/incident-management.ejs b/Home/Views/incident-management.ejs
index 43f2ce9429..f884c759bc 100644
--- a/Home/Views/incident-management.ejs
+++ b/Home/Views/incident-management.ejs
@@ -901,7 +901,7 @@
         <!-- Slack Demo -->
         <div class="relative" id="incident-slack-demo">
           <!-- Decorative background elements -->
-          <div class="absolute -inset-4 bg-gradient-to-r from-rose-500/10 via-pink-500/10 to-red-500/10 rounded-3xl blur-2xl"></div>
+          <div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
 
           <!-- Slack Window -->
           <div class="relative bg-[#1a1d21] rounded-2xl shadow-2xl overflow-hidden max-w-md mx-auto ring-1 ring-white/10">
diff --git a/Home/Views/logs-management.ejs b/Home/Views/logs-management.ejs
index dcb3422eb4..60334c8374 100644
--- a/Home/Views/logs-management.ejs
+++ b/Home/Views/logs-management.ejs
@@ -217,8 +217,8 @@
                 <div class="px-4 py-3 border-b border-gray-100">
                   <div class="flex items-center justify-between">
                     <div class="flex items-center gap-2">
-                      <div class="w-8 h-8 rounded-lg bg-indigo-50 flex items-center justify-center">
-                        <svg class="w-4 h-4 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <div class="w-8 h-8 rounded-lg bg-amber-50 flex items-center justify-center">
+                        <svg class="w-4 h-4 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75"/>
                         </svg>
                       </div>
@@ -227,7 +227,7 @@
                         <div class="text-gray-400 text-xs">3 policies configured</div>
                       </div>
                     </div>
-                    <span class="flex items-center gap-1 px-2 py-1 bg-indigo-50 rounded text-xs text-indigo-600 border border-indigo-200 font-medium">
+                    <span class="flex items-center gap-1 px-2 py-1 bg-amber-50 rounded text-xs text-amber-600 border border-amber-200 font-medium">
                       Active
                     </span>
                   </div>
@@ -242,7 +242,7 @@
                         <span class="w-2 h-2 rounded-full bg-emerald-500"></span>
                         <span class="text-gray-800 text-sm font-medium">Production Logs</span>
                       </div>
-                      <span class="text-indigo-600 text-xs font-medium">90 days</span>
+                      <span class="text-amber-600 text-xs font-medium">90 days</span>
                     </div>
                     <div class="flex items-center gap-3 text-xs text-gray-500">
                       <span class="flex items-center gap-1">
@@ -263,7 +263,7 @@
                         <span class="w-2 h-2 rounded-full bg-amber-500"></span>
                         <span class="text-gray-800 text-sm font-medium">Staging Logs</span>
                       </div>
-                      <span class="text-indigo-600 text-xs font-medium">30 days</span>
+                      <span class="text-amber-600 text-xs font-medium">30 days</span>
                     </div>
                     <div class="flex items-center gap-3 text-xs text-gray-500">
                       <span class="flex items-center gap-1">
@@ -284,7 +284,7 @@
                         <span class="w-2 h-2 rounded-full bg-gray-400"></span>
                         <span class="text-gray-800 text-sm font-medium">Debug Logs</span>
                       </div>
-                      <span class="text-indigo-600 text-xs font-medium">7 days</span>
+                      <span class="text-amber-600 text-xs font-medium">7 days</span>
                     </div>
                     <div class="flex items-center gap-3 text-xs text-gray-500">
                       <span class="flex items-center gap-1">
@@ -302,7 +302,7 @@
                 <!-- Footer -->
                 <div class="px-4 py-3 bg-gray-50 border-t border-gray-100 flex items-center justify-between">
                   <span class="text-gray-400 text-xs">Total: 3.4 TB across 2 regions</span>
-                  <span class="text-indigo-600 text-xs font-medium cursor-pointer hover:text-indigo-700">+ Add Policy</span>
+                  <span class="text-amber-600 text-xs font-medium cursor-pointer hover:text-amber-700">+ Add Policy</span>
                 </div>
               </div>
             </div>
@@ -321,8 +321,8 @@
                 <div class="grid grid-cols-3 gap-3">
                   <!-- Kubernetes -->
                   <div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm text-center">
-                    <div class="w-10 h-10 rounded-lg bg-indigo-50 flex items-center justify-center mx-auto mb-2">
-                      <svg class="w-5 h-5 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <div class="w-10 h-10 rounded-lg bg-amber-50 flex items-center justify-center mx-auto mb-2">
+                      <svg class="w-5 h-5 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/>
                       </svg>
                     </div>
@@ -332,8 +332,8 @@
 
                   <!-- Docker -->
                   <div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm text-center">
-                    <div class="w-10 h-10 rounded-lg bg-indigo-50 flex items-center justify-center mx-auto mb-2">
-                      <svg class="w-5 h-5 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <div class="w-10 h-10 rounded-lg bg-amber-50 flex items-center justify-center mx-auto mb-2">
+                      <svg class="w-5 h-5 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"/>
                       </svg>
                     </div>
@@ -343,8 +343,8 @@
 
                   <!-- Application -->
                   <div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm text-center">
-                    <div class="w-10 h-10 rounded-lg bg-indigo-50 flex items-center justify-center mx-auto mb-2">
-                      <svg class="w-5 h-5 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <div class="w-10 h-10 rounded-lg bg-amber-50 flex items-center justify-center mx-auto mb-2">
+                      <svg class="w-5 h-5 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                       </svg>
                     </div>
@@ -354,8 +354,8 @@
 
                   <!-- Syslog -->
                   <div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm text-center">
-                    <div class="w-10 h-10 rounded-lg bg-indigo-50 flex items-center justify-center mx-auto mb-2">
-                      <svg class="w-5 h-5 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <div class="w-10 h-10 rounded-lg bg-amber-50 flex items-center justify-center mx-auto mb-2">
+                      <svg class="w-5 h-5 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"/>
                       </svg>
                     </div>
@@ -365,8 +365,8 @@
 
                   <!-- Files -->
                   <div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm text-center">
-                    <div class="w-10 h-10 rounded-lg bg-indigo-50 flex items-center justify-center mx-auto mb-2">
-                      <svg class="w-5 h-5 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <div class="w-10 h-10 rounded-lg bg-amber-50 flex items-center justify-center mx-auto mb-2">
+                      <svg class="w-5 h-5 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                       </svg>
                     </div>
@@ -376,8 +376,8 @@
 
                   <!-- Cloud -->
                   <div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm text-center">
-                    <div class="w-10 h-10 rounded-lg bg-indigo-50 flex items-center justify-center mx-auto mb-2">
-                      <svg class="w-5 h-5 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <div class="w-10 h-10 rounded-lg bg-amber-50 flex items-center justify-center mx-auto mb-2">
+                      <svg class="w-5 h-5 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"/>
                       </svg>
                     </div>
@@ -394,8 +394,8 @@
             </div>
           </div>
           <div class="order-1 lg:order-2">
-            <div class="flex h-14 w-14 items-center justify-center rounded-xl bg-indigo-50 ring-1 ring-indigo-200 mb-6">
-              <svg class="h-7 w-7 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <div class="flex h-14 w-14 items-center justify-center rounded-xl bg-amber-50 ring-1 ring-amber-200 mb-6">
+              <svg class="h-7 w-7 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8.25 9V5.25A2.25 2.25 0 0110.5 3h6a2.25 2.25 0 012.25 2.25v13.5A2.25 2.25 0 0116.5 21h-6a2.25 2.25 0 01-2.25-2.25V15M12 9l3 3m0 0l-3 3m3-3H2.25" />
               </svg>
             </div>
@@ -646,7 +646,7 @@
                         <span class="w-2 h-2 rounded-full bg-emerald-500"></span>
                         <span class="text-gray-800 text-sm font-medium">Slow Queries</span>
                       </div>
-                      <span class="px-1.5 py-0.5 bg-indigo-100 text-indigo-700 rounded text-[10px] font-medium">Info</span>
+                      <span class="px-1.5 py-0.5 bg-amber-100 text-amber-700 rounded text-[10px] font-medium">Info</span>
                     </div>
                     <div class="text-xs text-gray-500 mb-2">
                       <span class="font-mono bg-gray-100 px-1 py-0.5 rounded">duration_ms &gt; 5000</span>
@@ -771,9 +771,9 @@
 
           <!-- Card 3: Workflows -->
           <div class="group relative">
-            <div class="relative h-full rounded-2xl border border-gray-200 bg-white p-8 transition-all duration-300 hover:border-indigo-200 hover:shadow-lg">
-              <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-indigo-50 ring-1 ring-indigo-200">
-                <svg class="h-6 w-6 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <div class="relative h-full rounded-2xl border border-gray-200 bg-white p-8 transition-all duration-300 hover:border-amber-200 hover:shadow-lg">
+              <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-amber-50 ring-1 ring-amber-200">
+                <svg class="h-6 w-6 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z" />
                 </svg>
               </div>
@@ -908,7 +908,7 @@
         <!-- Slack Demo -->
         <div class="mt-12 lg:mt-0 relative">
           <!-- Decorative gradient background -->
-          <div class="absolute -inset-4 bg-gradient-to-r from-amber-500/20 via-orange-500/20 to-amber-500/20 rounded-3xl blur-2xl"></div>
+          <div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
 
           <div class="relative rounded-2xl bg-[#1a1d21] shadow-2xl ring-1 ring-white/10 overflow-hidden">
             <!-- Slack Window Header -->
diff --git a/Home/Views/metrics.ejs b/Home/Views/metrics.ejs
index ae79f10b8c..415ad70e96 100644
--- a/Home/Views/metrics.ejs
+++ b/Home/Views/metrics.ejs
@@ -887,7 +887,7 @@
           <!-- Slack Demo -->
           <div class="mt-12 lg:mt-0 relative">
             <!-- Decorative gradient background -->
-            <div class="absolute -inset-4 bg-gradient-to-r from-purple-500/20 via-violet-500/20 to-purple-500/20 rounded-3xl blur-2xl"></div>
+            <div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
 
             <div class="relative rounded-2xl bg-[#1a1d21] shadow-2xl ring-1 ring-white/10 overflow-hidden">
               <!-- Slack Window Header -->
diff --git a/Home/Views/monitoring.ejs b/Home/Views/monitoring.ejs
index 7bc6259387..7aeae8db97 100644
--- a/Home/Views/monitoring.ejs
+++ b/Home/Views/monitoring.ejs
@@ -1156,7 +1156,7 @@
         <div class="mt-16 lg:mt-0">
           <div class="relative" id="slack-demo">
             <!-- Decorative background elements -->
-            <div class="absolute -inset-4 bg-gradient-to-r from-purple-500/10 via-pink-500/10 to-orange-500/10 rounded-3xl blur-2xl"></div>
+            <div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
 
             <!-- Slack Window -->
             <div class="relative bg-[#1a1d21] rounded-2xl shadow-2xl overflow-hidden max-w-md mx-auto ring-1 ring-white/10">
diff --git a/Home/Views/on-call.ejs b/Home/Views/on-call.ejs
index 8d4b46d565..d8afa43104 100755
--- a/Home/Views/on-call.ejs
+++ b/Home/Views/on-call.ejs
@@ -211,7 +211,7 @@
           <div class="mt-12 lg:mt-0">
             <div class="relative">
               <!-- Subtle background -->
-              <div class="absolute -inset-4 bg-orange-100/50 rounded-3xl blur-2xl"></div>
+              <div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
 
               <!-- Calendar-style Rotation Schedule -->
               <div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
@@ -318,7 +318,7 @@
           <div class="relative order-2 lg:order-1 mt-12 lg:mt-0">
             <div class="relative">
               <!-- Subtle background -->
-              <div class="absolute -inset-4 bg-amber-100/50 rounded-3xl blur-2xl"></div>
+              <div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
 
               <!-- Alert Log Timeline -->
               <div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
@@ -498,7 +498,7 @@
           <div class="mt-12 lg:mt-0">
             <div class="relative">
               <!-- Subtle background -->
-              <div class="absolute -inset-4 bg-orange-100/50 rounded-3xl blur-2xl"></div>
+              <div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
 
               <!-- Escalation Chain Visualization -->
               <div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
@@ -608,7 +608,7 @@
           <div class="relative order-2 lg:order-1 mt-12 lg:mt-0">
             <div class="relative">
               <!-- Subtle background -->
-              <div class="absolute -inset-4 bg-amber-100/50 rounded-3xl blur-2xl"></div>
+              <div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
 
               <!-- Multi-channel Notification Cards -->
               <div class="relative max-w-md mx-auto space-y-3">
@@ -949,7 +949,7 @@
         <!-- Slack Demo -->
         <div class="relative" id="oncall-slack-demo">
           <!-- Decorative background elements -->
-          <div class="absolute -inset-4 bg-gradient-to-r from-emerald-500/10 via-green-500/10 to-teal-500/10 rounded-3xl blur-2xl"></div>
+          <div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
 
           <!-- Slack Window -->
           <div class="relative bg-[#1a1d21] rounded-2xl shadow-2xl overflow-hidden max-w-md mx-auto ring-1 ring-white/10">
diff --git a/Home/Views/status-page.ejs b/Home/Views/status-page.ejs
index 23c6217677..d4799c7e00 100644
--- a/Home/Views/status-page.ejs
+++ b/Home/Views/status-page.ejs
@@ -1017,7 +1017,7 @@
           <!-- Slack Demo -->
           <div class="relative" id="status-slack-demo">
             <!-- Decorative background elements -->
-            <div class="absolute -inset-4 bg-gradient-to-r from-emerald-500/10 via-teal-500/10 to-cyan-500/10 rounded-3xl blur-2xl"></div>
+            <div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
 
             <!-- Slack Window -->
             <div class="relative bg-[#1a1d21] rounded-2xl shadow-2xl overflow-hidden max-w-md mx-auto ring-1 ring-white/10">
diff --git a/Home/Views/traces.ejs b/Home/Views/traces.ejs
index d2cf69089c..4333dde3a4 100644
--- a/Home/Views/traces.ejs
+++ b/Home/Views/traces.ejs
@@ -209,7 +209,7 @@
             <div class="mt-12 lg:mt-0">
               <div class="relative">
                 <!-- Subtle background -->
-                <div class="absolute -inset-4 bg-cyan-100/50 rounded-3xl blur-2xl"></div>
+                <div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
 
                 <!-- Service Map Visual -->
                 <div class="relative bg-white rounded-2xl border border-gray-200 shadow-lg p-6">
@@ -318,7 +318,7 @@
             <div class="order-2 lg:order-1 mt-12 lg:mt-0">
               <div class="relative">
                 <!-- Subtle background -->
-                <div class="absolute -inset-4 bg-teal-100/50 rounded-3xl blur-2xl"></div>
+                <div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
 
                 <!-- Waterfall Trace View -->
                 <div class="relative bg-white rounded-2xl border border-gray-200 shadow-lg p-6">
@@ -482,7 +482,7 @@
             <div class="mt-12 lg:mt-0">
               <div class="relative">
                 <!-- Subtle background -->
-                <div class="absolute -inset-4 bg-red-100/50 rounded-3xl blur-2xl"></div>
+                <div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
 
                 <!-- Error Spans in Trace View -->
                 <div class="relative bg-white rounded-2xl border border-gray-200 shadow-lg p-6">
@@ -571,7 +571,7 @@
             <div class="order-2 lg:order-1 mt-12 lg:mt-0">
               <div class="relative">
                 <!-- Subtle background -->
-                <div class="absolute -inset-4 bg-indigo-100/50 rounded-3xl blur-2xl"></div>
+                <div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
 
                 <!-- Correlated Logs and Traces View -->
                 <div class="relative bg-white rounded-2xl border border-gray-200 shadow-lg p-6">
@@ -885,7 +885,7 @@
           <!-- Slack Demo -->
           <div class="relative" id="traces-slack-demo">
             <!-- Decorative background elements -->
-            <div class="absolute -inset-4 bg-gradient-to-r from-yellow-500/10 via-amber-500/10 to-orange-500/10 rounded-3xl blur-2xl"></div>
+            <div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
 
             <!-- Slack Window -->
             <div class="relative bg-[#1a1d21] rounded-2xl shadow-2xl overflow-hidden max-w-md mx-auto ring-1 ring-white/10">
diff --git a/Home/Views/workflows.ejs b/Home/Views/workflows.ejs
index 73d6c7dfe0..48a8e283d5 100644
--- a/Home/Views/workflows.ejs
+++ b/Home/Views/workflows.ejs
@@ -209,7 +209,7 @@
           <div class="mt-12 lg:mt-0">
             <div class="relative">
               <!-- Subtle background -->
-              <div class="absolute -inset-4 bg-violet-100/50 rounded-3xl blur-2xl"></div>
+              <div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
 
               <!-- Workflow Builder Diagram -->
               <div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
@@ -228,15 +228,15 @@
                   <div class="flex flex-col items-center gap-3">
                     <!-- Trigger Node -->
                     <div class="relative">
-                      <div class="bg-violet-600 text-white px-4 py-3 rounded-xl shadow-md flex items-center gap-2 min-w-[160px]">
-                        <div class="w-8 h-8 rounded-lg bg-violet-500 flex items-center justify-center">
+                      <div class="bg-sky-600 text-white px-4 py-3 rounded-xl shadow-md flex items-center gap-2 min-w-[160px]">
+                        <div class="w-8 h-8 rounded-lg bg-sky-500 flex items-center justify-center">
                           <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                           </svg>
                         </div>
                         <div>
                           <div class="text-xs font-semibold">Trigger</div>
-                          <div class="text-[10px] text-violet-200">On Incident Created</div>
+                          <div class="text-[10px] text-sky-200">On Incident Created</div>
                         </div>
                       </div>
                     </div>
@@ -305,7 +305,7 @@
 
                     <!-- Email Action -->
                     <div class="bg-white border border-gray-200 px-3 py-2.5 rounded-lg shadow-sm flex items-center gap-2 -mt-1 ml-[-60px]">
-                      <div class="w-6 h-6 rounded bg-violet-100 flex items-center justify-center">
+                      <div class="w-6 h-6 rounded bg-sky-100 flex items-center justify-center">
                         <svg class="w-3.5 h-3.5 text-violet-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                         </svg>
@@ -336,7 +336,7 @@
           <div class="order-2 lg:order-1 mt-12 lg:mt-0">
             <div class="relative">
               <!-- Subtle background -->
-              <div class="absolute -inset-4 bg-violet-100/50 rounded-3xl blur-2xl"></div>
+              <div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
 
               <!-- Workflow Logs Panel -->
               <div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
@@ -404,8 +404,8 @@
                   </div>
 
                   <!-- Running Log -->
-                  <div class="flex items-start gap-3 p-3 bg-violet-50 rounded-lg border border-violet-100">
-                    <div class="w-6 h-6 rounded-full bg-violet-100 flex items-center justify-center flex-shrink-0 mt-0.5">
+                  <div class="flex items-start gap-3 p-3 bg-sky-50 rounded-lg border border-sky-100">
+                    <div class="w-6 h-6 rounded-full bg-sky-100 flex items-center justify-center flex-shrink-0 mt-0.5">
                       <svg class="w-3.5 h-3.5 text-violet-600 animate-spin" fill="none" viewBox="0 0 24 24">
                         <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                         <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
@@ -413,8 +413,8 @@
                     </div>
                     <div class="flex-1 min-w-0">
                       <div class="flex items-center justify-between">
-                        <span class="text-sm font-medium text-violet-800">Sync User Data</span>
-                        <span class="text-xs text-violet-400">Running...</span>
+                        <span class="text-sm font-medium text-sky-800">Sync User Data</span>
+                        <span class="text-xs text-sky-400">Running...</span>
                       </div>
                       <div class="text-xs text-violet-600 mt-0.5">Step 2 of 5 - Processing records</div>
                     </div>
@@ -522,7 +522,7 @@
           <div class="mt-12 lg:mt-0">
             <div class="relative">
               <!-- Subtle background -->
-              <div class="absolute -inset-4 bg-violet-100/50 rounded-3xl blur-2xl"></div>
+              <div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
 
               <!-- Variables Panel -->
               <div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
@@ -550,14 +550,14 @@
                   <div class="bg-gray-50 rounded-lg p-3 border border-gray-200">
                     <div class="flex items-center justify-between mb-2">
                       <div class="flex items-center gap-2">
-                        <div class="w-6 h-6 rounded bg-violet-100 flex items-center justify-center">
+                        <div class="w-6 h-6 rounded bg-sky-100 flex items-center justify-center">
                           <svg class="w-3.5 h-3.5 text-violet-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                           </svg>
                         </div>
                         <span class="text-sm font-medium text-gray-800">SLACK_WEBHOOK_URL</span>
                       </div>
-                      <span class="px-2 py-0.5 bg-violet-100 text-violet-700 text-[10px] font-medium rounded">Secret</span>
+                      <span class="px-2 py-0.5 bg-sky-100 text-violet-700 text-[10px] font-medium rounded">Secret</span>
                     </div>
                     <div class="flex items-center gap-2 bg-white rounded border border-gray-200 px-3 py-2">
                       <span class="text-gray-400 text-xs font-mono tracking-wider">************************</span>
@@ -644,7 +644,7 @@
           <div class="order-2 lg:order-1 mt-12 lg:mt-0">
             <div class="relative">
               <!-- Subtle background -->
-              <div class="absolute -inset-4 bg-violet-100/50 rounded-3xl blur-2xl"></div>
+              <div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
 
               <!-- Code Editor Mockup -->
               <div class="relative bg-gray-900 rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-700">
@@ -659,7 +659,7 @@
                     <span class="text-gray-400 text-xs">custom-action.js</span>
                   </div>
                   <div class="flex items-center gap-2">
-                    <span class="px-2 py-0.5 bg-violet-600/20 text-violet-400 text-[10px] font-medium rounded">JavaScript</span>
+                    <span class="px-2 py-0.5 bg-sky-600/20 text-sky-400 text-[10px] font-medium rounded">JavaScript</span>
                   </div>
                 </div>
 
@@ -667,7 +667,7 @@
                 <div class="p-4 font-mono text-xs leading-relaxed overflow-x-auto">
                   <div class="flex">
                     <div class="text-gray-600 select-none pr-4 text-right" style="min-width: 2rem;">1</div>
-                    <div><span class="text-violet-400">async</span> <span class="text-sky-400">function</span> <span class="text-yellow-300">execute</span><span class="text-gray-300">(</span><span class="text-orange-300">context</span><span class="text-gray-300">) {</span></div>
+                    <div><span class="text-sky-400">async</span> <span class="text-sky-400">function</span> <span class="text-yellow-300">execute</span><span class="text-gray-300">(</span><span class="text-orange-300">context</span><span class="text-gray-300">) {</span></div>
                   </div>
                   <div class="flex">
                     <div class="text-gray-600 select-none pr-4 text-right" style="min-width: 2rem;">2</div>
@@ -675,7 +675,7 @@
                   </div>
                   <div class="flex">
                     <div class="text-gray-600 select-none pr-4 text-right" style="min-width: 2rem;">3</div>
-                    <div><span class="text-gray-300">  </span><span class="text-violet-400">const</span> <span class="text-gray-300">{ incident } = context.</span><span class="text-sky-300">data</span><span class="text-gray-300">;</span></div>
+                    <div><span class="text-gray-300">  </span><span class="text-sky-400">const</span> <span class="text-gray-300">{ incident } = context.</span><span class="text-sky-300">data</span><span class="text-gray-300">;</span></div>
                   </div>
                   <div class="flex">
                     <div class="text-gray-600 select-none pr-4 text-right" style="min-width: 2rem;">4</div>
@@ -687,7 +687,7 @@
                   </div>
                   <div class="flex">
                     <div class="text-gray-600 select-none pr-4 text-right" style="min-width: 2rem;">6</div>
-                    <div><span class="text-gray-300">  </span><span class="text-violet-400">await</span> <span class="text-yellow-300">fetch</span><span class="text-gray-300">(</span><span class="text-emerald-400">process.env.SLACK_URL</span><span class="text-gray-300">, {</span></div>
+                    <div><span class="text-gray-300">  </span><span class="text-sky-400">await</span> <span class="text-yellow-300">fetch</span><span class="text-gray-300">(</span><span class="text-emerald-400">process.env.SLACK_URL</span><span class="text-gray-300">, {</span></div>
                   </div>
                   <div class="flex">
                     <div class="text-gray-600 select-none pr-4 text-right" style="min-width: 2rem;">7</div>
@@ -715,7 +715,7 @@
                   </div>
                   <div class="flex">
                     <div class="text-gray-600 select-none pr-4 text-right" style="min-width: 2rem;">13</div>
-                    <div><span class="text-gray-300">  </span><span class="text-violet-400">return</span><span class="text-gray-300"> { success: </span><span class="text-orange-400">true</span><span class="text-gray-300"> };</span></div>
+                    <div><span class="text-gray-300">  </span><span class="text-sky-400">return</span><span class="text-gray-300"> { success: </span><span class="text-orange-400">true</span><span class="text-gray-300"> };</span></div>
                   </div>
                   <div class="flex">
                     <div class="text-gray-600 select-none pr-4 text-right" style="min-width: 2rem;">14</div>
@@ -974,7 +974,7 @@
         <div class="mt-16 lg:mt-0">
           <div class="relative" id="workflows-slack-demo">
             <!-- Decorative background elements -->
-            <div class="absolute -inset-4 bg-gradient-to-r from-sky-500/10 via-purple-500/10 to-pink-500/10 rounded-3xl blur-2xl"></div>
+            <div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
 
             <!-- Slack Window -->
             <div class="relative bg-[#1a1d21] rounded-2xl shadow-2xl overflow-hidden max-w-md mx-auto ring-1 ring-white/10">