diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..a0eeb2f
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "python.pythonPath": "C:\\Users\\jaikumar singh\\AppData\\Local\\Programs\\Python\\Python39\\python.exe"
+}
\ No newline at end of file
diff --git a/addNewProduct.JPG b/addNewProduct.JPG
new file mode 100644
index 0000000..07ca167
Binary files /dev/null and b/addNewProduct.JPG differ
diff --git a/backend/orders_dao.py b/backend/orders_dao.py
index c088dd7..1d61c1c 100644
--- a/backend/orders_dao.py
+++ b/backend/orders_dao.py
@@ -1,12 +1,13 @@
 from datetime import datetime
 from sql_connection import get_sql_connection
 
+
 def insert_order(connection, order):
     cursor = connection.cursor()
 
     order_query = ("INSERT INTO orders "
-             "(customer_name, total, datetime)"
-             "VALUES (%s, %s, %s)")
+                   "(customer_name, total, datetime)"
+                   "VALUES (%s, %s, %s)")
     order_data = (order['customer_name'], order['grand_total'], datetime.now())
 
     cursor.execute(order_query, order_data)
@@ -30,6 +31,7 @@ def insert_order(connection, order):
 
     return order_id
 
+
 def get_order_details(connection, order_id):
     cursor = connection.cursor()
 
@@ -57,6 +59,7 @@ def get_order_details(connection, order_id):
 
     return records
 
+
 def get_all_orders(connection):
     cursor = connection.cursor()
     query = ("SELECT * FROM orders")
@@ -74,10 +77,12 @@ def get_all_orders(connection):
 
     # append order details in each order
     for record in response:
-        record['order_details'] = get_order_details(connection, record['order_id'])
+        record['order_details'] = get_order_details(
+            connection, record['order_id'])
 
     return response
 
+
 if __name__ == '__main__':
     connection = get_sql_connection()
     print(get_all_orders(connection))
@@ -98,4 +103,4 @@ def get_all_orders(connection):
     #             'total_price': 30
     #         }
     #     ]
-    # }))
\ No newline at end of file
+    # }))
diff --git a/backend/server.py b/backend/server.py
index 3545457..1fd6b51 100644
--- a/backend/server.py
+++ b/backend/server.py
@@ -11,6 +11,7 @@
 
 connection = get_sql_connection()
 
+
 @app.route('/getUOM', methods=['GET'])
 def get_uom():
     response = uom_dao.get_uoms(connection)
@@ -18,6 +19,7 @@ def get_uom():
     response.headers.add('Access-Control-Allow-Origin', '*')
     return response
 
+
 @app.route('/getProducts', methods=['GET'])
 def get_products():
     response = products_dao.get_all_products(connection)
@@ -25,6 +27,7 @@ def get_products():
     response.headers.add('Access-Control-Allow-Origin', '*')
     return response
 
+
 @app.route('/insertProduct', methods=['POST'])
 def insert_product():
     request_payload = json.loads(request.form['data'])
@@ -35,6 +38,7 @@ def insert_product():
     response.headers.add('Access-Control-Allow-Origin', '*')
     return response
 
+
 @app.route('/getAllOrders', methods=['GET'])
 def get_all_orders():
     response = orders_dao.get_all_orders(connection)
@@ -42,6 +46,17 @@ def get_all_orders():
     response.headers.add('Access-Control-Allow-Origin', '*')
     return response
 
+
+@app.route('/getOrderDetails', methods=['GET', 'POST'])
+def get_order_details():
+    order_id = int(request.args.get('orderid'))
+    response = orders_dao.get_order_details(
+        connection, order_id)
+    response = jsonify(response)
+    response.headers.add('Access-Control-Allow-Origin', '*')
+    return response
+
+
 @app.route('/insertOrder', methods=['POST'])
 def insert_order():
     request_payload = json.loads(request.form['data'])
@@ -52,16 +67,18 @@ def insert_order():
     response.headers.add('Access-Control-Allow-Origin', '*')
     return response
 
+
 @app.route('/deleteProduct', methods=['POST'])
 def delete_product():
-    return_id = products_dao.delete_product(connection, request.form['product_id'])
+    return_id = products_dao.delete_product(
+        connection, request.form['product_id'])
     response = jsonify({
         'product_id': return_id
     })
     response.headers.add('Access-Control-Allow-Origin', '*')
     return response
 
+
 if __name__ == "__main__":
     print("Starting Python Flask Server For Grocery Store Management System")
     app.run(port=5000)
-
diff --git a/backend/sql_connection.py b/backend/sql_connection.py
index 890532a..805a615 100644
--- a/backend/sql_connection.py
+++ b/backend/sql_connection.py
@@ -3,12 +3,13 @@
 
 __cnx = None
 
-def get_sql_connection():
-  print("Opening mysql connection")
-  global __cnx
 
-  if __cnx is None:
-    __cnx = mysql.connector.connect(user='root', password='root', database='grocery_store')
+def get_sql_connection():
+    print("Opening mysql connection")
+    global __cnx
 
-  return __cnx
+    if __cnx is None:
+        __cnx = mysql.connector.connect(
+            user='root', password='Mysql@0707', database='grocery_store')
 
+    return __cnx
diff --git a/homepage.JPG b/homepage.JPG
index ef4c8a8..9f3506a 100644
Binary files a/homepage.JPG and b/homepage.JPG differ
diff --git a/manageProductsPags.JPG b/manageProductsPags.JPG
new file mode 100644
index 0000000..dccd42d
Binary files /dev/null and b/manageProductsPags.JPG differ
diff --git a/newOrderPage.JPG b/newOrderPage.JPG
new file mode 100644
index 0000000..e6d3400
Binary files /dev/null and b/newOrderPage.JPG differ
diff --git a/orderDetailsPage.JPG b/orderDetailsPage.JPG
new file mode 100644
index 0000000..0f965e7
Binary files /dev/null and b/orderDetailsPage.JPG differ
diff --git a/ui/css/custom.css b/ui/css/custom.css
index 30ecaf6..e8c4739 100644
--- a/ui/css/custom.css
+++ b/ui/css/custom.css
@@ -2665,7 +2665,7 @@ button.close:focus {
 }
 
 *, .header.sidebar .logo h1, body, h1, h2, h3, h4, h5, h6 {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+    font-family: Georgia, serif,-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
     outline: none !important;
 }
 
@@ -2753,6 +2753,7 @@ input:focus, textarea:focus {
     width: 100%;
     max-width: 100%;
     margin-bottom: 21px
+    
 }
 
 .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
