From 62697fed3f39c54565c91d03050ea3b1c0d8ad28 Mon Sep 17 00:00:00 2001
From: Jadowacu1 <152473876+Jadowacu1@users.noreply.github.com>
Date: Mon, 8 Jul 2024 17:16:49 +0200
Subject: [PATCH] Users should be presented with a reset password link

---
 public/assets/images/resetPassword.png | Bin 0 -> 14865 bytes
 src/assets/styles/LandingPage.scss     | 158 ++---
 src/assets/styles/colors.scss          |  27 -
 src/assets/styles/email.scss           | 594 +++++++++----------
 src/assets/styles/index.scss           |   4 -
 src/assets/styles/reset-password.scss  |  87 ++-
 src/assets/styles/signup.scss          | 786 ++++++++++++-------------
 src/components/inputs/SearchInput.tsx  |   1 -
 src/components/layout/Header.tsx       |   2 +-
 src/pages/ResetPassword.tsx            |  61 +-
 src/pages/SendResetPasswordLink.tsx    |  46 +-
 src/router.tsx                         |   2 +-
 12 files changed, 899 insertions(+), 869 deletions(-)
 create mode 100644 public/assets/images/resetPassword.png
 delete mode 100644 src/assets/styles/colors.scss
 delete mode 100644 src/assets/styles/index.scss

diff --git a/public/assets/images/resetPassword.png b/public/assets/images/resetPassword.png
new file mode 100644
index 0000000000000000000000000000000000000000..1cd42109d6dba8e9d1ff8fb804ddcd038a307252
GIT binary patch
literal 14865
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%0D9{fk8_z5aTM{=(O4or
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
I1b_a&0MENwXaE2J

literal 0
HcmV?d00001

diff --git a/src/assets/styles/LandingPage.scss b/src/assets/styles/LandingPage.scss
index 84d8505a..1fb7d0c2 100644
--- a/src/assets/styles/LandingPage.scss
+++ b/src/assets/styles/LandingPage.scss
@@ -1,80 +1,80 @@
-.landing-container {
-  padding: 3rem 2rem 4rem 5rem;
-
-  .loader {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100vh;
-  }
-
-  .error-message {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100vh;
-    color: $black-3;
-    font-size: 1.8rem;
-    background-color: $primary-color-light;
-    border: 1px solid $primary-color-dark;
-    border-radius: 0.5rem;
-    padding: 2rem;
-  }
-  .head {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    h1 {
-      font-size: 3.6rem;
-    }
-  }
-  
-  .product-list {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr));
-    gap: 1.7rem;
-  }
-}
-
-.not-found{
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-
-  .not-found-img img{
-    width: 40vw;
-  }
-  .not-found-text{
-     font-family: $text-family;
-     font-weight: 700;
-     font-size: 1.2rem;
-     margin-top: 1rem;
-     margin-bottom: 2rem;
-     text-align: center;
-     line-height: 1.5;
-     letter-spacing: 0.05em;
-     color: $text2-color;
-     text-decoration: none;
-     transition: all 0.3s ease-in-out;
-  }
-  .btn-link{
-      border: none;
-      background-color: $primary-color;
-      padding: 1rem 4rem;
-      text-decoration: none;
-      color: $white-color;
-      font-family: $text-family;
-      font-weight: 700;
-      font-size: 1.2rem;
-      border-radius: 2rem;
-      cursor: pointer;
-  }
-
-  .btn-link:hover{
-      background-color: $white-color;
-      color: $primary-color;
-      border: 1px solid $border-color;
-      box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
-      transition: all 0.3s ease-in-out;
-  }
+.landing-container {
+  padding: 3rem 2rem 4rem 5rem;
+
+  .loader {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+  }
+
+  .error-message {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    color: $black-3;
+    font-size: 1.8rem;
+    background-color: $primary-color-light;
+    border: 1px solid $primary-color-dark;
+    border-radius: 0.5rem;
+    padding: 2rem;
+  }
+  .head {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    h1 {
+      font-size: 3.6rem;
+    }
+  }
+  
+  .product-list {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr));
+    gap: 1.7rem;
+  }
+}
+
+.not-found{
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+
+  .not-found-img img{
+    width: 40vw;
+  }
+  .not-found-text{
+     font-family: $text-family;
+     font-weight: 700;
+     font-size: 1.2rem;
+     margin-top: 1rem;
+     margin-bottom: 2rem;
+     text-align: center;
+     line-height: 1.5;
+     letter-spacing: 0.05em;
+     color: $text2-color;
+     text-decoration: none;
+     transition: all 0.3s ease-in-out;
+  }
+  .btn-link{
+      border: none;
+      background-color: $primary-color;
+      padding: 1rem 4rem;
+      text-decoration: none;
+      color: $white-color;
+      font-family: $text-family;
+      font-weight: 700;
+      font-size: 1.2rem;
+      border-radius: 2rem;
+      cursor: pointer;
+  }
+
+  .btn-link:hover{
+      background-color: $white-color;
+      color: $primary-color;
+      border: 1px solid $border-color;
+      box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
+      transition: all 0.3s ease-in-out;
+  }
 }
