Index: backend/src/main/java/finki/db/tasty_tabs/entity/RestaurantTable.java
===================================================================
--- backend/src/main/java/finki/db/tasty_tabs/entity/RestaurantTable.java	(revision b2f8f0910ab6c62a03048a03427b188e223c2320)
+++ backend/src/main/java/finki/db/tasty_tabs/entity/RestaurantTable.java	(revision 49f52097c03376323b2951306923bc439cb6dca3)
@@ -18,5 +18,5 @@
     @Id
     @Column(name = "table_number")
-    private Integer tableNumber;
+    private Long tableNumber;
 
     @Column(name = "seat_capacity", nullable = false)
@@ -29,5 +29,5 @@
     private List<ReservationManagedFrontStaff> managedReservations;
 
-    public RestaurantTable(Integer tableNumber, Integer seatCapacity) {
+    public RestaurantTable(Long tableNumber, Integer seatCapacity) {
         this.tableNumber=tableNumber;
         this.seatCapacity=seatCapacity;
Index: backend/src/main/java/finki/db/tasty_tabs/entity/composite_keys/ReservationManagedFrontStaffId.java
===================================================================
--- backend/src/main/java/finki/db/tasty_tabs/entity/composite_keys/ReservationManagedFrontStaffId.java	(revision b2f8f0910ab6c62a03048a03427b188e223c2320)
+++ backend/src/main/java/finki/db/tasty_tabs/entity/composite_keys/ReservationManagedFrontStaffId.java	(revision 49f52097c03376323b2951306923bc439cb6dca3)
@@ -3,4 +3,6 @@
 import jakarta.persistence.Embeddable;
 import java.io.Serializable;
+
+import lombok.AllArgsConstructor;
 import lombok.Data;
 import lombok.NoArgsConstructor;
@@ -10,4 +12,5 @@
 @Data
 @NoArgsConstructor
+@AllArgsConstructor
 public class ReservationManagedFrontStaffId implements Serializable {
 
Index: backend/src/main/java/finki/db/tasty_tabs/entity/exceptions/TableNotFoundException.java
===================================================================
--- backend/src/main/java/finki/db/tasty_tabs/entity/exceptions/TableNotFoundException.java	(revision b2f8f0910ab6c62a03048a03427b188e223c2320)
+++ backend/src/main/java/finki/db/tasty_tabs/entity/exceptions/TableNotFoundException.java	(revision 49f52097c03376323b2951306923bc439cb6dca3)
@@ -3,5 +3,5 @@
 public class TableNotFoundException extends DomainException {
 
-    public TableNotFoundException(Integer id) {
+    public TableNotFoundException(Long id) {
         super(String.format("Table with id %d doesnt exist",id));
     }
Index: backend/src/main/java/finki/db/tasty_tabs/entity/exceptions/TableNumberAlreadyExistsException.java
===================================================================
--- backend/src/main/java/finki/db/tasty_tabs/entity/exceptions/TableNumberAlreadyExistsException.java	(revision b2f8f0910ab6c62a03048a03427b188e223c2320)
+++ backend/src/main/java/finki/db/tasty_tabs/entity/exceptions/TableNumberAlreadyExistsException.java	(revision 49f52097c03376323b2951306923bc439cb6dca3)
@@ -3,5 +3,5 @@
 public class TableNumberAlreadyExistsException extends DomainException {
 
-    public TableNumberAlreadyExistsException(Integer number) {
+    public TableNumberAlreadyExistsException(Long number) {
         super(String.format("Table: %d already exists", number));
     }
Index: backend/src/main/java/finki/db/tasty_tabs/repository/RestaurantTableRepository.java
===================================================================
--- backend/src/main/java/finki/db/tasty_tabs/repository/RestaurantTableRepository.java	(revision b2f8f0910ab6c62a03048a03427b188e223c2320)
+++ backend/src/main/java/finki/db/tasty_tabs/repository/RestaurantTableRepository.java	(revision 49f52097c03376323b2951306923bc439cb6dca3)
@@ -8,5 +8,5 @@
 
 @Repository
-public interface RestaurantTableRepository extends JpaRepository<RestaurantTable, Integer> {
+public interface RestaurantTableRepository extends JpaRepository<RestaurantTable, Long> {
 
     List<RestaurantTable> findAllBySeatCapacity(Integer seatCapacity);
Index: backend/src/main/java/finki/db/tasty_tabs/service/ReservationService.java
===================================================================
--- backend/src/main/java/finki/db/tasty_tabs/service/ReservationService.java	(revision b2f8f0910ab6c62a03048a03427b188e223c2320)
+++ backend/src/main/java/finki/db/tasty_tabs/service/ReservationService.java	(revision 49f52097c03376323b2951306923bc439cb6dca3)
@@ -4,5 +4,4 @@
 import finki.db.tasty_tabs.entity.ReservationManagedFrontStaff;
 import finki.db.tasty_tabs.web.dto.CreateReservationDto;
-import finki.db.tasty_tabs.web.dto.ReservationDto;
 
 import java.time.LocalDate;
@@ -16,5 +15,5 @@
     void deleteReservation(Long id);
     List<Reservation> getAllReservationsByUser(String userEmail);
-    ReservationManagedFrontStaff acceptReservation(Long reservationId, String frontStaffEmail, Integer tableNumber);
+    ReservationManagedFrontStaff acceptReservation(Long reservationId, String frontStaffEmail, Long tableNumber);
 
     List<Reservation> getAllReservationsForToday();
Index: backend/src/main/java/finki/db/tasty_tabs/service/RestaurantTableService.java
===================================================================
--- backend/src/main/java/finki/db/tasty_tabs/service/RestaurantTableService.java	(revision b2f8f0910ab6c62a03048a03427b188e223c2320)
+++ backend/src/main/java/finki/db/tasty_tabs/service/RestaurantTableService.java	(revision 49f52097c03376323b2951306923bc439cb6dca3)
@@ -4,12 +4,11 @@
 
 import java.util.List;
-import java.util.Optional;
 
 public interface RestaurantTableService {
 
-    RestaurantTable findById(Integer id);
+    RestaurantTable findById(Long id);
     List<RestaurantTable> getAll();
-    RestaurantTable updateTable(Integer id,RestaurantTable restaurantTable);
-    void deleteTable(Integer id);
+    RestaurantTable updateTable(Long id, RestaurantTable restaurantTable);
+    void deleteTable(Long id);
     List<RestaurantTable> getAllBySeatCapacity(Integer seatCapacity);
     RestaurantTable createTable(RestaurantTable restaurantTable);
Index: backend/src/main/java/finki/db/tasty_tabs/service/impl/ReservationServiceImpl.java
===================================================================
--- backend/src/main/java/finki/db/tasty_tabs/service/impl/ReservationServiceImpl.java	(revision b2f8f0910ab6c62a03048a03427b188e223c2320)
+++ backend/src/main/java/finki/db/tasty_tabs/service/impl/ReservationServiceImpl.java	(revision 49f52097c03376323b2951306923bc439cb6dca3)
@@ -2,4 +2,5 @@
 
 import finki.db.tasty_tabs.entity.*;
+import finki.db.tasty_tabs.entity.composite_keys.ReservationManagedFrontStaffId;
 import finki.db.tasty_tabs.entity.exceptions.ReservationNotFoundException;
 import finki.db.tasty_tabs.entity.exceptions.TableNotFoundException;
@@ -90,5 +91,5 @@
 
     @Override
-    public ReservationManagedFrontStaff acceptReservation(Long reservationId, String frontStaffEmail, Integer tableNumber) {
+    public ReservationManagedFrontStaff acceptReservation(Long reservationId, String frontStaffEmail, Long tableNumber) {
         User user = userRepository.findByEmail(frontStaffEmail)
                 .orElseThrow(() -> new UsernameNotFoundException("User with email " + frontStaffEmail + " not found."));
@@ -106,8 +107,15 @@
 
         // 3. Create the new ReservationManagedFrontStaff entity
+        ReservationManagedFrontStaffId id = new ReservationManagedFrontStaffId(
+                reservation.getId(),
+                frontStaff.getId(),
+                table.getTableNumber().longValue()
+        );
+
         ReservationManagedFrontStaff managedReservation = new ReservationManagedFrontStaff();
         managedReservation.setReservation(reservation);
         managedReservation.setFrontStaff(frontStaff);
         managedReservation.setRestaurantTable(table);
+        managedReservation.setId(id);
 
         // 4. Save the new entity to the database
Index: backend/src/main/java/finki/db/tasty_tabs/service/impl/RestaurantTableServiceImpl.java
===================================================================
--- backend/src/main/java/finki/db/tasty_tabs/service/impl/RestaurantTableServiceImpl.java	(revision b2f8f0910ab6c62a03048a03427b188e223c2320)
+++ backend/src/main/java/finki/db/tasty_tabs/service/impl/RestaurantTableServiceImpl.java	(revision 49f52097c03376323b2951306923bc439cb6dca3)
@@ -9,5 +9,4 @@
 
 import java.util.List;
-import java.util.Optional;
 
 @Service
@@ -21,5 +20,5 @@
 
     @Override
-    public RestaurantTable findById(Integer id) {
+    public RestaurantTable findById(Long id) {
         return tableRepository.findById(id).orElseThrow(()->new TableNotFoundException(id));
     }
@@ -31,5 +30,5 @@
 
     @Override
-    public RestaurantTable updateTable(Integer id, RestaurantTable restaurantTable) {
+    public RestaurantTable updateTable(Long id, RestaurantTable restaurantTable) {
         if(tableRepository.findById(restaurantTable.getTableNumber()).isPresent() && id!=restaurantTable.getTableNumber()){
             throw new TableNumberAlreadyExistsException(restaurantTable.getTableNumber());
@@ -47,5 +46,5 @@
 
     @Override
-    public void deleteTable(Integer id) {
+    public void deleteTable(Long id) {
         tableRepository.deleteById(id);
     }
Index: backend/src/main/java/finki/db/tasty_tabs/web/controllers/ReservationController.java
===================================================================
--- backend/src/main/java/finki/db/tasty_tabs/web/controllers/ReservationController.java	(revision b2f8f0910ab6c62a03048a03427b188e223c2320)
+++ backend/src/main/java/finki/db/tasty_tabs/web/controllers/ReservationController.java	(revision 49f52097c03376323b2951306923bc439cb6dca3)
@@ -77,5 +77,5 @@
     public ResponseEntity<ReservationDto> acceptReservation(
             @PathVariable Long reservationId,
-            @PathVariable Integer tableNumber,
+            @PathVariable Long tableNumber,
             Authentication authentication
     ) {
Index: backend/src/main/java/finki/db/tasty_tabs/web/controllers/RestaurantTableController.java
===================================================================
--- backend/src/main/java/finki/db/tasty_tabs/web/controllers/RestaurantTableController.java	(revision b2f8f0910ab6c62a03048a03427b188e223c2320)
+++ backend/src/main/java/finki/db/tasty_tabs/web/controllers/RestaurantTableController.java	(revision 49f52097c03376323b2951306923bc439cb6dca3)
@@ -36,5 +36,5 @@
     @Operation(summary = "Get a table by table number", description = "Finds a table by its table number.")
     @GetMapping("/{tableNumber}")
-    public ResponseEntity<RestaurantTableDto> findById(@PathVariable Integer tableNumber) {
+    public ResponseEntity<RestaurantTableDto> findById(@PathVariable Long tableNumber) {
         return ResponseEntity.ok(RestaurantTableDto.from(restaurantTableService.findById(tableNumber)));
                 }
@@ -50,5 +50,5 @@
     @PutMapping("/edit/{tableNumber}")
     public ResponseEntity<RestaurantTableDto> update(
-            @PathVariable Integer tableNumber,
+            @PathVariable Long tableNumber,
             @RequestBody CreateRestaurantTableDto dto
     ) {
@@ -59,5 +59,5 @@
     @Operation(summary = "Delete a table", description = "Deletes a restaurant table by its table number.")
     @DeleteMapping("/delete/{tableNumber}")
-    public ResponseEntity<Void> deleteById(@PathVariable Integer tableNumber) {
+    public ResponseEntity<Void> deleteById(@PathVariable Long tableNumber) {
         restaurantTableService.deleteTable(tableNumber);
         return ResponseEntity.noContent().build();
Index: backend/src/main/java/finki/db/tasty_tabs/web/dto/CreateOrderDto.java
===================================================================
--- backend/src/main/java/finki/db/tasty_tabs/web/dto/CreateOrderDto.java	(revision b2f8f0910ab6c62a03048a03427b188e223c2320)
+++ backend/src/main/java/finki/db/tasty_tabs/web/dto/CreateOrderDto.java	(revision 49f52097c03376323b2951306923bc439cb6dca3)
@@ -8,4 +8,4 @@
         String type, // "online" or "tab"
         String deliveryAddress, // For OnlineOrder
-        Integer tableNumber // For TabOrder
+        Long tableNumber // For TabOrder
 ) { }
Index: backend/src/main/java/finki/db/tasty_tabs/web/dto/CreateRestaurantTableDto.java
===================================================================
--- backend/src/main/java/finki/db/tasty_tabs/web/dto/CreateRestaurantTableDto.java	(revision b2f8f0910ab6c62a03048a03427b188e223c2320)
+++ backend/src/main/java/finki/db/tasty_tabs/web/dto/CreateRestaurantTableDto.java	(revision 49f52097c03376323b2951306923bc439cb6dca3)
@@ -4,5 +4,5 @@
 
 public record CreateRestaurantTableDto(
-        Integer tableNumber,
+        Long tableNumber,
         Integer seatCapacity
 ) {
Index: backend/src/main/java/finki/db/tasty_tabs/web/dto/OrderDto.java
===================================================================
--- backend/src/main/java/finki/db/tasty_tabs/web/dto/OrderDto.java	(revision b2f8f0910ab6c62a03048a03427b188e223c2320)
+++ backend/src/main/java/finki/db/tasty_tabs/web/dto/OrderDto.java	(revision 49f52097c03376323b2951306923bc439cb6dca3)
@@ -16,5 +16,5 @@
         String customerName,
         String deliveryAddress,
-        Integer tableNumber,
+        Long tableNumber,
         String frontStaffName,
         List<OrderItemDto> orderItems
Index: backend/src/main/java/finki/db/tasty_tabs/web/dto/RestaurantTableDto.java
===================================================================
--- backend/src/main/java/finki/db/tasty_tabs/web/dto/RestaurantTableDto.java	(revision b2f8f0910ab6c62a03048a03427b188e223c2320)
+++ backend/src/main/java/finki/db/tasty_tabs/web/dto/RestaurantTableDto.java	(revision 49f52097c03376323b2951306923bc439cb6dca3)
@@ -4,5 +4,5 @@
 
 public record RestaurantTableDto(
-        Integer tableNumber,
+        Long tableNumber,
         Integer seatCapacity
 ) {
Index: backend/src/main/java/finki/db/tasty_tabs/web/security/PublicUrlProvider.java
===================================================================
--- backend/src/main/java/finki/db/tasty_tabs/web/security/PublicUrlProvider.java	(revision b2f8f0910ab6c62a03048a03427b188e223c2320)
+++ backend/src/main/java/finki/db/tasty_tabs/web/security/PublicUrlProvider.java	(revision 49f52097c03376323b2951306923bc439cb6dca3)
@@ -11,6 +11,5 @@
             "/swagger-ui/**",
             "/v3/api-docs/**",
-            "/api/categories/**",
-            "/api/**"
+            "/api/categories/**"
     );
 
Index: frontend/src/App.tsx
===================================================================
--- frontend/src/App.tsx	(revision b2f8f0910ab6c62a03048a03427b188e223c2320)
+++ frontend/src/App.tsx	(revision 49f52097c03376323b2951306923bc439cb6dca3)
@@ -1,26 +1,45 @@
 // src/App.tsx
 import { BrowserRouter, Routes, Route, Outlet } from 'react-router-dom';
-import { Navbar } from './components/Navbar';
-import { LoginPage } from './pages/LoginPage';
-import { OrdersPage } from './pages/OrdersPage';
-import { ReservationsPage } from './pages/ReservationsPage';
-import { AssignmentsPage } from './pages/AssignmentsPage';
-import { ProtectedRoute } from './components/ProtectedRoute';
 import { AuthProvider } from './context/AuthContext';
 import { ROLES } from './utils/roles';
-import { EmployeesPage } from './pages/EmployeesPage';
-import { ShiftsPage } from './pages/ShiftsPage';
+
+// Layouts
+import { Navbar as AdminNavbar } from './components/Navbar';
+import { PublicNavbar } from './components/public/PublicNavbar';
+
+// Common Pages
+import { LoginPage } from './pages/LoginPage';
+import { ProtectedRoute } from './components/ProtectedRoute';
+
+// Admin Pages
+import DashboardPage from './pages/DashboardPage';
+import { OrdersPage } from './pages/OrdersPage';
+import { OrderDetailsPage } from './pages/OrderDetailsPage';
+import { ReservationsPage as AdminReservationsPage } from './pages/ReservationsPage';
 import { CategoriesPage } from './pages/CategoriesPage';
 import { ProductsPage } from './pages/ProductsPage';
-import { OrderDetailsPage } from './pages/OrderDetailsPage';
-import DashboardPage from './pages/DashboardPage';
+import { ShiftsPage } from './pages/ShiftsPage';
+import { EmployeesPage } from './pages/EmployeesPage';
+import { AssignmentsPage } from './pages/AssignmentsPage';
 
-// A layout component to wrap pages that have the Navbar
-const AppLayout = () => (
+// Public Pages
+import { RegisterPage } from './pages/public/RegisterPage';
+import { MenuPage } from './pages/public/MenuPage';
+import { MyReservationsPage } from './pages/public/MyReservationsPage';
+import { MyOrdersPage } from './pages/public/MyOrdersPage';
+
+// Admin Layout
+const AdminLayout = () => (
     <div className="bg-gray-50 min-h-screen">
-        <Navbar />
-        <main>
-            <Outlet />
-        </main>
+        <AdminNavbar />
+        <main><Outlet /></main>
+    </div>
+);
+
+// Public Layout
+const PublicLayout = () => (
+    <div>
+        <PublicNavbar />
+        <main><Outlet /></main>
     </div>
 );
@@ -31,42 +50,37 @@
             <BrowserRouter>
                 <Routes>
-                    <Route path="/login" element={<LoginPage />} />
-                    <Route element={<AppLayout />}>
-                        <Route path="/" element={<ProtectedRoute allowedRoles={[ROLES.MANAGER, ROLES.FRONT_STAFF, ROLES.BACK_STAFF]} />}>
+                    {/* Public Routes */}
+                    <Route element={<PublicLayout />}>
+                        <Route path="/" element={<MenuPage />} />
+                        <Route path="/login" element={<LoginPage />} />
+                        <Route path="/register" element={<RegisterPage />} />
+                        <Route path="/my-orders" element={<ProtectedRoute allowedRoles={[ROLES.CUSTOMER, ROLES.MANAGER, ROLES.USER]} />}>
+                            <Route index element={<MyOrdersPage />} />
+                        </Route>
+                        <Route path="/my-reservations" element={<ProtectedRoute allowedRoles={[ROLES.CUSTOMER, ROLES.MANAGER, ROLES.USER]} />}>
+                            <Route index element={<MyReservationsPage />} />
+                        </Route>
+                    </Route>
+
+                    {/* Admin Routes */}
+                    <Route path="/admin" element={<AdminLayout />}>
+                        <Route path="" element={<ProtectedRoute allowedRoles={[ROLES.MANAGER, ROLES.FRONT_STAFF, ROLES.BACK_STAFF]} />}>
                             <Route index element={<DashboardPage />} />
                         </Route>
-
-                        <Route path="/orders" element={<ProtectedRoute allowedRoles={[ROLES.MANAGER, ROLES.FRONT_STAFF, ROLES.BACK_STAFF]} />}>
+                        <Route path="orders" element={<ProtectedRoute allowedRoles={[ROLES.MANAGER, ROLES.FRONT_STAFF, ROLES.BACK_STAFF]} />}>
                             <Route index element={<OrdersPage />} />
-                            {/* Add the new route for viewing a single order */}
                             <Route path=":orderId" element={<OrderDetailsPage />} />
                         </Route>
+                        <Route path="reservations" element={<ProtectedRoute allowedRoles={[ROLES.MANAGER, ROLES.FRONT_STAFF]} />}>
+                            <Route index element={<AdminReservationsPage />} />
+                        </Route>
+                        <Route path="categories" element={<ProtectedRoute allowedRoles={[ROLES.MANAGER]} />}><Route index element={<CategoriesPage />} /></Route>
+                        <Route path="products" element={<ProtectedRoute allowedRoles={[ROLES.MANAGER]} />}><Route index element={<ProductsPage />} /></Route>
+                        <Route path="shifts" element={<ProtectedRoute allowedRoles={[ROLES.MANAGER]} />}><Route index element={<ShiftsPage />} /></Route>
+                        <Route path="employees" element={<ProtectedRoute allowedRoles={[ROLES.MANAGER]} />}><Route index element={<EmployeesPage />} /></Route>
+                        <Route path="assignments" element={<ProtectedRoute allowedRoles={[ROLES.MANAGER]} />}><Route index element={<AssignmentsPage />} /></Route>
+                    </Route>
 
-                        <Route path="/reservations" element={<ProtectedRoute allowedRoles={[ROLES.MANAGER, ROLES.FRONT_STAFF]} />}>
-                            <Route index element={<ReservationsPage />} />
-                        </Route>
-
-                        {/* Manager-only routes */}
-                        <Route path="/categories" element={<ProtectedRoute allowedRoles={[ROLES.MANAGER]} />}>
-                            <Route index element={<CategoriesPage />} />
-                        </Route>
-
-                        <Route path="/products" element={<ProtectedRoute allowedRoles={[ROLES.MANAGER]} />}>
-                            <Route index element={<ProductsPage />} />
-                        </Route>
-                        <Route path="/shifts" element={<ProtectedRoute allowedRoles={[ROLES.MANAGER]} />}>
-                            <Route index element={<ShiftsPage />} />
-                        </Route>
-
-                        <Route path="/employees" element={<ProtectedRoute allowedRoles={[ROLES.MANAGER]} />}>
-                            <Route index element={<EmployeesPage />} />
-                        </Route>
-
-                        <Route path="/assignments" element={<ProtectedRoute allowedRoles={[ROLES.MANAGER]} />}>
-                            <Route index element={<AssignmentsPage />} />
-                        </Route>
-
-                        <Route path="*" element={<div>404 Not Found</div>} />
-                    </Route>
+                    <Route path="*" element={<div>404 Not Found</div>} />
                 </Routes>
             </BrowserRouter>
Index: frontend/src/api/authRepository.ts
===================================================================
--- frontend/src/api/authRepository.ts	(revision b2f8f0910ab6c62a03048a03427b188e223c2320)
+++ frontend/src/api/authRepository.ts	(revision 49f52097c03376323b2951306923bc439cb6dca3)
@@ -1,5 +1,5 @@
 // src/api/authRepository.ts
 import axiosClient from "./axiosClient";
-import type { AuthRequest, AuthDto } from "../types/api";
+import type { AuthRequest, AuthDto, RegisterRequest } from "../types/api";
 
 export const authRepository = {
@@ -8,3 +8,8 @@
     return data;
   },
+  // New method for customer registration
+  register: async (registerData: RegisterRequest): Promise<AuthDto> => {
+    const { data } = await axiosClient.post("/auth/register", registerData);
+    return data;
+  },
 };
Index: frontend/src/api/orderRepository.ts
===================================================================
--- frontend/src/api/orderRepository.ts	(revision b2f8f0910ab6c62a03048a03427b188e223c2320)
+++ frontend/src/api/orderRepository.ts	(revision 49f52097c03376323b2951306923bc439cb6dca3)
@@ -24,4 +24,16 @@
   getOpenOrders: async (): Promise<OrderDto[]> => {
     const { data } = await axiosClient.get("/orders/open");
+    return data;
+  },
+  createOnlineOrder: async (orderData: CreateOrderDto): Promise<OrderDto> => {
+    const { data } = await axiosClient.post("/orders/online", orderData);
+    return data;
+  },
+  getOnlineOrdersByCustomer: async (
+    customerId: number,
+  ): Promise<OrderDto[]> => {
+    const { data } = await axiosClient.get(
+      `/orders/online/customer/${customerId}`,
+    );
     return data;
   },
Index: frontend/src/api/reservationRepository.ts
===================================================================
--- frontend/src/api/reservationRepository.ts	(revision b2f8f0910ab6c62a03048a03427b188e223c2320)
+++ frontend/src/api/reservationRepository.ts	(revision 49f52097c03376323b2951306923bc439cb6dca3)
@@ -28,3 +28,12 @@
     return data;
   },
+
+  getMyReservations: async (): Promise<ReservationDto[]> => {
+    const { data } = await axiosClient.get("/reservations/myReservations");
+    return data;
+  },
+  // New method to delete/cancel a reservation
+  deleteReservation: async (reservationId: number): Promise<void> => {
+    await axiosClient.delete(`/reservations/delete/${reservationId}`);
+  },
 };
Index: frontend/src/components/Navbar.tsx
===================================================================
--- frontend/src/components/Navbar.tsx	(revision b2f8f0910ab6c62a03048a03427b188e223c2320)
+++ frontend/src/components/Navbar.tsx	(revision 49f52097c03376323b2951306923bc439cb6dca3)
@@ -5,11 +5,11 @@
 
 const navLinks = [
-    { path: '/orders', label: 'Orders' },
-    { path: '/reservations', label: 'Reservations' },
-    { path: '/categories', label: 'Categories' }, // New
-    { path: '/products', label: 'Products' }, // New
-    { path: '/shifts', label: 'Shifts' },
-    { path: '/employees', label: 'Employees' },
-    { path: '/assignments', label: 'Assignments' },
+    { path: '/admin/orders', label: 'Orders' },
+    { path: '/admin/reservations', label: 'Reservations' },
+    { path: '/admin/categories', label: 'Categories' }, // New
+    { path: '/admin/products', label: 'Products' }, // New
+    { path: '/admin/shifts', label: 'Shifts' },
+    { path: '/admin/employees', label: 'Employees' },
+    { path: '/admin/assignments', label: 'Assignments' },
 ];
 
Index: frontend/src/components/public/CartSidebar.tsx
===================================================================
--- frontend/src/components/public/CartSidebar.tsx	(revision 49f52097c03376323b2951306923bc439cb6dca3)
+++ frontend/src/components/public/CartSidebar.tsx	(revision 49f52097c03376323b2951306923bc439cb6dca3)
@@ -0,0 +1,57 @@
+// src/components/public/CartSidebar.tsx
+// src/components/public/CartSidebar.tsx
+import type { ProductDto } from '../../types/api';
+
+interface CartItem extends ProductDto {
+    quantity: number;
+}
+
+interface CartSidebarProps {
+    cart: Record<number, CartItem>;
+    onUpdateQuantity: (product: ProductDto, change: 1 | -1) => void;
+    onCheckout: () => void;
+}
+
+export const CartSidebar = ({ cart, onUpdateQuantity, onCheckout }: CartSidebarProps) => {
+    const cartItems = Object.values(cart);
+    const total = cartItems.reduce((sum, item) => sum + item.price * item.quantity, 0);
+
+    if (cartItems.length === 0) {
+        return (
+            <div className="bg-white p-4 rounded-lg shadow-lg h-full">
+                <h3 className="text-xl font-bold border-b pb-2">Your Order</h3>
+                <p className="text-gray-500 mt-4">Your cart is empty. Add items from the menu to get started!</p>
+            </div>
+        );
+    }
+
+    return (
+        <div className="bg-white p-4 rounded-lg shadow-lg h-full flex flex-col">
+            <h3 className="text-xl font-bold border-b pb-2">Your Order</h3>
+            <div className="flex-grow my-4 space-y-3 overflow-y-auto">
+                {cartItems.map(item => (
+                    <div key={item.id} className="flex justify-between items-center">
+                        <div>
+                            <p className="font-semibold">{item.name}</p>
+                            <p className="text-sm text-gray-600">${item.price.toFixed(2)}</p>
+                        </div>
+                        <div className="flex items-center space-x-2">
+                            <button onClick={() => onUpdateQuantity(item, -1)} className="font-bold">-</button>
+                            <span>{item.quantity}</span>
+                            <button onClick={() => onUpdateQuantity(item, 1)} className="font-bold">+</button>
+                        </div>
+                    </div>
+                ))}
+            </div>
+            <div className="border-t pt-4">
+                <div className="flex justify-between font-bold text-lg mb-4">
+                    <span>Total</span>
+                    <span>${total.toFixed(2)}</span>
+                </div>
+                <button onClick={onCheckout} className="w-full bg-green-500 hover:bg-green-600 text-white font-bold py-3 rounded-lg">
+                    Checkout
+                </button>
+            </div>
+        </div>
+    );
+};
Index: frontend/src/components/public/CheckoutForm.tsx
===================================================================
--- frontend/src/components/public/CheckoutForm.tsx	(revision 49f52097c03376323b2951306923bc439cb6dca3)
+++ frontend/src/components/public/CheckoutForm.tsx	(revision 49f52097c03376323b2951306923bc439cb6dca3)
@@ -0,0 +1,37 @@
+// src/components/forms/CheckoutForm.tsx
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+
+const checkoutSchema = z.object({
+    delivery_address: z.string().min(10, 'Please enter a valid address'),
+});
+
+type CheckoutFormData = z.infer<typeof checkoutSchema>;
+
+interface CheckoutFormProps {
+    onSubmit: (data: CheckoutFormData) => void;
+    isSubmitting: boolean;
+}
+
+export const CheckoutForm = ({ onSubmit, isSubmitting }: CheckoutFormProps) => {
+    const { register, handleSubmit, formState: { errors } } = useForm<CheckoutFormData>({
+        resolver: zodResolver(checkoutSchema),
+    });
+
+    return (
+        <form onSubmit={handleSubmit(onSubmit)}>
+            <p className="mb-4">Please provide your delivery address to complete the order.</p>
+            <div className="mb-4">
+                <label>Delivery Address</label>
+                <textarea {...register('delivery_address')} rows={3} className="w-full p-2 border rounded" />
+                {errors.delivery_address && <p className="text-red-500 text-xs">{errors.delivery_address.message}</p>}
+            </div>
+            <div className="flex justify-end">
+                <button type="submit" disabled={isSubmitting} className="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">
+                    {isSubmitting ? 'Placing Order...' : 'Confirm Order'}
+                </button>
+            </div>
+        </form>
+    );
+};
Index: frontend/src/components/public/PublicNavbar.tsx
===================================================================
--- frontend/src/components/public/PublicNavbar.tsx	(revision 49f52097c03376323b2951306923bc439cb6dca3)
+++ frontend/src/components/public/PublicNavbar.tsx	(revision 49f52097c03376323b2951306923bc439cb6dca3)
@@ -0,0 +1,45 @@
+// src/components/public/PublicNavbar.tsx
+import { NavLink, useNavigate } from 'react-router-dom';
+import { useAuth } from '../../hooks/useAuth';
+
+export const PublicNavbar = () => {
+    const { isAuthenticated, logout, user } = useAuth();
+    const navigate = useNavigate();
+
+    const handleLogout = () => {
+        logout();
+        navigate('/');
+    };
+
+    return (
+        <nav className="bg-white shadow-md text-gray-800 p-4 flex justify-between items-center">
+            <NavLink to="/" className="text-2xl font-bold text-blue-600">TastyTabs</NavLink>
+            <div className="flex items-center space-x-4">
+                <NavLink to="/" className={({ isActive }) => `hover:text-blue-600 ${isActive ? 'font-semibold' : ''}`}>Menu</NavLink>
+                {isAuthenticated && (
+                    <>
+                        <NavLink to="/my-orders" className={({ isActive }) => `hover:text-blue-600 ${isActive ? 'font-semibold' : ''}`}>My Orders</NavLink>
+                        <NavLink to="/my-reservations" className={({ isActive }) => `hover:text-blue-600 ${isActive ? 'font-semibold' : ''}`}>My Reservations</NavLink>
+                    </>
+                )}
+                {isAuthenticated ? (
+                    <>
+                        <span className="text-sm">Hi, {user?.email}</span>
+                        <button onClick={handleLogout} className="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-3 rounded-md text-sm">
+                            Logout
+                        </button>
+                    </>
+                ) : (
+                    <div className="space-x-2">
+                        <button onClick={() => navigate('/login')} className="bg-gray-200 hover:bg-gray-300 text-black font-bold py-2 px-3 rounded-md text-sm">
+                            Login
+                        </button>
+                        <button onClick={() => navigate('/register')} className="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-3 rounded-md text-sm">
+                            Register
+                        </button>
+                    </div>
+                )}
+            </div>
+        </nav>
+    );
+};
Index: frontend/src/context/AuthContext.tsx
===================================================================
--- frontend/src/context/AuthContext.tsx	(revision b2f8f0910ab6c62a03048a03427b188e223c2320)
+++ frontend/src/context/AuthContext.tsx	(revision 49f52097c03376323b2951306923bc439cb6dca3)
@@ -9,5 +9,5 @@
     isAuthenticated: boolean;
     isLoading: boolean;
-    login: (credentials: AuthRequest) => Promise<void>;
+    login: (credentials: AuthRequest) => Promise<UserDto>; // Changed return type
     logout: () => void;
     hasRole: (roles: UserType[]) => boolean;
@@ -37,5 +37,5 @@
     }, []);
 
-    const login = async (credentials: AuthRequest) => {
+    const login = async (credentials: AuthRequest): Promise<UserDto> => { // Changed return type
         const response = await authRepository.login(credentials);
         localStorage.setItem('authToken', response.token);
@@ -43,4 +43,5 @@
         setToken(response.token);
         setUser(response.user);
+        return response.user; // Return the user object
     };
 
Index: frontend/src/index.css
===================================================================
--- frontend/src/index.css	(revision b2f8f0910ab6c62a03048a03427b188e223c2320)
+++ frontend/src/index.css	(revision 49f52097c03376323b2951306923bc439cb6dca3)
@@ -8,5 +8,5 @@
     color-scheme: light dark;
     color: rgba(0, 0, 0, 0.87);
-    background-color: #242424;
+    background-color: #ececec;
 
     font-synthesis: none;
Index: frontend/src/pages/LoginPage.tsx
===================================================================
--- frontend/src/pages/LoginPage.tsx	(revision b2f8f0910ab6c62a03048a03427b188e223c2320)
+++ frontend/src/pages/LoginPage.tsx	(revision 49f52097c03376323b2951306923bc439cb6dca3)
@@ -3,4 +3,5 @@
 import { useNavigate } from 'react-router-dom';
 import { useAuth } from '../hooks/useAuth';
+import { UserType } from '../types/api'; // Import UserType enum
 
 export const LoginPage = () => {
@@ -15,6 +16,13 @@
         setError('');
         try {
-            await login({ username, password });
-            navigate('/');
+            const user = await login({ username, password }); // Capture the returned user object
+
+            // Check the user's role and navigate
+            if ([UserType.MANAGER, UserType.FRONT_STAFF, UserType.BACK_STAFF].includes(user.user_type)) {
+                navigate('/admin'); // Navigate to the admin dashboard
+            } else {
+                navigate('/'); // Navigate to the public menu page for customers
+            }
+
         } catch (err) {
             setError('Failed to log in. Please check your credentials.');
@@ -24,8 +32,10 @@
 
     return (
+        // ... JSX for the login form remains the same ...
         <div className="min-h-screen flex items-center justify-center bg-gray-100">
             <div className="bg-white p-8 rounded-lg shadow-md w-full max-w-md">
-                <h2 className="text-2xl font-bold mb-6 text-center">Admin Login</h2>
+                <h2 className="text-2xl font-bold mb-6 text-center">Login</h2>
                 <form onSubmit={handleSubmit}>
+                    {/* Form fields */}
                     <div className="mb-4">
                         <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="email">
Index: frontend/src/pages/OrderDetailsPage.tsx
===================================================================
--- frontend/src/pages/OrderDetailsPage.tsx	(revision b2f8f0910ab6c62a03048a03427b188e223c2320)
+++ frontend/src/pages/OrderDetailsPage.tsx	(revision 49f52097c03376323b2951306923bc439cb6dca3)
@@ -53,5 +53,5 @@
     return (
         <div className="p-6">
-            <Link to="/orders" className="text-blue-600 hover:underline mb-4 block">&larr; Back to All Orders</Link>
+            <Link to="/admin/orders" className="text-blue-600 hover:underline mb-4 block">&larr; Back to All Orders</Link>
 
             {orderId && <AddItemModal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} orderId={parseInt(orderId, 10)} onSuccess={handleModalSuccess} />}
Index: frontend/src/pages/OrdersPage.tsx
===================================================================
--- frontend/src/pages/OrdersPage.tsx	(revision b2f8f0910ab6c62a03048a03427b188e223c2320)
+++ frontend/src/pages/OrdersPage.tsx	(revision 49f52097c03376323b2951306923bc439cb6dca3)
@@ -81,5 +81,5 @@
                                 <td className="px-5 py-5 border-b border-gray-200 bg-white text-sm text-right">
                                     {/* Update this button to a Link */}
-                                    <Link to={`/orders/${order.id}`} className="text-indigo-600 hover:text-indigo-900 font-semibold">
+                                    <Link to={`/admin/orders/${order.id}`} className="text-indigo-600 hover:text-indigo-900 font-semibold">
                                         View Details
                                     </Link>
Index: frontend/src/pages/public/MenuPage.tsx
===================================================================
--- frontend/src/pages/public/MenuPage.tsx	(revision 49f52097c03376323b2951306923bc439cb6dca3)
+++ frontend/src/pages/public/MenuPage.tsx	(revision 49f52097c03376323b2951306923bc439cb6dca3)
@@ -0,0 +1,129 @@
+// src/pages/public/MenuPage.tsx
+import { useEffect, useState } from 'react';
+import type { CategoryDto, ProductDto, CreateOrderDto, CreateOrderItemDto } from '../../types/api';
+import { categoryRepository } from '../../api/categoryRepository';
+import { productRepository } from '../../api/productRepository';
+import { orderRepository } from '../../api/orderRepository';
+import { CartSidebar } from '../../components/public/CartSidebar';
+import { Modal } from '../../components/Modal';
+import { useAuth } from '../../hooks/useAuth';
+import { useNavigate } from 'react-router-dom';
+import { CheckoutForm } from '../../components/public/CheckoutForm';
+
+interface CartItem extends ProductDto {
+    quantity: number;
+}
+
+export const MenuPage = () => {
+    const { isAuthenticated } = useAuth();
+    const navigate = useNavigate();
+    const [categories, setCategories] = useState<CategoryDto[]>([]);
+    const [products, setProducts] = useState<ProductDto[]>([]);
+    const [selectedCategoryId, setSelectedCategoryId] = useState<number | null>(null);
+    const [cart, setCart] = useState<Record<number, CartItem>>({});
+    const [isCheckoutModalOpen, setIsCheckoutModalOpen] = useState(false);
+    const [isSubmitting, setIsSubmitting] = useState(false);
+
+    useEffect(() => {
+        Promise.all([
+            categoryRepository.getAllCategories(),
+            productRepository.getAllProducts(),
+        ]).then(([catData, prodData]) => {
+            const availableCats = catData.filter(c => c.is_available);
+            setCategories(availableCats);
+            setProducts(prodData);
+            if (availableCats.length > 0) {
+                setSelectedCategoryId(availableCats[0].id);
+            }
+        }).catch(console.error);
+    }, []);
+
+    const updateCart = (product: ProductDto, change: 1 | -1) => {
+        setCart(prevCart => {
+            const existingItem = prevCart[product.id];
+            const newQuantity = (existingItem?.quantity || 0) + change;
+            if (newQuantity <= 0) {
+                const { [product.id]: _, ...rest } = prevCart;
+                return rest;
+            }
+            return { ...prevCart, [product.id]: { ...product, quantity: newQuantity } };
+        });
+    };
+
+    const handleCheckout = () => {
+        if (!isAuthenticated) {
+            alert("Please log in or register to place an order.");
+            navigate('/login');
+            return;
+        }
+        setIsCheckoutModalOpen(true);
+    };
+
+    const handleConfirmOrder = async (data: { delivery_address: string }) => {
+        setIsSubmitting(true);
+        const orderItems: CreateOrderItemDto[] = Object.values(cart).map(item => ({
+            product_id: item.id,
+            quantity: item.quantity,
+            price: item.price,
+            is_processed: false,
+        }));
+
+        const orderData: CreateOrderDto = {
+            order_items: orderItems,
+            status: "PENDING",
+            type: "ONLINE",
+            delivery_address: data.delivery_address,
+        };
+
+        try {
+            await orderRepository.createOnlineOrder(orderData);
+            alert("Order placed successfully!");
+            setCart({});
+            setIsCheckoutModalOpen(false);
+        } catch (error) {
+            alert("Failed to place order.");
+
+            console.error(error);
+        } finally {
+            setIsSubmitting(false);
+        }
+    };
+
+    const filteredProducts = products.filter(p => p.category.id === selectedCategoryId);
+
+    return (
+        <div className="flex flex-col md:flex-row p-4 gap-4 bg-gray-50 h-[calc(100vh-68px)]">
+            {/* Menu */}
+            <div className="flex-grow">
+                <div className="flex space-x-2 overflow-x-auto pb-2">
+                    {categories.map(cat => (
+                        <button key={cat.id} onClick={() => setSelectedCategoryId(cat.id)}
+                            className={`px-4 py-2 rounded-full font-semibold whitespace-nowrap ${selectedCategoryId === cat.id ? 'bg-blue-500 text-white' : 'bg-white'}`}>
+                            {cat.name}
+                        </button>
+                    ))}
+                </div>
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mt-4">
+                    {filteredProducts.map(prod => (
+                        <div key={prod.id} className="bg-white p-4 rounded-lg shadow">
+                            <h4 className="font-bold">{prod.name}</h4>
+                            <p className="text-sm text-gray-500">{prod.description}</p>
+                            <div className="flex justify-between items-center mt-2">
+                                <span className="font-semibold">${prod.price.toFixed(2)}</span>
+                                <button onClick={() => updateCart(prod, 1)} className="bg-blue-100 text-blue-800 font-bold py-1 px-3 rounded">Add</button>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            </div>
+            {/* Cart */}
+            <div className="w-full md:w-80 lg:w-96 flex-shrink-0">
+                <CartSidebar cart={cart} onUpdateQuantity={updateCart} onCheckout={handleCheckout} />
+            </div>
+
+            <Modal isOpen={isCheckoutModalOpen} onClose={() => setIsCheckoutModalOpen(false)} title="Complete Your Order">
+                <CheckoutForm onSubmit={handleConfirmOrder} isSubmitting={isSubmitting} />
+            </Modal>
+        </div>
+    );
+};
Index: frontend/src/pages/public/MyOrdersPage.tsx
===================================================================
--- frontend/src/pages/public/MyOrdersPage.tsx	(revision 49f52097c03376323b2951306923bc439cb6dca3)
+++ frontend/src/pages/public/MyOrdersPage.tsx	(revision 49f52097c03376323b2951306923bc439cb6dca3)
@@ -0,0 +1,67 @@
+// src/pages/public/MyOrdersPage.tsx
+import { useEffect, useState } from 'react';
+import type { OrderDto } from '../../types/api';
+import { orderRepository } from '../../api/orderRepository';
+import { useAuth } from '../../hooks/useAuth';
+
+const getStatusColor = (status: string) => {
+    switch (status) {
+        case 'COMPLETED': return 'bg-green-100 text-green-800';
+        case 'CANCELED': return 'bg-red-100 text-red-800';
+        case 'IN_PROGRESS': return 'bg-yellow-100 text-yellow-800';
+        default: return 'bg-blue-100 text-blue-800';
+    }
+};
+
+export const MyOrdersPage = () => {
+    const { user } = useAuth();
+    const [orders, setOrders] = useState<OrderDto[]>([]);
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        if (user) {
+            setLoading(true);
+            orderRepository.getOnlineOrdersByCustomer(user.id)
+                .then(setOrders)
+                .catch(console.error)
+                .finally(() => setLoading(false));
+        }
+    }, [user]);
+
+    if (loading) return <p className="p-6">Loading your orders...</p>;
+
+    return (
+        <div className="p-6 bg-gray-50 min-h-screen">
+            <h1 className="text-3xl font-bold mb-4">My Orders</h1>
+
+            {orders.length === 0 ? (
+                <p>You haven't placed any orders yet. Visit our menu to get started!</p>
+            ) : (
+                <div className="space-y-4">
+                    {orders.map(order => {
+                        const totalPrice = order.order_items.reduce((sum, item) => sum + (item.price * item.quantity), 0);
+                        return (
+                            <div key={order.id} className="bg-white p-4 rounded-lg shadow-md">
+                                <div className="flex justify-between items-start">
+                                    <div>
+                                        <p className="font-bold text-lg">Order #{order.id}</p>
+                                        <p className="text-sm text-gray-500">
+                                            Placed on: {new Date(order.timestamp).toLocaleDateString()}
+                                        </p>
+                                    </div>
+                                    <span className={`px-2 py-1 rounded-full text-xs font-semibold ${getStatusColor(order.status)}`}>
+                                        {order.status.replace('_', ' ')}
+                                    </span>
+                                </div>
+                                <div className="mt-4 border-t pt-2">
+                                    <p><strong>Address:</strong> {order.delivery_address}</p>
+                                    <p><strong>Total:</strong> ${totalPrice.toFixed(2)}</p>
+                                </div>
+                            </div>
+                        );
+                    })}
+                </div>
+            )}
+        </div>
+    );
+};
Index: frontend/src/pages/public/MyReservationsPage.tsx
===================================================================
--- frontend/src/pages/public/MyReservationsPage.tsx	(revision 49f52097c03376323b2951306923bc439cb6dca3)
+++ frontend/src/pages/public/MyReservationsPage.tsx	(revision 49f52097c03376323b2951306923bc439cb6dca3)
@@ -0,0 +1,75 @@
+// src/pages/public/MyReservationsPage.tsx
+import { useEffect, useState } from 'react';
+import type { ReservationDto } from '../../types/api';
+import { reservationRepository } from '../../api/reservationRepository';
+import { Modal } from '../../components/Modal';
+import { CreateReservationForm } from '../../components/forms/CreateReservationForm';
+
+export const MyReservationsPage = () => {
+    const [reservations, setReservations] = useState<ReservationDto[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [isModalOpen, setIsModalOpen] = useState(false);
+
+    const fetchReservations = () => {
+        setLoading(true);
+        reservationRepository.getMyReservations()
+            .then(setReservations)
+            .catch(console.error)
+            .finally(() => setLoading(false));
+    };
+
+    useEffect(() => {
+        fetchReservations();
+    }, []);
+
+    const handleCancel = async (id: number) => {
+        if (window.confirm("Are you sure you want to cancel this reservation?")) {
+            try {
+                await reservationRepository.deleteReservation(id);
+                alert("Reservation canceled.");
+                fetchReservations();
+            } catch (error) {
+                alert("Failed to cancel reservation.");
+            }
+        }
+    };
+
+    const handleFormSuccess = () => {
+        setIsModalOpen(false);
+        fetchReservations();
+    };
+
+    return (
+        <div className="p-6">
+            <div className="flex justify-between items-center mb-4">
+                <h1 className="text-3xl font-bold">My Reservations</h1>
+                <button onClick={() => setIsModalOpen(true)} className="bg-green-500 text-white font-bold py-2 px-4 rounded">
+                    + Make a Reservation
+                </button>
+            </div>
+
+            <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} title="Make a New Reservation">
+                <CreateReservationForm onSuccess={handleFormSuccess} />
+            </Modal>
+
+            {loading ? <p>Loading...</p> : reservations.length === 0 ? (
+                <p>You have no upcoming reservations.</p>
+            ) : (
+                <div className="space-y-4">
+                    {reservations.map(res => (
+                        <div key={res.id} className="bg-white p-4 rounded-lg shadow-md flex justify-between items-center">
+                            <div>
+                                <p><strong>Date:</strong> {new Date(res.datetime).toLocaleDateString()}</p>
+                                <p><strong>Time:</strong> {new Date(res.datetime).toLocaleTimeString()}</p>
+                                <p><strong>Guests:</strong> {res.number_of_people}</p>
+                            </div>
+                            <button onClick={() => handleCancel(res.id)} className="bg-red-500 text-white font-bold py-1 px-3 rounded">
+                                Cancel
+                            </button>
+                        </div>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+};
Index: frontend/src/pages/public/RegisterPage.tsx
===================================================================
--- frontend/src/pages/public/RegisterPage.tsx	(revision 49f52097c03376323b2951306923bc439cb6dca3)
+++ frontend/src/pages/public/RegisterPage.tsx	(revision 49f52097c03376323b2951306923bc439cb6dca3)
@@ -0,0 +1,64 @@
+// src/pages/public/RegisterPage.tsx
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from '../../hooks/useAuth';
+import { authRepository } from '../../api/authRepository';
+
+const registerSchema = z.object({
+    first_name: z.string().min(1, "First name is required"),
+    last_name: z.string().min(1, "Last name is required"),
+    email: z.string().email(),
+    password: z.string().min(6, "Password must be at least 6 characters"),
+    password_confirmation: z.string()
+}).refine(data => data.password === data.password_confirmation, {
+    message: "Passwords do not match",
+    path: ["password_confirmation"],
+});
+
+type RegisterFormData = z.infer<typeof registerSchema>;
+
+export const RegisterPage = () => {
+    const navigate = useNavigate();
+    const { login } = useAuth(); // We'll use this to log the user in after registration
+    const { register, handleSubmit, formState: { errors, isSubmitting } } = useForm<RegisterFormData>({
+        resolver: zodResolver(registerSchema),
+    });
+
+    const onSubmit = async (data: RegisterFormData) => {
+        try {
+            await authRepository.register(data);
+            // Automatically log in the user after successful registration
+            await login({ username: data.email, password: data.password });
+            navigate('/');
+        } catch (error) {
+            console.error(error);
+            alert('Registration failed. The email might already be in use.');
+        }
+    };
+
+    return (
+        <div className="min-h-screen flex items-center justify-center bg-gray-50">
+            <div className="bg-white p-8 rounded-lg shadow-md w-full max-w-md">
+                <h2 className="text-2xl font-bold mb-6 text-center">Create an Account</h2>
+                <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+                    {/* Form fields for first_name, last_name, email, password, password_confirmation */}
+                    <input {...register('first_name')} placeholder="First Name" className="w-full p-2 border rounded" />
+                    {errors.first_name && <p className="text-red-500 text-xs">{errors.first_name.message}</p>}
+                    <input {...register('last_name')} placeholder="Last Name" className="w-full p-2 border rounded" />
+                    {errors.last_name && <p className="text-red-500 text-xs">{errors.last_name.message}</p>}
+                    <input {...register('email')} placeholder="Email" className="w-full p-2 border rounded" />
+                    {errors.email && <p className="text-red-500 text-xs">{errors.email.message}</p>}
+                    <input type="password" {...register('password')} placeholder="Password" className="w-full p-2 border rounded" />
+                    {errors.password && <p className="text-red-500 text-xs">{errors.password.message}</p>}
+                    <input type="password" {...register('password_confirmation')} placeholder="Confirm Password" className="w-full p-2 border rounded" />
+                    {errors.password_confirmation && <p className="text-red-500 text-xs">{errors.password_confirmation.message}</p>}
+                    <button type="submit" disabled={isSubmitting} className="w-full bg-blue-500 text-white p-3 rounded">
+                        {isSubmitting ? 'Registering...' : 'Register'}
+                    </button>
+                </form>
+            </div>
+        </div>
+    );
+};
Index: frontend/src/types/api.ts
===================================================================
--- frontend/src/types/api.ts	(revision b2f8f0910ab6c62a03048a03427b188e223c2320)
+++ frontend/src/types/api.ts	(revision 49f52097c03376323b2951306923bc439cb6dca3)
@@ -180,2 +180,12 @@
   email: string;
 }
+
+// src/types/api.ts (add this interface)
+
+export interface RegisterRequest {
+  email: string;
+  password?: string;
+  password_confirmation?: string;
+  first_name?: string;
+  last_name?: string;
+}
Index: frontend/src/utils/roles.ts
===================================================================
--- frontend/src/utils/roles.ts	(revision b2f8f0910ab6c62a03048a03427b188e223c2320)
+++ frontend/src/utils/roles.ts	(revision 49f52097c03376323b2951306923bc439cb6dca3)
@@ -6,4 +6,7 @@
   FRONT_STAFF: UserType.FRONT_STAFF,
   BACK_STAFF: UserType.BACK_STAFF,
+  CUSTOMER: UserType.CUSTOMER,
+  USER: UserType.USER,
+  EMPLOYEE: UserType.EMPLOYEE,
 };
 
@@ -11,14 +14,14 @@
 export const ROLE_PERMISSIONS: Record<UserType, string[]> = {
   [UserType.MANAGER]: [
-    "/orders",
-    "/reservations",
-    "/categories",
-    "/products",
-    "/shifts",
-    "/employees",
-    "/assignments",
+    "/admin/orders",
+    "/admin/reservations",
+    "/admin/categories",
+    "/admin/products",
+    "/admin/shifts",
+    "/admin/employees",
+    "/admin/assignments",
   ],
-  [UserType.FRONT_STAFF]: ["/orders", "/reservations"],
-  [UserType.BACK_STAFF]: ["/orders"],
+  [UserType.FRONT_STAFF]: ["/admin/orders", "/admin/reservations"],
+  [UserType.BACK_STAFF]: ["/admin/orders"],
   // Other roles are not part of the admin panel MVP
   [UserType.CUSTOMER]: [],