diff --git a/public/documentation_videos/Crear_Agenda.mp4 b/public/documentation_videos/Crear_Agenda.mp4
new file mode 100644
index 0000000..509e0b4
Binary files /dev/null and b/public/documentation_videos/Crear_Agenda.mp4 differ
diff --git a/public/documentation_videos/Crear_Usuario_Recepcionista.mp4 b/public/documentation_videos/Crear_Usuario_Recepcionista.mp4
new file mode 100644
index 0000000..83e4c20
Binary files /dev/null and b/public/documentation_videos/Crear_Usuario_Recepcionista.mp4 differ
diff --git a/src/components/navbar/Navbar.astro b/src/components/navbar/Navbar.astro
index 0f4e41d..23f2bd3 100644
--- a/src/components/navbar/Navbar.astro
+++ b/src/components/navbar/Navbar.astro
@@ -52,7 +52,10 @@ const currentPath: string = Astro.url.pathname;
             Contacto
         </a>
 
-        <a href="/docs" class={currentPath === "/docs" ? "active" : ""}>
+        <a
+            href="/documentation"
+            class={currentPath === "/documentation" ? "active" : ""}
+        >
             Documentación
         </a>
     </div>
diff --git a/src/components/navbar/navbar.css b/src/components/navbar/navbar.css
index 60cb79c..c05090e 100644
--- a/src/components/navbar/navbar.css
+++ b/src/components/navbar/navbar.css
@@ -66,11 +66,16 @@ a.active::after {
     content: "";
     display: block;
     position: absolute;
+    top: 100%;
     left: 0;
     bottom: 0;
-    height: 2px;
+    height: 3px;
     width: 100%;
-    background-color: red;
+    background: linear-gradient(
+        90deg,
+        var(--main-pink-500) 0%,
+        var(--main-yellow-500) 100%
+    );
 }
 
 .general-button {
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index b88aef4..a70e48a 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -25,7 +25,7 @@ const { pageTitle } = Astro.props;
         <title>{pageTitle ? `Naliia | ${pageTitle}` : "Naliia"}</title>
     </head>
 
-    <body class="body-container">
+    <body>
         <svg
             class="bg-svg"
             aria-hidden="true"
@@ -40,7 +40,7 @@ const { pageTitle } = Astro.props;
                 fill="currentColor"></path>
         </svg>
 
-        <header>
+        <header class="header">
             <Navbar />
         </header>
 
@@ -92,10 +92,11 @@ const { pageTitle } = Astro.props;
                     </div>
                 </a>
             </div>
+
             <slot />
         </main>
 
-        <footer>
+        <footer class="footer">
             <Footer />
         </footer>
     </body>
diff --git a/src/pages/contact.astro b/src/pages/contact.astro
index f70ec17..bf6d29d 100644
--- a/src/pages/contact.astro
+++ b/src/pages/contact.astro
@@ -21,7 +21,7 @@ import "../styles/contactpage.css";
             customYPosition="20%"
             logoSrc="/src/assets/imgs/logo-naliia.svg"
             logoAlt="Logo de Naliia"
-            mainTitle="Contactanos"
+            mainTitle="Contáctanos"
             autoHeight={true}
         >
             <div slot="extraContent">
@@ -29,12 +29,12 @@ import "../styles/contactpage.css";
                     <div class="contact-methods">
                         <div class="title-and-text">
                             <h5 class="subtitle">
-                                Todas nuestras redes sociales y metodos de
+                                Todas nuestras redes sociales y métodos de
                                 contacto
                             </h5>
 
                             <p class="phrase">
-                                Contactanos y toma el control total de tu
+                                Contáctanos y toma el control total de tu
                                 negocio con Naliia.
                             </p>
                         </div>
@@ -91,7 +91,7 @@ import "../styles/contactpage.css";
                         <div class="form-container">
                             <div class="form-items">
                                 <h5 class="form-title">
-                                    O dejanos tus datos, nosotros te contactamos
+                                    O déjanos tus datos, nosotros te contactamos
                                 </h5>
 
                                 <form
@@ -127,7 +127,7 @@ import "../styles/contactpage.css";
 
                                     <div class="form-item">
                                         <label for="" class="item-label"
-                                            >Numero de celular</label
+                                            >Número de celular</label
                                         >
 
                                         <input
@@ -157,7 +157,7 @@ import "../styles/contactpage.css";
                                 <button
                                     form="contact-form"
                                     class="submit-button"
-                                    >Enviar informacion</button
+                                    >Enviar información</button
                                 >
                             </div>
                         </div>
diff --git a/src/pages/docs.astro b/src/pages/docs.astro
deleted file mode 100644
index 8199f0d..0000000
--- a/src/pages/docs.astro
+++ /dev/null
@@ -1,11 +0,0 @@
----
-// imports
-
-// types
-
-// props
-
-// logic, variables, functions, etc.
----
-
-<section>Esta es la pagina de documentacion</section>
diff --git a/src/pages/documentation.astro b/src/pages/documentation.astro
new file mode 100644
index 0000000..e8338fc
--- /dev/null
+++ b/src/pages/documentation.astro
@@ -0,0 +1,154 @@
+---
+// imports
+import Layout from "../layouts/Layout.astro";
+import "../styles/documentation.css";
+
+// types
+
+// props
+
+// logic, variables, functions, etc.
+const videoFiles = import.meta.glob("../../public/documentation_videos/*.mp4", {
+    eager: true,
+});
+
+const videosList = Object.keys(videoFiles).map((key) => {
+    const fileName = key.split("/").pop() || "";
+    const videoName = fileName
+        .replace(".mp4", "")
+        .replace(/-/g, " ")
+        .replace(/_/g, " ");
+
+    return {
+        name: videoName,
+        url: (videoFiles[key] as { default: string }).default,
+        id: fileName.replace(".mp4", "").toLocaleLowerCase(),
+    };
+});
+---
+
+<Layout pageTitle="Documentación">
+    <section class="videos-displayer">
+        <h3>
+            Aprende cómo funciona Naliia y resuelve cualquier duda que tengas
+        </h3>
+
+        <form role="search" class="search-bar">
+            <div class="input-container">
+                <input
+                    type="search"
+                    id="video-search"
+                    name="q"
+                    placeholder="Buscar"
+                    class="search-input"
+                    required
+                />
+
+                <button
+                    type="submit"
+                    aria-label="Ejecutar búsqueda"
+                    class="search-button"
+                >
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="32"
+                        height="32"
+                        viewBox="0 0 24 24"
+                        ><g
+                            fill="none"
+                            stroke="var(--main-icon-color)"
+                            stroke-width="2"
+                            ><circle cx="11" cy="11" r="7"></circle><path
+                                stroke-linecap="round"
+                                d="m20 20l-3-3"></path></g
+                        ></svg
+                    >
+                </button>
+            </div>
+        </form>
+
+        <div class="videos-container">
+            {
+                videosList.map((video) => (
+                    <div
+                        class="video-item"
+                        data-name={video.name.toLowerCase()}
+                    >
+                        <a
+                            href={`/video_player/${video.id}`}
+                            class="video-title"
+                        >
+                            {video.name}
+                        </a>
+
+                        <a href={`/video_player/${video.id}`}>
+                            <button class="play-button">
+                                <svg
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    width="32"
+                                    height="32"
+                                    viewBox="0 0 20 20"
+                                >
+                                    <path
+                                        fill="var(--icon-whitecolor)"
+                                        fill-rule="evenodd"
+                                        d="M10 18a8 8 0 1 0 0-16a8 8 0 0 0 0 16M9.555 7.168A1 1 0 0 0 8 8v4a1 1 0 0 0 1.555.832l3-2a1 1 0 0 0 0-1.664z"
+                                        clip-rule="evenodd"
+                                    />
+                                </svg>
+                                Ver video
+                            </button>
+                        </a>
+                    </div>
+                ))
+            }
+
+            <p
+                id="no-results"
+                style="display: none; text-align: center; margin-top: 2rem;"
+            >
+                No se encontraron videos que coincidan con la búsqueda.
+            </p>
+        </div>
+    </section>
+</Layout>
+
+<script>
+    const searchInput = document.querySelector(
+        "#video-search",
+    ) as HTMLInputElement | null;
+
+    const videoItems = document.querySelectorAll(
+        ".video-item",
+    ) as NodeListOf<HTMLElement>;
+
+    const noResults = document.querySelector(
+        "#no-results",
+    ) as HTMLElement | null;
+
+    if (searchInput) {
+        searchInput.addEventListener("input", (e) => {
+            const query = (e.target as HTMLInputElement).value
+                .toLowerCase()
+                .trim();
+            let hasVisibleVideos = false;
+
+            videoItems.forEach((item) => {
+                const name = item.getAttribute("data-name");
+                const matches = name && name.includes(query);
+
+                // Usamos toggle: si matches es true, hidden es false (se muestra)
+                // Si matches es false, hidden es true (se oculta)
+                item.classList.toggle("hidden", !matches);
+
+                if (matches) {
+                    hasVisibleVideos = true;
+                }
+            });
+
+            if (noResults) {
+                noResults.style.display = hasVisibleVideos ? "none" : "block";
+            }
+        });
+    }
+</script>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index e30fce5..2a45b03 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -16,7 +16,7 @@ import "../styles/index.css";
     <section class="homepage">
         <InitialSection
             imgSrc="/src/assets/imgs/mujer-con-tablet.svg"
-            imgAlt="Fotografia de una mujer sosteniendo una tablet"
+            imgAlt="Fotografía de una mujer sosteniendo una tablet"
             logoSrc="/src/assets/imgs/logo-naliia.svg"
             logoAlt="Logo de Naliia"
             mainTitle="Transformamos el caos en claridad"
diff --git a/src/pages/pricing.astro b/src/pages/pricing.astro
index 97a0310..1cd4316 100644
--- a/src/pages/pricing.astro
+++ b/src/pages/pricing.astro
@@ -11,7 +11,7 @@ import "../styles/pricingPage.css";
     <section class="pricing-page">
         <InitialSection
             imgSrc="/src/assets/imgs/phone_with-stats.svg"
-            imgAlt="Fotografia de un dispositivo móvil flotante con graficas y estadísticas en la pantalla y con un borde amarillo brillante"
+            imgAlt="Fotografía de un dispositivo móvil flotante con gráficas y estadísticas en la pantalla y con un borde amarillo brillante"
             imgWidth={520}
             customXPosition="-52%"
             logoSrc="/src/assets/imgs/logo-naliia.svg"
diff --git a/src/pages/video_player/[id].astro b/src/pages/video_player/[id].astro
new file mode 100644
index 0000000..41e1e52
--- /dev/null
+++ b/src/pages/video_player/[id].astro
@@ -0,0 +1,132 @@
+---
+import Layout from "../../layouts/Layout.astro";
+
+export async function getStaticPaths() {
+    const videoFiles = import.meta.glob(
+        "../../../public/documentation_videos/*.mp4",
+    );
+    const keys = Object.keys(videoFiles);
+
+    return keys.map((key) => {
+        const fileName = key.split("/").pop() || "";
+
+        const id = fileName.replace(".mp4", "").toLocaleLowerCase();
+        const videoName = id.replace(/_/g, " ").replace(/-/g, " ");
+
+        return {
+            params: { id: id },
+            props: {
+                video: {
+                    name: videoName,
+                    url: `/documentation_videos/${fileName}`,
+                },
+            },
+        };
+    });
+}
+
+const { video } = Astro.props;
+---
+
+<Layout pageTitle={video.name.charAt(0).toUpperCase() + video.name.slice(1)}>
+    <section class="player-container">
+        <header class="player-header">
+            <a href="/documentation" class="back-button"
+                ><svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="28"
+                    height="28"
+                    viewBox="0 0 24 24"
+                    ><path
+                        fill="var(--main-icon-color)"
+                        d="m7.85 13l2.85 2.85q.3.3.288.7t-.288.7q-.3.3-.712.313t-.713-.288L4.7 12.7q-.3-.3-.3-.7t.3-.7l4.575-4.575q.3-.3.713-.287t.712.312q.275.3.288.7t-.288.7L7.85 11H19q.425 0 .713.288T20 12t-.288.713T19 13z"
+                    ></path></svg
+                > Volver a la documentación</a
+            >
+
+            <h5>{video.name.charAt(0).toUpperCase() + video.name.slice(1)}</h5>
+        </header>
+
+        <div class="video-wrapper">
+            <video
+                controls
+                controlslist="nodownload"
+                oncontextmenu="return false;"
+                class="main-video"
+            >
+                <source src={video.url} type="video/mp4" />
+                Tu navegador no soporta la reproducción de videos.
+            </video>
+        </div>
+    </section>
+</Layout>
+
+<style>
+    .player-container {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-lg-24px);
+
+        padding: var(--space-2xl-48px) 64px;
+        max-width: 1200px;
+        margin: 0 auto;
+
+        @media (max-width: 1023px) {
+            padding: var(--space-2xl-48px) 48px;
+        }
+
+        @media (max-width: 767px) {
+            padding: var(--space-2xl-48px) 0px;
+        }
+    }
+
+    .player-header {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-xl-32px);
+
+        & a {
+            display: flex;
+            align-items: center;
+            gap: var(--space-sm-8px);
+        }
+
+        @media (max-width: 767px) {
+            flex-direction: column;
+            align-items: flex-start;
+            padding: 0px var(--space-lg-24px);
+
+            & a {
+                font-size: var(--font-desktop-sm);
+            }
+        }
+    }
+
+    .player-header h5 {
+        font-family: var(--font-family-primary);
+        color: var(--main-text-color);
+    }
+
+    .main-video {
+        width: 100%;
+        border-radius: 16px;
+        background: #000;
+        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
+
+        @media (max-width: 767px) {
+            border-radius: 0px;
+        }
+    }
+
+    .back-button {
+        text-decoration: none;
+        color: var(--main-text-color);
+        font-weight: bold;
+        opacity: 0.8;
+        transition: opacity 0.2s;
+    }
+
+    .back-button:hover {
+        opacity: 1;
+    }
+</style>
diff --git a/src/styles/contactpage.css b/src/styles/contactpage.css
index 615635f..2812ce7 100644
--- a/src/styles/contactpage.css
+++ b/src/styles/contactpage.css
@@ -101,7 +101,7 @@
         font-family: var(--font-family-primary);
         font-size: var(--font-desktop-base);
         font-weight: bold;
