diff --git a/packages/docs/src/assets/styles/global.css b/packages/docs/src/assets/styles/global.css
index da1e370..8d4a039 100644
--- a/packages/docs/src/assets/styles/global.css
+++ b/packages/docs/src/assets/styles/global.css
@@ -23,6 +23,34 @@
         @apply font-semibold bg-primary-600 text-white border-primary-600 hover:bg-primary-800 hover:border-primary-800 hover:text-white dark:text-white dark:bg-primary-700 dark:border-primary-700 dark:hover:border-primary-900 dark:hover:bg-primary-900;
     }
 
+    .slot h1 {
+        @apply mb-2 font-semibold text-2xl;
+    }
+
+    .slot h2 {
+        @apply mb-2 font-semibold text-lg;
+    }
+
+    .slot h3 {
+        @apply mb-2 font-semibold text-base;
+    }
+
+    .slot code {
+        @apply bg-slate-100 dark:bg-slate-800 p-1 px-2 rounded w-full;
+    }
+
+    .slot pre {
+        @apply w-full flex my-2;
+    }
+
+    .slot a {
+        @apply text-sky-900 font-medium dark:text-sky-400;
+    }
+
+    .slot hr {
+        @apply my-5;
+    }
+
     [data-aw-toggle-menu] path {
         @apply transition;
     }
@@ -30,6 +58,11 @@
         @apply -rotate-45 translate-y-[15px] translate-x-[-3px];
     }
 
+    p,
+    li {
+        @apply mt-2 text-sm text-slate-700 dark:text-slate-400;
+    }
+
     [data-aw-toggle-menu].expanded g > path:last-child {
         @apply rotate-45 translate-y-[-8px] translate-x-[14px];
     }
