diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 000000000..dc8891d54
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,5 @@
+{
+    "editor.codeActionsOnSave": {
+        "source.fixAll.eslint": true
+    }
+}
\ No newline at end of file
diff --git a/client/public/favicon.ico b/client/public/favicon.ico
new file mode 100644
index 000000000..0d9cc2af5
Binary files /dev/null and b/client/public/favicon.ico differ
diff --git a/client/public/index.html b/client/public/index.html
index 6760ca5e9..c0bd53ef4 100644
--- a/client/public/index.html
+++ b/client/public/index.html
@@ -2,14 +2,25 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
+    <title>Teameights - Find your first pet project!</title>
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="Got an interesting idea for the project but no team? No worries, teameights is here!"
+      key="desc"
+    />
+    <meta
+      property="og:title"
+      content="Teameights - Find your first pet project!"
+    />
+    <meta
+      property="og:description"
+      content="Got an interesting idea for the project but no team? No worries, teameights is here!"
+    />
+    <meta
+      property="og:image"
+      content="https://i.ibb.co/y8MRSbY/Logo-T8-S-image.png"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 
     <style>
       body {
diff --git a/client/src/api/endpoints/reset.js b/client/src/api/endpoints/reset.js
deleted file mode 100644
index 881510fa0..000000000
--- a/client/src/api/endpoints/reset.js
+++ /dev/null
@@ -1,27 +0,0 @@
-// * API
-import http from '../../http'
-
-const { api } = http
-
-const getRegistrationEmail = async (email) => {
-  try {
-    await api.post('/reset-password', { email })
-  } catch (err) {
-    console.log(err)
-  }
-}
-
-const updatePassword = async (id, token, password, repeatPassword) => {
-  try {
-    await api.post(`/reset-password/${id}/${token}`, { id, token, password, repeatPassword })
-  } catch (err) {
-    return err.response.data.message
-  }
-}
-
-const resetApi = Object.freeze({
-  getRegistrationEmail,
-  updatePassword,
-})
-
-export default resetApi
diff --git a/client/src/api/hooks/auth/useResetPassword.js b/client/src/api/hooks/auth/useResetPassword.js
new file mode 100644
index 000000000..98d4cbb82
--- /dev/null
+++ b/client/src/api/hooks/auth/useResetPassword.js
@@ -0,0 +1,33 @@
+import { useMutation, useQueryClient } from 'react-query'
+import { useNavigate } from 'react-router-dom'
+
+import ROUTES from '../../../constants/routes'
+import http from '../../../http'
+import { errorToaster } from '../../../shared/components/Toasters/Error.toaster'
+
+const { api } = http
+
+export const useResetPasssword = (successHandler) => {
+  const navigate = useNavigate()
+
+  const updateUserPassword = async (email) => {
+    return await api.get(`/auth/reset-password/${email}`)
+  }
+
+  return useMutation(updateUserPassword, {
+    mutationKey: 'updateUserPassword',
+    onSuccess: async () => {
+      if (successHandler) {
+        successHandler()
+      }
+
+      navigate(ROUTES.confirmEmail, {
+        replace: true,
+      })
+    },
+    onError: (error) => {
+      // set error message
+      errorToaster(error, 'top-center')
+    },
+  })
+}
diff --git a/client/src/api/hooks/auth/useUpdatePassword.js b/client/src/api/hooks/auth/useUpdatePassword.js
new file mode 100644
index 000000000..48cbee96c
--- /dev/null
+++ b/client/src/api/hooks/auth/useUpdatePassword.js
@@ -0,0 +1,41 @@
+import { useMutation, useQueryClient } from 'react-query'
+import { useNavigate } from 'react-router-dom'
+
+import ROUTES from '../../../constants/routes'
+import http from '../../../http'
+import { errorToaster } from '../../../shared/components/Toasters/Error.toaster'
+
+const { api } = http
+
+export const useUpdatePassword = (successHandler) => {
+  const navigate = useNavigate()
+
+  const updateUserPassword = async ({ email, token, password }) => {
+    return await api.post(`/auth/update-password`, { email, token, password })
+  }
+
+  return useMutation(updateUserPassword, {
+    mutationKey: 'updateUserPassword',
+    onSuccess: async () => {
+      if (successHandler) {
+        successHandler()
+      }
+
+      navigate(ROUTES.login, {
+        replace: true,
+      })
+    },
+    onError: (error) => {
+      // set error message
+      errorToaster(error, 'top-center')
+
+      if (error?.response?.status === 403) {
+        setTimeout(() => {
+          navigate(ROUTES.login, {
+            replace: true,
+          })
+        }, 1500)
+      }
+    },
+  })
+}
diff --git a/client/src/assets/BigSideLogo.js b/client/src/assets/BigSideLogo.js
new file mode 100644
index 000000000..232720e83
--- /dev/null
+++ b/client/src/assets/BigSideLogo.js
@@ -0,0 +1,24 @@
+const BigSideLogo = () => {
+  return (
+    <div>
+      <svg
+        width="143"
+        height="40"
+        viewBox="0 0 143 40"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12.227 33C10.6563 33 9.31368 32.7467 8.19901 32.24C7.08434 31.708 6.23567 30.8973 5.65301 29.808C5.09567 28.7187 4.81701 27.3507 4.81701 25.704V17.724H1.85301C1.57434 17.724 1.34634 17.6353 1.16901 17.458C0.991675 17.2807 0.903008 17.0527 0.903008 16.774V14.19C0.903008 13.9113 0.991675 13.6833 1.16901 13.506C1.34634 13.3287 1.57434 13.24 1.85301 13.24H4.81701V6.97C4.81701 6.69133 4.90567 6.46333 5.08301 6.286C5.28567 6.10867 5.51367 6.02 5.76701 6.02H9.49101C9.76967 6.02 9.99767 6.10867 10.175 6.286C10.3523 6.46333 10.441 6.69133 10.441 6.97V13.24H15.191C15.4443 13.24 15.6597 13.3287 15.837 13.506C16.0143 13.6833 16.103 13.9113 16.103 14.19V16.774C16.103 17.0527 16.0143 17.2807 15.837 17.458C15.6597 17.6353 15.4443 17.724 15.191 17.724H10.441V25.248C10.441 26.2107 10.6057 26.9707 10.935 27.528C11.2897 28.06 11.8977 28.326 12.759 28.326H15.533C15.7863 28.326 16.0017 28.4147 16.179 28.592C16.3563 28.7693 16.445 28.9847 16.445 29.238V32.05C16.445 32.3287 16.3563 32.5567 16.179 32.734C16.0017 32.9113 15.7863 33 15.533 33H12.227ZM28.5762 33.38C25.6629 33.38 23.3449 32.5693 21.6222 30.948C19.9249 29.3267 19.0255 26.9707 18.9242 23.88C18.9242 23.6773 18.9242 23.4113 18.9242 23.082C18.9242 22.7273 18.9242 22.4487 18.9242 22.246C19.0255 20.2953 19.4689 18.6233 20.2542 17.23C21.0395 15.8113 22.1415 14.7347 23.5602 14C24.9789 13.24 26.6382 12.86 28.5382 12.86C30.6662 12.86 32.4395 13.3033 33.8582 14.19C35.3022 15.0513 36.3789 16.242 37.0882 17.762C37.8229 19.2567 38.1902 20.9793 38.1902 22.93V23.804C38.1902 24.0573 38.0889 24.2727 37.8862 24.45C37.7089 24.6273 37.4935 24.716 37.2402 24.716H24.8142C24.8142 24.7413 24.8142 24.792 24.8142 24.868C24.8142 24.9187 24.8142 24.9693 24.8142 25.02C24.8395 25.8307 24.9915 26.578 25.2702 27.262C25.5742 27.9207 25.9922 28.4527 26.5242 28.858C27.0815 29.2633 27.7402 29.466 28.5002 29.466C29.1335 29.466 29.6529 29.3773 30.0582 29.2C30.4635 29.0227 30.7929 28.8073 31.0462 28.554C31.3249 28.3007 31.5275 28.0853 31.6542 27.908C31.8822 27.6547 32.0595 27.5027 32.1862 27.452C32.3382 27.376 32.5662 27.338 32.8702 27.338H36.8222C37.0755 27.338 37.2782 27.414 37.4302 27.566C37.6075 27.6927 37.6835 27.8827 37.6582 28.136C37.6329 28.5413 37.4175 29.048 37.0122 29.656C36.6322 30.2387 36.0622 30.8213 35.3022 31.404C34.5422 31.9613 33.5922 32.43 32.4522 32.81C31.3375 33.19 30.0455 33.38 28.5762 33.38ZM24.8142 21.258H32.2622V21.182C32.2622 20.27 32.1102 19.4847 31.8062 18.826C31.5275 18.142 31.1095 17.61 30.5522 17.23C29.9949 16.85 29.3235 16.66 28.5382 16.66C27.7529 16.66 27.0815 16.85 26.5242 17.23C25.9669 17.61 25.5362 18.142 25.2322 18.826C24.9535 19.4847 24.8142 20.27 24.8142 21.182V21.258ZM47.8027 33.38C46.4601 33.38 45.2567 33.1267 44.1927 32.62C43.1287 32.088 42.2801 31.3787 41.6467 30.492C41.0134 29.6053 40.6967 28.6173 40.6967 27.528C40.6967 25.7293 41.4187 24.3107 42.8627 23.272C44.3321 22.2333 46.2574 21.524 48.6387 21.144L53.6167 20.422V19.738C53.6167 18.75 53.3887 17.99 52.9327 17.458C52.4767 16.926 51.6787 16.66 50.5387 16.66C49.7027 16.66 49.0314 16.8247 48.5247 17.154C48.0181 17.4833 47.6254 17.914 47.3467 18.446C47.1441 18.7753 46.8527 18.94 46.4727 18.94H42.8627C42.5841 18.94 42.3687 18.864 42.2167 18.712C42.0647 18.5347 42.0014 18.332 42.0267 18.104C42.0267 17.6733 42.1914 17.1667 42.5207 16.584C42.8501 16.0013 43.3567 15.4313 44.0407 14.874C44.7247 14.2913 45.5987 13.81 46.6627 13.43C47.7267 13.05 49.0314 12.86 50.5767 12.86C52.1727 12.86 53.5407 13.05 54.6807 13.43C55.8207 13.81 56.7327 14.342 57.4167 15.026C58.1007 15.71 58.6074 16.508 58.9367 17.42C59.2661 18.3067 59.4307 19.2693 59.4307 20.308V32.05C59.4307 32.3287 59.3421 32.5567 59.1647 32.734C58.9874 32.9113 58.7594 33 58.4807 33H54.7567C54.5034 33 54.2881 32.9113 54.1107 32.734C53.9334 32.5567 53.8447 32.3287 53.8447 32.05V30.644C53.5154 31.1253 53.0721 31.5813 52.5147 32.012C51.9574 32.4173 51.2861 32.7467 50.5007 33C49.7407 33.2533 48.8414 33.38 47.8027 33.38ZM49.3227 29.428C50.1587 29.428 50.9061 29.2507 51.5647 28.896C52.2234 28.5413 52.7427 27.9967 53.1227 27.262C53.5027 26.5273 53.6927 25.6027 53.6927 24.488V23.842L50.1587 24.412C48.7907 24.64 47.7901 24.982 47.1567 25.438C46.5234 25.894 46.2067 26.4513 46.2067 27.11C46.2067 27.5913 46.3461 28.0093 46.6247 28.364C46.9287 28.7187 47.3214 28.9847 47.8027 29.162C48.2841 29.3393 48.7907 29.428 49.3227 29.428ZM64.9437 33C64.6904 33 64.475 32.9113 64.2977 32.734C64.1204 32.5567 64.0317 32.3287 64.0317 32.05V14.19C64.0317 13.9113 64.1204 13.6833 64.2977 13.506C64.475 13.3287 64.6904 13.24 64.9437 13.24H68.4777C68.731 13.24 68.9464 13.3287 69.1237 13.506C69.3264 13.6833 69.4277 13.9113 69.4277 14.19V15.482C69.9344 14.7727 70.631 14.1647 71.5177 13.658C72.4297 13.1513 73.5064 12.8853 74.7477 12.86C77.6864 12.8093 79.7004 13.924 80.7897 16.204C81.3724 15.216 82.2084 14.418 83.2977 13.81C84.4124 13.1767 85.6284 12.86 86.9457 12.86C88.263 12.86 89.4537 13.164 90.5177 13.772C91.5817 14.3547 92.4177 15.2667 93.0257 16.508C93.659 17.724 93.9757 19.2947 93.9757 21.22V32.05C93.9757 32.3287 93.887 32.5567 93.7097 32.734C93.5324 32.9113 93.317 33 93.0637 33H89.3017C89.0484 33 88.833 32.9113 88.6557 32.734C88.4784 32.5567 88.3897 32.3287 88.3897 32.05V21.524C88.3897 20.4853 88.2377 19.6747 87.9337 19.092C87.6297 18.484 87.2244 18.0533 86.7177 17.8C86.2364 17.5467 85.6917 17.42 85.0837 17.42C84.5517 17.42 84.0324 17.5467 83.5257 17.8C83.0444 18.0533 82.639 18.484 82.3097 19.092C82.0057 19.6747 81.8537 20.4853 81.8537 21.524V32.05C81.8537 32.3287 81.765 32.5567 81.5877 32.734C81.4104 32.9113 81.1824 33 80.9037 33H77.1797C76.901 33 76.673 32.9113 76.4957 32.734C76.3184 32.5567 76.2297 32.3287 76.2297 32.05V21.524C76.2297 20.4853 76.0777 19.6747 75.7737 19.092C75.4697 18.484 75.0644 18.0533 74.5577 17.8C74.0764 17.5467 73.5444 17.42 72.9617 17.42C72.4297 17.42 71.9104 17.5593 71.4037 17.838C70.897 18.0913 70.479 18.5093 70.1497 19.092C69.8457 19.6747 69.6937 20.4727 69.6937 21.486V32.05C69.6937 32.3287 69.605 32.5567 69.4277 32.734C69.2504 32.9113 69.035 33 68.7817 33H64.9437ZM131.679 33.38C130.108 33.38 128.753 33.2027 127.613 32.848C126.498 32.468 125.586 32.012 124.877 31.48C124.193 30.948 123.674 30.416 123.319 29.884C122.99 29.3267 122.812 28.858 122.787 28.478C122.762 28.1993 122.85 27.9713 123.053 27.794C123.256 27.6167 123.458 27.528 123.661 27.528H127.347C127.423 27.528 127.499 27.5407 127.575 27.566C127.651 27.5913 127.727 27.6547 127.803 27.756C128.132 27.984 128.474 28.25 128.829 28.554C129.184 28.8327 129.589 29.0733 130.045 29.276C130.526 29.4787 131.122 29.58 131.831 29.58C132.667 29.58 133.376 29.4153 133.959 29.086C134.542 28.7313 134.833 28.2373 134.833 27.604C134.833 27.148 134.694 26.768 134.415 26.464C134.162 26.16 133.668 25.8813 132.933 25.628C132.198 25.3747 131.109 25.096 129.665 24.792C128.297 24.488 127.132 24.0827 126.169 23.576C125.206 23.0693 124.484 22.436 124.003 21.676C123.522 20.8907 123.281 19.9533 123.281 18.864C123.281 17.876 123.585 16.926 124.193 16.014C124.826 15.102 125.751 14.3547 126.967 13.772C128.183 13.164 129.703 12.86 131.527 12.86C132.92 12.86 134.136 13.0373 135.175 13.392C136.239 13.7213 137.126 14.152 137.835 14.684C138.544 15.1907 139.076 15.7227 139.431 16.28C139.811 16.812 140.014 17.2807 140.039 17.686C140.064 17.9393 139.988 18.1547 139.811 18.332C139.634 18.5093 139.431 18.598 139.203 18.598H135.821C135.694 18.598 135.58 18.5853 135.479 18.56C135.378 18.5093 135.289 18.446 135.213 18.37C134.909 18.1673 134.592 17.9393 134.263 17.686C133.959 17.4073 133.592 17.1667 133.161 16.964C132.73 16.7613 132.173 16.66 131.489 16.66C130.653 16.66 130.007 16.85 129.551 17.23C129.12 17.5847 128.905 18.0407 128.905 18.598C128.905 18.9527 129.019 19.282 129.247 19.586C129.475 19.89 129.944 20.1687 130.653 20.422C131.362 20.6753 132.439 20.9413 133.883 21.22C135.606 21.524 136.974 21.98 137.987 22.588C139 23.196 139.722 23.9053 140.153 24.716C140.609 25.5013 140.837 26.35 140.837 27.262C140.837 28.4527 140.482 29.5167 139.773 30.454C139.064 31.366 138.025 32.088 136.657 32.62C135.314 33.1267 133.655 33.38 131.679 33.38Z"
+          fill="white"
+        />
+        <path
+          d="M108.841 33.38C107.067 33.38 105.497 33.1773 104.129 32.772C102.786 32.3413 101.659 31.7587 100.747 31.024C99.8345 30.264 99.1505 29.39 98.6945 28.402C98.2385 27.3887 98.0105 26.2867 98.0105 25.096C98.0105 23.652 98.3652 22.398 99.0745 21.334C99.7839 20.27 100.683 19.4467 101.773 18.864C100.886 18.2813 100.189 17.5467 99.6825 16.66C99.2012 15.748 98.9605 14.6967 98.9605 13.506C98.9605 12.062 99.3279 10.7827 100.063 9.668C100.797 8.55333 101.887 7.66667 103.331 7.008C104.8 6.34933 106.637 6.02 108.841 6.02C111.019 6.02 112.831 6.34933 114.275 7.008C115.719 7.64133 116.808 8.51533 117.543 9.63C118.277 10.7447 118.645 12.024 118.645 13.468C118.645 14.6587 118.404 15.71 117.923 16.622C117.441 17.534 116.757 18.2813 115.871 18.864C117.036 19.4213 117.961 20.2447 118.645 21.334C119.329 22.4233 119.671 23.69 119.671 25.134C119.671 26.7047 119.265 28.1107 118.455 29.352C117.644 30.5933 116.428 31.5813 114.807 32.316C113.185 33.0253 111.197 33.38 108.841 33.38ZM108.841 29.01C109.727 29.01 110.538 28.858 111.273 28.554C112.007 28.2247 112.577 27.7687 112.983 27.186C113.413 26.6033 113.629 25.9193 113.629 25.134C113.629 24.3233 113.413 23.6393 112.983 23.082C112.577 22.4993 112.007 22.056 111.273 21.752C110.538 21.4227 109.727 21.258 108.841 21.258C107.929 21.258 107.105 21.4227 106.371 21.752C105.661 22.056 105.091 22.4993 104.661 23.082C104.23 23.6393 104.015 24.3233 104.015 25.134C104.015 25.9193 104.23 26.6033 104.661 27.186C105.091 27.7687 105.661 28.2247 106.371 28.554C107.105 28.858 107.929 29.01 108.841 29.01ZM108.841 17.116C109.626 17.0907 110.335 16.9387 110.969 16.66C111.602 16.3813 112.109 16.0013 112.489 15.52C112.869 15.0133 113.059 14.4307 113.059 13.772C113.059 13.088 112.869 12.5053 112.489 12.024C112.134 11.5173 111.64 11.1247 111.007 10.846C110.373 10.5673 109.651 10.428 108.841 10.428C108.03 10.428 107.295 10.5673 106.637 10.846C106.003 11.1247 105.509 11.5173 105.155 12.024C104.8 12.5053 104.623 13.088 104.623 13.772C104.623 14.456 104.8 15.0513 105.155 15.558C105.509 16.0393 106.003 16.4193 106.637 16.698C107.295 16.9767 108.03 17.116 108.841 17.116Z"
+          fill="#5BD424"
+        />
+      </svg>
+    </div>
+  )
+}
+
+export default BigSideLogo
diff --git a/client/src/assets/Shared/NonFound.js b/client/src/assets/Shared/NonFound.js
new file mode 100644
index 000000000..fdd2693a8
--- /dev/null
+++ b/client/src/assets/Shared/NonFound.js
@@ -0,0 +1,255 @@
+function NonFound() {
+  return (
+    <svg viewBox="0 0 570 291" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M43.4694 250.76C38.1969 246.45 32.6935 242.332 27.8058 237.598C25.5352 235.404 23.4185 233.018 21.8021 230.286C20.9554 228.9 20.2627 227.399 19.7623 225.86C19.339 224.59 18.9157 222.627 20.763 222.435C21.4557 222.358 22.1869 222.512 22.8412 222.704C23.5724 222.896 23.8803 221.78 23.1491 221.588C20.9554 221.049 17.7996 221.203 18.1459 224.282C18.5693 227.746 20.8399 231.286 22.9182 233.942C28.3061 240.869 35.9263 246.065 42.6612 251.568C43.2385 252.03 44.0467 251.222 43.4694 250.76Z"
+        fill="#46A11B"
+      />
+      <path
+        d="M23.3418 221.78C21.1097 219.125 19.3778 216.046 18.3772 212.698C17.9154 211.197 17.7229 209.658 17.2611 208.195C16.9532 207.271 16.376 206.425 17.2226 205.617C17.6075 205.27 18.1848 205.039 18.6081 204.731C19.9166 203.846 20.6478 202.807 19.0315 201.691C18.1078 201.075 16.9532 200.96 15.9526 200.459C14.6056 199.728 13.5665 198.535 12.7968 197.265C11.1804 194.648 10.2952 191.569 9.33311 188.683C8.17854 185.258 7.06246 181.756 6.06184 178.292C4.06059 171.287 2.40572 164.206 1.05872 157.086C0.943267 157.317 0.789325 157.548 0.673869 157.779C7.90914 155.393 15.1059 161.512 20.263 165.861C25.574 170.325 30.3462 175.444 34.5411 180.986C43.2004 192.531 49.2426 205.847 53.0142 219.741C55.3233 228.246 56.7857 236.982 57.5939 245.757C57.6709 246.488 58.8255 246.488 58.7485 245.757C55.9391 215.469 44.7783 184.796 20.8788 164.822C15.4138 160.281 8.0246 154.161 0.40447 156.663C0.0965858 156.778 -0.0573562 157.048 0.0196148 157.356C1.44358 164.976 3.2524 172.519 5.44607 179.985C6.48518 183.487 7.56278 186.951 8.75583 190.376C9.71796 193.147 10.6031 196.111 12.2965 198.535C12.9507 199.459 13.682 200.306 14.6056 200.96C15.7217 201.768 17.0302 201.845 18.1463 202.538C19.6087 203.423 17.492 204.116 16.7223 204.654C16.145 205.078 15.6062 205.578 15.4908 206.348C15.3368 207.502 16.3375 208.849 16.6069 209.927C16.9917 211.582 17.3381 213.198 17.9539 214.815C19.0699 217.663 20.6478 220.28 22.6106 222.627C22.9955 223.166 23.8037 222.358 23.3418 221.78Z"
+        fill="#46A11B"
+      />
+      <path
+        d="M6.8699 163.283C22.9568 181.448 35.4646 202.654 43.6236 225.514C45.8942 231.864 47.78 238.33 49.3579 244.872C49.5503 245.604 50.6279 245.296 50.474 244.564C44.7781 220.857 34.541 198.266 20.3783 178.369C16.4528 172.827 12.2194 167.516 7.71658 162.436C7.17779 161.936 6.36959 162.744 6.8699 163.283Z"
+        fill="#46A11B"
+      />
+      <path
+        d="M9.48722 188.606C11.3345 189.068 13.1433 189.684 14.9137 190.415C15.6064 190.684 15.9143 189.568 15.2216 189.299C13.4512 188.568 11.6424 187.952 9.79511 187.49C9.10237 187.298 8.79448 188.414 9.48722 188.606Z"
+        fill="#46A11B"
+      />
+      <path
+        d="M23.0345 214.16C25.5361 214.083 27.6143 215.392 29.654 216.623C31.5013 217.74 33.3102 218.856 35.0805 220.087C38.7366 222.627 42.0464 225.629 44.24 229.555C44.5864 230.209 45.587 229.632 45.2407 228.977C42.9315 224.898 39.4678 221.742 35.6578 219.125C33.6565 217.74 31.5398 216.431 29.4231 215.199C27.4219 214.006 25.3821 213.006 22.996 213.044C22.3033 213.006 22.3033 214.16 23.0345 214.16Z"
+        fill="#46A11B"
+      />
+      <path
+        d="M38.3512 207.233C37.3121 200.999 37.3506 194.687 38.4667 188.491C38.5822 187.76 37.4661 187.452 37.3506 188.183C36.1961 194.61 36.1576 201.114 37.2352 207.541C37.3506 208.272 38.4667 207.965 38.3512 207.233Z"
+        fill="#46A11B"
+      />
+      <path
+        d="M36.3883 180.871C37.1965 173.25 38.8129 165.63 41.5069 158.472C43.7776 152.43 47.1643 146.503 52.9756 143.27C52.6677 143.116 52.3983 142.924 52.0904 142.77C52.7062 153.469 58.9793 162.975 59.2487 173.712C59.4027 173.52 59.5181 173.327 59.6721 173.173C58.2096 173.558 56.7472 173.943 55.2847 174.328C54.8614 174.443 54.7074 174.982 55.0153 175.29C56.7857 176.983 57.132 179.37 57.209 181.717C57.2475 182.949 57.9017 188.914 56.4778 189.299C56.1314 189.414 55.939 189.838 56.1314 190.146C60.4033 196.996 58.4405 205.116 57.2475 212.506C56.0159 220.126 55.862 227.823 56.7472 235.443C56.8241 236.174 57.9787 236.174 57.9017 235.443C56.9011 226.861 57.4014 218.432 58.8639 209.966C60.0569 203.115 61.0191 195.764 57.1705 189.53C57.0551 189.799 56.9396 190.107 56.8241 190.376C57.8633 190.107 58.2096 189.299 58.3636 188.298C58.633 186.451 58.4405 184.411 58.4021 182.564C58.3636 179.639 58.0557 176.599 55.8235 174.482C55.7465 174.79 55.6696 175.136 55.5541 175.444C57.0166 175.059 58.479 174.674 59.9415 174.289C60.1724 174.213 60.3648 173.982 60.3648 173.751C60.0954 162.975 53.8608 153.507 53.2065 142.808C53.168 142.385 52.7447 142.077 52.3213 142.308C46.587 145.502 43.1233 151.16 40.7372 157.125C37.6968 164.707 36.0035 172.827 35.1568 180.947C35.1568 181.602 36.3114 181.602 36.3883 180.871Z"
+        fill="#46A11B"
+      />
+      <path
+        d="M50.3582 148.542C46.2403 164.129 44.1236 180.216 44.0851 196.341C44.0851 197.073 45.2396 197.073 45.2396 196.341C45.2781 180.293 47.3564 164.36 51.4358 148.85C51.6667 148.119 50.5506 147.811 50.3582 148.542Z"
+        fill="#46A11B"
+      />
+      <path
+        d="M502.218 125.49C504.681 133.418 506.528 141.5 507.683 149.736C508.26 153.893 508.683 158.126 508.876 162.321C508.953 163.399 508.991 164.515 509.03 165.592C509.068 166.247 508.876 167.324 509.106 167.94C509.337 168.517 510.146 168.902 510.607 169.287C511.416 169.941 512.224 170.595 512.994 171.25C513.032 170.942 513.07 170.634 513.109 170.326C512.031 170.98 510.992 171.288 509.722 171.327C509.453 171.327 509.26 171.519 509.183 171.75C508.067 175.214 508.876 178.87 511.377 181.564C511.531 181.217 511.647 180.91 511.8 180.563C507.798 180.409 507.721 185.027 508.106 187.875C508.645 191.839 509.414 195.803 510.53 199.652C512.763 207.195 516.496 214.353 522.615 219.51C523.192 219.972 524 219.164 523.423 218.702C518.266 214.353 514.802 208.504 512.57 202.154C511.531 199.152 510.723 196.073 510.107 192.994C509.607 190.415 507.105 181.564 511.8 181.718C512.339 181.756 512.532 181.102 512.224 180.717C510.03 178.331 509.337 175.098 510.338 172.058C510.146 172.212 509.953 172.327 509.799 172.481C511.262 172.481 512.493 172.135 513.763 171.327C514.033 171.134 514.187 170.672 513.879 170.403C512.455 169.248 510.492 168.248 510.261 166.324C510.03 164.284 510.107 162.167 509.953 160.127C509.684 156.317 509.299 152.507 508.722 148.697C507.567 140.731 505.758 132.88 503.372 125.183C503.103 124.451 501.987 124.759 502.218 125.49Z"
+        fill="#46A11B"
+      />
+      <path
+        d="M504.103 127.222C502.525 125.144 505.488 123.605 507.22 124.028C508.952 124.49 510.376 125.875 511.569 127.107C513.763 129.339 515.494 131.956 516.995 134.688C520.113 140.307 522.73 146.311 525.039 152.276C529.773 164.553 533.044 177.407 534.776 190.415C535.738 197.805 536.238 205.232 536.238 212.66C536.238 213.391 537.393 213.391 537.393 212.66C537.393 197.189 535.276 181.756 531.12 166.901C529.08 159.665 526.578 152.584 523.615 145.657C520.882 139.268 517.957 132.418 513.262 127.184C511.376 125.067 508.182 121.796 505.026 122.912C503.102 123.566 501.832 126.029 503.141 127.799C503.564 128.377 504.565 127.838 504.103 127.222Z"
+        fill="#46A11B"
+      />
+      <path
+        d="M531.813 169.517C533.776 162.936 536.046 156.509 538.625 150.159C539.972 146.888 541.396 143.617 542.935 140.422C543.666 138.921 544.398 137.382 545.167 135.881C545.668 134.919 547.168 130.685 548.746 131.07C549.208 131.186 549.516 130.801 549.439 130.378C549.054 127.991 551.748 125.952 553.172 124.374C554.442 122.988 555.674 121.603 556.944 120.217C559.561 117.369 562.139 114.521 564.756 111.635C564.448 111.558 564.102 111.481 563.794 111.366C567.758 121.179 566.719 131.917 564.41 142C563.217 147.157 561.716 152.276 560.446 157.433C559.561 161.012 558.599 166.438 554.211 167.208C553.903 167.247 553.75 167.632 553.826 167.901C554.943 172.481 551.864 176.714 549.824 180.563C547.9 184.18 546.129 187.913 544.513 191.723C541.357 199.151 538.856 206.81 536.97 214.622C536.777 215.354 537.893 215.661 538.086 214.93C540.164 206.271 543.012 197.843 546.668 189.722C548.4 185.874 550.324 182.102 552.364 178.407C554.211 175.059 555.905 171.519 554.981 167.632C554.866 167.862 554.712 168.093 554.596 168.324C558.329 167.67 559.946 163.898 560.908 160.589C562.486 155.047 563.91 149.351 565.257 143.732C567.835 133.033 569.221 121.526 564.987 111.058C564.833 110.673 564.333 110.442 564.025 110.788C560.754 114.368 557.483 117.985 554.211 121.564C552.672 123.258 551.017 124.874 549.593 126.683C548.669 127.914 548.169 129.069 548.4 130.608C548.631 130.378 548.862 130.147 549.093 129.916C546.322 129.223 544.975 133.764 544.051 135.573C542.204 139.229 540.472 142.924 538.894 146.657C535.738 153.969 533.044 161.512 530.774 169.132C530.466 169.902 531.582 170.21 531.813 169.517Z"
+        fill="#46A11B"
+      />
+      <path
+        d="M561.908 121.602C549.9 144.001 537.662 167.092 534.775 192.685C534.699 193.416 535.853 193.416 535.93 192.685C538.816 167.285 551.016 144.347 562.908 122.18C563.293 121.526 562.293 120.948 561.908 121.602Z"
+        fill="#46A11B"
+      />
+      <path
+        d="M511.839 136.997C521.191 161.744 526.771 187.837 528.426 214.238C528.464 214.969 529.619 214.969 529.58 214.238C527.926 187.721 522.345 161.551 512.955 136.689C512.685 136.035 511.569 136.305 511.839 136.997Z"
+        fill="#46A11B"
+      />
+      <path
+        d="M25.5354 124.604C49.0115 120.409 73.2574 120.64 96.6566 125.297C108.241 127.606 119.594 130.954 130.524 135.342C141.954 139.922 152.922 145.425 164.122 150.505C206.379 169.671 251.599 182.217 297.666 187.682C323.798 190.799 350.199 191.608 376.446 190.145C377.177 190.107 377.177 188.952 376.446 188.991C329.34 191.646 281.887 186.835 236.244 174.866C213.345 168.863 190.908 161.05 169.24 151.544C158.003 146.618 147.034 141.076 135.758 136.265C124.982 131.686 113.86 127.991 102.468 125.374C77.1829 119.601 50.7819 118.947 25.2275 123.527C24.4963 123.604 24.8042 124.72 25.5354 124.604Z"
+        fill="#46A11B"
+      />
+      <path
+        d="M233.5 174.5C255.421 175.891 277.625 165.926 298.235 158.061C319.809 149.859 341.46 141.898 363.15 134.128C384.724 126.406 406.298 118.301 428.219 112.114C450.062 105.975 472.33 103.049 494.713 102.234C519.638 101.275 544.564 102.665 569.451 104.104C570.183 104.152 570.183 102.713 569.451 102.665C525.494 100.171 480.959 97.7255 437.503 108.229C415.467 113.553 393.893 121.706 372.319 129.332C350.629 137.054 328.978 144.967 307.366 153.073C295.385 157.581 283.442 162.473 271.384 166.598C259.364 170.722 244.5 173.5 232.5 173.5C231.807 173.452 230 174 233.5 174.5Z"
+        fill="#46A11B"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M180.096 134.213C164.472 137.143 148.214 140.189 132.55 135.794C131.797 135.601 131.836 134.769 132.55 135C147.908 139.326 163.966 136.094 179.384 133.215C182.24 132.682 185.083 132.151 187.908 131.669C204.246 128.855 220.782 127.313 237.318 127.043C254.012 126.773 270.667 127.814 287.283 129.048C289.943 129.242 292.605 129.441 295.27 129.641C319.644 131.466 344.191 133.304 368.554 131.492L368.039 132.685C356.003 133.559 343.892 133.57 331.815 133.095C319.578 132.619 307.352 131.694 295.123 130.77C273.706 129.15 252.281 127.53 230.775 128.315C213.723 128.97 196.83 131.091 180.096 134.213Z"
+        fill="#46A11B"
+      />
+      <path
+        d="M167.698 210.168C172.625 208.128 177.936 207.089 183.285 207.243C188.25 207.397 192.714 209.014 197.525 210.014C201.104 210.784 204.683 210.784 207.569 208.244C208.685 207.282 209.648 206.281 211.264 206.781C212.457 207.128 213.458 207.936 214.574 208.436C215.882 209.052 217.229 209.283 218.615 209.014C221.924 208.359 224.426 205.627 227.312 204.049C232.2 201.432 236.895 204.934 241.668 206.204C251.597 208.86 262.219 208.052 272.379 207.936C284.887 207.821 297.433 207.898 309.864 206.358C310.595 206.281 310.595 205.127 309.864 205.204C298.703 206.551 287.427 206.628 276.189 206.743C265.49 206.858 254.175 207.859 243.63 205.473C241.167 204.934 238.858 204.126 236.51 203.164C234.471 202.317 232.354 201.509 230.122 201.817C226.62 202.279 224.003 205.05 221.039 206.743C219.5 207.628 217.807 208.244 216.036 207.744C214.112 207.166 212.534 205.473 210.417 205.396C208.416 205.358 207.454 206.974 205.991 208.013C203.952 209.437 201.373 209.475 198.987 209.091C193.907 208.282 189.173 206.32 183.978 206.089C178.32 205.819 172.663 206.858 167.39 209.052C166.698 209.322 167.006 210.438 167.698 210.168Z"
+        fill="#46A11B"
+      />
+      <path
+        d="M258.698 262.168C263.625 260.128 268.936 259.089 274.285 259.243C279.25 259.397 283.714 261.014 288.525 262.014C292.104 262.784 295.683 262.784 298.569 260.244C299.685 259.282 300.648 258.281 302.264 258.781C303.457 259.128 304.458 259.936 305.574 260.436C306.882 261.052 308.229 261.283 309.615 261.014C312.924 260.359 315.426 257.627 318.312 256.049C323.2 253.432 327.895 256.934 332.668 258.204C342.597 260.86 353.219 260.052 363.379 259.936C375.887 259.821 388.433 259.898 400.864 258.358C401.595 258.281 401.595 257.127 400.864 257.204C389.703 258.551 378.427 258.628 367.189 258.743C356.49 258.858 345.175 259.859 334.63 257.473C332.167 256.934 329.858 256.126 327.51 255.164C325.471 254.317 323.354 253.509 321.122 253.817C317.62 254.279 315.003 257.05 312.039 258.743C310.5 259.628 308.807 260.244 307.036 259.744C305.112 259.166 303.534 257.473 301.417 257.396C299.416 257.358 298.454 258.974 296.991 260.013C294.952 261.437 292.373 261.475 289.987 261.091C284.907 260.282 280.173 258.32 274.978 258.089C269.32 257.819 263.663 258.858 258.39 261.052C257.698 261.322 258.006 262.438 258.698 262.168Z"
+        fill="#46A11B"
+      />
+      <path
+        d="M109.859 218.73C109.012 217.729 108.242 216.69 107.588 215.536C107.28 214.958 106.895 214.343 106.703 213.688C106.434 213.265 106.395 212.765 106.549 212.264C106.434 211.726 106.588 211.302 106.972 210.994C107.55 209.416 106.857 207.762 106.472 206.145C105.895 203.605 105.317 201.065 104.74 198.525C104.432 197.178 104.124 195.87 103.855 194.523C103.701 193.907 103.586 193.33 103.432 192.714C103.201 191.636 102.97 191.136 103.778 190.251C104.163 189.442 104.74 189.289 105.51 189.904C105.856 190.251 106.203 190.597 106.549 190.943C106.934 191.444 107.203 192.021 107.511 192.56C108.05 193.56 108.589 194.561 109.089 195.562C110.282 197.948 111.321 200.411 112.206 202.912C113.9 207.608 115.054 212.457 115.747 217.421C115.939 217.191 116.132 216.921 116.286 216.69C116.363 216.767 116.401 216.883 116.478 216.96C116.671 216.228 115.555 215.921 115.362 216.652C115.208 217.344 115.555 217.845 116.286 217.845C116.709 217.845 116.902 217.498 116.825 217.114C115.939 210.763 114.285 204.567 111.745 198.679C110.552 195.908 109.281 192.829 107.511 190.366C106.549 189.019 104.817 187.788 103.162 188.75C101.277 189.827 102.162 192.483 102.547 194.138C103.316 197.524 104.086 200.911 104.817 204.298C105.164 205.914 105.895 207.723 105.972 209.378C106.01 210.725 104.894 211.341 105.087 212.688C105.471 215.189 107.357 217.729 108.935 219.577C109.512 220.077 110.321 219.269 109.859 218.73Z"
+        fill="#46A11B"
+      />
+      <path
+        d="M115.52 205.484C115.484 201.973 116.106 198.487 117.434 195.227C117.76 194.382 118.157 193.587 118.592 192.798C119.35 191.437 120.087 191.708 120.681 192.891C121.45 194.452 121.967 196.13 122.288 197.816C123.574 204.795 121.436 211.745 119.396 218.321C119.169 219.026 120.225 219.502 120.452 218.797C123.031 210.514 125.827 201.096 121.875 192.727C121.436 191.801 120.895 190.276 119.686 190.282C118.396 190.314 117.71 191.96 117.214 192.895C115.197 196.826 114.28 201.201 114.337 205.572C114.409 206.363 115.559 206.231 115.52 205.484Z"
+        fill="#46A11B"
+      />
+      <path
+        d="M119.746 199.454C119.339 205.555 118.216 211.507 116.488 217.34C116.265 218.037 117.382 218.33 117.604 217.633C119.4 211.698 120.478 205.614 120.903 199.44C120.94 198.693 119.819 198.718 119.746 199.454Z"
+        fill="#46A11B"
+      />
+      <path
+        d="M46.4718 120.256C45.3557 117.793 42.8541 116.061 41.2762 113.906C39.5444 111.52 38.0819 108.941 36.658 106.401C36.5425 106.671 36.4271 106.978 36.3116 107.248C44.0472 105.862 48.5115 113.483 50.0124 119.91C50.1664 120.641 51.2825 120.333 51.1285 119.602C49.4736 112.482 44.3936 104.669 36.0037 106.132C35.6189 106.209 35.5034 106.671 35.6573 106.978C37.0813 109.557 38.5053 112.136 40.2756 114.483C41.8535 116.638 44.3936 118.447 45.4712 120.833C45.779 121.526 46.7797 120.949 46.4718 120.256Z"
+        fill="#46A11B"
+      />
+      <path
+        d="M49.8197 114.059C50.397 108.017 56.1699 104.245 58.402 98.8958C58.1326 99.0113 57.8247 99.1267 57.5553 99.2422C60.1339 100.897 58.2096 106.901 57.4784 109.21C56.4008 112.597 54.6304 115.675 52.3598 118.369C51.898 118.947 52.7062 119.755 53.168 119.178C56.0159 115.829 58.0556 111.942 59.0948 107.671C59.749 104.977 60.9805 100.089 58.1326 98.2416C57.7862 98.0106 57.4014 98.28 57.2859 98.5879C54.9768 104.13 49.2809 107.747 48.6652 114.059C48.5882 114.79 49.7428 114.79 49.8197 114.059Z"
+        fill="#46A11B"
+      />
+      <path
+        d="M486.971 101.213C486.624 100.328 486.278 99.4426 485.931 98.5574C485.739 98.1341 485.585 97.6722 485.393 97.2489C485.162 96.941 485.162 96.5946 485.354 96.2483C485.701 96.5562 486.393 96.3637 486.355 95.8249C486.162 93.9007 485.97 91.9379 485.778 90.0136C485.739 89.5518 485.277 87.743 485.547 87.3966C486.74 85.7417 487.548 88.4742 487.663 88.8975C488.702 92.4382 488.664 96.5177 488.625 100.174C488.625 100.905 489.78 100.905 489.78 100.174C489.818 97.1719 489.665 94.2085 489.241 91.2451C488.972 89.3594 488.664 86.6269 486.817 85.5108C485.624 84.7796 484.623 85.5493 484.392 86.8193C484.161 88.0509 484.546 89.5133 484.661 90.7064C484.815 92.3997 485.008 94.0931 485.162 95.7864C485.508 95.6325 485.816 95.517 486.162 95.3631C485.508 94.7473 484.507 94.8628 484.123 95.7095C483.853 96.2868 484.084 96.9025 484.277 97.4798C484.738 98.8268 485.354 100.135 485.854 101.482C486.124 102.214 487.24 101.906 486.971 101.213Z"
+        fill="#46A11B"
+      />
+      <path
+        d="M490.158 95.9043C490.736 89.8621 496.508 86.0905 498.741 80.741C498.471 80.8565 498.163 80.9719 497.894 81.0874C500.472 82.7423 498.548 88.746 497.817 91.0551C496.739 94.4419 494.969 97.5207 492.698 100.215C492.236 100.792 493.045 101.6 493.506 101.023C496.354 97.6747 498.394 93.7876 499.433 89.5157C500.088 86.8217 501.319 81.9341 498.471 80.0868C498.125 79.8559 497.74 80.1253 497.624 80.4331C495.315 85.9751 489.619 89.5927 489.004 95.9043C488.927 96.6355 490.081 96.6355 490.158 95.9043Z"
+        fill="#46A11B"
+      />
+      <path
+        d="M192.178 243.063C194.602 240.6 198.374 243.909 201.183 243.755C202.53 243.678 203.762 243.178 204.993 242.755C206.648 242.216 208.226 242.024 209.958 242.178C216.808 242.755 223.466 243.255 230.355 242.793C231.087 242.755 231.087 241.6 230.355 241.639C226.622 241.87 222.928 241.947 219.195 241.793C215.423 241.639 211.497 240.715 207.764 240.984C206.263 241.1 204.878 241.6 203.454 242.062C201.376 242.716 199.798 242.601 197.797 241.87C195.603 241.061 193.14 240.407 191.331 242.255C190.831 242.793 191.639 243.601 192.178 243.063Z"
+        fill="#46A11B"
+      />
+      <path
+        d="M103.707 220.256C105.416 218.512 108.074 220.855 110.054 220.746C111.003 220.692 111.871 220.338 112.739 220.038C113.906 219.656 115.018 219.52 116.238 219.629C121.066 220.038 125.758 220.392 130.613 220.065C131.129 220.038 131.129 219.221 130.613 219.248C127.983 219.411 125.379 219.466 122.748 219.357C120.09 219.248 117.323 218.594 114.692 218.785C113.634 218.866 112.658 219.221 111.654 219.548C110.19 220.011 109.078 219.929 107.667 219.411C106.121 218.839 104.385 218.376 103.111 219.684C102.758 220.065 103.328 220.637 103.707 220.256Z"
+        fill="#46A11B"
+      />
+      <path
+        d="M119.479 252.415C122.173 249.49 126.907 249.298 129.754 252.069C129.793 251.761 129.831 251.453 129.87 251.145C127.869 252.107 125.829 252.53 123.635 252.415C122.904 252.376 122.904 253.531 123.635 253.569C126.06 253.685 128.292 253.223 130.486 252.145C130.832 251.992 130.871 251.491 130.601 251.222C127.291 248.028 121.788 248.181 118.671 251.568C118.17 252.145 118.979 252.954 119.479 252.415Z"
+        fill="#46A11B"
+      />
+      <path
+        d="M485.943 242.774C483.98 242.62 482.017 243.198 480.516 244.545C479.593 245.391 478.284 246.969 479.477 248.085C480.824 249.317 484.057 248.509 485.635 248.355C488.521 248.047 491.331 247.508 494.14 246.777C494.872 246.584 494.564 245.468 493.832 245.661C490.446 246.546 487.02 247.123 483.518 247.354C482.826 247.393 482.094 247.469 481.402 247.469C479.67 247.393 480.478 246.084 481.325 245.353C482.595 244.198 484.25 243.775 485.943 243.929C486.713 243.967 486.674 242.813 485.943 242.774Z"
+        fill="#46A11B"
+      />
+      <path
+        d="M67.2154 231.056C67.2923 230.748 67.5232 230.556 67.8311 230.556C68.1005 230.517 68.3699 230.479 68.6008 230.44C69.2166 230.363 69.7939 230.402 70.4097 230.479C71.6027 230.633 72.6803 231.056 73.7194 231.71C73.7579 231.364 73.7964 231.018 73.8734 230.671C72.4494 231.172 71.0254 231.287 69.5245 231.056C68.7933 230.941 68.4854 232.057 69.2166 232.172C70.91 232.442 72.5264 232.326 74.1812 231.787C74.6431 231.633 74.7585 231.018 74.3352 230.748C72.3339 229.478 69.7169 228.862 67.3693 229.517C66.0993 229.863 65.0987 231.826 66.9075 232.211C67.6387 232.326 67.9466 231.21 67.2154 231.056Z"
+        fill="#46A11B"
+      />
+      <path
+        d="M388.403 223.365C391.789 223.942 395.253 223.904 398.601 223.095C400.68 222.595 402.181 221.787 404.336 222.48C405.683 222.903 406.953 223.057 408.338 222.787C409.878 222.48 411.302 221.71 412.61 220.863C414.034 219.901 415.458 218.554 417.19 218.208C419.191 217.823 421 219.401 422.924 219.824C424.31 220.132 425.734 220.094 427.119 219.863C427.85 219.747 427.542 218.631 426.811 218.747C424.387 219.17 422.501 218.554 420.307 217.592C419.384 217.169 418.498 216.938 417.459 217.015C414.342 217.361 412.187 220.286 409.3 221.325C407.453 221.979 405.952 221.748 404.143 221.171C402.758 220.748 401.757 220.979 400.41 221.402C396.6 222.595 392.713 222.941 388.788 222.287C388.018 222.133 387.671 223.249 388.403 223.365Z"
+        fill="#46A11B"
+      />
+      <path
+        d="M509.403 221.115C512.789 221.692 516.253 221.654 519.601 220.845C521.68 220.345 523.181 219.537 525.336 220.23C526.683 220.653 527.953 220.807 529.338 220.537C530.878 220.23 532.302 219.46 533.61 218.613C535.034 217.651 536.458 216.304 538.19 215.958C540.191 215.573 542 217.151 543.924 217.574C545.31 217.882 546.734 217.844 548.119 217.613C548.85 217.497 548.542 216.381 547.811 216.497C545.387 216.92 543.501 216.304 541.307 215.342C540.384 214.919 539.498 214.688 538.459 214.765C535.342 215.111 533.187 218.036 530.3 219.075C528.453 219.729 526.952 219.498 525.143 218.921C523.758 218.498 522.757 218.729 521.41 219.152C517.6 220.345 513.713 220.691 509.788 220.037C509.018 219.883 508.671 220.999 509.403 221.115Z"
+        fill="#46A11B"
+      />
+      <path
+        d="M31.4027 255.115C34.7894 255.692 38.2531 255.654 41.6014 254.845C43.6796 254.345 45.1805 253.537 47.3357 254.23C48.6827 254.653 49.9527 254.807 51.3382 254.537C52.8776 254.23 54.3016 253.46 55.6101 252.613C57.0341 251.651 58.458 250.304 60.1899 249.958C62.1911 249.573 64 251.151 65.9242 251.574C67.3097 251.882 68.7337 251.844 70.1191 251.613C70.8504 251.497 70.5425 250.381 69.8113 250.497C67.3867 250.92 65.5009 250.304 63.3072 249.342C62.3836 248.919 61.4984 248.688 60.4593 248.765C57.342 249.111 55.1868 252.036 52.3004 253.075C50.4531 253.729 48.9521 253.498 47.1433 252.921C45.7578 252.498 44.7572 252.729 43.4102 253.152C39.6001 254.345 35.7131 254.691 31.7876 254.037C31.0179 253.883 30.6715 254.999 31.4027 255.115Z"
+        fill="#46A11B"
+      />
+      <g filter="url(#filter0_d_1536_39606)">
+        <path
+          d="M275.763 146.818C267.575 146.818 260.524 145.681 254.611 143.407C248.811 141.018 243.978 137.777 240.111 133.683C236.358 129.476 233.515 124.643 231.582 119.184C229.763 113.612 228.682 107.698 228.341 101.444C228.227 98.3733 228.114 94.9616 228 91.2089C228 87.3424 228 83.4759 228 79.6094C228.114 75.7429 228.227 72.2175 228.341 69.0334C228.569 62.7787 229.649 56.9221 231.582 51.4635C233.629 46.0049 236.586 41.2287 240.452 37.1347C244.319 33.0408 249.152 29.8566 254.952 27.5822C260.865 25.1941 267.802 24 275.763 24C283.723 24 290.603 25.1941 296.403 27.5822C302.203 29.8566 307.036 33.0408 310.902 37.1347C314.769 41.2287 317.669 46.0049 319.602 51.4635C321.649 56.9221 322.843 62.7787 323.184 69.0334C323.298 72.2175 323.355 75.7429 323.355 79.6094C323.468 83.4759 323.468 87.3424 323.355 91.2089C323.355 94.9616 323.298 98.3733 323.184 101.444C322.843 107.698 321.706 113.612 319.772 119.184C317.839 124.643 314.939 129.476 311.073 133.683C307.32 137.777 302.487 141.018 296.574 143.407C290.774 145.681 283.837 146.818 275.763 146.818ZM275.763 124.643C282.358 124.643 287.192 122.482 290.262 118.161C293.332 113.839 294.981 107.983 295.209 100.591C295.323 97.2929 295.379 93.8813 295.379 90.356C295.493 86.8306 295.493 83.3053 295.379 79.7799C295.379 76.2546 295.323 72.9567 295.209 69.8863C294.981 62.8356 293.332 57.0927 290.262 52.6576C287.192 48.2225 282.358 45.9481 275.763 45.8344C269.053 45.9481 264.163 48.2225 261.093 52.6576C258.136 57.0927 256.544 62.8356 256.316 69.8863C256.203 72.9567 256.089 76.2546 255.975 79.7799C255.975 83.3053 255.975 86.8306 255.975 90.356C256.089 93.8813 256.203 97.2929 256.316 100.591C256.544 107.983 258.193 113.839 261.263 118.161C264.334 122.482 269.167 124.643 275.763 124.643Z"
+          fill="#5BD424"
+        />
+      </g>
+      <g filter="url(#filter1_d_1536_39606)">
+        <path
+          d="M150.08 188.406C148.723 188.57 147.513 188.235 146.449 187.4C145.384 186.565 144.762 185.402 144.581 183.91L141.629 159.494L77.5368 167.243C76.1803 167.407 74.9699 167.072 73.9056 166.237C72.8413 165.402 72.2189 164.239 72.0385 162.747L70.0458 146.266C69.931 145.316 70.0115 144.274 70.2872 143.14C70.5629 142.005 70.9825 140.922 71.5459 139.891L121.273 50.8885C122.757 48.3693 125.127 46.9129 128.383 46.5193L154.223 43.395C155.58 43.231 156.79 43.5663 157.854 44.4011C158.919 45.2358 159.541 46.3992 159.722 47.8913L169.488 128.668L187.597 126.479C189.225 126.282 190.503 126.609 191.432 127.46C192.496 128.295 193.11 129.391 193.274 130.747L195.34 147.838C195.521 149.331 195.194 150.609 194.359 151.673C193.524 152.737 192.429 153.352 191.072 153.516L172.76 155.73L175.712 180.146C175.893 181.638 175.565 182.916 174.731 183.981C173.896 185.045 172.8 185.659 171.444 185.823L150.08 188.406ZM101.042 137.976L139.091 133.376L132.621 79.8636L101.042 137.976Z"
+          fill="#5BD424"
+        />
+      </g>
+      <g filter="url(#filter2_d_1536_39606)">
+        <path
+          d="M427.318 182.734C425.953 182.671 424.815 182.14 423.904 181.141C422.992 180.141 422.571 178.891 422.64 177.39L423.771 152.822L359.28 149.853C357.915 149.791 356.777 149.259 355.865 148.26C354.954 147.261 354.533 146.01 354.602 144.509L355.365 127.925C355.409 126.97 355.661 125.956 356.121 124.883C356.58 123.81 357.174 122.811 357.9 121.887L421.675 42.3451C423.556 40.1065 426.135 39.0625 429.41 39.2133L455.412 40.41C456.776 40.4729 457.915 41.004 458.826 42.0034C459.738 43.0028 460.159 44.2532 460.09 45.7545L456.349 127.034L474.57 127.872C476.208 127.948 477.414 128.482 478.189 129.475C479.101 130.475 479.525 131.657 479.462 133.022L478.671 150.219C478.601 151.721 478.067 152.927 477.068 153.839C476.068 154.75 474.886 155.174 473.521 155.112L455.095 154.263L453.965 178.831C453.895 180.333 453.361 181.539 452.362 182.451C451.362 183.362 450.18 183.786 448.815 183.724L427.318 182.734ZM387.306 124.882L425.591 126.644L428.07 72.7991L387.306 124.882Z"
+          fill="#5BD424"
+        />
+      </g>
+      <defs>
+        <filter
+          id="filter0_d_1536_39606"
+          x="204"
+          y="0"
+          width="143.44"
+          height="170.818"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset />
+          <feGaussianBlur stdDeviation="12" />
+          <feComposite in2="hardAlpha" operator="out" />
+          <feColorMatrix
+            type="matrix"
+            values="0 0 0 0 0.447059 0 0 0 0 0.921569 0 0 0 0 0.227451 0 0 0 0.2 0"
+          />
+          <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1536_39606" />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="effect1_dropShadow_1536_39606"
+            result="shape"
+          />
+        </filter>
+        <filter
+          id="filter1_d_1536_39606"
+          x="45.9952"
+          y="19.3545"
+          width="173.393"
+          height="193.092"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset />
+          <feGaussianBlur stdDeviation="12" />
+          <feComposite in2="hardAlpha" operator="out" />
+          <feColorMatrix
+            type="matrix"
+            values="0 0 0 0 0.447059 0 0 0 0 0.921569 0 0 0 0 0.227451 0 0 0 0.2 0"
+          />
+          <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1536_39606" />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="effect1_dropShadow_1536_39606"
+            result="shape"
+          />
+        </filter>
+        <filter
+          id="filter2_d_1536_39606"
+          x="330.595"
+          y="15.199"
+          width="172.874"
+          height="192.531"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset />
+          <feGaussianBlur stdDeviation="12" />
+          <feComposite in2="hardAlpha" operator="out" />
+          <feColorMatrix
+            type="matrix"
+            values="0 0 0 0 0.447059 0 0 0 0 0.921569 0 0 0 0 0.227451 0 0 0 0.2 0"
+          />
+          <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1536_39606" />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="effect1_dropShadow_1536_39606"
+            result="shape"
+          />
+        </filter>
+      </defs>
+    </svg>
+  )
+}
+
+export default NonFound
diff --git a/client/src/assets/Shared/SearchingPeople.js b/client/src/assets/Shared/SearchingPeople.jsx
similarity index 99%
rename from client/src/assets/Shared/SearchingPeople.js
rename to client/src/assets/Shared/SearchingPeople.jsx
index d46c2be98..dc4ca01f0 100644
--- a/client/src/assets/Shared/SearchingPeople.js
+++ b/client/src/assets/Shared/SearchingPeople.jsx
@@ -1,4 +1,4 @@
-function NonFound() {
+function SearchingPeople() {
   return (
     <svg viewBox="0 0 706 475" fill="none" xmlns="http://www.w3.org/2000/svg">
       <g filter="url(#filter0_d_220_488)">
@@ -663,4 +663,4 @@ function NonFound() {
   )
 }
 
-export default NonFound
+export default SearchingPeople
diff --git a/client/src/components/Forms/ConfirmEmailForm/ConfirmEmail.js b/client/src/components/Forms/ConfirmEmailForm/ConfirmEmail.js
index 0d270e60d..8ee74a89c 100644
--- a/client/src/components/Forms/ConfirmEmailForm/ConfirmEmail.js
+++ b/client/src/components/Forms/ConfirmEmailForm/ConfirmEmail.js
@@ -1,19 +1,37 @@
+import { useNavigate } from 'react-router-dom'
+
+import ArrowNavigateBack from '../../../assets/Arrows/ArrowNavigateBack'
 import UserBehindPC from '../../../assets/Shared/UserBehindPC'
+import ROUTES from '../../../constants/routes'
+import CustomButton from '../../../shared/components/CustomButton/CustomButton'
 
 import { Container, ImgContainer, Text, TextContainer } from './ConfirmEmail.styles'
 
 function ConfirmEmail() {
+  const navigate = useNavigate()
+
   return (
     <Container>
-      <TextContainer>
-        <Text>A verification link has been sent to you</Text>
-        <Text fontSize="30px" fontWeight="400" margin="0">
-          Please check your email
-        </Text>
-      </TextContainer>
       <ImgContainer>
         <UserBehindPC />
       </ImgContainer>
+      <TextContainer>
+        <Text>Check your email</Text>
+        <Text fontSize="16px" fontWeight="400" color="#8F9094">
+          We sent you a link to reset your password
+        </Text>
+        <CustomButton
+          width="100%"
+          iconPosition="left"
+          background="transparent"
+          fontSize="16px"
+          onClick={() => navigate(ROUTES.login)}
+        >
+          <Text fontSize="16px" fontWeight="400" color="#5BD424">
+            Back to Log in
+          </Text>
+        </CustomButton>
+      </TextContainer>
     </Container>
   )
 }
diff --git a/client/src/components/Forms/ConfirmEmailForm/ConfirmEmail.styles.js b/client/src/components/Forms/ConfirmEmailForm/ConfirmEmail.styles.js
index a6bc7bc88..14f7be71c 100644
--- a/client/src/components/Forms/ConfirmEmailForm/ConfirmEmail.styles.js
+++ b/client/src/components/Forms/ConfirmEmailForm/ConfirmEmail.styles.js
@@ -4,7 +4,7 @@ import { BLACK, WHITE } from '../../../constants/colors'
 
 export const Container = styled.div`
   width: 100%;
-  height: 100vh;
+  min-height: calc(100dvh - 88px);
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -17,45 +17,21 @@ export const TextContainer = styled.div`
   justify-content: center;
   flex-direction: column;
   align-items: center;
-  margin-bottom: 45px;
+  gap: 8px;
+  padding: 0 15px;
 `
 
 export const Text = styled.h3`
-  font-weight: ${(props) => props.fontWeight || '700'};
-  font-size: ${(props) => props.fontSize || '35px'};
-  margin: ${(props) => props.margin || '0 0 20px 0'};
-  color: ${WHITE.main};
+  font-weight: ${(props) => props.fontWeight || '500'};
+  font-size: ${(props) => props.fontSize || '24px'};
+  margin: ${(props) => props.margin || '0'};
+  color: ${(props) => props.color || WHITE.main};
   text-align: center;
-
-  @media screen and (min-width: 620px) and (max-width: 840px) {
-    font-size: calc(${(props) => props.fontSize || '35px'} - 7px);
-  }
-
-  @media screen and (min-width: 450px) and (max-width: 620px) {
-    font-size: calc(${(props) => props.fontSize || '35px'} - 14px);
-  }
-
-  @media screen and (min-width: 0px) and (max-width: 450px) {
-    font-size: calc(${(props) => props.fontSize || '35px'} - 18px);
-  }
 `
 
 export const ImgContainer = styled.div`
-  width: 621px;
-  height: 508px;
-
-  @media screen and (min-width: 620px) and (max-width: 840px) {
-    width: 521px;
-    height: 408px;
-  }
-
-  @media screen and (min-width: 450px) and (max-width: 620px) {
-    width: 421px;
-    height: 308px;
-  }
+  max-width: 621px;
+  width: 100%;
 
-  @media screen and (min-width: 0px) and (max-width: 450px) {
-    width: 321px;
-    height: 208px;
-  }
+  height: auto;
 `
diff --git a/client/src/components/Forms/NewPasswordsForm/NewPasswordsForm.js b/client/src/components/Forms/NewPasswordsForm/NewPasswordsForm.js
index 93ae42439..a15abd3bf 100644
--- a/client/src/components/Forms/NewPasswordsForm/NewPasswordsForm.js
+++ b/client/src/components/Forms/NewPasswordsForm/NewPasswordsForm.js
@@ -1,127 +1,120 @@
 // * Modules
-import React, { useEffect, useState } from 'react'
-import { useNavigate, useParams } from 'react-router-dom'
-import Visibility from '@mui/icons-material/Visibility'
-import VisibilityOff from '@mui/icons-material/VisibilityOff'
-import AppBar from '@mui/material/AppBar'
-import Box from '@mui/material/Box'
-import Snackbar from '@mui/material/Snackbar'
+import React, { useState } from 'react'
+import { ThreeDots } from 'react-loader-spinner'
+import { useParams } from 'react-router-dom'
+import VisibilityOff from '@mui/icons-material/VisibilityOffOutlined'
+import Visibility from '@mui/icons-material/VisibilityOutlined'
+import { Formik } from 'formik'
+import { isEmpty } from 'lodash'
 
-// * Api
-import resetPassword from '../../../api/endpoints/reset'
+import { useUpdatePassword } from '../../../api/hooks/auth/useUpdatePassword'
 // * Assets
-import SiteLogo from '../../../assets/Platform/TeameightsLogo'
-import ROUTES from '../../../constants/routes'
+import CustomButton from '../../../shared/components/CustomButton/CustomButton'
+import FlexWrapper from '../../../shared/components/FlexWrapper/FlexWrapper'
+import CustomInput from '../../../shared/components/Formik/CustomInput/CustomInput'
+import {
+  FormWrapper,
+  RecoverText,
+  RecoverTitle,
+} from '../RecoverPasswordForm/RecoverPasswordForm.styles'
 
 import {
-  AlertBox,
   Container,
-  InputContainer,
   NewPasswordBox,
-  NewPasswordButton,
-  NewPasswordContainer,
-  NewPasswordInput,
   PasswordContainer,
+  PasswordsContainer,
   ShowPass,
-  SubTitleText,
-  TextContainer,
-  TitleText,
 } from './NewPasswordsForm.styles'
+import newPasswordValidation from './NewPasswordsValidation'
 
 function NewPassword() {
-  const navigate = useNavigate()
-
-  const Alert = React.forwardRef(function Alert(props, ref) {
-    return <AlertBox elevation={7} ref={ref} variant="filled" {...props} />
-  })
-
-  let { id, token } = useParams()
-  const [password, setPassword] = useState('')
-  const [repeatPassword, setRepeatPassword] = useState('')
+  let { id: email, token } = useParams()
+  const { mutate: updateUserPassword, isLoading: isUpdating } = useUpdatePassword()
   const [showPassword, setShowPassword] = useState(false)
-  const [open, setOpen] = useState(false)
-  const [error, setError] = useState('')
-
-  const handleReset = async () => {
-    const error = await resetPassword.updatePassword(id, token, password, repeatPassword)
-
-    if (!error) {
-      navigate(ROUTES.login, { replace: true })
-    } else {
-      setOpen(true)
-      setError(error)
-    }
-  }
-
-  const handleClose = (event, reason) => {
-    if (reason === 'clickaway') {
-      return
-    }
-    setOpen(false)
-  }
-
-  useEffect(() => {}, [error])
 
   return (
     <Container>
-      <Box sx={{ flexGrow: 1 }}>
-        <AppBar position="static" elevation={0}></AppBar>
-      </Box>
-      {error && (
-        <Snackbar
-          open={open}
-          autoHideDuration={3000}
-          onClose={handleClose}
-          anchorOrigin={{
-            vertical: 'top',
-            horizontal: 'right',
+      <NewPasswordBox>
+        <FlexWrapper gap="8px" direction="column">
+          <RecoverTitle>Recover Password</RecoverTitle>
+          <RecoverText>
+            Enter a new password and confirm it by re-entering it in the appropriate fields
+          </RecoverText>
+        </FlexWrapper>
+        <Formik
+          initialValues={{
+            email: email,
+            token: token,
+            password: '',
+            confirmPassword: '',
           }}
+          validationSchema={newPasswordValidation}
+          onSubmit={({ email, token, password }) => updateUserPassword({ email, token, password })}
         >
-          <Alert onClose={handleClose} severity="error" sx={{ width: '100%' }}>
-            {error}
-          </Alert>
-        </Snackbar>
-      )}
-      <NewPasswordContainer>
-        <NewPasswordBox>
-          <TextContainer>
-            <TitleText margin="0 0 24px 0">Recover Password</TitleText>
-          </TextContainer>
-          <TextContainer>
-            <SubTitleText>
-              Create new, <strong> strong </strong> password that you don't use for the other
-              websites
-            </SubTitleText>
-          </TextContainer>
-          <InputContainer>
-            <PasswordContainer>
-              <NewPasswordInput
-                placeholder="PASSWORD"
-                type={showPassword ? 'text' : 'password'}
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                required
-              />
-              <ShowPass onClick={(e) => setShowPassword(!showPassword)}>
-                {showPassword ? <Visibility /> : <VisibilityOff />}
-              </ShowPass>
-            </PasswordContainer>
-            <PasswordContainer>
-              <NewPasswordInput
-                placeholder="REPEAT PASSWORD"
-                type={showPassword ? 'text' : 'password'}
-                value={repeatPassword}
-                onChange={(e) => setRepeatPassword(e.target.value)}
-                required
-              />
-              <ShowPass onClick={(e) => setShowPassword(!showPassword)}>
-                {showPassword ? <Visibility /> : <VisibilityOff />}
-              </ShowPass>
-            </PasswordContainer>
-            <NewPasswordButton onClick={handleReset}>RESET PASSWORD</NewPasswordButton>
-          </InputContainer>
-        </NewPasswordBox>
-      </NewPasswordContainer>
+          {({ values, errors }) => (
+            <FormWrapper>
+              <PasswordsContainer>
+                <PasswordContainer>
+                  <CustomInput
+                    label="Create Password"
+                    width="100%"
+                    placeholder="Create Password"
+                    name="password"
+                    type={showPassword ? 'text' : 'password'}
+                    withIcon={false}
+                  />
+                  <ShowPass onClick={() => setShowPassword(!showPassword)}>
+                    {showPassword ? (
+                      <Visibility sx={{ color: 'white' }} />
+                    ) : (
+                      <VisibilityOff sx={{ color: 'white' }} />
+                    )}
+                  </ShowPass>
+                </PasswordContainer>
+                <PasswordContainer>
+                  <CustomInput
+                    label="Confirm Password"
+                    inputValue={values.confirmPassword}
+                    width="100%"
+                    placeholder="Confirm Password"
+                    name="confirmPassword"
+                    type={showPassword ? 'text' : 'password'}
+                    withIcon={false}
+                  />
+                  <ShowPass onClick={() => setShowPassword(!showPassword)}>
+                    {showPassword ? (
+                      <Visibility sx={{ color: 'white' }} />
+                    ) : (
+                      <VisibilityOff sx={{ color: 'white' }} />
+                    )}
+                  </ShowPass>
+                </PasswordContainer>
+              </PasswordsContainer>
+              <CustomButton
+                width="100%"
+                fontSize="16px"
+                type="onSubmit"
+                disabled={!isEmpty(errors)}
+              >
+                {isUpdating ? (
+                  <ThreeDots
+                    height="24"
+                    width="24"
+                    radius="9"
+                    color="white"
+                    ariaLabel="three-dots-loading"
+                    wrapperStyle={{}}
+                    wrapperClassName=""
+                    visible={true}
+                  />
+                ) : (
+                  '                Save'
+                )}
+              </CustomButton>
+            </FormWrapper>
+          )}
+        </Formik>
+      </NewPasswordBox>
     </Container>
   )
 }
diff --git a/client/src/components/Forms/NewPasswordsForm/NewPasswordsForm.styles.js b/client/src/components/Forms/NewPasswordsForm/NewPasswordsForm.styles.js
index e7b9e0f73..d767887b2 100644
--- a/client/src/components/Forms/NewPasswordsForm/NewPasswordsForm.styles.js
+++ b/client/src/components/Forms/NewPasswordsForm/NewPasswordsForm.styles.js
@@ -1,210 +1,46 @@
-import MuiAlert from '@mui/material/Alert'
 import IconButton from '@mui/material/IconButton'
-import Toolbar from '@mui/material/Toolbar'
+import { Form } from 'formik'
 import styled from 'styled-components'
 
-import { device } from '../../../constants/breakpoints'
 import { BLACK, GREY, LIME, WHITE } from '../../../constants/colors'
 
 export const Container = styled.div`
   display: flex;
-  flex-direction: column;
-`
-
-export const NewPasswordContainer = styled.div`
+  min-height: calc(100dvh - 88px);
   width: 100%;
-  height: 91.4vh;
-  display: flex;
+  padding: 48px 24px;
+
   justify-content: center;
   align-items: center;
-  background: ${LIME.background};
 `
 
 export const NewPasswordBox = styled.div`
+  max-width: 370px;
+  width: 100%;
+  min-height: 337px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  max-width: 520px;
-  width: 100%;
-  box-shadow: 0px 0px 4px 3px rgba(0, 0, 0, 0.15);
-  padding: 40px 23px;
-  border-radius: 24px;
-  background: ${WHITE.main};
-
-  @media ${device.tablet} {
-    max-width: 515px;
-  }
-
-  @media ${device.mobileL} {
-    max-width: 325px;
-    padding: 50px 20px;
-  }
-
-  @media ${device.mobileM} {
-    max-width: 290px;
-  }
+  gap: 48px;
 `
 
-export const TextContainer = styled.div`
-  display: flex;
-  justify-content: flex-start;
-  width: 100%;
-`
-
-export const TitleText = styled.h3`
-  font-weight: 700;
-  font-size: 30px;
-  color: ${BLACK.main};
-  margin: ${(props) => props.margin || '0'};
-
-  @media ${device.tablet} {
-    font-size: 28px;
-  }
-
-  @media ${device.mobileL} {
-    font-size: 22px;
-  }
-
-  @media ${device.mobileM} {
-    font-size: 20px;
-  }
-`
-
-export const SubTitleText = styled.h4`
-  font-weight: 400;
-  font-size: 22px;
-  color: ${GREY.text};
-  margin: 0;
-
-  @media ${device.tablet} {
-    font-size: 21px;
-  }
-
-  @media ${device.mobileL} {
-    font-size: 19px;
-  }
-
-  @media ${device.mobileM} {
-    font-size: 17px;
-  }
-`
-
-export const NewPasswordInput = styled.input`
-  outline: none;
-  width: 98.5%;
-  height: 77px;
-  text-align: center;
-  border: 1px solid #000000;
-  border-radius: 3px;
-  background: ${GREY.background};
-  font-weight: 600;
-  font-size: 22px;
-  color: ${BLACK.main};
-  margin-bottom: 34px;
-
-  &::placeholder {
-    font-weight: 600;
-    font-size: 23px;
-
-    @media ${device.mobileL} {
-      font-size: 19px;
-    }
-
-    @media ${device.mobileM} {
-      font-size: 18px;
-    }
-  }
-
-  @media ${device.tablet} {
-    height: 70px;
-  }
-
-  @media ${device.mobileL} {
-    font-size: 18px;
-    height: 67px;
-  }
-
-  @media ${device.mobileM} {
-    font-size: 16px;
-    height: 64px;
-  }
-`
-
-export const NewPasswordButton = styled.button`
-  font-weight: 700;
-  font-size: 23px;
-  border: none;
+export const PasswordContainer = styled.div`
+  position: relative;
   width: 100%;
-  height: 77px;
-  background: ${BLACK.main};
-  color: ${WHITE.main};
-  text-align: center;
-  border: 1px solid ${BLACK.main};
-  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-  border-radius: 3px;
-
-  &:hover {
-    border: none;
-    cursor: pointer;
-    transition: 0.4s;
-    color: ${BLACK.main};
-    background: ${LIME.main};
-  }
-
-  @media ${device.tablet} {
-    height: 70px;
-  }
-
-  @media ${device.mobileL} {
-    font-size: 18px;
-    height: 67px;
-  }
-
-  @media ${device.mobileM} {
-    font-size: 16px;
-    height: 64px;
-  }
 `
-
-export const InputContainer = styled.div`
+export const PasswordsContainer = styled.div`
   display: flex;
   flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: 95%;
-  margin: 44px 0 0 0px;
-`
-
-export const PasswordContainer = styled.div`
-  position: relative;
+  gap: 36px;
   width: 100%;
 `
 
 export const ShowPass = styled(IconButton)`
-  right: 15px;
-  top: 22px;
   && {
     position: absolute;
-  }
-
-  @media ${device.mobileL} {
     right: 0;
-    top: 14px;
-  }
-
-  @media ${device.mobileM} {
-    right: 0;
-    top: 13px;
-  }
-`
-
-export const AlertBox = styled(MuiAlert)`
-  && {
-    background: ${BLACK.main};
-  }
-
-  @media ${device.tablet} {
-    max-width: 250px;
+    top: 0;
+    transform: translate(5px, 20px);
   }
 `
diff --git a/client/src/components/Forms/NewPasswordsForm/NewPasswordsValidation.js b/client/src/components/Forms/NewPasswordsForm/NewPasswordsValidation.js
new file mode 100644
index 000000000..28393a8f7
--- /dev/null
+++ b/client/src/components/Forms/NewPasswordsForm/NewPasswordsValidation.js
@@ -0,0 +1,27 @@
+import * as yup from 'yup'
+
+const newPasswordValidation = yup.object().shape({
+  password: yup
+    .string()
+    .required('Password is required')
+    .min(8, 'Password must be at least 8 characters')
+    .test('uppercase', 'Password must contain at least one uppercase letter', (value) => {
+      return /[A-Z]/.test(value)
+    })
+    .test('lowercase', 'Password must contain at least one lowercase letter', (value) => {
+      return /[a-z]/.test(value)
+    })
+    .test('digit', 'Password must contain at least one digit', (value) => {
+      return /\d/.test(value)
+    })
+    .test('specialChar', 'Password must contain at least one special character', (value) => {
+      return /[@$!%*?&]/.test(value)
+    }),
+
+  confirmPassword: yup
+    .string()
+    .required('Confirm is required')
+    .oneOf([yup.ref('password'), null], 'Passwords must match'),
+})
+
+export default newPasswordValidation
diff --git a/client/src/components/Forms/Page404Form/Page404Form.js b/client/src/components/Forms/Page404Form/Page404Form.js
index 6057b1719..64cd2890f 100644
--- a/client/src/components/Forms/Page404Form/Page404Form.js
+++ b/client/src/components/Forms/Page404Form/Page404Form.js
@@ -1,40 +1,43 @@
 // * Modules
 import { useNavigate } from 'react-router-dom'
 
+import LongArrowLeft from '../../../assets/Arrows/LongArrowLeft'
 // * Assets
-import Page404 from '../../../assets/Shared/SearchingPeople'
+import Page404 from '../../../assets/Shared/NonFound'
+import FlexWrapper from '../../../shared/components/FlexWrapper/FlexWrapper'
 
 // * Styles
-import {
-  Button,
-  Container,
-  InfoContainer,
-  LeftContainer,
-  RightContainer,
-  Text,
-} from './Page404Form.styles'
+import { Button, Container, Text } from './Page404Form.styles'
+import { ParticlesContainer } from './ParticlesContainer'
 
-const Page404Form = ({ paddingLeft = '0', findText = `Couldn't find the requested page.` }) => {
+const Page404Form = ({
+  paddingLeft = '0',
+  findText = `Please check the URL or contact us for assistance`,
+}) => {
   const navigate = useNavigate()
 
   return (
-    <Container paddingLeft={paddingLeft}>
-      <InfoContainer>
-        <LeftContainer>
-          <Text fontWeight="600" fontSize="7rem" textAlign="left">
-            404
-          </Text>
-          <Text>Oops... it looks like you're lost.</Text>
-          <Text fontWeight="400" fontSize="1rem">
-            {findText}
-          </Text>
-          <Button onClick={() => navigate(-1, { replace: true })}>Return Home</Button>
-        </LeftContainer>
-        <RightContainer>
-          <Page404 width="100%" height="auto" />
-        </RightContainer>
-      </InfoContainer>
-    </Container>
+    <>
+      <Container paddingLeft={paddingLeft}>
+        <FlexWrapper maxWidth="570px" width="100%" padding="0 24px">
+          <Page404 />
+        </FlexWrapper>
+        <FlexWrapper direction="column" justify="center" align="center" gap="24px">
+          <FlexWrapper direction="column" justify="center" align="center" gap="8px">
+            <Text>Oops... it looks like you're lost.</Text>
+            <Text fontWeight="400" fontSize="1rem">
+              {findText}
+            </Text>
+          </FlexWrapper>
+
+          <Button onClick={() => navigate('/', { replace: true })}>
+            <LongArrowLeft />
+            Return Home
+          </Button>
+        </FlexWrapper>
+      </Container>
+      <ParticlesContainer />
+    </>
   )
 }
 
diff --git a/client/src/components/Forms/Page404Form/Page404Form.styles.js b/client/src/components/Forms/Page404Form/Page404Form.styles.js
index fbf3e25fd..afc9676f3 100644
--- a/client/src/components/Forms/Page404Form/Page404Form.styles.js
+++ b/client/src/components/Forms/Page404Form/Page404Form.styles.js
@@ -4,45 +4,16 @@ export const Container = styled.div`
   width: 100%;
   min-height: 100vh;
   display: flex;
-  background: #26292b;
   align-items: center;
   justify-content: center;
   padding-left: ${(props) => props.paddingLeft || '0'};
+  flex-direction: column;
+  gap: 48px;
 
   @media screen and (max-width: 768px) {
     padding-left: 0;
   }
 `
-export const InfoContainer = styled.div`
-  display: flex;
-  flex-direction: row;
-  width: 100%;
-  height: 100%;
-  padding: 5rem 0;
-  align-items: center;
-  justify-content: center;
-  gap: 2rem;
-
-  @media (max-width: 995px) {
-    flex-direction: column;
-    padding: 0;
-  }
-`
-export const LeftContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  gap: 1rem;
-`
-export const RightContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  width: 45%;
-  @media (max-width: 995px) {
-    width: 75%;
-  }
-`
 
 export const Text = styled.h1`
   font-weight: ${(props) => props.fontWeight || '500'};
@@ -54,20 +25,20 @@ export const Text = styled.h1`
 `
 
 export const Button = styled.button`
-  width: 14rem;
-  height: 3.5rem;
-  background: #5d9d0b;
-  box-shadow: 0px 0px 50px rgba(93, 157, 11, 0.15);
-  border-radius: 5px;
+  width: 100%;
+  max-width: 160px;
+  height: 48px;
+  padding: 0px 16px;
+  background: #46a11b;
+  border-radius: 10px;
   color: white;
-  font-weight: 700;
-  font-size: 1rem;
-  border-style: none;
+  font-weight: 400;
+  font-size: 16px;
+  border: none;
   cursor: pointer;
   transition: all 0.2s linear;
-  margin-top: 1rem;
-
-  :hover {
-    transform: scale(1.1);
-  }
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
 `
diff --git a/client/src/components/Forms/Page404Form/ParticlesContainer.jsx b/client/src/components/Forms/Page404Form/ParticlesContainer.jsx
new file mode 100644
index 000000000..db79f4fd4
--- /dev/null
+++ b/client/src/components/Forms/Page404Form/ParticlesContainer.jsx
@@ -0,0 +1,154 @@
+import React, { useCallback, useMemo } from 'react'
+import { Particles } from 'react-particles'
+import { loadFull } from 'tsparticles'
+
+export function ParticlesContainer() {
+  const particlesInit = useCallback(async (engine) => {
+    // you can initiate the tsParticles instance (engine) here, adding custom shapes or presets
+    // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
+    // starting from v2 you can add only the features you need reducing the bundle size
+    await loadFull(engine)
+  }, [])
+
+  const particlesLoaded = useCallback(async (container) => {}, [])
+
+  // using useMemo is not mandatory, but it's recommended since this value can be memoized if static
+  const options = useMemo(() => {
+    // using an empty options object will load the default options, which are static particles with no background and 3px radius, opacity 100%, white color
+    // all options can be found here: https://particles.js.org/docs/interfaces/Options_Interfaces_IOptions.IOptions.html
+    return {
+      fullScreen: {
+        enable: true,
+        zIndex: -1,
+      },
+      name: 'Among Us',
+      particles: {
+        groups: {
+          z5000: {
+            number: {
+              value: 70,
+            },
+            zIndex: {
+              value: 50,
+            },
+          },
+          z7500: {
+            number: {
+              value: 30,
+            },
+            zIndex: {
+              value: 75,
+            },
+          },
+          z2500: {
+            number: {
+              value: 50,
+            },
+            zIndex: {
+              value: 25,
+            },
+          },
+          z1000: {
+            number: {
+              value: 40,
+            },
+            zIndex: {
+              value: 10,
+            },
+          },
+        },
+        number: {
+          value: 200,
+        },
+        color: {
+          value: '#fff',
+          animation: {
+            enable: false,
+            speed: 20,
+            sync: true,
+          },
+        },
+        shape: {
+          type: 'circle',
+        },
+        opacity: {
+          value: 1,
+        },
+        size: {
+          value: 3,
+        },
+        move: {
+          angle: {
+            value: 10,
+            offset: 0,
+          },
+          enable: true,
+          speed: 5,
+          direction: 'right',
+        },
+        zIndex: {
+          value: 5,
+          opacityRate: 0.5,
+        },
+      },
+      background: {
+        color: '#26292B',
+      },
+      emitters: {
+        position: {
+          y: 55,
+          x: -5,
+        },
+        rate: {
+          delay: 7,
+          quantity: 1,
+        },
+        size: {
+          width: 0,
+          height: 0,
+        },
+        particles: {
+          shape: {
+            type: 'images',
+            options: {
+              images: {
+                src: 'https://particles.js.org/images/cyan_amongus.png',
+                width: 500,
+                height: 634,
+              },
+            },
+          },
+          size: {
+            value: 70,
+          },
+          move: {
+            speed: 12,
+            outModes: {
+              default: 'none',
+              right: 'destroy',
+            },
+            straight: true,
+          },
+          zIndex: {
+            value: 0,
+          },
+          rotate: {
+            value: {
+              min: 0,
+              max: 360,
+            },
+            animation: {
+              enable: true,
+              speed: 10,
+              sync: true,
+            },
+          },
+        },
+      },
+    }
+  }, [])
+
+  return (
+    <Particles id="tsparticles" init={particlesInit} loaded={particlesLoaded} options={options} />
+  )
+}
diff --git a/client/src/components/Forms/RecoverConfirmationForm/RecoverConfirmationForm.js b/client/src/components/Forms/RecoverConfirmationForm/RecoverConfirmationForm.js
deleted file mode 100644
index 037eea94c..000000000
--- a/client/src/components/Forms/RecoverConfirmationForm/RecoverConfirmationForm.js
+++ /dev/null
@@ -1,55 +0,0 @@
-// * Modules
-import { useLocation, useNavigate } from 'react-router-dom'
-import AppBar from '@mui/material/AppBar'
-import Box from '@mui/material/Box'
-
-import ArrowLeftReset from '../../../assets/Arrows/ArrowLeftReset'
-// * Assets
-import SiteLogo from '../../../assets/Platform/TeameightsLogo'
-import ROUTES from '../../../constants/routes'
-
-import {
-  BackButton,
-  ButtonContainer,
-  Container,
-  MiddleContainer,
-  MiddleText,
-  RecoverBox,
-  RecoverContainer,
-  TextContainer,
-  TitleText,
-} from './RecoverConfirmationForm.styles'
-
-function RecoverPassword() {
-  const navigate = useNavigate()
-  const location = useLocation()
-
-  return (
-    <Container>
-      <Box sx={{ flexGrow: 1 }}>
-        <AppBar position="static" elevation={0}></AppBar>
-      </Box>
-      <RecoverContainer>
-        <RecoverBox>
-          <TextContainer>
-            <TitleText margin="0 0 24px 0">Recover Password</TitleText>
-          </TextContainer>
-          <MiddleContainer>
-            <MiddleText>
-              If account “{location.state.email}” exists, an email will be sent with futher
-              instructions
-            </MiddleText>
-          </MiddleContainer>
-          <ButtonContainer>
-            <ArrowLeftReset />
-            <BackButton onClick={() => navigate(ROUTES.login, { replace: true })}>
-              BACK TO SIGN IN
-            </BackButton>
-          </ButtonContainer>
-        </RecoverBox>
-      </RecoverContainer>
-    </Container>
-  )
-}
-
-export default RecoverPassword
diff --git a/client/src/components/Forms/RecoverConfirmationForm/RecoverConfirmationForm.styles.js b/client/src/components/Forms/RecoverConfirmationForm/RecoverConfirmationForm.styles.js
deleted file mode 100644
index 4e27b90f6..000000000
--- a/client/src/components/Forms/RecoverConfirmationForm/RecoverConfirmationForm.styles.js
+++ /dev/null
@@ -1,142 +0,0 @@
-import Toolbar from '@mui/material/Toolbar'
-import styled from 'styled-components'
-
-import { device } from '../../../constants/breakpoints'
-import { BLACK, GREEN, GREY, LIME, WHITE } from '../../../constants/colors'
-
-export const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-`
-
-export const RecoverContainer = styled.div`
-  width: 100%;
-  height: 91.4vh;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background: ${LIME.background};
-`
-
-export const RecoverBox = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  max-width: 520px;
-  width: 100%;
-  box-shadow: 0px 0px 4px 3px rgba(0, 0, 0, 0.15);
-  padding: 40px 23px;
-  border-radius: 24px;
-  background: ${WHITE.main};
-
-  @media ${device.tablet} {
-    max-width: 515px;
-  }
-
-  @media ${device.mobileL} {
-    max-width: 325px;
-    padding: 50px 20px;
-  }
-
-  @media ${device.mobileM} {
-    max-width: 290px;
-  }
-`
-
-export const TextContainer = styled.div`
-  display: flex;
-  justify-content: flex-start;
-  width: 100%;
-`
-
-export const TitleText = styled.h3`
-  font-weight: 700;
-  font-size: 30px;
-  color: ${BLACK.main};
-  margin: ${(props) => props.margin || '0'};
-
-  @media ${device.tablet} {
-    font-size: 28px;
-  }
-
-  @media ${device.mobileL} {
-    font-size: 22px;
-  }
-
-  @media ${device.mobileM} {
-    font-size: 20px;
-  }
-`
-
-export const MiddleContainer = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin: 25px 0 45px 0;
-  width: 420px;
-  height: 139px;
-  padding: 1px 20px;
-  background: rgba(123, 233, 128, 0.51);
-  border: 3px solid ${GREEN.border};
-  border-radius: 20px;
-
-  @media ${device.tablet} {
-    max-width: 380px;
-  }
-
-  @media ${device.mobileL} {
-    max-width: 260px;
-    padding: 1px 14px;
-    margin: 15px 0 25px 0;
-  }
-`
-
-export const MiddleText = styled.h4`
-  font-weight: 500;
-  font-size: 20px;
-  line-height: 24px;
-  text-align: start;
-  color: ${GREEN.text};
-
-  @media ${device.tablet} {
-    font-size: 19px;
-  }
-
-  @media ${device.mobileL} {
-    font-size: 18px;
-  }
-
-  @media ${device.mobileM} {
-    font-size: 17px;
-  }
-`
-
-export const BackButton = styled.button`
-  font-weight: 700;
-  font-size: 28px;
-  color: ${BLACK.main};
-  background: none;
-  border: none;
-
-  &:hover {
-    cursor: pointer;
-    transition: 0.4s;
-    color: ${LIME.main};
-  }
-
-  @media ${device.mobileL} {
-    font-size: 18px;
-  }
-
-  @media ${device.mobileM} {
-    font-size: 17px;
-  }
-`
-
-export const ButtonContainer = styled.div`
-  display: flex;
-  gap: 34px;
-  align-items: center;
-  margin-top: 20px;
-`
diff --git a/client/src/components/Forms/RecoverPasswordForm/RecoverPasswordForm.js b/client/src/components/Forms/RecoverPasswordForm/RecoverPasswordForm.js
index fe0e7ff50..5a2b65f92 100644
--- a/client/src/components/Forms/RecoverPasswordForm/RecoverPasswordForm.js
+++ b/client/src/components/Forms/RecoverPasswordForm/RecoverPasswordForm.js
@@ -1,101 +1,95 @@
 // * Modules
-import { useState } from 'react'
-import { useNavigate, useParams } from 'react-router-dom'
-import AppBar from '@mui/material/AppBar'
-import Box from '@mui/material/Box'
-import Snackbar from '@mui/material/Snackbar'
+import { ThreeDots } from 'react-loader-spinner'
+import { useNavigate } from 'react-router-dom'
+import { Formik } from 'formik'
+import { isEmpty } from 'lodash'
 
-// * Api
-import resetPassword from '../../../api/endpoints/reset'
-import ArrowLeftReset from '../../../assets/Arrows/ArrowLeftReset'
+import { useResetPasssword } from '../../../api/hooks/auth/useResetPassword'
 // * Assets
-import SiteLogo from '../../../assets/Platform/TeameightsLogo'
+import ArrowNavigateBack from '../../../assets/Arrows/ArrowNavigateBack'
 import ROUTES from '../../../constants/routes'
-import Alert from '../../RegistrationPipeline/components/Alert/Alert'
+import CustomButton from '../../../shared/components/CustomButton/CustomButton'
+import FlexWrapper from '../../../shared/components/FlexWrapper/FlexWrapper'
+import CustomInput from '../../../shared/components/Formik/CustomInput/CustomInput'
 
 import {
-  BackButton,
-  ButtonContainer,
+  ButtonsContainer,
   Container,
   RecoverBox,
-  RecoverButton,
-  RecoverContainer,
-  RecoverInput,
-  SubTitleText,
-  TextContainer,
-  TitleText,
+  RecoverForm,
+  RecoverText,
+  RecoverTitle,
 } from './RecoverPasswordForm.styles'
 import emailValidation from './RecoverValidation'
 
-function RecoverPassword() {
+const RecoverPassword2 = () => {
   const navigate = useNavigate()
-  const [email, setEmail] = useState('')
-  const [open, setOpen] = useState(false)
-  const [errors, setErrors] = useState([])
 
-  const handleReset = async () => {
-    try {
-      await emailValidation.validate({ email })
-      resetPassword.getRegistrationEmail(email)
-      navigate(ROUTES.passwordRecoverConfirm, {
-        replace: true,
-        state: { email },
-      })
-    } catch (err) {
-      setErrors(err.errors)
-      setOpen(true)
-    }
-  }
-
-  const handleClose = (event, reason) => {
-    if (reason === 'clickaway') {
-      return
-    }
-    setOpen(false)
-  }
+  const { mutate: resetPassword, isLoading: isResetting } = useResetPasssword()
 
   return (
     <Container>
-      {errors.length > 0 && (
-        <Snackbar
-          open={open}
-          autoHideDuration={3000}
-          onClose={handleClose}
-          anchorOrigin={{
-            vertical: 'top',
-            horizontal: 'right',
+      <RecoverBox>
+        <FlexWrapper direction="column" gap="8px">
+          <RecoverTitle>Recover Password</RecoverTitle>
+          <RecoverText>
+            Enter the email you used to register and we will send you link to reset your password
+          </RecoverText>
+        </FlexWrapper>
+
+        <Formik
+          initialValues={{
+            email: '',
           }}
+          validationSchema={emailValidation}
+          onSubmit={({ email }, _) => resetPassword(email)}
         >
-          <Alert onClose={handleClose} severity="error">
-            {errors[0]}
-          </Alert>
-        </Snackbar>
-      )}
-      <Box sx={{ flexGrow: 1 }}>
-        <AppBar position="static" elevation={0}></AppBar>
-      </Box>
-      <RecoverContainer>
-        <RecoverBox>
-          <TextContainer>
-            <TitleText margin="0 0 24px 0">Recover Password</TitleText>
-          </TextContainer>
-          <TextContainer>
-            <SubTitleText>
-              Enter the email address you used to register and we will send you the instructions
-            </SubTitleText>
-          </TextContainer>
-          <RecoverInput placeholder="EMAIL" onChange={(e) => setEmail(e.target.value)} required />
-          <RecoverButton onClick={handleReset}>RESET PASSWORD</RecoverButton>
-          <ButtonContainer>
-            <ArrowLeftReset />
-            <BackButton onClick={() => navigate(ROUTES.login, { replace: true })}>
-              BACK TO SIGN IN
-            </BackButton>
-          </ButtonContainer>
-        </RecoverBox>
-      </RecoverContainer>
+          {({ values, errors }) => (
+            <RecoverForm>
+              <CustomInput containerWidth="100%" placeholder="Email" name="email" type="email" />
+
+              <ButtonsContainer>
+                <CustomButton
+                  width="100%"
+                  fontSize="16px"
+                  disabled={!isEmpty(errors)}
+                  type="onSubmit"
+                  name="email"
+                >
+                  {isResetting ? (
+                    <ThreeDots
+                      height="24"
+                      width="24"
+                      radius="9"
+                      color="white"
+                      ariaLabel="three-dots-loading"
+                      wrapperStyle={{}}
+                      wrapperClassName=""
+                      visible={true}
+                    />
+                  ) : (
+                    'Reset password'
+                  )}
+                </CustomButton>
+
+                <CustomButton
+                  width="100%"
+                  icon={<ArrowNavigateBack />}
+                  iconPosition="left"
+                  border="2px solid #46A11B"
+                  background="transparent"
+                  fontSize="16px"
+                  onClick={() => navigate(ROUTES.login, { replace: true })}
+                >
+                  Back to Log in
+                </CustomButton>
+              </ButtonsContainer>
+            </RecoverForm>
+          )}
+        </Formik>
+      </RecoverBox>
     </Container>
   )
 }
 
-export default RecoverPassword
+export default RecoverPassword2
diff --git a/client/src/components/Forms/RecoverPasswordForm/RecoverPasswordForm.styles.js b/client/src/components/Forms/RecoverPasswordForm/RecoverPasswordForm.styles.js
index 1d38b8b2a..dc5cf377e 100644
--- a/client/src/components/Forms/RecoverPasswordForm/RecoverPasswordForm.styles.js
+++ b/client/src/components/Forms/RecoverPasswordForm/RecoverPasswordForm.styles.js
@@ -1,201 +1,79 @@
-import Toolbar from '@mui/material/Toolbar'
+import { NavLink } from 'react-router-dom'
+import { Form } from 'formik'
 import styled from 'styled-components'
 
-import { device } from '../../../constants/breakpoints'
-import { BLACK, GREY, LIME, WHITE } from '../../../constants/colors'
-
-export const NavBar = styled(Toolbar)`
-  &.css-hyum1k-MuiToolbar-root {
-    background: ${LIME.background};
-  }
-`
+import { BLACK, GREEN, GREY, LIME, WHITE } from '../../../constants/colors'
 
 export const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-`
-
-export const RecoverContainer = styled.div`
   width: 100%;
-  height: 91.4vh;
+  min-height: calc(100dvh - 88px);
   display: flex;
   justify-content: center;
   align-items: center;
-  background: ${LIME.background};
+  background: ${BLACK.background};
+  padding: 48px 24px;
 `
-
-export const RecoverBox = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  max-width: 520px;
+export const RecoverForm = styled(Form)`
   width: 100%;
-  box-shadow: 0px 0px 4px 3px rgba(0, 0, 0, 0.15);
-  padding: 40px 23px;
-  border-radius: 24px;
-  background: ${WHITE.main};
-
-  @media ${device.tablet} {
-    max-width: 515px;
-  }
-
-  @media ${device.mobileL} {
-    max-width: 325px;
-    padding: 50px 20px;
-  }
-
-  @media ${device.mobileM} {
-    max-width: 290px;
-  }
 `
 
-export const TextContainer = styled.div`
+export const AccountActions = styled.div`
   display: flex;
-  justify-content: flex-start;
-  width: 100%;
+  column-gap: 16px;
 `
 
-export const TitleText = styled.h3`
-  font-weight: 700;
-  font-size: 30px;
-  color: ${BLACK.main};
-  margin: ${(props) => props.margin || '0'};
-
-  @media ${device.tablet} {
-    font-size: 28px;
-  }
-
-  @media ${device.mobileL} {
-    font-size: 22px;
-  }
-
-  @media ${device.mobileM} {
-    font-size: 20px;
-  }
+export const NavBarText = styled.a`
+  font-size: 20px;
+  font-weight: 500;
+  color: ${WHITE.main};
 `
 
-export const SubTitleText = styled.h4`
-  font-weight: 400;
-  font-size: 22px;
-  color: ${GREY.text};
-  margin: 0;
-
-  @media ${device.tablet} {
-    font-size: 21px;
-  }
-
-  @media ${device.mobileL} {
-    font-size: 19px;
-  }
+export const NavigationLink = styled(NavLink)`
+  font-size: 20px;
+  font-weight: 500;
+  color: ${WHITE.main};
+  text-decoration: none;
 
-  @media ${device.mobileM} {
-    font-size: 17px;
+  &.active {
+    color: ${GREEN.text};
+    border-bottom: 1px solid ${GREEN.border};
   }
 `
 
-export const RecoverInput = styled.input`
-  outline: none;
-  width: 96%;
-  height: 77px;
+export const RecoverBox = styled.div`
+  max-width: 470px;
+  width: 100%;
+  gap: 48px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`
+export const RecoverTitle = styled.h3`
+  font-size: 24px;
+  font-weight: 500;
+  color: ${GREEN.text};
   text-align: center;
-  border: 1px solid #000000;
-  border-radius: 3px;
-  margin: 44px 0 44px 0;
-  background: ${GREY.background};
-  font-weight: 600;
-  font-size: 22px;
-  color: ${BLACK.main};
-
-  &::placeholder {
-    font-weight: 600;
-    font-size: 24px;
-
-    @media ${device.mobileL} {
-      font-size: 21px;
-    }
-
-    @media ${device.mobileM} {
-      font-size: 20px;
-    }
-  }
-
-  @media ${device.tablet} {
-    height: 70px;
-  }
-
-  @media ${device.mobileL} {
-    font-size: 18px;
-    height: 67px;
-  }
-
-  @media ${device.mobileM} {
-    font-size: 16px;
-    height: 64px;
-  }
 `
-
-export const RecoverButton = styled.button`
-  font-weight: 700;
-  font-size: 23px;
-  border: none;
-  width: 97%;
-  height: 77px;
-  background: ${BLACK.main};
+export const RecoverText = styled.p`
+  font-size: 16px;
+  font-weight: 400;
   color: ${WHITE.main};
   text-align: center;
-  border: 1px solid ${BLACK.main};
-  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-  border-radius: 3px;
-
-  &:hover {
-    border: none;
-    cursor: pointer;
-    transition: 0.4s;
-    color: ${BLACK.main};
-    background: ${LIME.main};
-  }
-
-  @media ${device.tablet} {
-    height: 70px;
-  }
-
-  @media ${device.mobileL} {
-    font-size: 18px;
-    height: 67px;
-  }
-
-  @media ${device.mobileM} {
-    font-size: 16px;
-    height: 64px;
-  }
 `
 
-export const BackButton = styled.button`
-  font-weight: 700;
-  font-size: 26px;
-  color: ${BLACK.main};
-  background: none;
-  border: none;
-
-  &:hover {
-    cursor: pointer;
-    transition: 0.4s;
-    color: ${LIME.main};
-  }
-
-  @media ${device.mobileL} {
-    font-size: 18px;
-  }
-
-  @media ${device.mobileM} {
-    font-size: 17px;
-  }
+export const ButtonsContainer = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  row-gap: 16px;
+  margin-top: 48px;
 `
 
-export const ButtonContainer = styled.div`
+export const FormWrapper = styled(Form)`
+  width: 100%;
   display: flex;
-  gap: 34px;
+  justify-content: center;
   align-items: center;
-  margin-top: 50px;
+  gap: 48px;
+  flex-direction: column;
 `
diff --git a/client/src/components/Forms/RecoverPasswordForm/RecoverValidation.js b/client/src/components/Forms/RecoverPasswordForm/RecoverValidation.js
index 32bc26329..fa010d8ce 100644
--- a/client/src/components/Forms/RecoverPasswordForm/RecoverValidation.js
+++ b/client/src/components/Forms/RecoverPasswordForm/RecoverValidation.js
@@ -2,7 +2,10 @@
 import * as yup from 'yup'
 
 const emailValidation = yup.object().shape({
-  email: yup.string().required('You forgot to input email 😁').email(),
+  email: yup
+    .string()
+    .required('You forgot to input email')
+    .email('Please enter a valid email address.'),
 })
 
 export default emailValidation
diff --git a/client/src/components/Profile/Profile.jsx b/client/src/components/Profile/Profile.jsx
index b12f2b76c..b1dd1b79b 100644
--- a/client/src/components/Profile/Profile.jsx
+++ b/client/src/components/Profile/Profile.jsx
@@ -27,7 +27,6 @@ const Profile = () => {
   const { data: currentUser, isFetching } = useCheckAuth()
   const [isEditing, setIsEditing] = useState('')
   const [showingUser, setShowingUser] = useState(null)
-  const width = useGetScreenWidth()
 
   useEffect(() => {
     setShowingUser(data?.data)
diff --git a/client/src/components/Profile/components/ProfileInfo/UserStatusButtons/UserStatusButtons.jsx b/client/src/components/Profile/components/ProfileInfo/UserStatusButtons/UserStatusButtons.jsx
index d2206abc7..13d666c8d 100644
--- a/client/src/components/Profile/components/ProfileInfo/UserStatusButtons/UserStatusButtons.jsx
+++ b/client/src/components/Profile/components/ProfileInfo/UserStatusButtons/UserStatusButtons.jsx
@@ -1,6 +1,5 @@
 import React from 'react'
 import { ThreeDots } from 'react-loader-spinner'
-import { useFormikContext } from 'formik'
 
 import LongArrowLeft from '../../../../../assets/Arrows/LongArrowLeft'
 import AddUserIcon from '../../../../../assets/Shared/AddUserIcon'
diff --git a/client/src/components/RegistrationPipeline/components/InitialPart/ParticlesContainer.jsx b/client/src/components/RegistrationPipeline/components/InitialPart/ParticlesContainer.jsx
index 9b2e17af0..738de8a1b 100644
--- a/client/src/components/RegistrationPipeline/components/InitialPart/ParticlesContainer.jsx
+++ b/client/src/components/RegistrationPipeline/components/InitialPart/ParticlesContainer.jsx
@@ -4,16 +4,13 @@ import { loadFull } from 'tsparticles'
 
 export function ParticlesContainer() {
   const particlesInit = useCallback(async (engine) => {
-    console.log(engine)
     // you can initiate the tsParticles instance (engine) here, adding custom shapes or presets
     // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
     // starting from v2 you can add only the features you need reducing the bundle size
     await loadFull(engine)
   }, [])
 
-  const particlesLoaded = useCallback(async (container) => {
-    await console.log(container)
-  }, [])
+  const particlesLoaded = useCallback(async (container) => {}, [])
 
   // using useMemo is not mandatory, but it's recommended since this value can be memoized if static
   const options = useMemo(() => {
diff --git a/client/src/components/RegistrationPipeline/components/NavigationButtons/NavigationButtons.jsx b/client/src/components/RegistrationPipeline/components/NavigationButtons/NavigationButtons.jsx
index f8e194649..7bcb14bc7 100644
--- a/client/src/components/RegistrationPipeline/components/NavigationButtons/NavigationButtons.jsx
+++ b/client/src/components/RegistrationPipeline/components/NavigationButtons/NavigationButtons.jsx
@@ -69,6 +69,7 @@ const NavigationButtons = ({
         iconPosition="left"
         border="2px solid #46A11B"
         background="transparent"
+        maxWidth="170px"
       >
         {step === 1 ? 'Cancel' : 'Back'}
       </CustomButton>
@@ -85,6 +86,7 @@ const NavigationButtons = ({
           icon={<ArrowNavigateFurther />}
           iconPosition="right"
           background={GREEN.button}
+          maxWidth="170px"
         >
           {isOptionalStep && !oneOfOptionalFieldsHasValue
             ? 'Skip'
@@ -100,6 +102,7 @@ const NavigationButtons = ({
           icon={isFinishingRegistration ? null : <ArrowNavigateFurther />}
           iconPosition="right"
           background={GREEN.button}
+          maxWidth="170px"
         >
           {isFinishingRegistration ? (
             <ThreeDots
diff --git a/client/src/components/Team/TeamsList/Teams/Teams.jsx b/client/src/components/Team/TeamsList/Teams/Teams.jsx
index e2bc05f70..04336a50b 100644
--- a/client/src/components/Team/TeamsList/Teams/Teams.jsx
+++ b/client/src/components/Team/TeamsList/Teams/Teams.jsx
@@ -2,13 +2,15 @@ import { Fragment, useCallback, useEffect, useRef, useState } from 'react'
 
 import { useLoadTeams } from '../../../../api/hooks/team/useLoadTeams'
 import CardSkeleton from '../../../../shared/components/CardSkeleton/CardSkeleton'
+import NotFound from '../../../Teammates/components/NotFound/NotFound'
 import { TeamsListBox, TeamsWrapper } from '../TeamsList.styles'
 
 import Desktop from './TeamData/TeamDataDesktop'
 import Mobile from './TeamData/TeamDataMobile'
 
-const Teams = ({ handleClickOpen, setIsNotFound, isLoadingUserData, width }) => {
+const Teams = ({ handleClickOpen, isLoadingUserData, width }) => {
   const intObserver = useRef()
+  const [isNotFound, setIsNotFound] = useState(false)
 
   const {
     fetchNextPage,
@@ -73,11 +75,17 @@ const Teams = ({ handleClickOpen, setIsNotFound, isLoadingUserData, width }) =>
   })
 
   useEffect(() => {
-    if (isFetched && !content[0].length && !filtered) {
+    if (isFetched && !content[0].length) {
       setIsNotFound(true)
+    } else {
+      setIsNotFound(false)
     }
   }, [isFetched, content])
 
+  if (isNotFound) {
+    return <NotFound />
+  }
+
   return (
     <TeamsWrapper>
       <TeamsListBox>
diff --git a/client/src/components/Team/TeamsList/TeamsList.js b/client/src/components/Team/TeamsList/TeamsList.js
index f5f2b09b5..8eceeb034 100644
--- a/client/src/components/Team/TeamsList/TeamsList.js
+++ b/client/src/components/Team/TeamsList/TeamsList.js
@@ -16,7 +16,7 @@ import NotFound from '../../Teammates/components/NotFound/NotFound'
 
 import Teams from './Teams/Teams'
 // * Styles
-import { Container, NotFoundContainer, TeamCardModal } from './TeamsList.styles'
+import { Container } from './TeamsList.styles'
 
 function TeamsList() {
   let { data: user, isLoading: isLoadingUserData } = useCheckAuth()
@@ -28,11 +28,6 @@ function TeamsList() {
   let [changeModal, setChangeModal] = useState('')
 
   const { mutate: joinUser, isLoading: isUserTeamLoading } = useJoinTeam()
-  const [isNotFound, setIsNotFound] = useState(false)
-
-  const handleComeback = () => {
-    setIsNotFound(false)
-  }
 
   const { leaveAndJoin, isLeaving, isJoining } = useLeaveAndJoin()
 
@@ -75,14 +70,6 @@ function TeamsList() {
     await leaveAndJoin.mutateAsync({ leaveDetails, joinDetails })
   }
 
-  // if (isUserTeamLoading || isLeaving || isJoining) {
-  //   return (
-  //     <Container>
-  //       <Loader />
-  //     </Container>
-  //   )
-  // }
-
   return (
     <>
       <Modal
@@ -101,21 +88,14 @@ function TeamsList() {
         hideLogoForMobile={true}
       />
 
-      {isNotFound ? (
-        <NotFoundContainer>
-          <NotFound handleComeback={handleComeback} />
-        </NotFoundContainer>
-      ) : (
-        <Container>
-          <Teams
-            handleClickOpen={handleClickOpen}
-            setIsNotFound={setIsNotFound}
-            isLoadingUserData={isLoadingUserData}
-            width={width}
-          />
-          <SliderToTop />
-        </Container>
-      )}
+      <Container>
+        <Teams
+          handleClickOpen={handleClickOpen}
+          isLoadingUserData={isLoadingUserData}
+          width={width}
+        />
+        <SliderToTop />
+      </Container>
     </>
   )
 }
diff --git a/client/src/components/Team/TeamsList/TeamsList.styles.js b/client/src/components/Team/TeamsList/TeamsList.styles.js
index 43d782169..a2b608fc1 100644
--- a/client/src/components/Team/TeamsList/TeamsList.styles.js
+++ b/client/src/components/Team/TeamsList/TeamsList.styles.js
@@ -134,17 +134,3 @@ export const TeamButton = styled.button`
     transform: translateY(-1.25px);
   }
 `
-
-export const NotFoundContainer = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  min-height: calc(100vh - 238px);
-  /* height: 100%; */
-  padding-left: 88px;
-
-  @media screen and (max-width: 768px) {
-    padding-left: 0px;
-  }
-`
diff --git a/client/src/components/Teammates/Teammates.js b/client/src/components/Teammates/Teammates.js
index 47257a901..e0aeb7184 100644
--- a/client/src/components/Teammates/Teammates.js
+++ b/client/src/components/Teammates/Teammates.js
@@ -29,11 +29,6 @@ function Teammates() {
    */
   const [open, setOpen] = useState(false)
   const [showUser, setShowUser] = useState({})
-  const [isNotFound, setIsNotFound] = useState(false)
-
-  const handleComeback = () => {
-    setIsNotFound(false)
-  }
 
   /**
    * Get global state from redux
@@ -79,25 +74,10 @@ function Teammates() {
         mobileProfile={open}
         handleClose={handleClose}
       />
-      {/* If nothing was found, show user a NotFound container */}
-      {isNotFound ? (
-        <InfoContainer>
-          <NotFound handleComeback={handleComeback} />
-        </InfoContainer>
-      ) : (
-        <CardsZone>
-          <GridContainer>
-            <CardsContainer>
-              <Cards
-                setIsNotFound={setIsNotFound}
-                handleOpen={handleOpen}
-                isLoadingUseData={isLoadingUseData}
-              />
-            </CardsContainer>
-          </GridContainer>
-          <SliderToTop />
-        </CardsZone>
-      )}
+
+      <CardsZone>
+        <Cards handleOpen={handleOpen} isLoadingUseData={isLoadingUseData} />
+      </CardsZone>
     </>
   )
 }
diff --git a/client/src/components/Teammates/components/Cards/Cards.js b/client/src/components/Teammates/components/Cards/Cards.js
index 2b43db113..b534f3f36 100644
--- a/client/src/components/Teammates/components/Cards/Cards.js
+++ b/client/src/components/Teammates/components/Cards/Cards.js
@@ -1,5 +1,5 @@
 // * Modules
-import React, { useCallback, useEffect, useRef } from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 // * Constants
 // * API
 import lookup from 'country-code-lookup'
@@ -7,6 +7,9 @@ import lookup from 'country-code-lookup'
 import { useLoadUsers } from '../../../../api/hooks/temeights/useLoadUsers'
 import { useGetScreenWidth } from '../../../../hooks/useGetScreenWidth'
 import CardSkeleton from '../../../../shared/components/CardSkeleton/CardSkeleton'
+import SliderToTop from '../../../../shared/components/SliderToTop/SliderToTop'
+import { CardsContainer, GridContainer } from '../../Teammates.styles'
+import NotFound from '../NotFound/NotFound'
 // * Components
 import UserCard from '../UserCard/UserCard'
 
@@ -14,9 +17,9 @@ import UserCard from '../UserCard/UserCard'
 // * Styles
 import { CardContainer } from './Cards.styles'
 
-const Cards = ({ handleOpen, isLoadingUseData, setIsNotFound }) => {
+const Cards = ({ handleOpen, isLoadingUseData }) => {
   const intObserver = useRef()
-  const width = useGetScreenWidth()
+  const [isNotFound, setIsNotFound] = useState(false)
 
   const {
     fetchNextPage,
@@ -103,21 +106,31 @@ const Cards = ({ handleOpen, isLoadingUseData, setIsNotFound }) => {
     })
   })
 
-  {
-    /* If nothing was found, show user a NotFound container */
-  }
-
   useEffect(() => {
-    if (isFetched && !content[0].length && !filtered) {
+    if (isFetched && !content[0].length) {
       setIsNotFound(true)
+    } else {
+      setIsNotFound(false)
     }
   }, [isFetched, content])
 
+  {
+    /* If nothing was found, show user a NotFound container */
+  }
+  if (isNotFound) {
+    return <NotFound />
+  }
+
   return (
     <>
-      {content}
-      {/* Load skeleton before showing real cards to improve performance of the app */}
-      {(isFetchingNextPage || isLoadingUseData || isLoading) && <CardSkeleton cards={9} />}
+      <GridContainer>
+        <CardsContainer>
+          {content}
+          {/* Load skeleton before showing real cards to improve performance of the app */}
+          {(isFetchingNextPage || isLoadingUseData || isLoading) && <CardSkeleton cards={9} />}
+        </CardsContainer>
+      </GridContainer>
+      <SliderToTop />
     </>
   )
 }
diff --git a/client/src/components/Teammates/components/NotFound/NotFound.js b/client/src/components/Teammates/components/NotFound/NotFound.js
index 3824c97f8..7d7bf894e 100644
--- a/client/src/components/Teammates/components/NotFound/NotFound.js
+++ b/client/src/components/Teammates/components/NotFound/NotFound.js
@@ -1,32 +1,23 @@
 // * Assets
-import NonFound from '../../../../assets/Shared/SearchingPeople'
 
 // * Styles
-import {
-  BotText,
-  Button,
-  Container,
-  InfoContainer,
-  NonFoundContainer,
-  TextContainer,
-  TopText,
-} from './NotFound.styles'
+import SearchingPeople from '../../../../assets/Shared/SearchingPeople'
+import FlexWrapper from '../../../../shared/components/FlexWrapper/FlexWrapper'
 
-const NotFound = ({ handleComeback }) => {
+import { Container, NonFoundContainer, Text } from './NotFound.styles'
+
+const NotFound = () => {
   return (
     <Container>
-      <InfoContainer>
-        <TopText margin="0 0 15px 0">No results found.</TopText>
-        <TextContainer>
-          <BotText fontSize="25px" fontWeight="300">
-            We can’t find any item matching your search
-          </BotText>
-        </TextContainer>
-        <Button onClick={handleComeback}>Comeback</Button>
-      </InfoContainer>
       <NonFoundContainer>
-        <NonFound />
+        <SearchingPeople />
       </NonFoundContainer>
+      <FlexWrapper direction="column" gap="8px">
+        <Text>{`No results found :(`}</Text>
+        <Text fontWeight="400" fontSize="16px">
+          We can’t find any item matching your search
+        </Text>
+      </FlexWrapper>
     </Container>
   )
 }
diff --git a/client/src/components/Teammates/components/NotFound/NotFound.styles.js b/client/src/components/Teammates/components/NotFound/NotFound.styles.js
index c55cabeb7..4e7112183 100644
--- a/client/src/components/Teammates/components/NotFound/NotFound.styles.js
+++ b/client/src/components/Teammates/components/NotFound/NotFound.styles.js
@@ -3,120 +3,24 @@ import styled from 'styled-components'
 
 export const Container = styled.div`
   width: 100%;
+  min-height: calc(100vh - 238px);
   display: flex;
-  justify-content: center;
   align-items: center;
-  margin-bottom: 70px;
-
-  @media screen and (max-width: 980px) {
-    display: flex;
-    flex-direction: column;
-  }
-`
-
-export const TopText = styled.h2`
-  font-weight: 700;
-  color: white;
-  text-align: center;
-  font-size: 42px;
-  margin: 0 0 20px 0;
-
-  @media screen and (min-width: 980px) and (max-width: 1250px) {
-    font-size: 32px;
-  }
-
-  @media screen and (min-width: 510px) and (max-width: 980px) {
-    font-size: 30px;
-    margin: 20px 0 20px 0;
-  }
-
-  @media screen and (min-width: 0) and (max-width: 510px) {
-    font-size: 23px;
-  }
+  flex-direction: column;
+  gap: 36px;
+  padding: 0 24px 48px 24px;
 `
 
-export const BotText = styled.h2`
-  font-weight: 400;
+export const Text = styled.h2`
+  font-weight: ${(props) => props.fontWeight || '500'};
   color: white;
   text-align: center;
-  font-size: 25px;
-  margin: 0 0 30px 0;
-
-  @media screen and (min-width: 980px) and (max-width: 1250px) {
-    font-size: 23px;
-  }
-
-  @media screen and (min-width: 510px) and (max-width: 980px) {
-    font-size: 20px;
-  }
-
-  @media screen and (min-width: 0) and (max-width: 510px) {
-    font-size: 17px;
-  }
-`
-
-export const Button = styled.button`
-  border: none;
-  cursor: pointer;
-  width: 211px;
-  height: 55px;
-  background: #5d9d0b;
-  box-shadow: 0px 0px 50px rgba(93, 157, 11, 0.15);
-  border-radius: 5px;
-  font-weight: 700;
-  color: white;
-  font-size: 16px;
-  transition: 0.3s ease;
-
-  &:hover {
-    -webkit-transform: scale(1.05);
-    -ms-transform: scale(1.05);
-    transform: scale(1.05);
-  }
-`
-
-export const InfoContainer = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  margin-right: 50px;
-
-  @media screen and (min-width: 980px) and (max-width: 1250px) {
-    margin-right: 20px;
-  }
-
-  @media screen and (min-width: 0) and (max-width: 980px) {
-    order: 2;
-    margin: 70px 0 0 0;
-  }
-`
-
-export const TextContainer = styled.div`
-  max-width: 360px;
+  font-size: ${(props) => props.fontSize || '24px'};
+  margin: 0;
 `
 
 export const NonFoundContainer = styled.div`
-  width: 675px;
-  height: 400px;
-  margin-bottom: 20px;
-
-  @media screen and (min-width: 980px) and (max-width: 1250px) {
-    width: 600px;
-    height: 350px;
-  }
-
-  @media screen and (min-width: 510px) and (max-width: 980px) {
-    order: 1;
-    margin-bottom: 0;
-    width: 453px;
-    height: 257px;
-  }
-
-  @media screen and (min-width: 0) and (max-width: 510px) {
-    order: 1;
-    margin-bottom: 0;
-    width: 310px;
-    height: 183px;
-  }
+  width: 100%;
+  max-width: 650px;
+  height: auto;
 `
diff --git a/client/src/layouts/NavBarItemPageLayout/NavbarItemPageLayout.styles.js b/client/src/layouts/NavBarItemPageLayout/NavbarItemPageLayout.styles.js
index 8543b9492..739b5cfa6 100644
--- a/client/src/layouts/NavBarItemPageLayout/NavbarItemPageLayout.styles.js
+++ b/client/src/layouts/NavBarItemPageLayout/NavbarItemPageLayout.styles.js
@@ -9,5 +9,5 @@ export const Container = styled.div`
   align-items: center;
   min-height: 100vh;
   width: 100%;
-  background: ${BLACK.background};
+  /* background: ${BLACK.background}; */
 `
diff --git a/client/src/layouts/ResetPasswordPageLayout/ResetPasswordPageLayout.js b/client/src/layouts/ResetPasswordPageLayout/ResetPasswordPageLayout.js
new file mode 100644
index 000000000..5a9ab3243
--- /dev/null
+++ b/client/src/layouts/ResetPasswordPageLayout/ResetPasswordPageLayout.js
@@ -0,0 +1,22 @@
+import React from 'react'
+import { NavLink, Outlet } from 'react-router-dom'
+
+import SideLogo from '../../assets/BigSideLogo'
+import ROUTES from '../../constants/routes'
+
+import { Container, Navbar } from './ResetPasswordPageLayout.styles'
+
+const ResetPasswordPageLayout = () => {
+  return (
+    <Container>
+      <Navbar>
+        <NavLink to={ROUTES.default}>
+          <SideLogo />
+        </NavLink>
+      </Navbar>
+      <Outlet />
+    </Container>
+  )
+}
+
+export default ResetPasswordPageLayout
diff --git a/client/src/layouts/ResetPasswordPageLayout/ResetPasswordPageLayout.styles.js b/client/src/layouts/ResetPasswordPageLayout/ResetPasswordPageLayout.styles.js
new file mode 100644
index 000000000..0892a7a0b
--- /dev/null
+++ b/client/src/layouts/ResetPasswordPageLayout/ResetPasswordPageLayout.styles.js
@@ -0,0 +1,45 @@
+import { NavLink } from 'react-router-dom'
+import styled from 'styled-components'
+
+import { BLACK, GREEN, WHITE } from '../../constants/colors'
+
+export const Navbar = styled.nav`
+  width: 100%;
+  height: 88px;
+  display: flex;
+  justify-content: center;
+  align-items: end;
+`
+
+export const AccountActions = styled.div`
+  display: flex;
+  column-gap: 16px;
+`
+
+export const NavBarText = styled.a`
+  font-size: 20px;
+  font-weight: 500;
+  color: ${WHITE.main};
+`
+
+export const NavigationLink = styled(NavLink)`
+  font-size: 20px;
+  font-weight: 500;
+  color: ${WHITE.main};
+  text-decoration: none;
+`
+
+export const NavigationLinkActive = styled(NavigationLink)`
+  color: ${GREEN.text};
+  border-bottom: 1px solid ${GREEN.border};
+`
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  min-height: 100dvh;
+  width: 100%;
+  background: ${BLACK.background};
+`
diff --git a/client/src/routes/routes.js b/client/src/routes/routes.js
index 613480358..d7d60b8f7 100644
--- a/client/src/routes/routes.js
+++ b/client/src/routes/routes.js
@@ -7,6 +7,7 @@ import ROUTES from '../constants/routes'
 // * Layouts
 import AuthLayout from '../layouts/AuthLayout/AuthLayout'
 import NavBarItemPageLayout from '../layouts/NavBarItemPageLayout/NavBarItemPageLayout'
+import ResetPasswordPageLayout from '../layouts/ResetPasswordPageLayout/ResetPasswordPageLayout'
 import Screen404 from '../screens/404Screen/404Screen'
 // * Screens
 import ConfirmationScreen from '../screens/ConfirmationScreen/ConfirmationScreen'
@@ -18,7 +19,6 @@ import NoTeamScreen from '../screens/NoTeamScreen/NoTeamScreen'
 import ProfileScreen from '../screens/ProfileScreen/ProfileScreen'
 import RegistrationScreen from '../screens/RegistrationScreen/RegistrationScreen'
 import ResetNewPasswordsScreen from '../screens/ResetNewPasswordsScreen/ResetNewPasswordsScreen'
-import ResetPasswordConfirmationScreen from '../screens/ResetPasswordConfirmationScreen/ResetPasswordConfirmationScreen'
 import ResetPasswordScreen from '../screens/ResetPasswordScreen/ResetPasswordScreen'
 import TeammatesScreen from '../screens/TeammatesScreen/TeammatesScreen'
 import TeamScreen from '../screens/TeamScreen/TeamScreen'
@@ -51,10 +51,11 @@ export const useRoutes = () => {
         <Route path={ROUTES.login} element={<LoginScreen />} />
         <Route path={ROUTES.registration} element={<RegistrationScreen />} />
       </Route>
-      <Route path={ROUTES.confirmEmail} element={<ConfirmationScreen />} />
-      <Route path={ROUTES.passwordRecover} element={<ResetPasswordScreen />} />
-      <Route path={ROUTES.passwordRecoverConfirm} element={<ResetPasswordConfirmationScreen />} />
-      <Route path={ROUTES.passwordRecoverSuccess} element={<ResetNewPasswordsScreen />} />
+      <Route element={<ResetPasswordPageLayout />}>
+        <Route path={ROUTES.confirmEmail} element={<ConfirmationScreen />} />
+        <Route path={ROUTES.passwordRecover} element={<ResetPasswordScreen />} />
+        <Route path={ROUTES.passwordRecoverSuccess} element={<ResetNewPasswordsScreen />} />
+      </Route>
 
       <Route path="*" element={<Screen404 />} />
     </Routes>
diff --git a/client/src/screens/ResetPasswordConfirmationScreen/ResetPasswordConfirmationScreen.js b/client/src/screens/ResetPasswordConfirmationScreen/ResetPasswordConfirmationScreen.js
deleted file mode 100644
index 61eeef62c..000000000
--- a/client/src/screens/ResetPasswordConfirmationScreen/ResetPasswordConfirmationScreen.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react'
-import CssBaseline from '@mui/material/CssBaseline'
-
-import ResetFormConfirmation from '../../components/Forms/RecoverConfirmationForm/RecoverConfirmationForm'
-
-function ResetPasswordConfirmationScreen() {
-  return (
-    <>
-      <CssBaseline />
-      <ResetFormConfirmation />
-    </>
-  )
-}
-
-export default ResetPasswordConfirmationScreen
diff --git a/client/src/shared/components/CustomButton/CustomButon.styles.js b/client/src/shared/components/CustomButton/CustomButon.styles.js
index b464e3df7..a4d01f07b 100644
--- a/client/src/shared/components/CustomButton/CustomButon.styles.js
+++ b/client/src/shared/components/CustomButton/CustomButon.styles.js
@@ -7,7 +7,7 @@ export const Button = styled.button`
   border: ${(props) => (props.border ? props.border : 'none')};
   color: ${(props) => (props.transparent ? '#007bff' : '#fff')};
   padding: 0.875rem 0;
-  max-width: 10.625rem;
+  max-width: ${(props) => props.maxWidth || 'none'};
   width: 100%;
   border-radius: 10px;
   display: flex;
diff --git a/client/src/shared/components/CustomButton/CustomButton.jsx b/client/src/shared/components/CustomButton/CustomButton.jsx
index 9a39c8507..9e77493ea 100644
--- a/client/src/shared/components/CustomButton/CustomButton.jsx
+++ b/client/src/shared/components/CustomButton/CustomButton.jsx
@@ -8,10 +8,18 @@ const CustomButton = ({
   icon,
   iconPosition,
   onClick,
+  maxWidth,
   ...props
 }) => {
   return (
-    <Button type={type} border={border} background={background} onClick={onClick} {...props}>
+    <Button
+      type={type}
+      border={border}
+      background={background}
+      onClick={onClick}
+      maxWidth={maxWidth}
+      {...props}
+    >
       {icon && iconPosition === 'left' && <IconWrapper>{icon}</IconWrapper>}
       {children}
       {icon && iconPosition === 'right' && <IconWrapper>{icon}</IconWrapper>}
diff --git a/client/src/shared/components/FlexWrapper/FlexWrapper.js b/client/src/shared/components/FlexWrapper/FlexWrapper.js
index 5ea3128c5..a5154d3ba 100644
--- a/client/src/shared/components/FlexWrapper/FlexWrapper.js
+++ b/client/src/shared/components/FlexWrapper/FlexWrapper.js
@@ -11,6 +11,7 @@ const StyledFlexWrapper = styled.div`
   max-height: ${(props) => props.maxHeight || 'none'};
   position: ${(props) => props.position || 'static'};
   width: ${(props) => props.width || 'auto'};
+  max-width: ${(props) => props.maxWidth || 'none'};
   height: ${(props) => props.height || 'auto'};
 `
 
diff --git a/client/src/shared/components/Formik/CustomInput/CustomInput.jsx b/client/src/shared/components/Formik/CustomInput/CustomInput.jsx
index 60c29bcb8..18674107c 100644
--- a/client/src/shared/components/Formik/CustomInput/CustomInput.jsx
+++ b/client/src/shared/components/Formik/CustomInput/CustomInput.jsx
@@ -13,12 +13,13 @@ const CustomInput = ({
   containerWidth = 'auto',
   inputWidth = '100%',
   onInputChange,
-  uniqueError,
+  uniqueError = false,
   uniqueErrorMessage,
   shouldFormatDate = false,
   shouldFormatYear = false,
   isOptional = false,
   maxLength = 524288,
+  withIcon = true,
   ...props
 }) => {
   const [field, meta, helpers] = useField(props)
@@ -56,14 +57,14 @@ const CustomInput = ({
           id={field.name}
           onChange={handleChange} // Add the onChange event handler
         />
-        {(isError || uniqueError) && (
+        {((meta.touched && isError) || (meta.touched && uniqueError)) && withIcon && (
           <IconSpan>
             <AlertIcon />
           </IconSpan>
         )}
       </InputWrapper>
       {isError && <ErrorMessage>{meta.error}</ErrorMessage>}
-      {uniqueError && <ErrorMessage>{uniqueErrorMessage}</ErrorMessage>}
+      {meta.touched && uniqueError && <ErrorMessage>{uniqueErrorMessage}</ErrorMessage>}
     </Box>
   )
 }
diff --git a/server/src/auth/auth.controller.ts b/server/src/auth/auth.controller.ts
index 7c3f6883f..eae9b8002 100644
--- a/server/src/auth/auth.controller.ts
+++ b/server/src/auth/auth.controller.ts
@@ -176,10 +176,19 @@ export class AuthController {
 		@Param('token') token: string,
 		@Res() res: Response,
 	): Promise<void> {
-		await this.authService.verifyReset(email, token);
-		return res.redirect(
-			`${process.env.CLIENT_URL}/auth/password-recover/${email}/${token}`,
-		);
+		try {
+			await this.authService.verifyReset(email, token);
+
+			return res.redirect(
+				`${process.env.CLIENT_URL}/auth/password-recover/${email}/${token}`,
+			);
+		} catch (err) {
+			if (err.status === 403) {
+				res.redirect(`${process.env.CLIENT_URL}/auth/token-expired`);
+			} else {
+				throw err;
+			}
+		}
 	}
 
 	@ApiOperation({
@@ -191,7 +200,7 @@ export class AuthController {
 		description: 'Updates password for the user',
 	})
 	@UsePipes(ValidationPipe)
-	@Get('/update-password')
+	@Post('/update-password')
 	async updatePassword(
 		@Body() dto: ResetUserDto,
 		@Res() res: Response,
diff --git a/server/src/auth/auth.service.ts b/server/src/auth/auth.service.ts
index 37ae49cce..bc8ec6463 100644
--- a/server/src/auth/auth.service.ts
+++ b/server/src/auth/auth.service.ts
@@ -1,7 +1,6 @@
 import { HttpException, HttpStatus, Injectable } from '@nestjs/common';
 import { InjectConnection } from '@nestjs/mongoose';
 import * as bcrypt from 'bcryptjs';
-import { passwordStrength } from 'check-password-strength';
 import { OAuth2Client } from 'google-auth-library';
 import mongoose from 'mongoose';
 import * as uuid from 'uuid';
@@ -52,11 +51,6 @@ export class AuthService {
 				);
 			}
 
-			/* TODO: add check for medium/strong password */
-			// const security = passwordStrength(dto.password).value;
-
-			// console.log(security);
-
 			/* Hashing the password. */
 			const hashPassword = await bcrypt.hash(dto.password, 5);
 
diff --git a/server/src/auth/guards/jwt-auth.guard.ts b/server/src/auth/guards/jwt-auth.guard.ts
index 9e9b21a9d..5dbd07a50 100644
--- a/server/src/auth/guards/jwt-auth.guard.ts
+++ b/server/src/auth/guards/jwt-auth.guard.ts
@@ -31,6 +31,8 @@ export class JwtAuthGuard implements CanActivate {
 				token,
 				process.env.JWT_ACCESS_KEY,
 			);
+			console.log(user);
+
 			if (!user) {
 				throw new UnauthorizedException({
 					message: 'User is not authorized.',
