diff --git a/app.js b/app.js
index 2077d43..2e2f6f0 100644
--- a/app.js
+++ b/app.js
@@ -1,167 +1,136 @@
-const express = require('express');
+const express = require("express");
 const app = express();
-const mysql = require('mysql');
-const cors = require('cors');
-
-
-app.use(cors())
+const mysql = require("mysql");
+const cors = require("cors");
 
+app.use(cors());
 
 const connection = mysql.createConnection({
-    user: "task-user",
-    host: "localhost",
-    database: "task-db",
-    password: "123456",
-})
+	user: "myDBuser",
+	password: "Testme1234",
+	host: "127.0.0.1",
+	database: "workout",
+});
 
 connection.connect((err) => {
-    if (err) {
-        console.log(err.message)
-    }
-    else {
-        console.log("connection established")
-    }
-})
-
+	if (err) {
+		console.log(err.message);
+	} else {
+		console.log("connection established");
+	}
+});
 
-// middleware 
-app.use(express.json())
+// middleware
+app.use(express.json());
 
+// create table
+const taskTable = `  CREATE TABLE Task (
+	id INT NOT NULL AUTO_INCREMENT,
+	task_name VARCHAR(255),
+	completed BOOLEAN DEFAULT false,
+	PRIMARY KEY (id)
+)  `;
 
 // create task
-app.post('/task/create', (req, res) => {
-    const name = req.body.name
-
-    if (!name) {
-        return res.status(400).send("Name is required!")
-    }
-    const createTask = `INSERT INTO Task (task_name) VALUES ('${name}')`
-    connection.query(createTask, (err, result) => {
-        if (err) {
-            return res.send(err.message)
-        }
-        else {
-            return res.send("Task created yoni")
-        }
-    })
-})
-
-
+app.post("/task/create", (req, res) => {
+	const name = req.body.name;
+
+	if (!name) {
+		return res.status(400).send("Name is required!");
+	}
+	const createTask = `INSERT INTO Task (task_name) VALUES ('${name}')`;
+	connection.query(createTask, (err, result) => {
+		if (err) {
+			return res.send(err.message);
+		} else {
+			return res.send("Task created");
+		}
+	});
+});
 
 // real all tasks ****
-app.get('/task', (req, res) => {
-
-
-    const readAllTasks = `SELECT * FROM Task ORDER BY id DESC`
-
-    connection.query(readAllTasks, (err, result) => {
-        if (err) {
-            return res.status(500).send(err.message)
-        }
-        else {
-            return res.json(result)
-        }
-    })
-
-})
+app.get("/task", (req, res) => {
+	const readAllTasks = `SELECT * FROM Task ORDER BY id DESC`;
+
+	connection.query(readAllTasks, (err, result) => {
+		if (err) {
+			return res.status(500).send(err.message);
+		} else {
+			return res.json(result);
+		}
+	});
+});
 
 // read single task
-app.get('/task/:id', (req, res) => {
-    const id = req.params.id
-
-    const readTask = `SELECT * FROM Task WHERE id = '${id}'`
-
-    connection.query(readTask, (err, result) => {
-        if (err) {
-            return res.send(err.message)
-        }
-        else if (result.length == 0) {
-            return res.send(`No task with id ${id}`)
-        }
-        else {
-            return res.json(result)
-        }
-    })
-
-})
-
+app.get("/task/:id", (req, res) => {
+	const id = req.params.id;
+
+	const readTask = `SELECT * FROM Task WHERE id = '${id}'`;
+
+	connection.query(readTask, (err, result) => {
+		if (err) {
+			return res.send(err.message);
+		} else if (result.length == 0) {
+			return res.send(`No task with id ${id}`);
+		} else {
+			return res.json(result);
+		}
+	});
+});
 
 // update single task
