diff --git a/src/main/java/me/anant/PMS/config/AuthenticationSuccessHandlerImpl.java b/src/main/java/me/anant/PMS/config/AuthenticationSuccessHandlerImpl.java
index 4444a2f..b212d06 100644
--- a/src/main/java/me/anant/PMS/config/AuthenticationSuccessHandlerImpl.java
+++ b/src/main/java/me/anant/PMS/config/AuthenticationSuccessHandlerImpl.java
@@ -26,7 +26,7 @@ public void onAuthenticationSuccess(HttpServletRequest request, HttpServletRespo
                                         Authentication authentication) throws IOException, ServletException {
     	Set<String> roles = AuthorityUtils.authorityListToSet(authentication.getAuthorities());
         if (roles.contains("ROLE_ADMIN")) {
-            response.sendRedirect("/admin/product/list");
+            response.sendRedirect("/admin/product");
         } else {
             response.sendRedirect("/customer");
         }
diff --git a/src/main/java/me/anant/PMS/controller/OrderController.java b/src/main/java/me/anant/PMS/controller/OrderController.java
index b82de65..8f4a238 100644
--- a/src/main/java/me/anant/PMS/controller/OrderController.java
+++ b/src/main/java/me/anant/PMS/controller/OrderController.java
@@ -77,7 +77,7 @@ public ModelAndView orderPlace(HttpServletRequest request, Principal principal)
 		Set<OrderProduct> opList = new HashSet<>();
 		for(String pId: pIds) {
 			long pid = Long.parseLong(pId);
-			Product product = productService.findById(pid).get();
+			Product product = productService.findById(pid);
 			int buyqty = Integer.parseInt(request.getParameter(pId));
 			opList.add(new OrderProduct(product, buyqty));
 			productService.deductQty(pid, buyqty);
diff --git a/src/main/java/me/anant/PMS/controller/ProductController.java b/src/main/java/me/anant/PMS/controller/ProductController.java
index e47fbf3..b87ca18 100644
--- a/src/main/java/me/anant/PMS/controller/ProductController.java
+++ b/src/main/java/me/anant/PMS/controller/ProductController.java
@@ -1,18 +1,21 @@
 package me.anant.PMS.controller;
 
-import java.util.List;
-import java.util.Optional;
+import java.util.*;
+
 import javax.validation.Valid;
 
+import me.anant.PMS.dto.CategoryDto;
+import me.anant.PMS.dto.ProductDto;
 import me.anant.PMS.exceptions.ProductNotFoundException;
+import me.anant.PMS.model.ProductCategory;
 import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.http.HttpStatus;
+import org.springframework.http.MediaType;
+import org.springframework.http.ResponseEntity;
 import org.springframework.stereotype.Controller;
 import org.springframework.ui.Model;
 import org.springframework.validation.BindingResult;
-import org.springframework.web.bind.annotation.GetMapping;
-import org.springframework.web.bind.annotation.ModelAttribute;
-import org.springframework.web.bind.annotation.PostMapping;
-import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.bind.annotation.*;
 import org.springframework.web.servlet.ModelAndView;
 import org.springframework.web.servlet.mvc.support.RedirectAttributes;
 
@@ -24,7 +27,9 @@
  * This Controller is responsible for CRUD operations related to Products.
  */
 @Controller
+@RequestMapping("/admin/product")
 public class ProductController {
+
 	@Autowired
 	ProductService productService;
 	
@@ -35,101 +40,120 @@ public class ProductController {
 	 * This api is responsible to fetch the model and view for add Product.
 	 * @return ModelAndView
 	 */
-	@GetMapping("/admin/product/add")
-	public ModelAndView addView() {
-		ModelAndView modelAndView = new ModelAndView("admin/product/add");
-		modelAndView.addObject("pcList", categoryService.get());
-		modelAndView.addObject("command", new Product());
-		return modelAndView;
+	@GetMapping("/add")
+	public String addView() {
+		return "/admin/product/add";
 	}
-
+	
 	/**
 	 * This api is responsible to add Product.
-	 * @param product
-	 * @param result
-	 * @param model
-	 * @param redirectAttributes
-	 * @return String redirect path
+	 * @param productDto - product data
+	 * @return 201 created
 	 */
-	@PostMapping("/admin/product/add")
-	public String add(@ModelAttribute("command") @Valid Product product, BindingResult result, Model model, final RedirectAttributes redirectAttributes) {
-		if(result.hasErrors()) {
-			model.addAttribute("pcList", categoryService.get());
-			return "admin/product/add";
-		}
+	@PostMapping(value = "/add")
+	public ResponseEntity<Void> add(@RequestBody ProductDto productDto) {
+		Product product = new Product();
+		product.setProductName(productDto.getName());
+		product.setProductPrice(productDto.getPrice());
+		product.setProductQty(productDto.getQuantity());
+		product.setCategory(categoryService.findById(productDto.getCategory()).get());
 		productService.save(product);
-		redirectAttributes.addFlashAttribute("msg", "Product added successfully");
-		redirectAttributes.addFlashAttribute("class", "alert-success");
-		return "redirect:/admin/product/add";
+		return ResponseEntity.status(HttpStatus.CREATED).build();
 	}
 
 	/**
+	 * This endpoint returns products index page.
+	 * @return product list uri string
+	 */
+	@GetMapping
+	public String index() {
+		return "admin/product/list";
+	}
+
+  /**
 	 * This Get api is responsible to view Product List
 	 * @return ModelAndView
 	 */
-	@GetMapping("/admin/product/list")
-	public ModelAndView list() {
+	@GetMapping("/list")
+	public ResponseEntity<List<Product>> list() {
 		List<Product> pList = productService.get();
-		ModelAndView modelAndView = new ModelAndView("/admin/product/list");
-		modelAndView.addObject("pList", pList);
-		return modelAndView;
+		return ResponseEntity.ok(pList);
 	}
 
 	/**
-	 * This GET api is responsible to delete the product.
-	 * @param id
-	 * @param redirectAttributes
-	 * @return redirect path
+	 * This DELETE api is responsible to delete the product.
+	 * @param id - unique id of the product
 	 */
-	@GetMapping("/admin/product/delete")
-	public String list(@RequestParam("id") long id,
-			final RedirectAttributes redirectAttributes) {
+	@DeleteMapping("/delete/{id}")
+	public ResponseEntity<Void> list(@PathVariable("id") long id) {
 		productService.delete(id);
-		redirectAttributes.addFlashAttribute("msg", "Product deleted successfully");
-		redirectAttributes.addFlashAttribute("class", "alert-success");
-		return "redirect:/admin/product/list";
+		return ResponseEntity.status(HttpStatus.NO_CONTENT).build();
 	}
 
 	/**
 	 * This api is responsible to fetch the model and view for update Products Screen.
-	 * @param id
-	 * @return ModelAndView
+	 * @param id - unique id of the product
+	 * @return ResponseEntity
 	 */
-	@GetMapping("/admin/product/update")
-	public ModelAndView updateView(long id) throws ProductNotFoundException {
-		Optional<Product> optional = productService.findById(id);
-		Product product = optional.get();
-		ModelAndView modelAndView = new ModelAndView("admin/product/add");
-		modelAndView.addObject("command", product);
-		modelAndView.addObject("pcList", categoryService.get());
-		return modelAndView;
+	@GetMapping("/{id}")
+	public ResponseEntity<ProductDto> fetchProduct(@PathVariable long id) {
+		try {
+			Product product = productService.findById(id);
+			ProductDto dto = productService.toDto(product);
+			return ResponseEntity.ok(dto);
+		} catch (ProductNotFoundException e) {
+			return ResponseEntity.status(HttpStatus.NOT_FOUND).build();
+		}
+	}
+
+	/**
+	 * This endpoint return product add form.
+	 * @return string - product add form uri
+	 */
+	@GetMapping("/update/{id}")
+	public String showUpdateForm() {
+		return "/admin/product/add";
 	}
 
 	/**
-	 * This POST api is responsible to update the Product.
-	 * @param product
-	 * @param result
-	 * @param model
-	 * @param redirectAttributes
-	 * @return String redirect path
+	 * This PUT api is responsible to update the Product.
+	 * @return ResponseEntity
 	 */
-	@PostMapping("/admin/product/update")
-	public String updateView(@ModelAttribute("command") @Valid Product product, BindingResult result, Model model, final RedirectAttributes redirectAttributes) {
-		if(result.hasErrors()) {
-			model.addAttribute("pcList", categoryService.get());
-			return "admin/product/add";
+	@PutMapping(value = "/update", consumes = MediaType.APPLICATION_JSON_VALUE)
+	public ResponseEntity<Void> updateProduct(@RequestBody ProductDto productDto) {
+		try {
+			final Product product = productService.findById(productDto.getId());
+			product.setProductName(productDto.getName());
+			product.setProductPrice(productDto.getPrice());
+			product.setProductQty(productDto.getQuantity());
+			Optional<ProductCategory> productCategory = categoryService.findById(productDto.getCategory());
+			productCategory.ifPresent(product::setCategory);
+			productService.save(product);
+			return ResponseEntity.status(HttpStatus.OK).build();
+		} catch (ProductNotFoundException e) {
+			return ResponseEntity.status(HttpStatus.NOT_FOUND).build();
 		}
-		productService.save(product);
-		redirectAttributes.addFlashAttribute("msg", "Product Updated successfully");
-		redirectAttributes.addFlashAttribute("class", "alert-success");
-		return "redirect:/admin/product/list";
+	}
+
+	/**
+	 * This endpoint returns list of categories
+	 * @return list of categories
+	 */
+	@GetMapping("/categories")
+	public ResponseEntity<List<CategoryDto>> fetchCategories() {
+		List<ProductCategory> categories = categoryService.get();
+		List<CategoryDto> result = new ArrayList<>();
+		categories.forEach(category -> {
+			result.add(productService.toDto(category));
+		});
+		return ResponseEntity.ok(result);
 	}
 
 	/**
 	 * This api is responsible to generate report related to Product.
 	 * @return ModelAndView
 	 */
-	@GetMapping("/admin/product/report")
+	@GetMapping("/report")
 	public ModelAndView report() {
 		ModelAndView modelAndView = new ModelAndView("admin/product/report");
 		modelAndView.addObject("pList", productService.get());
diff --git a/src/main/java/me/anant/PMS/dto/CategoryDto.java b/src/main/java/me/anant/PMS/dto/CategoryDto.java
new file mode 100644
index 0000000..9b187f8
--- /dev/null
+++ b/src/main/java/me/anant/PMS/dto/CategoryDto.java
@@ -0,0 +1,23 @@
+package me.anant.PMS.dto;
+
+public class CategoryDto {
+
+    private Long id;
+    private String name;
+
+    public Long getId() {
+        return id;
+    }
+
+    public void setId(Long id) {
+        this.id = id;
+    }
+
+    public String getName() {
+        return name;
+    }
+
+    public void setName(String name) {
+        this.name = name;
+    }
+}
diff --git a/src/main/java/me/anant/PMS/dto/ProductDto.java b/src/main/java/me/anant/PMS/dto/ProductDto.java
new file mode 100644
index 0000000..3ba0502
--- /dev/null
+++ b/src/main/java/me/anant/PMS/dto/ProductDto.java
@@ -0,0 +1,50 @@
+package me.anant.PMS.dto;
+
+public class ProductDto {
+
+    private long id;
+    private String name;
+    private float price;
+    private int quantity;
+    private Long category;
+
+    public long getId() {
+        return id;
+    }
+
+    public void setId(long id) {
+        this.id = id;
+    }
+
+    public String getName() {
+        return name;
+    }
+
+    public void setName(String name) {
+        this.name = name;
+    }
+
+    public float getPrice() {
+        return price;
+    }
+
+    public void setPrice(float price) {
+        this.price = price;
+    }
+
+    public int getQuantity() {
+        return quantity;
+    }
+
+    public void setQuantity(int quantity) {
+        this.quantity = quantity;
+    }
+
+    public Long getCategory() {
+        return category;
+    }
+
+    public void setCategory(Long category) {
+        this.category = category;
+    }
+}
diff --git a/src/main/java/me/anant/PMS/model/Product.java b/src/main/java/me/anant/PMS/model/Product.java
index 0410680..75ee6e5 100644
--- a/src/main/java/me/anant/PMS/model/Product.java
+++ b/src/main/java/me/anant/PMS/model/Product.java
@@ -1,5 +1,7 @@
 package me.anant.PMS.model;
 
+import com.fasterxml.jackson.annotation.JsonIgnore;
+
 import java.util.Set;
 
 import javax.persistence.CascadeType;
@@ -36,13 +38,15 @@ public class Product {
 	@Min(value=0, message="Product quantity can not be negative")
 	@Max(value=50, message="Product quantity can be maximum 50.")
 	int productQty;
-	
+
+	@JsonIgnore
 	@OneToMany(mappedBy = "product", cascade = CascadeType.ALL)
-    Set<OrderProduct> orderProduct;
+	Set<OrderProduct> orderProduct;
 
+	@JsonIgnore
 	@ManyToOne(fetch = FetchType.LAZY)
-    ProductCategory category;
-	
+	ProductCategory category;
+
 	public Product() {
 		// TODO Auto-generated constructor stub
 	}
diff --git a/src/main/java/me/anant/PMS/service/ProductService.java b/src/main/java/me/anant/PMS/service/ProductService.java
index 38623ac..82917be 100644
--- a/src/main/java/me/anant/PMS/service/ProductService.java
+++ b/src/main/java/me/anant/PMS/service/ProductService.java
@@ -3,7 +3,10 @@
 import java.util.List;
 import java.util.Optional;
 
+import me.anant.PMS.dto.CategoryDto;
+import me.anant.PMS.dto.ProductDto;
 import me.anant.PMS.exceptions.ProductNotFoundException;
+import me.anant.PMS.model.ProductCategory;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Service;
 
@@ -15,6 +18,8 @@ public class ProductService {
 
 	@Autowired
 	ProductRepository pr;
+	@Autowired
+	private ProductCategoryService productCategoryService;
 	
 	public void save(Product product) {
 		pr.save(product);
@@ -27,26 +32,41 @@ public List<Product> get(){
 	}
 
 	public void deductQty(long id, int qty) throws ProductNotFoundException {
-
-		Optional<Product> optionalProduct = findById(id);
-		Product product = optionalProduct.get();
+		Product product = findById(id);
 		int newQty = product.getProductQty() - qty;
 		product.setProductQty(newQty);
 		pr.save(product);
 	}
 	public void addQty(long id, int qty) throws ProductNotFoundException {
-		Optional<Product> optionalProduct = findById(id);
-		Product product = optionalProduct.get();
+		Product product = findById(id);
 		int newQty = product.getProductQty() + qty;
 		product.setProductQty(newQty);
 		pr.save(product);
 	}
 
-	public Optional<Product> findById(long id) throws ProductNotFoundException {
+	public Product findById(long id) throws ProductNotFoundException {
 		Optional<Product> optionalProduct = pr.findById(id);
 		if (!optionalProduct.isPresent()) {
 			throw new ProductNotFoundException("Product not available");
 		}
-		return optionalProduct;
+		return optionalProduct.get();
+	}
+
+	public ProductDto toDto(Product product) {
+		ProductDto dto = new ProductDto();
+		dto.setId(product.getProductId());
+		dto.setName(product.getProductName());
+		dto.setPrice(product.getProductPrice());
+		dto.setQuantity(product.getProductQty());
+		dto.setCategory(product.getCategory().getId());
+		productCategoryService.get();
+		return dto;
+	}
+
+	public CategoryDto toDto(ProductCategory category) {
+		CategoryDto categoryDto = new CategoryDto();
+		categoryDto.setId(category.getId());
+		categoryDto.setName(category.getName());
+		return categoryDto;
 	}
 }
diff --git a/src/main/webapp/admin/product/add.jsp b/src/main/webapp/admin/product/add.jsp
index 7dfb76e..90c41d7 100644
--- a/src/main/webapp/admin/product/add.jsp
+++ b/src/main/webapp/admin/product/add.jsp
@@ -1,7 +1,5 @@
 <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>  
 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
-<%@page import="me.anant.PMS.model.ProductCategory"%>
-<%@page import="java.util.List"%>
 <%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1" import="me.anant.PMS.model.Product"%>
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
@@ -13,46 +11,34 @@
     <main role="main" class="container">
     <%@include file="/includes/msg.jsp"%>
     <div class="card">
-       	<c:set var="action" value="/admin/product/add"/>
-       	<c:set var="title" value="Add Product"/>
-		<c:if test="${command.productId > 0}">
-		   <c:set var="action" value="/admin/product/update"/>
-       		<c:set var="title" value="Update Product"/>
-		</c:if>
         <div class="card-header text-white shadow bg-dark">
-            <h2 class="float-left">${title}</h2>
+            <h2 id="productFormTitle" class="float-left">Add product</h2>
         </div>
-        <div class="card-body">
-            <form:form action="${action}" method="post">
-            	<form:input type="hidden" path="productId"/>
-            	<input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}" />
+        <div id="productFormHolder" class="card-body">
+            <form id="productForm" action="#">
                 <div class="form-group">
                     <label for="productName" class="control-label">Product Name</label>
-					<form:input type="text" path="productName" id="productName" cssClass="form-control" required="required"/>
-                	<small class="form-text text-muted"><font color="red"><form:errors path="productName"></form:errors></font></small>
+                    <input type="text" id="productName" class="form-control" required minlength="3"/>
+                    <span id="productNameErrorMessage" class="form-text text-muted"></span>
                 </div>
                 <div class="form-group">
                     <label for="productPrice" class="control-label">Product Price</label>
-					<form:input type="text" path="productPrice" id="productPrice" cssClass="form-control" required="required"/>
-                	<small class="form-text text-muted"><font color="red"><form:errors path="productPrice"></form:errors></font></small>
+                    <input type="text" id="productPrice" class="form-control" required min="0.1" pattern="[0-9]*\.?[0-9]+"/>
+                    <span id="productPriceErrorMessage" class="form-text text-muted"></span>
                 </div>
                 <div class="form-group">
-                    <label for="productQty" class="control-label">Product Qty</label>
-					<form:input type="text" path="productQty" id="productQty" cssClass="form-control" required="required"/>
-                	<small class="form-text text-muted"><font color="red"><form:errors path="productQty"></form:errors></font></small>
+                    <label for="productQuantity" class="control-label">Product Qty</label>
+                    <input type="text" id="productQuantity" class="form-control" required/>
+                    <span id="productQtyErrorMessage" class="form-text text-muted"></span>
                 </div>
                 <div class="form-group">
                     <label for="productCategory" class="control-label">Product Category</label>
-					<form:select path="category.id" id="productCategory" cssClass="form-control">
-						<c:forEach items="${pcList}" var="category">
-							<form:option value="${category.id}">${category.name}</form:option>
-						</c:forEach>
-					</form:select>
+                    <select id="productCategory" class="form-control"></select>
                 </div>
                 <div class="form-group">
-                    <input type="submit" class="btn btn-success btn-lg btn-block" value="${title}">
+                    <input type="submit" class="btn btn-success btn-lg btn-block" value="Save">
                 </div>
-            </form:form>
+            </form>
         </div>
     </div>
     </main>
@@ -60,5 +46,45 @@
     <br><br><br>
 
     <%@include file="/includes/footer.jsp"%>
+    <script type="application/javascript">
+        const title = document.getElementById("productFormTitle");
+        title.innerText = "Add product";
+        // window location parse /admin/update vs. /admin/update/1
+        const arr = window.location.pathname.split("/");
+        if (arr.length >= 4 && Number.isInteger(arr[4])) {
+            fetchProduct(arr[4]);
+        }
+
+        const submit = (e) => {
+            return (e) => {
+                e.preventDefault();
+                const product = {
+                    "name": document.getElementById("productName").value,
+                    "price": document.getElementById("productPrice").value,
+                    "quantity": document.getElementById("productQuantity").value,
+                    "category": document.getElementById("productCategory").value,
+                }
+                const request = new XMLHttpRequest();
+                const url = "/admin/product/add";
+                request.open('POST', url, true);
+                request.setRequestHeader("Content-Type", "application/json");
+                request.onreadystatechange = () => {
+                    if (request.readyState === 4) {
+                        if (request.status === 201) {
+                            displaySuccess("Product created successfully.");
+                            return;
+                        }
+                    }
+                }
+                request.send(JSON.stringify(product));
+            }
+        }
+
+        const form = document.getElementById("productForm");
+        if (form) {
+            form.addEventListener("submit", submit(event));
+        }
+        renderCategories(fetchCategories());
+    </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/src/main/webapp/admin/product/list.jsp b/src/main/webapp/admin/product/list.jsp
index 37acf5d..1283046 100644
--- a/src/main/webapp/admin/product/list.jsp
+++ b/src/main/webapp/admin/product/list.jsp
@@ -11,7 +11,7 @@
     <div class="card">
         <div class="card-header text-white shadow bg-dark">
             <h2 class="float-left">Product</h2>
-            <a class="anchor btn-success btn-lg float-right" href="add" style="text-decoration: none;"> <i class="fa fa-plus"></i> Add
+            <a class="anchor btn-success btn-lg float-right" href="/admin/product/add" style="text-decoration: none;"> <i class="fa fa-plus"></i> Add
                 Product
             </a>
         </div>
@@ -26,25 +26,7 @@
                         <th scope="col">Action</th>
                     </tr>
                 </thead>
-                <tbody>
-                    <%
-                    	List<Product> pl = (List<Product>) request.getAttribute("pList");
-                    	for (Product p : pl)
-                        {
-                        %>
-                        <tr>
-                            <th scope="row"><%=p.getProductId()%></th>
-                            <td><%=p.getProductName()%></td>
-                            <td>Rs. <%= p.getProductPrice() %></td>
-                            <td><%= p.getProductQty() %></td>
-                            <td>
-                            <a class="btn btn-success" href="update?id=<%=p.getProductId()%>" role="button">Edit</a>
-                            <a onclick="return confirm('Are you sure you want to delete it?');" class="btn btn-danger" href="delete?id=<%= p.getProductId() %>" role="button">Delete</a>
-                            </td>
-                        </tr>
-                        <%   
-                        }
-                    %>
+                <tbody id="products">
                 </tbody>
             </table>
         </div>
@@ -53,4 +35,4 @@
     </main>
     <%@include file="/includes/footer.jsp"%>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/src/main/webapp/includes/footer.jsp b/src/main/webapp/includes/footer.jsp
index d4d6468..4591f9f 100644
--- a/src/main/webapp/includes/footer.jsp
+++ b/src/main/webapp/includes/footer.jsp
@@ -1,32 +1,247 @@
 <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
-    pageEncoding="ISO-8859-1"%>
+         pageEncoding="ISO-8859-1" %>
 <footer class="footer fixed-bottom py-3 bg-dark text-center">
-  <div class="container">
-    <span class="text-muted">Copyright Reserver &copy; 2020</span>
-  </div>
+    <div class="container">
+        <span class="text-muted">Copyright Reserver &copy; 2020</span>
+    </div>
 </footer>
-<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
-<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
-<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
-
-<script>
-//Get the button:
-mybutton = document.getElementById("myBtn");
-
-// When the user scrolls down 20px from the top of the document, show the button
-window.onscroll = function() {scrollFunction()};
-
-function scrollFunction() {
-  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
-    mybutton.style.display = "block";
-  } else {
-    mybutton.style.display = "none";
-  }
-}
-
-// When the user clicks on the button, scroll to the top of the document
-function topFunction() {
-  document.body.scrollTop = 0; // For Safari
-  document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
-}
-</script>
\ No newline at end of file
+<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
+        integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
+        crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
+        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
+        crossorigin="anonymous"></script>
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
+        integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
+        crossorigin="anonymous"></script>
+
+<script type="text/javascript">
+    //Get the button:
+    mybutton = document.getElementById("myBtn");
+
+    // When the user scrolls down 20px from the top of the document, show the button
+    window.onscroll = function () {
+        scrollFunction()
+    };
+
+    function scrollFunction() {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            mybutton.style.display = "block";
+        } else {
+            mybutton.style.display = "none";
+        }
+    }
+
+    // When the user clicks on the button, scroll to the top of the document
+    function topFunction() {
+        document.body.scrollTop = 0; // For Safari
+        document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
+    }
+
+    const renderProducts = (products) => {
+        const container = document.getElementById("products");
+        if (container) {
+            container.innerHTML = '';
+            products.forEach(product => {
+                container.innerHTML += productTemplate(product);
+            });
+        }
+    }
+
+    const productTemplate = (product) => {
+        return `
+            <tr>
+                <th scope="row">`+product.productId+`</th>
+                <td>`+product.productName+`</td>
+                <td>`+product.productPrice+`</td>
+                <td>`+product.productQty+`</td>
+                <td>
+                    <a href="/admin/product/update/`+product.productId+`" class="btn btn-success">Edit</a>
+                    <a href='#' class="btn btn-danger" onclick="deleteProduct(`+product.productId+`)">Delete</a>
+                </td>
+            </tr>`;
+    }
+
+    const loadProducts = () => {
+        const request = new XMLHttpRequest();
+        const url = "/admin/product/list"
+        request.open('GET', url, true);
+        request.send();
+        request.onreadystatechange = () => {
+            if (request.readyState === 4 && request.status === 200) {
+                renderProducts(JSON.parse(request.response));
+            } else {
+               // TODO 404
+            }
+        }
+    }
+
+    const deleteProduct = (id) => {
+        if (confirm("Are you sure you want to delete it?")) { // TODO
+            if (Number.isSafeInteger(id)) {
+                const request = new XMLHttpRequest();
+                const url = "/admin/product/delete/" + id;
+                request.open('DELETE', url, true);
+                request.onreadystatechange = () => {
+                    if (request.readyState === 4 && request.status === 204) {
+                        displaySuccess("Product deleted successfully.");
+                    }
+                    loadProducts();
+                }
+                request.send();
+            }
+        }
+    }
+
+    const fetchProduct = (id) => {
+        const request = new XMLHttpRequest();
+        const url = "/admin/product/" + parseInt(id);
+        request.open('GET', url, true);
+        request.onreadystatechange = () => {
+            if (request.readyState === 4 && request.status === 200) {
+                const product = JSON.parse(request.response);
+                const productFormHolder = document.getElementById("productFormHolder");
+                if (productFormHolder) {
+                    productFormHolder.innerHTML = populateForm(product);
+                    const title = document.getElementById("productFormTitle");
+                    title.innerText = "Edit product";
+                    const productCategory = document.getElementById("productCategory");
+                    if (productCategory) {
+                        const categories = fetchCategories();
+                        productCategory.innerHTML += renderCategories(categories);
+                    }
+                    const form = document.getElementById("productForm");
+                    form.addEventListener("submit", submitProduct(id));
+                }
+            }
+        }
+        request.send();
+    }
+
+    const populateForm = (product) => {
+        return `
+            <form action="#" id="productForm">
+                <div class="form-group">
+                    <label for="productName" class="control-label">Product Name</label>
+                    <input type="text"
+                        id="productName"
+                        class="form-control"
+                        required minlength="3"
+                        value="`+product.name+`"/>
+                    <span id="productNameErrorMessage" class="form-text text-muted"></span>
+                </div>
+                <div class="form-group">
+                    <label for="productPrice" class="control-label">Product Price</label>
+                    <input type="text"
+                        id="productPrice"
+                        class="form-control"
+                        required min="0.1"
+                        pattern="[0-9]*\\.?[0-9]+"
+                        value="`+product.price+`"/>
+                    <span id="productPriceErrorMessage" class="form-text text-muted"></span>
+                </div>
+                <div class="form-group">
+                    <label for="productQuantity" class="control-label">Product Qty</label>
+                    <input type="text"
+                        id="productQuantity"
+                        class="form-control"
+                        required
+                        value="`+product.quantity+`"/>
+                    <span id="productQtyErrorMessage" class="form-text text-muted"></span>
+                </div>
+                <div class="form-group">
+                    <label for="productCategory" class="control-label">Product Category</label>
+                    <select id="productCategory" class="form-control">
+
+                    </select>
+                </div>
+                <div class="form-group">
+                    <input type="submit" class="btn btn-success btn-lg btn-block" value="Save">
+                </div>
+            </form>
+        `
+    }
+
+    const renderCategories = (categories) => {
+        const select = document.getElementById("productCategory");
+        if (select && categories) {
+            select.innerHTML = "";
+            categories.forEach(category => {
+                select.innerHTML += `<option value="`+category.id+`">`+category.name+`</option>`
+            });
+        }
+    }
+
+    const fetchCategories = () => {
+        const request = new XMLHttpRequest();
+        const url = "/admin/product/categories";
+        request.open('GET', url, true);
+        request.onreadystatechange = () => {
+            if (request.readyState === 4 && request.status === 200) {
+                renderCategories(JSON.parse(request.response));
+            }
+        }
+        request.send();
+    }
+
+    const submitProduct = (id) => {
+        return (e) => {
+            e.preventDefault();
+            const product = {
+                "id": id,
+                "name": document.getElementById("productName").value,
+                "price": document.getElementById("productPrice").value,
+                "quantity": document.getElementById("productQuantity").value,
+                "category": document.getElementById("productCategory").value,
+            }
+            const request = new XMLHttpRequest();
+            const url = "/admin/product/update";
+            request.open('PUT', url, true);
+            request.setRequestHeader("Content-Type", "application/json");
+            request.onreadystatechange = () => {
+                if (request.readyState === 4) {
+                    if (request.status === 200) {
+                        displaySuccess("Product updated successfully.");
+                        return;
+                    }
+                    if (request.status === 404) {
+                        displayError("Product not found.");
+                    }
+                }
+            }
+            request.send(JSON.stringify(product));
+        }
+    }
+
+    const displaySuccess = message => {
+        const successMessage = document.getElementById("successMsg");
+        if (successMessage) {
+            successMessage.innerText = message;
+            hideElement(successMessage);
+            showElement(successMessage);
+        }
+    }
+
+    const displayError = message => {
+        const errorMessage = document.getElementById("errorMsg");
+        if (errorMessage) {
+            errorMessage.innerText = message;
+            hideElement(errorMessage);
+            showElement(errorMessage);
+        }
+    }
+
+    const showElement = (element) => {
+        if (element) {
+            element.style.display = 'block';
+        }
+    }
+
+    const hideElement = (element) => {
+        if (element) {
+            element.style.display = 'none';
+        }
+    }
+
+    loadProducts();
+</script>
diff --git a/src/main/webapp/includes/header.jsp b/src/main/webapp/includes/header.jsp
index f49e017..7f5bd6b 100644
--- a/src/main/webapp/includes/header.jsp
+++ b/src/main/webapp/includes/header.jsp
@@ -9,7 +9,7 @@
         	<a class="navbar-brand" href="/">PMS</a>
         </sec:authorize>
         <sec:authorize access="hasRole('ADMIN')">
-        	<a class="navbar-brand" href="/admin/product/list">PMS</a>
+        	<a class="navbar-brand" href="/admin/product">PMS</a>
         </sec:authorize>
         <sec:authorize access="hasRole('CUSTOMER')">
         	<a class="navbar-brand" href="/customer/order_place">PMS</a>
@@ -22,9 +22,9 @@
         <div class="collapse navbar-collapse" id="navbarSupportedContent">
         	<ul class="navbar-nav mr-auto">
 	            <sec:authorize access="hasRole('ADMIN')">
-                	<li class="nav-item"><a class="nav-link" href="/admin/product/list">Product</a></li>
-					<li class="nav-item"><a class="nav-link" href="/admin/order/list">Order</a></li>
-					<li class="nav-item"><a class="nav-link" href="/admin/product_category/list">Category</a></li>
+                  <li class="nav-item"><a class="nav-link" href="/admin/product">Product</a></li>                	
+		    			    <li class="nav-item"><a class="nav-link" href="/admin/order/list">Order</a></li>
+				        	<li class="nav-item"><a class="nav-link" href="/admin/product_category/list">Category</a></li>
                 	<li class="nav-item"><a class="nav-link" href="/admin/product/report">Product Report</a></li>
                 	<li class="nav-item"><a class="nav-link" href="/admin/category/list">Category Report</a></li>
                 </sec:authorize>
diff --git a/src/main/webapp/includes/msg.jsp b/src/main/webapp/includes/msg.jsp
index c14ccd3..fbf25a9 100644
--- a/src/main/webapp/includes/msg.jsp
+++ b/src/main/webapp/includes/msg.jsp
@@ -1,7 +1,9 @@
 <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
-    pageEncoding="ISO-8859-1"%>
+         pageEncoding="ISO-8859-1"%>
 <%
 if(request.getAttribute("msg") != null) {
     out.write("<div class='alert "+request.getAttribute("class")+"'>"+request.getAttribute("msg")+"</div>");
 }
-%>
\ No newline at end of file
+%>
+<div id="successMsg" class="alert alert-success" style="display: none;"></div>
+<div id="errorMsg" class="alert alert-danger" style="display: none;"></div>