diff --git a/README.md b/README.md
index 7b804c5..ac19f0b 100644
--- a/README.md
+++ b/README.md
@@ -284,16 +284,16 @@ JS AMAZONA
     3. create product function in api.js
     4. call create product function in ProductListScreen
     5. redirect to edit product
-35. Edit and Delete Product
-    1. update parseUrlRequest to get action
+35. Edit Product UI
     2. create ProductEditScreen.js
     3. load product data from backend
     4. handle form submit
     5. save product in backend
-    6. update ProductListScreen.js
-    7. handle delete button
-    8. rerender after deletion
-36. Upload Product Image
+36. Delete Product
+    3. update ProductListScreen.js
+    4. handle delete button
+    5. rerender after deletion
+37. Upload Product Image
     1. npm install multer
     2. create routes/uploadRoute.js
     3. import express and multer
@@ -310,43 +310,43 @@ JS AMAZONA
     14. call uploadProductImage()
     15. create uploadProductImage in api.js
     16. update server.js
-37. Build Project
+38. Build Project
     1. create build script for frontend
     2. create build script for backend
     3. update sever.js to serve frontend build folder and uploads folder
     4. stop running frontend
     5. npm run build
     6. check localhost:5000 for running website and showing images
-38. Show Categories In Sidebar Menu
+39. Show Categories In Sidebar Menu
     1. update ProductListScreen.js
     2. handle delete button
     3. rerender after deletion
-39. Admin Orders
+40. Admin Orders
     1. create Admin Order menu in header
     2. create AdminOrder.js
     3. load orders from backend
     4. list them in the screen
     5. show delete and edit button
     6. redirect to order details on edit action
-40. Edit Order
+41. Edit Order
     1. if order is payed show deliver button for admin
     2. handle click on deliver button
     3. set state to delivered
-41. Delete Order
+42. Delete Order
     1. update OrderListScreen.js
     2. handle delete button
     3. rerender after deletion
-42. Show Summary Report in Dashboard
+43. Show Summary Report in Dashboard
     1. create summary section
     2. style summary
     3. create summary backend
     4. create getSummary in api.js
     5. load data in dashboard screen
     6. show 3 boxes for Users, Orders and Sales
-43. Show Chart in Dashboard
+44. Show Chart in Dashboard
     1. import chartist
     2. add chartist css to index.html
     3. create linear chart for daily sales
     4. create pie chart for product categories
-44. Publish heroku
+45. Publish heroku
     1. publish steps
diff --git a/backend/routers/productRouter.js b/backend/routers/productRouter.js
index bc39175..34ddae2 100644
--- a/backend/routers/productRouter.js
+++ b/backend/routers/productRouter.js
@@ -4,6 +4,21 @@ import { isAuth, isAdmin } from '../utils';
 import Product from '../models/productModel';
 
 const productRouter = express.Router();
