diff --git a/package-lock.json b/package-lock.json
index 0c2afb8..db9b8f0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,7 +5,8 @@
     "packages": {
         "": {
             "dependencies": {
-                "lucide-vue-next": "^0.454.0"
+                "lucide-vue-next": "^0.454.0",
+                "vue-router": "^4.4.5"
             },
             "devDependencies": {
                 "@inertiajs/vue3": "^1.0.14",
@@ -971,6 +972,12 @@
                 "@vue/shared": "3.5.12"
             }
         },
+        "node_modules/@vue/devtools-api": {
+            "version": "6.6.4",
+            "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
+            "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
+            "license": "MIT"
+        },
         "node_modules/@vue/reactivity": {
             "version": "3.5.12",
             "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.12.tgz",
@@ -3271,6 +3278,21 @@
                 }
             }
         },
+        "node_modules/vue-router": {
+            "version": "4.4.5",
+            "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.4.5.tgz",
+            "integrity": "sha512-4fKZygS8cH1yCyuabAXGUAsyi1b2/o/OKgu/RUb+znIYOxPRxdkytJEx+0wGcpBE1pX6vUgh5jwWOKRGvuA/7Q==",
+            "license": "MIT",
+            "dependencies": {
+                "@vue/devtools-api": "^6.6.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/posva"
+            },
+            "peerDependencies": {
+                "vue": "^3.2.0"
+            }
+        },
         "node_modules/which": {
             "version": "2.0.2",
             "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/package.json b/package.json
index 90f3973..9ff41d0 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
         "vue": "^3.3.13"
     },
     "dependencies": {
-        "lucide-vue-next": "^0.454.0"
+        "lucide-vue-next": "^0.454.0",
+        "vue-router": "^4.4.5"
     }
 }
diff --git a/resources/js/Components/Sign-in/LoginComponent.vue b/resources/js/Components/Sign-in/LoginComponent.vue
index f66d03b..ba5d859 100644
--- a/resources/js/Components/Sign-in/LoginComponent.vue
+++ b/resources/js/Components/Sign-in/LoginComponent.vue
@@ -80,12 +80,16 @@
 
                         <!-- Recordatorio de contraseña -->
                         <div class="d-flex flex-stack flex-wrap gap-3 fs-base fw-semibold mb-8">
-                            <a href="authentication/layouts/overlay/reset-password.html" class="link-primary"
+                            <a href="/reset-password/some-fake-token" class="link-primary"
                                 :style="{ color: theme.primary }">¿Olvidaste tu contraseña?</a>
                         </div>
 
                         <!-- Botón de envío -->
                         <div class="d-grid mb-10">
+                            <button type="button" class="btn btn-secondary" @click="cancel"
+                                style="margin-bottom: 10px;">
+                                Cancelar
+                            </button>
                             <button type="submit" id="kt_sign_in_submit" class="btn"
                                 :style="{ background: theme.primary, color: '#fff' }" :disabled="form.processing">
                                 <span v-if="!form.processing" class="indicator-label">Iniciar Sesión</span>
@@ -167,6 +171,10 @@ export default {
             window.location.href = route('github.login');
         };
 
+        const cancel = () => {
+            window.location.href = '/'; // Cambia esto según tu ruta real
+        };
+
         return {
             form,
             isDarkMode,
@@ -175,6 +183,7 @@ export default {
             loginWithGoogle,
             loginWithGitHub,
             toggleDarkMode, // Asegúrate de incluir toggleDarkMode en el return
+            cancel
         };
     }
 };
