diff --git a/backend/src/controller/AuthController.ts b/backend/src/controller/AuthController.ts
index d2ca83278c74c761f0dae19ce5555fdcf3ac7a4b..9fd8a727d1a0b984b2770d70ceb21a31750fc823 100644
--- a/backend/src/controller/AuthController.ts
+++ b/backend/src/controller/AuthController.ts
@@ -82,7 +82,7 @@ class AuthController {
 
     async register(req: Request, res: Response) {
         try {
-            const { name, email, password, address } = req.body;
+            const { fullname, email, username, password, role } = req.body;
 
             const user = await Users.findOne({ where: { email: email } });
 
@@ -93,20 +93,42 @@ class AuthController {
                 return;
             }
 
-            const hashedPassword = await bcrypt.hash(
-                password,
-                PASSWORD_HASH_SALT_ROUNDS,
-            );
+            // const hashedPassword = await bcrypt.hash(
+            //     password,
+            //     PASSWORD_HASH_SALT_ROUNDS,
+            // );
 
-            const newUser = {
-                name,
-                email: email.toLowerCase(),
-                password: hashedPassword,
-                address,
-            };
+            let maxId = 0;
+            if (role === "tenant" || role === "cashier") {
+                maxId = await new UsersRepo().getMaxNonTableId();
+            } else if (role === "customer") {
+                maxId = await new UsersRepo().getMaxTableId();
+            }
+
+            const newUser = new Users();
+            newUser.id = maxId + 1;
+            newUser.fullname = fullname;
+            newUser.email = email.toLowerCase();
+            newUser.username = username;
+            newUser.password = password;
+            newUser.role = role;
+
+            // const newUser = {
+            //     id: maxId,
+            //     fullname: fullname,
+            //     email: email.toLowerCase(),
+            //     username: username,
+            //     password: hashedPassword,
+            //     role: role,
+            // };
+
+            await new UsersRepo().createUser(newUser);
+            res.status(201).json({
+                status: "Created!",
+                message: "Successfully created user!",
+            });
 
-            const result = await Users.create(newUser);
-            res.send(this.generateTokenResponse(result));
+            // res.send(this.generateTokenResponse(result));
         } catch (err) {
             console.error(err);
             res.status(500).json({
diff --git a/backend/src/middleware/auth.mid.ts b/backend/src/middleware/auth.mid.ts
index 3bc451f9df22e614245c1213f83428f5525f01dc..a324609d2a82f842e2d384466e999d679df7bb75 100644
--- a/backend/src/middleware/auth.mid.ts
+++ b/backend/src/middleware/auth.mid.ts
@@ -1,5 +1,5 @@
 import { Request, Response, NextFunction } from "express";
-import { verify } from "jsonwebtoken";
+import { JwtPayload, verify } from "jsonwebtoken";
 import { UNAUTHORIZED } from "../constant/httpStatus";
 
 interface decodedToken extends Request {
@@ -18,8 +18,11 @@ export default (req: decodedToken, res: Response, next: NextFunction) => {
     }
 
     try {
-        const decoded = verify(token, process.env.JWT_SECRET as string);
-        req.user = decoded;
+        const decoded = verify(
+            token,
+            process.env.JWT_SECRET as string,
+        ) as JwtPayload;
+        req.user = decoded.user;
     } catch (error) {
         return res.status(UNAUTHORIZED).send();
     }
diff --git a/backend/src/repository/UsersRepo.ts b/backend/src/repository/UsersRepo.ts
index 5149fa009c2622e9f2ee31fe467f8a5d727e9dae..6a866c7edac114c2f7983429ee55523c58f88687 100644
--- a/backend/src/repository/UsersRepo.ts
+++ b/backend/src/repository/UsersRepo.ts
@@ -1,6 +1,7 @@
 // UsersRepo.ts
 /* eslint-disable no-unused-vars */
 import { Users } from "../model/Users";
+import { Op } from "sequelize";
 
 interface IUsersRepo {
     getAllUsers(): Promise<Users[]>;
@@ -46,6 +47,42 @@ export default class UsersRepo implements IUsersRepo {
         }
     }
 
+    async getMaxTableId(): Promise<number> {
+        try {
+            const users = await Users.findAll({ where: { role: "customer" } });
+
+            if (users.length > 0) {
+                const maxId = Math.max(...users.map((user) => user.id));
+                return maxId;
+            }
+
+            return 0;
+        } catch (error: any) {
+            throw new Error(`Error while fetching max id: ${error.message}`);
+        }
+    }
+
+    async getMaxNonTableId(): Promise<number> {
+        try {
+            const users = await Users.findAll({
+                where: {
+                    role: {
+                        [Op.or]: ["tenant", "cashier"],
+                    },
+                },
+            });
+
+            if (users.length > 0) {
+                const maxId = Math.max(...users.map((user) => user.id));
+                return maxId;
+            }
+
+            return 0;
+        } catch (error: any) {
+            throw new Error(`Error while fetching max id: ${error.message}`);
+        }
+    }
+
     async createUser(user: Users): Promise<void> {
         try {
             await Users.create({
diff --git a/backend/src/router/AuthRouter.ts b/backend/src/router/AuthRouter.ts
index e270b0c8af8fd6b2f41c2a725a29e97eedf8f296..46b499c0a2fa5f1b8dd1063fab18ddd357b1a465 100644
--- a/backend/src/router/AuthRouter.ts
+++ b/backend/src/router/AuthRouter.ts
@@ -2,13 +2,13 @@
 import BaseRoutes from "./base/BaseRouter";
 import AuthController from "../controller/AuthController";
 import validate from "../helper/validate";
-import { createUserSchema /* loginUserSchema */ } from "../schema/UsersSchema";
+import { createUserSchema, loginUserSchema } from "../schema/UsersSchema";
 
 class AuthRouter extends BaseRoutes {
     public routes(): void {
         this.router.post(
             "/login",
-            // validate(loginUserSchema),
+            validate(loginUserSchema),
             AuthController.login,
         );
         this.router.post(
diff --git a/backend/src/router/AuthRouterstashed.ts b/backend/src/router/AuthRouterstashed.ts
index aac18d347c58c078a0b3559b24ffbbd0c409a2a2..e29ceb705775b94472437f5746b3862939603c54 100644
--- a/backend/src/router/AuthRouterstashed.ts
+++ b/backend/src/router/AuthRouterstashed.ts
@@ -1,6 +1,7 @@
 import { Router, Request, Response } from "express";
 import { BAD_REQUEST } from "../constant/httpStatus";
 import { Users } from "../model/Users";
+import UsersRepo from "../repository/UsersRepo";
 // import auth from "../middleware/auth.mid.js";
 import handler from "express-async-handler";
 import jwt from "jsonwebtoken";
@@ -38,7 +39,7 @@ router.post(
 router.post(
     "/register",
     handler(async (req: Request, res: Response) => {
-        const { name, email, password, address } = req.body;
+        const { fullname, email, username, password, role } = req.body;
 
         const user = await Users.findOne({ where: { email: email } });
 
@@ -52,11 +53,20 @@ router.post(
             PASSWORD_HASH_SALT_ROUNDS,
         );
 
+        let maxId: number;
+        if (role === "customer") {
+            maxId = (await new UsersRepo().getMaxTableId()) + 1;
+        } else {
+            maxId = (await new UsersRepo().getMaxNonTableId()) + 1;
+        }
+
         const newUser = {
-            name,
-            email: email.toLowerCase(),
+            id: maxId,
+            fullname: fullname,
+            email: email,
+            username: username,
             password: hashedPassword,
-            address,
+            role: role,
         };
 
         const result = await Users.create(newUser);
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 6d37a5f7c902d68c3409ae1382390f116b20a116..57b62aa0a31bc1585d6902c64dbfa7813f4edb3a 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -26,15 +26,12 @@
                 "react-toastify": "^9.1.3"
             },
             "devDependencies": {
-<<<<<<< HEAD
                 "@babel/preset-typescript": "^7.23.3",
                 "@jest/globals": "^29.7.0",
                 "@testing-library/jest-dom": "^6.1.4",
                 "@testing-library/react": "^14.1.2",
-                "@types/jest": "^29.5.10",
-=======
                 "@types/crypto-js": "^4.2.1",
->>>>>>> cd14ccc80038e5ec620f4f13cc1d5420599e0ed5
+                "@types/jest": "^29.5.10",
                 "@types/react": "^18.2.15",
                 "@types/react-dom": "^18.2.7",
                 "@typescript-eslint/eslint-plugin": "^6.0.0",
@@ -786,342 +783,6 @@
             "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==",
             "dev": true
         },
-        "node_modules/@esbuild/android-arm": {
-            "version": "0.18.20",
-            "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz",
-            "integrity": "sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==",
-            "cpu": [
-                "arm"
-            ],
-            "dev": true,
-            "optional": true,
-            "os": [
-                "android"
-            ],
-            "engines": {
-                "node": ">=12"
-            }
-        },
-        "node_modules/@esbuild/android-arm64": {
-            "version": "0.18.20",
-            "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz",
-            "integrity": "sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==",
-            "cpu": [
-                "arm64"
-            ],
-            "dev": true,
-            "optional": true,
-            "os": [
-                "android"
-            ],
-            "engines": {
-                "node": ">=12"
-            }
-        },
-        "node_modules/@esbuild/android-x64": {
-            "version": "0.18.20",
-            "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.18.20.tgz",
-            "integrity": "sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==",
-            "cpu": [
-                "x64"
-            ],
-            "dev": true,
-            "optional": true,
-            "os": [
-                "android"
-            ],
-            "engines": {
-                "node": ">=12"
-            }
-        },
-        "node_modules/@esbuild/darwin-arm64": {
-            "version": "0.18.20",
-            "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.18.20.tgz",
-            "integrity": "sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==",
-            "cpu": [
-                "arm64"
-            ],
-            "dev": true,
-            "optional": true,
-            "os": [
-                "darwin"
-            ],
-            "engines": {
-                "node": ">=12"
-            }
-        },
-        "node_modules/@esbuild/darwin-x64": {
-            "version": "0.18.20",
-            "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.18.20.tgz",
-            "integrity": "sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==",
-            "cpu": [
-                "x64"
-            ],
-            "dev": true,
-            "optional": true,
-            "os": [
-                "darwin"
-            ],
-            "engines": {
-                "node": ">=12"
-            }
-        },
-        "node_modules/@esbuild/freebsd-arm64": {
-            "version": "0.18.20",
-            "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.20.tgz",
-            "integrity": "sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==",
-            "cpu": [
-                "arm64"
-            ],
-            "dev": true,
-            "optional": true,
-            "os": [
-                "freebsd"
-            ],
-            "engines": {
-                "node": ">=12"
-            }
-        },
-        "node_modules/@esbuild/freebsd-x64": {
-            "version": "0.18.20",
-            "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.18.20.tgz",
-            "integrity": "sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==",
-            "cpu": [
-                "x64"
-            ],
-            "dev": true,
-            "optional": true,
-            "os": [
-                "freebsd"
-            ],
-            "engines": {
-                "node": ">=12"
-            }
-        },
-        "node_modules/@esbuild/linux-arm": {
-            "version": "0.18.20",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.18.20.tgz",
-            "integrity": "sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg==",
-            "cpu": [
-                "arm"
-            ],
-            "dev": true,
-            "optional": true,
-            "os": [
-                "linux"
-            ],
-            "engines": {
-                "node": ">=12"
-            }
-        },
-        "node_modules/@esbuild/linux-arm64": {
-            "version": "0.18.20",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.18.20.tgz",
-            "integrity": "sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==",
-            "cpu": [
-                "arm64"
-            ],
-            "dev": true,
-            "optional": true,
-            "os": [
-                "linux"
-            ],
-            "engines": {
-                "node": ">=12"
-            }
-        },
-        "node_modules/@esbuild/linux-ia32": {
-            "version": "0.18.20",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.18.20.tgz",
-            "integrity": "sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA==",
-            "cpu": [
-                "ia32"
-            ],
-            "dev": true,
-            "optional": true,
-            "os": [
-                "linux"
-            ],
-            "engines": {
-                "node": ">=12"
-            }
-        },
-        "node_modules/@esbuild/linux-loong64": {
-            "version": "0.18.20",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.18.20.tgz",
-            "integrity": "sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==",
-            "cpu": [
-                "loong64"
-            ],
-            "dev": true,
-            "optional": true,
-            "os": [
-                "linux"
-            ],
-            "engines": {
-                "node": ">=12"
-            }
-        },
-        "node_modules/@esbuild/linux-mips64el": {
-            "version": "0.18.20",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.18.20.tgz",
-            "integrity": "sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ==",
-            "cpu": [
-                "mips64el"
-            ],
-            "dev": true,
-            "optional": true,
-            "os": [
-                "linux"
-            ],
-            "engines": {
-                "node": ">=12"
-            }
-        },
-        "node_modules/@esbuild/linux-ppc64": {
-            "version": "0.18.20",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.18.20.tgz",
-            "integrity": "sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA==",
-            "cpu": [
-                "ppc64"
-            ],
-            "dev": true,
-            "optional": true,
-            "os": [
-                "linux"
-            ],
-            "engines": {
-                "node": ">=12"
-            }
-        },
-        "node_modules/@esbuild/linux-riscv64": {
-            "version": "0.18.20",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.18.20.tgz",
-            "integrity": "sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A==",
-            "cpu": [
-                "riscv64"
-            ],
-            "dev": true,
-            "optional": true,
-            "os": [
-                "linux"
-            ],
-            "engines": {
-                "node": ">=12"
-            }
-        },
-        "node_modules/@esbuild/linux-s390x": {
-            "version": "0.18.20",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.18.20.tgz",
-            "integrity": "sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ==",
-            "cpu": [
-                "s390x"
-            ],
-            "dev": true,
-            "optional": true,
-            "os": [
-                "linux"
-            ],
-            "engines": {
-                "node": ">=12"
-            }
-        },
-        "node_modules/@esbuild/linux-x64": {
-            "version": "0.18.20",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.18.20.tgz",
-            "integrity": "sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==",
-            "cpu": [
-                "x64"
-            ],
-            "dev": true,
-            "optional": true,
-            "os": [
-                "linux"
-            ],
-            "engines": {
-                "node": ">=12"
-            }
-        },
-        "node_modules/@esbuild/netbsd-x64": {
-            "version": "0.18.20",
-            "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.18.20.tgz",
-            "integrity": "sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A==",
-            "cpu": [
-                "x64"
-            ],
-            "dev": true,
-            "optional": true,
-            "os": [
-                "netbsd"
-            ],
-            "engines": {
-                "node": ">=12"
-            }
-        },
-        "node_modules/@esbuild/openbsd-x64": {
-            "version": "0.18.20",
-            "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.18.20.tgz",
-            "integrity": "sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg==",
-            "cpu": [
-                "x64"
-            ],
-            "dev": true,
-            "optional": true,
-            "os": [
-                "openbsd"
-            ],
-            "engines": {
-                "node": ">=12"
-            }
-        },
-        "node_modules/@esbuild/sunos-x64": {
-            "version": "0.18.20",
-            "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.18.20.tgz",
-            "integrity": "sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ==",
-            "cpu": [
-                "x64"
-            ],
-            "dev": true,
-            "optional": true,
-            "os": [
-                "sunos"
-            ],
-            "engines": {
-                "node": ">=12"
-            }
-        },
-        "node_modules/@esbuild/win32-arm64": {
-            "version": "0.18.20",
-            "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.18.20.tgz",
-            "integrity": "sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg==",
-            "cpu": [
-                "arm64"
-            ],
-            "dev": true,
-            "optional": true,
-            "os": [
-                "win32"
-            ],
-            "engines": {
-                "node": ">=12"
-            }
-        },
-        "node_modules/@esbuild/win32-ia32": {
-            "version": "0.18.20",
-            "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.18.20.tgz",
-            "integrity": "sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==",
-            "cpu": [
-                "ia32"
-            ],
-            "dev": true,
-            "optional": true,
-            "os": [
-                "win32"
-            ],
-            "engines": {
-                "node": ">=12"
-            }
-        },
         "node_modules/@esbuild/win32-x64": {
             "version": "0.18.20",
             "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.18.20.tgz",
@@ -1620,23 +1281,10 @@
                 "node": ">=7.0.0"
             }
         },
-<<<<<<< HEAD
         "node_modules/@jest/core/node_modules/color-name": {
             "version": "1.1.4",
             "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
             "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-=======
-        "node_modules/@types/crypto-js": {
-            "version": "4.2.1",
-            "resolved": "https://registry.npmjs.org/@types/crypto-js/-/crypto-js-4.2.1.tgz",
-            "integrity": "sha512-FSPGd9+OcSok3RsM0UZ/9fcvMOXJ1ENE/ZbLfOPlBWj7BgXtEAM8VYfTtT760GiLbQIMoVozwVuisjvsVwqYWw==",
-            "dev": true
-        },
-        "node_modules/@types/json-schema": {
-            "version": "7.0.15",
-            "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
-            "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
->>>>>>> cd14ccc80038e5ec620f4f13cc1d5420599e0ed5
             "dev": true
         },
         "node_modules/@jest/core/node_modules/has-flag": {
@@ -1648,6 +1296,38 @@
                 "node": ">=8"
             }
         },
+        "node_modules/@jest/core/node_modules/pretty-format": {
+            "version": "29.7.0",
+            "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
+            "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
+            "dev": true,
+            "dependencies": {
+                "@jest/schemas": "^29.6.3",
+                "ansi-styles": "^5.0.0",
+                "react-is": "^18.0.0"
+            },
+            "engines": {
+                "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+            }
+        },
+        "node_modules/@jest/core/node_modules/pretty-format/node_modules/ansi-styles": {
+            "version": "5.2.0",
+            "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+            "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+            "dev": true,
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+            }
+        },
+        "node_modules/@jest/core/node_modules/react-is": {
+            "version": "18.2.0",
+            "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+            "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
+            "dev": true
+        },
         "node_modules/@jest/core/node_modules/supports-color": {
             "version": "7.2.0",
             "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -2355,6 +2035,15 @@
                 "url": "https://github.com/chalk/ansi-styles?sponsor=1"
             }
         },
+        "node_modules/@testing-library/dom/node_modules/aria-query": {
+            "version": "5.1.3",
+            "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.1.3.tgz",
+            "integrity": "sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==",
+            "dev": true,
+            "dependencies": {
+                "deep-equal": "^2.0.5"
+            }
+        },
         "node_modules/@testing-library/dom/node_modules/chalk": {
             "version": "4.1.2",
             "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -2398,38 +2087,6 @@
                 "node": ">=8"
             }
         },
-        "node_modules/@testing-library/dom/node_modules/pretty-format": {
-            "version": "27.5.1",
-            "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
-            "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
-            "dev": true,
-            "dependencies": {
-                "ansi-regex": "^5.0.1",
-                "ansi-styles": "^5.0.0",
-                "react-is": "^17.0.1"
-            },
-            "engines": {
-                "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
-            }
-        },
-        "node_modules/@testing-library/dom/node_modules/pretty-format/node_modules/ansi-styles": {
-            "version": "5.2.0",
-            "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
-            "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
-            "dev": true,
-            "engines": {
-                "node": ">=10"
-            },
-            "funding": {
-                "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-            }
-        },
-        "node_modules/@testing-library/dom/node_modules/react-is": {
-            "version": "17.0.2",
-            "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-            "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
-            "dev": true
-        },
         "node_modules/@testing-library/dom/node_modules/supports-color": {
             "version": "7.2.0",
             "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -2615,6 +2272,12 @@
                 "@babel/types": "^7.20.7"
             }
         },
+        "node_modules/@types/crypto-js": {
+            "version": "4.2.1",
+            "resolved": "https://registry.npmjs.org/@types/crypto-js/-/crypto-js-4.2.1.tgz",
+            "integrity": "sha512-FSPGd9+OcSok3RsM0UZ/9fcvMOXJ1ENE/ZbLfOPlBWj7BgXtEAM8VYfTtT760GiLbQIMoVozwVuisjvsVwqYWw==",
+            "dev": true
+        },
         "node_modules/@types/graceful-fs": {
             "version": "4.1.9",
             "resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.9.tgz",
@@ -2658,6 +2321,38 @@
                 "pretty-format": "^29.0.0"
             }
         },
+        "node_modules/@types/jest/node_modules/ansi-styles": {
+            "version": "5.2.0",
+            "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+            "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+            "dev": true,
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+            }
+        },
+        "node_modules/@types/jest/node_modules/pretty-format": {
+            "version": "29.7.0",
+            "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
+            "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
+            "dev": true,
+            "dependencies": {
+                "@jest/schemas": "^29.6.3",
+                "ansi-styles": "^5.0.0",
+                "react-is": "^18.0.0"
+            },
+            "engines": {
+                "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+            }
+        },
+        "node_modules/@types/jest/node_modules/react-is": {
+            "version": "18.2.0",
+            "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+            "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
+            "dev": true
+        },
         "node_modules/@types/json-schema": {
             "version": "7.0.15",
             "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -3101,12 +2796,12 @@
             }
         },
         "node_modules/aria-query": {
-            "version": "5.1.3",
-            "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.1.3.tgz",
-            "integrity": "sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==",
+            "version": "5.3.0",
+            "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
+            "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
             "dev": true,
             "dependencies": {
-                "deep-equal": "^2.0.5"
+                "dequal": "^2.0.3"
             }
         },
         "node_modules/array-buffer-byte-length": {
@@ -3993,6 +3688,11 @@
                 "node": ">= 8"
             }
         },
+        "node_modules/crypto-js": {
+            "version": "4.2.0",
+            "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.2.0.tgz",
+            "integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q=="
+        },
         "node_modules/css.escape": {
             "version": "1.5.1",
             "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
@@ -4264,9 +3964,9 @@
             }
         },
         "node_modules/emoji-regex": {
-            "version": "8.0.0",
-            "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-            "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+            "version": "9.2.2",
+            "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+            "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
             "dev": true
         },
         "node_modules/enhanced-resolve": {
@@ -4769,21 +4469,6 @@
                 "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8"
             }
         },
-        "node_modules/eslint-plugin-jsx-a11y/node_modules/aria-query": {
-            "version": "5.3.0",
-            "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
-            "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
-            "dev": true,
-            "dependencies": {
-                "dequal": "^2.0.3"
-            }
-        },
-        "node_modules/eslint-plugin-jsx-a11y/node_modules/emoji-regex": {
-            "version": "9.2.2",
-            "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
-            "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
-            "dev": true
-        },
         "node_modules/eslint-plugin-react": {
             "version": "7.33.2",
             "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.33.2.tgz",
@@ -6462,6 +6147,38 @@
                 "node": ">=8"
             }
         },
+        "node_modules/jest-circus/node_modules/pretty-format": {
+            "version": "29.7.0",
+            "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
+            "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
+            "dev": true,
+            "dependencies": {
+                "@jest/schemas": "^29.6.3",
+                "ansi-styles": "^5.0.0",
+                "react-is": "^18.0.0"
+            },
+            "engines": {
+                "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+            }
+        },
+        "node_modules/jest-circus/node_modules/pretty-format/node_modules/ansi-styles": {
+            "version": "5.2.0",
+            "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+            "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+            "dev": true,
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+            }
+        },
+        "node_modules/jest-circus/node_modules/react-is": {
+            "version": "18.2.0",
+            "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+            "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
+            "dev": true
+        },
         "node_modules/jest-circus/node_modules/supports-color": {
             "version": "7.2.0",
             "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -6680,6 +6397,38 @@
                 "node": ">=8"
             }
         },
+        "node_modules/jest-config/node_modules/pretty-format": {
+            "version": "29.7.0",
+            "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
+            "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
+            "dev": true,
+            "dependencies": {
+                "@jest/schemas": "^29.6.3",
+                "ansi-styles": "^5.0.0",
+                "react-is": "^18.0.0"
+            },
+            "engines": {
+                "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+            }
+        },
+        "node_modules/jest-config/node_modules/pretty-format/node_modules/ansi-styles": {
+            "version": "5.2.0",
+            "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+            "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+            "dev": true,
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+            }
+        },
+        "node_modules/jest-config/node_modules/react-is": {
+            "version": "18.2.0",
+            "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+            "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
+            "dev": true
+        },
         "node_modules/jest-config/node_modules/supports-color": {
             "version": "7.2.0",
             "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -6692,7 +6441,6 @@
                 "node": ">=8"
             }
         },
-<<<<<<< HEAD
         "node_modules/jest-diff": {
             "version": "29.7.0",
             "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-29.7.0.tgz",
@@ -6703,19 +6451,6 @@
                 "diff-sequences": "^29.6.3",
                 "jest-get-type": "^29.6.3",
                 "pretty-format": "^29.7.0"
-=======
-        "node_modules/crypto-js": {
-            "version": "4.2.0",
-            "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.2.0.tgz",
-            "integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q=="
-        },
-        "node_modules/cssesc": {
-            "version": "3.0.0",
-            "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
-            "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-            "bin": {
-                "cssesc": "bin/cssesc"
->>>>>>> cd14ccc80038e5ec620f4f13cc1d5420599e0ed5
             },
             "engines": {
                 "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
@@ -6764,21 +6499,53 @@
                 "node": ">=7.0.0"
             }
         },
-        "node_modules/jest-diff/node_modules/color-name": {
-            "version": "1.1.4",
-            "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-            "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-            "dev": true
-        },
-        "node_modules/jest-diff/node_modules/has-flag": {
-            "version": "4.0.0",
-            "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-            "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+        "node_modules/jest-diff/node_modules/color-name": {
+            "version": "1.1.4",
+            "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+            "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+            "dev": true
+        },
+        "node_modules/jest-diff/node_modules/has-flag": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+            "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+            "dev": true,
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/jest-diff/node_modules/pretty-format": {
+            "version": "29.7.0",
+            "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
+            "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
+            "dev": true,
+            "dependencies": {
+                "@jest/schemas": "^29.6.3",
+                "ansi-styles": "^5.0.0",
+                "react-is": "^18.0.0"
+            },
+            "engines": {
+                "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+            }
+        },
+        "node_modules/jest-diff/node_modules/pretty-format/node_modules/ansi-styles": {
+            "version": "5.2.0",
+            "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+            "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
             "dev": true,
             "engines": {
-                "node": ">=8"
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/ansi-styles?sponsor=1"
             }
         },
+        "node_modules/jest-diff/node_modules/react-is": {
+            "version": "18.2.0",
+            "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+            "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
+            "dev": true
+        },
         "node_modules/jest-diff/node_modules/supports-color": {
             "version": "7.2.0",
             "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -6877,6 +6644,38 @@
                 "node": ">=8"
             }
         },
+        "node_modules/jest-each/node_modules/pretty-format": {
+            "version": "29.7.0",
+            "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
+            "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
+            "dev": true,
+            "dependencies": {
+                "@jest/schemas": "^29.6.3",
+                "ansi-styles": "^5.0.0",
+                "react-is": "^18.0.0"
+            },
+            "engines": {
+                "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+            }
+        },
+        "node_modules/jest-each/node_modules/pretty-format/node_modules/ansi-styles": {
+            "version": "5.2.0",
+            "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+            "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+            "dev": true,
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+            }
+        },
+        "node_modules/jest-each/node_modules/react-is": {
+            "version": "18.2.0",
+            "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+            "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
+            "dev": true
+        },
         "node_modules/jest-each/node_modules/supports-color": {
             "version": "7.2.0",
             "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -6953,6 +6752,38 @@
                 "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
             }
         },
+        "node_modules/jest-leak-detector/node_modules/ansi-styles": {
+            "version": "5.2.0",
+            "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+            "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+            "dev": true,
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+            }
+        },
+        "node_modules/jest-leak-detector/node_modules/pretty-format": {
+            "version": "29.7.0",
+            "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
+            "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
+            "dev": true,
+            "dependencies": {
+                "@jest/schemas": "^29.6.3",
+                "ansi-styles": "^5.0.0",
+                "react-is": "^18.0.0"
+            },
+            "engines": {
+                "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+            }
+        },
+        "node_modules/jest-leak-detector/node_modules/react-is": {
+            "version": "18.2.0",
+            "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+            "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
+            "dev": true
+        },
         "node_modules/jest-matcher-utils": {
             "version": "29.7.0",
             "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-29.7.0.tgz",
@@ -7026,6 +6857,38 @@
                 "node": ">=8"
             }
         },
+        "node_modules/jest-matcher-utils/node_modules/pretty-format": {
+            "version": "29.7.0",
+            "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
+            "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
+            "dev": true,
+            "dependencies": {
+                "@jest/schemas": "^29.6.3",
+                "ansi-styles": "^5.0.0",
+                "react-is": "^18.0.0"
+            },
+            "engines": {
+                "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+            }
+        },
+        "node_modules/jest-matcher-utils/node_modules/pretty-format/node_modules/ansi-styles": {
+            "version": "5.2.0",
+            "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+            "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+            "dev": true,
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+            }
+        },
+        "node_modules/jest-matcher-utils/node_modules/react-is": {
+            "version": "18.2.0",
+            "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+            "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
+            "dev": true
+        },
         "node_modules/jest-matcher-utils/node_modules/supports-color": {
             "version": "7.2.0",
             "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -7116,6 +6979,38 @@
                 "node": ">=8"
             }
         },
+        "node_modules/jest-message-util/node_modules/pretty-format": {
+            "version": "29.7.0",
+            "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
+            "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
+            "dev": true,
+            "dependencies": {
+                "@jest/schemas": "^29.6.3",
+                "ansi-styles": "^5.0.0",
+                "react-is": "^18.0.0"
+            },
+            "engines": {
+                "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+            }
+        },
+        "node_modules/jest-message-util/node_modules/pretty-format/node_modules/ansi-styles": {
+            "version": "5.2.0",
+            "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+            "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+            "dev": true,
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+            }
+        },
+        "node_modules/jest-message-util/node_modules/react-is": {
+            "version": "18.2.0",
+            "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+            "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
+            "dev": true
+        },
         "node_modules/jest-message-util/node_modules/supports-color": {
             "version": "7.2.0",
             "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -7565,6 +7460,38 @@
                 "node": ">=8"
             }
         },
+        "node_modules/jest-snapshot/node_modules/pretty-format": {
+            "version": "29.7.0",
+            "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
+            "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
+            "dev": true,
+            "dependencies": {
+                "@jest/schemas": "^29.6.3",
+                "ansi-styles": "^5.0.0",
+                "react-is": "^18.0.0"
+            },
+            "engines": {
+                "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+            }
+        },
+        "node_modules/jest-snapshot/node_modules/pretty-format/node_modules/ansi-styles": {
+            "version": "5.2.0",
+            "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+            "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+            "dev": true,
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+            }
+        },
+        "node_modules/jest-snapshot/node_modules/react-is": {
+            "version": "18.2.0",
+            "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+            "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
+            "dev": true
+        },
         "node_modules/jest-snapshot/node_modules/supports-color": {
             "version": "7.2.0",
             "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -7751,6 +7678,38 @@
                 "node": ">=8"
             }
         },
