From 5382942047fc50bad6e895138a74a657402591eb Mon Sep 17 00:00:00 2001
From: Justin Wang <Juwang110@gmail.com>
Date: Tue, 11 Nov 2025 14:50:36 -0500
Subject: [PATCH 01/16] Refactoring visual elements

---
 .../src/containers/volunteerManagement.tsx    | 53 ++++++++++---------
 1 file changed, 27 insertions(+), 26 deletions(-)

diff --git a/apps/frontend/src/containers/volunteerManagement.tsx b/apps/frontend/src/containers/volunteerManagement.tsx
index b2c9a43f..b84689ee 100644
--- a/apps/frontend/src/containers/volunteerManagement.tsx
+++ b/apps/frontend/src/containers/volunteerManagement.tsx
@@ -3,7 +3,6 @@ import {
   Table,
   TableCaption,
   Text,
-  Center,
   Button,
   Flex,
   Input,
@@ -14,10 +13,12 @@ import {
   Portal,
   NativeSelect,
   NativeSelectIndicator,
+  InputGroup,
 } from '@chakra-ui/react';
 import { VolunteerType } from '../types/types';
 import { Link } from 'react-router-dom';
 import { ChevronDownIcon } from 'lucide-react';
+import { SearchIcon } from 'lucide-react';
 import { User } from '../types/types';
 import ApiClient from '@api/apiClient';
 
@@ -136,8 +137,8 @@ const VolunteerManagement: React.FC = () => {
   };
 
   return (
-    <Center flexDirection="column" p={4}>
-      <Text fontSize="2xl">Pantry Volunteer Management</Text>
+    <Box flexDirection="column" p={4}>
+      <Text fontSize="2xl">Volunteer Management</Text>
       <Box
         mt={5}
         display="block"
@@ -146,15 +147,17 @@ const VolunteerManagement: React.FC = () => {
         overflowY="hidden"
         whiteSpace="nowrap"
       >
-        <VStack my={5}>
-          <Input
-            placeholder="Search by volunteer name"
-            value={searchName}
-            onChange={handleSearchNameChange}
-          />
+        <VStack my={5} align="start" maxW="400px" w="full">
+          <InputGroup startElement = {<SearchIcon size={15}></SearchIcon>}>
+            <Input
+              placeholder="Search"
+              value={searchName}
+              onChange={handleSearchNameChange}
+            />
+          </InputGroup>
           <Menu.Root closeOnSelect={false}>
             <Menu.Trigger asChild>
-              <Button>
+              <Button variant="outline">
                 Filter by Volunteer Type
                 <ChevronDownIcon />
               </Button>
@@ -190,21 +193,20 @@ const VolunteerManagement: React.FC = () => {
         <Table.Root variant="line">
           <TableCaption>
             <Flex justifyContent="space-between" width="100%">
-              <Button onClick={handleReset}>Reset unsaved changes</Button>
-              <Button asChild>
-                <Link to="/add_volunteer_page">Add a new volunteer</Link>
+              <Button onClick={handleReset} variant="outline">Reset unsaved changes</Button>
+              <Button as={Link} to="/add_volunteer_page" variant="outline">
+                + Add
               </Button>
-              <Button onClick={handleSaveChanges}>Save changes</Button>
+              <Button onClick={handleSaveChanges} variant="outline">Save changes</Button>
             </Flex>
           </TableCaption>
           <Table.Header>
             <Table.Row>
-              <Table.ColumnHeader>Volunteer Name</Table.ColumnHeader>
-              <Table.ColumnHeader>Email</Table.ColumnHeader>
-              <Table.ColumnHeader>Phone</Table.ColumnHeader>
+              <Table.ColumnHeader>Volunteer</Table.ColumnHeader>
               <Table.ColumnHeader>Type</Table.ColumnHeader>
-              <Table.ColumnHeader>Assigned Pantries</Table.ColumnHeader>
-            </Table.Row>
+              <Table.ColumnHeader>Email</Table.ColumnHeader>
+              <Table.ColumnHeader textAlign="right">Actions</Table.ColumnHeader>
+            </Table.Row> 
           </Table.Header>
           <Table.Body>
             {filteredVolunteers?.map((volunteer) => (
@@ -212,8 +214,6 @@ const VolunteerManagement: React.FC = () => {
                 <Table.Cell>
                   {volunteer.firstName} {volunteer.lastName}
                 </Table.Cell>
-                <Table.Cell>{volunteer.email}</Table.Cell>
-                <Table.Cell>{volunteer.phone}</Table.Cell>
                 <Table.Cell>
                   {volunteerTypeDropdown({
                     volunteerType:
@@ -224,10 +224,11 @@ const VolunteerManagement: React.FC = () => {
                   })}
                 </Table.Cell>
                 <Table.Cell>
-                  <Button asChild>
-                    <Link to={`/pantry-management/${volunteer.id}`}>
-                      View assigned pantries
-                    </Link>
+                  {volunteer.email}
+                </Table.Cell>
+                <Table.Cell textAlign="right">
+                  <Button textDecoration="underline" color="black" as={Link} to={`/pantry-management/${volunteer.id}`}>
+                    View assigned pantries
                   </Button>
                 </Table.Cell>
               </Table.Row>
@@ -235,7 +236,7 @@ const VolunteerManagement: React.FC = () => {
           </Table.Body>
         </Table.Root>
       </Box>
-    </Center>
+    </Box>
   );
 };
 

From f745231d96bdf193fc3a66f7fbd86cb50d04284d Mon Sep 17 00:00:00 2001
From: Justin Wang <Juwang110@gmail.com>
Date: Tue, 11 Nov 2025 16:15:36 -0500
Subject: [PATCH 02/16] pagination functionality

---
 .../src/containers/volunteerManagement.tsx    | 73 +++++++++++++++----
 1 file changed, 58 insertions(+), 15 deletions(-)

diff --git a/apps/frontend/src/containers/volunteerManagement.tsx b/apps/frontend/src/containers/volunteerManagement.tsx
index b84689ee..e1117bc4 100644
--- a/apps/frontend/src/containers/volunteerManagement.tsx
+++ b/apps/frontend/src/containers/volunteerManagement.tsx
@@ -14,20 +14,25 @@ import {
   NativeSelect,
   NativeSelectIndicator,
   InputGroup,
+  Pagination,
+  ButtonGroup,
+  IconButton
 } from '@chakra-ui/react';
 import { VolunteerType } from '../types/types';
 import { Link } from 'react-router-dom';
-import { ChevronDownIcon } from 'lucide-react';
-import { SearchIcon } from 'lucide-react';
+import { ChevronDownIcon, SearchIcon, ChevronRight, ChevronLeft } from 'lucide-react';
 import { User } from '../types/types';
 import ApiClient from '@api/apiClient';
 
 const VolunteerManagement: React.FC = () => {
+  const [currentPage, setCurrentPage] = useState<number>(1);
   const [volunteers, setVolunteers] = useState<User[]>([]);
   const [changedVolunteers, setChangedVolunteers] = useState<User[]>([]);
   const [searchName, setSearchName] = useState<string>('');
   const [checkedTypes, setCheckedTypes] = useState<string[]>([]);
 
+  const pageSize = 2;
+
   useEffect(() => {
     const fetchVolunteers = async () => {
       try {
@@ -43,6 +48,10 @@ const VolunteerManagement: React.FC = () => {
     fetchVolunteers();
   }, []);
 
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [searchName, checkedTypes]);
+
   const filteredVolunteers = changedVolunteers.filter((a) => {
     const fullName = `${a.firstName} ${a.lastName}`.toLowerCase();
     return (
@@ -51,6 +60,11 @@ const VolunteerManagement: React.FC = () => {
     );
   });
 
+  const paginatedVolunteers = filteredVolunteers.slice(
+    (currentPage - 1) * pageSize,
+    currentPage * pageSize
+  );
+
   const volunteerTypeDropdown = ({
     volunteerType,
     volunteerId,
@@ -147,15 +161,20 @@ const VolunteerManagement: React.FC = () => {
         overflowY="hidden"
         whiteSpace="nowrap"
       >
-        <VStack my={5} align="start" maxW="400px" w="full">
-          <InputGroup startElement = {<SearchIcon size={15}></SearchIcon>}>
-            <Input
-              placeholder="Search"
-              value={searchName}
-              onChange={handleSearchNameChange}
-            />
-          </InputGroup>
-          <Menu.Root closeOnSelect={false}>
+        <VStack my={2} align="start" >
+          <Flex justify="space-between" align="center" w="100%">
+            <InputGroup startElement = {<SearchIcon size={15}></SearchIcon>} maxW={300}>
+              <Input
+                placeholder="Search"
+                value={searchName}
+                onChange={handleSearchNameChange}
+              />
+            </InputGroup>
+            <Button as={Link} to="/add_volunteer_page" variant="outline">
+              + Add
+            </Button>
+          </Flex>
+          <Menu.Root closeOnSelect={true}>
             <Menu.Trigger asChild>
               <Button variant="outline">
                 Filter by Volunteer Type
@@ -194,9 +213,6 @@ const VolunteerManagement: React.FC = () => {
           <TableCaption>
             <Flex justifyContent="space-between" width="100%">
               <Button onClick={handleReset} variant="outline">Reset unsaved changes</Button>
-              <Button as={Link} to="/add_volunteer_page" variant="outline">
-                + Add
-              </Button>
               <Button onClick={handleSaveChanges} variant="outline">Save changes</Button>
             </Flex>
           </TableCaption>
@@ -209,7 +225,7 @@ const VolunteerManagement: React.FC = () => {
             </Table.Row> 
           </Table.Header>
           <Table.Body>
-            {filteredVolunteers?.map((volunteer) => (
+            {paginatedVolunteers?.map((volunteer) => (
               <Table.Row key={volunteer.id}>
                 <Table.Cell>
                   {volunteer.firstName} {volunteer.lastName}
@@ -235,6 +251,33 @@ const VolunteerManagement: React.FC = () => {
             ))}
           </Table.Body>
         </Table.Root>
+      
+      <Pagination.Root count={Math.ceil(filteredVolunteers.length / pageSize)} pageSize={1} page={currentPage} onChange={(page) => setCurrentPage(page)}>
+        <ButtonGroup variant="ghost" size="sm">
+          <Pagination.PrevTrigger asChild>
+            <IconButton onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 1))}>
+              <ChevronLeft />
+            </IconButton>
+          </Pagination.PrevTrigger>
+
+          <Pagination.Items
+            render={(page) => (
+              <IconButton
+                variant={page.isCurrent ? 'outline' : 'ghost'}
+                onClick={() => setCurrentPage(page.value)}
+              >
+                {page.value}
+              </IconButton>
+            )}
+          />
+
+          <Pagination.NextTrigger asChild>
+            <IconButton onClick={() => setCurrentPage((prev) => Math.min(prev + 1, Math.ceil(filteredVolunteers.length / pageSize)))}>
+              <ChevronRight />
+            </IconButton>
+          </Pagination.NextTrigger>
+        </ButtonGroup>
+      </Pagination.Root>
       </Box>
     </Box>
   );

From d22d1268305fba7b82814a1e95ea1dccf0be50fb Mon Sep 17 00:00:00 2001
From: Justin Wang <Juwang110@gmail.com>
Date: Tue, 11 Nov 2025 22:23:29 -0500
Subject: [PATCH 03/16] Removing volunteer type filtering and display

---
 .../src/containers/volunteerManagement.tsx    | 150 +-----------------
 1 file changed, 4 insertions(+), 146 deletions(-)

diff --git a/apps/frontend/src/containers/volunteerManagement.tsx b/apps/frontend/src/containers/volunteerManagement.tsx
index e1117bc4..87f1ed93 100644
--- a/apps/frontend/src/containers/volunteerManagement.tsx
+++ b/apps/frontend/src/containers/volunteerManagement.tsx
@@ -1,35 +1,26 @@
 import { useEffect, useState } from 'react';
 import {
   Table,
-  TableCaption,
   Text,
   Button,
   Flex,
   Input,
-  Menu,
-  Checkbox,
   VStack,
   Box,
-  Portal,
-  NativeSelect,
-  NativeSelectIndicator,
   InputGroup,
   Pagination,
   ButtonGroup,
   IconButton
 } from '@chakra-ui/react';
-import { VolunteerType } from '../types/types';
 import { Link } from 'react-router-dom';
-import { ChevronDownIcon, SearchIcon, ChevronRight, ChevronLeft } from 'lucide-react';
+import { SearchIcon, ChevronRight, ChevronLeft } from 'lucide-react';
 import { User } from '../types/types';
 import ApiClient from '@api/apiClient';
 
 const VolunteerManagement: React.FC = () => {
   const [currentPage, setCurrentPage] = useState<number>(1);
   const [volunteers, setVolunteers] = useState<User[]>([]);
-  const [changedVolunteers, setChangedVolunteers] = useState<User[]>([]);
   const [searchName, setSearchName] = useState<string>('');
-  const [checkedTypes, setCheckedTypes] = useState<string[]>([]);
 
   const pageSize = 2;
 
@@ -38,7 +29,6 @@ const VolunteerManagement: React.FC = () => {
       try {
         const allVolunteers = await ApiClient.getVolunteers();
         setVolunteers(allVolunteers);
-        setChangedVolunteers(allVolunteers);
       } catch (error) {
         alert('Error fetching volunteers');
         console.error('Error fetching volunteers: ', error);
@@ -50,14 +40,11 @@ const VolunteerManagement: React.FC = () => {
 
   useEffect(() => {
     setCurrentPage(1);
-  }, [searchName, checkedTypes]);
+  }, [searchName]);
 
-  const filteredVolunteers = changedVolunteers.filter((a) => {
+  const filteredVolunteers = volunteers.filter((a) => {
     const fullName = `${a.firstName} ${a.lastName}`.toLowerCase();
-    return (
-      fullName.includes(searchName.toLowerCase()) &&
-      (checkedTypes.includes(a.role.toUpperCase()) || checkedTypes.length === 0)
-    );
+    return (fullName.includes(searchName.toLowerCase()));
   });
 
   const paginatedVolunteers = filteredVolunteers.slice(
@@ -65,91 +52,12 @@ const VolunteerManagement: React.FC = () => {
     currentPage * pageSize
   );
 
-  const volunteerTypeDropdown = ({
-    volunteerType,
-    volunteerId,
-  }: {
-    volunteerType: VolunteerType;
-    volunteerId: number;
-  }) => {
-    return (
-      <NativeSelect.Root>
-        <NativeSelect.Field
-          value={volunteerType}
-          onChange={(e) =>
-            handleVolunteerTypeChange(
-              e.target.value as VolunteerType,
-              volunteerId,
-            )
-          }
-        >
-          {Object.entries(DISPLAY_VOLUNTEER_TYPES).map(([key, label]) => (
-            <option value={VolunteerType[key as keyof typeof VolunteerType]}>
-              {label}
-            </option>
-          ))}
-        </NativeSelect.Field>
-        <NativeSelectIndicator />
-      </NativeSelect.Root>
-    );
-  };
-
   const handleSearchNameChange = (
     event: React.ChangeEvent<HTMLInputElement>,
   ) => {
     setSearchName(event.target.value);
   };
 
-  const handleVolunteerFilterChange = (type: string, checked: boolean) => {
-    if (checked) {
-      setCheckedTypes([...checkedTypes, type.toUpperCase()]);
-    } else {
-      setCheckedTypes(
-        checkedTypes.filter(
-          (checkedType) => checkedType !== type.toUpperCase(),
-        ),
-      );
-    }
-  };
-
-  const handleReset = () => {
-    setSearchName('');
-    setCheckedTypes([]);
-
-    setChangedVolunteers(volunteers);
-  };
-
-  const handleSaveChanges = async () => {
-    try {
-      await Promise.all(
-        changedVolunteers.map((volunteer) =>
-          ApiClient.updateUserVolunteerRole(volunteer.id, {
-            role: String(volunteer.role),
-          }),
-        ),
-      );
-      setVolunteers(changedVolunteers);
-      alert('successful save!');
-    } catch (error) {
-      alert('Error updating volunteer type');
-      console.error('Error updating volunteer type: ', error);
-    }
-  };
-
-  const handleVolunteerTypeChange = (
-    type: VolunteerType,
-    volunteerId: number,
-  ) => {
-    setChangedVolunteers((prev) =>
-      prev.map((a) => (a.id === volunteerId ? { ...a, role: type } : a)),
-    );
-  };
-
-  const DISPLAY_VOLUNTEER_TYPES: Record<string, string> = {
-    LEAD_VOLUNTEER: 'Lead Volunteer',
-    STANDARD_VOLUNTEER: 'Standard Volunteer',
-  };
-
   return (
     <Box flexDirection="column" p={4}>
       <Text fontSize="2xl">Volunteer Management</Text>
@@ -174,52 +82,11 @@ const VolunteerManagement: React.FC = () => {
               + Add
             </Button>
           </Flex>
-          <Menu.Root closeOnSelect={true}>
-            <Menu.Trigger asChild>
-              <Button variant="outline">
-                Filter by Volunteer Type
-                <ChevronDownIcon />
-              </Button>
-            </Menu.Trigger>
-            <Portal>
-              <Menu.Positioner>
-                <Menu.Content>
-                  {Object.values(VolunteerType).map((volunteerType) => (
-                    <Menu.Item key={volunteerType}>
-                      <Checkbox.Root
-                        checked={checkedTypes.includes(
-                          volunteerType.toUpperCase(),
-                        )}
-                        onCheckedChange={(e: { checked: boolean }) =>
-                          handleVolunteerFilterChange(volunteerType, e.checked)
-                        }
-                      >
-                        <Checkbox.HiddenInput />
-                        <Checkbox.Control />
-                        <Checkbox.Label>
-                          {DISPLAY_VOLUNTEER_TYPES[
-                            volunteerType.toUpperCase()
-                          ] || volunteerType}
-                        </Checkbox.Label>
-                      </Checkbox.Root>
-                    </Menu.Item>
-                  ))}
-                </Menu.Content>
-              </Menu.Positioner>
-            </Portal>
-          </Menu.Root>
         </VStack>
         <Table.Root variant="line">
-          <TableCaption>
-            <Flex justifyContent="space-between" width="100%">
-              <Button onClick={handleReset} variant="outline">Reset unsaved changes</Button>
-              <Button onClick={handleSaveChanges} variant="outline">Save changes</Button>
-            </Flex>
-          </TableCaption>
           <Table.Header>
             <Table.Row>
               <Table.ColumnHeader>Volunteer</Table.ColumnHeader>
-              <Table.ColumnHeader>Type</Table.ColumnHeader>
               <Table.ColumnHeader>Email</Table.ColumnHeader>
               <Table.ColumnHeader textAlign="right">Actions</Table.ColumnHeader>
             </Table.Row> 
@@ -230,15 +97,6 @@ const VolunteerManagement: React.FC = () => {
                 <Table.Cell>
                   {volunteer.firstName} {volunteer.lastName}
                 </Table.Cell>
-                <Table.Cell>
-                  {volunteerTypeDropdown({
-                    volunteerType:
-                      VolunteerType[
-                        volunteer.role.toUpperCase() as keyof typeof VolunteerType
-                      ],
-                    volunteerId: volunteer.id,
-                  })}
-                </Table.Cell>
                 <Table.Cell>
                   {volunteer.email}
                 </Table.Cell>

From 1d24d7ce754a73f77595a827be103612ffd21980 Mon Sep 17 00:00:00 2001
From: Justin Wang <Juwang110@gmail.com>
Date: Wed, 12 Nov 2025 14:12:35 -0500
Subject: [PATCH 04/16] visual updates

---
 .../src/containers/volunteerManagement.tsx    | 59 ++++++++++---------
 1 file changed, 30 insertions(+), 29 deletions(-)

diff --git a/apps/frontend/src/containers/volunteerManagement.tsx b/apps/frontend/src/containers/volunteerManagement.tsx
index 87f1ed93..99b76ad6 100644
--- a/apps/frontend/src/containers/volunteerManagement.tsx
+++ b/apps/frontend/src/containers/volunteerManagement.tsx
@@ -22,7 +22,7 @@ const VolunteerManagement: React.FC = () => {
   const [volunteers, setVolunteers] = useState<User[]>([]);
   const [searchName, setSearchName] = useState<string>('');
 
-  const pageSize = 2;
+  const pageSize = 8;
 
   useEffect(() => {
     const fetchVolunteers = async () => {
@@ -60,7 +60,7 @@ const VolunteerManagement: React.FC = () => {
 
   return (
     <Box flexDirection="column" p={4}>
-      <Text fontSize="2xl">Volunteer Management</Text>
+      <Text fontSize="3xl">Volunteer Management</Text>
       <Box
         mt={5}
         display="block"
@@ -69,7 +69,7 @@ const VolunteerManagement: React.FC = () => {
         overflowY="hidden"
         whiteSpace="nowrap"
       >
-        <VStack my={2} align="start" >
+        <VStack mt={2} mb={7} align="start" >
           <Flex justify="space-between" align="center" w="100%">
             <InputGroup startElement = {<SearchIcon size={15}></SearchIcon>} maxW={300}>
               <Input
@@ -101,7 +101,7 @@ const VolunteerManagement: React.FC = () => {
                   {volunteer.email}
                 </Table.Cell>
                 <Table.Cell textAlign="right">
-                  <Button textDecoration="underline" color="black" as={Link} to={`/pantry-management/${volunteer.id}`}>
+                  <Button textDecoration="underline" color="gray" as={Link} to={`/pantry-management/${volunteer.id}`}>
                     View assigned pantries
                   </Button>
                 </Table.Cell>
@@ -109,33 +109,34 @@ const VolunteerManagement: React.FC = () => {
             ))}
           </Table.Body>
         </Table.Root>
-      
-      <Pagination.Root count={Math.ceil(filteredVolunteers.length / pageSize)} pageSize={1} page={currentPage} onChange={(page) => setCurrentPage(page)}>
-        <ButtonGroup variant="ghost" size="sm">
-          <Pagination.PrevTrigger asChild>
-            <IconButton onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 1))}>
-              <ChevronLeft />
-            </IconButton>
-          </Pagination.PrevTrigger>
+        <Flex justify="center" mt={4}>
+          <Pagination.Root count={Math.ceil(filteredVolunteers.length / pageSize)} pageSize={1} page={currentPage} onChange={(page) => setCurrentPage(page)}>
+            <ButtonGroup variant="outline" size="sm">
+              <Pagination.PrevTrigger asChild>
+                <IconButton variant="ghost" onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 1))}>
+                  <ChevronLeft />
+                </IconButton>
+              </Pagination.PrevTrigger>
 
-          <Pagination.Items
-            render={(page) => (
-              <IconButton
-                variant={page.isCurrent ? 'outline' : 'ghost'}
-                onClick={() => setCurrentPage(page.value)}
-              >
-                {page.value}
-              </IconButton>
-            )}
-          />
+              <Pagination.Items
+                render={(page) => (
+                  <IconButton
+                    variant={{ base: "outline", _selected: "outline" }}
+                    onClick={() => setCurrentPage(page.value)}
+                  >
+                    {page.value}
+                  </IconButton>
+                )}
+              />
 
-          <Pagination.NextTrigger asChild>
-            <IconButton onClick={() => setCurrentPage((prev) => Math.min(prev + 1, Math.ceil(filteredVolunteers.length / pageSize)))}>
-              <ChevronRight />
-            </IconButton>
-          </Pagination.NextTrigger>
-        </ButtonGroup>
-      </Pagination.Root>
+              <Pagination.NextTrigger asChild>
+                <IconButton variant="ghost" onClick={() => setCurrentPage((prev) => Math.min(prev + 1, Math.ceil(filteredVolunteers.length / pageSize)))}>
+                  <ChevronRight />
+                </IconButton>
+              </Pagination.NextTrigger>
+            </ButtonGroup>
+          </Pagination.Root>
+        </Flex>
       </Box>
     </Box>
   );

From a941c4133e399607c3ed151ecb55f243cf8e0dd5 Mon Sep 17 00:00:00 2001
From: Justin Wang <Juwang110@gmail.com>
Date: Sun, 16 Nov 2025 14:32:14 -0500
Subject: [PATCH 05/16] modal setup for add volunteer

---
 apps/frontend/src/api/apiClient.ts            |  5 ++
 .../components/forms/addNewVolunteerModal.tsx | 53 +++++++++++++++++++
 .../src/containers/volunteerManagement.tsx    |  5 +-
 apps/frontend/src/types/types.ts              |  8 +++
 4 files changed, 68 insertions(+), 3 deletions(-)
 create mode 100644 apps/frontend/src/components/forms/addNewVolunteerModal.tsx

diff --git a/apps/frontend/src/api/apiClient.ts b/apps/frontend/src/api/apiClient.ts
index 74d2c812..11ea560a 100644
--- a/apps/frontend/src/api/apiClient.ts
+++ b/apps/frontend/src/api/apiClient.ts
@@ -11,6 +11,7 @@ import {
   CreateFoodRequestBody,
   Pantry,
   PantryApplicationDto,
+  UserDto,
 } from 'types/types';
 
 const defaultBaseUrl =
@@ -96,6 +97,10 @@ export class ApiClient {
       .then((response) => response.data);
   }
 
+  public async postUser(data: UserDto): Promise<AxiosResponse<void>> {
+    return this.axiosInstance.post(`/api/users`, data);
+  }
+
   public async getPantrySSFRep(pantryId: number): Promise<User> {
     return this.get(`/api/pantries/${pantryId}/ssf-contact`) as Promise<User>;
   }
diff --git a/apps/frontend/src/components/forms/addNewVolunteerModal.tsx b/apps/frontend/src/components/forms/addNewVolunteerModal.tsx
new file mode 100644
index 00000000..f88f8e54
--- /dev/null
+++ b/apps/frontend/src/components/forms/addNewVolunteerModal.tsx
@@ -0,0 +1,53 @@
+import {
+    Dialog,
+    Button,
+    Text,
+    Flex,
+} from '@chakra-ui/react';
+import { useState } from 'react';
+import ApiClient from '@api/apiClient';
+
+const NewVolunteerModal: React.FC = () => {
+
+  const handleSubmit = async () => {
+
+  }
+
+  return (
+    <Dialog.Root >
+      <Dialog.Trigger asChild>
+        <Button variant="outline">
+          + Add
+        </Button>
+      </Dialog.Trigger>
+      <Dialog.Backdrop />
+      <Dialog.Positioner>
+        <Dialog.Content maxW="49em">
+          <Dialog.Header>
+            <Dialog.Title fontSize={25} fontWeight={700}>
+              Add New Volunteer
+            </Dialog.Title>
+          </Dialog.Header>
+          <Dialog.Body>
+            <Text mb="1.5em">
+              Complete all information in the form to register a new volunteer.
+            </Text>
+            <Text mb="1.5em">Log a new donation</Text>
+            <Flex justifyContent="space-between" mt={4}>
+              <Button>Close</Button>
+              <Button>Submit</Button>
+            </Flex>
+          </Dialog.Body>
+          <Dialog.CloseTrigger />
+        </Dialog.Content>
+      </Dialog.Positioner>
+    </Dialog.Root>
+  );
+};
+
+
+
+
+
+
+export default NewVolunteerModal;
\ No newline at end of file
diff --git a/apps/frontend/src/containers/volunteerManagement.tsx b/apps/frontend/src/containers/volunteerManagement.tsx
index 99b76ad6..e2fbf9dc 100644
--- a/apps/frontend/src/containers/volunteerManagement.tsx
+++ b/apps/frontend/src/containers/volunteerManagement.tsx
@@ -16,6 +16,7 @@ import { Link } from 'react-router-dom';
 import { SearchIcon, ChevronRight, ChevronLeft } from 'lucide-react';
 import { User } from '../types/types';
 import ApiClient from '@api/apiClient';
+import NewVolunteerModal from '@components/forms/addNewVolunteerModal';
 
 const VolunteerManagement: React.FC = () => {
   const [currentPage, setCurrentPage] = useState<number>(1);
@@ -78,9 +79,7 @@ const VolunteerManagement: React.FC = () => {
                 onChange={handleSearchNameChange}
               />
             </InputGroup>
-            <Button as={Link} to="/add_volunteer_page" variant="outline">
-              + Add
-            </Button>
+            <NewVolunteerModal></NewVolunteerModal>
           </Flex>
         </VStack>
         <Table.Root variant="line">
diff --git a/apps/frontend/src/types/types.ts b/apps/frontend/src/types/types.ts
index cb901272..237f09e8 100644
--- a/apps/frontend/src/types/types.ts
+++ b/apps/frontend/src/types/types.ts
@@ -115,6 +115,14 @@ export interface User {
   phone: string;
 }
 
+export interface UserDto {
+  email: string,
+  firstName: string,
+  lastName: string,
+  phone: string,
+  role: Role,
+}
+
 export interface FoodRequest {
   requestId: number;
   requestedAt: string;

From 5a39ddb4c2dd131a9c191042f289363a9d6bea34 Mon Sep 17 00:00:00 2001
From: Justin Wang <Juwang110@gmail.com>
Date: Sun, 16 Nov 2025 16:06:10 -0500
Subject: [PATCH 06/16] Modal frontend setup

---
 .../components/forms/addNewVolunteerModal.tsx | 75 +++++++++++++++++--
 1 file changed, 69 insertions(+), 6 deletions(-)

diff --git a/apps/frontend/src/components/forms/addNewVolunteerModal.tsx b/apps/frontend/src/components/forms/addNewVolunteerModal.tsx
index f88f8e54..2c048242 100644
--- a/apps/frontend/src/components/forms/addNewVolunteerModal.tsx
+++ b/apps/frontend/src/components/forms/addNewVolunteerModal.tsx
@@ -3,18 +3,59 @@ import {
     Button,
     Text,
     Flex,
+    Field,
+    Input,
+    CloseButton,
 } from '@chakra-ui/react';
 import { useState } from 'react';
+import { Role, UserDto } from "../../types/types";
 import ApiClient from '@api/apiClient';
 
 const NewVolunteerModal: React.FC = () => {
+  const [firstName, setFirstName] = useState("");
+  const [lastName, setLastName] = useState("");
+  const [email, setEmail] = useState("");
+  const [phone, setPhone] = useState("");
+
+  const [isOpen, setIsOpen] = useState(false);
+
+  const [error, setError] = useState("");
 
   const handleSubmit = async () => {
+    if (!firstName || !lastName || !email || !phone) {
+      setError("Please fill in all fields.*");
+      return;
+    }
+
+    setError("");
+
+    const newVolunteer: UserDto = {
+      firstName,
+      lastName,
+      email,
+      phone,
+      role: Role.STANDARD_VOLUNTEER
+    };
+
+    try {
+      await ApiClient.postUser(newVolunteer);
+    } catch (error) {
+      alert('Error creating new user');
+    }
 
   }
 
+  const handleCancel = () => {
+    setFirstName("");
+    setLastName("");
+    setEmail("");
+    setPhone("");
+    setError("");
+    setIsOpen(false);
+  };
+
   return (
-    <Dialog.Root >
+    <Dialog.Root open={isOpen} onOpenChange={setIsOpen}>
       <Dialog.Trigger asChild>
         <Button variant="outline">
           + Add
@@ -27,18 +68,40 @@ const NewVolunteerModal: React.FC = () => {
             <Dialog.Title fontSize={25} fontWeight={700}>
               Add New Volunteer
             </Dialog.Title>
+            <CloseButton onClick={() => setIsOpen(false)} size="sm" position="absolute" top={3} right={3}/>
           </Dialog.Header>
           <Dialog.Body>
             <Text mb="1.5em">
               Complete all information in the form to register a new volunteer.
             </Text>
-            <Text mb="1.5em">Log a new donation</Text>
-            <Flex justifyContent="space-between" mt={4}>
-              <Button>Close</Button>
-              <Button>Submit</Button>
+            <Flex gap={8} justifyContent="flex-start" my={4}>
+              <Field.Root>
+                <Field.Label>First Name</Field.Label>
+                <Input value={firstName} onChange={(e) => setFirstName(e.target.value)}/>
+              </Field.Root>
+              <Field.Root>
+                <Field.Label>Last Name</Field.Label>
+                <Input value={lastName} onChange={(e) => setLastName(e.target.value)}/>
+              </Field.Root>
+            </Flex>
+            <Field.Root>
+              <Field.Label>Email</Field.Label>
+              <Input value={email} onChange={(e) => setEmail(e.target.value)}/>
+            </Field.Root>
+            <Field.Root my={4}>
+              <Field.Label>Phone Number</Field.Label>
+              <Input value={phone} onChange={(e) => setPhone(e.target.value)}/>
+            </Field.Root>
+            {error && (
+              <Text color="red" mb={3} fontWeight="semibold">
+                {error}
+              </Text>
+            )}
+            <Flex justifyContent="flex-end" mt={4} gap={4}>
+              <Button variant='outline' onClick={handleSubmit}>Submit</Button>
+              <Button variant='outline' onClick={handleCancel}>Cancel</Button>
             </Flex>
           </Dialog.Body>
-          <Dialog.CloseTrigger />
         </Dialog.Content>
       </Dialog.Positioner>
     </Dialog.Root>

From b10d9ebb9cefaaf4971f33bfed34906461c98afa Mon Sep 17 00:00:00 2001
From: Justin Wang <Juwang110@gmail.com>
Date: Wed, 19 Nov 2025 14:37:03 -0500
Subject: [PATCH 07/16] callbacks and email/phone invalid handling

---
 .../components/forms/addNewVolunteerModal.tsx | 29 ++++++++++++++-----
 .../src/containers/volunteerManagement.tsx    | 17 +++++++++--
 2 files changed, 36 insertions(+), 10 deletions(-)

diff --git a/apps/frontend/src/components/forms/addNewVolunteerModal.tsx b/apps/frontend/src/components/forms/addNewVolunteerModal.tsx
index 2c048242..912e3ea2 100644
--- a/apps/frontend/src/components/forms/addNewVolunteerModal.tsx
+++ b/apps/frontend/src/components/forms/addNewVolunteerModal.tsx
@@ -11,7 +11,12 @@ import { useState } from 'react';
 import { Role, UserDto } from "../../types/types";
 import ApiClient from '@api/apiClient';
 
-const NewVolunteerModal: React.FC = () => {
+interface NewVolunteerModalProps {
+  onSubmitSuccess?: () => void; 
+  onSubmitFail?: () => void; 
+}
+
+const NewVolunteerModal: React.FC<NewVolunteerModalProps> = ({ onSubmitSuccess, onSubmitFail }) => {
   const [firstName, setFirstName] = useState("");
   const [lastName, setLastName] = useState("");
   const [email, setEmail] = useState("");
@@ -39,13 +44,21 @@ const NewVolunteerModal: React.FC = () => {
 
     try {
       await ApiClient.postUser(newVolunteer);
-    } catch (error) {
-      alert('Error creating new user');
+      if (onSubmitSuccess) onSubmitSuccess();
+      handleClear();
+    } catch (error: any) {
+      const message = error.response?.data?.message;
+      const hasEmailOrPhoneError = Array.isArray(message) && message.some((msg: any) => typeof msg === "string" && (msg.toLowerCase().includes("email") || msg.toLowerCase().includes("phone")));
+      if (hasEmailOrPhoneError) {
+        setError("Please specify a valid email and phone number")
+      } else {
+        if (onSubmitFail) onSubmitFail();
+        handleClear();
+      }
     }
-
   }
 
-  const handleCancel = () => {
+  const handleClear = () => {
     setFirstName("");
     setLastName("");
     setEmail("");
@@ -65,7 +78,7 @@ const NewVolunteerModal: React.FC = () => {
       <Dialog.Positioner>
         <Dialog.Content maxW="49em">
           <Dialog.Header>
-            <Dialog.Title fontSize={25} fontWeight={700}>
+            <Dialog.Title fontSize={25} fontWeight={700} fontFamily="'Instrument Serif', serif">
               Add New Volunteer
             </Dialog.Title>
             <CloseButton onClick={() => setIsOpen(false)} size="sm" position="absolute" top={3} right={3}/>
@@ -98,8 +111,8 @@ const NewVolunteerModal: React.FC = () => {
               </Text>
             )}
             <Flex justifyContent="flex-end" mt={4} gap={4}>
-              <Button variant='outline' onClick={handleSubmit}>Submit</Button>
-              <Button variant='outline' onClick={handleCancel}>Cancel</Button>
+              <Button bg={'#213C4A'} color={'white'} onClick={handleSubmit}>Submit</Button>
+              <Button variant='outline' onClick={handleClear}>Cancel</Button>
             </Flex>
           </Dialog.Body>
         </Dialog.Content>
diff --git a/apps/frontend/src/containers/volunteerManagement.tsx b/apps/frontend/src/containers/volunteerManagement.tsx
index e2fbf9dc..00a065ed 100644
--- a/apps/frontend/src/containers/volunteerManagement.tsx
+++ b/apps/frontend/src/containers/volunteerManagement.tsx
@@ -10,7 +10,8 @@ import {
   InputGroup,
   Pagination,
   ButtonGroup,
-  IconButton
+  IconButton,
+  Alert
 } from '@chakra-ui/react';
 import { Link } from 'react-router-dom';
 import { SearchIcon, ChevronRight, ChevronLeft } from 'lucide-react';
@@ -23,6 +24,8 @@ const VolunteerManagement: React.FC = () => {
   const [volunteers, setVolunteers] = useState<User[]>([]);
   const [searchName, setSearchName] = useState<string>('');
 
+  const [alertMessage, setAlertMessage] = useState<string>('');
+
   const pageSize = 8;
 
   useEffect(() => {
@@ -62,6 +65,12 @@ const VolunteerManagement: React.FC = () => {
   return (
     <Box flexDirection="column" p={4}>
       <Text fontSize="3xl">Volunteer Management</Text>
+      {alertMessage && (
+        <Alert.Root status="info">
+          <Alert.Indicator />
+          <Alert.Title>{alertMessage}</Alert.Title>
+        </Alert.Root>
+      )}
       <Box
         mt={5}
         display="block"
@@ -79,7 +88,11 @@ const VolunteerManagement: React.FC = () => {
                 onChange={handleSearchNameChange}
               />
             </InputGroup>
-            <NewVolunteerModal></NewVolunteerModal>
+            <NewVolunteerModal onSubmitSuccess={() => {
+                setAlertMessage("Volunteer added");
+                setTimeout(() => setAlertMessage(""), 3000);
+              }}
+            />
           </Flex>
         </VStack>
         <Table.Root variant="line">

From c85a3fa3a50df12f4a24692083e02457cb83ade2 Mon Sep 17 00:00:00 2001
From: Justin Wang <Juwang110@gmail.com>
Date: Sun, 30 Nov 2025 11:48:13 -0500
Subject: [PATCH 08/16] refactoring to closer align with figma

---
 .../components/forms/addNewVolunteerModal.tsx |  4 +--
 .../src/containers/volunteerManagement.tsx    | 34 +++++++++++--------
 2 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/apps/frontend/src/components/forms/addNewVolunteerModal.tsx b/apps/frontend/src/components/forms/addNewVolunteerModal.tsx
index 912e3ea2..b082e721 100644
--- a/apps/frontend/src/components/forms/addNewVolunteerModal.tsx
+++ b/apps/frontend/src/components/forms/addNewVolunteerModal.tsx
@@ -70,8 +70,8 @@ const NewVolunteerModal: React.FC<NewVolunteerModalProps> = ({ onSubmitSuccess,
   return (
     <Dialog.Root open={isOpen} onOpenChange={setIsOpen}>
       <Dialog.Trigger asChild>
-        <Button variant="outline">
-          + Add
+        <Button borderColor="neutral.200" variant="outline" color="neutral.600" fontFamily="Karrik" fontWeight={400} fontSize="14px">
+          +  Add
         </Button>
       </Dialog.Trigger>
       <Dialog.Backdrop />
diff --git a/apps/frontend/src/containers/volunteerManagement.tsx b/apps/frontend/src/containers/volunteerManagement.tsx
index 00a065ed..a1c3eaa5 100644
--- a/apps/frontend/src/containers/volunteerManagement.tsx
+++ b/apps/frontend/src/containers/volunteerManagement.tsx
@@ -2,7 +2,6 @@ import { useEffect, useState } from 'react';
 import {
   Table,
   Text,
-  Button,
   Flex,
   Input,
   VStack,
@@ -11,9 +10,9 @@ import {
   Pagination,
   ButtonGroup,
   IconButton,
-  Alert
+  Alert,
+  Link,
 } from '@chakra-ui/react';
-import { Link } from 'react-router-dom';
 import { SearchIcon, ChevronRight, ChevronLeft } from 'lucide-react';
 import { User } from '../types/types';
 import ApiClient from '@api/apiClient';
@@ -63,8 +62,8 @@ const VolunteerManagement: React.FC = () => {
   };
 
   return (
-    <Box flexDirection="column" p={4}>
-      <Text fontSize="3xl">Volunteer Management</Text>
+    <Box flexDirection="column" p={4} mt={3}>
+      <Text fontSize="32px" fontWeight={400} fontFamily="Instrument Serif" color="#515151">Volunteer Management</Text>
       {alertMessage && (
         <Alert.Root status="info">
           <Alert.Indicator />
@@ -72,7 +71,7 @@ const VolunteerManagement: React.FC = () => {
         </Alert.Root>
       )}
       <Box
-        mt={5}
+        mt={3}
         display="block"
         maxW="100%"
         overflowX="auto"
@@ -81,11 +80,18 @@ const VolunteerManagement: React.FC = () => {
       >
         <VStack mt={2} mb={7} align="start" >
           <Flex justify="space-between" align="center" w="100%">
-            <InputGroup startElement = {<SearchIcon size={15}></SearchIcon>} maxW={300}>
+            <InputGroup startElement = {<SearchIcon color="#707070" size={13}></SearchIcon>} maxW={300}>
               <Input
                 placeholder="Search"
                 value={searchName}
+                borderColor="neutral.200"
+                ps="7"
                 onChange={handleSearchNameChange}
+                color="neutral.600"
+                fontFamily="Karrik"
+                fontWeight={400}
+                fontSize="14px"
+                _placeholder={{ color: "neutral.600", fontFamily: "Karrik", fontWeight: 400, fontSize: 14 }}
               />
             </InputGroup>
             <NewVolunteerModal onSubmitSuccess={() => {
@@ -95,15 +101,15 @@ const VolunteerManagement: React.FC = () => {
             />
           </Flex>
         </VStack>
-        <Table.Root variant="line">
+        <Table.Root variant="line" showColumnBorder>
           <Table.Header>
             <Table.Row>
-              <Table.ColumnHeader>Volunteer</Table.ColumnHeader>
-              <Table.ColumnHeader>Email</Table.ColumnHeader>
-              <Table.ColumnHeader textAlign="right">Actions</Table.ColumnHeader>
+              <Table.ColumnHeader color="neutral.800" textStyle="p2" fontWeight={600}>Volunteer</Table.ColumnHeader>
+              <Table.ColumnHeader color="neutral.800" textStyle="p2" fontWeight={600}>Email</Table.ColumnHeader>
+              <Table.ColumnHeader color="neutral.800" textStyle="p2" fontWeight={600} textAlign="right">Actions</Table.ColumnHeader>
             </Table.Row> 
           </Table.Header>
-          <Table.Body>
+          <Table.Body color="neutral.700" fontWeight={400} textStyle="p2">
             {paginatedVolunteers?.map((volunteer) => (
               <Table.Row key={volunteer.id}>
                 <Table.Cell>
@@ -113,9 +119,9 @@ const VolunteerManagement: React.FC = () => {
                   {volunteer.email}
                 </Table.Cell>
                 <Table.Cell textAlign="right">
-                  <Button textDecoration="underline" color="gray" as={Link} to={`/pantry-management/${volunteer.id}`}>
+                  <Link color="neutral.700" fontWeight={400} textStyle="p2" variant="underline" href={`/pantry-management/${volunteer.id}`}>
                     View assigned pantries
-                  </Button>
+                  </Link>
                 </Table.Cell>
               </Table.Row>
             ))}

From 91ff9fdd42999c36692377aa624ae1534427644e Mon Sep 17 00:00:00 2001
From: Justin Wang <Juwang110@gmail.com>
Date: Wed, 3 Dec 2025 21:15:27 -0500
Subject: [PATCH 09/16] Aligning add volunteer modal with figma

---
 .../components/forms/addNewVolunteerModal.tsx | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/apps/frontend/src/components/forms/addNewVolunteerModal.tsx b/apps/frontend/src/components/forms/addNewVolunteerModal.tsx
index b082e721..a29229fe 100644
--- a/apps/frontend/src/components/forms/addNewVolunteerModal.tsx
+++ b/apps/frontend/src/components/forms/addNewVolunteerModal.tsx
@@ -77,42 +77,42 @@ const NewVolunteerModal: React.FC<NewVolunteerModalProps> = ({ onSubmitSuccess,
       <Dialog.Backdrop />
       <Dialog.Positioner>
         <Dialog.Content maxW="49em">
-          <Dialog.Header>
-            <Dialog.Title fontSize={25} fontWeight={700} fontFamily="'Instrument Serif', serif">
+          <Dialog.Header pb={1}>
+            <Dialog.Title fontSize="18px" fontWeight={600} fontFamily="Inter" color="#000">
               Add New Volunteer
             </Dialog.Title>
-            <CloseButton onClick={() => setIsOpen(false)} size="sm" position="absolute" top={3} right={3}/>
+            <CloseButton onClick={() => setIsOpen(false)} size="md" position="absolute" top={3} right={3}/>
           </Dialog.Header>
-          <Dialog.Body>
-            <Text mb="1.5em">
+          <Dialog.Body color="neutral.800" fontWeight={600} textStyle="p2">
+            <Text mb="1.5em" color="#52525B" fontWeight={400}>
               Complete all information in the form to register a new volunteer.
             </Text>
             <Flex gap={8} justifyContent="flex-start" my={4}>
               <Field.Root>
                 <Field.Label>First Name</Field.Label>
-                <Input value={firstName} onChange={(e) => setFirstName(e.target.value)}/>
+                <Input color="neutral.700" textStyle="p2" fontWeight={400} value={firstName} onChange={(e) => setFirstName(e.target.value)}/>
               </Field.Root>
               <Field.Root>
                 <Field.Label>Last Name</Field.Label>
-                <Input value={lastName} onChange={(e) => setLastName(e.target.value)}/>
+                <Input color="neutral.700" textStyle="p2" fontWeight={400} value={lastName} onChange={(e) => setLastName(e.target.value)}/>
               </Field.Root>
             </Flex>
             <Field.Root>
               <Field.Label>Email</Field.Label>
-              <Input value={email} onChange={(e) => setEmail(e.target.value)}/>
+              <Input color="neutral.700" textStyle="p2" fontWeight={400} value={email} onChange={(e) => setEmail(e.target.value)}/>
             </Field.Root>
             <Field.Root my={4}>
               <Field.Label>Phone Number</Field.Label>
-              <Input value={phone} onChange={(e) => setPhone(e.target.value)}/>
+              <Input color="neutral.700" textStyle="p2" fontWeight={400} value={phone} onChange={(e) => setPhone(e.target.value)}/>
             </Field.Root>
             {error && (
-              <Text color="red" mb={3} fontWeight="semibold">
+              <Text color="red" mb={3} fontWeight={400} fontSize="12px" fontFamily="Inter">
                 {error}
               </Text>
             )}
             <Flex justifyContent="flex-end" mt={4} gap={4}>
-              <Button bg={'#213C4A'} color={'white'} onClick={handleSubmit}>Submit</Button>
-              <Button variant='outline' onClick={handleClear}>Cancel</Button>
+              <Button textStyle="p2" fontWeight={600} bg={'#213C4A'} color={'white'} onClick={handleSubmit}>Submit</Button>
+              <Button textStyle="p2" fontWeight={600} color="neutral.800" variant='outline' onClick={handleClear}>Cancel</Button>
             </Flex>
           </Dialog.Body>
         </Dialog.Content>

From 21d9104b048b9a7ddcdf1d89e0a0c7ef28eeebeb Mon Sep 17 00:00:00 2001
From: Justin Wang <Juwang110@gmail.com>
Date: Wed, 3 Dec 2025 21:41:25 -0500
Subject: [PATCH 10/16] Refining submit status alerts

---
 .../src/components/forms/addNewVolunteerModal.tsx  |  2 +-
 .../src/containers/volunteerManagement.tsx         | 14 ++++++++++----
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/apps/frontend/src/components/forms/addNewVolunteerModal.tsx b/apps/frontend/src/components/forms/addNewVolunteerModal.tsx
index a29229fe..62b4de93 100644
--- a/apps/frontend/src/components/forms/addNewVolunteerModal.tsx
+++ b/apps/frontend/src/components/forms/addNewVolunteerModal.tsx
@@ -50,7 +50,7 @@ const NewVolunteerModal: React.FC<NewVolunteerModalProps> = ({ onSubmitSuccess,
       const message = error.response?.data?.message;
       const hasEmailOrPhoneError = Array.isArray(message) && message.some((msg: any) => typeof msg === "string" && (msg.toLowerCase().includes("email") || msg.toLowerCase().includes("phone")));
       if (hasEmailOrPhoneError) {
-        setError("Please specify a valid email and phone number")
+        setError("Please specify a valid email and phone number*")
       } else {
         if (onSubmitFail) onSubmitFail();
         handleClear();
diff --git a/apps/frontend/src/containers/volunteerManagement.tsx b/apps/frontend/src/containers/volunteerManagement.tsx
index a1c3eaa5..6f2b09c3 100644
--- a/apps/frontend/src/containers/volunteerManagement.tsx
+++ b/apps/frontend/src/containers/volunteerManagement.tsx
@@ -24,6 +24,7 @@ const VolunteerManagement: React.FC = () => {
   const [searchName, setSearchName] = useState<string>('');
 
   const [alertMessage, setAlertMessage] = useState<string>('');
+  const [submitSuccess, setSubmitSuccess] = useState<boolean>(false);
 
   const pageSize = 8;
 
@@ -39,7 +40,7 @@ const VolunteerManagement: React.FC = () => {
     };
 
     fetchVolunteers();
-  }, []);
+  }, [alertMessage]);
 
   useEffect(() => {
     setCurrentPage(1);
@@ -65,9 +66,9 @@ const VolunteerManagement: React.FC = () => {
     <Box flexDirection="column" p={4} mt={3}>
       <Text fontSize="32px" fontWeight={400} fontFamily="Instrument Serif" color="#515151">Volunteer Management</Text>
       {alertMessage && (
-        <Alert.Root status="info">
+        <Alert.Root color={submitSuccess ? "neutral.800" : "red"} status="info" bg="white" variant="subtle" boxShadow="lg"  position="absolute" top="12px" right="12px" w="fit-content" maxW="400px">
           <Alert.Indicator />
-          <Alert.Title>{alertMessage}</Alert.Title>
+          <Alert.Title textStyle="p2" fontWeight={500} >{alertMessage}</Alert.Title>
         </Alert.Root>
       )}
       <Box
@@ -95,7 +96,12 @@ const VolunteerManagement: React.FC = () => {
               />
             </InputGroup>
             <NewVolunteerModal onSubmitSuccess={() => {
-                setAlertMessage("Volunteer added");
+                setAlertMessage("Volunteer added.");
+                setSubmitSuccess(true);
+                setTimeout(() => setAlertMessage(""), 3000);
+              }} onSubmitFail={() => {
+                setAlertMessage("Volunteer could not be added.");
+                setSubmitSuccess(false);
                 setTimeout(() => setAlertMessage(""), 3000);
               }}
             />

From a5b8bf365fe4058f0791ed3829bfddc9986e2c37 Mon Sep 17 00:00:00 2001
From: Justin Wang <Juwang110@gmail.com>
Date: Sat, 6 Dec 2025 11:20:27 -0500
Subject: [PATCH 11/16] minor visual updates

---
 apps/frontend/src/containers/volunteerManagement.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/apps/frontend/src/containers/volunteerManagement.tsx b/apps/frontend/src/containers/volunteerManagement.tsx
index 6f2b09c3..23fda66d 100644
--- a/apps/frontend/src/containers/volunteerManagement.tsx
+++ b/apps/frontend/src/containers/volunteerManagement.tsx
@@ -63,8 +63,8 @@ const VolunteerManagement: React.FC = () => {
   };
 
   return (
-    <Box flexDirection="column" p={4} mt={3}>
-      <Text fontSize="32px" fontWeight={400} fontFamily="Instrument Serif" color="#515151">Volunteer Management</Text>
+    <Box flexDirection="column" p={4} pt={12}>
+      <Text textStyle="h1" color="#515151">Volunteer Management</Text>
       {alertMessage && (
         <Alert.Root color={submitSuccess ? "neutral.800" : "red"} status="info" bg="white" variant="subtle" boxShadow="lg"  position="absolute" top="12px" right="12px" w="fit-content" maxW="400px">
           <Alert.Indicator />
@@ -89,10 +89,9 @@ const VolunteerManagement: React.FC = () => {
                 ps="7"
                 onChange={handleSearchNameChange}
                 color="neutral.600"
-                fontFamily="Karrik"
+                fontFamily="ibm"
                 fontWeight={400}
                 fontSize="14px"
-                _placeholder={{ color: "neutral.600", fontFamily: "Karrik", fontWeight: 400, fontSize: 14 }}
               />
             </InputGroup>
             <NewVolunteerModal onSubmitSuccess={() => {
@@ -126,7 +125,7 @@ const VolunteerManagement: React.FC = () => {
                 </Table.Cell>
                 <Table.Cell textAlign="right">
                   <Link color="neutral.700" fontWeight={400} textStyle="p2" variant="underline" href={`/pantry-management/${volunteer.id}`}>
-                    View assigned pantries
+                    View Assigned Pantries
                   </Link>
                 </Table.Cell>
               </Table.Row>

From e6f850272630b13408403c5829535d54598ccb3c Mon Sep 17 00:00:00 2001
From: Justin Wang <Juwang110@gmail.com>
Date: Wed, 10 Dec 2025 21:09:07 -0500
Subject: [PATCH 12/16] Adding volunteer initial icons

---
 .../src/containers/volunteerManagement.tsx    | 24 ++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/apps/frontend/src/containers/volunteerManagement.tsx b/apps/frontend/src/containers/volunteerManagement.tsx
index 23fda66d..d2b81220 100644
--- a/apps/frontend/src/containers/volunteerManagement.tsx
+++ b/apps/frontend/src/containers/volunteerManagement.tsx
@@ -28,6 +28,8 @@ const VolunteerManagement: React.FC = () => {
 
   const pageSize = 8;
 
+  const USER_ICON_COLORS = ['#F89E19', '#CC3538', '#2795A5', '#2B4E60'];
+
   useEffect(() => {
     const fetchVolunteers = async () => {
       try {
@@ -118,7 +120,27 @@ const VolunteerManagement: React.FC = () => {
             {paginatedVolunteers?.map((volunteer) => (
               <Table.Row key={volunteer.id}>
                 <Table.Cell>
-                  {volunteer.firstName} {volunteer.lastName}
+                  <Box display="flex" alignItems="center" gap={5}>
+                    <Box
+                        borderRadius="full"
+                        bg={USER_ICON_COLORS[Math.floor(Math.random() * USER_ICON_COLORS.length)]}
+                        width="33px"
+                        height="33px"
+                        display="flex"
+                        alignItems="center"
+                        justifyContent="center"
+                        color="white"
+                        p={2}
+                      >
+                        {volunteer.firstName
+                          .charAt(0)
+                          .toUpperCase()}
+                        {volunteer.lastName
+                          .charAt(0)
+                          .toUpperCase()}
+                      </Box>
+                    {volunteer.firstName} {volunteer.lastName}
+                  </Box>
                 </Table.Cell>
                 <Table.Cell>
                   {volunteer.email}

From 66888e46694e7582162bde9050d689349793c797 Mon Sep 17 00:00:00 2001
From: Justin Wang <Juwang110@gmail.com>
Date: Fri, 12 Dec 2025 11:22:45 -0500
Subject: [PATCH 13/16] minor visual refactoring

---
 .../src/components/forms/addNewVolunteerModal.tsx  | 14 +++++++-------
 .../src/containers/volunteerManagement.tsx         |  5 +++--
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/apps/frontend/src/components/forms/addNewVolunteerModal.tsx b/apps/frontend/src/components/forms/addNewVolunteerModal.tsx
index 62b4de93..2fd869cb 100644
--- a/apps/frontend/src/components/forms/addNewVolunteerModal.tsx
+++ b/apps/frontend/src/components/forms/addNewVolunteerModal.tsx
@@ -75,8 +75,8 @@ const NewVolunteerModal: React.FC<NewVolunteerModalProps> = ({ onSubmitSuccess,
         </Button>
       </Dialog.Trigger>
       <Dialog.Backdrop />
-      <Dialog.Positioner>
-        <Dialog.Content maxW="49em">
+      <Dialog.Positioner alignItems="center">
+        <Dialog.Content maxW="40em" mt="-8">
           <Dialog.Header pb={1}>
             <Dialog.Title fontSize="18px" fontWeight={600} fontFamily="Inter" color="#000">
               Add New Volunteer
@@ -89,20 +89,20 @@ const NewVolunteerModal: React.FC<NewVolunteerModalProps> = ({ onSubmitSuccess,
             </Text>
             <Flex gap={8} justifyContent="flex-start" my={4}>
               <Field.Root>
-                <Field.Label>First Name</Field.Label>
+                <Field.Label textStyle="p2" color="neutral.800" fontWeight={600}>First Name</Field.Label>
                 <Input color="neutral.700" textStyle="p2" fontWeight={400} value={firstName} onChange={(e) => setFirstName(e.target.value)}/>
               </Field.Root>
               <Field.Root>
-                <Field.Label>Last Name</Field.Label>
+                <Field.Label textStyle="p2" color="neutral.800" fontWeight={600}>Last Name</Field.Label>
                 <Input color="neutral.700" textStyle="p2" fontWeight={400} value={lastName} onChange={(e) => setLastName(e.target.value)}/>
               </Field.Root>
             </Flex>
             <Field.Root>
-              <Field.Label>Email</Field.Label>
+              <Field.Label textStyle="p2" color="neutral.800" fontWeight={600}>Email</Field.Label>
               <Input color="neutral.700" textStyle="p2" fontWeight={400} value={email} onChange={(e) => setEmail(e.target.value)}/>
             </Field.Root>
             <Field.Root my={4}>
-              <Field.Label>Phone Number</Field.Label>
+              <Field.Label textStyle="p2" color="neutral.800" fontWeight={600}>Phone Number</Field.Label>
               <Input color="neutral.700" textStyle="p2" fontWeight={400} value={phone} onChange={(e) => setPhone(e.target.value)}/>
             </Field.Root>
             {error && (
@@ -111,8 +111,8 @@ const NewVolunteerModal: React.FC<NewVolunteerModalProps> = ({ onSubmitSuccess,
               </Text>
             )}
             <Flex justifyContent="flex-end" mt={4} gap={4}>
-              <Button textStyle="p2" fontWeight={600} bg={'#213C4A'} color={'white'} onClick={handleSubmit}>Submit</Button>
               <Button textStyle="p2" fontWeight={600} color="neutral.800" variant='outline' onClick={handleClear}>Cancel</Button>
+              <Button textStyle="p2" fontWeight={600} bg={'#213C4A'} color={'white'} onClick={handleSubmit}>Submit</Button>
             </Flex>
           </Dialog.Body>
         </Dialog.Content>
diff --git a/apps/frontend/src/containers/volunteerManagement.tsx b/apps/frontend/src/containers/volunteerManagement.tsx
index d2b81220..8ac25056 100644
--- a/apps/frontend/src/containers/volunteerManagement.tsx
+++ b/apps/frontend/src/containers/volunteerManagement.tsx
@@ -65,7 +65,7 @@ const VolunteerManagement: React.FC = () => {
   };
 
   return (
-    <Box flexDirection="column" p={4} pt={12}>
+    <Box flexDirection="column" p={12}>
       <Text textStyle="h1" color="#515151">Volunteer Management</Text>
       {alertMessage && (
         <Alert.Root color={submitSuccess ? "neutral.800" : "red"} status="info" bg="white" variant="subtle" boxShadow="lg"  position="absolute" top="12px" right="12px" w="fit-content" maxW="400px">
@@ -92,8 +92,9 @@ const VolunteerManagement: React.FC = () => {
                 onChange={handleSearchNameChange}
                 color="neutral.600"
                 fontFamily="ibm"
-                fontWeight={400}
+                fontWeight="semibold"
                 fontSize="14px"
+                _focusVisible={{ boxShadow: "none", outline: "none" }}
               />
             </InputGroup>
             <NewVolunteerModal onSubmitSuccess={() => {

From 2d286af3720f6ba2cff6f96ddab49cc5799ad653 Mon Sep 17 00:00:00 2001
From: Justin Wang <Juwang110@gmail.com>
Date: Sat, 13 Dec 2025 11:59:23 -0500
Subject: [PATCH 14/16] Refactoring add volunteer modal to use USPhoneInput

---
 .../src/components/forms/addNewVolunteerModal.tsx     | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/apps/frontend/src/components/forms/addNewVolunteerModal.tsx b/apps/frontend/src/components/forms/addNewVolunteerModal.tsx
index 2fd869cb..c6510ded 100644
--- a/apps/frontend/src/components/forms/addNewVolunteerModal.tsx
+++ b/apps/frontend/src/components/forms/addNewVolunteerModal.tsx
@@ -10,6 +10,7 @@ import {
 import { useState } from 'react';
 import { Role, UserDto } from "../../types/types";
 import ApiClient from '@api/apiClient';
+import { USPhoneInput } from './usPhoneInput';
 
 interface NewVolunteerModalProps {
   onSubmitSuccess?: () => void; 
@@ -103,7 +104,15 @@ const NewVolunteerModal: React.FC<NewVolunteerModalProps> = ({ onSubmitSuccess,
             </Field.Root>
             <Field.Root my={4}>
               <Field.Label textStyle="p2" color="neutral.800" fontWeight={600}>Phone Number</Field.Label>
-              <Input color="neutral.700" textStyle="p2" fontWeight={400} value={phone} onChange={(e) => setPhone(e.target.value)}/>
+              <USPhoneInput
+                value={phone}
+                onChange={setPhone}
+                inputProps={{
+                  color: 'neutral.700',
+                  textStyle: 'p2',
+                  fontWeight: 400,
+                }}
+              />
             </Field.Root>
             {error && (
               <Text color="red" mb={3} fontWeight={400} fontSize="12px" fontFamily="Inter">

From 96fb6d6cf8f9461732b0b96aa7702ada07e19340 Mon Sep 17 00:00:00 2001
From: Justin Wang <Juwang110@gmail.com>
Date: Sun, 14 Dec 2025 15:59:28 -0500
Subject: [PATCH 15/16] visual refactoring

---
 .../components/forms/addNewVolunteerModal.tsx | 19 ++++++++++++-------
 .../src/containers/volunteerManagement.tsx    |  4 ++--
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/apps/frontend/src/components/forms/addNewVolunteerModal.tsx b/apps/frontend/src/components/forms/addNewVolunteerModal.tsx
index c6510ded..6fe848b1 100644
--- a/apps/frontend/src/components/forms/addNewVolunteerModal.tsx
+++ b/apps/frontend/src/components/forms/addNewVolunteerModal.tsx
@@ -28,8 +28,9 @@ const NewVolunteerModal: React.FC<NewVolunteerModalProps> = ({ onSubmitSuccess,
   const [error, setError] = useState("");
 
   const handleSubmit = async () => {
-    if (!firstName || !lastName || !email || !phone) {
-      setError("Please fill in all fields.*");
+    console.log("RAW phone value:", phone);
+    if (!firstName || !lastName || !email || !phone || phone === "+1") {
+      setError("Please fill in all fields. *");
       return;
     }
 
@@ -49,9 +50,13 @@ const NewVolunteerModal: React.FC<NewVolunteerModalProps> = ({ onSubmitSuccess,
       handleClear();
     } catch (error: any) {
       const message = error.response?.data?.message;
-      const hasEmailOrPhoneError = Array.isArray(message) && message.some((msg: any) => typeof msg === "string" && (msg.toLowerCase().includes("email") || msg.toLowerCase().includes("phone")));
-      if (hasEmailOrPhoneError) {
-        setError("Please specify a valid email and phone number*")
+      const hasEmailError = Array.isArray(message) && message.some((msg: any) => typeof msg === "string" && (msg.toLowerCase().includes("email")));
+      const hasPhoneError = Array.isArray(message) && message.some((msg: any) => typeof msg === "string" && (msg.toLowerCase().includes("phone")));
+
+      if (hasEmailError) {
+        setError("Please specify a valid email. *")
+      } else if (hasPhoneError) {
+        setError("Please specify a valid phone number. *")
       } else {
         if (onSubmitFail) onSubmitFail();
         handleClear();
@@ -71,7 +76,7 @@ const NewVolunteerModal: React.FC<NewVolunteerModalProps> = ({ onSubmitSuccess,
   return (
     <Dialog.Root open={isOpen} onOpenChange={setIsOpen}>
       <Dialog.Trigger asChild>
-        <Button borderColor="neutral.200" variant="outline" color="neutral.600" fontFamily="Karrik" fontWeight={400} fontSize="14px">
+        <Button borderColor="neutral.200" variant="outline" color="neutral.600" fontFamily="ibm" fontWeight="semibold" fontSize="14px">
           +  Add
         </Button>
       </Dialog.Trigger>
@@ -119,7 +124,7 @@ const NewVolunteerModal: React.FC<NewVolunteerModalProps> = ({ onSubmitSuccess,
                 {error}
               </Text>
             )}
-            <Flex justifyContent="flex-end" mt={4} gap={4}>
+            <Flex justifyContent="flex-end" mt={12} gap={4}>
               <Button textStyle="p2" fontWeight={600} color="neutral.800" variant='outline' onClick={handleClear}>Cancel</Button>
               <Button textStyle="p2" fontWeight={600} bg={'#213C4A'} color={'white'} onClick={handleSubmit}>Submit</Button>
             </Flex>
diff --git a/apps/frontend/src/containers/volunteerManagement.tsx b/apps/frontend/src/containers/volunteerManagement.tsx
index 8ac25056..94885fe2 100644
--- a/apps/frontend/src/containers/volunteerManagement.tsx
+++ b/apps/frontend/src/containers/volunteerManagement.tsx
@@ -124,7 +124,7 @@ const VolunteerManagement: React.FC = () => {
                   <Box display="flex" alignItems="center" gap={5}>
                     <Box
                         borderRadius="full"
-                        bg={USER_ICON_COLORS[Math.floor(Math.random() * USER_ICON_COLORS.length)]}
+                        bg={USER_ICON_COLORS[volunteer.id % USER_ICON_COLORS.length]}
                         width="33px"
                         height="33px"
                         display="flex"
@@ -155,7 +155,7 @@ const VolunteerManagement: React.FC = () => {
             ))}
           </Table.Body>
         </Table.Root>
-        <Flex justify="center" mt={4}>
+        <Flex justify="center" mt={12}>
           <Pagination.Root count={Math.ceil(filteredVolunteers.length / pageSize)} pageSize={1} page={currentPage} onChange={(page) => setCurrentPage(page)}>
             <ButtonGroup variant="outline" size="sm">
               <Pagination.PrevTrigger asChild>

From 23d500f449f98d36ca2b64bff41081a3857fed5a Mon Sep 17 00:00:00 2001
From: Justin Wang <Juwang110@gmail.com>
Date: Sun, 21 Dec 2025 12:12:04 -0500
Subject: [PATCH 16/16] visual refactoring

---
 apps/frontend/src/api/apiClient.ts                       | 2 +-
 .../src/components/forms/addNewVolunteerModal.tsx        | 9 ++++++---
 apps/frontend/src/containers/volunteerManagement.tsx     | 2 +-
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/apps/frontend/src/api/apiClient.ts b/apps/frontend/src/api/apiClient.ts
index 11ea560a..bdd49bbd 100644
--- a/apps/frontend/src/api/apiClient.ts
+++ b/apps/frontend/src/api/apiClient.ts
@@ -97,7 +97,7 @@ export class ApiClient {
       .then((response) => response.data);
   }
 
-  public async postUser(data: UserDto): Promise<AxiosResponse<void>> {
+  public async postUser(data: UserDto): Promise<User> {
     return this.axiosInstance.post(`/api/users`, data);
   }
 
diff --git a/apps/frontend/src/components/forms/addNewVolunteerModal.tsx b/apps/frontend/src/components/forms/addNewVolunteerModal.tsx
index 6fe848b1..9ca2221e 100644
--- a/apps/frontend/src/components/forms/addNewVolunteerModal.tsx
+++ b/apps/frontend/src/components/forms/addNewVolunteerModal.tsx
@@ -6,11 +6,13 @@ import {
     Field,
     Input,
     CloseButton,
+    Box
 } from '@chakra-ui/react';
 import { useState } from 'react';
 import { Role, UserDto } from "../../types/types";
 import ApiClient from '@api/apiClient';
 import { USPhoneInput } from './usPhoneInput';
+import { PlusIcon } from 'lucide-react';
 
 interface NewVolunteerModalProps {
   onSubmitSuccess?: () => void; 
@@ -76,8 +78,9 @@ const NewVolunteerModal: React.FC<NewVolunteerModalProps> = ({ onSubmitSuccess,
   return (
     <Dialog.Root open={isOpen} onOpenChange={setIsOpen}>
       <Dialog.Trigger asChild>
-        <Button borderColor="neutral.200" variant="outline" color="neutral.600" fontFamily="ibm" fontWeight="semibold" fontSize="14px">
-          +  Add
+        <Button borderColor="neutral.200" variant="outline" color="neutral.600" fontFamily="ibm" fontWeight="semibold" fontSize="14px" gap={1.5}>
+          <Box as={PlusIcon} boxSize="17px" strokeWidth={2.5} />
+          Add
         </Button>
       </Dialog.Trigger>
       <Dialog.Backdrop />
@@ -124,7 +127,7 @@ const NewVolunteerModal: React.FC<NewVolunteerModalProps> = ({ onSubmitSuccess,
                 {error}
               </Text>
             )}
-            <Flex justifyContent="flex-end" mt={12} gap={4}>
+            <Flex justifyContent="flex-end" mt={10} gap={2.5}>
               <Button textStyle="p2" fontWeight={600} color="neutral.800" variant='outline' onClick={handleClear}>Cancel</Button>
               <Button textStyle="p2" fontWeight={600} bg={'#213C4A'} color={'white'} onClick={handleSubmit}>Submit</Button>
             </Flex>
diff --git a/apps/frontend/src/containers/volunteerManagement.tsx b/apps/frontend/src/containers/volunteerManagement.tsx
index 94885fe2..c227b567 100644
--- a/apps/frontend/src/containers/volunteerManagement.tsx
+++ b/apps/frontend/src/containers/volunteerManagement.tsx
@@ -147,7 +147,7 @@ const VolunteerManagement: React.FC = () => {
                   {volunteer.email}
                 </Table.Cell>
                 <Table.Cell textAlign="right">
-                  <Link color="neutral.700" fontWeight={400} textStyle="p2" variant="underline" href={`/pantry-management/${volunteer.id}`}>
+                  <Link color="neutral.700" fontWeight={400} textStyle="p2" variant="underline" textDecorationColor="neutral.700" href={`/pantry-management/${volunteer.id}`}>
                     View Assigned Pantries
                   </Link>
                 </Table.Cell>