diff --git a/public/labelgenerator.html b/public/labelgenerator.html
index 5cb9099..1687144 100644
--- a/public/labelgenerator.html
+++ b/public/labelgenerator.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Label Generator - Warehouse Electron</title>
-    <link href="/library/bootstrap.min.css" rel="stylesheet" />
+    <link href="/library/bootstrap.min.css" rel="stylesheet"/>
     <link rel="stylesheet" href="/library/tabler/tabler-icons.min.css">
 </head>
 <body>
@@ -12,7 +12,8 @@
     <nav class="navbar navbar-expand-lg navbar-light bg-light">
         <div class="container-fluid">
             <a class="navbar-brand" href="/">Stock-take Electron</a>
-            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
+                    aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                 <span class="navbar-toggler-icon"></span>
             </button>
             <div class="collapse navbar-collapse" id="navbarSupportedContent">
@@ -27,10 +28,14 @@
                         <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                             <li><a class="dropdown-item" href="labelgenerator.html">Generate Labels</a></li>
                             <li><a class="dropdown-item" href="#">Check prefill labels (Unavailable)</a></li>
-                            <li><hr class="dropdown-divider"></li>
+                            <li>
+                                <hr class="dropdown-divider">
+                            </li>
                             <li><a class="dropdown-item" href="stocks/stocks.html">Stock Management</a></li>
                             <li><a class="dropdown-item" href="#">Add Stock (Unavailable)</a></li>
-                            <li><hr class="dropdown-divider"></li>
+                            <li>
+                                <hr class="dropdown-divider">
+                            </li>
                             <li><a class="dropdown-item" href="#">Scan QR Code(Unavailable)</a></li>
                         </ul>
                     </li>
@@ -56,9 +61,14 @@ <h1>Label Generator</h1>
                 <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
             </div>
         </div>
+        <div id="loadingAnimation" style="display: flex">
+            <div class="loader"></div>
+            <p>Fetching Products List, Please Wait</p>
+        </div>
         <div class="container-fluid">
             <table class="table">
-                <thead><tr>
+                <thead>
+                <tr>
                     <th class="rowid d-none d-sm-table-cell">No.</th>
                     <th class="d-inline-block d-sm-table-cell">Product Name</th>
                     <th class="d-inline-block d-sm-table-cell">Quantity</th>
@@ -66,7 +76,8 @@ <h1>Label Generator</h1>
                     <th class="d-inline-block d-sm-table-cell">Expire date</th>
                     <th class="d-inline-block d-sm-table-cell">Copies</th>
                     <th class="d-inline-block d-sm-table-cell"></th>
-                </tr></thead>
+                </tr>
+                </thead>
                 <tbody>
                 </tbody>
             </table>
@@ -91,16 +102,16 @@ <h1>Label Generator</h1>
                 <hr>
                 <h5>Optional</h5>
                 <div class="row mb-3">
-<!--                    <div  class="col-sm-3 col-6">-->
-<!--                        <label for="fileinput_packaging">Manifest File</label>-->
-<!--                        <input type="file" id="fileinput_manifest" class="form-control">-->
-<!--                    </div>-->
+                    <!--                    <div  class="col-sm-3 col-6">-->
+                    <!--                        <label for="fileinput_packaging">Manifest File</label>-->
+                    <!--                        <input type="file" id="fileinput_manifest" class="form-control">-->
+                    <!--                    </div>-->
                     <div class="col-sm-4 col-12">
                         <label>Purchase Order No.</label>
                         <input type="text" class="form-control" placeholder="" id="input_purchaseorder">
                     </div>
                 </div>
-<!--                <button class="btn btn-secondary" id="file_load">Load File</button>-->
+                <!--                <button class="btn btn-secondary" id="file_load">Load File</button>-->
             </div>
         </div>
         <datalist id="productSuggestions"></datalist>
@@ -127,7 +138,8 @@ <h5>Optional</h5>
 <script src="labelgenerator.js"></script>
 
 <style>
