diff --git a/public/styles/global.css b/public/styles/global.css
index 0597b8f..6772668 100644
--- a/public/styles/global.css
+++ b/public/styles/global.css
@@ -180,6 +180,30 @@ a {
   width: 100%;
 }
 
+.nav-download {
+  color: var(--color-bg) !important;
+  background: var(--color-accent);
+  padding: 0.5rem 1.5rem;
+  border: 2px solid var(--color-accent);
+  font-weight: 800 !important;
+  letter-spacing: 0.12em;
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s ease !important;
+}
+
+.nav-download::after {
+  display: none !important;
+}
+
+.nav-download:hover {
+  color: var(--color-bg) !important;
+  background: var(--color-text);
+  border-color: var(--color-text);
+  box-shadow: 0 0 20px rgba(0, 221, 119, 0.4);
+  transform: scale(1.05);
+}
+
 /* ===== Hero Section ===== */
 .hero {
   position: relative;
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 6290b5b..ce8afaa 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -72,8 +72,8 @@ const isActiveRoute = (path: string) => currentPath === normalizePath(path);
             <a href="/docs" class={isActiveRoute('/docs') ? 'active' : undefined} aria-current={isActiveRoute('/docs') ? 'page' : undefined}>Docs</a>
             <a href="/blog" class={isActiveRoute('/blog') ? 'active' : undefined} aria-current={isActiveRoute('/blog') ? 'page' : undefined}>Blog</a>
             <a href="/changelog" class={isActiveRoute('/changelog') ? 'active' : undefined} aria-current={isActiveRoute('/changelog') ? 'page' : undefined}>Changelog</a>
-            <a href="/#download">Download</a>
             <a href="https://zaguanai.com/pricing" target="_blank" rel="noopener">Pricing</a>
+            <a href="/#download" class="nav-download">Download</a>
           </nav>
         </div>
       </div>