diff --git a/contact.html b/contact.html
index cda230a..29ab5f7 100644
--- a/contact.html
+++ b/contact.html
@@ -347,6 +347,10 @@ <h2 class="title">Contact Me</h2>
                             </svg>
                             Instagram
                         </a>
+                        <a href="/assets/vimal-patel.vcf" download
+                            style="color: var(--text); text-decoration: none; border-bottom: 1px dashed var(--border)">
+                            Download vCard
+                        </a>
                     </div>
                 </div>
             </section>
@@ -364,12 +368,6 @@ <h2 class="title">Contact Me</h2>
             style="margin: 22px 0; color: var(--muted); display:flex; align-items:center; justify-content:space-between; gap:16px; font-size: 13px; padding: 1.2rem;">
             <span>© <span id="year"></span> Vimal Tech. All rights reserved.</span>
             <span>Made with ❤️ in Valsad</span>
-            <span>
-                <a href="/assets/vimal-patel.vcf" download
-                    style="color: var(--text); text-decoration: none; border-bottom: 1px dashed var(--border)">
-                    Download vCard
-                </a>
-            </span>
         </footer>
     </div>
 
diff --git a/css/main.css b/css/main.css
index 052f53d..9bf91bd 100644
--- a/css/main.css
+++ b/css/main.css
@@ -259,77 +259,6 @@ body.dark #darkModeToggle:hover {
   /* margin-top: 10px; */
 }
 
