diff --git a/packages/Webkul/Admin/src/Resources/assets/css/app.css b/packages/Webkul/Admin/src/Resources/assets/css/app.css
index 6cdcf59800..cd8917db32 100644
--- a/packages/Webkul/Admin/src/Resources/assets/css/app.css
+++ b/packages/Webkul/Admin/src/Resources/assets/css/app.css
@@ -31,346 +31,348 @@
     -moz-osx-font-smoothing: grayscale;
   }
   
-  .icon-bookmark:before {
-    content: "\e92c";
-  }
+@layer components {
+    .icon-bookmark:before {
+        content: "\e92c";
+    }
   
-  .icon-bookmark-active:before {
-    content: "\e92d";
-  }
+    .icon-bookmark-active:before {
+        content: "\e92d";
+    }
 
-.icon-stats-down:before {
-    content: "\e94d";
-}
+    .icon-stats-down:before {
+        content: "\e94d";
+    }
 
-.icon-stats-up:before {
-    content: "\e94f";
-}
+    .icon-stats-up:before {
+        content: "\e94f";
+    }
 
-.icon-attribute:before {
-    content: "\e947";
-}
+    .icon-attribute:before {
+        content: "\e947";
+    }
 
-.icon-download:before {
-    content: "\e948";
-}
+    .icon-download:before {
+        content: "\e948";
+    }
 
-.icon-icon-settings-warehouse:before {
-    content: "\e94e";
-}
+    .icon-icon-settings-warehouse:before {
+        content: "\e94e";
+    }
 
-.icon-move:before {
-    content: "\e949";
-}
+    .icon-move:before {
+        content: "\e949";
+    }
 
-.icon-organization:before {
-    content: "\e94a";
-}
+    .icon-organization:before {
+        content: "\e94a";
+    }
 
-.icon-role:before {
-    content: "\e94b";
-}
+    .icon-role:before {
+        content: "\e94b";
+    }
 
-.icon-user:before {
-    content: "\e94c";
-}
+    .icon-user:before {
+        content: "\e94c";
+    }
 
-.icon-system-generate:before {
-    content: "\e950";
-}
+    .icon-system-generate:before {
+        content: "\e950";
+    }
 
-.icon-settings-attributes:before {
-    content: "\e93b";
-}
+    .icon-settings-attributes:before {
+        content: "\e93b";
+    }
 
-.icon-settings-flow:before {
-    content: "\e93c";
-}
+    .icon-settings-flow:before {
+        content: "\e93c";
+    }
 
-.icon-settings-group:before {
-    content: "\e93d";
-}
+    .icon-settings-group:before {
+        content: "\e93d";
+    }
 
-.icon-settings-mail:before {
-    content: "\e93e";
-}
+    .icon-settings-mail:before {
+        content: "\e93e";
+    }
 
-.icon-settings-pipeline:before {
-    content: "\e93f";
-}
+    .icon-settings-pipeline:before {
+        content: "\e93f";
+    }
 
-.icon-settings-roles:before {
-    content: "\e940";
-}
+    .icon-settings-roles:before {
+        content: "\e940";
+    }
 
-.icon-settings-sources:before {
-    content: "\e941";
-}
+    .icon-settings-sources:before {
+        content: "\e941";
+    }
 
-.icon-settings-tag:before {
-    content: "\e942";
-}
+    .icon-settings-tag:before {
+        content: "\e942";
+    }
 
-.icon-settings-type:before {
-    content: "\e943";
-}
+    .icon-settings-type:before {
+        content: "\e943";
+    }
 
-.icon-settings-user:before {
-    content: "\e944";
-}
+    .icon-settings-user:before {
+        content: "\e944";
+    }
 
-.icon-settings-webforms:before {
-    content: "\e945";
-}
+    .icon-settings-webforms:before {
+        content: "\e945";
+    }
 
-.icon-settings-webhooks:before {
-    content: "\e946";
-}
+    .icon-settings-webhooks:before {
+        content: "\e946";
+    }
 
-.icon-attached-file:before {
-    content: "\e932";
-}
+    .icon-attached-file:before {
+        content: "\e932";
+    }
 
-.icon-forward:before {
-    content: "\e933";
-}
+    .icon-forward:before {
+        content: "\e933";
+    }
 
-.icon-location:before {
-    content: "\e934";
-}
+    .icon-location:before {
+        content: "\e934";
+    }
 
-.icon-pin:before {
-    content: "\e935";
-}
+    .icon-pin:before {
+        content: "\e935";
+    }
 
-.icon-print:before {
-    content: "\e936";
-}
+    .icon-print:before {
+        content: "\e936";
+    }
 
-.icon-reply-all:before {
-    content: "\e937";
-}
+    .icon-reply-all:before {
+        content: "\e937";
+    }
 
-.icon-reply:before {
-    content: "\e938";
-}
+    .icon-reply:before {
+        content: "\e938";
+    }
 
-.icon-rotten:before {
-    content: "\e939";
-}
+    .icon-rotten:before {
+        content: "\e939";
+    }
 
-.icon-tag:before {
-    content: "\e93a";
-}
+    .icon-tag:before {
+        content: "\e93a";
+    }
 
-.icon-list:before {
-    content: "\e92e";
-}
+    .icon-list:before {
+        content: "\e92e";
+    }
 
-.icon-enter:before {
-    content: "\e92f";
-}
+    .icon-enter:before {
+        content: "\e92f";
+    }
 
-.icon-kanban:before {
-    content: "\e930";
-}
+    .icon-kanban:before {
+        content: "\e930";
+    }
 
-.icon-tick:before {
-    content: "\e931";
-}
+    .icon-tick:before {
+        content: "\e931";
+    }
 
-.icon-eye-hide:before {
-    content: "\e929";
-}
+    .icon-eye-hide:before {
+        content: "\e929";
+    }
 
-.icon-percentage:before {
-    content: "\e92a";
-}
+    .icon-percentage:before {
+        content: "\e92a";
+    }
 
-.icon-dollar:before {
-    content: "\e92b";
-}
+    .icon-dollar:before {
+        content: "\e92b";
+    }
 
-.icon-radio-selected:before {
-    content: "\e924";
-}
+    .icon-radio-selected:before {
+        content: "\e924";
+    }
 
-.icon-radio-normal:before {
-    content: "\e925";
-}
+    .icon-radio-normal:before {
+        content: "\e925";
+    }
 
-.icon-folder:before {
-    content: "\e926";
-}
+    .icon-folder:before {
+        content: "\e926";
+    }
 
-.icon-file:before {
-    content: "\e927";
-}
+    .icon-file:before {
+        content: "\e927";
+    }
 
-.icon-eye:before {
-    content: "\e928";
-}
+    .icon-eye:before {
+        content: "\e928";
+    }
 
-.icon-notification:before {
-    content: "\e900";
-}
+    .icon-notification:before {
+        content: "\e900";
+    }
 
-.icon-configuration:before {
-    content: "\e901";
-}
+    .icon-configuration:before {
+        content: "\e901";
+    }
 
-.icon-note:before {
-    content: "\e902";
-}
+    .icon-note:before {
+        content: "\e902";
+    }
 
-.icon-edit:before {
-    content: "\e903";
-}
+    .icon-edit:before {
+        content: "\e903";
+    }
 
-.icon-calendar:before {
-    content: "\e904";
-}
+    .icon-calendar:before {
+        content: "\e904";
+    }
 
-.icon-delete:before {
-    content: "\e905";
-}
+    .icon-delete:before {
+        content: "\e905";
+    }
 
-.icon-more:before {
-    content: "\e906";
-}
+    .icon-more:before {
+        content: "\e906";
+    }
 
-.icon-checkbox-multiple:before {
-    content: "\e907";
-}
+    .icon-checkbox-multiple:before {
+        content: "\e907";
+    }
 
-.icon-checkbox-select:before {
-    content: "\e908";
-}
+    .icon-checkbox-select:before {
+        content: "\e908";
+    }
 
-.icon-checkbox-outline:before {
-    content: "\e909";
-}
+    .icon-checkbox-outline:before {
+        content: "\e909";
+    }
 
-.icon-message:before {
-    content: "\e90a";
-}
+    .icon-message:before {
+        content: "\e90a";
+    }
 
-.icon-video:before {
-    content: "\e90b";
-}
+    .icon-video:before {
+        content: "\e90b";
+    }
 
-.icon-attachmetent:before {
-    content: "\e90c";
-}
+    .icon-attachmetent:before {
+        content: "\e90c";
+    }
 
-.icon-sent:before {
-    content: "\e90d";
-}
+    .icon-sent:before {
+        content: "\e90d";
+    }
 
-.icon-call:before {
-    content: "\e90e";
-}
+    .icon-call:before {
+        content: "\e90e";
+    }
 
-.icon-meeting:before {
-    content: "\e90f";
-}
+    .icon-meeting:before {
+        content: "\e90f";
+    }
 
-.icon-light:before {
-    content: "\e910";
-}
+    .icon-light:before {
+        content: "\e910";
+    }
 
-.icon-dark:before {
-    content: "\e911";
-}
+    .icon-dark:before {
+        content: "\e911";
+    }
 
-.icon-mail:before {
-    content: "\e912";
-}
+    .icon-mail:before {
+        content: "\e912";
+    }
 
-.icon-leads:before {
-    content: "\e913";
-}
+    .icon-leads:before {
+        content: "\e913";
+    }
 
-.icon-filter:before {
-    content: "\e914";
-}
+    .icon-filter:before {
+        content: "\e914";
+    }
 
-.icon-setting:before {
-    content: "\e915";
-}
+    .icon-setting:before {
+        content: "\e915";
+    }
 
-.icon-product:before {
-    content: "\e916";
-}
+    .icon-product:before {
+        content: "\e916";
+    }
 
-.icon-contact:before {
-    content: "\e917";
-}
+    .icon-contact:before {
+        content: "\e917";
+    }
 
-.icon-activity:before {
-    content: "\e918";
-}
+    .icon-activity:before {
+        content: "\e918";
+    }
 
-.icon-perosnal:before {
-    content: "\e919";
-}
+    .icon-perosnal:before {
+        content: "\e919";
+    }
 
-.icon-quote:before {
-    content: "\e91a";
-}
+    .icon-quote:before {
+        content: "\e91a";
+    }
 
-.icon-dashboard:before {
-    content: "\e91b";
-}
+    .icon-dashboard:before {
+        content: "\e91b";
+    }
 
-.icon-cross-large:before {
-    content: "\e91c";
-}
+    .icon-cross-large:before {
+        content: "\e91c";
+    }
 
-.icon-left-arrow:before {
-    content: "\e91d";
-}
+    .icon-left-arrow:before {
+        content: "\e91d";
+    }
 
-.icon-right-arrow:before {
-    content: "\e91e";
-}
+    .icon-right-arrow:before {
+        content: "\e91e";
+    }
 
-.icon-up-arrow:before {
-    content: "\e91f";
-}
+    .icon-up-arrow:before {
+        content: "\e91f";
+    }
 
-.icon-down-arrow:before {
-    content: "\e920";
-}
+    .icon-down-arrow:before {
+        content: "\e920";
+    }
 
-.icon-search:before {
-    content: "\e921";
-}
+    .icon-search:before {
+        content: "\e921";
+    }
 
-.icon-add:before {
-    content: "\e922";
-}
+    .icon-add:before {
+        content: "\e922";
+    }
 
-.icon-add-2:before {
-    content: "\e923";
-}
+    .icon-add-2:before {
+        content: "\e923";
+    }
 
-.label-active {
-  @apply max-w-max rounded-md bg-emerald-200 px-3 py-1.5 text-xs font-medium text-emerald-900;
-}
+    .label-active {
+        @apply max-w-max rounded-md bg-emerald-200 px-3 py-1.5 text-xs font-medium text-emerald-900;
+    }
 
-.label-inactive {
-  @apply max-w-max rounded-md bg-red-200 px-3 py-1.5 text-xs font-medium text-red-800;
-}  
+    .label-inactive {
+        @apply max-w-max rounded-md bg-red-200 px-3 py-1.5 text-xs font-medium text-red-800;
+    }  
 
-.sidebar-rounded::after {
-  @apply w-[30px] h-[30px] top-[5px] right-[-30px] absolute rounded-tl-[58%] shadow-[-8px_-5px_0px_1px_rgba(255,255,255,1)] dark:shadow-[-8px_-5px_0px_1px_rgba(17,24,39,1)] ;
-  content: "";
-  pointer-events: none;
-}
+    .sidebar-rounded::after {
+        @apply w-[30px] h-[30px] top-[5px] right-[-30px] absolute rounded-tl-[58%] shadow-[-8px_-5px_0px_1px_rgba(255,255,255,1)] dark:shadow-[-8px_-5px_0px_1px_rgba(17,24,39,1)] ;
+        content: "";
+        pointer-events: none;
+    }
 
-.tox.tox-silver-sink.tox-tinymce-aux {
-    z-index: 99999;
+    .tox.tox-silver-sink.tox-tinymce-aux {
+        z-index: 99999;
+    }
 }
 
 /* -------------------------------- new css end -------------------------------- */  
@@ -415,14 +417,6 @@
         @apply cursor-not-allowed opacity-50;
     }
 
