diff --git a/src/components/Admin/AdminMemberCard.tsx b/src/components/Admin/AdminMemberCard.tsx
new file mode 100644
index 0000000..14f32ce
--- /dev/null
+++ b/src/components/Admin/AdminMemberCard.tsx
@@ -0,0 +1,229 @@
+import { color, h2_, h4, h6, h6_, titleColor } from '@/constants';
+import { Backdrop, Box, Typography, Button, Modal, TextField, useMediaQuery } from '@mui/material';
+import { useState } from 'react';
+import { MemberDatatype } from '@/data/members';
+
+interface AdminMemberCardProps {
+  adminName: string;
+  adminRole: string;
+  adminDescription: string;
+  adminThumbnail: string;
+  onDelete: () => void;
+  onEdit: (updatedAdmin: Partial<MemberDatatype>) => void;
+}
+
+const AdminMemberCard = ({
+  adminName,
+  adminRole,
+  adminDescription,
+  adminThumbnail,
+  onDelete,
+  onEdit,
+}: AdminMemberCardProps) => {
+  const breakPoint = useMediaQuery('(min-width:600px)');
+  const [isClicked, setIsClicked] = useState(false);
+  const [mouseOver, setMouseOver] = useState(false);
+  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+
+  // Temporary state for editing. These keys are temporary.
+  const [editedAdmin, setEditedAdmin] = useState({
+    name: adminName,
+    role: adminRole,
+    thumbnail: '', // This will map to memberImage
+    description: adminDescription,
+  });
+
+  function handleClick() {
+    setIsClicked(!isClicked);
+  }
+
+  function handleEditSave() {
+    // Map the temporary keys to MemberDatatype keys
+    onEdit({
+      memberName: editedAdmin.name,
+      memberRole: editedAdmin.role,
+      memberImage: editedAdmin.thumbnail, // if thumbnail is provided, it updates memberImage
+      memberQuote: editedAdmin.description,
+    });
+    setIsEditModalOpen(false);
+  }
+
+  return (
+    <>
+      <Box
+        display="flex"
+        flexDirection="column"
+        width="auto"
+        minHeight="91px"
+        sx={{
+          borderStyle: 'solid',
+          borderColor: mouseOver ? titleColor : color,
+          borderWidth: '0.5px',
+          borderRadius: '4px',
+          cursor: 'pointer',
+          transition: 'border-color 0.3s',
+        }}
+        alignItems="center"
+        justifyContent="space-evenly"
+        onClick={handleClick}
+        onMouseEnter={() => setMouseOver(true)}
+        onMouseLeave={() => setMouseOver(false)}
+      >
+        <Backdrop
+          sx={{
+            color: '#fff',
+            zIndex: (theme) => theme.zIndex.drawer + 2,
+            backgroundColor: 'black',
+            display: 'flex',
+            fontSize: '30px',
+            padding: '20px',
+            flexDirection: breakPoint ? 'row' : 'column',
+            gap: '20px',
+          }}
+          open={isClicked}
+        >
+          <Box
+            height={breakPoint ? '100%' : '55%'}
+            width={breakPoint ? '55%' : '100%'}
+            display="flex"
+            justifyContent="center"
+            alignItems="center"
+          >
+            <Box width="70%" height="auto">
+              <Typography
+                variant="h1"
+                fontSize={breakPoint ? h2_ : h4}
+                fontWeight="bolder"
+                color={titleColor}
+                mb="25px"
+                position="relative"
+              >
+                {adminName}
+              </Typography>
+              <Typography
+                variant="h3"
+                fontSize={breakPoint ? h6 : h6_}
+                mb="25px"
+                fontStyle="italic"
+                color={color}
+              >
+                {adminRole}
+              </Typography>
+              <Typography
+                variant="h3"
+                fontSize={breakPoint ? h6 : h6_}
+                lineHeight={1.5}
+                color={color}
+                mb="25px"
+              >
+                {adminDescription}
+              </Typography>
+            </Box>
+          </Box>
+          <Box
+            height={breakPoint ? '100%' : '45%'}
+            width={breakPoint ? '45%' : '100%'}
+          >
+            <img
+              src={adminThumbnail}
+              alt="admin image"
+              style={{
+                objectFit: 'cover',
+                height: '100%',
+                width: '100%',
+                borderRadius: '10px',
+              }}
+            />
+          </Box>
+        </Backdrop>
+        <Typography fontSize={breakPoint ? h6 : h6_} color={color}>
+          {adminName}
+        </Typography>
+        <Typography
+          variant="h4"
+          fontSize={breakPoint ? h6 : h6_}
+          fontStyle="italic"
+          color={titleColor}
+        >
+          {adminRole}
+        </Typography>
+
+        <Box display="flex" justifyContent="space-evenly" width="100%" mt="auto" p={1}>
+          <Button variant="contained" color="primary" onClick={() => setIsEditModalOpen(true)}>
+            Edit
+          </Button>
+          <Button variant="outlined" color="secondary" onClick={onDelete}>
+            Delete
+          </Button>
+        </Box>
+      </Box>
+
+      <Modal open={isEditModalOpen} onClose={() => setIsEditModalOpen(false)}>
+        <Box
+          sx={{
+            position: 'absolute',
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)',
+            width: 400,
+            bgcolor: 'white',
+            color: 'black',
+            p: 4,
+            borderRadius: 2,
+            boxShadow: 24,
+          }}
+        >
+          <Typography variant="h6" mb={2}>
+            Edit Admin
+          </Typography>
+          <TextField
+            fullWidth
+            label="Name"
+            value={editedAdmin.name}
+            onChange={(e) =>
+              setEditedAdmin((prev) => ({ ...prev, name: e.target.value }))
+            }
+            margin="normal"
+          />
+          <TextField
+            fullWidth
+            label="Role"
+            value={editedAdmin.role}
+            onChange={(e) =>
+              setEditedAdmin((prev) => ({ ...prev, role: e.target.value }))
+            }
+            margin="normal"
+          />
+          <TextField
+            fullWidth
+            label="Image URL"
+            value={editedAdmin.thumbnail}
+            onChange={(e) =>
+              setEditedAdmin((prev) => ({ ...prev, thumbnail: e.target.value }))
+            }
+            margin="normal"
+          />
+          <TextField
+            fullWidth
+            label="Description"
+            value={editedAdmin.description}
+            onChange={(e) =>
+              setEditedAdmin((prev) => ({ ...prev, description: e.target.value }))
+            }
+            margin="normal"
+          />
+          <Box mt={2} display="flex" justifyContent="space-between">
+            <Button variant="contained" color="primary" onClick={handleEditSave}>
+              Save
+            </Button>
+            <Button variant="outlined" onClick={() => setIsEditModalOpen(false)}>
+              Cancel
+            </Button>
+          </Box>
+        </Box>
+      </Modal>
+    </>
+  );
+};
+
+export default AdminMemberCard;
diff --git a/src/components/Member/MemberCard.tsx b/src/components/Member/MemberCard.tsx
index d38380c..14dcf7d 100644
--- a/src/components/Member/MemberCard.tsx
+++ b/src/components/Member/MemberCard.tsx
@@ -131,3 +131,400 @@ const MemberCard = ({
 };
 
 export default MemberCard;
+
+// import { color, h2_, h4, h6, h6_, titleColor } from '@/constants';
+// import { Backdrop, Box, Typography, Button, Modal, TextField, useMediaQuery } from '@mui/material';
+// import { useState } from 'react';
+
+// interface MemberCardProps {
+//     memberName: string;
+//     memberRole: string;
+//     memberThumbnail: string;
+//     memberDescription: string;
+//     key: number;
+// }
+
+// const MemberCard = ({
+//     memberName,
+//     memberRole,
+//     memberThumbnail,
+//     memberDescription,
+// }: MemberCardProps) => {
+//     const breakPoint = useMediaQuery('(min-width:600px)');
+//     const [isClicked, setIsClicked] = useState(false);
+//     const [mouseOver, setMouseOver] = useState(false);
+//     const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+//     const [editedMember, setEditedMember] = useState({
+//         name: memberName,
+//         role: memberRole,
+//         thumbnail: memberThumbnail,
+//         description: memberDescription,
+//     });
+
+//     function handleClick() {
+//         setIsClicked(!isClicked);
+//     }
+
+//     return (
+//         <>
+//             <Box
+//                 display="flex"
+//                 flexDirection="column"
+//                 width="auto"
+//                 minHeight="91px"
+//                 sx={{
+//                     borderStyle: 'solid',
+//                     borderColor: mouseOver ? titleColor : color,
+//                     borderWidth: '0.5px',
+//                     borderRadius: '4px',
+//                     cursor: 'pointer',
+//                     transition: 'border-color 0.3s',
+//                 }}
+//                 alignItems="center"
+//                 justifyContent="space-evenly"
+//                 onClick={handleClick}
+//                 onMouseEnter={() => setMouseOver(true)}
+//                 onMouseLeave={() => setMouseOver(false)}
+//             >
+//                 <Backdrop
+//                     sx={{
+//                         color: '#fff',
+//                         zIndex: (theme) => theme.zIndex.drawer + 2,
+//                         backgroundColor: 'black',
+//                         display: 'flex',
+//                         fontSize: '30px',
+//                         padding: '20px',
+//                         flexDirection: breakPoint ? 'row' : 'column',
+//                         gap: '20px',
+//                     }}
+//                     className="closeIconCursor"
+//                     open={isClicked}
+//                 >
+//                     <Box
+//                         height={breakPoint ? '100%' : '55%'}
+//                         width={breakPoint ? '55%' : '100%'}
+//                         display="flex"
+//                         justifyContent="center"
+//                         alignItems="center"
+//                     >
+//                         <Box width="70%" height="auto">
+//                             <Typography
+//                                 variant="h1"
+//                                 fontSize={breakPoint ? h2_ : h4}
+//                                 fontWeight="bolder"
+//                                 color={titleColor}
+//                                 mb="25px"
+//                                 position="relative"
+//                             >
+//                                 {memberName}
+//                             </Typography>
+
+//                             <Typography
+//                                 variant="h3"
+//                                 fontSize={breakPoint ? h6 : h6_}
+//                                 mb="25px"
+//                                 fontStyle="italic"
+//                                 color={color}
+//                             >
+//                                 {memberRole}
+//                             </Typography>
+
+//                             <Typography
+//                                 variant="h3"
+//                                 fontSize={breakPoint ? h6 : h6_}
+//                                 lineHeight={1.5}
+//                                 color={color}
+//                                 mb="25px"
+//                             >
+//                                 {memberDescription}
+//                             </Typography>
+//                         </Box>
+//                     </Box>
+//                     <Box
+//                         height={breakPoint ? '100%' : '45%'}
+//                         width={breakPoint ? '45%' : '100%'}
+//                     >
+//                         <img
+//                             src={memberThumbnail}
+//                             alt="drone image"
+//                             style={{
+//                                 objectFit: 'cover',
+//                                 height: '100%',
+//                                 width: '100%',
+//                                 borderRadius: '10px',
+//                             }}
+//                         />
+//                     </Box>
+//                 </Backdrop>
+//                 <Typography fontSize={breakPoint ? h6 : h6_} color={color}>
+//                     {memberName}
+//                 </Typography>
+//                 <Typography
+//                     variant="h4"
+//                     fontSize={breakPoint ? h6 : h6_}
+//                     fontStyle="italic"
+//                     color={titleColor}
+//                 >
+//                     {memberRole}
+//                 </Typography>
+
+//                 {/* Edit and Delete buttons placed at the bottom */}
+//                 <Box
+//                     display="flex"
+//                     justifyContent="space-evenly"
+//                     width="100%"
+//                     mt="auto"
+//                     p={1}
+//                 >
+//                 </Box>
+//             </Box>
+//         </>
+//     );
+// };
+
+// export default MemberCard;
+
+
+
+// // import { color, h2_, h4, h6, h6_, titleColor } from '@/constants';
+// // import { Backdrop, Box, Typography, Button, TextField, useMediaQuery } from '@mui/material';
+// // import { useState } from 'react';
+
+// // interface MemberCardProps {
+// //     memberName: string;
+// //     memberRole: string;
+// //     memberThumbnail: string;
+// //     memberDescription: string;
+// //     key: number;
+// //     onEdit: (updatedMember: any) => void;
+// //     onDelete: () => void;
+// // }
+
+// // const MemberCard = ({
+// //     memberName,
+// //     memberRole,
+// //     memberThumbnail,
+// //     memberDescription,
+// //     onEdit,
+// //     onDelete,
+// // }: MemberCardProps) => {
+// //     const breakPoint = useMediaQuery('(min-width:600px)');
+// //     const [isClicked, setIsClicked] = useState(false);
+// //     const [mouseOver, setMouseOver] = useState(false);
+// //     const [isEditing, setIsEditing] = useState(false);
+// //     const [editData, setEditData] = useState({
+// //         memberName,
+// //         memberRole,
+// //         memberThumbnail,
+// //         memberDescription,
+// //     });
+
+// //     const handleClick = () => {
+// //         setIsClicked(!isClicked);
+// //     };
+
+// //     const handleEditClick = () => {
+// //         setIsEditing(true);
+// //     };
+
+// //     const handleSaveClick = () => {
+// //         onEdit(editData);  // Update the member details
+// //         setIsEditing(false);
+// //     };
+
+// //     const handleCancelClick = () => {
+// //         setEditData({
+// //             memberName,
+// //             memberRole,
+// //             memberThumbnail,
+// //             memberDescription,
+// //         });
+// //         setIsEditing(false);
+// //     };
+
+// //     const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+// //         setEditData({
+// //             ...editData,
+// //             [e.target.name]: e.target.value,
+// //         });
+// //     };
+
+// //     return (
+// //         <>
+// //             <Box
+// //                 display="flex"
+// //                 width="auto"
+// //                 minHeight="91px"
+// //                 sx={{
+// //                     borderStyle: 'solid',
+// //                     borderColor: mouseOver ? titleColor : color,
+// //                     borderWidth: '0.5px',
+// //                     borderRadius: '4px',
+// //                     cursor: 'pointer',
+// //                     transition: 'border-color 0.3s',
+// //                 }}
+// //                 alignItems="center"
+// //                 justifyContent="space-evenly"
+// //                 onClick={handleClick}
+// //                 onMouseEnter={() => setMouseOver(true)}
+// //                 onMouseLeave={() => setMouseOver(false)}
+// //             >
+// //                 <Box display="flex" flexDirection="column" alignItems="center" gap="8px">
+// //                     <Typography fontSize={breakPoint ? h6 : h6_} color={color}>
+// //                         {memberName}
+// //                     </Typography>
+// //                     <Typography
+// //                         variant="h4"
+// //                         fontSize={breakPoint ? h6 : h6_}
+// //                         fontStyle="italic"
+// //                         color={titleColor}
+// //                     >
+// //                         {memberRole}
+// //                     </Typography>
+// //                     <Box display="flex" gap="16px">
+// //                         <Button
+// //                             onClick={handleEditClick}
+// //                             variant="outlined"
+// //                             color="primary"
+// //                             sx={{
+// //                                 color: 'white',
+// //                                 borderColor: 'white',
+// //                             }}
+// //                         >
+// //                             Edit
+// //                         </Button>
+// //                         <Button onClick={onDelete} variant="outlined" color="secondary">
+// //                             Delete
+// //                         </Button>
+// //                     </Box>
+// //                 </Box>
+// //                 <img
+// //                     src={memberThumbnail}
+// //                     alt="drone image"
+// //                     style={{
+// //                         objectFit: 'cover',
+// //                         height: '100%',
+// //                         width: '100%',
+// //                         borderRadius: '10px',
+// //                     }}
+// //                 />
+// //             </Box>
+
+// //             {/* Editable Form Overlay */}
+// //             {isEditing && (
+// //                 <Backdrop
+// //                     open={isEditing}
+// //                     sx={{
+// //                         color: '#fff',
+// //                         zIndex: (theme) => theme.zIndex.drawer + 2,
+// //                         backgroundColor: 'rgba(0, 0, 0, 0.5)',  // Blurred background
+// //                         display: 'flex',
+// //                         justifyContent: 'center',
+// //                         alignItems: 'center',
+// //                     }}
+// //                 >
+// //                     <Box
+// //                         display="flex"
+// //                         flexDirection="column"
+// //                         alignItems="center"
+// //                         gap="20px"
+// //                         sx={{
+// //                             backgroundColor: 'white',  // White background for the form
+// //                             padding: '20px',
+// //                             borderRadius: '10px',
+// //                             boxShadow: '0px 0px 15px rgba(0, 0, 0, 0.5)',
+// //                             maxWidth: '400px',
+// //                             width: '100%',
+// //                         }}
+// //                     >
+// //                         <Typography variant="h4" color="black" fontWeight="bold">
+// //                             Edit Member Information
+// //                         </Typography>
+
+// //                         <TextField
+// //                             name="memberName"
+// //                             label="Name"
+// //                             value={editData.memberName}
+// //                             onChange={handleInputChange}
+// //                             fullWidth
+// //                             sx={{
+// //                                 input: { color: 'black' },
+// //                                 label: { color: 'black' },
+// //                                 fieldset: { borderColor: 'black' },
+// //                             }}
+// //                         />
+// //                         <TextField
+// //                             name="memberRole"
+// //                             label="Role"
+// //                             value={editData.memberRole}
+// //                             onChange={handleInputChange}
+// //                             fullWidth
+// //                             sx={{
+// //                                 input: { color: 'black' },
+// //                                 label: { color: 'black' },
+// //                                 fieldset: { borderColor: 'black' },
+// //                             }}
+// //                         />
+// //                         <TextField
+// //                             name="memberThumbnail"
+// //                             label="Thumbnail URL"
+// //                             value={editData.memberThumbnail}
+// //                             onChange={handleInputChange}
+// //                             fullWidth
+// //                             sx={{
+// //                                 input: { color: 'black' },
+// //                                 label: { color: 'black' },
+// //                                 fieldset: { borderColor: 'black' },
+// //                             }}
+// //                         />
+// //                         <TextField
+// //                             name="memberDescription"
+// //                             label="Description"
+// //                             value={editData.memberDescription}
+// //                             onChange={handleInputChange}
+// //                             multiline
+// //                             rows={4}
+// //                             fullWidth
+// //                             sx={{
+// //                                 input: { color: 'black' },
+// //                                 label: { color: 'black' },
+// //                                 fieldset: { borderColor: 'black' },
+// //                             }}
+// //                         />
+
+// //                         <Box display="flex" gap="16px">
+// //                             <Button
+// //                                 onClick={handleSaveClick}
+// //                                 variant="contained"
+// //                                 color="primary"
+// //                                 sx={{
+// //                                     color: 'white', // White text color for button
+// //                                 }}
+// //                             >
+// //                                 Save
+// //                             </Button>
+// //                             <Button
+// //                                 onClick={handleCancelClick}
+// //                                 variant="outlined"
+// //                                 color="secondary"
+// //                                 sx={{
+// //                                     color: 'black', // Black text color for cancel
+// //                                     borderColor: 'black',
+// //                                 }}
+// //                             >
+// //                                 Cancel
+// //                             </Button>
+// //                         </Box>
+// //                     </Box>
+// //                 </Backdrop>
+// //             )}
+// //         </>
+// //     );
+// // };
+
+// // export default MemberCard;
+
+
+
+
+
diff --git a/src/components/Member/members.tsx b/src/components/Member/members.tsx
index a42b1fc..4e3b1cb 100644
--- a/src/components/Member/members.tsx
+++ b/src/components/Member/members.tsx
@@ -1,12 +1,45 @@
+import { useEffect, useState } from 'react';
 import MemberCard from '@/components/Member/MemberCard';
 import { color, h4, h5 } from '@/constants';
 import { Box, Typography, useMediaQuery } from '@mui/material';
-import MemberData from '@/data/members';
+import MemberData, { MemberDatatype } from '@/data/members';
+import { getDocs, getDocsFromCache, collection } from 'firebase/firestore';
+import { db } from '@/firebase';
 
 export default function Members() {
     const breakPoint = useMediaQuery('(min-width:600px)');
     const breakPoint2 = useMediaQuery('(min-width:750px)');
 
+    const [members, setMembers] = useState(MemberData);
+
+    useEffect(() => {
+        async function fetchMembers() {
+            const res = await getDocsFromCache(collection(db, 'members'));
+            if (!res.empty) {
+                const memberData = res.docs.map((doc) => doc.data() as MemberDatatype);
+                setMembers(memberData);
+            }
+            else {
+                const res = await getDocs(collection(db, 'members'));
+                if (!res.empty) {
+                    // const memberData = res.docs.map((doc) => doc.data() as MemberDatatype);
+                    const memberData = res.docs.map((doc) => {
+                        const data = doc.data()
+                        return {
+                            memberName: data.name,
+                            memberRole: data.role,
+                            memberQuote: data.quote,
+                            memberImage: data.image
+                        } as MemberDatatype
+                    });
+                    // console.log(memberData);
+                    setMembers(memberData);
+                }
+            }
+        }
+        fetchMembers();
+    }, []);
+
     return (
         <Box width="85%" marginX="auto">
             <Typography
@@ -25,16 +58,176 @@ export default function Members() {
                 }
                 justifyContent={breakPoint ? 'space-between' : 'center'}
             >
-                {MemberData.map((member, index) => (
+                {members.map((member, index) => (
                     <MemberCard
                         key={index}
                         memberName={member.memberName}
                         memberRole={member.memberRole}
                         memberDescription={member.memberQuote}
-                        memberThumbnail={`members/${member.memberName.toLowerCase()}.jpg`}
+                        memberThumbnail={member.memberImage}
                     />
                 ))}
             </Box>
         </Box>
     );
 }
+// src/pages/members.tsx
+
+// import MemberCard from '@/components/Member/MemberCard';
+// import { color, h4, h5 } from '@/constants';
+// import { Box, Typography, useMediaQuery, Button, Modal, TextField } from '@mui/material';
+// import MemberData from '@/data/members';
+// import { useState } from 'react';
+
+// export default function Members() {
+//     const breakPoint = useMediaQuery('(min-width:600px)');
+//     const breakPoint2 = useMediaQuery('(min-width:750px)');
+//     const [members, setMembers] = useState(MemberData);
+//     const [isAddModalOpen, setIsAddModalOpen] = useState(false);
+//     const [newMember, setNewMember] = useState({
+//         name: '',
+//         role: '',
+//         thumbnail: '',
+//         description: ''
+//     });
+
+//     // function handleDelete(index: number) {
+//     //     setMembers(members.filter((_, i) => i !== index));
+//     // }
+
+//     // function handleEdit(index: number, updatedMember: Partial<MemberCardProps>) {
+//     //     const updatedMembers = [...members];
+//     //     updatedMembers[index] = { ...updatedMembers[index], ...updatedMember };
+//     //     setMembers(updatedMembers);
+//     // }
+
+//     // function handleAddMember() {
+//     //     setMembers([
+//     //         ...members,
+//     //         {
+//     //             memberName: newMember.name,
+//     //             memberRole: newMember.role,
+//     //             memberThumbnail: newMember.thumbnail,
+//     //             memberQuote: newMember.description
+//     //         }
+//     //     ]);
+//     //     setIsAddModalOpen(false);
+//     //     setNewMember({ name: '', role: '', thumbnail: '', description: '' });
+//     // }
+
+//     return (
+//         <Box width="85%" marginX="auto">
+//             <Typography
+//                 variant="h2"
+//                 fontSize={breakPoint ? h4 : h5}
+//                 mb="35px"
+//                 color={color}
+//             >
+//                 Members
+//             </Typography>
+
+//             {/* Add Member Button */}
+//             {/* <Button
+//                 variant="contained"
+//                 color="primary"
+//                 onClick={() => setIsAddModalOpen(true)}
+//                 sx={{ mb: 3 }}
+//             >
+//                 Add Member
+//             </Button> */}
+
+//             <Box
+//                 display="grid"
+//                 gap="35px"
+//                 gridTemplateColumns={
+//                     breakPoint2 ? '30% 30% 30%' : breakPoint ? '45% 45%' : '80%'
+//                 }
+//                 justifyContent={breakPoint ? 'space-between' : 'center'}
+//             >
+//                 {members.map((member, index) => (
+//                     <MemberCard
+//                         key={index}
+//                         memberName={member.memberName}
+//                         memberRole={member.memberRole}
+//                         memberDescription={member.memberQuote}
+//                         memberThumbnail={`members/${member.memberName.toLowerCase()}.jpg`}
+//                     />
+//                     // onDelete={() => handleDelete(index)}
+//                     // onEdit={(updatedMember) => handleEdit(index, updatedMember)}
+//                 ))}
+//             </Box>
+
+//             {/* Add Member Modal */}
+//             <Modal open={isAddModalOpen} onClose={() => setIsAddModalOpen(false)}>
+//                 <Box
+//                     sx={{
+//                         position: 'absolute',
+//                         top: '50%',
+//                         left: '50%',
+//                         transform: 'translate(-50%, -50%)',
+//                         width: 400,
+//                         bgcolor: 'background.paper',
+//                         p: 4,
+//                         borderRadius: 2,
+//                         boxShadow: 24,
+//                     }}
+//                 >
+//                     <Typography variant="h6" mb={2}>
+//                         Add New Member
+//                     </Typography>
+//                     <TextField
+//                         fullWidth
+//                         label="Name"
+//                         value={newMember.name}
+//                         onChange={(e) =>
+//                             setNewMember((prev) => ({ ...prev, name: e.target.value }))
+//                         }
+//                         margin="normal"
+//                     />
+//                     <TextField
+//                         fullWidth
+//                         label="Role"
+//                         value={newMember.role}
+//                         onChange={(e) =>
+//                             setNewMember((prev) => ({ ...prev, role: e.target.value }))
+//                         }
+//                         margin="normal"
+//                     />
+//                     <TextField
+//                         fullWidth
+//                         label="Thumbnail URL"
+//                         value={newMember.thumbnail}
+//                         onChange={(e) =>
+//                             setNewMember((prev) => ({ ...prev, thumbnail: e.target.value }))
+//                         }
+//                         margin="normal"
+//                     />
+//                     <TextField
+//                         fullWidth
+//                         label="Description"
+//                         value={newMember.description}
+//                         onChange={(e) =>
+//                             setNewMember((prev) => ({ ...prev, description: e.target.value }))
+//                         }
+//                         margin="normal"
+//                     />
+//                     <Box mt={2} display="flex" justifyContent="space-between">
+//                         {/* <Button
+//                             variant="contained"
+//                             color="primary"
+//                             onClick={handleAddMember}
+//                         >
+//                             Add
+//                         </Button>
+//                         <Button
+//                             variant="outlined"
+//                             onClick={() => setIsAddModalOpen(false)}
+//                         >
+//                             Cancel
+//                         </Button> */}
+//                     </Box>
+//                 </Box>
+//             </Modal>
+//         </Box>
+//     );
+// }
diff --git a/src/data/members.ts b/src/data/members.ts
index 2dd3365..3fae6da 100644
--- a/src/data/members.ts
+++ b/src/data/members.ts
@@ -1,8 +1,8 @@
 export interface MemberDatatype {
+    docId?: string;
     memberName: string;
     memberRole: string;
     memberQuote: string;
-    memberYear?: string;
     memberImage?: string;
 }
 
diff --git a/src/pages/admin/members/index.tsx b/src/pages/admin/members/index.tsx
new file mode 100644
index 0000000..0e6f693
--- /dev/null
+++ b/src/pages/admin/members/index.tsx
@@ -0,0 +1,214 @@
+import { useState, useEffect } from 'react';
+import { Box, Typography, useMediaQuery, Button, Modal, TextField } from '@mui/material';
+import { color, h4, h5 } from '@/constants';
+import MemberData, { MemberDatatype } from '@/data/members';
+import AdminMemberCard from '@/components/Admin/AdminMemberCard';
+import { getDocs, getDocsFromCache, collection, addDoc, deleteDoc, doc, updateDoc } from 'firebase/firestore';
+import { db } from '@/firebase';
+
+
+export default function Members() {
+  const breakPoint = useMediaQuery('(min-width:600px)');
+  const breakPoint2 = useMediaQuery('(min-width:750px)');
+
+  const [members, setMembers] = useState<MemberDatatype[]>(MemberData);
+
+  useEffect(() => {
+    async function fetchMembers() {
+      const res = await getDocsFromCache(collection(db, 'members'));
+      if (!res.empty) {
+        const memberData = res.docs.map((doc) => ({
+          ...doc.data() as MemberDatatype,
+          docId: doc.id
+        }));
+        setMembers(memberData);
+      }
+      else {
+        const res = await getDocs(collection(db, 'members'));
+        if (!res.empty) {
+          const memberData = res.docs.map((doc) => {
+            const data = doc.data()
+            return {
+              docId: doc.id,
+              memberName: data.name,
+              memberRole: data.role,
+              memberQuote: data.quote,
+              memberImage: data.image
+            } as MemberDatatype
+          });
+          setMembers(memberData);
+        }
+      }
+    }
+    fetchMembers();
+  }, []);
+
+  const [isAddModalOpen, setIsAddModalOpen] = useState(false);
+  const [newMember, setNewMember] = useState({
+    memberName: '',
+    memberRole: '',
+    memberImage: '',
+    memberQuote: ''
+  });
+
+  async function handleDelete(docId: string) {
+    try {
+      await deleteDoc(doc(db, 'members', docId));
+      setMembers(members.filter((member) => member.docId !== docId));
+    } catch (error) {
+      console.error('Error deleting member:', error);
+    }
+  }
+
+  async function handleEdit(docId: string, updatedMember: Partial<MemberDatatype>) {
+    try {
+      const memberRef = doc(db, 'members', docId);
+      await updateDoc(memberRef, {
+        name: updatedMember.memberName,
+        role: updatedMember.memberRole,
+        quote: updatedMember.memberQuote,
+        image: updatedMember.memberImage
+      });
+      setMembers((prevMembers) =>
+        prevMembers.map((member) =>
+          member.docId === docId ? { ...member, ...updatedMember } : member
+        )
+      );
+    } catch (error) {
+      console.error('Error updating member:', error);
+    }
+  }
+
+  async function handleAddMember() {
+    try {
+      const membersRef = collection(db, 'members');
+      const docRef = await addDoc(membersRef, {
+        name: newMember.memberName,
+        role: newMember.memberRole,
+        quote: newMember.memberQuote,
+        image: newMember.memberImage
+      });
+      setMembers((prevMembers) => [
+        ...prevMembers,
+        {
+          docId: docRef.id,
+          memberName: newMember.memberName,
+          memberRole: newMember.memberRole,
+          memberImage: newMember.memberImage,
+          memberQuote: newMember.memberQuote
+        }
+      ]);
+      setIsAddModalOpen(false);
+      setNewMember({ memberName: '', memberRole: '', memberImage: '', memberQuote: '' });
+    } catch (error) {
+      console.error('Error adding member:', error);
+    }
+  }
+
+  return (
+    <Box sx={{ backgroundColor: 'black', minHeight: '100vh', py: 4, px: 2 }}>
+      <Box width="85%" marginX="auto">
+        <Typography variant="h2" fontSize={breakPoint ? h4 : h5} mb="35px" color="white">
+          Admin Members
+        </Typography>
+
+        {/* Add Member Button */}
+        <Button
+          variant="contained"
+          color="primary"
+          onClick={() => setIsAddModalOpen(true)}
+          sx={{ mb: 3 }}
+        >
+          Add Member
+        </Button>
+
+        <Box
+          display="grid"
+          gap="35px"
+          gridTemplateColumns={
+            breakPoint2 ? '30% 30% 30%' : breakPoint ? '45% 45%' : '80%'
+          }
+          justifyContent={breakPoint ? 'space-between' : 'center'}
+        >
+          {members.map((member) => (
+            <AdminMemberCard
+              key={member.docId}
+              adminName={member.memberName}
+              adminRole={member.memberRole}
+              adminDescription={member.memberQuote}
+              adminThumbnail={member.memberImage ? `members/${member.memberImage}.jpg` : ''}
+              onDelete={() => handleDelete(member.docId!)}
+              onEdit={(updatedMember) => handleEdit(member.docId!, updatedMember)}
+            />
+          ))}
+        </Box>
+
+        {/* Add Member Modal */}
+        <Modal open={isAddModalOpen} onClose={() => setIsAddModalOpen(false)}>
+          <Box
+            sx={{
+              position: 'absolute',
+              top: '50%',
+              left: '50%',
+              transform: 'translate(-50%, -50%)',
+              width: 400,
+              bgcolor: 'white',
+              color: 'black',
+              p: 4,
+              borderRadius: 2,
+              boxShadow: 24,
+            }}
+          >
+            <Typography variant="h6" mb={2}>
+              Add New Member
+            </Typography>
+            <TextField
+              fullWidth
+              label="Name"
+              value={newMember.memberName}
+              onChange={(e) =>
+                setNewMember((prev) => ({ ...prev, memberName: e.target.value }))
+              }
+              margin="normal"
+            />
+            <TextField
+              fullWidth
+              label="Role"
+              value={newMember.memberRole}
+              onChange={(e) =>
+                setNewMember((prev) => ({ ...prev, memberRole: e.target.value }))
+              }
+              margin="normal"
+            />
+            <TextField
+              fullWidth
+              label="Image Name"
+              value={newMember.memberImage}
+              onChange={(e) =>
+                setNewMember((prev) => ({ ...prev, memberImage: e.target.value }))
+              }
+              margin="normal"
+            />
+            <TextField
+              fullWidth
+              label="Quote"
+              value={newMember.memberQuote}
+              onChange={(e) =>
+                setNewMember((prev) => ({ ...prev, memberQuote: e.target.value }))
+              }
+              margin="normal"
+            />
+            <Box mt={2} display="flex" justifyContent="space-between">
+              <Button variant="contained" color="primary" onClick={handleAddMember}>
+                Add
+              </Button>
+              <Button variant="outlined" onClick={() => setIsAddModalOpen(false)}>
+                Cancel
+              </Button>
+            </Box>
+          </Box>
+        </Modal>
+      </Box>
+    </Box>
+  );
+}