diff --git a/src/components/DummyProfiles/GetByIdForm.jsx b/src/components/DummyProfiles/GetByIdForm.jsx
new file mode 100644
index 0000000..083d557
--- /dev/null
+++ b/src/components/DummyProfiles/GetByIdForm.jsx
@@ -0,0 +1,46 @@
+import { Flex, Input, Button, Text, VStack } from '@chakra-ui/react';
+import { getProfileById } from '../../../utils/profileUtils';
+import ProfileCard from './ProfileCard';
+import { useState } from 'react';
+
+const GetByIdForm = () => {
+  const [id, setId] = useState('');
+  const [profile, setProfile] = useState();
+
+  async function submitHandler(e) {
+    e.preventDefault();
+    try {
+      const response = await getProfileById(id);
+      setProfile(response);
+    } catch (error) {
+      console.error('Error submitting form:', error);
+    }
+  }
+
+  return (
+    <>
+      <form onSubmit={e => submitHandler(e)}>
+        <VStack spacing={5}>
+          <Text textAlign="center" fontWeight="bold">
+            Get Volunteer Profile by ID
+          </Text>
+          <Flex justify="space-between">
+            <Input
+              name="id"
+              focusBorderColor="blue"
+              placeholder="Please enter ID Number..."
+              value={id}
+              onChange={e => setId(e.target.value)}
+            />
+            <Button type="submit" colorScheme="blue">
+              Submit
+            </Button>
+          </Flex>
+        </VStack>
+      </form>
+      {profile && <ProfileCard profile={profile} />}
+    </>
+  );
+};
+
+export default GetByIdForm;
diff --git a/src/components/DummyProfiles/ProfileCard.jsx b/src/components/DummyProfiles/ProfileCard.jsx
new file mode 100644
index 0000000..dbebf9a
--- /dev/null
+++ b/src/components/DummyProfiles/ProfileCard.jsx
@@ -0,0 +1,36 @@
+import { Card, CardBody, Text, Flex, Button } from '@chakra-ui/react';
+import { deleteProfile } from '../../../utils/profileUtils';
+import PropTypes from 'prop-types';
+
+const ProfileCard = ({ profile }) => {
+  const handleDelete = () => {
+    deleteProfile(profile.id);
+  };
+
+  return (
+    <Card>
+      <Flex justify="space-between">
+        <CardBody>
+          <Text>id: {profile.id}</Text>
+          <Text>first_name: {profile.first_name}</Text>
+          <Text>last_name: {profile.last_name}</Text>
+          <Text>email: {profile.email}</Text>
+        </CardBody>
+        <Button onClick={handleDelete} colorScheme="red">
+          Delete
+        </Button>
+      </Flex>
+    </Card>
+  );
+};
+
+ProfileCard.propTypes = {
+  profile: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    first_name: PropTypes.string.isRequired,
+    last_name: PropTypes.string.isRequired,
+    email: PropTypes.string.isRequired,
+  }).isRequired,
+};
+
+export default ProfileCard;
diff --git a/src/components/DummyProfiles/ProfileForm.jsx b/src/components/DummyProfiles/ProfileForm.jsx
new file mode 100644
index 0000000..d5d2781
--- /dev/null
+++ b/src/components/DummyProfiles/ProfileForm.jsx
@@ -0,0 +1,73 @@
+import { useState } from 'react';
+import { Stack, Input, Button, Text } from '@chakra-ui/react';
+import { postProfile } from '../../../utils/profileUtils';
+
+const ProfileForm = () => {
+  const [profile, setProfile] = useState({
+    id: '',
+    email: '',
+    first_name: '',
+    last_name: '',
+  });
+
+  const handleInputChange = e => {
+    const { name, value } = e.target;
+    setProfile(prevProfile => ({
+      ...prevProfile,
+      [name]: value,
+    }));
+  };
+
+  async function submitHandler(e) {
+    e.preventDefault();
+    try {
+      const response = await postProfile(profile);
+      console.log(response);
+    } catch (error) {
+      console.error('Error submitting form:', error);
+    }
+  }
+
+  return (
+    <form onSubmit={e => submitHandler(e)}>
+      <Stack spacing={3}>
+        <Text textAlign="center" fontWeight="bold">
+          Create new Volunteer Profile
+        </Text>
+        <Input
+          name="id"
+          focusBorderColor="blue"
+          placeholder="Please enter your ID Number..."
+          value={profile.id}
+          onChange={handleInputChange}
+        />
+        <Input
+          name="email"
+          focusBorderColor="blue"
+          placeholder="Please enter your Email..."
+          value={profile.email}
+          onChange={handleInputChange}
+        />
+        <Input
+          name="first_name"
+          focusBorderColor="blue"
+          placeholder="Please enter your First Name..."
+          value={profile.first_name}
+          onChange={handleInputChange}
+        />
+        <Input
+          name="last_name"
+          focusBorderColor="blue"
+          placeholder="Please enter your Last Name..."
+          value={profile.last_name}
+          onChange={handleInputChange}
+        />
+        <Button type="submit" colorScheme="blue">
+          Submit
+        </Button>
+      </Stack>
+    </form>
+  );
+};
+
+export default ProfileForm;
diff --git a/src/pages/DummyEvents.jsx b/src/pages/DummyEvents.jsx
index e757144..f4d1c11 100644
--- a/src/pages/DummyEvents.jsx
+++ b/src/pages/DummyEvents.jsx
@@ -1,4 +1,3 @@
-
 const DummyEvents = () => {
   return <p>Placeholder for the events page</p>;
 };
