diff --git a/assets/css/custom.css b/assets/css/custom.css
index eda0821..d5cffc4 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -1,13 +1,15 @@
 :root {
-  --bg: #f7f7f5;
+  --bg: #f5f7fa;
   --surface: #ffffff;
-  --text: #111111;
-  --muted: #6b6b6b;
-  --border: #e6e6e6;
-  --accent: #111111;
+  --text: #1a1a2e;
+  --muted: #6a6a8a;
+  --border: #e0e6ed;
+  --primary: #4a90e2; /* Blue */
+  --secondary: #8e44ad; /* Purple */
+  --accent: #4a90e2; 
   --radius-sm: 6px;
   --radius-md: 10px;
-  --shadow-sm: 0 10px 30px rgba(17, 17, 17, 0.08);
+  --shadow-sm: 0 10px 30px rgba(74, 144, 226, 0.1);
 }
 
 body {
@@ -31,15 +33,15 @@ body {
 
 .navbar .nav-link:hover,
 .navbar .nav-link:focus {
-  color: var(--muted);
+  color: var(--primary);
 }
 
 .hero-section {
-  background: var(--surface);
+  background: linear-gradient(135deg, rgba(74, 144, 226, 0.05), rgba(142, 68, 173, 0.05));
 }
 
 .hero-card {
-  background: var(--bg);
+  background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--radius-md);
   box-shadow: var(--shadow-sm);
@@ -56,6 +58,7 @@ body {
 
 .card {
   border-radius: var(--radius-md);
+  border: 1px solid var(--border);
 }
 
 .info-card {
@@ -67,22 +70,35 @@ body {
 .badge {
   border-radius: 999px;
   font-weight: 500;
-  color: var(--text);
+  color: var(--primary);
+  background: rgba(74, 144, 226, 0.1);
 }
 
 .btn {
   border-radius: var(--radius-sm);
   font-weight: 600;
+  transition: all 0.3s ease;
 }
 
-.btn-dark {
-  background: var(--accent);
-  border-color: var(--accent);
+.btn-primary-custom {
+  background: var(--primary);
+  border-color: var(--primary);
+  color: #fff;
 }
 
-.btn-outline-dark {
-  border-color: var(--accent);
-  color: var(--accent);
+.btn-primary-custom:hover {
+  background: var(--secondary);
+  border-color: var(--secondary);
+}
+
+.btn-outline-primary-custom {
+  border-color: var(--primary);
+  color: var(--primary);
+}
+
+.btn-outline-primary-custom:hover {
+  background: var(--primary);
+  color: #fff;
 }
 
 .form-control {
@@ -91,8 +107,8 @@ body {
 }
 
 .form-control:focus {
-  box-shadow: none;
-  border-color: var(--text);
+  box-shadow: 0 0 0 0.2rem rgba(74, 144, 226, 0.25);
+  border-color: var(--primary);
 }
 
 .icon-pill {
@@ -102,7 +118,7 @@ body {
   border-radius: 999px;
   align-items: center;
   justify-content: center;
-  background: var(--text);
+  background: var(--primary);
   color: #fff;
   font-size: 0.75rem;
 }
@@ -118,4 +134,4 @@ body {
   .hero-section .display-5 {
     font-size: 2.2rem;
   }
-}
+}
\ No newline at end of file
diff --git a/index.php b/index.php
index b8984a4..d37fdc8 100644
--- a/index.php
+++ b/index.php
@@ -76,7 +76,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
             <li class="nav-item"><a class="nav-link" href="#portfolio">Portfolio</a></li>
             <li class="nav-item"><a class="nav-link" href="#about">About</a></li>
             <li class="nav-item"><a class="nav-link" href="#testimonials">Testimonials</a></li>
-            <li class="nav-item"><a class="nav-link btn btn-dark text-white px-3" href="#contact">Email me</a></li>
+            <li class="nav-item"><a class="nav-link btn btn-primary-custom text-white px-3" href="#contact">Email me</a></li>
           </ul>
         </div>
       </div>
@@ -92,20 +92,20 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
             <h1 class="display-5 fw-semibold">I design calm, conversion-ready experiences for modern brands.</h1>
             <p class="lead text-muted mt-3">Specialized in web product design, UI systems, and responsive build-outs that ship fast and feel premium.</p>
             <div class="d-flex flex-column flex-sm-row gap-3 mt-4">
-              <a class="btn btn-dark btn-lg px-4" href="#contact">Email me</a>
-              <a class="btn btn-outline-dark btn-lg px-4" href="#portfolio">View work</a>
+              <a class="btn btn-primary-custom btn-lg px-4" href="#contact">Email me</a>
+              <a class="btn btn-outline-primary-custom btn-lg px-4" href="#portfolio">View work</a>
             </div>
             <div class="d-flex gap-4 mt-4 text-muted small">
               <div>
-                <div class="fw-semibold text-dark">8+</div>
+                <div class="fw-semibold text-primary">8+</div>
                 <div>Years shipping</div>
               </div>
               <div>
-                <div class="fw-semibold text-dark">40+</div>
+                <div class="fw-semibold text-primary">40+</div>
                 <div>Projects delivered</div>
               </div>
               <div>
-                <div class="fw-semibold text-dark">12</div>
+                <div class="fw-semibold text-primary">12</div>
                 <div>Teams supported</div>
               </div>
             </div>
@@ -128,7 +128,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
                   <span>Weekly async updates and clear handoff docs.</span>
                 </li>
               </ul>
-              <a class="text-decoration-none fw-semibold" href="#contact">Let’s talk about your next launch →</a>
+              <a class="text-decoration-none fw-semibold text-primary" href="#contact">Let’s talk about your next launch →</a>
             </div>
           </div>
         </div>
@@ -160,12 +160,12 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
                 <p class="text-muted"><?= htmlspecialchars($project['desc']) ?></p>
                 <div class="d-flex flex-wrap gap-2">
                   <?php foreach ($project['tags'] as $tag): ?>
-                    <span class="badge text-bg-light border"><?= htmlspecialchars($tag) ?></span>
+                    <span class="badge"><?= htmlspecialchars($tag) ?></span>
                   <?php endforeach; ?>
                 </div>
               </div>
               <div class="card-footer bg-white border-0 px-4 pb-4">
-                <a class="text-decoration-none fw-semibold" href="#contact">Request details →</a>
+                <a class="text-decoration-none fw-semibold text-primary" href="#contact">Request details →</a>
               </div>
             </div>
           </div>
@@ -231,7 +231,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
             <div class="card h-100 border-0 shadow-sm">
               <div class="card-body p-4">
                 <p class="text-muted">“<?= htmlspecialchars($item['quote']) ?>”</p>
-                <p class="fw-semibold mb-0"><?= htmlspecialchars($item['name']) ?></p>
+                <p class="fw-semibold mb-0 text-primary"><?= htmlspecialchars($item['name']) ?></p>
                 <p class="text-muted small mb-0"><?= htmlspecialchars($item['role']) ?></p>
               </div>
             </div>
@@ -282,7 +282,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
                   <?php endif; ?>
                 </div>
                 <div class="col-12 d-flex flex-column flex-sm-row gap-3 align-items-sm-center">
-                  <button class="btn btn-dark px-4" type="submit">Email me</button>
+                  <button class="btn btn-primary-custom px-4" type="submit">Email me</button>
                   <p class="text-muted small mb-0">By submitting, you agree to be contacted about your request.</p>
                 </div>
               </div>
@@ -314,4 +314,4 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
   <script src="assets/js/main.js?v=<?= htmlspecialchars((string) time()) ?>"></script>
 </body>
-</html>
+</html>
\ No newline at end of file