diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js
index 88316ae..e36a14e 100644
--- a/frontend/.eslintrc.js
+++ b/frontend/.eslintrc.js
@@ -31,6 +31,7 @@ module.exports = {
     "react/no-array-index-key": "off",
     "jsx-a11y/click-events-have-key-events": "off",
     "jsx-a11y/no-static-element-interactions": "off",
+    "react/prop-types": "off",
   },
   ignorePatterns: ["build/*"],
 };
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 5c076c8..0fcf136 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -42,6 +42,7 @@
         "react-jsonschema-form": "^1.8.1",
         "react-router-dom": "^5.2.0",
         "react-scripts": "4.0.2",
+        "react-select": "^5.8.0",
         "react-table": "^7.7.0",
         "typescript": "^4.1.2",
         "web-vitals": "^1.0.1"
@@ -2733,6 +2734,28 @@
         "node": ">=8"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.2.tgz",
+      "integrity": "sha512-+2XpQV9LLZeanU4ZevzRnGFg2neDeKHgFLjP6YLW+tly0IvrhqT4u8enLGjLH3qeh85g19xY5rsAusfwTdn5lg==",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.0"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.6.5",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.5.tgz",
+      "integrity": "sha512-Nsdud2X65Dz+1RHjAIP0t8z5e2ff/IRbei6BqFrl1urT8sDVzM1HMQ+R0XcU5ceRfyO3I6ayeqIfh+6Wb8LGTw==",
+      "dependencies": {
+        "@floating-ui/core": "^1.0.0",
+        "@floating-ui/utils": "^0.2.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.2.tgz",
+      "integrity": "sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw=="
+    },
     "node_modules/@graphql-typed-document-node/core": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@graphql-typed-document-node/core/-/core-3.1.0.tgz",
@@ -14422,6 +14445,11 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/memoize-one": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
+      "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
+    },
     "node_modules/memory-fs": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz",
@@ -18659,6 +18687,26 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-select": {
+      "version": "5.8.0",
+      "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.8.0.tgz",
+      "integrity": "sha512-TfjLDo58XrhP6VG5M/Mi56Us0Yt8X7xD6cDybC7yoRMUNm7BGO7qk8J0TLQOua/prb8vUOtsfnXZwfm30HGsAA==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.0",
+        "@emotion/cache": "^11.4.0",
+        "@emotion/react": "^11.8.1",
+        "@floating-ui/dom": "^1.0.1",
+        "@types/react-transition-group": "^4.4.0",
+        "memoize-one": "^6.0.0",
+        "prop-types": "^15.6.0",
+        "react-transition-group": "^4.3.0",
+        "use-isomorphic-layout-effect": "^1.1.2"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-shallow-renderer": {
       "version": "16.15.0",
       "resolved": "https://registry.npmjs.org/react-shallow-renderer/-/react-shallow-renderer-16.15.0.tgz",
@@ -22103,6 +22151,19 @@
         }
       }
     },
+    "node_modules/use-isomorphic-layout-effect": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz",
+      "integrity": "sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/use-sidecar": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz",
@@ -25619,6 +25680,28 @@
         }
       }
     },
+    "@floating-ui/core": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.2.tgz",
+      "integrity": "sha512-+2XpQV9LLZeanU4ZevzRnGFg2neDeKHgFLjP6YLW+tly0IvrhqT4u8enLGjLH3qeh85g19xY5rsAusfwTdn5lg==",
+      "requires": {
+        "@floating-ui/utils": "^0.2.0"
+      }
+    },
+    "@floating-ui/dom": {
+      "version": "1.6.5",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.5.tgz",
+      "integrity": "sha512-Nsdud2X65Dz+1RHjAIP0t8z5e2ff/IRbei6BqFrl1urT8sDVzM1HMQ+R0XcU5ceRfyO3I6ayeqIfh+6Wb8LGTw==",
+      "requires": {
+        "@floating-ui/core": "^1.0.0",
+        "@floating-ui/utils": "^0.2.0"
+      }
+    },
+    "@floating-ui/utils": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.2.tgz",
+      "integrity": "sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw=="
+    },
     "@graphql-typed-document-node/core": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@graphql-typed-document-node/core/-/core-3.1.0.tgz",
