diff --git a/apps/frontend/src/api/apiClient.ts b/apps/frontend/src/api/apiClient.ts
index 74d2c812..bdd49bbd 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<User> {
+    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..9ca2221e
--- /dev/null
+++ b/apps/frontend/src/components/forms/addNewVolunteerModal.tsx
@@ -0,0 +1,146 @@
+import {
+    Dialog,
+    Button,
+    Text,
+    Flex,
+    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; 
+  onSubmitFail?: () => void; 
+}
+
+const NewVolunteerModal: React.FC<NewVolunteerModalProps> = ({ onSubmitSuccess, onSubmitFail }) => {
+  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 () => {
+    console.log("RAW phone value:", phone);
+    if (!firstName || !lastName || !email || !phone || phone === "+1") {
+      setError("Please fill in all fields. *");
+      return;
+    }
+
+    setError("");
+
+    const newVolunteer: UserDto = {
+      firstName,
+      lastName,
+      email,
+      phone,
+      role: Role.STANDARD_VOLUNTEER
+    };
+
+    try {
+      await ApiClient.postUser(newVolunteer);
+      if (onSubmitSuccess) onSubmitSuccess();
+      handleClear();
+    } catch (error: any) {
+      const message = error.response?.data?.message;
+      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();
+      }
+    }
+  }
+
+  const handleClear = () => {
+    setFirstName("");
+    setLastName("");
+    setEmail("");
+    setPhone("");
+    setError("");
+    setIsOpen(false);
+  };
+
+  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" gap={1.5}>
+          <Box as={PlusIcon} boxSize="17px" strokeWidth={2.5} />
+          Add
+        </Button>
+      </Dialog.Trigger>
+      <Dialog.Backdrop />
+      <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
+            </Dialog.Title>
+            <CloseButton onClick={() => setIsOpen(false)} size="md" position="absolute" top={3} right={3}/>
+          </Dialog.Header>
+          <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 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 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 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 textStyle="p2" color="neutral.800" fontWeight={600}>Phone Number</Field.Label>
+              <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">
+                {error}
+              </Text>
+            )}
+            <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>
+          </Dialog.Body>
+        </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 b2c9a43f..c227b567 100644
--- a/apps/frontend/src/containers/volunteerManagement.tsx
+++ b/apps/frontend/src/containers/volunteerManagement.tsx
@@ -1,38 +1,40 @@
 import { useEffect, useState } from 'react';
 import {
   Table,
-  TableCaption,
   Text,
-  Center,
-  Button,
   Flex,
   Input,
-  Menu,
-  Checkbox,
   VStack,
   Box,
-  Portal,
-  NativeSelect,
-  NativeSelectIndicator,
+  InputGroup,
+  Pagination,
+  ButtonGroup,
+  IconButton,
+  Alert,
+  Link,
 } from '@chakra-ui/react';
-import { VolunteerType } from '../types/types';
-import { Link } from 'react-router-dom';
-import { ChevronDownIcon } from 'lucide-react';
+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);
   const [volunteers, setVolunteers] = useState<User[]>([]);
-  const [changedVolunteers, setChangedVolunteers] = useState<User[]>([]);
   const [searchName, setSearchName] = useState<string>('');
-  const [checkedTypes, setCheckedTypes] = useState<string[]>([]);
+
+  const [alertMessage, setAlertMessage] = useState<string>('');
+  const [submitSuccess, setSubmitSuccess] = useState<boolean>(false);
+
+  const pageSize = 8;
+
+  const USER_ICON_COLORS = ['#F89E19', '#CC3538', '#2795A5', '#2B4E60'];
 
   useEffect(() => {
     const fetchVolunteers = async () => {
       try {
         const allVolunteers = await ApiClient.getVolunteers();
         setVolunteers(allVolunteers);
-        setChangedVolunteers(allVolunteers);
       } catch (error) {
         alert('Error fetching volunteers');
         console.error('Error fetching volunteers: ', error);
@@ -40,44 +42,21 @@ const VolunteerManagement: React.FC = () => {
     };
 
     fetchVolunteers();
-  }, []);
+  }, [alertMessage]);
 