diff --git a/src/pages/DummyProfiles.jsx b/src/pages/DummyProfiles.jsx
index f28b2b3..ec4ad56 100644
--- a/src/pages/DummyProfiles.jsx
+++ b/src/pages/DummyProfiles.jsx
@@ -1,6 +1,31 @@
+import { Button, VStack, StackDivider } from '@chakra-ui/react';
+import ProfileCard from '../components/DummyProfiles/ProfileCard';
+import ProfileForm from '../components/DummyProfiles/ProfileForm';
+import { getProfile } from '../../utils/profileUtils';
+import { useState } from 'react';
+import GetByIdForm from '../components/DummyProfiles/GetByIdForm';
 
 const DummyProfiles = () => {
-  return <p>Placeholder for the profiles page</p>;
+  const [profiles, setProfiles] = useState([]);
+  const [displayProfiles, setDisplayProfiles] = useState(false);
+
+  const viewProfile = async () => {
+    await getProfile().then(data => setProfiles(data));
+    setDisplayProfiles(prev => !prev);
+  };
+  return (
+    <VStack divider={<StackDivider borderColor="gray.200" />} spacing={10} align="stretch">
+      <ProfileForm />
+      <GetByIdForm />
+      <>
+        <Button onClick={viewProfile} colorScheme="blue">
+          View all profiles
+        </Button>
+        {displayProfiles &&
+          profiles.map(profile => <ProfileCard profile={profile} key={profile.id} />)}
+      </>
+    </VStack> // Add closing tag for Stack element
+  );
 };
 
 export default DummyProfiles;