-app.patch('/task/:id', (req, res) => {
-
-    const id = req.params.id
-    const name = req.body.name
-    let completed = req.body.completed
-
-    if (!name) {
-        return res.send("Name is required!")
-    }
-
-    if (completed) {
-        completed = 1
-    }
-    else {
-        completed = 0
-    }
-
-    const updateTask = ` UPDATE Task
+app.patch("/task/:id", (req, res) => {
+	const id = req.params.id;
+	const name = req.body.name;
+	let completed = req.body.completed;
+
+	if (!name) {
+		return res.send("Name is required!");
+	}
+
+	if (completed) {
+		completed = 1;
+	} else {
+		completed = 0;
+	}
+
+	const updateTask = ` UPDATE Task
 	SET task_name = "${name}",
 		completed = ${completed}
-		WHERE id=${id} `
-
-
-    connection.query(updateTask, (err, result) => {
-        if (err) {
-            return res.send(err.message)
-        }
-        else if (result.affectedRows == 0) {
-            return res.send(`No task with id ${id}`)
-        }
-        else {
-            return res.send("Task updated ")
-        }
-    })
-})
-
+		WHERE id=${id} `;
+
+	connection.query(updateTask, (err, result) => {
+		if (err) {
+			return res.send(err.message);
+		} else if (result.affectedRows == 0) {
+			return res.send(`No task with id ${id}`);
+		} else {
+			return res.send("Task updated ");
+		}
+	});
+});
 
 // Delete single task
 app.delete("/task/:id", (req, res) => {
-    const id = req.params.id
-
-    const deleteTask = `DELETE FROM Task WHERE id = ${id} `
-
-    connection.query(deleteTask, (err, result) => {
-        if (err) {
-            return res.send(err.message)
-        }
-        else if (result.affectedRows == 0) {
-            return res.send(`No task with id ${id}`)
-        }
-        else {
-            return res.send("Task deleted")
-        }
-    })
-
-
-})
-
-
+	const id = req.params.id;
 
+	const deleteTask = `DELETE FROM Task WHERE id = ${id} `;
 
+	connection.query(deleteTask, (err, result) => {
+		if (err) {
+			return res.send(err.message);
+		} else if (result.affectedRows == 0) {
+			return res.send(`No task with id ${id}`);
+		} else {
+			return res.send("Task deleted");
+		}
+	});
+});
 
 app.listen(5000, (err) => {
-    if (err) {
-        console.log(err)
-    }
-    else {
-        console.log("app listening on port 5000...")
-    }
-})
-
-
-const taskTable = `  CREATE TABLE Task (
-	id INT NOT NULL AUTO_INCREMENT,
-	task_name VARCHAR(255),
-	completed BOOLEAN DEFAULT false,
-	PRIMARY KEY (id)
-)  `
+	if (err) {
+		console.log(err);
+	} else {
+		console.log("app listening on port 5000...");
+	}
+});
diff --git a/client/index.html b/client/index.html
index 6d1ca10..e541696 100644
--- a/client/index.html
+++ b/client/index.html
@@ -7,9 +7,15 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <!-- font awesome -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />
+<!-- bootstrap -->
+		<link
+			href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
+			rel="stylesheet"
+			integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
+			crossorigin="anonymous"
+		/>
 
-
-  <title>Vite + React</title>
+  <title>Task Manager</title>
 </head>
 
 <body>
diff --git a/client/src/main.css b/client/src/main.css
index 346cb09..ead667e 100644
--- a/client/src/main.css
+++ b/client/src/main.css
@@ -195,6 +195,13 @@ textarea {
 	border-color: transparent;
 	border: 1px solid var(--grey-300);
 }
+/* custom added */
+.input-padd{
+	padding: 0;
+}
+.checkbox{
+	width: 10%;
+}
 .form-row {
 	margin-bottom: 1rem;
 }
diff --git a/client/src/main.jsx b/client/src/main.jsx
index ff4481b..ad2951b 100644
--- a/client/src/main.jsx
+++ b/client/src/main.jsx
@@ -6,7 +6,10 @@ import './main.css';
 import { BrowserRouter } from 'react-router-dom';
 
 ReactDOM.createRoot(document.getElementById('root')).render(
-	<BrowserRouter>
+	<React.StrictMode>
+		<BrowserRouter>
 		<App />
 	</BrowserRouter>
+	</React.StrictMode>
+	
 );
