diff --git a/Areas/Inventory/Models/ItemModel.cs b/Areas/Inventory/Models/ItemModel.cs
index a6c84a6..886fe4b 100644
--- a/Areas/Inventory/Models/ItemModel.cs
+++ b/Areas/Inventory/Models/ItemModel.cs
@@ -11,7 +11,7 @@ namespace PSTW_CentralSystem.Areas.Inventory.Models
         public required int CompanyId { get; set; }
         public required int DepartmentId { get; set; }
         public required int ProductId { get; set; }
-        public required string SerialNumber { get; set; }
+        public required string? SerialNumber { get; set; }
         public required int Quantity { get; set; }
         public required string Supplier { get; set; }
         public required DateTime PurchaseDate { get; set; }
diff --git a/Areas/Inventory/Views/Item/ItemRegistration.cshtml b/Areas/Inventory/Views/Item/ItemRegistration.cshtml
index d51ea1c..f595de3 100644
--- a/Areas/Inventory/Views/Item/ItemRegistration.cshtml
+++ b/Areas/Inventory/Views/Item/ItemRegistration.cshtml
@@ -6,249 +6,283 @@
 }
 @await Html.PartialAsync("~/Areas/Inventory/Views/_InventoryPartial.cshtml");
 <div id="registerItem" class="row">
-    <div class="card">
-        <form v-on:submit.prevent="addItem" data-aos="fade-right">
-            <div class="container register" data-aos="fade-right">
-                <div class="row" data-aos="fade-right">
-                    @*Left Side*@
-                    <div class="col-md-3 register-left">
-                        <img src="https://media.licdn.com/dms/image/C4E03AQEJ_X-GwTi3xg/profile-displayphoto-shrink_200_200/0/1607307680517?e=2147483647&v=beta&t=UL8IX1nO9iqRxGrQrNZ1O_i4tpjnOVVecIktw-GB6QI" alt="" />
-                        <h3>Welcome</h3>
-                        <p>Registration Product! Click button to go Product Page</p>
-                        <a href="@Url.Action("Product", "Home")" class="btn btn-primary">Product Registration</a><br />
-                    </div>
-                    
-                    @*Right Side*@
-                    <div class="col-md-9 register-right">
-                        <div class="tab-content" id="myTabContent">
-                            <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
-                                <h3 class="register-heading">REGISTRATION ITEM</h3>
-                                <div class="row register-form">
-                                    <div class="col-md-6">
+    <div class="row card">
+        <div class="card-header">
+            <button id="addItemBtn" class="btn btn-success col-md-3 col-lg-3 m-1 col-12"><i class="fa fa-plus"></i>&nbsp;Add Item</button>
+        </div>
+        <div class="card-body">
+        @*  <div v-if="loading">
+                <div class="spinner-border text-info" role="status">
+                    <span class="visually-hidden">Loading...</span>
+                </div>
+            </div> *@
+            <table class="table table-bordered table-hover table-striped no-wrap" id="itemDatatable" style="width:100%;border-style: solid; border-width: 1px"></table>
+        </div>
+    </div>
+    <div class="modal fade" id="registerItemModal" tabindex="-1" role="dialog" aria-labelledby="addItemModalLabel" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="addItemModalLabel">Add Item</h5>
+                    <button type="button" class="closeModal" data-dismiss="modal" aria-label="Close" v-on:click="showItemModal=false">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                </div>
+                <div class="modal-body">
+                    <div class="container-fluid">
+                        <form v-on:submit.prevent="addItem" data-aos="fade-right">
+                            <div class=" register" data-aos="fade-right">
+                                <div class="row" data-aos="fade-right">
 
-                                        <!-- Company Dropdown -->
-                                        <div class="form-group row">
-                                            <label class="col-sm-4 col-form-label">Company:</label>
-                                            <div class="col-sm-8">
-                                                <div class="dropdown">
-                                                    <select class="btn btn-primary dropdown-toggle" v-model="selectedCompany" required>
-                                                        <option class="btn-light" value="" disabled selected>Select Company</option>
-                                                        <option class="btn-light" v-for="(item, index) in companies" :key="index" :value="item.companyId">{{item.companyName}}</option>
-                                                    </select>
-                                                </div>
-                                            </div>
-                                        </div>
+                                    @*Right Side*@
+                                    <div class="col-md-12">
+                                        <div class="tab-content" id="myTabContent">
+                                            <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
+                                                <h3 class="register-heading">REGISTRATION ITEM</h3>
+                                                <div class="row register-form">
+                                                    <div class="col-md-6">
 
-                                        <!-- Department Dropdown -->
-                                        <div class="form-group row">
-                                            <label class="col-sm-4 col-form-label">Department:</label>
-                                            <div class="col-sm-8">
-                                                <select class="btn btn-primary dropdown-toggle" v-model="selectedDepartment" required>
-                                                    <option class="btn-light" value="" disabled selected>Select Department</option>
-                                                    <option class="btn-light" v-for="(dept, index) in filteredDepartments" :key="index" :value="dept.departmentId">{{ dept.departmentName }}</option>
-                                                </select>
-                                            </div>
-                                        </div>
+                                                        <!-- Company Dropdown -->
+                                                        <div class="form-group row">
+                                                            <label class="col-sm-4 col-form-label">Company:</label>
+                                                            <div class="col-sm-8">
+                                                                <div class="dropdown">
+                                                                    <select class="btn btn-primary dropdown-toggle" v-model="selectedCompany" required>
+                                                                        <option class="btn-light" value="" disabled selected>Select Company</option>
+                                                                        <option class="btn-light" v-for="(item, index) in companies" :key="index" :value="item.companyId">{{item.companyName}}</option>
+                                                                    </select>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+
+                                                        <!-- Department Dropdown -->
+                                                        <div class="form-group row">
+                                                            <label class="col-sm-4 col-form-label">Department:</label>
+                                                            <div class="col-sm-8">
+                                                                <select class="btn btn-primary dropdown-toggle" v-model="selectedDepartment" required>
+                                                                    <option class="btn-light" value="" disabled selected>Select Department</option>
+                                                                    <option class="btn-light" v-for="(dept, index) in filteredDepartments" :key="index" :value="dept.departmentId">{{ dept.departmentName }}</option>
+                                                                </select>
+                                                            </div>
+                                                        </div>
 
 
-                                        @* Product Name Coding *@
-                                        <div class="form-group row">
-                                            <label class="col-sm-4 col-form-label">Product Name:</label>
-                                            <div class="col-sm-8">
-                                                <div class="dropdown">
-                                                    <select type="button" class="btn btn-primary dropdown-toggle" v-model="selectedProduct" required>
-                                                        <option class="btn-light" value="" disabled selected>Select Product</option>
-                                                        <option class="btn-light" v-for="(item, index) in products" :key="index" :value="item.productId">{{ item.productName + ' (' + item.modelNo + ')' }}</option>
-                                                    </select>
-                                                </div>
-                                            </div>
-                                        </div>
+                                                        @* Product Name Coding *@
+                                                        <div class="form-group row">
+                                                            <label class="col-sm-4 col-form-label">Product Name:</label>
+                                                            <div class="col-sm-8">
+                                                                <div class="dropdown">
+                                                                    <select class="btn btn-primary dropdown-toggle" v-model="selectedProduct" required>
+                                                                        <option class="btn-light" value="" disabled selected>Select Product</option>
+                                                                        <option class="btn-light" v-for="(item, index) in products" :key="index" :value="item.productId">{{ item.productName + ' (' + item.modelNo + ')' }}</option>
+                                                                    </select>
+                                                                </div>
+                                                            </div>
+                                                        </div>
 
-                                        @* Product Image Display *@
-                                        <div class="form-group row align-items-center">
-                                            <label for="imageProduct" class="col-sm-4 col-form-label">Product Image: </label>
-                                            <div class="col-sm-8">
-                                                <img v-if="showProduct.imageProduct" :src="showProduct.imageProduct" alt="Product Image" class="img-fluid" data-toggle="modal" data-target="#imageModal" />
-                                                <input type="hidden" id="imageProduct" name="imageProduct" v-model="showProduct">
-                                            </div>
-                                        </div>
+                                                        @* Product Image Display *@
+                                                        <div class="form-group row align-items-center">
+                                                            <label for="imageProduct" class="col-sm-4 col-form-label">Product Image: </label>
+                                                            <div class="col-sm-8">
+                                                                <img v-if="showProduct.imageProduct" :src="showProduct.imageProduct" alt="Product Image" class="img-fluid" data-toggle="modal" data-target="#imageModal" />
+                                                                <input type="hidden" id="imageProduct" name="imageProduct" v-model="showProduct">
+                                                            </div>
+                                                        </div>
 
