diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 445d559..09a553b 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1861,6 +1861,18 @@
         "@babel/runtime": "^7.4.4"
       }
     },
+    "@material-ui/lab": {
+      "version": "4.0.0-alpha.56",
+      "resolved": "https://registry.npmjs.org/@material-ui/lab/-/lab-4.0.0-alpha.56.tgz",
+      "integrity": "sha512-xPlkK+z/6y/24ka4gVJgwPfoCF4RCh8dXb1BNE7MtF9bXEBLN/lBxNTK8VAa0qm3V2oinA6xtUIdcRh0aeRtVw==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@material-ui/utils": "^4.10.2",
+        "clsx": "^1.0.4",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.8.0"
+      }
+    },
     "@material-ui/styles": {
       "version": "4.11.4",
       "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.4.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 3d1934c..0d8c093 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -7,6 +7,7 @@
     "@iconify/react": "^3.1.3",
     "@material-ui/core": "^4.11.3",
     "@material-ui/icons": "^4.11.2",
+    "@material-ui/lab": "^4.0.0-alpha.56",
     "@testing-library/jest-dom": "^5.12.0",
     "@testing-library/react": "^11.2.6",
     "@testing-library/user-event": "^12.8.3",
diff --git a/frontend/src/App.js b/frontend/src/App.js
index 9b1d63b..d66dc57 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -16,7 +16,6 @@ function App() {
         <Route exact path="/" component={Map}/>
         <Route exact path="/all" component={AllUsers} />
         <Route exact path="/add" component={AddUser} />
-        <Route exact path="/edit/:id" component={EditUser} />
         <Route component={NotFound} />
       </Switch>
     </BrowserRouter>
diff --git a/frontend/src/Component/AllUsers.jsx b/frontend/src/Component/AllUsers.jsx
index 6e3abda..7aac9bf 100644
--- a/frontend/src/Component/AllUsers.jsx
+++ b/frontend/src/Component/AllUsers.jsx
@@ -52,9 +52,10 @@ const AllUsers = () => {
           id={item._id}
           name={item.name}
           lat={item.lat}
-          long={item.lng}
+          lng={item.lng}
           phone={item.phone}
           setUsers={setUsers}
+          category={item.category}
         />
       ))}
     </div>