diff --git a/client/src/pages/EditTask.jsx b/client/src/pages/EditTask.jsx
index 1a168d5..01a50ae 100644
--- a/client/src/pages/EditTask.jsx
+++ b/client/src/pages/EditTask.jsx
@@ -1,10 +1,133 @@
-import { useParams } from 'react-router-dom';
+import { Link, useParams } from "react-router-dom";
+import axios from "../axiosConfig";
+import { useState, useEffect } from "react";
 
 function EditTask() {
+	const [tasks, settasks] = useState([]);
+	const [taskName, setTaskName] = useState("");
 	const { id } = useParams();
+	const [formStatus, setformStatus] = useState({
+		formMsg: "",
+		formSuccess: true,
+	});
+	// for checkbox
+	const [isChecked, setIsChecked] = useState(false);
+	const handleCheckboxChange = (e) => {
+		setIsChecked(e.target.checked);
+	};
+	// console.log(isChecked);
+	// fetch data
+	async function fetchData() {
+		try {
+			const { data } = await axios("/task");
+			// console.log(data);
+			const filteredData = data.filter((item) => item.id == id);
 
-	console.log(id);
+			settasks(() => {
+				return filteredData;
+			});
+		} catch (error) {
+			console.log(error);
+		}
+	}
 
-	return <div>EditTask - {id}</div>;
+	// fetch
+	useEffect(() => {
+		fetchData();
+	}, []);
+	let namedTask = tasks[0]?.task_name;
+	let checkedDefault = tasks[0]?.completed
+	console.log(checkedDefault);
+	
+	// Having the input field an initial default value with fetched task name n checked status
+	useEffect(() => {
+		setTaskName(namedTask);
+		setIsChecked(checkedDefault)
+	}, [tasks])
+	
+	
+	
+	
+	// edit status alert
+	function formStatusLOgic(msg, status) {
+		setformStatus({
+			formMsg: msg,
+			formSuccess: status,
+		});
+		setTimeout(() => {
+			setformStatus({
+				formMsg: "",
+				formSuccess: true,
+			});
+		}, 3000);
+	}
+	// update task
+	async function updateTask(e) {
+		e.preventDefault();
+		try {
+			let { data } = await axios.patch("/task/" + id, {
+				name: taskName,
+				completed: isChecked,
+			});
+			console.log(data);
+			formStatusLOgic("Success edited task", true);
+		} catch (error) {}
+	}
+
+	return (
+		<div className="container">
+			<form className="task-form " onSubmit={updateTask}>
+				<h4>Edit task </h4>
+				{tasks.map((item, i) => (
+					<div className="" key={i}>
+						<div className="row">
+							<div className="col-md-6">Task id:</div>
+							<div className="col-md-6">{item.id}</div>
+						</div>
+						<div className="row">
+							<div className="col-md-6">Task name:</div>
+							<div className="col-md-6">
+								<input
+									type="text"
+									value={taskName}
+									onChange={(e) => setTaskName(e.target.value)}
+									name="name"
+									className="task-input input-padd"
+								/>
+							</div>
+						</div>
+						<div className="row">
+							<div className="col-md-6">Completed </div>
+							<div className="col-md-6">
+								<input
+									className="checkbox"
+									type="checkbox"
+									name=""
+									id=""
+									checked={isChecked}
+									onChange={handleCheckboxChange}
+								/>
+							</div>
+						</div>
+
+						<button type="submit" className="btn submit-btn block">
+							Edit
+						</button>
+						<div
+							className={`form-alert ${
+								formStatus.formSuccess ? "alert-success" : "alert-danger"
+							}`}
+						>
+							{formStatus.formMsg}
+						</div>
+					</div>
+				))}
+			</form>
+			<Link to={`/`}>
+				<button className="btn  back-link ">Back to Home Page</button>
+			</Link>
+			<div></div>
+		</div>
+	);
 }
 export default EditTask;
diff --git a/client/src/pages/Home.jsx b/client/src/pages/Home.jsx
index f6d37a1..6a05003 100644
--- a/client/src/pages/Home.jsx
+++ b/client/src/pages/Home.jsx
@@ -1,16 +1,16 @@
-import { useState, useEffect } from 'react';
-import { Link } from 'react-router-dom';
+import { useState, useEffect } from "react";
+import { Link } from "react-router-dom";
 