diff --git a/src/pages/DummyVolunteerData.jsx b/src/pages/DummyVolunteerData.jsx
index 7c236ea..8d8d2dd 100644
--- a/src/pages/DummyVolunteerData.jsx
+++ b/src/pages/DummyVolunteerData.jsx
@@ -1,6 +1,167 @@
+/* eslint-disable  no-unused-vars */
+import Backend from '../../utils/utils';
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { Heading, Text, SimpleGrid, Button, Card, CardHeader, CardBody, CardFooter, FormControl, Input, FormLabel } from '@chakra-ui/react'
+
+
+const VolunteerCard = ({ volunteer, onDelete }) => (
+  <Card key={volunteer.id}>
+    <CardHeader>
+      <Heading size='md'>{volunteer.id}</Heading>
+    </CardHeader>
+    <CardBody>
+      <Text> Volunteer ID: {volunteer.volunteer_id}</Text>
+      <Text> Number of People in Party: {volunteer.number_in_party}</Text>
+      <Text> Collected: {volunteer.pounds} lbs | {volunteer.ounces} oz</Text>
+      <Text> Unusual Items: {volunteer.unusual_items}</Text>
+      <Text> Event: {volunteer.event_id}</Text>
+      <Text> Checked In: {volunteer.is_checked_in ? 'Yes' : 'No'}</Text>
+    </CardBody>
+    <CardFooter>
+      <Button onClick={() => onDelete(volunteer.id)}>Delete</Button>
+    </CardFooter>
+  </Card>
+);
+
+VolunteerCard.propTypes = {
+  volunteer: PropTypes.shape({
+    id: PropTypes.number.isRequired,
+    volunteer_id: PropTypes.string.isRequired,
+    number_in_party: PropTypes.number.isRequired,
+    pounds: PropTypes.number.isRequired,
+    ounces: PropTypes.number.isRequired,
+    unusual_items: PropTypes.string.isRequired,
+    event_id: PropTypes.string.isRequired,
+    is_checked_in: PropTypes.bool.isRequired,
+  }).isRequired,
+  onDelete: PropTypes.func.isRequired,
+};
 
 const DummyVolunteerData = () => {
-  return <p>Placeholder for the volunteer data page</p>;
+
+  const [volunteers, setVolunteers] = useState([]);
+  const [showCards, setShowCards] = useState(false);
+  const [volunteer_id, setVolunteerId] = useState([]);
+  const [number_in_party, setNumberInParty] = useState([]);
+  const [pounds, setPounds] = useState([]);
+  const [ounces, setOunces] = useState([]);
+  const [unusual_items, setUnusualItems] = useState([]);
+  const [event_id, setEventId] = useState([]);
+
+  const getVolunteerData = async () => {
+    try {
+      const { data } = await Backend.get('/data');
+      setVolunteers(data);
+    } catch (error) {
+      console.error('Error fetching volunteer data:', error.message);
+    }
+  };
+
+  const postVolunteerData = async (volunteer_id, number_in_party, pounds,
+                                     ounces, unusual_items, event_id) => {
+    try {
+      const postData = {
+        volunteer_id: volunteer_id,
+        number_in_party: number_in_party,
+        pounds: pounds,
+        ounces: ounces,
+        unusual_items: unusual_items,
+        event_id: event_id,
+        is_checked_in: false
+      };
+
+      const{ postStatus } = await Backend.post('/data', postData);
+      getVolunteerData();
+    } catch (error) {
+      console.error('Error creating new volunteer:', error.message);
+    }
+  };
+
+  const deleteVolunteerData = async (id) => {
+    try {
+      await Backend.delete(`/data/${id}`);
+      // After deletion, refresh the volunteer data
+      getVolunteerData();
+    } catch (error) {
+      console.error('Error deleting volunteer data:', error.message);
+    }
+  };
+
+  const renderVolunteerCards = () => {
+    return (
+      <SimpleGrid
+        spacing={4}
+        templateColumns='repeat(auto-fill, minmax(200px, 1fr))'
+      >
+        {volunteers.map((volunteer) => (
+          <VolunteerCard
+            key={volunteer.id}
+            volunteer={volunteer}
+            onDelete={deleteVolunteerData}
+          />
+        ))}
+      </SimpleGrid>
+    );
+  };
+
+  useEffect(() => {
+    getVolunteerData();
+  }, []);
+
+  return (
+    <>
+      <Button onClick={() => setShowCards(!showCards)}>
+        {showCards ? 'Hide Volunteers' : 'Show Volunteers'}
+      </Button>
+      {showCards && renderVolunteerCards()}
+
+      <form onSubmit={() => postVolunteerData(volunteer_id, number_in_party, pounds, ounces, unusual_items, event_id)}>
+        <FormControl>
+          <FormLabel>Add New Volunteer</FormLabel>
+          <Input
+            type='string'
+            value={volunteer_id}
+            placeholder = 'Volunteer ID'
+            onChange={(e) => setVolunteerId(e.target.value)}
+          />
+          <Input
+            type='number'
+            value= {number_in_party}
+            placeholder = "Number of People in Party"
+            onChange={(e) => setNumberInParty(e.target.value)}
+          />
+          <Input
+            type='number'
+            value={pounds}
+            placeholder = 'Pounds Collected'
+            onChange={(e) => setPounds(e.target.value)}
+          />
+          <Input
+            type='number'
+            placeholder = "Ounces Collected"
+            onChange={(e) => setOunces(e.target.value)}
+          />
+          <Input
+            type='string'
+            value={unusual_items}
+            placeholder = 'Unusual Items'
+            onChange={(e) => setUnusualItems(e.target.value)}
+          />
+          <Input
+            type='string'
+            value={event_id}
+            placeholder = 'Event ID'
+            onChange={(e) => setEventId(e.target.value)}
+          />
+        </FormControl>
+        <Button type='submit' mt={4}>
+          Submit
+        </Button>
+      </form>
+    </>
+  );
+
 };
 
 export default DummyVolunteerData;
diff --git a/src/pages/DummyVolunteerEvent.jsx b/src/pages/DummyVolunteerEvent.jsx
index b40ca82..cd4311f 100644
--- a/src/pages/DummyVolunteerEvent.jsx
+++ b/src/pages/DummyVolunteerEvent.jsx
@@ -1,4 +1,3 @@
-
 const DummyVolunteerEvent = () => {
   return <p>Placeholder for the volunteer event page</p>;
 };
diff --git a/utils/profileUtils.js b/utils/profileUtils.js
new file mode 100644
index 0000000..c9c1ddb
--- /dev/null
+++ b/utils/profileUtils.js
@@ -0,0 +1,23 @@
+import Backend from './utils';
+
+const getProfile = async () => {
+  const response = await Backend.get('/profiles');
+  return response.data;
+};
+
+const postProfile = async profile => {
+  const response = await Backend.post('/profiles', profile);
+  return response.data;
+};
+
+const deleteProfile = async id => {
+  const response = await Backend.delete(`/profiles/${id}`);
+  return response.data;
+};
+
+const getProfileById = async id => {
+  const response = await Backend.get(`/profiles/${id}`);
+  return response.data;
+};
+
+export { getProfile, postProfile, deleteProfile, getProfileById };
diff --git a/utils/utils.js b/utils/utils.js
index 4ac23dd..a464f17 100644
--- a/utils/utils.js
+++ b/utils/utils.js
@@ -1,8 +1,8 @@
-import axios from "axios";
+import axios from 'axios';
 
 const Backend = axios.create({
-  baseURL: "http://localhost:3001",
+  baseURL: 'http://localhost:3001',
   withCredentials: true,
 });
 
-export default Backend;
\ No newline at end of file
+export default Backend;