diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
index 5f341df..14c6636 100644
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@@ -1,6 +1,6 @@
 ---
 interface Props {
-  links: { href: string, text: string }[];
+  links: { href: string; text: string }[];
 }
 
 const { links } = Astro.props;
@@ -8,11 +8,22 @@ const { links } = Astro.props;
 
 <nav class="navbar navbar-expand-lg bg-body-tertiary">
   <ul class="list-unstyle hstack">
-    {links.map(link =>(
-      <li class="nav-item">
-        <a class:list={"nav-link", { active: Astro.url.pathname === link.href}} href={link.href}>{link.text}</a>
-      </li>
-    ))}
+    {
+      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}
+          >
+            {link.text}
+          </a>
+        </li>
+      ))
+    }
   </ul>
 </nav>
 
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 600fe63..c119f7b 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -1,43 +1,42 @@
 ---
 export interface Props {
-	title: string;
+  title: string;
 }
 
 const { title } = Astro.props;
-import "../assets/style/global.css";
+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" },
-]
+  { href: '/', text: 'Home' },
+  { href: '/blog', text: 'Blog' },
+  { href: '/portafolio', text: 'Portafolio' },
+  { href: '/curriculum', text: 'Curriculum' },
+  { href: '/contact', text: 'Contact' },
+];
 ---
 
 <!DOCTYPE html>
 <html lang="en">
-	<head>
-		<meta charset="UTF-8" />
-		<meta name="description" content="Astro description">
-		<meta name="viewport" content="width=device-width" />
-		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-		<meta name="generator" content={Astro.generator} />
-		<title>{title}</title>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="description" content="Astro description" />
+    <meta name="viewport" content="width=device-width" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="generator" content={Astro.generator} />
+    <title>{title}</title>
 
     <!-- Reset and normilize styles -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gardevoir" />
-
-	</head>
-	<body>
+  </head>
+  <body>
     <header>
-      <Navbar links={navbarLinks}/>
+      <Navbar client:load links={navbarLinks} />
     </header>
-	  <main>
-		  <slot />
-	  </main>
-	</body>
+    <main>
+      <slot />
+    </main>
+  </body>
 </html>
 
 <style>
diff --git a/src/pages/blog.astro b/src/pages/blog.astro
new file mode 100644
index 0000000..c2a8e5c
--- /dev/null
+++ b/src/pages/blog.astro
@@ -0,0 +1,7 @@
+---
+import Layout from '../layouts/Layout.astro';
+---
+
+<Layout title="Blog">
+  <h1>Blog</h1>
+</Layout>
