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/ProductController.java b/src/main/java/me/anant/PMS/controller/ProductController.java
index a770ffb..3957fbd 100644
--- a/src/main/java/me/anant/PMS/controller/ProductController.java
+++ b/src/main/java/me/anant/PMS/controller/ProductController.java
@@ -1,18 +1,15 @@
 package me.anant.PMS.controller;
 
-import java.util.List;
-import java.util.Optional;
+import java.util.*;
 
 import javax.validation.Valid;
 
 import org.springframework.beans.factory.annotation.Autowired;
+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;
 
@@ -21,6 +18,7 @@
 import me.anant.PMS.service.ProductService;
 
 @Controller
+@RequestMapping("/admin/product")
 public class ProductController {
 	@Autowired
 	ProductService productService;
@@ -28,7 +26,7 @@ public class ProductController {
 	@Autowired
 	ProductCategoryService categoryService;
 	
-	@GetMapping("/admin/product/add")
+	@GetMapping("/add")
 	public ModelAndView addView() {
 		ModelAndView modelAndView = new ModelAndView("admin/product/add");
 		modelAndView.addObject("pcList", categoryService.get());
@@ -36,7 +34,7 @@ public ModelAndView addView() {
 		return modelAndView;
 	}
 	
-	@PostMapping("/admin/product/add")
+	@PostMapping("/add")
 	public String add(@ModelAttribute("command") @Valid Product product, BindingResult result, Model model, final RedirectAttributes redirectAttributes) {
 		if(result.hasErrors()) {
 			model.addAttribute("pcList", categoryService.get());
@@ -47,13 +45,16 @@ public String add(@ModelAttribute("command") @Valid Product product, BindingResu
 		redirectAttributes.addFlashAttribute("class", "alert-success");
 		return "redirect:/admin/product/add";
 	}
-	
-	@GetMapping("/admin/product/list")
-	public ModelAndView list() {
+
+	@GetMapping
+	public String index() {
+		return "admin/product/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);
 	}
 	
 	@GetMapping("/admin/product/delete")
@@ -87,7 +88,7 @@ public String updateView(@ModelAttribute("command") @Valid Product product, Bind
 		return "redirect:/admin/product/list";
 	}
 	
-	@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/model/Product.java b/src/main/java/me/anant/PMS/model/Product.java
index 4d3fa01..631e57d 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;
@@ -33,13 +35,14 @@ 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;
-	
+
 	@OneToMany(mappedBy = "product", cascade = CascadeType.ALL)
     Set<OrderProduct> orderProduct;
 
+	@JsonIgnore
 	@ManyToOne(fetch = FetchType.LAZY)
-    ProductCategory category;
-	
+	ProductCategory category;
+
 	public Product() {
 		// TODO Auto-generated constructor stub
 	}
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..b8b354b 100644
--- a/src/main/webapp/includes/footer.jsp
+++ b/src/main/webapp/includes/footer.jsp
@@ -1,32 +1,77 @@
 <%@ 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
+    }
+
+    function renderProducts(products) {
+        const container = document.getElementById("products");
+        products.forEach(product => {
+            container.innerHTML += productTemplate(product);
+        });
+    }
+
+    function 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='#' class="btn btn-success" onclick="">Edit</a>
+                    <a href='#' class="btn btn-danger" onclick="">Delete</a>
+                </td>
+            </tr>`;
+    }
+
+    function loadProducts() {
+        const request = new XMLHttpRequest();
+        const url = "/admin/product/list"
+        request.open('GET', url, true);
+        console.log("Calling home...");
+        request.send();
+        request.onreadystatechange = () => {
+            if (request.readyState === 4 && request.status === 200) {
+                console.log(JSON.parse(request.response));
+                renderProducts(JSON.parse(request.response));
+            }
+        }
+    }
+
+    loadProducts();
+</script>
diff --git a/src/main/webapp/includes/header.jsp b/src/main/webapp/includes/header.jsp
index 8ad0295..88a06e7 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,7 +22,7 @@
         <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/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/report">Product Report</a></li>
                 	<li class="nav-item"><a class="nav-link" href="/admin/category/list">Category Report</a></li>
diff --git a/src/main/webapp/includes/msg.jsp b/src/main/webapp/includes/msg.jsp
index c14ccd3..2f0a894 100644
--- a/src/main/webapp/includes/msg.jsp
+++ b/src/main/webapp/includes/msg.jsp
@@ -1,7 +1,23 @@
+<%@ page import="java.util.Arrays" %>
+<%@ page import="java.util.stream.Collectors" %>
 <%@ 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
+
+if(Arrays.stream(request.getCookies()).anyMatch(cookie -> "msg".equals(cookie.getName()))) {
+    String message = Arrays.stream(request.getCookies())
+            .filter(cookie -> "msg".equals(cookie.getName()))
+            .collect(Collectors.toList())
+            .get(0).toString();
+    String messageClass = Arrays.stream(request.getCookies())
+            .filter(cookie -> "msgClass".equals(cookie.getName()))
+            .collect(Collectors.toList())
+            .get(0).toString();
+
+    out.write("<div class='alert "+messageClass+"'>"+message+"</div>");
+}
+
+%>