-/* Elegant visitor counter */
-.visitor-count {
-  display: inline-block;
-  background: linear-gradient(135deg,
-      rgba(255, 255, 255, 0.25),
-      rgba(255, 255, 255, 0.35));
-  /* frosted glass + subtle gradient */
-  color: #333;
-  font-size: 1.2rem;
-  font-weight: 500;
-  padding: 12px 24px;
-  /* slightly larger for elegance */
-  border-radius: 30px;
-  text-align: center;
-  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15), 0 0 20px rgba(255, 87, 34, 0.1);
-  /* glow */
-  backdrop-filter: blur(12px);
-  transition: transform 0.3s ease, box-shadow 0.3s ease;
-  /* margin: 0 auto; */
-}
-
-/* Hover effect for interactivity */
-.visitor-count:hover {
-  transform: translateY(-10px);
-  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25), 0 0 30px rgba(255, 87, 34, 0.2);
-  /* stronger glow on hover */
-}
-
-/* Animate the number pop */
-#visitorCount {
-  display: inline-block;
-  font-weight: bold;
-  transition: transform 0.2s ease, color 0.3s ease;
-}
-
-@keyframes popNumber {
-  0% {
-    transform: scale(1);
-    color: #333;
-  }
-
-  50% {
-    transform: scale(1.3);
-    color: #ff5722;
-  }
-
-  /* accent color during pop */
-  100% {
-    transform: scale(1);
-    color: #333;
-  }
-}
-
-#visitorCount.animate-pop {
-  animation: popNumber 0.4s ease;
-}
-
-.visitor-count-card {
-  background: rgba(179, 105, 105, 0.3);
-  backdrop-filter: blur(10px);
-  border-radius: 20px;
-  padding: 20px;
-  margin: 20px 0;
-  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
-}
-
-body.dark .visitor-count-card {
-  background-color: #467db4;
-  color: #000;
-}
-
 /* CTA Section */
 .cta-section {
   text-align: center;
@@ -349,4 +278,4 @@ body.dark .visitor-count-card {
 .cta-section a.btn:hover {
   background: #ff5722;
   transform: scale(1.05);
-}
+}
\ No newline at end of file
diff --git a/css/visitor-counter.css b/css/visitor-counter.css
new file mode 100644
index 0000000..3171203
--- /dev/null
+++ b/css/visitor-counter.css
@@ -0,0 +1,367 @@
+/* ====== Design Tokens ====== */
+:root {
+    --bg: radial-gradient(1200px 600px at 10% -10%, #ffe1d6 0%, transparent 60%),
+        radial-gradient(1200px 600px at 110% 10%, #d6e8ff 0%, transparent 60%),
+        linear-gradient(180deg, #fff, #f7f7fb);
+    --card-bg: rgba(255, 255, 255, 0.55);
+    --card-stroke: rgba(255, 255, 255, 0.6);
+    --text-1: #1e1e28;
+    --text-2: #5a5a6a;
+    --accent: #ff7143;
+    --accent-2: #6aa9ff;
+    --shadow: 0 20px 40px rgba(24, 39, 75, 0.18), 0 2px 8px rgba(24, 39, 75, 0.06);
+}
+
+/* ====== Layout ====== */
+/* Counter section stays within the viewport */
+.counter-wrap {
+    width: 100%;
+    max-width: 100vw;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    padding: clamp(16px, 4vw, 40px);
+    background: var(--bg);
+    box-sizing: border-box;
+}
+
+/* Card never exceeds the viewport width */
+.counter-card {
+    width: min(720px, 100%);
+    max-width: 100%;
+    box-sizing: border-box;
+    position: relative;
+    border-radius: 22px;
+    padding: clamp(16px, 4vw, 40px);
+    background: var(--card-bg);
+    backdrop-filter: blur(14px) saturate(120%);
+    -webkit-backdrop-filter: blur(14px) saturate(120%);
+    box-shadow: var(--shadow);
+    border: 1px solid var(--card-stroke);
+    overflow: hidden;
+    transform: translateZ(0);
+    box-sizing: border-box;
+}
+
+body.dark .counter-card {
+    background-color: #467db4;
+    color: #000;
+}
+
+/* subtle animated border glow */
+.counter-card::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    filter: blur(8px);
+    border-radius: 24px;
+    background:
+        linear-gradient(120deg, rgba(255, 113, 67, 0.28), rgba(106, 169, 255, 0.28));
+    opacity: .6;
+    z-index: 0;
+    pointer-events: none;
+}
+
+/* ====== Header ====== */
+.counter-header {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    padding-bottom: 12px;
+    border-bottom: 1px dashed var(--card-stroke);
+}
+
+.counter-icon {
+    width: 38px;
+    height: 38px;
+    flex: 0 0 38px;
+    fill: var(--accent-2);
+    filter: drop-shadow(0 4px 10px rgba(106, 169, 255, .35));
+}
+
+.counter-titles {
+    line-height: 1.15
+}
+
+.counter-title {
+    margin: 0;
+    font-size: clamp(1.1rem, 1.6rem, 1.6rem);
+    color: var(--text-1);
+    letter-spacing: .2px;
+}
+
+.counter-subtitle {
+    margin: .25rem 0 0;
+    font-size: .95rem;
+    color: var(--text-2);
+}
+
+/* ====== Body ====== */
+.counter-body {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 18px 4px;
+}
+
+.counter-label {
+    font-size: .95rem;
+    color: var(--text-2);
+}
+
+.counter-value-wrap {
+    margin-left: auto;
+}
+
+.counter-value {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 9ch;
+    font-variant-numeric: tabular-nums lining-nums;
+    font-weight: 800;
+    letter-spacing: .5px;
+    font-size: clamp(2.2rem, 5vw, 3rem);
+    color: var(--text-1);
+    padding: 6px 12px;
+    border-radius: 14px;
+    background: linear-gradient(180deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, .1));
+    border: 1px solid var(--card-stroke);
+    box-shadow: inset 0 2px 6px rgba(0, 0, 0, .06), 0 6px 18px rgba(255, 113, 67, .15);
+}
+
+/* shimmer while loading */
+.shimmer {
+    position: relative;
+    color: transparent !important;
+}
+
+.shimmer::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .55) 40%, transparent 60%);
+    animation: shimmer 1.2s infinite;
+}
+
+@keyframes shimmer {
+    0% {
+        transform: translateX(-100%);
+    }
+
+    100% {
+        transform: translateX(100%);
+    }
+}
+
+/* “pop” & count-up pulse */
+@keyframes popNumber {
+    0% {
+        transform: scale(1);
+        text-shadow: none;
+    }
+
+    45% {
+        transform: scale(1.12);
+        text-shadow: 0 6px 18px rgba(255, 113, 67, .35);
+    }
+
+    100% {
+        transform: scale(1);
+        text-shadow: none;
+    }
+}
+
+.pop {
+    animation: popNumber .36s ease;
+}
+
+/* ====== Footer ====== */
+.counter-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+    padding-top: 8px;
+}
+
+.ghost-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 14px;
+    border-radius: 12px;
+    background: transparent;
+    border: 3px solid var(--card-stroke);
+    color: var(--text-1);
+    cursor: pointer;
+    transition: transform .16s ease, box-shadow .2s ease, background-color .2s ease;
+}
+
+body.dark .ghost-btn {
+    color: #eaf2ff;
+    border-color: rgba(140, 170, 255, .25);
+}
+
+.ghost-btn svg {
+    width: 18px;
+    height: 18px;
+    fill: currentColor;
+}
+
+.ghost-btn:hover {
+    background: linear-gradient(180deg, rgba(255, 255, 255, .25), rgba(255, 255, 255, .08));
+    box-shadow: 0 6px 16px rgba(0, 0, 0, .08);
+    transform: translateY(-1px);
+}
+
+.ghost-btn:active {
+    transform: translateY(0);
+}
+
+/* ====== Respect reduced motion ====== */
+@media (prefers-reduced-motion: reduce) {
+    * {
+        animation-duration: .001ms !important;
+        animation-iteration-count: 1 !important;
+        transition: none !important;
+    }
+}
+
+/* ===== Compact Theme ===== */
+.counter-card.theme-compact {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    align-items: center;
+    gap: 12px;
+    border-radius: 14px;
+    padding: 14px 16px;
+    background: rgba(255, 255, 255, .7);
+    border: 1px solid rgba(0, 0, 0, .06);
+    box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
+}
+
+.counter-card.theme-compact .counter-header {
+    border: 0;
+    padding: 0;
+    grid-column: 1 / span 2;
+}
+
+.counter-card.theme-compact .counter-body {
+    padding: 0;
+    grid-column: 3;
+}
+
+.counter-card.theme-compact .counter-title {
+    font-size: 1rem;
+    margin: 0;
+}
+
+.counter-card.theme-compact .counter-subtitle {
+    display: none;
+}
+
+.counter-card.theme-compact .counter-value {
+    font-size: clamp(1.6rem, 5vw, 2rem);
+    padding: 4px 10px;
+    border-radius: 10px;
+    background: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .3));
+    border: 1px solid rgba(0, 0, 0, .06);
+}
+
+@media (prefers-color-scheme: dark) {
+    .counter-card.theme-compact {
+        background: rgba(18, 22, 29, .6);
+        border-color: rgba(255, 255, 255, .08);
+        box-shadow: 0 16px 36px rgba(0, 0, 0, .4);
+    }
+}
+
+/* ===== Neon Theme ===== */
+.counter-card.theme-neon {
+    position: relative;
+    border-radius: 20px;
+    background: rgba(12, 14, 22, .6);
+    color: #eaf2ff;
+    border: 1px solid rgba(140, 170, 255, .25);
+    box-shadow: 0 20px 50px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .03);
+    backdrop-filter: blur(14px) saturate(120%);
+}
+
+.counter-card.theme-neon::before {
+    content: "";
+    position: absolute;
+    inset: -2px;
+    border-radius: 22px;
+    background: conic-gradient(from 120deg,
+            #6aa9ff, #b86bff, #ff6a95, #ff9b6a, #6aa9ff);
+    filter: blur(18px);
+    opacity: .35;
+    pointer-events: none;
+}
+
+.counter-card.theme-neon .counter-title {
+    color: #cfe1ff;
+}
+
+.counter-card.theme-neon .counter-subtitle {
+    color: #9fb6e8;
+}
+
+.counter-card.theme-neon .counter-value {
+    color: #ffffff;
+    background: rgba(255, 255, 255, .06);
+    border: 1px solid rgba(140, 170, 255, .2);
+    box-shadow: 0 10px 30px rgba(106, 169, 255, .25), inset 0 0 18px rgba(106, 169, 255, .08);
+}
+
+.counter-card.theme-neon .ghost-btn {
+    color: #eaf2ff;
+    border-color: rgba(140, 170, 255, .25);
+}
+
+.counter-card.theme-neon .ghost-btn:hover {
+    background: rgba(140, 170, 255, .12);
+    box-shadow: 0 10px 24px rgba(106, 169, 255, .2);
+}
+
+/* ===== Minimal Theme ===== */
+.counter-card.theme-minimal {
+    border-radius: 18px;
+    background: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .4));
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border: 1px solid rgba(255, 255, 255, .6);
+    box-shadow: 0 12px 28px rgba(16, 24, 40, .12);
+}
+
+.counter-card.theme-minimal .counter-title {
+    font-size: clamp(1.1rem, 1.6rem, 1.6rem);
+    letter-spacing: .2px;
+}
+
+.counter-card.theme-minimal .counter-value {
+    font-size: clamp(2.4rem, 6vw, 3.2rem);
+    font-weight: 800;
+    background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .15));
+    border: 1px solid rgba(0, 0, 0, .06);
+    box-shadow: inset 0 2px 6px rgba(0, 0, 0, .06);
+}
+
+@media (prefers-color-scheme: dark) {
+    .counter-card.theme-minimal {
+        background: linear-gradient(180deg, rgba(18, 22, 29, .7), rgba(18, 22, 29, .4));
+        border-color: rgba(255, 255, 255, .08);
+        box-shadow: 0 20px 40px rgba(0, 0, 0, .45);
+    }
+}
+
+#visitor-counter {
+    margin-bottom: 40px;
+    /* adjust as needed */
+}
\ No newline at end of file
diff --git a/expertise.html b/expertise.html
index ff5ecac..1426e3a 100644
--- a/expertise.html
+++ b/expertise.html
@@ -61,7 +61,7 @@
             <li><a href="services.html">Services</a></li>
             <!-- Dropdown Section -->
             <li class="dropdown">
