diff --git a/apps/backend/src/donationItems/donationItems.controller.spec.ts b/apps/backend/src/donationItems/donationItems.controller.spec.ts
new file mode 100644
index 00000000..ed10f8a0
--- /dev/null
+++ b/apps/backend/src/donationItems/donationItems.controller.spec.ts
@@ -0,0 +1,115 @@
+import { Test, TestingModule } from '@nestjs/testing';
+import { DonationItemsController } from './donationItems.controller';
+import { DonationItemsService } from './donationItems.service';
+import { DonationItem } from './donationItems.entity';
+import { mock } from 'jest-mock-extended';
+import { FoodType } from './types';
+import { CreateMultipleDonationItemsDto } from './dtos/create-donation-items.dto';
+
+const mockDonationItemsService = mock<DonationItemsService>();
+
+describe('DonationItemsController', () => {
+  let controller: DonationItemsController;
+
+  const mockDonationItemsCreateData: Partial<DonationItem>[] = [
+    {
+      itemId: 1,
+      donationId: 1,
+      itemName: 'Canned Beans',
+      quantity: 100,
+      reservedQuantity: 0,
+      ozPerItem: 15,
+      estimatedValue: 200,
+      foodType: FoodType.DAIRY_FREE_ALTERNATIVES,
+    },
+    {
+      itemId: 2,
+      donationId: 1,
+      itemName: 'Rice',
+      quantity: 50,
+      reservedQuantity: 0,
+      ozPerItem: 20,
+      estimatedValue: 150,
+      foodType: FoodType.GLUTEN_FREE_BAKING_PANCAKE_MIXES,
+    },
+  ];
+
+  beforeEach(async () => {
+    const module: TestingModule = await Test.createTestingModule({
+      controllers: [DonationItemsController],
+      providers: [
+        { provide: DonationItemsService, useValue: mockDonationItemsService },
+      ],
+    }).compile();
+
+    controller = module.get<DonationItemsController>(DonationItemsController);
+  });
+
+  it('should be defined', () => {
+    expect(controller).toBeDefined();
+  });
+
+  describe('create', () => {
+    it('should call donationItemsService.create and return a donationItem', async () => {
+      const donationItemData = mockDonationItemsCreateData[0];
+      mockDonationItemsService.create.mockResolvedValue(
+        donationItemData as DonationItem,
+      );
+      const result = await controller.createDonationItem(
+        donationItemData as DonationItem,
+      );
+      expect(result).toEqual(donationItemData as DonationItem);
+      expect(mockDonationItemsService.create).toHaveBeenCalledWith(
+        donationItemData.donationId,
+        donationItemData.itemName,
+        donationItemData.quantity,
+        donationItemData.reservedQuantity,
+        donationItemData.ozPerItem,
+        donationItemData.estimatedValue,
+        donationItemData.foodType,
+      );
+    });
+  });
+
+  describe('createMultipleDonationItems', () => {
+    it('should call donationItemsService.createMultipleDonationItems with donationId and items, and return the created donation items', async () => {
+      const mockBody: CreateMultipleDonationItemsDto = {
+        donationId: 1,
+        items: [
+          {
+            itemName: 'Rice Noodles',
+            quantity: 100,
+            reservedQuantity: 0,
+            ozPerItem: 5,
+            estimatedValue: 100,
+            foodType: FoodType.DAIRY_FREE_ALTERNATIVES,
+          },
+          {
+            itemName: 'Beans',
+            quantity: 50,
+            reservedQuantity: 0,
+            ozPerItem: 10,
+            estimatedValue: 80,
+            foodType: FoodType.GLUTEN_FREE_BAKING_PANCAKE_MIXES,
+          },
+        ],
+      };
+
+      const mockCreatedItems: Partial<DonationItem>[] = [
+        { itemId: 1, donationId: 1, ...mockBody.items[0] },
+        { itemId: 2, donationId: 1, ...mockBody.items[1] },
+      ];
+
+      mockDonationItemsService.createMultipleDonationItems.mockResolvedValue(
+        mockCreatedItems as DonationItem[],
+      );
+
+      const result = await controller.createMultipleDonationItems(mockBody);
+
+      expect(
+        mockDonationItemsService.createMultipleDonationItems,
+      ).toHaveBeenCalledWith(mockBody.donationId, mockBody.items);
+      expect(result).toEqual(mockCreatedItems);
+    });
+  });
+});
diff --git a/apps/backend/src/donationItems/donationItems.controller.ts b/apps/backend/src/donationItems/donationItems.controller.ts
index 191b53fb..8279c3c8 100644
--- a/apps/backend/src/donationItems/donationItems.controller.ts
+++ b/apps/backend/src/donationItems/donationItems.controller.ts
@@ -12,6 +12,7 @@ import { ApiBody } from '@nestjs/swagger';
 import { DonationItemsService } from './donationItems.service';
 import { DonationItem } from './donationItems.entity';
 import { FoodType } from './types';
+import { CreateMultipleDonationItemsDto } from './dtos/create-donation-items.dto';
 
 @Controller('donation-items')
 //@UseInterceptors()
@@ -74,6 +75,46 @@ export class DonationItemsController {
     );
   }
 