-    .direction-ltr {
-        direction: ltr;
-    }
-
-    .direction-rtl {
-        direction: rtl;
-    }
-
     .draggable-ghost {
         opacity: 0.5;
         background: #e0e7ff;
diff --git a/packages/Webkul/Admin/src/Resources/views/products/view/inventory.blade.php b/packages/Webkul/Admin/src/Resources/views/products/view/inventory.blade.php
index ef742d892c..176dabee9d 100644
--- a/packages/Webkul/Admin/src/Resources/views/products/view/inventory.blade.php
+++ b/packages/Webkul/Admin/src/Resources/views/products/view/inventory.blade.php
@@ -31,22 +31,22 @@
                 </x-admin::table.thead>
 
                 <!-- Table Body -->
-                <x-admin::table.tbody class="rounded-lg border border-gray-200 bg-gray-500 px-4 py-2 text-sm dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300"> 
+                <x-admin::table.tbody> 
                     <template v-for="warehouse in productWarehouses">
-                        <x-admin::table.tbody.tr class="border-b-2">
-                            <x-admin::table.td class="font-bold">
+                        <x-admin::table.tbody.tr class="border border-gray-200 hover:bg-gray-50 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-950">
+                            <x-admin::table.td class="font-bold dark:text-white">
                                 @{{ warehouse.name }}
                             </x-admin::table.td>
                             
-                            <x-admin::table.td>
+                            <x-admin::table.td class="dark:text-white">
                                 @{{ warehouse.in_stock }}
                             </x-admin::table.td>
                             
-                            <x-admin::table.td>
+                            <x-admin::table.td class="dark:text-white">
                                 @{{ warehouse.allocated }}
                             </x-admin::table.td>
                             
-                            <x-admin::table.td>
+                            <x-admin::table.td class="dark:text-white">
                                 @{{ warehouse.on_hand }}
                             </x-admin::table.td>
                             
@@ -62,7 +62,7 @@ class="cursor-pointer text-brandColor"
                         </x-admin::table.tbody.tr>
 
                         <template v-for="location in warehouse.locations">
-                            <x-admin::table.tbody.tr class="border-b-2">
+                            <x-admin::table.tbody.tr class="border-b">
                                 <x-admin::table.td>
                                     @{{ location.name }}
                                 </x-admin::table.td>
@@ -153,7 +153,7 @@ class="primary-button ltr:mr-11 rtl:ml-11"
         <div class="flex flex-col gap-2">
             <!-- Add location header -->
             <x-admin::table class="!min-w-[480px]">
-                <x-admin::table.thead>
+                <x-admin::table.thead class="dark:bg-gray-800 dark:text-gray-300">
                     <x-admin::table.thead.tr>
                         <x-admin::table.th class="!w-56">
                             @lang('admin::app.products.view.inventory.location')
@@ -195,7 +195,7 @@ class="cursor-pointer text-brandColor"
 
     <script type="text/x-template" id="v-warehouse-location-inventory-item-template">
         <!-- Input fields for add locations -->
-        <x-admin::table.thead.tr class="border-b-2 align-top">
+        <x-admin::table.tbody.tr class="border-b border-gray-200 align-top transition-all hover:bg-gray-50 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-950">
             <x-admin::table.td class="!px-2">
                 <x-admin::form.control-group>
                     <x-admin::lookup 
@@ -252,7 +252,7 @@ class="cursor-pointer text-brandColor"
                     class="icon-delete cursor-pointer text-2xl"
                 ></i>
             </x-admin::table.td>
-        </x-admin::table.thead.tr>
+        </x-admin::table.tbody.tr>
     </script>
 
     <script type="module">