diff --git a/src/assets/style/global.css b/src/assets/style/global.css
index fcb1ae4..bc77f66 100644
--- a/src/assets/style/global.css
+++ b/src/assets/style/global.css
@@ -11,27 +11,6 @@ body {
   margin: auto;
 }
 
-/* TODO: Optimize, clean and realocate where it belogns the links styles */
-a {
-  --boder-color: transparent;
-  color: var(--prj-link-text);
-  border: 1px solid var(--boder-color);
-  border-radius: 4px;
-
-  transition: background-color 200ms, color 200ms;
-}
-
-a.active {
-  border: 1px solid var(--prj-accent-bg);
-}
-
-a:hover {
-  --border-color: var(--prj-accent-bg);
-  background-color: var(--prj-accent-bg);
-  color: var(--prj-accent-text);
-  border: 1px solid var(--border-color);
-}
-
 /* Main content fix width, taken from Tailwind: https://tailwindcss.com/docs/container#using-the-container */
 
 @media screen and (min-width: 640px) {
diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
index 14c6636..f60e074 100644
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@@ -1,9 +1,13 @@
 ---
-interface Props {
-  links: { href: string; text: string }[];
-}
+const links = [
+  { href: '/', text: 'Home' },
+  { href: '/blog', text: 'Blog' },
+  { href: '/portafolio', text: 'Portafolio' },
+  { href: '/curriculum', text: 'Curriculum' },
+  { href: '/contact', text: 'Contact' },
+];
 
-const { links } = Astro.props;
+// TODO: Fix so the "active" class can come from the server so it doesnt flicker
 ---
 
 <nav class="navbar navbar-expand-lg bg-body-tertiary">
@@ -11,14 +15,7 @@ const { links } = Astro.props;
     {
       links.map((link) => (
         <li class="nav-item">
-          {/* TODO: active logic doesnt work in prod because is compiled --> */}
-          <a
-            class:list={[
-              'nav-link',
-              { active: Astro.url.pathname === link.href },
-            ]}
-            href={link.href}
-          >
+          <a class="nav-link" href={link.href}>
             {link.text}
           </a>
         </li>
@@ -27,6 +24,16 @@ const { links } = Astro.props;
   </ul>
 </nav>
 
+<script>
+  // Add active class to the current link
+ const link = document.querySelector(`a[href='${location.pathname}']`);
+
+ if (link) {
+   link.classList.add("active");
+ }
+
+</script>
+
 <style>
   nav {
     width: fit-content;
@@ -37,6 +44,23 @@ const { links } = Astro.props;
   }
 
   a {
+    --boder-color: transparent;
+    color: var(--prj-link-text);
+    border: 1px solid var(--boder-color);
+    border-radius: 4px;
     text-decoration: none;
+
+    transition: background-color 200ms, color 200ms;
+  }
+
+  a.active {
+    border: 1px solid var(--prj-accent-bg);
+  }
+
+  a:hover {
+    --border-color: var(--prj-accent-bg);
+    background-color: var(--prj-accent-bg);
+    color: var(--prj-accent-text);
+    border: 1px solid var(--border-color);
   }
 </style>
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
new file mode 100644
index 0000000..34ef649
--- /dev/null
+++ b/src/components/Navbar.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+
+interface Props {
+  links: Array<{ href: string; text: string }>;
+}
+
+export default function Navbar(props: Props): JSX.Element {
+  return (
+    <nav className="navbar navbar-expand-lg bg-body-tertiary">
+      <ul className="list-unstyle hstack">
+        {props.links.map((link, idx) => (
+          <li className="nav-item" key={idx}>
+            {/* TODO: active logic doesnt work in prod because is compiled --> */}
+            <a
+              className={
+                'nav-link' + window.location.pathname === link.href
+                  ? 'active'
+                  : ''
+              }
+              href={link.href}
+            >
+              {link.text}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+}
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index c119f7b..ad0e900 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -7,13 +7,6 @@ const { title } = Astro.props;
 import '../assets/style/global.css';
 import Navbar from '../components/Navbar.astro';
 
-const navbarLinks = [
-  { href: '/', text: 'Home' },
-  { href: '/blog', text: 'Blog' },
-  { href: '/portafolio', text: 'Portafolio' },
-  { href: '/curriculum', text: 'Curriculum' },
-  { href: '/contact', text: 'Contact' },
-];
 ---
 
 <!DOCTYPE html>
@@ -31,7 +24,7 @@ const navbarLinks = [
   </head>
   <body>
     <header>
-      <Navbar client:load links={navbarLinks} />
+      <Navbar />
     </header>
     <main>
       <slot />