diff --git a/ui/css/style.css b/ui/css/style.css
index 24524d9..3cc6584 100644
--- a/ui/css/style.css
+++ b/ui/css/style.css
@@ -3,4 +3,4 @@
 * bootstrap-notifications v1.0.3 (https://skywalkapps.github.io/bootstrap-notifications)
 * Copyright 2017 Martin Staněk
 * Licensed under MIT
-*/.dropdown-container{position:absolute;top:100%;left:0;z-index:1000;display:none;float:left;min-width:200px;max-width:330px;margin:2px 0 0;list-style:none;font-size:14px;background-color:#fff;border:1px solid #ccc;border:1px solid rgba(0,0,0,0.15);border-radius:4px;-webkit-box-shadow:0 6px 12px rgba(0,0,0,0.175);box-shadow:0 6px 12px rgba(0,0,0,0.175);background-clip:padding-box}.dropdown-container>.dropdown-menu{position:static;z-index:1000;float:none !important;padding:10px 0;margin:0;border:0;background:transparent;border-radius:0;-webkit-box-shadow:none;box-shadow:none;max-height:330px;overflow-y:auto}.dropdown-container>.dropdown-menu+.dropdown-menu{padding-top:0}.dropdown-menu>li>a{overflow:hidden;white-space:nowrap;word-wrap:normal;text-decoration:none;text-overflow:ellipsis;-o-text-overflow:ellipsis;-webkit-transition:none;-o-transition:none;transition:none}.dropdown-toggle{cursor:pointer}.dropdown-header{white-space:nowrap}.open>.dropdown-container>.dropdown-menu,.open>.dropdown-container{display:block}.dropdown-toolbar{padding-top:6px;padding-left:20px;padding-right:20px;padding-bottom:5px;background-color:#fff;border-bottom:1px solid rgba(0,0,0,0.15);border-radius:4px 4px 0 0}.dropdown-toolbar>.form-group{margin:5px -10px}.dropdown-toolbar .dropdown-toolbar-actions{float:right}.dropdown-toolbar .dropdown-toolbar-title{margin:0;font-size:14px}.dropdown-footer{padding:5px 20px;border-top:1px solid #ccc;border-top:1px solid rgba(0,0,0,0.15);border-radius:0 0 4px 4px}.anchor-block small{display:none}@media (min-width:992px){.anchor-block small{display:block;font-weight:normal;color:#777777}.dropdown-menu>li>a.anchor-block{padding-top:6px;padding-bottom:6px}}@media (min-width:992px){.dropdown.hoverable:hover>ul{display:block}}.dropdown-position-topright{top:auto;right:0;bottom:100%;left:auto;margin-bottom:2px}.dropdown-position-topleft{top:auto;right:auto;bottom:100%;left:0;margin-bottom:2px}.dropdown-position-bottomright{right:0;left:auto}.dropmenu-item-label{white-space:nowrap}.dropmenu-item-content{position:absolute;text-align:right;max-width:60px;right:20px;color:#777777;overflow:hidden;white-space:nowrap;word-wrap:normal;-o-text-overflow:ellipsis;text-overflow:ellipsis}small.dropmenu-item-content{line-height:20px}.dropdown-menu>li>a.dropmenu-item{position:relative;padding-right:66px}.dropdown-submenu .dropmenu-item-content{right:40px}.dropdown-menu>li.dropdown-submenu>a.dropmenu-item{padding-right:86px}.dropdown-inverse .dropdown-menu{background-color:rgba(0,0,0,0.8);border:1px solid rgba(0,0,0,0.9)}.dropdown-inverse .dropdown-menu .divider{height:1px;margin:9px 0;overflow:hidden;background-color:#2b2b2b}.dropdown-inverse .dropdown-menu>li>a{color:#cccccc}.dropdown-inverse .dropdown-menu>li>a:hover,.dropdown-inverse .dropdown-menu>li>a:focus{color:#fff;background-color:#262626}.dropdown-inverse .dropdown-menu>.active>a,.dropdown-inverse .dropdown-menu>.active>a:hover,.dropdown-inverse .dropdown-menu>.active>a:focus{color:#fff;background-color:#337ab7}.dropdown-inverse .dropdown-menu>.disabled>a,.dropdown-inverse .dropdown-menu>.disabled>a:hover,.dropdown-inverse .dropdown-menu>.disabled>a:focus{color:#777777}.dropdown-inverse .dropdown-header{color:#777777}.table>thead>tr>th.col-actions{padding-top:0;padding-bottom:0}.table>thead>tr>th.col-actions .dropdown-toggle{color:#777777}.notifications{list-style:none;padding:0}.notification{display:block;padding:9.6px 12px;border-width:0 0 1px 0;border-style:solid;border-color:#eeeeee;background-color:#fff;color:#333333;text-decoration:none}.notification:last-child{border-bottom:0}.notification:hover,.notification.active:hover{background-color:#f9f9f9;border-color:#eeeeee}.notification.active{background-color:#f4f4f4}a.notification:hover{text-decoration:none}.notification-title{font-size:15px;margin-bottom:0}.notification-desc{margin-bottom:0}.notification-meta{color:#777777}.dropdown-notifications>.dropdown-container,.dropdown-notifications>.dropdown-menu{width:450px;max-width:450px}.dropdown-notifications .dropdown-menu{padding:0}.dropdown-notifications .dropdown-toolbar,.dropdown-notifications .dropdown-footer{padding:9.6px 12px}.dropdown-notifications .dropdown-toolbar{background:#fff}.dropdown-notifications .dropdown-footer{background:#eeeeee}.notification-icon{margin-right:6.8775px}.notification-icon:after{position:absolute;content:attr(data-count);margin-left:-6.8775px;margin-top:-6.8775px;padding:0 4px;min-width:13.755px;height:13.755px;line-height:13.755px;background:red;border-radius:10px;color:#fff;text-align:center;vertical-align:middle;font-size:11.004px;font-weight:600;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif}.notification .media-body{padding-top:5.6px}.btn-lg .notification-icon:after{margin-left:-8.253px;margin-top:-8.253px;min-width:16.506px;height:16.506px;line-height:16.506px;font-size:13.755px}.btn-xs .notification-icon:after{content:'';margin-left:-4.1265px;margin-top:-2.06325px;min-width:6.25227273px;height:6.25227273px;line-height:6.25227273px;padding:0}.btn-xs .notification-icon{margin-right:3.43875px}
\ No newline at end of file
+*/.dropdown-container{position:absolute;top:100%;left:0;z-index:1000;display:none;float:left;min-width:200px;max-width:330px;margin:2px 0 0;list-style:none;font-size:14px;background-color:#fff;border:1px solid #ccc;border:1px solid rgba(0,0,0,0.15);border-radius:4px;-webkit-box-shadow:0 6px 12px rgba(0,0,0,0.175);box-shadow:0 6px 12px rgba(0,0,0,0.175);background-clip:padding-box}.dropdown-container>.dropdown-menu{position:static;z-index:1000;float:none !important;padding:10px 0;margin:0;border:0;background:transparent;border-radius:0;-webkit-box-shadow:none;box-shadow:none;max-height:330px;overflow-y:auto}.dropdown-container>.dropdown-menu+.dropdown-menu{padding-top:0}.dropdown-menu>li>a{overflow:hidden;white-space:nowrap;word-wrap:normal;text-decoration:none;text-overflow:ellipsis;-o-text-overflow:ellipsis;-webkit-transition:none;-o-transition:none;transition:none}.dropdown-toggle{cursor:pointer}.dropdown-header{white-space:nowrap}.open>.dropdown-container>.dropdown-menu,.open>.dropdown-container{display:block}.dropdown-toolbar{padding-top:6px;padding-left:20px;padding-right:20px;padding-bottom:5px;background-color:#fff;border-bottom:1px solid rgba(0,0,0,0.15);border-radius:4px 4px 0 0}.dropdown-toolbar>.form-group{margin:5px -10px}.dropdown-toolbar .dropdown-toolbar-actions{float:right}.dropdown-toolbar .dropdown-toolbar-title{margin:0;font-size:14px}.dropdown-footer{padding:5px 20px;border-top:1px solid #ccc;border-top:1px solid rgba(0,0,0,0.15);border-radius:0 0 4px 4px}.anchor-block small{display:none}@media (min-width:992px){.anchor-block small{display:block;font-weight:normal;color:#777777}.dropdown-menu>li>a.anchor-block{padding-top:6px;padding-bottom:6px}}@media (min-width:992px){.dropdown.hoverable:hover>ul{display:block}}.dropdown-position-topright{top:auto;right:0;bottom:100%;left:auto;margin-bottom:2px}.dropdown-position-topleft{top:auto;right:auto;bottom:100%;left:0;margin-bottom:2px}.dropdown-position-bottomright{right:0;left:auto}.dropmenu-item-label{white-space:nowrap}.dropmenu-item-content{position:absolute;text-align:right;max-width:60px;right:20px;color:#777777;overflow:hidden;white-space:nowrap;word-wrap:normal;-o-text-overflow:ellipsis;text-overflow:ellipsis}small.dropmenu-item-content{line-height:20px}.dropdown-menu>li>a.dropmenu-item{position:relative;padding-right:66px}.dropdown-submenu .dropmenu-item-content{right:40px}.dropdown-menu>li.dropdown-submenu>a.dropmenu-item{padding-right:86px}.dropdown-inverse .dropdown-menu{background-color:rgba(0,0,0,0.8);border:1px solid rgba(0,0,0,0.9)}.dropdown-inverse .dropdown-menu .divider{height:1px;margin:9px 0;overflow:hidden;background-color:#2b2b2b}.dropdown-inverse .dropdown-menu>li>a{color:#cccccc}.dropdown-inverse .dropdown-menu>li>a:hover,.dropdown-inverse .dropdown-menu>li>a:focus{color:#fff;background-color:#262626}.dropdown-inverse .dropdown-menu>.active>a,.dropdown-inverse .dropdown-menu>.active>a:hover,.dropdown-inverse .dropdown-menu>.active>a:focus{color:#fff;background-color:#337ab7}.dropdown-inverse .dropdown-menu>.disabled>a,.dropdown-inverse .dropdown-menu>.disabled>a:hover,.dropdown-inverse .dropdown-menu>.disabled>a:focus{color:#777777}.dropdown-inverse .dropdown-header{color:#777777}.table>thead>tr>th.col-actions{padding-top:0;padding-bottom:0}.table>thead>tr>th.col-actions .dropdown-toggle{color:#777777}.notifications{list-style:none;padding:0}.notification{display:block;padding:9.6px 12px;border-width:0 0 1px 0;border-style:solid;border-color:#eeeeee;background-color:#fff;color:#333333;text-decoration:none}.notification:last-child{border-bottom:0}.notification:hover,.notification.active:hover{background-color:#f9f9f9;border-color:#eeeeee}.notification.active{background-color:#f4f4f4}a.notification:hover{text-decoration:none}.notification-title{font-size:15px;margin-bottom:0}.notification-desc{margin-bottom:0}.notification-meta{color:#777777}.dropdown-notifications>.dropdown-container,.dropdown-notifications>.dropdown-menu{width:450px;max-width:450px}.dropdown-notifications .dropdown-menu{padding:0}.dropdown-notifications .dropdown-toolbar,.dropdown-notifications .dropdown-footer{padding:9.6px 12px}.dropdown-notifications .dropdown-toolbar{background:#fff}.dropdown-notifications .dropdown-footer{background:#eeeeee}.notification-icon{margin-right:6.8775px}.notification-icon:after{position:absolute;content:attr(data-count);margin-left:-6.8775px;margin-top:-6.8775px;padding:0 4px;min-width:13.755px;height:13.755px;line-height:13.755px;background:red;border-radius:10px;color:#fff;text-align:center;vertical-align:middle;font-size:11.004px;font-weight:600;font-family:Georgia, serif,"Helvetica Neue",Helvetica,Arial,sans-serif}.notification .media-body{padding-top:5.6px}.btn-lg .notification-icon:after{margin-left:-8.253px;margin-top:-8.253px;min-width:16.506px;height:16.506px;line-height:16.506px;font-size:13.755px}.btn-xs .notification-icon:after{content:'';margin-left:-4.1265px;margin-top:-2.06325px;min-width:6.25227273px;height:6.25227273px;line-height:6.25227273px;padding:0}.btn-xs .notification-icon{margin-right:3.43875px}
\ No newline at end of file
diff --git a/ui/images/bg.jpg b/ui/images/bg.jpg
index c76664b..cc4437d 100644
Binary files a/ui/images/bg.jpg and b/ui/images/bg.jpg differ
diff --git a/ui/index.html b/ui/index.html
index e1368f1..347677f 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -1,99 +1,106 @@
-
 <!DOCTYPE html>
 <html>
-    <head>
-        <title> GSMS </title>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
-        <meta name="apple-mobile-web-app-capable" content="yes"/>
-        <meta name="csrf-token" content="kmapods5wQ5L1hn7rcR9OPst7EsN0gC7SrHh3m9K"/>
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css">
-        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,300,600,700">
-        <link media="all" type="text/css" rel="stylesheet" href="css/bootstrap.min.css">
-        <link media="all" type="text/css" rel="stylesheet" href="css/style.css?v=1.0">
-        <link media="all" type="text/css" rel="stylesheet" href="css/sidebar-menu.css?v=1.0">
-        <link media="all" type="text/css" rel="stylesheet" href="css/custom.css?v=1.3.3">
-    </head>
-    <body class="tooltips">
-        <div class="container">
 
-            <div class="header content rows-content-header">
-                <button class="button-menu-mobile show-sidebar">
-                    <i class="fa fa-bars"></i>
-                </button>
-                <div class="navbar navbar-default" role="navigation">
-                    <div class="container">
+<head>
+    <title> Grocery Store </title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="csrf-token" content="kmapods5wQ5L1hn7rcR9OPst7EsN0gC7SrHh3m9K" />
+    <link rel="stylesheet"
+        href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,300,600,700">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
+    <link media="all" type="text/css" rel="stylesheet" href="css/bootstrap.min.css">
+    <link media="all" type="text/css" rel="stylesheet" href="css/style.css?v=1.0">
+    <link media="all" type="text/css" rel="stylesheet" href="css/sidebar-menu.css?v=1.0">
+    <link media="all" type="text/css" rel="stylesheet" href="css/custom.css?v=1.3.3">
+</head>
 
-                        <div class="navbar-collapse collapse">
-                            <ul class="nav navbar-nav visible-lg visible-md limit-chars">
-                                <ul class="breadcrumb">
-                                    <a href="index.html">
-                                        <i class="zmdi zmdi-view-dashboard zmdi-hc-fw" title="Orders"></i>
-                                    </a>
-                                    <a href="manage-product.html">
-                                        <i class="zmdi zmdi-assignment zmdi-hc-fw" title="Products"></i>
-                                    </a>
-                                </ul>
+<body class="tooltips">
+    <div class="container">
+
+        <div class="header content rows-content-header">
+            <button class="button-menu-mobile show-sidebar">
+                <i class="fa fa-bars"></i>
+            </button>
+            <div class="navbar navbar-default " role="navigation">
+                <div class="container">
+
+                    <div class="navbar-collapse collapse">
+                        <ul class="nav navbar-nav visible-lg visible-md limit-chars">
+                            <ul class="breadcrumb">
+                                <a href="index.html">
+                                    <i class="zmdi zmdi-view-dashboard zmdi-hc-fw" title="Orders"></i>
+                                </a>
+                                <a href="manage-product.html">
+                                    <i class="zmdi zmdi-assignment zmdi-hc-fw" title="Products"></i>
+                                </a>
                             </ul>
-                        </div>
+                        </ul>
                     </div>
                 </div>
             </div>
+        </div>
 
-            <div class="right content-page">
-                <div class="body content rows scroll-y">
-                    <form class="form-horizontal" action="">
-                        <div class="box-info full" id="taskFormContainer">
-                            <h2>Grocery Store Management System</h2>
-                            <div class="panel-body pt-0">
-                                <div class="row mb-4">
-                                    <div class="col-sm-12">
-                                        <a href="order.html" class="btn btn-sm btn-primary pull-right ml-3">
-                                            New Order
-                                        </a>
-                                        <a href="manage-product.html" class="btn btn-sm btn-primary pull-right">
-                                            Manage Products
-                                        </a>
-                                    </div>
+        <div class="right content-page">
+            <div class="body content rows scroll-y">
+                <form class="form-horizontal" action="">
+                    <div class="box-info full" id="taskFormContainer">
+                        <h2>Grocery Store Management System</h2>
+                        <div class="panel-body pt-0">
+                            <div class="row mb-4">
+                                <div class="col-sm-12">
+                                    <a href="order.html" class="btn btn-sm btn-primary pull-right ml-3">
+                                        New Order
+                                    </a>
+                                    <a href="manage-product.html" class="btn btn-sm btn-primary pull-right">
+                                        Manage Products
+                                    </a>
                                 </div>
-                                <table class="table table-bordered">
-                                    <thead>
-                                        <th>Date</th>
-                                        <th>Order Number</th>
-                                        <th>Customer Name</th>
-                                        <th>Total Cost</th>
-                                    </thead>
-                                    <tbody>
-
-                                    </tbody>
-                                </table>
                             </div>
+                            <table class="table table-bordered">
+                                <thead>
+                                    <th>Date</th>
+                                    <th>Order Number</th>
+                                    <th>Customer Name</th>
+                                    <th>Total Cost</th>
+                                    <th>Details</th>
+                                </thead>
+                                <tbody>
+
+                                </tbody>
+                            </table>
                         </div>
-                    </form>
-                    <div class="modal " id="userProfileModal" role="dialog" >
-                        <div class="modal-dialog">
-                            <div class="modal-content">
-                                <div class="modal-body text-center">
-                                </div>
+                    </div>
+                </form>
+                <div class="modal " id="userProfileModal" role="dialog">
+                    <div class="modal-dialog">
+                        <div class="modal-content">
+                            <div class="modal-body text-center">
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
+        </div>
 
-            <div class="modal fade-scale" id="myModal" role="dialog" data-backdrop="static">
-                <div class="modal-dialog modal-lg">
-                    <div class="modal-content">
-                        <div class="modal-body text-center">
-                            <img src="https://demo.test.cloint.com/assets/images/spinner.gif" width="40" style="margin: 60px auto;" alt="">
-                        </div>
+        <div class="modal fade-scale" id="myModal" role="dialog" data-backdrop="static">
+            <div class="modal-dialog modal-lg">
+                <div class="modal-content">
+                    <div class="modal-body text-center">
+                        <img src="https://demo.test.cloint.com/assets/images/spinner.gif" width="40"
+                            style="margin: 60px auto;" alt="">
                     </div>
                 </div>
             </div>
         </div>
-    </body>
-    
-    <script src="js/packages/jquery.min.js"></script>
-    <script src="js/custom/common.js"></script>
-    <script src="js/custom/dashboard.js"></script>
-</html>
+    </div>
+</body>
+
+<script src="js/packages/jquery.min.js"></script>
+<script src="js/custom/common.js"></script>
+<script src="js/custom/dashboard.js"></script>
+
+</html>
\ No newline at end of file
diff --git a/ui/js/custom/common.js b/ui/js/custom/common.js
index 3786b9a..75bb069 100644
--- a/ui/js/custom/common.js
+++ b/ui/js/custom/common.js
@@ -5,7 +5,7 @@ var productSaveApiUrl = 'http://127.0.0.1:5000/insertProduct';
 var productDeleteApiUrl = 'http://127.0.0.1:5000/deleteProduct';
 var orderListApiUrl = 'http://127.0.0.1:5000/getAllOrders';
 var orderSaveApiUrl = 'http://127.0.0.1:5000/insertOrder';
-
+var orderDetailsApiUrl = 'http://127.0.0.1:5000/getOrderDetails';
 // For product drop in order
 var productsApiUrl = 'https://fakestoreapi.com/products';
 
@@ -14,17 +14,17 @@ function callApi(method, url, data) {
         method: method,
         url: url,
         data: data
-    }).done(function( msg ) {
+    }).done(function (msg) {
         window.location.reload();
     });
 }
 
 function calculateValue() {
     var total = 0;
-    $(".product-item").each(function( index ) {
+    $(".product-item").each(function (index) {
         var qty = parseFloat($(this).find('.product-qty').val());
         var price = parseFloat($(this).find('#product_price').val());
-        price = price*qty;
+        price = price * qty;
         $(this).find('#item_total').val(price.toFixed(2));
         total += price;
     });
@@ -33,27 +33,27 @@ function calculateValue() {
 
 function orderParser(order) {
     return {
-        id : order.id,
-        date : order.employee_name,
-        orderNo : order.employee_name,
-        customerName : order.employee_name,
-        cost : parseInt(order.employee_salary)
+        id: order.id,
+        date: order.employee_name,
+        orderNo: order.employee_name,
+        customerName: order.employee_name,
+        cost: parseInt(order.employee_salary)
     }
 }
 
 function productParser(product) {
     return {
-        id : product.id,
-        name : product.employee_name,
-        unit : product.employee_name,
-        price : product.employee_name
+        id: product.id,
+        name: product.employee_name,
+        unit: product.employee_name,
+        price: product.employee_name
     }
 }
 
 function productDropParser(product) {
     return {
-        id : product.id,
-        name : product.title
+        id: product.id,
+        name: product.title
     }
 }
 
diff --git a/ui/js/custom/dashboard.js b/ui/js/custom/dashboard.js
index b5a1d13..abecefd 100644
--- a/ui/js/custom/dashboard.js
+++ b/ui/js/custom/dashboard.js
@@ -1,19 +1,43 @@
 $(function () {
-    //Json data by api call for order table
-    $.get(orderListApiUrl, function (response) {
-        if(response) {
-            var table = '';
-            var totalCost = 0;
-            $.each(response, function(index, order) {
-                totalCost += parseFloat(order.total);
-                table += '<tr>' +
-                    '<td>'+ order.datetime +'</td>'+
-                    '<td>'+ order.order_id +'</td>'+
-                    '<td>'+ order.customer_name +'</td>'+
-                    '<td>'+ order.total.toFixed(2) +' Rs</td></tr>';
-            });
-            table += '<tr><td colspan="3" style="text-align: end"><b>Total</b></td><td><b>'+ totalCost.toFixed(2) +' Rs</b></td></tr>';
-            $("table").find('tbody').empty().html(table);
-        }
-    });
-});
\ No newline at end of file
+  //Json data by api call for order table
+  $.get(orderListApiUrl, function (response) {
+    if (response) {
+      var table = "";
+      var totalCost = 0;
+      $.each(response, function (index, order) {
+        totalCost += parseFloat(order.total);
+        table +=
+          '<tr data-id="' +
+          order.order_id +
+          '">' +
+          "<td>" +
+          order.datetime +
+          "</td>" +
+          "<td>" +
+          order.order_id +
+          "</td>" +
+          "<td>" +
+          order.customer_name +
+          "</td>" +
+          "<td>" +
+          order.total.toFixed(2) +
+          " Rs</td>" +
+          '<td><span class="btn btn-xs btn-warning order-details">Details</span></td></tr>';
+      });
+      table +=
+        '<tr><td colspan="3" style="text-align: end"><b>Total</b></td><td><b>' +
+        totalCost.toFixed(2) +
+        " Rs</b></td></tr>";
+      $("table").find("tbody").empty().html(table);
+    }
+  });
+});
+
+$(document).on("click", ".order-details", function () {
+  var tr = $(this).closest("tr");
+  var order_id = tr.data("id");
+
+  window.location =
+    "C:/Users/jaikumar%20singh/Desktop/python_projects_grocery_webapp/ui/order-details.html?order_id=" +
+    order_id;
+});
diff --git a/ui/js/custom/manage-product.js b/ui/js/custom/manage-product.js
index e434f97..f9d7213 100644
--- a/ui/js/custom/manage-product.js
+++ b/ui/js/custom/manage-product.js
@@ -1,76 +1,76 @@
 var productModal = $("#productModal");
-    $(function () {
+$(function () {
 
-        //JSON data by API call
-        $.get(productListApiUrl, function (response) {
-            if(response) {
-                var table = '';
-                $.each(response, function(index, product) {
-                    table += '<tr data-id="'+ product.product_id +'" data-name="'+ product.name +'" data-unit="'+ product.uom_id +'" data-price="'+ product.price_per_unit +'">' +
-                        '<td>'+ product.name +'</td>'+
-                        '<td>'+ product.uom_name +'</td>'+
-                        '<td>'+ product.price_per_unit +'</td>'+
-                        '<td><span class="btn btn-xs btn-danger delete-product">Delete</span></td></tr>';
-                });
-                $("table").find('tbody').empty().html(table);
-            }
-        });
-    });
-
-    // Save Product
-    $("#saveProduct").on("click", function () {
-        // If we found id value in form then update product detail
-        var data = $("#productForm").serializeArray();
-        var requestPayload = {
-            product_name: null,
-            uom_id: null,
-            price_per_unit: null
-        };
-        for (var i=0;i<data.length;++i) {
-            var element = data[i];
-            switch(element.name) {
-                case 'name':
-                    requestPayload.product_name = element.value;
-                    break;
-                case 'uoms':
-                    requestPayload.uom_id = element.value;
-                    break;
-                case 'price':
-                    requestPayload.price_per_unit = element.value;
-                    break;
-            }
+    //JSON data by API call
+    $.get(productListApiUrl, function (response) {
+        if (response) {
+            var table = '';
+            $.each(response, function (index, product) {
+                table += '<tr data-id="' + product.product_id + '" data-name="' + product.name + '" data-unit="' + product.uom_id + '" data-price="' + product.price_per_unit + '">' +
+                    '<td>' + product.name + '</td>' +
+                    '<td>' + product.uom_name + '</td>' +
+                    '<td>' + product.price_per_unit + '</td>' +
+                    '<td><span class="btn btn-xs btn-danger delete-product">Delete</span></td></tr>';
+            });
+            $("table").find('tbody').empty().html(table);
         }
-        callApi("POST", productSaveApiUrl, {
-            'data': JSON.stringify(requestPayload)
-        });
     });
+});
 
-    $(document).on("click", ".delete-product", function (){
-        var tr = $(this).closest('tr');
-        var data = {
-            product_id : tr.data('id')
-        };
-        var isDelete = confirm("Are you sure to delete "+ tr.data('name') +" item?");
-        if (isDelete) {
-            callApi("POST", productDeleteApiUrl, data);
+// Save Product
+$("#saveProduct").on("click", function () {
+    // If we found id value in form then update product detail
+    var data = $("#productForm").serializeArray();
+    var requestPayload = {
+        product_name: null,
+        uom_id: null,
+        price_per_unit: null
+    };
+    for (var i = 0; i < data.length; ++i) {
+        var element = data[i];
+        switch (element.name) {
+            case 'name':
+                requestPayload.product_name = element.value;
+                break;
+            case 'uoms':
+                requestPayload.uom_id = element.value;
+                break;
+            case 'price':
+                requestPayload.price_per_unit = element.value;
+                break;
         }
+    }
+    callApi("POST", productSaveApiUrl, {
+        'data': JSON.stringify(requestPayload)
     });
+});
 
-    productModal.on('hide.bs.modal', function(){
-        $("#id").val('0');
-        $("#name, #unit, #price").val('');
-        productModal.find('.modal-title').text('Add New Product');
-    });
+$(document).on("click", ".delete-product", function () {
+    var tr = $(this).closest('tr');
+    var data = {
+        product_id: tr.data('id')
+    };
+    var isDelete = confirm("Are you sure to delete " + tr.data('name') + " item?");
+    if (isDelete) {
+        callApi("POST", productDeleteApiUrl, data);
+    }
+});
 
-    productModal.on('show.bs.modal', function(){
-        //JSON data by API call
-        $.get(uomListApiUrl, function (response) {
-            if(response) {
-                var options = '<option value="">--Select--</option>';
-                $.each(response, function(index, uom) {
-                    options += '<option value="'+ uom.uom_id +'">'+ uom.uom_name +'</option>';
-                });
-                $("#uoms").empty().html(options);
-            }
-        });
-    });
\ No newline at end of file
+productModal.on('hide.bs.modal', function () {
+    $("#id").val('0');
+    $("#name, #unit, #price").val('');
+    productModal.find('.modal-title').text('Add New Product');
+});
+
+productModal.on('show.bs.modal', function () {
+    //JSON data by API call
+    $.get(uomListApiUrl, function (response) {
+        if (response) {
+            var options = '<option value="">--Select--</option>';
+            $.each(response, function (index, uom) {
+                options += '<option value="' + uom.uom_id + '">' + uom.uom_name + '</option>';
+            });
+            $("#uoms").empty().html(options);
+        }
+    });
+});
\ No newline at end of file
diff --git a/ui/js/custom/order-details.js b/ui/js/custom/order-details.js
new file mode 100644
index 0000000..99f4ff9
--- /dev/null
+++ b/ui/js/custom/order-details.js
@@ -0,0 +1,23 @@
+$(function () {
+    //Json data by api call for order table
+    var urlParams = new URLSearchParams(window.location.search);
+    var order_id = parseInt(urlParams.get('order_id'));
+    console.log(order_id);
+
+    $.get(orderDetailsApiUrl + "?orderid=" + order_id, function (response) {
+        if (response) {
+            var table = '';
+
+            $.each(response, function (index, order) {
+                console.log(order.order_details);
+                table += '<tr>' +
+                    '<td>' + order.product_name + '</td>' +
+                    '<td>' + order.quantity + '</td>' +
+                    '<td>' + order.price_per_unit + '</td>' +
+                    '<td>' + order.total_price + ' Rs</td></tr>';
+            });
+
+            $("table").find('tbody').empty().html(table);
+        }
+    });
+});
\ No newline at end of file
diff --git a/ui/js/custom/order.js b/ui/js/custom/order.js
index f099a58..502eb49 100644
--- a/ui/js/custom/order.js
+++ b/ui/js/custom/order.js
@@ -4,10 +4,10 @@ $(function () {
     //Json data by api call for order table
     $.get(productListApiUrl, function (response) {
         productPrices = {}
-        if(response) {
+        if (response) {
             var options = '<option value="">--Select--</option>';
-            $.each(response, function(index, product) {
-                options += '<option value="'+ product.product_id +'">'+ product.name +'</option>';
+            $.each(response, function (index, product) {
+                options += '<option value="' + product.product_id + '">' + product.name + '</option>';
                 productPrices[product.product_id] = product.price_per_unit;
             });
             $(".product-box").find("select").empty().html(options);
@@ -24,12 +24,12 @@ $("#addMoreButton").click(function () {
     $(".product-box-extra .product-total").last().text('0.0');
 });
 
-$(document).on("click", ".remove-row", function (){
+$(document).on("click", ".remove-row", function () {
     $(this).closest('.row').remove();
     calculateValue();
 });
 
-$(document).on("change", ".cart-product", function (){
+$(document).on("change", ".cart-product", function () {
     var product_id = $(this).val();
     var price = productPrices[product_id];
 
@@ -37,23 +37,24 @@ $(document).on("change", ".cart-product", function (){
     calculateValue();
 });
 
-$(document).on("change", ".product-qty", function (e){
+$(document).on("change", ".product-qty", function (e) {
     calculateValue();
 });
 
-$("#saveOrder").on("click", function(){
+$("#saveOrder").on("click", function () {
     var formData = $("form").serializeArray();
+    console.log(formData);
     var requestPayload = {
         customer_name: null,
         total: null,
         order_details: []
     };
     var orderDetails = [];
-    for(var i=0;i<formData.length;++i) {
+    for (var i = 0; i < formData.length; ++i) {
         var element = formData[i];
         var lastElement = null;
 
-        switch(element.name) {
+        switch (element.name) {
             case 'customerName':
                 requestPayload.customer_name = element.value;
                 break;
@@ -65,14 +66,14 @@ $("#saveOrder").on("click", function(){
                     product_id: element.value,
                     quantity: null,
                     total_price: null
-                });                
+                });
                 break;
             case 'qty':
-                lastElement = requestPayload.order_details[requestPayload.order_details.length-1];
+                lastElement = requestPayload.order_details[requestPayload.order_details.length - 1];
                 lastElement.quantity = element.value
                 break;
             case 'item_total':
-                lastElement = requestPayload.order_details[requestPayload.order_details.length-1];
+                lastElement = requestPayload.order_details[requestPayload.order_details.length - 1];
                 lastElement.total_price = element.value
                 break;
         }
diff --git a/ui/manage-product.html b/ui/manage-product.html
index 3e5bc1f..e0ec709 100644
--- a/ui/manage-product.html
+++ b/ui/manage-product.html
@@ -1,116 +1,124 @@
-
 <!DOCTYPE html>
 <html>
+
 <head>
-    <title> GSMS </title>
+    <title> Grocery Store </title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="csrf-token" content="kmapods5wQ5L1hn7rcR9OPst7EsN0gC7SrHh3m9K"/>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css">
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="csrf-token" content="kmapods5wQ5L1hn7rcR9OPst7EsN0gC7SrHh3m9K" />
+    <link rel="stylesheet"
+        href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,300,600,700">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
     <link media="all" type="text/css" rel="stylesheet" href="css/bootstrap.min.css">
     <link media="all" type="text/css" rel="stylesheet" href="css/style.css?v=1.0">
     <link media="all" type="text/css" rel="stylesheet" href="css/sidebar-menu.css?v=1.0">
     <link media="all" type="text/css" rel="stylesheet" href="css/custom.css?v=1.3.3">
 </head>
+
 <body class="tooltips">
-<div class="container">
+    <div class="container">
 
-    <div class="header content rows-content-header">
-        <button class="button-menu-mobile show-sidebar">
-            <i class="fa fa-bars"></i>
-        </button>
-        <div class="navbar navbar-default" role="navigation">
-            <div class="container">
+        <div class="header content rows-content-header">
+            <button class="button-menu-mobile show-sidebar">
+                <i class="fa fa-bars"></i>
+            </button>
+            <div class="navbar navbar-default" role="navigation">
+                <div class="container">
 
-                <div class="navbar-collapse collapse">
-                    <ul class="nav navbar-nav visible-lg visible-md limit-chars">
-                        <ul class="breadcrumb">
-                            <a href="index.html">
-                                <i class="zmdi zmdi-view-dashboard zmdi-hc-fw" title="Orders"></i>
-                            </a>
-                            <a href="manage-product.html">
-                                <i class="zmdi zmdi-assignment zmdi-hc-fw" title="Products"></i>
-                            </a>
+                    <div class="navbar-collapse collapse">
+                        <ul class="nav navbar-nav visible-lg visible-md limit-chars">
+                            <ul class="breadcrumb">
+                                <a href="index.html">
+                                    <i class="zmdi zmdi-view-dashboard zmdi-hc-fw" title="Orders"></i>
+                                </a>
+                                <a href="manage-product.html">
+                                    <i class="zmdi zmdi-assignment zmdi-hc-fw" title="Products"></i>
+                                </a>
+                            </ul>
                         </ul>
-                    </ul>
+                    </div>
                 </div>
             </div>
         </div>
-    </div>
 
-    <div class="right content-page">
-        <div class="body content rows scroll-y">
-            <div class="box-info full" id="taskFormContainer">
-                <h2>Manage Products</h2>
-                <div class="panel-body pt-0">
-                    <div class="row mb-4">
-                        <div class="col-sm-12">
-                            <button type="button" class="btn btn-sm btn-primary pull-right" data-toggle="modal" data-target="#productModal">
-                                Add New Product
-                            </button>
+        <div class="right content-page">
+            <div class="body content rows scroll-y">
+                <div class="box-info full" id="taskFormContainer">
+                    <h2>Manage Products</h2>
+                    <div class="panel-body pt-0">
+                        <div class="row mb-4">
+                            <div class="col-sm-12">
+                                <button type="button" class="btn btn-sm btn-primary pull-right" data-toggle="modal"
+                                    data-target="#productModal">
+                                    Add New Product
+                                </button>
+                            </div>
                         </div>
-                    </div>
-                    <table class="table table-bordered">
-                        <thead>
-                        <th>Name</th>
-                        <th>Unit</th>
-                        <th>Price Per Unit</th>
-                        <th style="width: 150px">Action</th>
-                        </thead>
-                        <tbody>
+                        <table class="table table-bordered">
+                            <thead>
+                                <th>Name</th>
+                                <th>Unit</th>
+                                <th>Price Per Unit</th>
+                                <th style="width: 150px">Action</th>
+                            </thead>
+                            <tbody>
 
-                        </tbody>
-                    </table>
+                            </tbody>
+                        </table>
+                    </div>
                 </div>
             </div>
         </div>
-    </div>
 
-    <div class="modal fade-scale" id="productModal" role="dialog" data-backdrop="static">
-        <div class="modal-dialog ">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h4 class="modal-title">Add New Product</h4>
-                </div>
-                <div class="modal-body">
-                    <form id="productForm">
-                        <input type="hidden" name="id" id="id" value="0">
-                        <div class="row">
-                            <div class="col-sm-12">
-                                <div class="form-group">
-                                    <label >Name</label>
-                                    <input class="form-control" placeholder="Name" name="name" id="name" type="text" value="">
+        <div class="modal fade-scale" id="productModal" role="dialog" data-backdrop="static">
+            <div class="modal-dialog ">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h4 class="modal-title">Add New Product</h4>
+                    </div>
+                    <div class="modal-body">
+                        <form id="productForm">
+                            <input type="hidden" name="id" id="id" value="0">
+                            <div class="row">
+                                <div class="col-sm-12">
+                                    <div class="form-group">
+                                        <label>Name</label>
+                                        <input class="form-control" placeholder="Name" name="name" id="name" type="text"
+                                            value="">
+                                    </div>
                                 </div>
-                            </div>
-                            <div class="col-sm-12">
-                                <div class="form-group">
-                                    <label >Unit</label>
-                                    <select name="uoms" id="uoms" class="form-control">
-                                    </select>
+                                <div class="col-sm-12">
+                                    <div class="form-group">
+                                        <label>Unit</label>
+                                        <select name="uoms" id="uoms" class="form-control">
+                                        </select>
+                                    </div>
                                 </div>
-                            </div>
-                            <div class="col-sm-12">
-                                <div class="form-group">
-                                    <label >Price Per Unit</label>
-                                    <input class="form-control" placeholder="Price Per Unit" name="price" id="price" type="text" value="">
+                                <div class="col-sm-12">
+                                    <div class="form-group">
+                                        <label>Price Per Unit</label>
+                                        <input class="form-control" placeholder="Price Per Unit" name="price" id="price"
+                                            type="text" value="">
+                                    </div>
                                 </div>
                             </div>
-                        </div>
-                    </form>
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-                    <button type="button" class="btn btn-primary" id="saveProduct">Save</button>
+                        </form>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                        <button type="button" class="btn btn-primary" id="saveProduct">Save</button>
+                    </div>
                 </div>
             </div>
         </div>
     </div>
-</div>
-<script src="js/packages/jquery.min.js"></script>
-<script src="js/custom/common.js"></script>
-<script src="js/custom/manage-product.js"></script>
-<script src="js/packages/bootstrap.min.js"></script>
+    <script src="js/packages/jquery.min.js"></script>
+    <script src="js/custom/common.js"></script>
+    <script src="js/custom/manage-product.js"></script>
+    <script src="js/packages/bootstrap.min.js"></script>
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/ui/order-details.html b/ui/order-details.html
new file mode 100644
index 0000000..74df452
--- /dev/null
+++ b/ui/order-details.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title> Grocery Store </title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="csrf-token" content="kmapods5wQ5L1hn7rcR9OPst7EsN0gC7SrHh3m9K" />
+    <link rel="stylesheet"
+        href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,300,600,700">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
+    <link media="all" type="text/css" rel="stylesheet" href="css/bootstrap.min.css">
+    <link media="all" type="text/css" rel="stylesheet" href="css/style.css?v=1.0">
+    <link media="all" type="text/css" rel="stylesheet" href="css/sidebar-menu.css?v=1.0">
+    <link media="all" type="text/css" rel="stylesheet" href="css/custom.css?v=1.3.3">
+</head>
+
+<body class="tooltips">
+    <div class="container">
+
+        <div class="header content rows-content-header">
+            <button class="button-menu-mobile show-sidebar">
+                <i class="fa fa-bars"></i>
+            </button>
+            <div class="navbar navbar-default" role="navigation">
+                <div class="container">
+
+                    <div class="navbar-collapse collapse">
+                        <ul class="nav navbar-nav visible-lg visible-md limit-chars">
+                            <ul class="breadcrumb">
+                                <a href="index.html">
+                                    <i class="zmdi zmdi-view-dashboard zmdi-hc-fw" title="Orders"></i>
+                                </a>
+                                <a href="manage-product.html">
+                                    <i class="zmdi zmdi-assignment zmdi-hc-fw" title="Products"></i>
+                                </a>
+                            </ul>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="right content-page">
+            <div class="body content rows scroll-y">
+                <form class="form-horizontal" action="">
+                    <div class="box-info full" id="taskFormContainer">
+                        <h2>Grocery Store Management System</h2>
+                        <div class="panel-body pt-0">
+                            <div class="row mb-4">
+                                <div class="col-sm-12">
+                                    <a href="index.html" class="btn btn-sm btn-primary pull-right">
+                                        Return to main page
+                                    </a>
+                                </div>
+                            </div>
+                            <table class="table table-bordered">
+                                <thead>
+                                    <th>Product Name</th>
+                                    <th>Quantity</th>
+                                    <th>Per Unit Price</th>
+                                    <th>Total Price</th>
+                                </thead>
+                                <tbody>
+
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </form>
+                <div class="modal " id="userProfileModal" role="dialog">
+                    <div class="modal-dialog">
+                        <div class="modal-content">
+                            <div class="modal-body text-center">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="modal fade-scale" id="myModal" role="dialog" data-backdrop="static">
+            <div class="modal-dialog modal-lg">
+                <div class="modal-content">
+                    <div class="modal-body text-center">
+                        <img src="https://demo.test.cloint.com/assets/images/spinner.gif" width="40"
+                            style="margin: 60px auto;" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+
+<script src="js/packages/jquery.min.js"></script>
+<script src="js/custom/common.js"></script>
+<script src="js/custom/order-details.js"></script>
+
+</html>
\ No newline at end of file
diff --git a/ui/order.html b/ui/order.html
index 1278122..6f39f80 100644
--- a/ui/order.html
+++ b/ui/order.html
@@ -1,106 +1,122 @@
-
 <!DOCTYPE html>
 <html>
+
 <head>
-    <title> GSMS </title>
+    <title> Grocery Store </title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="csrf-token" content="kmapods5wQ5L1hn7rcR9OPst7EsN0gC7SrHh3m9K"/>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css">
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="csrf-token" content="kmapods5wQ5L1hn7rcR9OPst7EsN0gC7SrHh3m9K" />
+    <link rel="stylesheet"
+        href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,300,600,700">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
     <link media="all" type="text/css" rel="stylesheet" href="css/bootstrap.min.css">
     <link media="all" type="text/css" rel="stylesheet" href="css/style.css?v=1.0">
     <link media="all" type="text/css" rel="stylesheet" href="css/custom.css?v=1.3.3">
 </head>
+
 <body class="tooltips">
-<div class="container">
+    <div class="container">
 
-    <div class="header content rows-content-header">
-        <button class="button-menu-mobile show-sidebar">
-            <i class="fa fa-bars"></i>
-        </button>
-        <div class="navbar navbar-default" role="navigation">
-            <div class="container">
+        <div class="header content rows-content-header">
+            <button class="button-menu-mobile show-sidebar">
+                <i class="fa fa-bars"></i>
+            </button>
+            <div class="navbar navbar-default" role="navigation">
+                <div class="container">
 
-                <div class="navbar-collapse collapse">
-                    <ul class="nav navbar-nav visible-lg visible-md limit-chars">
-                        <ul class="breadcrumb">
-                            <a href="index.html">
-                                <i class="zmdi zmdi-view-dashboard zmdi-hc-fw" data-toggle="tooltip" data-placement="bottom" title="Dashboard"></i>
-                            </a>
-                            <a href="manage-product.html">
-                                <i class="zmdi zmdi-assignment zmdi-hc-fw" data-toggle="tooltip" data-placement="bottom" title="Products"></i>
-                            </a>
+                    <div class="navbar-collapse collapse">
+                        <ul class="nav navbar-nav visible-lg visible-md limit-chars">
+                            <ul class="breadcrumb">
+                                <a href="index.html">
+                                    <i class="zmdi zmdi-view-dashboard zmdi-hc-fw" data-toggle="tooltip"
+                                        data-placement="bottom" title="Dashboard"></i>
+                                </a>
+                                <a href="manage-product.html">
+                                    <i class="zmdi zmdi-assignment zmdi-hc-fw" data-toggle="tooltip"
+                                        data-placement="bottom" title="Products"></i>
+                                </a>
+                            </ul>
                         </ul>
-                    </ul>
+                    </div>
                 </div>
             </div>
         </div>
-    </div>
 
-    <div class="right content-page">
-        <div class="body content rows scroll-y">
-            <form action="">
-                <div class="box-info full" id="taskFormContainer">
-                    <h2>New Order
-                        <input name="customerName" id="customerName" type="text" class="form-control" placeholder="Customer Name" style="max-width:230px; float: right;margin-top: -11px">
-                    </h2>
-                    <div class="row" style="margin-bottom: 5px;margin-top: -10px;">
-                        <div class="col-sm-12">
-                            <div class="col-sm-4">
-                                <label >Product</label>
-                            </div>
-                            <div class="col-sm-3">
-                                <label >Price</label>
-                            </div>
-                            <div class="col-sm-2">
-                                <label >Quantity</label>
-                            </div>
-                            <div class="col-sm-3">
-                                <label >Total</label>
-                                <button class="btn btn-sm btn-primary pull-right" style="margin-top: -5px" type="button" id="addMoreButton">Add More</button>
+        <div class="right content-page">
+            <div class="body content rows scroll-y">
+                <form action="">
+                    <div class="box-info full" id="taskFormContainer">
+                        <h2>New Order
+                            <input name="customerName" id="customerName" type="text" class="form-control"
+                                placeholder="Customer Name" style="max-width:230px; float: right;margin-top: -11px">
+                        </h2>
+                        <div class="row" style="margin-bottom: 5px;margin-top: -10px;">
+                            <div class="col-sm-12">
+                                <div class="col-sm-4">
+                                    <label>Product</label>
+                                </div>
+                                <div class="col-sm-3">
+                                    <label>Price</label>
+                                </div>
+                                <div class="col-sm-2">
+                                    <label>Quantity</label>
+                                </div>
+                                <div class="col-sm-3">
+                                    <label>Total</label>
+                                    <button class="btn btn-sm btn-primary pull-right" style="margin-top: -5px"
+                                        type="button" id="addMoreButton">Add More</button>
+                                </div>
                             </div>
                         </div>
                     </div>
-                </div>
 
-                <div class="product-box-extra" id="itemsInOrder">
+                    <div class="product-box-extra" id="itemsInOrder">
 
-                </div>
+                    </div>
 
-                <div>
-                    <div class="row">
+                    <div>
+                        <div class="row">
+                            <div class="col-sm-12">
+                                <div class="box-info full p-3 mb-3 mt-0">
+                                    <div class="col-sm-9 text-right">
+                                        <span><b>Total</b></span>
+                                    </div>
+                                    <div class="col-sm-3">
+                                        <b><input id="product_grand_total" name="product_grand_total"
+                                                class="product-grand-total" value="0.0"></input> Rs</b>
+                                        <button class="btn btn-sm btn-primary pull-right" type="button"
+                                            id="saveOrder">Save</button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </form>
+                <div class="product-box hidden">
+                    <div class="row product-item">
                         <div class="col-sm-12">
                             <div class="box-info full p-3 mb-3 mt-0">
-                                <div class="col-sm-9 text-right">
-                                    <span><b>Total</b></span>
+                                <div class="col-sm-4">
+                                    <select name="product" class="form-control cart-product"
+                                        style="max-width: 250px"></select>
                                 </div>
                                 <div class="col-sm-3">
-                                    <b><input id="product_grand_total" name="product_grand_total" class="product-grand-total" value="0.0"></input> Rs</b>
-                                    <button class="btn btn-sm btn-primary pull-right" type="button" id="saveOrder">Save</button>
+                                    <input id="product_price" name="product_price" class="product-price"
+                                        value="0.0"></input>
+                                </div>
+                                <div class="col-sm-2">
+                                    <input name="qty" type="number" min="1" placeholder=""
+                                        class="form-control product-qty" value="1" style="max-width: 100px">
+                                </div>
+                                <div class="col-sm-3">
+                                    <input id="item_total" name="item_total" class="product-total"></input><span>
+                                        Rs</span>
+                                    <button class="btn btn-sm btn-danger pull-right remove-row"
+                                        type="button">Remove</button>
                                 </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </form>
-            <div class="product-box hidden">
-                <div class="row product-item">
-                    <div class="col-sm-12">
-                        <div class="box-info full p-3 mb-3 mt-0">
-                            <div class="col-sm-4">
-                                <select name="product" class="form-control cart-product" style="max-width: 250px"></select>
-                            </div>
-                            <div class="col-sm-3">
-                                <input id="product_price" name="product_price" class="product-price" value="0.0"></input>
-                            </div>
-                            <div class="col-sm-2">
-                                <input name="qty" type="number" min="1" placeholder="" class="form-control product-qty" value="1" style="max-width: 100px">
-                            </div>
-                            <div class="col-sm-3">
-                                <input id="item_total" name="item_total" class="product-total"></input><span> Rs</span>
-                                <button class="btn btn-sm btn-danger pull-right remove-row" type="button">Remove</button>
                             </div>
                         </div>
                     </div>
@@ -108,9 +124,9 @@ <h2>New Order
             </div>
         </div>
     </div>
-</div>
 </body>
 <script src="js/packages/jquery.min.js"></script>
 <script src="js/custom/common.js"></script>
 <script src="js/custom/order.js"></script>
-</html>
+
+</html>
\ No newline at end of file