diff --git a/src/components/Nav.astro b/src/components/Nav.astro
new file mode 100644
index 0000000..5a75cbc
--- /dev/null
+++ b/src/components/Nav.astro
@@ -0,0 +1,21 @@
+---
+import Navigation from './Navigation.astro'
+
+/**
+ * Nav Component
+ *
+ * @description Main navigation wrapper that uses the accessible Navigation component
+ * This component provides professional-level accessibility following WCAG 2.1 guidelines
+ *
+ * Keyboard behaviors (inherited from Navigation.astro):
+ * - ArrowLeft/ArrowRight: Navigate between top-level menu items
+ * - ArrowDown: Open dropdown and navigate down through items
+ * - ArrowUp: Navigate up through dropdown items
+ * - Escape: Close dropdown/mobile menu and return focus to trigger
+ * - Tab: Standard tab navigation with proper focus management
+ */
+---
+
+<header>
+  <Navigation />
+</header>
diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
new file mode 100644
index 0000000..687dbd2
--- /dev/null
+++ b/src/components/Navigation.astro
@@ -0,0 +1,492 @@
+---
+import ResponsiveToggle from './ResponsiveToggle.astro'
+import { getEntry } from 'astro:content'
+
+/**
+ * Navigation Component
+ *
+ * @description An accessible navigation component with full keyboard support
+ * Based on accessible-astro-starter patterns with PyCon ES styling
+ *
+ * Keyboard behaviors:
+ * - ArrowLeft/ArrowRight: Navigate between top-level menu items
+ * - ArrowDown: Open dropdown and navigate down through items
+ * - ArrowUp: Navigate up through dropdown items
+ * - Escape: Close dropdown/mobile menu and return focus
+ * - Tab: Standard tab navigation, closes dropdown on last item
+ */
+
+// Load menu data
+const menuData = await getEntry('menu', 'main')
+
+if (!menuData) {
+  throw new Error('No se encontró el archivo src/content/menu/main.json')
+}
+
+const { items } = menuData.data
+---
+
+<div id="main-navigation" class="fixed top-0 w-full z-50 bg-slate-900/90 backdrop-blur-md border-b border-white/10">
+  <div class="container mx-auto px-4 h-20 flex items-center justify-between">
+    <!-- Logo -->
+    <a
+      href="/"
+      class="text-2xl font-bold font-mono tracking-tighter text-white rounded px-2 py-1 outline-none transition-all focus-visible:bg-white/10 focus-visible:text-blue-400"
+    >
+      PyCon<span class="text-blue-500">ES</span>
+    </a>
+
+    <div class="wrapper flex items-center gap-4">
+      <!-- Desktop Navigation -->
+      <nav class="desktop-menu hidden lg:block" aria-label="Navegación principal">
+        <ul class="menu flex gap-8">
+          {
+            items.map((item, index) => (
+              <li class:list={['menu-item', { 'has-dropdown': item.children }]}>
+                {item.children ? (
+                  <>
+                    <button
+                      id={`dropdown-btn-${index}`}
+                      class="dropdown-trigger flex items-center gap-1 text-slate-300 hover:text-white font-medium transition-colors rounded outline-none focus-visible:text-blue-400 focus-visible:underline decoration-2 underline-offset-4"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      aria-controls={`dropdown-menu-${index}`}
+                    >
+                      {item.label}
+                      <svg
+                        class="w-4 h-4 transition-transform duration-200"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                        aria-hidden="true"
+                      >
+                        <path
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          d="M19 9l-7 7-7-7"
+                        />
+                      </svg>
+                    </button>
+                    <ul
+                      id={`dropdown-menu-${index}`}
+                      class="submenu lg:absolute lg:top-full lg:left-0 lg:w-64 bg-slate-800 rounded-lg p-2 mt-2 lg:mt-4 shadow-2xl z-50"
+                      role="menu"
+                    >
+                      {item.children.map((child) => (
+                        <li role="none">
+                          <a
+                            href={child.href}
+                            class="submenu-item block px-4 py-3 rounded-md text-white font-medium transition-colors outline-none hover:bg-white/5 focus-visible:bg-blue-600 focus-visible:text-white"
+                            role="menuitem"
+                          >
+                            {child.label}
+                          </a>
+                        </li>
+                      ))}
+                    </ul>
+                  </>
+                ) : (
+                  <a
+                    href={item.href}
+                    class="block text-slate-300 hover:text-white font-medium transition-colors rounded outline-none focus-visible:text-blue-400 focus-visible:underline decoration-2 underline-offset-4"
+                  >
+                    {item.label}
+                  </a>
+                )}
+              </li>
+            ))
+          }
+        </ul>
+      </nav>
+
+      <!-- Mobile Toggle -->
+      <ResponsiveToggle />
+    </div>
+
+    <!-- Mobile Navigation -->
+    <nav
+      class="mobile-menu absolute top-20 left-0 w-full bg-slate-900 p-4 border-b border-white/10 shadow-xl lg:hidden"
+      aria-label="Navegación principal móvil"
+    >
+      <ul class="menu flex flex-col gap-2">
+        {
+          items.map((item) => (
+            <li class="menu-item">
+              {item.children ? (
+                <details class="mobile-details">
+                  <summary class="flex items-center justify-between gap-1 w-full text-slate-300 hover:text-white font-medium py-2 transition-colors rounded outline-none focus-visible:text-blue-400 focus-visible:underline decoration-2 underline-offset-4 cursor-pointer list-none">
+                    {item.label}
+                    <svg
+                      class="w-4 h-4 transition-transform duration-200 chevron-icon"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                      aria-hidden="true"
+                    >
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M19 9l-7 7-7-7"
+                      />
+                    </svg>
+                  </summary>
+                  <ul class="pl-4 mt-2 flex flex-col gap-1">
+                    {item.children.map((child) => (
+                      <li>
+                        <a
+                          href={child.href}
+                          class="block px-4 py-3 rounded-md text-white font-medium transition-colors outline-none hover:bg-white/5 focus-visible:bg-blue-600 focus-visible:text-white"
+                        >
+                          {child.label}
+                        </a>
+                      </li>
+                    ))}
+                  </ul>
+                </details>
+              ) : (
+                <a
+                  href={item.href}
+                  class="block text-slate-300 hover:text-white font-medium py-2 transition-colors rounded outline-none focus-visible:text-blue-400 focus-visible:underline decoration-2 underline-offset-4"
+                >
+                  {item.label}
+                </a>
+              )}
+            </li>
+          ))
+        }
+      </ul>
+    </nav>
+  </div>
+</div>
+
+<script>
+  document.addEventListener('astro:page-load', () => {
+    // Variables
+    const mainNav = document.querySelector('#main-navigation') as HTMLElement | null
+    if (!mainNav) return
+
+    const mainMenu = mainNav.querySelector('.desktop-menu ul.menu') as HTMLUListElement | null
+    const dropdownMenus = [...document.querySelectorAll('.has-dropdown .dropdown-trigger')] as HTMLButtonElement[]
+
+    // Functions
+
+    /**
+     * Sets the active menu item based on current URL
+     */
+    const setActiveMenuItem = (): void => {
+      const allMenus = mainNav.querySelectorAll('nav > ul')
+      const currentPathname = window.location.pathname
+
+      allMenus.forEach((menu) => {
+        const menuItems = [...menu.querySelectorAll('a:not([rel*="external"])')] as HTMLAnchorElement[]
+
+        menuItems.forEach((menuItem) => {
+          // Remove any existing active state
+          menuItem.classList.remove('is-active')
+          menuItem.removeAttribute('aria-current')
+
+          const itemPathname = menuItem.pathname.replace(/\/$/, '') // Remove trailing slash
+          const currentPath = currentPathname.replace(/\/$/, '')
+
+          if (itemPathname === currentPath || (itemPathname === '' && currentPath === '')) {
+            menuItem.classList.add('is-active')
+            menuItem.setAttribute('aria-current', 'page')
+          }
+        })
+      })
+    }
+
+    /**
+     * Check if element is outside viewport
+     */
+    const isOutOfViewport = (element: Element): boolean => {
+      const elementBounds = element.getBoundingClientRect()
+      return elementBounds.right > (window.innerWidth || document.documentElement.clientWidth)
+    }
+
+    /**
+     * Open a dropdown menu
+     */
+    const openDropdownMenu = (dropdownButton: HTMLButtonElement): void => {
+      const dropdownList = dropdownButton.parentNode?.querySelector('ul') as HTMLUListElement | null
+      if (!dropdownList) return
+
+      dropdownButton.classList.add('show')
+      dropdownButton.setAttribute('aria-expanded', 'true')
+
+      // Rotate chevron icon
+      const icon = dropdownButton.querySelector('svg')
+      if (icon) {
+        icon.style.transform = 'rotate(180deg)'
+      }
+
+      // Adjust position if out of viewport
+      if (isOutOfViewport(dropdownList)) {
+        dropdownList.style.left = 'auto'
+        dropdownList.style.right = '0'
+      }
+    }
+
+    /**
+     * Close a dropdown menu
+     */
+    const closeDropdownMenu = (dropdownButton: HTMLButtonElement): void => {
+      dropdownButton.classList.remove('show')
+      dropdownButton.setAttribute('aria-expanded', 'false')
+
+      // Reset chevron icon
+      const icon = dropdownButton.querySelector('svg')
+      if (icon) {
+        icon.style.transform = ''
+      }
+    }
+
+    /**
+     * Close all dropdown menus
+     */
+    const closeAllDropdownMenus = (): void => {
+      dropdownMenus.forEach((menu) => closeDropdownMenu(menu))
+    }
+
+    /**
+     * Toggle dropdown menu on click
+     */
+    const toggleDropdownMenu = (event: MouseEvent): void => {
+      const target = event.target as HTMLElement
+      const button = target.closest('.dropdown-trigger') as HTMLButtonElement | null
+      if (!button) return
+
+      if (button.getAttribute('aria-expanded') === 'false') {
+        closeAllDropdownMenus()
+        openDropdownMenu(button)
+      } else {
+        closeDropdownMenu(button)
+      }
+    }
+
+    // Execution
+
+    /**
+     * Keyboard navigation for main menu
+     * Implements WCAG 2.1 keyboard accessibility patterns
+     */
+    mainMenu?.addEventListener('keydown', (event: KeyboardEvent) => {
+      const element = event.target as Element
+      const currentMenuItem = element.closest('li.menu-item')
+      const menuItems = [...mainMenu.querySelectorAll(':scope > .menu-item')] as HTMLLIElement[]
+      const currentDropdownButton = element.closest('.has-dropdown .dropdown-trigger') as HTMLButtonElement | null
+      const currentDropdownMenuItem = element.closest('.has-dropdown ul li') as HTMLLIElement | null
+      const currentIndex = currentMenuItem ? menuItems.findIndex((item) => item === currentMenuItem) : -1
+
+      const key = event.key
+      let targetItem: Element | null = null
+
+      // Check if we're inside a submenu (dropdown item)
+      const isInsideSubmenu = currentDropdownMenuItem !== null
+
+      // ArrowRight: Move to next top-level menu item
+      if (key === 'ArrowRight') {
+        if (currentMenuItem) {
+          // Close any open dropdown when navigating away
+          closeAllDropdownMenus()
+          const nextIndex = currentIndex === menuItems.length - 1 ? 0 : currentIndex + 1
+          targetItem = menuItems[nextIndex]
+        }
+      }
+
+      // ArrowLeft: Move to previous top-level menu item
+      if (key === 'ArrowLeft') {
+        if (currentMenuItem) {
+          // Close any open dropdown when navigating away
+          closeAllDropdownMenus()
+          const prevIndex = currentIndex === 0 ? menuItems.length - 1 : currentIndex - 1
+          targetItem = menuItems[prevIndex]
+        }
+      }
+
+      // Escape: Close dropdown and return to first menu item
+      if (key === 'Escape') {
+        targetItem = menuItems[0]
+        closeAllDropdownMenus()
+      }
+
+      // Handle dropdown button keyboard interactions (only if NOT inside a submenu)
+      // ArrowLeft/ArrowRight already handled above and will close + move
+      if (currentDropdownButton && !isInsideSubmenu) {
+        const nextElement = currentDropdownButton.nextElementSibling as Element | null
+        if (nextElement) {
+          const firstDropdownItem = nextElement.querySelector('li')
+
+          // ArrowDown, Enter, Space: Open dropdown and focus first item
+          if (key === 'ArrowDown' || key === 'Enter' || key === ' ') {
+            event.preventDefault()
+            openDropdownMenu(currentDropdownButton)
+            targetItem = firstDropdownItem
+          }
+        }
+
+        // Escape: Close this dropdown
+        if (key === 'Escape') {
+          closeDropdownMenu(currentDropdownButton)
+        }
+      }
+
+      // Handle navigation within dropdown menu (submenu)
+      if (isInsideSubmenu) {
+        const currentDropdownList = currentDropdownMenuItem.parentNode as Element | null
+        if (currentDropdownList) {
+          const dropdownMenuItems = [...currentDropdownList.querySelectorAll('li')] as HTMLLIElement[]
+          const dropdownIndex = dropdownMenuItems.findIndex((item) => item === currentDropdownMenuItem)
+
+          // ArrowDown: Move to next dropdown item (circular)
+          if (key === 'ArrowDown') {
+            event.preventDefault()
+            const nextIndex = dropdownIndex === dropdownMenuItems.length - 1 ? 0 : dropdownIndex + 1
+            targetItem = dropdownMenuItems[nextIndex]
+          }
+
+          // ArrowUp: Move to previous dropdown item (circular)
+          if (key === 'ArrowUp') {
+            event.preventDefault()
+            const prevIndex = dropdownIndex === 0 ? dropdownMenuItems.length - 1 : dropdownIndex - 1
+            targetItem = dropdownMenuItems[prevIndex]
+          }
+
+          // Escape: Close dropdown and focus parent button
+          if (key === 'Escape') {
+            const parentDropdownButton = currentDropdownList.previousElementSibling as HTMLButtonElement | null
+            if (parentDropdownButton) {
+              targetItem = parentDropdownButton.parentElement
+              closeAllDropdownMenus()
+            }
+          }
+
+          // Tab: Close dropdown on last item
+          if (key === 'Tab' && !event.shiftKey) {
+            const parentDropdownButton = currentDropdownList.previousElementSibling as HTMLButtonElement | null
+            if (parentDropdownButton && dropdownIndex === dropdownMenuItems.length - 1) {
+              closeDropdownMenu(parentDropdownButton)
+            }
+          }
+        }
+      }
+
+      // Focus the target item
+      if (targetItem) {
+        const focusableElement = targetItem.querySelector('a, button') as HTMLElement | null
+        if (focusableElement) {
+          // Use double requestAnimationFrame to ensure CSS transition has started
+          // and element is visible (visibility: visible) before focusing
+          requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+              focusableElement.focus()
+            })
+          })
+        }
+      }
+    })
+
+    // Add click handlers to dropdown buttons
+    dropdownMenus.forEach((dropdownMenu) => {
+      dropdownMenu.addEventListener('click', toggleDropdownMenu as EventListener)
+    })
+
+    // Close dropdowns when clicking outside
+    window.addEventListener('click', (event: MouseEvent) => {
+      const element = event.target as Element
+      if (!element.closest('.has-dropdown') && !element.classList.contains('submenu-item')) {
+        closeAllDropdownMenus()
+      }
+    })
+
+    // Close mobile menu on Escape
+    document.addEventListener('keydown', (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        const mobileMenu = document.querySelector('.mobile-menu')
+        const responsiveToggle = document.querySelector('.responsive-toggle')
+
+        if (mobileMenu?.classList.contains('show')) {
+          mobileMenu.classList.remove('show')
+          if (responsiveToggle) {
+            responsiveToggle.setAttribute('aria-expanded', 'false')
+            responsiveToggle.setAttribute('aria-label', 'Abrir menú de navegación')
+            const text = responsiveToggle.querySelector('span')
+            const icon = responsiveToggle.querySelector('svg')
+            if (text) text.textContent = 'Menú'
+            if (icon) {
+              icon.innerHTML = `<path d="M2 1.667h24m-24 8h24m-24 8h24" stroke="currentColor" stroke-width="2.667" stroke-linecap="round" stroke-linejoin="round"/>`
+            }
+            ;(responsiveToggle as HTMLElement).focus()
+          }
+        }
+      }
+    })
+
+    // Initialize active menu item
+    setActiveMenuItem()
+  })
+</script>
+
+<style>
+  /* Mobile menu hidden by default */
+  .mobile-menu {
+    display: none;
+  }
+
+  .mobile-menu.show {
+    display: block;
+  }
+
+  /* Mobile details/summary styling */
+  .mobile-details summary {
+    list-style: none;
+  }
+
+  .mobile-details summary::-webkit-details-marker {
+    display: none;
+  }
+
+  .mobile-details[open] .chevron-icon {
+    transform: rotate(180deg);
+  }
+
+  /* Desktop dropdown styles */
+  @media (min-width: 1024px) {
+    .desktop-menu .has-dropdown {
+      position: relative;
+    }
+
+    .desktop-menu .submenu {
+      display: flex;
+      flex-direction: column;
+      gap: 0.25rem;
+      visibility: hidden;
+      opacity: 0;
+      transform: translateY(10px);
+      transition: all 0.2s ease-in-out;
+    }
+
+    .desktop-menu .dropdown-trigger.show + .submenu {
+      visibility: visible;
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  /* Active menu item styling */
+  .is-active {
+    color: white;
+    font-weight: 600;
+  }
+
+  /* Wavy underline on hover/focus for dropdown triggers */
+  .dropdown-trigger:where(:hover, :focus-visible),
+  .dropdown-trigger.show {
+    text-decoration: underline;
+    text-decoration-style: wavy;
+    text-decoration-thickness: 1px;
+    text-underline-offset: 4px;
+  }
+</style>
diff --git a/src/components/ResponsiveToggle.astro b/src/components/ResponsiveToggle.astro
new file mode 100644
index 0000000..c6b9cbc
--- /dev/null
+++ b/src/components/ResponsiveToggle.astro
@@ -0,0 +1,119 @@
+---
+/**
+ * ResponsiveToggle Component
+ *
+ * @description A toggle button for mobile navigation with full accessibility support
+ * Based on accessible-astro-starter patterns
+ */
+interface Props {
+  /**
+   * Additional classes to apply to the ResponsiveToggle
+   */
+  class?: string
+}
+
+const { class: className } = Astro.props
+---
+
+<button
+  class:list={[className, 'responsive-toggle lg:hidden text-white p-2 rounded outline-none transition-colors focus-visible:bg-white/15 focus-visible:text-blue-300']}
+  aria-expanded="false"
+  aria-label="Abrir menú de navegación"
+  aria-controls="mobile-menu"
+>
+  <span class="sr-only lg:not-sr-only mr-1">Menú</span>
+  <svg
+    class="w-8 h-8 transition-transform"
+    width="26"
+    height="21"
+    aria-hidden="true"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M2 1.667h24m-24 8h24m-24 8h24"
+      stroke="currentColor"
+      stroke-width="2.667"
+      stroke-linecap="round"
+      stroke-linejoin="round"></path>
+  </svg>
+</button>
+
+<script>
+  document.addEventListener('astro:page-load', () => {
+    // variables
+    const responsiveToggle = document.querySelector('.responsive-toggle')
+    if (!responsiveToggle) return
+
+    // functions
+    const openMenu = (toggle: Element): void => {
+      const text = toggle.querySelector('span')
+      const icon = toggle.querySelector('svg')
+      if (!text || !icon) return
+
+      text.textContent = 'Cerrar'
+      toggle.setAttribute('aria-expanded', 'true')
+      toggle.setAttribute('aria-label', 'Cerrar menú de navegación')
+      icon.innerHTML = `<path d="M6 18L18 6M6 6l12 12" stroke="currentColor" stroke-width="2.667" stroke-linecap="round" stroke-linejoin="round"/>`
+    }
+
+    const closeMenu = (toggle: Element): void => {
+      const text = toggle.querySelector('span')
+      const icon = toggle.querySelector('svg')
+      if (!text || !icon) return
+
+      text.textContent = 'Menú'
+      toggle.setAttribute('aria-expanded', 'false')
+      toggle.setAttribute('aria-label', 'Abrir menú de navegación')
+      icon.innerHTML = `<path d="M2 1.667h24m-24 8h24m-24 8h24" stroke="currentColor" stroke-width="2.667" stroke-linecap="round" stroke-linejoin="round"/>`
+    }
+
+    // execution
+    responsiveToggle.addEventListener('click', () => {
+      const mobileNavigation = document.querySelector('.mobile-menu')
+      if (!mobileNavigation) return
+
+      mobileNavigation.classList.toggle('show')
+      mobileNavigation.classList.contains('show')
+        ? openMenu(responsiveToggle)
+        : closeMenu(responsiveToggle)
+    })
+  })
+</script>
+
+<style>
+  .responsive-toggle {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+  }
+
+  .responsive-toggle:where(:hover, :focus-visible) span:not(.sr-only) {
+    text-decoration: underline;
+    text-decoration-style: wavy;
+    text-decoration-thickness: 1px;
+    text-underline-offset: 4px;
+  }
+
+  /* Screen reader only class */
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  @media (min-width: 1024px) {
+    .responsive-toggle {
+      display: none;
+    }
+  }
+</style>
diff --git a/src/content/config.ts b/src/content/config.ts
new file mode 100644
index 0000000..3d238b6
--- /dev/null
+++ b/src/content/config.ts
@@ -0,0 +1,24 @@
+import { defineCollection, z } from 'astro:content';
+
+const menuCollection = defineCollection({
+  type: 'data',
+  schema: z.object({
+    items: z.array(
+      z.object({
+        label: z.string(),
+        href: z.string().optional(),
+        // optional
+        children: z.array(
+          z.object({
+            label: z.string(),
+            href: z.string(),
+          })
+        ).optional(),
+      })
+    )
+  })
+});
+
+export const collections = {
+ 'menu': menuCollection,
+};
\ No newline at end of file
diff --git a/src/content/menu/main.json b/src/content/menu/main.json
new file mode 100644
index 0000000..4d54c8c
--- /dev/null
+++ b/src/content/menu/main.json
@@ -0,0 +1,42 @@
+{
+  "items": [
+    {
+      "label": "Inicio",
+      "href": "/"
+    },
+    {
+      "label": "La Conferencia",
+      "children": [
+        {
+          "label": "Speakers",
+          "href": "/speakers"
+        },
+        {
+          "label": "Agenda",
+          "href": "/agenda"
+        },
+        {
+          "label": "Sede",
+          "href": "/location"
+        }
+      ]
+    },
+    {
+      "label": "Patrocinios",
+      "href": "/sponsorship"
+    },
+    {
+      "label": "Ediciones Anteriores",
+      "children": [
+        {
+          "label": "2025 (Sevilla)",
+          "href": "https://2025.es.pycon.org"
+        },
+        {
+          "label": "2024 (Vigo)",
+          "href": "https://2024.es.pycon.org"
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 8fe12f7..45675f0 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -2,6 +2,7 @@
 import '../style/global.css'
 import '@fontsource-variable/jetbrains-mono'
 import { ClientRouter } from 'astro:transitions'
+import Nav from '../components/Nav.astro'
 
 interface Props {
   title: string
@@ -28,7 +29,10 @@ const { title, description = 'PyconES 2026' } = Astro.props
   <body
     class="bg-slate-900 text-white antialiased h-screen flex flex-col justify-center bg-linear-to-r from-gray to-blue-900 bg-radial"
   >
-    <slot />
+    <Nav />
+    <main class="flex-grow">
+      <slot />
+    </main>
   </body>
 </html>