diff --git a/hotel-management/package.json b/hotel-management/package.json
index 2e05cd6..9c8d398 100644
--- a/hotel-management/package.json
+++ b/hotel-management/package.json
@@ -19,14 +19,12 @@
     "@supabase/supabase-js": "^2.38.4",
     "@tanstack/react-query": "^5.8.4",
     "@tanstack/react-query-devtools": "^5.8.4",
-    "@types/react-test-renderer": "^18.0.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.47.0",
     "react-hot-toast": "^2.4.1",
     "react-icons": "^4.11.0",
     "react-router-dom": "^6.17.0",
-    "react-test-renderer": "^18.2.0",
     "styled-components": "^6.1.0"
   },
   "devDependencies": {
diff --git a/hotel-management/pnpm-lock.yaml b/hotel-management/pnpm-lock.yaml
index 1ea06fe..72ff2fd 100644
--- a/hotel-management/pnpm-lock.yaml
+++ b/hotel-management/pnpm-lock.yaml
@@ -17,9 +17,6 @@ dependencies:
   '@tanstack/react-query-devtools':
     specifier: ^5.8.4
     version: 5.8.4(@tanstack/react-query@5.8.4)(react-dom@18.2.0)(react@18.2.0)
-  '@types/react-test-renderer':
-    specifier: ^18.0.6
-    version: 18.0.6
   react:
     specifier: ^18.2.0
     version: 18.2.0
@@ -38,9 +35,6 @@ dependencies:
   react-router-dom:
     specifier: ^6.17.0
     version: 6.17.0(react-dom@18.2.0)(react@18.2.0)
-  react-test-renderer:
-    specifier: ^18.2.0
-    version: 18.2.0(react@18.2.0)
   styled-components:
     specifier: ^6.1.0
     version: 6.1.0(react-dom@18.2.0)(react@18.2.0)
@@ -1342,6 +1336,7 @@ packages:
 
   /@types/prop-types@15.7.9:
     resolution: {integrity: sha512-n1yyPsugYNSmHgxDFjicaI2+gCNjsBck8UX9kuofAKlc0h1bL+20oSF72KeNaW2DUlesbEVCFgyV2dPGTiY42g==}
+    dev: true
 
   /@types/react-dom@18.2.14:
     resolution: {integrity: sha512-V835xgdSVmyQmI1KLV2BEIUgqEuinxp9O4G6g3FqO/SqLac049E53aysv0oEFD2kHfejeKU+ZqL2bcFWj9gLAQ==}
@@ -1349,21 +1344,17 @@ packages:
       '@types/react': 18.2.29
     dev: true
 
-  /@types/react-test-renderer@18.0.6:
-    resolution: {integrity: sha512-O2JT1J3/v/NaYHYmPf2DXBSqUGmp6iwhFPicES6Pc1Y90B9Qgu99mmaBGqfZFpVuXLzF/pNJB4K9ySL3iqFeXA==}
-    dependencies:
-      '@types/react': 18.2.29
-    dev: false
-
   /@types/react@18.2.29:
     resolution: {integrity: sha512-Z+ZrIRocWtdD70j45izShRwDuiB4JZqDegqMFW/I8aG5DxxLKOzVNoq62UIO82v9bdgi+DO1jvsb9sTEZUSm+Q==}
     dependencies:
       '@types/prop-types': 15.7.9
       '@types/scheduler': 0.16.5
       csstype: 3.1.2
+    dev: true
 
   /@types/scheduler@0.16.5:
     resolution: {integrity: sha512-s/FPdYRmZR8SjLWGMCuax7r3qCWQw9QKHzXVukAuuIJkXkDRwp+Pu5LMIVFi0Fxbav35WURicYr8u1QsoybnQw==}
+    dev: true
 
   /@types/semver@7.5.3:
     resolution: {integrity: sha512-OxepLK9EuNEIPxWNME+C6WwbRAOOI2o2BaQEGzz5Lu2e4Z5eDnEo+/aVEDMIXywoJitJ7xWd641wrGLZdtwRyw==}
@@ -3738,11 +3729,6 @@ packages:
     resolution: {integrity: sha512-ub5E4+FBPKwAZx0UwIQOjYWGHTEq5sPqHQNRN8Z9e4A7u3Tj1weLJsL59yH9vmvqEtBHaOmT6cYQKIZOxp35FQ==}
     dev: true
 
-  /object-assign@4.1.1:
-    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
   /object-inspect@1.13.1:
     resolution: {integrity: sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==}
     dev: true
@@ -4005,6 +3991,7 @@ packages:
 
   /react-is@18.2.0:
     resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==}
+    dev: true
 
   /react-refresh@0.14.0:
     resolution: {integrity: sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==}
@@ -4034,27 +4021,6 @@ packages:
       react: 18.2.0
     dev: false
 
-  /react-shallow-renderer@16.15.0(react@18.2.0):
-    resolution: {integrity: sha512-oScf2FqQ9LFVQgA73vr86xl2NaOIX73rh+YFqcOp68CWj56tSfgtGKrEbyhCj0rSijyG9M1CYprTh39fBi5hzA==}
-    peerDependencies:
-      react: ^16.0.0 || ^17.0.0 || ^18.0.0
-    dependencies:
-      object-assign: 4.1.1
-      react: 18.2.0
-      react-is: 18.2.0
-    dev: false
-
-  /react-test-renderer@18.2.0(react@18.2.0):
-    resolution: {integrity: sha512-JWD+aQ0lh2gvh4NM3bBM42Kx+XybOxCpgYK7F8ugAlpaTSnWsX+39Z4XkOykGZAHrjwwTZT3x3KxswVWxHPUqA==}
-    peerDependencies:
-      react: ^18.2.0
-    dependencies:
-      react: 18.2.0
-      react-is: 18.2.0
-      react-shallow-renderer: 16.15.0(react@18.2.0)
-      scheduler: 0.23.0
-    dev: false
-
   /react@18.2.0:
     resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
     engines: {node: '>=0.10.0'}
diff --git a/hotel-management/src/App.test.tsx b/hotel-management/src/App.test.tsx
index ec995a5..761b4f7 100644
--- a/hotel-management/src/App.test.tsx
+++ b/hotel-management/src/App.test.tsx
@@ -1,6 +1,10 @@
 import { render, act, RenderResult } from '@testing-library/react';
+
+// Services
 import * as userServices from '@service/userServices';
 import * as roomServices from '@service/roomServices';
+
+// Components
 import App from './App';
 
 jest.mock('@service/userServices');
diff --git a/hotel-management/src/App.tsx b/hotel-management/src/App.tsx
index f650215..534dbb3 100644
--- a/hotel-management/src/App.tsx
+++ b/hotel-management/src/App.tsx
@@ -14,7 +14,7 @@ import RootLayout from '@component/RootLayout';
 import User from './pages/User';
 import Booking from './pages/Booking';
 import Room from './pages/Room';
-import NotFound from './pages/NotFound/NotFound';
+import NotFound from './pages/NotFound';
 import Login from '@page/Login';
 import Account from '@page/Account';
 
diff --git a/hotel-management/src/__snapshots__/App.test.tsx.snap b/hotel-management/src/__snapshots__/App.test.tsx.snap
index 5cbca46..f64b3ec 100644
--- a/hotel-management/src/__snapshots__/App.test.tsx.snap
+++ b/hotel-management/src/__snapshots__/App.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`App should render correctly 1`] = `
         class="sc-jrsKJM iDdaat"
       >
         <div
-          class="sc-pNWRh lfNGxm"
+          class="sc-pNWRh eTXcLU"
         />
       </div>
       <div
@@ -22,7 +22,7 @@ exports[`App should render correctly 1`] = `
       class="sc-jrsKJM iDdaat"
     >
       <div
-        class="sc-pNWRh lfNGxm"
+        class="sc-pNWRh eTXcLU"
       />
     </div>
     <div
diff --git a/hotel-management/src/commons/styles/Input.ts b/hotel-management/src/commons/styles/Input.ts
index 09113f5..b7a6a01 100644
--- a/hotel-management/src/commons/styles/Input.ts
+++ b/hotel-management/src/commons/styles/Input.ts
@@ -3,7 +3,11 @@ import styled, { css } from 'styled-components';
 // Styled
 import CommonInput from './CommonInput';
 
-type TInput = 'text' | 'checkbox' | 'hidden' | 'date' | 'password';
+type TInput = 'text'
+  | 'checkbox'
+  | 'hidden'
+  | 'date'
+  | 'password';
 
 interface IInputTyped {
   type?: TInput;
diff --git a/hotel-management/src/commons/styles/Spinner.ts b/hotel-management/src/commons/styles/Spinner.ts
index 0dcb41d..38f3f49 100644
--- a/hotel-management/src/commons/styles/Spinner.ts
+++ b/hotel-management/src/commons/styles/Spinner.ts
@@ -12,9 +12,8 @@ const Spinner = styled.div`
   width: 80px;
   aspect-ratio: 1;
   border-radius: 50%;
-  background:
-    radial-gradient(farthest-side, var(--primary-color) 94%, #0000) top/10px
-      10px no-repeat,
+  background: radial-gradient(farthest-side, var(--primary-color) 94%, #0000)
+      top/10px 10px no-repeat,
     conic-gradient(#0000 30%, var(--primary-color));
   -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 10px), #000 0);
   mask: none;
diff --git a/hotel-management/src/components/AppLayout/AppLayout.test.tsx b/hotel-management/src/components/AppLayout/AppLayout.test.tsx
index 6717ed4..29df2e0 100644
--- a/hotel-management/src/components/AppLayout/AppLayout.test.tsx
+++ b/hotel-management/src/components/AppLayout/AppLayout.test.tsx
@@ -1,14 +1,14 @@
-import renderer from 'react-test-renderer';
 import { BrowserRouter } from 'react-router-dom';
+import { render } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 // Components
 import AppLayout from '.';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 describe('AppLayout', () => {
   const queryClient = new QueryClient();
 
-  const wrapper = renderer.create(
+  const wrapper = render(
     <QueryClientProvider client={queryClient}>
       <BrowserRouter>
         <AppLayout />
diff --git a/hotel-management/src/components/AppLayout/__snapshots__/AppLayout.test.tsx.snap b/hotel-management/src/components/AppLayout/__snapshots__/AppLayout.test.tsx.snap
index dc7ccf8..45eb3ab 100644
--- a/hotel-management/src/components/AppLayout/__snapshots__/AppLayout.test.tsx.snap
+++ b/hotel-management/src/components/AppLayout/__snapshots__/AppLayout.test.tsx.snap
@@ -1,206 +1,360 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`AppLayout Should render correctly 1`] = `
-<div
-  className="sc-iCoHzw jFLeHb"
->
-  <header
-    className="sc-dlniIP cClxoS"
-  >
-    <p>
-      Hi, 
-      !
-    </p>
-    <ul
-      className="sc-gtsqUy gOWXQs"
-    >
-      <li>
-        <button
-          className="sc-bdnyFh bxHnoO"
-          iconStyle={
-            {
-              "size": "23px",
-            }
-          }
-          isHaveChildren={false}
-          onClick={[Function]}
-          style={
-            {
-              "backgroundColor": undefined,
-              "color": undefined,
-              "fontSize": undefined,
-            }
-          }
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="sc-iCoHzw kcSkNP"
+      >
+        <header
+          class="sc-dlniIP eqIruu"
         >
-          <svg
-            fill="currentColor"
-            height="1em"
-            stroke="currentColor"
-            strokeWidth="0"
-            style={
-              {
-                "color": undefined,
-              }
-            }
-            viewBox="0 0 512 512"
-            width="1em"
-            xmlns="http://www.w3.org/2000/svg"
+          <p>
+            Hi, 
+            !
+          </p>
+          <ul
+            class="sc-gtsqUy gOWXQs"
           >
-            <path
-              d="M258.9 48C141.92 46.42 46.42 141.92 48 258.9c1.56 112.19 92.91 203.54 205.1 205.1 117 1.6 212.48-93.9 210.88-210.88C462.44 140.91 371.09 49.56 258.9 48zm126.42 327.25a4 4 0 01-6.14-.32 124.27 124.27 0 00-32.35-29.59C321.37 329 289.11 320 256 320s-65.37 9-90.83 25.34a124.24 124.24 0 00-32.35 29.58 4 4 0 01-6.14.32A175.32 175.32 0 0180 259c-1.63-97.31 78.22-178.76 175.57-179S432 158.81 432 256a175.32 175.32 0 01-46.68 119.25z"
-            />
-            <path
-              d="M256 144c-19.72 0-37.55 7.39-50.22 20.82s-19 32-17.57 51.93C191.11 256 221.52 288 256 288s64.83-32 67.79-71.24c1.48-19.74-4.8-38.14-17.68-51.82C293.39 151.44 275.59 144 256 144z"
-            />
-          </svg>
-           
-          <span />
-        </button>
-      </li>
-      <li>
-        <button
-          className="sc-bdnyFh bxHnoO"
-          disabled={false}
-          iconStyle={
-            {
-              "size": "23px",
-            }
-          }
-          isHaveChildren={false}
-          onClick={[Function]}
-          style={
-            {
-              "backgroundColor": undefined,
-              "color": undefined,
-              "fontSize": undefined,
-            }
-          }
+            <li>
+              <button
+                aria-label="Profile"
+                class="sc-bdnyFh bxHnoO"
+                iconstyle="[object Object]"
+              >
+                <svg
+                  fill="currentColor"
+                  height="1em"
+                  stroke="currentColor"
+                  stroke-width="0"
+                  viewBox="0 0 512 512"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M258.9 48C141.92 46.42 46.42 141.92 48 258.9c1.56 112.19 92.91 203.54 205.1 205.1 117 1.6 212.48-93.9 210.88-210.88C462.44 140.91 371.09 49.56 258.9 48zm126.42 327.25a4 4 0 01-6.14-.32 124.27 124.27 0 00-32.35-29.59C321.37 329 289.11 320 256 320s-65.37 9-90.83 25.34a124.24 124.24 0 00-32.35 29.58 4 4 0 01-6.14.32A175.32 175.32 0 0180 259c-1.63-97.31 78.22-178.76 175.57-179S432 158.81 432 256a175.32 175.32 0 01-46.68 119.25z"
+                  />
+                  <path
+                    d="M256 144c-19.72 0-37.55 7.39-50.22 20.82s-19 32-17.57 51.93C191.11 256 221.52 288 256 288s64.83-32 67.79-71.24c1.48-19.74-4.8-38.14-17.68-51.82C293.39 151.44 275.59 144 256 144z"
+                  />
+                </svg>
+                 
+                <span />
+              </button>
+            </li>
+            <li>
+              <button
+                aria-label="Logout"
+                class="sc-bdnyFh bxHnoO"
+                iconstyle="[object Object]"
+              >
+                <svg
+                  aria-hidden="true"
+                  fill="none"
+                  height="1em"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                </svg>
+                 
+                <span />
+              </button>
+            </li>
+          </ul>
+        </header>
+        <aside
+          class="sc-jSFipO ejTmsl"
         >
-          <svg
-            aria-hidden="true"
-            fill="none"
-            height="1em"
-            stroke="currentColor"
-            strokeWidth="2"
-            style={
-              {
-                "color": undefined,
-              }
-            }
-            viewBox="0 0 24 24"
-            width="1em"
-            xmlns="http://www.w3.org/2000/svg"
+          <h1
+            class="sc-gKAaef kdwrvt"
           >
-            <path
-              d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
-          </svg>
-           
-          <span />
-        </button>
-      </li>
-    </ul>
-  </header>
-  <aside
-    className="sc-jSFipO ejTmsl"
-  >
-    <h1
-      className="sc-gKAaef kdwrvt"
-      onClick={[Function]}
+            Hotel Management
+          </h1>
+          <nav
+            class="sc-hKFymg eIMPQI"
+          >
+            <a
+              class="sc-eCAqax hQZHUY"
+              href="/booking"
+            >
+              <svg
+                fill="currentColor"
+                height="1em"
+                stroke="currentColor"
+                stroke-width="0"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M5 22h14c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2h-2V2h-2v2H9V2H7v2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2zM5 7h14v2H5V7z"
+                />
+              </svg>
+              <span>
+                Booking
+              </span>
+            </a>
+            <a
+              class="sc-eCAqax hQZHUY"
+              href="/user"
+            >
+              <svg
+                aria-hidden="true"
+                fill="currentColor"
+                height="1em"
+                stroke="currentColor"
+                stroke-width="0"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M4.5 6.375a4.125 4.125 0 118.25 0 4.125 4.125 0 01-8.25 0zM14.25 8.625a3.375 3.375 0 116.75 0 3.375 3.375 0 01-6.75 0zM1.5 19.125a7.125 7.125 0 0114.25 0v.003l-.001.119a.75.75 0 01-.363.63 13.067 13.067 0 01-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 01-.364-.63l-.001-.122zM17.25 19.128l-.001.144a2.25 2.25 0 01-.233.96 10.088 10.088 0 005.06-1.01.75.75 0 00.42-.643 4.875 4.875 0 00-6.957-4.611 8.586 8.586 0 011.71 5.157v.003z"
+                />
+              </svg>
+              <span>
+                User
+              </span>
+            </a>
+            <a
+              class="sc-eCAqax hQZHUY"
+              href="/room"
+            >
+              <svg
+                fill="currentColor"
+                height="1em"
+                stroke="currentColor"
+                stroke-width="0"
+                viewBox="0 0 16 16"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z"
+                />
+              </svg>
+              <span>
+                Room
+              </span>
+            </a>
+          </nav>
+        </aside>
+        <main
+          class="sc-fujznN cdRedX"
+        />
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="sc-iCoHzw kcSkNP"
     >
-      Hotel Management
-    </h1>
-    <nav
-      className="sc-hKFymg eIMPQI"
-    >
-      <a
-        className="sc-eCAqax hQZHUY"
-        href="/booking"
-        onClick={[Function]}
+      <header
+        class="sc-dlniIP eqIruu"
       >
-        <svg
-          fill="currentColor"
-          height="1em"
-          stroke="currentColor"
-          strokeWidth="0"
-          style={
-            {
-              "color": undefined,
-            }
-          }
-          viewBox="0 0 24 24"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg"
+        <p>
+          Hi, 
+          !
+        </p>
+        <ul
+          class="sc-gtsqUy gOWXQs"
         >
-          <path
-            d="M5 22h14c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2h-2V2h-2v2H9V2H7v2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2zM5 7h14v2H5V7z"
-          />
-        </svg>
-        <span>
-          Booking
-        </span>
-      </a>
-      <a
-        className="sc-eCAqax hQZHUY"
-        href="/user"
-        onClick={[Function]}
+          <li>
+            <button
+              aria-label="Profile"
+              class="sc-bdnyFh bxHnoO"
+              iconstyle="[object Object]"
+            >
+              <svg
+                fill="currentColor"
+                height="1em"
+                stroke="currentColor"
+                stroke-width="0"
+                viewBox="0 0 512 512"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M258.9 48C141.92 46.42 46.42 141.92 48 258.9c1.56 112.19 92.91 203.54 205.1 205.1 117 1.6 212.48-93.9 210.88-210.88C462.44 140.91 371.09 49.56 258.9 48zm126.42 327.25a4 4 0 01-6.14-.32 124.27 124.27 0 00-32.35-29.59C321.37 329 289.11 320 256 320s-65.37 9-90.83 25.34a124.24 124.24 0 00-32.35 29.58 4 4 0 01-6.14.32A175.32 175.32 0 0180 259c-1.63-97.31 78.22-178.76 175.57-179S432 158.81 432 256a175.32 175.32 0 01-46.68 119.25z"
+                />
+                <path
+                  d="M256 144c-19.72 0-37.55 7.39-50.22 20.82s-19 32-17.57 51.93C191.11 256 221.52 288 256 288s64.83-32 67.79-71.24c1.48-19.74-4.8-38.14-17.68-51.82C293.39 151.44 275.59 144 256 144z"
+                />
+              </svg>
+               
+              <span />
+            </button>
+          </li>
+          <li>
+            <button
+              aria-label="Logout"
+              class="sc-bdnyFh bxHnoO"
+              iconstyle="[object Object]"
+            >
+              <svg
+                aria-hidden="true"
+                fill="none"
+                height="1em"
+                stroke="currentColor"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+               
+              <span />
+            </button>
+          </li>
+        </ul>
+      </header>
+      <aside
+        class="sc-jSFipO ejTmsl"
       >
-        <svg
-          aria-hidden="true"
-          fill="currentColor"
-          height="1em"
-          stroke="currentColor"
-          strokeWidth="0"
-          style={
-            {
-              "color": undefined,
-            }
-          }
-          viewBox="0 0 24 24"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg"
+        <h1
+          class="sc-gKAaef kdwrvt"
         >
-          <path
-            d="M4.5 6.375a4.125 4.125 0 118.25 0 4.125 4.125 0 01-8.25 0zM14.25 8.625a3.375 3.375 0 116.75 0 3.375 3.375 0 01-6.75 0zM1.5 19.125a7.125 7.125 0 0114.25 0v.003l-.001.119a.75.75 0 01-.363.63 13.067 13.067 0 01-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 01-.364-.63l-.001-.122zM17.25 19.128l-.001.144a2.25 2.25 0 01-.233.96 10.088 10.088 0 005.06-1.01.75.75 0 00.42-.643 4.875 4.875 0 00-6.957-4.611 8.586 8.586 0 011.71 5.157v.003z"
-          />
-        </svg>
-        <span>
-          User
-        </span>
-      </a>
-      <a
-        className="sc-eCAqax hQZHUY"
-        href="/room"
-        onClick={[Function]}
-      >
-        <svg
-          fill="currentColor"
-          height="1em"
-          stroke="currentColor"
-          strokeWidth="0"
-          style={
-            {
-              "color": undefined,
-            }
-          }
-          viewBox="0 0 16 16"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg"
+          Hotel Management
+        </h1>
+        <nav
+          class="sc-hKFymg eIMPQI"
         >
-          <path
-            d="M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z"
-          />
-        </svg>
-        <span>
-          Room
-        </span>
-      </a>
-    </nav>
-  </aside>
-  <main
-    className="sc-fujznN cdRedX"
-  />
-</div>
+          <a
+            class="sc-eCAqax hQZHUY"
+            href="/booking"
+          >
+            <svg
+              fill="currentColor"
+              height="1em"
+              stroke="currentColor"
+              stroke-width="0"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M5 22h14c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2h-2V2h-2v2H9V2H7v2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2zM5 7h14v2H5V7z"
+              />
+            </svg>
+            <span>
+              Booking
+            </span>
+          </a>
+          <a
+            class="sc-eCAqax hQZHUY"
+            href="/user"
+          >
+            <svg
+              aria-hidden="true"
+              fill="currentColor"
+              height="1em"
+              stroke="currentColor"
+              stroke-width="0"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M4.5 6.375a4.125 4.125 0 118.25 0 4.125 4.125 0 01-8.25 0zM14.25 8.625a3.375 3.375 0 116.75 0 3.375 3.375 0 01-6.75 0zM1.5 19.125a7.125 7.125 0 0114.25 0v.003l-.001.119a.75.75 0 01-.363.63 13.067 13.067 0 01-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 01-.364-.63l-.001-.122zM17.25 19.128l-.001.144a2.25 2.25 0 01-.233.96 10.088 10.088 0 005.06-1.01.75.75 0 00.42-.643 4.875 4.875 0 00-6.957-4.611 8.586 8.586 0 011.71 5.157v.003z"
+              />
+            </svg>
+            <span>
+              User
+            </span>
+          </a>
+          <a
+            class="sc-eCAqax hQZHUY"
+            href="/room"
+          >
+            <svg
+              fill="currentColor"
+              height="1em"
+              stroke="currentColor"
+              stroke-width="0"
+              viewBox="0 0 16 16"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z"
+              />
+            </svg>
+            <span>
+              Room
+            </span>
+          </a>
+        </nav>
+      </aside>
+      <main
+        class="sc-fujznN cdRedX"
+      />
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
 `;
diff --git a/hotel-management/src/components/AppLayout/styled.ts b/hotel-management/src/components/AppLayout/styled.ts
index 90bbd79..364793b 100644
--- a/hotel-management/src/components/AppLayout/styled.ts
+++ b/hotel-management/src/components/AppLayout/styled.ts
@@ -4,7 +4,7 @@ const StyledAppLayout = styled.div`
   display: grid;
   grid-template-columns: 300px 1fr;
   grid-template-rows: auto 1fr;
-  
+
   height: 100vh;
 `;
 
diff --git a/hotel-management/src/components/ButtonIcon/ButtonIcon.test.tsx b/hotel-management/src/components/ButtonIcon/ButtonIcon.test.tsx
index d656e68..2ba19a9 100644
--- a/hotel-management/src/components/ButtonIcon/ButtonIcon.test.tsx
+++ b/hotel-management/src/components/ButtonIcon/ButtonIcon.test.tsx
@@ -1,11 +1,11 @@
-import renderer from 'react-test-renderer';
-
-// Components
-import ButtonIcon from '.';
 import { HiOutlineLogout } from 'react-icons/hi';
 
+// Components
+import { render } from '@testing-library/react';
+import ButtonIcon from '.';
+
 describe('ButtonIcon', () => {
-  const wrapper = renderer.create(
+  const wrapper = render(
     <ButtonIcon
       aria-label="Logout"
       icon={<HiOutlineLogout />}
diff --git a/hotel-management/src/components/ButtonIcon/__snapshots__/ButtonIcon.test.tsx.snap b/hotel-management/src/components/ButtonIcon/__snapshots__/ButtonIcon.test.tsx.snap
index c125584..12e3a40 100644
--- a/hotel-management/src/components/ButtonIcon/__snapshots__/ButtonIcon.test.tsx.snap
+++ b/hotel-management/src/components/ButtonIcon/__snapshots__/ButtonIcon.test.tsx.snap
@@ -1,44 +1,110 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ButtonIcon Should render correctly 1`] = `
-<button
-  className="sc-bdnyFh bxHnoO"
-  iconStyle={
-    {
-      "size": "23px",
-    }
-  }
-  isHaveChildren={false}
-  style={
-    {
-      "backgroundColor": undefined,
-      "color": undefined,
-      "fontSize": undefined,
-    }
-  }
->
-  <svg
-    aria-hidden="true"
-    fill="none"
-    height="1em"
-    stroke="currentColor"
-    strokeWidth="2"
-    style={
-      {
-        "color": undefined,
-      }
-    }
-    viewBox="0 0 24 24"
-    width="1em"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-   
-  <span />
-</button>
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <button
+        class="sc-bdnyFh bxHnoO"
+        iconstyle="[object Object]"
+      >
+        <svg
+          aria-hidden="true"
+          fill="none"
+          height="1em"
+          stroke="currentColor"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+         
+        <span />
+      </button>
+    </div>
+  </body>,
+  "container": <div>
+    <button
+      class="sc-bdnyFh bxHnoO"
+      iconstyle="[object Object]"
+    >
+      <svg
+        aria-hidden="true"
+        fill="none"
+        height="1em"
+        stroke="currentColor"
+        stroke-width="2"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+       
+      <span />
+    </button>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
 `;
diff --git a/hotel-management/src/components/ConfirmMessage/ConfirmMessage.test.tsx b/hotel-management/src/components/ConfirmMessage/ConfirmMessage.test.tsx
index e389c7a..38054eb 100644
--- a/hotel-management/src/components/ConfirmMessage/ConfirmMessage.test.tsx
+++ b/hotel-management/src/components/ConfirmMessage/ConfirmMessage.test.tsx
@@ -1,6 +1,7 @@
+import { RenderResult, fireEvent, render } from '@testing-library/react';
+
 // Components
 import ConfirmMessage from '.';