+        "node_modules/jest-validate/node_modules/pretty-format": {
+            "version": "29.7.0",
+            "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
+            "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
+            "dev": true,
+            "dependencies": {
+                "@jest/schemas": "^29.6.3",
+                "ansi-styles": "^5.0.0",
+                "react-is": "^18.0.0"
+            },
+            "engines": {
+                "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+            }
+        },
+        "node_modules/jest-validate/node_modules/pretty-format/node_modules/ansi-styles": {
+            "version": "5.2.0",
+            "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+            "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+            "dev": true,
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+            }
+        },
+        "node_modules/jest-validate/node_modules/react-is": {
+            "version": "18.2.0",
+            "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+            "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
+            "dev": true
+        },
         "node_modules/jest-validate/node_modules/supports-color": {
             "version": "7.2.0",
             "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -8968,17 +8927,17 @@
             }
         },
         "node_modules/pretty-format": {
-            "version": "29.7.0",
-            "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
-            "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
+            "version": "27.5.1",
+            "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
+            "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
             "dev": true,
             "dependencies": {
-                "@jest/schemas": "^29.6.3",
+                "ansi-regex": "^5.0.1",
                 "ansi-styles": "^5.0.0",
-                "react-is": "^18.0.0"
+                "react-is": "^17.0.1"
             },
             "engines": {
-                "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+                "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
             }
         },
         "node_modules/pretty-format/node_modules/ansi-styles": {
@@ -8993,6 +8952,12 @@
                 "url": "https://github.com/chalk/ansi-styles?sponsor=1"
             }
         },