@@ -183,7 +192,7 @@ export default {
 <style scoped>
 /* Personalización de elementos del formulario */
 .form {
-    padding: 4.75rem;
+    padding: 2.70rem;
     border-radius: 8px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 }
diff --git a/resources/js/Pages/Auth/Register.vue b/resources/js/Pages/Auth/Register.vue
index 6dc73a1..12633da 100644
--- a/resources/js/Pages/Auth/Register.vue
+++ b/resources/js/Pages/Auth/Register.vue
@@ -111,6 +111,10 @@
 
                         <!-- Botón de Envío -->
                         <div class="d-grid mb-5">
+                            <button type="button" class="btn btn-secondary" @click="cancel"
+                                style="margin-bottom: 10px;">
+                                Cancelar
+                            </button>
                             <button type="submit" class="btn" :style="{ background: theme.primary, color: '#fff' }"
                                 :disabled="!form.termsAccepted || form.processing">
                                 <span v-if="!form.processing" class="indicator-label">Registrarse</span>
@@ -207,6 +211,10 @@ export default {
             window.location.href = route('apple.register');
         };
 
+        const cancel = () => {
+            window.location.href = '/'; // Cambia esto según tu ruta real
+        };
+
         return {
             form,
             isDarkMode,
@@ -215,6 +223,7 @@ export default {
             registerWithGoogle,
             registerWithApple,
             toggleDarkMode, // Asegúrate de incluir toggleDarkMode en el return
+            cancel
         };
     },
 };
