diff --git a/src/components/ListItemLink/index.jsx b/src/components/ListItemLink/index.jsx
index 6f6f60e..2004077 100644
--- a/src/components/ListItemLink/index.jsx
+++ b/src/components/ListItemLink/index.jsx
@@ -2,11 +2,13 @@
 // use useNavigation for redirect
 import React from "react";
 import { ListItem, ListItemIcon, ListItemText } from "@mui/material";
+import { useNavigate } from 'react-router-dom';
 
 const ListItemLink = ({ to, label, icon }) => {
-
-  const handleClick = () => {
-    // logic to redirect
+  let navigate = useNavigate();
+  const handleClick = (event) => {
+    event.preventDefault();
+    navigate(to);
   }
 
   return (
diff --git a/src/pages/TaskListPage/FormAddTask/index.js b/src/pages/TaskListPage/FormAddTask/index.js
index 01467fb..64340b9 100644
--- a/src/pages/TaskListPage/FormAddTask/index.js
+++ b/src/pages/TaskListPage/FormAddTask/index.js
@@ -1,13 +1,11 @@
 import React, { useState, useRef, useEffect } from "react";
+import { TextField, Button, Dialog, DialogContent, DialogTitle, DialogActions } from '@mui/material';
 
 const FormAddTask = ({ onSubmitCallback }) => {
   const [taskName, setTaskName] = useState("");
-  const inputRef = useRef();
-
-  useEffect(() => {
-    inputRef.current.focus();
-  }, []);
+   const [open, setOpen] = React.useState(false);
 
+  
   const onChangeName = (event) => {
     setTaskName(event.target.value);
   }
@@ -18,26 +16,44 @@ const FormAddTask = ({ onSubmitCallback }) => {
       name: taskName
     });
     setTaskName("");
+    setOpen(false);
+  };
+  const handleClickOpen = () => {
+    setOpen(true);
   };
 
+  const handleClose = () => {
+    setOpen(false);
+  };
+  // main -> feature/david-mamani_dialog
   return (
-    <form onSubmit={onSubmitListener}>
-      <div>
-        <label htmlFor="taskName">Task Name</label>
-        <input
-          type="text"
-          id="taskName"
-          name="name"
-          autoComplete="off"
-          ref={inputRef}
-          value={taskName}
-          onChange={onChangeName} />
-      </div>
-      <div>
-        <button type="submit" id="submitForm">
-          Add Task
-        </button>
-      </div>
+    <form >
+        <Button variant="outlined" onClick={handleClickOpen}>
+          Add New Task
+        </Button>
+        <Dialog open={open} onClose={handleClose}>
+        <DialogTitle>Add New Task</DialogTitle>
+        <DialogContent>
+        <TextField
+            autoFocus
+            margin="dense"
+            id="name"
+            label="Task Name"
+            type="email"
+            fullWidth
+            variant="standard"
+            id="taskName"
+            name="name"
+            autoComplete="off"
+            value={taskName}
+            onChange={onChangeName}
+        />
+        </DialogContent>
+      <DialogActions>
+        <Button onClick={handleClose}>Cancel</Button>
+        <Button onClick={onSubmitListener} >Add Task</Button>
+      </DialogActions>
+      </Dialog>
     </form>
   );
 };
diff --git a/webpack.config.js b/webpack.config.js
index e2fb45c..7aed40b 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -3,6 +3,7 @@ const HtmlWebpackPlugin = require("html-webpack-plugin");
 
 module.exports = {
   devServer: {
+    historyApiFallback: true,
     port: 3000,
     open: true
   },