diff --git a/src/components/POS/Classic/ItemsGrid.vue b/src/components/POS/Classic/ItemsGrid.vue
index adc992176..08c289a21 100644
--- a/src/components/POS/Classic/ItemsGrid.vue
+++ b/src/components/POS/Classic/ItemsGrid.vue
@@ -1,14 +1,13 @@
 <template>
   <div
     class="
-      flex flex-col
       gap-4
-      p-2
+      py-2
+      w-full
+      flex flex-col
       items-center
-      px-2
       rounded-t-md
       text-black
-      w-full
       overflow-y-auto
       custom-scroll custom-scroll-thumb2
     "
@@ -17,21 +16,21 @@
     <!-- Items Grid -->
     <div
       class="
+        gap-2
+        w-full
         grid grid-cols-1
         md:grid-cols-2
         lg:grid-cols-3
         xl:grid-cols-4
-        gap-2
-        w-full
       "
     >
       <div
         class="
-          border border-gray-300
-          dark:border-gray-800
           p-1
+          border border-gray-300
           flex flex-col
           text-sm text-center
+          dark:border-gray-800
         "
         @click="handleChange(item as POSItem)"
         v-for="item in items as POSItem[]"
@@ -52,11 +51,11 @@
                 rounded-lg
                 w-full
                 h-full
-                flex
                 bg-gray-100
-                dark:bg-gray-850
+                flex
                 justify-center
                 items-center
+                dark:bg-gray-850
               "
             >
               <p class="text-4xl font-semibold text-gray-400 select-none">
diff --git a/src/components/POS/Modern/ModernPOSItemsGrid.vue b/src/components/POS/Modern/ModernPOSItemsGrid.vue
index 3debd6ba3..a96cb7613 100644
--- a/src/components/POS/Modern/ModernPOSItemsGrid.vue
+++ b/src/components/POS/Modern/ModernPOSItemsGrid.vue
@@ -18,9 +18,9 @@
     <!-- Items Grid -->
     <div
       class="
-        grid grid-cols-1
-        gap-2
-        w-full
+      gap-2
+      w-full
+      grid grid-cols-1
         sm:grid-cols-2
         md:grid-cols-4
         lg:grid-cols-6
@@ -29,9 +29,9 @@
     >
       <div
         class="
+        p-1
           border border-gray-300
           dark:border-gray-800
-          p-1
           flex flex-col
           text-sm text-center
         "
@@ -52,13 +52,13 @@
               v-else
               class="
                 rounded-lg
+                bg-gray-100
                 w-full
                 h-full
-                bg-gray-100
-                dark:bg-gray-850
                 flex
                 justify-center
                 items-center
+                dark:bg-gray-850
               "
             >
               <p class="text-4xl font-semibold text-gray-400 select-none">
@@ -67,12 +67,12 @@
             </div>
             <p
               class="
+              w-6
+              h-6
+              top-1
+              right-1
                 absolute
-                top-1
-                right-1
                 rounded-full
-                w-6
-                h-6
                 flex
                 justify-center
                 items-center
diff --git a/src/components/POS/Modern/ModernPOSItemsTable.vue b/src/components/POS/Modern/ModernPOSItemsTable.vue
index 60bb90885..2b23cdd95 100644
--- a/src/components/POS/Modern/ModernPOSItemsTable.vue
+++ b/src/components/POS/Modern/ModernPOSItemsTable.vue
@@ -7,15 +7,15 @@
       <Row
         :ratio="ratio"
         class="
-          border
-          flex
-          items-center
-          mt-2
-          px-2
+        mt-2
+        px-2
+        w-full
+        flex
+        items-center
+        border
           rounded-t-md
           text-gray-600
           dark:border-gray-800 dark:text-gray-400
-          w-full
         "
       >
         <div
@@ -36,16 +36,16 @@
         :ratio="ratio"
         :border="true"
         class="
+        px-2
+        w-full
           border-b border-x
-          dark:border-gray-800
           flex
           items-center
           justify-center
           group
           h-row-mid
-          px-2
-          w-full
           hover:bg-gray-25
+          dark:border-gray-800
           dark:bg-gray-890
         "
         @click="handleChange(row)"
@@ -68,14 +68,14 @@
       <Row
         :ratio="ratio"
         class="
-          border
-          flex
-          items-center
-          mt-2
-          px-2
-          rounded-t-md
+        mt-2
+        px-2
+        w-full
+        flex
+        items-center
+        border
+        rounded-t-md
           text-gray-600
-          w-full
           dark:border-gray-800 dark:text-gray-400
         "
       >
@@ -96,14 +96,14 @@
         :ratio="ratio"
         :border="true"
         class="
+        px-2
+        w-full
           border-b border-x
           flex
           items-center
           justify-center
           group
           h-row-mid
-          px-2
-          w-full
           hover:bg-gray-25
           dark:bg-gray-890 dark:border-gray-800
         "