diff --git a/apps/backend/src/orders/order.controller.ts b/apps/backend/src/orders/order.controller.ts
index 85c87ee7a..e74b8369d 100644
--- a/apps/backend/src/orders/order.controller.ts
+++ b/apps/backend/src/orders/order.controller.ts
@@ -10,6 +10,7 @@ import {
   ValidationPipe,
   UploadedFiles,
   UseInterceptors,
+  PayloadTooLargeException,
 } from '@nestjs/common';
 import { ApiBody } from '@nestjs/swagger';
 import { OrdersService } from './order.service';
@@ -164,16 +165,35 @@ export class OrdersController {
     },
   })
   @UseInterceptors(
-    FilesInterceptor('photos', 10, { storage: multer.memoryStorage() }),
+    FilesInterceptor('photos', 10, {
+      storage: multer.memoryStorage(),
+      limits: {
+        fileSize: 5 * 1024 * 1024, // 5 MB in bytes
+      },
+    }),
   )
   async confirmDelivery(
     @Param('orderId', ParseIntPipe) orderId: number,
     @Body() body: ConfirmDeliveryDto,
     @UploadedFiles() photos?: Express.Multer.File[],
   ): Promise<Order> {
-    const uploadedPhotoUrls =
-      photos && photos.length > 0 ? await this.awsS3Service.upload(photos) : [];
-
-    return this.ordersService.confirmDelivery(orderId, body, uploadedPhotoUrls);
+    try {
+      const uploadedPhotoUrls =
+        photos && photos.length > 0
+          ? await this.awsS3Service.upload(photos)
+          : [];
+      return this.ordersService.confirmDelivery(
+        orderId,
+        body,
+        uploadedPhotoUrls,
+      );
+    } catch (err: any) {
+      if (err.code === 'LIMIT_FILE_SIZE') {
+        throw new PayloadTooLargeException(
+          'Each photo must be 5 MB or smaller',
+        );
+      }
+      throw err;
+    }
   }
 }
diff --git a/apps/frontend/src/api/apiClient.ts b/apps/frontend/src/api/apiClient.ts
index 37e4ed11f..9710febe2 100644
--- a/apps/frontend/src/api/apiClient.ts
+++ b/apps/frontend/src/api/apiClient.ts
@@ -22,8 +22,11 @@ import {
   OrderSummary,
   UserDto,
   OrderDetails,
+  ConfirmDeliveryDto,
+  OrderWithoutRelations,
   Assignments,
   FoodRequestSummaryDto,
+  OrderWithoutFoodManufacturer,
   PantryWithUser,
 } from 'types/types';
 
@@ -169,6 +172,14 @@ export class ApiClient {
       .then((response) => response.data);
   }
 
+  public async getPantryOrders(
+    pantryId: number,
+  ): Promise<OrderWithoutFoodManufacturer[]> {
+    return this.axiosInstance
+      .get(`/api/pantries/${pantryId}/orders`)
+      .then((response) => response.data);
+  }
+
   public async getPantry(pantryId: number): Promise<PantryWithUser> {
     return this.get(`/api/pantries/${pantryId}`) as Promise<PantryWithUser>;
   }
@@ -226,6 +237,32 @@ export class ApiClient {
       .then((response) => response.data);
   }
 
