diff --git a/components/cart/edit-item-quantity-button.tsx b/components/cart/edit-item-quantity-button.tsx
index 3ef3cab18..a9c07b73b 100644
--- a/components/cart/edit-item-quantity-button.tsx
+++ b/components/cart/edit-item-quantity-button.tsx
@@ -51,9 +51,9 @@ export default function EditItemQuantityButton({
       {isPending ? (
         <LoadingDots className="bg-black dark:bg-white" />
       ) : type === 'plus' ? (
-        <PlusIcon className="w-4 h-4 dark:text-gray-500" />
+        <PlusIcon className="h-4 w-4 dark:text-gray-500" />
       ) : (
-        <MinusIcon className="w-4 h-4 dark:text-gray-500" />
+        <MinusIcon className="h-4 w-4 dark:text-gray-500" />
       )}
     </button>
   );
diff --git a/components/icons/cart.tsx b/components/icons/cart.tsx
index 173a0de97..e2212627c 100644
--- a/components/icons/cart.tsx
+++ b/components/icons/cart.tsx
@@ -11,7 +11,7 @@ export default function CartIcon({
   icon?: string;
 }) {
   return (
-    <div className="relative flex items-center justify-center text-black transition-colors border border-gray-200 rounded-md h-11 w-11 dark:border-gray-700 dark:text-white">
+    <div className="relative flex h-11 w-11 items-center justify-center rounded-md border border-gray-200 text-black transition-colors dark:border-gray-700 dark:text-white">
       {icon === 'close' ? (
         <XMarkIcon className={clsx('h-6 transition-all ease-in-out hover:scale-110 ', className)} />
       ) : (
diff --git a/components/layout/navbar/mobile-menu.tsx b/components/layout/navbar/mobile-menu.tsx
index 753d2349e..5a873c0c2 100644
--- a/components/layout/navbar/mobile-menu.tsx
+++ b/components/layout/navbar/mobile-menu.tsx
@@ -62,7 +62,7 @@ export default function MobileMenu({ menu }: { menu: Menu[] }) {
             leaveFrom="translate-x-0"
             leaveTo="translate-x-[-100%]"
           >
-            <Dialog.Panel className="fixed top-0 bottom-0 left-0 right-0 flex flex-col w-full h-full pb-6 bg-white dark:bg-black">
+            <Dialog.Panel className="fixed bottom-0 left-0 right-0 top-0 flex h-full w-full flex-col bg-white pb-6 dark:bg-black">
               <div className="p-4">
                 <button
                   className="mb-4"
@@ -73,7 +73,7 @@ export default function MobileMenu({ menu }: { menu: Menu[] }) {
                   <XMarkIcon className="h-6" />
                 </button>
 
-                <div className="w-full mb-4">
+                <div className="mb-4 w-full">
                   <Search />
                 </div>
                 {menu.length ? (
@@ -82,7 +82,7 @@ export default function MobileMenu({ menu }: { menu: Menu[] }) {
                       <li key={item.title}>
                         <Link
                           href={item.path}
-                          className="py-1 text-xl text-black transition-colors rounded-lg hover:text-gray-500 dark:text-white"
+                          className="rounded-lg py-1 text-xl text-black transition-colors hover:text-gray-500 dark:text-white"
                           onClick={closeMobileMenu}
                         >
                           {item.title}
diff --git a/components/layout/navbar/search.tsx b/components/layout/navbar/search.tsx
index c49306476..7d8e44cde 100644
--- a/components/layout/navbar/search.tsx
+++ b/components/layout/navbar/search.tsx
@@ -28,7 +28,7 @@ export default function Search() {
   return (
     <form
       onSubmit={onSubmit}
-      className="relative flex items-center w-full p-0 m-0 bg-transparent border border-gray-200 dark:border-gray-500"
+      className="relative m-0 flex w-full items-center border border-gray-200 bg-transparent p-0 dark:border-gray-500"
     >
       <input
         type="text"
@@ -38,7 +38,7 @@ export default function Search() {
         defaultValue={searchParams?.get('q') || ''}
         className="w-full px-4 py-2 text-black dark:bg-black dark:text-gray-100"
       />
-      <div className="absolute top-0 right-0 flex items-center h-full mr-3">
+      <div className="absolute right-0 top-0 mr-3 flex h-full items-center">
         <MagnifyingGlassIcon className="h-5" />
       </div>
     </form>
diff --git a/components/layout/search/filter/dropdown.tsx b/components/layout/search/filter/dropdown.tsx
index 2f38f0df7..02ed346f9 100644
--- a/components/layout/search/filter/dropdown.tsx
+++ b/components/layout/search/filter/dropdown.tsx
@@ -42,7 +42,7 @@ export default function FilterItemDropdown({ list }: { list: ListItem[] }) {
         onClick={() => {
           setOpenSelect(!openSelect);
         }}
-        className="flex items-center justify-between w-full px-4 py-2 text-sm border rounded border-black/30 dark:border-white/30"
+        className="flex w-full items-center justify-between rounded border border-black/30 px-4 py-2 text-sm dark:border-white/30"
       >
         <div>{active}</div>
         <ChevronRightIcon className="h-4" />
@@ -52,7 +52,7 @@ export default function FilterItemDropdown({ list }: { list: ListItem[] }) {
           onClick={() => {
             setOpenSelect(false);
           }}
-          className="absolute z-40 w-full p-4 bg-white shadow-md rounded-b-md dark:bg-black"
+          className="absolute z-40 w-full rounded-b-md bg-white p-4 shadow-md dark:bg-black"
         >
           {list.map((item: ListItem, i) => (
             <FilterItem key={i} item={item} />
diff --git a/components/product/gallery.tsx b/components/product/gallery.tsx
index be92d6498..7ee154b57 100644
--- a/components/product/gallery.tsx
+++ b/components/product/gallery.tsx
@@ -51,7 +51,7 @@ export function Gallery({
         )}
 
         {images.length > 1 ? (
-          <div className="absolute flex flex-row h-12 text-white border border-white shadow-xl bottom-10 right-10 dark:border-black dark:text-black">
+          <div className="absolute bottom-10 right-10 flex h-12 flex-row border border-white text-white shadow-xl dark:border-black dark:text-black">
             <button
               aria-label="Previous product image"
               className={clsx(buttonClassName, 'border-r border-white dark:border-black')}
@@ -78,7 +78,7 @@ export function Gallery({
               <button
                 aria-label="Enlarge product image"
                 key={image.src}
-                className="w-1/4 h-full"
+                className="h-full w-1/4"
                 onClick={() => setCurrentImage(index)}
               >
                 <GridTileImage