diff --git a/apps/backend/src/foodRequests/request.service.ts b/apps/backend/src/foodRequests/request.service.ts
index 4bf7b8468..3e57b10a1 100644
--- a/apps/backend/src/foodRequests/request.service.ts
+++ b/apps/backend/src/foodRequests/request.service.ts
@@ -317,9 +317,9 @@ export class RequestsService {
     validateId(requestId, 'Request');
 
     if (
-      dto.requestedSize == undefined &&
-      dto.requestedFoodTypes == undefined &&
-      dto.additionalInformation == undefined
+      dto.requestedSize === undefined &&
+      dto.requestedFoodTypes === undefined &&
+      dto.additionalInformation === undefined
     ) {
       throw new BadRequestException(
         'At least one field must be provided to update request',
diff --git a/apps/frontend/src/api/apiClient.ts b/apps/frontend/src/api/apiClient.ts
index 5e822dfb1..3755ab257 100644
--- a/apps/frontend/src/api/apiClient.ts
+++ b/apps/frontend/src/api/apiClient.ts
@@ -43,6 +43,7 @@ import {
   BulkUpdateTrackingCostDto,
   UpdateDonationItemDetailsDto,
   PendingApplication,
+  UpdateFoodRequestBody,
   DonationReminderDto,
 } from 'types/types';
 
@@ -104,6 +105,17 @@ export class ApiClient {
       .then((response) => response.data);
   }
 
+  public async updateFoodRequest(
+    requestId: number,
+    body: UpdateFoodRequestBody,
+  ): Promise<void> {
+    await this.axiosInstance.patch(`/api/requests/${requestId}`, body);
+  }
+
+  public async deleteFoodRequest(requestId: number): Promise<void> {
+    await this.axiosInstance.delete(`/api/requests/${requestId}`);
+  }
+
   public async closeFoodRequest(requestId: number): Promise<void> {
     await this.axiosInstance.patch(`/api/requests/${requestId}/close`, {});
   }
diff --git a/apps/frontend/src/components/foodRequestManagement.tsx b/apps/frontend/src/components/foodRequestManagement.tsx
index 7d0bce590..6eedb44dd 100644
--- a/apps/frontend/src/components/foodRequestManagement.tsx
+++ b/apps/frontend/src/components/foodRequestManagement.tsx
@@ -16,6 +16,7 @@ import { capitalize, formatDate } from '@utils/utils';
 import { FloatingAlert } from '@components/floatingAlert';
 import { FoodRequestStatus, FoodRequestSummaryDto } from '../types/types';
 import RequestDetailsModal from '@components/forms/requestDetailsModal';
+import PantryDeleteRequestActionModal from '@components/forms/pantryDeleteRequestModal';
 import VolunteerCloseRequestActionModal from '@components/forms/volunteerCloseRequestModal';
 import VolunteerRequestActionRequiredModal from '@components/forms/volunteerRequestActionRequiredModal';
 import CreateNewOrderModal from '@components/forms/createNewOrderModal';
@@ -43,6 +44,8 @@ const RequestManagement: React.FC<RequestManagementProps> = ({
   >([]);
   const [selectedViewDetailsRequest, setSelectedViewDetailsRequest] =
     useState<FoodRequestSummaryDto | null>(null);
+  const [deleteRequest, setDeleteRequest] =
+    useState<FoodRequestSummaryDto | null>(null);
   const [selectedActionRequest, setSelectedActionRequest] =
     useState<FoodRequestSummaryDto | null>(null);
   const [selectedCloseRequestAction, setSelectedCloseRequestAction] =
@@ -392,7 +395,7 @@ const RequestManagement: React.FC<RequestManagementProps> = ({
             </Table.Row>
           ))}
 
-          {selectedViewDetailsRequest && (
+          {selectedViewDetailsRequest && !deleteRequest && (
             <RequestDetailsModal
               request={selectedViewDetailsRequest}
               isOpen={selectedViewDetailsRequest !== null}
@@ -402,6 +405,21 @@ const RequestManagement: React.FC<RequestManagementProps> = ({
                   navigate(location.pathname, { replace: true });
                 }
               }}
+              onSuccess={loadRequests}
+              onDelete={() => setDeleteRequest(selectedViewDetailsRequest)}
+            />
+          )}
+
+          {deleteRequest && (
+            <PantryDeleteRequestActionModal
+              request={deleteRequest}
+              isOpen={deleteRequest !== null}
+              onClose={() => setDeleteRequest(null)}
+              onSuccess={() => {
+                setSuccessMessage('Successfully deleted food request.');
+                loadRequests();
+                setSelectedViewDetailsRequest(null);
+              }}
             />
           )}
 
diff --git a/apps/frontend/src/components/forms/pantryDeleteRequestModal.tsx b/apps/frontend/src/components/forms/pantryDeleteRequestModal.tsx
new file mode 100644
index 000000000..be993a659
--- /dev/null
+++ b/apps/frontend/src/components/forms/pantryDeleteRequestModal.tsx
@@ -0,0 +1,133 @@
+import React from 'react';
+import {
+  Box,
+  Button,
+  VStack,
+  CloseButton,
+  Text,
+  Flex,
+  Dialog,
+} from '@chakra-ui/react';
+import { FoodRequestSummaryDto } from 'types/types';
+import { formatDate } from '@utils/utils';
+import apiClient from '@api/apiClient';
+import { useAlert } from '../../hooks/alert';
+import { FloatingAlert } from '@components/floatingAlert';
+import { useModalBodyCleanup } from '../../hooks/modalBodyCleanup';
+
+interface DeleteRequestActionModalProps {
+  request: FoodRequestSummaryDto;
+  isOpen: boolean;
+  onClose: () => void;
+  onSuccess: () => void;
+}
+
+const PantryDeleteRequestActionModal: React.FC<
+  DeleteRequestActionModalProps
+> = ({ request, isOpen, onClose, onSuccess }) => {
+  useModalBodyCleanup();
+  const [alertState, setAlertMessage] = useAlert();
+
+  const onCloseRequest = async () => {
+    try {
+      await apiClient.deleteFoodRequest(request.requestId);
+      onClose();
+      onSuccess();
+    } catch {
+      setAlertMessage('Food request could not be deleted.');
+    }
+  };
+
+  const cancelButton = (
+    <Button
+      textStyle="p2"
+      fontWeight={600}
+      color="neutral.800"
+      variant="outline"
+      width={16}
+      flexShrink={0}
+      textAlign="center"
+      lineHeight="28px"
+      onClick={onClose}
+    >
+      Cancel
+    </Button>
+  );
+
+  const deleteButton = (
+    <Button
+      textStyle="p2"
+      fontWeight={600}
+      bg={'red.hover'}
+      color={'white'}
+      width="92px"
+      flexShrink={0}
+      textAlign="center"
+      lineHeight="28px"
+      onClick={onCloseRequest}
+    >
+      Delete
+    </Button>
+  );
+
+  return (
+    <Dialog.Root
+      open={isOpen}
+      size="md"
+      onOpenChange={(e: { open: boolean }) => {
+        if (!e.open) onClose();
+      }}
+      closeOnInteractOutside
+    >
+      {alertState && (
+        <FloatingAlert
+          key={alertState.id}
+          message={alertState.message}
+          status="error"
+          timeout={6000}
+        />
+      )}
+      <Dialog.Backdrop />
+      <Dialog.Positioner>
+        <Dialog.Content>
+          <Dialog.CloseTrigger asChild>
+            <CloseButton size="lg" />
+          </Dialog.CloseTrigger>
+
+          <Dialog.Header pb={0}>
+            <Dialog.Title fontSize="18px" fontFamily="inter" fontWeight={600}>
+              Confirm Action
+            </Dialog.Title>
+          </Dialog.Header>
+          <Dialog.Body pb={6}>
+            <VStack align="stretch" gap={4}>
+              <Text textStyle="p2" color="gray.dark">
+                Are you sure you want to delete this food request? This action
+                cannot be undone.
+              </Text>
+              <Box
+                borderWidth={1}
+                p={6}
+                borderColor={'neutral.100'}
+                borderRadius={5}
+              >
+                <Text textStyle="p2" color="gray.dark">
+                  Request #{request.requestId}
+                </Text>
+                <Text color="neutral.600" textStyle="p2" fontSize={'12'}>
+                  Submitted {formatDate(request.requestedAt)}
+                </Text>
+              </Box>
+              <Flex justifyContent="flex-end" gap={2.5}>
+                {cancelButton}
+                {deleteButton}
+              </Flex>
+            </VStack>
+          </Dialog.Body>
+        </Dialog.Content>
+      </Dialog.Positioner>
+    </Dialog.Root>
+  );
+};
+
+export default PantryDeleteRequestActionModal;
diff --git a/apps/frontend/src/components/forms/requestDetailsModal.tsx b/apps/frontend/src/components/forms/requestDetailsModal.tsx
index 23c4e9e80..d9ecbfd15 100644
--- a/apps/frontend/src/components/forms/requestDetailsModal.tsx
+++ b/apps/frontend/src/components/forms/requestDetailsModal.tsx
@@ -3,10 +3,11 @@ import {
   OrderItemDetailsGroupedByFoodType,
   OrderDetails,
   FoodRequestSummaryDto,
+  UpdateFoodRequestBody,
 } from 'types/types';
-import { OrderStatus } from '../../types/types';
+import { OrderStatus, RequestSize, FoodType } from '../../types/types';
 import { ORDER_STATUS_LABELS } from '@utils/utils';
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import {
   Flex,
   Box,
@@ -20,30 +21,53 @@ import {
   Pagination,
   ButtonGroup,
   IconButton,
+  HStack,
+  Button,
+  Textarea,
 } from '@chakra-ui/react';
-import { ChevronRight, ChevronLeft } from 'lucide-react';
+import {
+  ChevronRight,
+  ChevronLeft,
+  Pencil,
+  Trash2,
+  ChevronDownIcon,
+} from 'lucide-react';
 import { TagGroup } from './tagGroup';
 import { useGroupedItemsByFoodType } from '../../hooks/groupedItemsByFoodType';
 import { useModalBodyCleanup } from '../../hooks/modalBodyCleanup';
+import { useAlert } from '../../hooks/alert';
+import { FloatingAlert } from '../floatingAlert';
 
 interface RequestDetailsModalProps {
   request: FoodRequestSummaryDto;
   isOpen: boolean;
   onClose: () => void;
+  onSuccess: () => void;
+  onDelete: () => void;
 }
 
 const RequestDetailsModal: React.FC<RequestDetailsModalProps> = ({
   request,
   isOpen,
   onClose,
+  onSuccess,
+  onDelete,
 }) => {
   useModalBodyCleanup();
+  const [alertState, setAlertMessage] = useAlert();
+
   const [orderDetailsList, setOrderDetailsList] = useState<OrderDetails[]>([]);
   const [currentPage, setCurrentPage] = useState<number>(1);
 
-  const requestedSize = request.requestedSize;
-  const selectedFoodTypes = request.requestedFoodTypes;
-  const additionalNotes = request.additionalInformation;
+  const [requestedSize, setRequestedSize] = useState<RequestSize>(
+    request.requestedSize,
+  );
+  const [selectedFoodTypes, setSelectedFoodTypes] = useState<FoodType[]>(
+    request.requestedFoodTypes,
+  );
+  const [additionalNotes, setAdditionalNotes] = useState<string>(
+    request.additionalInformation ?? '',
+  );
 
   useEffect(() => {
     const fetchRequestOrderDetails = async () => {
@@ -88,240 +112,526 @@ const RequestDetailsModal: React.FC<RequestDetailsModalProps> = ({
     fontWeight: '500',
   };
 
-  return (
-    <Dialog.Root
-      open={isOpen}
-      size="xl"
-      onOpenChange={(e: { open: boolean }) => {
-        if (!e.open) onClose();
-      }}
-      closeOnInteractOutside
+  const [isEditing, setIsEditing] = useState(false);
+
+  const handleCancel = () => {
+    setRequestedSize(request.requestedSize);
+    setSelectedFoodTypes(request.requestedFoodTypes);
+    setAdditionalNotes(request.additionalInformation ?? '');
+    setIsEditing(false);
+  };
+
+  // if the user makes back-to-back changes without closing the modal, the request values stay static
+  // comparing against dynamic baseline values allows for these edge cases
+  // e.g. user edits A -> B -> A
+  // without baseline, the last change would be considered no update and only B would persist
+  const baseline = useRef({
+    requestedSize: request.requestedSize,
+    requestedFoodTypes: request.requestedFoodTypes,
+    additionalInformation: request.additionalInformation ?? '',
+  });
+
+  const handleUpdate = async () => {
+    const changed: UpdateFoodRequestBody = {};
+    if (requestedSize !== baseline.current.requestedSize)
+      changed.requestedSize = requestedSize;
+    const foodTypesChanged =
+      selectedFoodTypes.length !== baseline.current.requestedFoodTypes.length ||
+      !selectedFoodTypes.every((t) =>
+        baseline.current.requestedFoodTypes.includes(t),
+      );
+    if (foodTypesChanged) changed.requestedFoodTypes = selectedFoodTypes;
+    if (additionalNotes !== (baseline.current.additionalInformation ?? ''))
+      changed.additionalInformation =
+        additionalNotes === '' ? null : additionalNotes;
+
+    // allow user to exit the edit view even if they make no updates
+    // NOTE: not sure if this is the design choice we want to go with
+    if (Object.keys(changed).length === 0) {
+      setIsEditing(false);
+      return;
+    }
+
+    try {
+      await apiClient.updateFoodRequest(request.requestId, changed);
+      onSuccess();
+      baseline.current = {
+        requestedSize,
+        requestedFoodTypes: selectedFoodTypes,
+        additionalInformation: additionalNotes,
+      };
+      setAlertMessage('Successfully updated food request.');
+      setIsEditing(false);
+    } catch (e) {
+      setAlertMessage('Food request could not be updated.');
+    }
+  };
+
+  const editButton = (
+    <HStack
+      height={6}
+      minWidth={6}
+      padding={0.5}
+      justify="center"
+      align="center"
+      gap={1}
+      borderRadius="sm"
+      color={'gray.800'}
+      background="gray.subtle"
+      cursor="pointer"
+      _hover={{ background: 'neutral.100' }}
+      onClick={() => setIsEditing(true)}
     >
-      <Dialog.Backdrop />
-      <Dialog.Positioner>
-        <Dialog.Content maxW={650}>
-          <Dialog.Header pb={0} mt={2}>
-            <Dialog.Title fontSize="lg" fontWeight={600} fontFamily="inter">
-              Food Request #{request.requestId}
-            </Dialog.Title>
-          </Dialog.Header>
-          <Dialog.Body>
-            <Text textStyle="p2" color="gray.dark">
-              {pantryName}
-            </Text>
-
-            <Tabs.Root unstyled mt={5} fitted defaultValue="requestDetails">
-              <Tabs.List maxW="60%">
-                <Tabs.Trigger
-                  textStyle="p2"
-                  px={4}
-                  py={1}
-                  color="neutral.800"
-                  value="requestDetails"
-                  borderBottom="1.5px solid"
-                  borderColor="neutral.100"
-                  _selected={{ borderColor: 'neutral.700' }}
-                >
-                  Request Details
-                </Tabs.Trigger>
-                <Tabs.Trigger
-                  textStyle="p2"
-                  px={4}
-                  py={1}
-                  color="neutral.800"
-                  value="associatedOrders"
-                  borderBottom="1.5px solid"
-                  borderColor="neutral.100"
-                  _selected={{ borderColor: 'neutral.700' }}
-                >
-                  Associated Orders
-                </Tabs.Trigger>
-              </Tabs.List>
-              <Tabs.Content value="requestDetails">
-                <Field.Root mb={4} mt={6}>
-                  <Field.Label>
-                    <Text {...sectionTitleStyles}>Size of Shipment</Text>
-                  </Field.Label>
-                  <Menu.Root>
-                    <Text textStyle="p2" color="neutral.800" mt={3}>
-                      {requestedSize}
-                    </Text>
-                  </Menu.Root>
-                </Field.Root>
-
-                <Field.Root mb={4} mt={3}>
-                  <Field.Label>
-                    <Text {...sectionTitleStyles} mt={3}>
-                      Food Type(s)
-                    </Text>
-                  </Field.Label>
-
-                  <TagGroup values={selectedFoodTypes} />
-                </Field.Root>
-
-                <Field.Root mb={4}>
-                  <Field.Label>
-                    <Text {...sectionTitleStyles} mt={3}>
-                      Additional Information
-                    </Text>
-                  </Field.Label>
-                  <Text textStyle="p2" color="neutral.800" mt={3}>
-                    {additionalNotes}
-                  </Text>
-                </Field.Root>
-              </Tabs.Content>
-
-              <Tabs.Content value="associatedOrders">
-                {!currentOrder && (
-                  <Text mt={5} textStyle="p2">
-                    {' '}
-                    No associated orders to display{' '}
-                  </Text>
-                )}
-                {currentOrder && (
-                  <Box
-                    borderWidth="1px"
-                    borderColor="neutral.100"
-                    borderRadius="5px"
-                    p={3}
-                    mt={6}
-                  >
-                    <Flex justify="space-between" align="center" mb={3}>
-                      <Text {...sectionTitleStyles}>
-                        Order {currentOrder.orderId} -
-                        <Text as="span" color="neutral.800" textStyle="p2">
-                          {' '}
-                          Fulfilled by {currentOrder.foodManufacturerName}
-                        </Text>
+      <Pencil size={14} />
+    </HStack>
+  );
+
+  const deleteButton = (
+    <HStack
+      width={6}
+      height={6}
+      minWidth={6}
+      padding={0.5}
+      justify="center"
+      align="center"
+      gap={1}
+      flexShrink={0}
+      borderRadius="sm"
+      color="red.700"
+      background="red.subtle"
+      cursor="pointer"
+      _hover={{ background: 'red.200' }}
+      onClick={onDelete}
+    >
+      <Trash2 size={14} />
+    </HStack>
+  );
+
+  return (
+    <>
+      {/*
+       * TODO: hard-coded as 'info' for now because I worked on another ticket that refactored alertState to have a status
+       */}
+      {alertState && (
+        <FloatingAlert
+          key={alertState.id}
+          message={alertState.message}
+          status="info"
+          timeout={6000}
+        />
+      )}
+      <Dialog.Root
+        open={isOpen}
+        size="xl"
+        onOpenChange={(e: { open: boolean }) => {
+          if (!e.open) onClose();
+        }}
+        closeOnInteractOutside
+      >
+        <Dialog.Backdrop />
+        <Dialog.Positioner>
+          <Dialog.Content maxW={650}>
+            <Dialog.Header pb={0} mt={2}>
+              <Dialog.Title fontSize="lg" fontWeight={600} fontFamily="inter">
+                Food Request #{request.requestId}
+              </Dialog.Title>
+              {!isEditing && (
+                <>
+                  {editButton}
+                  {deleteButton}
+                </>
+              )}
+            </Dialog.Header>
+            <Dialog.Body>
+              <Text textStyle="p2" color="gray.dark">
+                {pantryName}
+              </Text>
+              {isEditing ? (
+                <>
+                  <Field.Root required mt={5} mb={3}>
+                    <Field.Label>
+                      <Text textStyle="p2" fontWeight={600} color="neutral.800">
+                        Size of Shipment
                       </Text>
-                      {currentOrder.status === OrderStatus.DELIVERED ? (
-                        <Badge
-                          {...badgeStyles}
-                          bgColor="blue.100"
-                          color="blue.core"
-                        >
-                          {ORDER_STATUS_LABELS[currentOrder.status]}
-                        </Badge>
-                      ) : (
-                        <Badge
-                          {...badgeStyles}
-                          bgColor="yellow.200"
-                          color="yellow.hover"
+                    </Field.Label>
+                    <Menu.Root>
+                      <Menu.Trigger asChild>
+                        <Button
+                          pl={2.5}
+                          textStyle="p2"
+                          w="full"
+                          bgColor="white"
+                          color={requestedSize ? 'neutral.800' : 'neutral.300'}
+                          borderColor="neutral.100"
+                          borderWidth="1px"
+                          borderRadius="4px"
+                          justifyContent="space-between"
                         >
-                          {ORDER_STATUS_LABELS[currentOrder.status]}
-                        </Badge>
-                      )}
-                    </Flex>
-                    {Object.entries(groupedOrderItemsByType).map(
-                      ([foodType, items]) => (
-                        <Box key={foodType} mb={4}>
-                          <Text {...sectionTitleStyles}>{foodType}</Text>
-                          {items.map((item) => (
-                            <Flex
-                              border="1px solid"
-                              borderColor="neutral.100"
-                              borderRadius="md"
-                              px={4}
-                              align="center"
-                              mt="2"
-                            >
-                              <Text
-                                py={2}
-                                textStyle="p2"
-                                color="neutral.800"
-                                flex={1}
+                          {requestedSize || 'Select size'}
+                          <Box color="neutral.300">
+                            <ChevronDownIcon />
+                          </Box>
+                        </Button>
+                      </Menu.Trigger>
+                      <Menu.Positioner w="full">
+                        <Menu.Content>
+                          <Menu.RadioItemGroup
+                            value={requestedSize}
+                            onValueChange={(val: { value: RequestSize }) =>
+                              setRequestedSize(val.value)
+                            }
+                          >
+                            {Object.values(RequestSize).map((option, idx) => (
+                              <Menu.RadioItem
+                                key={option}
+                                value={option}
+                                pl={1}
+                                mt={idx === 0 ? 0 : 2}
                               >
-                                {item.name}
-                              </Text>
-
-                              <Box
-                                alignSelf="stretch"
-                                borderLeft="1px solid"
-                                borderColor="neutral.100"
-                                mx={3}
-                              />
-
-                              <Text
-                                minW={5}
-                                py={2}
-                                textStyle="p2"
-                                color="neutral.800"
+                                {option}
+                              </Menu.RadioItem>
+                            ))}
+                          </Menu.RadioItemGroup>
+                        </Menu.Content>
+                      </Menu.Positioner>
+                    </Menu.Root>
+                  </Field.Root>
+
+                  <Field.Root mb={3}>
+                    <Field.Label>
+                      <Text textStyle="p2" fontWeight={600} color="neutral.800">
+                        Food Type(s)
+                      </Text>
+                    </Field.Label>
+                    <Menu.Root closeOnSelect={false}>
+                      <Menu.Trigger asChild>
+                        <Button
+                          pl={2.5}
+                          w="full"
+                          bgColor="white"
+                          color="neutral.300"
+                          borderColor="neutral.100"
+                          borderWidth="1px"
+                          borderRadius="4px"
+                          justifyContent="space-between"
+                          textStyle="p2"
+                        >
+                          Multi-Select
+                          <ChevronDownIcon />
+                        </Button>
+                      </Menu.Trigger>
+                      <Menu.Positioner w="full">
+                        <Menu.Content maxH="200px" overflowY="auto">
+                          {Object.values(FoodType).map((allergen) => {
+                            const isChecked =
+                              selectedFoodTypes.includes(allergen);
+                            return (
+                              <Menu.CheckboxItem
+                                key={allergen}
+                                checked={isChecked}
+                                onCheckedChange={(checked: boolean) =>
+                                  setSelectedFoodTypes((prev) =>
+                                    checked
+                                      ? [...prev, allergen as FoodType]
+                                      : prev.filter((i) => i !== allergen),
+                                  )
+                                }
+                                display="flex"
+                                alignItems="center"
                               >
-                                {item.quantity}
-                              </Text>
-                            </Flex>
-                          ))}
-                        </Box>
-                      ),
-                    )}
-                    <Text {...sectionTitleStyles} mt="3">
-                      Tracking
-                    </Text>
-                    <Text color="neutral.700" textStyle="p2" mt="3" mb="3">
-                      No tracking link available at this time
-                    </Text>
-                  </Box>
-                )}
-
-                {orderDetailsList.length > 0 && (
-                  <Flex justify="center" mt={7}>
-                    <Pagination.Root
-                      count={orderDetailsList.length}
-                      pageSize={1}
-                      page={currentPage}
-                      onChange={(page: number) => setCurrentPage(page)}
+                                <Box
+                                  position="absolute"
+                                  left={1}
+                                  ml={0.5}
+                                  w={5}
+                                  h={5}
+                                  borderWidth="1px"
+                                  borderRadius="4px"
+                                  borderColor="neutral.200"
+                                />
+                                <Menu.ItemIndicator />
+                                <Text
+                                  ml={0.5}
+                                  color="neutral.800"
+                                  fontWeight={500}
+                                  fontFamily="Inter"
+                                >
+                                  {allergen}
+                                </Text>
+                              </Menu.CheckboxItem>
+                            );
+                          })}
+                        </Menu.Content>
+                      </Menu.Positioner>
+                    </Menu.Root>
+                    <TagGroup
+                      values={selectedFoodTypes}
+                      onRemove={(value) =>
+                        setSelectedFoodTypes((prev) =>
+                          prev.filter((i) => i !== value),
+                        )
+                      }
+                    />
+                  </Field.Root>
+
+                  <Field.Root mb={5}>
+                    <Field.Label>
+                      <Text textStyle="p2" fontWeight={600} color="neutral.800">
+                        Additional Information
+                      </Text>
+                    </Field.Label>
+                    <Textarea
+                      pl={2.5}
+                      size="lg"
+                      textStyle="p2"
+                      color={
+                        additionalNotes !== '' ? 'neutral.800' : 'neutral.300'
+                      }
+                      value={additionalNotes}
+                      onChange={(e) => setAdditionalNotes(e.target.value)}
+                    />
+                    <Field.HelperText color="neutral.600">
+                      Max 250 words
+                    </Field.HelperText>
+                  </Field.Root>
+
+                  <Flex justifyContent="flex-end" mt={4} gap={2}>
+                    <Button
+                      onClick={handleCancel}
+                      background="bg"
+                      color="neutral.800"
+                      borderColor="neutral.200"
                     >
-                      <ButtonGroup variant="outline" size="sm" gap={4}>
-                        <Pagination.PrevTrigger asChild>
-                          <IconButton
-                            variant="ghost"
-                            disabled={currentPage === 1}
-                            onClick={() =>
-                              setCurrentPage((prev) => Math.max(prev - 1, 1))
-                            }
-                          >
-                            <ChevronLeft />
-                          </IconButton>
-                        </Pagination.PrevTrigger>
-
-                        <Pagination.Items
-                          render={(page) => (
-                            <IconButton
-                              variant="outline"
-                              _selected={{ borderColor: 'neutral.800' }}
-                              onClick={() => setCurrentPage(page.value)}
+                      Cancel
+                    </Button>
+                    <Button
+                      onClick={handleUpdate}
+                      bg="blue.hover"
+                      color="white"
+                    >
+                      Update Request
+                    </Button>
+                  </Flex>
+                </>
+              ) : (
+                <Tabs.Root unstyled mt={5} fitted defaultValue="requestDetails">
+                  <Tabs.List maxW="60%">
+                    <Tabs.Trigger
+                      textStyle="p2"
+                      px={4}
+                      py={1}
+                      color="neutral.800"
+                      value="requestDetails"
+                      borderBottom="1.5px solid"
+                      borderColor="neutral.100"
+                      _selected={{ borderColor: 'neutral.700' }}
+                    >
+                      Request Details
+                    </Tabs.Trigger>
+                    <Tabs.Trigger
+                      textStyle="p2"
+                      px={4}
+                      py={1}
+                      color="neutral.800"
+                      value="associatedOrders"
+                      borderBottom="1.5px solid"
+                      borderColor="neutral.100"
+                      _selected={{ borderColor: 'neutral.700' }}
+                    >
+                      Associated Orders
+                    </Tabs.Trigger>
+                  </Tabs.List>
+                  <Tabs.Content value="requestDetails">
+                    <Field.Root mb={4} mt={6}>
+                      <Field.Label>
+                        <Text {...sectionTitleStyles}>Size of Shipment</Text>
+                      </Field.Label>
+                      <Menu.Root>
+                        <Text textStyle="p2" color="neutral.800" mt={3}>
+                          {requestedSize}
+                        </Text>
+                      </Menu.Root>
+                    </Field.Root>
+
+                    <Field.Root mb={4} mt={3}>
+                      <Field.Label>
+                        <Text {...sectionTitleStyles} mt={3}>
+                          Food Type(s)
+                        </Text>
+                      </Field.Label>
+
+                      <TagGroup values={selectedFoodTypes} />
+                    </Field.Root>
+
+                    <Field.Root mb={4}>
+                      <Field.Label>
+                        <Text {...sectionTitleStyles} mt={3}>
+                          Additional Information
+                        </Text>
+                      </Field.Label>
+                      <Text textStyle="p2" color="neutral.800" mt={3}>
+                        {additionalNotes}
+                      </Text>
+                    </Field.Root>
+                  </Tabs.Content>
+
+                  <Tabs.Content value="associatedOrders">
+                    {!currentOrder && (
+                      <Text mt={5} textStyle="p2">
+                        {' '}
+                        No associated orders to display{' '}
+                      </Text>
+                    )}
+                    {currentOrder && (
+                      <Box
+                        borderWidth="1px"
+                        borderColor="neutral.100"
+                        borderRadius="5px"
+                        p={3}
+                        mt={6}
+                      >
+                        <Flex justify="space-between" align="center" mb={3}>
+                          <Text {...sectionTitleStyles}>
+                            Order {currentOrder.orderId} -
+                            <Text as="span" color="neutral.800" textStyle="p2">
+                              {' '}
+                              Fulfilled by {currentOrder.foodManufacturerName}
+                            </Text>
+                          </Text>
+                          {currentOrder.status === OrderStatus.DELIVERED ? (
+                            <Badge
+                              {...badgeStyles}
+                              bgColor="blue.100"
+                              color="blue.core"
                             >
-                              {page.value}
-                            </IconButton>
+                              {ORDER_STATUS_LABELS[currentOrder.status]}
+                            </Badge>
+                          ) : (
+                            <Badge
+                              {...badgeStyles}
+                              bgColor="yellow.200"
+                              color="yellow.hover"
+                            >
+                              {ORDER_STATUS_LABELS[currentOrder.status]}
+                            </Badge>
                           )}
-                        />
-
-                        <Pagination.NextTrigger asChild>
-                          <IconButton
-                            variant="ghost"
-                            disabled={currentPage === orderDetailsList.length}
-                            onClick={() =>
-                              setCurrentPage((prev) =>
-                                Math.min(prev + 1, orderDetailsList.length),
-                              )
-                            }
-                          >
-                            <ChevronRight />
-                          </IconButton>
-                        </Pagination.NextTrigger>
-                      </ButtonGroup>
-                    </Pagination.Root>
-                  </Flex>
-                )}
-              </Tabs.Content>
-            </Tabs.Root>
-          </Dialog.Body>
-          <Dialog.CloseTrigger asChild>
-            <CloseButton size="lg" />
-          </Dialog.CloseTrigger>
-        </Dialog.Content>
-      </Dialog.Positioner>
-    </Dialog.Root>
+                        </Flex>
+                        {Object.entries(groupedOrderItemsByType).map(
+                          ([foodType, items]) => (
+                            <Box key={foodType} mb={4}>
+                              <Text {...sectionTitleStyles}>{foodType}</Text>
+                              {items.map((item) => (
+                                <Flex
+                                  border="1px solid"
+                                  borderColor="neutral.100"
+                                  borderRadius="md"
+                                  px={4}
+                                  align="center"
+                                  mt="2"
+                                >
+                                  <Text
+                                    py={2}
+                                    textStyle="p2"
+                                    color="neutral.800"
+                                    flex={1}
+                                  >
+                                    {item.name}
+                                  </Text>
+
+                                  <Box
+                                    alignSelf="stretch"
+                                    borderLeft="1px solid"
+                                    borderColor="neutral.100"
+                                    mx={3}
+                                  />
+
+                                  <Text
+                                    minW={5}
+                                    py={2}
+                                    textStyle="p2"
+                                    color="neutral.800"
+                                  >
+                                    {item.quantity}
+                                  </Text>
+                                </Flex>
+                              ))}
+                            </Box>
+                          ),
+                        )}
+                        <Text {...sectionTitleStyles} mt="3">
+                          Tracking
+                        </Text>
+                        <Text color="neutral.700" textStyle="p2" mt="3" mb="3">
+                          No tracking link available at this time
+                        </Text>
+                      </Box>
+                    )}
+
+                    {orderDetailsList.length > 0 && (
+                      <Flex justify="center" mt={7}>
+                        <Pagination.Root
+                          count={orderDetailsList.length}
+                          pageSize={1}
+                          page={currentPage}
+                          onChange={(page: number) => setCurrentPage(page)}
+                        >
+                          <ButtonGroup variant="outline" size="sm" gap={4}>
+                            <Pagination.PrevTrigger asChild>
+                              <IconButton
+                                variant="ghost"
+                                disabled={currentPage === 1}
+                                onClick={() =>
+                                  setCurrentPage((prev) =>
+                                    Math.max(prev - 1, 1),
+                                  )
+                                }
+                              >
+                                <ChevronLeft />
+                              </IconButton>
+                            </Pagination.PrevTrigger>
+
+                            <Pagination.Items
+                              render={(page) => (
+                                <IconButton
+                                  variant="outline"
+                                  _selected={{ borderColor: 'neutral.800' }}
+                                  onClick={() => setCurrentPage(page.value)}
+                                >
+                                  {page.value}
+                                </IconButton>
+                              )}
+                            />
+
+                            <Pagination.NextTrigger asChild>
+                              <IconButton
+                                variant="ghost"
+                                disabled={
+                                  currentPage === orderDetailsList.length
+                                }
+                                onClick={() =>
+                                  setCurrentPage((prev) =>
+                                    Math.min(prev + 1, orderDetailsList.length),
+                                  )
+                                }
+                              >
+                                <ChevronRight />
+                              </IconButton>
+                            </Pagination.NextTrigger>
+                          </ButtonGroup>
+                        </Pagination.Root>
+                      </Flex>
+                    )}
+                  </Tabs.Content>
+                </Tabs.Root>
+              )}
+            </Dialog.Body>
+            <Dialog.CloseTrigger asChild>
+              <CloseButton size="lg" />
+            </Dialog.CloseTrigger>
+          </Dialog.Content>
+        </Dialog.Positioner>
+      </Dialog.Root>
+    </>
   );
 };
 
diff --git a/apps/frontend/src/containers/formRequests.tsx b/apps/frontend/src/containers/formRequests.tsx
index 40a7cfb48..b3acad555 100644
--- a/apps/frontend/src/containers/formRequests.tsx
+++ b/apps/frontend/src/containers/formRequests.tsx
@@ -17,6 +17,7 @@ import { ChevronRight, ChevronLeft } from 'lucide-react';
 import FoodRequestFormModal from '@components/forms/requestFormModal';
 import { FoodRequestStatus, FoodRequestSummaryDto } from '../types/types';
 import RequestDetailsModal from '@components/forms/requestDetailsModal';
+import PantryDeleteRequestActionModal from '@components/forms/pantryDeleteRequestModal';
 import { formatDate } from '@utils/utils';
 import ApiClient from '@api/apiClient';
 import { FloatingAlert } from '@components/floatingAlert';
@@ -41,6 +42,8 @@ const FormRequests: React.FC = () => {
   const [searchParams] = useSearchParams();
   const navigate = useNavigate();
   const [alertState, setAlertMessage] = useAlert();
+  const [deleteRequest, setDeleteRequest] =
+    useState<FoodRequestSummaryDto | null>(null);
 
   const pageSize = 10;
 
@@ -225,7 +228,7 @@ const FormRequests: React.FC = () => {
           ))}
         </Table.Body>
       </Table.Root>
-      {openReadOnlyRequest && (
+      {openReadOnlyRequest && !deleteRequest && (
         <RequestDetailsModal
           request={openReadOnlyRequest}
           isOpen={openReadOnlyRequest !== null}
@@ -235,6 +238,20 @@ const FormRequests: React.FC = () => {
               navigate(ROUTES.REQUEST_FORM, { replace: true });
             }
           }}
+          onSuccess={fetchRequests}
+          onDelete={() => setDeleteRequest(openReadOnlyRequest)}
+        />
+      )}
+      {deleteRequest && (
+        <PantryDeleteRequestActionModal
+          request={deleteRequest}
+          isOpen={deleteRequest !== null}
+          onClose={() => setDeleteRequest(null)}
+          onSuccess={() => {
+            setAlertMessage('Successfully deleted food request.');
+            fetchRequests();
+            setOpenReadOnlyRequest(null);
+          }}
         />
       )}
       <Flex justify="center" mt={12}>
diff --git a/apps/frontend/src/theme.ts b/apps/frontend/src/theme.ts
index 9b1a402c1..19b92bbcc 100644
--- a/apps/frontend/src/theme.ts
+++ b/apps/frontend/src/theme.ts
@@ -80,7 +80,14 @@ const customConfig = defineConfig({
           200: { value: '#D5DCDF' },
           400: { value: '#AAB8BF' },
         },
-        red: { value: '#CC3538' },
+        red: {
+          core: { value: '#CC3538' },
+          subtle: { value: '#FEE2E2' },
+          hover: { value: '#972729' },
+          // NOTE: not sure if this is the right color or what color we want hover to be for delete buttons
+          200: { value: '#FEC9C9' },
+          700: { value: '#991919' },
+        },
         yellow: {
           core: { value: '#F89E19' },
           hover: { value: '#9C5D00' },
@@ -101,6 +108,8 @@ const customConfig = defineConfig({
         gray: {
           light: { value: '#515151' },
           dark: { value: '#111' },
+          subtle: { value: '#F4F4F5' },
+          800: { value: '#27272A' },
         },
         teal: {
           ssf: { value: '#2795A5' },
diff --git a/apps/frontend/src/types/types.ts b/apps/frontend/src/types/types.ts
index 8addbea64..d05629a1a 100644
--- a/apps/frontend/src/types/types.ts
+++ b/apps/frontend/src/types/types.ts
@@ -469,6 +469,12 @@ export interface CreateFoodRequestBody {
   additionalInformation?: string;
 }
 
+export interface UpdateFoodRequestBody {
+  requestedSize?: RequestSize;
+  requestedFoodTypes?: FoodType[];
+  additionalInformation?: string | null;
+}
+
 export interface CreateDonationDto {
   foodManufacturerId: number;
   recurrenceFreq?: number;