Index: backend/src/main/java/finki/db/tasty_tabs/aspect/annotation/CheckOnDuty.java
===================================================================
--- backend/src/main/java/finki/db/tasty_tabs/aspect/annotation/CheckOnDuty.java	(revision 893cb2e718a83ca5e4fac44b4ab00737f16540ac)
+++ backend/src/main/java/finki/db/tasty_tabs/aspect/annotation/CheckOnDuty.java	(revision 893cb2e718a83ca5e4fac44b4ab00737f16540ac)
@@ -0,0 +1,22 @@
+package finki.db.tasty_tabs.aspect.annotation;
+
+import java.lang.annotation.ElementType;
+import java.lang.annotation.Retention;
+import java.lang.annotation.RetentionPolicy;
+import java.lang.annotation.Target;
+
+/**
+ * Marks a method that requires the employee to be on an active shift.
+ * The aspect associated with this annotation will verify the employee's status
+ * before allowing the method to execute.
+ */
+@Target(ElementType.METHOD)
+@Retention(RetentionPolicy.RUNTIME)
+public @interface CheckOnDuty {
+    /**
+     * Specifies the name of the method parameter that holds the employee's ID.
+     * Defaults to "employeeId". This parameter must be of type Long.
+     * @return The parameter name for the employee ID.
+     */
+    String employeeIdParamName() default "employeeId";
+}
Index: backend/src/main/java/finki/db/tasty_tabs/aspect/annotation/OnDutyAspect.java
===================================================================
--- backend/src/main/java/finki/db/tasty_tabs/aspect/annotation/OnDutyAspect.java	(revision 893cb2e718a83ca5e4fac44b4ab00737f16540ac)
+++ backend/src/main/java/finki/db/tasty_tabs/aspect/annotation/OnDutyAspect.java	(revision 893cb2e718a83ca5e4fac44b4ab00737f16540ac)
@@ -0,0 +1,45 @@
+package finki.db.tasty_tabs.aspect.annotation;
+
+import finki.db.tasty_tabs.aspect.annotation.CheckOnDuty;
+import finki.db.tasty_tabs.entity.exceptions.EmployeeNotOnDutyException;
+import finki.db.tasty_tabs.service.EmployeeService;
+import finki.db.tasty_tabs.web.security.AuthenticatedUser;
+import org.aspectj.lang.annotation.Aspect;
+import org.aspectj.lang.annotation.Before;
+import org.springframework.security.authentication.InsufficientAuthenticationException;
+import org.springframework.security.core.Authentication;
+import org.springframework.security.core.context.SecurityContextHolder;
+import org.springframework.stereotype.Component;
+
+@Aspect
+@Component
+public class OnDutyAspect {
+
+    private final EmployeeService employeeService;
+
+    public OnDutyAspect(EmployeeService employeeService) {
+        this.employeeService = employeeService;
+    }
+
+    /**
+     * This advice runs before any method annotated with @CheckOnDuty.
+     * It retrieves the currently logged-in user from the SecurityContext,
+     * checks if they are on an active shift, and throws an exception if not.
+     */
+    @Before("@annotation(finki.db.tasty_tabs.aspect.annotation.CheckOnDuty)")
+    public void checkIsOnDuty() {
+        Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
+
+        // Check if the user is authenticated at all
+        if (authentication == null || !authentication.isAuthenticated() || !(authentication.getPrincipal() instanceof AuthenticatedUser currentUser)) {
+            throw new InsufficientAuthenticationException("User must be authenticated to perform this action.");
+        }
+
+        // Get the custom principal object
+        Long employeeId = currentUser.getId();
+
+        if (!employeeService.isOnActiveShift(employeeId)) {
+            throw new EmployeeNotOnDutyException("Employee with ID " + employeeId + " is not on an active shift.");
+        }
+    }
+}
Index: backend/src/main/java/finki/db/tasty_tabs/entity/exceptions/EmployeeNotOnDutyException.java
===================================================================
--- backend/src/main/java/finki/db/tasty_tabs/entity/exceptions/EmployeeNotOnDutyException.java	(revision 893cb2e718a83ca5e4fac44b4ab00737f16540ac)
+++ backend/src/main/java/finki/db/tasty_tabs/entity/exceptions/EmployeeNotOnDutyException.java	(revision 893cb2e718a83ca5e4fac44b4ab00737f16540ac)
@@ -0,0 +1,7 @@
+package finki.db.tasty_tabs.entity.exceptions;
+
+public class EmployeeNotOnDutyException extends RuntimeException {
+    public EmployeeNotOnDutyException(String message) {
+        super(message);
+    }
+}
Index: backend/src/main/java/finki/db/tasty_tabs/repository/AssignmentRepository.java
===================================================================
--- backend/src/main/java/finki/db/tasty_tabs/repository/AssignmentRepository.java	(revision aeb3376bfa00f3a36aed23a25f6b2825a6e9095c)
+++ backend/src/main/java/finki/db/tasty_tabs/repository/AssignmentRepository.java	(revision 893cb2e718a83ca5e4fac44b4ab00737f16540ac)
@@ -13,3 +13,4 @@
     Optional<Assignment> findFirstByEmployee_IdOrderByShiftStartAsc(Long employeeId);
     Optional<Assignment> findFirstByEmployee_IdAndClockOutTimeNullOrderByShiftStartAsc(Long employeeId);