-    @media (max-width: 576px) { /* For small devices */
+    @media (max-width: 576px) {
+        /* For small devices */
         .table thead th.d-block,
         .table tbody td.d-block {
             display: block;
@@ -135,6 +147,36 @@ <h5>Optional</h5>
             box-sizing: border-box;
         }
     }
+
+    /*    Loading Animation*/
+    .loader {
+        width: 40px;
+        aspect-ratio: 1;
+        --c: no-repeat radial-gradient(farthest-side, #514b82 92%, #0000);
+        background: var(--c) 50% 0,
+        var(--c) 50% 100%,
+        var(--c) 100% 50%,
+        var(--c) 0 50%;
+        background-size: 7px 7px;
+        animation: l18 1s infinite;
+        position: relative;
+    }
+
+    .loader::before {
+        content: "";
+        position: absolute;
+        inset: 0;
+        margin: 3px;
+        background: repeating-conic-gradient(#0000 0 35deg, #514b82 0 90deg);
+        -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 3px), #000 0);
+        border-radius: 50%;
+    }
+
+    @keyframes l18 {
+        100% {
+            transform: rotate(.5turn)
+        }
+    }
 </style>
 </body>
 </html>
\ No newline at end of file
diff --git a/public/labelgenerator.js b/public/labelgenerator.js
index 045a801..e2080cf 100644
--- a/public/labelgenerator.js
+++ b/public/labelgenerator.js
@@ -24,6 +24,7 @@ document.addEventListener("DOMContentLoaded", function (ev) {
                 (new bootstrap.Toast(toast)).show();
             }
         }
+        document.querySelector("#loadingAnimation").style = "display: none"
     })
     
     function resetTimer() {
diff --git a/public/layout.html b/public/layout.html
deleted file mode 100644
index 5efe44a..0000000
--- a/public/layout.html
+++ /dev/null
@@ -1,48 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Layout - Warehouse Electron</title>
-    <link href="/library/bootstrap.min.css" rel="stylesheet"/>
-    <link rel="stylesheet" href="/library/tabler/tabler-icons.min.css">
-    <link href="/library/datatables/datatables.css" rel="stylesheet">
-</head>
-<body>
-<div class="container-fluid">
-    <nav class="navbar navbar-expand-lg navbar-light bg-light">
-        <div class="container-fluid">
-            <a class="navbar-brand" href="../index.html">Stock-take Electron</a>
-            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
-                    aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-                <span class="navbar-toggler-icon"></span>
-            </button>
-            <div class="collapse navbar-collapse" id="navbarSupportedContent">
-                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
-                    <li class="nav-item">
-                        <a class="nav-link active" aria-current="page" href="../index.html"><i class="ti ti-home"></i>Home</a>
-                    </li>
-                    <li class="nav-item dropdown">
-                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                            <i class="ti ti-tools"></i>Features
-                        </a>
-                        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
-                            <li><a class="dropdown-item" href="labelgenerator.html">Generate Labels</a></li>
-                            <li><a class="dropdown-item" href="#">Check prefill labels (Unavailable)</a></li>
-                            <li><hr class="dropdown-divider"></li>
-                            <li><a class="dropdown-item" href="stocks/stocks.html">Stock Management</a></li>
-                            <li><a class="dropdown-item" href="#">Add Stock (Unavailable)</a></li>
-                            <li><hr class="dropdown-divider"></li>
-                            <li><a class="dropdown-item" href="#">Scan QR Code(Unavailable)</a></li>
-                        </ul>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link" href="/api"><i class="ti ti-api"></i>Swagger Portal (OpenAPI)</a>
-                    </li>
-                </ul>
-            </div>
-        </div>
-    </nav>
-</div>
-</body>
-</html>
\ No newline at end of file
diff --git a/public/stocks/stocks.html b/public/stocks/stocks.html
index 5807fa9..c84c08a 100644
--- a/public/stocks/stocks.html
+++ b/public/stocks/stocks.html
@@ -152,9 +152,14 @@ <h6>Product Information:</h6>
                 </form>
                 <p></p>
             </div>
-            <div class="modal-footer">
-                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
-                <button type="button" class="btn btn-primary" id="editModal_btnSubmit" disabled>Submit</button>
+            <div class="modal-footer justify-content-between d-flex">
+                <div>
+                    <button type="button" class="btn btn-danger" id="editModal_btnDelete" data-bs-dismiss="modal" data-bs-toggle="modal" data-bs-target="#deleteModal" data-bs-labelId="">Delete</button>
+                </div>
+                <div>
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+                    <button type="button" class="btn btn-primary" id="editModal_btnSubmit" disabled>Submit</button>
+                </div>
             </div>
         </div>
     </div>
@@ -196,6 +201,23 @@ <h5 class="modal-title" id="removeModalLabel">Remove Item</h5>
         </div>
     </div>
 </div>
+<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
+    <div class="modal-dialog model-lg">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="deleteModalLabel">Delete Item</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <p class="mb-2">It is not safe to use delete method from here, please use desktop's stock manage page to delete this stock.</p>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-info" id="deleteModal_btnReturn" data-bs-target="#editModal" data-bs-dismiss="modal" data-bs-toggle="modal" data-bs-itemId="">Back to Edit</button>
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Dismiss</button>
+            </div>
+        </div>
+    </div>
+</div>
 <script src="../library/jquery-3.7.1.min.js"></script>
 <script src="../library/bootstrap.bundle.min.js"></script>
 <script src="../library/datatables/datatables.js"></script>
diff --git a/public/stocks/stocks.js b/public/stocks/stocks.js
index efda75d..abc99c2 100644
--- a/public/stocks/stocks.js
+++ b/public/stocks/stocks.js
@@ -61,14 +61,14 @@ let editModal = document.querySelector("#editModal")
 editModal.addEventListener("show.bs.modal", async function (ev) {
     let requestLabelId = ev.relatedTarget.getAttribute("data-bs-labelId")
     editModal.querySelector("#editModal_labelId").value = requestLabelId
-    editModal.querySelector("#editModal_btnSubmit").disabled = true
     editModal.querySelector("#editModal_btnSubmit").textContent = "Submit"
-    editModal.querySelector("#editModal .modal-title").textContent = `Loading Product Information`
-
+    editModal.querySelector(".modal-title").textContent = `Loading Product Information`
+    editModal.querySelector("#editModal_btnDelete").setAttribute("data-bs-labelId",requestLabelId)
     let stockInfo = await fetchStockByLabelid(requestLabelId)
     if (Array.isArray(stockInfo) && stockInfo.length > 0) {
         currentEditModalItem = stockInfo[0]
         writeModalEdit(stockInfo[0])
+        editModal.querySelector("#editModal_btnSubmit").disabled = false
     }
 })
 editModal.querySelector("#editModal_btnSubmit").addEventListener("click", async (ev) => {
@@ -276,6 +276,12 @@ document.querySelector("#removeModalYes").addEventListener("click", async functi
     }
 })
 
+let deleteModal = document.querySelector("#deleteModal")
+deleteModal.addEventListener("show.bs.modal", (ev)=>{
+    var itemId = ev.relatedTarget.getAttribute("data-bs-itemId")
+    deleteModal.querySelector("#deleteModal_btnReturn").setAttribute("data-bs-itemId", itemId)
+})
+
 function createAlert(status, alertText){
     let alertElement = document.createElement("div")
     alertElement.setAttribute("role","alert")