-        color: var(--main-text-color);
+        color: var(--input-txtcolor);
 
         &:focus {
             border: 1px solid var(--main-pink-500);
@@ -109,7 +109,7 @@
         }
 
         &::placeholder {
-            color: var(--main-text-color);
+            color: var(--input-txtcolor);
             opacity: 0.4;
         }
     }
diff --git a/src/styles/documentation.css b/src/styles/documentation.css
new file mode 100644
index 0000000..704f20c
--- /dev/null
+++ b/src/styles/documentation.css
@@ -0,0 +1,128 @@
+.videos-displayer {
+    padding: var(--space-2xl-48px) 350px;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2xl-48px);
+
+    @media (max-width: 1023px) {
+        padding: var(--space-2xl-48px) 48px;
+    }
+
+    @media (max-width: 767px) {
+        padding: var(--space-2xl-48px) var(--padding-lg-24px);
+    }
+}
+
+.input-container {
+    position: relative;
+    width: 100%;
+    max-width: 600px;
+}
+
+.search-input {
+    width: 100%;
+    padding: var(--padding-md-16px) var(--padding-xl-32px);
+    border: var(--documentation-input-border);
+    border-radius: var(--space-lg-24px);
+    background-color: var(--documentation-input-bgcolor);
+
+    font-family: var(--font-family-primary);
+    font-size: var(--font-desktop-base);
+    color: var(--main-text-color);
+
+    &::placeholder {
+        font-family: var(--font-family-primary);
+        color: var(--main-text-color);
+        opacity: 0.7;
+    }
+}
+
+.search-button {
+    position: absolute;
+    right: 24px;
+    top: 50%;
+    transform: translateY(-50%);
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 4px;
+}
+
+.videos-container {
+    width: 100%;
+    max-width: 600px;
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-lg-24px);
+}
+
+.video-item {
+    display: flex; /* Mantenemos el flex */
+    align-items: center;
+    justify-content: space-between;
+
+    /* Propiedades para la transición */
+    opacity: 1;
+    transform: scale(1);
+    max-height: 100px; /* Un valor mayor al alto real de tu item */
+    overflow: hidden;
+    transition:
+        opacity 0.3s ease,
+        transform 0.3s ease,
+        max-height 0.3s ease,
+        margin 0.3s ease,
+        padding 0.3s ease;
+}
+
+.video-item.hidden {
+    display: flex; /* ¡IMPORTANTE! No usamos none aquí para que la animación funcione */
+    opacity: 0;
+    transform: scale(0.95);
+    max-height: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+    pointer-events: none;
+}
+
+.video-title {
+    font-family: var(--font-family-primary);
+    font-size: var(--font-desktop-base);
+    font-weight: bold;
+    color: var(--main-text-color);
+    text-decoration: underline;
+}
+
+.play-button {
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-sm-8px);
+
+    padding: var(--padding-sm-8px) var(--padding-md-16px);
+    border: none;
+    border-radius: var(--space-sm-8px);
+
+    background-color: var(--primarybutton-bgcolor);
+    color: var(--primarybutton-txtcolor);
+
+    font-family: var(--font-family-primary);
+    font-size: var(--font-desktop-base);
+    font-weight: bold;
+
+    box-sizing: border-box;
+    cursor: pointer;
+}
+
+#no-results {
+    font-family: var(--font-family-primary);
+    font-size: var(--font-desktop-base);
+    font-weight: bold;
+    color: var(--main-text-color);
+}
diff --git a/src/styles/global.css b/src/styles/global.css
index da30c86..e70365c 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -146,12 +146,14 @@
     --card-bg-color: var(--main-mistyRose-500);
     --naliia-n-bg-color: var(--main-pink-500);
     --main-icon-color: var(--light-gray);