+        "node_modules/pretty-format/node_modules/react-is": {
+            "version": "17.0.2",
+            "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+            "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+            "dev": true
+        },
         "node_modules/prompts": {
             "version": "2.4.2",
             "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.2.tgz",
@@ -9006,33 +8971,6 @@
                 "node": ">= 6"
             }
         },
-        "node_modules/prop-types": {
-            "version": "15.8.1",
-            "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
-            "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-            "dev": true,
-            "dependencies": {
-                "loose-envify": "^1.4.0",
-                "object-assign": "^4.1.1",
-                "react-is": "^16.13.1"
-            }
-        },
-        "node_modules/prop-types/node_modules/react-is": {
-            "version": "16.13.1",
-            "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-            "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-            "dev": true
-        },
-        "node_modules/prop-types": {
-            "version": "15.8.1",
-            "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
-            "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-            "dependencies": {
-                "loose-envify": "^1.4.0",
-                "object-assign": "^4.1.1",
-                "react-is": "^16.13.1"
-            }
-        },
         "node_modules/prop-types": {
             "version": "15.8.1",
             "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -9156,17 +9094,6 @@
                 "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
             }
         },
-        "node_modules/react-is": {
-            "version": "18.2.0",
-            "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
-            "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
-            "dev": true
-        },
-        "node_modules/react-is": {
-            "version": "16.13.1",
-            "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-            "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
-        },
         "node_modules/react-is": {
             "version": "16.13.1",
             "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -9699,6 +9626,12 @@
                 "node": ">=8"
             }
         },