+    Optional<Assignment> findFirstByEmployee_IdAndClockInTimeNotNullAndClockOutTimeNull(Long employeeId);
 }
Index: backend/src/main/java/finki/db/tasty_tabs/service/EmployeeService.java
===================================================================
--- backend/src/main/java/finki/db/tasty_tabs/service/EmployeeService.java	(revision aeb3376bfa00f3a36aed23a25f6b2825a6e9095c)
+++ backend/src/main/java/finki/db/tasty_tabs/service/EmployeeService.java	(revision 893cb2e718a83ca5e4fac44b4ab00737f16540ac)
@@ -13,3 +13,4 @@
 
     AssignmentDto getNextShiftForEmployee(Long employeeId);
+    boolean isOnActiveShift(Long employeeId);
 }
Index: backend/src/main/java/finki/db/tasty_tabs/service/impl/EmployeeServiceImpl.java
===================================================================
--- backend/src/main/java/finki/db/tasty_tabs/service/impl/EmployeeServiceImpl.java	(revision aeb3376bfa00f3a36aed23a25f6b2825a6e9095c)
+++ backend/src/main/java/finki/db/tasty_tabs/service/impl/EmployeeServiceImpl.java	(revision 893cb2e718a83ca5e4fac44b4ab00737f16540ac)
@@ -13,4 +13,5 @@
 
 import java.util.List;
+import java.util.Optional;
 
 @Service
@@ -56,4 +57,10 @@
 
         return AssignmentDto.fromAssignment(assignment);
+    }
+
+    @Override
+    public boolean isOnActiveShift(Long employeeId) {
+        Optional<Assignment> assignment = assignmentRepository.findFirstByEmployee_IdAndClockInTimeNotNullAndClockOutTimeNull(employeeId);
+        return assignment.isPresent();
     }
 
Index: backend/src/main/java/finki/db/tasty_tabs/service/impl/OrderServiceImpl.java
===================================================================
--- backend/src/main/java/finki/db/tasty_tabs/service/impl/OrderServiceImpl.java	(revision aeb3376bfa00f3a36aed23a25f6b2825a6e9095c)
+++ backend/src/main/java/finki/db/tasty_tabs/service/impl/OrderServiceImpl.java	(revision 893cb2e718a83ca5e4fac44b4ab00737f16540ac)
@@ -1,4 +1,5 @@
 package finki.db.tasty_tabs.service.impl;
 
+import finki.db.tasty_tabs.aspect.annotation.CheckOnDuty;
 import finki.db.tasty_tabs.entity.*;
 import finki.db.tasty_tabs.entity.exceptions.*;
@@ -44,4 +45,5 @@
 
     @Override
