diff --git a/index.html b/index.html
index 7e79c3c..891a671 100644
--- a/index.html
+++ b/index.html
@@ -15,23 +15,23 @@
         .hover-accent:hover {
             background-color: #e69318;
         }
-        .bg-dark {
-            background-color: #292929;
-        }
         .logo {
             height: 50px;
             width: auto;
         }
     </style>
 </head>
-<body class="bg-dark text-white">
+<body class="bg-white text-gray-800">
     <!-- Header -->
-    <header class="bg-gray-900 shadow-sm">
+    <header class="bg-white shadow-sm">
         <nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
             <div class="flex justify-between items-center">
                 <div class="flex items-center">
-                    <img src="images/logo.png" alt="SAR Link Logo" class="logo mr-3">
-                    <span class="text-gray-400 ml-2">by Baraveli Dev</span>
+                    <div class="flex flex-col items-center">
+                        <img src="images/logo.png" alt="SAR Link Logo" class="logo">
+                        <span class="font-semibold mt-1">SAR Link</span>
+                        <span class="text-gray-500 text-sm">by Baraveli Dev</span>
+                    </div>
                 </div>
                 <a href="https://portal.sarlink.net" class="bg-accent text-white px-6 py-2 rounded-lg hover-accent transition-colors">
                     Go to Portal
@@ -58,40 +58,38 @@
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
         <h2 class="text-3xl font-bold text-center mb-12">Smart Features for Modern Families</h2>
         <div class="grid md:grid-cols-3 gap-8">
-            <div class="bg-gray-900 p-6 rounded-lg shadow-md">
+            <div class="bg-white p-6 rounded-lg shadow-md border border-gray-200">
                 <h3 class="text-xl font-semibold mb-4 text-accent">Wireless Freedom</h3>
-                <p class="text-gray-300">Stay connected anywhere within our coverage area with seamless roaming capabilities. Perfect for moving around the island.</p>
+                <p class="text-gray-600">Stay connected anywhere within our coverage area with seamless roaming capabilities. Perfect for moving around the island.</p>
             </div>
-            <div class="bg-gray-900 p-6 rounded-lg shadow-md">
+            <div class="bg-white p-6 rounded-lg shadow-md border border-gray-200">
                 <h3 class="text-xl font-semibold mb-4 text-accent">Parental Controls</h3>
-                <p class="text-gray-300">Set time limits for your children's devices and maintain healthy digital habits. Perfect for managing screen time and online activities.</p>
+                <p class="text-gray-600">Set time limits for your children's devices and maintain healthy digital habits. Perfect for managing screen time and online activities.</p>
             </div>
-            <div class="bg-gray-900 p-6 rounded-lg shadow-md">
+            <div class="bg-white p-6 rounded-lg shadow-md border border-gray-200">
                 <h3 class="text-xl font-semibold mb-4 text-accent">Enhanced Security & Family Safety</h3>
-                <p class="text-gray-300">Built-in protection includes ad blocking, inappropriate content filtering, and malware protection for a safer online experience.</p>
+                <p class="text-gray-600">Built-in protection includes ad blocking, inappropriate content filtering, and malware protection for a safer online experience.</p>
             </div>
         </div>
     </div>
 
     <!-- Coverage Section -->
-    <div class="bg-gray-900 py-16">
+    <div class="bg-gray-50 py-16">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div class="text-center mb-12">
                 <h2 class="text-3xl font-bold mb-4">Expanding Coverage</h2>
-                <p class="text-xl text-gray-300">Our wireless network is growing to serve you better</p>
+                <p class="text-xl text-gray-600">Our wireless network is growing to serve you better</p>
             </div>
-            <div class="bg-dark p-8 rounded-lg shadow-md">
-                <div class="grid md:grid-cols-2 gap-8">
-                    <div class="text-center p-6 border border-accent rounded-lg">
-                        <h3 class="text-2xl font-bold text-accent mb-2">Current Coverage</h3>
-                        <p class="text-4xl font-bold mb-2">40%</p>
-                        <p class="text-gray-400">of Faafu Dharanboodhoo</p>
-                    </div>
-                    <div class="text-center p-6 border border-accent rounded-lg">
-                        <h3 class="text-2xl font-bold text-accent mb-2">2025 Target</h3>
-                        <p class="text-4xl font-bold mb-2">100%</p>
-                        <p class="text-gray-400">of populated areas</p>
-                    </div>
+            <div class="grid md:grid-cols-2 gap-8">
+                <div class="text-center p-6 bg-white rounded-lg shadow-md border border-accent">
+                    <h3 class="text-2xl font-bold text-accent mb-2">Current Coverage</h3>
+                    <p class="text-4xl font-bold mb-2">40%</p>
+                    <p class="text-gray-600">of Faafu Dharanboodhoo</p>
+                </div>
+                <div class="text-center p-6 bg-white rounded-lg shadow-md border border-accent">
+                    <h3 class="text-2xl font-bold text-accent mb-2">2025 Target</h3>
+                    <p class="text-4xl font-bold mb-2">100%</p>
+                    <p class="text-gray-600">of populated areas</p>
                 </div>
             </div>
         </div>