@@ -34065,6 +34148,11 @@
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
       "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g="
     },
+    "memoize-one": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
+      "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
+    },
     "memory-fs": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz",
@@ -37048,6 +37136,22 @@
         }
       }
     },
+    "react-select": {
+      "version": "5.8.0",
+      "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.8.0.tgz",
+      "integrity": "sha512-TfjLDo58XrhP6VG5M/Mi56Us0Yt8X7xD6cDybC7yoRMUNm7BGO7qk8J0TLQOua/prb8vUOtsfnXZwfm30HGsAA==",
+      "requires": {
+        "@babel/runtime": "^7.12.0",
+        "@emotion/cache": "^11.4.0",
+        "@emotion/react": "^11.8.1",
+        "@floating-ui/dom": "^1.0.1",
+        "@types/react-transition-group": "^4.4.0",
+        "memoize-one": "^6.0.0",
+        "prop-types": "^15.6.0",
+        "react-transition-group": "^4.3.0",
+        "use-isomorphic-layout-effect": "^1.1.2"
+      }
+    },
     "react-shallow-renderer": {
       "version": "16.15.0",
       "resolved": "https://registry.npmjs.org/react-shallow-renderer/-/react-shallow-renderer-16.15.0.tgz",
@@ -39511,6 +39615,12 @@
         "tslib": "^2.0.0"
       }
     },
+    "use-isomorphic-layout-effect": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz",
+      "integrity": "sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==",
+      "requires": {}
+    },
     "use-sidecar": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 7530e2b..b14c92b 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -37,6 +37,7 @@
     "react-jsonschema-form": "^1.8.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.2",
+    "react-select": "^5.8.0",
     "react-table": "^7.7.0",
     "typescript": "^4.1.2",
     "web-vitals": "^1.0.1"
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 932ffb4..438dd2f 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -13,6 +13,7 @@ import SimpleEntityDisplayPage from "./components/pages/SimpleEntityDisplayPage"
 import NotFound from "./components/pages/NotFound";
 import UpdatePage from "./components/pages/UpdatePage";
 import SimpleEntityUpdatePage from "./components/pages/SimpleEntityUpdatePage";
+import DashboardPage from "./components/pages/DashboardPage";
 import * as Routes from "./constants/Routes";
 import AUTHENTICATED_USER_KEY from "./constants/AuthConstants";
 import AuthContext from "./contexts/AuthContext";