+        "node_modules/string-width/node_modules/emoji-regex": {
+            "version": "8.0.0",
+            "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+            "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+            "dev": true
+        },
         "node_modules/string.prototype.matchall": {
             "version": "4.0.10",
             "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.10.tgz",
diff --git a/frontend/src/AppRoutes.tsx b/frontend/src/AppRoutes.tsx
index bb20f3582147ec084811e09575485f8bfe3084e1..155beb3fd551c3119b2244c5292d9df5f9145d8e 100644
--- a/frontend/src/AppRoutes.tsx
+++ b/frontend/src/AppRoutes.tsx
@@ -24,10 +24,10 @@ export default function AppRoutes() {
         <Routes>
             <Route path="/" element={<Homepage />} />
             <Route path="/role" element={<ChooseRolePage />} />
-            <Route path="/login" element={<LoginPage />} />
+            <Route path="/login/:role" element={<LoginPage />} />
             <Route path="/login/customer" element={<RegisterTable />} />
-            <Route path="/register/" element={<RegisterPage />} />
-            <Route path="/register/tenant" element={<SignUpTenant />} />
+            <Route path="/register/:role" element={<RegisterPage />} />
+            <Route path="/register/tenant/data" element={<SignUpTenant />} />
             <Route path="/tenant/:tenantid" element={<TenantInfo />} />
             <Route path="/cart" element={<ShoppingCart />} />
             <Route path="/order/list/:tableid" element={<OrderList />} />
diff --git a/frontend/src/components/Input.tsx b/frontend/src/components/Input.tsx
index 8f9730eebabb74e53c38adcaadd27b577d2663eb..ec67c5d42322d6338893f93f464accef85f5593a 100644
--- a/frontend/src/components/Input.tsx
+++ b/frontend/src/components/Input.tsx
@@ -17,26 +17,8 @@ function Input(
     { label, type, defaultValue, onChange, name, error }: InputProps,
     ref: any,
 ) {
-    const getErrorMessages = () => {
-        console.log(error);
-        if (!error) return;
-        if (error.message) return error.message;
-        // default
-        console.log(error);
-        switch (error.type) {
-            case "required":
-                return "This field is required";
-            case "minLength":
-                return `This field must be at least ${error.types.minLength} characters long`;
-            case "maxLength":
-                return `This field must be at most ${error.types.maxLength} characters long`;
-            default:
-                return "Invalid input";
-        }
-    };
-
     return (
-        <InputContainer label={label}>
+        <InputContainer label={label} error={error}>
             <input
                 className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5"
                 defaultValue={defaultValue}
@@ -46,11 +28,6 @@ function Input(
                 name={name}
                 onChange={onChange}
             />
-            {error && (
-                <div className="flex justify-center items-center absolute top-0 right-4 h-full w-48 text-red-500 text-center text-sm">
-                    {getErrorMessages()}
-                </div>
-            )}
         </InputContainer>
     );
 }
diff --git a/frontend/src/components/InputContainer.tsx b/frontend/src/components/InputContainer.tsx
index af8cc4ff9c3ce4f25c2573a94422f39c12351e96..74f8c28ee57491bed7b2baa3b50a8f3d721e8971 100644
--- a/frontend/src/components/InputContainer.tsx
+++ b/frontend/src/components/InputContainer.tsx
@@ -3,17 +3,43 @@ import React from "react";
 interface InputContainerProps {
     label: string;
     children: React.ReactNode;
+    error: any;
 }
 
 export const InputContainer: React.FC<InputContainerProps> = ({
     label,
     children,
+    error,
 }) => {
+    const getErrorMessages = () => {
+        console.log(error);
+        if (!error) return;
+        if (error.message) return error.message;
+        // default
+        console.log(error);
+        switch (error.type) {
+            case "required":
+                return "This field is required";
+            case "minLength":
+                return `This field must be at least ${error.types.minLength} characters long`;
+            case "maxLength":
+                return `This field must be at most ${error.types.maxLength} characters long`;
+            default:
+                return "Invalid input";
+        }
+    };
     return (
         <div>
-            <label className="block mb-2 text-md font-medium text-mealshub-blue">
-                {label}
-            </label>
+            <div className="flex justify-between">
+                <label className="block mb-2 text-md font-medium text-mealshub-blue">
+                    {label}
+                </label>
+                {error && (
+                    <div className="flex justify-center items-center top-0 right-4 w-48 text-red-500 text-center text-sm">
+                        {getErrorMessages()}
+                    </div>
+                )}
+            </div>
             <div className="px-2 h-10 flex items-center">{children}</div>
         </div>
     );
diff --git a/frontend/src/components/ProductCard.tsx b/frontend/src/components/ProductCard.tsx
index 574345856dfd3f01b5d2dc6b3294ab26e12d8b87..b3af0d26b159ff7b0c78abd8186efcd590c67ed7 100644
--- a/frontend/src/components/ProductCard.tsx
+++ b/frontend/src/components/ProductCard.tsx
@@ -10,7 +10,7 @@ type ProductCardProps = {
     description: string;
     price: number;
     id_tenant: number;
-}
+};
 
 interface Product {
     id: number;
@@ -18,22 +18,60 @@ interface Product {
 }
 
 export default function ProductCard({ data }: { data: ProductCardProps[] }) {
-    const { getItemQuantity, increaseItemQuantity, removeItem, cartItems } = useShoppingCart();
+    const { getItemQuantity, increaseItemQuantity, removeItem, cartItems } =
+        useShoppingCart();
 
-    const productlist = data.map(({ id, image, name, description, price, id_tenant }) => {
-        const [isAdded, setIsAdded] = useLocalStorage<boolean>(`product-${id}`, false);
+    const productlist = data.map(
+        ({ id, image, name, description, price, id_tenant }) => {
+            const [isAdded, setIsAdded] = useLocalStorage<boolean>(
+                `product-${id}`,
+                false,
+            );
 
         const [productData, setProductData] = useState<Product[]>([]);
 
-        const getProductData = async () => {
-            const productResponse = await Axios.get("http://localhost:8000/products");
-
-            const productData = productResponse.data.data;
-
-            const result = productData.map((product: Product) => {
-                return {
-                    id: product.id,
-                    id_tenant: product.id_tenant
+            const getProductData = async () => {
+                const productResponse = await Axios.get(
+                    "http://localhost:8000/products",
+                );
+
+                const productData = productResponse.data.data;
+
+                const result = productData.map((product: Product) => {
+                    return {
+                        id: product.id,
+                        id_tenant: product.id_tenant,
+                    };
+                });
+
+                setProductData(result);
+            };
+
+            useEffect(() => {
+                getProductData();
+            }, []);
+
+            console.log(productData);
+
+            useEffect(() => {
+                const quantity = getItemQuantity(id);
+                setIsAdded(quantity > 0);
+            }, [getItemQuantity, id, setIsAdded]);
+
+            const handleClick = () => {
+                if (cartItems.length > 0) {
+                    const cartItem = cartItems[0];
+                    const cartTenantId =
+                        cartItem &&
+                        productData.find(
+                            (product: Product) => product.id === cartItem.id,
+                        )?.id_tenant;
+                    if (cartTenantId !== id_tenant) {
+                        alert(
+                            "You can't add items from different tenants to the cart!",
+                        );
+                        return;
+                    }
                 }
             });
 
@@ -70,35 +108,54 @@ export default function ProductCard({ data }: { data: ProductCardProps[] }) {
             setIsAdded(!isAdded);
         };
 
-        const priceidr = price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
-
-        return (
-            <div key={id} className="flex bg-white justify-center items-center border-t border-gray-300 py-10 md:flex-row mx-16">
-                <div className="flex flex-row w-full leading-normal">
-                    <div className="flex flex-col w-full">
-                        <h5 className="mb-4 text-2xl font-bold tracking-tight text-gray-900 w-5/6">{name}</h5>
-                        <p className="my-4 font-normal text-lg text-gray-700 w-5/6">{description}</p>
-                        <p className="mt-4 font-normal text-lg text-gray-500 w-5/6">Rp {priceidr},00</p>
-                    </div>
-                    <div className="flex flex-col justify-center items-center w-1/4 full">
-                        <div className="flex flex-row items-center h-36 w-36 rounded-3xl md:h-36 md:w-36 md:rounded-3xl mb-4">
-                            <img src={image} alt={name} className='object-cover h-full w-full rounded-3xl'>
-                            </img>
+            const priceidr = price
+                .toString()
+                .replace(/\B(?=(\d{3})+(?!\d))/g, ".");
+
+            return (
+                <div
+                    key={id}
+                    className="flex bg-white justify-center items-center border-t border-gray-300 py-10 md:flex-row mx-16"
+                >
+                    <div className="flex flex-row w-full leading-normal">
+                        <div className="flex flex-col w-full">
+                            <h5 className="mb-4 text-2xl font-bold tracking-tight text-gray-900 w-5/6">
+                                {name}
+                            </h5>
+                            <p className="my-4 font-normal text-lg text-gray-700 w-5/6">
+                                {description}
+                            </p>
+                            <p className="mt-4 font-normal text-lg text-gray-500 w-5/6">
+                                Rp {priceidr},00
+                            </p>
                         </div>
-                        <div className="flex flex-row items-center">
-                            <button
-                                type="button"
-                                className={`${isAdded ? 'text-mealshub-red hover:text-white border-2 border-mealshub-red hover:bg-mealshub-red' : 'text-white bg-mealshub-red hover:text-mealshub-red border-2 border-mealshub-red hover:bg-white'} font-bold text-lg rounded-full text-sm px-5 py-2.5 text-center`}
-                                onClick={handleClick}
-                            >
-                                {isAdded ? "Added" : "Add to Cart"}
-                            </button>
+                        <div className="flex flex-col justify-center items-center w-1/4 full">
+                            <div className="flex flex-row items-center h-36 w-36 rounded-3xl md:h-36 md:w-36 md:rounded-3xl mb-4">
+                                <img
+                                    src={image}
+                                    alt={name}
+                                    className="object-cover h-full w-full rounded-3xl"
+                                ></img>
+                            </div>
+                            <div className="flex flex-row items-center">
+                                <button
+                                    type="button"
+                                    className={`${
+                                        isAdded
+                                            ? "text-mealshub-red hover:text-white border-2 border-mealshub-red hover:bg-mealshub-red"
+                                            : "text-white bg-mealshub-red hover:text-mealshub-red border-2 border-mealshub-red hover:bg-white"
+                                    } font-bold text-lg rounded-full text-sm px-5 py-2.5 text-center`}
+                                    onClick={handleClick}
+                                >
+                                    {isAdded ? "Added" : "Add to Cart"}
+                                </button>
+                            </div>
                         </div>
                     </div>
                 </div>
-            </div>
-        )
-    });
+            );
+        },
+    );
 
     return productlist;
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/RegisterForm.tsx b/frontend/src/components/RegisterForm.tsx
index 3b410caa8ad45d17e0e4d9e000b3a084bc4da13a..2007b958b579866d5f3e28e8cba3031eb281a8a5 100644
--- a/frontend/src/components/RegisterForm.tsx
+++ b/frontend/src/components/RegisterForm.tsx
@@ -1,4 +1,57 @@
+import { useState, useEffect } from "react";
+import { useForm, SubmitHandler } from "react-hook-form";
+import { useNavigate, useParams, useSearchParams } from "react-router-dom";
+import { useAuth } from "../hooks/useAuth";
+
+interface RegisterFormInput {
+    fullname: string;
+    email: string;
+    username: string;
+    password: string;
+    role: string;
+}
+
 export default function RegisterForm() {
+    const { handleSubmit, register } = useForm<RegisterFormInput>();
+    const [fullname, setFullname] = useState<string>("");
+    const [email, setEmail] = useState<string>("");
+    const [username, setUsername] = useState<string>("");
+    const [password, setPassword] = useState<string>("");
+
+    const navigate = useNavigate();
+    const { user, registers } = useAuth();
+    const params = useParams();
+    const [searchParams] = useSearchParams();
+    const returnUrl = searchParams.get("returnUrl");
+
+    const selectedRole = params.role as string;
+
+    useEffect(() => {
+        if (!user) return;
+        let targetRoute = "";
+        if (selectedRole === "tenant") {
+            targetRoute = "/tenant/menus";
+        } else if (selectedRole === "cashier") {
+            targetRoute = "/cashier/payments";
+        } else if (selectedRole === "customer") {
+            targetRoute = "/";
+        }
+        returnUrl ? navigate(returnUrl) : navigate(targetRoute);
+    }, [user]);
+
+    const submit: SubmitHandler<RegisterFormInput> = async ({
+        fullname,
+        email,
+        username,
+        password,
+        role,
+    }) => {
+        console.log(
+            `fullname: ${fullname}, email: ${email}, username: ${username}, password: ${password}, role:${role} MASUK`,
+        );
+        await registers(fullname, email, username, password, selectedRole);
+    };
+
     return (
         <div className="relative bg-white rounded-xl px-16">
             <div className="flex flex-col items-center justify-between mt-4 p-4 md:p-5">
@@ -7,7 +60,11 @@ export default function RegisterForm() {
                 </h1>
             </div>
 
-            <form action="#" className="p-4 md:p-5">
+            <form
+                onSubmit={handleSubmit(submit)}
+                noValidate
+                className="p-4 md:p-5"
+            >
                 <div className="gap-4 mb-4">
                     <div className="my-2">
                         <label
@@ -18,11 +75,13 @@ export default function RegisterForm() {
                         </label>
                         <input
                             type="text"
-                            name="fullname"
                             id="fullname"
                             className="font-nunito bg-white border border-mealshub-orange text-gray-900 text-m rounded-2xl focus:ring-mealshub-orange focus:border-mealshub-orange block w-96 px-4 p-2.5 h-14"
                             placeholder="Name"
                             required
+                            {...register("fullname", {
+                                required: true,
+                            })}
                         />
                     </div>
                     <div className="my-2">
@@ -34,11 +93,17 @@ export default function RegisterForm() {
                         </label>
                         <input
                             type="text"
-                            name="email"
                             id="email"
                             className="font-nunito bg-white border border-mealshub-orange text-gray-900 text-m rounded-2xl focus:ring-mealshub-orange focus:border-mealshub-orange block w-96 px-4 p-2.5 h-14"
                             placeholder="Email"
                             required
+                            {...register("email", {
+                                required: true,
+                                pattern: {
+                                    value: /^[\w-.]+@([\w-]+\.)+[\w-]{2,63}$/i,
+                                    message: "Email is not valid.",
+                                },
+                            })}
                         />
                     </div>
                     <div className="my-2">
@@ -50,27 +115,34 @@ export default function RegisterForm() {
                         </label>
                         <input
                             type="text"
-                            name="username"
                             id="username"
                             className="font-nunito bg-white border border-mealshub-orange text-gray-900 text-m rounded-2xl focus:ring-mealshub-orange focus:border-mealshub-orange block w-96 px-4 p-2.5 h-14"
                             placeholder="Username"
                             required
+                            {...register("username", {
+                                required: true,
+                            })}
                         />
                     </div>
                     <div className="my-2">
                         <label
                             htmlFor="password"
                             className="block mb-2 text-xl font-bold text-mealshub-orange "
+                            {...register("password", {
+                                required: true,
+                            })}
                         >
                             Password
                         </label>
                         <input
-                            type="text"
-                            name="password"
+                            type="password"
                             id="password"
                             className="font-nunito bg-white border border-mealshub-orange text-gray-900 text-m rounded-2xl focus:ring-mealshub-orange focus:border-mealshub-orange block w-96 px-4 p-2.5 h-14"
                             placeholder="Password"
                             required
+                            {...register("password", {
+                                required: true,
+                            })}
                         />
                     </div>
                 </div>
diff --git a/frontend/src/components/RoleCard.tsx b/frontend/src/components/RoleCard.tsx
index 7870b51389463a6dd41fa09733fc290beb65f483..63ffa8903540b47fc1e916f970f0a46d3fe7e4e3 100644
--- a/frontend/src/components/RoleCard.tsx
+++ b/frontend/src/components/RoleCard.tsx
@@ -63,7 +63,7 @@ export default function RoleCard() {
                     </div>
                 </button>
             </Link>
-            <Link to="/login">
+            <Link to="/login/tenant/">
                 <button
                     type="button"
                     className="text-white bg-mealshub-orange font-bold rounded-3xl p-4 w-full inline-flex hover:shadow-xl mb-7"
@@ -94,7 +94,7 @@ export default function RoleCard() {
                     </div>
                 </button>
             </Link>
-            <Link to="/login">
+            <Link to="/login/cashier">
                 <button
                     type="button"
                     className="text-white bg-mealshub-orange font-bold rounded-3xl p-4 w-full inline-flex hover:shadow-xl mb-5"
diff --git a/frontend/src/hooks/useAuth.tsx b/frontend/src/hooks/useAuth.tsx
index bb6e089b6259f65775ffd848520505e5fa5ff591..6a5b6a5d219c7c78320321ae7cd182f40c4a96f9 100644
--- a/frontend/src/hooks/useAuth.tsx
+++ b/frontend/src/hooks/useAuth.tsx
@@ -19,11 +19,27 @@ export interface AuthTable {
     id: number;
 }
 
+interface newUser {
+    id: number;
+    fullname: string;
+    email: string;
+    username: string;
+    password: string;
+    role: string;
+}
+
 interface AuthContextProps {
     user: AuthUser | AuthTable | null;
     login: (email: string, password: string, role: string) => Promise<void>;
     logout: () => void;
     showUser: () => void;
+    registers: (
+        fullname: string,
+        email: string,
+        username: string,
+        password: string,
+        role: string,
+    ) => Promise<void>;
 }
 
 export const AuthContext = createContext<AuthContextProps | null>(null);
@@ -35,50 +51,40 @@ export const AuthProvider: React.FC<{ children: ReactNode }> = ({
     console.log(user);
 
     const login = async (email: string, password: string, role: string) => {
-        if (role === "tenant-cashier") {
-            try {
-                console.log(`email: ${email}, password: ${password}. MASUK`);
-                const loggedInUser = await userService.login(
-                    email,
-                    password,
-                    "tenant-cashier",
-                );
-                setUser(loggedInUser);
-                toast.success("Logged in successfully.");
-            } catch (error: any) {
-                toast.error(
-                    error.response?.data?.message ||
-                        "An error occurred during login.",
-                );
-            }
-        } else if (role === "customer") {
-            try {
-                console.log(`num_seat: ${email}, id_table: ${password}. MASUK`);
-                const loggedInUser = await userService.login(
-                    email,
-                    password,
-                    "customer",
-                );
-                setUser(loggedInUser);
-                toast.success("Logged in successfully.");
-            } catch (error: any) {
-                toast.error(
-                    error.response?.data?.message ||
-                        "An error occurred during login.",
-                );
-            }
+        try {
+            console.log(`email: ${email}, password: ${password}. MASUK`);
+            const loggedInUser = await userService.login(email, password, role);
+            setUser(loggedInUser);
+            toast.success("Logged in successfully.");
+        } catch (error: any) {
+            toast.error(
+                error.response?.data?.message ||
+                    "An error occurred during login.",
+            );
         }
     };
 
-    // const register = async (data) => {
-    //     try {
-    //         const user = await userService.register(data);
-    //         setUser(user);
-    //         toast.success("Register Successful");
-    //     } catch (error: any) {
-    //         toast.error(error.response.data);
-    //     }
-    // };
+    const registers = async (
+        fullname: string,
+        email: string,
+        username: string,
+        password: string,
+        role: string,
+    ) => {
+        try {
+            const user = await userService.register(
+                fullname,
+                email,
+                username,
+                password,
+                role,
+            );
+            setUser(user);
+            toast.success("Register Successful");
+        } catch (error: any) {
+            toast.error(error.response.data);
+        }
+    };
 
     const logout = () => {
         userService.logout();
@@ -107,7 +113,7 @@ export const AuthProvider: React.FC<{ children: ReactNode }> = ({
         login,
         logout,
         showUser,
-        // register,
+        registers,
         // updateProfile,
         // changePassword,
     };
diff --git a/frontend/src/pages/LoginPage.tsx b/frontend/src/pages/LoginPage.tsx
index 1dbeed3c2b5e0680ac1f299ca51bcae8ed3b2b41..c369bea2c94695c9491776503b2ad08f973613a2 100644
--- a/frontend/src/pages/LoginPage.tsx
+++ b/frontend/src/pages/LoginPage.tsx
@@ -1,6 +1,6 @@
 import { useEffect } from "react";
 import { useForm, SubmitHandler } from "react-hook-form";
-import { useNavigate, useSearchParams } from "react-router-dom";
+import { useNavigate, useParams, useSearchParams } from "react-router-dom";
 import { useAuth } from "../hooks/useAuth";
 import Logo from "../components/Logo";
 import Input from "../components/Input";
@@ -19,12 +19,22 @@ export default function LoginPage() {
 
     const navigate = useNavigate();
     const { user, login } = useAuth();
-    const [params] = useSearchParams();
-    const returnUrl = params.get("returnUrl");
+    const param = useParams();
+    const [searchParams] = useSearchParams();
+    const returnUrl = searchParams.get("returnUrl");
 
+    const selectedRole = param.role as string;
     useEffect(() => {
         if (!user) return;
-        returnUrl ? navigate(returnUrl) : navigate("/tenant/menus");
+        let targetUrl = "";
+        if (selectedRole === "tenant") {
+            targetUrl = returnUrl ? returnUrl : "/tenant/menus";
+        } else if (selectedRole === "cashier") {
+            targetUrl = returnUrl ? returnUrl : "/cashier/payments";
+        } else if (selectedRole === "customer") {
+            targetUrl = returnUrl ? returnUrl : "/";
+        }
+        returnUrl ? navigate(returnUrl) : navigate(targetUrl);
     }, [user]);
 
     const submit: SubmitHandler<LoginFormInput> = async ({
@@ -32,7 +42,7 @@ export default function LoginPage() {
         password,
     }) => {
         console.log(`email: ${email}, password: ${password}. MASUK`);
-        await login(email, password, "tenant-cashier");
+        await login(email, password, selectedRole);
     };
 
     const handleGoBack = () => {
@@ -40,7 +50,7 @@ export default function LoginPage() {
     };
 
     return (
-        <div className="grid min-h-screen bg-[url('images/LoginBackground.png')]">
+        <div className="grid min-h-screen bg-[url('../public/images/LoginBackground.png')]">
             <div className="login-container">
                 <div className="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0">
                     <div className="w-full bg-white rounded-lg shadow md:mt-0 sm:max-w-4xl xl:p-0">
@@ -63,8 +73,6 @@ export default function LoginPage() {
                                                 value: /^[\w-.]+@([\w-]+\.)+[\w-]{2,63}$/i,
                                                 message: "Email is not valid.",
                                             },
-                                            minLength: 8,
-                                            maxLength: 30,
                                         })}
                                         error={errors.email}
                                     />
@@ -73,8 +81,6 @@ export default function LoginPage() {
                                         label="Password"
                                         {...register("password", {
                                             required: true,
-                                            minLength: 6,
-                                            maxLength: 30,
                                         })}
                                         error={errors.password}
                                     />
@@ -88,7 +94,7 @@ export default function LoginPage() {
                                         <p className="text-sm font-light text-gray-500">
                                             Don't have an account yet?{" "}
                                             <a
-                                                href="#"
+                                                href={`/register/${selectedRole}`}
                                                 className="font-medium text-mealshub-blue hover:underline"
                                             >
                                                 Register
diff --git a/frontend/src/pages/OrderSummary.tsx b/frontend/src/pages/OrderSummary.tsx
index 4d745a02fc55ffb06f60b229e3cbcf3e932c40cc..d0681cf1a52ec3a018ede523e5e2c640be6d3fc8 100644
--- a/frontend/src/pages/OrderSummary.tsx
+++ b/frontend/src/pages/OrderSummary.tsx
@@ -10,60 +10,68 @@ import crypto from "crypto-js";
 import { useAuth, AuthTable } from "../hooks/useAuth";
 
 interface Order {
-    id: number,
-    status: string,
-    time: Date,
-    id_table: number,
-    id_tenant: number
+    id: number;
+    status: string;
+    time: Date;
+    id_table: number;
+    id_tenant: number;
 }
 
 interface OrderProduct {
-    num_product: number,
-    id_product: number,
-    id_order: number
+    num_product: number;
+    id_product: number;
+    id_order: number;
 }
 
 interface Product {
-    id: number,
-    name: string,
-    price: number
+    id: number;
+    name: string;
+    price: number;
 }
 
 interface Tenant {
-    id: number,
-    name: string
+    id: number;
+    name: string;
 }
 
 interface Payment {
-    id: number,
-    status: string,
-    id_order: number
+    id: number;
+    status: string;
+    id_order: number;
 }
 
 interface OrderSummary {
-    id: number,
-    name: string,
-    orderlist: (string | number)[][]
+    id: number;
+    name: string;
+    orderlist: (string | number)[][];
 }
 
 interface OrderDetails {
-    orderid: number,
-    code: string | null,
-    tableid: number,
-    time: Date,
-    orderstatus: string,
-    paymentstatus: string
+    orderid: number;
+    code: string | null;
+    tableid: number;
+    time: Date;
+    orderstatus: string;
+    paymentstatus: string;
 }
 
 export default function OrderSummary() {
     const { user } = useAuth();
     const { orderid } = useParams();
-    const [joinedOrderSummaryData, setJoinedOrderSummaryData] = useState<OrderSummary[]>([]);
+    const [joinedOrderSummaryData, setJoinedOrderSummaryData] = useState<
+        OrderSummary[]
+    >([]);
 
     const getOrderSummaryData = async () => {
-        const orderResponse = await Axios.get(`http://localhost:8000/orders/${orderid}`);
-        const productResponse = await Axios.get("http://localhost:8000/products");
-        const orderProductResponse = await Axios.get("http://localhost:8000/orderproduct");
+        const orderResponse = await Axios.get(
+            `http://localhost:8000/orders/${orderid}`,
+        );
+        const productResponse = await Axios.get(
+            "http://localhost:8000/products",
+        );
+        const orderProductResponse = await Axios.get(
+            "http://localhost:8000/orderproduct",
+        );
         const tenantResponse = await Axios.get("http://localhost:8000/tenants");
 
         const orderData = orderResponse.data.data;
@@ -75,22 +83,35 @@ export default function OrderSummary() {
         // OrderData is not an array, so we need to convert it into an array
         const orderDataArray = [orderData];
         const result = orderDataArray.map((order: Order) => {
-            const tenant = tenantData.find((tenant: Tenant) => tenant.id === order.id_tenant);
-            const orderproduct = orderProductData.filter((orderProduct: OrderProduct) => orderProduct.id_order === order.id);
-            const listproduct = orderproduct.map((orderProduct: OrderProduct) => {
-                const product = productData.find((product: Product) => product.id === orderProduct.id_product);
-                return [product?.name || 'Product Not Found', orderProduct.num_product, product?.price || 0];
-            });
-        
+            const tenant = tenantData.find(
+                (tenant: Tenant) => tenant.id === order.id_tenant,
+            );
+            const orderproduct = orderProductData.filter(
+                (orderProduct: OrderProduct) =>
+                    orderProduct.id_order === order.id,
+            );
+            const listproduct = orderproduct.map(
+                (orderProduct: OrderProduct) => {
+                    const product = productData.find(
+                        (product: Product) =>
+                            product.id === orderProduct.id_product,
+                    );
+                    return [
+                        product?.name || "Product Not Found",
+                        orderProduct.num_product,
+                        product?.price || 0,
+                    ];
+                },
+            );
+
             return {
                 id: tenant?.id || 0,
-                name: tenant?.name || 'Tenant Not Found',
-                orderlist: listproduct
+                name: tenant?.name || "Tenant Not Found",
+                orderlist: listproduct,
             };
-        });        
+        });
 
         setJoinedOrderSummaryData(result);
-
     };
 
     useEffect(() => {
@@ -99,11 +120,17 @@ export default function OrderSummary() {
 
     console.log(joinedOrderSummaryData);
 
-    const [joinedOrderDetailsData, setJoinedOrderDetailsData] = useState<OrderDetails[]>([]);
+    const [joinedOrderDetailsData, setJoinedOrderDetailsData] = useState<
+        OrderDetails[]
+    >([]);
 
     const getOrderDetailsData = async () => {
-        const orderResponse = await Axios.get(`http://localhost:8000/orders/${orderid}`);
-        const paymentResponse = await Axios.get("http://localhost:8000/payments");
+        const orderResponse = await Axios.get(
+            `http://localhost:8000/orders/${orderid}`,
+        );
+        const paymentResponse = await Axios.get(
+            "http://localhost:8000/payments",
+        );
 
         const orderData = orderResponse.data.data;
         const paymentData = paymentResponse.data.data;
@@ -111,10 +138,17 @@ export default function OrderSummary() {
         // Perform the join based on the specified conditions
         const OrderDataArray = [orderData];
         const result = OrderDataArray.map((order: Order) => {
-            const matchingPayment = paymentData.find((payment: Payment) => payment.id_order === order.id);
+            const matchingPayment = paymentData.find(
+                (payment: Payment) => payment.id_order === order.id,
+            );
 
             // Hash the code (matchingPayment.id) using SHA-256 from crypto-js and take the first 5 characters
-            const hashedCode = matchingPayment ? crypto.SHA256(matchingPayment.id.toString()).toString().substring(0, 5) : null;
+            const hashedCode = matchingPayment
+                ? crypto
+                      .SHA256(matchingPayment.id.toString())
+                      .toString()
+                      .substring(0, 5)
+                : null;
 
             return {
                 orderid: order.id,
@@ -122,7 +156,7 @@ export default function OrderSummary() {
                 tableid: order.id_table,
                 time: order.time,
                 orderstatus: order.status,
-                paymentstatus: matchingPayment ? matchingPayment.status : null
+                paymentstatus: matchingPayment ? matchingPayment.status : null,
             };
         });
 
@@ -142,7 +176,20 @@ export default function OrderSummary() {
         <div className="grid grid-cols-5 grid-rows-8 bg-mealshub-cream min-h-screen">
             {/* Sidebar */}
             <div className="col-span-1 row-span-8">
-                <Sidebar customer={true} number={3} current={3} menu1="Home" page1="/" path1="M27 14.6465V29.4398C27 30.1188 26.7629 30.77 26.341 31.2501C25.919 31.7303 25.3467 32 24.75 32H19.125C18.5282 32 17.9559 31.7303 17.534 31.2501C17.112 30.77 16.875 30.1188 16.875 29.4398V23.0392C16.875 22.6997 16.7565 22.3741 16.5455 22.1341C16.3345 21.894 16.0484 21.7591 15.75 21.7591H11.25C10.9516 21.7591 10.6655 21.894 10.4545 22.1341C10.2435 22.3741 10.125 22.6997 10.125 23.0392V29.4398C10.125 30.1188 9.88794 30.77 9.46598 31.2501C9.04402 31.7303 8.47173 32 7.87499 32H2.25C1.65326 32 1.08097 31.7303 0.659009 31.2501C0.237052 30.77 2.59985e-08 30.1188 2.59985e-08 29.4398V14.6465C-4.73102e-05 14.2922 0.0645457 13.9417 0.189691 13.6172C0.314836 13.2928 0.497809 13.0014 0.72703 12.7616L11.977 0.683737L11.9925 0.666135C12.4067 0.237512 12.9464 0 13.5063 0C14.0662 0 14.6059 0.237512 15.0201 0.666135C15.0249 0.672397 15.0301 0.678277 15.0356 0.683737L26.2856 12.7616C26.5125 13.0027 26.6931 13.2946 26.8161 13.619C26.939 13.9434 27.0016 14.2933 27 14.6465Z" menu2="Shopping Cart" page2="/cart" path2="M22.2968 25.6C20.7499 25.6 19.5097 27.024 19.5097 28.8C19.5097 29.6487 19.8033 30.4626 20.326 31.0627C20.8487 31.6629 21.5576 32 22.2968 32C23.036 32 23.7449 31.6629 24.2675 31.0627C24.7902 30.4626 25.0839 29.6487 25.0839 28.8C25.0839 27.9513 24.7902 27.1374 24.2675 26.5373C23.7449 25.9371 23.036 25.6 22.2968 25.6ZM0 0V3.2H2.7871L7.80387 15.344L5.90864 19.264C5.69961 19.712 5.57419 20.24 5.57419 20.8C5.57419 21.6487 5.86783 22.4626 6.39051 23.0627C6.9132 23.6629 7.62211 24 8.36129 24H25.0839V20.8H8.94658C8.85418 20.8 8.76557 20.7579 8.70023 20.6828C8.6349 20.6078 8.59819 20.5061 8.59819 20.4C8.59819 20.32 8.61213 20.256 8.64 20.208L9.89419 17.6H20.2761C21.3213 17.6 22.241 16.928 22.7148 15.952L27.7037 5.6C27.8013 5.344 27.871 5.072 27.871 4.8C27.871 4.37565 27.7241 3.96869 27.4628 3.66863C27.2015 3.36857 26.847 3.2 26.4774 3.2H5.86684L4.5569 0M8.36129 25.6C6.81445 25.6 5.57419 27.024 5.57419 28.8C5.57419 29.6487 5.86783 30.4626 6.39051 31.0627C6.9132 31.6629 7.62211 32 8.36129 32C9.10047 32 9.80938 31.6629 10.3321 31.0627C10.8547 30.4626 11.1484 29.6487 11.1484 28.8C11.1484 27.9513 10.8547 27.1374 10.3321 26.5373C9.80938 25.9371 9.10047 25.6 8.36129 25.6Z" menu3="Orders" page3={`/order/list/${tableid}`} path3="M4.10306 1.10306C3 2.20612 3 3.97929 3 7.52941V24.4706C3 28.0207 3 29.7939 4.10306 30.8969C5.20612 32 6.97929 32 10.5294 32H21.8235C25.3736 32 27.1468 32 28.2499 30.8969C29.3529 29.7939 29.3529 28.0207 29.3529 24.4706V7.52941C29.3529 3.97929 29.3529 2.20612 28.2499 1.10306C27.1468 -1.12197e-07 25.3736 0 21.8235 0H10.5294C6.97929 0 5.20612 -1.12197e-07 4.10306 1.10306ZM10.5294 7.52941C10.0302 7.52941 9.5514 7.72773 9.19839 8.08074C8.84538 8.43375 8.64706 8.91253 8.64706 9.41176C8.64706 9.911 8.84538 10.3898 9.19839 10.7428C9.5514 11.0958 10.0302 11.2941 10.5294 11.2941H21.8235C22.3228 11.2941 22.8015 11.0958 23.1546 10.7428C23.5076 10.3898 23.7059 9.911 23.7059 9.41176C23.7059 8.91253 23.5076 8.43375 23.1546 8.08074C22.8015 7.72773 22.3228 7.52941 21.8235 7.52941H10.5294ZM10.5294 15.0588C10.0302 15.0588 9.5514 15.2571 9.19839 15.6102C8.84538 15.9632 8.64706 16.4419 8.64706 16.9412C8.64706 17.4404 8.84538 17.9192 9.19839 18.2722C9.5514 18.6252 10.0302 18.8235 10.5294 18.8235H21.8235C22.3228 18.8235 22.8015 18.6252 23.1546 18.2722C23.5076 17.9192 23.7059 17.4404 23.7059 16.9412C23.7059 16.4419 23.5076 15.9632 23.1546 15.6102C22.8015 15.2571 22.3228 15.0588 21.8235 15.0588H10.5294ZM10.5294 22.5882C10.0302 22.5882 9.5514 22.7866 9.19839 23.1396C8.84538 23.4926 8.64706 23.9714 8.64706 24.4706C8.64706 24.9698 8.84538 25.4486 9.19839 25.8016C9.5514 26.1546 10.0302 26.3529 10.5294 26.3529H18.0588C18.5581 26.3529 19.0368 26.1546 19.3898 25.8016C19.7429 25.4486 19.9412 24.9698 19.9412 24.4706C19.9412 23.9714 19.7429 23.4926 19.3898 23.1396C19.0368 22.7866 18.5581 22.5882 18.0588 22.5882H10.5294Z"/>
+                <Sidebar
+                    customer={true}
+                    number={3}
+                    current={3}
+                    menu1="Home"
+                    page1="/"
+                    path1="M27 14.6465V29.4398C27 30.1188 26.7629 30.77 26.341 31.2501C25.919 31.7303 25.3467 32 24.75 32H19.125C18.5282 32 17.9559 31.7303 17.534 31.2501C17.112 30.77 16.875 30.1188 16.875 29.4398V23.0392C16.875 22.6997 16.7565 22.3741 16.5455 22.1341C16.3345 21.894 16.0484 21.7591 15.75 21.7591H11.25C10.9516 21.7591 10.6655 21.894 10.4545 22.1341C10.2435 22.3741 10.125 22.6997 10.125 23.0392V29.4398C10.125 30.1188 9.88794 30.77 9.46598 31.2501C9.04402 31.7303 8.47173 32 7.87499 32H2.25C1.65326 32 1.08097 31.7303 0.659009 31.2501C0.237052 30.77 2.59985e-08 30.1188 2.59985e-08 29.4398V14.6465C-4.73102e-05 14.2922 0.0645457 13.9417 0.189691 13.6172C0.314836 13.2928 0.497809 13.0014 0.72703 12.7616L11.977 0.683737L11.9925 0.666135C12.4067 0.237512 12.9464 0 13.5063 0C14.0662 0 14.6059 0.237512 15.0201 0.666135C15.0249 0.672397 15.0301 0.678277 15.0356 0.683737L26.2856 12.7616C26.5125 13.0027 26.6931 13.2946 26.8161 13.619C26.939 13.9434 27.0016 14.2933 27 14.6465Z"
+                    menu2="Shopping Cart"
+                    page2="/cart"
+                    path2="M22.2968 25.6C20.7499 25.6 19.5097 27.024 19.5097 28.8C19.5097 29.6487 19.8033 30.4626 20.326 31.0627C20.8487 31.6629 21.5576 32 22.2968 32C23.036 32 23.7449 31.6629 24.2675 31.0627C24.7902 30.4626 25.0839 29.6487 25.0839 28.8C25.0839 27.9513 24.7902 27.1374 24.2675 26.5373C23.7449 25.9371 23.036 25.6 22.2968 25.6ZM0 0V3.2H2.7871L7.80387 15.344L5.90864 19.264C5.69961 19.712 5.57419 20.24 5.57419 20.8C5.57419 21.6487 5.86783 22.4626 6.39051 23.0627C6.9132 23.6629 7.62211 24 8.36129 24H25.0839V20.8H8.94658C8.85418 20.8 8.76557 20.7579 8.70023 20.6828C8.6349 20.6078 8.59819 20.5061 8.59819 20.4C8.59819 20.32 8.61213 20.256 8.64 20.208L9.89419 17.6H20.2761C21.3213 17.6 22.241 16.928 22.7148 15.952L27.7037 5.6C27.8013 5.344 27.871 5.072 27.871 4.8C27.871 4.37565 27.7241 3.96869 27.4628 3.66863C27.2015 3.36857 26.847 3.2 26.4774 3.2H5.86684L4.5569 0M8.36129 25.6C6.81445 25.6 5.57419 27.024 5.57419 28.8C5.57419 29.6487 5.86783 30.4626 6.39051 31.0627C6.9132 31.6629 7.62211 32 8.36129 32C9.10047 32 9.80938 31.6629 10.3321 31.0627C10.8547 30.4626 11.1484 29.6487 11.1484 28.8C11.1484 27.9513 10.8547 27.1374 10.3321 26.5373C9.80938 25.9371 9.10047 25.6 8.36129 25.6Z"
+                    menu3="Orders"
+                    page3={`/order/list/${tableid}`}
+                    path3="M4.10306 1.10306C3 2.20612 3 3.97929 3 7.52941V24.4706C3 28.0207 3 29.7939 4.10306 30.8969C5.20612 32 6.97929 32 10.5294 32H21.8235C25.3736 32 27.1468 32 28.2499 30.8969C29.3529 29.7939 29.3529 28.0207 29.3529 24.4706V7.52941C29.3529 3.97929 29.3529 2.20612 28.2499 1.10306C27.1468 -1.12197e-07 25.3736 0 21.8235 0H10.5294C6.97929 0 5.20612 -1.12197e-07 4.10306 1.10306ZM10.5294 7.52941C10.0302 7.52941 9.5514 7.72773 9.19839 8.08074C8.84538 8.43375 8.64706 8.91253 8.64706 9.41176C8.64706 9.911 8.84538 10.3898 9.19839 10.7428C9.5514 11.0958 10.0302 11.2941 10.5294 11.2941H21.8235C22.3228 11.2941 22.8015 11.0958 23.1546 10.7428C23.5076 10.3898 23.7059 9.911 23.7059 9.41176C23.7059 8.91253 23.5076 8.43375 23.1546 8.08074C22.8015 7.72773 22.3228 7.52941 21.8235 7.52941H10.5294ZM10.5294 15.0588C10.0302 15.0588 9.5514 15.2571 9.19839 15.6102C8.84538 15.9632 8.64706 16.4419 8.64706 16.9412C8.64706 17.4404 8.84538 17.9192 9.19839 18.2722C9.5514 18.6252 10.0302 18.8235 10.5294 18.8235H21.8235C22.3228 18.8235 22.8015 18.6252 23.1546 18.2722C23.5076 17.9192 23.7059 17.4404 23.7059 16.9412C23.7059 16.4419 23.5076 15.9632 23.1546 15.6102C22.8015 15.2571 22.3228 15.0588 21.8235 15.0588H10.5294ZM10.5294 22.5882C10.0302 22.5882 9.5514 22.7866 9.19839 23.1396C8.84538 23.4926 8.64706 23.9714 8.64706 24.4706C8.64706 24.9698 8.84538 25.4486 9.19839 25.8016C9.5514 26.1546 10.0302 26.3529 10.5294 26.3529H18.0588C18.5581 26.3529 19.0368 26.1546 19.3898 25.8016C19.7429 25.4486 19.9412 24.9698 19.9412 24.4706C19.9412 23.9714 19.7429 23.4926 19.3898 23.1396C19.0368 22.7866 18.5581 22.5882 18.0588 22.5882H10.5294Z"
+                />
             </div>
             {/* Header */}
             <div className="col-span-4">
@@ -154,18 +201,26 @@ export default function OrderSummary() {
                         <BackButton page={`/order/list/${tableid}`} />
                     </div>
                     <div className="ms-20 py-12 bg-white rounded-3xl">
-                        <h2 className="text-mealshub-red text-3xl font-bold ms-16">Order Summary</h2>
+                        <h2 className="text-mealshub-red text-3xl font-bold ms-16">
+                            Order Summary
+                        </h2>
                         <OrderDetailsCard data={joinedOrderDetailsData} />
                         <OrderSummaryCard data={joinedOrderSummaryData} customer={true} />
                         {joinedOrderDetailsData.map((order) => {
-                            if (order.paymentstatus === "Waiting for Confirmation") {
+                            if (
+                                order.paymentstatus ===
+                                "Waiting for Confirmation"
+                            ) {
                                 return (
                                     <div className="ms-16 my-3 font-normal text-lg text-gray-900">
                                         <span className="text-mealshub-red font-semibold font-italic">
-                                            Your payment is not confirmed yet. Don’t forget to show your Unique Code and pay order to the central cashier!
+                                            Your payment is not confirmed yet.
+                                            Don’t forget to show your Unique
+                                            Code and pay order to the central
+                                            cashier!
                                         </span>
                                     </div>
-                                )
+                                );
                             }
                             return null;
                         })}
@@ -173,5 +228,5 @@ export default function OrderSummary() {
                 </div>
             </div>
         </div>
-    )
-}
\ No newline at end of file
+    );
+}
diff --git a/frontend/src/pages/RegisterPage.tsx b/frontend/src/pages/RegisterPage.tsx
index 03a52bd60963a8d8263dfa4c1ce59388b5cd8a98..6b9d74b4cb00581c347dbb01b2120c54172e898b 100644
--- a/frontend/src/pages/RegisterPage.tsx
+++ b/frontend/src/pages/RegisterPage.tsx
@@ -1,6 +1,12 @@
 import RegisterForm from "../components/RegisterForm";
+import { useNavigate } from "react-router-dom";
 
 export default function RegisterPage() {
+    const navigate = useNavigate();
+    const handleGoBack = () => {
+        navigate(-1);
+    };
+
     return (
         <div className="grid grid-cols-2 min-h-screen">
             <div className="col-span-1 relative">
@@ -13,9 +19,15 @@ export default function RegisterPage() {
                     <h1 className="text-9xl font-bold text-white drop-shadow-2xl">
                         JOIN US
                     </h1>
-                    <span className="bg-mealshub-blue text-white font-nunito font-bold text-lg my-16 px-24 py-2">
+                    <div className="bg-mealshub-blue text-white font-nunito font-bold text-lg mt-16 mb-8 px-24 py-2">
                         Discover a new way to dine!
-                    </span>
+                    </div>
+                    <button
+                        onClick={handleGoBack}
+                        className="bg-mealshub-orange text-white px-4 py-2 rounded-lg hover:bg-mealshub-cream focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium text-sm"
+                    >
+                        Go Back
+                    </button>
                 </div>
             </div>
             <div className="flex items-center justify-center bg-mealshub-cream col-span-1">
diff --git a/frontend/src/services/userService.ts b/frontend/src/services/userService.ts
index a3b189d9cd5558b083163042657026db1623a59a..1a99d9ce320f76e15fbcebd02e5ec6f0d214b711 100644
--- a/frontend/src/services/userService.ts
+++ b/frontend/src/services/userService.ts
@@ -22,8 +22,20 @@ export const logout = () => {
     localStorage.removeItem("user");
 };
 
-export const register = async (registerData: any) => {
-    const { data } = await axios.post("users/register", registerData);
+export const register = async (
+    fullname: string,
+    email: string,
+    username: string,
+    password: string,
+    role: string,
+) => {
+    const { data } = await axios.post("http://localhost:8000/auth/register", {
+        fullname,
+        email,
+        username,
+        password,
+        role,
+    });
     localStorage.setItem("user", JSON.stringify(data));
     return data;
 };