+    --icon-whitecolor: var(--base-white);
     --navbar-border-color: rgba(68, 68, 68, 0.2);
     --navbar-n-naliia-start: var(--main-pink-500);
     --navbar-n-naliia-end: var(--main-yellow-500);
     --main-border: 1px solid rgba(68, 68, 68, 0.2);
     --primarybutton-bgcolor: var(--main-pink-500);
     --primarybutton-txtcolor: var(--base-white);
+
     --pricingcard-bgcolor: var(--dark-gray);
     --pricingcard-secundarybgcolor: var(--main-mistyRose-500);
     --pricingcard-section-bgcolor: var(--dark-gray);
@@ -162,11 +164,17 @@
     --pricingcard-features-subtitlecolor: var(--main-pink-500);
     --pricingcard-features-txtcolor: var(--base-white);
     --pricingcard-primarytextcolor: var(--light-gray);
+
     --detailstable-header-primarybgcolor: var(--dark-gray);
     --detailstable-header-txtcolor: var(--base-white);
     --detailstable-primarytxtcolor: var(--light-gray);
     --detailstable-primaryborder: 1px solid rgba(68, 68, 68, 0.2);
 
+    --input-txtcolor: var(--light-gray);
+
+    --documentation-input-bgcolor: transparent;
+    --documentation-input-border: 1px solid rgba(68, 68, 68, 0.5);
+
     /* spacing, padding, margin */
     --space-none-0: var(--space-none);
     --space-sm-8px: var(--space-1);