+  @Post('/create-multiple')
+  @ApiBody({
+    description: 'Bulk create donation items for a single donation',
+    schema: {
+      type: 'object',
+      properties: {
+        donationId: {
+          type: 'integer',
+          example: 1,
+        },
+        items: {
+          type: 'array',
+          items: {
+            type: 'object',
+            properties: {
+              itemName: { type: 'string', example: 'Rice Noodles' },
+              quantity: { type: 'integer', example: 100 },
+              reservedQuantity: { type: 'integer', example: 0 },
+              ozPerItem: { type: 'integer', example: 5 },
+              estimatedValue: { type: 'integer', example: 100 },
+              foodType: {
+                type: 'string',
+                enum: Object.values(FoodType),
+                example: FoodType.DAIRY_FREE_ALTERNATIVES,
+              },
+            },
+          },
+        },
+      },
+    },
+  })
+  async createMultipleDonationItems(
+    @Body() body: CreateMultipleDonationItemsDto,
+  ): Promise<DonationItem[]> {
+    return this.donationItemsService.createMultipleDonationItems(
+      body.donationId,
+      body.items,
+    );
+  }
+
   @Patch('/update-quantity/:itemId')
   async updateDonationItemQuantity(
     @Param('itemId', ParseIntPipe) itemId: number,
diff --git a/apps/backend/src/donationItems/donationItems.entity.ts b/apps/backend/src/donationItems/donationItems.entity.ts
index afd2c0c2..bd9a5098 100644
--- a/apps/backend/src/donationItems/donationItems.entity.ts
+++ b/apps/backend/src/donationItems/donationItems.entity.ts
@@ -16,7 +16,7 @@ export class DonationItem {
   itemId: number;
 
   @Column({ name: 'donation_id', type: 'int' })
-  donation_id: number;
+  donationId: number;
 
   @ManyToOne(() => Donation, { nullable: false })
   @JoinColumn({ name: 'donation_id', referencedColumnName: 'donationId' })
diff --git a/apps/backend/src/donationItems/donationItems.service.ts b/apps/backend/src/donationItems/donationItems.service.ts
index 116742c6..740a2650 100644
--- a/apps/backend/src/donationItems/donationItems.service.ts
+++ b/apps/backend/src/donationItems/donationItems.service.ts
@@ -44,6 +44,37 @@ export class DonationItemsService {
     return this.repo.save(donationItem);
   }
 
+  async createMultipleDonationItems(
+    donationId: number,
+    items: {
+      itemName: string;
+      quantity: number;
+      reservedQuantity: number;
+      ozPerItem: number;
+      estimatedValue: number;
+      foodType: FoodType;
+    }[],
+  ): Promise<DonationItem[]> {
+    validateId(donationId, 'Donation');
+
+    const donation = await this.donationRepo.findOneBy({ donationId });
+    if (!donation) throw new NotFoundException('Donation not found');
+
+    const donationItems = items.map((item) =>
+      this.repo.create({
+        donation,
+        itemName: item.itemName,
+        quantity: item.quantity,
+        reservedQuantity: item.reservedQuantity,
+        ozPerItem: item.ozPerItem,
+        estimatedValue: item.estimatedValue,
+        foodType: item.foodType,
+      }),
+    );
+
+    return this.repo.save(donationItems);
+  }
+
   async updateDonationItemQuantity(itemId: number): Promise<DonationItem> {
     validateId(itemId, 'Donation Item');
 
diff --git a/apps/backend/src/donationItems/dtos/create-donation-items.dto.ts b/apps/backend/src/donationItems/dtos/create-donation-items.dto.ts
new file mode 100644
index 00000000..11a63d77
--- /dev/null
+++ b/apps/backend/src/donationItems/dtos/create-donation-items.dto.ts
@@ -0,0 +1,48 @@
+import {
+  IsNumber,
+  IsString,
+  IsArray,
+  ValidateNested,
+  Min,
+  IsEnum,
+  IsNotEmpty,
+  Length,
+} from 'class-validator';
+import { Type } from 'class-transformer';
+import { FoodType } from '../types';
+
+export class CreateDonationItemDto {
+  @IsString()
+  @IsNotEmpty()
+  @Length(1, 255)
+  itemName: string;
+
+  @IsNumber()
+  @Min(1)
+  quantity: number;
+
+  @IsNumber()
+  @Min(0)
+  reservedQuantity: number;
+
+  @IsNumber()
+  @Min(1)
+  ozPerItem: number;
+
+  @IsNumber()
+  @Min(1)
+  estimatedValue: number;
+
+  @IsEnum(FoodType)
+  foodType: FoodType;
+}
+
+export class CreateMultipleDonationItemsDto {
+  @IsNumber()
+  donationId: number;
+
+  @IsArray()
+  @ValidateNested({ each: true })
+  @Type(() => CreateDonationItemDto)
+  items: CreateDonationItemDto[];
+}
diff --git a/apps/backend/src/migrations/1764816885341-RemoveUnusedStatuses.ts b/apps/backend/src/migrations/1764816885341-RemoveUnusedStatuses.ts
index 6419e233..4c35fd0f 100644
--- a/apps/backend/src/migrations/1764816885341-RemoveUnusedStatuses.ts
+++ b/apps/backend/src/migrations/1764816885341-RemoveUnusedStatuses.ts
@@ -1,25 +1,24 @@
-import { MigrationInterface, QueryRunner } from "typeorm";
+import { MigrationInterface, QueryRunner } from 'typeorm';
 
 export class RemoveUnusedStatuses1764816885341 implements MigrationInterface {
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(
+      `ALTER TABLE allocations DROP COLUMN IF EXISTS status;`,
+    );
+    await queryRunner.query(
+      `ALTER TABLE donation_items DROP COLUMN IF EXISTS status;`,
+    );
+  }
 
-    public async up(queryRunner: QueryRunner): Promise<void> {
-        await queryRunner.query(
-            `ALTER TABLE allocations DROP COLUMN IF EXISTS status;`
-        );
-        await queryRunner.query(
-            `ALTER TABLE donation_items DROP COLUMN IF EXISTS status;`
-        );
-    }
-
-    public async down(queryRunner: QueryRunner): Promise<void> {
-        await queryRunner.query(`
+  public async down(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`
             ALTER TABLE allocations
             ADD COLUMN status VARCHAR(25) NOT NULL DEFAULT 'pending';
         `);
 
-        await queryRunner.query(`
+    await queryRunner.query(`
             ALTER TABLE donation_items
             ADD COLUMN status VARCHAR(25) NOT NULL DEFAULT 'available';
         `);
-    }
+  }
 }
diff --git a/apps/backend/src/pantries/dtos/pantry-application.dto.ts b/apps/backend/src/pantries/dtos/pantry-application.dto.ts
index 42510915..c7473b0f 100644
--- a/apps/backend/src/pantries/dtos/pantry-application.dto.ts
+++ b/apps/backend/src/pantries/dtos/pantry-application.dto.ts
@@ -52,7 +52,7 @@ export class PantryApplicationDto {
   @IsNotEmpty()
   @MaxLength(255)
   emailContactOther?: string;
-  
+
   @IsOptional()
   @IsString()
   @IsNotEmpty()
diff --git a/apps/frontend/src/api/apiClient.ts b/apps/frontend/src/api/apiClient.ts
index a548bfa5..770dfdec 100644
--- a/apps/frontend/src/api/apiClient.ts
+++ b/apps/frontend/src/api/apiClient.ts
@@ -10,6 +10,7 @@ import {
   CreateFoodRequestBody,
   Pantry,
   PantryApplicationDto,
+  CreateMultipleDonationItemsBody,
 } from 'types/types';
 
 const defaultBaseUrl =
@@ -53,6 +54,14 @@ export class ApiClient {
     return this.post('/api/requests/create', body) as Promise<FoodRequest>;
   }
 
+  public async postMultipleDonationItems(
+    body: CreateMultipleDonationItemsBody,
+  ): Promise<DonationItem[]> {
+    return this.post('/api/donation-items/create-multiple', body) as Promise<
+      DonationItem[]
+    >;
+  }
+
   private async patch(path: string, body: unknown): Promise<unknown> {
     return this.axiosInstance
       .patch(path, body)
diff --git a/apps/frontend/src/components/forms/donationDetailsModal.tsx b/apps/frontend/src/components/forms/donationDetailsModal.tsx
index 093b06df..37fd1389 100644
--- a/apps/frontend/src/components/forms/donationDetailsModal.tsx
+++ b/apps/frontend/src/components/forms/donationDetailsModal.tsx
@@ -8,12 +8,11 @@ import {
   CloseButton,
 } from '@chakra-ui/react';
 import ApiClient from '@api/apiClient';
-import { Donation } from 'types/types';
-import { DonationItem } from 'types/types';
+import { Donation, DonationItem } from 'types/types';
 import { formatDate } from '@utils/utils';
 
 interface DonationDetailsModalProps {
-  donation: Donation;
+  donation?: Donation;
   isOpen: boolean;
   onClose: () => void;
 }
@@ -23,30 +22,34 @@ const DonationDetailsModal: React.FC<DonationDetailsModalProps> = ({
   isOpen,
   onClose,
 }) => {
+  const [loadedDonation, setLoadedDonation] = useState<Donation>();
   const [items, setItems] = useState<DonationItem[]>([]);
 
+  const donationId = donation?.donationId; // adjust if your ID field is different
+
   useEffect(() => {
-    if (isOpen) {
-      const fetchData = async () => {
-        try {
-          const itemsData = await ApiClient.getDonationItemsByDonationId(
-            donation.donationId,
-          );
-
-          setItems(itemsData);
-        } catch (error) {
-          alert('Error fetching donation details:' + error);
-        }
-      };
-
-      fetchData();
-    }
-  }, [isOpen, donation]);
+    if (!isOpen || !donationId) return;
+
+    const fetchData = async () => {
+      try {
+        const donationData = await ApiClient.getOrderDonation(donationId);
+        const itemsData = await ApiClient.getDonationItemsByDonationId(
+          donationId,
+        );
+
+        setLoadedDonation(donationData);
+        setItems(itemsData);
+      } catch (err) {
+        alert('Error fetching donation details: ' + err);
+      }
+    };
+
+    fetchData();
+  }, [isOpen, donationId]);
 
+  // Group items by food type
   const groupedItems = items.reduce((acc, item) => {
-    if (!acc[item.foodType]) {
-      acc[item.foodType] = [];
-    }
+    if (!acc[item.foodType]) acc[item.foodType] = [];
     acc[item.foodType].push(item);
     return acc;
   }, {} as Record<string, DonationItem[]>);
@@ -61,7 +64,8 @@ const DonationDetailsModal: React.FC<DonationDetailsModalProps> = ({
       scrollBehavior="inside"
     >
       <Portal>
-        <Dialog.Backdrop bg="blackAlpha.200" />
+        <Dialog.Backdrop bg="blackAlpha.300" />
+
         <Dialog.Positioner>
           <Dialog.Content>
             <Dialog.CloseTrigger asChild>
@@ -70,21 +74,17 @@ const DonationDetailsModal: React.FC<DonationDetailsModalProps> = ({
 
             <Dialog.Header>
               <VStack align="stretch" gap={0}>
-                <Dialog.Title
-                  fontSize="lg"
-                  mb={2}
-                  fontWeight="600"
-                  fontFamily="'Inter', sans-serif"
-                >
-                  Donation #{donation.donationId} Details
+                <Dialog.Title fontSize="lg" mb={2} fontWeight="600">
+                  Donation #{donationId} Details
                 </Dialog.Title>
-                {donation && (
+
+                {loadedDonation && (
                   <>
-                    <Text fontSize="sm" color="neutral.800">
-                      {donation.foodManufacturer?.foodManufacturerName}
+                    <Text fontSize="sm">
+                      {loadedDonation.foodManufacturer?.foodManufacturerName}
                     </Text>
-                    <Text fontSize="sm" color="neutral.800">
-                      {formatDate(donation.dateDonated)}
+                    <Text fontSize="sm">
+                      {formatDate(loadedDonation.dateDonated)}
                     </Text>
                   </>
                 )}
@@ -92,18 +92,14 @@ const DonationDetailsModal: React.FC<DonationDetailsModalProps> = ({
             </Dialog.Header>
 
             <Dialog.Body>
-              {donation && (
+              {loadedDonation && (
                 <VStack align="stretch" gap={4} my={2}>
                   {Object.entries(groupedItems).map(([foodType, typeItems]) => (
                     <Box key={foodType}>
-                      <Text
-                        fontSize="md"
-                        fontWeight="600"
-                        mb={2}
-                        color="neutral.800"
-                      >
+                      <Text fontSize="md" fontWeight="600" mb={2}>
                         {foodType}
                       </Text>
+
                       <VStack align="stretch" gap={2}>
                         {typeItems.map((item, index) => (
                           <Box
@@ -116,10 +112,9 @@ const DonationDetailsModal: React.FC<DonationDetailsModalProps> = ({
                             overflow="hidden"
                           >
                             <Box flex={1} p={3} bg="white">
-                              <Text color="neutral.800" fontSize="sm">
-                                {item.itemName}
-                              </Text>
+                              <Text fontSize="sm">{item.itemName}</Text>
                             </Box>
+
                             <Box
                               borderLeft="1px solid"
                               borderColor="neutral.100"
@@ -130,9 +125,7 @@ const DonationDetailsModal: React.FC<DonationDetailsModalProps> = ({
                               justifyContent="center"
                               bg="white"
                             >
-                              <Text color="neutral.800" fontSize="sm">
-                                {item.quantity}
-                              </Text>
+                              <Text fontSize="sm">{item.quantity}</Text>
                             </Box>
                           </Box>
                         ))}
diff --git a/apps/frontend/src/components/forms/newDonationFormModal.tsx b/apps/frontend/src/components/forms/newDonationFormModal.tsx
index d6697d08..e89145bc 100644
--- a/apps/frontend/src/components/forms/newDonationFormModal.tsx
+++ b/apps/frontend/src/components/forms/newDonationFormModal.tsx
@@ -10,6 +10,7 @@ import {
   Dialog,
   NativeSelect,
   NativeSelectIndicator,
+  Portal,
 } from '@chakra-ui/react';
 import { useState } from 'react';
 import ApiClient from '@api/apiClient';
@@ -57,18 +58,16 @@ const NewDonationFormModal: React.FC<NewDonationFormModalProps> = ({
 
     updatedRows.forEach((row) => {
       if (row.numItems && row.ozPerItem && row.valuePerItem) {
-        totalItems += parseInt(row.numItems);
-        totalOz += parseFloat(row.ozPerItem) * parseInt(row.numItems);
-        totalValue += parseFloat(row.valuePerItem) * parseInt(row.numItems);
+        const qty = parseInt(row.numItems);
+        totalItems += qty;
+        totalOz += parseFloat(row.ozPerItem) * qty;
+        totalValue += parseFloat(row.valuePerItem) * qty;
       }
     });
 
-    totalOz = parseFloat(totalOz.toFixed(2));
-    totalValue = parseFloat(totalValue.toFixed(2));
-
     setTotalItems(totalItems);
-    setTotalOz(totalOz);
-    setTotalValue(totalValue);
+    setTotalOz(parseFloat(totalOz.toFixed(2)));
+    setTotalValue(parseFloat(totalValue.toFixed(2)));
   };
 
   const addRow = () => {
@@ -86,36 +85,32 @@ const NewDonationFormModal: React.FC<NewDonationFormModalProps> = ({
   };
 
   const deleteRow = () => {
-    if (rows.length === 1) {
-      return;
-    }
     const newRows = rows.slice(0, -1);
     setRows(newRows);
     calculateTotals(newRows);
   };
 
   const handleSubmit = async () => {
-    const hasEmptyFields = rows.some(
+    const hasEmpty = rows.some(
       (row) =>
-        row.foodItem === '' ||
-        row.foodType === '' ||
-        row.numItems === '' ||
-        row.ozPerItem === '' ||
-        row.valuePerItem === '',
+        !row.foodItem ||
+        !row.foodType ||
+        !row.numItems ||
+        !row.ozPerItem ||
+        !row.valuePerItem,
     );
 
-    if (hasEmptyFields) {
+    if (hasEmpty) {
       alert('Please fill in all fields before submitting.');
       return;
     }
 
     onClose();
 
-    const foodManufacturerId = 1;
     const donation_body = {
-      foodManufacturerId: foodManufacturerId,
-      totalItems: totalItems,
-      totalOz: totalOz,
+      foodManufacturerId: 1,
+      totalItems,
+      totalOz,
       totalEstimatedValue: totalValue,
     };
 
@@ -123,30 +118,20 @@ const NewDonationFormModal: React.FC<NewDonationFormModalProps> = ({
       const donationResponse = await ApiClient.postDonation(donation_body);
       const donationId = donationResponse?.donationId;
 
-      // Automatically update the page after creating new donation
       onDonationSuccess();
 
       if (donationId) {
-        rows.forEach(async (row) => {
-          const donationItem_body = {
-            donationId: donationId,
-            itemName: row.foodItem,
-            quantity: parseInt(row.numItems),
-            ozPerItem: parseFloat(row.ozPerItem),
-            estimatedValue: parseFloat(row.valuePerItem),
-            foodType: row.foodType,
-          };
+        const items = rows.map((row) => ({
+          itemName: row.foodItem,
+          quantity: parseInt(row.numItems),
+          reservedQuantity: 0,
+          ozPerItem: parseFloat(row.ozPerItem),
+          estimatedValue: parseFloat(row.valuePerItem),
+          foodType: row.foodType,
+        }));
+
+        await ApiClient.postMultipleDonationItems({ donationId, items });
 
-          const donationItemResponse = await ApiClient.postDonationItem(
-            donationItem_body,
-          );
-          if (donationItemResponse) {
-            console.log('Donation item submitted successfully');
-          } else {
-            console.error('Failed to submit donation item');
-            alert('Failed to submit donation item');
-          }
-        });
         setRows([
           {
             id: 1,
@@ -161,139 +146,143 @@ const NewDonationFormModal: React.FC<NewDonationFormModalProps> = ({
         setTotalOz(0);
         setTotalValue(0);
       } else {
-        console.error('Failed to submit donation');
         alert('Failed to submit donation');
       }
     } catch (error) {
-      console.error('Error submitting new donation', error);
-      alert('Error submitting new donation');
+      alert('Error submitting new donation: ' + error);
     }
   };
 
   return (
     <Dialog.Root
       open={isOpen}
-      size={'xl'}
+      size="xl"
       onOpenChange={(e: { open: boolean }) => {
         if (!e.open) onClose();
       }}
       closeOnInteractOutside
     >
-      <Dialog.Backdrop />
-      <Dialog.Positioner>
-        <Dialog.Content maxW="49em">
-          <Dialog.Header asChild>
-            <Dialog.Title fontSize={25} fontWeight={700}>
-              SSF Log New Donation Form SSF Donation Log Form
-            </Dialog.Title>
-          </Dialog.Header>
-          <Dialog.Body>
-            <Text mb="1.5em">
-              Log a new donation by filling out the form below. Use the add or
-              delete row buttons to add or remove food items from the donation.
-              Please make sure to fill out all fields before submitting.
-            </Text>
-            <Text mb="1.5em">Log a new donation</Text>
-            <Box
-              display="block"
-              maxW="100%"
-              overflowX="auto"
-              overflowY="hidden"
-              whiteSpace="nowrap"
-            >
-              <Table.Root variant="line">
-                <TableCaption>
-                  <Stack direction="row" align="center" gap={3} mt={3}>
-                    <Text fontWeight="bold">
-                      Total # of items: {totalItems} &nbsp;&nbsp; Total oz of
-                      items: {totalOz} &nbsp;&nbsp; Total value of items:{' '}
-                      {totalValue}
-                    </Text>
-                    <Button onClick={deleteRow}>- Delete Row</Button>
-                    <Button onClick={addRow}>+ Add Row</Button>
-                  </Stack>
-                </TableCaption>
-                <Table.Header>
-                  <Table.Row>
-                    <Table.ColumnHeader>Food Item</Table.ColumnHeader>
-                    <Table.ColumnHeader>Food Type</Table.ColumnHeader>
-                    <Table.ColumnHeader># of Items</Table.ColumnHeader>
-                    <Table.ColumnHeader>Oz per Item</Table.ColumnHeader>
-                    <Table.ColumnHeader>Value per Item</Table.ColumnHeader>
-                  </Table.Row>
-                </Table.Header>
-                <Table.Body>
-                  {rows.map((row) => (
-                    <Table.Row key={row.id}>
-                      <Table.Cell>
-                        <Input
-                          value={row.foodItem}
-                          onChange={(e) =>
-                            handleChange(row.id, 'foodItem', e.target.value)
-                          }
-                        />
-                      </Table.Cell>
-                      <Table.Cell>
-                        <NativeSelect.Root>
-                          <NativeSelect.Field
-                            placeholder="Select a food type"
-                            value={row.foodType}
+      <Portal>
+        <Dialog.Backdrop />
+        <Dialog.Positioner>
+          <Dialog.Content maxW="49em">
+            <Dialog.CloseTrigger />
+
+            <Dialog.Header asChild>
+              <Dialog.Title fontSize={25} fontWeight={700}>
+                SSF Log New Donation Form
+              </Dialog.Title>
+            </Dialog.Header>
+
+            <Dialog.Body>
+              <Text mb="1.5em">
+                Log a new donation by filling out the form below.
+              </Text>
+
+              <Box display="block" overflowX="auto" whiteSpace="nowrap">
+                <Table.Root variant="line">
+                  <TableCaption>
+                    <Stack direction="row" align="center" gap={3} mt={3}>
+                      <Text fontWeight="bold">
+                        Total Items: {totalItems} &nbsp; Total oz: {totalOz}{' '}
+                        &nbsp; Total Value: {totalValue}
+                      </Text>
+                      <Button onClick={deleteRow}>- Delete Row</Button>
+                      <Button onClick={addRow}>+ Add Row</Button>
+                    </Stack>
+                  </TableCaption>
+
+                  <Table.Header>
+                    <Table.Row>
+                      <Table.ColumnHeader>Food Item</Table.ColumnHeader>
+                      <Table.ColumnHeader>Food Type</Table.ColumnHeader>
+                      <Table.ColumnHeader># of Items</Table.ColumnHeader>
+                      <Table.ColumnHeader>Oz per Item</Table.ColumnHeader>
+                      <Table.ColumnHeader>Value per Item</Table.ColumnHeader>
+                    </Table.Row>
+                  </Table.Header>
+
+                  <Table.Body>
+                    {rows.map((row) => (
+                      <Table.Row key={row.id}>
+                        <Table.Cell>
+                          <Input
+                            value={row.foodItem}
                             onChange={(e) =>
-                              handleChange(row.id, 'foodType', e.target.value)
+                              handleChange(row.id, 'foodItem', e.target.value)
                             }
-                          >
-                            {FoodTypes.map((type) => (
-                              <option key={type} value={type}>
-                                {type}
-                              </option>
-                            ))}
-                          </NativeSelect.Field>
-                          <NativeSelectIndicator />
-                        </NativeSelect.Root>
-                      </Table.Cell>
-                      <Table.Cell>
-                        <Input
-                          type="number"
-                          min={0}
-                          value={row.numItems}
-                          onChange={(e) =>
-                            handleChange(row.id, 'numItems', e.target.value)
-                          }
-                        />
-                      </Table.Cell>
-                      <Table.Cell>
-                        <Input
-                          type="number"
-                          min={0}
-                          value={row.ozPerItem}
-                          onChange={(e) =>
-                            handleChange(row.id, 'ozPerItem', e.target.value)
-                          }
-                        />
-                      </Table.Cell>
-                      <Table.Cell>
-                        <Input
-                          type="number"
-                          min={0}
-                          value={row.valuePerItem}
-                          onChange={(e) =>
-                            handleChange(row.id, 'valuePerItem', e.target.value)
-                          }
-                        />
-                      </Table.Cell>
-                    </Table.Row>
-                  ))}
-                </Table.Body>
-              </Table.Root>
-            </Box>
-            <Flex justifyContent="space-between" mt={4}>
-              <Button onClick={onClose}>Close</Button>
-              <Button onClick={handleSubmit}>Submit</Button>
-            </Flex>
-          </Dialog.Body>
-          <Dialog.CloseTrigger />
-        </Dialog.Content>
-      </Dialog.Positioner>
+                          />
+                        </Table.Cell>
+
+                        <Table.Cell>
+                          <NativeSelect.Root>
+                            <NativeSelect.Field
+                              value={row.foodType}
+                              onChange={(e) =>
+                                handleChange(row.id, 'foodType', e.target.value)
+                              }
+                            >
+                              <option value="">Select food type...</option>
+                              {FoodTypes.map((type) => (
+                                <option key={type} value={type}>
+                                  {type}
+                                </option>
+                              ))}
+                            </NativeSelect.Field>
+                            <NativeSelectIndicator />
+                          </NativeSelect.Root>
+                        </Table.Cell>
+
+                        <Table.Cell>
+                          <Input
+                            type="number"
+                            min={0}
+                            value={row.numItems}
+                            onChange={(e) =>
+                              handleChange(row.id, 'numItems', e.target.value)
+                            }
+                          />
+                        </Table.Cell>
+
+                        <Table.Cell>
+                          <Input
+                            type="number"
+                            min={0}
+                            value={row.ozPerItem}
+                            onChange={(e) =>
+                              handleChange(row.id, 'ozPerItem', e.target.value)
+                            }
+                          />
+                        </Table.Cell>
+
+                        <Table.Cell>
+                          <Input
+                            type="number"
+                            min={0}
+                            value={row.valuePerItem}
+                            onChange={(e) =>
+                              handleChange(
+                                row.id,
+                                'valuePerItem',
+                                e.target.value,
+                              )
+                            }
+                          />
+                        </Table.Cell>
+                      </Table.Row>
+                    ))}
+                  </Table.Body>
+                </Table.Root>
+              </Box>
+
+              <Flex justifyContent="space-between" mt={4}>
+                <Button onClick={onClose}>Close</Button>
+                <Button onClick={handleSubmit}>Submit</Button>
+              </Flex>
+            </Dialog.Body>
+          </Dialog.Content>
+        </Dialog.Positioner>
+      </Portal>
     </Dialog.Root>
   );
 };
diff --git a/apps/frontend/src/components/forms/pantryApplicationForm.tsx b/apps/frontend/src/components/forms/pantryApplicationForm.tsx
index 94abfe3a..df185caa 100644
--- a/apps/frontend/src/components/forms/pantryApplicationForm.tsx
+++ b/apps/frontend/src/components/forms/pantryApplicationForm.tsx
@@ -67,18 +67,22 @@ const activityOptions = [
 
 const PantryApplicationForm: React.FC = () => {
   const [contactPhone, setContactPhone] = useState<string>('');
-  const [secondaryContactPhone, setSecondaryContactPhone] = useState<string>('');
+  const [secondaryContactPhone, setSecondaryContactPhone] =
+    useState<string>('');
   const [activities, setActivities] = useState<string[]>([]);
   const allergenClientsExactOption: string = 'I have an exact number';
 
   const [allergenClients, setAllergenClients] = useState<string | undefined>();
   const [restrictions, setRestrictions] = useState<string[]>([]);
-  const [reserveFoodForAllergic, setReserveFoodForAllergic] = useState<string>();
-  const [differentMailingAddress, setDifferentMailingAddress] = useState<boolean | null>();
+  const [reserveFoodForAllergic, setReserveFoodForAllergic] =
+    useState<string>();
+  const [differentMailingAddress, setDifferentMailingAddress] = useState<
+    boolean | null
+  >();
   const [otherEmailContact, setOtherEmailContact] = useState<boolean>(false);
 
   const sectionTitleStyles = {
-    fontFamily: "inter",
+    fontFamily: 'inter',
     fontWeight: '600',
     fontSize: 'md',
     color: 'gray.dark',
@@ -86,16 +90,16 @@ const PantryApplicationForm: React.FC = () => {
   };
 
   const sectionSubtitleStyles = {
-    fontFamily: "inter",
+    fontFamily: 'inter',
     fontWeight: '400',
     color: 'gray.light',
     mb: '2.25em',
     fontSize: 'sm',
-  }
+  };
 
   const fieldHeaderStyles = {
     color: 'neutral.800',
-    fontFamily: "inter",
+    fontFamily: 'inter',
     fontSize: 'sm',
     fontWeight: '600',
   };
@@ -103,96 +107,121 @@ const PantryApplicationForm: React.FC = () => {
   return (
     <Box width="100%" mx="11em" my="4em">
       <Box as="section" mb="2.75em">
-        <Heading textStyle="h1" fontWeight="normal" mb=".5em" >
+        <Heading textStyle="h1" fontWeight="normal" mb=".5em">
           Partner Pantry Application
         </Heading>
         <Text textStyle="p" color="gray.light">
-          Thank you for your interest in partnering with Securing Safe Food (SSF) to help 
-          serve clients with food allergies and other adverse reactions to foods.
+          Thank you for your interest in partnering with Securing Safe Food
+          (SSF) to help serve clients with food allergies and other adverse
+          reactions to foods.
         </Text>
       </Box>
-      <Box 
-        as="section" bg="#FEFEFE" p="2em" 
-        border="1px solid" borderColor="neutral.200" rounded="sm"
+      <Box
+        as="section"
+        bg="#FEFEFE"
+        p="2em"
+        border="1px solid"
+        borderColor="neutral.200"
+        rounded="sm"
       >
         <Form method="post" action="/pantry-application">
-          <Heading textStyle="h3" mb="1em" color="gray.dark" >
+          <Heading textStyle="h3" mb="1em" color="gray.dark">
             Pantry Application Form
           </Heading>
-          <Stack gap="1em" mb="2em" color="gray.light" textStyle="p" fontWeight="400">
+          <Stack
+            gap="1em"
+            mb="2em"
+            color="gray.light"
+            textStyle="p"
+            fontWeight="400"
+          >
             <Text>
-              This application helps us understand your pantry’s capacity and interest in 
-              distributing allergen-friendly food. We’ll ask about your pantry’s current 
-              practices, storage capabilities, and communication preferences.
+              This application helps us understand your pantry’s capacity and
+              interest in distributing allergen-friendly food. We’ll ask about
+              your pantry’s current practices, storage capabilities, and
+              communication preferences.
             </Text>
             <Text mb=".5em">
-              Please answer as accurately as possible. If you have any questions or need help, 
-              don’t hesitate to contact the SSF team.
+              Please answer as accurately as possible. If you have any questions
+              or need help, don’t hesitate to contact the SSF team.
             </Text>
             <Separator size="sm" color="neutral.100" />
           </Stack>
-          
-          <Text {...sectionTitleStyles}>
-            Primary Contact Information
-          </Text>
+
+          <Text {...sectionTitleStyles}>Primary Contact Information</Text>
           <SimpleGrid columns={2} columnGap={9} rowGap={10} mb="2.5em">
             <Field.Root required>
               <Field.Label {...fieldHeaderStyles}>
                 First Name
-                <Field.RequiredIndicator color="red"/>
+                <Field.RequiredIndicator color="red" />
               </Field.Label>
-              <Input name="contactFirstName" type="text" borderColor="neutral.100" />
+              <Input
+                name="contactFirstName"
+                type="text"
+                borderColor="neutral.100"
+              />
             </Field.Root>
             <Field.Root required>
               <Field.Label {...fieldHeaderStyles}>
                 Last Name
-                <Field.RequiredIndicator color="red"/>
+                <Field.RequiredIndicator color="red" />
               </Field.Label>
-              <Input name="contactLastName" type="text" borderColor="neutral.100" />
+              <Input
+                name="contactLastName"
+                type="text"
+                borderColor="neutral.100"
+              />
             </Field.Root>
             <Field.Root required>
               <Field.Label {...fieldHeaderStyles}>
                 Phone Number
-                <Field.RequiredIndicator color="red"/>
+                <Field.RequiredIndicator color="red" />
               </Field.Label>
               <USPhoneInput
                 value={contactPhone}
                 onChange={setContactPhone}
-                inputProps={{ name: 'contactPhone', borderColor: 'neutral.100' }}
+                inputProps={{
+                  name: 'contactPhone',
+                  borderColor: 'neutral.100',
+                }}
               />
             </Field.Root>
             <Field.Root required>
               <Field.Label {...fieldHeaderStyles}>
                 Email Address
-                <Field.RequiredIndicator color="red"/>
+                <Field.RequiredIndicator color="red" />
               </Field.Label>
-              <Input name="contactEmail" type="email" borderColor="neutral.100" />
+              <Input
+                name="contactEmail"
+                type="email"
+                borderColor="neutral.100"
+              />
             </Field.Root>
           </SimpleGrid>
           <Field.Root required mb=".75em">
             <Field.Label {...fieldHeaderStyles} mb=".5em">
-              Is there someone at your pantry who can regularly check and respond to emails from SSF as needed?{' '}
-              <Field.RequiredIndicator color="red"/>
+              Is there someone at your pantry who can regularly check and
+              respond to emails from SSF as needed?{' '}
+              <Field.RequiredIndicator color="red" />
             </Field.Label>
-            <RadioGroup.Root 
+            <RadioGroup.Root
               name="hasEmailContact"
               variant="solid"
-              onValueChange={(e: {value: string}) => setOtherEmailContact(e.value === 'Other')}
+              onValueChange={(e: { value: string }) =>
+                setOtherEmailContact(e.value === 'Other')
+              }
             >
               <Stack>
                 {['Yes', 'No', 'Other'].map((value) => (
                   <RadioGroup.Item key={value} value={value}>
-                    <RadioGroup.ItemHiddenInput required/>
-                    <RadioGroup.ItemControl _checked={{ bg: 'neutral.800' }} >
-                      <RadioGroup.ItemIndicator 
-                        border="1px solid" 
+                    <RadioGroup.ItemHiddenInput required />
+                    <RadioGroup.ItemControl _checked={{ bg: 'neutral.800' }}>
+                      <RadioGroup.ItemIndicator
+                        border="1px solid"
                         borderColor="neutral.100"
                       />
                     </RadioGroup.ItemControl>
-                    <RadioGroup.ItemText 
-                      color="neutral.700"
-                      textStyle="p2"
-                    >
+                    <RadioGroup.ItemText color="neutral.700" textStyle="p2">
                       {value}
                     </RadioGroup.ItemText>
                   </RadioGroup.Item>
@@ -201,127 +230,151 @@ const PantryApplicationForm: React.FC = () => {
             </RadioGroup.Root>
           </Field.Root>
           <Field.Root required={otherEmailContact} mb="2.5em">
-            <Input 
-              name="emailContactOther" 
-              type="text" 
-              borderColor="neutral.100" 
+            <Input
+              name="emailContactOther"
+              type="text"
+              borderColor="neutral.100"
               placeholder="If you selected other, please specify."
-              _placeholder={{ color: "neutral.800" }}
+              _placeholder={{ color: 'neutral.800' }}
               maxW="30em"
             />
           </Field.Root>
 
-          <Separator size="sm" color="neutral.100" mb="3em"/>
+          <Separator size="sm" color="neutral.100" mb="3em" />
 
-          <Text {...sectionTitleStyles}>
-            Secondary Contact Information
-          </Text>
+          <Text {...sectionTitleStyles}>Secondary Contact Information</Text>
           <SimpleGrid columns={2} columnGap={9} rowGap={9} mb="4em">
             <Field.Root>
-              <Field.Label {...fieldHeaderStyles}>
-                First Name
-              </Field.Label>
-              <Input name="secondaryContactFirstName" type="text" borderColor="neutral.100" />
+              <Field.Label {...fieldHeaderStyles}>First Name</Field.Label>
+              <Input
+                name="secondaryContactFirstName"
+                type="text"
+                borderColor="neutral.100"
+              />
             </Field.Root>
             <Field.Root>
-              <Field.Label {...fieldHeaderStyles}>
-                Last Name
-              </Field.Label>
-              <Input name="secondaryContactLastName" type="text" borderColor="neutral.100" />
+              <Field.Label {...fieldHeaderStyles}>Last Name</Field.Label>
+              <Input
+                name="secondaryContactLastName"
+                type="text"
+                borderColor="neutral.100"
+              />
             </Field.Root>
             <Field.Root>
-              <Field.Label {...fieldHeaderStyles}>
-                Phone Number
-              </Field.Label>
+              <Field.Label {...fieldHeaderStyles}>Phone Number</Field.Label>
               <USPhoneInput
                 value={secondaryContactPhone}
                 onChange={setSecondaryContactPhone}
                 allowEmpty={true}
-                inputProps={{ name: 'secondaryContactPhone', borderColor: 'neutral.100' }}
+                inputProps={{
+                  name: 'secondaryContactPhone',
+                  borderColor: 'neutral.100',
+                }}
               />
             </Field.Root>
             <Field.Root>
-              <Field.Label {...fieldHeaderStyles}>
-                Email Address
-              </Field.Label>
-              <Input name="secondaryContactEmail" type="email" borderColor="neutral.100" />
+              <Field.Label {...fieldHeaderStyles}>Email Address</Field.Label>
+              <Input
+                name="secondaryContactEmail"
+                type="email"
+                borderColor="neutral.100"
+              />
             </Field.Root>
           </SimpleGrid>
 
-          <Separator size="sm" color="neutral.100" mb="3em"/>
-          
+          <Separator size="sm" color="neutral.100" mb="3em" />
+
           <Text {...sectionTitleStyles} mb="0">
             Food Shipment Address
           </Text>
           <Text {...sectionSubtitleStyles}>
             Please list your address for <b>food shipments</b>.
           </Text>
-          <SimpleGrid columns={2} columnGap={9} rowGap={9} mb="2em" >
+          <SimpleGrid columns={2} columnGap={9} rowGap={9} mb="2em">
             <Field.Root required>
               <Field.Label {...fieldHeaderStyles}>
                 Address Line 1
-                <Field.RequiredIndicator color="red"/>
+                <Field.RequiredIndicator color="red" />
               </Field.Label>
-              <Input name="shipmentAddressLine1" type="text" borderColor="neutral.100" />
+              <Input
+                name="shipmentAddressLine1"
+                type="text"
+                borderColor="neutral.100"
+              />
             </Field.Root>
             <Field.Root>
-              <Field.Label {...fieldHeaderStyles}>
-                Address Line 2
-              </Field.Label>
-              <Input name="shipmentAddressLine2" type="text" borderColor="neutral.100" />
+              <Field.Label {...fieldHeaderStyles}>Address Line 2</Field.Label>
+              <Input
+                name="shipmentAddressLine2"
+                type="text"
+                borderColor="neutral.100"
+              />
             </Field.Root>
             <Field.Root required>
               <Field.Label {...fieldHeaderStyles}>
                 City/Town
-                <Field.RequiredIndicator color="red"/>
+                <Field.RequiredIndicator color="red" />
               </Field.Label>
-              <Input name="shipmentAddressCity" type="text" borderColor="neutral.100" />
+              <Input
+                name="shipmentAddressCity"
+                type="text"
+                borderColor="neutral.100"
+              />
             </Field.Root>
             <Field.Root required>
               <Field.Label {...fieldHeaderStyles}>
                 State/Region/Province
-                <Field.RequiredIndicator color="red"/>
+                <Field.RequiredIndicator color="red" />
               </Field.Label>
-              <Input name="shipmentAddressState" type="text" borderColor="neutral.100" />
+              <Input
+                name="shipmentAddressState"
+                type="text"
+                borderColor="neutral.100"
+              />
             </Field.Root>
             <Field.Root required>
               <Field.Label {...fieldHeaderStyles}>
                 Zip/Post Code
-                <Field.RequiredIndicator color="red"/>
+                <Field.RequiredIndicator color="red" />
               </Field.Label>
-              <Input name="shipmentAddressZip" type="text" borderColor="neutral.100" />
+              <Input
+                name="shipmentAddressZip"
+                type="text"
+                borderColor="neutral.100"
+              />
             </Field.Root>
             <Field.Root>
-              <Field.Label {...fieldHeaderStyles}>
-                Country
-              </Field.Label>
-              <Input name="shipmentAddressCountry" type="text" borderColor="neutral.100" />
+              <Field.Label {...fieldHeaderStyles}>Country</Field.Label>
+              <Input
+                name="shipmentAddressCountry"
+                type="text"
+                borderColor="neutral.100"
+              />
             </Field.Root>
           </SimpleGrid>
           <Field.Root required mb="2em">
             <Field.Label {...fieldHeaderStyles} mb=".5em">
-              Does this address differ from your pantry's mailing address for documents?{' '}
-              <Field.RequiredIndicator color="red"/>
+              Does this address differ from your pantry's mailing address for
+              documents? <Field.RequiredIndicator color="red" />
             </Field.Label>
-            <RadioGroup.Root 
+            <RadioGroup.Root
               variant="solid"
-              onValueChange={(e: {value: string}) => setDifferentMailingAddress(e.value === 'Yes')}
+              onValueChange={(e: { value: string }) =>
+                setDifferentMailingAddress(e.value === 'Yes')
+              }
               name="differentMailingAddress"
             >
               <Stack>
                 {['Yes', 'No'].map((value) => (
                   <RadioGroup.Item key={value} value={value}>
-                    <RadioGroup.ItemHiddenInput required/>
-                    <RadioGroup.ItemControl _checked={{ bg: 'neutral.800' }} >
-                      <RadioGroup.ItemIndicator 
-                        border="1px solid" 
+                    <RadioGroup.ItemHiddenInput required />
+                    <RadioGroup.ItemControl _checked={{ bg: 'neutral.800' }}>
+                      <RadioGroup.ItemIndicator
+                        border="1px solid"
                         borderColor="neutral.100"
                       />
                     </RadioGroup.ItemControl>
-                    <RadioGroup.ItemText 
-                      color="neutral.700" 
-                      textStyle="p2"
-                    >
+                    <RadioGroup.ItemText color="neutral.700" textStyle="p2">
                       {value}
                     </RadioGroup.ItemText>
                   </RadioGroup.Item>
@@ -331,28 +384,22 @@ const PantryApplicationForm: React.FC = () => {
           </Field.Root>
           <Field.Root required mb="2em">
             <Field.Label {...fieldHeaderStyles} mb=".5em">
-              Would your pantry be able to accept food deliveries 
-              during standard business hours Mon-Fri?{' '}
-              <Field.RequiredIndicator color="red"/>
+              Would your pantry be able to accept food deliveries during
+              standard business hours Mon-Fri?{' '}
+              <Field.RequiredIndicator color="red" />
             </Field.Label>
-            <RadioGroup.Root 
-              name="acceptFoodDeliveries"
-              variant="solid"
-            >
+            <RadioGroup.Root name="acceptFoodDeliveries" variant="solid">
               <Stack>
                 {['Yes', 'No'].map((value) => (
                   <RadioGroup.Item key={value} value={value}>
                     <RadioGroup.ItemHiddenInput required />
-                    <RadioGroup.ItemControl _checked={{ bg: 'neutral.800' }} >
-                      <RadioGroup.ItemIndicator 
-                        border="1px solid" 
+                    <RadioGroup.ItemControl _checked={{ bg: 'neutral.800' }}>
+                      <RadioGroup.ItemIndicator
+                        border="1px solid"
                         borderColor="neutral.100"
                       />
                     </RadioGroup.ItemControl>
-                    <RadioGroup.ItemText
-                      color="neutral.700"
-                      textStyle="p2"
-                    >
+                    <RadioGroup.ItemText color="neutral.700" textStyle="p2">
                       {value}
                     </RadioGroup.ItemText>
                   </RadioGroup.Item>
@@ -364,10 +411,13 @@ const PantryApplicationForm: React.FC = () => {
             <Field.Label {...fieldHeaderStyles}>
               Please note any delivery window restrictions.
             </Field.Label>
-            <Textarea name="deliveryWindowInstructions" borderColor="neutral.100" />
+            <Textarea
+              name="deliveryWindowInstructions"
+              borderColor="neutral.100"
+            />
           </Field.Root>
 
-          <Separator size="sm" color="neutral.100" my="3em"/>
+          <Separator size="sm" color="neutral.100" my="3em" />
 
           {differentMailingAddress && (
             <>
@@ -377,61 +427,81 @@ const PantryApplicationForm: React.FC = () => {
               <Text {...sectionSubtitleStyles}>
                 Please list your mailing address for <b>documents</b>.
               </Text>
-              <SimpleGrid columns={2} columnGap={9} rowGap={9} mb="4em" >
+              <SimpleGrid columns={2} columnGap={9} rowGap={9} mb="4em">
                 <Field.Root required={differentMailingAddress}>
                   <Field.Label {...fieldHeaderStyles}>
                     Address Line 1
-                    <Field.RequiredIndicator color="red"/>
+                    <Field.RequiredIndicator color="red" />
                   </Field.Label>
-                  <Input name="mailingAddressLine1" type="text" borderColor="neutral.100" />
+                  <Input
+                    name="mailingAddressLine1"
+                    type="text"
+                    borderColor="neutral.100"
+                  />
                 </Field.Root>
                 <Field.Root>
                   <Field.Label {...fieldHeaderStyles}>
                     Address Line 2
                   </Field.Label>
-                  <Input name="mailingAddressLine2" type="text" borderColor="neutral.100" />
+                  <Input
+                    name="mailingAddressLine2"
+                    type="text"
+                    borderColor="neutral.100"
+                  />
                 </Field.Root>
                 <Field.Root required={differentMailingAddress}>
                   <Field.Label {...fieldHeaderStyles}>
                     City/Town
-                    <Field.RequiredIndicator color="red"/>
+                    <Field.RequiredIndicator color="red" />
                   </Field.Label>
-                  <Input name="mailingAddressCity" type="text" borderColor="neutral.100" />
+                  <Input
+                    name="mailingAddressCity"
+                    type="text"
+                    borderColor="neutral.100"
+                  />
                 </Field.Root>
                 <Field.Root required={differentMailingAddress}>
                   <Field.Label {...fieldHeaderStyles}>
                     State/Region/Province
-                    <Field.RequiredIndicator color="red"/>
+                    <Field.RequiredIndicator color="red" />
                   </Field.Label>
-                  <Input name="mailingAddressState" type="text" borderColor="neutral.100" />
+                  <Input
+                    name="mailingAddressState"
+                    type="text"
+                    borderColor="neutral.100"
+                  />
                 </Field.Root>
                 <Field.Root required={differentMailingAddress}>
                   <Field.Label {...fieldHeaderStyles}>
                     Zip/Post Code
-                    <Field.RequiredIndicator color="red"/>
+                    <Field.RequiredIndicator color="red" />
                   </Field.Label>
-                  <Input name="mailingAddressZip" type="text" borderColor="neutral.100" />
+                  <Input
+                    name="mailingAddressZip"
+                    type="text"
+                    borderColor="neutral.100"
+                  />
                 </Field.Root>
                 <Field.Root>
-                  <Field.Label {...fieldHeaderStyles}>
-                    Country
-                  </Field.Label>
-                  <Input name="mailingAddressCountry" type="text" borderColor="neutral.100" />
+                  <Field.Label {...fieldHeaderStyles}>Country</Field.Label>
+                  <Input
+                    name="mailingAddressCountry"
+                    type="text"
+                    borderColor="neutral.100"
+                  />
                 </Field.Root>
               </SimpleGrid>
 
-              <Separator size="sm" color="neutral.100" my="3em"/>
+              <Separator size="sm" color="neutral.100" my="3em" />
             </>
           )}
-          
-          <Text {...sectionTitleStyles}>
-            Pantry Details
-          </Text>
+
+          <Text {...sectionTitleStyles}>Pantry Details</Text>
           <Field.Root required mb="2em">
             <Field.Label asChild>
               <Text {...fieldHeaderStyles}>
                 Pantry Name
-                <Field.RequiredIndicator color="red"/>
+                <Field.RequiredIndicator color="red" />
               </Text>
             </Field.Label>
             <Input name="pantryName" type="text" borderColor="neutral.100" />
@@ -440,7 +510,7 @@ const PantryApplicationForm: React.FC = () => {
             <Field.Label {...fieldHeaderStyles}>
               Approximately how many allergen-avoidant clients does your pantry
               serve?
-              <Field.RequiredIndicator color="red"/>
+              <Field.RequiredIndicator color="red" />
             </Field.Label>
             <NativeSelect.Root>
               <NativeSelect.Field
@@ -465,7 +535,7 @@ const PantryApplicationForm: React.FC = () => {
                   </option>
                 ))}
               </NativeSelect.Field>
-              <NativeSelectIndicator/>
+              <NativeSelectIndicator />
             </NativeSelect.Root>
           </Field.Root>
           {allergenClients === allergenClientsExactOption && (
@@ -492,7 +562,12 @@ const PantryApplicationForm: React.FC = () => {
             </Field.Label>
 
             {restrictions.map((value) => (
-              <input type="hidden" name="restrictions" key={value} value={value} />
+              <input
+                type="hidden"
+                name="restrictions"
+                key={value}
+                value={value}
+              />
             ))}
 
             <Menu.Root closeOnSelect={false}>
@@ -502,7 +577,7 @@ const PantryApplicationForm: React.FC = () => {
                   pr={2}
                   w="full"
                   bgColor="white"
-                  color='neutral.800'
+                  color="neutral.800"
                   borderColor="neutral.100"
                   justifyContent="space-between"
                   textStyle="p2"
@@ -513,15 +588,15 @@ const PantryApplicationForm: React.FC = () => {
                     : 'Select restrictions'}
                   <ChevronDownIcon />
 
-                  <input 
+                  <input
                     type="text"
                     name="restrictions-required"
                     value={restrictions.length > 0 ? 'selected' : ''}
                     required
-                    style={{ 
+                    style={{
                       position: 'absolute',
                       opacity: 0,
-                      pointerEvents: 'none'
+                      pointerEvents: 'none',
                     }}
                   />
                 </Button>
@@ -574,7 +649,7 @@ const PantryApplicationForm: React.FC = () => {
             {restrictions.length > 0 && (
               <Flex wrap="wrap" mt={1} gap={2}>
                 {restrictions.map((value) => (
-                  <Tag.Root 
+                  <Tag.Root
                     key={value}
                     bg="teal.100"
                     p={2}
@@ -583,10 +658,10 @@ const PantryApplicationForm: React.FC = () => {
                   >
                     <Tag.Label>{value}</Tag.Label>
                     <Tag.EndElement ml={4}>
-                      <Tag.CloseTrigger 
+                      <Tag.CloseTrigger
                         onClick={() =>
                           setRestrictions((prev) =>
-                            prev.filter((item) => item !== value)
+                            prev.filter((item) => item !== value),
                           )
                         }
                         style={{ cursor: 'pointer' }}
@@ -601,8 +676,10 @@ const PantryApplicationForm: React.FC = () => {
           {restrictions.find((option) =>
             otherRestrictionsOptions.includes(option),
           ) && (
-            <Field.Root 
-              required={restrictions.find((option) => otherRestrictionsOptions.includes(option))}
+            <Field.Root
+              required={restrictions.find((option) =>
+                otherRestrictionsOptions.includes(option),
+              )}
               mb="2em"
             >
               <Field.Label {...fieldHeaderStyles}>
@@ -614,27 +691,26 @@ const PantryApplicationForm: React.FC = () => {
           )}
           <Field.Root required mb="2em">
             <Field.Label {...fieldHeaderStyles}>
-              Would you be able to accept frozen donations that require refrigeration or freezing?
-              <Field.RequiredIndicator color="red"/>
+              Would you be able to accept frozen donations that require
+              refrigeration or freezing?
+              <Field.RequiredIndicator color="red" />
             </Field.Label>
-            <RadioGroup.Root 
-              name="refrigeratedDonation"
-              variant="solid"
-            >
+            <RadioGroup.Root name="refrigeratedDonation" variant="solid">
               <Stack>
-                {['Yes, always', 'No', 'Sometimes (check in before sending)'].map((value) => (
+                {[
+                  'Yes, always',
+                  'No',
+                  'Sometimes (check in before sending)',
+                ].map((value) => (
                   <RadioGroup.Item key={value} value={value}>
-                    <RadioGroup.ItemHiddenInput required/>
-                    <RadioGroup.ItemControl _checked={{ bg: 'neutral.800' }} >
-                      <RadioGroup.ItemIndicator 
-                        border="1px solid" 
+                    <RadioGroup.ItemHiddenInput required />
+                    <RadioGroup.ItemControl _checked={{ bg: 'neutral.800' }}>
+                      <RadioGroup.ItemIndicator
+                        border="1px solid"
                         borderColor="neutral.100"
                       />
                     </RadioGroup.ItemControl>
-                    <RadioGroup.ItemText 
-                      color="neutral.700"
-                      textStyle="p2"
-                    >
+                    <RadioGroup.ItemText color="neutral.700" textStyle="p2">
                       {value}
                     </RadioGroup.ItemText>
                   </RadioGroup.Item>
@@ -647,26 +723,20 @@ const PantryApplicationForm: React.FC = () => {
             <Field.Label {...fieldHeaderStyles}>
               Do you have a dedicated shelf or section of your pantry for
               allergy-friendly items?
-              <Field.RequiredIndicator color="red"/>
+              <Field.RequiredIndicator color="red" />
             </Field.Label>
-            <RadioGroup.Root 
-              name="dedicatedAllergyFriendly"
-              variant="solid"
-            >
+            <RadioGroup.Root name="dedicatedAllergyFriendly" variant="solid">
               <Stack>
                 {['Yes', 'No'].map((value) => (
                   <RadioGroup.Item key={value} value={value}>
-                    <RadioGroup.ItemHiddenInput required/>
-                    <RadioGroup.ItemControl _checked={{ bg: 'neutral.800' }} >
-                      <RadioGroup.ItemIndicator 
-                        border="1px solid" 
+                    <RadioGroup.ItemHiddenInput required />
+                    <RadioGroup.ItemControl _checked={{ bg: 'neutral.800' }}>
+                      <RadioGroup.ItemIndicator
+                        border="1px solid"
                         borderColor="neutral.100"
                       />
                     </RadioGroup.ItemControl>
-                    <RadioGroup.ItemText 
-                      color="neutral.700"
-                      textStyle="p2"
-                    >
+                    <RadioGroup.ItemText color="neutral.700" textStyle="p2">
                       {value}
                     </RadioGroup.ItemText>
                   </RadioGroup.Item>
@@ -677,34 +747,33 @@ const PantryApplicationForm: React.FC = () => {
 
           <Field.Root required mb="2em">
             <Field.Label {...fieldHeaderStyles}>
-              Are you willing to reserve our food shipments for allergen-avoidant
-              individuals?{' '}
-              <Field.RequiredIndicator color="red"/>
+              Are you willing to reserve our food shipments for
+              allergen-avoidant individuals?{' '}
+              <Field.RequiredIndicator color="red" />
             </Field.Label>
             <Field.HelperText color="neutral.600" mb=".5em">
-              For example, grouping allergen-friendly items on a separate shelf or 
-              in separate bins and encouraging non-allergic clients to save these 
-              items for clients who do not have other safe food options.
+              For example, grouping allergen-friendly items on a separate shelf
+              or in separate bins and encouraging non-allergic clients to save
+              these items for clients who do not have other safe food options.
             </Field.HelperText>
-            <RadioGroup.Root 
+            <RadioGroup.Root
               name="reserveFoodForAllergic"
               variant="solid"
-              onValueChange={(e: {value: string}) => setReserveFoodForAllergic(e.value)}
+              onValueChange={(e: { value: string }) =>
+                setReserveFoodForAllergic(e.value)
+              }
             >
               <Stack>
                 {['Yes', 'Some', 'No'].map((value) => (
                   <RadioGroup.Item key={value} value={value}>
-                    <RadioGroup.ItemHiddenInput required/>
-                    <RadioGroup.ItemControl _checked={{ bg: 'neutral.800' }} >
-                      <RadioGroup.ItemIndicator 
-                        border="1px solid" 
+                    <RadioGroup.ItemHiddenInput required />
+                    <RadioGroup.ItemControl _checked={{ bg: 'neutral.800' }}>
+                      <RadioGroup.ItemIndicator
+                        border="1px solid"
                         borderColor="neutral.100"
                       />
                     </RadioGroup.ItemControl>
-                    <RadioGroup.ItemText 
-                      color="neutral.700"
-                      textStyle="p2"
-                    >
+                    <RadioGroup.ItemText color="neutral.700" textStyle="p2">
                       {value}
                     </RadioGroup.ItemText>
                   </RadioGroup.Item>
@@ -716,10 +785,15 @@ const PantryApplicationForm: React.FC = () => {
           {reserveFoodForAllergic === 'Yes' && (
             <Field.Root mb="2em">
               <Field.Label {...fieldHeaderStyles}>
-                How would you work to ensure that allergen-friendly foods are distributed to 
-                clients with food allergies or other adverse reactions to foods?
+                How would you work to ensure that allergen-friendly foods are
+                distributed to clients with food allergies or other adverse
+                reactions to foods?
               </Field.Label>
-              <Textarea name="reservationExplanation" borderColor="neutral.100" autoresize />
+              <Textarea
+                name="reservationExplanation"
+                borderColor="neutral.100"
+                autoresize
+              />
             </Field.Root>
           )}
 
@@ -728,7 +802,11 @@ const PantryApplicationForm: React.FC = () => {
               <Field.Label {...fieldHeaderStyles}>
                 Please explain why you selected "Some."
               </Field.Label>
-              <Textarea name="reservationExplanation" borderColor="neutral.100" autoresize />
+              <Textarea
+                name="reservationExplanation"
+                borderColor="neutral.100"
+                autoresize
+              />
             </Field.Root>
           )}
 
@@ -736,7 +814,7 @@ const PantryApplicationForm: React.FC = () => {
             <Field.Label {...fieldHeaderStyles}>
               How often do allergen-avoidant clients visit your food pantry?
             </Field.Label>
-            <NativeSelect.Root >
+            <NativeSelect.Root>
               <NativeSelect.Field
                 placeholder="Select an option"
                 name="clientVisitFrequency"
@@ -763,7 +841,7 @@ const PantryApplicationForm: React.FC = () => {
               Are you confident in identifying the top 9 allergens in an
               ingredient list?
             </Field.Label>
-            <NativeSelect.Root >
+            <NativeSelect.Root>
               <NativeSelect.Field
                 placeholder="Select an option"
                 name="identifyAllergensConfidence"
@@ -792,18 +870,20 @@ const PantryApplicationForm: React.FC = () => {
               Do you serve allergen-avoidant or food-allergic children at your
               pantry?
             </Field.Label>
-            <NativeSelect.Root >
+            <NativeSelect.Root>
               <NativeSelect.Field
                 placeholder="Select an option"
                 name="serveAllergicChildren"
                 borderColor="neutral.100"
                 color="neutral.800"
               >
-                {['Yes, many (> 10)', 'Yes, a few (< 10)', 'No'].map((value) => (
-                  <option key={value} value={value}>
-                    {value}
-                  </option>
-                ))}
+                {['Yes, many (> 10)', 'Yes, a few (< 10)', 'No'].map(
+                  (value) => (
+                    <option key={value} value={value}>
+                      {value}
+                    </option>
+                  ),
+                )}
               </NativeSelect.Field>
               <NativeSelectIndicator />
             </NativeSelect.Root>
@@ -819,7 +899,12 @@ const PantryApplicationForm: React.FC = () => {
             </Field.Label>
 
             {activities.map((value) => (
-              <input type="hidden" name="activities" key={value} value={value} />
+              <input
+                type="hidden"
+                name="activities"
+                key={value}
+                value={value}
+              />
             ))}
 
             <Menu.Root closeOnSelect={false}>
@@ -829,7 +914,7 @@ const PantryApplicationForm: React.FC = () => {
                   pr={2}
                   w="full"
                   bgColor="white"
-                  color='neutral.800'
+                  color="neutral.800"
                   borderColor="neutral.100"
                   justifyContent="space-between"
                   textStyle="p2"
@@ -840,15 +925,15 @@ const PantryApplicationForm: React.FC = () => {
                     : 'Select activities'}
                   <ChevronDownIcon />
 
-                  <input 
+                  <input
                     type="text"
                     name="activities-required"
                     value={activities.length > 0 ? 'selected' : ''}
                     required
-                    style={{ 
+                    style={{
                       position: 'absolute',
                       opacity: 0,
-                      pointerEvents: 'none'
+                      pointerEvents: 'none',
                     }}
                   />
                 </Button>
@@ -901,7 +986,7 @@ const PantryApplicationForm: React.FC = () => {
             {activities.length > 0 && (
               <Flex wrap="wrap" mt={1} gap={2}>
                 {activities.map((value) => (
-                  <Tag.Root 
+                  <Tag.Root
                     key={value}
                     bg="teal.100"
                     p={2}
@@ -910,10 +995,10 @@ const PantryApplicationForm: React.FC = () => {
                   >
                     <Tag.Label>{value}</Tag.Label>
                     <Tag.EndElement ml={4}>
-                      <Tag.CloseTrigger 
+                      <Tag.CloseTrigger
                         onClick={() =>
                           setActivities((prev) =>
-                            prev.filter((item) => item !== value)
+                            prev.filter((item) => item !== value),
                           )
                         }
                         style={{ cursor: 'pointer' }}
@@ -928,17 +1013,18 @@ const PantryApplicationForm: React.FC = () => {
               following are additional ways to help us better support you!
               Please select all that apply.
             </Field.HelperText>
-          </Field.Root>       
+          </Field.Root>
           <Field.Root required={activities.includes('Something else')} mb="2em">
             <Field.Label {...fieldHeaderStyles}>
-              Please list any comments/concerns related to the previous question.
+              Please list any comments/concerns related to the previous
+              question.
               {activities.includes('Something else') && (
-                <Field.RequiredIndicator color="red"/>
+                <Field.RequiredIndicator color="red" />
               )}
             </Field.Label>
-            <Textarea 
-              name="activitiesComments" 
-              borderColor="neutral.100" 
+            <Textarea
+              name="activitiesComments"
+              borderColor="neutral.100"
               autoresize
             />
             <Field.HelperText color="neutral.600">
@@ -947,48 +1033,51 @@ const PantryApplicationForm: React.FC = () => {
           </Field.Root>
           <Field.Root required mb="2em">
             <Field.Label {...fieldHeaderStyles}>
-              What types of allergen-free items, if any, do you currently have in
-              stock?
-              <Field.RequiredIndicator color="red"/>
+              What types of allergen-free items, if any, do you currently have
+              in stock?
+              <Field.RequiredIndicator color="red" />
             </Field.Label>
-            <Textarea name="itemsInStock" borderColor="neutral.100" autoresize />
+            <Textarea
+              name="itemsInStock"
+              borderColor="neutral.100"
+              autoresize
+            />
             <Field.HelperText color="neutral.600">
-              For example, gluten-free breads, sunflower seed butters, nondairy beverages, etc.
+              For example, gluten-free breads, sunflower seed butters, nondairy
+              beverages, etc.
             </Field.HelperText>
           </Field.Root>
           <Field.Root required mb="4em">
             <Field.Label {...fieldHeaderStyles}>
               Do allergen-avoidant clients at your pantry ever request a greater
               variety of items or not have enough options? Please explain.
-              <Field.RequiredIndicator color="red"/>
+              <Field.RequiredIndicator color="red" />
             </Field.Label>
-            <Textarea name="needMoreOptions" borderColor="neutral.100" autoresize />
+            <Textarea
+              name="needMoreOptions"
+              borderColor="neutral.100"
+              autoresize
+            />
           </Field.Root>
 
-          <Separator size="sm" color="neutral.100" my="3em"/>
+          <Separator size="sm" color="neutral.100" my="3em" />
 
           <Field.Root mb="2em">
             <Field.Label {...fieldHeaderStyles}>
               Would you like to subscribe to our quarterly newsletter?
             </Field.Label>
-            <RadioGroup.Root 
-              name="newsletterSubscription"
-              variant="solid"
-            >
+            <RadioGroup.Root name="newsletterSubscription" variant="solid">
               <Stack>
                 {['Yes', 'No'].map((value) => (
                   <RadioGroup.Item key={value} value={value}>
                     <RadioGroup.ItemHiddenInput />
-                    <RadioGroup.ItemControl _checked={{ bg: 'neutral.800' }} >
-                      <RadioGroup.ItemIndicator 
-                        border="1px solid" 
+                    <RadioGroup.ItemControl _checked={{ bg: 'neutral.800' }}>
+                      <RadioGroup.ItemIndicator
+                        border="1px solid"
                         borderColor="neutral.100"
                       />
                     </RadioGroup.ItemControl>
-                    <RadioGroup.ItemText
-                      color="neutral.700"
-                      textStyle="p2"
-                    >
+                    <RadioGroup.ItemText color="neutral.700" textStyle="p2">
                       {value}
                     </RadioGroup.ItemText>
                   </RadioGroup.Item>
@@ -998,32 +1087,29 @@ const PantryApplicationForm: React.FC = () => {
           </Field.Root>
           <Field.Root required mb="4em">
             <Checkbox.Root>
-              <Checkbox.HiddenInput/>
-              <Checkbox.Control 
-                border="1px solid" 
-                borderColor="neutral.100" 
+              <Checkbox.HiddenInput />
+              <Checkbox.Control
+                border="1px solid"
+                borderColor="neutral.100"
                 _checked={{ bg: 'neutral.800' }}
               />
               <Checkbox.Label {...fieldHeaderStyles}>
                 By submitting this form, you agree to our Privacy Policy.{' '}
-                <Field.RequiredIndicator color="red"/>
+                <Field.RequiredIndicator color="red" />
               </Checkbox.Label>
             </Checkbox.Root>
           </Field.Root>
           <Box display="flex" gap={2} justifyContent="flex-end" mb={6}>
             <Button
-              border="1px solid" 
-              color="neutral.800" 
+              border="1px solid"
+              color="neutral.800"
               borderColor="neutral.200"
               fontWeight={600}
               bg="white"
             >
               Cancel
             </Button>
-            <Button 
-              type="submit" bg="blue.ssf" 
-              fontWeight={600} px={8}
-            >
+            <Button type="submit" bg="blue.ssf" fontWeight={600} px={8}>
               Submit Application
             </Button>
           </Box>
@@ -1040,12 +1126,18 @@ export const submitPantryApplicationForm: ActionFunction = async ({
   const pantryApplicationData = new Map();
 
   const ActivityStorageMap: Record<string, string> = {
-    'Create a labeled, allergy-friendly shelf or shelves': Activity.CREATE_LABELED_SHELF,
-    'Provide clients and staff/volunteers with educational pamphlets': Activity.PROVIDE_EDUCATIONAL_PAMPHLETS,
-    "Use a spreadsheet to track clients' medical dietary needs and distribution of SSF items per month": Activity.TRACK_DIETARY_NEEDS,
-    'Post allergen-free resource flyers throughout pantry': Activity.POST_RESOURCE_FLYERS,
-    'Survey your clients to determine their medical dietary needs': Activity.SURVEY_CLIENTS,
-    'Collect feedback from allergen-avoidant clients on SSF foods': Activity.COLLECT_FEEDBACK,
+    'Create a labeled, allergy-friendly shelf or shelves':
+      Activity.CREATE_LABELED_SHELF,
+    'Provide clients and staff/volunteers with educational pamphlets':
+      Activity.PROVIDE_EDUCATIONAL_PAMPHLETS,
+    "Use a spreadsheet to track clients' medical dietary needs and distribution of SSF items per month":
+      Activity.TRACK_DIETARY_NEEDS,
+    'Post allergen-free resource flyers throughout pantry':
+      Activity.POST_RESOURCE_FLYERS,
+    'Survey your clients to determine their medical dietary needs':
+      Activity.SURVEY_CLIENTS,
+    'Collect feedback from allergen-avoidant clients on SSF foods':
+      Activity.COLLECT_FEEDBACK,
     'Something else': Activity.SOMETHING_ELSE,
   };
 
@@ -1055,39 +1147,69 @@ export const submitPantryApplicationForm: ActionFunction = async ({
     restrictions.push(restrictionsOther as string);
   }
   pantryApplicationData.set('restrictions', restrictions);
-  form.delete('restrictions')
+  form.delete('restrictions');
   form.delete('restrictionsOther');
 
   const selectedActivities = form.getAll('activities') as string[];
-  const convertedActivities = selectedActivities.map((activity) => ActivityStorageMap[activity]);
+  const convertedActivities = selectedActivities.map(
+    (activity) => ActivityStorageMap[activity],
+  );
   pantryApplicationData.set('activities', convertedActivities);
   form.delete('activities');
 
-  pantryApplicationData.set('newsletterSubscription', form.get("newsletterSubscription") === "Yes");
-  pantryApplicationData.set('acceptFoodDeliveries', form.get("acceptFoodDeliveries") === "Yes");
-  pantryApplicationData.set('dedicatedAllergyFriendly', form.get("dedicatedAllergyFriendly") === "Yes");
-  pantryApplicationData.set('hasEmailContact', form.get("hasEmailContact") === "Yes");
-  form.delete('newsletterSubscription')
-  form.delete('acceptFoodDeliveries')
-  form.delete('dedicatedAllergyFriendly')
-  form.delete('hasEmailContact')
+  pantryApplicationData.set(
+    'newsletterSubscription',
+    form.get('newsletterSubscription') === 'Yes',
+  );
+  pantryApplicationData.set(
+    'acceptFoodDeliveries',
+    form.get('acceptFoodDeliveries') === 'Yes',
+  );
+  pantryApplicationData.set(
+    'dedicatedAllergyFriendly',
+    form.get('dedicatedAllergyFriendly') === 'Yes',
+  );
+  pantryApplicationData.set(
+    'hasEmailContact',
+    form.get('hasEmailContact') === 'Yes',
+  );
+  form.delete('newsletterSubscription');
+  form.delete('acceptFoodDeliveries');
+  form.delete('dedicatedAllergyFriendly');
+  form.delete('hasEmailContact');
 
   // Handle mailing address
-  if (form.get("differentMailingAddress") === "No") {
-    pantryApplicationData.set('mailingAddressLine1', form.get('shipmentAddressLine1'));
-    pantryApplicationData.set('mailingAddressLine2', form.get('shipmentAddressLine2') || null);
-    pantryApplicationData.set('mailingAddressCity', form.get('shipmentAddressCity'));
-    pantryApplicationData.set('mailingAddressState', form.get('shipmentAddressState'));
-    pantryApplicationData.set('mailingAddressZip', form.get('shipmentAddressZip'));
-    pantryApplicationData.set('mailingAddressCountry', form.get('shipmentAddressCountry') || null);
+  if (form.get('differentMailingAddress') === 'No') {
+    pantryApplicationData.set(
+      'mailingAddressLine1',
+      form.get('shipmentAddressLine1'),
+    );
+    pantryApplicationData.set(
+      'mailingAddressLine2',
+      form.get('shipmentAddressLine2') || null,
+    );
+    pantryApplicationData.set(
+      'mailingAddressCity',
+      form.get('shipmentAddressCity'),
+    );
+    pantryApplicationData.set(
+      'mailingAddressState',
+      form.get('shipmentAddressState'),
+    );
+    pantryApplicationData.set(
+      'mailingAddressZip',
+      form.get('shipmentAddressZip'),
+    );
+    pantryApplicationData.set(
+      'mailingAddressCountry',
+      form.get('shipmentAddressCountry') || null,
+    );
   }
-  form.delete('differentMailingAddress')
+  form.delete('differentMailingAddress');
 
   // Replace the answer for allergenClients with the answer
   // for allergenClientsExact if it is given
-  const allergenClientsExact = form.get(
-    'allergenClientsExact',
-  );
+  const allergenClientsExact = form.get('allergenClientsExact');
   if ((allergenClientsExact ?? '') !== '') {
     pantryApplicationData.set('allergenClients', allergenClientsExact);
   }
@@ -1098,7 +1220,7 @@ export const submitPantryApplicationForm: ActionFunction = async ({
     if (value === '') {
       pantryApplicationData.set(key, null);
     } else {
-      pantryApplicationData.set(key, value)
+      pantryApplicationData.set(key, value);
     }
   });
 
@@ -1120,12 +1242,14 @@ export const submitPantryApplicationForm: ActionFunction = async ({
         );
       } else {
         alert('Form submission failed; please try again');
-        console.log(error)
+        console.log(error);
       }
     },
   );
 
-  return submissionSuccessful ? redirect('/pantry-application/submitted') : null;
+  return submissionSuccessful
+    ? redirect('/pantry-application/submitted')
+    : null;
 };
 
 export default PantryApplicationForm;
diff --git a/apps/frontend/src/components/forms/usPhoneInput.tsx b/apps/frontend/src/components/forms/usPhoneInput.tsx
index 7dd3dc16..dd172c16 100644
--- a/apps/frontend/src/components/forms/usPhoneInput.tsx
+++ b/apps/frontend/src/components/forms/usPhoneInput.tsx
@@ -46,8 +46,9 @@ export const USPhoneInput: React.FC<USPhoneInputProps> = ({
       // +1 country code is automatically added to data.phone, so after removing
       // all non-digits, a length of 0-1 means the field is empty
       // (the input does not allow non-digit characters)
-      const digits = data.phone.replace(/\D/g, '')
-      const isEmpty = !data.phone || data.phone.trim() === '' || digits.length <= 1;
+      const digits = data.phone.replace(/\D/g, '');
+      const isEmpty =
+        !data.phone || data.phone.trim() === '' || digits.length <= 1;
 
       onChange(isEmpty ? '' : data.phone);
 
diff --git a/apps/frontend/src/main.tsx b/apps/frontend/src/main.tsx
index 10110223..7f571895 100644
--- a/apps/frontend/src/main.tsx
+++ b/apps/frontend/src/main.tsx
@@ -14,4 +14,4 @@ root.render(
       <App />
     </ChakraProvider>
   </StrictMode>,
-);
\ No newline at end of file
+);
diff --git a/apps/frontend/src/theme.ts b/apps/frontend/src/theme.ts
index bcea681f..86ad00cb 100644
--- a/apps/frontend/src/theme.ts
+++ b/apps/frontend/src/theme.ts
@@ -1,4 +1,9 @@
-import { createSystem, defaultConfig, defineConfig, defineTextStyles } from '@chakra-ui/react';
+import {
+  createSystem,
+  defaultConfig,
+  defineConfig,
+  defineTextStyles,
+} from '@chakra-ui/react';
 
 const textStyles = defineTextStyles({
   body: {
@@ -57,16 +62,13 @@ const customConfig = defineConfig({
       colors: {
         white: { value: '#fff' },
         black: { value: '#000' },
-        blue: { 
+        blue: {
           ssf: { value: '#2B5061' },
           100: { value: '#bee3f8' },
         },
         red: { value: '#CC3538' },
         yellow: { value: '#F89E19' },
         cyan: { value: '#2795A5' },
-        teal: {
-          400: { value: '#A9D5DB' },
-        },
         neutral: {
           50: { value: '#FAFAFA' },
           100: { value: '#E7E7E7' },
@@ -77,14 +79,14 @@ const customConfig = defineConfig({
           800: { value: '#414141' },
           900: { value: '#212529' },
         },
-        gray: { 
+        gray: {
           light: { value: '#515151' },
           dark: { value: '#111' },
         },
         teal: {
-          400: { value: '#A9D5DB' },
           100: { value: '#E9F4F6' },
-        }
+          400: { value: '#A9D5DB' },
+        },
       },
       fonts: {
         instrument: { value: `'Instrument Serif', serif` },
@@ -100,10 +102,10 @@ const customConfig = defineConfig({
     'h1, h2, h3, h4, h5, h6': {
       fontFamily: 'heading',
     },
-    'body': {
+    body: {
       bg: '#FAFAFA',
     },
   },
 });
 
-export const system = createSystem(defaultConfig, customConfig); 
\ No newline at end of file
+export const system = createSystem(defaultConfig, customConfig);
diff --git a/apps/frontend/src/types/types.ts b/apps/frontend/src/types/types.ts
index 3925c28f..6ff6173e 100644
--- a/apps/frontend/src/types/types.ts
+++ b/apps/frontend/src/types/types.ts
@@ -187,6 +187,18 @@ export interface CreateFoodRequestBody {
   photos: string[] | null | undefined;
 }
 
+export interface CreateMultipleDonationItemsBody {
+  donationId: number;
+  items: {
+    itemName: string;
+    quantity: number;
+    reservedQuantity: number;
+    ozPerItem: number;
+    estimatedValue: number;
+    foodType: string;
+  }[];
+}
+
 export interface Allocation {
   allocationId: number;
   orderId: number;