diff --git a/src/routes/(app)/_components/layout/navbar.svelte b/src/routes/(app)/_components/layout/navbar.svelte
index 336777d..4e00cbb 100644
--- a/src/routes/(app)/_components/layout/navbar.svelte
+++ b/src/routes/(app)/_components/layout/navbar.svelte
@@ -1,3 +1,17 @@
+<script>
+  // @ts-expect-error Import is as expected but throws error
+
+  import { page } from '$app/stores';
+
+  $: currentPage = $page.url.pathname;
+  const links = [
+    { href: '/team/', label: 'Equipa', pageComp: '/team' },
+    { href: '/projects/', label: 'Projetos', pageComp: '/projects' },
+    { href: '/events/', label: 'Eventos', pageComp: '/events' },
+    { href: '/contacts/', label: 'Contactos', pageComp: '/contacts' }
+  ];
+</script>
+
 <nav
   class="fixed hidden h-min w-full grid-cols-2 items-center justify-center px-7 py-2 font-raleway text-xs text-white sm:grid sm:text-base"
   aria-label="Navigation Bar"
@@ -9,9 +23,18 @@
     </a>
   </div>
   <div class="flex justify-end gap-7">
-    <a href="/#/">Equipa</a>
-    <a href="/#/">Projetos</a>
-    <a href="/#/">Eventos</a>
-    <a href="/contacts">Contactos</a>
+    {#each links as { href, label, pageComp }}
+      <a class:active={currentPage === pageComp} {href}>
+        <p class="font-bold">{label}</p>
+      </a>
+    {/each}
   </div>
 </nav>
+
+<style>
+  .active {
+    background-color: theme('colors.muted-red.400');
+    padding: 2px 6px;
+    border-radius: 4px;
+  }
+</style>