-                <a href="#hero" class="dropdown-toggle active;">Expertise</a>
+                <a href="expertise.html" class="dropdown-toggle active;">Expertise</a>
                 <ul class="dropdown-menu">
                     <li><a href="#skills">Skills</a></li>
                     <li><a href="#projects">Projects</a></li>
diff --git a/index.html b/index.html
index 5a9316c..1f8608f 100644
--- a/index.html
+++ b/index.html
@@ -11,10 +11,12 @@
   <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">
   <!-- Main Stylesheet -->
   <link rel="stylesheet" href="/css/main.css">
+  <link rel="stylesheet" href="/css/visitor-counter.css">
   <link rel="stylesheet" href="/css/common.css">
   <link rel="stylesheet" href="/css/live-projects.css">
   <link rel="stylesheet" href="/css/discount-banner.css">
   <link rel="stylesheet" href="/css/mini-services.css">
+  <link rel="stylesheet" href="/css/dropdown.css">
   <!-- Popup Window CSS -->
   <link rel="stylesheet" href="/css/open-modal-btn.css">
   <link rel="stylesheet" href="/css/whatsapp-floating.css">
@@ -59,10 +61,16 @@
     </div>
 
     <ul class="nav-links" id="nav-links">
-      <li><a href="#hero" class="active">Home</a></li>
-      <li><a href="#about">About</a></li>
-      <li><a href="#services-preview">Offering</a></li>
-      <!-- <li><a href="#visitor-counter">Visitor-Counter</a></li> -->
+      <!-- Dropdown Section -->
+      <li class="dropdown">
+        <a href="index.html" class="dropdown-toggle active;">Home</a>
+        <ul class="dropdown-menu">
+          <li><a href="#about">About</a></li>
+          <li><a href="#services-preview">Offering</a></li>
+          <li><a href="#live-projects">Live</a></li>
+          <li><a href="#visitor-counter">Visitors</a></li>
+        </ul>
+      </li>
       <!-- New Services link -->
       <li><a href="services.html">Services</a></li>
       <!-- New Expertise link -->