-import { RenderResult, fireEvent, render } from '@testing-library/react';
 
 describe('ConfirmMessage testing snapshot', () => {
   const message = 'Hello World!';
diff --git a/hotel-management/src/components/Form/Form.test.tsx b/hotel-management/src/components/Form/Form.test.tsx
index 7e248e6..783d197 100644
--- a/hotel-management/src/components/Form/Form.test.tsx
+++ b/hotel-management/src/components/Form/Form.test.tsx
@@ -1,7 +1,9 @@
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
 
 // Components
 import Form from '.';
+
+// Styled
 import Input from '@commonStyle/Input';
 
 describe('Form ', () => {
@@ -10,7 +12,7 @@ describe('Form ', () => {
   const handleOnSubmit = jest.fn();
   const handleOnClick = jest.fn();
 
-  const wrapper = renderer.create(
+  const wrapper = render(
     <Form onSubmit={handleOnSubmit}>
       <Form.Row label="Name" error={errorMessage}>
         <Input type="text" id="name" />
@@ -24,7 +26,11 @@ describe('Form ', () => {
         <Form.Button type="submit" name="submit" disabled={isDisable}>
           Confirm
         </Form.Button>
-        <Form.Button type="button" variations="secondary" onClick={handleOnClick}>
+        <Form.Button
+          type="button"
+          variations="secondary"
+          onClick={handleOnClick}
+        >
           Close
         </Form.Button>
       </Form.Action>
diff --git a/hotel-management/src/components/Form/__snapshots__/Form.test.tsx.snap b/hotel-management/src/components/Form/__snapshots__/Form.test.tsx.snap
index b3c34ce..4653096 100644
--- a/hotel-management/src/components/Form/__snapshots__/Form.test.tsx.snap
+++ b/hotel-management/src/components/Form/__snapshots__/Form.test.tsx.snap
@@ -1,74 +1,200 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Form  Should render correctly 1`] = `
-<form
-  className="sc-gtsqUy jMGskL"
-  onSubmit={[MockFunction]}
->
-  <div
-    className="sc-hKFymg ivIEWo"
-    direction="horizontal"
-  >
-    <label
-      className="sc-eCAqax dnXnhF"
-    >
-      Name
-    </label>
+{
+  "asFragment": [Function],
+  "baseElement": <body>
     <div>
-      <input
-        className="sc-iCoHzw csWeiH"
-        id="name"
-        type="text"
-      />
-      <p
-        className="sc-jSFipO iOcxfq"
+      <form
+        class="sc-gtsqUy jMGskL"
       >
-        This is error message
-      </p>
+        <div
+          class="sc-hKFymg ivIEWo"
+          direction="horizontal"
+        >
+          <label
+            class="sc-eCAqax dnXnhF"
+          >
+            Name
+          </label>
+          <div>
+            <input
+              class="sc-iCoHzw csWeiH"
+              id="name"
+              type="text"
+            />
+            <p
+              class="sc-jSFipO iOcxfq"
+            >
+              This is error message
+            </p>
+          </div>
+        </div>
+        <div
+          class="sc-hKFymg ivIEWo"
+          direction="horizontal"
+        >
+          <label
+            class="sc-eCAqax dnXnhF"
+          >
+            Price
+          </label>
+          <div>
+            <input
+              class="sc-iCoHzw csWeiH"
+              id="price"
+              type="text"
+            />
+            <p
+              class="sc-jSFipO iOcxfq"
+            >
+              This is error message
+            </p>
+          </div>
+        </div>
+        <div
+          class="sc-dlniIP hBqqvG"
+        >
+          <button
+            class="sc-bdnyFh sc-gKAaef bEtbaY fRlVwz"
+            disabled=""
+            name="submit"
+            type="submit"
+            variations="primary"
+          >
+            Confirm
+          </button>
+          <button
+            class="sc-bdnyFh sc-gKAaef buXbPz fRlVwz"
+            type="button"
+            variations="secondary"
+          >
+            Close
+          </button>
+        </div>
+      </form>
     </div>
-  </div>
-  <div
-    className="sc-hKFymg ivIEWo"
-    direction="horizontal"
-  >
-    <label
-      className="sc-eCAqax dnXnhF"
+  </body>,
+  "container": <div>
+    <form
+      class="sc-gtsqUy jMGskL"
     >
-      Price
-    </label>
-    <div>
-      <input
-        className="sc-iCoHzw csWeiH"
-        id="price"
-        type="text"
-      />
-      <p
-        className="sc-jSFipO iOcxfq"
+      <div
+        class="sc-hKFymg ivIEWo"
+        direction="horizontal"
       >
-        This is error message
-      </p>
-    </div>
-  </div>
-  <div
-    className="sc-dlniIP hBqqvG"
-  >
-    <button
-      className="sc-bdnyFh sc-gKAaef bEtbaY fRlVwz"
-      disabled={true}
-      name="submit"
-      type="submit"
-      variations="primary"
-    >
-      Confirm
-    </button>
-    <button
-      className="sc-bdnyFh sc-gKAaef buXbPz fRlVwz"
-      onClick={[MockFunction]}
-      type="button"
-      variations="secondary"
-    >
-      Close
-    </button>
-  </div>
-</form>
+        <label
+          class="sc-eCAqax dnXnhF"
+        >
+          Name
+        </label>
+        <div>
+          <input
+            class="sc-iCoHzw csWeiH"
+            id="name"
+            type="text"
+          />
+          <p
+            class="sc-jSFipO iOcxfq"
+          >
+            This is error message
+          </p>
+        </div>
+      </div>
+      <div
+        class="sc-hKFymg ivIEWo"
+        direction="horizontal"
+      >
+        <label
+          class="sc-eCAqax dnXnhF"
+        >
+          Price
+        </label>
+        <div>
+          <input
+            class="sc-iCoHzw csWeiH"
+            id="price"
+            type="text"
+          />
+          <p
+            class="sc-jSFipO iOcxfq"
+          >
+            This is error message
+          </p>
+        </div>
+      </div>
+      <div
+        class="sc-dlniIP hBqqvG"
+      >
+        <button
+          class="sc-bdnyFh sc-gKAaef bEtbaY fRlVwz"
+          disabled=""
+          name="submit"
+          type="submit"
+          variations="primary"
+        >
+          Confirm
+        </button>
+        <button
+          class="sc-bdnyFh sc-gKAaef buXbPz fRlVwz"
+          type="button"
+          variations="secondary"
+        >
+          Close
+        </button>
+      </div>
+    </form>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
 `;
diff --git a/hotel-management/src/components/Header/Header.test.tsx b/hotel-management/src/components/Header/Header.test.tsx
index 372a9d3..bb3d89a 100644
--- a/hotel-management/src/components/Header/Header.test.tsx
+++ b/hotel-management/src/components/Header/Header.test.tsx
@@ -1,14 +1,14 @@
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
+import { BrowserRouter } from 'react-router-dom';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 // Components
 import Header from '.';
-import { BrowserRouter } from 'react-router-dom';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 describe('Header', () => {
   const queryClient = new QueryClient();
 
-  const wrapper = renderer.create(
+  const wrapper = render(
     <QueryClientProvider client={queryClient}>
       <BrowserRouter>
         <Header accountName="Nezumi" />
diff --git a/hotel-management/src/components/Header/__snapshots__/Header.test.tsx.snap b/hotel-management/src/components/Header/__snapshots__/Header.test.tsx.snap
index 09abcf9..656178a 100644
--- a/hotel-management/src/components/Header/__snapshots__/Header.test.tsx.snap
+++ b/hotel-management/src/components/Header/__snapshots__/Header.test.tsx.snap
@@ -1,104 +1,194 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Header Should render correctly 1`] = `
-<header
-  className="sc-dlniIP cClxoS"
->
-  <p>
-    Hi, 
-    Nezumi
-    !
-  </p>
-  <ul
-    className="sc-gtsqUy gOWXQs"
-  >
-    <li>
-      <button
-        className="sc-bdnyFh bxHnoO"
-        iconStyle={
-          {
-            "size": "23px",
-          }
-        }
-        isHaveChildren={false}
-        onClick={[Function]}
-        style={
-          {
-            "backgroundColor": undefined,
-            "color": undefined,
-            "fontSize": undefined,
-          }
-        }
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <header
+        class="sc-dlniIP eqIruu"
       >
-        <svg
-          fill="currentColor"
-          height="1em"
-          stroke="currentColor"
-          strokeWidth="0"
-          style={
-            {
-              "color": undefined,
-            }
-          }
-          viewBox="0 0 512 512"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg"
+        <p>
+          Hi, 
+          Nezumi
+          !
+        </p>
+        <ul
+          class="sc-gtsqUy gOWXQs"
         >
-          <path
-            d="M258.9 48C141.92 46.42 46.42 141.92 48 258.9c1.56 112.19 92.91 203.54 205.1 205.1 117 1.6 212.48-93.9 210.88-210.88C462.44 140.91 371.09 49.56 258.9 48zm126.42 327.25a4 4 0 01-6.14-.32 124.27 124.27 0 00-32.35-29.59C321.37 329 289.11 320 256 320s-65.37 9-90.83 25.34a124.24 124.24 0 00-32.35 29.58 4 4 0 01-6.14.32A175.32 175.32 0 0180 259c-1.63-97.31 78.22-178.76 175.57-179S432 158.81 432 256a175.32 175.32 0 01-46.68 119.25z"
-          />
-          <path
-            d="M256 144c-19.72 0-37.55 7.39-50.22 20.82s-19 32-17.57 51.93C191.11 256 221.52 288 256 288s64.83-32 67.79-71.24c1.48-19.74-4.8-38.14-17.68-51.82C293.39 151.44 275.59 144 256 144z"
-          />
-        </svg>
-         
-        <span />
-      </button>
-    </li>
-    <li>
-      <button
-        className="sc-bdnyFh bxHnoO"
-        disabled={false}
-        iconStyle={
-          {
-            "size": "23px",
-          }
-        }
-        isHaveChildren={false}
-        onClick={[Function]}
-        style={
-          {
-            "backgroundColor": undefined,
-            "color": undefined,
-            "fontSize": undefined,
-          }
-        }
+          <li>
+            <button
+              aria-label="Profile"
+              class="sc-bdnyFh bxHnoO"
+              iconstyle="[object Object]"
+            >
+              <svg
+                fill="currentColor"
+                height="1em"
+                stroke="currentColor"
+                stroke-width="0"
+                viewBox="0 0 512 512"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M258.9 48C141.92 46.42 46.42 141.92 48 258.9c1.56 112.19 92.91 203.54 205.1 205.1 117 1.6 212.48-93.9 210.88-210.88C462.44 140.91 371.09 49.56 258.9 48zm126.42 327.25a4 4 0 01-6.14-.32 124.27 124.27 0 00-32.35-29.59C321.37 329 289.11 320 256 320s-65.37 9-90.83 25.34a124.24 124.24 0 00-32.35 29.58 4 4 0 01-6.14.32A175.32 175.32 0 0180 259c-1.63-97.31 78.22-178.76 175.57-179S432 158.81 432 256a175.32 175.32 0 01-46.68 119.25z"
+                />
+                <path
+                  d="M256 144c-19.72 0-37.55 7.39-50.22 20.82s-19 32-17.57 51.93C191.11 256 221.52 288 256 288s64.83-32 67.79-71.24c1.48-19.74-4.8-38.14-17.68-51.82C293.39 151.44 275.59 144 256 144z"
+                />
+              </svg>
+               
+              <span />
+            </button>
+          </li>
+          <li>
+            <button
+              aria-label="Logout"
+              class="sc-bdnyFh bxHnoO"
+              iconstyle="[object Object]"
+            >
+              <svg
+                aria-hidden="true"
+                fill="none"
+                height="1em"
+                stroke="currentColor"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+               
+              <span />
+            </button>
+          </li>
+        </ul>
+      </header>
+    </div>
+  </body>,
+  "container": <div>
+    <header
+      class="sc-dlniIP eqIruu"
+    >
+      <p>
+        Hi, 
+        Nezumi
+        !
+      </p>
+      <ul
+        class="sc-gtsqUy gOWXQs"
       >
-        <svg
-          aria-hidden="true"
-          fill="none"
-          height="1em"
-          stroke="currentColor"
-          strokeWidth="2"
-          style={
-            {
-              "color": undefined,
-            }
-          }
-          viewBox="0 0 24 24"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
-        </svg>
-         
-        <span />
-      </button>
-    </li>
-  </ul>
-</header>
+        <li>
+          <button
+            aria-label="Profile"
+            class="sc-bdnyFh bxHnoO"
+            iconstyle="[object Object]"
+          >
+            <svg
+              fill="currentColor"
+              height="1em"
+              stroke="currentColor"
+              stroke-width="0"
+              viewBox="0 0 512 512"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M258.9 48C141.92 46.42 46.42 141.92 48 258.9c1.56 112.19 92.91 203.54 205.1 205.1 117 1.6 212.48-93.9 210.88-210.88C462.44 140.91 371.09 49.56 258.9 48zm126.42 327.25a4 4 0 01-6.14-.32 124.27 124.27 0 00-32.35-29.59C321.37 329 289.11 320 256 320s-65.37 9-90.83 25.34a124.24 124.24 0 00-32.35 29.58 4 4 0 01-6.14.32A175.32 175.32 0 0180 259c-1.63-97.31 78.22-178.76 175.57-179S432 158.81 432 256a175.32 175.32 0 01-46.68 119.25z"
+              />
+              <path
+                d="M256 144c-19.72 0-37.55 7.39-50.22 20.82s-19 32-17.57 51.93C191.11 256 221.52 288 256 288s64.83-32 67.79-71.24c1.48-19.74-4.8-38.14-17.68-51.82C293.39 151.44 275.59 144 256 144z"
+              />
+            </svg>
+             
+            <span />
+          </button>
+        </li>
+        <li>
+          <button
+            aria-label="Logout"
+            class="sc-bdnyFh bxHnoO"
+            iconstyle="[object Object]"
+          >
+            <svg
+              aria-hidden="true"
+              fill="none"
+              height="1em"
+              stroke="currentColor"
+              stroke-width="2"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+             
+            <span />
+          </button>
+        </li>
+      </ul>
+    </header>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
 `;
diff --git a/hotel-management/src/components/Header/styled.ts b/hotel-management/src/components/Header/styled.ts
index 9ba8124..fcb68b3 100644
--- a/hotel-management/src/components/Header/styled.ts
+++ b/hotel-management/src/components/Header/styled.ts
@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 const StyledHeader = styled.header`
   border-bottom: 1px solid var(--border-color);
-  
+
   padding: 20px 40px;
 
   display: flex;
diff --git a/hotel-management/src/components/HeaderMenu/HeaderMenu.test.tsx b/hotel-management/src/components/HeaderMenu/HeaderMenu.test.tsx
index cafb5fc..8748ebb 100644
--- a/hotel-management/src/components/HeaderMenu/HeaderMenu.test.tsx
+++ b/hotel-management/src/components/HeaderMenu/HeaderMenu.test.tsx
@@ -1,14 +1,14 @@
-import renderer from 'react-test-renderer';
+import { BrowserRouter } from 'react-router-dom';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { render } from '@testing-library/react';
 
 // Components
 import HeaderMenu from '.';
-import { BrowserRouter } from 'react-router-dom';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 describe('HeaderMenu', () => {
   const queryClient = new QueryClient();
 
-  const wrapper = renderer.create(
+  const wrapper = render(
     <QueryClientProvider client={queryClient}>
       <BrowserRouter>
         <HeaderMenu />
diff --git a/hotel-management/src/components/HeaderMenu/__snapshots__/HeaderMenu.test.tsx.snap b/hotel-management/src/components/HeaderMenu/__snapshots__/HeaderMenu.test.tsx.snap
index a0a224e..c88ef2e 100644
--- a/hotel-management/src/components/HeaderMenu/__snapshots__/HeaderMenu.test.tsx.snap
+++ b/hotel-management/src/components/HeaderMenu/__snapshots__/HeaderMenu.test.tsx.snap
@@ -1,95 +1,176 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`HeaderMenu Should render correctly 1`] = `
-<ul
-  className="sc-gtsqUy gOWXQs"
->
-  <li>
-    <button
-      className="sc-bdnyFh bxHnoO"
-      iconStyle={
-        {
-          "size": "23px",
-        }
-      }
-      isHaveChildren={false}
-      onClick={[Function]}
-      style={
-        {
-          "backgroundColor": undefined,
-          "color": undefined,
-          "fontSize": undefined,
-        }
-      }
-    >
-      <svg
-        fill="currentColor"
-        height="1em"
-        stroke="currentColor"
-        strokeWidth="0"
-        style={
-          {
-            "color": undefined,
-          }
-        }
-        viewBox="0 0 512 512"
-        width="1em"
-        xmlns="http://www.w3.org/2000/svg"
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <ul
+        class="sc-gtsqUy gOWXQs"
       >
-        <path
-          d="M258.9 48C141.92 46.42 46.42 141.92 48 258.9c1.56 112.19 92.91 203.54 205.1 205.1 117 1.6 212.48-93.9 210.88-210.88C462.44 140.91 371.09 49.56 258.9 48zm126.42 327.25a4 4 0 01-6.14-.32 124.27 124.27 0 00-32.35-29.59C321.37 329 289.11 320 256 320s-65.37 9-90.83 25.34a124.24 124.24 0 00-32.35 29.58 4 4 0 01-6.14.32A175.32 175.32 0 0180 259c-1.63-97.31 78.22-178.76 175.57-179S432 158.81 432 256a175.32 175.32 0 01-46.68 119.25z"
-        />
-        <path
-          d="M256 144c-19.72 0-37.55 7.39-50.22 20.82s-19 32-17.57 51.93C191.11 256 221.52 288 256 288s64.83-32 67.79-71.24c1.48-19.74-4.8-38.14-17.68-51.82C293.39 151.44 275.59 144 256 144z"
-        />
-      </svg>
-       
-      <span />
-    </button>
-  </li>
-  <li>
-    <button
-      className="sc-bdnyFh bxHnoO"
-      disabled={false}
-      iconStyle={
-        {
-          "size": "23px",
-        }
-      }
-      isHaveChildren={false}
-      onClick={[Function]}
-      style={
-        {
-          "backgroundColor": undefined,
-          "color": undefined,
-          "fontSize": undefined,
-        }
-      }
+        <li>
+          <button
+            aria-label="Profile"
+            class="sc-bdnyFh bxHnoO"
+            iconstyle="[object Object]"
+          >
+            <svg
+              fill="currentColor"
+              height="1em"
+              stroke="currentColor"
+              stroke-width="0"
+              viewBox="0 0 512 512"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M258.9 48C141.92 46.42 46.42 141.92 48 258.9c1.56 112.19 92.91 203.54 205.1 205.1 117 1.6 212.48-93.9 210.88-210.88C462.44 140.91 371.09 49.56 258.9 48zm126.42 327.25a4 4 0 01-6.14-.32 124.27 124.27 0 00-32.35-29.59C321.37 329 289.11 320 256 320s-65.37 9-90.83 25.34a124.24 124.24 0 00-32.35 29.58 4 4 0 01-6.14.32A175.32 175.32 0 0180 259c-1.63-97.31 78.22-178.76 175.57-179S432 158.81 432 256a175.32 175.32 0 01-46.68 119.25z"
+              />
+              <path
+                d="M256 144c-19.72 0-37.55 7.39-50.22 20.82s-19 32-17.57 51.93C191.11 256 221.52 288 256 288s64.83-32 67.79-71.24c1.48-19.74-4.8-38.14-17.68-51.82C293.39 151.44 275.59 144 256 144z"
+              />
+            </svg>
+             
+            <span />
+          </button>
+        </li>
+        <li>
+          <button
+            aria-label="Logout"
+            class="sc-bdnyFh bxHnoO"
+            iconstyle="[object Object]"
+          >
+            <svg
+              aria-hidden="true"
+              fill="none"
+              height="1em"
+              stroke="currentColor"
+              stroke-width="2"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+             
+            <span />
+          </button>
+        </li>
+      </ul>
+    </div>
+  </body>,
+  "container": <div>
+    <ul
+      class="sc-gtsqUy gOWXQs"
     >
-      <svg
-        aria-hidden="true"
-        fill="none"
-        height="1em"
-        stroke="currentColor"
-        strokeWidth="2"
-        style={
-          {
-            "color": undefined,
-          }
-        }
-        viewBox="0 0 24 24"
-        width="1em"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-      </svg>
-       
-      <span />
-    </button>
-  </li>
-</ul>
+      <li>
+        <button
+          aria-label="Profile"
+          class="sc-bdnyFh bxHnoO"
+          iconstyle="[object Object]"
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            stroke="currentColor"
+            stroke-width="0"
+            viewBox="0 0 512 512"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M258.9 48C141.92 46.42 46.42 141.92 48 258.9c1.56 112.19 92.91 203.54 205.1 205.1 117 1.6 212.48-93.9 210.88-210.88C462.44 140.91 371.09 49.56 258.9 48zm126.42 327.25a4 4 0 01-6.14-.32 124.27 124.27 0 00-32.35-29.59C321.37 329 289.11 320 256 320s-65.37 9-90.83 25.34a124.24 124.24 0 00-32.35 29.58 4 4 0 01-6.14.32A175.32 175.32 0 0180 259c-1.63-97.31 78.22-178.76 175.57-179S432 158.81 432 256a175.32 175.32 0 01-46.68 119.25z"
+            />
+            <path
+              d="M256 144c-19.72 0-37.55 7.39-50.22 20.82s-19 32-17.57 51.93C191.11 256 221.52 288 256 288s64.83-32 67.79-71.24c1.48-19.74-4.8-38.14-17.68-51.82C293.39 151.44 275.59 144 256 144z"
+            />
+          </svg>
+           
+          <span />
+        </button>
+      </li>
+      <li>
+        <button
+          aria-label="Logout"
+          class="sc-bdnyFh bxHnoO"
+          iconstyle="[object Object]"
+        >
+          <svg
+            aria-hidden="true"
+            fill="none"
+            height="1em"
+            stroke="currentColor"
+            stroke-width="2"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+           
+          <span />
+        </button>
+      </li>
+    </ul>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
 `;
diff --git a/hotel-management/src/components/Menus/Menus.test.tsx b/hotel-management/src/components/Menus/Menus.test.tsx
index 781e901..90fd77a 100644
--- a/hotel-management/src/components/Menus/Menus.test.tsx
+++ b/hotel-management/src/components/Menus/Menus.test.tsx
@@ -1,8 +1,9 @@
-// Components
-import Menus from '.';
 import { RiEditBoxFill, RiDeleteBin2Line } from 'react-icons/ri';
 import { RenderResult, fireEvent, render } from '@testing-library/react';
 
+// Components
+import Menus from '.';
+
 describe('Menus', () => {
   const id = '123';
   const handleOnClick = jest.fn();
diff --git a/hotel-management/src/components/Menus/index.tsx b/hotel-management/src/components/Menus/index.tsx
index 70bf25f..b6e1909 100644
--- a/hotel-management/src/components/Menus/index.tsx
+++ b/hotel-management/src/components/Menus/index.tsx
@@ -2,13 +2,17 @@ import { MouseEvent, ReactNode, useContext, useState } from 'react';
 
 // Components
 import { HiEllipsisVertical } from 'react-icons/hi2';
+import ButtonIcon from '@component/ButtonIcon';
 
 // Hooks
 import { useOutsideClick } from '@hook/useOutsideClick';
-import ButtonIcon from '@component/ButtonIcon';
 
 // Styled
-import { StyledMenu, StyledList, StyledToggle } from './styled';
+import {
+  StyledMenu,
+  StyledList,
+  StyledToggle
+} from './styled';
 
 // Contexts
 import MenusContext from '@context/MenuContext';
diff --git a/hotel-management/src/components/Message/Message.test.tsx b/hotel-management/src/components/Message/Message.test.tsx
index 0aa2d76..660b276 100644
--- a/hotel-management/src/components/Message/Message.test.tsx
+++ b/hotel-management/src/components/Message/Message.test.tsx
@@ -1,10 +1,10 @@
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
 
 // Components
 import Message from '.';
 
 describe('Message', () => {
-  const wrapper = renderer.create(<Message>This is a message!</Message>);
+  const wrapper = render(<Message>This is a message!</Message>);
 
   test('Should render correctly', () => {
     expect(wrapper).toMatchSnapshot();
diff --git a/hotel-management/src/components/Message/__snapshots__/Message.test.tsx.snap b/hotel-management/src/components/Message/__snapshots__/Message.test.tsx.snap
index b817e31..b53b60e 100644
--- a/hotel-management/src/components/Message/__snapshots__/Message.test.tsx.snap
+++ b/hotel-management/src/components/Message/__snapshots__/Message.test.tsx.snap
@@ -1,9 +1,74 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Message Should render correctly 1`] = `
-<p
-  className="sc-bdnyFh fIKUZt"
->
-  This is a message!
-</p>
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <p
+        class="sc-bdnyFh fIKUZt"
+      >
+        This is a message!
+      </p>
+    </div>
+  </body>,
+  "container": <div>
+    <p
+      class="sc-bdnyFh fIKUZt"
+    >
+      This is a message!
+    </p>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
 `;
diff --git a/hotel-management/src/components/Modal/Modal.test.tsx b/hotel-management/src/components/Modal/Modal.test.tsx
index 7e17f35..5c43801 100644
--- a/hotel-management/src/components/Modal/Modal.test.tsx
+++ b/hotel-management/src/components/Modal/Modal.test.tsx
@@ -1,11 +1,11 @@
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
 
 // Components
 import Modal from '.';
 import Button from '@commonStyle/Button';
 
 describe('Modal', () => {
-  const wrapper = renderer.create(
+  const wrapper = render(
     <Modal>
       <Modal.Open
         modalName="room-form"
diff --git a/hotel-management/src/components/Modal/__snapshots__/Modal.test.tsx.snap b/hotel-management/src/components/Modal/__snapshots__/Modal.test.tsx.snap
index 3df1188..423ae14 100644
--- a/hotel-management/src/components/Modal/__snapshots__/Modal.test.tsx.snap
+++ b/hotel-management/src/components/Modal/__snapshots__/Modal.test.tsx.snap
@@ -1,11 +1,76 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Modal Should render correctly 1`] = `
-<button
-  className="sc-eCAqax iNUTro"
-  onClick={[Function]}
-  variations="primary"
->
-  Add room
-</button>
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <button
+        class="sc-eCAqax iNUTro"
+        variations="primary"
+      >
+        Add room
+      </button>
+    </div>
+  </body>,
+  "container": <div>
+    <button
+      class="sc-eCAqax iNUTro"
+      variations="primary"
+    >
+      Add room
+    </button>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
 `;
diff --git a/hotel-management/src/components/Nav/Nav.test.tsx b/hotel-management/src/components/Nav/Nav.test.tsx
index 6436c79..7747d44 100644
--- a/hotel-management/src/components/Nav/Nav.test.tsx
+++ b/hotel-management/src/components/Nav/Nav.test.tsx
@@ -1,11 +1,12 @@
-import renderer from 'react-test-renderer';
+
+import { render } from '@testing-library/react';
 import { BrowserRouter } from 'react-router-dom';
 
 // Components
 import Nav from '.';
 
 describe('Nav', () => {
-  const wrapper = renderer.create(
+  const wrapper = render(
     <BrowserRouter>
       <Nav />
     </BrowserRouter>
diff --git a/hotel-management/src/components/Nav/__snapshots__/Nav.test.tsx.snap b/hotel-management/src/components/Nav/__snapshots__/Nav.test.tsx.snap
index fe5653d..2eba8b9 100644
--- a/hotel-management/src/components/Nav/__snapshots__/Nav.test.tsx.snap
+++ b/hotel-management/src/components/Nav/__snapshots__/Nav.test.tsx.snap
@@ -1,90 +1,200 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Nav Should render correctly 1`] = `
-<nav
-  className="sc-bdnyFh gGCifp"
->
-  <a
-    className="sc-gtsqUy gbSQWi"
-    href="/booking"
-    onClick={[Function]}
-  >
-    <svg
-      fill="currentColor"
-      height="1em"
-      stroke="currentColor"
-      strokeWidth="0"
-      style={
-        {
-          "color": undefined,
-        }
-      }
-      viewBox="0 0 24 24"
-      width="1em"
-      xmlns="http://www.w3.org/2000/svg"
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <nav
+        class="sc-bdnyFh gGCifp"
+      >
+        <a
+          class="sc-gtsqUy gbSQWi"
+          href="/booking"
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            stroke="currentColor"
+            stroke-width="0"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M5 22h14c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2h-2V2h-2v2H9V2H7v2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2zM5 7h14v2H5V7z"
+            />
+          </svg>
+          <span>
+            Booking
+          </span>
+        </a>
+        <a
+          class="sc-gtsqUy gbSQWi"
+          href="/user"
+        >
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="1em"
+            stroke="currentColor"
+            stroke-width="0"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M4.5 6.375a4.125 4.125 0 118.25 0 4.125 4.125 0 01-8.25 0zM14.25 8.625a3.375 3.375 0 116.75 0 3.375 3.375 0 01-6.75 0zM1.5 19.125a7.125 7.125 0 0114.25 0v.003l-.001.119a.75.75 0 01-.363.63 13.067 13.067 0 01-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 01-.364-.63l-.001-.122zM17.25 19.128l-.001.144a2.25 2.25 0 01-.233.96 10.088 10.088 0 005.06-1.01.75.75 0 00.42-.643 4.875 4.875 0 00-6.957-4.611 8.586 8.586 0 011.71 5.157v.003z"
+            />
+          </svg>
+          <span>
+            User
+          </span>
+        </a>
+        <a
+          class="sc-gtsqUy gbSQWi"
+          href="/room"
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            stroke="currentColor"
+            stroke-width="0"
+            viewBox="0 0 16 16"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z"
+            />
+          </svg>
+          <span>
+            Room
+          </span>
+        </a>
+      </nav>
+    </div>
+  </body>,
+  "container": <div>
+    <nav
+      class="sc-bdnyFh gGCifp"
     >
-      <path
-        d="M5 22h14c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2h-2V2h-2v2H9V2H7v2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2zM5 7h14v2H5V7z"
-      />
-    </svg>
-    <span>
-      Booking
-    </span>
-  </a>
-  <a
-    className="sc-gtsqUy gbSQWi"
-    href="/user"
-    onClick={[Function]}
-  >
-    <svg
-      aria-hidden="true"
-      fill="currentColor"
-      height="1em"
-      stroke="currentColor"
-      strokeWidth="0"
-      style={
-        {
-          "color": undefined,
-        }
-      }
-      viewBox="0 0 24 24"
-      width="1em"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M4.5 6.375a4.125 4.125 0 118.25 0 4.125 4.125 0 01-8.25 0zM14.25 8.625a3.375 3.375 0 116.75 0 3.375 3.375 0 01-6.75 0zM1.5 19.125a7.125 7.125 0 0114.25 0v.003l-.001.119a.75.75 0 01-.363.63 13.067 13.067 0 01-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 01-.364-.63l-.001-.122zM17.25 19.128l-.001.144a2.25 2.25 0 01-.233.96 10.088 10.088 0 005.06-1.01.75.75 0 00.42-.643 4.875 4.875 0 00-6.957-4.611 8.586 8.586 0 011.71 5.157v.003z"
-      />
-    </svg>
-    <span>
-      User
-    </span>
-  </a>
-  <a
-    className="sc-gtsqUy gbSQWi"
-    href="/room"
-    onClick={[Function]}
-  >
-    <svg
-      fill="currentColor"
-      height="1em"
-      stroke="currentColor"
-      strokeWidth="0"
-      style={
-        {
-          "color": undefined,
-        }
-      }
-      viewBox="0 0 16 16"
-      width="1em"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z"
-      />
-    </svg>
-    <span>
-      Room
-    </span>
-  </a>
-</nav>
+      <a
+        class="sc-gtsqUy gbSQWi"
+        href="/booking"
+      >
+        <svg
+          fill="currentColor"
+          height="1em"
+          stroke="currentColor"
+          stroke-width="0"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M5 22h14c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2h-2V2h-2v2H9V2H7v2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2zM5 7h14v2H5V7z"
+          />
+        </svg>
+        <span>
+          Booking
+        </span>
+      </a>
+      <a
+        class="sc-gtsqUy gbSQWi"
+        href="/user"
+      >
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          height="1em"
+          stroke="currentColor"
+          stroke-width="0"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M4.5 6.375a4.125 4.125 0 118.25 0 4.125 4.125 0 01-8.25 0zM14.25 8.625a3.375 3.375 0 116.75 0 3.375 3.375 0 01-6.75 0zM1.5 19.125a7.125 7.125 0 0114.25 0v.003l-.001.119a.75.75 0 01-.363.63 13.067 13.067 0 01-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 01-.364-.63l-.001-.122zM17.25 19.128l-.001.144a2.25 2.25 0 01-.233.96 10.088 10.088 0 005.06-1.01.75.75 0 00.42-.643 4.875 4.875 0 00-6.957-4.611 8.586 8.586 0 011.71 5.157v.003z"
+          />
+        </svg>
+        <span>
+          User
+        </span>
+      </a>
+      <a
+        class="sc-gtsqUy gbSQWi"
+        href="/room"
+      >
+        <svg
+          fill="currentColor"
+          height="1em"
+          stroke="currentColor"
+          stroke-width="0"
+          viewBox="0 0 16 16"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z"
+          />
+        </svg>
+        <span>
+          Room
+        </span>
+      </a>
+    </nav>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
 `;
diff --git a/hotel-management/src/components/Pagination/__snapshots__/index.test.tsx.snap b/hotel-management/src/components/Pagination/__snapshots__/index.test.tsx.snap
new file mode 100644
index 0000000..9b98ef4
--- /dev/null
+++ b/hotel-management/src/components/Pagination/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,202 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Pagination Should render correctly 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="sc-bdnyFh kjuCvI"
+      >
+        <p>
+          Showing 
+          1
+           to 
+          5
+           of 
+          <span>
+            10
+          </span>
+           results
+        </p>
+        <div
+          class="sc-gtsqUy gUbTlC"
+        >
+          <button
+            class="sc-dlniIP kLAzMx"
+            disabled=""
+          >
+            <svg
+              fill="currentColor"
+              height="1em"
+              stroke="currentColor"
+              stroke-width="0"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M0 0h24v24H0V0z"
+                fill="none"
+              />
+              <path
+                d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"
+              />
+            </svg>
+             
+            <span>
+              Previous
+            </span>
+          </button>
+          <button
+            class="sc-dlniIP kLAzMx"
+          >
+            <span>
+              Next
+            </span>
+            <svg
+              fill="currentColor"
+              height="1em"
+              stroke="currentColor"
+              stroke-width="0"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M0 0h24v24H0V0z"
+                fill="none"
+              />
+              <path
+                d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
+              />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="sc-bdnyFh kjuCvI"
+    >
+      <p>
+        Showing 
+        1
+         to 
+        5
+         of 
+        <span>
+          10
+        </span>
+         results
+      </p>
+      <div
+        class="sc-gtsqUy gUbTlC"
+      >
+        <button
+          class="sc-dlniIP kLAzMx"
+          disabled=""
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            stroke="currentColor"
+            stroke-width="0"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M0 0h24v24H0V0z"
+              fill="none"
+            />
+            <path
+              d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"
+            />
+          </svg>
+           
+          <span>
+            Previous
+          </span>
+        </button>
+        <button
+          class="sc-dlniIP kLAzMx"
+        >
+          <span>
+            Next
+          </span>
+          <svg
+            fill="currentColor"
+            height="1em"
+            stroke="currentColor"
+            stroke-width="0"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M0 0h24v24H0V0z"
+              fill="none"
+            />
+            <path
+              d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
+            />
+          </svg>
+        </button>
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
diff --git a/hotel-management/src/components/Pagination/index.test.tsx b/hotel-management/src/components/Pagination/index.test.tsx
new file mode 100644
index 0000000..aa428cb
--- /dev/null
+++ b/hotel-management/src/components/Pagination/index.test.tsx
@@ -0,0 +1,44 @@
+import { render, fireEvent, RenderResult } from '@testing-library/react';
+import { BrowserRouter } from 'react-router-dom';
+
+// Components
+import Pagination from '.';
+
+describe('Pagination', () => {
+  const count = 10;
+  let wrapper: RenderResult | null = null;
+
+  beforeEach(() => {
+    wrapper = render(
+      <BrowserRouter>
+        <Pagination count={count} />
+      </BrowserRouter>
+    );
+  });
+
+  test('Should render correctly', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  test('Next button should be disable when in the last page', () => {
+    fireEvent.click(wrapper!.getByText('Next'));
+
+    expect(wrapper!.getByText('Next').closest('button')).toBeDisabled();
+  });
+
+  test('Previous button should not be disable when move to second page', () => {
+    fireEvent.click(wrapper!.getByText('Next'));
+
+    expect(wrapper!.getByText('Previous').closest('button')).not.toBeDisabled();
+  });
+
+  test('Previous button should be disabled when go back to the first page', () => {
+    // Navigate to the second page
+    fireEvent.click(wrapper!.getByText('Next'));
+
+    // Back to the first page
+    fireEvent.click(wrapper!.getByText('Previous'));
+
+    expect(wrapper!.getByText('Previous').closest('button')).toBeDisabled();
+  });
+});
diff --git a/hotel-management/src/components/Pagination/index.tsx b/hotel-management/src/components/Pagination/index.tsx
index 118ea73..2ed3d40 100644
--- a/hotel-management/src/components/Pagination/index.tsx
+++ b/hotel-management/src/components/Pagination/index.tsx
@@ -22,14 +22,18 @@ const Pagination = ({ count }: IPagination) => {
   const totalPage = Math.ceil(count / DEFAULT_PAGE_SIZE);
 
   const nextPage = () => {
-    const next = currentPage === totalPage ? currentPage : currentPage + 1;
+    const next = currentPage === totalPage
+    ? currentPage
+    : currentPage + 1;
 
     searchParams.set('page', next.toString());
     setSearchParams(searchParams);
   };
 
   const previousPage = () => {
-    const previous = currentPage === 1 ? currentPage : currentPage - 1;
+    const previous = currentPage === 1
+    ? currentPage
+    : currentPage - 1;
 
     searchParams.set('page', previous.toString());
     setSearchParams(searchParams);
@@ -38,7 +42,9 @@ const Pagination = ({ count }: IPagination) => {
   const fromIndex = (currentPage - 1) * DEFAULT_PAGE_SIZE + 1;
 
   const toIndex =
-    currentPage === totalPage ? count : currentPage * DEFAULT_PAGE_SIZE;
+    currentPage === totalPage
+    ? count
+    : currentPage * DEFAULT_PAGE_SIZE;
 
   return (
     totalPage > 1 && (
diff --git a/hotel-management/src/components/RootLayout/__tests__/__snapshots__/index.test.tsx.snap b/hotel-management/src/components/RootLayout/__tests__/__snapshots__/index.test.tsx.snap
new file mode 100644
index 0000000..ea98eb9
--- /dev/null
+++ b/hotel-management/src/components/RootLayout/__tests__/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,78 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RootLayout Should render correctly 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="sc-gtsqUy brPTv"
+      >
+        <div
+          class="sc-bdnyFh gtsksw"
+        />
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="sc-gtsqUy brPTv"
+    >
+      <div
+        class="sc-bdnyFh gtsksw"
+      />
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
diff --git a/hotel-management/src/components/RootLayout/__tests__/index.test.tsx b/hotel-management/src/components/RootLayout/__tests__/index.test.tsx
new file mode 100644
index 0000000..dc7d98c
--- /dev/null
+++ b/hotel-management/src/components/RootLayout/__tests__/index.test.tsx
@@ -0,0 +1,19 @@
+import { render } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+// Components
+import RootLayout from '..';
+
+describe('RootLayout', () => {
+  test('Should render correctly', () => {
+    const queryClient = new QueryClient();
+
+    const wrapper = render(
+      <QueryClientProvider client={queryClient}>
+        <RootLayout />
+      </QueryClientProvider>
+    );
+
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/hotel-management/src/components/RouteProtected/__tests__/__snapshots__/index.test.tsx.snap b/hotel-management/src/components/RouteProtected/__tests__/__snapshots__/index.test.tsx.snap
new file mode 100644
index 0000000..c9f49f2
--- /dev/null
+++ b/hotel-management/src/components/RouteProtected/__tests__/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,62 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RouteProtected Should render correctly 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div />
+  </body>,
+  "container": <div />,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
diff --git a/hotel-management/src/components/RouteProtected/__tests__/index.test.tsx b/hotel-management/src/components/RouteProtected/__tests__/index.test.tsx
new file mode 100644
index 0000000..5628515
--- /dev/null
+++ b/hotel-management/src/components/RouteProtected/__tests__/index.test.tsx
@@ -0,0 +1,23 @@
+import { render } from '@testing-library/react';
+import RouteProtected from '..';
+import AppLayout from '@component/AppLayout';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { BrowserRouter } from 'react-router-dom';
+
+describe('RouteProtected', () => {
+  test('Should render correctly', () => {
+    const queryClient = new QueryClient();
+
+    const wrapper = render(
+      <QueryClientProvider client={queryClient}>
+        <BrowserRouter>
+          <RouteProtected>
+            <AppLayout />
+          </RouteProtected>
+        </BrowserRouter>
+      </QueryClientProvider>
+    );
+
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/hotel-management/src/components/Search/Search.test.tsx b/hotel-management/src/components/Search/Search.test.tsx
index fd3fb05..5e6ff00 100644
--- a/hotel-management/src/components/Search/Search.test.tsx
+++ b/hotel-management/src/components/Search/Search.test.tsx
@@ -1,67 +1,42 @@
-import { BrowserRouter } from 'react-router-dom';
-import { useState } from 'react';
+import { BrowserRouter, useSearchParams } from 'react-router-dom';
+import { RenderResult, fireEvent, render } from '@testing-library/react';
 
 // Components
 import Search from '.';
-import {
-  RenderResult,
-  fireEvent,
-  render,
-  act,
-} from '@testing-library/react';
 
-let mockSearchParam = '';
-
-jest.useFakeTimers();
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
-  useSearchParams: () => {
-    const [params, setParams] = useState(new URLSearchParams(mockSearchParam));
-    return [
-      params,
-      (newParams: string) => {
-        mockSearchParam = newParams;
-        setParams(new URLSearchParams(newParams));
-      },
-    ];
-  },
+  useSearchParams: jest.fn(),
+}));
+
+jest.mock('@hook/useDebounce', () => ({
+  useDebounce: jest.fn((value) => value),
 }));
 
 describe('Search', () => {
-  // const placeHolder = 'Search placeholder...';
-  // let wrapper: RenderResult | null = null;
+  const mockSearchParams = new URLSearchParams();
+  (useSearchParams as jest.Mock).mockReturnValue([mockSearchParams, jest.fn()]);
+  let wrapper: RenderResult | null = null;
 
-  // beforeEach(() => {
-  //   wrapper = render(
-  //     <BrowserRouter>
-  //       <Search setPlaceHolder={placeHolder} />
-  //     </BrowserRouter>
-  //   );
-  // });
-
-  // test('Should render correctly', () => {
-  //   expect(wrapper).toMatchSnapshot();
-  // });
-
-  test('Should add query to url after 1 second', async () => {
-    let wrapper: RenderResult | null = null;
-    act(() => {
-      wrapper = render(
-        <BrowserRouter>
-          <Search setPlaceHolder={'Search placeholder...'} />
-        </BrowserRouter>
-      );
-    });
-
-    const searchField = await wrapper!.findByPlaceholderText(
-      'Search placeholder...'
+  beforeEach(() => {
+    wrapper = render(
+      <BrowserRouter>
+        <Search setPlaceHolder="Search" />
+      </BrowserRouter>
     );
+  });
 
-    act(() => {
-      fireEvent.change(searchField, { target: { value: 'abc' } });
-    });
+  test('Should render correctly', () => {
+    expect(wrapper).toMatchSnapshot();
+  })
 
-    // jest.advanceTimersByTime(1000);
+  test('updates searchParams on input change', () => {
+    const searchInput = wrapper!.getByPlaceholderText('Search');
+
+    // Type into the search input
+    fireEvent.change(searchInput, { target: { value: 'Search value' } });
+
+    // Expect searchParams to be updated
+    expect(mockSearchParams.get('search')).toBe('Search value');
   });
 });
-  
\ No newline at end of file
diff --git a/hotel-management/src/components/Search/__snapshots__/Search.test.tsx.snap b/hotel-management/src/components/Search/__snapshots__/Search.test.tsx.snap
new file mode 100644
index 0000000..544f2a0
--- /dev/null
+++ b/hotel-management/src/components/Search/__snapshots__/Search.test.tsx.snap
@@ -0,0 +1,72 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Search Should render correctly 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <input
+        class="sc-bdnyFh fkeDFp"
+        placeholder="Search"
+      />
+    </div>
+  </body>,
+  "container": <div>
+    <input
+      class="sc-bdnyFh fkeDFp"
+      placeholder="Search"
+    />
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
diff --git a/hotel-management/src/components/Select/Select.test.tsx b/hotel-management/src/components/Select/Select.test.tsx
index ad3dbc9..68cdf2e 100644
--- a/hotel-management/src/components/Select/Select.test.tsx
+++ b/hotel-management/src/components/Select/Select.test.tsx
@@ -1,4 +1,4 @@
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
 
 // Components
 import Select from '.';
@@ -11,13 +11,13 @@ describe('Select', () => {
     },
     {
       label: 'Option 2',
-      value: 'Value 2'
-    }
+      value: 'Value 2',
+    },
   ];
   const value = 'Temp value';
   const handleOnChange = jest.fn();
 
-  const wrapper = renderer.create(
+  const wrapper = render(
     <Select
       options={options}
       value={value}
diff --git a/hotel-management/src/components/Select/__snapshots__/Select.test.tsx.snap b/hotel-management/src/components/Select/__snapshots__/Select.test.tsx.snap
index 0ab245e..7d68298 100644
--- a/hotel-management/src/components/Select/__snapshots__/Select.test.tsx.snap
+++ b/hotel-management/src/components/Select/__snapshots__/Select.test.tsx.snap
@@ -1,24 +1,94 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Select Should render correctly 1`] = `
-<select
-  aria-label="Sort"
-  className="sc-bdnyFh hPOEsG"
-  disabled={false}
-  onChange={[MockFunction]}
-  value="Temp value"
->
-  <option
-    data-testid="select-option"
-    value="Value 1"
-  >
-    Option 1
-  </option>
-  <option
-    data-testid="select-option"
-    value="Value 2"
-  >
-    Option 2
-  </option>
-</select>
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <select
+        aria-label="Sort"
+        class="sc-bdnyFh hPOEsG"
+      >
+        <option
+          value="Value 1"
+        >
+          Option 1
+        </option>
+        <option
+          value="Value 2"
+        >
+          Option 2
+        </option>
+      </select>
+    </div>
+  </body>,
+  "container": <div>
+    <select
+      aria-label="Sort"
+      class="sc-bdnyFh hPOEsG"
+    >
+      <option
+        value="Value 1"
+      >
+        Option 1
+      </option>
+      <option
+        value="Value 2"
+      >
+        Option 2
+      </option>
+    </select>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
 `;
diff --git a/hotel-management/src/components/Select/index.tsx b/hotel-management/src/components/Select/index.tsx
index 7e74376..48058b5 100644
--- a/hotel-management/src/components/Select/index.tsx
+++ b/hotel-management/src/components/Select/index.tsx
@@ -1,8 +1,4 @@
-import {
-  FieldValues,
-  RegisterOptions,
-  useFormContext,
-} from 'react-hook-form';
+import { FieldValues, RegisterOptions, useFormContext } from 'react-hook-form';
 import { ChangeEventHandler } from 'react';
 
 // Styled
@@ -46,7 +42,7 @@ const Select = ({
         : { onChange: onChange })}
     >
       {options.map((option) => (
-        <option value={option.value} key={option.value} data-testid='select-option'>
+        <option value={option.value} key={option.value}>
           {option.label}
         </option>
       ))}
diff --git a/hotel-management/src/components/Sidebar/Sidebar.test.tsx b/hotel-management/src/components/Sidebar/Sidebar.test.tsx
index ea4655d..f1e0c5f 100644
--- a/hotel-management/src/components/Sidebar/Sidebar.test.tsx
+++ b/hotel-management/src/components/Sidebar/Sidebar.test.tsx
@@ -1,11 +1,17 @@
-import renderer from 'react-test-renderer';
-import { BrowserRouter } from 'react-router-dom';
+import { BrowserRouter, useNavigate } from 'react-router-dom';
+import { fireEvent, render } from '@testing-library/react';
 
 // Components
 import Sidebar from '.';
 
+// Mock useNavigate hook
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: jest.fn(),
+}));
+
 describe('Sidebar', () => {
-  const wrapper = renderer.create(
+  const wrapper = render(
     <BrowserRouter>
       <Sidebar heading="Hotel Management" />
     </BrowserRouter>
@@ -14,4 +20,20 @@ describe('Sidebar', () => {
   test('Should render correctly', () => {
     expect(wrapper).toMatchSnapshot();
   });
+
+  test('On click to heading should be navigate', () => {
+    const mockNavigate = jest.fn();
+    (useNavigate as jest.Mock).mockReturnValue(mockNavigate);
+
+    const wrapper = render(
+      <BrowserRouter>
+        <Sidebar heading="Hotel Management" />
+      </BrowserRouter>
+    );
+
+    const headingElement = wrapper.getByText('Hotel Management');
+    fireEvent.click(headingElement);
+
+    expect(mockNavigate).toHaveBeenCalledWith('/');
+  });
 });
diff --git a/hotel-management/src/components/Sidebar/__snapshots__/Sidebar.test.tsx.snap b/hotel-management/src/components/Sidebar/__snapshots__/Sidebar.test.tsx.snap
index d59026c..52b3d33 100644
--- a/hotel-management/src/components/Sidebar/__snapshots__/Sidebar.test.tsx.snap
+++ b/hotel-management/src/components/Sidebar/__snapshots__/Sidebar.test.tsx.snap
@@ -1,100 +1,218 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Sidebar Should render correctly 1`] = `
-<aside
-  className="sc-dlniIP dfcuiS"
->
-  <h1
-    className="sc-hKFymg OpLao"
-    onClick={[Function]}
-  >
-    Hotel Management
-  </h1>
-  <nav
-    className="sc-bdnyFh gGCifp"
-  >
-    <a
-      className="sc-gtsqUy gbSQWi"
-      href="/booking"
-      onClick={[Function]}
-    >
-      <svg
-        fill="currentColor"
-        height="1em"
-        stroke="currentColor"
-        strokeWidth="0"
-        style={
-          {
-            "color": undefined,
-          }
-        }
-        viewBox="0 0 24 24"
-        width="1em"
-        xmlns="http://www.w3.org/2000/svg"
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <aside
+        class="sc-dlniIP dfcuiS"
       >
-        <path
-          d="M5 22h14c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2h-2V2h-2v2H9V2H7v2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2zM5 7h14v2H5V7z"
-        />
-      </svg>
-      <span>
-        Booking
-      </span>
-    </a>
-    <a
-      className="sc-gtsqUy gbSQWi"
-      href="/user"
-      onClick={[Function]}
+        <h1
+          class="sc-hKFymg OpLao"
+        >
+          Hotel Management
+        </h1>
+        <nav
+          class="sc-bdnyFh gGCifp"
+        >
+          <a
+            class="sc-gtsqUy gbSQWi"
+            href="/booking"
+          >
+            <svg
+              fill="currentColor"
+              height="1em"
+              stroke="currentColor"
+              stroke-width="0"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M5 22h14c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2h-2V2h-2v2H9V2H7v2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2zM5 7h14v2H5V7z"
+              />
+            </svg>
+            <span>
+              Booking
+            </span>
+          </a>
+          <a
+            class="sc-gtsqUy gbSQWi"
+            href="/user"
+          >
+            <svg
+              aria-hidden="true"
+              fill="currentColor"
+              height="1em"
+              stroke="currentColor"
+              stroke-width="0"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M4.5 6.375a4.125 4.125 0 118.25 0 4.125 4.125 0 01-8.25 0zM14.25 8.625a3.375 3.375 0 116.75 0 3.375 3.375 0 01-6.75 0zM1.5 19.125a7.125 7.125 0 0114.25 0v.003l-.001.119a.75.75 0 01-.363.63 13.067 13.067 0 01-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 01-.364-.63l-.001-.122zM17.25 19.128l-.001.144a2.25 2.25 0 01-.233.96 10.088 10.088 0 005.06-1.01.75.75 0 00.42-.643 4.875 4.875 0 00-6.957-4.611 8.586 8.586 0 011.71 5.157v.003z"
+              />
+            </svg>
+            <span>
+              User
+            </span>
+          </a>
+          <a
+            class="sc-gtsqUy gbSQWi"
+            href="/room"
+          >
+            <svg
+              fill="currentColor"
+              height="1em"
+              stroke="currentColor"
+              stroke-width="0"
+              viewBox="0 0 16 16"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z"
+              />
+            </svg>
+            <span>
+              Room
+            </span>
+          </a>
+        </nav>
+      </aside>
+    </div>
+  </body>,
+  "container": <div>
+    <aside
+      class="sc-dlniIP dfcuiS"
     >
-      <svg
-        aria-hidden="true"
-        fill="currentColor"
-        height="1em"
-        stroke="currentColor"
-        strokeWidth="0"
-        style={
-          {
-            "color": undefined,
-          }
-        }
-        viewBox="0 0 24 24"
-        width="1em"
-        xmlns="http://www.w3.org/2000/svg"
+      <h1
+        class="sc-hKFymg OpLao"
       >
-        <path
-          d="M4.5 6.375a4.125 4.125 0 118.25 0 4.125 4.125 0 01-8.25 0zM14.25 8.625a3.375 3.375 0 116.75 0 3.375 3.375 0 01-6.75 0zM1.5 19.125a7.125 7.125 0 0114.25 0v.003l-.001.119a.75.75 0 01-.363.63 13.067 13.067 0 01-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 01-.364-.63l-.001-.122zM17.25 19.128l-.001.144a2.25 2.25 0 01-.233.96 10.088 10.088 0 005.06-1.01.75.75 0 00.42-.643 4.875 4.875 0 00-6.957-4.611 8.586 8.586 0 011.71 5.157v.003z"
-        />
-      </svg>
-      <span>
-        User
-      </span>
-    </a>
-    <a
-      className="sc-gtsqUy gbSQWi"
-      href="/room"
-      onClick={[Function]}
-    >
-      <svg
-        fill="currentColor"
-        height="1em"
-        stroke="currentColor"
-        strokeWidth="0"
-        style={
-          {
-            "color": undefined,
-          }
-        }
-        viewBox="0 0 16 16"
-        width="1em"
-        xmlns="http://www.w3.org/2000/svg"
+        Hotel Management
+      </h1>
+      <nav
+        class="sc-bdnyFh gGCifp"
       >
-        <path
-          d="M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z"
-        />
-      </svg>
-      <span>
-        Room
-      </span>
-    </a>
-  </nav>
-</aside>
+        <a
+          class="sc-gtsqUy gbSQWi"
+          href="/booking"
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            stroke="currentColor"
+            stroke-width="0"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M5 22h14c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2h-2V2h-2v2H9V2H7v2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2zM5 7h14v2H5V7z"
+            />
+          </svg>
+          <span>
+            Booking
+          </span>
+        </a>
+        <a
+          class="sc-gtsqUy gbSQWi"
+          href="/user"
+        >
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="1em"
+            stroke="currentColor"
+            stroke-width="0"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M4.5 6.375a4.125 4.125 0 118.25 0 4.125 4.125 0 01-8.25 0zM14.25 8.625a3.375 3.375 0 116.75 0 3.375 3.375 0 01-6.75 0zM1.5 19.125a7.125 7.125 0 0114.25 0v.003l-.001.119a.75.75 0 01-.363.63 13.067 13.067 0 01-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 01-.364-.63l-.001-.122zM17.25 19.128l-.001.144a2.25 2.25 0 01-.233.96 10.088 10.088 0 005.06-1.01.75.75 0 00.42-.643 4.875 4.875 0 00-6.957-4.611 8.586 8.586 0 011.71 5.157v.003z"
+            />
+          </svg>
+          <span>
+            User
+          </span>
+        </a>
+        <a
+          class="sc-gtsqUy gbSQWi"
+          href="/room"
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            stroke="currentColor"
+            stroke-width="0"
+            viewBox="0 0 16 16"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z"
+            />
+          </svg>
+          <span>
+            Room
+          </span>
+        </a>
+      </nav>
+    </aside>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
 `;
diff --git a/hotel-management/src/components/SortBy/SortBy.test.tsx b/hotel-management/src/components/SortBy/SortBy.test.tsx
index 28b6454..9c04095 100644
--- a/hotel-management/src/components/SortBy/SortBy.test.tsx
+++ b/hotel-management/src/components/SortBy/SortBy.test.tsx
@@ -1,6 +1,7 @@
 import { BrowserRouter } from 'react-router-dom';
 import { useState } from 'react';
 import { render, fireEvent, RenderResult } from '@testing-library/react';
+
 // Components
 import SortBy from '.';
 
diff --git a/hotel-management/src/components/SortBy/__snapshots__/SortBy.test.tsx.snap b/hotel-management/src/components/SortBy/__snapshots__/SortBy.test.tsx.snap
index 40bcf6f..2fbdfbe 100644
--- a/hotel-management/src/components/SortBy/__snapshots__/SortBy.test.tsx.snap
+++ b/hotel-management/src/components/SortBy/__snapshots__/SortBy.test.tsx.snap
@@ -10,13 +10,11 @@ exports[`SortBy Should render correctly 1`] = `
         class="sc-bdnyFh hPOEsG"
       >
         <option
-          data-testid="select-option"
           value="Value1"
         >
           Option 1
         </option>
         <option
-          data-testid="select-option"
           value="Value2"
         >
           Option 2
@@ -30,13 +28,11 @@ exports[`SortBy Should render correctly 1`] = `
       class="sc-bdnyFh hPOEsG"
     >
       <option
-        data-testid="select-option"
         value="Value1"
       >
         Option 1
       </option>
       <option
-        data-testid="select-option"
         value="Value2"
       >
         Option 2
diff --git a/hotel-management/src/components/Table/Table.test.tsx b/hotel-management/src/components/Table/Table.test.tsx
index 6d4927b..9f6100f 100644
--- a/hotel-management/src/components/Table/Table.test.tsx
+++ b/hotel-management/src/components/Table/Table.test.tsx
@@ -1,4 +1,4 @@
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
 
 // Components
 import Table from '.';
@@ -29,7 +29,12 @@ describe('Table', () => {
     },
   ];
   const TableRow = ({ user }: ITableRow) => {
-    const { id, name, phone, isBooked } = user;
+    const {
+      id,
+      name,
+      phone,
+      isBooked
+    } = user;
 
     return (
       <Table.Row>
@@ -42,7 +47,7 @@ describe('Table', () => {
   };
   const renderRow = (user: IUser) => <TableRow user={user} key={user.id} />;
 
-  const wrapper = renderer.create(
+  const wrapper = render(
     <Table columns="10% 35% 30% 15% 10%">
       <Table.Header headerColumn={columnName} />
       <Table.Body<IUser> data={tempUser} render={renderRow} />
diff --git a/hotel-management/src/components/Table/__snapshots__/Table.test.tsx.snap b/hotel-management/src/components/Table/__snapshots__/Table.test.tsx.snap
index dce59af..7e285ae 100644
--- a/hotel-management/src/components/Table/__snapshots__/Table.test.tsx.snap
+++ b/hotel-management/src/components/Table/__snapshots__/Table.test.tsx.snap
@@ -1,53 +1,162 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Table Should render correctly 1`] = `
-<div
-  className="sc-bdnyFh eEibLN"
->
-  <div
-    className="sc-gtsqUy sc-eCAqax eucOOU hcIWQg"
-    columns="10% 35% 30% 15% 10%"
-  >
+{
+  "asFragment": [Function],
+  "baseElement": <body>
     <div>
-      Column 1
+      <div
+        class="sc-bdnyFh eEibLN"
+      >
+        <div
+          class="sc-gtsqUy sc-eCAqax eucOOU hcIWQg"
+          columns="10% 35% 30% 15% 10%"
+        >
+          <div>
+            Column 1
+          </div>
+          <div>
+            Column 2
+          </div>
+        </div>
+        <div
+          class="sc-dlniIP EYkDq"
+        >
+          <div
+            class="sc-gtsqUy sc-hKFymg eucOOU jwwTFT"
+            columns="10% 35% 30% 15% 10%"
+          >
+            <div>
+              1
+            </div>
+            <div>
+              Nezumi
+            </div>
+            <div>
+              123
+            </div>
+            <div />
+          </div>
+          <div
+            class="sc-gtsqUy sc-hKFymg eucOOU jwwTFT"
+            columns="10% 35% 30% 15% 10%"
+          >
+            <div>
+              2
+            </div>
+            <div>
+              Loi Phan
+            </div>
+            <div>
+              453
+            </div>
+            <div />
+          </div>
+        </div>
+      </div>
     </div>
-    <div>
-      Column 2
-    </div>
-  </div>
-  <div
-    className="sc-dlniIP EYkDq"
-  >
+  </body>,
+  "container": <div>
     <div
-      className="sc-gtsqUy sc-hKFymg eucOOU jwwTFT"
-      columns="10% 35% 30% 15% 10%"
+      class="sc-bdnyFh eEibLN"
     >
-      <div>
-        1
+      <div
+        class="sc-gtsqUy sc-eCAqax eucOOU hcIWQg"
+        columns="10% 35% 30% 15% 10%"
+      >
+        <div>
+          Column 1
+        </div>
+        <div>
+          Column 2
+        </div>
       </div>
-      <div>
-        Nezumi
+      <div
+        class="sc-dlniIP EYkDq"
+      >
+        <div
+          class="sc-gtsqUy sc-hKFymg eucOOU jwwTFT"
+          columns="10% 35% 30% 15% 10%"
+        >
+          <div>
+            1
+          </div>
+          <div>
+            Nezumi
+          </div>
+          <div>
+            123
+          </div>
+          <div />
+        </div>
+        <div
+          class="sc-gtsqUy sc-hKFymg eucOOU jwwTFT"
+          columns="10% 35% 30% 15% 10%"
+        >
+          <div>
+            2
+          </div>
+          <div>
+            Loi Phan
+          </div>
+          <div>
+            453
+          </div>
+          <div />
+        </div>
       </div>
-      <div>
-        123
-      </div>
-      <div />
     </div>
-    <div
-      className="sc-gtsqUy sc-hKFymg eucOOU jwwTFT"
-      columns="10% 35% 30% 15% 10%"
-    >
-      <div>
-        2
-      </div>
-      <div>
-        Loi Phan
-      </div>
-      <div>
-        453
-      </div>
-      <div />
-    </div>
-  </div>
-</div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
 `;
diff --git a/hotel-management/src/components/Toast/Toast.test.tsx b/hotel-management/src/components/Toast/Toast.test.tsx
index c94ac08..c64fad5 100644
--- a/hotel-management/src/components/Toast/Toast.test.tsx
+++ b/hotel-management/src/components/Toast/Toast.test.tsx
@@ -1,10 +1,10 @@
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
 
 // Components
 import Toast from '.';
 
 describe('Toast', () => {
-  const wrapper = renderer.create(<Toast />);
+  const wrapper = render(<Toast />);
 
   test('Should render correctly', () => {
     expect(wrapper).toMatchSnapshot();
diff --git a/hotel-management/src/components/Toast/__snapshots__/Toast.test.tsx.snap b/hotel-management/src/components/Toast/__snapshots__/Toast.test.tsx.snap
index 69e2758..aa3d194 100644
--- a/hotel-management/src/components/Toast/__snapshots__/Toast.test.tsx.snap
+++ b/hotel-management/src/components/Toast/__snapshots__/Toast.test.tsx.snap
@@ -1,20 +1,70 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Toast Should render correctly 1`] = `
-<div
-  onMouseEnter={[Function]}
-  onMouseLeave={[Function]}
-  style={
-    {
-      "bottom": 16,
-      "left": 16,
-      "margin": "8px",
-      "pointerEvents": "none",
-      "position": "fixed",
-      "right": 16,
-      "top": 16,
-      "zIndex": 2000,
-    }
-  }
-/>
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        style="position: fixed; z-index: 2000; top: 16px; left: 16px; right: 16px; bottom: 16px; pointer-events: none; margin: 8px;"
+      />
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      style="position: fixed; z-index: 2000; top: 16px; left: 16px; right: 16px; bottom: 16px; pointer-events: none; margin: 8px;"
+    />
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
 `;
diff --git a/hotel-management/src/constants/commons.ts b/hotel-management/src/constants/commons.ts
index 9d91cc7..e7070a6 100644
--- a/hotel-management/src/constants/commons.ts
+++ b/hotel-management/src/constants/commons.ts
@@ -59,4 +59,10 @@ const REGEX = {
   PASSWORD: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[#$@!%&*?])[A-Za-z\d#$@!%&*?]{8,16}$/
 };
 
-export { USER_PAGE, ROOM_PAGE, FORM, REGEX, ORDERBY_OPTIONS };
+export {
+  USER_PAGE,
+  ROOM_PAGE,
+  FORM,
+  REGEX,
+  ORDERBY_OPTIONS
+};
diff --git a/hotel-management/src/constants/formValidateMessage.ts b/hotel-management/src/constants/formValidateMessage.ts
index 1d442c7..67ee830 100644
--- a/hotel-management/src/constants/formValidateMessage.ts
+++ b/hotel-management/src/constants/formValidateMessage.ts
@@ -6,7 +6,7 @@ const PASSWORD_CONDITION =
   'Your password must have 1 uppercase, 1 lowercase, 1 special character, min 1 number and the length between from 8 to 16!';
 const INVALID_PASSWORD = 'Invalid password';
 const PASSWORD_NOT_MATCH = 'Password not match!';
-const PASSWORD_NOT_MATCH_REQUIREMENT = 'Password not match the requirement!'
+const PASSWORD_NOT_MATCH_REQUIREMENT = 'Password not match the requirement!';
 
 export {
   REQUIRED_FIELD_ERROR,
@@ -16,5 +16,5 @@ export {
   PASSWORD_CONDITION,
   INVALID_PASSWORD,
   PASSWORD_NOT_MATCH,
-  PASSWORD_NOT_MATCH_REQUIREMENT
+  PASSWORD_NOT_MATCH_REQUIREMENT,
 };
diff --git a/hotel-management/src/constants/path.ts b/hotel-management/src/constants/path.ts
index 8a5ee7e..12aa02b 100644
--- a/hotel-management/src/constants/path.ts
+++ b/hotel-management/src/constants/path.ts
@@ -1,8 +1,15 @@
-export const BOOKING = '/booking';
-export const USER = '/user';
-export const ROOM = '/room';
-export const ACCOUNT = '/account';
-export const OTHER_PATH = '*';
-export const USER_PATH = 'users';
-export const ROOM_PATH = 'rooms';
-export const LOGIN = 'login';
+const BOOKING = '/booking';
+const USER = '/user';
+const ROOM = '/room';
+const ACCOUNT = '/account';
+const OTHER_PATH = '*';
+const LOGIN = 'login';
+
+export {
+  BOOKING,
+  USER,
+  ROOM,
+  ACCOUNT,
+  OTHER_PATH,
+  LOGIN,
+}
diff --git a/hotel-management/src/contexts/UserRoomAvailableContext.ts b/hotel-management/src/contexts/UserRoomAvailableContext.ts
index 2b78504..66d03f4 100644
--- a/hotel-management/src/contexts/UserRoomAvailableContext.ts
+++ b/hotel-management/src/contexts/UserRoomAvailableContext.ts
@@ -40,18 +40,20 @@ const initialState: IUserRoomState = {
 
 const reducer = (state: IUserRoomState, action: IAction) => {
   switch (action.type) {
-    case 'initRoom':
-      return {
-        ...state,
-        roomsAvailable: action.payload,
-      };
-
+    // Init data for the first load
     case 'initUser':
       return {
         ...state,
         usersAvailable: action.payload,
       };
 
+    case 'initRoom':
+      return {
+        ...state,
+        roomsAvailable: action.payload,
+      };
+
+    // Add data to state
     case 'addUser': {
       const tempArr = state.usersAvailable;
       const itemExist = state.usersAvailable.find(
@@ -68,6 +70,23 @@ const reducer = (state: IUserRoomState, action: IAction) => {
       };
     }
 
+    case 'addRoom': {
+      const tempArr = state.roomsAvailable;
+      const itemExist = state.roomsAvailable.find(
+        (item) => item.id === action.payload[0].id
+      );
+
+      if (!itemExist) {
+        tempArr.push(action.payload[0]);
+      }
+
+      return {
+        ...state,
+        roomsAvailable: tempArr,
+      };
+    }
+
+    // Update state
     case 'updateUserName': {
       const tempArr = state.usersAvailable;
 
@@ -85,41 +104,6 @@ const reducer = (state: IUserRoomState, action: IAction) => {
       };
     }
 
-    case 'updateStatusUser': {
-      const tempArr = state.usersAvailable;
-      const indexItemUpdate = tempArr.findIndex(
-        (item) => item.id === action.payload[0].id
-      );
-      tempArr[indexItemUpdate].isBooked = action.payload[0].isBooked;
-
-      return {
-        ...state,
-        usersAvailable: tempArr,
-      };
-    }
-
-    case 'removeUser': 
-      return {
-        ...state,
-        usersAvailable: state.usersAvailable.filter((user) => user.id !== action.payload[0].id)
-      }
-
-    case 'addRoom': {
-      const tempArr = state.roomsAvailable;
-      const itemExist = state.roomsAvailable.find(
-        (item) => item.id === action.payload[0].id
-      );
-
-      if (!itemExist) {
-        tempArr.push(action.payload[0]);
-      }
-
-      return {
-        ...state,
-        roomsAvailable: tempArr,
-      };
-    }
-
     case 'updateRoomName': {
       const tempArr = state.roomsAvailable;
 
@@ -137,6 +121,19 @@ const reducer = (state: IUserRoomState, action: IAction) => {
       };
     }
 
+    case 'updateStatusUser': {
+      const tempArr = state.usersAvailable;
+      const indexItemUpdate = tempArr.findIndex(
+        (item) => item.id === action.payload[0].id
+      );
+      tempArr[indexItemUpdate].isBooked = action.payload[0].isBooked;
+
+      return {
+        ...state,
+        usersAvailable: tempArr,
+      };
+    }
+
     case 'updateStatusRoom': {
       const tempArr = state.roomsAvailable;
       const indexItemUpdate = tempArr.findIndex(
@@ -150,11 +147,22 @@ const reducer = (state: IUserRoomState, action: IAction) => {
       };
     }
 
-    case 'removeRoom': 
+    // Remove state
+    case 'removeUser':
       return {
         ...state,
-        roomsAvailable: state.roomsAvailable.filter((room) => room.id !== action.payload[0].id)
-      }
+        usersAvailable: state.usersAvailable.filter(
+          (user) => user.id !== action.payload[0].id
+        ),
+      };
+
+    case 'removeRoom':
+      return {
+        ...state,
+        roomsAvailable: state.roomsAvailable.filter(
+          (room) => room.id !== action.payload[0].id
+        ),
+      };
 
     default:
       throw new Error('Action unknown');
diff --git a/hotel-management/src/contexts/__tests__/userRoomAvailableContext.test.tsx b/hotel-management/src/contexts/__tests__/userRoomAvailableContext.test.tsx
index 672476c..cec1ba4 100644
--- a/hotel-management/src/contexts/__tests__/userRoomAvailableContext.test.tsx
+++ b/hotel-management/src/contexts/__tests__/userRoomAvailableContext.test.tsx
@@ -1,4 +1,7 @@
+// Contexts
 import { reducer } from '@context/UserRoomAvailableContext';
+
+// Types
 import { IDataState } from '@type/common';
 
 jest.mock('@service/userServices');
@@ -38,12 +41,14 @@ describe('userRoomAvailableContext', () => {
         {
           id: 1,
           name: 'Room 1',
+          status: true,
         },
       ],
       usersAvailable: [
         {
           id: 1,
           name: 'Nezumi',
+          isBooked: true,
         },
       ],
     };
@@ -84,7 +89,8 @@ describe('userRoomAvailableContext', () => {
 
     expect(state.usersAvailable[0]).toEqual({
       id: 1,
-      name: 'Update name'
+      name: 'Update name',
+      isBooked: true,
     });
   });
 
@@ -123,7 +129,34 @@ describe('userRoomAvailableContext', () => {
 
     expect(state.roomsAvailable[0]).toEqual({
       id: 1,
-      name: 'Update name'
+      name: 'Update name',
+      status: true,
+    });
+  });
+
+  test('Should update room status correctly', async () => {
+    const state = reducer(initialState, {
+      type: 'updateStatusRoom',
+      payload: [{ id: 1, status: false }],
+    });
+
+    expect(state.roomsAvailable[0]).toEqual({
+      id: 1,
+      name: 'Room 1',
+      status: false,
+    });
+  });
+
+  test('Should update user status correctly', async () => {
+    const state = reducer(initialState, {
+      type: 'updateStatusUser',
+      payload: [{ id: 1, isBooked: false }],
+    });
+
+    expect(state.usersAvailable[0]).toEqual({
+      id: 1,
+      name: 'Nezumi',
+      isBooked: false,
     });
   });
 });
diff --git a/hotel-management/src/helpers/__tests__/helpers.test.ts b/hotel-management/src/helpers/__tests__/helpers.test.ts
index 8e71b7f..4e24245 100644
--- a/hotel-management/src/helpers/__tests__/helpers.test.ts
+++ b/hotel-management/src/helpers/__tests__/helpers.test.ts
@@ -1,5 +1,5 @@
 // Helpers
-import { formatCurrency } from '@helper/helper';
+import { formatCurrency, getDayDiff } from '@helper/helper';
 
 describe('formatCurrency', () => {
   test('Should format correctly', () => {
@@ -8,3 +8,21 @@ describe('formatCurrency', () => {
     expect(result).toEqual('$5,000.00');
   });
 });
+
+describe('getDayDiff', () => {
+  test('Should calculate correctly', () => {
+    const case_1 = getDayDiff(new Date('2023/11/30'), new Date('2023/12/01'));
+    const case_2 = getDayDiff(new Date('2023/12/15'), new Date('2023/12/20'));
+    const case_3 = getDayDiff(new Date('2023/12/31'), new Date('2024/01/01'));
+
+    expect(case_1).toEqual(1);
+    expect(case_2).toEqual(5);
+    expect(case_3).toEqual(1);
+  });
+
+  test('Should return 0 if startDate larger than endDate', () => {
+    const result = getDayDiff(new Date('2023/11/30'), new Date('2023/11/20'));
+
+    expect(result).toEqual(0);
+  });
+});
diff --git a/hotel-management/src/helpers/__tests__/validators.test.ts b/hotel-management/src/helpers/__tests__/validators.test.ts
index 61d6b94..2d6be25 100644
--- a/hotel-management/src/helpers/__tests__/validators.test.ts
+++ b/hotel-management/src/helpers/__tests__/validators.test.ts
@@ -3,6 +3,7 @@ import { REGEX } from '@constant/commons';
 
 // Helpers
 import {
+  compareTwoDates,
   isValidDiscount,
   isValidRegex,
   isValidString,
@@ -88,3 +89,23 @@ describe('Should is valid string', () => {
     expect(case_4).toBeFalsy();
   });
 });
+
+describe('Should compare two dates correctly', () => {
+  test('The start date should greater than end date', () => {
+    const result = compareTwoDates(
+      new Date('2023/12/05'),
+      new Date('2023/12/01')
+    );
+
+    expect(result).toBe(true);
+  });
+
+  test('The start date should fewer than end date', () => {
+    const result = compareTwoDates(
+      new Date('2023/12/01'),
+      new Date('2023/12/05')
+    );
+
+    expect(result).toBe(false);
+  });
+});
diff --git a/hotel-management/src/helpers/helper.ts b/hotel-management/src/helpers/helper.ts
index dce6e83..7b0c324 100644
--- a/hotel-management/src/helpers/helper.ts
+++ b/hotel-management/src/helpers/helper.ts
@@ -20,22 +20,16 @@ const formatCurrency = (value: number): string => {
 const getDayDiff = (startDate: Date, endDate: Date): number => {
   const msInDay = 24 * 60 * 60 * 1000;
 
-  return Math.round(
-    Math.abs(Number(endDate) - Number(startDate)) / msInDay
-  );
-}
+  if(endDate > startDate) {
+    return Math.round(
+      Math.abs(Number(endDate) - Number(startDate)) / msInDay
+    );
+  }
 
-/**
- * Convert from currency string to the number
- * @param currency The currency string
- * @returns The number
- */
-const convertCurrencyToNumber = (currency: string) => {
-  return Number(currency.replace(/[^0-9.-]+/g,""))
+  return 0;
 }
 
 export {
   formatCurrency,
   getDayDiff,
-  convertCurrencyToNumber
 };
diff --git a/hotel-management/src/hooks/__tests__/rooms.test.tsx b/hotel-management/src/hooks/__tests__/rooms.test.tsx
index 8587cef..4796782 100644
--- a/hotel-management/src/hooks/__tests__/rooms.test.tsx
+++ b/hotel-management/src/hooks/__tests__/rooms.test.tsx
@@ -12,10 +12,11 @@ import { useSetIsDeleteRoom } from '@hook/rooms/useSetIsDeleteRoom';
 // Types
 import { IRoom } from '@type/room';
 
-const mockUseRooms = jest.fn(useRooms);
-const mockUseCreateRoom = jest.fn(useCreateRoom);
-const mockUseUpdateRoom = jest.fn(useUpdateRoom);
-const mockUseDeleteRoom = jest.fn(useSetIsDeleteRoom);
+jest.mock('@hook/rooms/useRooms');
+jest.mock('@hook/rooms/useCreateRoom');
+jest.mock('@hook/rooms/useUpdateRoom');
+jest.mock('@hook/rooms/useSetIsDeleteRoom');
+
 interface IWrapper {
   children: ReactNode;
 }
@@ -27,24 +28,26 @@ const sampleData: IRoom = {
   status: true,
   isDelete: true,
 };
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      retry: false,
-    },
-  },
-});
-const wrapper = ({ children }: IWrapper) => {
-  return (
-    <QueryClientProvider client={queryClient}>
-      <MemoryRouter>{children}</MemoryRouter>
-    </QueryClientProvider>
-  );
-};
 
 describe('Room hooks', () => {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  });
+  const wrapper = ({ children }: IWrapper) => {
+    return (
+      <QueryClientProvider client={queryClient}>
+        <MemoryRouter>{children}</MemoryRouter>
+      </QueryClientProvider>
+    );
+  };
+
+  
   test('Should fetch data correctly', async () => {
-    mockUseRooms.mockImplementation(() => ({
+    (useRooms as jest.Mock).mockImplementation(() => ({
       rooms: [
         {
           id: 1,
@@ -64,7 +67,7 @@ describe('Room hooks', () => {
       isLoading: false,
       count: 2
     }));
-    const { result } = renderHook(() => mockUseRooms(), { wrapper });
+    const { result } = renderHook(() => useRooms(), { wrapper });
 
     await waitFor(() =>
       expect(result.current.rooms?.length).toBeGreaterThan(0)
@@ -72,14 +75,14 @@ describe('Room hooks', () => {
   });
 
   test('Should create room correctly', async () => {
-    mockUseCreateRoom.mockImplementation(() => ({
+    (useCreateRoom as jest.Mock).mockImplementation(() => ({
       createRoom: () => {
         sampleData;
       },
       isCreating: false,
       isSuccess: true,
     }));
-    const { result } = renderHook(() => mockUseCreateRoom(), { wrapper });
+    const { result } = renderHook(() => useCreateRoom(), { wrapper });
 
     act(() => {
       result.current.createRoom(sampleData);
@@ -91,14 +94,14 @@ describe('Room hooks', () => {
   });
 
   test('Should edit room correctly', async () => {
-    mockUseUpdateRoom.mockImplementation(() => ({
+    (useUpdateRoom as jest.Mock).mockImplementation(() => ({
       updateRoom: () => {
         sampleData;
       },
       isUpdating: false,
       isSuccess: true,
     }));
-    const { result } = renderHook(() => mockUseUpdateRoom(), { wrapper });
+    const { result } = renderHook(() => useUpdateRoom(), { wrapper });
 
     act(() => {
       const testMethod = async () => {
@@ -111,14 +114,14 @@ describe('Room hooks', () => {
   });
 
   test('Should delete room correctly', async () => {
-    mockUseDeleteRoom.mockImplementation(() => ({
+    (useSetIsDeleteRoom as jest.Mock).mockImplementation(() => ({
       setIsDeleteRoom: () => {
         sampleData
       },
       isDeleting: false,
       isSuccess: true,
     }));
-    const { result } = renderHook(() => mockUseDeleteRoom(), { wrapper });
+    const { result } = renderHook(() => useSetIsDeleteRoom(), { wrapper });
 
     act(() => {
       const testMethod = async () => {
diff --git a/hotel-management/src/hooks/__tests__/useDebounce.test.tsx b/hotel-management/src/hooks/__tests__/useDebounce.test.tsx
index 4eca0c2..5db8fce 100644
--- a/hotel-management/src/hooks/__tests__/useDebounce.test.tsx
+++ b/hotel-management/src/hooks/__tests__/useDebounce.test.tsx
@@ -1,6 +1,5 @@
-import { fireEvent, render } from '@testing-library/react';
+import { act, fireEvent, render } from '@testing-library/react';
 import { useState } from 'react';
-import { act } from 'react-test-renderer';
 
 // Hooks
 import { useDebounce } from '@hook/useDebounce';
diff --git a/hotel-management/src/hooks/__tests__/useOutsideClick.test.tsx b/hotel-management/src/hooks/__tests__/useOutsideClick.test.tsx
index 0178a71..0873162 100644
--- a/hotel-management/src/hooks/__tests__/useOutsideClick.test.tsx
+++ b/hotel-management/src/hooks/__tests__/useOutsideClick.test.tsx
@@ -5,7 +5,6 @@ import { useOutsideClick } from '@hook/useOutsideClick';
 
 describe('useOutsideClick', () => {
   test('Call handler when click outside element', () => {
-    // Arrange
     const handler = jest.fn();
     const ref = renderHook(() => useOutsideClick<HTMLDivElement>(handler))
       .result.current;
@@ -13,21 +12,17 @@ describe('useOutsideClick', () => {
 
     fireEvent.click(document);
 
-    // Assert
     expect(handler).toHaveBeenCalledTimes(1);
   });
 
   test('Not call handler when click outside element', () => {
-    // Arrange
     const handler = jest.fn();
     const ref = renderHook(() => useOutsideClick<HTMLDivElement>(handler))
       .result.current;
     render(<div ref={ref} data-testid="test-element"></div>);
 
-    // Act
     fireEvent.click(screen.getByTestId('test-element'));
 
-    // Assert
     expect(handler).not.toHaveBeenCalled();
   });
 });
diff --git a/hotel-management/src/hooks/__tests__/users.test.tsx b/hotel-management/src/hooks/__tests__/users.test.tsx
index a6fe479..4da1feb 100644
--- a/hotel-management/src/hooks/__tests__/users.test.tsx
+++ b/hotel-management/src/hooks/__tests__/users.test.tsx
@@ -1,8 +1,7 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { renderHook, waitFor } from '@testing-library/react';
+import { act, renderHook, waitFor } from '@testing-library/react';
 import { ReactNode } from 'react';
 import { MemoryRouter } from 'react-router-dom';
-import { act } from 'react-test-renderer';
 
 // Hooks
 import { useCreateUser } from '@hook/users/useCreateUser';
@@ -12,9 +11,9 @@ import { useUsers } from '@hook/users/useUsers';
 // Types
 import { IUser } from '@type/user';
 
-const mockUseUsers = jest.fn(useUsers);
-const mockUseCreateUser = jest.fn(useCreateUser);
-const mockUseUpdateUser = jest.fn(useUpdateUser);
+jest.mock('@hook/users/useUsers');
+jest.mock('@hook/users/useCreateUser');
+jest.mock('@hook/users/useUpdateUser');
 
 interface IWrapper {
   children: ReactNode;
@@ -44,7 +43,7 @@ const wrapper = ({ children }: IWrapper) => {
 
 describe('Users hook', () => {
   test('Should fetch user data correctly', async () => {
-    mockUseUsers.mockImplementation(() => ({
+    (useUsers as jest.Mock).mockImplementation(() => ({
       users: [
         {
           id: 1,
@@ -64,20 +63,20 @@ describe('Users hook', () => {
       isLoading: false,
       count: 2,
     }));
-    const { result } = renderHook(() => mockUseUsers(), { wrapper });
+    const { result } = renderHook(() => useUsers(), { wrapper });
 
     await waitFor(() => expect(result.current.users?.length).toEqual(2));
   });
 
   test('Should create user correctly', async () => {
-    mockUseCreateUser.mockImplementation(() => ({
+    (useCreateUser as jest.Mock).mockImplementation(() => ({
       createUser: () => {
         sampleData;
       },
       isCreating: false,
       isSuccess: true,
     }));
-    const { result } = renderHook(() => mockUseCreateUser(), { wrapper });
+    const { result } = renderHook(() => useCreateUser(), { wrapper });
 
     act(() => {
       const testMethod = async () => {
@@ -90,14 +89,14 @@ describe('Users hook', () => {
   });
 
   test('Should update user correctly', async () => {
-    mockUseUpdateUser.mockImplementation(() => ({
+    (useUpdateUser as jest.Mock).mockImplementation(() => ({
       updateUser: () => {
         sampleData;
       },
       isUpdating: false,
       isSuccess: true,
     }));
-    const { result } = renderHook(() => mockUseUpdateUser(), { wrapper });
+    const { result } = renderHook(() => useUpdateUser(), { wrapper });
 
     act(() => {
       const testMethod = async () => {
diff --git a/hotel-management/src/hooks/authentication/__tests__/useAccount.test.ts b/hotel-management/src/hooks/authentication/__tests__/useAccount.test.ts
new file mode 100644
index 0000000..2fe036a
--- /dev/null
+++ b/hotel-management/src/hooks/authentication/__tests__/useAccount.test.ts
@@ -0,0 +1,39 @@
+import { useQuery } from '@tanstack/react-query';
+import { renderHook } from '@testing-library/react';
+import { User } from '@supabase/supabase-js';
+
+// Services
+import * as authenticationService from '@service/authenticationService';
+
+// Hooks
+import { useAccount } from '../useAccount';
+
+jest.mock('@tanstack/react-query');
+
+describe('useAccount', () => {
+  test('Should return the value correctly', async () => {
+    const mockAccount: User = {
+      role: 'authenticated',
+      app_metadata: jest.fn(),
+      id: '1',
+      user_metadata: jest.fn(),
+      aud: '',
+      created_at: '',
+    };
+
+    (useQuery as jest.Mock).mockReturnValue({
+      data: mockAccount,
+      isPending: false,
+    });
+
+    jest
+      .spyOn(authenticationService, 'getCurrentAccount')
+      .mockResolvedValue(mockAccount);
+
+    const { result } = renderHook(() => useAccount());
+
+    expect(result.current.isPending).toBe(false);
+    expect(result.current.account).toBe(mockAccount);
+    expect(result.current.isAuthenticated).toBe(true);
+  });
+});
diff --git a/hotel-management/src/hooks/authentication/__tests__/useLogin.test.tsx b/hotel-management/src/hooks/authentication/__tests__/useLogin.test.tsx
new file mode 100644
index 0000000..63c51e4
--- /dev/null
+++ b/hotel-management/src/hooks/authentication/__tests__/useLogin.test.tsx
@@ -0,0 +1,73 @@
+import {
+  QueryClient,
+  QueryClientProvider,
+  useMutation,
+} from '@tanstack/react-query';
+import { renderHook } from '@testing-library/react';
+import { MemoryRouter, useNavigate } from 'react-router-dom';
+import { ReactNode } from 'react';
+
+// Hooks
+import { useLogin } from '../useLogin';
+
+interface IWrapper {
+  children: ReactNode;
+}
+
+jest.mock('@tanstack/react-query', () => ({
+  ...jest.requireActual('@tanstack/react-query'),
+  useMutation: jest.fn(),
+}));
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: jest.fn(),
+}));
+
+describe('useLogin', () => {
+
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  });
+
+  const env = ({ children }: IWrapper) => {
+    return (
+      <QueryClientProvider client={queryClient}>
+        <MemoryRouter>{children}</MemoryRouter>
+      </QueryClientProvider>
+    );
+  };
+
+  test('OnSuccess should call correctly', async () => {
+    (useMutation as jest.Mock).mockImplementation(({ onSuccess }) => {
+      const result = { mutate: jest.fn(), isPending: false };
+      onSuccess({ user: 'tempUser' });
+
+      return result;
+    });
+
+    const navigateMock = jest.fn();
+    (useNavigate as jest.Mock).mockReturnValue(navigateMock);
+
+    renderHook(() => useLogin(), { wrapper: env });
+
+    expect(navigateMock).toHaveBeenCalledWith('/');
+  });
+
+  test('OnError should call correctly', async () => {
+    (useMutation as jest.Mock).mockImplementation(({ onError }) => {
+      const result = { mutate: jest.fn(), isPending: false };
+      onError(new Error('This is error'));
+
+      return result;
+    });
+    
+    renderHook(() => useLogin(), { wrapper: env });
+
+    expect(useMutation).toHaveBeenCalled();
+  });
+});
diff --git a/hotel-management/src/hooks/authentication/__tests__/useLogout.test.tsx b/hotel-management/src/hooks/authentication/__tests__/useLogout.test.tsx
new file mode 100644
index 0000000..2adc733
--- /dev/null
+++ b/hotel-management/src/hooks/authentication/__tests__/useLogout.test.tsx
@@ -0,0 +1,65 @@
+import {
+  QueryClient,
+  QueryClientProvider,
+  useMutation,
+} from '@tanstack/react-query';
+import { act, renderHook } from '@testing-library/react';
+import { ReactNode } from 'react';
+import { MemoryRouter, useNavigate } from 'react-router-dom';
+
+// Hooks
+import { useLogout } from '../useLogout';
+
+interface IWrapper {
+  children: ReactNode;
+}
+
+jest.mock('@tanstack/react-query', () => ({
+  ...jest.requireActual('@tanstack/react-query'),
+  useMutation: jest.fn(),
+}));
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: jest.fn(),
+}));
+
+describe('useLogout', () => {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  });
+
+  const env = ({ children }: IWrapper) => {
+    return (
+      <QueryClientProvider client={queryClient}>
+        <MemoryRouter>{children}</MemoryRouter>
+      </QueryClientProvider>
+    );
+  };
+
+  test('Should logout successful', async () => {
+    (useMutation as jest.Mock).mockImplementation(({ onSuccess }) => {
+      const result = { mutate: jest.fn(), isPending: false };
+      onSuccess(); // Simulate a successful logout
+
+      return result;
+    });
+
+    const navigateMock = jest.fn();
+    (useNavigate as jest.Mock).mockReturnValue(navigateMock);
+
+    const { result } = renderHook(() => useLogout(), { wrapper: env });
+
+    // Call the logout function
+    await act(async () => {
+      result.current.logout();
+    });
+
+    // Assert that navigate has been called with the correct arguments
+    expect(navigateMock).toHaveBeenCalledWith('/login', { replace: true });
+  });
+});
diff --git a/hotel-management/src/hooks/authentication/__tests__/useUpdateAccount.test.tsx b/hotel-management/src/hooks/authentication/__tests__/useUpdateAccount.test.tsx
new file mode 100644
index 0000000..e1d2c83
--- /dev/null
+++ b/hotel-management/src/hooks/authentication/__tests__/useUpdateAccount.test.tsx
@@ -0,0 +1,69 @@
+import {
+  QueryClient,
+  QueryClientProvider,
+  useMutation,
+} from '@tanstack/react-query';
+import { renderHook } from '@testing-library/react';
+import { MemoryRouter, useNavigate } from 'react-router-dom';
+import { ReactNode } from 'react';
+
+// Hooks
+import { useUpdateAccount } from '../useUpdateAccount';
+
+interface IWrapper {
+  children: ReactNode;
+}
+
+jest.mock('@tanstack/react-query', () => ({
+  ...jest.requireActual('@tanstack/react-query'),
+  useMutation: jest.fn(),
+}));
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: jest.fn(),
+}));
+
+describe('useUpdateAccount', () => {
+
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  });
+
+  const env = ({ children }: IWrapper) => {
+    return (
+      <QueryClientProvider client={queryClient}>
+        <MemoryRouter>{children}</MemoryRouter>
+      </QueryClientProvider>
+    );
+  };
+
+  test('OnSuccess should call correctly', async () => {
+    (useMutation as jest.Mock).mockImplementation(({ onSuccess }) => {
+      const action = { mutate: jest.fn(), isUpdating: false };
+      onSuccess({ user: 'tempUser' });
+
+      return action;
+    });
+
+    const navigateMock = jest.fn();
+    (useNavigate as jest.Mock).mockReturnValue(navigateMock);
+
+    renderHook(() => useUpdateAccount(), { wrapper: env });
+  });
+
+  test('OnError should call correctly', async () => {
+    (useMutation as jest.Mock).mockImplementation(({ onError }) => {
+      const action = { mutate: jest.fn(), isUpdating: false };
+      onError(new Error('This is error'));
+
+      return action;
+    });
+    
+    renderHook(() => useUpdateAccount(), { wrapper: env });
+  });
+});
diff --git a/hotel-management/src/hooks/authentication/useLogin.ts b/hotel-management/src/hooks/authentication/useLogin.ts
index a2cd49a..6cf34fe 100644
--- a/hotel-management/src/hooks/authentication/useLogin.ts
+++ b/hotel-management/src/hooks/authentication/useLogin.ts
@@ -1,13 +1,10 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import toast from 'react-hot-toast';
 
 // Services
 import { login as loginFn } from '@service/authenticationService';
 
-// Types
-import { ILogin } from '@type/common';
-
 /**
  * Login web
  * @returns The login function and isPending boolean
@@ -15,16 +12,13 @@ import { ILogin } from '@type/common';
 const useLogin = () => {
   const queryClient = useQueryClient();
   const navigate = useNavigate();
-  const [searchParams] = useSearchParams();
-  const redirectTo = searchParams.get('redirectTo') || null;
 
   const { mutate: login, isPending } = useMutation({
-    mutationFn: ({ email, password }: ILogin) => loginFn({ email, password }),
+    mutationFn: loginFn,
     onSuccess: (account) => {
       queryClient.setQueryData(['account'], account.user);
-      redirectTo
-        ? navigate(redirectTo)
-        : navigate('/');
+
+      navigate('/');
     },
     onError: (err) => {
       console.error(err.message);
diff --git a/hotel-management/src/hooks/bookings/__tests__/useBookings.test.tsx b/hotel-management/src/hooks/bookings/__tests__/useBookings.test.tsx
new file mode 100644
index 0000000..4f58c8b
--- /dev/null
+++ b/hotel-management/src/hooks/bookings/__tests__/useBookings.test.tsx
@@ -0,0 +1,148 @@
+import {
+  QueryClient,
+  QueryClientProvider,
+  useQuery,
+} from '@tanstack/react-query';
+import { useSearchParams } from 'react-router-dom';
+import { renderHook } from '@testing-library/react';
+import { URLSearchParams } from 'url';
+
+// Hooks
+import { useBookings } from '../useBookings';
+
+// Services
+import { getAllBookings } from '@service/bookingServices';
+
+jest.mock('react-router-dom', () => ({
+  useSearchParams: jest.fn(),
+}));
+
+jest.mock('@tanstack/react-query', () => ({
+  ...jest.requireActual('@tanstack/react-query'),
+  useQuery: jest.fn(),
+}));
+
+jest.mock('@service/bookingServices', () => ({
+  getAllBookings: jest.fn(),
+}));
+
+describe('useBookings hook', () => {
+  const queryClient = new QueryClient();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('Should fetch data successful', async () => {
+    const sampleDate = { data: [{ id: 1, name: 'Booking 1' }], count: 3 };
+
+    (useSearchParams as jest.Mock).mockReturnValue([
+      new URLSearchParams('page=1'),
+      new URLSearchParams('search=test'),
+    ]);
+
+    (useQuery as jest.Mock).mockImplementation(({ queryFn }) => {
+      const result = {
+        isLoading: false,
+        error: {},
+        data: sampleDate,
+      };
+      queryFn();
+
+      return result;
+    });
+
+    (getAllBookings as jest.Mock).mockResolvedValue(sampleDate);
+
+    const { result } = renderHook(() => useBookings(), {
+      wrapper: ({ children }) => (
+        <QueryClientProvider client={queryClient}>
+          {children}
+        </QueryClientProvider>
+      ),
+    });
+
+    expect(result.current.bookings).toEqual(sampleDate.data);
+    expect(result.current.count).toEqual(sampleDate.count);
+  });
+
+  test('Should prefetch the second page when in the first page', async () => {
+    const sampleDate = { data: [{ id: 1, name: 'Booking 1' }], count: 7 };
+
+    (queryClient.prefetchQuery as jest.Mock) = jest.fn();
+    (useSearchParams as jest.Mock).mockReturnValue([
+      new URLSearchParams('page=1'),
+      new URLSearchParams('search=test'),
+    ]);
+
+    (useQuery as jest.Mock).mockImplementation(({ queryFn }) => {
+      const result = {
+        isLoading: false,
+        error: {},
+        data: sampleDate,
+      };
+      queryFn();
+
+      return result;
+    });
+
+    (getAllBookings as jest.Mock).mockResolvedValue(sampleDate);
+
+    renderHook(() => useBookings(), {
+      wrapper: ({ children }) => (
+        <QueryClientProvider client={queryClient}>
+          {children}
+        </QueryClientProvider>
+      ),
+    });
+
+    expect(queryClient.prefetchQuery).toHaveBeenCalledTimes(1);
+
+    expect(queryClient.prefetchQuery).toHaveBeenCalledWith({
+      queryKey: ['bookings', '', 2],
+      queryFn: expect.any(Function),
+    });
+  });
+
+  test('Should prefetch the previous page and next page when in the second page', async () => {
+    const sampleDate = { data: [{ id: 1, name: 'Booking 1' }], count: 12 };
+
+    (useSearchParams as jest.Mock).mockReturnValue([
+      new URLSearchParams('page=2'),
+      new URLSearchParams('search=test'),
+    ]);
+
+    (useQuery as jest.Mock).mockImplementation(({ queryFn }) => {
+      const result = {
+        isLoading: false,
+        error: {},
+        data: sampleDate,
+      };
+      queryFn();
+
+      return result;
+    });
+
+    (getAllBookings as jest.Mock).mockResolvedValue(sampleDate);
+
+    renderHook(() => useBookings(), {
+      wrapper: ({ children }) => (
+        <QueryClientProvider client={queryClient}>
+          {children}
+        </QueryClientProvider>
+      ),
+    });
+
+    expect(queryClient.prefetchQuery).toHaveBeenCalledTimes(2);
+
+    expect(queryClient.prefetchQuery).toHaveBeenCalledWith({
+      queryKey: ['bookings', '', 3],
+      queryFn: expect.any(Function),
+    });
+
+    expect(queryClient.prefetchQuery).toHaveBeenCalledWith({
+      queryKey: ['bookings', '', 1],
+      queryFn: expect.any(Function),
+    });
+  });
+});
diff --git a/hotel-management/src/hooks/bookings/__tests__/useCheckout.test.tsx b/hotel-management/src/hooks/bookings/__tests__/useCheckout.test.tsx
new file mode 100644
index 0000000..a8b4772
--- /dev/null
+++ b/hotel-management/src/hooks/bookings/__tests__/useCheckout.test.tsx
@@ -0,0 +1,104 @@
+import {
+  QueryClient,
+  QueryClientProvider,
+  useQueryClient,
+} from '@tanstack/react-query';
+import toast from 'react-hot-toast';
+import useCheckOut from '../useCheckout';
+import { act, renderHook } from '@testing-library/react';
+
+// Services
+import { checkOutBooking } from '@service/bookingServices';
+
+// Hooks
+import { useUserRoomAvailable } from '@hook/useUserRoomAvailable';
+
+// Constants
+import { CHECKOUT_SUCCESS } from '@constant/messages';
+
+// Mock services and constants
+jest.mock('react-hot-toast');
+jest.mock('@tanstack/react-query', () => ({
+  ...jest.requireActual('@tanstack/react-query'),
+  useQueryClient: jest.fn(),
+}));
+jest.mock('@service/bookingServices', () => ({
+  checkOutBooking: jest.fn(),
+}));
+jest.mock('@hook/useUserRoomAvailable', () => ({
+  useUserRoomAvailable: jest.fn(),
+}));
+
+const mockData = {
+  roomId: '123',
+  userId: '456',
+};
+
+describe('useCheckOut', () => {
+  const queryClient = new QueryClient();
+
+  it('Should checkout successful', async () => {
+    const queryClientMock = { invalidateQueries: jest.fn() };
+    (useQueryClient as jest.Mock).mockReturnValue(queryClientMock);
+    (toast.success as jest.Mock).mockImplementation(() => {});
+
+    const dispatchMock = jest.fn();
+
+    (useUserRoomAvailable as jest.Mock).mockReturnValue({
+      dispatch: dispatchMock,
+    });
+
+    const { result } = renderHook(() => useCheckOut(), {
+      wrapper: ({ children }) => (
+        <QueryClientProvider client={queryClient}>
+          {children}
+        </QueryClientProvider>
+      ),
+    });
+
+    (checkOutBooking as jest.Mock).mockResolvedValue(mockData);
+
+    await act(async () => {
+      result.current.checkOutBooking({ idBooking: 1, roomId: 1, userId: 1 });
+    });
+
+    // Verify that necessary functions were called
+    expect(toast.success).toHaveBeenCalledWith(CHECKOUT_SUCCESS);
+
+    expect(queryClientMock.invalidateQueries).toHaveBeenCalledWith({
+      queryKey: ['bookings'],
+    });
+
+    expect(dispatchMock).toHaveBeenCalledWith({
+      type: 'updateStatusRoom',
+      payload: [{ id: mockData.roomId, status: false }],
+    });
+
+    expect(dispatchMock).toHaveBeenCalledWith({
+      type: 'updateStatusUser',
+      payload: [{ id: mockData.userId, isBooked: false }],
+    });
+  });
+
+  it('Should show error when checkout failed', async () => {
+    const errorMessage = 'Checkout failed';
+
+    (toast.error as jest.Mock).mockImplementation(() => {});
+    (checkOutBooking as jest.Mock).mockRejectedValue(new Error(errorMessage));
+
+    const { result } = renderHook(() => useCheckOut(), {
+      wrapper: ({ children }) => (
+        <QueryClientProvider client={queryClient}>
+          {children}
+        </QueryClientProvider>
+      ),
+    });
+
+    await act(async () => {
+      result.current.checkOutBooking({ idBooking: 1, roomId: 1, userId: 1 });
+    });
+
+    // Verify that error toast is displayed
+    expect(toast.error).toHaveBeenCalledWith(errorMessage);
+  });
+});
diff --git a/hotel-management/src/hooks/bookings/__tests__/useCreateBooking.test.tsx b/hotel-management/src/hooks/bookings/__tests__/useCreateBooking.test.tsx
new file mode 100644
index 0000000..4bbda0d
--- /dev/null
+++ b/hotel-management/src/hooks/bookings/__tests__/useCreateBooking.test.tsx
@@ -0,0 +1,94 @@
+import {
+  QueryClient,
+  QueryClientProvider,
+  useQueryClient,
+} from '@tanstack/react-query';
+import { ReactNode } from 'react';
+import { act, renderHook } from '@testing-library/react';
+import toast from 'react-hot-toast';
+
+// Hooks
+import { useCreateBooking } from '../useCreateBooking';
+
+// Types
+import { IBooking } from '@type/booking';
+
+// Constants
+import { ADD_SUCCESS } from '@constant/messages';
+
+// Services
+import { createBooking } from '@service/bookingServices';
+
+// Mock the necessary dependencies
+jest.mock('@tanstack/react-query', () => ({
+  ...jest.requireActual('@tanstack/react-query'),
+  useQueryClient: jest.fn(),
+}));
+jest.mock('@service/bookingServices', () => ({
+  createBooking: jest.fn(),
+}));
+jest.mock('react-hot-toast');
+
+const tempBooking: IBooking = {
+  id: 1,
+  startDate: '2023/11/12',
+  endDate: '2023/12/11',
+  amount: 2300,
+  roomId: 1,
+  status: true,
+  userId: 2,
+};
+
+describe('useCreateBooking', () => {
+  const queryClient = new QueryClient();
+  const env = ({ children }: { children: ReactNode }) => (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+
+  test('Should create booking successful', async () => {
+    (toast.success as jest.Mock).mockImplementation(() => {});
+
+    const invalidateQueriesMock = jest.fn();
+    (useQueryClient as jest.Mock).mockReturnValueOnce({
+      invalidateQueries: invalidateQueriesMock,
+    });
+    (createBooking as jest.Mock).mockResolvedValue({
+      data: tempBooking,
+    });
+
+    const { result } = renderHook(() => useCreateBooking(), {
+      wrapper: env,
+    });
+
+    // Call function
+    await act(async () => {
+      result.current.createBooking(tempBooking);
+    });
+
+    expect(toast.success).toHaveBeenCalledWith(ADD_SUCCESS);
+    expect(invalidateQueriesMock).toHaveBeenCalledWith({
+      queryKey: ['bookings'],
+    });
+  });
+
+  test('Should have error toast when have an error', async () => {
+    const errorMessage = 'Error';
+
+    (toast.error as jest.Mock).mockImplementation(() => {});
+    const invalidateQueriesMock = jest.fn();
+    (useQueryClient as jest.Mock).mockReturnValueOnce({
+      invalidateQueries: invalidateQueriesMock,
+    });
+    (createBooking as jest.Mock).mockRejectedValueOnce(new Error(errorMessage));
+
+    const { result } = renderHook(() => useCreateBooking(), {
+      wrapper: env,
+    });
+
+    await act(async () => {
+      result.current.createBooking(tempBooking);
+    });
+
+    expect(toast.error).toHaveBeenCalledWith(errorMessage);
+  });
+});
diff --git a/hotel-management/src/hooks/bookings/__tests__/useUpdateBooking.test.tsx b/hotel-management/src/hooks/bookings/__tests__/useUpdateBooking.test.tsx
new file mode 100644
index 0000000..1e064fa
--- /dev/null
+++ b/hotel-management/src/hooks/bookings/__tests__/useUpdateBooking.test.tsx
@@ -0,0 +1,95 @@
+import { act, renderHook } from '@testing-library/react';
+import toast from 'react-hot-toast';
+import {
+  QueryClient,
+  QueryClientProvider,
+  useQueryClient,
+} from '@tanstack/react-query';
+import { ReactNode } from 'react';
+
+// Types
+import { IBooking } from '@type/booking';
+
+// Constants
+import { UPDATE_SUCCESS } from '@constant/messages';
+
+// Services
+import { updateBooking } from '@service/bookingServices';
+
+// Hooks
+import { useUpdateBooking } from '../useUpdateBooking';
+
+// Mock the necessary dependencies
+jest.mock('@tanstack/react-query', () => ({
+  ...jest.requireActual('@tanstack/react-query'),
+  useQueryClient: jest.fn(),
+}));
+jest.mock('@service/bookingServices', () => ({
+  updateBooking: jest.fn(),
+}));
+jest.mock('react-hot-toast');
+
+const tempBooking: IBooking = {
+  id: 1,
+  startDate: '2023/11/12',
+  endDate: '2023/12/11',
+  amount: 2300,
+  roomId: 1,
+  status: true,
+  userId: 2,
+};
+
+describe('useUpdateBooking', () => {
+  const queryClient = new QueryClient();
+  const env = ({ children }: { children: ReactNode }) => (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+
+  test('Should update booking successful', async () => {
+    (toast.success as jest.Mock).mockImplementation(() => {});
+
+    const invalidateQueriesMock = jest.fn();
+    (useQueryClient as jest.Mock).mockReturnValueOnce({
+      invalidateQueries: invalidateQueriesMock,
+    });
+    (updateBooking as jest.Mock).mockResolvedValue({
+      data: tempBooking,
+    });
+
+    const { result } = renderHook(() => useUpdateBooking(), {
+      wrapper: env,
+    });
+
+    // Call function
+    await act(async () => {
+      result.current.updateBooking(tempBooking);
+    });
+
+    expect(toast.success).toHaveBeenCalledWith(UPDATE_SUCCESS);
+    expect(invalidateQueriesMock).toHaveBeenCalledWith({
+      queryKey: ['bookings'],
+    });
+  });
+
+  test('should handle createBooking mutation error', async () => {
+    const errorMessage = 'Error';
+
+    (toast.error as jest.Mock).mockImplementation(() => {});
+
+    const invalidateQueriesMock = jest.fn();
+    (useQueryClient as jest.Mock).mockReturnValueOnce({
+      invalidateQueries: invalidateQueriesMock,
+    });
+    (updateBooking as jest.Mock).mockRejectedValueOnce(new Error(errorMessage));
+
+    const { result } = renderHook(() => useUpdateBooking(), {
+      wrapper: env,
+    });
+
+    await act(async () => {
+      result.current.updateBooking(tempBooking);
+    });
+
+    expect(toast.error).toHaveBeenCalledWith(errorMessage);
+  });
+});
diff --git a/hotel-management/src/hooks/bookings/useBookings.ts b/hotel-management/src/hooks/bookings/useBookings.ts
index 4134a3c..7b37689 100644
--- a/hotel-management/src/hooks/bookings/useBookings.ts
+++ b/hotel-management/src/hooks/bookings/useBookings.ts
@@ -67,7 +67,11 @@ const useBookings = () => {
     });
   }
 
-  return { isLoading, bookings, count };
+  return {
+    isLoading,
+    bookings,
+    count
+  };
 };
 
 export { useBookings };
diff --git a/hotel-management/src/hooks/bookings/useCheckout.ts b/hotel-management/src/hooks/bookings/useCheckout.ts
index b99bd39..8ee438b 100644
--- a/hotel-management/src/hooks/bookings/useCheckout.ts
+++ b/hotel-management/src/hooks/bookings/useCheckout.ts
@@ -37,7 +37,11 @@ const useCheckOut = () => {
     onError: (err) => toast.error(err.message),
   });
 
-  return { checkOutBooking, isChecking, isSuccess };
+  return {
+    checkOutBooking,
+    isChecking,
+    isSuccess
+  };
 };
 
 export default useCheckOut;
diff --git a/hotel-management/src/hooks/bookings/useCreateBooking.ts b/hotel-management/src/hooks/bookings/useCreateBooking.ts
index de26709..4b9dc27 100644
--- a/hotel-management/src/hooks/bookings/useCreateBooking.ts
+++ b/hotel-management/src/hooks/bookings/useCreateBooking.ts
@@ -27,7 +27,11 @@ const useCreateBooking = () => {
     onError: (err) => toast.error(err.message),
   });
 
-  return { isCreating, createBooking, isSuccess };
+  return {
+    isCreating,
+    createBooking,
+    isSuccess
+  };
 };
 
 export { useCreateBooking };
diff --git a/hotel-management/src/hooks/bookings/useUpdateBooking.ts b/hotel-management/src/hooks/bookings/useUpdateBooking.ts
index d1577ef..1c04d30 100644
--- a/hotel-management/src/hooks/bookings/useUpdateBooking.ts
+++ b/hotel-management/src/hooks/bookings/useUpdateBooking.ts
@@ -27,7 +27,11 @@ const useUpdateBooking = () => {
     onError: (err) => toast.error(err.message),
   });
 
-  return { isUpdating, updateBooking, isSuccess };
+  return {
+    isUpdating,
+    updateBooking,
+    isSuccess
+  };
 };
 
 export { useUpdateBooking };
diff --git a/hotel-management/src/hooks/rooms/__tests__/useCreateRoom.test.tsx b/hotel-management/src/hooks/rooms/__tests__/useCreateRoom.test.tsx
new file mode 100644
index 0000000..41c21ec
--- /dev/null
+++ b/hotel-management/src/hooks/rooms/__tests__/useCreateRoom.test.tsx
@@ -0,0 +1,92 @@
+import { act, renderHook } from '@testing-library/react';
+import toast from 'react-hot-toast';
+import {
+  QueryClient,
+  QueryClientProvider,
+  useQueryClient,
+} from '@tanstack/react-query';
+import { ReactNode } from 'react';
+
+// Types
+import { IRoom } from '@type/room';
+
+// Hooks
+import { useCreateRoom } from '../useCreateRoom';
+
+// Constants
+import { ADD_SUCCESS } from '@constant/messages';
+
+// Services
+import { createRoom } from '@service/roomServices';
+
+jest.mock('@tanstack/react-query', () => ({
+  ...jest.requireActual('@tanstack/react-query'),
+  useQueryClient: jest.fn(),
+}));
+jest.mock('@service/roomServices', () => ({
+  createRoom: jest.fn(),
+}));
+jest.mock('react-hot-toast');
+
+const tempRoom: IRoom = {
+  id: 1,
+  name: 'Room 1',
+  price: 250,
+  status: true,
+  isDelete: false,
+};
+
+describe('useCreateRoom', () => {
+  const queryClient = new QueryClient();
+  const env = ({ children }: { children: ReactNode }) => (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+
+  test('Should create room successful', async () => {
+    (toast.success as jest.Mock).mockImplementation(() => {});
+
+    const invalidateQueriesMock = jest.fn();
+    (useQueryClient as jest.Mock).mockReturnValueOnce({
+      invalidateQueries: invalidateQueriesMock,
+    });
+    (createRoom as jest.Mock).mockResolvedValue({
+      data: tempRoom,
+    });
+
+    const { result } = renderHook(() => useCreateRoom(), {
+      wrapper: env,
+    });
+
+    // Call function
+    await act(async () => {
+      result.current.createRoom(tempRoom);
+    });
+
+    expect(toast.success).toHaveBeenCalledWith(ADD_SUCCESS);
+    expect(invalidateQueriesMock).toHaveBeenCalledWith({
+      queryKey: ['rooms'],
+    });
+  });
+
+  test('Should have error toast when have an error', async () => {
+    const errorMessage = 'Error';
+
+    (toast.error as jest.Mock).mockImplementation(() => {});
+
+    const invalidateQueriesMock = jest.fn();
+    (useQueryClient as jest.Mock).mockReturnValueOnce({
+      invalidateQueries: invalidateQueriesMock,
+    });
+    (createRoom as jest.Mock).mockRejectedValueOnce(new Error(errorMessage));
+
+    const { result } = renderHook(() => useCreateRoom(), {
+      wrapper: env,
+    });
+
+    await act(async () => {
+      result.current.createRoom(tempRoom);
+    });
+
+    expect(toast.error).toHaveBeenCalledWith(errorMessage);
+  });
+});
diff --git a/hotel-management/src/hooks/rooms/__tests__/useRooms.test.tsx b/hotel-management/src/hooks/rooms/__tests__/useRooms.test.tsx
new file mode 100644
index 0000000..7f2687c
--- /dev/null
+++ b/hotel-management/src/hooks/rooms/__tests__/useRooms.test.tsx
@@ -0,0 +1,149 @@
+import {
+  QueryClient,
+  QueryClientProvider,
+  useQuery,
+} from '@tanstack/react-query';
+import { useSearchParams } from 'react-router-dom';
+import { renderHook } from '@testing-library/react';
+import { URLSearchParams } from 'url';
+
+// Services
+import { getAllRooms } from '@service/roomServices';
+
+// Hooks
+import { useRooms } from '../useRooms';
+
+jest.mock('react-router-dom', () => ({
+  useSearchParams: jest.fn(),
+}));
+
+jest.mock('@tanstack/react-query', () => ({
+  ...jest.requireActual('@tanstack/react-query'),
+  useQuery: jest.fn(),
+}));
+
+jest.mock('@service/roomServices', () => ({
+  getAllRooms: jest.fn(),
+}));
+
+describe('useRooms hook', () => {
+  const queryClient = new QueryClient();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    (queryClient.prefetchQuery as jest.Mock) = jest.fn();
+  });
+
+  test('Should fetch data successful', async () => {
+    const sampleDate = { data: [{ id: 1, name: 'Room 1' }], count: 3 };
+
+    (useSearchParams as jest.Mock).mockReturnValue([
+      new URLSearchParams('page=1'),
+      new URLSearchParams('search=test'),
+    ]);
+
+    (useQuery as jest.Mock).mockImplementation(({ queryFn }) => {
+      const result = {
+        isLoading: false,
+        error: {},
+        data: sampleDate,
+      };
+      queryFn();
+
+      return result;
+    });
+
+    (getAllRooms as jest.Mock).mockResolvedValue(sampleDate);
+
+    const { result } = renderHook(() => useRooms(), {
+      wrapper: ({ children }) => (
+        <QueryClientProvider client={queryClient}>
+          {children}
+        </QueryClientProvider>
+      ),
+    });
+
+    expect(result.current.rooms).toEqual(sampleDate.data);
+    expect(result.current.count).toEqual(sampleDate.count);
+  });
+
+  test('Should prefetch the second page when in the first page', async () => {
+    const sampleDate = { data: [{ id: 1, name: 'Room 1' }], count: 7 };
+
+    (useSearchParams as jest.Mock).mockReturnValue([
+      new URLSearchParams('page=1'),
+      new URLSearchParams('search=test'),
+    ]);
+
+    (useQuery as jest.Mock).mockImplementation(({ queryFn }) => {
+      const result = {
+        isLoading: false,
+        error: {},
+        data: sampleDate,
+      };
+      queryFn();
+
+      return result;
+    });
+
+    (getAllRooms as jest.Mock).mockResolvedValue(sampleDate);
+
+    renderHook(() => useRooms(), {
+      wrapper: ({ children }) => (
+        <QueryClientProvider client={queryClient}>
+          {children}
+        </QueryClientProvider>
+      ),
+    });
+
+    expect(queryClient.prefetchQuery).toHaveBeenCalledTimes(1);
+
+    expect(queryClient.prefetchQuery).toHaveBeenCalledWith({
+      queryKey: ['rooms', 'id', 'asc', '', 2],
+      queryFn: expect.any(Function),
+    });
+  });
+
+  test('Should prefetch the previous page and next page when in the second page', async () => {
+    const sampleDate = { data: [{ id: 1, name: 'Room 1' }], count: 12 };
+
+    (useSearchParams as jest.Mock).mockReturnValue([
+      new URLSearchParams('page=2'),
+      new URLSearchParams('search=test'),
+    ]);
+
+    (useQuery as jest.Mock).mockImplementation(({ queryFn }) => {
+      const result = {
+        isLoading: false,
+        error: {},
+        data: sampleDate,
+      };
+      queryFn();
+
+      return result;
+    });
+
+    (getAllRooms as jest.Mock).mockResolvedValue(sampleDate);
+
+    renderHook(() => useRooms(), {
+      wrapper: ({ children }) => (
+        <QueryClientProvider client={queryClient}>
+          {children}
+        </QueryClientProvider>
+      ),
+    });
+
+    expect(queryClient.prefetchQuery).toHaveBeenCalledTimes(2);
+
+    expect(queryClient.prefetchQuery).toHaveBeenCalledWith({
+      queryKey: ['rooms', 'id', 'asc', '', 3],
+      queryFn: expect.any(Function),
+    });
+
+    expect(queryClient.prefetchQuery).toHaveBeenCalledWith({
+      queryKey: ['rooms', 'id', 'asc', '', 1],
+      queryFn: expect.any(Function),
+    });
+  });
+});
diff --git a/hotel-management/src/hooks/rooms/__tests__/useSetIsDeleteRoom.test.tsx b/hotel-management/src/hooks/rooms/__tests__/useSetIsDeleteRoom.test.tsx
new file mode 100644
index 0000000..8c38731
--- /dev/null
+++ b/hotel-management/src/hooks/rooms/__tests__/useSetIsDeleteRoom.test.tsx
@@ -0,0 +1,93 @@
+import { act, renderHook } from '@testing-library/react';
+import toast from 'react-hot-toast';
+import {
+  QueryClient,
+  QueryClientProvider,
+  useQueryClient,
+} from '@tanstack/react-query';
+import { ReactNode } from 'react';
+
+// Types
+import { IRoom } from '@type/room';
+
+// Constants
+import { DELETE_SUCCESS } from '@constant/messages';
+
+// Services
+import { setIsDeleteRoom } from '@service/roomServices';
+
+// Hooks
+import { useSetIsDeleteRoom } from '../useSetIsDeleteRoom';
+
+// Mock the necessary dependencies
+jest.mock('@tanstack/react-query', () => ({
+  ...jest.requireActual('@tanstack/react-query'),
+  useQueryClient: jest.fn(),
+}));
+jest.mock('@service/roomServices', () => ({
+  setIsDeleteRoom: jest.fn(),
+}));
+jest.mock('react-hot-toast');
+
+const tempRoom: IRoom = {
+  id: 1,
+  name: 'Room 1',
+  price: 250,
+  status: true,
+  isDelete: false,
+};
+
+describe('useUpdateRoom', () => {
+  const queryClient = new QueryClient();
+  const env = ({ children }: { children: ReactNode }) => (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+
+  test('Should update room successful', async () => {
+    (toast.success as jest.Mock).mockImplementation(() => {});
+
+    const invalidateQueriesMock = jest.fn();
+    (useQueryClient as jest.Mock).mockReturnValueOnce({
+      invalidateQueries: invalidateQueriesMock,
+    });
+    (setIsDeleteRoom as jest.Mock).mockResolvedValue({
+      data: tempRoom,
+    });
+
+    const { result } = renderHook(() => useSetIsDeleteRoom(), {
+      wrapper: env,
+    });
+
+    // Call function
+    await act(async () => {
+      result.current.setIsDeleteRoom(1);
+    });
+
+    expect(toast.success).toHaveBeenCalledWith(DELETE_SUCCESS);
+    expect(invalidateQueriesMock).toHaveBeenCalledWith({
+      queryKey: ['rooms'],
+    });
+  });
+
+  test('should handle createRoom mutation error', async () => {
+    const errorMessage = 'Error';
+
+    (toast.error as jest.Mock).mockImplementation(() => {});
+    const invalidateQueriesMock = jest.fn();
+    (useQueryClient as jest.Mock).mockReturnValueOnce({
+      invalidateQueries: invalidateQueriesMock,
+    });
+    (setIsDeleteRoom as jest.Mock).mockRejectedValueOnce(new Error(errorMessage));
+
+    const { result } = renderHook(() => useSetIsDeleteRoom(), {
+      wrapper: env,
+    });
+
+    // Call function
+    await act(async () => {
+      result.current.setIsDeleteRoom(1);
+    });
+
+    expect(toast.error).toHaveBeenCalledWith(errorMessage);
+  });
+});
diff --git a/hotel-management/src/hooks/rooms/__tests__/useUpdateRoom.test.tsx b/hotel-management/src/hooks/rooms/__tests__/useUpdateRoom.test.tsx
new file mode 100644
index 0000000..064c1d8
--- /dev/null
+++ b/hotel-management/src/hooks/rooms/__tests__/useUpdateRoom.test.tsx
@@ -0,0 +1,93 @@
+import { act, renderHook } from '@testing-library/react';
+import toast from 'react-hot-toast';
+import {
+  QueryClient,
+  QueryClientProvider,
+  useQueryClient,
+} from '@tanstack/react-query';
+import { ReactNode } from 'react';
+
+// Types
+import { IRoom } from '@type/room';
+
+// Constants
+import { UPDATE_SUCCESS } from '@constant/messages';
+
+// Services
+import { updateRoom } from '@service/roomServices';
+
+// Hooks
+import { useUpdateRoom } from '../useUpdateRoom';
+
+// Mock the necessary dependencies
+jest.mock('@tanstack/react-query', () => ({
+  ...jest.requireActual('@tanstack/react-query'),
+  useQueryClient: jest.fn(),
+}));
+jest.mock('@service/roomServices', () => ({
+  updateRoom: jest.fn(),
+}));
+jest.mock('react-hot-toast');
+
+const tempRoom: IRoom = {
+  id: 1,
+  name: 'Room 1',
+  price: 250,
+  status: true,
+  isDelete: false,
+};
+
+describe('useUpdateRoom', () => {
+  const queryClient = new QueryClient();
+  const env = ({ children }: { children: ReactNode }) => (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+
+  test('Should update room successful', async () => {
+    (toast.success as jest.Mock).mockImplementation(() => {});
+    const invalidateQueriesMock = jest.fn();
+    (useQueryClient as jest.Mock).mockReturnValueOnce({
+      invalidateQueries: invalidateQueriesMock,
+    });
+    (updateRoom as jest.Mock).mockResolvedValue({
+      data: tempRoom,
+    });
+
+    const { result } = renderHook(() => useUpdateRoom(), {
+      wrapper: env,
+    });
+
+    // Call function
+    await act(async () => {
+      result.current.updateRoom(tempRoom);
+    });
+
+    expect(toast.success).toHaveBeenCalledWith(UPDATE_SUCCESS);
+    expect(invalidateQueriesMock).toHaveBeenCalledWith({
+      queryKey: ['rooms'],
+    });
+  });
+
+  test('should handle createRoom mutation error', async () => {
+    const errorMessage = 'Error';
+
+    (toast.error as jest.Mock).mockImplementation(() => {});
+
+    const invalidateQueriesMock = jest.fn();
+    (useQueryClient as jest.Mock).mockReturnValueOnce({
+      invalidateQueries: invalidateQueriesMock,
+    });
+    (updateRoom as jest.Mock).mockRejectedValueOnce(new Error(errorMessage));
+
+    const { result } = renderHook(() => useUpdateRoom(), {
+      wrapper: env,
+    });
+
+    // Call function
+    await act(async () => {
+      result.current.updateRoom(tempRoom);
+    });
+
+    expect(toast.error).toHaveBeenCalledWith(errorMessage);
+  });
+});
diff --git a/hotel-management/src/hooks/rooms/useCreateRoom.ts b/hotel-management/src/hooks/rooms/useCreateRoom.ts
index 1eaee6a..ba3f767 100644
--- a/hotel-management/src/hooks/rooms/useCreateRoom.ts
+++ b/hotel-management/src/hooks/rooms/useCreateRoom.ts
@@ -37,7 +37,11 @@ const useCreateRoom = () => {
     onError: (err) => toast.error(err.message),
   });
 
-  return { isCreating, createRoom, isSuccess };
+  return {
+    isCreating,
+    createRoom,
+    isSuccess
+  };
 };
 
 export { useCreateRoom };
diff --git a/hotel-management/src/hooks/rooms/useRooms.ts b/hotel-management/src/hooks/rooms/useRooms.ts
index ff06f56..1a1ad03 100644
--- a/hotel-management/src/hooks/rooms/useRooms.ts
+++ b/hotel-management/src/hooks/rooms/useRooms.ts
@@ -73,7 +73,11 @@ const useRooms = () => {
     });
   }
 
-  return { isLoading, rooms, count };
+  return {
+    isLoading,
+    rooms,
+    count
+  };
 };
 
 export { useRooms };
diff --git a/hotel-management/src/hooks/rooms/useSetIsDeleteRoom.ts b/hotel-management/src/hooks/rooms/useSetIsDeleteRoom.ts
index 0c99d9c..b68b766 100644
--- a/hotel-management/src/hooks/rooms/useSetIsDeleteRoom.ts
+++ b/hotel-management/src/hooks/rooms/useSetIsDeleteRoom.ts
@@ -6,6 +6,8 @@ import { setIsDeleteRoom as setIsDeleteRoomFn } from '@service/roomServices';
 
 // Constants
 import * as messages from '@constant/messages';
+
+// Hooks
 import { useUserRoomAvailable } from '@hook/useUserRoomAvailable';
 
 /**
@@ -33,7 +35,11 @@ const useSetIsDeleteRoom = () => {
     onError: (err) => toast.error(err.message),
   });
 
-  return { isDeleting, setIsDeleteRoom, isSuccess };
+  return {
+    isDeleting,
+    setIsDeleteRoom,
+    isSuccess
+  };
 };
 
 export { useSetIsDeleteRoom };
diff --git a/hotel-management/src/hooks/users/__tests__/useCreateUser.test.tsx b/hotel-management/src/hooks/users/__tests__/useCreateUser.test.tsx
new file mode 100644
index 0000000..3b8aee8
--- /dev/null
+++ b/hotel-management/src/hooks/users/__tests__/useCreateUser.test.tsx
@@ -0,0 +1,93 @@
+import { act, renderHook } from '@testing-library/react';
+import toast from 'react-hot-toast';
+import {
+  QueryClient,
+  QueryClientProvider,
+  useQueryClient,
+} from '@tanstack/react-query';
+import { ReactNode } from 'react';
+
+// Hooks
+import { useCreateUser } from '../useCreateUser';
+
+// Types
+import { IUser } from '@type/user';
+
+// Constants
+import { ADD_SUCCESS } from '@constant/messages';
+
+// Services
+import { createUser } from '@service/userServices';
+
+// Mock the necessary dependencies
+jest.mock('@tanstack/react-query', () => ({
+  ...jest.requireActual('@tanstack/react-query'),
+  useQueryClient: jest.fn(),
+}));
+jest.mock('@service/userServices', () => ({
+  createUser: jest.fn(),
+}));
+jest.mock('react-hot-toast');
+
+const tempUser: IUser = {
+  id: 1,
+  name: 'User 1',
+  phone: '0324432312',
+  isBooked: true,
+  isDelete: false,
+};
+
+describe('useCreateUser', () => {
+  const queryClient = new QueryClient();
+  const env = ({ children }: { children: ReactNode }) => (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+
+  test('Should create user successful', async () => {
+    (toast.success as jest.Mock).mockImplementation(() => {});
+
+    const invalidateQueriesMock = jest.fn();
+    (useQueryClient as jest.Mock).mockReturnValueOnce({
+      invalidateQueries: invalidateQueriesMock,
+    });
+    (createUser as jest.Mock).mockResolvedValue({
+      data: tempUser,
+    });
+
+    const { result } = renderHook(() => useCreateUser(), {
+      wrapper: env,
+    });
+
+    // Call function
+    await act(async () => {
+      result.current.createUser(tempUser);
+    });
+
+    expect(toast.success).toHaveBeenCalledWith(ADD_SUCCESS);
+    expect(invalidateQueriesMock).toHaveBeenCalledWith({
+      queryKey: ['users'],
+    });
+  });
+
+  test('Should have error toast when have an error', async () => {
+    const errorMessage = 'Error';
+
+    (toast.error as jest.Mock).mockImplementation(() => {});
+
+    const invalidateQueriesMock = jest.fn();
+    (useQueryClient as jest.Mock).mockReturnValueOnce({
+      invalidateQueries: invalidateQueriesMock,
+    });
+    (createUser as jest.Mock).mockRejectedValueOnce(new Error(errorMessage));
+
+    const { result } = renderHook(() => useCreateUser(), {
+      wrapper: env,
+    });
+
+    await act(async () => {
+      result.current.createUser(tempUser);
+    });
+
+    expect(toast.error).toHaveBeenCalledWith(errorMessage);
+  });
+});
diff --git a/hotel-management/src/hooks/users/__tests__/useSetIsDeleteUser.test.tsx b/hotel-management/src/hooks/users/__tests__/useSetIsDeleteUser.test.tsx
new file mode 100644
index 0000000..544abea
--- /dev/null
+++ b/hotel-management/src/hooks/users/__tests__/useSetIsDeleteUser.test.tsx
@@ -0,0 +1,92 @@
+import { act, renderHook } from '@testing-library/react';
+import toast from 'react-hot-toast';
+import {
+  QueryClient,
+  QueryClientProvider,
+  useQueryClient,
+} from '@tanstack/react-query';
+import { ReactNode } from 'react';
+
+// Types
+import { IUser } from '@type/user';
+
+// Constants
+import { DELETE_SUCCESS } from '@constant/messages';
+
+// Services
+import { setIsDeleteUser } from '@service/userServices';
+
+// Hooks
+import { useIsDeleteUser } from '../useSetIsDeleteUser';
+
+// Mock the necessary dependencies
+jest.mock('@tanstack/react-query', () => ({
+  ...jest.requireActual('@tanstack/react-query'),
+  useQueryClient: jest.fn(),
+}));
+jest.mock('@service/userServices', () => ({
+  setIsDeleteUser: jest.fn(),
+}));
+jest.mock('react-hot-toast');
+
+const tempUser: IUser = {
+  id: 1,
+  name: 'User 1',
+  phone: '0324432312',
+  isBooked: true,
+  isDelete: false,
+};
+
+describe('useUpdateUser', () => {
+  const queryClient = new QueryClient();
+  const env = ({ children }: { children: ReactNode }) => (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+
+  test('Should update user successful', async () => {
+    (toast.success as jest.Mock).mockImplementation(() => {});
+
+    const invalidateQueriesMock = jest.fn();
+    (useQueryClient as jest.Mock).mockReturnValueOnce({
+      invalidateQueries: invalidateQueriesMock,
+    });
+    (setIsDeleteUser as jest.Mock).mockResolvedValue({
+      data: tempUser,
+    });
+
+    const { result } = renderHook(() => useIsDeleteUser(), {
+      wrapper: env,
+    });
+
+    // Call function
+    await act(async () => {
+      result.current.setIsDeleteUser(1);
+    });
+
+    expect(toast.success).toHaveBeenCalledWith(DELETE_SUCCESS);
+    expect(invalidateQueriesMock).toHaveBeenCalledWith({
+      queryKey: ['users'],
+    });
+  });
+
+  test('Should throw error when set failed', async () => {
+    const errorMessage = 'Error';
+
+    (toast.error as jest.Mock).mockImplementation(() => {});
+    const invalidateQueriesMock = jest.fn();
+    (useQueryClient as jest.Mock).mockReturnValueOnce({
+      invalidateQueries: invalidateQueriesMock,
+    });
+    (setIsDeleteUser as jest.Mock).mockRejectedValueOnce(new Error(errorMessage));
+
+    const { result } = renderHook(() => useIsDeleteUser(), {
+      wrapper: env,
+    });
+
+    await act(async () => {
+      result.current.setIsDeleteUser(1);
+    });
+
+    expect(toast.error).toHaveBeenCalledWith(errorMessage);
+  });
+});
diff --git a/hotel-management/src/hooks/users/__tests__/useUpdateUser.test.tsx b/hotel-management/src/hooks/users/__tests__/useUpdateUser.test.tsx
new file mode 100644
index 0000000..c2bd258
--- /dev/null
+++ b/hotel-management/src/hooks/users/__tests__/useUpdateUser.test.tsx
@@ -0,0 +1,93 @@
+import { act, renderHook } from '@testing-library/react';
+import toast from 'react-hot-toast';
+import {
+  QueryClient,
+  QueryClientProvider,
+  useQueryClient,
+} from '@tanstack/react-query';
+import { ReactNode } from 'react';
+
+// Types
+import { IUser } from '@type/user';
+
+// Constants
+import { UPDATE_SUCCESS } from '@constant/messages';
+
+// Services
+import { updateUser } from '@service/userServices';
+
+// Hooks
+import { useUpdateUser } from '../useUpdateUser';
+
+// Mock the necessary dependencies
+jest.mock('@tanstack/react-query', () => ({
+  ...jest.requireActual('@tanstack/react-query'),
+  useQueryClient: jest.fn(),
+}));
+jest.mock('@service/userServices', () => ({
+  updateUser: jest.fn(),
+}));
+jest.mock('react-hot-toast');
+
+const tempUser: IUser = {
+  id: 1,
+  name: 'User 1',
+  phone: '0324432312',
+  isBooked: true,
+  isDelete: false,
+};
+
+describe('useUpdateUser', () => {
+  const queryClient = new QueryClient();
+  const env = ({ children }: { children: ReactNode }) => (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+
+  test('Should update user successful', async () => {
+    (toast.success as jest.Mock).mockImplementation(() => {});
+
+    const invalidateQueriesMock = jest.fn();
+    (useQueryClient as jest.Mock).mockReturnValueOnce({
+      invalidateQueries: invalidateQueriesMock,
+    });
+    (updateUser as jest.Mock).mockResolvedValue({
+      data: tempUser,
+    });
+    const { result } = renderHook(() => useUpdateUser(), {
+      wrapper: env,
+    });
+
+    // Call function
+    await act(async () => {
+      result.current.updateUser(tempUser);
+    });
+
+    expect(toast.success).toHaveBeenCalledWith(UPDATE_SUCCESS);
+    expect(invalidateQueriesMock).toHaveBeenCalledWith({
+      queryKey: ['users'],
+    });
+  });
+
+  test('should handle createUser mutation error', async () => {
+    const errorMessage = 'Error';
+
+    (toast.error as jest.Mock).mockImplementation(() => {});
+
+    const invalidateQueriesMock = jest.fn();
+    (useQueryClient as jest.Mock).mockReturnValueOnce({
+      invalidateQueries: invalidateQueriesMock,
+    });
+    (updateUser as jest.Mock).mockRejectedValueOnce(new Error(errorMessage));
+
+    const { result } = renderHook(() => useUpdateUser(), {
+      wrapper: env,
+    });
+
+    // Call function
+    await act(async () => {
+      result.current.updateUser(tempUser);
+    });
+
+    expect(toast.error).toHaveBeenCalledWith(errorMessage);
+  });
+});
diff --git a/hotel-management/src/hooks/users/__tests__/useUsers.test.tsx b/hotel-management/src/hooks/users/__tests__/useUsers.test.tsx
new file mode 100644
index 0000000..8c2dcbf
--- /dev/null
+++ b/hotel-management/src/hooks/users/__tests__/useUsers.test.tsx
@@ -0,0 +1,149 @@
+import {
+  QueryClient,
+  QueryClientProvider,
+  useQuery,
+} from '@tanstack/react-query';
+import { useSearchParams } from 'react-router-dom';
+import { renderHook } from '@testing-library/react';
+import { URLSearchParams } from 'url';
+
+// Services
+import { getAllUsers } from '@service/userServices';
+
+// Hooks
+import { useUsers } from '../useUsers';
+
+jest.mock('react-router-dom', () => ({
+  useSearchParams: jest.fn(),
+}));
+
+jest.mock('@tanstack/react-query', () => ({
+  ...jest.requireActual('@tanstack/react-query'),
+  useQuery: jest.fn(),
+}));
+
+jest.mock('@service/userServices', () => ({
+  getAllUsers: jest.fn(),
+}));
+
+describe('useUsers hook', () => {
+  let queryClient: QueryClient;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    queryClient = new QueryClient();
+    (queryClient.prefetchQuery as jest.Mock) = jest.fn();
+  });
+
+  test('Should fetch data successful', async () => {
+    const sampleDate = { data: [{ id: 1, name: 'User 1' }], count: 3 };
+
+    (useSearchParams as jest.Mock).mockReturnValue([
+      new URLSearchParams('page=1'),
+      new URLSearchParams('search=test'),
+    ]);
+
+    (useQuery as jest.Mock).mockImplementation(({ queryFn }) => {
+      const result = {
+        isLoading: false,
+        error: {},
+        data: sampleDate,
+      };
+      queryFn();
+
+      return result;
+    });
+
+    (getAllUsers as jest.Mock).mockResolvedValue(sampleDate);
+
+    const { result } = renderHook(() => useUsers(), {
+      wrapper: ({ children }) => (
+        <QueryClientProvider client={queryClient}>
+          {children}
+        </QueryClientProvider>
+      ),
+    });
+
+    expect(result.current.users).toEqual(sampleDate.data);
+    expect(result.current.count).toEqual(sampleDate.count);
+  });
+
+  test('Should prefetch the second page when in the first page', async () => {
+    const sampleDate = { data: [{ id: 1, name: 'User 1' }], count: 7 };
+
+    (useSearchParams as jest.Mock).mockReturnValue([
+      new URLSearchParams('page=1'),
+      new URLSearchParams('search=test'),
+    ]);
+
+    (useQuery as jest.Mock).mockImplementation(({ queryFn }) => {
+      const result = {
+        isLoading: false,
+        error: {},
+        data: sampleDate,
+      };
+      queryFn();
+
+      return result;
+    });
+
+    (getAllUsers as jest.Mock).mockResolvedValue(sampleDate);
+
+    renderHook(() => useUsers(), {
+      wrapper: ({ children }) => (
+        <QueryClientProvider client={queryClient}>
+          {children}
+        </QueryClientProvider>
+      ),
+    });
+
+    expect(queryClient.prefetchQuery).toHaveBeenCalledTimes(1);
+
+    expect(queryClient.prefetchQuery).toHaveBeenCalledWith({
+      queryKey: ['users', 'id', 'asc', '', 2],
+      queryFn: expect.any(Function),
+    });
+  });
+
+  test('Should prefetch the previous page and next page when in the second page', async () => {
+    const sampleDate = { data: [{ id: 1, name: 'User 1' }], count: 12 };
+
+    (useSearchParams as jest.Mock).mockReturnValue([
+      new URLSearchParams('page=2'),
+      new URLSearchParams('search=test'),
+    ]);
+
+    (useQuery as jest.Mock).mockImplementation(({ queryFn }) => {
+      const result = {
+        isLoading: false,
+        error: {},
+        data: sampleDate,
+      };
+      queryFn();
+
+      return result;
+    });
+
+    (getAllUsers as jest.Mock).mockResolvedValue(sampleDate);
+
+    renderHook(() => useUsers(), {
+      wrapper: ({ children }) => (
+        <QueryClientProvider client={queryClient}>
+          {children}
+        </QueryClientProvider>
+      ),
+    });
+
+    expect(queryClient.prefetchQuery).toHaveBeenCalledTimes(2);
+
+    expect(queryClient.prefetchQuery).toHaveBeenCalledWith({
+      queryKey: ['users', 'id', 'asc', '', 3],
+      queryFn: expect.any(Function),
+    });
+
+    expect(queryClient.prefetchQuery).toHaveBeenCalledWith({
+      queryKey: ['users', 'id', 'asc', '', 1],
+      queryFn: expect.any(Function),
+    });
+  });
+});
diff --git a/hotel-management/src/hooks/users/useCreateUser.ts b/hotel-management/src/hooks/users/useCreateUser.ts
index e51c76e..dcd7830 100644
--- a/hotel-management/src/hooks/users/useCreateUser.ts
+++ b/hotel-management/src/hooks/users/useCreateUser.ts
@@ -37,7 +37,11 @@ const useCreateUser = () => {
     onError: (err) => toast.error(err.message),
   });
 
-  return { isCreating, createUser, isSuccess };
+  return {
+    isCreating,
+    createUser,
+    isSuccess,
+  };
 };
 
 export { useCreateUser };
diff --git a/hotel-management/src/hooks/users/useSetIsDeleteUser.ts b/hotel-management/src/hooks/users/useSetIsDeleteUser.ts
index e68d446..4a2cad6 100644
--- a/hotel-management/src/hooks/users/useSetIsDeleteUser.ts
+++ b/hotel-management/src/hooks/users/useSetIsDeleteUser.ts
@@ -34,7 +34,11 @@ const useIsDeleteUser = () => {
     onError: (err) => toast.error(err.message),
   });
 
-  return { isDeleting, setIsDeleteUser, isSuccess };
+  return {
+    isDeleting,
+    setIsDeleteUser,
+    isSuccess,
+  };
 };
 
 export { useIsDeleteUser };
diff --git a/hotel-management/src/hooks/users/useUpdateUser.ts b/hotel-management/src/hooks/users/useUpdateUser.ts
index ec0d2fc..db023b2 100644
--- a/hotel-management/src/hooks/users/useUpdateUser.ts
+++ b/hotel-management/src/hooks/users/useUpdateUser.ts
@@ -37,7 +37,11 @@ const useUpdateUser = () => {
     onError: (err) => toast.error(err.message),
   });
 
-  return { isUpdating, updateUser, isSuccess };
+  return {
+    isUpdating,
+    updateUser,
+    isSuccess,
+  };
 };
 
 export { useUpdateUser };
diff --git a/hotel-management/src/hooks/users/useUsers.ts b/hotel-management/src/hooks/users/useUsers.ts
index e79c4be..fd0582f 100644
--- a/hotel-management/src/hooks/users/useUsers.ts
+++ b/hotel-management/src/hooks/users/useUsers.ts
@@ -18,7 +18,9 @@ const useUsers = () => {
   const sortByValue = searchParams.get('sortBy') || 'id';
   const orderByValue = searchParams.get('orderBy') || 'asc';
   const searchValue = searchParams.get('search') || '';
-  const page = searchParams.get('page') ? Number(searchParams.get('page')) : 1;
+  const page = searchParams.get('page')
+    ? Number(searchParams.get('page'))
+    : 1;
 
   const {
     isLoading,
@@ -72,7 +74,11 @@ const useUsers = () => {
     });
   }
 
-  return { isLoading, users, count };
+  return {
+    isLoading,
+    users,
+    count,
+  };
 };
 
 export { useUsers };
diff --git a/hotel-management/src/pages/Account/__tests__/AccountInforForm.test.tsx b/hotel-management/src/pages/Account/__tests__/AccountInforForm.test.tsx
new file mode 100644
index 0000000..28fa3e2
--- /dev/null
+++ b/hotel-management/src/pages/Account/__tests__/AccountInforForm.test.tsx
@@ -0,0 +1,68 @@
+import { act, fireEvent, render, RenderResult, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+// Components
+import AccountInforForm from '@page/Account/AccountInforForm';
+
+// Hooks
+import { useAccount } from '@hook/authentication/useAccount';
+import { useUpdateAccount } from '@hook/authentication/useUpdateAccount';
+
+jest.mock('@hook/authentication/useUpdateAccount');
+jest.mock('@hook/authentication/useAccount');
+
+const mockAccount = {
+  email: 'admin@nezumi.site',
+  user_metadata: {
+    fullName: 'Loi Phan',
+  },
+};
+
+(useAccount as jest.Mock).mockReturnValue({
+  account: mockAccount,
+});
+
+(useUpdateAccount as jest.Mock).mockReturnValue({
+  updateAccount: jest.fn(),
+  isUpdating: false,
+});
+
+describe('AccountInforForm', () => {
+  let wrapper: RenderResult | null = null;
+
+  beforeEach(() => {
+    wrapper = render(<AccountInforForm />);
+  });
+
+  test('Should render correctly', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  test('Should init data correctly', async () => {
+    const emailField = wrapper!.container.querySelector('#email');
+    const fullNameField = wrapper!.container.querySelector('#fullName');
+
+    expect(emailField!).toHaveValue(mockAccount.email);
+
+    expect(fullNameField).toHaveValue(mockAccount.user_metadata.fullName);
+  });
+
+  test('Should update account correctly', async () => {
+    const fullNameField = wrapper!.container.querySelector('#fullName');
+
+    const newFullName = 'Nezumi';
+    act(() => {
+      fireEvent.change(fullNameField!, { target: { value: newFullName } });
+    });
+
+    act(() => {
+      fireEvent.submit(wrapper!.getByText('Update account'));
+    });
+
+    await waitFor(() => {
+      expect(useUpdateAccount().updateAccount).toHaveBeenCalledWith({
+        fullName: newFullName,
+      });
+    });
+  });
+});
diff --git a/hotel-management/src/pages/Account/__tests__/AccountPasswordForm.test.tsx b/hotel-management/src/pages/Account/__tests__/AccountPasswordForm.test.tsx
new file mode 100644
index 0000000..46dd14b
--- /dev/null
+++ b/hotel-management/src/pages/Account/__tests__/AccountPasswordForm.test.tsx
@@ -0,0 +1,67 @@
+import {
+  RenderResult,
+  fireEvent,
+  render,
+  waitFor,
+} from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+// Components
+import AccountPasswordForm from '../AccountPasswordForm';
+
+// Hooks
+import { useUpdateAccount } from '@hook/authentication/useUpdateAccount';
+
+jest.mock('@hook/authentication/useUpdateAccount');
+
+describe('AccountPasswordForm', () => {
+  let wrapper: RenderResult | null = null;
+  const queryClient = new QueryClient();
+  const mockUpdateAccount = jest.fn();
+
+  beforeEach(() => {
+    (useUpdateAccount as jest.Mock).mockReturnValue({
+      updateAccount: mockUpdateAccount,
+      isUpdating: false,
+    });
+
+    wrapper = render(
+      <QueryClientProvider client={queryClient}>
+        <AccountPasswordForm />
+      </QueryClientProvider>
+    );
+  });
+
+  test('Should render correctly', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  test('Should submit form successful', async () => {
+    const passwordField = wrapper!.container.querySelector('#password');
+    const comfirmPasswordField =
+      wrapper!.container.querySelector('#confirmPassword');
+    const submitButton = wrapper!.getByText('Update password');
+
+    fireEvent.change(passwordField!, { target: { value: 'Phanhuuloi2@@1' } });
+    fireEvent.change(comfirmPasswordField!, {
+      target: { value: 'Phanhuuloi2@@1' },
+    });
+    fireEvent.click(submitButton);
+
+    await waitFor(() => {
+      expect(mockUpdateAccount).toHaveBeenCalled();
+    });
+  });
+
+  test('Should display error message when input invalid field', async () => {
+    const passwordField = wrapper!.container.querySelector('#password');
+    const submitButton = wrapper!.getByText('Update password');
+
+    fireEvent.change(passwordField!, { target: { value: '@' } });
+    fireEvent.click(submitButton);
+
+    await waitFor(() => {
+      expect(wrapper!.getByText('Password not match!')).toBeInTheDocument();
+    });
+  });
+});
diff --git a/hotel-management/src/pages/Account/__tests__/__snapshots__/AccountInforForm.test.tsx.snap b/hotel-management/src/pages/Account/__tests__/__snapshots__/AccountInforForm.test.tsx.snap
new file mode 100644
index 0000000..dc8ae1c
--- /dev/null
+++ b/hotel-management/src/pages/Account/__tests__/__snapshots__/AccountInforForm.test.tsx.snap
@@ -0,0 +1,170 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AccountInforForm Should render correctly 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <form
+        class="sc-dlniIP bCPNqw"
+      >
+        <div
+          class="sc-eCAqax dgDilB"
+          direction="horizontal"
+        >
+          <label
+            class="sc-jSFipO cMYxin"
+          >
+            Email:
+          </label>
+          <div>
+            <input
+              class="sc-bdnyFh gXSWSo"
+              id="email"
+              readonly=""
+              type="text"
+              value="admin@nezumi.site"
+            />
+          </div>
+        </div>
+        <div
+          class="sc-eCAqax dgDilB"
+          direction="horizontal"
+        >
+          <label
+            class="sc-jSFipO cMYxin"
+          >
+            Full Name:
+          </label>
+          <div>
+            <input
+              class="sc-bdnyFh gXSWSo"
+              id="fullName"
+              name="fullName"
+              type="text"
+            />
+          </div>
+        </div>
+        <div
+          class="sc-hKFymg dteuGK"
+        >
+          <button
+            class="sc-gtsqUy sc-iCoHzw iXmfC cwhbgM"
+            name="submit"
+            type="submit"
+            variations="primary"
+          >
+            Update account
+          </button>
+        </div>
+      </form>
+    </div>
+  </body>,
+  "container": <div>
+    <form
+      class="sc-dlniIP bCPNqw"
+    >
+      <div
+        class="sc-eCAqax dgDilB"
+        direction="horizontal"
+      >
+        <label
+          class="sc-jSFipO cMYxin"
+        >
+          Email:
+        </label>
+        <div>
+          <input
+            class="sc-bdnyFh gXSWSo"
+            id="email"
+            readonly=""
+            type="text"
+            value="admin@nezumi.site"
+          />
+        </div>
+      </div>
+      <div
+        class="sc-eCAqax dgDilB"
+        direction="horizontal"
+      >
+        <label
+          class="sc-jSFipO cMYxin"
+        >
+          Full Name:
+        </label>
+        <div>
+          <input
+            class="sc-bdnyFh gXSWSo"
+            id="fullName"
+            name="fullName"
+            type="text"
+          />
+        </div>
+      </div>
+      <div
+        class="sc-hKFymg dteuGK"
+      >
+        <button
+          class="sc-gtsqUy sc-iCoHzw iXmfC cwhbgM"
+          name="submit"
+          type="submit"
+          variations="primary"
+        >
+          Update account
+        </button>
+      </div>
+    </form>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
diff --git a/hotel-management/src/pages/Account/__tests__/__snapshots__/AccountPasswordForm.test.tsx.snap b/hotel-management/src/pages/Account/__tests__/__snapshots__/AccountPasswordForm.test.tsx.snap
new file mode 100644
index 0000000..0d653f7
--- /dev/null
+++ b/hotel-management/src/pages/Account/__tests__/__snapshots__/AccountPasswordForm.test.tsx.snap
@@ -0,0 +1,168 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AccountPasswordForm Should render correctly 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <form
+        class="sc-dlniIP bCPNqw"
+      >
+        <div
+          class="sc-eCAqax dgDilB"
+          direction="horizontal"
+        >
+          <label
+            class="sc-jSFipO cMYxin"
+          >
+            Password:
+          </label>
+          <div>
+            <input
+              class="sc-bdnyFh gXSWSo"
+              id="password"
+              name="password"
+              type="password"
+            />
+          </div>
+        </div>
+        <div
+          class="sc-eCAqax dgDilB"
+          direction="horizontal"
+        >
+          <label
+            class="sc-jSFipO cMYxin"
+          >
+            Confirm Password:
+          </label>
+          <div>
+            <input
+              class="sc-bdnyFh gXSWSo"
+              id="confirmPassword"
+              name="confirmPassword"
+              type="password"
+            />
+          </div>
+        </div>
+        <div
+          class="sc-hKFymg dteuGK"
+        >
+          <button
+            class="sc-gtsqUy sc-iCoHzw iXmfC cwhbgM"
+            name="submit"
+            type="submit"
+            variations="primary"
+          >
+            Update password
+          </button>
+        </div>
+      </form>
+    </div>
+  </body>,
+  "container": <div>
+    <form
+      class="sc-dlniIP bCPNqw"
+    >
+      <div
+        class="sc-eCAqax dgDilB"
+        direction="horizontal"
+      >
+        <label
+          class="sc-jSFipO cMYxin"
+        >
+          Password:
+        </label>
+        <div>
+          <input
+            class="sc-bdnyFh gXSWSo"
+            id="password"
+            name="password"
+            type="password"
+          />
+        </div>
+      </div>
+      <div
+        class="sc-eCAqax dgDilB"
+        direction="horizontal"
+      >
+        <label
+          class="sc-jSFipO cMYxin"
+        >
+          Confirm Password:
+        </label>
+        <div>
+          <input
+            class="sc-bdnyFh gXSWSo"
+            id="confirmPassword"
+            name="confirmPassword"
+            type="password"
+          />
+        </div>
+      </div>
+      <div
+        class="sc-hKFymg dteuGK"
+      >
+        <button
+          class="sc-gtsqUy sc-iCoHzw iXmfC cwhbgM"
+          name="submit"
+          type="submit"
+          variations="primary"
+        >
+          Update password
+        </button>
+      </div>
+    </form>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
diff --git a/hotel-management/src/pages/Account/__tests__/__snapshots__/index.test.tsx.snap b/hotel-management/src/pages/Account/__tests__/__snapshots__/index.test.tsx.snap
new file mode 100644
index 0000000..e904418
--- /dev/null
+++ b/hotel-management/src/pages/Account/__tests__/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,326 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Account Should render correctly 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="sc-dlniIP jaPwYJ"
+      >
+        <h2
+          class="sc-bdnyFh gafMEQ"
+        >
+          Update account
+        </h2>
+        <div
+          class="sc-hKFymg iUYoZl"
+        >
+          <h3
+            class="sc-gtsqUy fkdaKz"
+          >
+            Update information
+          </h3>
+          <form
+            class="sc-gKAaef fefJbB"
+          >
+            <div
+              class="sc-fujznN ioyvGl"
+              direction="horizontal"
+            >
+              <label
+                class="sc-pNWRh gSLqll"
+              >
+                Email:
+              </label>
+              <div>
+                <input
+                  class="sc-eCAqax bNAfHQ"
+                  id="email"
+                  readonly=""
+                  type="text"
+                />
+              </div>
+            </div>
+            <div
+              class="sc-fujznN ioyvGl"
+              direction="horizontal"
+            >
+              <label
+                class="sc-pNWRh gSLqll"
+              >
+                Full Name:
+              </label>
+              <div>
+                <input
+                  class="sc-eCAqax bNAfHQ"
+                  id="fullName"
+                  name="fullName"
+                  type="text"
+                />
+              </div>
+            </div>
+            <div
+              class="sc-iCoHzw jMTsfU"
+            >
+              <button
+                class="sc-jSFipO sc-kEqXeH fQJaue bcOLTW"
+                name="submit"
+                type="submit"
+                variations="primary"
+              >
+                Update account
+              </button>
+            </div>
+          </form>
+        </div>
+        <div
+          class="sc-hKFymg iUYoZl"
+        >
+          <h3
+            class="sc-gtsqUy fkdaKz"
+          >
+            Update password
+          </h3>
+          <form
+            class="sc-gKAaef fefJbB"
+          >
+            <div
+              class="sc-fujznN ioyvGl"
+              direction="horizontal"
+            >
+              <label
+                class="sc-pNWRh gSLqll"
+              >
+                Password:
+              </label>
+              <div>
+                <input
+                  class="sc-eCAqax bNAfHQ"
+                  id="password"
+                  name="password"
+                  type="password"
+                />
+              </div>
+            </div>
+            <div
+              class="sc-fujznN ioyvGl"
+              direction="horizontal"
+            >
+              <label
+                class="sc-pNWRh gSLqll"
+              >
+                Confirm Password:
+              </label>
+              <div>
+                <input
+                  class="sc-eCAqax bNAfHQ"
+                  id="confirmPassword"
+                  name="confirmPassword"
+                  type="password"
+                />
+              </div>
+            </div>
+            <div
+              class="sc-iCoHzw jMTsfU"
+            >
+              <button
+                class="sc-jSFipO sc-kEqXeH fQJaue bcOLTW"
+                name="submit"
+                type="submit"
+                variations="primary"
+              >
+                Update password
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="sc-dlniIP jaPwYJ"
+    >
+      <h2
+        class="sc-bdnyFh gafMEQ"
+      >
+        Update account
+      </h2>
+      <div
+        class="sc-hKFymg iUYoZl"
+      >
+        <h3
+          class="sc-gtsqUy fkdaKz"
+        >
+          Update information
+        </h3>
+        <form
+          class="sc-gKAaef fefJbB"
+        >
+          <div
+            class="sc-fujznN ioyvGl"
+            direction="horizontal"
+          >
+            <label
+              class="sc-pNWRh gSLqll"
+            >
+              Email:
+            </label>
+            <div>
+              <input
+                class="sc-eCAqax bNAfHQ"
+                id="email"
+                readonly=""
+                type="text"
+              />
+            </div>
+          </div>
+          <div
+            class="sc-fujznN ioyvGl"
+            direction="horizontal"
+          >
+            <label
+              class="sc-pNWRh gSLqll"
+            >
+              Full Name:
+            </label>
+            <div>
+              <input
+                class="sc-eCAqax bNAfHQ"
+                id="fullName"
+                name="fullName"
+                type="text"
+              />
+            </div>
+          </div>
+          <div
+            class="sc-iCoHzw jMTsfU"
+          >
+            <button
+              class="sc-jSFipO sc-kEqXeH fQJaue bcOLTW"
+              name="submit"
+              type="submit"
+              variations="primary"
+            >
+              Update account
+            </button>
+          </div>
+        </form>
+      </div>
+      <div
+        class="sc-hKFymg iUYoZl"
+      >
+        <h3
+          class="sc-gtsqUy fkdaKz"
+        >
+          Update password
+        </h3>
+        <form
+          class="sc-gKAaef fefJbB"
+        >
+          <div
+            class="sc-fujznN ioyvGl"
+            direction="horizontal"
+          >
+            <label
+              class="sc-pNWRh gSLqll"
+            >
+              Password:
+            </label>
+            <div>
+              <input
+                class="sc-eCAqax bNAfHQ"
+                id="password"
+                name="password"
+                type="password"
+              />
+            </div>
+          </div>
+          <div
+            class="sc-fujznN ioyvGl"
+            direction="horizontal"
+          >
+            <label
+              class="sc-pNWRh gSLqll"
+            >
+              Confirm Password:
+            </label>
+            <div>
+              <input
+                class="sc-eCAqax bNAfHQ"
+                id="confirmPassword"
+                name="confirmPassword"
+                type="password"
+              />
+            </div>
+          </div>
+          <div
+            class="sc-iCoHzw jMTsfU"
+          >
+            <button
+              class="sc-jSFipO sc-kEqXeH fQJaue bcOLTW"
+              name="submit"
+              type="submit"
+              variations="primary"
+            >
+              Update password
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
diff --git a/hotel-management/src/pages/Account/__tests__/index.test.tsx b/hotel-management/src/pages/Account/__tests__/index.test.tsx
new file mode 100644
index 0000000..4cd34c0
--- /dev/null
+++ b/hotel-management/src/pages/Account/__tests__/index.test.tsx
@@ -0,0 +1,18 @@
+import { render } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+// Components
+import Account from '..';
+
+describe('Account', () => {
+  test('Should render correctly', () => {
+    const queryClient = new QueryClient();
+    const wrapper = render(
+      <QueryClientProvider client={queryClient}>
+        <Account />
+      </QueryClientProvider>
+    );
+
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/hotel-management/src/pages/Booking/BookingForm.tsx b/hotel-management/src/pages/Booking/BookingForm.tsx
index 0371607..8b27fad 100644
--- a/hotel-management/src/pages/Booking/BookingForm.tsx
+++ b/hotel-management/src/pages/Booking/BookingForm.tsx
@@ -276,7 +276,6 @@ const BookingForm = ({ onCloseModal, booking }: IBookingFormProp) => {
               required: REQUIRED_FIELD_ERROR,
               onChange: () => trigger('amount'),
             })}
-            readOnly
           />
 
           <span>{amountValue}</span>
diff --git a/hotel-management/src/pages/Booking/__tests__/BookingForm.test.tsx b/hotel-management/src/pages/Booking/__tests__/BookingForm.test.tsx
new file mode 100644
index 0000000..61ff7f5
--- /dev/null
+++ b/hotel-management/src/pages/Booking/__tests__/BookingForm.test.tsx
@@ -0,0 +1,115 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { BrowserRouter } from 'react-router-dom';
+import {
+  RenderResult,
+  fireEvent,
+  render,
+  waitFor,
+} from '@testing-library/react';
+
+// Types
+import { TBookingResponse } from '@type/booking';
+
+// Components
+import BookingForm from '../BookingForm';
+
+// Hooks
+import { useUserRoomAvailable } from '@hook/useUserRoomAvailable';
+
+const mockUpdateBooking = jest.fn();
+
+jest.mock('@hook/bookings/useUpdateBooking', () => ({
+  ...jest.requireActual('@hook/bookings/useUpdateBooking'),
+  useUpdateBooking: jest.fn(() => ({
+    isUpdating: false,
+    updateBooking: mockUpdateBooking,
+  })),
+}));
+
+jest.mock('@hook/useUserRoomAvailable.ts');
+
+const mockUseUserRoomAvailable = useUserRoomAvailable as jest.MockedFunction<
+  typeof useUserRoomAvailable
+>;
+
+mockUseUserRoomAvailable.mockReturnValue({
+  roomsAvailable: [
+    { id: 1, name: 'Room 1', status: false },
+    { id: 2, name: 'Room 2', status: false },
+  ],
+  usersAvailable: [
+    { id: 1, name: 'User 1', isBooked: false },
+    { id: 2, name: 'User 2', isBooked: false },
+  ],
+  dispatch: jest.fn(),
+});
+
+let result: {
+  name: string;
+  price: number;
+};
+
+describe('BookingForm', () => {
+  const queryClient = new QueryClient();
+
+  let wrapper: RenderResult | null = null;
+
+  test('Should render correctly', () => {
+    wrapper = render(
+      <QueryClientProvider client={queryClient}>
+        <BrowserRouter>
+          <BookingForm />
+        </BrowserRouter>
+      </QueryClientProvider>
+    );
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  test('Should edit correctly', async () => {
+    const tempBooking: TBookingResponse = {
+      id: 1,
+      startDate: '2024-11-21',
+      endDate: '2024-11-22',
+      amount: 1200,
+      status: true,
+      rooms: {
+        id: 1,
+        name: 'Room 1',
+      },
+      users: {
+        id: 2,
+        name: 'Room 2',
+      },
+    };
+
+    wrapper = render(
+      <QueryClientProvider client={queryClient}>
+        <BrowserRouter>
+          <BookingForm booking={tempBooking} />
+        </BrowserRouter>
+      </QueryClientProvider>
+    );
+
+    const submitBtn = wrapper!.getByText('Save').closest('button');
+
+    mockUpdateBooking.mockImplementationOnce((newBooking, { onSuccess }) => {
+      result = newBooking;
+      onSuccess();
+    });
+
+    fireEvent.submit(submitBtn!);
+
+    await waitFor(() => {
+      expect(mockUpdateBooking).toHaveBeenCalled();
+      expect(result).toEqual({
+        amount: 1200,
+        endDate: '2024-11-22',
+        id: 1,
+        roomId: 1,
+        startDate: '2024-11-21',
+        userId: 2,
+      });
+    });
+  });
+});
diff --git a/hotel-management/src/pages/Booking/__tests__/BookingRow.test.tsx b/hotel-management/src/pages/Booking/__tests__/BookingRow.test.tsx
new file mode 100644
index 0000000..570ab85
--- /dev/null
+++ b/hotel-management/src/pages/Booking/__tests__/BookingRow.test.tsx
@@ -0,0 +1,37 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { render } from '@testing-library/react';
+
+// Types
+import { TBookingResponse } from '@type/booking';
+
+// Components
+import BookingRow from '../BookingRow';
+
+describe('BookingRow', () => {
+  const tempBooking: TBookingResponse = {
+    id: 1,
+    startDate: '2024-11-21',
+    endDate: '2024-11-22',
+    amount: 1200,
+    status: true,
+    rooms: {
+      id: 1,
+      name: 'Room 1',
+    },
+    users: {
+      id: 2,
+      name: 'Room 2',
+    },
+  };
+
+  const queryClient = new QueryClient();
+  const wrapper = render(
+    <QueryClientProvider client={queryClient}>
+      <BookingRow booking={tempBooking} />
+    </QueryClientProvider>
+  );
+
+  test('Should render correctly', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/hotel-management/src/pages/Booking/__tests__/BookingTable.test.tsx b/hotel-management/src/pages/Booking/__tests__/BookingTable.test.tsx
new file mode 100644
index 0000000..15470f4
--- /dev/null
+++ b/hotel-management/src/pages/Booking/__tests__/BookingTable.test.tsx
@@ -0,0 +1,22 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { BrowserRouter } from 'react-router-dom';
+import { render } from '@testing-library/react';
+
+// Components
+import BookingTable from '@page/Booking/BookingTable';
+
+describe('UserTable', () => {
+  const queryClient = new QueryClient();
+
+  const wrapper = render(
+    <QueryClientProvider client={queryClient}>
+      <BrowserRouter>
+        <BookingTable />
+      </BrowserRouter>
+    </QueryClientProvider>
+  );
+
+  test('Should render correctly', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/hotel-management/src/pages/Booking/__tests__/__snapshots__/BookingForm.test.tsx.snap b/hotel-management/src/pages/Booking/__tests__/__snapshots__/BookingForm.test.tsx.snap
new file mode 100644
index 0000000..17cfdc0
--- /dev/null
+++ b/hotel-management/src/pages/Booking/__tests__/__snapshots__/BookingForm.test.tsx.snap
@@ -0,0 +1,346 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BookingForm Should render correctly 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <form
+        class="sc-dlniIP bCPNqw"
+      >
+        <div
+          class="sc-eCAqax dgDilB"
+          direction="horizontal"
+        >
+          <label
+            class="sc-jSFipO cMYxin"
+          >
+            User:
+          </label>
+          <div>
+            <select
+              aria-label="user-select"
+              class="sc-fujznN rEQue"
+              id="userId"
+              name="userId"
+            >
+              <option
+                value="1"
+              >
+                User 1
+              </option>
+              <option
+                value="2"
+              >
+                User 2
+              </option>
+            </select>
+          </div>
+        </div>
+        <div
+          class="sc-eCAqax dgDilB"
+          direction="horizontal"
+        >
+          <label
+            class="sc-jSFipO cMYxin"
+          >
+            Room:
+          </label>
+          <div>
+            <select
+              aria-label="user-select"
+              class="sc-fujznN rEQue"
+              id="roomId"
+              name="roomId"
+            >
+              <option
+                value="1"
+              >
+                Room 1
+              </option>
+              <option
+                value="2"
+              >
+                Room 2
+              </option>
+            </select>
+          </div>
+        </div>
+        <div
+          class="sc-eCAqax dgDilB"
+          direction="horizontal"
+        >
+          <label
+            class="sc-jSFipO cMYxin"
+          >
+            Start Date:
+          </label>
+          <div>
+            <input
+              class="sc-bdnyFh gXSWSo"
+              id="startDate"
+              min="2023-12-03"
+              name="startDate"
+              type="date"
+            />
+          </div>
+        </div>
+        <div
+          class="sc-eCAqax dgDilB"
+          direction="horizontal"
+        >
+          <label
+            class="sc-jSFipO cMYxin"
+          >
+            End Date:
+          </label>
+          <div>
+            <input
+              class="sc-bdnyFh gXSWSo"
+              disabled=""
+              id="endDate"
+              name="endDate"
+              type="date"
+            />
+          </div>
+        </div>
+        <div
+          class="sc-eCAqax dgDilB"
+          direction="horizontal"
+        >
+          <label
+            class="sc-jSFipO cMYxin"
+          >
+            Amount:
+          </label>
+          <div>
+            <input
+              class="sc-bdnyFh gXSWSo"
+              id="amount"
+              name="amount"
+              type="hidden"
+            />
+            <span>
+              $0.00
+            </span>
+          </div>
+        </div>
+        <div
+          class="sc-hKFymg dteuGK"
+        >
+          <button
+            class="sc-gtsqUy sc-iCoHzw iXmfC cwhbgM"
+            disabled=""
+            name="submit"
+            type="submit"
+            variations="primary"
+          >
+            Add
+          </button>
+          <button
+            class="sc-gtsqUy sc-iCoHzw hesuRJ cwhbgM"
+            type="button"
+            variations="secondary"
+          >
+            Close
+          </button>
+        </div>
+      </form>
+    </div>
+  </body>,
+  "container": <div>
+    <form
+      class="sc-dlniIP bCPNqw"
+    >
+      <div
+        class="sc-eCAqax dgDilB"
+        direction="horizontal"
+      >
+        <label
+          class="sc-jSFipO cMYxin"
+        >
+          User:
+        </label>
+        <div>
+          <select
+            aria-label="user-select"
+            class="sc-fujznN rEQue"
+            id="userId"
+            name="userId"
+          >
+            <option
+              value="1"
+            >
+              User 1
+            </option>
+            <option
+              value="2"
+            >
+              User 2
+            </option>
+          </select>
+        </div>
+      </div>
+      <div
+        class="sc-eCAqax dgDilB"
+        direction="horizontal"
+      >
+        <label
+          class="sc-jSFipO cMYxin"
+        >
+          Room:
+        </label>
+        <div>
+          <select
+            aria-label="user-select"
+            class="sc-fujznN rEQue"
+            id="roomId"
+            name="roomId"
+          >
+            <option
+              value="1"
+            >
+              Room 1
+            </option>
+            <option
+              value="2"
+            >
+              Room 2
+            </option>
+          </select>
+        </div>
+      </div>
+      <div
+        class="sc-eCAqax dgDilB"
+        direction="horizontal"
+      >
+        <label
+          class="sc-jSFipO cMYxin"
+        >
+          Start Date:
+        </label>
+        <div>
+          <input
+            class="sc-bdnyFh gXSWSo"
+            id="startDate"
+            min="2023-12-03"
+            name="startDate"
+            type="date"
+          />
+        </div>
+      </div>
+      <div
+        class="sc-eCAqax dgDilB"
+        direction="horizontal"
+      >
+        <label
+          class="sc-jSFipO cMYxin"
+        >
+          End Date:
+        </label>
+        <div>
+          <input
+            class="sc-bdnyFh gXSWSo"
+            disabled=""
+            id="endDate"
+            name="endDate"
+            type="date"
+          />
+        </div>
+      </div>
+      <div
+        class="sc-eCAqax dgDilB"
+        direction="horizontal"
+      >
+        <label
+          class="sc-jSFipO cMYxin"
+        >
+          Amount:
+        </label>
+        <div>
+          <input
+            class="sc-bdnyFh gXSWSo"
+            id="amount"
+            name="amount"
+            type="hidden"
+          />
+          <span>
+            $0.00
+          </span>
+        </div>
+      </div>
+      <div
+        class="sc-hKFymg dteuGK"
+      >
+        <button
+          class="sc-gtsqUy sc-iCoHzw iXmfC cwhbgM"
+          disabled=""
+          name="submit"
+          type="submit"
+          variations="primary"
+        >
+          Add
+        </button>
+        <button
+          class="sc-gtsqUy sc-iCoHzw hesuRJ cwhbgM"
+          type="button"
+          variations="secondary"
+        >
+          Close
+        </button>
+      </div>
+    </form>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
diff --git a/hotel-management/src/pages/Booking/__tests__/__snapshots__/BookingRow.test.tsx.snap b/hotel-management/src/pages/Booking/__tests__/__snapshots__/BookingRow.test.tsx.snap
new file mode 100644
index 0000000..0ac3055
--- /dev/null
+++ b/hotel-management/src/pages/Booking/__tests__/__snapshots__/BookingRow.test.tsx.snap
@@ -0,0 +1,218 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BookingRow Should render correctly 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="sc-jSFipO sc-iCoHzw hTfHNc eWZMfB"
+      >
+        <div>
+          Room 2
+        </div>
+        <div
+          style="display: flex; align-items: center;"
+        >
+          2024-11-21
+             
+          <svg
+            fill="none"
+            height="1em"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M0 0h24v24H0z"
+              fill="none"
+              stroke="none"
+            />
+            <path
+              d="M5 12l14 0"
+            />
+            <path
+              d="M15 16l4 -4"
+            />
+            <path
+              d="M15 8l4 4"
+            />
+          </svg>
+            
+          2024-11-22
+        </div>
+        <div>
+          Room 1
+        </div>
+        <div>
+          $1,200.00
+        </div>
+        <div>
+          Check in
+        </div>
+        <div>
+          <div
+            class="sc-kEqXeH jLboIv"
+          >
+            <button
+              aria-label="Menu item 1"
+              class="sc-crzpnZ gdsCet"
+            >
+              <svg
+                aria-hidden="true"
+                fill="currentColor"
+                height="1em"
+                stroke="currentColor"
+                stroke-width="0"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  clip-rule="evenodd"
+                  d="M10.5 6a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zm0 6a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zm0 6a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z"
+                  fill-rule="evenodd"
+                />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="sc-jSFipO sc-iCoHzw hTfHNc eWZMfB"
+    >
+      <div>
+        Room 2
+      </div>
+      <div
+        style="display: flex; align-items: center;"
+      >
+        2024-11-21
+           
+        <svg
+          fill="none"
+          height="1em"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M0 0h24v24H0z"
+            fill="none"
+            stroke="none"
+          />
+          <path
+            d="M5 12l14 0"
+          />
+          <path
+            d="M15 16l4 -4"
+          />
+          <path
+            d="M15 8l4 4"
+          />
+        </svg>
+          
+        2024-11-22
+      </div>
+      <div>
+        Room 1
+      </div>
+      <div>
+        $1,200.00
+      </div>
+      <div>
+        Check in
+      </div>
+      <div>
+        <div
+          class="sc-kEqXeH jLboIv"
+        >
+          <button
+            aria-label="Menu item 1"
+            class="sc-crzpnZ gdsCet"
+          >
+            <svg
+              aria-hidden="true"
+              fill="currentColor"
+              height="1em"
+              stroke="currentColor"
+              stroke-width="0"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                clip-rule="evenodd"
+                d="M10.5 6a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zm0 6a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zm0 6a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z"
+                fill-rule="evenodd"
+              />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
diff --git a/hotel-management/src/pages/Booking/__tests__/__snapshots__/BookingTable.test.tsx.snap b/hotel-management/src/pages/Booking/__tests__/__snapshots__/BookingTable.test.tsx.snap
new file mode 100644
index 0000000..c0ab030
--- /dev/null
+++ b/hotel-management/src/pages/Booking/__tests__/__snapshots__/BookingTable.test.tsx.snap
@@ -0,0 +1,96 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`UserTable Should render correctly 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="sc-ezyZrH fsiXlm"
+        type="vertical"
+      >
+        <div
+          class="sc-giAruI kILZpe"
+        >
+          <input
+            class="sc-iqAbyq kOrhXJ"
+            placeholder="Search by name..."
+          />
+        </div>
+        <div
+          class="sc-bYwyHq csuXEL"
+        />
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="sc-ezyZrH fsiXlm"
+      type="vertical"
+    >
+      <div
+        class="sc-giAruI kILZpe"
+      >
+        <input
+          class="sc-iqAbyq kOrhXJ"
+          placeholder="Search by name..."
+        />
+      </div>
+      <div
+        class="sc-bYwyHq csuXEL"
+      />
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
diff --git a/hotel-management/src/pages/Booking/__tests__/__snapshots__/index.test.tsx.snap b/hotel-management/src/pages/Booking/__tests__/__snapshots__/index.test.tsx.snap
new file mode 100644
index 0000000..0fa2f97
--- /dev/null
+++ b/hotel-management/src/pages/Booking/__tests__/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,136 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Booking Should render correctly 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <main
+        class="sc-gtsqUy gfxnvD"
+      >
+        <div
+          class="sc-bdnyFh bpfZjm"
+          type="horizontal"
+        >
+          <h2
+            class="sc-dlniIP kjGsqR"
+          >
+            List Booking
+          </h2>
+          <button
+            class="sc-eCAqax iNUTro"
+            variations="primary"
+          >
+            Add booking
+          </button>
+        </div>
+        <div
+          class="sc-bdnyFh iucOVv"
+          type="vertical"
+        >
+          <div
+            class="sc-hKFymg frjaax"
+          >
+            <input
+              class="sc-iemXqs HAzOF"
+              placeholder="Search by name..."
+            />
+          </div>
+          <div
+            class="sc-bYwyHq csuXEL"
+          />
+        </div>
+      </main>
+    </div>
+  </body>,
+  "container": <div>
+    <main
+      class="sc-gtsqUy gfxnvD"
+    >
+      <div
+        class="sc-bdnyFh bpfZjm"
+        type="horizontal"
+      >
+        <h2
+          class="sc-dlniIP kjGsqR"
+        >
+          List Booking
+        </h2>
+        <button
+          class="sc-eCAqax iNUTro"
+          variations="primary"
+        >
+          Add booking
+        </button>
+      </div>
+      <div
+        class="sc-bdnyFh iucOVv"
+        type="vertical"
+      >
+        <div
+          class="sc-hKFymg frjaax"
+        >
+          <input
+            class="sc-iemXqs HAzOF"
+            placeholder="Search by name..."
+          />
+        </div>
+        <div
+          class="sc-bYwyHq csuXEL"
+        />
+      </div>
+    </main>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
diff --git a/hotel-management/src/pages/Booking/__tests__/index.test.tsx b/hotel-management/src/pages/Booking/__tests__/index.test.tsx
new file mode 100644
index 0000000..6c0e675
--- /dev/null
+++ b/hotel-management/src/pages/Booking/__tests__/index.test.tsx
@@ -0,0 +1,22 @@
+import { BrowserRouter } from 'react-router-dom';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { render } from '@testing-library/react';
+
+// Components
+import Booking from '..';
+
+describe('Booking', () => {
+  const queryClient = new QueryClient();
+
+  const wrapper = render(
+    <QueryClientProvider client={queryClient}>
+      <BrowserRouter>
+        <Booking />
+      </BrowserRouter>
+    </QueryClientProvider>
+  );
+
+  test('Should render correctly', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/hotel-management/src/pages/Login/LoginForm.tsx b/hotel-management/src/pages/Login/LoginForm.tsx
index 9d0f6a2..41bfc5c 100644
--- a/hotel-management/src/pages/Login/LoginForm.tsx
+++ b/hotel-management/src/pages/Login/LoginForm.tsx
@@ -38,6 +38,7 @@ const LoginForm = () => {
         >
           <FieldInput
             type="text"
+            id="email"
             {...register('email', {
               required: REQUIRED_FIELD_ERROR,
               pattern: {
@@ -54,13 +55,16 @@ const LoginForm = () => {
         >
           <FieldInput
             type="password"
+            id="password"
             {...register('password', {
               required: REQUIRED_FIELD_ERROR,
             })}
           />
         </Form.Row>
 
-        <Button type="submit" disabled={isPending}>Login</Button>
+        <Button type="submit" disabled={isPending}>
+          Login
+        </Button>
       </Form>
     </StyledLoginForm>
   );
diff --git a/hotel-management/src/pages/Login/__tests__/LoginForm.test.tsx b/hotel-management/src/pages/Login/__tests__/LoginForm.test.tsx
new file mode 100644
index 0000000..46e477a
--- /dev/null
+++ b/hotel-management/src/pages/Login/__tests__/LoginForm.test.tsx
@@ -0,0 +1,63 @@
+import { useLogin } from "@hook/authentication/useLogin";
+import LoginForm from "@page/Login/LoginForm";
+import { fireEvent, render, waitFor } from "@testing-library/react";
+
+
+// Mock the useLogin hook
+jest.mock('@hook/authentication/useLogin', () => ({
+  useLogin: jest.fn(),
+}));
+
+describe('LoginForm Component', () => {
+  const mockLogin = jest.fn();
+
+  beforeEach(() => {
+    (useLogin as jest.Mock).mockReturnValue({
+      login: mockLogin,
+      isPending: false,
+    });
+  })
+
+  test('Should render correctly', () => {
+    const wrapper = render(<LoginForm />);
+    
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  test('submits the form with valid data', async () => {
+    const wrapper = render(<LoginForm />);
+
+    // Submit form with valid data
+    fireEvent.input(wrapper.container.querySelector('#email')!, {
+      target: { value: 'admin@nezumi.site' },
+    });
+    fireEvent.input(wrapper.container.querySelector('#password')!, {
+      target: { value: '@Ccac71b36122cd' },
+    });
+    fireEvent.click(wrapper.getByText('Login'));
+
+    await waitFor(() => {
+      expect(mockLogin).toHaveBeenCalledWith({
+        email: 'admin@nezumi.site',
+        password: '@Ccac71b36122cd',
+      });
+    });
+  });
+
+  test('displays error message for invalid email', async () => {
+    const wrapper = render(<LoginForm />);
+
+    // Submit form with invalid email
+    fireEvent.input(wrapper.container.querySelector('#email')!, {
+      target: { value: 'nezumi' },
+    });
+    fireEvent.click(wrapper.getByText('Login'));
+
+    // Wait for validation error message
+    await waitFor(() => {
+      expect(wrapper.getByText('Invalid email address')).toBeInTheDocument();
+    });
+  });
+
+  // Add more test cases as needed
+});
diff --git a/hotel-management/src/pages/Login/__tests__/__snapshots__/LoginForm.test.tsx.snap b/hotel-management/src/pages/Login/__tests__/__snapshots__/LoginForm.test.tsx.snap
new file mode 100644
index 0000000..ae2b834
--- /dev/null
+++ b/hotel-management/src/pages/Login/__tests__/__snapshots__/LoginForm.test.tsx.snap
@@ -0,0 +1,166 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LoginForm Component Should render correctly 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="sc-jrsKJM kJxxfd"
+      >
+        <form
+          class="sc-gtsqUy jMGskL"
+        >
+          <div
+            class="sc-hKFymg jzIDWp"
+            direction="vertical"
+          >
+            <label
+              class="sc-eCAqax dnXnhF"
+            >
+              Email:
+            </label>
+            <div>
+              <input
+                class="sc-kEqXeH jhZfUU"
+                id="email"
+                name="email"
+                type="text"
+              />
+            </div>
+          </div>
+          <div
+            class="sc-hKFymg jzIDWp"
+            direction="vertical"
+          >
+            <label
+              class="sc-eCAqax dnXnhF"
+            >
+              Password:
+            </label>
+            <div>
+              <input
+                class="sc-kEqXeH jhZfUU"
+                id="password"
+                name="password"
+                type="password"
+              />
+            </div>
+          </div>
+          <button
+            class="sc-bdnyFh bEtbaY"
+            type="submit"
+            variations="primary"
+          >
+            Login
+          </button>
+        </form>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="sc-jrsKJM kJxxfd"
+    >
+      <form
+        class="sc-gtsqUy jMGskL"
+      >
+        <div
+          class="sc-hKFymg jzIDWp"
+          direction="vertical"
+        >
+          <label
+            class="sc-eCAqax dnXnhF"
+          >
+            Email:
+          </label>
+          <div>
+            <input
+              class="sc-kEqXeH jhZfUU"
+              id="email"
+              name="email"
+              type="text"
+            />
+          </div>
+        </div>
+        <div
+          class="sc-hKFymg jzIDWp"
+          direction="vertical"
+        >
+          <label
+            class="sc-eCAqax dnXnhF"
+          >
+            Password:
+          </label>
+          <div>
+            <input
+              class="sc-kEqXeH jhZfUU"
+              id="password"
+              name="password"
+              type="password"
+            />
+          </div>
+        </div>
+        <button
+          class="sc-bdnyFh bEtbaY"
+          type="submit"
+          variations="primary"
+        >
+          Login
+        </button>
+      </form>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
diff --git a/hotel-management/src/pages/Login/__tests__/__snapshots__/index.test.tsx.snap b/hotel-management/src/pages/Login/__tests__/__snapshots__/index.test.tsx.snap
new file mode 100644
index 0000000..0e27028
--- /dev/null
+++ b/hotel-management/src/pages/Login/__tests__/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,194 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Login Should render correctly 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <main
+        class="sc-bdnyFh fWdqRC"
+      >
+        <img
+          alt="Logo Web"
+          class="sc-gtsqUy cUcA-DD"
+          src="./assets/images/logo.png"
+        />
+        <h1
+          class="sc-dlniIP bJwJBk"
+        >
+          Log In
+        </h1>
+        <div
+          class="sc-hKFymg htLQlQ"
+        >
+          <form
+            class="sc-gKAaef fefJbB"
+          >
+            <div
+              class="sc-fujznN fRJTpo"
+              direction="vertical"
+            >
+              <label
+                class="sc-pNWRh gSLqll"
+              >
+                Email:
+              </label>
+              <div>
+                <input
+                  class="sc-eCAqax gsyAlx"
+                  id="email"
+                  name="email"
+                  type="text"
+                />
+              </div>
+            </div>
+            <div
+              class="sc-fujznN fRJTpo"
+              direction="vertical"
+            >
+              <label
+                class="sc-pNWRh gSLqll"
+              >
+                Password:
+              </label>
+              <div>
+                <input
+                  class="sc-eCAqax gsyAlx"
+                  id="password"
+                  name="password"
+                  type="password"
+                />
+              </div>
+            </div>
+            <button
+              class="sc-jSFipO fQJaue"
+              type="submit"
+              variations="primary"
+            >
+              Login
+            </button>
+          </form>
+        </div>
+      </main>
+    </div>
+  </body>,
+  "container": <div>
+    <main
+      class="sc-bdnyFh fWdqRC"
+    >
+      <img
+        alt="Logo Web"
+        class="sc-gtsqUy cUcA-DD"
+        src="./assets/images/logo.png"
+      />
+      <h1
+        class="sc-dlniIP bJwJBk"
+      >
+        Log In
+      </h1>
+      <div
+        class="sc-hKFymg htLQlQ"
+      >
+        <form
+          class="sc-gKAaef fefJbB"
+        >
+          <div
+            class="sc-fujznN fRJTpo"
+            direction="vertical"
+          >
+            <label
+              class="sc-pNWRh gSLqll"
+            >
+              Email:
+            </label>
+            <div>
+              <input
+                class="sc-eCAqax gsyAlx"
+                id="email"
+                name="email"
+                type="text"
+              />
+            </div>
+          </div>
+          <div
+            class="sc-fujznN fRJTpo"
+            direction="vertical"
+          >
+            <label
+              class="sc-pNWRh gSLqll"
+            >
+              Password:
+            </label>
+            <div>
+              <input
+                class="sc-eCAqax gsyAlx"
+                id="password"
+                name="password"
+                type="password"
+              />
+            </div>
+          </div>
+          <button
+            class="sc-jSFipO fQJaue"
+            type="submit"
+            variations="primary"
+          >
+            Login
+          </button>
+        </form>
+      </div>
+    </main>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
diff --git a/hotel-management/src/pages/Login/__tests__/index.test.tsx b/hotel-management/src/pages/Login/__tests__/index.test.tsx
new file mode 100644
index 0000000..79a07d6
--- /dev/null
+++ b/hotel-management/src/pages/Login/__tests__/index.test.tsx
@@ -0,0 +1,20 @@
+import { render } from '@testing-library/react';
+import Login from '..';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { BrowserRouter } from 'react-router-dom';
+
+describe('Login', () => {
+  test('Should render correctly', () => {
+    const queryClient = new QueryClient();
+
+    const wrapper = render(
+      <QueryClientProvider client={queryClient}>
+        <BrowserRouter>
+          <Login />
+        </BrowserRouter>
+      </QueryClientProvider>
+    );
+
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/hotel-management/src/pages/NotFound/NotFound.tsx b/hotel-management/src/pages/NotFound/NotFound.tsx
deleted file mode 100644
index 4cf9b99..0000000
--- a/hotel-management/src/pages/NotFound/NotFound.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { useNavigate } from 'react-router-dom';
-
-// Styled
-import { Button, Heading, StyledNotFound } from '.';
-
-
-const NotFound = () => {
-  const useMoveBack = () => {
-    const navigate = useNavigate();
-    return () => navigate(-1);
-  };
-
-  return (
-    <StyledNotFound>
-      <Heading>The page not found!</Heading>
-      <Button onClick={useMoveBack}>Go back!</Button>
-    </StyledNotFound>
-  );
-};
-
-export default NotFound;
diff --git a/hotel-management/src/pages/NotFound/__tests__/index.test.tsx b/hotel-management/src/pages/NotFound/__tests__/index.test.tsx
new file mode 100644
index 0000000..c09765d
--- /dev/null
+++ b/hotel-management/src/pages/NotFound/__tests__/index.test.tsx
@@ -0,0 +1,28 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import NotFound from "..";
+import { useNavigate } from "react-router-dom";
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: jest.fn(),
+}));
+
+describe('NotFound', () => {
+  test('Should render correctly', () => {
+    render(<NotFound />);
+
+    expect(screen.getByText('The page not found!')).toBeInTheDocument();
+    expect(screen.getByText('Go back!')).toBeInTheDocument();
+  });
+
+  test('Should call navigate correctly when click button', () => {
+    const mockNavigate = jest.fn();
+    (useNavigate as jest.Mock).mockReturnValue(mockNavigate);
+    render(<NotFound />);
+
+    fireEvent.click(screen.getByText('Go back!'));
+
+    expect(mockNavigate).toHaveBeenCalledTimes(1);
+    expect(mockNavigate).toHaveBeenCalledWith(-1);
+  });
+});
diff --git a/hotel-management/src/pages/NotFound/index.tsx b/hotel-management/src/pages/NotFound/index.tsx
index 2b661d9..ed2c423 100644
--- a/hotel-management/src/pages/NotFound/index.tsx
+++ b/hotel-management/src/pages/NotFound/index.tsx
@@ -1,33 +1,17 @@
-import styled from "styled-components";
+import { useNavigate } from 'react-router-dom';
 
-const StyledNotFound = styled.div`
-  height: 100vh;
+// Styled
+import { Button, Heading, StyledNotFound } from './styled';
 
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  gap: 30px;
-`;
+const NotFound = () => {
+  const navigate = useNavigate();
 
-const Heading = styled.h1`
-  font-size: 40px;
-  color: var(--primary-color);
-`;
+  return (
+    <StyledNotFound>
+      <Heading>The page not found!</Heading>
+      <Button onClick={() => navigate(-1)}>Go back!</Button>
+    </StyledNotFound>
+  );
+};
 
-const Button = styled.button`
-  padding: 10px 20px;
-
-  background-color: var(--primary-color);
-  color: var(--light-text);
-  text-transform: uppercase;
-  font-weight: 500;
-
-  border-radius: var(--radius-sm);
-`;
-
-export {
-  StyledNotFound,
-  Heading,
-  Button,
-}
+export default NotFound;
diff --git a/hotel-management/src/pages/NotFound/styled.ts b/hotel-management/src/pages/NotFound/styled.ts
new file mode 100644
index 0000000..2b661d9
--- /dev/null
+++ b/hotel-management/src/pages/NotFound/styled.ts
@@ -0,0 +1,33 @@
+import styled from "styled-components";
+
+const StyledNotFound = styled.div`
+  height: 100vh;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 30px;
+`;
+
+const Heading = styled.h1`
+  font-size: 40px;
+  color: var(--primary-color);
+`;
+
+const Button = styled.button`
+  padding: 10px 20px;
+
+  background-color: var(--primary-color);
+  color: var(--light-text);
+  text-transform: uppercase;
+  font-weight: 500;
+
+  border-radius: var(--radius-sm);
+`;
+
+export {
+  StyledNotFound,
+  Heading,
+  Button,
+}
diff --git a/hotel-management/src/pages/Room/RoomForm.tsx b/hotel-management/src/pages/Room/RoomForm.tsx
index 5d25da9..2b1fdde 100644
--- a/hotel-management/src/pages/Room/RoomForm.tsx
+++ b/hotel-management/src/pages/Room/RoomForm.tsx
@@ -1,3 +1,5 @@
+import { useForm } from 'react-hook-form';
+
 // Styled
 import Input from '@commonStyle/Input.ts';
 
@@ -18,7 +20,6 @@ import { isValidRegex, isValidString } from '@helper/validators.ts';
 import Form from '@component/Form/index.tsx';
 
 // Hooks
-import { useForm } from 'react-hook-form';
 import { useCreateRoom } from '@hook/rooms/useCreateRoom.ts';
 import { useUpdateRoom } from '@hook/rooms/useUpdateRoom.ts';
 
diff --git a/hotel-management/src/pages/Room/__tests__/RoomForm.test.tsx b/hotel-management/src/pages/Room/__tests__/RoomForm.test.tsx
new file mode 100644
index 0000000..535f39b
--- /dev/null
+++ b/hotel-management/src/pages/Room/__tests__/RoomForm.test.tsx
@@ -0,0 +1,118 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { BrowserRouter } from 'react-router-dom';
+import {
+  RenderResult,
+  fireEvent,
+  render,
+  waitFor,
+} from '@testing-library/react';
+
+// Types
+import { IRoom } from '@type/room';
+
+// Components
+import RoomForm from '../RoomForm';
+
+const mockCreateRoom = jest.fn();
+const mockUpdateRoom = jest.fn();
+
+jest.mock('@hook/rooms/useCreateRoom.ts', () => ({
+  ...jest.requireActual('@hook/rooms/useCreateRoom.ts'),
+  useCreateRoom: jest.fn(() => ({
+    isCreating: false,
+    createRoom: mockCreateRoom,
+  })),
+}));
+
+jest.mock('@hook/rooms/useUpdateRoom', () => ({
+  ...jest.requireActual('@hook/rooms/useUpdateRoom'),
+  useUpdateRoom: jest.fn(() => ({
+    isUpdating: false,
+    updateRoom: mockUpdateRoom,
+  })),
+}));
+
+let result: {
+  name: string;
+  price: number;
+};
+
+
+describe('RoomForm', () => {
+  const queryClient = new QueryClient();
+
+  let wrapper: RenderResult | null = null;
+
+  test('Should render correctly', () => {
+    wrapper = render(
+      <QueryClientProvider client={queryClient}>
+        <BrowserRouter>
+          <RoomForm />
+        </BrowserRouter>
+      </QueryClientProvider>
+    );
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  test('Should add correctly', async () => {
+    wrapper = render(
+      <QueryClientProvider client={queryClient}>
+        <BrowserRouter>
+          <RoomForm />
+        </BrowserRouter>
+      </QueryClientProvider>
+    );
+
+    const nameField = wrapper!.container.querySelector('#name');
+    const priceField = wrapper!.container.querySelector('#price');
+    const submitBtn = wrapper!.getByText('Add').closest('button');
+
+    mockCreateRoom.mockImplementationOnce((newRoom, { onSuccess }) => {
+      result = newRoom;
+      onSuccess();
+    });
+
+    fireEvent.input(nameField!, { target: { value: 'Room 1' } });
+    fireEvent.input(priceField!, { target: { value: '120' } });
+
+    fireEvent.submit(submitBtn!);
+
+    await waitFor(() => {
+      expect(mockCreateRoom).toHaveBeenCalled();
+      expect(result).toEqual({ name: 'Room 1', price: 120 });
+    });
+  });
+
+  test('Should edit correctly', async () => {
+    const tempRoom: IRoom = {
+      id: 1,
+      name: 'Room 1',
+      price: 2300,
+      status: true,
+      isDelete: true,
+    }
+
+    wrapper = render(
+      <QueryClientProvider client={queryClient}>
+        <BrowserRouter>
+          <RoomForm room={tempRoom}/>
+        </BrowserRouter>
+      </QueryClientProvider>
+    );
+
+    const submitBtn = wrapper!.getByText('Save').closest('button');
+
+    mockUpdateRoom.mockImplementationOnce((newRoom, { onSuccess }) => {
+      result = newRoom;
+      onSuccess();
+    });
+
+    fireEvent.submit(submitBtn!);
+
+    await waitFor(() => {
+      expect(mockUpdateRoom).toHaveBeenCalled();
+      expect(result).toEqual(tempRoom);
+    });
+  });
+});
diff --git a/hotel-management/src/pages/Room/__tests__/RoomRow.test.tsx b/hotel-management/src/pages/Room/__tests__/RoomRow.test.tsx
new file mode 100644
index 0000000..838f984
--- /dev/null
+++ b/hotel-management/src/pages/Room/__tests__/RoomRow.test.tsx
@@ -0,0 +1,29 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { render } from '@testing-library/react';
+
+// Types
+import { IRoom } from '@type/room';
+
+// Components
+import RoomRow from '../RoomRow';
+
+describe('RoomRow', () => {
+  const tempRoom: IRoom = {
+    id: 1,
+    name: 'Temp Room',
+    price: 2399,
+    status: false,
+    isDelete: true,
+  };
+
+  const queryClient = new QueryClient();
+  const wrapper = render(
+    <QueryClientProvider client={queryClient}>
+      <RoomRow room={tempRoom} />
+    </QueryClientProvider>
+  );
+
+  test('Should render correctly', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/hotel-management/src/pages/Room/__tests__/RoomTable.test.tsx b/hotel-management/src/pages/Room/__tests__/RoomTable.test.tsx
new file mode 100644
index 0000000..d069141
--- /dev/null
+++ b/hotel-management/src/pages/Room/__tests__/RoomTable.test.tsx
@@ -0,0 +1,22 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { BrowserRouter } from 'react-router-dom';
+import { render } from '@testing-library/react';
+
+// Components
+import RoomTable from '@page/Room/RoomTable';
+
+describe('UserTable', () => {
+  const queryClient = new QueryClient();
+
+  const wrapper = render(
+    <QueryClientProvider client={queryClient}>
+      <BrowserRouter>
+        <RoomTable />
+      </BrowserRouter>
+    </QueryClientProvider>
+  );
+
+  test('Should render correctly', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/hotel-management/src/pages/Room/__tests__/__snapshots__/RoomForm.test.tsx.snap b/hotel-management/src/pages/Room/__tests__/__snapshots__/RoomForm.test.tsx.snap
new file mode 100644
index 0000000..9c7df85
--- /dev/null
+++ b/hotel-management/src/pages/Room/__tests__/__snapshots__/RoomForm.test.tsx.snap
@@ -0,0 +1,184 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RoomForm Should render correctly 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <form
+        class="sc-dlniIP bCPNqw"
+      >
+        <div
+          class="sc-eCAqax dgDilB"
+          direction="horizontal"
+        >
+          <label
+            class="sc-jSFipO cMYxin"
+          >
+            Name
+          </label>
+          <div>
+            <input
+              class="sc-bdnyFh gXSWSo"
+              id="name"
+              name="name"
+              type="text"
+            />
+          </div>
+        </div>
+        <div
+          class="sc-eCAqax dgDilB"
+          direction="horizontal"
+        >
+          <label
+            class="sc-jSFipO cMYxin"
+          >
+            Price
+          </label>
+          <div>
+            <input
+              class="sc-bdnyFh gXSWSo"
+              id="price"
+              name="price"
+              type="text"
+            />
+          </div>
+        </div>
+        <div
+          class="sc-hKFymg dteuGK"
+        >
+          <button
+            class="sc-gtsqUy sc-iCoHzw iXmfC cwhbgM"
+            disabled=""
+            name="submit"
+            type="submit"
+            variations="primary"
+          >
+            Add
+          </button>
+          <button
+            class="sc-gtsqUy sc-iCoHzw hesuRJ cwhbgM"
+            type="button"
+            variations="secondary"
+          >
+            Close
+          </button>
+        </div>
+      </form>
+    </div>
+  </body>,
+  "container": <div>
+    <form
+      class="sc-dlniIP bCPNqw"
+    >
+      <div
+        class="sc-eCAqax dgDilB"
+        direction="horizontal"
+      >
+        <label
+          class="sc-jSFipO cMYxin"
+        >
+          Name
+        </label>
+        <div>
+          <input
+            class="sc-bdnyFh gXSWSo"
+            id="name"
+            name="name"
+            type="text"
+          />
+        </div>
+      </div>
+      <div
+        class="sc-eCAqax dgDilB"
+        direction="horizontal"
+      >
+        <label
+          class="sc-jSFipO cMYxin"
+        >
+          Price
+        </label>
+        <div>
+          <input
+            class="sc-bdnyFh gXSWSo"
+            id="price"
+            name="price"
+            type="text"
+          />
+        </div>
+      </div>
+      <div
+        class="sc-hKFymg dteuGK"
+      >
+        <button
+          class="sc-gtsqUy sc-iCoHzw iXmfC cwhbgM"
+          disabled=""
+          name="submit"
+          type="submit"
+          variations="primary"
+        >
+          Add
+        </button>
+        <button
+          class="sc-gtsqUy sc-iCoHzw hesuRJ cwhbgM"
+          type="button"
+          variations="secondary"
+        >
+          Close
+        </button>
+      </div>
+    </form>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
diff --git a/hotel-management/src/pages/Room/__tests__/__snapshots__/RoomRow.test.tsx.snap b/hotel-management/src/pages/Room/__tests__/__snapshots__/RoomRow.test.tsx.snap
new file mode 100644
index 0000000..2181315
--- /dev/null
+++ b/hotel-management/src/pages/Room/__tests__/__snapshots__/RoomRow.test.tsx.snap
@@ -0,0 +1,150 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RoomRow Should render correctly 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="sc-crzpnZ sc-bqGGcD gIMFtm jqrNRF"
+      >
+        <div>
+          1
+        </div>
+        <div>
+          Temp Room
+        </div>
+        <div>
+          $2,399.00
+        </div>
+        <div>
+          Available
+        </div>
+        <div>
+          <div
+            class="sc-fFSPgy dBIInM"
+          >
+            <button
+              aria-label="Menu item 1"
+              class="sc-iemXqs lnWMCN"
+            >
+              <svg
+                aria-hidden="true"
+                fill="currentColor"
+                height="1em"
+                stroke="currentColor"
+                stroke-width="0"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  clip-rule="evenodd"
+                  d="M10.5 6a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zm0 6a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zm0 6a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z"
+                  fill-rule="evenodd"
+                />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="sc-crzpnZ sc-bqGGcD gIMFtm jqrNRF"
+    >
+      <div>
+        1
+      </div>
+      <div>
+        Temp Room
+      </div>
+      <div>
+        $2,399.00
+      </div>
+      <div>
+        Available
+      </div>
+      <div>
+        <div
+          class="sc-fFSPgy dBIInM"
+        >
+          <button
+            aria-label="Menu item 1"
+            class="sc-iemXqs lnWMCN"
+          >
+            <svg
+              aria-hidden="true"
+              fill="currentColor"
+              height="1em"
+              stroke="currentColor"
+              stroke-width="0"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                clip-rule="evenodd"
+                d="M10.5 6a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zm0 6a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zm0 6a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z"
+                fill-rule="evenodd"
+              />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
diff --git a/hotel-management/src/pages/Room/__tests__/__snapshots__/RoomTable.test.tsx.snap b/hotel-management/src/pages/Room/__tests__/__snapshots__/RoomTable.test.tsx.snap
new file mode 100644
index 0000000..8b83dd0
--- /dev/null
+++ b/hotel-management/src/pages/Room/__tests__/__snapshots__/RoomTable.test.tsx.snap
@@ -0,0 +1,166 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`UserTable Should render correctly 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="sc-giAruI eEOXtt"
+        type="vertical"
+      >
+        <div
+          class="sc-iJCSeZ boUFen"
+        >
+          <div
+            class="sc-dItHI exgtuU"
+          >
+            <button
+              class="sc-bqGGcD entqcN"
+              disabled=""
+            >
+              Ascending
+            </button>
+            <button
+              class="sc-bqGGcD graLyf"
+            >
+              Descending
+            </button>
+          </div>
+          <select
+            aria-label="Sort"
+            class="sc-crzpnZ iXFhDe"
+          >
+            <option
+              value="id"
+            >
+              Sort by id
+            </option>
+            <option
+              value="name"
+            >
+              Sort by name
+            </option>
+            <option
+              value="price"
+            >
+              Sort by price
+            </option>
+          </select>
+          <input
+            class="sc-iqAbyq kOrhXJ"
+            placeholder="Search by name..."
+          />
+        </div>
+        <div
+          class="sc-ezyZrH gLRBxl"
+        />
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="sc-giAruI eEOXtt"
+      type="vertical"
+    >
+      <div
+        class="sc-iJCSeZ boUFen"
+      >
+        <div
+          class="sc-dItHI exgtuU"
+        >
+          <button
+            class="sc-bqGGcD entqcN"
+            disabled=""
+          >
+            Ascending
+          </button>
+          <button
+            class="sc-bqGGcD graLyf"
+          >
+            Descending
+          </button>
+        </div>
+        <select
+          aria-label="Sort"
+          class="sc-crzpnZ iXFhDe"
+        >
+          <option
+            value="id"
+          >
+            Sort by id
+          </option>
+          <option
+            value="name"
+          >
+            Sort by name
+          </option>
+          <option
+            value="price"
+          >
+            Sort by price
+          </option>
+        </select>
+        <input
+          class="sc-iqAbyq kOrhXJ"
+          placeholder="Search by name..."
+        />
+      </div>
+      <div
+        class="sc-ezyZrH gLRBxl"
+      />
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
diff --git a/hotel-management/src/pages/Room/__tests__/__snapshots__/index.test.tsx.snap b/hotel-management/src/pages/Room/__tests__/__snapshots__/index.test.tsx.snap
new file mode 100644
index 0000000..378f740
--- /dev/null
+++ b/hotel-management/src/pages/Room/__tests__/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,206 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Room Should render correctly 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <main
+        class="sc-cxNGUP fhRVMt"
+      >
+        <div
+          class="sc-giAruI itcrUM"
+          type="horizontal"
+        >
+          <h2
+            class="sc-lmgPJu iEjhbq"
+          >
+            List Room
+          </h2>
+          <button
+            class="sc-hBMVwJ kEyqtv"
+            variations="primary"
+          >
+            Add room
+          </button>
+        </div>
+        <div
+          class="sc-giAruI eEOXtt"
+          type="vertical"
+        >
+          <div
+            class="sc-iJCSeZ boUFen"
+          >
+            <div
+              class="sc-dItHI exgtuU"
+            >
+              <button
+                class="sc-bqGGcD entqcN"
+                disabled=""
+              >
+                Ascending
+              </button>
+              <button
+                class="sc-bqGGcD graLyf"
+              >
+                Descending
+              </button>
+            </div>
+            <select
+              aria-label="Sort"
+              class="sc-crzpnZ iXFhDe"
+            >
+              <option
+                value="id"
+              >
+                Sort by id
+              </option>
+              <option
+                value="name"
+              >
+                Sort by name
+              </option>
+              <option
+                value="price"
+              >
+                Sort by price
+              </option>
+            </select>
+            <input
+              class="sc-iqAbyq kOrhXJ"
+              placeholder="Search by name..."
+            />
+          </div>
+          <div
+            class="sc-ezyZrH gLRBxl"
+          />
+        </div>
+      </main>
+    </div>
+  </body>,
+  "container": <div>
+    <main
+      class="sc-cxNGUP fhRVMt"
+    >
+      <div
+        class="sc-giAruI itcrUM"
+        type="horizontal"
+      >
+        <h2
+          class="sc-lmgPJu iEjhbq"
+        >
+          List Room
+        </h2>
+        <button
+          class="sc-hBMVwJ kEyqtv"
+          variations="primary"
+        >
+          Add room
+        </button>
+      </div>
+      <div
+        class="sc-giAruI eEOXtt"
+        type="vertical"
+      >
+        <div
+          class="sc-iJCSeZ boUFen"
+        >
+          <div
+            class="sc-dItHI exgtuU"
+          >
+            <button
+              class="sc-bqGGcD entqcN"
+              disabled=""
+            >
+              Ascending
+            </button>
+            <button
+              class="sc-bqGGcD graLyf"
+            >
+              Descending
+            </button>
+          </div>
+          <select
+            aria-label="Sort"
+            class="sc-crzpnZ iXFhDe"
+          >
+            <option
+              value="id"
+            >
+              Sort by id
+            </option>
+            <option
+              value="name"
+            >
+              Sort by name
+            </option>
+            <option
+              value="price"
+            >
+              Sort by price
+            </option>
+          </select>
+          <input
+            class="sc-iqAbyq kOrhXJ"
+            placeholder="Search by name..."
+          />
+        </div>
+        <div
+          class="sc-ezyZrH gLRBxl"
+        />
+      </div>
+    </main>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
diff --git a/hotel-management/src/pages/Room/__tests__/index.test.tsx b/hotel-management/src/pages/Room/__tests__/index.test.tsx
new file mode 100644
index 0000000..44d20c4
--- /dev/null
+++ b/hotel-management/src/pages/Room/__tests__/index.test.tsx
@@ -0,0 +1,22 @@
+import { BrowserRouter } from 'react-router-dom';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { render } from '@testing-library/react';
+
+// Components
+import Room from '..';
+
+describe('Room', () => {
+  const queryClient = new QueryClient();
+
+  const wrapper = render(
+    <QueryClientProvider client={queryClient}>
+      <BrowserRouter>
+        <Room />
+      </BrowserRouter>
+    </QueryClientProvider>
+  );
+
+  test('Should render correctly', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/hotel-management/src/pages/User/UserForm.tsx b/hotel-management/src/pages/User/UserForm.tsx
index a558451..ed9457f 100644
--- a/hotel-management/src/pages/User/UserForm.tsx
+++ b/hotel-management/src/pages/User/UserForm.tsx
@@ -1,5 +1,6 @@
-// Hooks
 import { FormProvider, useForm } from 'react-hook-form';
+
+// Hooks
 import { useCreateUser } from '@hook/users/useCreateUser.ts';
 import { useUpdateUser } from '@hook/users/useUpdateUser.ts';
 
@@ -12,6 +13,7 @@ import Form from '@component/Form/index.tsx';
 // Helpers
 import { isValidRegex } from '@helper/validators.ts';
 
+// Constants
 import {
   INVALID_FIELD,
   INVALID_PHONE,
@@ -94,8 +96,8 @@ const UserForm = ({ onCloseModal, user }: IUserFormProp) => {
             {...register('phone', {
               required: REQUIRED_FIELD_ERROR,
               validate: {
-                checkPhoneNum: (v) =>
-                  isValidRegex(new RegExp(REGEX.PHONE), v) || INVALID_PHONE,
+                checkPhoneNum: (value) =>
+                  isValidRegex(new RegExp(REGEX.PHONE), value) || INVALID_PHONE,
               },
               onChange: () => trigger('phone'),
             })}
diff --git a/hotel-management/src/pages/User/UserRow.tsx b/hotel-management/src/pages/User/UserRow.tsx
index 2613da5..027449a 100644
--- a/hotel-management/src/pages/User/UserRow.tsx
+++ b/hotel-management/src/pages/User/UserRow.tsx
@@ -1,16 +1,21 @@
+import { useCallback } from 'react';
+
 // Components
 import { RiEditBoxFill } from 'react-icons/ri';
 import Modal from '@component/Modal';
 import Table from '@component/Table';
 import Menus from '@component/Menus';
 import UserForm from './UserForm';
+import ConfirmMessage from '@component/ConfirmMessage';
+import { HiTrash } from 'react-icons/hi';
 
 // Types
 import { IUser } from '@type/user';
+
+// Constants
 import { FORM } from '@constant/commons';
-import { HiTrash } from 'react-icons/hi';
-import { useCallback } from 'react';
-import ConfirmMessage from '@component/ConfirmMessage';
+
+// Hooks
 import { useIsDeleteUser } from '@hook/users/useSetIsDeleteUser';
 
 interface IUserRow {
diff --git a/hotel-management/src/pages/User/UserTable.tsx b/hotel-management/src/pages/User/UserTable.tsx
index 53ef00c..2e453ef 100644
--- a/hotel-management/src/pages/User/UserTable.tsx
+++ b/hotel-management/src/pages/User/UserTable.tsx
@@ -8,6 +8,7 @@ import Search from '@component/Search';
 import SortBy from '@component/SortBy';
 import OrderBy from '@component/OrderBy';
 import UserRow from './UserRow';
+import Pagination from '@component/Pagination';
 
 // Types
 import { IUser } from '@type/user';
@@ -22,7 +23,6 @@ import Spinner from '@commonStyle/Spinner';
 
 // Hooks
 import { useUsers } from '@hook/users/useUsers';
-import Pagination from '@component/Pagination';
 
 const UserTable = () => {
   const columnName = [
diff --git a/hotel-management/src/pages/User/__tests__/UserForm.test.tsx b/hotel-management/src/pages/User/__tests__/UserForm.test.tsx
index fa30246..4df7455 100644
--- a/hotel-management/src/pages/User/__tests__/UserForm.test.tsx
+++ b/hotel-management/src/pages/User/__tests__/UserForm.test.tsx
@@ -1,7 +1,5 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { BrowserRouter } from 'react-router-dom';
-// Components
-import UserForm from '../UserForm';
 import {
   RenderResult,
   fireEvent,
@@ -9,22 +7,29 @@ import {
   waitFor,
 } from '@testing-library/react';
 
-const createUser = jest.fn();
+// Components
+import UserForm from '../UserForm';
+
+// Types
+import { IUser } from '@type/user';
+
+const mockCreateUser = jest.fn();
+const mockUpdateUser = jest.fn();
 
 jest.mock('@hook/users/useCreateUser.ts', () => ({
   ...jest.requireActual('@hook/users/useCreateUser.ts'),
   useCreateUser: jest.fn(() => ({
     isCreating: false,
-    createUser,
+    createUser: mockCreateUser,
   })),
 }));
 
 jest.mock('@hook/users/useUpdateUser', () => ({
   ...jest.requireActual('@hook/users/useUpdateUser'),
-  useUpdateUser: () => ({
+  useUpdateUser: jest.fn(() => ({
     isUpdating: false,
-    updateUser: jest.fn(),
-  }),
+    updateUser: mockUpdateUser,
+  })),
 }));
 
 describe('UserForm', () => {
@@ -32,7 +37,7 @@ describe('UserForm', () => {
 
   let wrapper: RenderResult | null = null;
 
-  beforeEach(() => {
+  test('Should render correctly', () => {
     wrapper = render(
       <QueryClientProvider client={queryClient}>
         <BrowserRouter>
@@ -40,13 +45,19 @@ describe('UserForm', () => {
         </BrowserRouter>
       </QueryClientProvider>
     );
-  });
 
-  test('Should render correctly', () => {
     expect(wrapper).toMatchSnapshot();
   });
 
-  test('Should submit correctly', async () => {
+  test('Should add correctly', async () => {
+    wrapper = render(
+      <QueryClientProvider client={queryClient}>
+        <BrowserRouter>
+          <UserForm />
+        </BrowserRouter>
+      </QueryClientProvider>
+    );
+
     const nameField = wrapper!.container.querySelector('#name');
     const phoneField = wrapper!.container.querySelector('#phone');
     const submitBtn = wrapper!.getByText('Add').closest('button');
@@ -55,7 +66,7 @@ describe('UserForm', () => {
       phone: string;
     };
 
-    createUser.mockImplementationOnce((newUser, { onSuccess }) => {
+    mockCreateUser.mockImplementationOnce((newUser, { onSuccess }) => {
       result = newUser;
       onSuccess();
     });
@@ -66,8 +77,45 @@ describe('UserForm', () => {
     fireEvent.submit(submitBtn!);
 
     await waitFor(() => {
-      expect(createUser).toHaveBeenCalled();
+      expect(mockCreateUser).toHaveBeenCalled();
       expect(result).toEqual({ name: 'Nezumi', phone: '0327764321' });
     });
   });
+
+  test('Should edit correctly', async () => {
+    const tempUser: IUser = {
+      id: 1,
+      name: 'Nezumi',
+      phone: '0324454432',
+      isBooked: true,
+      isDelete: true,
+    }
+
+    wrapper = render(
+      <QueryClientProvider client={queryClient}>
+        <BrowserRouter>
+          <UserForm user={tempUser}/>
+        </BrowserRouter>
+      </QueryClientProvider>
+    );
+
+    const submitBtn = wrapper!.getByText('Save').closest('button');
+    
+    let result: {
+      name: string;
+      phone: string;
+    };
+
+    mockUpdateUser.mockImplementationOnce((newUser, { onSuccess }) => {
+      result = newUser;
+      onSuccess();
+    });
+
+    fireEvent.submit(submitBtn!);
+
+    await waitFor(() => {
+      expect(mockUpdateUser).toHaveBeenCalled();
+      expect(result).toEqual(tempUser);
+    });
+  });
 });
diff --git a/hotel-management/src/pages/User/__tests__/UserRow.test.tsx b/hotel-management/src/pages/User/__tests__/UserRow.test.tsx
index d140cde..bc484a5 100644
--- a/hotel-management/src/pages/User/__tests__/UserRow.test.tsx
+++ b/hotel-management/src/pages/User/__tests__/UserRow.test.tsx
@@ -1,5 +1,5 @@
+import { render } from '@testing-library/react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import renderer from 'react-test-renderer';
 
 // Types
 import { IUser } from '@type/user';
@@ -16,7 +16,7 @@ describe('UserRow', () => {
     isDelete: true,
   };
   const queryClient = new QueryClient();
-  const wrapper = renderer.create(
+  const wrapper = render(
     <QueryClientProvider client={queryClient}>
       <UserRow user={tempUser} />
     </QueryClientProvider>
diff --git a/hotel-management/src/pages/User/__tests__/UserTable.test.tsx b/hotel-management/src/pages/User/__tests__/UserTable.test.tsx
index 242f648..9f69a75 100644
--- a/hotel-management/src/pages/User/__tests__/UserTable.test.tsx
+++ b/hotel-management/src/pages/User/__tests__/UserTable.test.tsx
@@ -1,6 +1,6 @@
+import { render } from '@testing-library/react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { BrowserRouter } from 'react-router-dom';
-import renderer from 'react-test-renderer';
 
 // Components
 import RoomTable from '@page/Room/RoomTable';
@@ -8,7 +8,7 @@ import RoomTable from '@page/Room/RoomTable';
 describe('UserTable', () => {
   const queryClient = new QueryClient();
 
-  const wrapper = renderer.create(
+  const wrapper = render(
     <QueryClientProvider client={queryClient}>
       <BrowserRouter>
         <RoomTable />
diff --git a/hotel-management/src/pages/User/__tests__/__snapshots__/UserRow.test.tsx.snap b/hotel-management/src/pages/User/__tests__/__snapshots__/UserRow.test.tsx.snap
index 357c1d0..1d546b1 100644
--- a/hotel-management/src/pages/User/__tests__/__snapshots__/UserRow.test.tsx.snap
+++ b/hotel-management/src/pages/User/__tests__/__snapshots__/UserRow.test.tsx.snap
@@ -1,53 +1,150 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`UserRow Should render correctly 1`] = `
-<div
-  className="sc-jSFipO sc-iCoHzw hTfHNc eWZMfB"
->
-  <div>
-    1
-  </div>
-  <div>
-    Temp Room
-  </div>
-  <div>
-    0324421232
-  </div>
-  <div>
-    No
-  </div>
-  <div>
-    <div
-      className="sc-kEqXeH jLboIv"
-    >
-      <button
-        aria-label="Menu item 1"
-        className="sc-crzpnZ gdsCet"
-        onClick={[Function]}
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="sc-jSFipO sc-iCoHzw hTfHNc eWZMfB"
       >
-        <svg
-          aria-hidden="true"
-          fill="currentColor"
-          height="1em"
-          stroke="currentColor"
-          strokeWidth="0"
-          style={
-            {
-              "color": undefined,
-            }
-          }
-          viewBox="0 0 24 24"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            clipRule="evenodd"
-            d="M10.5 6a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zm0 6a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zm0 6a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z"
-            fillRule="evenodd"
-          />
-        </svg>
-      </button>
+        <div>
+          1
+        </div>
+        <div>
+          Temp Room
+        </div>
+        <div>
+          0324421232
+        </div>
+        <div>
+          No
+        </div>
+        <div>
+          <div
+            class="sc-kEqXeH jLboIv"
+          >
+            <button
+              aria-label="Menu item 1"
+              class="sc-crzpnZ gdsCet"
+            >
+              <svg
+                aria-hidden="true"
+                fill="currentColor"
+                height="1em"
+                stroke="currentColor"
+                stroke-width="0"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  clip-rule="evenodd"
+                  d="M10.5 6a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zm0 6a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zm0 6a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z"
+                  fill-rule="evenodd"
+                />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
     </div>
-  </div>
-</div>
+  </body>,
+  "container": <div>
+    <div
+      class="sc-jSFipO sc-iCoHzw hTfHNc eWZMfB"
+    >
+      <div>
+        1
+      </div>
+      <div>
+        Temp Room
+      </div>
+      <div>
+        0324421232
+      </div>
+      <div>
+        No
+      </div>
+      <div>
+        <div
+          class="sc-kEqXeH jLboIv"
+        >
+          <button
+            aria-label="Menu item 1"
+            class="sc-crzpnZ gdsCet"
+          >
+            <svg
+              aria-hidden="true"
+              fill="currentColor"
+              height="1em"
+              stroke="currentColor"
+              stroke-width="0"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                clip-rule="evenodd"
+                d="M10.5 6a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zm0 6a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zm0 6a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z"
+                fill-rule="evenodd"
+              />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
 `;
diff --git a/hotel-management/src/pages/User/__tests__/__snapshots__/UserTable.test.tsx.snap b/hotel-management/src/pages/User/__tests__/__snapshots__/UserTable.test.tsx.snap
index 8422a9b..8b83dd0 100644
--- a/hotel-management/src/pages/User/__tests__/__snapshots__/UserTable.test.tsx.snap
+++ b/hotel-management/src/pages/User/__tests__/__snapshots__/UserTable.test.tsx.snap
@@ -1,65 +1,166 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`UserTable Should render correctly 1`] = `
-<div
-  className="sc-giAruI eEOXtt"
-  type="vertical"
->
-  <div
-    className="sc-iJCSeZ boUFen"
-  >
-    <div
-      className="sc-dItHI exgtuU"
-    >
-      <button
-        className="sc-bqGGcD entqcN"
-        disabled={true}
-        onClick={[Function]}
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="sc-giAruI eEOXtt"
+        type="vertical"
       >
-        Ascending
-      </button>
-      <button
-        className="sc-bqGGcD graLyf"
-        disabled={false}
-        onClick={[Function]}
-      >
-        Descending
-      </button>
+        <div
+          class="sc-iJCSeZ boUFen"
+        >
+          <div
+            class="sc-dItHI exgtuU"
+          >
+            <button
+              class="sc-bqGGcD entqcN"
+              disabled=""
+            >
+              Ascending
+            </button>
+            <button
+              class="sc-bqGGcD graLyf"
+            >
+              Descending
+            </button>
+          </div>
+          <select
+            aria-label="Sort"
+            class="sc-crzpnZ iXFhDe"
+          >
+            <option
+              value="id"
+            >
+              Sort by id
+            </option>
+            <option
+              value="name"
+            >
+              Sort by name
+            </option>
+            <option
+              value="price"
+            >
+              Sort by price
+            </option>
+          </select>
+          <input
+            class="sc-iqAbyq kOrhXJ"
+            placeholder="Search by name..."
+          />
+        </div>
+        <div
+          class="sc-ezyZrH gLRBxl"
+        />
+      </div>
     </div>
-    <select
-      aria-label="Sort"
-      className="sc-crzpnZ iXFhDe"
-      disabled={false}
-      onChange={[Function]}
-      value=""
+  </body>,
+  "container": <div>
+    <div
+      class="sc-giAruI eEOXtt"
+      type="vertical"
     >
-      <option
-        data-testid="select-option"
-        value="id"
+      <div
+        class="sc-iJCSeZ boUFen"
       >
-        Sort by id
-      </option>
-      <option
-        data-testid="select-option"
-        value="name"
-      >
-        Sort by name
-      </option>
-      <option
-        data-testid="select-option"
-        value="price"
-      >
-        Sort by price
-      </option>
-    </select>
-    <input
-      className="sc-iqAbyq kOrhXJ"
-      onChange={[Function]}
-      placeholder="Search by name..."
-    />
-  </div>
-  <div
-    className="sc-ezyZrH dFKszz"
-  />
-</div>
+        <div
+          class="sc-dItHI exgtuU"
+        >
+          <button
+            class="sc-bqGGcD entqcN"
+            disabled=""
+          >
+            Ascending
+          </button>
+          <button
+            class="sc-bqGGcD graLyf"
+          >
+            Descending
+          </button>
+        </div>
+        <select
+          aria-label="Sort"
+          class="sc-crzpnZ iXFhDe"
+        >
+          <option
+            value="id"
+          >
+            Sort by id
+          </option>
+          <option
+            value="name"
+          >
+            Sort by name
+          </option>
+          <option
+            value="price"
+          >
+            Sort by price
+          </option>
+        </select>
+        <input
+          class="sc-iqAbyq kOrhXJ"
+          placeholder="Search by name..."
+        />
+      </div>
+      <div
+        class="sc-ezyZrH gLRBxl"
+      />
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
 `;
diff --git a/hotel-management/src/pages/User/__tests__/__snapshots__/index.test.tsx.snap b/hotel-management/src/pages/User/__tests__/__snapshots__/index.test.tsx.snap
index 99a82fa..84d69f9 100644
--- a/hotel-management/src/pages/User/__tests__/__snapshots__/index.test.tsx.snap
+++ b/hotel-management/src/pages/User/__tests__/__snapshots__/index.test.tsx.snap
@@ -1,86 +1,206 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`User Should render correctly 1`] = `
-<main
-  className="sc-lmgPJu fmDjvX"
->
-  <div
-    className="sc-cxNGUP cGfCbe"
-    type="horizontal"
-  >
-    <h2
-      className="sc-iJCSeZ jfWGKb"
-    >
-      List User
-    </h2>
-    <button
-      className="sc-iemXqs gdUlEE"
-      onClick={[Function]}
-      variations="primary"
-    >
-      Add user
-    </button>
-  </div>
-  <div
-    className="sc-cxNGUP hDpxxT"
-    type="vertical"
-  >
-    <div
-      className="sc-giAruI kILZpe"
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <main
+        class="sc-ezyZrH hDMmuA"
+      >
+        <div
+          class="sc-giAruI itcrUM"
+          type="horizontal"
+        >
+          <h2
+            class="sc-bYwyHq hzDKSH"
+          >
+            List User
+          </h2>
+          <button
+            class="sc-iemXqs gdUlEE"
+            variations="primary"
+          >
+            Add user
+          </button>
+        </div>
+        <div
+          class="sc-giAruI eEOXtt"
+          type="vertical"
+        >
+          <div
+            class="sc-kLokBR lEQmc"
+          >
+            <div
+              class="sc-dItHI exgtuU"
+            >
+              <button
+                class="sc-bqGGcD entqcN"
+                disabled=""
+              >
+                Ascending
+              </button>
+              <button
+                class="sc-bqGGcD graLyf"
+              >
+                Descending
+              </button>
+            </div>
+            <select
+              aria-label="Sort"
+              class="sc-crzpnZ iXFhDe"
+            >
+              <option
+                value="id"
+              >
+                Sort by id
+              </option>
+              <option
+                value="name"
+              >
+                Sort by name
+              </option>
+              <option
+                value="phone"
+              >
+                Sort by phone
+              </option>
+            </select>
+            <input
+              class="sc-iqAbyq kOrhXJ"
+              placeholder="Search by phone..."
+            />
+          </div>
+          <div
+            class="sc-iklJRA dNgqKM"
+          />
+        </div>
+      </main>
+    </div>
+  </body>,
+  "container": <div>
+    <main
+      class="sc-ezyZrH hDMmuA"
     >
       <div
-        className="sc-dItHI exgtuU"
+        class="sc-giAruI itcrUM"
+        type="horizontal"
       >
-        <button
-          className="sc-bqGGcD entqcN"
-          disabled={true}
-          onClick={[Function]}
+        <h2
+          class="sc-bYwyHq hzDKSH"
         >
-          Ascending
-        </button>
+          List User
+        </h2>
         <button
-          className="sc-bqGGcD graLyf"
-          disabled={false}
-          onClick={[Function]}
+          class="sc-iemXqs gdUlEE"
+          variations="primary"
         >
-          Descending
+          Add user
         </button>
       </div>
-      <select
-        aria-label="Sort"
-        className="sc-crzpnZ iXFhDe"
-        disabled={false}
-        onChange={[Function]}
-        value=""
+      <div
+        class="sc-giAruI eEOXtt"
+        type="vertical"
       >
-        <option
-          data-testid="select-option"
-          value="id"
+        <div
+          class="sc-kLokBR lEQmc"
         >
-          Sort by id
-        </option>
-        <option
-          data-testid="select-option"
-          value="name"
-        >
-          Sort by name
-        </option>
-        <option
-          data-testid="select-option"
-          value="phone"
-        >
-          Sort by phone
-        </option>
-      </select>
-      <input
-        className="sc-iqAbyq kOrhXJ"
-        onChange={[Function]}
-        placeholder="Search by phone..."
-      />
-    </div>
-    <div
-      className="sc-ezyZrH dFKszz"
-    />
-  </div>
-</main>
+          <div
+            class="sc-dItHI exgtuU"
+          >
+            <button
+              class="sc-bqGGcD entqcN"
+              disabled=""
+            >
+              Ascending
+            </button>
+            <button
+              class="sc-bqGGcD graLyf"
+            >
+              Descending
+            </button>
+          </div>
+          <select
+            aria-label="Sort"
+            class="sc-crzpnZ iXFhDe"
+          >
+            <option
+              value="id"
+            >
+              Sort by id
+            </option>
+            <option
+              value="name"
+            >
+              Sort by name
+            </option>
+            <option
+              value="phone"
+            >
+              Sort by phone
+            </option>
+          </select>
+          <input
+            class="sc-iqAbyq kOrhXJ"
+            placeholder="Search by phone..."
+          />
+        </div>
+        <div
+          class="sc-iklJRA dNgqKM"
+        />
+      </div>
+    </main>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
 `;
diff --git a/hotel-management/src/pages/User/__tests__/index.test.tsx b/hotel-management/src/pages/User/__tests__/index.test.tsx
index f8461f9..7028f5d 100644
--- a/hotel-management/src/pages/User/__tests__/index.test.tsx
+++ b/hotel-management/src/pages/User/__tests__/index.test.tsx
@@ -1,4 +1,4 @@
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
 import { BrowserRouter } from 'react-router-dom';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
@@ -8,7 +8,7 @@ import User from '..';
 describe('User', () => {
   const queryClient = new QueryClient();
 
-  const wrapper = renderer.create(
+  const wrapper = render(
     <QueryClientProvider client={queryClient}>
       <BrowserRouter>
         <User />
diff --git a/hotel-management/src/pages/User/index.tsx b/hotel-management/src/pages/User/index.tsx
index 4d5079f..3a29e9f 100644
--- a/hotel-management/src/pages/User/index.tsx
+++ b/hotel-management/src/pages/User/index.tsx
@@ -1,15 +1,13 @@
 // Components
 import UserTable from './UserTable';
+import Modal from '@component/Modal';
+import UserForm from './UserForm';
 
 // Styled
 import Button from '@commonStyle/Button';
 import Direction from '@commonStyle/Direction.ts';
 import { StyledUser, Title } from './styled';
 
-// Types
-import Modal from '@component/Modal';
-import UserForm from './UserForm';
-
 // Constants
 import { FORM } from '@constant/commons';
 
diff --git a/hotel-management/src/services/__tests__/authenticationService.test.ts b/hotel-management/src/services/__tests__/authenticationService.test.ts
new file mode 100644
index 0000000..d9bddcf
--- /dev/null
+++ b/hotel-management/src/services/__tests__/authenticationService.test.ts
@@ -0,0 +1,152 @@
+import {
+  getCurrentAccount,
+  login,
+  logout,
+  updateAccount,
+} from '@service/authenticationService';
+import supabase from '@service/supabaseService';
+import { Session, UserAttributes } from '@supabase/supabase-js';
+
+// Mock Supabase module
+jest.mock('@service/supabaseService', () => ({
+  auth: {
+    signInWithPassword: jest.fn(),
+    getSession: jest.fn(),
+    getUser: jest.fn(),
+    signOut: jest.fn(),
+    updateUser: jest.fn(),
+  },
+}));
+
+const errorMessage = 'Error message';
+
+describe('login', () => {
+  const accountInput = { email: 'admin@nezumi.site', password: 'Password' };
+
+  test('Should return data when login success', async () => {
+    const mockData: UserAttributes = {
+      // Add any necessary fields based on your actual response
+      email: 'admin@nezumi.site',
+      password: 'Password',
+    };
+
+    (supabase.auth.signInWithPassword as jest.Mock).mockResolvedValue({
+      data: mockData,
+      error: null,
+    });
+
+    const result = await login(accountInput);
+
+    // Assert
+    expect(result).toEqual(mockData);
+  });
+
+  test('Should return error when login fail', async () => {
+    (supabase.auth.signInWithPassword as jest.Mock).mockResolvedValue({
+      data: null,
+      error: { message: errorMessage },
+    });
+
+    await expect(login(accountInput)).rejects.toThrow(errorMessage);
+  });
+});
+
+describe('getCurrentAccount', () => {
+  const mockSession: Session = {
+    access_token: 'access_token',
+    expires_in: 250,
+    refresh_token: 'refresh_token',
+    token_type: 'token_type',
+    user: {
+      app_metadata: jest.fn(),
+      aud: '',
+      created_at: '',
+      id: '',
+      user_metadata: jest.fn(),
+    },
+  };
+
+  test('should return data user', async () => {
+    (supabase.auth.getSession as jest.Mock).mockResolvedValue({
+      data: { session: mockSession },
+    });
+
+    (supabase.auth.getUser as jest.Mock).mockResolvedValue({
+      data: { user: 'mockUser' },
+    });
+
+    const result = await getCurrentAccount();
+
+    expect(result).toEqual('mockUser');
+  });
+
+  test('should return null if not have session', async () => {
+    (supabase.auth.getSession as jest.Mock).mockResolvedValue({
+      data: {},
+    });
+
+    const result = await getCurrentAccount();
+
+    expect(result).toBeNull();
+  });
+
+  test('should return error if can not get data of account', async () => {
+    (supabase.auth.getSession as jest.Mock).mockResolvedValue({
+      data: { session: mockSession },
+    });
+
+    (supabase.auth.getUser as jest.Mock).mockResolvedValue({
+      data: null,
+      error: { message: errorMessage },
+    });
+
+    await expect(getCurrentAccount()).rejects.toThrow(errorMessage);
+  });
+});
+
+describe('logout', () => {
+  test('Should logout successful without error', async () => {
+    (supabase.auth.signOut as jest.Mock).mockResolvedValue({
+      error: '',
+    });
+
+    const result = await logout();
+
+    expect(result).toBeUndefined;
+  });
+
+  test('Should throw error if have problem', async () => {
+    (supabase.auth.signOut as jest.Mock).mockResolvedValue({
+      error: { message: errorMessage },
+    });
+
+    await expect(logout()).rejects.toThrow(errorMessage);
+  });
+});
+
+describe('updateAccount', () => {
+  const sampleData = {
+    fullName: 'Nezumi',
+    password: 'password',
+  }
+
+  test('Should update successful', async () => {
+    (supabase.auth.updateUser as jest.Mock).mockResolvedValue({
+      data: 'sample data',
+      error: null,
+    });
+
+    const result = await updateAccount(sampleData);
+
+    expect(result).toEqual('sample data');
+  });
+
+  test('Should throw error if has problem,', async () => {
+    (supabase.auth.updateUser as jest.Mock).mockResolvedValue({
+      data: 'sample data',
+      error: { message: errorMessage },
+    });
+
+    await expect(updateAccount(sampleData)).rejects.toThrow(errorMessage)
+  });
+});
diff --git a/hotel-management/src/services/__tests__/bookingService.test.ts b/hotel-management/src/services/__tests__/bookingService.test.ts
new file mode 100644
index 0000000..3b726c0
--- /dev/null
+++ b/hotel-management/src/services/__tests__/bookingService.test.ts
@@ -0,0 +1,230 @@
+import {
+  ERROR_CHECKOUT,
+  ERROR_CREATE_BOOKING,
+  ERROR_FETCHING_BOOKING,
+  ERROR_UPDATE_BOOKING,
+} from '@constant/messages';
+import {
+  checkOutBooking,
+  createBooking,
+  getAllBookings,
+  updateBooking,
+} from '@service/bookingServices';
+import supabase from '@service/supabaseService';
+import { IBooking } from '@type/booking';
+
+jest.mock('@service/supabaseService', () => ({
+  __esModule: true,
+  default: {
+    from: jest.fn(() => ({
+      select: jest.fn(() => ({
+        order: jest.fn(() => ({
+          like: jest.fn(() => ({
+            eq: jest.fn(() => ({
+              range: jest.fn(() => ({
+                then: jest.fn(),
+              })),
+              then: jest.fn(),
+            })),
+          })),
+        })),
+      })),
+    })),
+  },
+}));
+
+const sampleData: IBooking[] = [
+  {
+    id: 1,
+    startDate: '2023/11/12',
+    endDate: '2023/11/15',
+    amount: 2300,
+    status: true,
+    roomId: 1,
+    userId: 2,
+  },
+  {
+    id: 2,
+    startDate: '2023/12/12',
+    endDate: '2023/12/15',
+    amount: 23001,
+    status: false,
+    roomId: 2,
+    userId: 3,
+  },
+];
+
+const errorMessage = 'Error message';
+
+describe('getAllBookings', () => {
+  test('Should fetch all bookings successfully', async () => {
+    const mockedQuery = jest
+      .fn()
+      .mockReturnValue({ data: sampleData, count: 2 });
+
+    (supabase.from as jest.Mock).mockImplementation(() => ({
+      select: jest.fn(() => ({
+        ilike: jest.fn(() => ({
+          range: mockedQuery,
+        })),
+      })),
+    }));
+
+    const result = await getAllBookings({
+      userNameSearch: 'test',
+      page: 1,
+    });
+
+    expect(result.data.length).toEqual(2);
+    expect(result.count).toBe(2);
+  });
+
+  test('Should throw error when fetch failed.', async () => {
+    const mockedQuery = jest.fn().mockReturnValue({ error: errorMessage });
+
+    (supabase.from as jest.Mock).mockImplementation(() => ({
+      select: jest.fn(() => ({
+        ilike: jest.fn(() => ({
+          range: mockedQuery,
+        })),
+      })),
+    }));
+
+    await expect(
+      getAllBookings({
+        userNameSearch: 'test',
+        page: 1,
+      })
+    ).rejects.toThrow(ERROR_FETCHING_BOOKING);
+  });
+});
+
+describe('createBooking', () => {
+  test('Should create booking successfully', async () => {
+    const mockedQuery = jest
+      .fn()
+      .mockReturnValue({ data: sampleData[0], error: '' });
+
+    (supabase.from as jest.Mock).mockImplementation(() => ({
+      update: jest.fn(() => ({
+        eq: jest.fn(() => ({
+          select: jest.fn(() => ({
+            single: mockedQuery,
+          })),
+        })),
+      })),
+    }));
+
+    const result = await updateBooking(sampleData[0]);
+
+    expect(result).toEqual(sampleData[0]);
+  });
+
+  test('Should throw error when create failed.', async () => {
+    const mockedQuery = jest
+      .fn()
+      .mockReturnValue({ data: sampleData[0], error: errorMessage });
+
+    (supabase.from as jest.Mock).mockImplementation(() => ({
+      update: jest.fn(() => ({
+        eq: jest.fn(() => ({
+          select: jest.fn(() => ({
+            single: mockedQuery,
+          })),
+        })),
+      })),
+    }));
+
+    await expect(updateBooking(sampleData[0])).rejects.toThrow(
+      ERROR_UPDATE_BOOKING
+    );
+  });
+});
+
+describe('updateBooking', () => {
+  test('Should update booking successfully', async () => {
+    const mockedQuery = jest
+      .fn()
+      .mockReturnValue({ data: sampleData[0], error: '' });
+
+    (supabase.from as jest.Mock).mockImplementation(() => ({
+      insert: jest.fn(() => ({
+        select: jest.fn(() => ({
+          single: mockedQuery,
+        })),
+      })),
+    }));
+
+    const result = await createBooking(sampleData[0]);
+
+    expect(result).toEqual(sampleData[0]);
+  });
+
+  test('Should throw error when update failed.', async () => {
+    const mockedQuery = jest
+      .fn()
+      .mockReturnValue({ data: sampleData[0], error: errorMessage });
+
+    (supabase.from as jest.Mock).mockImplementation(() => ({
+      insert: jest.fn(() => ({
+        select: jest.fn(() => ({
+          single: mockedQuery,
+        })),
+      })),
+    }));
+
+    await expect(createBooking(sampleData[0])).rejects.toThrow(
+      ERROR_CREATE_BOOKING
+    );
+  });
+});
+
+describe('checkOutBooking', () => {
+  test('Should checkout booking successfully', async () => {
+    const mockedQuery = jest
+      .fn()
+      .mockReturnValue({ data: sampleData[0], error: '' });
+
+    (supabase.from as jest.Mock).mockImplementation(() => ({
+      update: jest.fn(() => ({
+        eq: jest.fn(() => ({
+          select: jest.fn(() => ({
+            single: mockedQuery,
+          })),
+        })),
+      })),
+    }));
+
+    const result = await checkOutBooking({
+      idBooking: 1,
+      roomId: 2,
+      userId: 3,
+    });
+
+    expect(result).toEqual(sampleData[0]);
+  });
+
+  test('Should throw error when checkout failed.', async () => {
+    const mockedQuery = jest
+      .fn()
+      .mockReturnValue({ data: sampleData[0], error: errorMessage });
+
+    (supabase.from as jest.Mock).mockImplementation(() => ({
+      update: jest.fn(() => ({
+        eq: jest.fn(() => ({
+          select: jest.fn(() => ({
+            single: mockedQuery,
+          })),
+        })),
+      })),
+    }));
+
+    await expect(
+      checkOutBooking({
+        idBooking: 1,
+        roomId: 2,
+        userId: 3,
+      })
+    ).rejects.toThrow(ERROR_CHECKOUT);
+  });
+});
diff --git a/hotel-management/src/services/__tests__/roomService.test.ts b/hotel-management/src/services/__tests__/roomService.test.ts
index 56202ca..12b8b95 100644
--- a/hotel-management/src/services/__tests__/roomService.test.ts
+++ b/hotel-management/src/services/__tests__/roomService.test.ts
@@ -1,86 +1,313 @@
-import { waitFor } from '@testing-library/react';
+import { ERROR_CREATE_ROOM, ERROR_DELETE_ROOM, ERROR_FETCHING_ROOM, ERROR_UPDATE_ROOM } from '@constant/messages';
+import { createRoom, getAllRooms, getRoomById, setIsDeleteRoom, updateRoom, updateRoomStatus } from '@service/roomServices';
+import supabase from '@service/supabaseService';
 
-// Services
-import {
-  createRoom,
-  setIsDeleteRoom,
-  getAllRooms,
-  updateRoom,
-} from '@service/roomServices';
+jest.mock('@service/supabaseService', () => ({
+  __esModule: true,
+  default: {
+    from: jest.fn(() => ({
+      select: jest.fn(() => ({
+        order: jest.fn(() => ({
+          like: jest.fn(() => ({
+            eq: jest.fn(() => ({
+              range: jest.fn(() => ({
+                then: jest.fn(),
+              })),
+              then: jest.fn(),
+            })),
+          })),
+        })),
+      })),
+    })),
+  },
+}));
 
-// Types
-import { IRoom } from '@type/room';
+const sampleData = [
+  {
+    id: 1,
+    name: 'Room 1',
+    price: 2300,
+    status: true,
+    isDelete: false,
+  },
+  {
+    id: 2,
+    name: 'Room 2',
+    price: 2300,
+    status: true,
+    isDelete: false,
+  },
+];
 
-jest.mock('@service/supabaseService');
-const mockGetAllRooms = jest.fn(getAllRooms);
-const mockUpdateRoom = jest.fn(updateRoom);
-const mockCreateRoom = jest.fn(createRoom);
-const mockIsDeleteRoom = jest.fn(setIsDeleteRoom);
+describe('getAllRooms', () => {
+  test('should fetch all rooms successfully', async () => {
+    const mockedQuery = jest
+      .fn()
+      .mockReturnValue({ data: sampleData, count: 2 });
 
-const sampleData: IRoom = {
-  id: 999,
-  name: 'Room name test',
-  price: 9999,
-  status: true,
-  isDelete: true,
-};
+    (supabase.from as jest.Mock).mockImplementation(() => ({
+      select: jest.fn(() => ({
+        order: jest.fn(() => ({
+          like: jest.fn(() => ({
+            eq: jest.fn(() => ({
+              range: mockedQuery,
+            })),
+          })),
+        })),
+      })),
+    }));
 
-describe('Rooms service', () => {
-  test('Should fetch room correctly', async () => {
-    mockGetAllRooms.mockResolvedValue({
-      data: [
-        {
-          id: 1,
-          name: 'Nezumi',
-          price: 2500,
-          status: true,
-          isDelete: true,
-        },
-        {
-          id: 2,
-          name: 'Loi Phan',
-          price: 8500,
-          status: false,
-          isDelete: true,
-        },
-      ],
-      count: 2,
-    });
-    const result = await mockGetAllRooms({
+    const result = await getAllRooms({
       sortBy: 'name',
       orderBy: 'asc',
-      roomSearch: '',
+      roomSearch: 'test',
       page: 1,
     });
 
-    await waitFor(() => expect(result.data.length).toEqual(2));
+    expect(result.data.length).toEqual(2);
+    expect(result.count).toBe(2);
   });
 
-  test('Should create room correctly', async () => {
-    mockCreateRoom.mockResolvedValue(sampleData);
+  test('Should return error when fetch failed.', async () => {
+    const mockedQuery = jest
+      .fn()
+      .mockReturnValue({ error: 'Error message' });
 
-    const result = await mockCreateRoom(sampleData);
+    (supabase.from as jest.Mock).mockImplementation(() => ({
+      select: jest.fn(() => ({
+        order: jest.fn(() => ({
+          like: jest.fn(() => ({
+            eq: jest.fn(() => ({
+              range: mockedQuery,
+            })),
+          })),
+        })),
+      })),
+    }));
 
-    await waitFor(() => expect(result).toBeTruthy());
+    await expect(getAllRooms({
+      sortBy: 'name',
+      orderBy: 'asc',
+      roomSearch: 'test',
+      page: 1,
+    })).rejects.toThrow(ERROR_FETCHING_ROOM);
   });
+});
 
-  test('Should update room correctly', async () => {
-    mockUpdateRoom.mockResolvedValue({
-      id: 1,
-      name: 'Nezumi',
-      price: 2500,
-      status: true,
-      isDelete: true,
-    });
-    const result = await mockUpdateRoom(sampleData);
+describe('createRoom', () => {
+  test('should create room successfully', async () => {
+    const mockedQuery = jest
+      .fn()
+      .mockReturnValue({ data: sampleData[0] });
 
-    await waitFor(() => expect(result).toBeTruthy());
+    (supabase.from as jest.Mock).mockImplementation(() => ({
+      insert: jest.fn(() => ({
+        select: jest.fn(() => ({
+          single: mockedQuery
+        })),
+      })),
+    }));
+
+    const result = await createRoom(sampleData[0]);
+
+    expect(result).toEqual(sampleData[0]);
+  });
+
+  test('Should return error when create failed.', async () => {
+    const mockedQuery = jest
+      .fn()
+      .mockReturnValue({ error: 'error message' });
+
+    (supabase.from as jest.Mock).mockImplementation(() => ({
+      insert: jest.fn(() => ({
+        select: jest.fn(() => ({
+          single: mockedQuery
+        })),
+      })),
+    }));
+
+    await expect(createRoom(sampleData[0])).rejects.toThrow(ERROR_CREATE_ROOM);
+  });
+});
+
+describe('updateRoom', () => {
+  test('should update room successfully', async () => {
+    const mockedQuery = jest
+      .fn()
+      .mockReturnValue({ data: sampleData[0] });
+
+    (supabase.from as jest.Mock).mockImplementation(() => ({
+      update: jest.fn(() => ({
+        eq: jest.fn(() => ({
+          select: jest.fn(() => ({
+            single: mockedQuery
+          })),
+        })),
+      })),
+    }));
+
+    const result = await updateRoom(sampleData[0]);
+
+    expect(result).toEqual(sampleData[0]);
+  });
+
+  test('Should return error when fetch failed.', async () => {
+    const mockedQuery = jest
+      .fn()
+      .mockReturnValue({ error: 'error message' });
+    (supabase.from as jest.Mock).mockImplementation(() => ({
+      update: jest.fn(() => ({
+        eq: jest.fn(() => ({
+          select: jest.fn(() => ({
+            single: mockedQuery
+          })),
+        })),
+      })),
+    }));
+
+    await expect(updateRoom(sampleData[0])).rejects.toThrow(ERROR_UPDATE_ROOM);
+  });
+});
+
+describe('setIsDeleteRoom', () => {
+  test('should set is delete room successfully', async () => {
+    const mockedQuery = jest
+      .fn()
+      .mockReturnValue({ data: sampleData[0] });
+
+    (supabase.from as jest.Mock).mockImplementation(() => ({
+      update: jest.fn(() => ({
+        eq: jest.fn(() => ({
+          select: jest.fn(() => ({
+            single: mockedQuery
+          })),
+        })),
+      })),
+    }));
+
+    const result = await setIsDeleteRoom(1);
+
+    expect(result).toEqual(sampleData[0]);
+  });
+
+  test('Should return error when set is delete room failed.', async () => {
+    const mockedQuery = jest
+      .fn()
+      .mockReturnValue({ error: 'error message' });
+    (supabase.from as jest.Mock).mockImplementation(() => ({
+      update: jest.fn(() => ({
+        eq: jest.fn(() => ({
+          select: jest.fn(() => ({
+            single: mockedQuery
+          })),
+        })),
+      })),
+    }));
+
+    await expect(setIsDeleteRoom(1)).rejects.toThrow(ERROR_DELETE_ROOM);
+  });
+});
+
+describe('getRoomById', () => {
+  test('should return the data when get successfully', async () => {
+    const mockedQuery = jest
+      .fn()
+      .mockReturnValue({ data: sampleData[0] });
+
+    (supabase.from as jest.Mock).mockImplementation(() => ({
+      select: jest.fn(() => ({
+        eq: jest.fn(() => ({
+          single: mockedQuery
+        })),
+      })),
+    }));
+
+    const result = await getRoomById('1');
+
+    expect(result).toEqual(sampleData[0]);
+  });
+
+  test('Should return error when set is delete room failed.', async () => {
+    const mockedQuery = jest
+      .fn()
+      .mockReturnValue({ error: 'error message' });
+
+      (supabase.from as jest.Mock).mockImplementation(() => ({
+        select: jest.fn(() => ({
+          eq: jest.fn(() => ({
+            single: mockedQuery
+          })),
+        })),
+      }));
+
+    await expect(getRoomById('1')).rejects.toThrow(ERROR_FETCHING_ROOM);
   });
+});
+
+describe('updateRoomStatus', () => {
+  test('should return the data when get successfully', async () => {
+    const mockedQuery = jest
+      .fn()
+      .mockReturnValue({ data: sampleData[0] });
+
+    (supabase.from as jest.Mock).mockImplementation(() => ({
+      select: jest.fn(() => ({
+        eq: jest.fn(() => ({
+          single: mockedQuery
+        })),
+      })),
+    }));
+
+    const result = await getRoomById('1');
+
+    expect(result).toEqual(sampleData[0]);
+  });
+
+  test('Should return error when set is delete room failed.', async () => {
+    const mockedQuery = jest
+      .fn()
+      .mockReturnValue({ error: 'error message' });
+
+      (supabase.from as jest.Mock).mockImplementation(() => ({
+        select: jest.fn(() => ({
+          eq: jest.fn(() => ({
+            single: mockedQuery
+          })),
+        })),
+      }));
+
+    await expect(getRoomById('1')).rejects.toThrow(ERROR_FETCHING_ROOM);
+  });
+});
+
+describe('updateRoomStatus', () => {
+  test('Should return the data when update status successfully', async () => {
+    const mockedQuery = jest
+      .fn()
+      .mockReturnValue({ error: '' });
+
+    (supabase.from as jest.Mock).mockImplementation(() => ({
+      update: jest.fn(() => ({
+        eq: mockedQuery
+      })),
+    }));
+
+    const result = await updateRoomStatus(1, false);
+
+    expect(result).toBeUndefined();
+  });
+
+  test('Should return error when update status failed.', async () => {
+    const mockedQuery = jest
+      .fn()
+      .mockReturnValue({ error: 'error message' });
 
-  test('Should delete room correctly', async () => {
-    mockIsDeleteRoom.mockResolvedValue(sampleData);
-    const result = await mockIsDeleteRoom(1);
+      (supabase.from as jest.Mock).mockImplementation(() => ({
+        update: jest.fn(() => ({
+          eq: mockedQuery
+        })),
+      }));
 
-    await waitFor(() => expect(result).toBeTruthy());
+    await expect(updateRoomStatus(1, false)).rejects.toThrow(ERROR_UPDATE_ROOM);
   });
 });
diff --git a/hotel-management/src/services/__tests__/userService.test.ts b/hotel-management/src/services/__tests__/userService.test.ts
index af30ea7..fc17dcd 100644
--- a/hotel-management/src/services/__tests__/userService.test.ts
+++ b/hotel-management/src/services/__tests__/userService.test.ts
@@ -1,64 +1,250 @@
-import { waitFor } from '@testing-library/react';
-
 // Services
-import { createUser, getAllUsers, updateUser } from '@service/userServices';
+import { createUser, getAllUsers, setIsDeleteUser, updateUser, updateUserBookedStatus } from '@service/userServices';
 
 // Types
 import { IUser } from '@type/user';
+import supabase from '@service/supabaseService';
+import { ERROR_CREATE_USER, ERROR_DELETE_USER, ERROR_FETCHING_USER, ERROR_UPDATE_USER } from '@constant/messages';
 
-const mockGetAllUsers = jest.fn(getAllUsers);
-const mockCreateUser = jest.fn(createUser);
-const mockUpdateUser = jest.fn(updateUser);
+jest.mock('@service/supabaseService', () => ({
+  __esModule: true,
+  default: {
+    from: jest.fn(() => ({
+      select: jest.fn(() => ({
+        order: jest.fn(() => ({
+          like: jest.fn(() => ({
+            eq: jest.fn(() => ({
+              range: jest.fn(() => ({
+                then: jest.fn(),
+              })),
+              then: jest.fn(),
+            })),
+          })),
+        })),
+      })),
+    })),
+  },
+}));
 
-const sampleData: IUser = {
-  id: 999,
-  name: 'User name test',
-  phone: '123456789',
-  isBooked: true,
-  isDelete: true,
-};
+const sampleData: IUser[] = [
+  {
+    id: 1,
+    name: 'Nezumi',
+    phone: '0324422123',
+    isBooked: true,
+    isDelete: true,
+  },
+  {
+    id: 2,
+    name: 'Loi Phan',
+    phone: '0324422145',
+    isBooked: false,
+    isDelete: true,
+  },
+];
 
-describe('User services', () => {
+const errorMessage = 'error';
+
+describe('getAllUsers', () => {
   test('Should fetch user data correctly', async () => {
-    mockGetAllUsers.mockResolvedValue({
-      data: [
-        {
-          id: 1,
-          name: 'Nezumi',
-          phone: '0324422123',
-          isBooked: true,
-          isDelete: true,
-        },
-        {
-          id: 2,
-          name: 'Loi Phan',
-          phone: '0324422145',
-          isBooked: false,
-          isDelete: true,
-        },
-      ], count: 2
-    });
-    const result = await mockGetAllUsers(({
-      sortBy: 'name',
-      orderBy: 'asc',
-      phoneSearch: '',
-      page: 1,
+    const mockedQuery = jest
+      .fn()
+      .mockReturnValue({ data: sampleData, count: 2 });
+
+    (supabase.from as jest.Mock).mockImplementation(() => ({
+      select: jest.fn(() => ({
+        order: jest.fn(() => ({
+          like: jest.fn(() => ({
+            eq: jest.fn(() => ({
+              range: mockedQuery,
+            })),
+          })),
+        })),
+      })),
     }));
 
-    await waitFor(() => expect(result.data.length).toEqual(2));
+    const result = await getAllUsers({
+      sortBy: 'name',
+      orderBy: 'asc',
+      phoneSearch: 'test',
+      page: 1,
+    });
+
+    expect(result.data.length).toEqual(2);
+    expect(result.count).toBe(2);
   });
 
-  test('Should create user correctly', async () => {
-    mockCreateUser.mockResolvedValue(sampleData);
-    const result = await mockCreateUser(sampleData);
+  test('Should throw error if have problem when fetch data', async () => {
+    const mockedQuery = jest
+      .fn()
+      .mockReturnValue({ data: sampleData, count: 2, error: errorMessage });
 
-    await waitFor(() => expect(result).toBeTruthy());
-  });
+    (supabase.from as jest.Mock).mockImplementation(() => ({
+      select: jest.fn(() => ({
+        order: jest.fn(() => ({
+          like: jest.fn(() => ({
+            eq: jest.fn(() => ({
+              range: mockedQuery,
+            })),
+          })),
+        })),
+      })),
+    }));
 
-  test('Should update user correctly', async () => {
-    mockUpdateUser.mockResolvedValue(sampleData);
-    const result = await mockUpdateUser(sampleData);
+    await expect(
+      getAllUsers({
+        sortBy: 'name',
+        orderBy: 'asc',
+        phoneSearch: 'test',
+        page: 1,
+      })
+    ).rejects.toThrow(ERROR_FETCHING_USER);
+  });
+});
 
-    await waitFor(() => expect(result).toBeTruthy());
+describe('createUser', () => {
+  test('Should create user successfully', async () => {
+    const mockedQuery = jest
+      .fn()
+      .mockReturnValue({ data: sampleData[0], error: '' });
+
+    (supabase.from as jest.Mock).mockImplementation(() => ({
+      insert: jest.fn(() => ({
+        select: jest.fn(() => ({
+          single: mockedQuery,
+        })),
+      })),
+    }));
+
+    const result = await createUser(sampleData[0]);
+
+    expect(result).toEqual(sampleData[0]);
+  });
+
+  test('Should throw error if have problem when create user', async () => {
+    const mockedQuery = jest
+      .fn()
+      .mockReturnValue({ data: sampleData[0], error: errorMessage });
+
+    (supabase.from as jest.Mock).mockImplementation(() => ({
+      insert: jest.fn(() => ({
+        select: jest.fn(() => ({
+          single: mockedQuery,
+        })),
+      })),
+    }));
+
+    await expect(createUser(sampleData[0])).rejects.toThrow(ERROR_CREATE_USER);
+  });
+});
+
+describe('updateUser', () => {
+  test('Should update user successfully', async () => {
+    const mockedQuery = jest
+      .fn()
+      .mockReturnValue({ data: sampleData[0], error: '' });
+
+    (supabase.from as jest.Mock).mockImplementation(() => ({
+      update: jest.fn(() => ({
+        eq: jest.fn(() => ({
+          select: jest.fn(() => ({
+            single: mockedQuery,
+          })),
+        })),
+      })),
+    }));
+
+    const result = await updateUser(sampleData[0]);
+
+    expect(result).toEqual(sampleData[0]);
+  });
+
+  test('Should throw error if have problem when update user', async () => {
+    const mockedQuery = jest
+      .fn()
+      .mockReturnValue({ data: sampleData[0], error: errorMessage });
+
+      (supabase.from as jest.Mock).mockImplementation(() => ({
+        update: jest.fn(() => ({
+          eq: jest.fn(() => ({
+            select: jest.fn(() => ({
+              single: mockedQuery,
+            })),
+          })),
+        })),
+      }));
+
+    await expect(updateUser(sampleData[0])).rejects.toThrow(ERROR_UPDATE_USER);
+  });
+});
+
+describe('setIsDeleteUser', () => {
+  test('Should set is delete user successfully', async () => {
+    const mockedQuery = jest
+      .fn()
+      .mockReturnValue({ data: sampleData[0] });
+
+    (supabase.from as jest.Mock).mockImplementation(() => ({
+      update: jest.fn(() => ({
+        eq: jest.fn(() => ({
+          select: jest.fn(() => ({
+            single: mockedQuery
+          })),
+        })),
+      })),
+    }));
+
+    const result = await setIsDeleteUser(1);
+
+    expect(result).toEqual(sampleData[0]);
+  });
+
+  test('Should return error when set is delete user failed.', async () => {
+    const mockedQuery = jest
+      .fn()
+      .mockReturnValue({ error: 'error message' });
+    (supabase.from as jest.Mock).mockImplementation(() => ({
+      update: jest.fn(() => ({
+        eq: jest.fn(() => ({
+          select: jest.fn(() => ({
+            single: mockedQuery
+          })),
+        })),
+      })),
+    }));
+
+    await expect(setIsDeleteUser(1)).rejects.toThrow(ERROR_DELETE_USER);
+  });
+});
+
+describe('updateUserBookedStatus', () => {
+  test('Should return the data when get successfully', async () => {
+    const mockedQuery = jest
+      .fn()
+      .mockReturnValue({ error: '' });
+
+    (supabase.from as jest.Mock).mockImplementation(() => ({
+      update: jest.fn(() => ({
+        eq: mockedQuery
+      })),
+    }));
+
+    const result = await updateUserBookedStatus(1, false);
+
+    expect(result).toBeUndefined();
+  });
+
+  test('Should return error when set is delete user failed.', async () => {
+    const mockedQuery = jest
+      .fn()
+      .mockReturnValue({ error: 'error message' });
+
+      (supabase.from as jest.Mock).mockImplementation(() => ({
+        update: jest.fn(() => ({
+          eq: mockedQuery
+        })),
+      }));
+
+    await expect(updateUserBookedStatus(1, false)).rejects.toThrow(ERROR_UPDATE_USER);
   });
 });
diff --git a/hotel-management/src/services/userServices.ts b/hotel-management/src/services/userServices.ts
index 11837cb..2652372 100644
--- a/hotel-management/src/services/userServices.ts
+++ b/hotel-management/src/services/userServices.ts
@@ -25,8 +25,6 @@ const createUser = async (user: IUser): Promise<IUser> => {
     .select()
     .single();
 
-    console.log('Create');
-
   if (error) {
     console.error(error.message);
     throw new Error(ERROR_CREATE_USER);
diff --git a/hotel-management/src/types/supabase.ts b/hotel-management/src/types/supabase.ts
index ed1784f..72ee8f2 100644
--- a/hotel-management/src/types/supabase.ts
+++ b/hotel-management/src/types/supabase.ts
@@ -4,196 +4,196 @@ export type Json =
   | boolean
   | null
   | { [key: string]: Json | undefined }
-  | Json[]
+  | Json[];
 
 export interface Database {
   public: {
     Tables: {
       bookings: {
         Row: {
-          amount: number
-          endDate: string
-          id: number
-          roomId: number
-          startDate: string
-          status: boolean
-          userId: number
-        }
+          amount: number;
+          endDate: string;
+          id: number;
+          roomId: number;
+          startDate: string;
+          status: boolean;
+          userId: number;
+        };
         Insert: {
-          amount: number
-          endDate: string
-          id?: number
-          roomId: number
-          startDate: string
-          status?: boolean
-          userId: number
-        }
+          amount: number;
+          endDate: string;
+          id?: number;
+          roomId: number;
+          startDate: string;
+          status?: boolean;
+          userId: number;
+        };
         Update: {
-          amount?: number
-          endDate?: string
-          id?: number
-          roomId?: number
-          startDate?: string
-          status?: boolean
-          userId?: number
-        }
+          amount?: number;
+          endDate?: string;
+          id?: number;
+          roomId?: number;
+          startDate?: string;
+          status?: boolean;
+          userId?: number;
+        };
         Relationships: [
           {
-            foreignKeyName: "bookings_roomId_fkey"
-            columns: ["roomId"]
-            isOneToOne: false
-            referencedRelation: "rooms"
-            referencedColumns: ["id"]
+            foreignKeyName: 'bookings_roomId_fkey';
+            columns: ['roomId'];
+            isOneToOne: false;
+            referencedRelation: 'rooms';
+            referencedColumns: ['id'];
           },
           {
-            foreignKeyName: "bookings_userId_fkey"
-            columns: ["userId"]
-            isOneToOne: false
-            referencedRelation: "users"
-            referencedColumns: ["id"]
+            foreignKeyName: 'bookings_userId_fkey';
+            columns: ['userId'];
+            isOneToOne: false;
+            referencedRelation: 'users';
+            referencedColumns: ['id'];
           }
-        ]
-      }
+        ];
+      };
       rooms: {
         Row: {
-          id: number
-          isDelete: boolean
-          name: string
-          price: number
-          status: boolean
-        }
+          id: number;
+          isDelete: boolean;
+          name: string;
+          price: number;
+          status: boolean;
+        };
         Insert: {
-          id?: number
-          isDelete?: boolean
-          name: string
-          price: number
-          status?: boolean
-        }
+          id?: number;
+          isDelete?: boolean;
+          name: string;
+          price: number;
+          status?: boolean;
+        };
         Update: {
-          id?: number
-          isDelete?: boolean
-          name?: string
-          price?: number
-          status?: boolean
-        }
-        Relationships: []
-      }
+          id?: number;
+          isDelete?: boolean;
+          name?: string;
+          price?: number;
+          status?: boolean;
+        };
+        Relationships: [];
+      };
       users: {
         Row: {
-          id: number
-          isBooked: boolean
-          isDelete: boolean
-          name: string
-          phone: string
-        }
+          id: number;
+          isBooked: boolean;
+          isDelete: boolean;
+          name: string;
+          phone: string;
+        };
         Insert: {
-          id?: number
-          isBooked?: boolean
-          isDelete?: boolean
-          name: string
-          phone: string
-        }
+          id?: number;
+          isBooked?: boolean;
+          isDelete?: boolean;
+          name: string;
+          phone: string;
+        };
         Update: {
-          id?: number
-          isBooked?: boolean
-          isDelete?: boolean
-          name?: string
-          phone?: string
-        }
-        Relationships: []
-      }
-    }
+          id?: number;
+          isBooked?: boolean;
+          isDelete?: boolean;
+          name?: string;
+          phone?: string;
+        };
+        Relationships: [];
+      };
+    };
     Views: {
-      [_ in never]: never
-    }
+      [_ in never]: never;
+    };
     Functions: {
-      [_ in never]: never
-    }
+      [_ in never]: never;
+    };
     Enums: {
-      [_ in never]: never
-    }
+      [_ in never]: never;
+    };
     CompositeTypes: {
-      [_ in never]: never
-    }
-  }
+      [_ in never]: never;
+    };
+  };
 }
 
 export type Tables<
   PublicTableNameOrOptions extends
-    | keyof (Database["public"]["Tables"] & Database["public"]["Views"])
+    | keyof (Database['public']['Tables'] & Database['public']['Views'])
     | { schema: keyof Database },
   TableName extends PublicTableNameOrOptions extends { schema: keyof Database }
-    ? keyof (Database[PublicTableNameOrOptions["schema"]]["Tables"] &
-        Database[PublicTableNameOrOptions["schema"]]["Views"])
+    ? keyof (Database[PublicTableNameOrOptions['schema']]['Tables'] &
+        Database[PublicTableNameOrOptions['schema']]['Views'])
     : never = never
 > = PublicTableNameOrOptions extends { schema: keyof Database }
-  ? (Database[PublicTableNameOrOptions["schema"]]["Tables"] &
-      Database[PublicTableNameOrOptions["schema"]]["Views"])[TableName] extends {
-      Row: infer R
+  ? (Database[PublicTableNameOrOptions['schema']]['Tables'] &
+      Database[PublicTableNameOrOptions['schema']]['Views'])[TableName] extends {
+      Row: infer R;
     }
     ? R
     : never
-  : PublicTableNameOrOptions extends keyof (Database["public"]["Tables"] &
-      Database["public"]["Views"])
-  ? (Database["public"]["Tables"] &
-      Database["public"]["Views"])[PublicTableNameOrOptions] extends {
-      Row: infer R
+  : PublicTableNameOrOptions extends keyof (Database['public']['Tables'] &
+      Database['public']['Views'])
+  ? (Database['public']['Tables'] &
+      Database['public']['Views'])[PublicTableNameOrOptions] extends {
+      Row: infer R;
     }
     ? R
     : never
-  : never
+  : never;
 
 export type TablesInsert<
   PublicTableNameOrOptions extends
-    | keyof Database["public"]["Tables"]
+    | keyof Database['public']['Tables']
     | { schema: keyof Database },
   TableName extends PublicTableNameOrOptions extends { schema: keyof Database }
-    ? keyof Database[PublicTableNameOrOptions["schema"]]["Tables"]
+    ? keyof Database[PublicTableNameOrOptions['schema']]['Tables']
     : never = never
 > = PublicTableNameOrOptions extends { schema: keyof Database }
-  ? Database[PublicTableNameOrOptions["schema"]]["Tables"][TableName] extends {
-      Insert: infer I
+  ? Database[PublicTableNameOrOptions['schema']]['Tables'][TableName] extends {
+      Insert: infer I;
     }
     ? I
     : never
-  : PublicTableNameOrOptions extends keyof Database["public"]["Tables"]
-  ? Database["public"]["Tables"][PublicTableNameOrOptions] extends {
-      Insert: infer I
+  : PublicTableNameOrOptions extends keyof Database['public']['Tables']
+  ? Database['public']['Tables'][PublicTableNameOrOptions] extends {
+      Insert: infer I;
     }
     ? I
     : never
-  : never
+  : never;
 
 export type TablesUpdate<
   PublicTableNameOrOptions extends
-    | keyof Database["public"]["Tables"]
+    | keyof Database['public']['Tables']
     | { schema: keyof Database },
   TableName extends PublicTableNameOrOptions extends { schema: keyof Database }
-    ? keyof Database[PublicTableNameOrOptions["schema"]]["Tables"]
+    ? keyof Database[PublicTableNameOrOptions['schema']]['Tables']
     : never = never
 > = PublicTableNameOrOptions extends { schema: keyof Database }
-  ? Database[PublicTableNameOrOptions["schema"]]["Tables"][TableName] extends {
-      Update: infer U
+  ? Database[PublicTableNameOrOptions['schema']]['Tables'][TableName] extends {
+      Update: infer U;
     }
     ? U
     : never
-  : PublicTableNameOrOptions extends keyof Database["public"]["Tables"]
-  ? Database["public"]["Tables"][PublicTableNameOrOptions] extends {
-      Update: infer U
+  : PublicTableNameOrOptions extends keyof Database['public']['Tables']
+  ? Database['public']['Tables'][PublicTableNameOrOptions] extends {
+      Update: infer U;
     }
     ? U
     : never
-  : never
+  : never;
 
 export type Enums<
   PublicEnumNameOrOptions extends
-    | keyof Database["public"]["Enums"]
+    | keyof Database['public']['Enums']
     | { schema: keyof Database },
   EnumName extends PublicEnumNameOrOptions extends { schema: keyof Database }
-    ? keyof Database[PublicEnumNameOrOptions["schema"]]["Enums"]
+    ? keyof Database[PublicEnumNameOrOptions['schema']]['Enums']
     : never = never
 > = PublicEnumNameOrOptions extends { schema: keyof Database }
-  ? Database[PublicEnumNameOrOptions["schema"]]["Enums"][EnumName]
-  : PublicEnumNameOrOptions extends keyof Database["public"]["Enums"]
-  ? Database["public"]["Enums"][PublicEnumNameOrOptions]
-  : never
+  ? Database[PublicEnumNameOrOptions['schema']]['Enums'][EnumName]
+  : PublicEnumNameOrOptions extends keyof Database['public']['Enums']
+  ? Database['public']['Enums'][PublicEnumNameOrOptions]
+  : never;