\ No newline at end of file
diff --git a/src/assets/styles/colors.scss b/src/assets/styles/colors.scss
deleted file mode 100644
index 9e8a98b7..00000000
--- a/src/assets/styles/colors.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Averia+Serif+Libre:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
-$primary-color: #ff6d18;
-$primary-color-light: #ffe2d1;
-$primary-color-dark: #ff8a46;
-$secondary-color: #777777;
-$secondary-color-light: #F6F6F6;
-$third-color: #d9d9d9;
-$fourth-color: #8a869d;
-$fifth-color: #4da0fc;
-$sixth-color: #9180ff;
-$border-color: #ddd;
-$black: #000;
-$white: #fff;
-$white-2: #eee;
-$background-color: #ffefe1;
-$icon-color: #ff6d18;
-$text-color: #112a46;
-$black-2: #232f3e;
-$black-3: #131a22;
-$secondary-color-2: #edeef0;
-$container-color: #D9D9D933;
-$login-bg-color: linear-gradient(136deg, #FF6D18 16%, rgba(216, 201, 193, 0.8) 100%);
-$text2-color: #666666;
-$text-family: 'Averia Serif Libre';
-$white-color: #FFFFFF;
-$border-color: #D9D9D9;
-$red-color:red;
\ No newline at end of file
diff --git a/src/assets/styles/email.scss b/src/assets/styles/email.scss
index 5b70edb9..40548c29 100644
--- a/src/assets/styles/email.scss
+++ b/src/assets/styles/email.scss
@@ -1,298 +1,298 @@
-.email-spot {
-    width: 80vw;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    background-color: $white-color;
-    border-radius: 10px;
-    padding: 2rem;
-    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
-    transition: all 0.3s ease-in-out;
-
-    .text-header {
-        text-align: center;
-        font-family: $text-family;
-
-        h1 {
-            color: $primary-color;
-            margin-bottom: 1rem;
-            font-weight: 700;
-            font-size: 2.7rem;
-        }
-
-        p {
-            color: $text2-color;
-        }
-    }
-
-    .img-message img {
-        margin-top: 2rem;
-        width: 50vw;
-        height: 70vh;
-    }
-
-    .btn-link {
-        font-family: $text-family;
-        font-weight: 700;
-        font-size: 1.9rem;
-        margin-top: 1rem;
-        margin-bottom: 1rem;
-        text-align: center;
-        line-height: 1.5;
-        letter-spacing: 0.05em;
-        border: none;
-        background-color: $primary-color;
-        padding: 1rem 4rem;
-        text-decoration: none;
-        color: $white-color;
-        border-radius: 2rem;
-        cursor: pointer;
-        transition: all 0.3s ease-in-out;
-        &:hover{
-        background-color: $white-color;
-        color: $primary-color;
-        border: 1px solid $border-color;
-        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
-        transition: all 0.3s ease-in-out;
-        }
-    }
-}
-
-.loading-spinner{
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    gap: 1rem;
-
-    p{
-        font-family: $text-family;
-        font-weight: 200;
-        font-size: 1rem;
-        color: $text2-color;
-    }
-}
-
-.resend-email {
-    width: 80vw;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    background-color: $white-color;
-    border-radius: 10px;
-    padding: 2rem;
-    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
-    transition: all 0.3s ease-in-out;
-
-    h2{
-        font-family: $text-family;
-        font-weight: 700;
-        font-size: 3.2rem;
-        color: $primary-color;
-    }
-    p{
-        font-family: $text-family;
-        font-weight: 200;
-        font-size: 1.6rem;
-        color: $text2-color;
-        text-align: center;
-    }
-    form {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex-direction: column;
-        margin-top: 1rem;
-        width: 100%;
-
-        input {
-            width: 50%;
-            padding: 1rem;
-            border: 1px solid $border-color;
-            border-radius: 0.5rem;
-            outline: none;
-            font-family: $text-family;
-        }
-
-        button {
-            width: 20%;
-            padding: 1rem;
-            border: 1px solid $border-color;
-            border-radius: 0.5rem;
-            outline: none;
-            font-family: $text-family;
-            background-color: $white-color;
-            color: $primary-color;
-            font-weight: 700;
-            font-size: 1.9rem;
-            border-radius: 3.2rem;
-            cursor: pointer;
-            transition: all 0.3s ease-in-out;
-        }
-
-        button:hover {
-            background-color: $primary-color;
-            color: $white-color;
-            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
-            transition: all 0.3s ease-in-out;
-        }
-    }
-}
-
-.verify-email-page {
-    width: 50vw;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    background-color: $white-color;
-    border-radius: 10px;
-    padding: 2rem;
-    border: none;
-    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-    transition: all 0.3s ease-in-out;
-
-    .spinner-wrapper {
-        margin-bottom: 1.5rem;
-    }
-
-    .isSuccess,
-    .isError,
-    .isLoading {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex-direction: column;
-    }
-
-    .isLoading {
-        h2 {
-            text-align: center;
-            font-family: $text-family;
-            color: $text2-color;
-        }
-    }
-
-    img {
-        width: 400px;
-    }
-
-    p {
-        text-align: center;
-        font-family: $text-family;
-        color: $text2-color;
-        font-style: normal;
-        font-size: 1.9rem;
-        font-weight: 500;
-    }
-
-    .isSuccess {
-        p {
-            span {
-                color: $primary-color;
-                font-weight: 700;
-                font-size: 1.9rem;
-                line-height: 2.4rem;
-                letter-spacing: 0.05rem;
-                text-decoration: none;
-                transition: all 0.3s ease-in-out;
-                cursor: pointer;
-
-                &:hover {
-                    text-decoration: underline;
-                    transition: all 0.3s ease-in-out;
-                }
-            }
-        }
-    }
-
-    .isError {
-        .error {
-            font-family: $text-family;
-            font-weight: 700;
-            font-size: 1.9rem;
-            text-align: center;
-            line-height: 2.4rem;
-            color: $red-color;
-        }
-    }
-}
-
-// Media queries
-
-/* Small Mobile */
-@media only screen and (min-width: 320px) {
-    .email-spot {
-        width: 70vw;
-        .text-header{
-            h1{
-                font-size: 2rem;
-            }
-            p{
-                font-size: 1.2rem;
-            }
-        }
-        .img-message img{
-            width: 80vw;
-            height: 30vh;
-        }
-    }
-    .resend-email {
-        width: 70vw;
-        form{
-            input{
-                width: 70%;
-            }
-            Button{
-                width: 50%;
-            }
-        }
-    }
-    .verify-email-page {
-        width: 90vw;
-
-        .isError{
-            img{
-                width: 300px;
-            }
-        }
-    }
-}
-
-@media only screen and (min-width: 768px) {
-    .email-spot {
-        width: 60vw;
-    }
-    .resend-email {
-        width: 60vw;
-    }
-    .verify-email-page {
-        width: 50vw;
-    }
-}
-
-@media only screen and (min-width: 1024px) {
-    .email-spot {
-        width: 70vw;
-        .text-header{
-            h1{
-                font-size: 2.5rem;
-            }
-            p{
-                font-size: 1.5rem;
-            }
-        }
-        .img-message img{
-            width: 50vw;
-            height: 60vh;
-        }
-    }
-    .resend-email {
-        width: 50vw;
-    }
-    .verify-email-page {
-        width: 50vw;
-    }
+.email-spot {
+    width: 80vw;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    background-color: $white-color;
+    border-radius: 10px;
+    padding: 2rem;
+    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
+    transition: all 0.3s ease-in-out;
+
+    .text-header {
+        text-align: center;
+        font-family: $text-family;
+
+        h1 {
+            color: $primary-color;
+            margin-bottom: 1rem;
+            font-weight: 700;
+            font-size: 2.7rem;
+        }
+
+        p {
+            color: $text2-color;
+        }
+    }
+
+    .img-message img {
+        margin-top: 2rem;
+        width: 50vw;
+        height: 70vh;
+    }
+
+    .btn-link {
+        font-family: $text-family;
+        font-weight: 700;
+        font-size: 1.9rem;
+        margin-top: 1rem;
+        margin-bottom: 1rem;
+        text-align: center;
+        line-height: 1.5;
+        letter-spacing: 0.05em;
+        border: none;
+        background-color: $primary-color;
+        padding: 1rem 4rem;
+        text-decoration: none;
+        color: $white-color;
+        border-radius: 2rem;
+        cursor: pointer;
+        transition: all 0.3s ease-in-out;
+        &:hover{
+        background-color: $white-color;
+        color: $primary-color;
+        border: 1px solid $border-color;
+        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
+        transition: all 0.3s ease-in-out;
+        }
+    }
+}
+
+.loading-spinner{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    gap: 1rem;
+
+    p{
+        font-family: $text-family;
+        font-weight: 200;
+        font-size: 1rem;
+        color: $text2-color;
+    }
+}
+
+.resend-email {
+    width: 80vw;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    background-color: $white-color;
+    border-radius: 10px;
+    padding: 2rem;
+    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
+    transition: all 0.3s ease-in-out;
+
+    h2{
+        font-family: $text-family;
+        font-weight: 700;
+        font-size: 3.2rem;
+        color: $primary-color;
+    }
+    p{
+        font-family: $text-family;
+        font-weight: 200;
+        font-size: 1.6rem;
+        color: $text2-color;
+        text-align: center;
+    }
+    form {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        margin-top: 1rem;
+        width: 100%;
+
+        input {
+            width: 50%;
+            padding: 1rem;
+            border: 1px solid $border-color;
+            border-radius: 0.5rem;
+            outline: none;
+            font-family: $text-family;
+        }
+
+        button {
+            width: 20%;
+            padding: 1rem;
+            border: 1px solid $border-color;
+            border-radius: 0.5rem;
+            outline: none;
+            font-family: $text-family;
+            background-color: $white-color;
+            color: $primary-color;
+            font-weight: 700;
+            font-size: 1.9rem;
+            border-radius: 3.2rem;
+            cursor: pointer;
+            transition: all 0.3s ease-in-out;
+        }
+
+        button:hover {
+            background-color: $primary-color;
+            color: $white-color;
+            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
+            transition: all 0.3s ease-in-out;
+        }
+    }
+}
+
+.verify-email-page {
+    width: 50vw;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    background-color: $white-color;
+    border-radius: 10px;
+    padding: 2rem;
+    border: none;
+    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
+    transition: all 0.3s ease-in-out;
+
+    .spinner-wrapper {
+        margin-bottom: 1.5rem;
+    }
+
+    .isSuccess,
+    .isError,
+    .isLoading {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+    }
+
+    .isLoading {
+        h2 {
+            text-align: center;
+            font-family: $text-family;
+            color: $text2-color;
+        }
+    }
+
+    img {
+        width: 400px;
+    }
+
+    p {
+        text-align: center;
+        font-family: $text-family;
+        color: $text2-color;
+        font-style: normal;
+        font-size: 1.9rem;
+        font-weight: 500;
+    }
+
+    .isSuccess {
+        p {
+            span {
+                color: $primary-color;
+                font-weight: 700;
+                font-size: 1.9rem;
+                line-height: 2.4rem;
+                letter-spacing: 0.05rem;
+                text-decoration: none;
+                transition: all 0.3s ease-in-out;
+                cursor: pointer;
+
+                &:hover {
+                    text-decoration: underline;
+                    transition: all 0.3s ease-in-out;
+                }
+            }
+        }
+    }
+
+    .isError {
+        .error {
+            font-family: $text-family;
+            font-weight: 700;
+            font-size: 1.9rem;
+            text-align: center;
+            line-height: 2.4rem;
+            color: $red-color;
+        }
+    }
+}
+
+// Media queries
+
+/* Small Mobile */
+@media only screen and (min-width: 320px) {
+    .email-spot {
+        width: 70vw;
+        .text-header{
+            h1{
+                font-size: 2rem;
+            }
+            p{
+                font-size: 1.2rem;
+            }
+        }
+        .img-message img{
+            width: 80vw;
+            height: 30vh;
+        }
+    }
+    .resend-email {
+        width: 70vw;
+        form{
+            input{
+                width: 70%;
+            }
+            Button{
+                width: 50%;
+            }
+        }
+    }
+    .verify-email-page {
+        width: 90vw;
+
+        .isError{
+            img{
+                width: 300px;
+            }
+        }
+    }
+}
+
+@media only screen and (min-width: 768px) {
+    .email-spot {
+        width: 60vw;
+    }
+    .resend-email {
+        width: 60vw;
+    }
+    .verify-email-page {
+        width: 50vw;
+    }
+}
+
+@media only screen and (min-width: 1024px) {
+    .email-spot {
+        width: 70vw;
+        .text-header{
+            h1{
+                font-size: 2.5rem;
+            }
+            p{
+                font-size: 1.5rem;
+            }
+        }
+        .img-message img{
+            width: 50vw;
+            height: 60vh;
+        }
+    }
+    .resend-email {
+        width: 50vw;
+    }
+    .verify-email-page {
+        width: 50vw;
+    }
 }
\ No newline at end of file
diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
deleted file mode 100644
index 32e4fca3..00000000
--- a/src/assets/styles/index.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-@import "./LandingPage.scss";
-@import "./Product.scss";
-@import "./Sample.scss";
-@import "./reset-password.scss"
\ No newline at end of file
diff --git a/src/assets/styles/reset-password.scss b/src/assets/styles/reset-password.scss
index 6e1fd784..ab9cc7fb 100644
--- a/src/assets/styles/reset-password.scss
+++ b/src/assets/styles/reset-password.scss
@@ -17,7 +17,7 @@ hr{
   flex-direction: column;
   gap: 70px;
   align-items: center;
-  margin-top: 50px;
+  margin-top: 35px;
   
   h1{
   color: $text-color;
@@ -30,12 +30,6 @@ hr{
     font-size: 2rem;
     font-family: $text-family;
   }
-  .success {
-    color: $primary-color;
-    padding-left: 1.2rem;
-    font-size: 2rem;
-    font-family: $text-family;
-  }
   .input-container {
     position: relative;
     margin: 1rem 0;
@@ -57,6 +51,7 @@ hr{
     .input-field {
       width: 25vw;
       height: 7vh;
+      padding-left: 3%;
       border: 2px solid #f5a773;
       border-radius: 0.35rem;
       font-size: 1.5rem;
@@ -74,7 +69,7 @@ hr{
     }
   }
 
-  .reset-Button button {
+  .reset-Button  {
     background-color: $primary-color;
     color: $button-text-color;
     font-size: $button-font-size;
@@ -91,9 +86,13 @@ hr{
     &:hover {
     background-color: $button-hover-bg-color;
     }
+    .loading {
+      cursor: not-allowed; 
+      } 
  }
 }
 
+
 .resetPasswordForm {
   display: flex;
   flex-direction: column;
@@ -106,12 +105,11 @@ hr{
     font-family: $text-family;
     font-size: 4rem;
   }
-
   .input-containers {
-    margin-top: 30px;
+    margin-top: 50px;
     display: flex;
     flex-direction: column;
-    gap: 5px;
+    gap: 9px;
 
     .input-container1, .input-container2 {
       position: relative;
@@ -134,8 +132,9 @@ hr{
       .input-field1, .input-field2 {
         width: 25vw;
         height: 7vh;
+        padding-left: 3%;
         border: 2px solid #f5a773;
-        border-radius: 0.25rem;
+        border-radius: 0.27rem;
         font-size: 1.5rem;
         outline: none;
         font-family: inherit;
@@ -153,14 +152,13 @@ hr{
       }
     }
     .error {
-      color: $red-color;
-      padding-left: 1.2rem;
+      color: $red-color;    
       font-size: 2rem;
+      width: 25vw;
       font-family: $text-family;
     }
   }
-
-  .reset-Button button {
+  .reset-Button {
     background-color: $primary-color;
     color: $button-text-color;
     font-size: $button-font-size;
@@ -174,19 +172,22 @@ hr{
     display: inline-block;
     font-weight: $button-font-weight;
     font-family: $button-font-family;
-
     &:hover {
-      background-color: $button-hover-bg-color;
+    background-color: $button-hover-bg-color;
     }
-  }
+    .loading {
+      cursor: not-allowed; 
+      } 
+  } 
 }
 
+
 .resetPasswordForm {
   .input-containers {
     .input-container1,
     .input-container2 {
-      position: relative;
 
+      position: relative;
       .toggle-password {
         position: absolute;
         color: #777777;
@@ -199,5 +200,49 @@ hr{
         outline: none;
       }
     }
-  }
+  }  
+}
+
+
+.redirect-page{
+  display: flex;
+  justify-content: center;
+  
+.success-page{
+  margin-top: 60px;
+  width: 50vw;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  background-color: $white-color;
+  border-radius: 10px;
+  padding: 2rem;
+  border: none;
+  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
+  transition: all 0.3s ease-in-out;
+  .isSuccess {
+    p {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 5px;
+        span {
+            color: $primary-color;
+            font-weight: 700;
+            text-decoration: underline;
+            font-size: 1.9rem;
+            line-height: 2.4rem;
+            letter-spacing: 0.05rem;
+            transition: all 0.3s ease-in-out;
+            cursor: pointer;
+
+            &:hover {
+                text-decoration: underline;
+                transition: all 0.3s ease-in-out;
+            }
+        }
+    }
+}
+}
 }
\ No newline at end of file
diff --git a/src/assets/styles/signup.scss b/src/assets/styles/signup.scss
index 1d597dad..b400b4a1 100644
--- a/src/assets/styles/signup.scss
+++ b/src/assets/styles/signup.scss
@@ -1,394 +1,394 @@
-.wrapper {
-  background-color: $container-color;
-  padding: 4.8rem 0;
-  display: flex;
-  justify-content: center;
-
-  .container {
-    max-width: 100vw;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 0;
-  }
-
-  .login-form {
-    width: 90vw;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 0 1rem;
-  }
-
-  form {
-    display: flex;
-    flex-direction: column;
-    gap: 1.6rem;
-
-    .left-side-login {
-      width: 100%;
-      background: $login-bg-color;
-      border-radius: 4rem;
-      padding: 10px;
-
-      .left-side-text {
-        display: flex;
-        flex-direction: column;
-        gap: 1.2rem;
-        justify-content: center;
-
-        h1 {
-          font-family: $text-family;
-          font-weight: 700;
-          font-size: 24px;
-          margin-top: 1rem;
-          margin-bottom: 8px;
-          color: $white-color;
-        }
-
-        p {
-          color: $white-color;
-          font-family: $text-family;
-          font-weight: 400;
-          font-size: 10px;
-        }
-      }
-
-      .img {
-        margin-bottom: 1.6rem;
-
-        img {
-          width: 100%;
-          height: auto;
-        }
-      }
-    }
-
-    .right-side-login {
-      width: 100%;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      position: relative;
-      top: 2rem;
-      gap: 1.5rem;
-
-      .right-side-text {
-        margin-bottom: 1.2rem;
-
-        p,
-        h1 {
-          text-align: center;
-          font-family: $text-family;
-          font-weight: bold;
-          font-size: 40px;
-          margin-top: 0.4rem;
-        }
-
-        p {
-          font-size: 18px;
-          color: $text2-color;
-        }
-      }
-
-      .form-box {
-        display: flex;
-        flex-direction: column;
-        gap: 3rem;
-
-        .input-box {
-          input {
-            width: 400px;
-            height: 6.5rem;
-            border: 1px solid $border-color;
-            border-radius: 2rem;
-            padding-left: 2rem;
-            font-family: $text-family;
-            font-size: medium;
-            color: $text2-color;
-            outline: none;
-          }
-
-          .error {
-            color: $red-color;
-            padding-left: 1.2rem;
-            font-size: 2rem;
-            font-family: $text-family;
-          }
-        }
-
-        .input-box input:focus {
-          border: 1px solid $primary-color;
-          box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
-        }
-
-        .input-box:nth-child(2) {
-          position: relative;
-
-          .hide {
-            position: absolute;
-            top: 2.5rem;
-            right: 2.5rem;
-            opacity: 1;
-            font-size: 16px;
-            color: $text2-color;
-            cursor: pointer;
-            transition: all 0.3s ease-in-out;
-          }
-        }
-      }
-
-      .btn Button,
-      .btn-loading {
-        background-color: $primary-color;
-        color: $white-color;
-        font-family: $text-family;
-        font-weight: 700;
-        font-size: 24px;
-        width: 400px;
-        height: 6.5rem;
-        border: none;
-        border-radius: 2rem;
-        margin-top: 2rem;
-        cursor: pointer;
-      }
-
-      .btn-loading {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        background-color: $white-color;
-        border: 1px solid $border-color;
-      }
-
-      .btn:hover Button {
-        background-color: $white-color;
-        color: $primary-color;
-        border: 1px solid $border-color;
-        background-color: $white-color;
-        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
-        transition: all 0.3s ease-in-out;
-      }
-
-      .line-text {
-        p {
-          margin: 2rem 0;
-          text-align: center;
-          position: relative;
-          color: $text2-color;
-          font-size: 16px;
-          font-weight: bold;
-          font-family: $text-family;
-          width: 35rem;
-        }
-
-        p::before,
-        p::after {
-          content: "";
-          position: absolute;
-          top: 55%;
-          width: 100px;
-          height: 1px;
-          background-color: $text2-color;
-        }
-
-        p::before {
-          left: 0;
-        }
-
-        p::after {
-          right: 0;
-        }
-      }
-
-      .google {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        gap: 2rem;
-        border: none;
-        border-radius: 20px;
-        border: 1px solid $border-color;
-        background-color: $white-color;
-        width: 400px;
-        height: 6.5rem;
-        cursor: pointer;
-        p {
-          font-family: $text-family;
-          font-weight: bold;
-          font-size: 20px;
-          color: $text2-color;
-        }
-
-        .google-icon {
-          font-size: 50px;
-          color: $primary-color;
-        }
-      }
-
-      .google:hover {
-        background-color: $primary-color;
-        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
-        transition: all 0.3s ease-in-out;
-
-        p {
-          color: $white-color;
-          transition: all 0.3s ease-in-out;
-        }
-      }
-    }
-  }
-}
-
-// Medium devices (tablets, 481px to 768px)
-@media (min-width: 481px) {
-  .login-form {
-    width: 80vw;
-    padding: 0 1.5rem;
-  }
-
-  form {
-    gap: 2rem;
-
-    .left-side-login {
-      padding: 15px;
-
-      .left-side-text {
-        h1 {
-          font-size: 26px;
-        }
-
-        p {
-          font-size: 12px;
-        }
-      }
-
-      .img img {
-        width: 300px;
-        height: auto;
-      }
-    }
-
-    .right-side-login {
-      .right-side-text {
-        h1 {
-          font-size: 26px;
-        }
-
-        p {
-          font-size: 12px;
-        }
-      }
-
-      .form-box .input-box input {
-        height: 4.8rem;
-        font-size: 18px;
-      }
-
-      .btn Button,
-      .btn-loading {
-        height: 4.8rem;
-        font-size: 24px;
-      }
-
-      .google {
-        height: 4.8rem;
-
-        p {
-          font-size: 18px;
-        }
-
-        .google-icon {
-          font-size: 28px;
-        }
-      }
-    }
-  }
-}
-
-// Large devices (desktops, 769px and up)
-@media (min-width: 769px) {
-  .login-form {
-    width: 90vw;
-    padding: 0 2rem;
-
-
-    form {
-      flex-direction: row;
-      gap: 2.4rem;
-
-      .left-side-login {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-        width: 40vw;
-        padding: 3rem;
-
-        .left-side-text {
-        gap: 2rem;
-          h1 {
-            font-size: 30px;
-          }
-
-          p {
-            font-size: 12px;
-            width: 27rem;
-          }
-        }
-
-        .img img {
-          width: 320px;
-          height: 340px;
-        }
-      }
-
-      .right-side-login {
-        width: 50%;
-        height: 500px;
-        top: 4rem;
-
-        .right-side-text {
-          h1 {
-            font-size: 32px;
-          }
-
-          p {
-            margin-top: 0.5rem;
-            font-size: 14px;
-          }
-        }
-
-        .form-box .input-box input {
-          width: 45rem;
-          height: 5.6rem;
-          font-size: large;
-        }
-
-        .form-box .input-box:nth-child(2) .hide{
-          top: 2rem;
-          right: 2rem;
-        }
-
-        .btn Button,
-        .btn-loading {
-          width: 450px;
-          height: 5.6rem;
-          font-size: 28px;
-        }
-
-        .google {
-          width: 450px;
-          height: 5.6rem;
-
-          p {
-            font-size: 20px;
-          }
-
-          .google-icon {
-            font-size: 32px;
-          }
-        }
-      }
-    }
-  }
+.wrapper {
+  background-color: $container-color;
+  padding: 4.8rem 0;
+  display: flex;
+  justify-content: center;
+
+  .container {
+    max-width: 100vw;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0;
+  }
+
+  .login-form {
+    width: 90vw;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0 1rem;
+  }
+
+  form {
+    display: flex;
+    flex-direction: column;
+    gap: 1.6rem;
+
+    .left-side-login {
+      width: 100%;
+      background: $login-bg-color;
+      border-radius: 4rem;
+      padding: 10px;
+
+      .left-side-text {
+        display: flex;
+        flex-direction: column;
+        gap: 1.2rem;
+        justify-content: center;
+
+        h1 {
+          font-family: $text-family;
+          font-weight: 700;
+          font-size: 24px;
+          margin-top: 1rem;
+          margin-bottom: 8px;
+          color: $white-color;
+        }
+
+        p {
+          color: $white-color;
+          font-family: $text-family;
+          font-weight: 400;
+          font-size: 10px;
+        }
+      }
+
+      .img {
+        margin-bottom: 1.6rem;
+
+        img {
+          width: 100%;
+          height: auto;
+        }
+      }
+    }
+
+    .right-side-login {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      position: relative;
+      top: 2rem;
+      gap: 1.5rem;
+
+      .right-side-text {
+        margin-bottom: 1.2rem;
+
+        p,
+        h1 {
+          text-align: center;
+          font-family: $text-family;
+          font-weight: bold;
+          font-size: 40px;
+          margin-top: 0.4rem;
+        }
+
+        p {
+          font-size: 18px;
+          color: $text2-color;
+        }
+      }
+
+      .form-box {
+        display: flex;
+        flex-direction: column;
+        gap: 3rem;
+
+        .input-box {
+          input {
+            width: 400px;
+            height: 6.5rem;
+            border: 1px solid $border-color;
+            border-radius: 2rem;
+            padding-left: 2rem;
+            font-family: $text-family;
+            font-size: medium;
+            color: $text2-color;
+            outline: none;
+          }
+
+          .error {
+            color: $red-color;
+            padding-left: 1.2rem;
+            font-size: 2rem;
+            font-family: $text-family;
+          }
+        }
+
+        .input-box input:focus {
+          border: 1px solid $primary-color;
+          box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
+        }
+
+        .input-box:nth-child(2) {
+          position: relative;
+
+          .hide {
+            position: absolute;
+            top: 2.5rem;
+            right: 2.5rem;
+            opacity: 1;
+            font-size: 16px;
+            color: $text2-color;
+            cursor: pointer;
+            transition: all 0.3s ease-in-out;
+          }
+        }
+      }
+
+      .btn Button,
+      .btn-loading {
+        background-color: $primary-color;
+        color: $white-color;
+        font-family: $text-family;
+        font-weight: 700;
+        font-size: 24px;
+        width: 400px;
+        height: 6.5rem;
+        border: none;
+        border-radius: 2rem;
+        margin-top: 2rem;
+        cursor: pointer;
+      }
+
+      .btn-loading {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background-color: $white-color;
+        border: 1px solid $border-color;
+      }
+
+      .btn:hover Button {
+        background-color: $white-color;
+        color: $primary-color;
+        border: 1px solid $border-color;
+        background-color: $white-color;
+        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
+        transition: all 0.3s ease-in-out;
+      }
+
+      .line-text {
+        p {
+          margin: 2rem 0;
+          text-align: center;
+          position: relative;
+          color: $text2-color;
+          font-size: 16px;
+          font-weight: bold;
+          font-family: $text-family;
+          width: 35rem;
+        }
+
+        p::before,
+        p::after {
+          content: "";
+          position: absolute;
+          top: 55%;
+          width: 100px;
+          height: 1px;
+          background-color: $text2-color;
+        }
+
+        p::before {
+          left: 0;
+        }
+
+        p::after {
+          right: 0;
+        }
+      }
+
+      .google {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 2rem;
+        border: none;
+        border-radius: 20px;
+        border: 1px solid $border-color;
+        background-color: $white-color;
+        width: 400px;
+        height: 6.5rem;
+        cursor: pointer;
+        p {
+          font-family: $text-family;
+          font-weight: bold;
+          font-size: 20px;
+          color: $text2-color;
+        }
+
+        .google-icon {
+          font-size: 50px;
+          color: $primary-color;
+        }
+      }
+
+      .google:hover {
+        background-color: $primary-color;
+        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
+        transition: all 0.3s ease-in-out;
+
+        p {
+          color: $white-color;
+          transition: all 0.3s ease-in-out;
+        }
+      }
+    }
+  }
+}
+
+// Medium devices (tablets, 481px to 768px)
+@media (min-width: 481px) {
+  .login-form {
+    width: 80vw;
+    padding: 0 1.5rem;
+  }
+
+  form {
+    gap: 2rem;
+
+    .left-side-login {
+      padding: 15px;
+
+      .left-side-text {
+        h1 {
+          font-size: 26px;
+        }
+
+        p {
+          font-size: 12px;
+        }
+      }
+
+      .img img {
+        width: 300px;
+        height: auto;
+      }
+    }
+
+    .right-side-login {
+      .right-side-text {
+        h1 {
+          font-size: 26px;
+        }
+
+        p {
+          font-size: 12px;
+        }
+      }
+
+      .form-box .input-box input {
+        height: 4.8rem;
+        font-size: 18px;
+      }
+
+      .btn Button,
+      .btn-loading {
+        height: 4.8rem;
+        font-size: 24px;
+      }
+
+      .google {
+        height: 4.8rem;
+
+        p {
+          font-size: 18px;
+        }
+
+        .google-icon {
+          font-size: 28px;
+        }
+      }
+    }
+  }
+}
+
+// Large devices (desktops, 769px and up)
+@media (min-width: 769px) {
+  .login-form {
+    width: 90vw;
+    padding: 0 2rem;
+
+
+    form {
+      flex-direction: row;
+      gap: 2.4rem;
+
+      .left-side-login {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+        width: 40vw;
+        padding: 3rem;
+
+        .left-side-text {
+        gap: 2rem;
+          h1 {
+            font-size: 30px;
+          }
+
+          p {
+            font-size: 12px;
+            width: 27rem;
+          }
+        }
+
+        .img img {
+          width: 320px;
+          height: 340px;
+        }
+      }
+
+      .right-side-login {
+        width: 50%;
+        height: 500px;
+        top: 4rem;
+
+        .right-side-text {
+          h1 {
+            font-size: 32px;
+          }
+
+          p {
+            margin-top: 0.5rem;
+            font-size: 14px;
+          }
+        }
+
+        .form-box .input-box input {
+          width: 45rem;
+          height: 5.6rem;
+          font-size: large;
+        }
+
+        .form-box .input-box:nth-child(2) .hide{
+          top: 2rem;
+          right: 2rem;
+        }
+
+        .btn Button,
+        .btn-loading {
+          width: 450px;
+          height: 5.6rem;
+          font-size: 28px;
+        }
+
+        .google {
+          width: 450px;
+          height: 5.6rem;
+
+          p {
+            font-size: 20px;
+          }
+
+          .google-icon {
+            font-size: 32px;
+          }
+        }
+      }
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/components/inputs/SearchInput.tsx b/src/components/inputs/SearchInput.tsx
index 08ecbce0..6d41b7fa 100644
--- a/src/components/inputs/SearchInput.tsx
+++ b/src/components/inputs/SearchInput.tsx
@@ -1,5 +1,4 @@
 /* eslint-disable */
-
 import React from "react";
 import { FiSearch } from "react-icons/fi";
 
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index d5e75cc5..a9816d12 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -96,7 +96,7 @@ function Header() {
           <div className="cart__container">
             <IoCartOutline className="cart__icon" />
             <span className="cart__text">Cart</span>
-            <span className="cart__description">$ 100</span>
+            <span className="cart__description">$ 0</span>
           </div>
           <div
             className="cart__container user__container"
diff --git a/src/pages/ResetPassword.tsx b/src/pages/ResetPassword.tsx
index efead54b..d8792217 100644
--- a/src/pages/ResetPassword.tsx
+++ b/src/pages/ResetPassword.tsx
@@ -4,14 +4,11 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
 import { useNavigate , useLocation} from 'react-router-dom';
 import { useAppDispatch, useAppSelector } from '../store/store';
-import { CircleLoader, PuffLoader } from 'react-spinners';
+import { PulseLoader } from 'react-spinners';
 import { resetPassword } from '../store/features/auth/authSlice';
 import { useFormik } from 'formik';
-import '../styles/reset-password.scss';
+import passwordChanged from "../../public/assets/images/resetPassword.png"
 import { toast } from 'react-toastify';
-import Button from '../components/buttons/Button';
-import Header from '../components/layout/Header';
-import * as Yup from 'yup';
 
 const ResetPassword: React.FC = () => {
   const [showNewPassword, setShowNewPassword] = useState(false);
@@ -27,6 +24,9 @@ const ResetPassword: React.FC = () => {
   const location = useLocation();
   const dispatch = useAppDispatch();
   const { user, isError, isSuccess, isLoading, message } = useAppSelector((state) => state?.auth);
+  const [isFormVisible, setIsFormVisible] = useState(true);
+  const [successMessage, setSuccessVisible] = useState(false);
+
   const formik = useFormik({
     initialValues: {
       password: '',
@@ -34,32 +34,36 @@ const ResetPassword: React.FC = () => {
     },
     onSubmit: (values) => {
       if (values.password !== values.confirmPassword) {
-        toast.error("Passwords do not match");
+        formik.setStatus("Passwords do not match");
       } 
       else{
         const pathParts = location.pathname.split('/');
         const token = pathParts[pathParts.length - 1];
         dispatch(resetPassword({ token, password: values.password }));
+        
       }  
     },
   })
   useEffect(() => {
     if (isError) {
-      toast.error(message);
+        formik.setStatus(message);
     }
     if (isSuccess) {
       toast.success(message)
-      navigate('/login');
+      setIsFormVisible(false);
+      setSuccessVisible(true);
+
     }
   }, [user, isError, isSuccess, isLoading, message])
 
   return (
     <>
     <hr />
-      <main>
-        <form className="resetPasswordForm" onSubmit={formik.handleSubmit}>
-          <h1>Reset password</h1>
-          <div className="input-containers">
+    <main>
+      {isFormVisible ? (
+          <form className="resetPasswordForm" onSubmit={formik.handleSubmit}>
+        <h1>Reset password</h1>
+        <div className="input-containers">
             <div className="input-container1">
               <input
                 type={showNewPassword ? 'text' : 'password'}
@@ -80,7 +84,7 @@ const ResetPassword: React.FC = () => {
               >
                 <FontAwesomeIcon icon={showNewPassword ? faEyeSlash : faEye} />
               </button>
-            </div>
+            </div><br/>
             <div className="input-container2">
               <input
                 type={showConfirmPassword ? 'text' : 'password'}
@@ -102,17 +106,28 @@ const ResetPassword: React.FC = () => {
                 <FontAwesomeIcon icon={showConfirmPassword ? faEyeSlash : faEye} />
               </button>
             </div>
-            {isLoading ? (
-                <div className='btn-loading'>
-                    <PuffLoader size={60} color='#FF6D18' loading={isLoading} />
-                  </div>
-                ) : (
-                  <div className="reset-Button">
-                    <Button title="Reset Password" type="submit" />
-                 </div>
-                )}
-            </div>
+            <p className='error'>{formik.status}</p><br />
+          </div>
+          <button
+        className={`reset-Button${isLoading ? " loading" : ""}`}
+         disabled={isLoading}
+          >
+        <span>{isLoading ? "Loading" : "Reset Password"}</span>
+        <PulseLoader size={6} color="#ffe2d1" loading={isLoading} />
+       </button>
         </form>
+        
+      
+        ) : (
+        <div className='redirect-page'>
+        <div className='success-page'>
+        <div className="isSuccess">
+            <img src={passwordChanged} alt="" />
+            <p><h2>Password is changed</h2><span onClick={() => navigate("/login")}>Continue to login</span></p>
+          </div>
+        </div>  
+        </div>  
+      )}      
       </main><br/><br/><br/><br/><br/><br/>
     </>
   );
diff --git a/src/pages/SendResetPasswordLink.tsx b/src/pages/SendResetPasswordLink.tsx
index aac7aaa0..c5974f96 100644
--- a/src/pages/SendResetPasswordLink.tsx
+++ b/src/pages/SendResetPasswordLink.tsx
@@ -1,14 +1,11 @@
 /* eslint-disable */
 import React, { useEffect } from 'react'
 import { useFormik } from 'formik';
-import Header from '../components/layout/Header';
-import Button from '../components/buttons/Button';
 import { useAppDispatch, useAppSelector } from '../store/store';
 import { sendResetLink } from '../store/features/auth/authSlice';
-import '../styles/reset-password.scss';
 import { toast } from 'react-toastify';
 import * as Yup from 'yup';
-import { CircleLoader, PuffLoader } from 'react-spinners';
+import {  PulseLoader } from 'react-spinners';
 
 const ResetPasswordSchema = Yup.object().shape({
   email: Yup.string().email('Email must be valid').required('Email is required'),
@@ -21,19 +18,26 @@ const SendResetPasswordLink: React.FC = () => {
       email: '',
     },
     validationSchema: ResetPasswordSchema,
-    onSubmit: (values) => {
-        dispatch(sendResetLink(values.email));
+    onSubmit: (values, { setStatus }) => {
+      dispatch(sendResetLink(values.email))
+        .then(() => {
+          if (isError) {
+            setStatus(message);
+          }
+       });
     },
-  })
+  });
+
   useEffect(() => {
     if (isError) {
-      toast.error(message)
-     }
+      formik.setStatus(message);
+    }
     if (isSuccess) {
       toast.success(message)
-      formik.resetForm();
+      formik.resetForm()
     }
-  }, [user, isError, isSuccess, isLoading, message])
+  }, [isError, isSuccess, message]);
+
   return (
     <>
     <hr />
@@ -57,16 +61,14 @@ const SendResetPasswordLink: React.FC = () => {
               />
               <label className="input-label" id="email" htmlFor="email">Email Address</label>
             </div>
-             {isLoading ? (
-                <div className='btn-loading'>
-                    <PuffLoader size={60} color='#FF6D18' loading={isLoading} />
-                  </div>
-                ) : (
-                  <div className="reset-Button">
-                    <Button title="Get Reset Link" type="submit" />
-                 </div>
-                )}
-            
+            <p className='error'>{formik.status}</p><br /><br />
+            <button
+            className={`reset-Button${isLoading ? " loading" : ""}`}
+             disabled={isLoading}
+              >
+            <span>{isLoading ? "Loading " : "Get Reset Link"}</span>
+            <PulseLoader size={6} color="#ffe2d1" loading={isLoading} />
+           </button>          
           </form>
         </div><br/>
       </main><br/><br/><br/><br/><br/><br/>
@@ -74,4 +76,4 @@ const SendResetPasswordLink: React.FC = () => {
   );
 };
 
-export default SendResetPasswordLink;
+export default SendResetPasswordLink;
\ No newline at end of file
diff --git a/src/router.tsx b/src/router.tsx
index 42afadea..123df092 100644
--- a/src/router.tsx
+++ b/src/router.tsx
@@ -24,7 +24,7 @@ const AppRouter: React.FC = () => {
           <Route path="resend-email" element={<ResendEmail />} />
           <Route path="/api/auth/verify-email/:token" element={<VerifyEmail />} />
           <Route path="/api/auth/google/callback" element={<GoogleCallback />} />
-          <Route path="/send-reset-password-link" element={<SendResetPasswordLink />} />
+          <Route path="/reset-password" element={<SendResetPasswordLink />} />
          <Route path="/api/auth/reset-password/:token" element={<ResetPassword />} />
           <Route path="*" element={<NotFound />} />
         </Route>