+productRouter.get(
+  '/',
+  expressAysncHandler(async (req, res) => {
+    const products = await Product.find({});
+    res.send(products);
+  })
+);
+productRouter.get(
+  '/:id',
+  expressAysncHandler(async (req, res) => {
+    const product = await Product.findById(req.params.id);
+    res.send(product);
+  })
+);
+
 productRouter.post(
   '/',
   isAuth,
diff --git a/backend/server.js b/backend/server.js
index 9948404..6cf9017 100644
--- a/backend/server.js
+++ b/backend/server.js
@@ -29,17 +29,7 @@ app.use('/api/orders', orderRouter);
 app.get('/api/paypal/clientId', (req, res) => {
   res.send({ clientId: config.PAYPAL_CLIENT_ID });
 });
-app.get('/api/products', (req, res) => {
-  res.send(data.products);
-});
-app.get('/api/products/:id', (req, res) => {
-  const product = data.products.find((x) => x._id === req.params.id);
-  if (product) {
-    res.send(product);
-  } else {
-    res.status(404).send({ message: 'Product Not Found!' });
-  }
-});
+
 app.use((err, req, res, next) => {
   const status = err.name && err.name === 'ValidationError' ? 400 : 500;
   res.status(status).send({ message: err.message });
diff --git a/frontend/src/index.js b/frontend/src/index.js
index bc07f32..6e2f420 100644
--- a/frontend/src/index.js
+++ b/frontend/src/index.js
@@ -13,9 +13,11 @@ import PlaceOrderScreen from './srceens/PlaceOrderScreen';
 import OrderScreen from './srceens/OrderScreen';
 import DashboardScreen from './srceens/DashboardScreen';
 import ProductListScreen from './srceens/ProductListScreen';
+import ProductEditScreen from './srceens/ProductEditScreen';
 
 const routes = {
   '/': HomeScreen,
+  '/product/:id/edit': ProductEditScreen,
   '/product/:id': ProductScreen,
   '/order/:id': OrderScreen,
   '/cart/:id': CartScreen,
@@ -36,6 +38,7 @@ const router = async () => {
     (request.resource ? `/${request.resource}` : '/') +
     (request.id ? '/:id' : '') +
     (request.verb ? `/${request.verb}` : '');
+  console.log(request);
   const screen = routes[parseUrl] ? routes[parseUrl] : Error404Screen;
   const header = document.getElementById('header-container');
   header.innerHTML = await Header.render();
diff --git a/frontend/src/srceens/ProductEditScreen.js b/frontend/src/srceens/ProductEditScreen.js
new file mode 100644
index 0000000..41a18a7
--- /dev/null
+++ b/frontend/src/srceens/ProductEditScreen.js
@@ -0,0 +1,73 @@
+import { parseRequestUrl } from '../utils';
+import { getProduct } from '../api';
+
+const ProductEditScreen = {
+  after_render: () => {},
+  render: async () => {
+    const request = parseRequestUrl();
+    const product = await getProduct(request.id);
+    return `
+    <div class="content">
+      <div>
+        <a href="/#/productlist">Back to products</a>
+      </div>
+      <div class="form-container">
+        <form id="edit-product-form">
+          <ul class="form-items">
+            <li>
+              <h1>Edit Product ${product._id.substring(0, 8)}</h1>
+            </li>
+            <li>
+              <label for="name">Name</label>
+              <input type="text" name="name" value="${
+                product.name
+              }" id="name" />
+            </li>
+            <li>
+              <label for="price">Price</label>
+              <input type="number" name="price" value="${
+                product.price
+              }" id="price" />
+            </li>
+            <li>
+              <label for="image">Image (680 x 830)</label>
+              <input type="text" name="image" value="${
+                product.image
+              }" id="image" />
+            </li>
+            <li>
+              <label for="brand">Brand</label>
+              <input type="text" name="brand" value="${
+                product.brand
+              }" id="brand" />
+            </li>
+            <li>
+              <label for="countInStock">Count In Stock</label>
+              <input type="text" name="countInStock" value="${
+                product.countInStock
+              }" id="countInStock" />
+            </li>
+            <li>
+              <label for="category">Category</label>
+              <input type="text" name="category" value="${
+                product.category
+              }" id="category" />
+            </li>
+            <li>
+              <label for="description">Description</label>
+              <input type="text" name="description" value="${
+                product.description
+              }" id="description" />
+            </li>
+            <li>
+              <button type="submit" class="primary">Update</button>
+            </li>
+          </ul>
+        </form>
+      </div>
+
+    </div>
+    `;
+  },
+};
+export default ProductEditScreen;
diff --git a/frontend/src/srceens/ProductListScreen.js b/frontend/src/srceens/ProductListScreen.js
index 888a103..bc99ef7 100644
--- a/frontend/src/srceens/ProductListScreen.js
+++ b/frontend/src/srceens/ProductListScreen.js
@@ -9,6 +9,12 @@ const ProductListScreen = {
         const data = await createProduct();
         document.location.hash = `/product/${data.product._id}/edit`;
       });
+    const editButtons = document.getElementsByClassName('edit-button');
+    Array.from(editButtons).forEach((editButton) => {
+      editButton.addEventListener('click', () => {
+        document.location.hash = `/product/${editButton.id}/edit`;
+      });
+    });
   },
   render: async () => {
     const products = await getProducts();
diff --git a/frontend/src/utils.js b/frontend/src/utils.js
index 7bbb499..120e5c5 100644
--- a/frontend/src/utils.js
+++ b/frontend/src/utils.js
@@ -6,7 +6,7 @@ export const parseRequestUrl = () => {
   return {
     resource: request[1],
     id: request[2],
-    action: request[3],
+    verb: request[3],
   };
 };
 export const rerender = async (component) => {