-                                        <!-- Modal -->
-                                        <div class="modal fade" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="imageModalLabel" aria-hidden="true">
-                                            <div class="modal-dialog modal-lg" role="document">
-                                                <div class="modal-content">
-                                                    <div class="modal-header">
-                                                        <h5 class="modal-title" id="imageModalLabel">Product Image</h5>
-                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                                                            <span aria-hidden="true">&times;</span>
-                                                        </button>
+                                                        <!-- Modal -->
+                                                        <div class="modal fade" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="imageModalLabel" aria-hidden="true">
+                                                            <div class="modal-dialog modal-lg" role="document">
+                                                                <div class="modal-content">
+                                                                    <div class="modal-header">
+                                                                        <h5 class="modal-title" id="imageModalLabel">Product Image</h5>
+                                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                                                                            <span aria-hidden="true">&times;</span>
+                                                                        </button>
+                                                                    </div>
+                                                                    <div class="modal-body">
+                                                                        <img :src="showProduct.imageProduct" alt="Product Image" class="img-fluid">
+                                                                    </div>
+                                                                    <div class="modal-footer">
+                                                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+
+                                                        @* Product Category Coding *@
+                                                        <div class="form-group row">
+                                                            <label class="col-sm-4 col-form-label">Product Category:</label>
+                                                            <div class="col-sm-8">
+                                                                <input type="text" id="category" name="category" v-model="showProduct.category" class="form-control" readonly />
+                                                            </div>
+                                                        </div>
+
+                                                        @* Serial Number and Quantity Coding *@
+                                                        <div v-if="showSerialNumber">
+                                                            <div class="form-group row align-items-center">
+                                                                <div class="col-sm-4">
+                                                                    <label for="serialNumber">Serial Number: </label>
+                                                                </div>
+                                                                <div class="col-sm-8">
+                                                                    <input type="text" id="serialNumber" name="serialNumber" v-if="showSerialNumber" v-model="serialNumber" class="form-control" v-bind:required="showSerialNumber">
+                                                                </div>
+                                                            </div>
+                                                        </div>
+
+                                                        <div v-if="!showSerialNumber">
+                                                            <div class="form-group row align-items-center">
+                                                                <div class="col-sm-4">
+                                                                    <label for="quantity">Quantity: </label>
+                                                                </div>
+                                                                <div class="col-sm-8">
+                                                                    <input type="number" id="quantity" name="quantity" min="1" v-if="!showSerialNumber" v-model="quantity" class="form-control" v-bind:required="!showSerialNumber">
+                                                                </div>
+                                                            </div>
+                                                        </div>
+
+                                                        @* Supplier coding *@
+                                                        <div class="form-group row align-items-center">
+                                                            <label class="col-sm-4 col-form-label">Supplier: </label>
+                                                            <div class="col-sm-8">
+                                                                <div class="dropdown">
+                                                                    <select class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" v-model="selectedSupplier" required>
+                                                                        <option class="btn-light" value="" disabled selected>Select Supplier</option>
+                                                                        <option class="btn-light" v-for="(item, index) in suppliers">{{ item.supplierName }}</option>
+                                                                    </select>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+
+                                                        @* Purchase Date coding *@
+                                                        <div class="form-group row align-items-center">
+                                                            <label for="purchaseDate" class="col-sm-4 col-form-label">Purchase Date: </label>
+                                                            <div class="col-sm-8">
+                                                                <input type="date" id="purchaseDate" name="purchaseDate" required v-model="purchaseDate" class="form-control">
+                                                            </div>
+                                                        </div>
+
+                                                        @* PO coding *@
+                                                        <div class="form-group row align-items-center">
+                                                            <label for="PO" class="col-sm-4 col-form-label">Enter PO: </label>
+                                                            <div class="col-sm-8">
+                                                                <input type="text" id="PO" name="PO" required v-model="PO" placeholder="PO123456" class="form-control">
+                                                            </div>
+                                                        </div>
                                                     </div>
-                                                    <div class="modal-body">
-                                                        <img :src="showProduct.imageProduct" alt="Product Image" class="img-fluid">
+
+                                                    <div class="col-md-6">
+                                                        @* Item Price in RM *@
+                                                        <div class="form-group row">
+                                                            <label for="priceInRM" class="col-sm-4">Item Price In(RM):</label>
+                                                            <div class="col-sm-8">
+                                                                <input type="number" id="priceInRM" name="priceInRM" class="form-control" placeholder="RM 00.00" step="0.01" v-on:input="convertCurrency()" required v-model="priceInRM">
+                                                            </div>
+                                                        </div>
+
+                                                        @* Currency Selection *@
+                                                        <div class="form-group row">
+                                                            <label for="currency" class="col-sm-4">Select Currency:</label>
+                                                            <div class="col-sm-8">
+                                                                <select id="currency" name="currency" class="form-control" v-model="currency" v-on:change="convertCurrency()">
+                                                                    <option value="" disabled selected>Select a currency</option>
+                                                                    <option v-for="(name, code) in currencies" :key="code" :value="code">
+                                                                        {{ code }} - {{ name }}
+                                                                    </option>
+                                                                </select>
+                                                            </div>
+                                                        </div>
+
+                                                        @* Currency Rate *@
+                                                        <div class="form-group row">
+                                                            <label for="currencyRate" class="col-sm-4">Currency Rate(%):</label>
+                                                            <div class="col-sm-8">
+                                                                <input type="number" id="currencyRate" name="currencyRate" class="form-control" placeholder="0.01%" step="0.01" v-on:input="convertCurrency()" required v-model="currencyRate">
+                                                            </div>
+                                                        </div>
+
+                                                        @* Item Convert Price *@
+                                                        <div class="form-group row">
+                                                            <label for="convertPrice" class="col-sm-4">{{ currency ? 'Item Price (' + currency + ') : ' : 'Item Price : ' }}</label>
+                                                            <div class="col-sm-8">
+                                                                <input type="number" id="convertPrice" name="convertPrice" class="form-control" readonly v-model="convertPrice">
+                                                            </div>
+                                                        </div>
+
+                                                        @* Delivery Order Date *@
+                                                        <div class="form-group row">
+                                                            <label for="DODate" class="col-sm-4">Enter DO Date:</label>
+                                                            <div class="col-sm-8">
+                                                                <input type="date" id="DODate" name="DODate" class="form-control" v-on:input="calculateWarrantyEndDate()" required v-model="DODate">
+                                                            </div>
+                                                        </div>
+
+                                                        @* Warranty *@
+                                                        <div class="form-group row">
+                                                            <label for="warranty" class="col-sm-4">Enter Warranty Months(Number):</label>
+                                                            <div class="col-sm-8">
+                                                                <input type="number" id="warranty" name="warranty" class="form-control" placeholder="0 , 1 , 2 , 3, ..." step="1" min="0" v-on:input="calculateWarrantyEndDate()" required v-model="warranty">
+                                                            </div>
+                                                        </div>
+
+                                                        @* Warranty End Date *@
+                                                        <div class="form-group row">
+                                                            <label for="EndWDate" class="col-sm-4">Warranty End:</label>
+                                                            <div class="col-sm-8">
+                                                                <input type="date" id="EndWDate" name="EndWDate" class="form-control" readonly v-model="EndWDate">
+                                                            </div>
+                                                        </div>
+
+                                                        @* Invoice Date *@
+                                                        <div class="form-group row">
+                                                            <label for="invoiceDate" class="col-sm-4">Invoice Date:</label>
+                                                            <div class="col-sm-8">
+                                                                <input type="date" id="invoiceDate" name="invoiceDate" class="form-control" required v-model="invoiceDate">
+                                                            </div>
+                                                        </div>
+
                                                     </div>
-                                                    <div class="modal-footer">
-                                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+
+                                                    @* Submit and Reset Buttons *@
+                                                    <div class="form-group row">
+                                                        <div class="col-sm-8 offset-sm-3">
+                                                            <button type="button" v-on:click="resetForm" class="btn btn-secondary">Reset</button>
+                                                            <input type="submit" class="btn btn-primary" value="Submit" />
+                                                        </div>
                                                     </div>
-                                                </div>
-                                            </div>
-                                        </div>
 