-  const filteredVolunteers = changedVolunteers.filter((a) => {
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [searchName]);
+
+  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 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 paginatedVolunteers = filteredVolunteers.slice(
+    (currentPage - 1) * pageSize,
+    currentPage * pageSize
+  );
 
   const handleSearchNameChange = (
     event: React.ChangeEvent<HTMLInputElement>,
@@ -85,157 +64,127 @@ const VolunteerManagement: React.FC = () => {
     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 (
-    <Center flexDirection="column" p={4}>
-      <Text fontSize="2xl">Pantry Volunteer Management</Text>
+    <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">
+          <Alert.Indicator />
+          <Alert.Title textStyle="p2" fontWeight={500} >{alertMessage}</Alert.Title>
+        </Alert.Root>
+      )}
       <Box
-        mt={5}
+        mt={3}
         display="block"
         maxW="100%"
         overflowX="auto"
         overflowY="hidden"
         whiteSpace="nowrap"
       >
-        <VStack my={5}>
-          <Input
-            placeholder="Search by volunteer name"
-            value={searchName}
-            onChange={handleSearchNameChange}
-          />
-          <Menu.Root closeOnSelect={false}>
-            <Menu.Trigger asChild>
-              <Button>
-                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 mt={2} mb={7} align="start" >
+          <Flex justify="space-between" align="center" w="100%">
+            <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="ibm"
+                fontWeight="semibold"
+                fontSize="14px"
+                _focusVisible={{ boxShadow: "none", outline: "none" }}
+              />
+            </InputGroup>
+            <NewVolunteerModal onSubmitSuccess={() => {
+                setAlertMessage("Volunteer added.");
+                setSubmitSuccess(true);
+                setTimeout(() => setAlertMessage(""), 3000);
+              }} onSubmitFail={() => {
+                setAlertMessage("Volunteer could not be added.");
+                setSubmitSuccess(false);
+                setTimeout(() => setAlertMessage(""), 3000);
+              }}
+            />
+          </Flex>
         </VStack>
-        <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>
-              <Button onClick={handleSaveChanges}>Save changes</Button>
-            </Flex>
-          </TableCaption>
+        <Table.Root variant="line" showColumnBorder>
           <Table.Header>
             <Table.Row>
-              <Table.ColumnHeader>Volunteer Name</Table.ColumnHeader>
-              <Table.ColumnHeader>Email</Table.ColumnHeader>
-              <Table.ColumnHeader>Phone</Table.ColumnHeader>
-              <Table.ColumnHeader>Type</Table.ColumnHeader>
-              <Table.ColumnHeader>Assigned Pantries</Table.ColumnHeader>
-            </Table.Row>
+              <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>
-            {filteredVolunteers?.map((volunteer) => (
+          <Table.Body color="neutral.700" fontWeight={400} textStyle="p2">
+            {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[volunteer.id % 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}</Table.Cell>
-                <Table.Cell>{volunteer.phone}</Table.Cell>
                 <Table.Cell>
-                  {volunteerTypeDropdown({
-                    volunteerType:
-                      VolunteerType[
-                        volunteer.role.toUpperCase() as keyof typeof VolunteerType
-                      ],
-                    volunteerId: volunteer.id,
-                  })}
+                  {volunteer.email}
                 </Table.Cell>
-                <Table.Cell>
-                  <Button asChild>
-                    <Link to={`/pantry-management/${volunteer.id}`}>
-                      View assigned pantries
-                    </Link>
-                  </Button>
+                <Table.Cell textAlign="right">
+                  <Link color="neutral.700" fontWeight={400} textStyle="p2" variant="underline" textDecorationColor="neutral.700" href={`/pantry-management/${volunteer.id}`}>
+                    View Assigned Pantries
+                  </Link>
                 </Table.Cell>
               </Table.Row>
             ))}
           </Table.Body>
         </Table.Root>
+        <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>
+                <IconButton variant="ghost" onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 1))}>
+                  <ChevronLeft />
+                </IconButton>
+              </Pagination.PrevTrigger>
+
+              <Pagination.Items
+                render={(page) => (
+                  <IconButton
+                    variant={{ base: "outline", _selected: "outline" }}
+                    onClick={() => setCurrentPage(page.value)}
+                  >
+                    {page.value}
+                  </IconButton>
+                )}
+              />
+
+              <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>
-    </Center>
+    </Box>
   );
 };
 
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;