+  public async confirmOrderDelivery(
+    orderId: number,
+    dto: ConfirmDeliveryDto,
+    photos: File[],
+  ): Promise<OrderWithoutRelations> {
+    const formData = new FormData();
+
+    // DTO fields
+    formData.append('dateReceived', dto.dateReceived);
+    if (dto.feedback) {
+      formData.append('feedback', dto.feedback);
+    }
+
+    // files (must be key = "photos")
+    for (const file of photos) {
+      formData.append('photos', file);
+    }
+
+    const { data } = await this.axiosInstance.patch(
+      `/api/orders/${orderId}/confirm-delivery`,
+      formData,
+    );
+
+    return data;
+  }
+
   public async postManufacturer(
     data: ManufacturerApplicationDto,
   ): Promise<AxiosResponse<void>> {
@@ -294,31 +331,6 @@ export class ApiClient {
     return data as FoodRequest[];
   }
 
-  public async confirmDelivery(
-    requestId: number,
-    data: FormData,
-  ): Promise<void> {
-    try {
-      const response = await this.axiosInstance.post(
-        `/api/requests/${requestId}/confirm-delivery`,
-        data,
-      );
-
-      if (response.status === 200) {
-        alert('Delivery confirmation submitted successfully');
-        if (this.navigate) {
-          this.navigate('/request-form');
-        } else {
-          window.location.href = '/request-form';
-        }
-      } else {
-        alert(`Failed to submit: ${response.statusText}`);
-      }
-    } catch (error) {
-      alert(`Error submitting delivery confirmation: ${error}`);
-    }
-  }
-
   public async getCurrentUserPantryId(): Promise<number> {
     const data = await this.get('/api/pantries/my-id');
     return data as number;
diff --git a/apps/frontend/src/app.tsx b/apps/frontend/src/app.tsx
index d679ca6e4..7ca9980c2 100644
--- a/apps/frontend/src/app.tsx
+++ b/apps/frontend/src/app.tsx
@@ -5,7 +5,6 @@ import PantryPastOrders from '@containers/pantryPastOrders';
 import Pantries from '@containers/pantries';
 import Orders from '@containers/orders';
 import PantryDashboard from '@containers/pantryDashboard';
-import { submitDeliveryConfirmationFormModal } from '@components/forms/deliveryConfirmationModal';
 import FormRequests from '@containers/formRequests';
 import PantryApplication from '@containers/pantryApplication';
 import ApplicationSubmitted from '@containers/applicationSubmitted';
@@ -26,6 +25,7 @@ import ForgotPasswordPage from '@containers/forgotPasswordPage';
 import ProtectedRoute from '@components/protectedRoute';
 import Unauthorized from '@containers/unauthorized';
 import { Authenticator } from '@aws-amplify/ui-react';
+import PantryOrderManagement from '@containers/pantryOrderManagement';
 import FoodManufacturerApplication from '@containers/foodManufacturerApplication';
 import { submitManufacturerApplicationForm } from '@components/forms/manufacturerApplicationForm';
 import AssignedPantries from '@containers/volunteerAssignedPantries';
@@ -187,8 +187,12 @@ const router = createBrowserRouter([
         ),
       },
       {
-        path: '/confirm-delivery',
-        action: submitDeliveryConfirmationFormModal,
+        path: '/pantry-order-management',
+        element: (
+          <ProtectedRoute>
+            <PantryOrderManagement />
+          </ProtectedRoute>
+        ),
       },
       {
         path: '/volunteer-assigned-pantries',
diff --git a/apps/frontend/src/chakra-ui.d.ts b/apps/frontend/src/chakra-ui.d.ts
index d4db3faea..175a19c79 100644
--- a/apps/frontend/src/chakra-ui.d.ts
+++ b/apps/frontend/src/chakra-ui.d.ts
@@ -33,6 +33,10 @@ declare module '@chakra-ui/react' {
     extends ComponentPropsStrictChildren {}
   export interface MenuRadioItemProps extends ComponentPropsLenientChildren {}
 
+  // FileUpload components
+  export interface FileUploadDropzoneProps
+    extends ComponentPropsLenientChildren {}
+
   // Dialog components
   export interface DialogCloseTriggerProps
     extends ComponentPropsStrictChildren {}
diff --git a/apps/frontend/src/components/forms/deliveryConfirmationModal.tsx b/apps/frontend/src/components/forms/deliveryConfirmationModal.tsx
deleted file mode 100644
index a0bb284d4..000000000
--- a/apps/frontend/src/components/forms/deliveryConfirmationModal.tsx
+++ /dev/null
@@ -1,192 +0,0 @@
-import {
-  Box,
-  Field,
-  Input,
-  Button,
-  Textarea,
-  HStack,
-  Text,
-  Dialog,
-} from '@chakra-ui/react';
-import {
-  Form,
-  ActionFunction,
-  ActionFunctionArgs,
-  redirect,
-} from 'react-router-dom';
-import ApiClient from '@api/apiClient';
-
-interface DeliveryConfirmationModalProps {
-  requestId: number;
-  isOpen: boolean;
-  onClose: () => void;
-  pantryId: number;
-}
-
-const photoNames: string[] = [];
-const globalPhotos: File[] = [];
-
-const DeliveryConfirmationModal: React.FC<DeliveryConfirmationModalProps> = ({
-  requestId,
-  isOpen,
-  onClose,
-  pantryId,
-}) => {
-  const handlePhotoChange = async (
-    event: React.ChangeEvent<HTMLInputElement>,
-  ) => {
-    const files = event.target.files;
-
-    if (files) {
-      for (const file of Array.from(files)) {
-        if (!photoNames.some((photo) => photo.includes(file.name))) {
-          try {
-            photoNames.push(file.name);
-            globalPhotos.push(file);
-          } catch (error) {
-            alert('Failed to handle ' + file.name + ': ' + error);
-          }
-        }
-      }
-    }
-  };
-
-  const renderPhotoNames = () => {
-    return globalPhotos.map((photo, index) => (
-      <Box key={index} mb={2}>
-        <Text fontSize="sm" mt={1}>
-          {photo.name}
-        </Text>
-      </Box>
-    ));
-  };
-
-  return (
-    <Dialog.Root
-      open={isOpen}
-      onOpenChange={(e: { open: boolean }) => {
-        if (!e.open) onClose();
-      }}
-      size="xl"
-      closeOnInteractOutside
-    >
-      <Dialog.Backdrop />
-      <Dialog.Positioner>
-        <Dialog.Content maxW="49em">
-          <Dialog.Header>
-            <Dialog.Title fontSize={25} fontWeight={700}>
-              Delivery Confirmation Form
-            </Dialog.Title>
-          </Dialog.Header>
-          <Dialog.Body>
-            <Form
-              method="post"
-              action="/confirm-delivery"
-              encType="multipart/form-data"
-            >
-              <input type="hidden" name="pantryId" value={pantryId} />
-              <input type="hidden" name="requestId" value={requestId} />
-              <Field.Root required mb="2em">
-                <Field.Label>
-                  <Text fontSize={20} fontWeight={700}>
-                    Delivery Date
-                  </Text>
-                  <Field.RequiredIndicator
-                    color="red"
-                    fontSize={20}
-                    fontWeight={700}
-                  />
-                </Field.Label>
-                <Input
-                  type="date"
-                  name="deliveryDate"
-                  max={new Date().toISOString().split('T')[0]}
-                />
-                <Field.HelperText>Select the delivery date.</Field.HelperText>
-              </Field.Root>
-              <Field.Root mb="2em">
-                <Field.Label asChild>
-                  <Text fontSize={20} fontWeight={700}>
-                    Feedback
-                  </Text>
-                </Field.Label>
-                <Textarea
-                  name="feedback"
-                  placeholder="Share any feedback or issues..."
-                  size="sm"
-                />
-              </Field.Root>
-              <Field.Root mb="2em">
-                <Field.Label asChild>
-                  <Text fontSize={20} fontWeight={700}>
-                    Upload Photos
-                  </Text>
-                </Field.Label>
-                <Input
-                  type="file"
-                  name="photos"
-                  multiple
-                  accept=".jpg,.jpeg,.png"
-                  onChange={handlePhotoChange}
-                />
-                <Field.HelperText>
-                  Select up to 3 photos to upload.
-                </Field.HelperText>
-                <Box mt={3}>{renderPhotoNames()}</Box>
-              </Field.Root>
-              <HStack gap="24px" justifyContent="space-between" mt={4}>
-                <Button onClick={onClose}>Close</Button>
-                <Button type="submit" bg="blue">
-                  Confirm Delivery
-                </Button>
-              </HStack>
-            </Form>
-          </Dialog.Body>
-          <Dialog.CloseTrigger />
-        </Dialog.Content>
-      </Dialog.Positioner>
-    </Dialog.Root>
-  );
-};
-
-// Action function to handle form submission
-export const submitDeliveryConfirmationFormModal: ActionFunction = async ({
-  request,
-}: ActionFunctionArgs) => {
-  const form = await request.formData();
-  const confirmDeliveryData = new FormData();
-
-  const pantryId = form.get('pantryId') as string;
-  const requestId = form.get('requestId') as string;
-  confirmDeliveryData.append('requestId', requestId);
-
-  const deliveryDate = form.get('deliveryDate');
-  if (typeof deliveryDate === 'string') {
-    const formattedDate = new Date(deliveryDate).toISOString();
-    confirmDeliveryData.append('dateReceived', formattedDate);
-  } else {
-    alert('Delivery date is missing or invalid.');
-    return redirect(`/request-form`);
-  }
-
-  confirmDeliveryData.append('feedback', form.get('feedback') as string);
-
-  if (globalPhotos.length > 0) {
-    globalPhotos.forEach((photo) =>
-      confirmDeliveryData.append('photos', photo),
-    );
-  }
-
-  try {
-    await ApiClient.confirmDelivery(
-      parseInt(requestId, 10),
-      confirmDeliveryData,
-    );
-    alert('Delivery confirmation submitted successfully');
-  } catch (error) {
-    alert(`Error submitting delivery confirmation: ${error}`);
-  }
-  window.location.href = '/request-form';
-};
-
-export default DeliveryConfirmationModal;
diff --git a/apps/frontend/src/components/forms/orderReceivedActionModal.tsx b/apps/frontend/src/components/forms/orderReceivedActionModal.tsx
new file mode 100644
index 000000000..685460d41
--- /dev/null
+++ b/apps/frontend/src/components/forms/orderReceivedActionModal.tsx
@@ -0,0 +1,285 @@
+import React, { useState } from 'react';
+import {
+  Flex,
+  Button,
+  Textarea,
+  Text,
+  Dialog,
+  Box,
+  Field,
+  CloseButton,
+  Input,
+  FileUpload,
+  Icon,
+} from '@chakra-ui/react';
+import { Upload } from 'lucide-react';
+import { ConfirmDeliveryDto } from 'types/types';
+import apiClient from '@api/apiClient';
+import { FloatingAlert } from '@components/floatingAlert';
+import { useAlert } from '../../hooks/alert';
+
+interface OrderReceivedActionModalProps {
+  orderId: number;
+  orderCreatedAt: string;
+  isOpen: boolean;
+  onClose: () => void;
+  onSuccess: () => void;
+  onError: () => void;
+}
+
+const MAX_FILES = 10;
+const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
+
+const OrderReceivedActionModal: React.FC<OrderReceivedActionModalProps> = ({
+  orderId,
+  orderCreatedAt,
+  isOpen,
+  onClose,
+  onSuccess,
+  onError,
+}) => {
+  const [alertState, setAlertMessage] = useAlert();
+  const [feedback, setFeedback] = useState<string>('');
+  const [dateReceived, setDateReceived] = useState<string>('');
+  const [photos, setPhotos] = useState<File[]>([]);
+  const [invalidPhotoExists, setInvalidPhotoExists] = useState<boolean>(false);
+  const [errorMessage, setErrorMessage] = useState<string>('');
+
+  const isFormValid = dateReceived !== '' && !invalidPhotoExists;
+
+  const minDate = new Date(orderCreatedAt).toISOString().split('T')[0];
+
+  const today = new Date().toISOString().split('T')[0];
+
+  const resetForm = () => {
+    setFeedback('');
+    setDateReceived('');
+    setPhotos([]);
+    setInvalidPhotoExists(false);
+  };
+
+  const handleSubmit = async () => {
+    try {
+      if (new Date(dateReceived) < new Date(orderCreatedAt)) {
+        setAlertMessage(
+          'Date received cannot be earlier than the order creation date',
+        );
+        return;
+      }
+
+      const today = new Date();
+      today.setHours(0, 0, 0, 0);
+
+      if (new Date(dateReceived) > today) {
+        setAlertMessage('Date received cannot be in the future');
+        return;
+      }
+
+      const dto: ConfirmDeliveryDto = {
+        dateReceived: new Date(dateReceived).toISOString(),
+        feedback: feedback,
+      };
+
+      await apiClient.confirmOrderDelivery(orderId, dto, photos);
+
+      resetForm();
+      onSuccess();
+      onClose();
+    } catch (err) {
+      resetForm();
+      onError();
+      onClose();
+    }
+  };
+
+  return (
+    <Dialog.Root
+      open={isOpen}
+      size="xl"
+      onOpenChange={(e: { open: boolean }) => {
+        if (!e.open) {
+          resetForm();
+          onClose();
+        }
+      }}
+      closeOnInteractOutside
+    >
+      {alertState && (
+        <FloatingAlert
+          key={alertState.id}
+          message={alertState.message}
+          status="error"
+          timeout={6000}
+        />
+      )}
+      <Dialog.Backdrop />
+      <Dialog.Positioner>
+        <Dialog.Content maxW={650}>
+          <Dialog.Header pb={0} mt={2}>
+            <Dialog.Title
+              color="black"
+              fontSize="lg"
+              fontWeight={700}
+              fontFamily="inter"
+            >
+              Action Required
+            </Dialog.Title>
+          </Dialog.Header>
+          <Dialog.Body>
+            <Text
+              mb={5}
+              color="neutral.800"
+              textStyle="p2"
+              pt={0}
+              mt={2}
+              textAlign={'left'}
+            >
+              As this order arrives, please confirm the donation receipt and
+              delivery of the order by filling out the details below.
+            </Text>
+            <Box>
+              <Field.Root required mb={4}>
+                <Field.Label>
+                  <Text textStyle="p2" fontWeight={600} color="neutral.800">
+                    Date Received
+                  </Text>
+                </Field.Label>
+                <Input
+                  type="date"
+                  textStyle="p2"
+                  w="full"
+                  bg="white"
+                  borderColor="neutral.100"
+                  color="neutral.700"
+                  borderWidth="1px"
+                  borderRadius="4px"
+                  min={minDate}
+                  max={today}
+                  onChange={(e) => setDateReceived(e.target.value)}
+                  value={dateReceived}
+                />
+              </Field.Root>
+
+              <Field.Root mb={4}>
+                <Field.Label>
+                  <Text textStyle="p2" fontWeight={600} color="neutral.800">
+                    Feedback
+                  </Text>
+                </Field.Label>
+                <Textarea
+                  pl={2.5}
+                  size="lg"
+                  textStyle="p2"
+                  color="neutral.800"
+                  borderColor="neutral.100"
+                  minH={150}
+                  value={feedback}
+                  onChange={(e) => {
+                    const inputText = e.target.value;
+                    const words = inputText.trim().split(/\s+/);
+
+                    if (words.length <= 250) {
+                      setFeedback(e.target.value);
+                    } else {
+                      setAlertMessage('Exceeded word limit');
+                    }
+                  }}
+                />
+
+                <Field.HelperText color="neutral.600">
+                  Max 250 words
+                </Field.HelperText>
+              </Field.Root>
+
+              <Field.Root mb={4}>
+                <Field.Label>
+                  <Text textStyle="p2" fontWeight={600} color="neutral.800">
+                    Photos
+                  </Text>
+                </Field.Label>
+                <FileUpload.Root
+                  accept={['image/png', 'image/jpeg', 'image/jpg']}
+                  alignItems="stretch"
+                  maxFiles={MAX_FILES}
+                  onFileChange={(e: { acceptedFiles?: File[] }) => {
+                    const files: File[] = e.acceptedFiles ?? [];
+                    const oversized = files.find(
+                      (file) => file.size > MAX_FILE_SIZE,
+                    );
+                    if (oversized) {
+                      setErrorMessage(
+                        `${oversized.name} exceeds the 5MB size limit.`,
+                      );
+                      setInvalidPhotoExists(true);
+                      return;
+                    } else {
+                      setInvalidPhotoExists(false);
+                    }
+
+                    setPhotos(files);
+                  }}
+                >
+                  <FileUpload.HiddenInput />
+                  <FileUpload.Dropzone
+                    borderColor="neutral.100"
+                    borderRadius="4px"
+                    borderStyle="solid"
+                    borderWidth="1px"
+                    minH="150px"
+                    cursor="pointer"
+                  >
+                    <Icon size="md" color="fg.muted">
+                      <Upload />
+                    </Icon>
+                    <FileUpload.DropzoneContent>
+                      <Box textStyle="p2" fontWeight={600}>
+                        Click or drag and drop here to upload
+                      </Box>
+                      <Box textStyle="p2" color="neutral.800">
+                        .png, .jpg up to 5MB
+                      </Box>
+                    </FileUpload.DropzoneContent>
+                  </FileUpload.Dropzone>
+                  {invalidPhotoExists && (
+                    <Text color="red" textStyle="p2" mt={1}>
+                      {errorMessage}
+                    </Text>
+                  )}
+                  <FileUpload.List clearable />
+                </FileUpload.Root>
+              </Field.Root>
+
+              <Flex justifyContent="flex-end" mt={4} gap={2}>
+                <Button
+                  onClick={() => {
+                    resetForm();
+                    onClose();
+                  }}
+                  bg={'white'}
+                  color={'black'}
+                  borderColor="neutral.100"
+                >
+                  Cancel
+                </Button>
+
+                <Button
+                  onClick={handleSubmit}
+                  bg={isFormValid ? 'blue.hover' : 'neutral.400'}
+                  color={'white'}
+                  disabled={!isFormValid}
+                >
+                  Continue
+                </Button>
+              </Flex>
+            </Box>
+          </Dialog.Body>
+          <Dialog.CloseTrigger asChild>
+            <CloseButton size="lg" />
+          </Dialog.CloseTrigger>
+        </Dialog.Content>
+      </Dialog.Positioner>
+    </Dialog.Root>
+  );
+};
+
+export default OrderReceivedActionModal;
diff --git a/apps/frontend/src/containers/adminOrderManagement.tsx b/apps/frontend/src/containers/adminOrderManagement.tsx
index ebf5a866b..3ad3ddcea 100644
--- a/apps/frontend/src/containers/adminOrderManagement.tsx
+++ b/apps/frontend/src/containers/adminOrderManagement.tsx
@@ -86,7 +86,7 @@ const AdminOrderManagement: React.FC = () => {
     },
   });
 
-  // Color mapping for statuses
+  // Color mapping for statuses, the first color is background, the second is color for status text
   const STATUS_COLORS = new Map<OrderStatus, [string, string]>([
     [OrderStatus.PENDING, ['yellow.200', 'yellow.hover']],
     [OrderStatus.SHIPPED, ['blue.200', 'blue.core']],
diff --git a/apps/frontend/src/containers/homepage.tsx b/apps/frontend/src/containers/homepage.tsx
index d37eee025..9c5080442 100644
--- a/apps/frontend/src/containers/homepage.tsx
+++ b/apps/frontend/src/containers/homepage.tsx
@@ -50,6 +50,13 @@ const Homepage: React.FC = () => {
                 </RouterLink>
               </Link>
             </ListItem>
+            <ListItem textAlign="center">
+              <Link asChild color="teal.500">
+                <RouterLink to="/pantry-order-management">
+                  Pantry Order Management
+                </RouterLink>
+              </Link>
+            </ListItem>
           </List.Root>
         </Box>
 
diff --git a/apps/frontend/src/containers/pantryOrderManagement.tsx b/apps/frontend/src/containers/pantryOrderManagement.tsx
new file mode 100644
index 000000000..92633dee3
--- /dev/null
+++ b/apps/frontend/src/containers/pantryOrderManagement.tsx
@@ -0,0 +1,598 @@
+import React, { useState, useEffect } from 'react';
+import {
+  Box,
+  Button,
+  Table,
+  Heading,
+  Pagination,
+  IconButton,
+  VStack,
+  ButtonGroup,
+} from '@chakra-ui/react';
+import {
+  ArrowDownUp,
+  ChevronRight,
+  ChevronLeft,
+  Mail,
+  CircleCheck,
+} from 'lucide-react';
+import { capitalize, formatDate } from '@utils/utils';
+import ApiClient from '@api/apiClient';
+import { OrderStatus, OrderWithoutFoodManufacturer } from '../types/types';
+import OrderReceivedActionModal from '@components/forms/orderReceivedActionModal';
+import OrderDetailsModal from '@components/forms/orderDetailsModal';
+import { FloatingAlert } from '@components/floatingAlert';
+import { useAlert } from '../hooks/alert';
+
+type OrderWithColor = OrderWithoutFoodManufacturer & { assigneeColor?: string };
+const MAX_PER_STATUS = 5;
+
+const PantryOrderManagement: React.FC = () => {
+  // State to hold orders grouped by status
+  const [statusOrders, setStatusOrders] = useState<
+    Record<OrderStatus, OrderWithColor[]>
+  >({
+    [OrderStatus.SHIPPED]: [],
+    [OrderStatus.PENDING]: [],
+    [OrderStatus.DELIVERED]: [],
+  });
+
+  // State to hold selected order for details modal
+  const [selectedOrderId, setSelectedOrderId] = useState<number | null>(null);
+
+  const [selectedActionOrder, setSelectedActionOrder] =
+    useState<OrderWithColor | null>(null);
+
+  // State to hold current page per status
+  const [currentPages, setCurrentPages] = useState<Record<OrderStatus, number>>(
+    {
+      [OrderStatus.SHIPPED]: 1,
+      [OrderStatus.PENDING]: 1,
+      [OrderStatus.DELIVERED]: 1,
+    },
+  );
+
+  const [isAlertError, setIsAlertError] = useState<boolean>(false);
+
+  const [alertState, setAlertMessage] = useAlert();
+
+  // State to hold filter state per status
+  type FilterState = {
+    sortAsc: boolean;
+  };
+
+  // Record to store the filter state for each status
+  // sortAsc indicates whether the sorting is ascending (oldest first) or descending (newest first)
+  // We store all these here to determine what orders to display for each status
+  const [filterStates, setFilterStates] = useState<
+    Record<OrderStatus, FilterState>
+  >({
+    [OrderStatus.SHIPPED]: {
+      sortAsc: true,
+    },
+    [OrderStatus.PENDING]: {
+      sortAsc: true,
+    },
+    [OrderStatus.DELIVERED]: {
+      sortAsc: true,
+    },
+  });
+
+  // Color mapping for statuses, the first color is background, the second is color for status text
+  const STATUS_COLORS = new Map<OrderStatus, [string, string]>([
+    [OrderStatus.SHIPPED, ['yellow.200', 'yellow.hover']],
+    [OrderStatus.PENDING, ['blue.200', 'blue.core']],
+    [OrderStatus.DELIVERED, ['teal.200', 'teal.hover']],
+  ]);
+
+  const fetchOrders = async () => {
+    try {
+      const pantryId = await ApiClient.getCurrentUserPantryId();
+      const data = await ApiClient.getPantryOrders(pantryId);
+
+      const grouped: Record<OrderStatus, OrderWithColor[]> = {
+        [OrderStatus.SHIPPED]: [],
+        [OrderStatus.PENDING]: [],
+        [OrderStatus.DELIVERED]: [],
+      };
+
+      for (const order of data) {
+        const status = order.status;
+
+        const orderWithColor: OrderWithColor = { ...order };
+
+        grouped[status].push(orderWithColor);
+      }
+
+      setStatusOrders(grouped);
+
+      // Initialize current page for each status
+      const initialPages: Record<OrderStatus, number> = {
+        [OrderStatus.SHIPPED]: 1,
+        [OrderStatus.PENDING]: 1,
+        [OrderStatus.DELIVERED]: 1,
+      };
+      setCurrentPages(initialPages);
+    } catch (error) {
+      setIsAlertError(true);
+      setAlertMessage('Error fetching orders: ' + error);
+    }
+  };
+
+  useEffect(() => {
+    fetchOrders();
+  }, []);
+
+  // Helper to reset page for a specific status
+  const resetPageForStatus = (status: OrderStatus) => {
+    setCurrentPages((prev) => ({ ...prev, [status]: 1 }));
+  };
+
+  const handlePageChange = (status: OrderStatus, page: number) => {
+    setCurrentPages((prev) => ({
+      ...prev,
+      [status]: page,
+    }));
+  };
+
+  return (
+    <Box p={12}>
+      <Heading textStyle="h1" color="gray.600" mb={8}>
+        Order Management
+      </Heading>
+
+      {alertState && (
+        <FloatingAlert
+          key={alertState.id}
+          message={alertState.message}
+          status={isAlertError ? 'error' : 'info'}
+          timeout={6000}
+        />
+      )}
+
+      {Object.values(OrderStatus).map((status) => {
+        const allOrders = statusOrders[status] || [];
+        const filterState = filterStates[status];
+
+        // Apply filters and sorting to all orders
+        const filteredOrders = allOrders.sort((a, b) =>
+          filterState.sortAsc
+            ? a.createdAt.localeCompare(b.createdAt)
+            : b.createdAt.localeCompare(a.createdAt),
+        );
+
+        const totalFiltered = filteredOrders.length;
+        const currentPage = currentPages[status] || 1;
+        const displayedOrders = filteredOrders.slice(
+          (currentPage - 1) * MAX_PER_STATUS,
+          currentPage * MAX_PER_STATUS,
+        );
+
+        return (
+          <Box key={status} mb={12}>
+            <OrderStatusSection
+              orders={displayedOrders}
+              status={status}
+              colors={STATUS_COLORS.get(status)!}
+              onOrderSelect={setSelectedOrderId}
+              onOrderSelectForAction={setSelectedActionOrder}
+              totalOrders={totalFiltered}
+              currentPage={currentPage}
+              onPageChange={(page) => handlePageChange(status, page)}
+              filterState={filterState}
+              onFilterChange={(newState: FilterState) =>
+                // Update filter state for the specific status
+                setFilterStates((prev) => {
+                  const prevSort = prev[status]?.sortAsc;
+                  if (prevSort !== newState.sortAsc) resetPageForStatus(status);
+                  return { ...prev, [status]: newState };
+                })
+              }
+            />
+          </Box>
+        );
+      })}
+
+      {selectedOrderId && (
+        <OrderDetailsModal
+          orderId={selectedOrderId}
+          isOpen={!!selectedOrderId}
+          onClose={() => setSelectedOrderId(null)}
+        />
+      )}
+
+      {selectedActionOrder && (
+        <OrderReceivedActionModal
+          orderId={selectedActionOrder.orderId}
+          orderCreatedAt={selectedActionOrder.createdAt}
+          isOpen={true}
+          onClose={() => setSelectedActionOrder(null)}
+          onSuccess={() => {
+            fetchOrders();
+            setIsAlertError(false);
+            setAlertMessage('Delivery Confirmed');
+          }}
+          onError={() => {
+            setIsAlertError(true);
+            setAlertMessage('Delivery could not be confirmed.');
+          }}
+        />
+      )}
+    </Box>
+  );
+};
+
+interface OrderStatusSectionProps {
+  orders: OrderWithColor[];
+  status: OrderStatus;
+  colors: [string, string];
+  onOrderSelect: (orderId: number | null) => void;
+  onOrderSelectForAction: (order: OrderWithColor | null) => void;
+  totalOrders: number;
+  currentPage: number;
+  onPageChange: (page: number) => void;
+  filterState: {
+    sortAsc: boolean;
+  };
+  onFilterChange: (newState: { sortAsc: boolean }) => void;
+}
+
+const OrderStatusSection: React.FC<OrderStatusSectionProps> = ({
+  orders,
+  status,
+  colors,
+  onOrderSelect,
+  onOrderSelectForAction,
+  totalOrders,
+  currentPage,
+  onPageChange,
+  filterState,
+  onFilterChange,
+}) => {
+  const [isSortOpen, setIsSortOpen] = useState(false);
+
+  const totalPages = Math.ceil(totalOrders / MAX_PER_STATUS);
+
+  const tableHeaderStyles = {
+    borderBottom: '1px solid',
+    borderColor: 'neutral.100',
+    color: 'neutral.800',
+    fontFamily: 'ibm',
+    fontWeight: '600',
+    fontSize: 'sm',
+  };
+
+  const tableCellStyles = {
+    borderBottom: '1px solid',
+    borderColor: 'neutral.100',
+    color: 'black',
+    fontFamily: "'Inter', sans-serif",
+    fontSize: 'sm',
+    py: 0,
+  };
+
+  return (
+    <Box>
+      <Box
+        display="inline-flex"
+        alignItems="center"
+        justifyContent="space-between"
+        backgroundColor={colors[0]}
+        p={3}
+        borderRadius="md"
+        minW="fit-content"
+      >
+        <Mail size={18} />
+        <Box
+          ml={3}
+          fontFamily="ibm"
+          fontSize="14px"
+          fontWeight="semibold"
+          color="neutral.700"
+        >
+          {capitalize(status)}
+        </Box>
+      </Box>
+
+      {orders.length === 0 ? (
+        <Box
+          display="flex"
+          flexDirection="column"
+          alignItems="center"
+          justifyContent="center"
+          textAlign="center"
+          fontFamily="'Inter', sans-serif"
+          fontSize="sm"
+          color="neutral.600"
+          py={10}
+          gap={2}
+        >
+          <Box mb={2}>
+            <CircleCheck size={24} color="#262626" />
+          </Box>
+          <Box fontWeight="600" fontSize="lg" color="neutral.800">
+            No Orders
+          </Box>
+          <Box color="neutral.700" fontWeight="400">
+            You have no {status.toLowerCase()} orders at this time.
+          </Box>
+        </Box>
+      ) : (
+        <>
+          <Box
+            display="flex"
+            justifyContent="flex-end"
+            alignItems="center"
+            mb={3}
+            position="relative"
+            fontFamily="'Inter', sans-serif"
+            gap={3}
+          >
+            <Box position="relative">
+              <Button
+                onClick={() => setIsSortOpen(!isSortOpen)}
+                variant="outline"
+                color="neutral.800"
+                fontWeight="semibold"
+                border="1px solid"
+                borderColor="neutral.200"
+                p={3}
+                size="sm"
+              >
+                <ArrowDownUp />
+                Sort
+              </Button>
+
+              {isSortOpen && (
+                <>
+                  <Box
+                    position="fixed"
+                    top={0}
+                    left={0}
+                    right={0}
+                    bottom={0}
+                    onClick={() => setIsSortOpen(false)}
+                    zIndex={10}
+                  />
+                  <Box
+                    position="absolute"
+                    top="100%"
+                    right={0}
+                    mt={2}
+                    bg="white"
+                    border="1px solid"
+                    borderColor="gray.200"
+                    borderRadius="md"
+                    boxShadow="lg"
+                    p={2}
+                    minW="120px"
+                    zIndex={20}
+                  >
+                    <VStack
+                      align="stretch"
+                      color="neutral.800"
+                      gap={1}
+                      fontSize="12px"
+                      fontFamily="Inter"
+                      fontWeight="500"
+                    >
+                      <Box
+                        cursor="pointer"
+                        px={2}
+                        py={1}
+                        _hover={{ bg: 'gray.100' }}
+                        onClick={() => {
+                          onFilterChange({ ...filterState, sortAsc: false });
+                          setIsSortOpen(false);
+                        }}
+                      >
+                        Newest
+                      </Box>
+                      <Box
+                        cursor="pointer"
+                        px={2}
+                        py={1}
+                        _hover={{ bg: 'gray.100' }}
+                        onClick={() => {
+                          onFilterChange({ ...filterState, sortAsc: true });
+                          setIsSortOpen(false);
+                        }}
+                      >
+                        Oldest
+                      </Box>
+                    </VStack>
+                  </Box>
+                </>
+              )}
+            </Box>
+          </Box>
+          <Table.Root>
+            <Table.Header>
+              <Table.Row>
+                <Table.ColumnHeader
+                  {...tableHeaderStyles}
+                  borderRight="1px solid"
+                  borderRightColor="neutral.100"
+                  width="10%"
+                >
+                  Order #
+                </Table.ColumnHeader>
+                <Table.ColumnHeader
+                  {...tableHeaderStyles}
+                  borderRight="1px solid"
+                  borderRightColor="neutral.100"
+                  width="18%"
+                >
+                  Status
+                </Table.ColumnHeader>
+                <Table.ColumnHeader
+                  {...tableHeaderStyles}
+                  borderRight="1px solid"
+                  borderRightColor="neutral.100"
+                  width="7%"
+                >
+                  Assignee
+                </Table.ColumnHeader>
+                <Table.ColumnHeader
+                  {...tableHeaderStyles}
+                  borderRight="1px solid"
+                  borderRightColor="neutral.100"
+                  width="15%"
+                >
+                  Dates
+                </Table.ColumnHeader>
+                <Table.ColumnHeader
+                  {...tableHeaderStyles}
+                  textAlign="right"
+                  width="20%"
+                >
+                  Action Required
+                </Table.ColumnHeader>
+              </Table.Row>
+            </Table.Header>
+            <Table.Body>
+              {orders.map((order) => {
+                return (
+                  <Table.Row key={order.orderId} _hover={{ bg: 'gray.50' }}>
+                    <Table.Cell
+                      {...tableCellStyles}
+                      borderRight="1px solid"
+                      borderRightColor="neutral.100"
+                    >
+                      <Button
+                        variant="plain"
+                        fontWeight="400"
+                        textDecoration="underline"
+                        onClick={() => onOrderSelect(order.orderId)}
+                      >
+                        {order.orderId}
+                      </Button>
+                    </Table.Cell>
+                    <Table.Cell
+                      {...tableCellStyles}
+                      borderRight="1px solid"
+                      borderRightColor="neutral.100"
+                    >
+                      <Box
+                        borderRadius="md"
+                        bg={colors[0]}
+                        color={colors[1]}
+                        display="inline-block"
+                        fontWeight="500"
+                        my={2}
+                        py={1}
+                        px={3}
+                      >
+                        {capitalize(order.status)}
+                      </Box>
+                    </Table.Cell>
+                    <Table.Cell
+                      {...tableCellStyles}
+                      borderRight="1px solid"
+                      borderRightColor="neutral.100"
+                    >
+                      {/* TODO: Add assignee column handling */}
+                    </Table.Cell>
+                    <Table.Cell
+                      {...tableCellStyles}
+                      textAlign="left"
+                      color="neutral.700"
+                      borderRight="1px solid"
+                      borderRightColor="neutral.100"
+                    >
+                      {formatDate(order.createdAt)}-
+                      {order.deliveredAt && formatDate(order.deliveredAt)}
+                    </Table.Cell>
+                    <Table.Cell
+                      {...tableCellStyles}
+                      textAlign="right"
+                      color="neutral.700"
+                      bgColor={
+                        order.status !== OrderStatus.SHIPPED
+                          ? 'neutral.50'
+                          : 'white'
+                      }
+                      pr={0}
+                    >
+                      {order.status === OrderStatus.SHIPPED && (
+                        <Button
+                          variant="plain"
+                          fontWeight="400"
+                          textDecoration="underline"
+                          onClick={() => onOrderSelectForAction(order)}
+                        >
+                          Complete Required Action
+                        </Button>
+                      )}
+                    </Table.Cell>
+                  </Table.Row>
+                );
+              })}
+            </Table.Body>
+          </Table.Root>
+
+          {totalPages > 1 && (
+            <Box mt={4}>
+              <Pagination.Root
+                count={totalOrders}
+                pageSize={MAX_PER_STATUS}
+                page={currentPage}
+                onPageChange={(e: { page: number }) => onPageChange(e.page)}
+              >
+                <ButtonGroup
+                  display="flex"
+                  justifyContent="center"
+                  alignItems="center"
+                  variant="outline"
+                  size="sm"
+                >
+                  <Pagination.PrevTrigger
+                    color="neutral.800"
+                    _hover={{ color: 'black' }}
+                    disabled={currentPage === 1}
+                  >
+                    <ChevronLeft
+                      size={16}
+                      style={{
+                        cursor: currentPage !== 1 ? 'pointer' : 'default',
+                      }}
+                    />
+                  </Pagination.PrevTrigger>
+
+                  <Pagination.Items
+                    render={(page) => (
+                      <IconButton
+                        borderColor={{
+                          base: 'neutral.100',
+                          _selected: 'neutral.600',
+                        }}
+                      >
+                        {page.value}
+                      </IconButton>
+                    )}
+                  />
+
+                  <Pagination.NextTrigger
+                    color="neutral.800"
+                    _hover={{ color: 'black' }}
+                    disabled={currentPage === totalPages}
+                  >
+                    <ChevronRight
+                      size={16}
+                      style={{
+                        cursor:
+                          currentPage !== totalPages ? 'pointer' : 'default',
+                      }}
+                    />
+                  </Pagination.NextTrigger>
+                </ButtonGroup>
+              </Pagination.Root>
+            </Box>
+          )}
+        </>
+      )}
+    </Box>
+  );
+};
+
+export default PantryOrderManagement;
diff --git a/apps/frontend/src/types/types.ts b/apps/frontend/src/types/types.ts
index 40a9ff216..287df8bae 100644
--- a/apps/frontend/src/types/types.ts
+++ b/apps/frontend/src/types/types.ts
@@ -54,6 +54,11 @@ export interface Pantry {
   volunteers?: User[];
 }
 
+export interface ConfirmDeliveryDto {
+  dateReceived: string;
+  feedback?: string;
+}
+
 export interface PantryWithUser extends Pantry {
   pantryUser: User;
 }
@@ -201,19 +206,28 @@ export interface FoodRequestSummaryDto {
   status: FoodRequestStatus;
 }
 
-export interface Order {
-  orderId: number;
+export interface Order extends OrderWithoutFoodManufacturer {
+  foodManufacturer: FoodManufacturer;
+}
+
+export interface OrderWithoutFoodManufacturer extends OrderWithoutRelations {
   request: FoodRequest;
+  allocations: Allocation[];
+}
+
+export interface OrderWithoutRelations {
+  orderId: number;
   requestId: number;
-  foodManufacturer: FoodManufacturer;
   foodManufacturerId: number;
   status: OrderStatus;
   createdAt: string;
-  shippedAt?: Date;
-  deliveredAt?: Date;
-  allocations: Allocation[];
+  shippedAt?: string;
+  deliveredAt?: string;
   trackingLink?: string;
   shippingCost?: number;
+  dateReceived?: string;
+  feedback?: string;
+  photos?: string[];
 }
 
 export interface OrderItemDetails {