diff --git a/Clients/src/presentation/pages/SettingsPage/Team/index.tsx b/Clients/src/presentation/pages/SettingsPage/Team/index.tsx
index 35e73b74..da5e6c20 100644
--- a/Clients/src/presentation/pages/SettingsPage/Team/index.tsx
+++ b/Clients/src/presentation/pages/SettingsPage/Team/index.tsx
@@ -17,9 +17,13 @@ import {
   useTheme,
   SelectChangeEvent,
   TablePagination,
+  Dialog,
+  DialogTitle,
+  DialogContentText,
+  DialogContent,
+  DialogActions,
 } from "@mui/material";
 import Trashbin from "../../../../presentation/assets/icons/trash-01.svg";
-import Field from "../../../components/Inputs/Field";
 import { ReactComponent as SelectorVertical } from "../../../assets/icons/selector-vertical.svg";
 import TablePaginationActions from "../../../components/TablePagination";
 import { VerifyWiseContext } from "../../../../application/contexts/VerifyWise.context";
@@ -53,6 +57,8 @@ const TeamManagement: React.FC = (): JSX.Element => {
 
   // State management
   const [orgName, setOrgName] = useState("BlueWave Labs");
+  const [open, setOpen] = useState(false);
+  const [memberToDelete, setMemberToDelete] = useState<string | null>(null);
   const [filter, setFilter] = useState<Role | "All">("All");
   const [teamMembers, setTeamMembers] = useState<TeamMember[]>([
     {
@@ -85,6 +91,20 @@ const TeamManagement: React.FC = (): JSX.Element => {
     console.log("Saving organization name:", orgName);
   }, [orgName]);
 
+  const handleClose = () => {
+    setOpen(false);
+    setMemberToDelete(null);
+  };
+
+  const confirmDelete = () => {
+    if (memberToDelete) {
+      setTeamMembers((members) =>
+        members.filter((member) => member.id !== memberToDelete)
+      );
+    }
+    handleClose();
+  };
+
   // Handle role change
   const handleRoleChange = useCallback(
     (event: SelectChangeEvent<Role>, memberId: string) => {
@@ -127,6 +147,11 @@ const TeamManagement: React.FC = (): JSX.Element => {
     console.log("Form Data:", formData);
   }, [orgName, filter, teamMembers]);
 
+  const handleDeleteClick = (memberId: string) => {
+    setMemberToDelete(memberId);
+    setOpen(true);
+  };
+
   const handleChangePage = (_: unknown, newPage: number) => {
     setPage(newPage);
   };
@@ -145,7 +170,7 @@ const TeamManagement: React.FC = (): JSX.Element => {
 
   return (
     <Stack sx={{ pt: theme.spacing(10) }}>
-      <Box sx={{ mb: 4 }}>
+      {/* <Box sx={{ mb: 4 }}>
         <Typography
           variant="h4"
           gutterBottom
@@ -186,7 +211,7 @@ const TeamManagement: React.FC = (): JSX.Element => {
             Save
           </Button>
         </Box>
-      </Box>
+      </Box> */}
 
       <Box sx={{ mb: 4, maxWidth: theme.spacing(480) }}>
         <Typography
@@ -268,16 +293,30 @@ const TeamManagement: React.FC = (): JSX.Element => {
                           value={member.role}
                           onChange={(e) => handleRoleChange(e, member.id)}
                           size="small"
-                          sx={{ minWidth: 120 }}
+                          sx={{
+                            minWidth: 120,
+                            "& .MuiOutlinedInput-notchedOutline": {
+                              border: "none", // Remove the border from the notched outline
+                            },
+                          }}
                         >
                           {roles.map((role) => (
-                            <MenuItem key={role} value={role}>{role}</MenuItem>
+                            <MenuItem key={role} value={role}>
+                              {role}
+                            </MenuItem>
                           ))}
                         </Select>
                       </TableCell>
                       <TableCell>
-                        <IconButton onClick={() => handleDeleteMember(member.id)}>
-                          <img src={Trashbin} alt="Delete" width={20} height={20} />
+                        <IconButton
+                          onClick={() => handleDeleteClick(member.id)}
+                        >
+                          <img
+                            src={Trashbin}
+                            alt="Delete"
+                            width={20}
+                            height={20}
+                          />
                         </IconButton>
                       </TableCell>
                     </TableRow>
@@ -286,70 +325,125 @@ const TeamManagement: React.FC = (): JSX.Element => {
             </Table>
           </TableContainer>
 
+          <Dialog
+            open={open}
+            onClose={handleClose}
+            sx={{
+              maxWidth: "440px",
+              position: "absolute",
+              top: "50%",
+              left: "50%",
+              padding: "32px",
+              transform: "translate(-50%, -50%)",
+              "& .MuiDialog-paper": {
+                borderRadius: "8px",
+                boxShadow: "0 0px 0px rgba(0, 0, 0, 0.1)",
+                backgroundColor: "white",
+                padding: "32px",
+                margin: "0px",
+              },
+              "& .MuiBackdrop-root": {
+                backgroundColor: "rgba(0, 0, 0, 0)",
+              },
+              "& .css-7znkgh-MuiModal-root-MuiDialog-root": {
+                backgroundColor: "rgba(0, 0, 0, 0)",
+              },
+              "& .MuiDialog-container": {
+                backgroundColor: "rgba(0, 0, 0, 0)",
+              },
+            }}
+          >
+            <DialogTitle
+              sx={{ color: "#344054", fontSize: "16px", paddingBottom: "13px" }}
+            >
+              Confirm Delete
+            </DialogTitle>
+            <DialogContent>
+              <DialogContentText sx={{ color: "#344054", fontSize: "13px" }}>
+                Are you sure you want to delete this team member? This action
+                cannot be undone.
+              </DialogContentText>
+            </DialogContent>
+            <DialogActions sx={{padding: "0px 0px"}}>
+              <Button onClick={handleClose} sx={{ color: "black" }}>
+                Cancel
+              </Button>
+              <Button
+                onClick={confirmDelete}
+                sx={{ backgroundColor: "#DB504A" , height: "32px"}}
+                variant="contained"
+              >
+                Delete
+              </Button>
+            </DialogActions>
+          </Dialog>
+
           <TablePagination
-          count={dashboardValues.vendors.length}
-          page={page}
-          onPageChange={handleChangePage}
-          rowsPerPage={rowsPerPage}
-          rowsPerPageOptions={[5, 10, 15, 25]}
-          onRowsPerPageChange={handleChangeRowsPerPage}
-          ActionsComponent={(props) => <TablePaginationActions {...props} />}
-          labelRowsPerPage="Rows per page"
-          labelDisplayedRows={({ page, count }) =>
-            `Page ${page + 1} of ${Math.max(0, Math.ceil(count / rowsPerPage))}`
-          }
-          slotProps={{
-            select: {
-              MenuProps: {
-                keepMounted: true,
-                PaperProps: {
-                  className: "pagination-dropdown",
-                  sx: {
-                    mt: 0,
-                    mb: theme.spacing(2),
+            count={dashboardValues.vendors.length}
+            page={page}
+            onPageChange={handleChangePage}
+            rowsPerPage={rowsPerPage}
+            rowsPerPageOptions={[5, 10, 15, 25]}
+            onRowsPerPageChange={handleChangeRowsPerPage}
+            ActionsComponent={(props) => <TablePaginationActions {...props} />}
+            labelRowsPerPage="Rows per page"
+            labelDisplayedRows={({ page, count }) =>
+              `Page ${page + 1} of ${Math.max(
+                0,
+                Math.ceil(count / rowsPerPage)
+              )}`
+            }
+            slotProps={{
+              select: {
+                MenuProps: {
+                  keepMounted: true,
+                  PaperProps: {
+                    className: "pagination-dropdown",
+                    sx: {
+                      mt: 0,
+                      mb: theme.spacing(2),
+                    },
                   },
+                  transformOrigin: { vertical: "bottom", horizontal: "left" },
+                  anchorOrigin: { vertical: "top", horizontal: "left" },
+                  sx: { mt: theme.spacing(-2) },
                 },
-                transformOrigin: { vertical: "bottom", horizontal: "left" },
-                anchorOrigin: { vertical: "top", horizontal: "left" },
-                sx: { mt: theme.spacing(-2) },
-              },
-              inputProps: { id: "pagination-dropdown" },
-              IconComponent: SelectorVertical,
-              sx: {
-                ml: theme.spacing(4),
-                mr: theme.spacing(12),
-                minWidth: theme.spacing(20),
-                textAlign: "left",
-                "&.Mui-focused > div": {
-                  backgroundColor: theme.palette.background.main,
+                inputProps: { id: "pagination-dropdown" },
+                IconComponent: SelectorVertical,
+                sx: {
+                  ml: theme.spacing(4),
+                  mr: theme.spacing(12),
+                  minWidth: theme.spacing(20),
+                  textAlign: "left",
+                  "&.Mui-focused > div": {
+                    backgroundColor: theme.palette.background.main,
+                  },
                 },
               },
-            },
-          }}
-          sx={{
-            mt: theme.spacing(6),
-            color: theme.palette.text.secondary,
-            "& .MuiSelect-icon": {
-              width: "24px",
-              height: "fit-content",
-            },
-            "& .MuiSelect-select": {
-              width: theme.spacing(10),
-              borderRadius: theme.shape.borderRadius,
-              border: `1px solid ${theme.palette.border.light}`,
-              padding: theme.spacing(4),
-            },
-          }}
-        />
+            }}
+            sx={{
+              mt: theme.spacing(6),
+              color: theme.palette.text.secondary,
+              "& .MuiSelect-icon": {
+                width: "24px",
+                height: "fit-content",
+              },
+              "& .MuiSelect-select": {
+                width: theme.spacing(10),
+                border: `1px solid ${theme.palette.border.light}`,
+                padding: theme.spacing(4),
+              },
+            }}
+          />
 
           <Box sx={{ display: "flex", justifyContent: "flex-end", mt: 20 }}>
-            <Button
+            {/* <Button
               variant="contained"
               disableRipple
               onClick={handleSaveAllData}
             >
               Save
-            </Button>
+            </Button> */}
           </Box>
         </Stack>
       </Box>
diff --git a/Clients/src/presentation/vw-v2-components/Dialogs/DualButtonModal/index.tsx b/Clients/src/presentation/vw-v2-components/Dialogs/DualButtonModal/index.tsx
index 6ed61bcd..cd4971df 100644
--- a/Clients/src/presentation/vw-v2-components/Dialogs/DualButtonModal/index.tsx
+++ b/Clients/src/presentation/vw-v2-components/Dialogs/DualButtonModal/index.tsx
@@ -42,6 +42,7 @@ const DualButtonModal: React.FC<DualButtonModalProps> = ({
         padding: "16px",
         borderRadius: "8px",
         boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)",
+        maxWidth: "440px",
       }}
     >
       <Stack className="dual-btn-modal-content">