@@ -222,7 +231,7 @@ export default {
 
 <style scoped>
 .form-container {
-    padding: 1.85rem;
+
     border-radius: 8px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 }
diff --git a/resources/js/Pages/Auth/ResetPassword.vue b/resources/js/Pages/Auth/ResetPassword.vue
index 3d38fed..50a0bc4 100644
--- a/resources/js/Pages/Auth/ResetPassword.vue
+++ b/resources/js/Pages/Auth/ResetPassword.vue
@@ -1,85 +1,189 @@
-<script setup>
-import { Head, useForm } from '@inertiajs/vue3';
-import AuthenticationCard from '@/Components/AuthenticationCard.vue';
-import AuthenticationCardLogo from '@/Components/AuthenticationCardLogo.vue';
-import InputError from '@/Components/InputError.vue';
-import InputLabel from '@/Components/InputLabel.vue';
-import PrimaryButton from '@/Components/PrimaryButton.vue';
-import TextInput from '@/Components/TextInput.vue';
-
-const props = defineProps({
-    email: String,
-    token: String,
-});
-
-const form = useForm({
-    token: props.token,
-    email: props.email,
-    password: '',
-    password_confirmation: '',
-});
-
-const submit = () => {
-    form.post(route('password.update'), {
-        onFinish: () => form.reset('password', 'password_confirmation'),
-    });
-};
-</script>
-
 <template>
-    <Head title="Reset Password" />
-
-    <AuthenticationCard>
-        <template #logo>
-            <AuthenticationCardLogo />
-        </template>
-
-        <form @submit.prevent="submit">
-            <div>
-                <InputLabel for="email" value="Email" />
-                <TextInput
-                    id="email"
-                    v-model="form.email"
-                    type="email"
-                    class="mt-1 block w-full"
-                    required
-                    autofocus
-                    autocomplete="username"
-                />
-                <InputError class="mt-2" :message="form.errors.email" />
+    <div :style="{ background: theme.background }" class="d-flex flex-column flex-root transition-colors duration-500">
+        <div class="d-flex flex-column flex-lg-row flex-column-fluid">
+            <div class="d-flex flex-lg-row-fluid">
+                <div class="d-flex flex-column flex-center pb-0 pb-lg-10 p-10 w-100">
+                    <img v-if="!isDarkMode" class="mx-auto mw-100 mb-10 mb-lg-20" :src="agencyImage"
+                        alt="Reset Password" style="width: 400px; max-width: 800px;" />
+                    <img v-else class="mx-auto mw-100 mb-10 mb-lg-20" :src="agencyDarkImage" alt="Reset Password"
+                        style="width: 400px; max-width: 800px;" />
+                    <h1 :style="{ color: theme.textPrimary }" class="fs-2qx fw-bold text-center mb-7">Restablecer
+                        Contraseña</h1>
+                    <div :style="{ color: theme.textSecondary }" class="fs-base text-center fw-semibold mb-5">
+                        Ingresa tu nueva contraseña a continuación.
+                        <br />Asegúrate de confirmar tu nueva contraseña.
+                    </div>
+                </div>
             </div>
+            <div :style="{ background: theme.cardBackground }"
+                class="d-flex flex-column-fluid justify-content-center p-12">
 
-            <div class="mt-4">
-                <InputLabel for="password" value="Password" />
-                <TextInput
-                    id="password"
-                    v-model="form.password"
-                    type="password"
-                    class="mt-1 block w-full"
-                    required
-                    autocomplete="new-password"
-                />
-                <InputError class="mt-2" :message="form.errors.password" />
-            </div>
+                <!-- Botón flotante para alternar tema -->
+                <button @click="toggleDarkMode"
+                    class="theme-toggle-btn p-2 rounded-full transition-transform duration-200 hover:scale-105"
+                    :style="{ background: theme.cardBackground }">
+                    <component :is="isDarkMode ? 'Sun' : 'Moon'" :size="24"
+                        :color="isDarkMode ? theme.emphasis : theme.primary" />
+                </button>
 
-            <div class="mt-4">
-                <InputLabel for="password_confirmation" value="Confirm Password" />
-                <TextInput
-                    id="password_confirmation"
-                    v-model="form.password_confirmation"
-                    type="password"
-                    class="mt-1 block w-full"
-                    required
-                    autocomplete="new-password"
-                />
-                <InputError class="mt-2" :message="form.errors.password_confirmation" />
-            </div>
+                <!-- Contenedor del formulario -->
+                <div class="form-container d-flex flex-column align-items-center"
+                    style="max-width: 500px; margin: 0 auto;">
+                    <form class="form w-100" @submit.prevent="submit"
+                        :style="{ background: theme.cardBackground, color: theme.textPrimary, borderColor: theme.border }">
+                        <div class="text-center mb-11">
+                            <h1 :style="{ color: theme.textPrimary }" class="fw-bolder mb-3 recovery-title">
+                                Restablecer Contraseña</h1>
+                        </div>
+
+                        <!-- Campos de entrada -->
+                        <div class="fv-row mb-4">
+                            <input type="email" placeholder="Correo Electrónico" name="email" v-model="form.email"
+                                required class="form-control custom-input"
+                                :style="{ background: theme.background, color: theme.textPrimary, borderColor: theme.border }" />
+                        </div>
+                        <div class="fv-row mb-4">
+                            <input type="password" placeholder="Nueva Contraseña" name="password"
+                                v-model="form.password" required class="form-control custom-input"
+                                :style="{ background: theme.background, color: theme.textPrimary, borderColor: theme.border }" />
+                        </div>
+                        <div class="fv-row mb-4">
+                            <input type="password" placeholder="Confirmar Contraseña" name="password_confirmation"
+                                v-model="form.password_confirmation" required class="form-control custom-input"
+                                :style="{ background: theme.background, color: theme.textPrimary, borderColor: theme.border }" />
+                        </div>
 
-            <div class="flex items-center justify-end mt-4">
-                <PrimaryButton :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
-                    Reset Password
-                </PrimaryButton>
+                        <!-- Botón de cancelación y envío -->
+                        <div class="d-grid mb-10">
+                            <button type="button" class="btn btn-secondary" @click="cancel"
+                                style="margin-bottom: 10px;">
+                                Cancelar
+                            </button>
+                            <button type="submit" id="kt_reset_password_submit" class="btn"
+                                :style="{ background: theme.primary, color: '#fff' }" :disabled="form.processing">
+                                <span v-if="!form.processing" class="indicator-label">Restablecer Contraseña</span>
+                                <span v-else class="indicator-progress">Por favor espera...
+                                    <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
+                                </span>
+                            </button>
+                        </div>
+                    </form>
+                </div>
             </div>
-        </form>
-    </AuthenticationCard>
+        </div>
+    </div>
 </template>
+
+<script>
+import { ref, computed, onMounted } from 'vue';
+import { Sun, Moon } from 'lucide-vue-next';
+import { useForm } from '@inertiajs/vue3';
+
+// Importa las imágenes
+import agencyImage from '../../../../public/assets/media/auth/agency.png';
+import agencyDarkImage from '../../../../public/assets/media/auth/agency-dark.png';
+
+export default {
+    components: {
+        Sun,
+        Moon,
+    },
+    setup() {
+        const form = useForm({
+            email: '',
+            password: '',
+            password_confirmation: '',
+        });
+
+        const isDarkMode = ref(false);
+
+        // Cargar el valor de localStorage al iniciar el componente
+        onMounted(() => {
+            const savedMode = localStorage.getItem('isDarkMode');
+            isDarkMode.value = savedMode === 'true';
+        });
+
+        // Cambiar el modo oscuro y guardarlo en localStorage
+        const toggleDarkMode = () => {
+            isDarkMode.value = !isDarkMode.value;
+            localStorage.setItem('isDarkMode', isDarkMode.value);
+        };
+
+        const theme = computed(() => ({
+            primary: isDarkMode.value ? '#42A5F5' : '#1565C0',
+            secondary: isDarkMode.value ? '#26C6DA' : '#00A9A5',
+            emphasis: isDarkMode.value ? '#FFCA28' : '#FFC107',
+            textPrimary: isDarkMode.value ? '#E0E0E0' : '#212121',
+            textSecondary: isDarkMode.value ? '#B0BEC5' : '#757575',
+            background: isDarkMode.value ? '#121212' : '#F9FAFB',
+            cardBackground: isDarkMode.value ? '#1E1E1E' : '#FFFFFF',
+            border: isDarkMode.value ? '#424242' : '#E0E0E0',
+        }));
+
+        const submit = () => {
+            form.post(route('password.update'), {
+                onFinish: () => form.reset('password', 'password_confirmation'),
+            });
+        };
+
+        // Método para cancelar y redirigir a la página de bienvenida
+        const cancel = () => {
+            window.location.href = '/'; // Cambia esto según tu ruta real
+        };
+
+        return {
+            form,
+            isDarkMode,
+            theme,
+            submit,
+            toggleDarkMode,
+            cancel,
+            agencyImage,
+            agencyDarkImage,
+        };
+    }
+};
+</script>
+
+<style scoped>
+/* Personalización de elementos del formulario */
+.form {
+    padding: 8.35rem;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.form-container {
+    max-width: 700px;
+    width: 100%;
+    margin: 0 auto;
+}
+
+.recovery-title {
+    font-size: 2rem;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+/* Ajusta el ancho de los inputs */
+.custom-input {
+    width: 100%;
+    height: 50px;
+    border-radius: 8px;
+    padding: 0 15px;
+    font-size: 1.1rem;
+}
+
+.custom-input::placeholder {
+    color: #aaa;
+}
+
+/* Botón flotante para cambio de tema */
+.theme-toggle-btn {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    z-index: 10;
+    border: none;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+}
+</style>
diff --git a/resources/js/Pages/Welcome.vue b/resources/js/Pages/Welcome.vue
index b27faad..fbff4d7 100644
--- a/resources/js/Pages/Welcome.vue
+++ b/resources/js/Pages/Welcome.vue
@@ -281,7 +281,7 @@ onBeforeUnmount(() => {
                         :style="{ color: theme.textSecondary }">Términos y Condiciones</Link>
                     <Link href="/privacy" class="hover:underline transition-colors duration-200"
                         :style="{ color: theme.textSecondary }">Política de Privacidad</Link>
-                    <Link href="https://github.com/tu-repositorio" target="_blank"
+                    <Link href="https://github.com/Crudzaso/gananza.git" target="_blank"
                         class="hover:underline transition-colors duration-200" :style="{ color: theme.textSecondary }">
                     Repositorio en GitHub</Link>
                     <Link href="/contact" class="hover:underline transition-colors duration-200"