-import axios from '../axiosConfig';
+import axios from "../axiosConfig";
 
 function Home() {
 	const [tasks, settasks] = useState([]);
 	const [isLoading, setisLoding] = useState(false);
 	// task name state
-	const [taskName, settaskName] = useState('');
+	const [taskName, settaskName] = useState("");
 
 	const [formStatus, setformStatus] = useState({
-		formMsg: '',
+		formMsg: "",
 		formSuccess: true,
 	});
 
@@ -18,10 +18,12 @@ function Home() {
 	async function fetchData() {
 		try {
 			setisLoding(true);
-			const { data } = await axios('/task');
+			const { data } = await axios("/task");
 			console.log(data);
 			settasks(data);
-			setisLoding(false);
+			setTimeout(() => {
+				setisLoding(false);
+			}, 1000);
 		} catch (error) {
 			setisLoding(false);
 			console.log(error);
@@ -35,7 +37,7 @@ function Home() {
 		});
 		setTimeout(() => {
 			setformStatus({
-				formMsg: '',
+				formMsg: "",
 				formSuccess: true,
 			});
 		}, 3000);
@@ -46,15 +48,15 @@ function Home() {
 		e.preventDefault();
 		try {
 			if (!taskName) {
-				formStatusLOgic('task name is required', false);
+				formStatusLOgic("task name is required", false);
 				return;
 			}
-			await axios.post('/task/create', {
+			await axios.post("/task/create", {
 				name: taskName,
 			});
-			settaskName('');
+			settaskName("");
 			fetchData();
-			formStatusLOgic('task created successfully', true);
+			formStatusLOgic("task created successfully", true);
 		} catch (error) {
 			console.log(error);
 		}
@@ -62,9 +64,15 @@ function Home() {
 
 	async function handleDelete(id) {
 		try {
-			await axios.delete('/task/' + id);
+			let sure = window.confirm("Continue to delete?");
+			if (sure) {
+				await axios.delete("/task/" + id);
 			fetchData();
-			formStatusLOgic('task deleted successfully', true);
+			formStatusLOgic("Task deleted successfully", true);
+			} else {
+				alert('No worries task is still there')
+			}
+			
 		} catch (error) {
 			console.log(error);
 		}
@@ -76,39 +84,37 @@ function Home() {
 
 	return (
 		<>
-			<form className='task-form ' onSubmit={handleSubmit}>
+			<form className="task-form " onSubmit={handleSubmit}>
 				<h4>task manager</h4>
-				<div className='form-control'>
+				<div className="form-control">
 					<input
 						value={taskName}
-						onChange={e => {
+						onChange={(e) => {
 							settaskName(e.target.value);
 						}}
-						type='text'
-						name='name'
-						className='task-input'
-						placeholder='e.g. learn nodejs'
+						type="text"
+						name="name"
+						className="task-input"
+						placeholder="e.g. learn nodejs"
 					/>
-					<button type='submit' className='btn submit-btn '>
+					<button type="submit" className="btn submit-btn ">
 						Add
 					</button>
 				</div>
 				<div
 					className={`form-alert ${
-						formStatus.formSuccess
-							? 'alert-success'
-							: 'alert-danger'
+						formStatus.formSuccess ? "alert-success" : "alert-danger"
 					}`}
 				>
 					{formStatus.formMsg}
 				</div>
 			</form>
-			<section className='tasks-container'>
+			<section className="tasks-container">
 				{isLoading ? (
-					<p className=' loading'></p>
+					<p className=" loading"></p>
 				) : (
 					<>
-						<div className='tasks'>
+						<div className="tasks">
 							{tasks.length === 0 ? (
 								<h3>no tasks found</h3>
 							) : (
@@ -118,35 +124,29 @@ function Home() {
 											<div
 												key={i}
 												className={`single-task ${
-													task.completed &&
-													'task-completed'
+													task.completed && "task-completed"
 												}`}
 											>
 												<h5>
 													<span>
-														<i className='far fa-check-circle'></i>
+														<i className="far fa-check-circle"></i>
 													</span>
 													{task.task_name}
 												</h5>
-												<div className='task-links'>
+												<div className="task-links">
 													{/* <!-- edit link --> */}
-													<Link
-														to={`/edit/${task.id}`}
-														className='edit-link'
-													>
-														<i className='fas fa-edit'></i>
+													<Link to={`/edit/${task.id}`} className="edit-link">
+														<i className="fas fa-edit"></i>
 													</Link>
 													{/* <!-- delete btn --> */}
 													<button
 														onClick={() => {
-															handleDelete(
-																task.id
-															);
+															handleDelete(task.id);
 														}}
-														type='button'
-														className='delete-btn'
+														type="button"
+														className="delete-btn"
 													>
-														<i className='fas fa-trash'></i>
+														<i className="fas fa-trash"></i>
 													</button>
 												</div>
 											</div>
diff --git a/client/vite.config.js b/client/vite.config.js
index 5a33944..ecaf3ee 100644
--- a/client/vite.config.js
+++ b/client/vite.config.js
@@ -4,4 +4,7 @@ import react from '@vitejs/plugin-react'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  server: {
+    port:3009
+  }
 })