diff --git a/src/App.tsx b/src/App.tsx
index 10cb92a..215f095 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -8,7 +8,6 @@ import Dashboard from './components/Dashboard';
 import Projects from './components/projects/Projects';
 import { ReactQueryDevtools} from 'react-query/devtools'
 import ManageUsers from './components/manage_users/ManageUsers';
-import EditableTable from './components/manage_users/demo';
 
 function App() {
   const queryClient = new QueryClient();
@@ -21,7 +20,6 @@ function App() {
             <Route path="/" element={<Dashboard />} />
             <Route path="/projects" element={<Projects />} />
             <Route path="/manage-users" element={<ManageUsers />} />
-            {/* <Route path="/demo" element={<EditableTable />} /> */}
           </Routes>
         </div>
       </BrowserRouter>
diff --git a/src/components/manage_users/ManageUsers.tsx b/src/components/manage_users/ManageUsers.tsx
index 31e2e88..8db6bdb 100644
--- a/src/components/manage_users/ManageUsers.tsx
+++ b/src/components/manage_users/ManageUsers.tsx
@@ -20,6 +20,27 @@ import DeleteIcon from '@mui/icons-material/Delete';
 import EditIcon from '@mui/icons-material/Edit';
 import AddIcon from '@mui/icons-material/Add';
 
+const StyledTextField = (props:any) => (
+    <TextField
+      variant="standard"
+      margin="dense"
+      fullWidth
+      {...props}
+      sx={{
+        input: { color: 'white' },
+        '& label': { color: 'white' },
+        '& label.Mui-focused': { color: 'white' },
+        '& .MuiInput-underline:after': { borderBottomColor: 'white' },
+        '& .MuiOutlinedInput-root': {
+          '& fieldset': { borderColor: 'white' },
+          '&:hover fieldset': { borderColor: 'white', borderWidth: 2 },
+          '&.Mui-focused fieldset': { borderColor: 'white' },
+        },
+        ...props.sx,
+      }}
+    />
+  );
+
 interface Row {
     id: number;
     name: string;
@@ -120,136 +141,34 @@ export default function ManageUsers(){
 
                 <Dialog  open={open} onClose={handleClose}>
                     <DialogTitle sx={{bgcolor:'rgb(24 24 23)', color:'white'}}>{selectedRow && selectedRow.id ? 'Edit Row' : 'Add New Row'}</DialogTitle>
-                    <DialogContent sx={{bgcolor:'rgb(24 24 23)'}}>
-                    <TextField
-                        variant="standard"
-                        autoFocus
-                        sx={{input: { color: 'white' },
-                            "& label": {
-                            color: "white"
-                        },
-                        "& label.Mui-focused": {
-                            color: "white"
-                        },
-                        "& .MuiInput-underline:after": {
-                            borderBottomColor: "white"
-                        },
-                        "& .MuiOutlinedInput-root": {
-                            "& fieldset": {
-                            borderColor: "white"
-                            }},
-                            "&:hover fieldset": {
-                                borderColor: "white",
-                                borderWidth: 2
-                            },
-                            "&.Mui-focused fieldset": {
-                                borderColor: "white"
-                            }
-                        }}
-                        margin="dense"
+                    <DialogContent sx={{ bgcolor: 'rgb(24 24 23)' }}>
+                        <StyledTextField
                         label="Name"
                         type="text"
-                        fullWidth
                         name="name"
                         value={selectedRow && selectedRow.username}
                         onChange={handleChange}
-                    />
-                    <TextField
-                    variant="standard"
-                    sx={{input: { color: 'white' },
-                            "& label": {
-                            color: "white"
-                        },
-                        "& label.Mui-focused": {
-                            color: "white"
-                        },
-                        "& .MuiInput-underline:after": {
-                            borderBottomColor: "white"
-                        },
-                        "& .MuiOutlinedInput-root": {
-                            "& fieldset": {
-                            borderColor: "white"
-                            }},
-                            "&:hover fieldset": {
-                                borderColor: "white",
-                                borderWidth: 2
-                            },
-                            "&.Mui-focused fieldset": {
-                                borderColor: "white"
-                            }
-                        }}
-                        margin="dense"
+                        />
+                        <StyledTextField
                         label="Email"
-                        // type="number"
-                        fullWidth
-                        name="age"
+                        name="email"
                         value={selectedRow && selectedRow.email_id}
                         onChange={handleChange}
-                    />
-                    <TextField
-                    sx={{input: { color: 'white' },
-                        "& label": {
-                        color: "white"
-                        },
-                        "& label.Mui-focused": {
-                            color: "white"
-                        },
-                        "& .MuiInput-underline:after": {
-                            borderBottomColor: "white"
-                        },
-                        "& .MuiOutlinedInput-root": {
-                            "& fieldset": {
-                            borderColor: "white"
-                            }},
-                            "&:hover fieldset": {
-                                borderColor: "white",
-                                borderWidth: 2
-                            },
-                            "&.Mui-focused fieldset": {
-                                borderColor: "white"
-                            }
-                        }}
-                    variant="standard"
-                        margin="dense"
+                        />
+                        <StyledTextField
                         label="Last Login"
                         type="last_login"
-                        fullWidth
                         name="last_login"
                         value={selectedRow && selectedRow.last_login}
                         onChange={handleChange}
-                    />
-                      <TextField
-                      sx={{input: { color: 'white' },
-                      "& label": {
-                      color: "white"
-                        },
-                        "& label.Mui-focused": {
-                            color: "white"
-                        },
-                        "& .MuiInput-underline:after": {
-                            borderBottomColor: "white"
-                        },
-                        "& .MuiOutlinedInput-root": {
-                            "& fieldset": {
-                            borderColor: "white"
-                            }},
-                            "&:hover fieldset": {
-                                borderColor: "white",
-                                borderWidth: 2
-                            },
-                            "&.Mui-focused fieldset": {
-                                borderColor: "white"
-                            }
-                        }}
-                      variant="standard"
-                        margin="dense"
+                        />
+                        <StyledTextField
                         label="Active"
-                        type="number"
-                        fullWidth
-                        name="age"
+                        // type="number"
+                        name="active"
                         value={selectedRow && selectedRow.active}
                         onChange={handleChange}
-                    />
+                        />
                     </DialogContent>
                     <DialogActions sx={{bgcolor:'rgb(24 24 23)'}}>
                     <Button onClick={handleClose} color="primary">