diff --git a/frontend/src/Component/EditDetailModal.jsx b/frontend/src/Component/EditDetailModal.jsx
new file mode 100644
index 0000000..0281d41
--- /dev/null
+++ b/frontend/src/Component/EditDetailModal.jsx
@@ -0,0 +1,159 @@
+import React, { useState, useEffect } from 'react';
+import { useHistory, useParams } from 'react-router-dom';
+import { getUsers, editUser } from '../Service/api';
+import {
+  FormGroup,
+  FormControl,
+  InputLabel,
+  Input,
+  Button,
+  makeStyles,
+  Typography,
+  Modal,
+  Box,
+  Dialog,
+  DialogContent,
+  DialogContentText,
+  DialogActions,
+  DialogTitle,
+  TextField,
+} from '@material-ui/core';
+import { Alert } from '@material-ui/lab';
+
+const useStyles = makeStyles({
+  heading: {
+    marginTop: '1rem',
+    fontFamily: 'Sora',
+    fontWeight: '600',
+    color: 'black',
+    textAlign: 'center',
+  },
+});
+
+function EditDetailModal({ user, show, setShow, setUsers, userid }) {
+  const classes = useStyles();
+  const [initData, setInitData] = useState(
+    user ? user : { name: '', lat: '', lng: '', phone: '', category: '' }
+  );
+  const [alert, setAlert] = useState({ show: false, text: '' });
+  const [loading, setloading] = useState(false);
+  useEffect(() => {
+    setInitData(user);
+  }, [user]);
+
+  const onValueChange = (k, v) => {
+    let curr = { ...initData };
+    curr[k] = v;
+    setInitData(curr);
+  };
+
+  const submitHandler = async () => {
+    if (
+      initData.name === '' ||
+      initData.lat === '' ||
+      initData.lng === '' ||
+      initData.phone === '' ||
+      initData.category === ''
+    ) {
+      setAlert({ show: true, text: 'Input fields can not be empty' });
+      return;
+    }
+    setAlert({ show: false, text: '' });
+    try {
+      setloading(true);
+      const res = await editUser(userid, initData);
+      let response = await getUsers();
+      setUsers(response.data);
+      setShow(false);
+      setloading(false);
+    } catch (error) {
+      console.log(error);
+      setloading(false);
+    }
+  };
+
+  return (
+    <Dialog
+      fullWidth
+      maxWidth="sm"
+      open={show}
+      onClose={() => setShow(false)}
+      aria-labelledby="alert-dialog-title"
+      aria-describedby="alert-dialog-description"
+    >
+      <Typography className={classes.heading} align="center" variant="h5">
+        Edit Details
+      </Typography>
+      <DialogContent>
+        {alert.show ? <Alert severity="error">{alert.text}</Alert> : null}
+        <FormControl fullWidth>
+          <TextField
+            variant="outlined"
+            margin="normal"
+            label="Name"
+            onChange={(e) => onValueChange(e.target.name, e.target.value)}
+            name="name"
+            value={initData.name}
+            id="my-input"
+          />
+          <TextField
+            variant="outlined"
+            label="Lat"
+            margin="normal"
+            onChange={(e) => onValueChange(e.target.name, e.target.value)}
+            name="lat"
+            value={initData.lat}
+            id="my-input"
+          />
+          <TextField
+            variant="outlined"
+            margin="normal"
+            label="Long"
+            onChange={(e) => onValueChange(e.target.name, e.target.value)}
+            name="lng"
+            value={initData.lng}
+            id="my-input"
+          />
+          <TextField
+            variant="outlined"
+            margin="normal"
+            label="Phone"
+            onChange={(e) => onValueChange(e.target.name, e.target.value)}
+            name="phone"
+            value={initData.phone}
+            id="my-input"
+          />
+          <TextField
+            variant="outlined"
+            margin="normal"
+            label="Category"
+            onChange={(e) => onValueChange(e.target.name, e.target.value)}
+            name="category"
+            value={initData.category}
+            id="my-input"
+          />
+        </FormControl>
+      </DialogContent>
+      <DialogActions>
+        <Button
+          disabled={loading}
+          variant="contained"
+          onClick={() => submitHandler()}
+          color="primary"
+        >
+          Submit
+        </Button>
+        <Button
+          disabled={loading}
+          onClick={() => setShow(false)}
+          color="secondary"
+          variant="contained"
+        >
+          Cancel
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
+
+export default EditDetailModal;
diff --git a/frontend/src/Component/EditUser.jsx b/frontend/src/Component/EditUser.jsx
index c5ecbaf..8145c3d 100644
--- a/frontend/src/Component/EditUser.jsx
+++ b/frontend/src/Component/EditUser.jsx
@@ -1,80 +1,124 @@
 import { useState, useEffect } from 'react';
-import { FormGroup, FormControl, InputLabel, Input, Button, makeStyles, Typography } from '@material-ui/core';
+import {
+  FormGroup,
+  FormControl,
+  InputLabel,
+  Input,
+  Button,
+  makeStyles,
+  Typography,
+} from '@material-ui/core';
 import { useHistory, useParams } from 'react-router-dom';
 import { getUsers, editUser } from '../Service/api';
 
 const initialValue = {
-    name: '',
-    lat: '',
-    lng:'',
-    phone: '',
-    category:''
-}
+  name: '',
+  lat: '',
+  lng: '',
+  phone: '',
+  category: '',
+};
 
 const useStyles = makeStyles({
-    container: {
-        width: '50%',
-        margin: '5% 0 0 25%',
-        '& > *': {
-            marginTop: 20
-        }
-    }
-})
+  container: {
+    width: '50%',
+    margin: '5% 0 0 25%',
+    '& > *': {
+      marginTop: 20,
+    },
+  },
+});
 
 const EditUser = () => {
-    const [user, setUser] = useState(initialValue);
-    const { name, lat, lng, phone , category} = user;
-    const { id } = useParams();
-    const classes = useStyles();
-    let history = useHistory();
+  const [user, setUser] = useState(initialValue);
+  const { name, lat, lng, phone, category } = user;
+  const { id } = useParams();
+  const classes = useStyles();
+  let history = useHistory();
 
-    useEffect(() => {
-        loadUserDetails();
-    }, []);
+  useEffect(() => {
+    loadUserDetails();
+  }, []);
 
-    const loadUserDetails = async() => {
-        const response = await getUsers(id);
-        setUser(response.data);
-    }
+  const loadUserDetails = async () => {
+    const response = await getUsers(id);
+    setUser(response.data);
+  };
 
-    const editUserDetails = async() => {
-        const response = await editUser(id, user);
-        history.push('/all');
-    }
+  const editUserDetails = async () => {
+    const response = await editUser(id, user);
+    history.push('/all');
+  };
 
-    const onValueChange = (e) => {
-        console.log(e.target.value);
-        setUser({...user, [e.target.name]: e.target.value})
-    }
+  const onValueChange = (e) => {
+    console.log(e.target.value);
+    setUser({ ...user, [e.target.name]: e.target.value });
+  };
 
-    return (
-        <FormGroup className={classes.container}>
-            <Typography variant="h4">Edit Information</Typography>
-            <FormControl>
-                <InputLabel htmlFor="my-input">Name</InputLabel>
-                <Input onChange={(e) => onValueChange(e)} name='name' value={name} id="my-input" aria-describedby="my-helper-text" />
-            </FormControl>
-            <FormControl>
-                <InputLabel htmlFor="my-input">Username</InputLabel>
-                <Input onChange={(e) => onValueChange(e)} name='lat' value={lat} id="my-input" aria-describedby="my-helper-text" />
-            </FormControl>
-            <FormControl>
-                <InputLabel htmlFor="my-input">Email</InputLabel>
-                <Input onChange={(e) => onValueChange(e)} name='lng' value={lng} id="my-input" aria-describedby="my-helper-text" />
-            </FormControl>
-            <FormControl>
-                <InputLabel htmlFor="my-input">Phone</InputLabel>
-                <Input onChange={(e) => onValueChange(e)} name='phone' value={phone} id="my-input" aria-describedby="my-helper-text" />
-            </FormControl>
-            <FormControl>
-                <InputLabel htmlFor="my-input">Phone</InputLabel>
-                <Input onChange={(e) => onValueChange(e)} name='category' value={category} id="my-input" aria-describedby="my-helper-text" />
-            </FormControl>
-            <FormControl>
-                <Button variant="contained" color="primary" onClick={() => editUserDetails()}>Edit User</Button>
-            </FormControl>
-        </FormGroup>
-    )
-}
+  return (
+    <FormGroup className={classes.container}>
+      <Typography variant="h4">Edit Information</Typography>
+      <FormControl>
+        <InputLabel htmlFor="my-input">Name</InputLabel>
+        <Input
+          onChange={(e) => onValueChange(e)}
+          name="name"
+          value={name}
+          id="my-input"
+          aria-describedby="my-helper-text"
+        />
+      </FormControl>
+      <FormControl>
+        <InputLabel htmlFor="my-input">Username</InputLabel>
+        <Input
+          onChange={(e) => onValueChange(e)}
+          name="lat"
+          value={lat}
+          id="my-input"
+          aria-describedby="my-helper-text"
+        />
+      </FormControl>
+      <FormControl>
+        <InputLabel htmlFor="my-input">Email</InputLabel>
+        <Input
+          onChange={(e) => onValueChange(e)}
+          name="lng"
+          value={lng}
+          id="my-input"
+          aria-describedby="my-helper-text"
+        />
+      </FormControl>
+      <FormControl>
+        <InputLabel htmlFor="my-input">Phone</InputLabel>
+        <Input
+          onChange={(e) => onValueChange(e)}
+          name="phone"
+          value={phone}
+          id="my-input"
+          aria-describedby="my-helper-text"
+        />
+      </FormControl>
+      <FormControl>
+        <InputLabel htmlFor="my-input">Phone</InputLabel>
+        <Input
+          onChange={(e) => onValueChange(e)}
+          name="category"
+          value={category}
+          id="my-input"
+          aria-describedby="my-helper-text"
+        />
+      </FormControl>
+      <FormControl>
+        <Button
+          variant="contained"
+          color="primary"
+          onClick={() => editUserDetails()}
+        >
+          Edit User
+        </Button>
+      </FormControl>
+    </FormGroup>
+  );
+};
 
