diff --git a/web/src/features/navbar/index.ts b/web/src/features/navbar/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..06c22c60c51af24ffe5e169276e0d9587d325cfb
--- /dev/null
+++ b/web/src/features/navbar/index.ts
@@ -0,0 +1 @@
+export * from './navbar'
diff --git a/web/src/features/navbar/nav-button.tsx b/web/src/features/navbar/nav-button.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..00e39e9cfca2b3b065892743d1b30929d39f672b
--- /dev/null
+++ b/web/src/features/navbar/nav-button.tsx
@@ -0,0 +1,24 @@
+import React from 'react'
+
+import { Button, ButtonProps, Text } from '@chakra-ui/react'
+
+import { Link } from '@redwoodjs/router'
+
+export type NavButtonProps = {
+  label: string
+  to: string
+} & ButtonProps
+
+export const NavButton: React.FC<NavButtonProps> = ({
+  label,
+  to,
+  ...props
+}) => {
+  return (
+    <Link to={to}>
+      <Button {...props} justifyContent="start" w="full">
+        <Text>{label}</Text>
+      </Button>
+    </Link>
+  )
+}
diff --git a/web/src/features/navbar/navbar.spec.tsx b/web/src/features/navbar/navbar.spec.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..4c1caf2fe70e7e6531e6f3cc4786e15357c51a61
--- /dev/null
+++ b/web/src/features/navbar/navbar.spec.tsx
@@ -0,0 +1,11 @@
+import * as RTL from '@redwoodjs/testing/web'
+
+import { Navbar } from './navbar'
+
+describe('HomePage', () => {
+  it('renders successfully', () => {
+    RTL.render(<Navbar />)
+
+    RTL.screen.getByText(/Componentes/i)
+  })
+})
diff --git a/web/src/features/navbar/navbar.stories.tsx b/web/src/features/navbar/navbar.stories.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..9080cc706fc8b0de927bd1e955746d6afc50a2c9
--- /dev/null
+++ b/web/src/features/navbar/navbar.stories.tsx
@@ -0,0 +1,13 @@
+import type { StoryObj } from '@storybook/react'
+
+import { Navbar } from './navbar'
+
+type Args = {}
+
+export default {
+  component: Navbar,
+}
+
+type Story = StoryObj<Args>
+
+export const Default: Story = {}
diff --git a/web/src/features/navbar/navbar.tsx b/web/src/features/navbar/navbar.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..796891caa56e3b26f5fa305dddcc667d478d60c4
--- /dev/null
+++ b/web/src/features/navbar/navbar.tsx
@@ -0,0 +1,37 @@
+import { Flex, Stack, Text } from '@chakra-ui/react'
+
+import { NavButton } from './nav-button'
+
+export const Navbar: React.FC = () => {
+  return (
+    <Flex as="section" minH="100vh" bg="bg.canvas">
+      <Flex
+        flex="1"
+        bg="bg.surface"
+        boxShadow="sm"
+        maxW={{ base: 'full', sm: 'xs' }}
+        py={{ base: '6', sm: '8' }}
+        px={{ base: '4', sm: '6' }}
+      >
+        <Stack justify="space-between" spacing="1" width="full">
+          <Stack spacing="8" shouldWrapChildren>
+            <Stack spacing="1">
+              <NavButton label="Inicio" to="/" />
+            </Stack>
+            <Stack>
+              <Text textStyle="sm" color="fg.subtle" fontWeight="medium">
+                Componentes
+              </Text>
+              <Stack spacing="1">
+                <NavButton label="Patrones" to="/patrones" />
+                <NavButton label="Implementaciones" to="/implementaciones" />
+                <NavButton label="Reportes" to="/reportes" />
+                <NavButton label="Test" to="/tests" />
+              </Stack>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Flex>
+    </Flex>
+  )
+}
diff --git a/web/src/layouts/layout.tsx b/web/src/layouts/layout.tsx
index 0ee887f76f8ce2d296cb1c3d56e89f70e4e3c47c..35e9390eb67a00e5fe31fbeebb648318156fc912 100644
--- a/web/src/layouts/layout.tsx
+++ b/web/src/layouts/layout.tsx
@@ -2,12 +2,15 @@ import React from 'react'
 
 import { Box, Container, Flex, HStack } from '@chakra-ui/react'
 
+import { Navbar } from 'src/features/navbar'
 import Routes from 'src/Routes'
 
 export const Layout: React.FC = () => {
   return (
     <HStack>
-      <Box bgColor="teal.50">{/* navbar */}</Box>
+      <Box bgColor="teal.50">
+        <Navbar />
+      </Box>
       <Flex h="100vh" flexGrow="1" bgColor="white">
         <Container maxW="lg" py="10" flexGrow="1">
           <Routes />
diff --git a/web/src/pages/HomePage/home-page.stories.tsx b/web/src/pages/HomePage/home-page.stories.tsx
index 083668653161d8c3544c43e9e848d63d87ba8331..05b5ce7d6730df1c37f5808e3e7102f18dbc3351 100644
--- a/web/src/pages/HomePage/home-page.stories.tsx
+++ b/web/src/pages/HomePage/home-page.stories.tsx
@@ -1,14 +1,12 @@
-import type { Meta, StoryObj } from '@storybook/react'
+import type { StoryObj } from '@storybook/react'
 
 import { HomePage } from './home-page'
 
-const meta: Meta = {
+export default {
   component: HomePage,
   title: 'Home',
 }
 
-export default meta
-
 export const Default: StoryObj<typeof HomePage> = {
   render: () => <HomePage />,
 }