@@ -101,35 +99,35 @@
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
         <h2 class="text-3xl font-bold text-center mb-12">Simple, Flexible Pricing</h2>
         <div class="grid md:grid-cols-3 lg:grid-cols-6 gap-4">
-            <div class="bg-dark p-6 rounded-lg shadow-md text-center">
+            <div class="bg-white p-6 rounded-lg shadow-md border border-gray-200 text-center">
                 <h3 class="font-semibold mb-2">1 Device</h3>
                 <p class="text-2xl font-bold text-accent mb-2">MVR 100</p>
-                <p class="text-gray-400">per month</p>
+                <p class="text-gray-600">per month</p>
             </div>
-            <div class="bg-dark p-6 rounded-lg shadow-md text-center">
+            <div class="bg-white p-6 rounded-lg shadow-md border border-gray-200 text-center">
                 <h3 class="font-semibold mb-2">2 Devices</h3>
                 <p class="text-2xl font-bold text-accent mb-2">MVR 175</p>
-                <p class="text-gray-400">per month</p>
+                <p class="text-gray-600">per month</p>
             </div>
-            <div class="bg-dark p-6 rounded-lg shadow-md text-center">
+            <div class="bg-white p-6 rounded-lg shadow-md border border-gray-200 text-center">
                 <h3 class="font-semibold mb-2">3 Devices</h3>
                 <p class="text-2xl font-bold text-accent mb-2">MVR 250</p>
-                <p class="text-gray-400">per month</p>
+                <p class="text-gray-600">per month</p>
             </div>
-            <div class="bg-dark p-6 rounded-lg shadow-md text-center">
+            <div class="bg-white p-6 rounded-lg shadow-md border border-gray-200 text-center">
                 <h3 class="font-semibold mb-2">4 Devices</h3>
                 <p class="text-2xl font-bold text-accent mb-2">MVR 325</p>
-                <p class="text-gray-400">per month</p>
+                <p class="text-gray-600">per month</p>
             </div>
-            <div class="bg-dark p-6 rounded-lg shadow-md text-center">
+            <div class="bg-white p-6 rounded-lg shadow-md border border-gray-200 text-center">
                 <h3 class="font-semibold mb-2">5 Devices</h3>
                 <p class="text-2xl font-bold text-accent mb-2">MVR 400</p>
-                <p class="text-gray-400">per month</p>
+                <p class="text-gray-600">per month</p>
             </div>
-            <div class="bg-dark p-6 rounded-lg shadow-md text-center">
+            <div class="bg-white p-6 rounded-lg shadow-md border border-gray-200 text-center">
                 <h3 class="font-semibold mb-2">6 Devices</h3>
                 <p class="text-2xl font-bold text-accent mb-2">MVR 475</p>
-                <p class="text-gray-400">per month</p>
+                <p class="text-gray-600">per month</p>
             </div>
         </div>
     </div>
@@ -144,16 +142,16 @@
     </div>
 
     <!-- Footer -->
-    <footer class="bg-gray-900 text-white py-8">
+    <footer class="bg-gray-50 py-8">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div class="md:flex md:justify-between">
                 <div class="mb-8 md:mb-0">
                     <h3 class="text-xl font-bold text-accent mb-2">SAR Link</h3>
-                    <p class="text-gray-400">A Baraveli Dev Service</p>
-                    <p class="text-gray-400">Serving Faafu Dharanboodhoo</p>
+                    <p class="text-gray-600">A Baraveli Dev Service</p>
+                    <p class="text-gray-600">Serving Faafu Dharanboodhoo</p>
                 </div>
                 <div>
-                    <p class="text-gray-400">100+ Satisfied Customers and Growing</p>
+                    <p class="text-gray-600">100+ Satisfied Customers and Growing</p>
                 </div>
             </div>
         </div>