@@ -255,12 +263,14 @@
     --card-bg-color: var(--main-mistyRose-500);
     --naliia-n-bg-color: var(--main-pink-500);
     --main-icon-color: var(--base-white);
+    --icon-whitecolor: var(--base-white);
     --navbar-border-color: rgba(255, 255, 255, 0.2);
     --navbar-n-naliia-start: var(--base-white);
     --navbar-n-naliia-end: var(--base-white);
     --main-border: 1px solid rgba(255, 255, 255, 0.2);
     --primarybutton-bgcolor: var(--main-pink-500);
     --primarybutton-txtcolor: var(--base-white);
+
     --pricingcard-bgcolor: var(--darker-gray);
     --pricingcard-secundarybgcolor: var(--light-gray);
     --pricingcard-section-bgcolor: var(--main-pink-500);
@@ -270,10 +280,16 @@
     --pricingcard-value-txtcolor: var(--base-white);
     --pricingcard-features-subtitlecolor: var(--main-pink-500);
     --pricingcard-primarytextcolor: var(--base-white);
+
     --detailstable-header-primarybgcolor: var(--light-gray);
     --detailstable-header-txtcolor: var(--base-white);
     --detailstable-primarytxtcolor: var(--base-white);
     --detailstable-primaryborder: 1px solid rgba(255, 255, 255, 0.2);
+
+    --input-txtcolor: var(--light-gray);
+
+    --documentation-input-bgcolor: var(--light-gray);
+    --documentation-input-border: 1px solid rgba(255, 255, 255, 0.5);
 }
 
 *,
@@ -285,18 +301,28 @@
 html {
     margin: 0;
     width: 100%;
-    height: 100%;
-    min-height: 100vh;
     overflow-x: hidden;
 }
 
 body {
     margin: 0;
     width: 100%;
-    height: 100%;
     min-height: 100vh;
     background-color: var(--main-bg-color);
     font-family: var(--font-family-primary), sans-serif, Arial;
+
+    position: relative;
+    z-index: 0;
+    overflow: hidden;
+
+    display: flex;
+    flex-direction: column;
+
+    & main {
+        flex: 1 0 auto;
+        overflow-y: auto;
+        overflow-x: hidden;
+    }
 }
 
 p {
@@ -430,19 +456,6 @@ summary {
     transform: translateX(8%);
 }
 
-.body-container {
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-    position: relative;
-    z-index: 0;
-    overflow-x: hidden;
-}
-
-main {
-    flex: 1;
-}
-
 .floating-buttons {
     position: fixed;
 