@@ -154,13 +162,45 @@ <h2>Live Websites</h2>
   </div>
 
   <!-- Visitor Counter Section -->
-  <section id="visitor-counter" class="container fade-in counter-container">
-    <div class="visitor-count-card">
-      <div class="visitor-count">
-        <h2 style="color: #222">Visitors</h2>
-        <h3 style="color: #604848">
-          👋 Total Counts: </br><span id="visitorCount">Loading...</span>
-        </h3>
+  <section id="visitor-counter" class="counter-wrap">
+    <div class="counter-card theme-neon">
+      <div class="counter-header">
+        <svg class="counter-icon" viewBox="0 0 24 24" aria-hidden="true">
+          <path d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5Zm7 9a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1 7 7 0 0 1 14 0Z" />
+        </svg>
+        <div class="counter-titles">
+          <h2 class="counter-title">Visitors</h2>
+          <p class="counter-subtitle">Thanks for visiting 👋</p>
+        </div>
+      </div>
+
+      <div class="counter-body">
+        <span class="counter-label">Total Count</span>
+        <div class="counter-value-wrap">
+          <span id="visitorCount" class="counter-value shimmer" aria-live="polite">Loading…</span>
+        </div>
+      </div>
+
+      <div class="counter-footer">
+        <button id="refreshBtn" class="ghost-btn" type="button" title="Refresh">
+          <svg viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M17.65 6.35A7.95 7.95 0 0 0 12 4V1L7 6l5 5V8a5 5 0 1 1-5 5H5a7 7 0 1 0 12.65-6.65Z" />
+          </svg>
+          Refresh
+        </button>
+      </div>
+    </div>
+  </section>
+
+  <section id="theme-switcher" class="container fade-in">
+    <div style="text-align: center;">
+      <h2>Visitor Theme Switcher</h2>
+      <p>Try different looks for the visitor counter:</p>
+      <!-- Add this toggle anywhere on the page to try looks -->
+      <div style="display:flex; gap:8px; justify-content:center; padding:8px;">
+        <button class="ghost-btn" onclick="setTheme('theme-minimal')">Minimal</button>
+        <button class="ghost-btn" onclick="setTheme('theme-neon')">Neon</button>
+        <button class="ghost-btn" onclick="setTheme('theme-compact')">Compact</button>
       </div>
     </div>
   </section>