@@ -57,6 +58,8 @@ const App = (): React.ReactElement => {
               <Switch>
                 <Route exact path={Routes.LOGIN_PAGE} component={Login} />
                 <Route exact path={Routes.SIGNUP_PAGE} component={Signup} />
+                {/* TODO: Move to private route eventually */}
+                <Route exact path={Routes.DASHBOARD_PAGE} component ={DashboardPage} />
                 <PrivateRoute exact path={Routes.HOME_PAGE} component={Default} />
                 <PrivateRoute
                   exact
diff --git a/frontend/src/components/auth/Login.tsx b/frontend/src/components/auth/Login.tsx
index f6408eb..8f3551f 100644
--- a/frontend/src/components/auth/Login.tsx
+++ b/frontend/src/components/auth/Login.tsx
@@ -10,8 +10,6 @@ import authAPIClient from "../../APIClients/AuthAPIClient";
 import { HOME_PAGE, SIGNUP_PAGE } from "../../constants/Routes";
 import AuthContext from "../../contexts/AuthContext";
 import { AuthenticatedUser } from "../../types/AuthTypes";
-import DonationsTable from "../common/DonationsTable";
-import donationsData from '../../constants/donationsDataSample'; // For testing purposes
 
 type GoogleResponse = GoogleLoginResponse | GoogleLoginResponseOffline;
 
@@ -46,13 +44,6 @@ const Login = (): React.ReactElement => {
     return <Redirect to={HOME_PAGE} />;
   }
 
-  // For testing purposes
-  const filter = {
-    causes: [],//empty array will include all causes
-    frequencies: ["Monthly", "One-time"], //if not empty, only donations with these frequencies will be included
-    years: []
-};
-
   return (
     <div style={{ textAlign: "center" }}>
       <h1>Login</h1>
@@ -108,8 +99,6 @@ const Login = (): React.ReactElement => {
           Sign Up
         </button>
       </div>
-      {/* For testing purposes */}
-      <DonationsTable filter={filter} data={donationsData}/>
     </div>
   );
 };
diff --git a/frontend/src/components/common/DonationsTable.tsx b/frontend/src/components/common/DonationsTable.tsx
index 2e8154b..096f865 100644
--- a/frontend/src/components/common/DonationsTable.tsx
+++ b/frontend/src/components/common/DonationsTable.tsx
@@ -12,27 +12,25 @@ import {
     Box,
 } from '@chakra-ui/react'
 
-type Donation = {
+interface Donation {
     Cause: string;
-    Date: string;
-    Time: string;
+    Date: Date;
     Amount: number;
     Frequency: string;
-};
+}
 
-type Filter = {
+interface Filter {
     causes?: string[];
     frequencies?: string[];
     years?: string[];
-};
+}
 
-type DonationsTableProps = {
+interface DonationsTableProps {
     filter: Filter;
     data: Donation[];
 }
 
 const DonationsTable: React.FC<DonationsTableProps> = ({ filter, data }) => {
-
     const filterData = () => {
         return data.filter(donation => {
             return (!filter.causes || filter.causes.length === 0 || filter.causes.includes(donation.Cause)) &&
@@ -48,31 +46,29 @@ const DonationsTable: React.FC<DonationsTableProps> = ({ filter, data }) => {
         // @ts-ignore
         <TableContainer>
             <Box border='1px' borderColor='gray.200' borderRadius="xl" overflow="hidden">
-            <Table variant='striped' colorScheme='gray'>
-                <TableCaption>Donations</TableCaption>
-                <Thead>
-                    <Tr bgColor='#fadbe7'>
-                        <Th textAlign="left" textTransform="none">Cause</Th>
-                        <Th textAlign="left" textTransform="none">Date</Th>
-                        <Th textAlign="left" textTransform="none">Time</Th>
-                        <Th textAlign="left" textTransform="none">Amount</Th>
-                        <Th textAlign="left" textTransform="none">Frequency</Th>
-                        <Th />
-                    </Tr>
-                </Thead>
-                <Tbody>
-                    {filteredData.map((donation, index) => (
-                        <Tr key={index}>
-                            <Td>{donation.Cause}</Td>
-                            <Td>{donation.Date}</Td>
-                            <Td>{donation.Time}</Td>
-                            <Td>{donation.Amount}</Td>
-                            <Td>{donation.Frequency}</Td>
-                            <Td/>
+                <Table variant='striped' colorScheme='gray'>
+                    <TableCaption>Donations</TableCaption>
+                    <Thead>
+                        <Tr bgColor='#fadbe7'>
+                            <Th textAlign="left" textTransform="none">Cause</Th>
+                            <Th textAlign="left" textTransform="none">Date</Th>
+                            <Th textAlign="left" textTransform="none">Time</Th>
+                            <Th textAlign="left" textTransform="none">Amount</Th>
+                            <Th textAlign="left" textTransform="none">Frequency</Th>
                         </Tr>
-                    ))}
-                </Tbody>
-            </Table>
+                    </Thead>
+                    <Tbody>
+                        {filteredData.map((donation, index) => (
+                            <Tr key={index}>
+                                <Td>{donation.Cause}</Td>
+                                <Td>{donation.Date.toLocaleDateString()}</Td>
+                                <Td>{donation.Date.toLocaleDateString()}</Td>
+                                <Td>{donation.Amount}</Td>
+                                <Td>{donation.Frequency}</Td>
+                            </Tr>
+                        ))}
+                    </Tbody>
+                </Table>
             </Box>
         </TableContainer>
     );
diff --git a/frontend/src/components/common/FilterDropdown.tsx b/frontend/src/components/common/FilterDropdown.tsx
new file mode 100644
index 0000000..5530eb2
--- /dev/null
+++ b/frontend/src/components/common/FilterDropdown.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import Select from 'react-select';
+import {
+  FormControl,
+  FormLabel,
+} from '@chakra-ui/react';
+
+interface FilterDropdownProps {
+  label: string;
+  options: { value: string; label: string }[];
+  selectedOptions: { value: string; label: string }[];
+  onChange: (selectedOptions: { value: string; label: string }[]) => void;
+  isMulti?: boolean;
+}
+
+const FilterDropdown: React.FC<FilterDropdownProps> = ({
+  label,
+  options,
+  selectedOptions,
+  onChange,
+  isMulti = false,
+}) => {
+  const handleChange = (selected: any) => {
+    onChange(selected || []);
+  };
+
+  return (
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    <FormControl>
+      <FormLabel>{label}</FormLabel>
+      <Select
+        isMulti={isMulti}
+        options={options}
+        value={selectedOptions}
+        onChange={handleChange}
+        placeholder={`Select ${label.toLowerCase()}`}
+      />
+    </FormControl>
+  );
+};
+
+export default FilterDropdown;
diff --git a/frontend/src/components/pages/DashboardPage.tsx b/frontend/src/components/pages/DashboardPage.tsx
new file mode 100644
index 0000000..efc919d
--- /dev/null
+++ b/frontend/src/components/pages/DashboardPage.tsx
@@ -0,0 +1,96 @@
+import React, { useState } from 'react';
+import { Flex } from '@chakra-ui/react';
+import DonationsTable from "../common/DonationsTable";
+import FilterDropdown from "../common/FilterDropdown";
+import donationsData from '../../constants/donationsDataSample'; // For testing purposes
+
+// For testing purposes
+// const filter = {
+//     causes: [], // empty array will include all causes
+//     frequencies: ["Monthly", "One-time"], // if not empty, only donations with these frequencies will be included
+//     years: []
+// };
+
+// Assuming this is how the data will be structured
+interface Donation {
+    Cause: string;
+    Date: Date // bad to use object type
+    Amount: number;
+    Frequency: string;
+}
+
+interface Filter {
+    causes: string[];
+    frequencies: string[];
+    years: string[];
+}
+
+
+// Helper functions
+const getUniqueOptions = (data: any[], key: string) => {
+    const uniqueValues = Array.from(new Set(data.map(item => item[key])));
+    return uniqueValues.map(value => ({ label: value, value }));
+};
+
+const getUniqueYearOptions = (data: any[], key: string) => {
+    const uniqueYears = Array.from(new Set(data.map(item => new Date(item[key]).getFullYear())));
+    return uniqueYears.map(year => ({ label: year.toString(), value: year.toString() }));
+};
+
+
+const DashboardPage = (): React.ReactElement => {
+    const [filter, setFilter] = useState<Filter>({
+        causes: [],
+        frequencies: [],
+        years: []
+    });
+
+    // Generate filter options from data
+    const causeOptions = getUniqueOptions(donationsData, 'Cause');
+    const frequencyOptions = getUniqueOptions(donationsData, 'Frequency');
+    const yearOptions = getUniqueYearOptions(donationsData, 'Date');
+
+    const handleFilterChange = (type: keyof Filter) => (selected: { value: string; label: string }[] | { value: string; label: string } | null) => {
+        const selectedValues = Array.isArray(selected) ? selected.map(option => option.value) : selected?.value;
+        setFilter(prev => ({ ...prev, [type]: selectedValues }));
+      };
+
+    // Function to map string values back to objects for the selectedOptions prop
+    const mapSelectedOptions = (selectedValues: string[], options: { label: string, value: string }[]) => {
+        return options.filter(option => selectedValues.includes(option.value));
+    };
+
+    return (
+        <div>
+            <h1>Dashboard</h1>
+            {/* // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore */}
+            <Flex direction="row" justify="space-between">
+                <FilterDropdown
+                    label="Causes"
+                    options={causeOptions}
+                    selectedOptions={mapSelectedOptions(filter.causes, causeOptions)}
+                    onChange={handleFilterChange('causes')}
+                    isMulti
+                />
+                <FilterDropdown
+                    label="Frequencies"
+                    options={frequencyOptions}
+                    selectedOptions={mapSelectedOptions(filter.frequencies, frequencyOptions)}
+                    onChange={handleFilterChange('frequencies')}
+                    isMulti
+                />
+                <FilterDropdown
+                    label="Years"
+                    options={yearOptions}
+                    selectedOptions={mapSelectedOptions(filter.years, yearOptions)}
+                    onChange={handleFilterChange('years')}
+                    isMulti={false}
+                />
+            </Flex>
+            <DonationsTable filter={filter} data={donationsData} />
+        </div>
+    );
+};
+
+export default DashboardPage;
\ No newline at end of file
diff --git a/frontend/src/constants/Routes.ts b/frontend/src/constants/Routes.ts
index e13be69..cd8a266 100644
--- a/frontend/src/constants/Routes.ts
+++ b/frontend/src/constants/Routes.ts
@@ -19,3 +19,5 @@ export const CREATE_SIMPLE_ENTITY_PAGE = "/simpleEntity/create";
 export const UPDATE_SIMPLE_ENTITY_PAGE = "/simpleEntity/update";
 
 export const HOOKS_PAGE = "/hooks";
+
+export const DASHBOARD_PAGE = "/dashboard";
diff --git a/frontend/src/constants/donationsDataSample.ts b/frontend/src/constants/donationsDataSample.ts
index b0f841f..9141449 100644
--- a/frontend/src/constants/donationsDataSample.ts
+++ b/frontend/src/constants/donationsDataSample.ts
@@ -1,74 +1,64 @@
 const donationsData = [
     {
         Cause: "Fighting Child Poverty",
-        Date: "2024-01-15",
-        Time: "12:00",
+        Date: new Date("2024-01-15T12:00"),
         Amount: 150,
         Frequency: "Monthly"
     },
     {
         Cause: "Fighting Child Poverty",
-        Date: "2024-02-15",
-        Time: "12:00",
+        Date: new Date("2024-02-15T12:00"),
         Amount: 150,
         Frequency: "Monthly"
     },
     {
         Cause: "Restoring the Environment",
-        Date: "2024-03-22",
-        Time: "15:30",
+        Date: new Date("2024-03-22T15:30"),
         Amount: 200,
         Frequency: "One-time"
     },
     {
         Cause: "Malaria Prevention",
-        Date: "2024-05-18",
-        Time: "09:45",
+        Date: new Date("2024-05-18T09:45"),
         Amount: 300,
         Frequency: "Yearly"
     },
     {
         Cause: "Healthcare Support",
-        Date: "2024-04-20",
-        Time: "11:00",
+        Date: new Date("2024-04-20T11:00"),
         Amount: 250,
         Frequency: "One-time"
     },
     {
         Cause: "Education for All",
-        Date: "2024-07-29",
-        Time: "10:00",
+        Date: new Date("2024-07-29T10:00"),
         Amount: 100,
         Frequency: "Monthly"
     },
     {
         Cause: "Animal Welfare",
-        Date: "2024-08-05",
-        Time: "16:15",
+        Date: new Date("2024-08-05T16:15"),
         Amount: 75,
         Frequency: "Monthly"
     },
     {
         Cause: "Water Access",
-        Date: "2024-12-12",
-        Time: "13:20",
+        Date: new Date("2024-12-12T13:20"),
         Amount: 180,
         Frequency: "One-time"
     },
     {
         Cause: "Climate Change Action",
-        Date: "2024-11-30",
-        Time: "14:00",
+        Date: new Date("2024-11-30T14:00"),
         Amount: 300,
         Frequency: "Monthly"
     },
     {
         Cause: "Disaster Relief",
-        Date: "2024-10-16",
-        Time: "09:00",
+        Date: new Date("2024-10-16T09:00"),
         Amount: 500,
         Frequency: "Yearly"
     }
 ];
 
-export default donationsData;
+export default donationsData;
\ No newline at end of file