diff --git a/Areas/Inventory/Views/Item/ProductRegistration.cshtml b/Areas/Inventory/Views/Item/ProductRegistration.cshtml
index 18ea02b..ef59cd4 100644
--- a/Areas/Inventory/Views/Item/ProductRegistration.cshtml
+++ b/Areas/Inventory/Views/Item/ProductRegistration.cshtml
@@ -4,15 +4,17 @@
 }
 
 @await Html.PartialAsync("~/Areas/Inventory/Views/_InventoryPartial.cshtml");
-<div id="registerProduct">
+<div id="registerProduct" class="card m-1">
     <form v-on:submit.prevent="addProduct" data-aos="fade-right">
         <div class="container register" data-aos="fade-right">
             <div class="row" data-aos="fade-right">
                 <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 PRODUCT</h3>
-                            <div class="row register-form">
+                            <div class="card-header">
+                                <h3 class="register-heading">REGISTRATION PRODUCT</h3>
+                            </div>
+                            <div class="row register-form card-body">
                                 <div class="col-md-6">
 
                                     @* Product Name *@
@@ -27,23 +29,11 @@
                                     <div class="form-group row">
                                         <label class="col-sm-3">Manufacturer:</label>
                                         <div class="col-sm-9">
-                                            <div class="dropdown">
-                                                <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
-                                                    <span id="updateManufacturer">{{ manufacturer || 'Select Manufacturer' }}</span>
-                                                </button>
-                                                <div class="dropdown-menu p-3">
-                                                    <div v-for="(manuc, index) in manufactures" :key="index" class="form-check">
-                                                        <input class="form-check-input" type="radio" :id="'manufacturer-' + index" :value="manuc" name="manufacturer" v-on:click="updateManufacturer(manuc)" v-model="manufacturer">
-                                                        <label class="form-check-label" :for="'manufacturer-' + index">{{ manuc }}</label>
-                                                    </div>@*
-                                                    <div class="form-check">
-                                                        <input class="form-check-input" type="radio" name="manufacturer" id="otherM" v-on:click="toggleOtherInput('manufacturer')" v-model="manufacturer">
-                                                        <label class="form-check-label" for="otherM">Other:</label>
-                                                    </div>
-                                                    <div v-if="showOtherManufacturer">
-                                                        <input type="text" class="form-control" id="otherManufacturer" placeholder="Your Manufacturer Name" v-model="manufacturer">
-                                                    </div> *@
-                                                </div>
+                                            <div class="">
+                                                <select class="btn btn-primary form-select" v-model="manufacturer" required>
+                                                    <option class="btn-light" value="" selected disabled>Select Manufacturer</option>
+                                                    <option class="btn-light" v-for="(item, index) in manufacturers" :key="item.manufacturerId" :value="item.manufacturerId">{{ item.manufacturerName ?? 'Select Manufacturer' }}</option>
+                                                </select>
                                             </div>
                                         </div>
                                     </div>
@@ -52,30 +42,16 @@
                                     <div class="form-group row">
                                         <label class="col-sm-3">Category:</label>
                                         <div class="col-sm-9">
-                                            <div class="dropdown">
-                                                <button class="btn btn-primary dropdown-toggle w-100" type="button" data-toggle="dropdown" aria-expanded="false">
-                                                    <span id="updateCategory">{{ category || 'Select Category' }}</span>
-                                                </button>
-                                                <div class="dropdown-menu w-100 p-3">
-                                                    <div class="form-check">
-                                                        <input class="form-check-input" type="radio" name="category" id="item" value="Item" v-on:click="updateCategory('Item')" v-model="category">
-                                                        <label class="form-check-label" for="item">Item</label>
-                                                    </div>
-                                                    <div class="form-check">
-                                                        <input class="form-check-input" type="radio" name="category" id="part" value="Part" v-on:click="updateCategory('Part')" v-model="category">
-                                                        <label class="form-check-label" for="part">Part</label>
-                                                    </div>
-                                                    <div class="form-check">
-                                                        <input class="form-check-input" type="radio" name="category" id="disposable" value="Disposable" v-on:click="updateCategory('Disposable')" v-model="category">
-                                                        <label class="form-check-label" for="disposable">Disposable</label>
-                                                    </div>
-                                                </div>
+                                            <div class="">
+                                                <select class="btn btn-primary form-select" v-model="category" required>
+                                                    <option class="btn-light" value="" selected disabled>Select Category</option>
+                                                    <option class="btn-light" v-for="(item, index) in categories" :key="item" :value="item">{{ item ?? 'Select Category'  }}</option>
+                                                </select>
                                             </div>
                                         </div>
                                     </div>
 
                                 </div>
-
                                 <div class="col-md-6">
 
                                     @* Model No Coding *@
@@ -126,8 +102,10 @@
         el: '#registerProduct',
         data: {
             productName: null,
-            manufacturer: null,
-            category: null,
+            manufacturer: '',
+            manufacturers: null,
+            category: '',
+            categories: ["Item", "Part", "Disposable"],
             modelNo: null,
             quantityProduct: null,
             imageProduct: null,
@@ -273,12 +251,7 @@
                             console.log(data);
                             if (data != null && data.length > 0)
                             {
-                                this.manufacturer = data;
-                            }
-                            if (!this.manufacturerDatatable) {
-                                this.initiateTable();
-                            } else {
-                                this.fillTable(data);
+                                this.manufacturers = data;
                             }
                         })
                         .catch(error => {