diff --git a/packages/docs/src/components/widgets/ExtraBar.tsx b/packages/docs/src/components/widgets/ExtraBar.tsx
new file mode 100644
index 0000000..030951f
--- /dev/null
+++ b/packages/docs/src/components/widgets/ExtraBar.tsx
@@ -0,0 +1,27 @@
+import { component$ } from '@builder.io/qwik'
+import { useLocation } from '@builder.io/qwik-city'
+
+/**
+ * options = [] array con la lista de opciones de la documentacion
+ */
+export default component$(
+    ({
+        options = [],
+    }: {
+        options: { link: string; name: string; class?: string }[]
+    }) => {
+        const { pathname } = useLocation()
+        const editUrl = ` https://github.com/codigoencasa/bot-whatsapp/edit/dev/packages/docs/src/routes${pathname}index.mdx`
+        return (
+            <div>
+                <ul>
+                    {options.map((opt) => (
+                        <li class={opt.class}>
+                            <a href={editUrl}>{opt.name}</a>
+                        </li>
+                    ))}
+                </ul>
+            </div>
+        )
+    }
+)
diff --git a/packages/docs/src/components/widgets/Footer.tsx b/packages/docs/src/components/widgets/Footer.tsx
index 62f9fa8..d7c3b8b 100644
--- a/packages/docs/src/components/widgets/Footer.tsx
+++ b/packages/docs/src/components/widgets/Footer.tsx
@@ -13,11 +13,6 @@ export default component$(() => {
             items: [
                 { title: 'Features', href: '#' },
                 { title: 'Security', href: '#' },
-                { title: 'Team', href: '#' },
-                { title: 'Enterprise', href: '#' },
-                { title: 'Customer stories', href: '#' },
-                { title: 'Pricing', href: '#' },
-                { title: 'Resources', href: '#' },
             ],
         },
         {
@@ -25,9 +20,6 @@ export default component$(() => {
             items: [
                 { title: 'Developer API', href: '#' },
                 { title: 'Partners', href: '#' },
-                { title: 'Atom', href: '#' },
-                { title: 'Electron', href: '#' },
-                { title: 'Qwind Desktop', href: '#' },
             ],
         },
         {
@@ -35,9 +27,6 @@ export default component$(() => {
             items: [
                 { title: 'Docs', href: '#' },
                 { title: 'Community Forum', href: '#' },
-                { title: 'Professional Services', href: '#' },
-                { title: 'Skills', href: '#' },
-                { title: 'Status', href: '#' },
             ],
         },
         {
@@ -45,11 +34,6 @@ export default component$(() => {
             items: [
                 { title: 'About', href: '#' },
                 { title: 'Blog', href: '#' },
-                { title: 'Careers', href: '#' },
-                { title: 'Press', href: '#' },
-                { title: 'Inclusion', href: '#' },
-                { title: 'Social Impact', href: '#' },
-                { title: 'Shop', href: '#' },
             ],
         },
     ]
@@ -79,9 +63,10 @@ export default component$(() => {
                             </Link>
                         </div>
                         <div class="text-sm text-gray-600 dark:text-gray-400">
-                            Lorem ipsum dolor sit amet, consectetur adipiscing
-                            elit. Morbi sagittis, quam nec venenatis lobortis,
-                            mi risus tempus nulla
+                            Nos sentimos muy afortunados de poder contribuir a
+                            este proyecto y esperamos poder seguir trabajando
+                            juntos para ayudar a los pequeños comercios a
+                            impulsar sus ventas y fortalecer la economía local.
                         </div>
                     </div>
                     {links.map(({ title, items }) => (
diff --git a/packages/docs/src/components/widgets/Header.tsx b/packages/docs/src/components/widgets/Header.tsx
index ef13e83..73c2714 100644
--- a/packages/docs/src/components/widgets/Header.tsx
+++ b/packages/docs/src/components/widgets/Header.tsx
@@ -81,16 +81,20 @@ export default component$(() => {
                         </li>
                         <li>
                             <a
+                                target={'_blank'}
                                 class="font-medium hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out"
-                                href={'/blog'}
+                                href={
+                                    'https://codigoencasa.com/tag/bot-whatsapp/'
+                                }
                             >
                                 Blog
                             </a>
                         </li>
                         <li class="md:hidden">
                             <a
+                                target={'_blank'}
                                 class="font-bold hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out"
-                                href="https://github.com/onwidget/qwind"
+                                href="https://github.com/codigoencasa/bot-whatsapp"
                             >
                                 Github
                             </a>
@@ -100,7 +104,7 @@ export default component$(() => {
                         <div class="hidden items-center md:flex">
                             <ToggleTheme />
                             <a
-                                href="https://github.com/onwidget/qwind"
+                                href="https://github.com/codigoencasa/bot-whatsapp"
                                 class="inline-block text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5"
                                 aria-label="Qwind Github"
                             >
diff --git a/packages/docs/src/components/widgets/NavBar.tsx b/packages/docs/src/components/widgets/NavBar.tsx
index 645618b..42127ee 100644
--- a/packages/docs/src/components/widgets/NavBar.tsx
+++ b/packages/docs/src/components/widgets/NavBar.tsx
@@ -1,20 +1,28 @@
 import { component$ } from '@builder.io/qwik'
+import { useLocation } from '@builder.io/qwik-city'
 
 /**
  * options = [] array con la lista de opciones de la documentacion
  */
 export default component$(
-    ({
-        options = [],
-    }: {
-        options: { link: string; name: string; class?: string }[]
-    }) => {
+    ({ options = [] }: { options: { link: string; name: string }[] }) => {
+        const location = useLocation()
+        const currentPage = location.pathname
         return (
             <div>
                 <ul>
                     {options.map((opt) => (
-                        <li class={opt.class}>
-                            <a href={opt.link}>{opt.name}</a>
+                        <li>
+                            <a
+                                class={
+                                    currentPage === `${opt.link}/`
+                                        ? 'font-semibold'
+                                        : ''
+                                }
+                                href={opt.link}
+                            >
+                                {opt.name}
+                            </a>
                         </li>
                     ))}
                 </ul>
diff --git a/packages/docs/src/routes/docs/index.mdx b/packages/docs/src/routes/docs/index.mdx
index ec45f3a..d5aa85f 100644
--- a/packages/docs/src/routes/docs/index.mdx
+++ b/packages/docs/src/routes/docs/index.mdx
@@ -1,11 +1,19 @@
-# Titulo
+# Primeros Pasos
 
-Below is an example of markdown in JSX.
+Los chatbots son una herramienta poderosa para que las empresas y
+organizaciones comuniquen de forma personalizada y automatizada con sus clientes.
 
-```js
-const a = hola
+Está documentación te ayudará a instalar tu bot de whatsapp en simples pasos con el proposito de
+que tengas un chatbot funcional en solo minutos.
+
+---
+
+### Ejecutar
+
+Es muy sencillo solo deberas ejecutar el siguiente comando 🚀
+
+```shell
+npm create bot-whatsapp@latest
 ```
 
-<div style={{ padding: '1rem', backgroundColor: 'violet' }}>
-    Try and change the background color to `tomato`.
-</div>
+![](https://camo.githubusercontent.com/97cd563fb448c72cc50dd60d71e85d269e5b1c738473d56fee6e023e1e0723bb/68747470733a2f2f692e67697068792e636f6d2f6d656469612f6e744d74365476616c70737454497837416b2f67697068792e77656270)
diff --git a/packages/docs/src/routes/docs/install/index.mdx b/packages/docs/src/routes/docs/install/index.mdx
new file mode 100644
index 0000000..a8eeb88
--- /dev/null
+++ b/packages/docs/src/routes/docs/install/index.mdx
@@ -0,0 +1,10 @@
+---
+title: Overview
+contributors:
+    - adamdbradley
+    - steve8708
+    - manucorporat
+    - gabrielgrant
+---
+
+# Instalación
diff --git a/packages/docs/src/routes/docs/layout!.tsx b/packages/docs/src/routes/docs/layout!.tsx
index c720d0a..3ff05ae 100644
--- a/packages/docs/src/routes/docs/layout!.tsx
+++ b/packages/docs/src/routes/docs/layout!.tsx
@@ -3,10 +3,17 @@ import type { DocumentHead } from '@builder.io/qwik-city'
 import Footer from '~/components/widgets/Footer'
 import Header from '~/components/widgets/Header'
 import NavBar from '~/components/widgets/NavBar'
+import ExtraBar from '~/components/widgets/ExtraBar'
 
 export default component$(() => {
     const store = useStore({
         options: [
+            { name: 'Primeros pasos', link: '/docs' },
+            { name: 'Instalación', link: '/docs/install' },
+            { name: 'Configuración', link: '/docs/settings' },
+            { name: 'Migración', link: '/docs/migration' },
+        ],
+        extraOptions: [
             { name: 'Primeros pasos', link: '/docs', class: 'font-semibold' },
             { name: 'Instalación', link: '/docs' },
             { name: 'Configuración', link: '/docs' },
@@ -17,14 +24,17 @@ export default component$(() => {
     return (
         <>
             <Header />
-            <main class="container mx-auto px-12">
-                <div class={'grid grid-cols-4 gap-4'}>
-                    <div class={' col-span-1'}>
+            <main class="container mx-auto px-12 ">
+                <div class={'grid grid-cols-5 gap-1 min-h-min'}>
+                    <div class={'px-3 col-span-1  '}>
                         <NavBar options={store.options} />
                     </div>
-                    <div class={'col-span-3'}>
+                    <div class={'col-span-3 slot pb-5'}>
                         <Slot />
                     </div>
+                    <div class={'px-3 col-span-1  '}>
+                        <ExtraBar options={store.extraOptions} />
+                    </div>
                 </div>
             </main>
 
diff --git a/packages/docs/src/routes/docs/migration/index.mdx b/packages/docs/src/routes/docs/migration/index.mdx
new file mode 100644
index 0000000..560a39c
--- /dev/null
+++ b/packages/docs/src/routes/docs/migration/index.mdx
@@ -0,0 +1,10 @@
+---
+title: Overview
+contributors:
+    - adamdbradley
+    - steve8708
+    - manucorporat
+    - gabrielgrant
+---
+
+# Migracion
diff --git a/packages/docs/src/routes/docs/settings/index.mdx b/packages/docs/src/routes/docs/settings/index.mdx
new file mode 100644
index 0000000..c4c9639
--- /dev/null
+++ b/packages/docs/src/routes/docs/settings/index.mdx
@@ -0,0 +1,10 @@
+---
+title: Overview
+contributors:
+    - adamdbradley
+    - steve8708
+    - manucorporat
+    - gabrielgrant
+---
+
+# Ajustes