diff --git a/web/src/Routes.tsx b/web/src/Routes.tsx
index f9af536a70eb036e74a3859dd442b48578e1d673..8ed15b353ab85b714c8e62c06b412270bd5a071b 100644
--- a/web/src/Routes.tsx
+++ b/web/src/Routes.tsx
@@ -10,12 +10,14 @@
 import { Router, Route } from '@redwoodjs/router'
 
 import { HomePage } from './pages/HomePage'
+import { PatternsPage } from './pages/Patterns'
 
 const Routes = () => {
   return (
     <Router>
       <Route notfound page={NotFoundPage} />
       <Route path="/" page={HomePage} name="home" />
+      <Route path="/patrones" page={PatternsPage} name="patterns" />
     </Router>
   )
 }
diff --git a/web/src/pages/Patterns/index.ts b/web/src/pages/Patterns/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ae6b6620d76060a451fdde258ca97a3c4ccfb8cf
--- /dev/null
+++ b/web/src/pages/Patterns/index.ts
@@ -0,0 +1 @@
+export * from './patterns-page'
diff --git a/web/src/pages/Patterns/patterns-page.spec.tsx b/web/src/pages/Patterns/patterns-page.spec.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..b2ead10d88e968aeaa50a4455eabfeea78eaca95
--- /dev/null
+++ b/web/src/pages/Patterns/patterns-page.spec.tsx
@@ -0,0 +1,12 @@
+import * as RTL from '@redwoodjs/testing/web'
+
+import { PatternsPage } from './patterns-page'
+
+describe('HomePage', () => {
+  it('renders successfully', () => {
+    RTL.render(<PatternsPage />)
+
+    RTL.screen.getByText('Patrones')
+    RTL.screen.getByText(/contenido de patrones/i)
+  })
+})
diff --git a/web/src/pages/Patterns/patterns-page.stories.tsx b/web/src/pages/Patterns/patterns-page.stories.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..77a611d15455524f659a4a8e3e3c34f359ea98b7
--- /dev/null
+++ b/web/src/pages/Patterns/patterns-page.stories.tsx
@@ -0,0 +1,12 @@
+import type { StoryObj } from '@storybook/react'
+
+import { PatternsPage } from './patterns-page'
+
+export default {
+  component: PatternsPage,
+  title: 'Patterns',
+}
+
+export const Default: StoryObj<typeof PatternsPage> = {
+  render: () => <PatternsPage />,
+}
diff --git a/web/src/pages/Patterns/patterns-page.tsx b/web/src/pages/Patterns/patterns-page.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..4f3003f8c5a1ad86d539d93454a2f1eb4e2cf3c6
--- /dev/null
+++ b/web/src/pages/Patterns/patterns-page.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+
+import { Text, Heading, Box } from '@chakra-ui/react'
+
+export const PatternsPage: React.FC = () => {
+  return (
+    <Box>
+      <Heading as="h1" size="xl" mb="6">
+        Patrones
+      </Heading>
+      <Text fontSize="lg" mb="4">
+        Contenido de patrones
+      </Text>
+    </Box>
+  )
+}