-                                        @* Product Category Coding *@
-                                        <div class="form-group row">
-                                            <label class="col-sm-4 col-form-label">Product Category:</label>
-                                            <div class="col-sm-8">
-                                                <input type="text" id="category" name="category" v-model="showProduct.category" class="form-control" readonly />
-                                            </div>
-                                        </div>
-
-                                        @* Serial Number and Quantity Coding *@
-                                        <div v-if="showSerialNumber">
-                                            <div class="form-group row align-items-center">
-                                                <div class="col-sm-4">
-                                                    <label for="serialNumber">Serial Number: </label>
                                                 </div>
-                                                <div class="col-sm-8">
-                                                    <input type="text" id="serialNumber" name="serialNumber" v-if="showSerialNumber" v-model="serialNumber" class="form-control" v-bind:required="showSerialNumber">
-                                                </div>
-                                            </div>
-                                        </div>
-
-                                        <div v-if="!showSerialNumber">
-                                            <div class="form-group row align-items-center">
-                                                <div class="col-sm-4">
-                                                    <label for="quantity">Quantity: </label>
-                                                </div>
-                                                <div class="col-sm-8">
-                                                    <input type="number" id="quantity" name="quantity" min="1" v-if="!showSerialNumber" v-model="quantity" class="form-control" v-bind:required="!showSerialNumber">
-                                                </div>
-                                            </div>
-                                        </div>
-
-                                        @* Supplier coding *@
-                                        <div class="form-group row align-items-center">
-                                            <label class="col-sm-4 col-form-label">Supplier: </label>
-                                            <div class="col-sm-8">
-                                                <div class="dropdown">
-                                                    <select type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" v-model="selectedSupplier" required>
-                                                        <option class="btn-light" value="" disabled selected>Select Supplier</option>
-                                                        <option class="btn-light" v-for="(item, index) in suppliers">{{ item.supplierName }}</option>
-                                                    </select>
-                                                </div>
-                                            </div>
-                                        </div>
-
-                                        @* Purchase Date coding *@
-                                        <div class="form-group row align-items-center">
-                                            <label for="purchaseDate" class="col-sm-4 col-form-label">Purchase Date: </label>
-                                            <div class="col-sm-8">
-                                                <input type="date" id="purchaseDate" name="purchaseDate" required v-model="purchaseDate" class="form-control">
-                                            </div>
-                                        </div>
-
-                                        @* PO coding *@
-                                        <div class="form-group row align-items-center">
-                                            <label for="PO" class="col-sm-4 col-form-label">Enter PO: </label>
-                                            <div class="col-sm-8">
-                                                <input type="text" id="PO" name="PO" required v-model="PO" placeholder="PO123456" class="form-control">
                                             </div>
                                         </div>
                                     </div>
-
-                                    <div class="col-md-6">
-                                        @* Item Price in RM *@
-                                        <div class="form-group row">
-                                            <label for="priceInRM" class="col-sm-4">Item Price In(RM):</label>
-                                            <div class="col-sm-8">
-                                                <input type="number" id="priceInRM" name="priceInRM" class="form-control" placeholder="RM 00.00" step="0.01" v-on:input="convertCurrency()" required v-model="priceInRM">
-                                            </div>
-                                        </div>
-
-                                        @* Currency Selection *@
-                                        <div class="form-group row">
-                                            <label for="currency" class="col-sm-4">Select Currency:</label>
-                                            <div class="col-sm-8">
-                                                <select id="currency" name="currency" class="form-control" v-model="currency" v-on:change="convertCurrency()">
-                                                    <option value="" disabled selected>Select a currency</option>
-                                                    <option v-for="(name, code) in currencies" :key="code" :value="code">
-                                                        {{ code }} - {{ name }}
-                                                    </option>
-                                                </select>
-                                            </div>
-                                        </div>
-
-                                        @* Currency Rate *@
-                                        <div class="form-group row">
-                                            <label for="currencyRate" class="col-sm-4">Currency Rate(%):</label>
-                                            <div class="col-sm-8">
-                                                <input type="number" id="currencyRate" name="currencyRate" class="form-control" placeholder="0.01%" step="0.01" v-on:input="convertCurrency()" required v-model="currencyRate">
-                                            </div>
-                                        </div>
-
-                                        @* Item Convert Price *@
-                                        <div class="form-group row">
-                                            <label for="convertPrice" class="col-sm-4">{{ currency ? 'Item Price (' + currency + ') : ' : 'Item Price : ' }}</label>
-                                            <div class="col-sm-8">
-                                                <input type="number" id="convertPrice" name="convertPrice" class="form-control" readonly v-model="convertPrice">
-                                            </div>
-                                        </div>
-
-                                        @* Delivery Order Date *@
-                                        <div class="form-group row">
-                                            <label for="DODate" class="col-sm-4">Enter DO Date:</label>
-                                            <div class="col-sm-8">
-                                                <input type="date" id="DODate" name="DODate" class="form-control" v-on:input="calculateWarrantyEndDate()" required v-model="DODate">
-                                            </div>
-                                        </div>
-
-                                        @* Warranty *@
-                                        <div class="form-group row">
-                                            <label for="warranty" class="col-sm-4">Enter Warranty Months(Number):</label>
-                                            <div class="col-sm-8">
-                                                <input type="number" id="warranty" name="warranty" class="form-control" placeholder="0 , 1 , 2 , 3, ..." step="1" min="0" v-on:input="calculateWarrantyEndDate()" required v-model="warranty">
-                                            </div>
-                                        </div>
-
-                                        @* Warranty End Date *@
-                                        <div class="form-group row">
-                                            <label for="EndWDate" class="col-sm-4">Warranty End:</label>
-                                            <div class="col-sm-8">
-                                                <input type="date" id="EndWDate" name="EndWDate" class="form-control" readonly v-model="EndWDate">
-                                            </div>
-                                        </div>
-
-                                        @* Invoice Date *@
-                                        <div class="form-group row">
-                                            <label for="invoiceDate" class="col-sm-4">Invoice Date:</label>
-                                            <div class="col-sm-8">
-                                                <input type="date" id="invoiceDate" name="invoiceDate" class="form-control" required v-model="invoiceDate">
-                                            </div>
-                                        </div>
-
-                                    </div>
-
-                                    @* Submit and Reset Buttons *@
-                                    <div class="form-group row">
-                                        <div class="col-sm-8 offset-sm-3">
-                                            <button type="button" v-on:click="resetForm" class="btn btn-secondary">Reset</button>
-                                            <input type="submit" class="btn btn-primary" value="Submit" />
-                                        </div>
-                                    </div>
-
                                 </div>
                             </div>
-                        </div>
+                        </form>
                     </div>
                 </div>
             </div>
-        </form>
+        </div>
     </div>
 </div>
 