+    @CheckOnDuty
     public Order updateOrder(Long id, CreateOrderDto dto) {
         Order existingOrder = findById(id);
@@ -82,4 +84,5 @@
 
     @Override
+    @CheckOnDuty
     public void updateOrderStatus(Long orderId, String newStatus) {
         Order order = findById(orderId);
@@ -91,4 +94,5 @@
     @Override
     @Transactional
+    @CheckOnDuty
     public OrderItem addItemToOrder(Long orderId, CreateOrderItemDto itemDto) {
         Order order = findById(orderId);
@@ -107,4 +111,5 @@
     @Override
     @Transactional
+    @CheckOnDuty
     public void decreaseOrderItemQuantity(Long orderItemId) {
         OrderItem orderItem = orderItemRepository.findById(orderItemId)
@@ -120,4 +125,5 @@
     @Override
     @Transactional
+    @CheckOnDuty
     public OrderItem updateOrderItem(Long orderItemId, CreateOrderItemDto itemDto) {
         OrderItem orderItem = orderItemRepository.findById(orderItemId)
@@ -134,4 +140,5 @@
     @Override
     @Transactional
+    @CheckOnDuty
     public void deleteOrderItem(Long orderItemId) {
         orderItemRepository.deleteById(orderItemId);
@@ -197,4 +204,5 @@
     @Override
     @Transactional
+    @CheckOnDuty
     public TabOrder createTabOrder(CreateOrderDto dto, String userEmail) {
         log.debug("User {} creating a tab order for table {}", userEmail, dto.tableNumber());
@@ -254,4 +262,5 @@
     @Override
     @Transactional
+    @CheckOnDuty
     public TabOrder assignOrderToStaff(Long orderId, Long frontStaffId) {
         TabOrder tabOrder = tabOrderRepository.findById(orderId)
@@ -266,4 +275,5 @@
     @Override
     @Transactional
+    @CheckOnDuty
     public Order cancelOrder(Long orderId) {
         Order order = findById(orderId);
Index: backend/src/main/java/finki/db/tasty_tabs/service/impl/PaymentServiceImpl.java
===================================================================
--- backend/src/main/java/finki/db/tasty_tabs/service/impl/PaymentServiceImpl.java	(revision aeb3376bfa00f3a36aed23a25f6b2825a6e9095c)
+++ backend/src/main/java/finki/db/tasty_tabs/service/impl/PaymentServiceImpl.java	(revision 893cb2e718a83ca5e4fac44b4ab00737f16540ac)
@@ -2,4 +2,5 @@
 
 
+import finki.db.tasty_tabs.aspect.annotation.CheckOnDuty;
 import finki.db.tasty_tabs.entity.Order;
 import finki.db.tasty_tabs.entity.Payment;
@@ -31,4 +32,5 @@
     @Override
     @Transactional
+    @CheckOnDuty
     public Payment createPayment(CreatePaymentDto dto) {
         log.info("Creating payment for orderId: {}", dto.orderId());
@@ -70,4 +72,5 @@
     @Override
     @Transactional
+    @CheckOnDuty
     public Payment updatePayment(Long id, CreatePaymentDto dto) {
         Payment existingPayment = findPaymentById(id);
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 aeb3376bfa00f3a36aed23a25f6b2825a6e9095c)
+++ backend/src/main/java/finki/db/tasty_tabs/service/impl/ReservationServiceImpl.java	(revision 893cb2e718a83ca5e4fac44b4ab00737f16540ac)
@@ -131,5 +131,5 @@
                 reservation.getId(),
                 frontStaff.getId(),
-                table.getTableNumber().longValue()
+                table.getTableNumber()
         );
 
Index: backend/src/main/java/finki/db/tasty_tabs/web/exception/GlobalExceptionHandler.java
===================================================================
--- backend/src/main/java/finki/db/tasty_tabs/web/exception/GlobalExceptionHandler.java	(revision aeb3376bfa00f3a36aed23a25f6b2825a6e9095c)
+++ backend/src/main/java/finki/db/tasty_tabs/web/exception/GlobalExceptionHandler.java	(revision 893cb2e718a83ca5e4fac44b4ab00737f16540ac)
@@ -96,4 +96,6 @@
         log.error("Unexpected exception: {}", exception.getMessage(), exception);
 
+        exception.printStackTrace();
+
         return errorDetail;
     }
Index: backend/src/main/java/finki/db/tasty_tabs/web/security/AuthenticatedUser.java
===================================================================
--- backend/src/main/java/finki/db/tasty_tabs/web/security/AuthenticatedUser.java	(revision 893cb2e718a83ca5e4fac44b4ab00737f16540ac)
+++ backend/src/main/java/finki/db/tasty_tabs/web/security/AuthenticatedUser.java	(revision 893cb2e718a83ca5e4fac44b4ab00737f16540ac)
@@ -0,0 +1,10 @@
+package finki.db.tasty_tabs.web.security;
+
+import org.springframework.security.core.userdetails.UserDetails;
+
+/**
+ * An extension of Spring Security's UserDetails to include the user's primary ID.
+ */
+public interface AuthenticatedUser extends UserDetails {
+    Long getId();
+}
Index: backend/src/main/java/finki/db/tasty_tabs/web/security/CustomUserDetails.java
===================================================================
--- backend/src/main/java/finki/db/tasty_tabs/web/security/CustomUserDetails.java	(revision 893cb2e718a83ca5e4fac44b4ab00737f16540ac)
+++ backend/src/main/java/finki/db/tasty_tabs/web/security/CustomUserDetails.java	(revision 893cb2e718a83ca5e4fac44b4ab00737f16540ac)
@@ -0,0 +1,63 @@
+package finki.db.tasty_tabs.web.security;
+
+import finki.db.tasty_tabs.entity.User;
+import org.springframework.security.core.GrantedAuthority;
+import org.springframework.security.core.authority.SimpleGrantedAuthority;
+
+import java.util.Collection;
+import java.util.List;
+
+// Implement the interface we defined earlier
+public class CustomUserDetails implements AuthenticatedUser {
+
+    private final User user;
+
+    public CustomUserDetails(User user) {
+        this.user = user;
+    }
+
+    // --- This is the custom method our Aspect needs ---
+    @Override
+    public Long getId() {
+        return user.getId();
+    }
+    
+    // --- Below are the standard UserDetails methods ---
+    @Override
+    public Collection<? extends GrantedAuthority> getAuthorities() {
+        // You should map your employee type/role to a Spring Security authority
+        // The "ROLE_" prefix is a standard convention.
+        return List.of(new SimpleGrantedAuthority("ROLE_" + user.getUserType().name()));
+    }
+
+    @Override
+    public String getPassword() {
+        return user.getPassword();
+    }
+
+    @Override
+    public String getUsername() {
+        // The "username" in this context is the email
+        return user.getEmail();
+    }
+
+    @Override
+    public boolean isAccountNonExpired() {
+        return true;
+    }
+
+    @Override
+    public boolean isAccountNonLocked() {
+        return true;
+    }
+
+    @Override
+    public boolean isCredentialsNonExpired() {
+        return true;
+    }
+
+    @Override
+    public boolean isEnabled() {
+        return true;
+    }
+}
Index: backend/src/main/java/finki/db/tasty_tabs/web/security/UserDetailsServiceImpl.java
===================================================================
--- backend/src/main/java/finki/db/tasty_tabs/web/security/UserDetailsServiceImpl.java	(revision aeb3376bfa00f3a36aed23a25f6b2825a6e9095c)
+++ backend/src/main/java/finki/db/tasty_tabs/web/security/UserDetailsServiceImpl.java	(revision 893cb2e718a83ca5e4fac44b4ab00737f16540ac)
@@ -48,9 +48,5 @@
         log.debug("Applying role {} to user {}", grantedAuthority.getAuthority(), user.getId());
 
-        return new org.springframework.security.core.userdetails.User(
-                user.getEmail(),
-                user.getPassword(),
-                authorities
-        );
+        return new CustomUserDetails(user);
     }
 
Index: frontend/src/api/reservationRepository.ts
===================================================================
--- frontend/src/api/reservationRepository.ts	(revision aeb3376bfa00f3a36aed23a25f6b2825a6e9095c)
+++ frontend/src/api/reservationRepository.ts	(revision 893cb2e718a83ca5e4fac44b4ab00737f16540ac)
@@ -6,5 +6,5 @@
 export const reservationRepository = {
   getTodayReservations: async (): Promise<ReservationDto[]> => {
-    const { data } = await axiosClient.get("/reservations/today");
+    const { data } = await axiosClient.get("/reservations");
     return data;
   },
Index: frontend/src/components/reservations/ReservationCard.tsx
===================================================================
--- frontend/src/components/reservations/ReservationCard.tsx	(revision 893cb2e718a83ca5e4fac44b4ab00737f16540ac)
+++ frontend/src/components/reservations/ReservationCard.tsx	(revision 893cb2e718a83ca5e4fac44b4ab00737f16540ac)
@@ -0,0 +1,119 @@
+import type { ReservationDto, UserDto } from "../../types/api";
+
+const CalendarIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-5 h-5 text-slate-400"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>;
+const ClockIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-5 h-5 text-slate-400"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>;
+const UsersIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-5 h-5 text-slate-400"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>;
+const HourglassIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-5 h-5 text-slate-400"><path d="M5 22h14" /><path d="M5 2h14" /><path d="M17 22v-4.172a2 2 0 0 0-.586-1.414L12 12l-4.414 4.414A2 2 0 0 0 7 17.828V22" /><path d="M7 2v4.172a2 2 0 0 0 .586 1.414L12 12l4.414-4.414A2 2 0 0 0 17 6.172V2" /></svg>;
+const TableIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-5 h-5 text-slate-400"><path d="M2 10h20" /><path d="M2 16h20" /><path d="M12 2v20" /><path d="M6 2v20" /><path d="M18 2v20" /></svg>;
+const CheckCircleIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-5 h-5 text-slate-400"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" /><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>;
+const CheckIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>;
+const XIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>;
+
+// Status Badge Component
+const StatusBadge = ({ status }: { status: "PENDING" | "ACCEPTED" | "COMPLETED" | "CANCELLED" }) => {
+    const statusStyles = {
+        PENDING: "bg-amber-100 text-amber-800",
+        ACCEPTED: "bg-sky-100 text-sky-800",
+        COMPLETED: "bg-slate-200 text-slate-800",
+        CANCELLED: "bg-red-100 text-red-800",
+    };
+
+    return (
+        <span className={`px-3 py-1 text-xs font-semibold rounded-full ${statusStyles[status]}`}>
+            {status}
+        </span>
+    );
+};
+
+interface ReservationCardProps {
+    reservation: ReservationDto;
+    user: UserDto | null;
+    onAccept: (reservation: ReservationDto) => void;
+    onDecline: (reservation: ReservationDto) => void;
+}
+
+const ReservationCard = ({ reservation, user, onAccept, onDecline }: ReservationCardProps) => {
+    const {
+        email,
+        datetime,
+        number_of_people,
+        stay_length,
+        status,
+        assigned_table_number,
+        front_staff_name: front_staff_name
+    } = reservation;
+
+    const reservationDate = new Date(datetime);
+    const dateOptions = { year: 'numeric', month: 'long', day: 'numeric' };
+
+    return (
+        <div className="bg-white rounded-xl shadow-md overflow-hidden transform hover:-translate-y-1 hover:shadow-lg transition-all duration-300 flex flex-col">
+            {/* Card Header */}
+            <div className="p-4 md:p-5 border-b border-slate-200 flex justify-between items-start">
+                <h3 className="font-bold text-lg text-slate-800 truncate pr-2" title={email}>{email}</h3>
+                <StatusBadge status={status} />
+            </div>
+
+            {/* Card Body */}
+            <div className="p-4 md:p-5 flex-grow">
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-y-4 gap-x-2">
+                    <div className="flex items-center space-x-3">
+                        <CalendarIcon />
+                        <span className="text-sm text-slate-600">{reservationDate.toLocaleDateString(undefined, dateOptions)}</span>
+                    </div>
+                    <div className="flex items-center space-x-3">
+                        <ClockIcon />
+                        <span className="text-sm text-slate-600">{reservationDate.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</span>
+                    </div>
+                    <div className="flex items-center space-x-3">
+                        <UsersIcon />
+                        <span className="text-sm text-slate-600">{number_of_people} Guests</span>
+                    </div>
+                    {stay_length ? <div className="flex items-center space-x-3">
+                        <HourglassIcon />
+                        <span className="text-sm text-slate-600">{stay_length} min{stay_length > 1 ? 's' : ''} stay</span>
+                    </div> : <span className="text-sm text-slate-400 italic">No stay length specified</span>}
+                </div>
+
+                {status === 'ACCEPTED' && (
+                    <div className="mt-4 pt-4 border-t border-slate-200/60 space-y-4">
+                        {assigned_table_number && (
+                            <div className="flex items-center space-x-3">
+                                <TableIcon />
+                                <span className="text-sm text-slate-600 font-medium">Assigned Table: <span className="font-bold text-slate-800">#{assigned_table_number}</span></span>
+                            </div>
+                        )}
+                        {front_staff_name && (
+                            <div className="flex items-center space-x-3">
+                                <CheckCircleIcon />
+                                <span className="text-sm text-slate-600">Accepted by: <span className="font-medium text-slate-800 truncate">{front_staff_name}</span></span>
+                            </div>
+                        )}
+                    </div>
+                )}
+            </div>
+
+            {/* Card Footer with Actions */}
+            {user?.user_type === "FRONT_STAFF" && status === "PENDING" && (
+                <div className="px-4 md:px-5 py-3 bg-slate-50 flex space-x-2 justify-end">
+                    <button
+                        onClick={() => onDecline(reservation)}
+                        className="px-3 py-2 text-sm font-medium text-red-700 bg-red-100 rounded-lg hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-colors duration-200 flex items-center space-x-1.5"
+                    >
+                        <XIcon />
+                        <span>Decline</span>
+                    </button>
+                    <button
+                        onClick={() => onAccept(reservation)}
+                        className="px-3 py-2 text-sm font-medium text-green-700 bg-green-100 rounded-lg hover:bg-green-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-colors duration-200 flex items-center space-x-1.5"
+                    >
+                        <CheckIcon />
+                        <span>Accept</span>
+                    </button>
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default ReservationCard;
Index: frontend/src/pages/ReservationsPage.tsx
===================================================================
--- frontend/src/pages/ReservationsPage.tsx	(revision aeb3376bfa00f3a36aed23a25f6b2825a6e9095c)
+++ frontend/src/pages/ReservationsPage.tsx	(revision 893cb2e718a83ca5e4fac44b4ab00737f16540ac)
@@ -7,4 +7,5 @@
 import { CreateReservationForm } from '../components/forms/CreateReservationForm'; // Import the new form
 import { useAuth } from '../hooks/useAuth';
+import ReservationCard from '../components/reservations/ReservationCard';
 
 export const ReservationsPage = () => {
@@ -35,4 +36,15 @@
     };
 
+    const handleDeleteReservation = async (reservationId: number) => {
+        if (window.confirm('Are you sure you want to decline this reservation?')) {
+            try {
+                await reservationRepository.deleteReservation(reservationId);
+                fetchReservations();
+            } catch (error) {
+                alert('Failed to decline reservation.');
+            }
+        }
+    };
+
     const handleFormSuccess = () => {
         // This function can now be used by both forms
@@ -47,5 +59,5 @@
         <div className="p-6">
             <div className="flex justify-between items-center mb-4">
-                <h1 className="text-3xl font-bold">Today's Reservations</h1>
+                <h1 className="text-3xl font-bold">All Reservations</h1>
                 <button
                     onClick={() => setIsCreateModalOpen(true)}
@@ -79,21 +91,18 @@
             )}
 
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-                {reservations.map(res => (
-                    <div key={res.id} className="bg-white p-4 rounded-lg shadow">
-                        <p className="font-bold">{res.email}</p>
-                        <p>Time: {new Date(res.datetime).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</p>
-                        <p>Guests: {res.number_of_people}</p>
-                        {user?.user_type === "FRONT_STAFF" && <div className="mt-4">
-                            <button
-                                onClick={() => handleOpenAcceptModal(res)}
-                                className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-3 rounded text-sm"
-                            >
-                                Accept
-                            </button>
-                        </div>}
-                    </div>
-                ))}
+            <div className="min-h-screen p-4 sm:p-6 lg:p-8">
+                <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
+                    {reservations.map(res => (
+                        <ReservationCard
+                            key={res.id}
+                            reservation={res}
+                            user={user}
+                            onAccept={handleOpenAcceptModal}
+                            onDecline={() => handleDeleteReservation(res.id)}
+                        />
+                    ))}
+                </div>
             </div>
+
         </div>
     );
Index: frontend/src/types/api.ts
===================================================================
--- frontend/src/types/api.ts	(revision aeb3376bfa00f3a36aed23a25f6b2825a6e9095c)
+++ frontend/src/types/api.ts	(revision 893cb2e718a83ca5e4fac44b4ab00737f16540ac)
@@ -75,4 +75,7 @@
   creation_timestamp: string;
   number_of_people: number;
+  assigned_table_number?: number;
+  front_staff_name?: string; // Assuming manager email
+  status: "PENDING" | "ACCEPTED" | "CANCELLED" | "COMPLETED";
   email: string; // Assuming user email
 }