diff --git a/assets/js/main.js b/assets/js/main.js
index b9fda40..f0249ad 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -11,16 +11,16 @@ document.addEventListener('DOMContentLoaded', function () {
 
             // Deactivate all tabs and hide all content
             tabs.forEach(t => {
-                t.classList.remove('active-tab', 'border-black', 'text-gray-900');
-                t.classList.add('text-gray-500', 'border-transparent');
+                t.classList.remove('active-tab', 'border-blue-600', 'text-blue-600', 'bg-blue-50');
+                t.classList.add('text-gray-500', 'border-transparent', 'hover:text-blue-600', 'hover:border-blue-600');
             });
             contents.forEach(c => {
                 c.classList.add('hidden');
             });
 
             // Activate the clicked tab and show its content
-            tab.classList.add('active-tab', 'border-black', 'text-gray-900');
-            tab.classList.remove('text-gray-500', 'border-transparent');
+            tab.classList.add('active-tab', 'border-blue-600', 'text-blue-600', 'bg-blue-50');
+            tab.classList.remove('text-gray-500', 'border-transparent', 'hover:text-blue-600', 'hover:border-blue-600');
             
             const activeContent = tabsContainer.querySelector(`#${target}`);
             if (activeContent) {
diff --git a/how_it_works.php b/how_it_works.php
index 3ebc453..2fc4a87 100644
--- a/how_it_works.php
+++ b/how_it_works.php
@@ -74,7 +74,7 @@
             </div>
         </div>
 
-        <a href="roi.php" class="text-blue-600 font-semibold hover:underline">See ROI →</a>
+        <a href="roi.php" class="inline-block bg-blue-600 text-white font-semibold px-8 py-3 rounded-lg hover:bg-blue-700 transition">See ROI →</a>
 
     </main>
 
diff --git a/product.php b/product.php
index 9b5c52a..8f61e3b 100644
--- a/product.php
+++ b/product.php
@@ -7,13 +7,7 @@
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
     <script src="https://cdn.tailwindcss.com"></script>
-    <style>
-        .tab-button.active-tab {
-            border-color: #4F46E5;
-            color: #4F46E5;
-            background-color: #EEF2FF;
-        }
-    </style>
+
 </head>
 <body class="bg-gray-50 text-gray-900">
 
@@ -62,13 +56,11 @@
             
             <div id="human-in-loop-tabs" class="mt-10 max-w-4xl mx-auto">
                 <!-- Tab Buttons -->
-                <div class="flex justify-center border-b border-gray-200">
-                    <button data-tab="automation" class="tab-button active-tab text-base font-semibold py-3 px-6 border-b-2">Automation</button>
-                    <button data-tab="ai-outputs" class="tab-button text-base font-semibold py-3 px-6 border-b-2">AI Outputs</button>
-                    <button data-tab="security" class="tab-button text-base font-semibold py-3 px-6 border-b-2">Security</button>
-                </div>
-
-                <!-- Tab Content -->
+                                        <div class="flex justify-center border-b border-gray-200">
+                                            <button data-tab="automation" class="tab-button active-tab text-base font-semibold py-3 px-6 border-b-2 border-blue-600 text-blue-600 bg-blue-50">Automation</button>
+                                            <button data-tab="ai-outputs" class="tab-button text-base font-semibold py-3 px-6 border-b-2 border-transparent text-gray-500 hover:text-blue-600 hover:border-blue-600">AI Outputs</button>
+                                            <button data-tab="security" class="tab-button text-base font-semibold py-3 px-6 border-b-2 border-transparent text-gray-500 hover:text-blue-600 hover:border-blue-600">Security</button>
+                                        </div>                <!-- Tab Content -->
                 <div class="mt-8 text-left">
                     <div id="automation" class="tab-content">
                         <div class="grid md:grid-cols-2 gap-12 items-center">
@@ -103,7 +95,7 @@
                 </div>
             </div>
 
-            <a href="how_it_works.php" class="mt-16 inline-block bg-indigo-600 text-white text-sm px-8 py-3 rounded-lg font-semibold hover:bg-indigo-700 transition">See How It Works →</a>
+            <a href="how_it_works.php" class="mt-16 inline-block bg-blue-600 text-white text-sm px-8 py-3 rounded-lg font-semibold hover:bg-blue-700 transition">See How It Works →</a>
         </section>
     </main>
 