-@*Vue Js - POST & RESET*@
-<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
+@section Scripts {
+@{
+    await Html.RenderPartialAsync("_ValidationScriptsPartial");
+}
 <script>
-    new Vue({
-        el: '#registerItem',
+    $(function () {
+            app.mount('#registerItem');
+
+            // Attach a click event listener to elements with the class 'btn-success'.
+            $('#addItemBtn').on('click', function () {
+                // Show the modal with the ID 'addManufacturerModal'.
+                $('#registerItemModal').modal('show');
+            });
+            $('.closeModal').on('click', function () {
+                // Show the modal with the ID 'addManufacturerModal'.
+                $('#registerItemModal').modal('hide');
+            });
+    });
+    const app = Vue.createApp({
         data() {
             return {
                 companies: [ 
@@ -299,11 +333,14 @@
                 selectedCompany: "",
                 selectedDepartment: "",
                 currencies: {},
+                showItemModal: false,
+                loading:false,
             }
         },
         mounted() {// Log the token to check its value
 
             // Fetch companies, depts, and products from the API
+            this.fetchItem();
             this.fetchCurrencyData();
             this.fetchCompanies();
             this.fetchProducts();
@@ -330,6 +367,9 @@
         },
         methods: {
             async addItem() {
+                if (this.showProduct.category == "Disposable") {
+                    this.serialNumber = "";
+                }
                 const formData = {
                     CompanyId: this.selectedCompany,
                     DepartmentId: this.selectedDepartment,
@@ -395,6 +435,101 @@
 
             },
 
+            initiateTable() {
+                console.log(this.items)
+                this.itemDatatable = $('#itemDatatable').DataTable({
+                    "data": this.items,
+                    "columns": [
+                        {
+                            "title": "Unique Id",
+                            "data": "uniqueID",
+                        },
+                        {
+                            "title": "Serial Number",
+                            "data": "serialNumber",
+                        },
+                        {
+                            "title": "Quantity",
+                            "data": "quantity",
+                        },
+                        {
+                            "title": "Supplier",
+                            "data": "supplier",
+                        },
+                        {
+                            "title": "Purchase Date",
+                            "data": "purchaseDate",
+                        },
+                        {
+                            "title": "Price After Convert(RM)",
+                            "data": "convertPrice",
+                        },
+                        {
+                            "title": "Invoice Date",
+                            "data": "invoiceDate",
+                        },
+                        {
+                            "title": "Warranty Until",
+                                "data": "warranty",
+                            "render": function (data, type, full, meta) {
+                                if (data > 0) { return full.endWDate }
+                                else { return data }
+                            }
+                        },
+                        // {
+                        //     "title": "Image",
+                        //     "data": "imageProduct",
+                        //     "render": function (data, type, full, meta) {
+                        //         var image = `<a href="${data}" target="_blank" data-lightbox="image-1">
+                        //                             <img src="${data}" alt="Image" class="img-thumbnail" style="width: 100px; height: 100px;" />
+                        //                         </a>`;
+                        //         return image;
+                        //     },
+                        // },
+                        {
+                            "title": "Delete",
+                            "data": "productId",
+                            "render": function (data) {
+                                var deleteButton = `<button type="button" class="btn btn-danger delete-btn" data-id="${data.itemId}">Delete</button>`;
+                                return deleteButton;
+                            },
+                        }
+                    ],
+                    responsive: true,
+                })
+
+                self = this;
+                // Attach click event listener to the delete buttons
+                $('#itemDatatable tbody').on('click', '.delete-btn', function () {
+                    const itemId = $(this).data('id'); // Get the manufacturer ID from the button
+                        self.deleteItem(itemId); // Call the Vue method
+                });
+
+                this.loading = false;
+            },
+
+            async fetchItem() {
+                try {
+                    // const token = localStorage.getItem('token'); // Get the token from localStorage
+                    const response = await fetch('/InvMainAPI/ItemList', {
+                        method: 'POST', // Specify the HTTP method
+                        headers: {
+                            'Content-Type': 'application/json', // Set content type
+                            // 'Authorization': `Bearer ${token}` // Include the token in the headers
+                        }
+                    });
+
+                    if (!response.ok) {
+                        throw new Error('Failed to fetch item');
+                    }
+
+                    this.items = await response.json();
+                    this.initiateTable();
+                } catch (error) {
+                    console.error('Error fetching item:', error);
+                }
+            },
+
             async fetchProducts() {
                 try {
                     // const token = localStorage.getItem('token'); // Get the token from localStorage
@@ -501,14 +636,6 @@
                     .replace(/^(\d*\.\d{0,2})\d*$/, '$1'); // Limit to two decimal places
 
             }, 
-
-            openModal() {
-                this.isModalOpen = true; // Open the modal
-            },
-            closeModal() {
-                this.isModalOpen = false; // Close the modal
-            },
-
             calculateWarrantyEndDate() {
                 // Check if DODate and warranty are valid
                 if (!this.DODate || isNaN(Date.parse(this.DODate))) {
@@ -527,6 +654,39 @@
                     this.EndWDate = null;
                 }
             },
+            async deleteItem(itemId) {
+                if (!confirm("Are you sure you want to delete this item?")) {
+                    return;
+                }
+                try {
+                    const response = await fetch(`/InvMainAPI/DeleteProduct/${itemId}`, {
+                        method: 'DELETE',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                    });
+                    const result = await response.json();
+
+                    if (result.success) {
+                        alert(result.message);
+                        // Remove the row from DataTables
+                        this.itemDatatable
+                            .row($(`.delete-btn[data-id="${itemId}"]`).closest('tr'))
+                            .remove()
+                            .draw();
+                    } else {
+                        alert(result.message);
+                    }
+                } 
+                catch (error) {
+                    console.error("Error deleting item:", error);
+                        alert("An error occurred while deleting the item.");
+                }
+                finally {
+                    this.loading = false;
+                }
+            },
         },
     });
-</script>
\ No newline at end of file
+</script>
+}
\ No newline at end of file
diff --git a/Areas/Inventory/Views/Item/ProductRegistration.cshtml b/Areas/Inventory/Views/Item/ProductRegistration.cshtml
index e0ac1b3..9c7ac81 100644
--- a/Areas/Inventory/Views/Item/ProductRegistration.cshtml
+++ b/Areas/Inventory/Views/Item/ProductRegistration.cshtml
@@ -95,8 +95,8 @@
         <div class="row">
             <button id="addProductBtn" class="btn btn-success col-md-3 m-1" v-show="addSection == false" v-on:click="addSection = true"><i class="fa fa-plus"></i>&nbsp;Show Add Product Section</button>
         </div>
-        <div class="row">
-            <table class="table table-bordered table-hover" id="productDatatable"></table>
+        <div class="row table-responsive">
+            <table class="table table-bordered table-hover table-striped no-wrap" id="productDatatable" style="width:100%;border-style: solid; border-width: 1px"></table>
         </div>
     </div>
 </div>
@@ -164,13 +164,15 @@
                         },
                         {   
                             "title": "Delete",
-                            "render": function (data, type, full, meta) {
-                                    var deleteButton = `<button type="button" class="btn btn-danger delete-btn" data-id="${full.productId}">Delete</button>`;
+                            "data": "productId",
+                            "render": function (data) {
+                                    var deleteButton = `<button type="button" class="btn btn-danger delete-btn" data-id="${data.productId}">Delete</button>`;
                                 return deleteButton;
                             }, 
                         }
 
                     ],
+                    responsive:true,
                 })
                 self = this;
                 // Attach click event listener to the delete buttons
diff --git a/Areas/Inventory/Views/_InventoryPartial.cshtml b/Areas/Inventory/Views/_InventoryPartial.cshtml
index be28699..ac120a1 100644
--- a/Areas/Inventory/Views/_InventoryPartial.cshtml
+++ b/Areas/Inventory/Views/_InventoryPartial.cshtml
@@ -1,6 +1,6 @@
 @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
 <div class="row">
-    <div class="col-md-6 col-lg-3">
+    <div class="col-6 col-md-6 col-lg-3">
         <a href="@Url.Action("ProductRegistration", "Item", new { area = "Inventory" })">
             <div class="card card-hover">
                 <div class="box bg-cyan text-center">
@@ -12,7 +12,7 @@
             </div>
         </a>
     </div>
-    <div class="col-md-6 col-lg-3">
+    <div class="col-6 col-md-6 col-lg-3">
         <div class="card card-hover">
             <a asp-area="Inventory" asp-controller="Item" asp-action="ItemRegistration">
                 <div class="box bg-success text-center">
@@ -24,7 +24,7 @@
             </a>
         </div>
     </div>
-    <div class="col-md-6 col-lg-3">
+    <div class="col-6 col-md-6 col-lg-3">
         <div class="card card-hover">
             <a asp-area="Inventory" asp-controller="Main" asp-action="SupplierRegistration">
                 <div class="box bg-info text-center">
@@ -36,7 +36,7 @@
             </a>
         </div>
     </div>
-    <div class="col-md-6 col-lg-3">
+    <div class="col-6 col-md-6 col-lg-3">
         <div class="card card-hover">
             <a asp-area="Inventory" asp-controller="Main" asp-action="ManifacturerRegistration">
                 <div class="box bg-warning text-center">
diff --git a/Controllers/API/Inventory/InvMainAPI.cs b/Controllers/API/Inventory/InvMainAPI.cs
index e925361..6b4bf8b 100644
--- a/Controllers/API/Inventory/InvMainAPI.cs
+++ b/Controllers/API/Inventory/InvMainAPI.cs
@@ -268,41 +268,60 @@ namespace PSTW_CentralSystem.Controllers.API.Inventory
 
             try
             {
-                var companyDepartment = await GetDepartmentWithCompany(item.CompanyId, item.DepartmentId);
-                var itemProduct = _authDbContext.Products.Where(p => p.ProductId == item.ProductId).FirstOrDefault();
-                string? companyInitial = companyDepartment?.CompanyName?.ToString().Substring(0, 1).ToUpper();
-                string? depatmentInitial = companyDepartment?.DepartmentName?.ToString().Substring(0, 1).ToUpper();
-                char? initialCategory = itemProduct?.Category.ToString().Substring(0, 1).ToUpper().FirstOrDefault();
-                string? productId = itemProduct?.ProductId.ToString("D3");
-                string? itemId = item?.ItemID+1.ToString("D5");
-                var uniqueId = companyInitial+depatmentInitial+initialCategory+productId+itemId?.ToUpper();
-                _authDbContext.Items.Add(item);
-                await _authDbContext.SaveChangesAsync();
-                var updatedItem = await _authDbContext.Items.Select(i => new
-                {
-                    i.ItemID,
-                    i.UniqueID,
-                    i.CompanyId,
-                    i.DepartmentId,
-                    i.ProductId,
-                    i.SerialNumber,
-                    i.Quantity,
-                    i.Supplier,
-                    i.PurchaseDate,
-                    i.PONo,
-                    i.Currency,
-                    i.PriceInRM,
-                    i.CurrencyRate,
-                    i.ConvertPrice,
-                    i.DODate,
-                    i.Warranty,
-                    i.EndWDate,
-                    i.InvoiceDate,
-                }).FirstOrDefaultAsync(i => i.ItemID == item.ItemID);
+                var product = await _authDbContext.Products.FirstOrDefaultAsync(p => p.ProductId == item.ProductId) ?? throw new Exception("Product not found");
+
+                var addToProduct = item.Quantity;
+                product.QuantityProduct += addToProduct;
+
+                if (product.Category == "Disposable")
+                {
+                    item.SerialNumber = null;
+                }
 
-                updatedItem.UniqueID = uniqueId;
                 _authDbContext.Items.Add(item);
-                await _authDbContext.SaveChangesAsync();
+                _authDbContext.Products.Update(product);
+                await _authDbContext.SaveChangesAsync(); // This generates the auto-incremented ItemID
+
+                // Fetch the generated ItemID
+                var savedItem = await _authDbContext.Items.FirstOrDefaultAsync(i => i.ItemID == item.ItemID);
+
+                if (savedItem != null)
+                {
+                    var companyDepartment = await GetDepartmentWithCompany(item.CompanyId, item.DepartmentId);
+                    var itemProduct = _authDbContext.Products.Where(p => p.ProductId == item.ProductId).FirstOrDefault();
+
+                    string? companyInitial = companyDepartment!.CompanyName?.ToString().Substring(0, 1).ToUpper();
+                    string? departmentInitial = companyDepartment!.DepartmentName?.ToString().Substring(0, 1).ToUpper();
+                    char? initialCategory = itemProduct!.Category.ToString().Substring(0, 1).ToUpper().FirstOrDefault();
+                    string? productId = itemProduct!.ProductId.ToString("D3");
+                    string? itemId = item.ItemID.ToString("D5");
+                    var uniqueId = $"{companyInitial}{departmentInitial}{initialCategory}{productId}{itemId}".ToUpper();
+                    savedItem.UniqueID = uniqueId;
+
+                    _authDbContext.Items.Update(savedItem);
+                    await _authDbContext.SaveChangesAsync();
+                }
+                var updatedItem = new 
+                {
+                    savedItem!.ItemID,
+                    savedItem.UniqueID,
+                    savedItem.CompanyId,
+                    savedItem.DepartmentId,
+                    savedItem.ProductId,
+                    savedItem.SerialNumber,
+                    savedItem.Quantity,
+                    savedItem.Supplier,
+                    savedItem.PurchaseDate,
+                    savedItem.PONo,
+                    savedItem.Currency,
+                    savedItem.PriceInRM,
+                    savedItem.CurrencyRate,
+                    savedItem.ConvertPrice,
+                    savedItem.DODate,
+                    savedItem.Warranty,
+                    savedItem.EndWDate,
+                    savedItem.InvoiceDate,
+                };
                 return Json(updatedItem);
             }
             catch (Exception ex)
diff --git a/Migrations/20241129023507_UpdateItemModel.Designer.cs b/Migrations/20241129023507_UpdateItemModel.Designer.cs
new file mode 100644
index 0000000..b0af4f9
--- /dev/null
+++ b/Migrations/20241129023507_UpdateItemModel.Designer.cs
@@ -0,0 +1,647 @@
+// <auto-generated />
+using System;
+using Microsoft.EntityFrameworkCore;
+using Microsoft.EntityFrameworkCore.Infrastructure;
+using Microsoft.EntityFrameworkCore.Metadata;
+using Microsoft.EntityFrameworkCore.Migrations;
+using Microsoft.EntityFrameworkCore.Storage.ValueConversion;
+using PSTW_CentralSystem.DBContext;
+
+#nullable disable
+
+namespace PSTW_CentralSystem.Migrations
+{
+    [DbContext(typeof(AuthDBContext))]
+    [Migration("20241129023507_UpdateItemModel")]
+    partial class UpdateItemModel
+    {
+        /// <inheritdoc />
+        protected override void BuildTargetModel(ModelBuilder modelBuilder)
+        {
+#pragma warning disable 612, 618
+            modelBuilder
+                .HasAnnotation("ProductVersion", "8.0.11")
+                .HasAnnotation("Relational:MaxIdentifierLength", 64);
+
+            MySqlModelBuilderExtensions.AutoIncrementColumns(modelBuilder);
+
+            modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityRoleClaim<int>", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("int");
+
+                    MySqlPropertyBuilderExtensions.UseMySqlIdentityColumn(b.Property<int>("Id"));
+
+                    b.Property<string>("ClaimType")
+                        .HasColumnType("longtext");
+
+                    b.Property<string>("ClaimValue")
+                        .HasColumnType("longtext");
+
+                    b.Property<int>("RoleId")
+                        .HasColumnType("int");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("RoleId");
+
+                    b.ToTable("AspNetRoleClaims", (string)null);
+                });
+
+            modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityUserClaim<int>", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("int");
+
+                    MySqlPropertyBuilderExtensions.UseMySqlIdentityColumn(b.Property<int>("Id"));
+
+                    b.Property<string>("ClaimType")
+                        .HasColumnType("longtext");
+
+                    b.Property<string>("ClaimValue")
+                        .HasColumnType("longtext");
+
+                    b.Property<int>("UserId")
+                        .HasColumnType("int");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("UserId");
+
+                    b.ToTable("AspNetUserClaims", (string)null);
+                });
+
+            modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityUserLogin<int>", b =>
+                {
+                    b.Property<string>("LoginProvider")
+                        .HasColumnType("varchar(255)");
+
+                    b.Property<string>("ProviderKey")
+                        .HasColumnType("varchar(255)");
+
+                    b.Property<string>("ProviderDisplayName")
+                        .HasColumnType("longtext");
+
+                    b.Property<int>("UserId")
+                        .HasColumnType("int");
+
+                    b.HasKey("LoginProvider", "ProviderKey");
+
+                    b.HasIndex("UserId");
+
+                    b.ToTable("AspNetUserLogins", (string)null);
+                });
+
+            modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityUserRole<int>", b =>
+                {
+                    b.Property<int>("UserId")
+                        .HasColumnType("int");
+
+                    b.Property<int>("RoleId")
+                        .HasColumnType("int");
+
+                    b.HasKey("UserId", "RoleId");
+
+                    b.HasIndex("RoleId");
+
+                    b.ToTable("AspNetUserRoles", (string)null);
+
+                    b.HasData(
+                        new
+                        {
+                            UserId = 1,
+                            RoleId = 1
+                        });
+                });
+
+            modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityUserToken<int>", b =>
+                {
+                    b.Property<int>("UserId")
+                        .HasColumnType("int");
+
+                    b.Property<string>("LoginProvider")
+                        .HasColumnType("varchar(255)");
+
+                    b.Property<string>("Name")
+                        .HasColumnType("varchar(255)");
+
+                    b.Property<string>("Value")
+                        .HasColumnType("longtext");
+
+                    b.HasKey("UserId", "LoginProvider", "Name");
+
+                    b.ToTable("AspNetUserTokens", (string)null);
+                });
+
+            modelBuilder.Entity("PSTW_CentralSystem.Areas.Inventory.Models.CompanyModel", b =>
+                {
+                    b.Property<int>("CompanyId")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("int");
+
+                    MySqlPropertyBuilderExtensions.UseMySqlIdentityColumn(b.Property<int>("CompanyId"));
+
+                    b.Property<string>("CompanyName")
+                        .IsRequired()
+                        .HasColumnType("longtext");
+
+                    b.HasKey("CompanyId");
+
+                    b.ToTable("Companies");
+                });
+
+            modelBuilder.Entity("PSTW_CentralSystem.Areas.Inventory.Models.DepartmentModel", b =>
+                {
+                    b.Property<int>("DepartmentId")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("int");
+
+                    MySqlPropertyBuilderExtensions.UseMySqlIdentityColumn(b.Property<int>("DepartmentId"));
+
+                    b.Property<int>("CompanyId")
+                        .HasColumnType("int");
+
+                    b.Property<string>("DepartmentName")
+                        .IsRequired()
+                        .HasColumnType("longtext");
+
+                    b.HasKey("DepartmentId");
+
+                    b.HasIndex("CompanyId");
+
+                    b.ToTable("Departments");
+                });
+
+            modelBuilder.Entity("PSTW_CentralSystem.Areas.Inventory.Models.ItemModel", b =>
+                {
+                    b.Property<int>("ItemID")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("int");
+
+                    MySqlPropertyBuilderExtensions.UseMySqlIdentityColumn(b.Property<int>("ItemID"));
+
+                    b.Property<int>("CompanyId")
+                        .HasColumnType("int");
+
+                    b.Property<float>("ConvertPrice")
+                        .HasColumnType("float");
+
+                    b.Property<string>("Currency")
+                        .IsRequired()
+                        .HasColumnType("longtext");
+
+                    b.Property<float>("CurrencyRate")
+                        .HasColumnType("float");
+
+                    b.Property<DateTime>("DODate")
+                        .HasColumnType("datetime(6)");
+
+                    b.Property<int>("DepartmentId")
+                        .HasColumnType("int");
+
+                    b.Property<DateTime>("EndWDate")
+                        .HasColumnType("datetime(6)");
+
+                    b.Property<DateTime>("InvoiceDate")
+                        .HasColumnType("datetime(6)");
+
+                    b.Property<string>("PONo")
+                        .IsRequired()
+                        .HasColumnType("longtext");
+
+                    b.Property<float>("PriceInRM")
+                        .HasColumnType("float");
+
+                    b.Property<int>("ProductId")
+                        .HasColumnType("int");
+
+                    b.Property<DateTime>("PurchaseDate")
+                        .HasColumnType("datetime(6)");
+
+                    b.Property<int>("Quantity")
+                        .HasColumnType("int");
+
+                    b.Property<string>("SerialNumber")
+                        .HasColumnType("longtext");
+
+                    b.Property<string>("Supplier")
+                        .IsRequired()
+                        .HasColumnType("longtext");
+
+                    b.Property<string>("UniqueID")
+                        .IsRequired()
+                        .HasColumnType("longtext");
+
+                    b.Property<int>("Warranty")
+                        .HasColumnType("int");
+
+                    b.HasKey("ItemID");
+
+                    b.HasIndex("CompanyId");
+
+                    b.HasIndex("DepartmentId");
+
+                    b.HasIndex("ProductId");
+
+                    b.ToTable("Items");
+                });
+
+            modelBuilder.Entity("PSTW_CentralSystem.Areas.Inventory.Models.ManufacturerModel", b =>
+                {
+                    b.Property<int>("ManufacturerId")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("int");
+
+                    MySqlPropertyBuilderExtensions.UseMySqlIdentityColumn(b.Property<int>("ManufacturerId"));
+
+                    b.Property<string>("ManufacturerName")
+                        .IsRequired()
+                        .HasColumnType("longtext");
+
+                    b.HasKey("ManufacturerId");
+
+                    b.ToTable("Manufacturers");
+                });
+
+            modelBuilder.Entity("PSTW_CentralSystem.Areas.Inventory.Models.ProductModel", b =>
+                {
+                    b.Property<int>("ProductId")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("int");
+
+                    MySqlPropertyBuilderExtensions.UseMySqlIdentityColumn(b.Property<int>("ProductId"));
+
+                    b.Property<string>("Category")
+                        .IsRequired()
+                        .HasColumnType("longtext");
+
+                    b.Property<string>("ImageProduct")
+                        .IsRequired()
+                        .HasColumnType("longtext");
+
+                    b.Property<int>("ManufacturerId")
+                        .HasColumnType("int");
+
+                    b.Property<string>("ModelNo")
+                        .IsRequired()
+                        .HasColumnType("longtext");
+
+                    b.Property<string>("ProductName")
+                        .IsRequired()
+                        .HasColumnType("longtext");
+
+                    b.Property<int?>("QuantityProduct")
+                        .HasColumnType("int");
+
+                    b.HasKey("ProductId");
+
+                    b.HasIndex("ManufacturerId");
+
+                    b.ToTable("Products");
+                });
+
+            modelBuilder.Entity("PSTW_CentralSystem.Areas.Inventory.Models.SupplierModel", b =>
+                {
+                    b.Property<int>("SupplierId")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("int");
+
+                    MySqlPropertyBuilderExtensions.UseMySqlIdentityColumn(b.Property<int>("SupplierId"));
+
+                    b.Property<string>("SupplierEmail")
+                        .IsRequired()
+                        .HasColumnType("longtext");
+
+                    b.Property<string>("SupplierGender")
+                        .IsRequired()
+                        .HasColumnType("longtext");
+
+                    b.Property<string>("SupplierName")
+                        .IsRequired()
+                        .HasColumnType("longtext");
+
+                    b.Property<string>("SupplierPhoneNo")
+                        .IsRequired()
+                        .HasColumnType("longtext");
+
+                    b.HasKey("SupplierId");
+
+                    b.ToTable("Suppliers");
+                });
+
+            modelBuilder.Entity("PSTW_CentralSystem.Models.ModuleSettingModel", b =>
+                {
+                    b.Property<int>("SettingId")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("int");
+
+                    MySqlPropertyBuilderExtensions.UseMySqlIdentityColumn(b.Property<int>("SettingId"));
+
+                    b.Property<string>("AllowedUserType")
+                        .HasColumnType("longtext");
+
+                    b.Property<string>("Description")
+                        .HasColumnType("longtext");
+
+                    b.Property<string>("MethodAllowedUserType")
+                        .HasColumnType("json");
+
+                    b.Property<string>("ModuleName")
+                        .IsRequired()
+                        .HasMaxLength(50)
+                        .HasColumnType("varchar(50)");
+
+                    b.Property<int>("ModuleStatus")
+                        .HasColumnType("int");
+
+                    b.HasKey("SettingId");
+
+                    b.ToTable("ModuleSettings");
+                });
+
+            modelBuilder.Entity("PSTW_CentralSystem.Models.RoleModel", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("int");
+
+                    MySqlPropertyBuilderExtensions.UseMySqlIdentityColumn(b.Property<int>("Id"));
+
+                    b.Property<string>("ConcurrencyStamp")
+                        .IsConcurrencyToken()
+                        .HasColumnType("longtext");
+
+                    b.Property<string>("Description")
+                        .HasColumnType("longtext");
+
+                    b.Property<string>("Name")
+                        .HasMaxLength(256)
+                        .HasColumnType("varchar(256)");
+
+                    b.Property<string>("NormalizedName")
+                        .HasMaxLength(256)
+                        .HasColumnType("varchar(256)");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("NormalizedName")
+                        .IsUnique()
+                        .HasDatabaseName("RoleNameIndex");
+
+                    b.ToTable("AspNetRoles", (string)null);
+
+                    b.HasData(
+                        new
+                        {
+                            Id = 1,
+                            Description = "Can access all pages",
+                            Name = "SuperAdmin",
+                            NormalizedName = "SUPERADMIN"
+                        },
+                        new
+                        {
+                            Id = 2,
+                            Description = "Can access some admin pages",
+                            Name = "SystemAdmin",
+                            NormalizedName = "SYSTEMADMIN"
+                        },
+                        new
+                        {
+                            Id = 3,
+                            Description = "Can access operation pages",
+                            Name = "Engineer",
+                            NormalizedName = "ENGINEER"
+                        },
+                        new
+                        {
+                            Id = 4,
+                            Description = "Can access data viewer pages",
+                            Name = "Observer",
+                            NormalizedName = "OBSERVER"
+                        });
+                });
+
+            modelBuilder.Entity("PSTW_CentralSystem.Models.UserModel", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("int");
+
+                    MySqlPropertyBuilderExtensions.UseMySqlIdentityColumn(b.Property<int>("Id"));
+
+                    b.Property<int>("AccessFailedCount")
+                        .HasColumnType("int");
+
+                    b.Property<string>("ConcurrencyStamp")
+                        .IsConcurrencyToken()
+                        .HasColumnType("longtext");
+
+                    b.Property<string>("Email")
+                        .HasMaxLength(256)
+                        .HasColumnType("varchar(256)");
+
+                    b.Property<bool>("EmailConfirmed")
+                        .HasColumnType("tinyint(1)");
+
+                    b.Property<string>("FullName")
+                        .HasColumnType("longtext");
+
+                    b.Property<bool>("LockoutEnabled")
+                        .HasColumnType("tinyint(1)");
+
+                    b.Property<DateTimeOffset?>("LockoutEnd")
+                        .HasColumnType("datetime(6)");
+
+                    b.Property<string>("NormalizedEmail")
+                        .HasMaxLength(256)
+                        .HasColumnType("varchar(256)");
+
+                    b.Property<string>("NormalizedUserName")
+                        .HasMaxLength(256)
+                        .HasColumnType("varchar(256)");
+
+                    b.Property<string>("PasswordHash")
+                        .HasColumnType("longtext");
+
+                    b.Property<string>("PhoneNumber")
+                        .HasColumnType("longtext");
+
+                    b.Property<bool>("PhoneNumberConfirmed")
+                        .HasColumnType("tinyint(1)");
+
+                    b.Property<string>("SecurityStamp")
+                        .HasColumnType("longtext");
+
+                    b.Property<bool>("TwoFactorEnabled")
+                        .HasColumnType("tinyint(1)");
+
+                    b.Property<string>("UserName")
+                        .HasMaxLength(256)
+                        .HasColumnType("varchar(256)");
+
+                    b.Property<int?>("UserStatus")
+                        .HasColumnType("int");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("NormalizedEmail")
+                        .HasDatabaseName("EmailIndex");
+
+                    b.HasIndex("NormalizedUserName")
+                        .IsUnique()
+                        .HasDatabaseName("UserNameIndex");
+
+                    b.ToTable("AspNetUsers", (string)null);
+
+                    b.HasData(
+                        new
+                        {
+                            Id = 1,
+                            AccessFailedCount = 0,
+                            ConcurrencyStamp = "9577ec05-b14b-4fe2-9d75-cb6aa1ce25be",
+                            Email = "admin@pstw.com.my",
+                            EmailConfirmed = true,
+                            FullName = "MAAdmin",
+                            LockoutEnabled = false,
+                            NormalizedEmail = "ADMIN@PSTW.COM.MY",
+                            NormalizedUserName = "ADMIN@PSTW.COM.MY",
+                            PasswordHash = "AQAAAAIAAYagAAAAEKPk6s6BTBEv5y5S9pOYk6OvLO6XfHhiylslKoOPbAQIAaG9DJZ27ltRHKwe34Na6w==",
+                            PhoneNumberConfirmed = false,
+                            SecurityStamp = "8f828c08-90d7-4a77-a8b0-a317e7ecadbc",
+                            TwoFactorEnabled = false,
+                            UserName = "admin@pstw.com.my"
+                        },
+                        new
+                        {
+                            Id = 2,
+                            AccessFailedCount = 0,
+                            ConcurrencyStamp = "75cb87bb-bba0-410e-83a0-b23b54dfa2f6",
+                            Email = "sysadmin@pstw.com.my",
+                            EmailConfirmed = true,
+                            FullName = "SysAdmin",
+                            LockoutEnabled = false,
+                            NormalizedEmail = "SYSADMIN@PSTW.COM.MY",
+                            NormalizedUserName = "SYSADMIN@PSTW.COM.MY",
+                            PasswordHash = "AQAAAAIAAYagAAAAEPmeMMNew971MNbCbXypkCQ9L2EFXyjcFUhEjX7aPJCC4B+aRavO/201MVOvU/VFIQ==",
+                            PhoneNumberConfirmed = false,
+                            SecurityStamp = "4480b7af-adbc-4d83-9527-511f99593aac",
+                            TwoFactorEnabled = false,
+                            UserName = "sysadmin@pstw.com.my"
+                        });
+                });
+
+            modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityRoleClaim<int>", b =>
+                {
+                    b.HasOne("PSTW_CentralSystem.Models.RoleModel", null)
+                        .WithMany()
+                        .HasForeignKey("RoleId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+                });
+
+            modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityUserClaim<int>", b =>
+                {
+                    b.HasOne("PSTW_CentralSystem.Models.UserModel", null)
+                        .WithMany()
+                        .HasForeignKey("UserId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+                });
+
+            modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityUserLogin<int>", b =>
+                {
+                    b.HasOne("PSTW_CentralSystem.Models.UserModel", null)
+                        .WithMany()
+                        .HasForeignKey("UserId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+                });
+
+            modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityUserRole<int>", b =>
+                {
+                    b.HasOne("PSTW_CentralSystem.Models.RoleModel", null)
+                        .WithMany()
+                        .HasForeignKey("RoleId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.HasOne("PSTW_CentralSystem.Models.UserModel", null)
+                        .WithMany()
+                        .HasForeignKey("UserId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+                });
+
+            modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityUserToken<int>", b =>
+                {
+                    b.HasOne("PSTW_CentralSystem.Models.UserModel", null)
+                        .WithMany()
+                        .HasForeignKey("UserId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+                });
+
+            modelBuilder.Entity("PSTW_CentralSystem.Areas.Inventory.Models.DepartmentModel", b =>
+                {
+                    b.HasOne("PSTW_CentralSystem.Areas.Inventory.Models.CompanyModel", "Company")
+                        .WithMany("Departments")
+                        .HasForeignKey("CompanyId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.Navigation("Company");
+                });
+
+            modelBuilder.Entity("PSTW_CentralSystem.Areas.Inventory.Models.ItemModel", b =>
+                {
+                    b.HasOne("PSTW_CentralSystem.Areas.Inventory.Models.CompanyModel", "Company")
+                        .WithMany()
+                        .HasForeignKey("CompanyId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.HasOne("PSTW_CentralSystem.Areas.Inventory.Models.DepartmentModel", "Department")
+                        .WithMany()
+                        .HasForeignKey("DepartmentId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.HasOne("PSTW_CentralSystem.Areas.Inventory.Models.ProductModel", "Product")
+                        .WithMany("Items")
+                        .HasForeignKey("ProductId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.Navigation("Company");
+
+                    b.Navigation("Department");
+
+                    b.Navigation("Product");
+                });
+
+            modelBuilder.Entity("PSTW_CentralSystem.Areas.Inventory.Models.ProductModel", b =>
+                {
+                    b.HasOne("PSTW_CentralSystem.Areas.Inventory.Models.ManufacturerModel", "Manufacturer")
+                        .WithMany()
+                        .HasForeignKey("ManufacturerId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.Navigation("Manufacturer");
+                });
+
+            modelBuilder.Entity("PSTW_CentralSystem.Areas.Inventory.Models.CompanyModel", b =>
+                {
+                    b.Navigation("Departments");
+                });
+
+            modelBuilder.Entity("PSTW_CentralSystem.Areas.Inventory.Models.ProductModel", b =>
+                {
+                    b.Navigation("Items");
+                });
+#pragma warning restore 612, 618
+        }
+    }
+}
diff --git a/Migrations/20241129023507_UpdateItemModel.cs b/Migrations/20241129023507_UpdateItemModel.cs
new file mode 100644
index 0000000..0e7a19d
--- /dev/null
+++ b/Migrations/20241129023507_UpdateItemModel.cs
@@ -0,0 +1,74 @@
+using Microsoft.EntityFrameworkCore.Migrations;
+
+#nullable disable
+
+namespace PSTW_CentralSystem.Migrations
+{
+    /// <inheritdoc />
+    public partial class UpdateItemModel : Migration
+    {
+        /// <inheritdoc />
+        protected override void Up(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.AlterColumn<string>(
+                name: "SerialNumber",
+                table: "Items",
+                type: "longtext",
+                nullable: true,
+                oldClrType: typeof(string),
+                oldType: "longtext")
+                .Annotation("MySql:CharSet", "utf8mb4")
+                .OldAnnotation("MySql:CharSet", "utf8mb4");
+
+            migrationBuilder.UpdateData(
+                table: "AspNetUsers",
+                keyColumn: "Id",
+                keyValue: 1,
+                columns: new[] { "ConcurrencyStamp", "PasswordHash", "SecurityStamp" },
+                values: new object[] { "9577ec05-b14b-4fe2-9d75-cb6aa1ce25be", "AQAAAAIAAYagAAAAEKPk6s6BTBEv5y5S9pOYk6OvLO6XfHhiylslKoOPbAQIAaG9DJZ27ltRHKwe34Na6w==", "8f828c08-90d7-4a77-a8b0-a317e7ecadbc" });
+
+            migrationBuilder.UpdateData(
+                table: "AspNetUsers",
+                keyColumn: "Id",
+                keyValue: 2,
+                columns: new[] { "ConcurrencyStamp", "PasswordHash", "SecurityStamp" },
+                values: new object[] { "75cb87bb-bba0-410e-83a0-b23b54dfa2f6", "AQAAAAIAAYagAAAAEPmeMMNew971MNbCbXypkCQ9L2EFXyjcFUhEjX7aPJCC4B+aRavO/201MVOvU/VFIQ==", "4480b7af-adbc-4d83-9527-511f99593aac" });
+        }
+
+        /// <inheritdoc />
+        protected override void Down(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.UpdateData(
+                table: "Items",
+                keyColumn: "SerialNumber",
+                keyValue: null,
+                column: "SerialNumber",
+                value: "");
+
+            migrationBuilder.AlterColumn<string>(
+                name: "SerialNumber",
+                table: "Items",
+                type: "longtext",
+                nullable: false,
+                oldClrType: typeof(string),
+                oldType: "longtext",
+                oldNullable: true)
+                .Annotation("MySql:CharSet", "utf8mb4")
+                .OldAnnotation("MySql:CharSet", "utf8mb4");
+
+            migrationBuilder.UpdateData(
+                table: "AspNetUsers",
+                keyColumn: "Id",
+                keyValue: 1,
+                columns: new[] { "ConcurrencyStamp", "PasswordHash", "SecurityStamp" },
+                values: new object[] { "df01136b-c869-4bc3-9512-34a9cdc8f73d", "AQAAAAIAAYagAAAAECcU3fIsIpqE1gECPg262gMejQiypGUXipVbiRtF66ywBqUHdohCj89hiJAafOlrPQ==", "d36451ff-cfab-46e1-bf80-6b428d79a19b" });
+
+            migrationBuilder.UpdateData(
+                table: "AspNetUsers",
+                keyColumn: "Id",
+                keyValue: 2,
+                columns: new[] { "ConcurrencyStamp", "PasswordHash", "SecurityStamp" },
+                values: new object[] { "6f7244cf-e611-4088-890a-72939cfbefa5", "AQAAAAIAAYagAAAAEJwGvD0ionYUADG6FQvuXiK0/897GSnJ8z55w1P0GaItbNjjypF1+aDuRViCZMUQ+g==", "50df1ec2-4ba7-4eb5-84a3-ffb35b44f391" });
+        }
+    }
+}
diff --git a/Migrations/AuthDBContextModelSnapshot.cs b/Migrations/AuthDBContextModelSnapshot.cs
index 817a734..a6b3053 100644
--- a/Migrations/AuthDBContextModelSnapshot.cs
+++ b/Migrations/AuthDBContextModelSnapshot.cs
@@ -221,7 +221,6 @@ namespace PSTW_CentralSystem.Migrations
                         .HasColumnType("int");
 
                     b.Property<string>("SerialNumber")
-                        .IsRequired()
                         .HasColumnType("longtext");
 
                     b.Property<string>("Supplier")
@@ -498,16 +497,16 @@ namespace PSTW_CentralSystem.Migrations
                         {
                             Id = 1,
                             AccessFailedCount = 0,
-                            ConcurrencyStamp = "df01136b-c869-4bc3-9512-34a9cdc8f73d",
+                            ConcurrencyStamp = "9577ec05-b14b-4fe2-9d75-cb6aa1ce25be",
                             Email = "admin@pstw.com.my",
                             EmailConfirmed = true,
                             FullName = "MAAdmin",
                             LockoutEnabled = false,
                             NormalizedEmail = "ADMIN@PSTW.COM.MY",
                             NormalizedUserName = "ADMIN@PSTW.COM.MY",
-                            PasswordHash = "AQAAAAIAAYagAAAAECcU3fIsIpqE1gECPg262gMejQiypGUXipVbiRtF66ywBqUHdohCj89hiJAafOlrPQ==",
+                            PasswordHash = "AQAAAAIAAYagAAAAEKPk6s6BTBEv5y5S9pOYk6OvLO6XfHhiylslKoOPbAQIAaG9DJZ27ltRHKwe34Na6w==",
                             PhoneNumberConfirmed = false,
-                            SecurityStamp = "d36451ff-cfab-46e1-bf80-6b428d79a19b",
+                            SecurityStamp = "8f828c08-90d7-4a77-a8b0-a317e7ecadbc",
                             TwoFactorEnabled = false,
                             UserName = "admin@pstw.com.my"
                         },
@@ -515,16 +514,16 @@ namespace PSTW_CentralSystem.Migrations
                         {
                             Id = 2,
                             AccessFailedCount = 0,
-                            ConcurrencyStamp = "6f7244cf-e611-4088-890a-72939cfbefa5",
+                            ConcurrencyStamp = "75cb87bb-bba0-410e-83a0-b23b54dfa2f6",
                             Email = "sysadmin@pstw.com.my",
                             EmailConfirmed = true,
                             FullName = "SysAdmin",
                             LockoutEnabled = false,
                             NormalizedEmail = "SYSADMIN@PSTW.COM.MY",
                             NormalizedUserName = "SYSADMIN@PSTW.COM.MY",
-                            PasswordHash = "AQAAAAIAAYagAAAAEJwGvD0ionYUADG6FQvuXiK0/897GSnJ8z55w1P0GaItbNjjypF1+aDuRViCZMUQ+g==",
+                            PasswordHash = "AQAAAAIAAYagAAAAEPmeMMNew971MNbCbXypkCQ9L2EFXyjcFUhEjX7aPJCC4B+aRavO/201MVOvU/VFIQ==",
                             PhoneNumberConfirmed = false,
-                            SecurityStamp = "50df1ec2-4ba7-4eb5-84a3-ffb35b44f391",
+                            SecurityStamp = "4480b7af-adbc-4d83-9527-511f99593aac",
                             TwoFactorEnabled = false,
                             UserName = "sysadmin@pstw.com.my"
                         });
diff --git a/Views/Shared/_Layout.cshtml b/Views/Shared/_Layout.cshtml
index 17beadf..aebbb18 100644
--- a/Views/Shared/_Layout.cshtml
+++ b/Views/Shared/_Layout.cshtml
@@ -32,7 +32,6 @@
 
     <!-- DataTables CSS-->
     <link href="~/lib/datatables/datatables.css" rel="stylesheet" />
-    <link href="~/lib/datatables/datatables.min.css" rel="stylesheet" />
     <!-- Vue Js CSS -->
     <script src="~/js/vue.global.js"></script>
     @* <script src="~/js/vue.global.prod.js"></script> *@
@@ -685,7 +684,7 @@
     <!-- All Jquery -->
     <!-- ============================================================== -->
     <script src="~/assets/libs/jquery/dist/jquery.min.js"></script>
-    <script src="~/dist/js/jquery.ui.touch-punch-improved.js"></script>
+    @* <script src="~/dist/js/jquery.ui.touch-punch-improved.js"></script> *@
     <script src="~/dist/js/jquery-ui.min.js"></script>
     <!-- Bootstrap tether Core JavaScript -->
     <script src="~/assets/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
@@ -710,7 +709,6 @@
     <script src="~/assets/libs/quill/dist/quill.min.js"></script>
     <!-- Datatables JS-->
     <script src="~/lib/datatables/datatables.js"></script>
-    <script src="~/lib/datatables/datatables.min.js"></script>
     @await RenderSectionAsync("Scripts", required: false)
 </body>
 </html>
diff --git a/wwwroot/dist/js/jquery.ui.touch-punch-improved.js b/wwwroot/dist/js/jquery.ui.touch-punch-improved.js
index 617f4a5..557e0be 100644
--- a/wwwroot/dist/js/jquery.ui.touch-punch-improved.js
+++ b/wwwroot/dist/js/jquery.ui.touch-punch-improved.js
@@ -17,10 +17,11 @@
   // Detect touch support
   $.support.touch = "ontouchend" in document || pointerEnabled;
 
-  // Ignore browsers without touch support or mouse support
-  if (!$.support.touch || !$.ui.mouse) {
-    return;
-  }
+    // Ignore browsers without touch support or mouse support
+  //REMOVE COMMENT IF ANYTHING
+  //if (!$.support.touch || !$.ui.mouse) {
+  //  return;
+  //}
 
   var mouseProto = $.ui.mouse.prototype,
     _mouseInit = mouseProto._mouseInit,