-export default EditUser;
\ No newline at end of file
+export default EditUser;
diff --git a/frontend/src/Component/UserCard.jsx b/frontend/src/Component/UserCard.jsx
index 713b7c6..45cd656 100644
--- a/frontend/src/Component/UserCard.jsx
+++ b/frontend/src/Component/UserCard.jsx
@@ -9,11 +9,17 @@ import {
   Typography,
   TextField,
   Grid,
+  Dialog,
+  DialogContent,
+  DialogContentText,
+  DialogActions,
+  DialogTitle,
 } from '@material-ui/core';
 import CallIcon from '@material-ui/icons/Call';
 import LocationOnIcon from '@material-ui/icons/LocationOn';
 import { Link } from 'react-router-dom';
 import { getUsers, deleteUser } from '../Service/api';
+import EditDetailModal from './EditDetailModal';
 
 const useStyles = makeStyles({
   root: {
@@ -33,6 +39,13 @@ const useStyles = makeStyles({
     justifyContent: 'space-between',
     flexDirection: 'column',
   },
+  heading: {
+    margin: '1rem',
+    fontFamily: 'Sora',
+    fontWeight: '600',
+    color: 'black',
+    textAlign: 'center',
+  },
   name: {
     margin: '0px',
     fontFamily: 'Sora',
@@ -66,11 +79,17 @@ const useStyles = makeStyles({
   },
 });
 
-function UserCard({ id, name, lat, long, phone, setUsers }) {
+function UserCard({ id, name, lat, lng, phone, setUsers, category }) {
+  const [showEditModal, setShowEditModal] = useState(false);
+  const [showDeleteDialog, setshowDeleteDialog] = useState(false);
+  const [loading, setloading] = useState(false);
+
   const classes = useStyles();
   const deleteUserData = async (id) => {
+    setloading(true);
     await deleteUser(id);
-    getAllUsers();
+    await getAllUsers();
+    setloading(false);
   };
   const getAllUsers = async () => {
     let response = await getUsers();
@@ -85,19 +104,65 @@ function UserCard({ id, name, lat, long, phone, setUsers }) {
         <Button
           color="primary"
           variant="contained"
-          component={Link}
-          to={`/edit/${id}`}
+          // component={Link}
+          onClick={() => setShowEditModal(true)}
+          // to={`/edit/${id}`}
         >
           Edit
         </Button>
         <Button
           color="secondary"
           variant="contained"
-          onClick={() => deleteUserData(id)}
+          onClick={() => setshowDeleteDialog(true)}
         >
           Delete
         </Button>
       </div>
+      <EditDetailModal
+        show={showEditModal}
+        setShow={setShowEditModal}
+        setUsers={setUsers}
+        userid={id}
+        user={{
+          name: name,
+          lat: lat,
+          lng: lng,
+          phone: phone,
+          category: category,
+        }}
+      />
+      <Dialog
+        open={showDeleteDialog}
+        onClose={() => setshowDeleteDialog(false)}
+        aria-labelledby="alert-dialog-title"
+        aria-describedby="alert-dialog-description"
+      >
+        <Typography className={classes.heading} align="center" variant="h6">
+          Are you sure, you want to remove this user ?
+        </Typography>
+        <DialogContent></DialogContent>
+        <DialogActions>
+          <Button
+            disabled={loading}
+            variant="contained"
+            onClick={() => {
+              deleteUserData(id);
+              setshowDeleteDialog(false);
+            }}
+            color="primary"
+          >
+            Continue
+          </Button>
+          <Button
+            disabled={loading}
+            onClick={() => setshowDeleteDialog(false)}
+            color="secondary"
+            variant="contained"
+          >
+            Cancel
+          </Button>
+        </DialogActions>
+      </Dialog>
     </div>
   );
 }