@@ -188,11 +228,21 @@ <h3 style="color: #604848">
     <i class="fas fa-arrow-up"></i>
   </button>
 
+  <!-- Visitor Counter JS -->
+  <!-- A super-compact - theme switcher -->
+  <script>
+    function setTheme(cls) {
+      const card = document.querySelector('.counter-card');
+      card.classList.remove('theme-minimal', 'theme-neon', 'theme-compact');
+      card.classList.add(cls);
+    }
+  </script>
   <!-- JS -->
   <script src="/js/common.js"></script>
   <script type="module" src="/js/visitorCounter.js"></script>
   <!-- Popup Window JS -->
   <script src="/js/open-modal-btn.js"></script>
+  <script src="/js/dropdown.js"></script>
   <script src="/js/main.js"></script>
 </body>
 
diff --git a/js/visitorCounter.js b/js/visitorCounter.js
index 959ef60..34ff729 100644
--- a/js/visitorCounter.js
+++ b/js/visitorCounter.js
@@ -1,7 +1,8 @@
 // Import the functions you need from the SDKs you need
 // Import Firebase SDK modules
+// Firebase (ESM from CDN)
 import { initializeApp } from "https://www.gstatic.com/firebasejs/12.4.0/firebase-app.js";
-import { getFirestore, doc, getDoc, updateDoc, increment } from "https://www.gstatic.com/firebasejs/12.4.0/firebase-firestore.js";
+import { getFirestore, doc, getDoc, setDoc, increment } from "https://www.gstatic.com/firebasejs/12.4.0/firebase-firestore.js";
 
 // 🔧 Your Firebase config (replace these values with your actual project config)
 const firebaseConfig = {
@@ -14,31 +15,75 @@ const firebaseConfig = {
 const app = initializeApp(firebaseConfig);
 const db = getFirestore(app);
 
-// Reference to your Firestore document
+// Firestore document
 const counterRef = doc(db, "visitors", "mainPage");
 
-// 🔢 Function to safely increment visitor count
-export async function updateVisitorCount() {
+// Elements
+const countEl = document.getElementById("visitorCount");
+const refresh = document.getElementById("refreshBtn");
+
+/** Formats number with locale separators */
+const fmt = (n) => Number(n || 0).toLocaleString(undefined);
+
+/** Animate number from a to b (gentle, reduced-motion aware) */
+function animateCount(el, from, to, ms = 600) {
+    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    if (reduce) { el.textContent = fmt(to); return; }
+
+    const start = performance.now();
+    const tick = (now) => {
+        const t = Math.min(1, (now - start) / ms);
+        // easeOutCubic
+        const eased = 1 - Math.pow(1 - t, 3);
+        const cur = Math.round(from + (to - from) * eased);
+        el.textContent = fmt(cur);
+        if (t < 1) requestAnimationFrame(tick);
+    };
+    requestAnimationFrame(tick);
+}
+
+/** Safely increments (creates doc if missing), reads, and animates */
+async function updateVisitorCount() {
     try {
-        // Increment the counter in Firestore
-        await updateDoc(counterRef, { count: increment(1) });
+        // Atomic increment; if the doc/field doesn't exist it behaves like 0
+        await setDoc(counterRef, { count: increment(1) }, { merge: true });
+
         const snap = await getDoc(counterRef);
+        const newVal = snap.exists() ? (snap.data().count || 0) : 0;
 
-        if (snap.exists()) {
-            const countEl = document.getElementById("visitorCount");
-            countEl.textContent = snap.data().count;
+        // Remove shimmer once we have data
+        countEl.classList.remove("shimmer");
 
-            // ✨ Animate the number pop
-            countEl.classList.add("animate-pop");
-            setTimeout(() => countEl.classList.remove("animate-pop"), 400); // remove class after animation
-        } else {
-            document.getElementById("visitorCount").textContent = "0";
-        }
+        // Pop animation + count up from displayed value (if numeric)
+        const current = Number((countEl.textContent || "0").replace(/[^\d]/g, "")) || 0;
+        animateCount(countEl, current, newVal);
+        countEl.classList.remove("pop");
+        // force reflow to replay animation
+        void countEl.offsetWidth;
+        countEl.classList.add("pop");
     } catch (e) {
         console.error("Error updating visitor count:", e);
-        document.getElementById("visitorCount").textContent = "Error";
+        countEl.classList.remove("shimmer");
+        countEl.textContent = "—";
+        countEl.title = "Could not load";
     }
 }
 
-// Run immediately when the script loads
+// Initial run
 updateVisitorCount();
+
+// Optional manual refresh (no extra increment)
+if (refresh) {
+    refresh.addEventListener("click", async () => {
+        try {
+            const snap = await getDoc(counterRef);
+            const val = snap.exists() ? (snap.data().count || 0) : 0;
+            countEl.classList.remove("shimmer");
+            animateCount(countEl, Number((countEl.textContent || "0").replace(/[^\d]/g, "")) || 0, val, 400);
+            countEl.classList.remove("pop"); void countEl.offsetWidth; countEl.classList.add("pop");
+        } catch (e) {
+            console.error(e);
+        }
+    });
+}
+
diff --git a/services.html b/services.html
index d69137a..fc7b341 100644
--- a/services.html
+++ b/services.html
@@ -63,10 +63,10 @@
             <li><a href="index.html">Home</a></li>
             <!-- Dropdown Section -->
             <li class="dropdown">
-                <a href="#hero" class="dropdown-toggle active;">Services</a>
+                <a href="services.html" class="dropdown-toggle active;">Services</a>
                 <ul class="dropdown-menu">
                     <li><a href="#services-offer">Offer Services</a></li>
-                    <li><a href="#live-projects">Live Websites</a></li>
+                    <li><a href="#live-projects">Live</a></li>
                 </ul>
             </li>
             <!-- New Expertise link -->