diff --git a/packages/admin-ui/ui/src/components/atoms/avatar/index.tsx b/packages/admin-ui/ui/src/components/atoms/avatar/index.tsx
index 9912beabe9..f7a0c20845 100644
--- a/packages/admin-ui/ui/src/components/atoms/avatar/index.tsx
+++ b/packages/admin-ui/ui/src/components/atoms/avatar/index.tsx
@@ -34,18 +34,18 @@ const Avatar: React.FC<AvatarProps> = ({
   return (
     <RadixAvatar.Root
       className={clsx(
-        "w-full h-full items-center justify-center overflow-hidden select-none rounded-circle",
+        "rounded-circle h-full w-full select-none items-center justify-center overflow-hidden",
         color
       )}
     >
       <RadixAvatar.Image
         src={user?.img}
         alt={username}
-        className="object-cover w-full h-full rounded-circle"
+        className="rounded-circle h-full w-full object-cover"
       />
       <RadixAvatar.Fallback
         className={clsx(
-          "w-full h-full flex items-center justify-center bg-inherit text-grey-0 rounded-circle",
+          "text-grey-0 rounded-circle flex h-full w-full items-center justify-center bg-inherit",
           font
         )}
       >
diff --git a/packages/admin-ui/ui/src/components/atoms/back-button/index.tsx b/packages/admin-ui/ui/src/components/atoms/back-button/index.tsx
index bdeba61236..66f697690a 100644
--- a/packages/admin-ui/ui/src/components/atoms/back-button/index.tsx
+++ b/packages/admin-ui/ui/src/components/atoms/back-button/index.tsx
@@ -1,5 +1,4 @@
 import clsx from "clsx"
-import React from "react"
 import { useNavigate } from "react-router-dom"
 import ArrowLeftIcon from "../../fundamentals/icons/arrow-left-icon"
 
@@ -18,7 +17,7 @@ const BackButton = ({ path, label = "Go back", className }: Props) => {
       }}
       className={clsx("px-small py-xsmall", className)}
     >
-      <div className="flex items-center gap-x-xsmall text-grey-50 inter-grey-40 inter-small-semibold">
+      <div className="gap-x-xsmall text-grey-50 inter-grey-40 inter-small-semibold flex items-center">
         <ArrowLeftIcon size={20} />
         <span className="ml-1">{label}</span>
       </div>
diff --git a/packages/admin-ui/ui/src/components/atoms/checkbox/index.tsx b/packages/admin-ui/ui/src/components/atoms/checkbox/index.tsx
index 2e4fa8dca7..6d37c2627c 100644
--- a/packages/admin-ui/ui/src/components/atoms/checkbox/index.tsx
+++ b/packages/admin-ui/ui/src/components/atoms/checkbox/index.tsx
@@ -12,13 +12,13 @@ const Checkbox = React.forwardRef(
     useImperativeHandle(ref, () => checkboxRef.current)
     return (
       <label
-        className={clsx("flex items-center cursor-pointer", className)}
+        className={clsx("flex cursor-pointer items-center", className)}
         htmlFor={id}
       >
         <input
           type="checkbox"
           ref={checkboxRef}
-          className="form-checkbox w-[20px] h-[20px] rounded-base text-violet-60 focus:ring-0 mr-small border-grey-30"
+          className="form-checkbox rounded-base text-violet-60 mr-small border-grey-30 h-[20px] w-[20px] focus:ring-0"
           value={value}
           id={id}
           {...rest}
diff --git a/packages/admin-ui/ui/src/components/atoms/date-picker/custom-header.tsx b/packages/admin-ui/ui/src/components/atoms/date-picker/custom-header.tsx
index bfb99e0f59..fd7ffcd97d 100644
--- a/packages/admin-ui/ui/src/components/atoms/date-picker/custom-header.tsx
+++ b/packages/admin-ui/ui/src/components/atoms/date-picker/custom-header.tsx
@@ -12,7 +12,7 @@ const CustomHeader = ({
 
   const year = date.getFullYear()
   return (
-    <div className="flex w-full gap-4 items-center">
+    <div className="flex w-full items-center gap-4">
       <div className="flex flex-1 items-center justify-end gap-3">
         <NativeSelect
           defaultValue={monthName}
diff --git a/packages/admin-ui/ui/src/components/atoms/date-picker/date-picker.tsx b/packages/admin-ui/ui/src/components/atoms/date-picker/date-picker.tsx
index 165b263018..c27f43183a 100644
--- a/packages/admin-ui/ui/src/components/atoms/date-picker/date-picker.tsx
+++ b/packages/admin-ui/ui/src/components/atoms/date-picker/date-picker.tsx
@@ -50,13 +50,13 @@ const DatePicker: React.FC<DateTimePickerProps> = ({
       <PopoverPrimitive.Root open={isOpen} onOpenChange={setIsOpen}>
         <PopoverPrimitive.Trigger asChild>
           <button
-            className={clsx("w-full rounded-rounded border ", {
+            className={clsx("rounded-rounded w-full border ", {
               "shadow-input border-violet-60": isOpen,
               "border-grey-20": !isOpen,
             })}
           >
-            <InputContainer className="border-0 shadown-none focus-within:shadow-none">
-              <div className="w-full flex text-grey-50 pr-0.5 justify-between">
+            <InputContainer className="shadown-none border-0 focus-within:shadow-none">
+              <div className="text-grey-50 flex w-full justify-between pr-0.5">
                 <InputHeader
                   {...{
                     label,
@@ -76,15 +76,15 @@ const DatePicker: React.FC<DateTimePickerProps> = ({
         <PopoverPrimitive.Content
           side="top"
           sideOffset={8}
-          className="rounded-rounded px-8  border border-grey-20 bg-grey-0 w-full shadow-dropdown"
+          className="rounded-rounded border-grey-20  bg-grey-0 shadow-dropdown w-full border px-8"
         >
           <CalendarComponent date={tempDate} onChange={setTempDate} />
-          <div className="flex w-full mb-8 mt-5">
+          <div className="mb-8 mt-5 flex w-full">
             <Button
               variant="ghost"
               size="medium"
               onClick={() => setIsOpen(false)}
-              className="mr-2 w-1/3 flex justify-center border border-grey-20"
+              className="border-grey-20 mr-2 flex w-1/3 justify-center border"
             >
               Cancel
             </Button>
@@ -92,7 +92,7 @@ const DatePicker: React.FC<DateTimePickerProps> = ({
               size="medium"
               variant="primary"
               onClick={() => submitDate()}
-              className="w-2/3 flex justify-center"
+              className="flex w-2/3 justify-center"
             >{`Set ${label}`}</Button>
           </div>
         </PopoverPrimitive.Content>
diff --git a/packages/admin-ui/ui/src/components/atoms/date-picker/time-picker.tsx b/packages/admin-ui/ui/src/components/atoms/date-picker/time-picker.tsx
index f0f62f943b..348f2e0f0a 100644
--- a/packages/admin-ui/ui/src/components/atoms/date-picker/time-picker.tsx
+++ b/packages/admin-ui/ui/src/components/atoms/date-picker/time-picker.tsx
@@ -49,13 +49,13 @@ const TimePicker: React.FC<DateTimePickerProps> = ({
       <PopoverPrimitive.Root open={isOpen} onOpenChange={setIsOpen}>
         <PopoverPrimitive.Trigger asChild>
           <button
-            className={clsx("w-full rounded-rounded border ", {
+            className={clsx("rounded-rounded w-full border ", {
               "shadow-input border-violet-60": isOpen,
               "border-grey-20": !isOpen,
             })}
           >
-            <InputContainer className="border-0 shadown-none focus-within:shadow-none">
-              <div className="w-full flex text-grey-50 pr-0.5 justify-between">
+            <InputContainer className="shadown-none border-0 focus-within:shadow-none">
+              <div className="text-grey-50 flex w-full justify-between pr-0.5">
                 <InputHeader
                   {...{
                     label,
@@ -66,7 +66,7 @@ const TimePicker: React.FC<DateTimePickerProps> = ({
                 />
                 <ArrowDownIcon size={16} />
               </div>
-              <div className="w-full items-center flex text-left text-grey-40">
+              <div className="text-grey-40 flex w-full items-center text-left">
                 <ClockIcon size={16} />
                 <span className="mx-1">UTC</span>
                 <span className="text-grey-90">
@@ -79,7 +79,7 @@ const TimePicker: React.FC<DateTimePickerProps> = ({
         <PopoverPrimitive.Content
           side="top"
           sideOffset={8}
-          className="rounded-rounded scrollbar-hide border px-6 pt-6 pb-4 border-grey-20 bg-grey-0 w-full flex shadow-dropdown"
+          className="rounded-rounded scrollbar-hide border-grey-20 bg-grey-0 shadow-dropdown flex w-full border px-6 pt-6 pb-4"
         >
           <NumberScroller
             numbers={hourNumbers}
@@ -92,7 +92,7 @@ const TimePicker: React.FC<DateTimePickerProps> = ({
             selected={selectedMinute}
             onSelect={(n) => setSelectedMinute(n)}
           />
-          <div className="absolute bottom-4 left-0 right-0 bg-gradient-to-b from-transparent to-grey-0 h-xlarge z-10" />
+          <div className="to-grey-0 h-xlarge absolute bottom-4 left-0 right-0 z-10 bg-gradient-to-b from-transparent" />
         </PopoverPrimitive.Content>
       </PopoverPrimitive.Root>
     </div>
diff --git a/packages/admin-ui/ui/src/components/atoms/fade-wrapper/index.tsx b/packages/admin-ui/ui/src/components/atoms/fade-wrapper/index.tsx
index 2594591b8e..94b7e46f19 100644
--- a/packages/admin-ui/ui/src/components/atoms/fade-wrapper/index.tsx
+++ b/packages/admin-ui/ui/src/components/atoms/fade-wrapper/index.tsx
@@ -37,7 +37,7 @@ const Fade: React.FC<FadeProps> = ({
 
   return (
     <div
-      className={clsx("transition-all duration-100 z-50", classes, classname)}
+      className={clsx("z-50 transition-all duration-100", classes, classname)}
     >
       {show ? children : null}
     </div>
diff --git a/packages/admin-ui/ui/src/components/atoms/file-upload-field/index.tsx b/packages/admin-ui/ui/src/components/atoms/file-upload-field/index.tsx
index 265700c5cd..1442bb7161 100644
--- a/packages/admin-ui/ui/src/components/atoms/file-upload-field/index.tsx
+++ b/packages/admin-ui/ui/src/components/atoms/file-upload-field/index.tsx
@@ -77,7 +77,7 @@ const FileUploadField: React.FC<FileUploadFieldProps> = ({
       onDrop={handleFileDrop}
       onDragOver={(e) => e.preventDefault()}
       className={clsx(
-        "flex flex-col select-none inter-base-regular text-grey-50 cursor-pointer items-center justify-center w-full h-full rounded-rounded border-2 border-dashed border-grey-20 transition-colors hover:border-violet-60 hover:text-grey-40",
+        "inter-base-regular text-grey-50 rounded-rounded border-grey-20 hover:border-violet-60 hover:text-grey-40 flex h-full w-full cursor-pointer select-none flex-col items-center justify-center border-2 border-dashed transition-colors",
         className
       )}
     >
diff --git a/packages/admin-ui/ui/src/components/atoms/includes-tax-tooltip/index.tsx b/packages/admin-ui/ui/src/components/atoms/includes-tax-tooltip/index.tsx
index 9f25abb610..760e1eba84 100644
--- a/packages/admin-ui/ui/src/components/atoms/includes-tax-tooltip/index.tsx
+++ b/packages/admin-ui/ui/src/components/atoms/includes-tax-tooltip/index.tsx
@@ -1,5 +1,4 @@
 import clsx from "clsx"
-import React from "react"
 import TaxesIcon from "../../fundamentals/icons/taxes-icon"
 import Tooltip from "../tooltip"
 
@@ -10,7 +9,7 @@ type Props = {
 const IncludesTaxTooltip = ({ includesTax }: Props) => {
   return (
     <Tooltip content={includesTax ? "Tax incl. price" : "Tax excl. price"}>
-      <div className="w-large h-large rounded-rounded border border-grey-20 flex items-center justify-center">
+      <div className="w-large h-large rounded-rounded border-grey-20 flex items-center justify-center border">
         <TaxesIcon
           size={16}
           className={clsx({
diff --git a/packages/admin-ui/ui/src/components/atoms/input-error/index.tsx b/packages/admin-ui/ui/src/components/atoms/input-error/index.tsx
index 23ad952658..7750a386fd 100644
--- a/packages/admin-ui/ui/src/components/atoms/input-error/index.tsx
+++ b/packages/admin-ui/ui/src/components/atoms/input-error/index.tsx
@@ -1,6 +1,5 @@
 import { ErrorMessage } from "@hookform/error-message"
 import clsx from "clsx"
-import React from "react"
 import { MultipleFieldErrors } from "react-hook-form"
 import Tooltip from "../tooltip"
 
@@ -22,7 +21,7 @@ const InputError = ({ errors, name, className }: InputErrorProps) => {
       render={({ message, messages }) => {
         return (
           <div
-            className={clsx("text-rose-50 inter-small-regular mt-2", className)}
+            className={clsx("inter-small-regular mt-2 text-rose-50", className)}
           >
             {messages ? (
               <MultipleMessages messages={messages} />
@@ -43,12 +42,12 @@ const MultipleMessages = ({ messages }: { messages: MultipleFieldErrors }) => {
   const remainderErrors = errors.slice(1)
 
   return (
-    <div className="flex items-center gap-x-1 cursor-default">
+    <div className="flex cursor-default items-center gap-x-1">
       <p>{displayedError}</p>
       {remainderErrors?.length > 0 && (
         <Tooltip
           content={
-            <div className="text-rose-50 inter-small-regular">
+            <div className="inter-small-regular text-rose-50">
               {remainderErrors.map((e, i) => {
                 return (
                   <p key={i}>
diff --git a/packages/admin-ui/ui/src/components/atoms/notification/index.tsx b/packages/admin-ui/ui/src/components/atoms/notification/index.tsx
index 3a5f6f7f37..e56174e882 100644
--- a/packages/admin-ui/ui/src/components/atoms/notification/index.tsx
+++ b/packages/admin-ui/ui/src/components/atoms/notification/index.tsx
@@ -30,7 +30,7 @@ const Notification: React.FC<NotificationProps> = ({
   return (
     <ToasterContainer visible={toast.visible} className="w-[380px]">
       <div>{getIcon(type)}</div>
-      <div className="flex flex-col ml-small mr-base gap-y-2xsmall flex-grow text-white">
+      <div className="ml-small mr-base gap-y-2xsmall flex flex-grow flex-col text-white">
         <span className="inter-small-semibold">{title}</span>
         <span className="inter-small-regular text-grey-20">{message}</span>
       </div>
diff --git a/packages/admin-ui/ui/src/components/atoms/number-scroller/index.tsx b/packages/admin-ui/ui/src/components/atoms/number-scroller/index.tsx
index 514b901d7c..952fde54da 100644
--- a/packages/admin-ui/ui/src/components/atoms/number-scroller/index.tsx
+++ b/packages/admin-ui/ui/src/components/atoms/number-scroller/index.tsx
@@ -18,7 +18,7 @@ const NumberScroller: React.FC<NumberScrollerProps> = ({
     <div
       {...props}
       className={clsx(
-        "flex flex-col time-list h-[305px] overflow-y-auto",
+        "time-list flex h-[305px] flex-col overflow-y-auto",
         className
       )}
     >
@@ -27,14 +27,14 @@ const NumberScroller: React.FC<NumberScrollerProps> = ({
           <div
             key={i}
             className={clsx(
-              "w-[40px] h-[40px] last:mb-4 rounded inter-base-regular hover:bg-grey-20",
+              "inter-base-regular hover:bg-grey-20 h-[40px] w-[40px] rounded last:mb-4",
               {
-                "bg-violet-60 hover:bg-violet-50 text-grey-0 inter-base-semibold":
+                "bg-violet-60 text-grey-0 inter-base-semibold hover:bg-violet-50":
                   n === selected,
               }
             )}
           >
-            <button onClick={() => onSelect(n)} className="w-full h-full py-2">
+            <button onClick={() => onSelect(n)} className="h-full w-full py-2">
               {n.toLocaleString("en-US", { minimumIntegerDigits: 2 })}
             </button>
           </div>
diff --git a/packages/admin-ui/ui/src/components/atoms/os-shortcut/index.tsx b/packages/admin-ui/ui/src/components/atoms/os-shortcut/index.tsx
index 74f4195732..952dd99801 100644
--- a/packages/admin-ui/ui/src/components/atoms/os-shortcut/index.tsx
+++ b/packages/admin-ui/ui/src/components/atoms/os-shortcut/index.tsx
@@ -1,5 +1,3 @@
-import React from "react"
-
 type OSShortcutProps = {
   winModifiers: string | string[]
   macModifiers: string | string[]
@@ -38,8 +36,8 @@ const OSShortcut = ({ winModifiers, macModifiers, keys }: OSShortcutProps) => {
   }
 
   return (
-    <div className="flex items-center text-grey-40">
-      <p className="m-0 inter-base-semibold">
+    <div className="text-grey-40 flex items-center">
+      <p className="inter-base-semibold m-0">
         <span className="inter-base-semibold">{modifiers} </span>
         {input}
       </p>
diff --git a/packages/admin-ui/ui/src/components/atoms/save-notification/error-state.tsx b/packages/admin-ui/ui/src/components/atoms/save-notification/error-state.tsx
index e84d1d47bc..c4fe1baf8e 100644
--- a/packages/admin-ui/ui/src/components/atoms/save-notification/error-state.tsx
+++ b/packages/admin-ui/ui/src/components/atoms/save-notification/error-state.tsx
@@ -32,7 +32,7 @@ const ErrorState: React.FC<SavingStateProps> = ({
       <div>
         <XCircleIcon size={20} className="text-rose-40" />
       </div>
-      <div className="flex flex-col ml-small mr-base gap-y-2xsmall flex-grow">
+      <div className="ml-small mr-base gap-y-2xsmall flex flex-grow flex-col">
         <span className="inter-small-semibold">{title}</span>
         <span className="inter-small-regular text-grey-50">{message}</span>
       </div>
diff --git a/packages/admin-ui/ui/src/components/atoms/save-notification/index.tsx b/packages/admin-ui/ui/src/components/atoms/save-notification/index.tsx
index d86745f93f..49781f838f 100644
--- a/packages/admin-ui/ui/src/components/atoms/save-notification/index.tsx
+++ b/packages/admin-ui/ui/src/components/atoms/save-notification/index.tsx
@@ -54,21 +54,21 @@ const SaveNotification: React.FC<SaveNotificationProps> = ({
   }
 
   return (
-    <ToasterContainer visible={toast.visible} className="p-0 pl-base w-[448px]">
+    <ToasterContainer visible={toast.visible} className="pl-base w-[448px] p-0">
       <div className="py-base">{getIcon(icon)}</div>
-      <div className="flex flex-col ml-small mr-base gap-y-2xsmall flex-grow py-base">
+      <div className="ml-small mr-base gap-y-2xsmall py-base flex flex-grow flex-col">
         <span className="inter-small-semibold">{title}</span>
         <span className="inter-small-regular text-grey-50">{message}</span>
       </div>
-      <div className="flex flex-col inter-small-semibold border-l border-grey-20 h-full">
+      <div className="inter-small-semibold border-grey-20 flex h-full flex-col border-l">
         <button
           onClick={handleSave}
-          className="inter-small-semibold flex items-center justify-center h-1/2 border-b border-grey-20 px-base text-violet-60"
+          className="inter-small-semibold border-grey-20 px-base text-violet-60 flex h-1/2 items-center justify-center border-b"
         >
           Publish
         </button>
         <button
-          className="inter-small-semibold flex items-center justify-center h-1/2 px-base"
+          className="inter-small-semibold px-base flex h-1/2 items-center justify-center"
           onClick={onDismiss}
         >
           Discard
diff --git a/packages/admin-ui/ui/src/components/atoms/save-notification/saving-state.tsx b/packages/admin-ui/ui/src/components/atoms/save-notification/saving-state.tsx
index feb481e02d..5bf40b186a 100644
--- a/packages/admin-ui/ui/src/components/atoms/save-notification/saving-state.tsx
+++ b/packages/admin-ui/ui/src/components/atoms/save-notification/saving-state.tsx
@@ -19,7 +19,7 @@ const SavingState: React.FC<SavingStateProps> = ({
       <div>
         <Spinner variant="secondary" size="large" />
       </div>
-      <div className="flex flex-col ml-small mr-base gap-y-2xsmall flex-grow">
+      <div className="ml-small mr-base gap-y-2xsmall flex flex-grow flex-col">
         <span className="inter-small-semibold">{title}</span>
         <span className="inter-small-regular text-grey-50">{message}</span>
       </div>
diff --git a/packages/admin-ui/ui/src/components/atoms/save-notification/success-state.tsx b/packages/admin-ui/ui/src/components/atoms/save-notification/success-state.tsx
index 007eadbff9..86e457dd4e 100644
--- a/packages/admin-ui/ui/src/components/atoms/save-notification/success-state.tsx
+++ b/packages/admin-ui/ui/src/components/atoms/save-notification/success-state.tsx
@@ -32,7 +32,7 @@ const SuccessState: React.FC<SavingStateProps> = ({
       <div>
         <CheckCircleIcon size={20} className="text-emerald-40" />
       </div>
-      <div className="flex flex-col ml-small mr-base gap-y-2xsmall flex-grow">
+      <div className="ml-small mr-base gap-y-2xsmall flex flex-grow flex-col">
         <span className="inter-small-semibold">{title}</span>
         <span className="inter-small-regular text-grey-50">{message}</span>
       </div>
diff --git a/packages/admin-ui/ui/src/components/atoms/spinner.tsx b/packages/admin-ui/ui/src/components/atoms/spinner.tsx
index f00aaeb8b3..153223731f 100644
--- a/packages/admin-ui/ui/src/components/atoms/spinner.tsx
+++ b/packages/admin-ui/ui/src/components/atoms/spinner.tsx
@@ -19,10 +19,10 @@ const Spinner: React.FC<SpinnerProps> = ({
         { "h-[16px] w-[16px]": size === "small" }
       )}
     >
-      <div className="flex items-center justify-center relative w-full h-full">
+      <div className="relative flex h-full w-full items-center justify-center">
         <div
           className={clsx(
-            "animate-ring border-2 h-4/5 w-4/5 rounded-circle border-transparent",
+            "animate-ring rounded-circle h-4/5 w-4/5 border-2 border-transparent",
             { "border-t-grey-0": variant === "primary" },
             { "border-t-violet-60": variant === "secondary" }
           )}
diff --git a/packages/admin-ui/ui/src/components/atoms/switch/index.tsx b/packages/admin-ui/ui/src/components/atoms/switch/index.tsx
index 6db8450990..71b9584f00 100644
--- a/packages/admin-ui/ui/src/components/atoms/switch/index.tsx
+++ b/packages/admin-ui/ui/src/components/atoms/switch/index.tsx
@@ -1,6 +1,5 @@
 import * as RadixSwitch from "@radix-ui/react-switch"
 import clsx from "clsx"
-import React from "react"
 
 /**
  * A controlled switch component atom.
@@ -11,12 +10,12 @@ function Switch(props: RadixSwitch.SwitchProps) {
       {...props}
       disabled={props.disabled}
       className={clsx(
-        "w-8 h-[18px] rounded-full transition-bg bg-gray-300 radix-state-checked:bg-violet-60"
+        "transition-bg radix-state-checked:bg-violet-60 h-[18px] w-8 rounded-full bg-gray-300"
       )}
     >
       <RadixSwitch.Thumb
         className={clsx(
-          "w-2 h-2 bg-white rounded-full block transition-transform translate-x-[5px] radix-state-checked:translate-x-[19px]"
+          "radix-state-checked:translate-x-[19px] block h-2 w-2 translate-x-[5px] rounded-full bg-white transition-transform"
         )}
       />
     </RadixSwitch.Root>
diff --git a/packages/admin-ui/ui/src/components/atoms/thumbnail/thumbnail.tsx b/packages/admin-ui/ui/src/components/atoms/thumbnail/thumbnail.tsx
index 2f463c8ad7..e098fa5038 100644
--- a/packages/admin-ui/ui/src/components/atoms/thumbnail/thumbnail.tsx
+++ b/packages/admin-ui/ui/src/components/atoms/thumbnail/thumbnail.tsx
@@ -11,17 +11,17 @@ export const Thumbnail = ({ src, className, size = "small" }: Props) => {
   return (
     <div
       className={clsx(
-        "bg-grey-5 flex items-center justify-center overflow-hidden rounded-rounded",
+        "bg-grey-5 rounded-rounded flex items-center justify-center overflow-hidden",
         {
-          "w-[30px] h-10": size === "small",
-          "w-9 h-12": size === "medium",
-          "w-[170px] h-[226px]": size === "large",
+          "h-10 w-[30px]": size === "small",
+          "h-12 w-9": size === "medium",
+          "h-[226px] w-[170px]": size === "large",
         },
         className
       )}
     >
       {src ? (
-        <img src={src} className="object-cover object-center flex-1" />
+        <img src={src} className="flex-1 object-cover object-center" />
       ) : (
         <ImagePlaceholderIcon />
       )}
diff --git a/packages/admin-ui/ui/src/components/atoms/toaster-container/index.tsx b/packages/admin-ui/ui/src/components/atoms/toaster-container/index.tsx
index e165b9c8e7..910d693477 100644
--- a/packages/admin-ui/ui/src/components/atoms/toaster-container/index.tsx
+++ b/packages/admin-ui/ui/src/components/atoms/toaster-container/index.tsx
@@ -14,7 +14,7 @@ const ToasterContainer: React.FC<ToasterContainerProps> = ({
   return (
     <div
       className={clsx(
-        "flex items-start bg-grey-90 p-base border rounded-rounded shadow-toaster mb-xsmall last:mb-0",
+        "bg-grey-90 p-base rounded-rounded shadow-toaster mb-xsmall flex items-start border last:mb-0",
         {
           "animate-enter": visible,
         },
diff --git a/packages/admin-ui/ui/src/components/atoms/tooltip/index.tsx b/packages/admin-ui/ui/src/components/atoms/tooltip/index.tsx
index 9cf4d667ae..898169afcd 100644
--- a/packages/admin-ui/ui/src/components/atoms/tooltip/index.tsx
+++ b/packages/admin-ui/ui/src/components/atoms/tooltip/index.tsx
@@ -41,8 +41,8 @@ const Tooltip = ({
           align="center"
           className={clsx(
             "inter-small-semibold text-grey-50",
-            "bg-grey-0 py-2 px-3 shadow-dropdown rounded-rounded",
-            "border border-solid border-grey-20",
+            "bg-grey-0 shadow-dropdown rounded-rounded py-2 px-3",
+            "border-grey-20 border border-solid",
             "max-w-[220px]",
             className
           )}
diff --git a/packages/admin-ui/ui/src/components/atoms/two-step-delete/index.tsx b/packages/admin-ui/ui/src/components/atoms/two-step-delete/index.tsx
index 5c7f85a6e1..b38294e041 100644
--- a/packages/admin-ui/ui/src/components/atoms/two-step-delete/index.tsx
+++ b/packages/admin-ui/ui/src/components/atoms/two-step-delete/index.tsx
@@ -60,10 +60,10 @@ const TwoStepDelete = forwardRef<HTMLButtonElement, Props>(
     return (
       <button
         className={clsx(
-          "transition-all rounded-lg border flex items-center justify-center",
+          "flex items-center justify-center rounded-lg border transition-all",
           {
-            "bg-rose-50 border-rose-50 px-3 py-1.5": armed,
-            "bg-transparent border-gray-20 p-1.5": !armed,
+            "border-rose-50 bg-rose-50 px-3 py-1.5": armed,
+            "border-gray-20 bg-transparent p-1.5": !armed,
           },
           {
             "!bg-grey-40 !border-grey-40 !p-1.5": deleting,
@@ -75,14 +75,14 @@ const TwoStepDelete = forwardRef<HTMLButtonElement, Props>(
         ref={innerRef}
       >
         <div
-          className={clsx("text-rose-50 inter-small-semibold", {
+          className={clsx("inter-small-semibold text-rose-50", {
             hidden: armed || deleting,
           })}
         >
           {children || <TrashIcon className="text-grey-50" size={20} />}
         </div>
         <span
-          className={clsx("text-white inter-small-semibold", {
+          className={clsx("inter-small-semibold text-white", {
             hidden: !armed || deleting,
           })}
         >
diff --git a/packages/admin-ui/ui/src/components/fundamentals/icon-badge/index.tsx b/packages/admin-ui/ui/src/components/fundamentals/icon-badge/index.tsx
index 5f30a61d09..e65ebecc87 100644
--- a/packages/admin-ui/ui/src/components/fundamentals/icon-badge/index.tsx
+++ b/packages/admin-ui/ui/src/components/fundamentals/icon-badge/index.tsx
@@ -23,7 +23,7 @@ const IconBadge: React.FC<IconBadgeProps> = ({
     <Badge
       variant={variant ?? "default"}
       className={clsx(
-        "flex items-center justify-center aspect-square w-[40px] h-[40px] border-2 border-white outline outline-1 outline-grey-20",
+        "outline-grey-20 flex aspect-square h-[40px] w-[40px] items-center justify-center border-2 border-white outline outline-1",
         className
       )}
       {...rest}
diff --git a/packages/admin-ui/ui/src/components/fundamentals/icons/download-icon.tsx b/packages/admin-ui/ui/src/components/fundamentals/icons/download-icon.tsx
index 9a76b15111..06ec848bd5 100644
--- a/packages/admin-ui/ui/src/components/fundamentals/icons/download-icon.tsx
+++ b/packages/admin-ui/ui/src/components/fundamentals/icons/download-icon.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from "react"
+import { FC } from "react"
 import IconProps from "./types/icon-type"
 
 const DownloadIcon: FC<IconProps> = (props) => {
diff --git a/packages/admin-ui/ui/src/components/fundamentals/icons/file-icon.tsx b/packages/admin-ui/ui/src/components/fundamentals/icons/file-icon.tsx
index e3e8f43b80..beeab98c8c 100644
--- a/packages/admin-ui/ui/src/components/fundamentals/icons/file-icon.tsx
+++ b/packages/admin-ui/ui/src/components/fundamentals/icons/file-icon.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from "react"
+import { FC } from "react"
 import IconProps from "./types/icon-type"
 
 const FileIcon: FC<IconProps> = (props) => {
diff --git a/packages/admin-ui/ui/src/components/fundamentals/icons/sad-face-icon/index.tsx b/packages/admin-ui/ui/src/components/fundamentals/icons/sad-face-icon/index.tsx
index 62053bfe0a..fc506291c1 100644
--- a/packages/admin-ui/ui/src/components/fundamentals/icons/sad-face-icon/index.tsx
+++ b/packages/admin-ui/ui/src/components/fundamentals/icons/sad-face-icon/index.tsx
@@ -44,7 +44,6 @@ const SadFaceIcon: React.FC<IconProps> = ({
         strokeLinejoin="round"
       />
     </svg>
-
   )
 }
 
diff --git a/packages/admin-ui/ui/src/components/fundamentals/icons/sided-mouth-face/index.tsx b/packages/admin-ui/ui/src/components/fundamentals/icons/sided-mouth-face/index.tsx
index 2448795b60..e426d96215 100644
--- a/packages/admin-ui/ui/src/components/fundamentals/icons/sided-mouth-face/index.tsx
+++ b/packages/admin-ui/ui/src/components/fundamentals/icons/sided-mouth-face/index.tsx
@@ -43,7 +43,6 @@ const SidedMouthFaceIcon: React.FC<IconProps> = ({
         strokeLinecap="round"
         strokeLinejoin="round"
       />
-
     </svg>
   )
 }
diff --git a/packages/admin-ui/ui/src/components/fundamentals/image-placeholder.tsx b/packages/admin-ui/ui/src/components/fundamentals/image-placeholder.tsx
index a6d7b7b2dc..da90062662 100644
--- a/packages/admin-ui/ui/src/components/fundamentals/image-placeholder.tsx
+++ b/packages/admin-ui/ui/src/components/fundamentals/image-placeholder.tsx
@@ -2,7 +2,7 @@ import ImagePlaceholderIcon from "./icons/image-placeholder-icon"
 
 const ImagePlaceholder = () => {
   return (
-    <div className="flex items-center justify-center w-full h-full rounded-soft bg-grey-5">
+    <div className="rounded-soft bg-grey-5 flex h-full w-full items-center justify-center">
       <ImagePlaceholderIcon size={12} />
     </div>
   )
diff --git a/packages/admin-ui/ui/src/components/fundamentals/input-container.tsx b/packages/admin-ui/ui/src/components/fundamentals/input-container.tsx
index 81464a3a3c..fdb22f2037 100644
--- a/packages/admin-ui/ui/src/components/fundamentals/input-container.tsx
+++ b/packages/admin-ui/ui/src/components/fundamentals/input-container.tsx
@@ -25,7 +25,7 @@ const InputContainer: React.FC<InputContainerProps> = ({
         }
       }}
       className={clsx([
-        `bg-grey-5 inter-base-regular w-full p-3 flex h-18 flex-col cursor-text border border-grey-20 focus-within:shadow-input focus-within:border-violet-60 rounded-rounded`,
+        `bg-grey-5 inter-base-regular h-18 border-grey-20 focus-within:shadow-input focus-within:border-violet-60 rounded-rounded flex w-full cursor-text flex-col border p-3`,
         className,
       ])}
     >
diff --git a/packages/admin-ui/ui/src/components/fundamentals/input-header.tsx b/packages/admin-ui/ui/src/components/fundamentals/input-header.tsx
index c2bc79296f..aaa4c55537 100644
--- a/packages/admin-ui/ui/src/components/fundamentals/input-header.tsx
+++ b/packages/admin-ui/ui/src/components/fundamentals/input-header.tsx
@@ -20,14 +20,14 @@ const InputHeader: React.FC<InputHeaderProps> = ({
   return (
     <div
       className={clsx(
-        "w-full flex inter-small-semibold text-grey-50 items-center",
+        "inter-small-semibold text-grey-50 flex w-full items-center",
         className
       )}
     >
       <label>{label}</label>
       {required && <div className="text-rose-50 "> *</div>}
       {tooltip || tooltipContent ? (
-        <div className="flex ml-1.5">
+        <div className="ml-1.5 flex">
           {tooltip || <IconTooltip content={tooltipContent} />}
         </div>
       ) : null}
diff --git a/packages/admin-ui/ui/src/components/molecules/actionables.tsx b/packages/admin-ui/ui/src/components/molecules/actionables.tsx
index 9a883ba65c..b66c80233e 100644
--- a/packages/admin-ui/ui/src/components/molecules/actionables.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/actionables.tsx
@@ -32,7 +32,7 @@ const Actionables: React.FC<ActionablesProps> = ({
               <Button
                 variant="ghost"
                 size="small"
-                className="w-xlarge h-xlarge focus-visible:outline-none focus-visible:shadow-input focus-visible:border-violet-60 focus:shadow-none"
+                className="w-xlarge h-xlarge focus-visible:shadow-input focus-visible:border-violet-60 focus:shadow-none focus-visible:outline-none"
               >
                 <MoreHorizontalIcon size={20} />
               </Button>
@@ -43,7 +43,7 @@ const Actionables: React.FC<ActionablesProps> = ({
 
           <DropdownMenu.Content
             sideOffset={5}
-            className="border bg-grey-0 border-grey-20 rounded-rounded shadow-dropdown p-xsmall min-w-[200px] z-30"
+            className="bg-grey-0 border-grey-20 rounded-rounded shadow-dropdown p-xsmall z-30 min-w-[200px] border"
           >
             {actions.map((action, i) => {
               return (
@@ -52,9 +52,9 @@ const Actionables: React.FC<ActionablesProps> = ({
                     <Button
                       variant="ghost"
                       size="small"
-                      className={clsx("w-full justify-start flex", {
+                      className={clsx("flex w-full justify-start", {
                         "text-rose-50": action?.variant === "danger",
-                        "opacity-50 select-none pointer-events-none":
+                        "pointer-events-none select-none opacity-50":
                           action?.disabled,
                       })}
                       onClick={action?.onClick}
@@ -97,7 +97,7 @@ const Actionables: React.FC<ActionablesProps> = ({
           onClick={action.onClick}
         >
           {action.icon ? (
-            <div className="flex items-center gap-x-2xsmall">
+            <div className="gap-x-2xsmall flex items-center">
               {action.icon}
               {action.label}
             </div>
diff --git a/packages/admin-ui/ui/src/components/molecules/activity-card/index.tsx b/packages/admin-ui/ui/src/components/molecules/activity-card/index.tsx
index adab095cfa..658ffa738d 100644
--- a/packages/admin-ui/ui/src/components/molecules/activity-card/index.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/activity-card/index.tsx
@@ -1,4 +1,4 @@
-import React, { MutableRefObject, ReactNode } from "react"
+import React, { ReactNode } from "react"
 import StatusIndicator from "../../fundamentals/status-indicator"
 import Tooltip from "../../atoms/tooltip"
 import clsx from "clsx"
@@ -16,18 +16,12 @@ export type ActivityCardProps = {
 export const ActivityCard: React.FC<ActivityCardProps> = (
   props: ActivityCardProps
 ) => {
-  const {
-    key,
-    title,
-    icon,
-    relativeTimeElapsed,
-    shouldShowStatus,
-    children
-  } = props
+  const { key, title, icon, relativeTimeElapsed, shouldShowStatus, children } =
+    props
 
-  const date = !!props.date && new Date(props.date).toLocaleDateString(
-    "en-us",
-    {
+  const date =
+    !!props.date &&
+    new Date(props.date).toLocaleDateString("en-us", {
       hour12: true,
       day: "2-digit",
       month: "short",
@@ -40,47 +34,33 @@ export const ActivityCard: React.FC<ActivityCardProps> = (
   const getTimeElement = () => {
     return (
       <div className="flex cursor-default">
-        {
-          !!relativeTimeElapsed && (
-            <span >{relativeTimeElapsed}</span>
-          )
-        }
-        {
-          shouldShowStatus &&
-          <StatusIndicator variant={"primary"} className="ml-2"/>
-        }
+        {!!relativeTimeElapsed && <span>{relativeTimeElapsed}</span>}
+        {shouldShowStatus && (
+          <StatusIndicator variant={"primary"} className="ml-2" />
+        )}
       </div>
     )
   }
 
   return (
-    <div key={key} className="mx-8 border-b last:border-b-0 border-grey-20">
-      <div className="flex hover:bg-grey-5 -mx-8 px-8 py-6">
-        <div className="relative w-full h-full">
-          <div className="flex justify-between inter-small-semibold text-grey-90">
+    <div key={key} className="border-grey-20 mx-8 border-b last:border-b-0">
+      <div className="hover:bg-grey-5 -mx-8 flex px-8 py-6">
+        <div className="relative h-full w-full">
+          <div className="inter-small-semibold text-grey-90 flex justify-between">
             <div className="flex">
-              {
-                !!icon && icon
-              }
+              {!!icon && icon}
               <span>{title}</span>
             </div>
 
-            {
-              ((!!relativeTimeElapsed || shouldShowStatus)) && (
-                formattedDate ? (
-                  <Tooltip content={formattedDate}>
-                    {getTimeElement()}
-                  </Tooltip>
-                ) : (
-                  getTimeElement()
-                )
-              )
-            }
+            {(!!relativeTimeElapsed || shouldShowStatus) &&
+              (formattedDate ? (
+                <Tooltip content={formattedDate}>{getTimeElement()}</Tooltip>
+              ) : (
+                getTimeElement()
+              ))}
           </div>
 
-          <div className={clsx(!!icon && "pl-8")}>
-            {children}
-          </div>
+          <div className={clsx(!!icon && "pl-8")}>{children}</div>
         </div>
       </div>
     </div>
diff --git a/packages/admin-ui/ui/src/components/molecules/amount-input/amount-and-currency-input.tsx b/packages/admin-ui/ui/src/components/molecules/amount-input/amount-and-currency-input.tsx
index 8926d61363..20732e1fac 100644
--- a/packages/admin-ui/ui/src/components/molecules/amount-input/amount-and-currency-input.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/amount-input/amount-and-currency-input.tsx
@@ -87,10 +87,10 @@ const AmountAndCurrencyInput = ({
   }
 
   return (
-    <div className="flex flex-col w-full">
+    <div className="flex w-full flex-col">
       {label && <InputHeader label={label} className="mb-xsmall" />}
       <div className="focus-within:shadow-focus-border rounded-rounded">
-        <div className="relative bg-grey-5 rounded-rounded h-10 shadow-border focus-within:shadow-cta transition-colors">
+        <div className="bg-grey-5 rounded-rounded shadow-border focus-within:shadow-cta relative h-10 transition-colors">
           <NextSelect
             customStyles={{
               control:
@@ -107,7 +107,7 @@ const AmountAndCurrencyInput = ({
             value={value.currency}
             onChange={onCurrencyChange}
           />
-          <div className="absolute left-[92px] inset-y-0 right-0 flex items-center pl-xsmall pr-base inter-base-regular h-10">
+          <div className="pl-xsmall pr-base inter-base-regular absolute inset-y-0 left-[92px] right-0 flex h-10 items-center">
             <AmountField
               ref={inputRef}
               step={step}
@@ -118,9 +118,9 @@ const AmountAndCurrencyInput = ({
               allowNegativeValue={false}
               placeholder="-"
               decimalScale={decimal_digits}
-              className="bg-transparent outline-none outline-0 w-full remove-number-spinner leading-base text-grey-90 font-normal caret-violet-60 placeholder-grey-40 text-right"
+              className="remove-number-spinner leading-base text-grey-90 caret-violet-60 placeholder-grey-40 w-full bg-transparent text-right font-normal outline-none outline-0"
             />
-            <div className="flex items-center min-w-[16px] ml-2xsmall">
+            <div className="ml-2xsmall flex min-w-[16px] items-center">
               <p className="text-grey-40 w-full text-right">{symbol_native}</p>
             </div>
           </div>
diff --git a/packages/admin-ui/ui/src/components/molecules/amount-input/amount-input.tsx b/packages/admin-ui/ui/src/components/molecules/amount-input/amount-input.tsx
index b746e272e5..76422b211d 100644
--- a/packages/admin-ui/ui/src/components/molecules/amount-input/amount-input.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/amount-input/amount-input.tsx
@@ -1,5 +1,5 @@
 import clsx from "clsx"
-import React, { useEffect, useState } from "react"
+import { useEffect, useState } from "react"
 import AmountField from "react-currency-input-field"
 import { currencies } from "../../../utils/currencies"
 import InputError from "../../atoms/input-error"
@@ -22,9 +22,8 @@ const AmountInput = ({
   value,
   onChange,
 }: Props) => {
-  const { symbol_native, decimal_digits } = currencies[
-    currencyCode.toUpperCase()
-  ]
+  const { symbol_native, decimal_digits } =
+    currencies[currencyCode.toUpperCase()]
 
   const getFormattedValue = (value: number) => {
     return `${value / 10 ** decimal_digits}`
@@ -57,7 +56,7 @@ const AmountInput = ({
       {label && <InputHeader label={label} className="mb-xsmall" />}
       <div
         className={clsx(
-          "w-full flex items-center bg-grey-5 border border-gray-20 px-base py-xsmall rounded-rounded h-10 focus-within:shadow-input focus-within:border-violet-60 inter-base-regular",
+          "bg-grey-5 border-gray-20 px-base py-xsmall rounded-rounded focus-within:shadow-input focus-within:border-violet-60 inter-base-regular flex h-10 w-full items-center border",
           {
             "border-rose-50": errors && name && errors[name],
           }
@@ -67,7 +66,7 @@ const AmountInput = ({
           <p>{currencyCode.toUpperCase()}</p>
         </div>
 
-        <div className="flex items-center gap-2xsmall w-full">
+        <div className="gap-2xsmall flex w-full items-center">
           <AmountField
             step={step}
             value={formattedValue}
@@ -77,9 +76,9 @@ const AmountInput = ({
             allowNegativeValue={false}
             placeholder="-"
             decimalScale={decimal_digits}
-            className="bg-transparent outline-none outline-0 w-full remove-number-spinner leading-base text-grey-90 font-normal caret-violet-60 placeholder-grey-40 text-right"
+            className="remove-number-spinner leading-base text-grey-90 caret-violet-60 placeholder-grey-40 w-full bg-transparent text-right font-normal outline-none outline-0"
           />
-          <div className="flex items-center min-w-[16px] ml-2xsmall">
+          <div className="ml-2xsmall flex min-w-[16px] items-center">
             <p className="text-grey-40 w-full text-right">{symbol_native}</p>
           </div>
         </div>
diff --git a/packages/admin-ui/ui/src/components/molecules/availability-duration/index.tsx b/packages/admin-ui/ui/src/components/molecules/availability-duration/index.tsx
index bf62a87080..9f32209c84 100644
--- a/packages/admin-ui/ui/src/components/molecules/availability-duration/index.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/availability-duration/index.tsx
@@ -37,7 +37,7 @@ const AvailabilityDuration: React.FC<AvailabilityDurationProps> = ({
 
   return (
     <div>
-      <div className="grid grid-cols-3 grid-rows-2 gap-x-xsmall gap-y-base mt-xlarge">
+      <div className="gap-x-xsmall gap-y-base mt-xlarge grid grid-cols-3 grid-rows-2">
         <InputField
           label="Years"
           type="number"
diff --git a/packages/admin-ui/ui/src/components/molecules/banner-card/index.tsx b/packages/admin-ui/ui/src/components/molecules/banner-card/index.tsx
index 8bcf7c316c..9815031b1d 100644
--- a/packages/admin-ui/ui/src/components/molecules/banner-card/index.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/banner-card/index.tsx
@@ -19,14 +19,14 @@ const BannerCard: React.FC<BannerCardProps> & {
   Footer: React.FC
 } = ({ title, thumbnail, actions, children }) => {
   return (
-    <div className="rounded-rounded border bg-grey-0 border-grey-20 w-full p-base medium:p-xlarge">
-      <div className="flex gap-large items-start">
+    <div className="rounded-rounded bg-grey-0 border-grey-20 p-base medium:p-xlarge w-full border">
+      <div className="gap-large flex items-start">
         {thumbnail && (
-          <div className="min-w-[72px] min-h-[72px] w-[72px] h-[72px] rounded-base overflow-hidden">
+          <div className="rounded-base h-[72px] min-h-[72px] w-[72px] min-w-[72px] overflow-hidden">
             <img
               src={thumbnail}
               alt="Thumbnail"
-              className="w-full h-full object-cover"
+              className="h-full w-full object-cover"
             />
           </div>
         )}
@@ -48,7 +48,7 @@ const Description: React.FC<BannerCardDescriptionProps> = ({
 }) => {
   return (
     <div>
-      <p className="inter-small-regular text-grey-50 max-w-[460px] line-clamp-2">
+      <p className="inter-small-regular text-grey-50 line-clamp-2 max-w-[460px]">
         {children}
       </p>
       {cta && (
diff --git a/packages/admin-ui/ui/src/components/molecules/batch-job-file-card/index.tsx b/packages/admin-ui/ui/src/components/molecules/batch-job-file-card/index.tsx
index 850341bba7..f643393ca9 100644
--- a/packages/admin-ui/ui/src/components/molecules/batch-job-file-card/index.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/batch-job-file-card/index.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react"
+import { ReactNode } from "react"
 
 type Props = {
   fileName: string
@@ -8,31 +8,27 @@ type Props = {
 }
 
 const BatchJobFileCard = ({ fileName, fileSize, icon, onClick }: Props) => {
-  const preparedOnClick = (onClick ?? (() => void 0))
+  const preparedOnClick = onClick ?? (() => void 0)
 
   return (
     <div
-      className="flex items-center w-full cursor-pointer mt-4"
+      className="mt-4 flex w-full cursor-pointer items-center"
       onClick={preparedOnClick}
     >
       <div
-        className="flex items-center justify-center p-2.5 border border-grey-20 rounded-lg"
+        className="border-grey-20 flex items-center justify-center rounded-lg border p-2.5"
         title={fileName}
       >
         {!!icon && icon}
       </div>
 
-      <div className="text-left relative w-full pl-4">
-        <div
-          className="overflow-hidden truncate inter-small-regular max-w-[80%]"
-        >
+      <div className="relative w-full pl-4 text-left">
+        <div className="inter-small-regular max-w-[80%] overflow-hidden truncate">
           {fileName}
         </div>
 
         {!!fileSize && (
-          <div className="text-grey-40 inter-small-regular">
-            {fileSize}
-          </div>
+          <div className="text-grey-40 inter-small-regular">{fileSize}</div>
         )}
       </div>
     </div>
diff --git a/packages/admin-ui/ui/src/components/molecules/breadcrumb/index.tsx b/packages/admin-ui/ui/src/components/molecules/breadcrumb/index.tsx
index 7acb5dd268..63c852f1f8 100644
--- a/packages/admin-ui/ui/src/components/molecules/breadcrumb/index.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/breadcrumb/index.tsx
@@ -20,7 +20,7 @@ const Breadcrumb: React.FC<BreadcrumbProps> = ({
   return (
     <div
       className={clsx(
-        "w-full flex items-center inter-small-semibold text-grey-50 mb-4",
+        "inter-small-semibold text-grey-50 mb-4 flex w-full items-center",
         className
       )}
       {...props}
diff --git a/packages/admin-ui/ui/src/components/molecules/collapsible-tree/index.tsx b/packages/admin-ui/ui/src/components/molecules/collapsible-tree/index.tsx
index 13a48de7c5..79c230658f 100644
--- a/packages/admin-ui/ui/src/components/molecules/collapsible-tree/index.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/collapsible-tree/index.tsx
@@ -22,9 +22,8 @@ type TCollapsibleTreeContext = {
   toggle: () => void
 }
 
-const CollapsibleTreeContext = React.createContext<TCollapsibleTreeContext | null>(
-  null
-)
+const CollapsibleTreeContext =
+  React.createContext<TCollapsibleTreeContext | null>(null)
 
 export const CollapsibleTree: CollapsibleTreeType = ({ children }) => {
   const [open, setOpen] = React.useState(false)
@@ -66,7 +65,7 @@ const CollapsibleTreeContent: React.FC<CollapsibleTreeContentProps> = ({
   return (
     <div
       className={clsx(
-        "pl-5 mt-xsmall",
+        "mt-xsmall pl-5",
         {
           hidden: !open,
           "animate-fade-in-top": open,
@@ -100,15 +99,15 @@ const CollapsibleTreeParent: React.FC<CollapsibleTreeParentProps> = ({
       <Container className={className}>
         <div className="flex items-center justify-between">
           <div className="gap-x-small flex items-center">{children}</div>
-          <div className="flex items-center gap-x-xsmall">
+          <div className="gap-x-xsmall flex items-center">
             {actions && (
               <Actionables customTrigger={Trigger()} actions={actions} />
             )}
-            <div className="h-5 w-px rounded-circle bg-grey-20" />
+            <div className="rounded-circle bg-grey-20 h-5 w-px" />
             <Button
               variant="ghost"
               size="small"
-              className="p-[6px] text-grey-50"
+              className="text-grey-50 p-[6px]"
               onClick={toggle}
             >
               {open ? <MinusIcon size={20} /> : <PlusIcon size={20} />}
@@ -137,16 +136,16 @@ const CollapsibleTreeLeaf: React.FC<CollapsibleTreeLeafProps> = ({
   return (
     <div
       className={clsx(
-        "col-tree flex items-center relative pb-xsmall last:pb-0",
+        "col-tree pb-xsmall relative flex items-center last:pb-0",
         className
       )}
     >
       <div className="absolute top-0 left-0 bottom-0">
-        <div className="border-l border-dashed border-grey-20 h-1/2 w-px" />
-        <div className="h-1/2 border-l border-dashed border-grey-20 w-px bottom-half-dash" />
+        <div className="border-grey-20 h-1/2 w-px border-l border-dashed" />
+        <div className="border-grey-20 bottom-half-dash h-1/2 w-px border-l border-dashed" />
       </div>
-      <div className="w-[13px] h-px border-t border-grey-20 border-dashed mr-xsmall" />
-      <Container className="w-full flex items-center justify-between inter-small-regular">
+      <div className="border-grey-20 mr-xsmall h-px w-[13px] border-t border-dashed" />
+      <Container className="inter-small-regular flex w-full items-center justify-between">
         {children}
         {actions && (
           <Actionables
@@ -169,7 +168,7 @@ const Container: React.FC<{ className?: string }> = ({
   return (
     <div
       className={clsx(
-        "rounded-rounded border border-grey-20 py-2xsmall px-small",
+        "rounded-rounded border-grey-20 py-2xsmall px-small border",
         className
       )}
     >
@@ -180,7 +179,7 @@ const Container: React.FC<{ className?: string }> = ({
 
 const Trigger = () => {
   return (
-    <Button variant="ghost" size="small" className="p-[6px] text-grey-50">
+    <Button variant="ghost" size="small" className="text-grey-50 p-[6px]">
       <MoreHorizontalIcon size={20} />
     </Button>
   )
diff --git a/packages/admin-ui/ui/src/components/molecules/customer-avatar-item/index.tsx b/packages/admin-ui/ui/src/components/molecules/customer-avatar-item/index.tsx
index 76334c90ae..460f931360 100644
--- a/packages/admin-ui/ui/src/components/molecules/customer-avatar-item/index.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/customer-avatar-item/index.tsx
@@ -22,11 +22,11 @@ const CustomerAvatarItem: React.FC<CustomerAvatarItemProps> = ({
       : "-"
 
   return (
-    <div className="flex items-center py-1.5 w-full">
-      <div className="w-[24px] h-[24px]">
+    <div className="flex w-full items-center py-1.5">
+      <div className="h-[24px] w-[24px]">
         <Avatar user={customer} color={color} />
       </div>
-      <span className="pl-2.5 w-40 truncate">{identifier}</span>
+      <span className="w-40 truncate pl-2.5">{identifier}</span>
     </div>
   )
 }
diff --git a/packages/admin-ui/ui/src/components/molecules/emoji-picker/index.tsx b/packages/admin-ui/ui/src/components/molecules/emoji-picker/index.tsx
index 69287233d8..c1822b4817 100644
--- a/packages/admin-ui/ui/src/components/molecules/emoji-picker/index.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/emoji-picker/index.tsx
@@ -16,7 +16,7 @@ const EmojiPicker: React.FC<indexProps> = ({ onEmojiClick }) => {
           variant="ghost"
           size="small"
           type="button"
-          className="focus:border-none focus:shadow-none text-grey-40 hover:text-violet-60 p-0 h-5 w-5"
+          className="text-grey-40 hover:text-violet-60 h-5 w-5 p-0 focus:border-none focus:shadow-none"
         >
           <HappyIcon size={20} />
         </Button>
@@ -24,7 +24,7 @@ const EmojiPicker: React.FC<indexProps> = ({ onEmojiClick }) => {
 
       <DropdownMenu.Content
         sideOffset={5}
-        className="border bg-grey-0 border-grey-20 rounded-rounded shadow-dropdown overflow-hidden min-w-[200px] z-30"
+        className="bg-grey-0 border-grey-20 rounded-rounded shadow-dropdown z-30 min-w-[200px] overflow-hidden border"
       >
         <Picker
           onEmojiClick={(emojiData) => onEmojiClick(emojiData.emoji)}
diff --git a/packages/admin-ui/ui/src/components/molecules/filter-dropdown/container.tsx b/packages/admin-ui/ui/src/components/molecules/filter-dropdown/container.tsx
index 1ef51aa675..ab009a317e 100644
--- a/packages/admin-ui/ui/src/components/molecules/filter-dropdown/container.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/filter-dropdown/container.tsx
@@ -52,13 +52,13 @@ const FilterDropdownContainer = ({
       <RadixPopover.Content
         sideOffset={8}
         style={heightStyle}
-        className="bg-grey-0 overflow-y-auto rounded-rounded shadow-dropdown max-w-[272px] py-4 z-40"
+        className="bg-grey-0 rounded-rounded shadow-dropdown z-40 max-w-[272px] overflow-y-auto py-4"
       >
-        <div className="flex px-4 pb-4 border-b border-grey-20">
+        <div className="border-grey-20 flex border-b px-4 pb-4">
           <Button
             size="small"
             tabIndex={-1}
-            className="mr-2 border border-grey-20"
+            className="border-grey-20 mr-2 border"
             variant="ghost"
             onClick={() => onClear()}
           >
@@ -76,7 +76,7 @@ const FilterDropdownContainer = ({
         </div>
         {React.Children.map(children, (child) => {
           return (
-            <div className="border-b border-grey-20 py-2 px-4 last:pb-0 last:border-0">
+            <div className="border-grey-20 border-b py-2 px-4 last:border-0 last:pb-0">
               {child}
             </div>
           )
diff --git a/packages/admin-ui/ui/src/components/molecules/filter-dropdown/item.tsx b/packages/admin-ui/ui/src/components/molecules/filter-dropdown/item.tsx
index ea5cbb073a..31c83d59d2 100644
--- a/packages/admin-ui/ui/src/components/molecules/filter-dropdown/item.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/filter-dropdown/item.tsx
@@ -96,7 +96,7 @@ const FilterDropdownItem = ({
       >
         <RadixCollapsible.Trigger
           className={clsx(
-            "py-1.5 px-3 flex w-full items-center hover:bg-grey-5 rounded justify-between",
+            "hover:bg-grey-5 flex w-full items-center justify-between rounded py-1.5 px-3",
             {
               "inter-small-semibold": open,
               "inter-small-regular": !open,
@@ -105,7 +105,7 @@ const FilterDropdownItem = ({
         >
           <div className="flex items-center">
             <div
-              className={`w-5 h-5 flex justify-center text-grey-0 border-grey-30 border rounded-base ${
+              className={`text-grey-0 border-grey-30 rounded-base flex h-5 w-5 justify-center border ${
                 open && "bg-violet-60"
               }`}
             >
@@ -130,17 +130,17 @@ const FilterDropdownItem = ({
         </RadixCollapsible.Trigger>
         <RadixCollapsible.Content className="w-full">
           {hasPrev && (
-            <div className="py-2 pl-6 flex">
+            <div className="flex py-2 pl-6">
               <button
                 onClick={handlePrev}
-                className="font-semibold hover:text-violet-60 text-grey-90"
+                className="hover:text-violet-60 text-grey-90 font-semibold"
               >
                 Back
               </button>
             </div>
           )}
           {isLoading ? (
-            <div className="py-1 flex justify-center items-center">
+            <div className="flex items-center justify-center py-1">
               <Spinner size={"large"} variant={"secondary"} />
             </div>
           ) : filterTitle === "Date" ? (
@@ -167,7 +167,7 @@ const FilterDropdownItem = ({
               return (
                 <div
                   className={clsx(
-                    "w-full flex hover:bg-grey-20 my-1 py-1.5 pl-6 items-center rounded",
+                    "hover:bg-grey-20 my-1 flex w-full items-center rounded py-1.5 pl-6",
                     {
                       "inter-small-semibold": checked[value],
                       "inter-small-regular": !checked[value],
@@ -177,7 +177,7 @@ const FilterDropdownItem = ({
                   onClick={() => onCheck(value)}
                 >
                   <div
-                    className={`w-5 h-5 flex justify-center text-grey-0 border-grey-30 border mr-2 rounded-base ${
+                    className={`text-grey-0 border-grey-30 rounded-base mr-2 flex h-5 w-5 justify-center border ${
                       checked[value] === true && "bg-violet-60"
                     }`}
                   >
@@ -201,10 +201,10 @@ const FilterDropdownItem = ({
             })
           )}
           {hasMore && (
-            <div className="py-2 pl-6 flex">
+            <div className="flex py-2 pl-6">
               <button
                 onClick={handleNext}
-                className="font-semibold hover:text-violet-60 text-grey-90"
+                className="hover:text-violet-60 text-grey-90 font-semibold"
               >
                 Show more
               </button>
@@ -417,7 +417,7 @@ const DateFilter = ({
       case DateFilters.InTheLast:
       case DateFilters.OlderThan:
         return (
-          <div className="flex flex-col w-full">
+          <div className="flex w-full flex-col">
             <InputField
               className="pt-0 pb-1"
               type="number"
@@ -429,7 +429,7 @@ const DateFilter = ({
             />
             <RightPopover
               trigger={
-                <div className="flex w-full items-center justify-between bg-grey-5 border border-grey-20 rounded inter-small-semibold text-grey-90 px-3 py-1.5">
+                <div className="bg-grey-5 border-grey-20 inter-small-semibold text-grey-90 flex w-full items-center justify-between rounded border px-3 py-1.5">
                   <label>{daysMonthsValue}</label>
                   <span className="text-grey-50">
                     <ArrowRightIcon size={16} />
@@ -449,10 +449,10 @@ const DateFilter = ({
       case DateFilters.After:
       case DateFilters.Before:
         return (
-          <div className="flex flex-col w-full">
+          <div className="flex w-full flex-col">
             <RightPopover
               trigger={
-                <div className="flex w-full items-center justify-between bg-grey-5 border border-grey-20 rounded inter-small-semibold text-grey-90 px-3 py-1.5">
+                <div className="bg-grey-5 border-grey-20 inter-small-semibold text-grey-90 flex w-full items-center justify-between rounded border px-3 py-1.5">
                   <label>
                     {startDate ? moment(startDate).format("MM.DD.YYYY") : "-"}
                   </label>
@@ -477,7 +477,7 @@ const DateFilter = ({
     <div className="pl-9">
       <RightPopover
         trigger={
-          <div className="flex w-full items-center justify-between bg-grey-5 border border-grey-20 rounded inter-small-semibold text-grey-90 px-3 py-1.5">
+          <div className="bg-grey-5 border-grey-20 inter-small-semibold text-grey-90 flex w-full items-center justify-between rounded border px-3 py-1.5">
             <label>{currentFilter}</label>
             <span className="text-grey-50">
               <ArrowRightIcon size={16} />
@@ -506,7 +506,7 @@ const PopoverOptions = ({ options, onClick, selectedItem }) => {
             onClick(item)
           }}
           className={clsx(
-            "px-3 py-1.5 my-1 flex items-center rounded hover:bg-grey-5 cursor-pointer",
+            "hover:bg-grey-5 my-1 flex cursor-pointer items-center rounded px-3 py-1.5",
             {
               "inter-small-semibold": item === selectedItem,
               "inter-small-regular": item !== selectedItem,
@@ -515,15 +515,15 @@ const PopoverOptions = ({ options, onClick, selectedItem }) => {
         >
           <div
             className={clsx(
-              "rounded-full flex items-center justify-center mr-2 w-4 h-4",
+              "mr-2 flex h-4 w-4 items-center justify-center rounded-full",
               {
-                "border-2 border-violet-60": item === selectedItem,
-                "border border-grey-30 ": item !== selectedItem,
+                "border-violet-60 border-2": item === selectedItem,
+                "border-grey-30 border ": item !== selectedItem,
               }
             )}
           >
             {item === selectedItem && (
-              <div className="rounded-full w-2 h-2 bg-violet-60" />
+              <div className="bg-violet-60 h-2 w-2 rounded-full" />
             )}
           </div>
           {item}
@@ -535,7 +535,7 @@ const PopoverOptions = ({ options, onClick, selectedItem }) => {
 
 const RightPopover = ({ trigger, children }) => (
   <RadixPopover.Root>
-    <RadixPopover.Trigger className="w-full my-1">
+    <RadixPopover.Trigger className="my-1 w-full">
       {trigger}
     </RadixPopover.Trigger>
     <RadixPopover.Content
@@ -543,7 +543,7 @@ const RightPopover = ({ trigger, children }) => (
       align="start"
       alignOffset={-8}
       sideOffset={20}
-      className="flex flex-col bg-grey-0 rounded-rounded shadow-dropdown p-2 top-2/4"
+      className="bg-grey-0 rounded-rounded shadow-dropdown top-2/4 flex flex-col p-2"
     >
       {children}
     </RadixPopover.Content>
diff --git a/packages/admin-ui/ui/src/components/molecules/filter-dropdown/save-field.tsx b/packages/admin-ui/ui/src/components/molecules/filter-dropdown/save-field.tsx
index 694a82ed8f..f141b2bd76 100644
--- a/packages/admin-ui/ui/src/components/molecules/filter-dropdown/save-field.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/filter-dropdown/save-field.tsx
@@ -25,13 +25,13 @@ const SaveFilterItem: React.FC<SaveFilterItemProps> = ({
   return (
     <div className="mt-2 flex w-full">
       <InputField
-        className="pt-0 pb-1 max-w-[172px]"
+        className="max-w-[172px] pt-0 pb-1"
         placeholder="Name your filter..."
         onChange={(e) => setName(e.target.value)}
         value={name}
       />
       <Button
-        className="border ml-2 border-grey-20"
+        className="border-grey-20 ml-2 border"
         variant="ghost"
         size="small"
         onClick={onSave}
diff --git a/packages/admin-ui/ui/src/components/molecules/filter-tab/index.tsx b/packages/admin-ui/ui/src/components/molecules/filter-tab/index.tsx
index c808654bfa..a41090dcd2 100644
--- a/packages/admin-ui/ui/src/components/molecules/filter-tab/index.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/filter-tab/index.tsx
@@ -43,7 +43,7 @@ export const FilterTab: React.FC<FilterTabProps> = ({
       onKeyUp={handleKeyPress}
       onClick={handleClick}
       className={clsx(
-        "flex items-center bg-grey-5 border border-grey-20 inter-small-regular px-2 h-6 text-grey-50 rounded-rounded focus-visible:outline-none focus-visible:shadow-input focus-visible:border-violet-60 flex items-center space-x-1",
+        "bg-grey-5 border-grey-20 inter-small-regular text-grey-50 rounded-rounded focus-visible:shadow-input focus-visible:border-violet-60 flex flex h-6 items-center items-center space-x-1 border px-2 focus-visible:outline-none",
         {
           ["bg-violet-5 border-violet-60 text-violet-60 "]: isActive,
         }
diff --git a/packages/admin-ui/ui/src/components/molecules/form-error-toaster/index.tsx b/packages/admin-ui/ui/src/components/molecules/form-error-toaster/index.tsx
index 98dcb974de..8fe898c6d0 100644
--- a/packages/admin-ui/ui/src/components/molecules/form-error-toaster/index.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/form-error-toaster/index.tsx
@@ -24,7 +24,7 @@ const FormErrorToaster: React.FC<FormErrorToasterProps> = ({
       <div>
         <XCircleIcon size={20} className="text-rose-40" />
       </div>
-      <div className="flex flex-col ml-small mr-base gap-y-2xsmall flex-grow text-grey-0">
+      <div className="ml-small mr-base gap-y-2xsmall text-grey-0 flex flex-grow flex-col">
         <span className="inter-small-semibold">{title}</span>
         <span className="inter-small-regular text-grey-20">{message}</span>
       </div>
diff --git a/packages/admin-ui/ui/src/components/molecules/form-toaster/index.tsx b/packages/admin-ui/ui/src/components/molecules/form-toaster/index.tsx
index ef6c3d8c4a..762bcfac2a 100644
--- a/packages/admin-ui/ui/src/components/molecules/form-toaster/index.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/form-toaster/index.tsx
@@ -39,7 +39,7 @@ const FormToasterContainer: React.FC<FormToasterContainerProps> & {
   const content = useMemo(() => {
     if (isLoading) {
       return (
-        <div className="flex items-center p-base gap-x-base">
+        <div className="p-base gap-x-base flex items-center">
           <span>
             <Spinner />
           </span>
@@ -49,7 +49,7 @@ const FormToasterContainer: React.FC<FormToasterContainerProps> & {
     } else {
       return (
         <>
-          <div className="flex items-center p-base gap-x-base">
+          <div className="p-base gap-x-base flex items-center">
             <span>{icon}</span>
             <span className="inter-small-regular">{unsavedChangesMessage}</span>
           </div>
@@ -67,7 +67,7 @@ const FormToasterContainer: React.FC<FormToasterContainerProps> & {
       })}
       {...toast?.ariaProps}
     >
-      <div className="flex items-center rounded-rounded bg-grey-90 h-[72px] w-[344px] text-grey-0 justify-between">
+      <div className="rounded-rounded bg-grey-90 text-grey-0 flex h-[72px] w-[344px] items-center justify-between">
         {content}
       </div>
     </div>
@@ -76,10 +76,10 @@ const FormToasterContainer: React.FC<FormToasterContainerProps> & {
 
 const Actions: React.FC = ({ children }) => {
   return (
-    <div className="border-l border-grey-70 h-full">
+    <div className="border-grey-70 h-full border-l">
       {Children.map(children, (child) => {
         return (
-          <div className="flex items-center justify-center border-b border-grey-70 last:border-none h-1/2 w-[72px]">
+          <div className="border-grey-70 flex h-1/2 w-[72px] items-center justify-center border-b last:border-none">
             {child}
           </div>
         )
@@ -96,7 +96,7 @@ const DiscardButton: React.FC<HTMLAttributes<HTMLButtonElement>> = ({
   return (
     <button
       className={clsx(
-        "flex items-center justify-center text-white inter-small-semibold h-full w-full",
+        "inter-small-semibold flex h-full w-full items-center justify-center text-white",
         className
       )}
       {...props}
@@ -114,7 +114,7 @@ const ActionButton: React.FC<HTMLAttributes<HTMLButtonElement>> = ({
   return (
     <button
       className={clsx(
-        "flex items-center justify-center text-white inter-small-semibold h-full w-full",
+        "inter-small-semibold flex h-full w-full items-center justify-center text-white",
         className
       )}
       {...props}
@@ -133,7 +133,7 @@ const MultiActionButton: React.FC<MultiActionButtonProps> = ({
     <Dropdown.Root>
       <Dropdown.Trigger
         className={clsx(
-          "inter-small-semibold flex items-center justify-center h-full w-full",
+          "inter-small-semibold flex h-full w-full items-center justify-center",
           className
         )}
       >
@@ -142,7 +142,7 @@ const MultiActionButton: React.FC<MultiActionButtonProps> = ({
       </Dropdown.Trigger>
 
       <Dropdown.Content
-        className="rounded-rounded flex bg-grey-90 text-white p-xsmall flex-col min-w-[208px]"
+        className="rounded-rounded bg-grey-90 p-xsmall flex min-w-[208px] flex-col text-white"
         sideOffset={10}
       >
         {actions.map((action, i) => {
@@ -150,7 +150,7 @@ const MultiActionButton: React.FC<MultiActionButtonProps> = ({
             <Dropdown.Item key={i}>
               <button
                 onClick={action.onClick}
-                className="p-2xsmall hover:bg-grey-80 hover:outline-none inter-small-semibold rounded-base text-left flex items-center w-full"
+                className="p-2xsmall hover:bg-grey-80 inter-small-semibold rounded-base flex w-full items-center text-left hover:outline-none"
               >
                 {action.icon && (
                   <span className="text-grey-0 mr-xsmall">
diff --git a/packages/admin-ui/ui/src/components/molecules/generating-input/index.tsx b/packages/admin-ui/ui/src/components/molecules/generating-input/index.tsx
index bb731165f7..ff0facf653 100644
--- a/packages/admin-ui/ui/src/components/molecules/generating-input/index.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/generating-input/index.tsx
@@ -71,7 +71,7 @@ const GeneratingInput = React.forwardRef(
             ref={inputRef}
             value={value}
             onChange={handleChange}
-            className="bg-inherit outline-none outline-0 w-full remove-number-spinner leading-base text-grey-90 font-normal caret-violet-60 placeholder-grey-40"
+            className="remove-number-spinner leading-base text-grey-90 caret-violet-60 placeholder-grey-40 w-full bg-inherit font-normal outline-none outline-0"
             placeholder={placeholder}
             autoComplete="off"
             name={name}
diff --git a/packages/admin-ui/ui/src/components/molecules/grid-input/index.tsx b/packages/admin-ui/ui/src/components/molecules/grid-input/index.tsx
index 3042034fe7..4e4964e3f4 100644
--- a/packages/admin-ui/ui/src/components/molecules/grid-input/index.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/grid-input/index.tsx
@@ -5,7 +5,7 @@ type GridInputProps = React.InputHTMLAttributes<HTMLInputElement>
 const GridInput: React.FC<GridInputProps> = ({ value, ...props }) => {
   return (
     <input
-      className="outline-none outline-0 leading-base bg-transparent py-4 px-2 w-full h-full border rounded-rounded border-transparent inter-small-regular placeholder:text-grey-40 focus-within:shadow-input focus-within:border focus-within:border-violet-60"
+      className="leading-base rounded-rounded inter-small-regular placeholder:text-grey-40 focus-within:shadow-input focus-within:border-violet-60 h-full w-full border border-transparent bg-transparent py-4 px-2 outline-none outline-0 focus-within:border"
       value={value}
       {...props}
     />
diff --git a/packages/admin-ui/ui/src/components/molecules/hot-key-action/index.tsx b/packages/admin-ui/ui/src/components/molecules/hot-key-action/index.tsx
index ed29a463b4..9cdf867e9a 100644
--- a/packages/admin-ui/ui/src/components/molecules/hot-key-action/index.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/hot-key-action/index.tsx
@@ -13,7 +13,7 @@ const HotKeyAction = ({ label, hotKey, icon, onAction }: HotKeyActionProps) => {
   return (
     <div className="flex items-center gap-2">
       <span className="text-grey-0 inter-small-semibold">{label}</span>
-      <div className="inter-small-semibold text-grey-30 flex items-center justify-center w-[24px] h-[24px] rounded bg-grey-70">
+      <div className="inter-small-semibold text-grey-30 bg-grey-70 flex h-[24px] w-[24px] items-center justify-center rounded">
         {icon}
       </div>
     </div>
diff --git a/packages/admin-ui/ui/src/components/molecules/icon-tooltip/index.tsx b/packages/admin-ui/ui/src/components/molecules/icon-tooltip/index.tsx
index dfccbb24b7..bf5a645a10 100644
--- a/packages/admin-ui/ui/src/components/molecules/icon-tooltip/index.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/icon-tooltip/index.tsx
@@ -18,11 +18,11 @@ const IconTooltip: React.FC<IconTooltipProps> = ({
   const icon = (type: IconTooltipProps["type"]) => {
     switch (type) {
       case "warning":
-        return <AlertIcon size={size} className="flex text-orange-40" />
+        return <AlertIcon size={size} className="text-orange-40 flex" />
       case "error":
-        return <XCircleIcon size={size} className="flex text-rose-40" />
+        return <XCircleIcon size={size} className="text-rose-40 flex" />
       default:
-        return <InfoIcon size={size} className="flex text-grey-40" />
+        return <InfoIcon size={size} className="text-grey-40 flex" />
     }
   }
 
diff --git a/packages/admin-ui/ui/src/components/molecules/indeterminate-checkbox/index.tsx b/packages/admin-ui/ui/src/components/molecules/indeterminate-checkbox/index.tsx
index 5fef801d78..46ae3bfda7 100644
--- a/packages/admin-ui/ui/src/components/molecules/indeterminate-checkbox/index.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/indeterminate-checkbox/index.tsx
@@ -56,7 +56,7 @@ const IndeterminateCheckbox = React.forwardRef<
     <div className="flex h-full items-center">
       <div
         onClick={handleClick}
-        className={`flex h-5 w-5 cursor-pointer justify-center rounded-base border border-grey-30 text-grey-0 ${
+        className={`rounded-base border-grey-30 text-grey-0 flex h-5 w-5 cursor-pointer justify-center border ${
           rest.disabled
             ? checked
               ? "bg-gray-300"
diff --git a/packages/admin-ui/ui/src/components/molecules/input-signin/index.tsx b/packages/admin-ui/ui/src/components/molecules/input-signin/index.tsx
index df64198fde..0290b9234f 100644
--- a/packages/admin-ui/ui/src/components/molecules/input-signin/index.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/input-signin/index.tsx
@@ -52,12 +52,12 @@ const SigninInput = React.forwardRef(
     return (
       <div
         className={clsx(
-          "w-[320px] h-[48px] mb-xsmall last:mb-0 border rounded-rounded overflow-hidden",
+          "mb-xsmall rounded-rounded h-[48px] w-[320px] overflow-hidden border last:mb-0",
           "bg-grey-5 inter-base-regular placeholder:text-grey-40",
           "focus-within:shadow-input focus-within:border-violet-60",
           "flex items-center",
           {
-            "pointer-events-none focus-within:shadow-none focus-within:border-none text-grey-40":
+            "text-grey-40 pointer-events-none focus-within:border-none focus-within:shadow-none":
               props.readOnly,
           },
           className
@@ -68,7 +68,7 @@ const SigninInput = React.forwardRef(
         )}
         <input
           className={clsx(
-            "outline-none outline-0 remove-number-spinner leading-base bg-transparent w-full py-3 px-4",
+            "remove-number-spinner leading-base w-full bg-transparent py-3 px-4 outline-none outline-0",
             {
               "pl-xsmall": props.readOnly,
             }
@@ -86,7 +86,7 @@ const SigninInput = React.forwardRef(
           <button
             type="button"
             onClick={() => setShowPassword(!showPassword)}
-            className="text-grey-40 px-4 focus:outline-none focus:text-violet-60"
+            className="text-grey-40 focus:text-violet-60 px-4 focus:outline-none"
           >
             {showPassword ? <EyeIcon /> : <EyeOffIcon />}
           </button>
diff --git a/packages/admin-ui/ui/src/components/molecules/json-view/index.tsx b/packages/admin-ui/ui/src/components/molecules/json-view/index.tsx
index 37a7db3a06..986815fbad 100644
--- a/packages/admin-ui/ui/src/components/molecules/json-view/index.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/json-view/index.tsx
@@ -29,8 +29,8 @@ const JSONView = ({ data }: JSONViewProps) => {
     <div className="px-base py-xsmall rounded-rounded bg-grey-5 w-full">
       <Collapsible.Root open={expanded} onOpenChange={setExpanded}>
         <Collapsible.Trigger asChild>
-          <div className="flex items-center justify-between cursor-pointer">
-            <div className="flex items-center gap-x-xsmall inter-base-regular">
+          <div className="flex cursor-pointer items-center justify-between">
+            <div className="gap-x-xsmall inter-base-regular flex items-center">
               <p className="inter-base-semibold">
                 {expanded ? "{" : length > 0 ? "{ ... }" : "{}"}
               </p>
@@ -66,9 +66,9 @@ const JSONView = ({ data }: JSONViewProps) => {
               shouldExpandNode={() => false}
             />
           </div>
-          <div className="flex items-center justify-between w-full">
+          <div className="flex w-full items-center justify-between">
             {expanded && <p className="inter-base-semibold">{`}`}</p>}
-            <div className="flex items-center gap-x-xsmall text-grey-50 inter-small-regular">
+            <div className="gap-x-xsmall text-grey-50 inter-small-regular flex items-center">
               {isCopied && (
                 <span className="animate-fade-in-right">Copied!</span>
               )}
diff --git a/packages/admin-ui/ui/src/components/molecules/modal/focus-modal.tsx b/packages/admin-ui/ui/src/components/molecules/modal/focus-modal.tsx
index bc8c02b07f..ed141c66c2 100644
--- a/packages/admin-ui/ui/src/components/molecules/modal/focus-modal.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/modal/focus-modal.tsx
@@ -26,7 +26,7 @@ type BasicFocusModalProps = {
 const FocusModal: IFocusModal = ({ className, children }) => (
   <div
     className={clsx(
-      "absolute inset-0 bg-grey-0 z-50 flex flex-col items-center",
+      "bg-grey-0 absolute inset-0 z-50 flex flex-col items-center",
       className
     )}
   >
@@ -37,7 +37,7 @@ const FocusModal: IFocusModal = ({ className, children }) => (
 FocusModal.Header = ({ children, className }) => (
   <div
     className={clsx(
-      "w-full border-b py-4 border-b-grey-20 flex justify-center",
+      "border-b-grey-20 flex w-full justify-center border-b py-4",
       className
     )}
   >
@@ -46,7 +46,7 @@ FocusModal.Header = ({ children, className }) => (
 )
 
 FocusModal.Main = ({ children, className }) => (
-  <div className={clsx("w-full px-8 overflow-y-auto h-full", className)}>
+  <div className={clsx("h-full w-full overflow-y-auto px-8", className)}>
     {children}
   </div>
 )
@@ -79,12 +79,12 @@ const BasicFocusModalHeader: React.FC<BasicFocusModalProps> = ({
 }) => {
   return (
     <FocusModal.Header>
-      <div className="medium:w-8/12 w-full px-8 flex justify-between">
+      <div className="medium:w-8/12 flex w-full justify-between px-8">
         <Button
           size="small"
           variant="ghost"
           onClick={handleClose}
-          className="border rounded-rounded w-8 h-8"
+          className="rounded-rounded h-8 w-8 border"
         >
           <CrossIcon size={20} />
         </Button>
@@ -93,7 +93,7 @@ const BasicFocusModalHeader: React.FC<BasicFocusModalProps> = ({
             onClick={handleClose}
             size="small"
             variant="ghost"
-            className="border rounded-rounded"
+            className="rounded-rounded border"
           >
             {cancelText || "Cancel"}
           </Button>
diff --git a/packages/admin-ui/ui/src/components/molecules/modal/index.tsx b/packages/admin-ui/ui/src/components/molecules/modal/index.tsx
index 53a224df14..04b13d376d 100644
--- a/packages/admin-ui/ui/src/components/molecules/modal/index.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/modal/index.tsx
@@ -43,7 +43,7 @@ type ModalType = React.FC<ModalProps> & {
 
 const Overlay: React.FC<React.PropsWithChildren> = ({ children }) => {
   return (
-    <Dialog.Overlay className="fixed top-0 bottom-0 left-0 right-0 z-50 grid overflow-y-auto bg-grey-90/40 place-items-center">
+    <Dialog.Overlay className="bg-grey-90/40 fixed top-0 bottom-0 left-0 right-0 z-50 grid place-items-center overflow-y-auto">
       {children}
     </Dialog.Overlay>
   )
@@ -57,7 +57,7 @@ const Content: React.FC<React.PropsWithChildren> = ({ children }) => {
   return (
     <Dialog.Content
       style={style}
-      className="overflow-x-hidden min-w-modal rounded-rounded bg-grey-0"
+      className="min-w-modal rounded-rounded bg-grey-0 overflow-x-hidden"
     >
       {children}
     </Dialog.Content>
@@ -125,7 +125,7 @@ Modal.Content = ({ children, className }) => {
 Modal.Header = ({ handleClose = undefined, children }) => {
   return (
     <div
-      className="flex items-center w-full px-8 py-6 border-b"
+      className="flex w-full items-center border-b px-8 py-6"
       onClick={(e) => e.stopPropagation()}
     >
       <div className="flex flex-grow">{children}</div>
diff --git a/packages/admin-ui/ui/src/components/molecules/modal/layered-modal.tsx b/packages/admin-ui/ui/src/components/molecules/modal/layered-modal.tsx
index 05d3ad80c5..06f05202d3 100644
--- a/packages/admin-ui/ui/src/components/molecules/modal/layered-modal.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/modal/layered-modal.tsx
@@ -112,13 +112,13 @@ const LayeredModal: React.FC<LayeredModalProps> = ({
                 <Button
                   variant="ghost"
                   size="small"
-                  className="w-8 h-8 border text-grey-50"
+                  className="text-grey-50 h-8 w-8 border"
                   onClick={screen.onBack}
                 >
                   <UTurnIcon size={20} />
                 </Button>
-                <div className="flex items-center gap-x-2xsmall">
-                  <h2 className="ml-4 inter-xlarge-semibold">{screen.title}</h2>
+                <div className="gap-x-2xsmall flex items-center">
+                  <h2 className="inter-xlarge-semibold ml-4">{screen.title}</h2>
                   {screen.subtitle && (
                     <span className="inter-xlarge-regular text-grey-50">
                       ({screen.subtitle})
diff --git a/packages/admin-ui/ui/src/components/molecules/modal/stepped-modal.tsx b/packages/admin-ui/ui/src/components/molecules/modal/stepped-modal.tsx
index 6c5bfef9f7..6a21e2ae94 100644
--- a/packages/admin-ui/ui/src/components/molecules/modal/stepped-modal.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/modal/stepped-modal.tsx
@@ -139,7 +139,7 @@ const SteppedModal: React.FC<SteppedProps> = ({
     >
       <Modal.Body
         className={clsx(
-          "transition-transform flex flex-col justify-between duration-100 max-h-full"
+          "flex max-h-full flex-col justify-between transition-transform duration-100"
         )}
       >
         <Modal.Header handleClose={resetAndClose}>
@@ -149,20 +149,20 @@ const SteppedModal: React.FC<SteppedProps> = ({
               (lastScreenIsSummary &&
                 context.currentStep !== steps.length - 1 && (
                   <div className="flex items-center">
-                    <span className="text-grey-50 inter-small-regular w-[70px] mr-4">{`Step ${
+                    <span className="text-grey-50 inter-small-regular mr-4 w-[70px]">{`Step ${
                       context.currentStep + 1
                     } of ${steps.length}`}</span>
                     {steps.map((_, i) => (
                       <span
                         key={i}
                         className={clsx(
-                          "w-2 h-2 rounded-full mr-3",
+                          "mr-3 h-2 w-2 rounded-full",
                           {
                             "bg-grey-20": i > context.currentStep,
                             "bg-violet-60": context.currentStep >= i,
                           },
                           {
-                            "outline-4 outline outline-violet-20":
+                            "outline-violet-20 outline outline-4":
                               context.currentStep === i,
                           }
                         )}
@@ -175,7 +175,7 @@ const SteppedModal: React.FC<SteppedProps> = ({
         <Modal.Content>{steps[context.currentStep]}</Modal.Content>
       </Modal.Body>
       <Modal.Footer>
-        <div className="flex justify-end w-full gap-x-xsmall">
+        <div className="gap-x-xsmall flex w-full justify-end">
           <Button
             variant="ghost"
             size="small"
diff --git a/packages/admin-ui/ui/src/components/molecules/native-select/index.tsx b/packages/admin-ui/ui/src/components/molecules/native-select/index.tsx
index d44ad179e6..0f3ef525c0 100644
--- a/packages/admin-ui/ui/src/components/molecules/native-select/index.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/native-select/index.tsx
@@ -23,7 +23,7 @@ const NativeSelect: NativeSelectType = ({
   return (
     <RadixSelect.Root {...props}>
       <RadixSelect.SelectTrigger
-        className="flex items-center inter-base-semibold gap-3 px-2"
+        className="inter-base-semibold flex items-center gap-3 px-2"
         {...triggerProps}
       >
         <RadixSelect.Value />
@@ -33,13 +33,13 @@ const NativeSelect: NativeSelectType = ({
       </RadixSelect.SelectTrigger>
       <RadixSelect.Content
         position="popper"
-        className="rounded-rounded scrollbar-hide border px-2 py-2 border-grey-20 bg-grey-0 w-full flex shadow-dropdown z-[9999] max-h-[305px] overflow-y-auto"
+        className="rounded-rounded scrollbar-hide border-grey-20 bg-grey-0 shadow-dropdown z-[9999] flex max-h-[305px] w-full overflow-y-auto border px-2 py-2"
       >
-        <RadixSelect.ScrollUpButton className="h-[25px] flex items-center justify-center bg-gradient-to-b from-transparent to-grey-0">
+        <RadixSelect.ScrollUpButton className="to-grey-0 flex h-[25px] items-center justify-center bg-gradient-to-b from-transparent">
           <ChevronUpIcon size={ICON_SIZE} />
         </RadixSelect.ScrollUpButton>
         <RadixSelect.Viewport className="p-2">{children}</RadixSelect.Viewport>
-        <RadixSelect.ScrollDownButton className="h-[25px] flex items-center justify-center bg-gradient-to-b from-transparent to-grey-0">
+        <RadixSelect.ScrollDownButton className="to-grey-0 flex h-[25px] items-center justify-center bg-gradient-to-b from-transparent">
           <ChevronDownIcon size={ICON_SIZE} />
         </RadixSelect.ScrollDownButton>
       </RadixSelect.Content>
@@ -52,7 +52,7 @@ type ItemProps = RadixSelect.SelectItemProps
 const Item: React.FC<ItemProps> = ({ children, ...props }) => (
   <RadixSelect.Item
     className={clsx(
-      "flex relative justify-start py-1.5 px-9 items-center inter-base-regular rounded hover:bg-grey-10"
+      "inter-base-regular hover:bg-grey-10 relative flex items-center justify-start rounded py-1.5 px-9"
     )}
     {...props}
   >
diff --git a/packages/admin-ui/ui/src/components/molecules/note-input/index.tsx b/packages/admin-ui/ui/src/components/molecules/note-input/index.tsx
index ad88395dfc..ffbd398805 100644
--- a/packages/admin-ui/ui/src/components/molecules/note-input/index.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/note-input/index.tsx
@@ -44,17 +44,17 @@ const NoteInput: React.FC<NoteInputProps> = ({ onSubmit }) => {
   return (
     <form>
       <div
-        className="flex items-center py-xsmall px-small bg-grey-5 border border-grey-20 rounded-rounded"
+        className="py-xsmall px-small bg-grey-5 border-grey-20 rounded-rounded flex items-center border"
         onClick={() => inputRef.current?.focus()}
       >
-        <div className="flex items-center gap-x-small flex-grow">
+        <div className="gap-x-small flex flex-grow items-center">
           <EmojiPicker onEmojiClick={handleAddEmoji} />
           <input
             type="text"
             placeholder="Write a note..."
             value={note}
             onChange={(e) => setNote(e.target.value)}
-            className="flex-grow bg-transparent inter-base-regular placeholder:text-grey-40 focus:outline-none"
+            className="inter-base-regular placeholder:text-grey-40 flex-grow bg-transparent focus:outline-none"
             ref={inputRef}
             id="note-input"
             autoComplete="off"
diff --git a/packages/admin-ui/ui/src/components/molecules/notification-bell/index.tsx b/packages/admin-ui/ui/src/components/molecules/notification-bell/index.tsx
index e466da7880..6565992d3f 100644
--- a/packages/admin-ui/ui/src/components/molecules/notification-bell/index.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/notification-bell/index.tsx
@@ -12,7 +12,7 @@ const NotificationBell: React.FC<NotificationBellProps> = ({
   ...attributes
 }) => {
   return (
-    <Button className="w-8 h-8" size="small" {...attributes}>
+    <Button className="h-8 w-8" size="small" {...attributes}>
       {hasNotifications ? <BellNotiIcon /> : <BellIcon />}
     </Button>
   )
diff --git a/packages/admin-ui/ui/src/components/molecules/numbered-item/index.tsx b/packages/admin-ui/ui/src/components/molecules/numbered-item/index.tsx
index c04f2b8f5a..3ad89070c7 100644
--- a/packages/admin-ui/ui/src/components/molecules/numbered-item/index.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/numbered-item/index.tsx
@@ -18,17 +18,17 @@ const NumberedItem: React.FC<NumberedItemProps> = ({
   description,
 }) => {
   return (
-    <div className="p-base border rounded-rounded flex gap-base justify-between items-center">
-      <div className="flex overflow-hidden gap-base w-full">
+    <div className="p-base rounded-rounded gap-base flex items-center justify-between border">
+      <div className="gap-base flex w-full overflow-hidden">
         <div>
           <Badge
-            className="inter-base-semibold flex justify-center items-center w-[40px] h-[40px]"
+            className="inter-base-semibold flex h-[40px] w-[40px] items-center justify-center"
             variant="default"
           >
             §{index}
           </Badge>
         </div>
-        <div className="truncate flex flex-col justify-center flex-1 w-full">
+        <div className="flex w-full flex-1 flex-col justify-center truncate">
           <div className="inter-small-semibold">{title}</div>
           {description &&
             (typeof description === "string" ? (
diff --git a/packages/admin-ui/ui/src/components/molecules/rma-select-shipping/index.tsx b/packages/admin-ui/ui/src/components/molecules/rma-select-shipping/index.tsx
index 5f5912eed9..115663f062 100644
--- a/packages/admin-ui/ui/src/components/molecules/rma-select-shipping/index.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/rma-select-shipping/index.tsx
@@ -21,7 +21,7 @@ const RMAShippingPrice: React.FC<RMAShippingPriceProps> = ({
   setUseCustomShippingPrice,
 }) => {
   return useCustomShippingPrice ? (
-    <div className="flex items-end mt-4 gap-x-base w-full">
+    <div className="gap-x-base mt-4 flex w-full items-end">
       <AmountInput
         label={`Shipping price (${inclTax ? "incl. tax" : "excl. tax"})`}
         currencyCode={currencyCode}
@@ -30,7 +30,7 @@ const RMAShippingPrice: React.FC<RMAShippingPriceProps> = ({
       />
       <Button
         onClick={() => setUseCustomShippingPrice(false)}
-        className="w-10 h-10 text-grey-40"
+        className="text-grey-40 h-10 w-10"
         variant="ghost"
         size="small"
       >
@@ -38,11 +38,11 @@ const RMAShippingPrice: React.FC<RMAShippingPriceProps> = ({
       </Button>
     </div>
   ) : (
-    <div className="flex w-full mt-4 justify-end">
+    <div className="mt-4 flex w-full justify-end">
       <Button
         onClick={() => setUseCustomShippingPrice(true)}
         variant="ghost"
-        className="border border-grey-20"
+        className="border-grey-20 border"
         size="small"
       >
         Add custom price
diff --git a/packages/admin-ui/ui/src/components/molecules/sales-channels-list/index.tsx b/packages/admin-ui/ui/src/components/molecules/sales-channels-list/index.tsx
index b576c0eba0..f6ae122519 100644
--- a/packages/admin-ui/ui/src/components/molecules/sales-channels-list/index.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/sales-channels-list/index.tsx
@@ -18,7 +18,7 @@ const SalesChannelsList = ({ salesChannels, showMax = 3 }: Props) => {
       {salesChannels
         .slice(0, showMax)
         .map((salesChannel, index, slicedArray) => (
-          <span className="ml-1 inter-base-regular text-grey-90 first-of-type:ml-0">
+          <span className="inter-base-regular text-grey-90 ml-1 first-of-type:ml-0">
             {salesChannel.name}
             {index < slicedArray.length - 1 && ", "}
           </span>
@@ -34,7 +34,7 @@ const SalesChannelsList = ({ salesChannels, showMax = 3 }: Props) => {
           }
           side="top"
         >
-          <span className="ml-1 text-grey-50">
+          <span className="text-grey-50 ml-1">
             + {salesChannels.length - showMax} more
           </span>
         </Tooltip>
diff --git a/packages/admin-ui/ui/src/components/molecules/search-bar.tsx b/packages/admin-ui/ui/src/components/molecules/search-bar.tsx
index 6d2ddb86ad..bb3d0473b0 100644
--- a/packages/admin-ui/ui/src/components/molecules/search-bar.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/search-bar.tsx
@@ -31,7 +31,7 @@ const SearchBar: React.FC = () => {
     <>
       <button
         onClick={() => setShowSearchModal(true)}
-        className="flex basis-1/2 items-center px-small py-[6px]"
+        className="px-small flex basis-1/2 items-center py-[6px]"
       >
         <SearchIcon className="text-grey-40" />
         <div className="ml-5">
diff --git a/packages/admin-ui/ui/src/components/molecules/section/index.tsx b/packages/admin-ui/ui/src/components/molecules/section/index.tsx
index 1cc1796b79..3c74c35de3 100644
--- a/packages/admin-ui/ui/src/components/molecules/section/index.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/section/index.tsx
@@ -15,10 +15,10 @@ const Section: React.FC<SectionProps> = ({
 }) => {
   return (
     <div>
-      <div className="flex items-center mb-2xsmall">
+      <div className="mb-2xsmall flex items-center">
         <h3 className="inter-base-semibold">{title}</h3>
         {tooltip && (
-          <div className="flex items-center ml-1.5">
+          <div className="ml-1.5 flex items-center">
             <IconTooltip content={tooltip} />
           </div>
         )}
diff --git a/packages/admin-ui/ui/src/components/molecules/select/next-select/components/containers.tsx b/packages/admin-ui/ui/src/components/molecules/select/next-select/components/containers.tsx
index 1422475d5b..e5e0fa757a 100644
--- a/packages/admin-ui/ui/src/components/molecules/select/next-select/components/containers.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/select/next-select/components/containers.tsx
@@ -34,7 +34,7 @@ export const AdjacentContainer = forwardRef<
     ref
   ) => {
     return (
-      <div className="flex flex-col gap-y-xsmall w-full" ref={ref}>
+      <div className="gap-y-xsmall flex w-full flex-col" ref={ref}>
         {label && (
           <label
             className="inter-small-semibold text-grey-50"
@@ -77,7 +77,7 @@ export const SelectContainer = <
           "--has-value": hasValue,
         },
         clsx(
-          "relative pointer-events-auto",
+          "pointer-events-auto relative",
           { "text-grey-40": isDisabled },
           className
         )
@@ -116,7 +116,7 @@ export const ValueContainer = <
             "value-container--has-value": hasValue,
           },
           clsx(
-            "group flex items-center flex-wrap relative scrolling-touch overflow-hidden flex-1",
+            "scrolling-touch group relative flex flex-1 flex-wrap items-center overflow-hidden",
             {
               "gap-2xsmall": isMulti,
             },
@@ -125,14 +125,14 @@ export const ValueContainer = <
         )}
       >
         {value?.length > 0 && (
-          <div className="h-7 bg-grey-20 text-grey-50 px-small inter-small-semibold flex items-center rounded-rounded gap-x-2xsmall cursor-default">
+          <div className="bg-grey-20 text-grey-50 px-small inter-small-semibold rounded-rounded gap-x-2xsmall flex h-7 cursor-default items-center">
             <span>{value.length}</span>
           </div>
         )}
         <div className="relative grow">
           {children}
           {value?.length > 0 && inputValue === "" && (
-            <span className="absolute top-1/2 -translate-y-1/2 inter-base-regular text-grey-50">
+            <span className="inter-base-regular text-grey-50 absolute top-1/2 -translate-y-1/2">
               {selectedPlaceholder || label || "Selected"}
             </span>
           )}
@@ -151,7 +151,7 @@ export const ValueContainer = <
           "value-container--has-value": hasValue,
         },
         clsx(
-          "flex items-center flex-wrap relative scrolling-touch overflow-hidden flex-1",
+          "scrolling-touch relative flex flex-1 flex-wrap items-center overflow-hidden",
           {
             "gap-2xsmall": isMulti,
           },
@@ -181,7 +181,7 @@ export const IndicatorsContainer = <
         {
           "indicators-container": true,
         },
-        clsx("text-grey-50 flex items-center gap-x-small px-small", className)
+        clsx("text-grey-50 gap-x-small px-small flex items-center", className)
       )}
     >
       {children}
diff --git a/packages/admin-ui/ui/src/components/molecules/select/next-select/components/control.tsx b/packages/admin-ui/ui/src/components/molecules/select/next-select/components/control.tsx
index b1df8ac868..92f3e05ac3 100644
--- a/packages/admin-ui/ui/src/components/molecules/select/next-select/components/control.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/select/next-select/components/control.tsx
@@ -38,7 +38,7 @@ const Control = <
           "control--menu-is-open": menuIsOpen,
         },
         clsx(
-          "flex p-0 overflow-hidden rounded-rounded border border-gray-20 bg-grey-5 focus-within:shadow-cta transition-colors focus-within:border-violet-60 box-border pl-small",
+          "rounded-rounded border-gray-20 bg-grey-5 focus-within:shadow-cta focus-within:border-violet-60 pl-small box-border flex overflow-hidden border p-0 transition-colors",
           {
             "h-xlarge": size === "sm",
             "h-10": size === "md" || !size,
@@ -50,7 +50,7 @@ const Control = <
     >
       <div
         className={clsx(
-          "flex items-center flex-1",
+          "flex flex-1 items-center",
           customStyles?.inner_control
         )}
       >
diff --git a/packages/admin-ui/ui/src/components/molecules/select/next-select/components/menu.tsx b/packages/admin-ui/ui/src/components/molecules/select/next-select/components/menu.tsx
index 296e21ff89..a1ca51a3f4 100644
--- a/packages/admin-ui/ui/src/components/molecules/select/next-select/components/menu.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/select/next-select/components/menu.tsx
@@ -53,7 +53,7 @@ const Menu = <
       className={cx(
         { menu: true },
         clsx(
-          "absolute w-full overflow-hidden border-border z-[60] bg-grey-0 rounded-rounded border border-grey-20 shadow-dropdown mb-base",
+          "border-border bg-grey-0 rounded-rounded border-grey-20 shadow-dropdown mb-base absolute z-[60] w-full overflow-hidden border",
           {
             "top-[calc(100%+8px)]": placement === "bottom",
             "bottom-full": placement === "top",
@@ -178,7 +178,7 @@ export const MenuList = <
           "menu-list": true,
           "menu-list--is-multi": isMulti,
         },
-        clsx("overflow-y-auto flex flex-col py-xsmall no-scrollbar", className)
+        clsx("py-xsmall no-scrollbar flex flex-col overflow-y-auto", className)
       )}
     >
       {isMulti && selectAll && (
@@ -208,14 +208,14 @@ export const LoadingMessage = <
     return (
       <div
         className={clsx(
-          "w-full flex items-center px-base transition-colors hover:bg-grey-5",
+          "px-base hover:bg-grey-5 flex w-full items-center transition-colors",
           {
             "h-xlarge": size === "sm",
             "h-10": size === "md" || !size,
           }
         )}
       >
-        <div className="bg-grey-10 animate-pulse w-1/4 h-xsmall rounded-rounded" />
+        <div className="bg-grey-10 h-xsmall rounded-rounded w-1/4 animate-pulse" />
       </div>
     )
   }
@@ -271,9 +271,9 @@ export const Option = <
           "option--is-focused": isFocused,
         },
         clsx(
-          "flex items-center justify-between py-xsmall px-base transition-colors hover:bg-grey-5",
+          "py-xsmall px-base hover:bg-grey-5 flex items-center justify-between transition-colors",
           {
-            "text-grey-30 select-none cursor-not-allowed": isDisabled,
+            "text-grey-30 cursor-not-allowed select-none": isDisabled,
             "bg-grey-10": isFocused && !isDisabled,
             hidden: hideSelectedOptions && isSelected,
           },
@@ -290,13 +290,13 @@ export const Option = <
       tabIndex={isDisabled ? -1 : 0}
       {...innerProps}
     >
-      <div className="flex items-center gap-x-small flex-1">
+      <div className="gap-x-small flex flex-1 items-center">
         {isMulti && (
           <CheckboxAdornment isSelected={isSelected} isDisabled={isDisabled} />
         )}
         <div
           className={clsx(
-            "flex items-center justify-between gap-x-xsmall inter-base-regular flex-1",
+            "gap-x-xsmall inter-base-regular flex flex-1 items-center justify-between",
             {
               truncate: !!truncateOption,
             }
@@ -306,14 +306,14 @@ export const Option = <
           <span className="w-full">{children}</span>
 
           {suffix && (
-            <span className="inter-base-regular justify-self-end text-grey-50">
+            <span className="inter-base-regular text-grey-50 justify-self-end">
               {suffix}
             </span>
           )}
         </div>
       </div>
       {!isMulti && (
-        <div className="w-5 ml-xsmall">
+        <div className="ml-xsmall w-5">
           {isSelected && <CheckIcon size={16} />}
         </div>
       )}
@@ -328,7 +328,7 @@ const CheckboxAdornment = ({
   return (
     <div
       className={clsx(
-        `w-base h-base flex justify-center text-grey-0 border-grey-30 border rounded-base transition-colors`,
+        `w-base h-base text-grey-0 border-grey-30 rounded-base flex justify-center border transition-colors`,
         {
           "bg-violet-60 border-violet-60": isSelected,
           "bg-grey-5": isDisabled,
diff --git a/packages/admin-ui/ui/src/components/molecules/select/next-select/components/multi-value.tsx b/packages/admin-ui/ui/src/components/molecules/select/next-select/components/multi-value.tsx
index 5cfea1f37b..b309f97cbc 100644
--- a/packages/admin-ui/ui/src/components/molecules/select/next-select/components/multi-value.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/select/next-select/components/multi-value.tsx
@@ -1,13 +1,12 @@
-import clsx from "clsx";
-import React from "react";
+import clsx from "clsx"
 import {
-    GroupBase,
-    MultiValueGenericProps,
-    MultiValueProps,
-    MultiValueRemoveProps
-} from "react-select";
-import CrossIcon from "../../../../fundamentals/icons/cross-icon";
-import { optionIsFixed } from "../utils";
+  GroupBase,
+  MultiValueGenericProps,
+  MultiValueProps,
+  MultiValueRemoveProps,
+} from "react-select"
+import CrossIcon from "../../../../fundamentals/icons/cross-icon"
+import { optionIsFixed } from "../utils"
 
 const MultiValue = <
   Option,
@@ -31,12 +30,15 @@ const MultiValue = <
     <Container
       data={data}
       innerProps={{
-        className: cx({
-          "multi-value": true,
-          "multi-value--is-disabled": isDisabled,
-        }, clsx({
-            "bg-grey-70 text-grey-0": isFocused
-        })),
+        className: cx(
+          {
+            "multi-value": true,
+            "multi-value--is-disabled": isDisabled,
+          },
+          clsx({
+            "bg-grey-70 text-grey-0": isFocused,
+          })
+        ),
         ...innerProps,
       }}
       selectProps={selectProps}
@@ -83,31 +85,34 @@ export const MultiValueContainer = <
   children,
   innerProps: { className },
 }: MultiValueGenericProps<Option, IsMulti, Group>) => {
-    return (
-        <span className={clsx("flex items-center gap-x-2xsmall py-2xsmall pl-small pr-2.5 rounded-rounded transition-colors bg-grey-20 text-grey-50 inter-small-semibold", className)}>{children}</span>
-    )
+  return (
+    <span
+      className={clsx(
+        "gap-x-2xsmall py-2xsmall pl-small rounded-rounded bg-grey-20 text-grey-50 inter-small-semibold flex items-center pr-2.5 transition-colors",
+        className
+      )}
+    >
+      {children}
+    </span>
+  )
 }
 
 export const MultiValueRemove = <
   Option = unknown,
   IsMulti extends boolean = boolean,
   Group extends GroupBase<Option> = GroupBase<Option>
->( 
+>(
   props: MultiValueRemoveProps<Option, IsMulti, Group>
 ) => {
-  const { children, innerProps, data } = props;
+  const { children, innerProps, data } = props
 
   if (optionIsFixed(data) && data.isFixed) {
-    return null;
+    return null
   }
 
   return (
-    <div
-      {...innerProps}
-      role="button"
-      className="text-grey-40"
-    >
+    <div {...innerProps} role="button" className="text-grey-40">
       {children || <CrossIcon size={16} />}
     </div>
-  );
-};
+  )
+}
diff --git a/packages/admin-ui/ui/src/components/molecules/select/next-select/components/placeholder.tsx b/packages/admin-ui/ui/src/components/molecules/select/next-select/components/placeholder.tsx
index 44dcd3d585..b61cab752a 100644
--- a/packages/admin-ui/ui/src/components/molecules/select/next-select/components/placeholder.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/select/next-select/components/placeholder.tsx
@@ -1,5 +1,4 @@
 import clsx from "clsx"
-import React from "react"
 import { GroupBase, PlaceholderProps } from "react-select"
 
 const Placeholder = <
@@ -20,7 +19,7 @@ const Placeholder = <
           placeholder: true,
         },
         clsx(
-          "absolute top-1/2 -translate-y-1/2 select-none inter-base-regular text-grey-50",
+          "inter-base-regular text-grey-50 absolute top-1/2 -translate-y-1/2 select-none",
           className
         )
       )}
diff --git a/packages/admin-ui/ui/src/components/molecules/select/next-select/components/single-value.tsx b/packages/admin-ui/ui/src/components/molecules/select/next-select/components/single-value.tsx
index 438b6bd4f2..44c8d3c296 100644
--- a/packages/admin-ui/ui/src/components/molecules/select/next-select/components/single-value.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/select/next-select/components/single-value.tsx
@@ -1,5 +1,4 @@
 import clsx from "clsx"
-import React from "react"
 import { GroupBase, SingleValueProps } from "react-select"
 import { hasPrefix } from "../utils"
 
@@ -26,12 +25,12 @@ const SingleValue = <
           "single-value--is-disabled": isDisabled,
         },
         clsx(
-          "overflow-hidden absolute top-1/2 -translate-y-1/2 whitespace-nowrap overflow-ellipsis",
+          "absolute top-1/2 -translate-y-1/2 overflow-hidden overflow-ellipsis whitespace-nowrap",
           className
         )
       )}
     >
-      <div className="flex items-center gap-x-xsmall inter-base-regular">
+      <div className="gap-x-xsmall inter-base-regular flex items-center">
         {prefix && <span className="inter-base-semibold">{prefix}</span>}
         {children}
       </div>
diff --git a/packages/admin-ui/ui/src/components/molecules/select/next-select/createable-select/index.tsx b/packages/admin-ui/ui/src/components/molecules/select/next-select/createable-select/index.tsx
index f455b502c3..76430c47ba 100644
--- a/packages/admin-ui/ui/src/components/molecules/select/next-select/createable-select/index.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/select/next-select/createable-select/index.tsx
@@ -1,5 +1,5 @@
 import type { MutableRefObject, ReactElement, RefAttributes } from "react"
-import React, { forwardRef } from "react"
+import { forwardRef } from "react"
 import type { GroupBase, SelectInstance } from "react-select"
 import type { CreatableProps } from "react-select/creatable"
 import CreatableReactSelect from "react-select/creatable"
diff --git a/packages/admin-ui/ui/src/components/molecules/select/select-components.tsx b/packages/admin-ui/ui/src/components/molecules/select/select-components.tsx
index dcbd4b3477..9c37d38b1a 100644
--- a/packages/admin-ui/ui/src/components/molecules/select/select-components.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/select/select-components.tsx
@@ -1,5 +1,4 @@
 import clsx from "clsx"
-import React from "react"
 import {
   ClearIndicatorProps,
   components,
@@ -39,7 +38,7 @@ const MultiValueLabel = <
   return (
     <div
       {...innerProps}
-      className={clsx("bg-grey-5 mx-0 inter-base-regular p-0", {
+      className={clsx("bg-grey-5 inter-base-regular mx-0 p-0", {
         "after:content-[',']": !isLast,
       })}
     >
@@ -59,9 +58,9 @@ const Menu = <
   return (
     <components.Menu
       className={clsx("!rounded-rounded", {
-        "-mt-1 z-60":
+        "z-60 -mt-1":
           !props.selectProps.isSearchable && props.menuPlacement === "bottom",
-        "mb-3 z-60":
+        "z-60 mb-3":
           !props.selectProps.isSearchable && props.menuPlacement === "top",
       })}
       {...props}
@@ -95,7 +94,7 @@ const Placeholder = <
   props: PlaceholderProps<Option, IsMulti, Group>
 ) => {
   return props.selectProps.menuIsOpen ? null : (
-    <components.Placeholder {...props} className="!mx-0 !text-grey-40" />
+    <components.Placeholder {...props} className="!text-grey-40 !mx-0" />
   )
 }
 
@@ -142,7 +141,7 @@ const SelectContainer = <
   props: ContainerProps<Option, IsMulti, Group>
 ) => {
   return (
-    <div className="bg-grey-5 h-10 border border-grey-20 rounded-rounded focus-within:shadow-cta focus-within:border-violet-60 px-small">
+    <div className="bg-grey-5 border-grey-20 rounded-rounded focus-within:shadow-cta focus-within:border-violet-60 px-small h-10 border">
       <components.SelectContainer {...props} />
     </div>
   )
@@ -164,8 +163,8 @@ const Input = <
   }
 
   return (
-    <div className="w-full flex items-center h-full space-between">
-      <div className="w-full flex items-center">
+    <div className="space-between flex h-full w-full items-center">
+      <div className="flex w-full items-center">
         <span className="text-grey-40 mr-2">
           <SearchIcon size={16} />
         </span>
@@ -190,7 +189,7 @@ const ClearIndicator = <
   return (
     <div
       {...innerProps}
-      className="hover:bg-grey-10 text-grey-50 rounded cursor-pointer"
+      className="hover:bg-grey-10 text-grey-50 cursor-pointer rounded"
     >
       <XCircleIcon size={16} />
     </div>
@@ -201,7 +200,7 @@ const CheckboxAdornment = ({ isSelected }: { isSelected: boolean }) => {
   return (
     <div
       className={clsx(
-        `w-5 h-5 flex justify-center text-grey-0 border-grey-30 border rounded-base`,
+        `text-grey-0 border-grey-30 rounded-base flex h-5 w-5 justify-center border`,
         {
           "bg-violet-60": isSelected,
         }
@@ -219,18 +218,18 @@ const RadioAdornment = ({ isSelected }: { isSelected: boolean }) => {
     <div
       className={clsx(
         "radio-outer-ring outline-0",
-        "shrink-0 w-[20px] h-[20px] rounded-circle",
+        "rounded-circle h-[20px] w-[20px] shrink-0",
         {
           "shadow-[0_0_0_1px] shadow-[#D1D5DB]": !isSelected,
-          "shadow-[0_0_0_2px] shadow-violet-60": isSelected,
+          "shadow-violet-60 shadow-[0_0_0_2px]": isSelected,
         }
       )}
     >
       {isSelected && (
         <div
           className={clsx(
-            "group flex items-center justify-center w-full h-full relative",
-            "after:absolute after:inset-0 after:m-auto after:block after:w-[12px] after:h-[12px] after:bg-violet-60 after:rounded-circle"
+            "group relative flex h-full w-full items-center justify-center",
+            "after:bg-violet-60 after:rounded-circle after:absolute after:inset-0 after:m-auto after:block after:h-[12px] after:w-[12px]"
           )}
         />
       )}
@@ -248,7 +247,7 @@ const NoOptionsMessage = <
 }: NoticeProps<Option, IsMulti, Group>) => {
   return (
     <div
-      className="text-grey-50 inter-small-semibold text-center p-xsmall"
+      className="text-grey-50 inter-small-semibold p-xsmall text-center"
       {...innerProps}
     >
       <p>{isLoading ? "Loading..." : "No options"}</p>
@@ -267,12 +266,12 @@ const Option = <
   return (
     <components.Option
       {...props}
-      className="my-1 py-0 px-2 bg-grey-0 active:bg-grey-0"
+      className="bg-grey-0 active:bg-grey-0 my-1 py-0 px-2"
     >
       <div
-        className={`item-renderer h-full hover:bg-grey-10 py-2 px-2 cursor-pointer rounded`}
+        className={`item-renderer hover:bg-grey-10 h-full cursor-pointer rounded py-2 px-2`}
       >
-        <div className="items-center h-full flex">
+        <div className="flex h-full items-center">
           {props.data?.value !== "all" && props.data?.label !== "Select All" ? (
             <>
               {props.isMulti ? (
@@ -280,7 +279,7 @@ const Option = <
               ) : (
                 <RadioAdornment isSelected={props.isSelected} />
               )}
-              <span className="ml-3 text-grey-90 inter-base-regular">
+              <span className="text-grey-90 inter-base-regular ml-3">
                 {props.data.label}
               </span>
             </>
diff --git a/packages/admin-ui/ui/src/components/molecules/shipping-option/index.tsx b/packages/admin-ui/ui/src/components/molecules/shipping-option/index.tsx
index 7d844cfe60..23a0f9bfc9 100644
--- a/packages/admin-ui/ui/src/components/molecules/shipping-option/index.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/shipping-option/index.tsx
@@ -32,10 +32,10 @@ const ShippingOption: React.FC<ShippingOptionProps> = ({
   onEdit,
 }) => {
   return (
-    <div className="flex items-baseline justify-between p-base rounded-base border border-grey-20">
+    <div className="p-base rounded-base border-grey-20 flex items-baseline justify-between border">
       <div className="truncate">
         <div className="flex items-center">
-          <p className="inter-small-semibold truncate mr-xsmall">
+          <p className="inter-small-semibold mr-xsmall truncate">
             {option.name} {option.data.name && `(${option.data.name})`}{" "}
           </p>
           {option.admin_only && <Badge variant="primary">Not on website</Badge>}
@@ -45,7 +45,7 @@ const ShippingOption: React.FC<ShippingOptionProps> = ({
           {option.amount !== undefined &&
             `${option.amount / 100} ${currency_code.toUpperCase()}`}
           {option.requirements.length
-            ? option.requirements.map(r => {
+            ? option.requirements.map((r) => {
                 const type =
                   r.type === "max_subtotal" ? "Max. subtotal" : "Min. subtotal"
                 return ` - ${type}: ${
diff --git a/packages/admin-ui/ui/src/components/molecules/sidebar-company-logo/index.tsx b/packages/admin-ui/ui/src/components/molecules/sidebar-company-logo/index.tsx
index f6f2656813..0819564170 100644
--- a/packages/admin-ui/ui/src/components/molecules/sidebar-company-logo/index.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/sidebar-company-logo/index.tsx
@@ -8,11 +8,11 @@ const SidebarCompanyLogo: React.FC<SidebarCompanyLogoProps> = ({
   storeName,
 }: SidebarCompanyLogoProps) => {
   return (
-    <div className="flex items-center bg-grey-0 px-2.5 pb-6 w-full mb-4">
-      <div className="w-[32px] h-[32px] flex items-center justify-center bg-grey-90 text-grey-0 rounded">
+    <div className="bg-grey-0 mb-4 flex w-full items-center px-2.5 pb-6">
+      <div className="bg-grey-90 text-grey-0 flex h-[32px] w-[32px] items-center justify-center rounded">
         <div>{storeName?.slice(0, 1) || "M"}</div>
       </div>
-      <span className="font-semibold ml-2.5">{storeName}</span>
+      <span className="ml-2.5 font-semibold">{storeName}</span>
     </div>
   )
 }
diff --git a/packages/admin-ui/ui/src/components/molecules/sidebar-menu-item/index.tsx b/packages/admin-ui/ui/src/components/molecules/sidebar-menu-item/index.tsx
index 4b0f84a847..83e16c9775 100644
--- a/packages/admin-ui/ui/src/components/molecules/sidebar-menu-item/index.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/sidebar-menu-item/index.tsx
@@ -40,7 +40,7 @@ const SidebarMenuItem: React.FC<SidebarMenuItemProps> & {
       trigger={
         <NavLink className={classNameFn} to={pageLink}>
           <span className="items-start">{icon}</span>
-          <span className="ml-3 group-[.is-active]:text-grey-90">{text}</span>
+          <span className="group-[.is-active]:text-grey-90 ml-3">{text}</span>
         </NavLink>
       }
     >
@@ -62,7 +62,7 @@ const SubItem = ({ pageLink, text }: SidebarMenuSubitemProps) => {
 
   return (
     <NavLink className={classNameFn} to={pageLink}>
-      <span className="ml-3 text-grey-90 text-small">{text}</span>
+      <span className="text-grey-90 text-small ml-3">{text}</span>
     </NavLink>
   )
 }
diff --git a/packages/admin-ui/ui/src/components/molecules/sidebar-team-member/index.tsx b/packages/admin-ui/ui/src/components/molecules/sidebar-team-member/index.tsx
index 1c990b4639..72f5ceb8b0 100644
--- a/packages/admin-ui/ui/src/components/molecules/sidebar-team-member/index.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/sidebar-team-member/index.tsx
@@ -16,11 +16,11 @@ const SidebarTeamMember: React.FC<SidebarTeamMemberProps> = ({
       : user.email
 
   return (
-    <div className="flex items-center bg-inherit px-2.5 py-1.5 w-full">
-      <div className="w-[24px] h-[24px]">
+    <div className="flex w-full items-center bg-inherit px-2.5 py-1.5">
+      <div className="h-[24px] w-[24px]">
         <Avatar user={user} color={color} />
       </div>
-      <span className="pl-2.5 w-40 truncate">{fullName}</span>
+      <span className="w-40 truncate pl-2.5">{fullName}</span>
     </div>
   )
 }
diff --git a/packages/admin-ui/ui/src/components/molecules/status-selector/index.tsx b/packages/admin-ui/ui/src/components/molecules/status-selector/index.tsx
index ecdcd2bc52..02195ccd11 100644
--- a/packages/admin-ui/ui/src/components/molecules/status-selector/index.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/status-selector/index.tsx
@@ -29,7 +29,7 @@ const StatusSelector: React.FC<StatusSelectorProps> = ({
         </DropdownMenu.Trigger>
         <DropdownMenu.Content
           sideOffset={5}
-          className="border bg-grey-0 border-grey-20 rounded-rounded shadow-dropdown p-xsmall min-w-[200px] z-30"
+          className="bg-grey-0 border-grey-20 rounded-rounded shadow-dropdown p-xsmall z-30 min-w-[200px] border"
         >
           <DropdownMenu.Item>
             {
diff --git a/packages/admin-ui/ui/src/components/molecules/switchable-item/index.tsx b/packages/admin-ui/ui/src/components/molecules/switchable-item/index.tsx
index 19ab8a0c92..42bb898ec1 100644
--- a/packages/admin-ui/ui/src/components/molecules/switchable-item/index.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/switchable-item/index.tsx
@@ -24,7 +24,7 @@ const SwitchableItem: React.FC<SwitchableItemProps> = ({
     <div>
       <div className="flex items-start justify-between">
         <div className="flex flex-col">
-          <div className="flex items-center gap-x-2xsmall">
+          <div className="gap-x-2xsmall flex items-center">
             <p className="inter-base-semibold">{title}</p>
             {tooltip && <IconTooltip content={tooltip} />}
           </div>
@@ -39,7 +39,7 @@ const SwitchableItem: React.FC<SwitchableItemProps> = ({
       </div>
       <div
         className={clsx(
-          "transition-[max-height,opacity] duration-500 ease-in-out overflow-hidden",
+          "overflow-hidden transition-[max-height,opacity] duration-500 ease-in-out",
           {
             "max-h-[1000px] opacity-100": open,
             "max-h-0 opacity-0": !open,
diff --git a/packages/admin-ui/ui/src/components/molecules/table-fileds-filter/index.tsx b/packages/admin-ui/ui/src/components/molecules/table-fileds-filter/index.tsx
index 28325179f1..80ab63ce72 100644
--- a/packages/admin-ui/ui/src/components/molecules/table-fileds-filter/index.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/table-fileds-filter/index.tsx
@@ -7,7 +7,7 @@ import Button from "../../fundamentals/button"
 import CrossIcon from "../../fundamentals/icons/cross-icon"
 import Checkbox from "../../atoms/checkbox"
 
-/******************** TYPES ********************/
+/** ****************** TYPES ********************/
 
 type Field = {
   id: string
@@ -36,7 +36,7 @@ type FieldMenuItemProps = {
   onChange: () => void
 }
 
-/******************** COMPONENTS ********************/
+/** ****************** COMPONENTS ********************/
 
 /**
  * Table field chip component.
@@ -44,7 +44,7 @@ type FieldMenuItemProps = {
 function Chip(props: ChipProps) {
   const { remove, short } = props
   return (
-    <div className="rounded-lg h-[32px] inline-flex gap-1 shrink-0 items-center text-small text-grey-70 border border-gray-70 px-3 mr-1 last:mr-2">
+    <div className="text-small text-grey-70 border-gray-70 mr-1 inline-flex h-[32px] shrink-0 items-center gap-1 rounded-lg border px-3 last:mr-2">
       {short}
       <CrossIcon
         className="text-grey-40 cursor-pointer"
@@ -64,7 +64,7 @@ function FieldMenuItem(props: FieldMenuItemProps) {
     <DropdownMenu.Item>
       <Checkbox
         checked={checked}
-        className="px-[6px] mx-2 h-[32px] hover:bg-grey-10 rounded text-small"
+        className="hover:bg-grey-10 text-small mx-2 h-[32px] rounded px-[6px]"
         onChange={onChange}
         label={
           typeof field.label === "function"
@@ -76,7 +76,7 @@ function FieldMenuItem(props: FieldMenuItemProps) {
   )
 }
 
-/******************** CONTAINERS ********************/
+/** ****************** CONTAINERS ********************/
 
 /**
  * The dropdown menu for selecting currently active table fields.
@@ -132,9 +132,9 @@ function FieldsMenu(props: FieldsMenuProps) {
         <Button
           onClick={onTriggerClick}
           variant="secondary"
-          className="rounded-lg h-[32px] px-3 text-small font-semibold text-grey-90 inline-flex"
+          className="text-small text-grey-90 inline-flex h-[32px] rounded-lg px-3 font-semibold"
         >
-          <span className="flex whitespace-nowrap items-center gap-1">
+          <span className="flex items-center gap-1 whitespace-nowrap">
             Add fields <PlusIcon size={14} />
           </span>
         </Button>
@@ -142,7 +142,7 @@ function FieldsMenu(props: FieldsMenuProps) {
 
       <DropdownMenu.Content
         ref={contentRef}
-        className="w-[240px] bg-white shadow rounded-xl p-2"
+        className="w-[240px] rounded-xl bg-white p-2 shadow"
       >
         {fields.map((f) => (
           <FieldMenuItem
@@ -179,8 +179,8 @@ function TableFieldsFilters(props: TableFieldsFilterProps) {
   const visibleFields = _selected.map((id) => fields.find((f) => f.id === id))
 
   return (
-    <div className="flex-wrap flex items-center gap-y-2">
-      <span className="text-small font-semibold whitespace-nowrap text-gray-500 mr-2">
+    <div className="flex flex-wrap items-center gap-y-2">
+      <span className="text-small mr-2 whitespace-nowrap font-semibold text-gray-500">
         Currently editing these fields:
       </span>
 
diff --git a/packages/admin-ui/ui/src/components/molecules/table-pagination/table-pagination.tsx b/packages/admin-ui/ui/src/components/molecules/table-pagination/table-pagination.tsx
index a79892b5d7..5947f25276 100644
--- a/packages/admin-ui/ui/src/components/molecules/table-pagination/table-pagination.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/table-pagination/table-pagination.tsx
@@ -40,16 +40,16 @@ export const TablePagination = <T,>({
   return (
     <div
       className={clsx(
-        "inter-small-regular flex items-center justify-between text-grey-50",
+        "inter-small-regular text-grey-50 flex items-center justify-between",
         className
       )}
     >
       <div>
         <p>{`${from} – ${to} of ${count} results`}</p>
       </div>
-      <div className="flex items-center gap-x-small">
+      <div className="gap-x-small flex items-center">
         <p>{`${getState().pagination.pageIndex + 1} of ${getPageCount()}`}</p>
-        <div className="flex items-center gap-x-2xsmall">
+        <div className="gap-x-2xsmall flex items-center">
           <Button
             variant="ghost"
             size="small"
diff --git a/packages/admin-ui/ui/src/components/molecules/table-toaster/index.tsx b/packages/admin-ui/ui/src/components/molecules/table-toaster/index.tsx
index f005c15519..4fc5773a83 100644
--- a/packages/admin-ui/ui/src/components/molecules/table-toaster/index.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/table-toaster/index.tsx
@@ -19,7 +19,7 @@ export const TableToasterContainer = ({
       })}
       {...toast?.ariaProps}
     >
-      <div className="flex items-center rounded-rounded bg-grey-90 px-base py-3.5">
+      <div className="rounded-rounded bg-grey-90 px-base flex items-center py-3.5">
         {children}
       </div>
     </div>
diff --git a/packages/admin-ui/ui/src/components/molecules/table/filtering-option.tsx b/packages/admin-ui/ui/src/components/molecules/table/filtering-option.tsx
index 343277b3bc..9c082aee8d 100644
--- a/packages/admin-ui/ui/src/components/molecules/table/filtering-option.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/table/filtering-option.tsx
@@ -24,7 +24,7 @@ const FilteringOptions: React.FC<FilteringOptionProps> = ({
   return (
     <div
       className={clsx(
-        "inter-small-regular flex text-grey-50 mr-6 last:mr-0",
+        "inter-small-regular text-grey-50 mr-6 flex last:mr-0",
         className
       )}
       {...props}
@@ -34,11 +34,11 @@ const FilteringOptions: React.FC<FilteringOptionProps> = ({
         <DropdownMenu.Trigger
           asChild
           className={clsx(
-            "inter-small-regular text-grey-50 flex items-center pl-1.5 pr-0.5 rounded active:bg-grey-5 hover:bg-grey-5",
+            "inter-small-regular text-grey-50 active:bg-grey-5 hover:bg-grey-5 flex items-center rounded pl-1.5 pr-0.5",
             { "bg-grey-5": open }
           )}
         >
-          <div className="flex align-center">
+          <div className="align-center flex">
             {selected}
             <div className="text-grey-40 h-min">
               <ChevronDownIcon size={16} />
@@ -47,7 +47,7 @@ const FilteringOptions: React.FC<FilteringOptionProps> = ({
         </DropdownMenu.Trigger>
         <DropdownMenu.Content
           sideOffset={8}
-          className="bg-grey-0 p-2 border border-grey-20 rounded-rounded shadow-dropdown"
+          className="bg-grey-0 border-grey-20 rounded-rounded shadow-dropdown border p-2"
         >
           {options.map((opt, idx) => (
             <DropdownMenu.DropdownMenuItem
@@ -58,9 +58,9 @@ const FilteringOptions: React.FC<FilteringOptionProps> = ({
               }}
               disabled={typeof opt.count !== "undefined" && opt.count < 1}
               className={clsx(
-                "py-1.5 my-1 w-48 px-3 flex items-center rounded text-grey-90  hover:border-0 hover:outline-none inter-small-semibold",
+                "text-grey-90 inter-small-semibold my-1 flex w-48 items-center rounded py-1.5  px-3 hover:border-0 hover:outline-none",
                 {
-                  "cursor-pointer hover:bg-grey-10":
+                  "hover:bg-grey-10 cursor-pointer":
                     typeof opt.count === "undefined" || opt.count > 0,
                 }
               )}
@@ -71,7 +71,7 @@ const FilteringOptions: React.FC<FilteringOptionProps> = ({
                 </span>
               )}
               <div
-                className={clsx("ml-3 w-full flex justify-between", {
+                className={clsx("ml-3 flex w-full justify-between", {
                   "ml-7": selected !== opt.title,
                   "text-grey-30": (opt.count || 0) < 1,
                 })}
diff --git a/packages/admin-ui/ui/src/components/molecules/table/table-search.tsx b/packages/admin-ui/ui/src/components/molecules/table/table-search.tsx
index 249fa90c98..6bc0c008d2 100644
--- a/packages/admin-ui/ui/src/components/molecules/table/table-search.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/table/table-search.tsx
@@ -20,7 +20,7 @@ const TableSearch: React.FC<TableSearchProps> = ({
   return (
     <div
       className={clsx(
-        "inter-small-regular mt-1 transition-color flex text-grey-50 items-center mb-1 pl-1 py-1.5 rounded-rounded border border-grey-20 min-w-content w-60 focus-within:shadow-input focus-within:border-violet-60 bg-grey-5",
+        "inter-small-regular transition-color text-grey-50 rounded-rounded border-grey-20 min-w-content focus-within:shadow-input focus-within:border-violet-60 bg-grey-5 mt-1 mb-1 flex w-60 items-center border py-1.5 pl-1",
         className
       )}
       {...props}
@@ -33,7 +33,7 @@ const TableSearch: React.FC<TableSearchProps> = ({
         type="text"
         value={searchValue}
         className={clsx(
-          "focus:outline-none focus:border-none inter-small-regular w-full bg-transparent focus:text-grey-90 caret-violet-60 placeholder:inter-small-regular placeholder-grey-40"
+          "inter-small-regular focus:text-grey-90 caret-violet-60 placeholder:inter-small-regular placeholder-grey-40 w-full bg-transparent focus:border-none focus:outline-none"
         )}
         placeholder={placeholder}
         onChange={(e) => {
diff --git a/packages/admin-ui/ui/src/components/molecules/tag-grid.tsx/index.tsx b/packages/admin-ui/ui/src/components/molecules/tag-grid.tsx/index.tsx
index 4037066f70..cb6c1d96cd 100644
--- a/packages/admin-ui/ui/src/components/molecules/tag-grid.tsx/index.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/tag-grid.tsx/index.tsx
@@ -22,7 +22,7 @@ const TagGrid: React.FC<TagGridProps> = ({ tags, badgeVariant }) => {
   const remainder = tags.length - columns
 
   return (
-    <div className="flex items-center gap-x-2xsmall w-1/2" ref={containerRef}>
+    <div className="gap-x-2xsmall flex w-1/2 items-center" ref={containerRef}>
       {visibleTags?.map((tag, index) => {
         return (
           <Badge className="mr-2xsmall" key={index} variant={badgeVariant}>
diff --git a/packages/admin-ui/ui/src/components/molecules/tag-input/index.tsx b/packages/admin-ui/ui/src/components/molecules/tag-input/index.tsx
index 43bb9a0856..0334a6a79e 100644
--- a/packages/admin-ui/ui/src/components/molecules/tag-input/index.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/tag-input/index.tsx
@@ -175,19 +175,20 @@ const TagInput: React.FC<TagInputProps> = ({
       >
         <div
           className={clsx(
-            "h-auto min-h-[40px] bg-grey-5 shadow-border focus-within:outline-4 focus-within:outline focus-within:outline-violet-60/10 transition-colors focus-within:shadow-focus-border rounded-rounded flex items-center px-3 box-border",
+            "bg-grey-5 shadow-border focus-within:outline-violet-60/10 focus-within:shadow-focus-border rounded-rounded box-border flex h-auto min-h-[40px] items-center px-3 transition-colors focus-within:outline focus-within:outline-4",
             {
-              "shadow-error-border focus-within:shadow-error-border focus-within:outline-rose-60/10": invalid,
+              "shadow-error-border focus-within:shadow-error-border focus-within:outline-rose-60/10":
+                invalid,
             }
           )}
         >
           <div className="h-full">
-            <div className="w-full gap-xsmall flex flex-wrap box-border h-28px py-1.5">
+            <div className="gap-xsmall h-28px box-border flex w-full flex-wrap py-1.5">
               {values.map((v, index) => (
                 <div
                   key={index}
                   className={clsx(
-                    "flex items-center justify-center whitespace-nowrap w-max bg-grey-20 rounded-rounded px-3 py-1 gap-x-1",
+                    "bg-grey-20 rounded-rounded flex w-max items-center justify-center gap-x-1 whitespace-nowrap px-3 py-1",
                     {
                       ["!bg-grey-90"]: index === highlighted,
                     }
@@ -195,7 +196,7 @@ const TagInput: React.FC<TagInputProps> = ({
                 >
                   <span
                     className={clsx(
-                      "inline-block text-grey-50 inter-small-semibold",
+                      "text-grey-50 inter-small-semibold inline-block",
                       {
                         ["text-grey-20"]: index === highlighted,
                       }
@@ -204,7 +205,7 @@ const TagInput: React.FC<TagInputProps> = ({
                     {v}
                   </span>
                   <CrossIcon
-                    className="inline cursor-pointer text-grey-40"
+                    className="text-grey-40 inline cursor-pointer"
                     size="16"
                     onClick={() => handleRemove(index)}
                   />
@@ -216,7 +217,7 @@ const TagInput: React.FC<TagInputProps> = ({
                 onBlur={handleBlur}
                 onKeyDown={handleKeyDown}
                 onChange={handleInput}
-                className={clsx("focus:outline-none bg-transparent flex-1")}
+                className={clsx("flex-1 bg-transparent focus:outline-none")}
                 placeholder={values?.length ? "" : placeholder} // only visible if no tags exist
                 {...props}
               />
diff --git a/packages/admin-ui/ui/src/components/molecules/textarea/index.tsx b/packages/admin-ui/ui/src/components/molecules/textarea/index.tsx
index 89007e679a..7d1c51e86b 100644
--- a/packages/admin-ui/ui/src/components/molecules/textarea/index.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/textarea/index.tsx
@@ -75,17 +75,17 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
         )}
         <div
           className={clsx(
-            "w-full flex flex-col focus-within:shadow-input focus-within:border-violet-60 px-small py-xsmall bg-grey-5 border border-grey-20 rounded-rounded",
+            "focus-within:shadow-input focus-within:border-violet-60 px-small py-xsmall bg-grey-5 border-grey-20 rounded-rounded flex w-full flex-col border",
             {
-              "border-rose-50 focus-within:shadow-cta focus-within:shadow-rose-60/10 focus-within:border-rose-50":
+              "focus-within:shadow-cta focus-within:shadow-rose-60/10 border-rose-50 focus-within:border-rose-50":
                 errors && name && errors[name],
             }
           )}
         >
           <textarea
             className={clsx(
-              "relative text-justify overflow-hidden focus:overflow-auto resize-none bg-inherit outline-none outline-0",
-              "w-full remove-number-spinner leading-base text-grey-90 font-normal caret-violet-60 placeholder-grey-40",
+              "relative resize-none overflow-hidden bg-inherit text-justify outline-none outline-0 focus:overflow-auto",
+              "remove-number-spinner leading-base text-grey-90 caret-violet-60 placeholder-grey-40 w-full font-normal",
               "line-clamp-[var(--lines)] focus:line-clamp-none"
             )}
             style={
diff --git a/packages/admin-ui/ui/src/components/molecules/timeline-events/event-actionables.tsx b/packages/admin-ui/ui/src/components/molecules/timeline-events/event-actionables.tsx
index b03119ff93..838f836b54 100644
--- a/packages/admin-ui/ui/src/components/molecules/timeline-events/event-actionables.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/timeline-events/event-actionables.tsx
@@ -8,7 +8,7 @@ type EventActionablesProps = {
 
 const EventActionables: React.FC<EventActionablesProps> = ({ actions }) => {
   const EventTrigger = (
-    <button className="btn-ghost py-0 px-2xsmall flex justify-center items-center focus:outline-none focus:ring-2 rounded-base focus:ring-violet-40">
+    <button className="btn-ghost px-2xsmall rounded-base focus:ring-violet-40 flex items-center justify-center py-0 focus:outline-none focus:ring-2">
       <MoreHorizontalIcon size={20} />
     </button>
   )
diff --git a/packages/admin-ui/ui/src/components/molecules/timeline-events/event-container.tsx b/packages/admin-ui/ui/src/components/molecules/timeline-events/event-container.tsx
index e8e5676893..d56a82d167 100644
--- a/packages/admin-ui/ui/src/components/molecules/timeline-events/event-container.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/timeline-events/event-container.tsx
@@ -48,12 +48,12 @@ const EventContainer: React.FC<EventContainerProps> = ({
   return (
     <div className="mb-base">
       <div className="flex items-center justify-between">
-        <div className="flex items-center gap-x-xsmall">
+        <div className="gap-x-xsmall flex items-center">
           <div className={clsx("h-5 w-5", iconColor)}>{icon}</div>
           <div className="inter-small-semibold">{title}</div>
           <div className="inter-small-regular text-grey-50"></div>
         </div>
-        <div className="flex items-center gap-x-xsmall">
+        <div className="gap-x-xsmall flex items-center">
           {noNotification && (
             <Tooltip content="Notifications related to this event are disabled">
               <BellOffIcon size={20} className="text-grey-40" />
@@ -71,8 +71,8 @@ const EventContainer: React.FC<EventContainerProps> = ({
           )}
         </div>
       </div>
-      <div className="flex gap-x-xsmall">
-        <div className="flex w-5 justify-center pt-base">
+      <div className="gap-x-xsmall flex">
+        <div className="pt-base flex w-5 justify-center">
           {!isFirst && <div className="min-h-[24px] w-px" />}
         </div>
         <div className="inter-small-regular mt-2xsmall w-full">
@@ -90,7 +90,7 @@ const EventContainer: React.FC<EventContainerProps> = ({
             {midNode}
           </div>
           {children && isExpanded && (
-            <div className="mt-small w-full pb-base">{children}</div>
+            <div className="mt-small pb-base w-full">{children}</div>
           )}
         </div>
       </div>
diff --git a/packages/admin-ui/ui/src/components/molecules/timeline-events/event-item-container.tsx b/packages/admin-ui/ui/src/components/molecules/timeline-events/event-item-container.tsx
index f4506c010a..840597a93d 100644
--- a/packages/admin-ui/ui/src/components/molecules/timeline-events/event-item-container.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/timeline-events/event-item-container.tsx
@@ -16,9 +16,9 @@ const EventItemContainer: React.FC<EventItemContainerProps> = ({ item }) => {
     return null
   }
   return (
-    <div className="flex items-center gap-x-small mb-base last:mb-0">
+    <div className="gap-x-small mb-base flex items-center last:mb-0">
       {item.thumbnail && (
-        <div className="h-10 w-[30px] rounded-base overflow-hidden">
+        <div className="rounded-base h-10 w-[30px] overflow-hidden">
           <img
             src={item.thumbnail}
             alt={`Thumbnail for ${item.title}`}
@@ -26,8 +26,8 @@ const EventItemContainer: React.FC<EventItemContainerProps> = ({ item }) => {
           />
         </div>
       )}
-      <div className="flex flex-col inter-small-regular w-full">
-        <div className="flex items-center justify-between w-full">
+      <div className="inter-small-regular flex w-full flex-col">
+        <div className="flex w-full items-center justify-between">
           <p>{item.title}</p>
           <span className="inter-small-semibold text-violet-60">{`x${item.quantity}`}</span>
         </div>
diff --git a/packages/admin-ui/ui/src/components/molecules/timeline-events/note.tsx b/packages/admin-ui/ui/src/components/molecules/timeline-events/note.tsx
index 0f6aa10792..9f380aebaa 100644
--- a/packages/admin-ui/ui/src/components/molecules/timeline-events/note.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/timeline-events/note.tsx
@@ -49,7 +49,7 @@ const Note: React.FC<NoteProps> = ({ event }) => {
         isFirst={event.first}
       >
         <div
-          className={clsx("rounded-2xl px-base py-base", {
+          className={clsx("px-base py-base rounded-2xl", {
             "bg-grey-5": !isMe,
             "bg-violet-5 text-violet-90": isMe,
           })}
diff --git a/packages/admin-ui/ui/src/components/molecules/timeline-events/notification/resend-modal.tsx b/packages/admin-ui/ui/src/components/molecules/timeline-events/notification/resend-modal.tsx
index e29fcbcd31..a6544517d7 100644
--- a/packages/admin-ui/ui/src/components/molecules/timeline-events/notification/resend-modal.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/timeline-events/notification/resend-modal.tsx
@@ -67,11 +67,11 @@ const ResendModal: React.FC<ResendModalProps> = ({
             </div>
           </Modal.Content>
           <Modal.Footer>
-            <div className="flex w-full h-8 justify-end">
+            <div className="flex h-8 w-full justify-end">
               <div className="flex">
                 <Button
                   variant="ghost"
-                  className="mr-2 w-32 text-small justify-center"
+                  className="text-small mr-2 w-32 justify-center"
                   size="large"
                   onClick={handleCancel}
                 >
@@ -79,7 +79,7 @@ const ResendModal: React.FC<ResendModalProps> = ({
                 </Button>
                 <Button
                   size="large"
-                  className="w-32 text-small justify-center"
+                  className="text-small w-32 justify-center"
                   variant="primary"
                   type="submit"
                   disabled={isLoading}
diff --git a/packages/admin-ui/ui/src/components/molecules/timeline-events/order-edit/created.tsx b/packages/admin-ui/ui/src/components/molecules/timeline-events/order-edit/created.tsx
index ec0955db63..620e791c6d 100644
--- a/packages/admin-ui/ui/src/components/molecules/timeline-events/order-edit/created.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/timeline-events/order-edit/created.tsx
@@ -45,9 +45,8 @@ const getInfo = (edit: OrderEdit): { type: string; user_id: string } => {
 }
 
 const EditCreated: React.FC<EditCreatedProps> = ({ event }) => {
-  const { isModalVisible, showModal, setActiveOrderEdit } = useContext(
-    OrderEditContext
-  )
+  const { isModalVisible, showModal, setActiveOrderEdit } =
+    useContext(OrderEditContext)
 
   const { order_edit: orderEdit, isFetching } = useAdminOrderEdit(event.edit.id)
 
@@ -90,8 +89,7 @@ const EditCreated: React.FC<EditCreatedProps> = ({ event }) => {
   const onConfirmEditClicked = async () => {
     const shouldDelete = await forceConfirmDialog({
       heading: "Delete Confirm",
-      text:
-        "By force confirming you allow the order edit to be fulfilled. You will still have to reconcile payments manually after confirming.",
+      text: "By force confirming you allow the order edit to be fulfilled. You will still have to reconcile payments manually after confirming.",
       confirmText: "Yes, Force Confirm",
       cancelText: "No, Cancel",
     })
@@ -149,7 +147,7 @@ const EditCreated: React.FC<EditCreatedProps> = ({ event }) => {
             {type === "created" ? (
               <>
                 <Button
-                  className="w-full border border-grey-20"
+                  className="border-grey-20 w-full border"
                   size="small"
                   variant="ghost"
                   onClick={onContinueEdit}
@@ -158,7 +156,7 @@ const EditCreated: React.FC<EditCreatedProps> = ({ event }) => {
                 </Button>
                 <TwoStepDelete
                   onDelete={onDeleteOrderEditClicked}
-                  className="w-full border border-grey-20"
+                  className="border-grey-20 w-full border"
                 >
                   Delete the order edit
                 </TwoStepDelete>
@@ -166,7 +164,7 @@ const EditCreated: React.FC<EditCreatedProps> = ({ event }) => {
             ) : (
               <>
                 <Button
-                  className="w-full border border-grey-20"
+                  className="border-grey-20 w-full border"
                   size="small"
                   variant="ghost"
                   onClick={onCopyConfirmationLinkClicked}
@@ -174,7 +172,7 @@ const EditCreated: React.FC<EditCreatedProps> = ({ event }) => {
                   Copy Confirmation-Request Link
                 </Button>
                 <Button
-                  className="w-full border border-grey-20"
+                  className="border-grey-20 w-full border"
                   size="small"
                   variant="ghost"
                   onClick={onConfirmEditClicked}
@@ -184,7 +182,7 @@ const EditCreated: React.FC<EditCreatedProps> = ({ event }) => {
 
                 <TwoStepDelete
                   onDelete={onCancelOrderEditClicked}
-                  className="w-full border border-grey-20"
+                  className="border-grey-20 w-full border"
                 >
                   Cancel Order Edit
                 </TwoStepDelete>
@@ -220,7 +218,7 @@ const OrderEditChanges = ({ orderEdit }) => {
   )
 
   return (
-    <div className="flex flex-col gap-y-base">
+    <div className="gap-y-base flex flex-col">
       {added.length > 0 && (
         <div>
           <span className="inter-small-regular text-grey-50">Added</span>
@@ -264,9 +262,9 @@ const OrderEditChangeItem: React.FC<OrderEditChangeItemProps> = ({
   const lineItem = isAdd ? change.line_item : change.original_line_item
 
   return (
-    <div className="flex gap-x-base mt-xsmall">
+    <div className="gap-x-base mt-xsmall flex">
       <div>
-        <div className="flex h-[40px] w-[30px] rounded-rounded overflow-hidden">
+        <div className="rounded-rounded flex h-[40px] w-[30px] overflow-hidden">
           {lineItem?.thumbnail ? (
             <img src={lineItem.thumbnail} className="object-cover" />
           ) : (
@@ -281,7 +279,7 @@ const OrderEditChangeItem: React.FC<OrderEditChangeItemProps> = ({
             <CopyToClipboard value={lineItem?.variant?.sku} iconSize={14} />
           )}
         </span>
-        <span className="flex inter-small-regular text-grey-50">
+        <span className="inter-small-regular text-grey-50 flex">
           {lineItem?.variant?.options?.map((option) => option.value)}
         </span>
       </div>
diff --git a/packages/admin-ui/ui/src/components/molecules/timeline-events/order-edit/index.tsx b/packages/admin-ui/ui/src/components/molecules/timeline-events/order-edit/index.tsx
index 4ac46e8c3a..e755d8ef23 100644
--- a/packages/admin-ui/ui/src/components/molecules/timeline-events/order-edit/index.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/timeline-events/order-edit/index.tsx
@@ -16,7 +16,7 @@ export const ByLine: React.FC<ByLineProps> = ({ user }) => {
     !first_name && !last_name ? email : `${first_name || ""} ${last_name || ""}`
 
   return (
-    <div className="flex inter-small-regular items-center text-grey-50">
+    <div className="inter-small-regular text-grey-50 flex items-center">
       By
       <span className="w-base h-base mx-xsmall">
         <Avatar user={user} font="inter-xsmall-semibold" />
diff --git a/packages/admin-ui/ui/src/components/molecules/timeline-events/order-edit/payment-required.tsx b/packages/admin-ui/ui/src/components/molecules/timeline-events/order-edit/payment-required.tsx
index ba2171cfab..67130e0076 100644
--- a/packages/admin-ui/ui/src/components/molecules/timeline-events/order-edit/payment-required.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/timeline-events/order-edit/payment-required.tsx
@@ -59,7 +59,7 @@ const PaymentRequired: React.FC<RequestedProps> = ({ event }) => {
     >
       <Button
         size="small"
-        className="w-full border border-grey-20 mb-xsmall"
+        className="border-grey-20 mb-xsmall w-full border"
         variant="ghost"
         onClick={onCopyPaymentLinkClicked}
       >
@@ -67,7 +67,7 @@ const PaymentRequired: React.FC<RequestedProps> = ({ event }) => {
       </Button>
       <Button
         size="small"
-        className="w-full border border-grey-20"
+        className="border-grey-20 w-full border"
         variant="ghost"
         onClick={onMarkAsPaidClicked}
       >
diff --git a/packages/admin-ui/ui/src/components/molecules/timeline-events/order-edit/refund-required.tsx b/packages/admin-ui/ui/src/components/molecules/timeline-events/order-edit/refund-required.tsx
index 4251034652..409cd3f8c4 100644
--- a/packages/admin-ui/ui/src/components/molecules/timeline-events/order-edit/refund-required.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/timeline-events/order-edit/refund-required.tsx
@@ -49,7 +49,7 @@ const RefundRequired: React.FC<RequestedProps> = ({ event }) => {
           onClick={() => setShowRefundModal(true)}
           variant="ghost"
           size="small"
-          className="w-full border border-grey-20 mb-xsmall text-rose-50"
+          className="border-grey-20 mb-xsmall w-full border text-rose-50"
         >
           Refund
           {formatAmountWithSymbol({
diff --git a/packages/admin-ui/ui/src/components/molecules/timeline-events/order-edit/requested.tsx b/packages/admin-ui/ui/src/components/molecules/timeline-events/order-edit/requested.tsx
index 56dfe93419..0a958bb604 100644
--- a/packages/admin-ui/ui/src/components/molecules/timeline-events/order-edit/requested.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/timeline-events/order-edit/requested.tsx
@@ -40,7 +40,7 @@ const EditRequested: React.FC<RequestedProps> = ({ event }) => {
         }
       >
         <Button
-          className="w-full border border-grey-20 mb-5"
+          className="border-grey-20 mb-5 w-full border"
           size="small"
           variant="ghost"
           onClick={() => setShowResend(true)}
diff --git a/packages/admin-ui/ui/src/components/molecules/timeline-events/order-placed.tsx b/packages/admin-ui/ui/src/components/molecules/timeline-events/order-placed.tsx
index 6a834df1d2..7f5a934b95 100644
--- a/packages/admin-ui/ui/src/components/molecules/timeline-events/order-placed.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/timeline-events/order-placed.tsx
@@ -2,7 +2,7 @@ import React from "react"
 import { OrderPlacedEvent } from "../../../hooks/use-build-timeline"
 import { formatAmountWithSymbol } from "../../../utils/prices"
 import CheckCircleIcon from "../../fundamentals/icons/check-circle-icon"
-import EventContainer, { EventIconColor } from "./event-container"
+import EventContainer from "./event-container"
 
 type OrderPlacedProps = {
   event: OrderPlacedEvent
diff --git a/packages/admin-ui/ui/src/components/molecules/timeline-events/refund.tsx b/packages/admin-ui/ui/src/components/molecules/timeline-events/refund.tsx
index 2660644b18..06902a3d36 100644
--- a/packages/admin-ui/ui/src/components/molecules/timeline-events/refund.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/timeline-events/refund.tsx
@@ -22,14 +22,14 @@ const Refund: React.FC<RefundEventProps> = ({ event }) => {
       </span>
     ),
     children: (
-      <div className="flex w-full flex-col gap-y-xsmall">
+      <div className="gap-y-xsmall flex w-full flex-col">
         {event.reason && (
           <span className="text-grey-50">{`${event.reason
             .slice(0, 1)
             .toUpperCase()}${event.reason.slice(1)}`}</span>
         )}
         {event.note && (
-          <div className="rounded-2xl bg-grey-5 px-base py-base">
+          <div className="bg-grey-5 px-base py-base rounded-2xl">
             Note: {event.note}
           </div>
         )}
diff --git a/packages/admin-ui/ui/src/components/molecules/user-menu/index.tsx b/packages/admin-ui/ui/src/components/molecules/user-menu/index.tsx
index 412812aa6b..891dd33789 100644
--- a/packages/admin-ui/ui/src/components/molecules/user-menu/index.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/user-menu/index.tsx
@@ -42,7 +42,7 @@ const UserMenu: React.FC = () => {
         <DropdownMenu.Content
           sideOffset={12}
           side="bottom"
-          className="z-30 ml-large min-w-[200px] rounded-rounded border border-grey-20 bg-grey-0 p-xsmall shadow-dropdown"
+          className="ml-large rounded-rounded border-grey-20 bg-grey-0 p-xsmall shadow-dropdown z-30 min-w-[200px] border"
         >
           <DropdownMenu.Item className="mb-1 outline-none">
             <Button
diff --git a/packages/admin-ui/ui/src/components/organisms/add-denomination-modal/index.tsx b/packages/admin-ui/ui/src/components/organisms/add-denomination-modal/index.tsx
index 90dda38f9d..fb8000f6a5 100644
--- a/packages/admin-ui/ui/src/components/organisms/add-denomination-modal/index.tsx
+++ b/packages/admin-ui/ui/src/components/organisms/add-denomination-modal/index.tsx
@@ -41,23 +41,19 @@ const AddDenominationModal: React.FC<AddDenominationModalProps> = ({
   // passed to useValuesFieldArray so new prices are intialized with the currenct default price
   const defaultValue = watch("default_price", 10000)
 
-  const {
-    fields,
-    appendPrice,
-    deletePrice,
-    availableCurrencies,
-  } = useValuesFieldArray(
-    currencyCodes,
-    {
-      control,
-      name: "prices",
-      keyName: "indexId",
-    },
-    {
-      defaultAmount: defaultValue,
-      defaultCurrencyCode: storeCurrency,
-    }
-  )
+  const { fields, appendPrice, deletePrice, availableCurrencies } =
+    useValuesFieldArray(
+      currencyCodes,
+      {
+        control,
+        name: "prices",
+        keyName: "indexId",
+      },
+      {
+        defaultAmount: defaultValue,
+        defaultCurrencyCode: storeCurrency,
+      }
+    )
 
   const onSubmit = async (data: any) => {
     const prices = [
@@ -118,8 +114,8 @@ const AddDenominationModal: React.FC<AddDenominationModalProps> = ({
             <span className="inter-xlarge-semibold">Add Denomination</span>
           </Modal.Header>
           <Modal.Content>
-            <div className="flex-1 mb-xlarge">
-              <div className="flex gap-x-2 mb-base">
+            <div className="mb-xlarge flex-1">
+              <div className="mb-base flex gap-x-2">
                 <h3 className="inter-base-semibold">Default Value</h3>
                 <IconTooltip content="This is the denomination in your store's default currency" />
               </div>
@@ -149,16 +145,16 @@ const AddDenominationModal: React.FC<AddDenominationModalProps> = ({
               />
             </div>
             <div>
-              <div className="flex gap-x-2 mb-base">
+              <div className="mb-base flex gap-x-2">
                 <h3 className="inter-base-semibold">Other Values</h3>
                 <IconTooltip content="Here you can add values in other currencies" />
               </div>
-              <div className="flex flex-col gap-y-xsmall">
+              <div className="gap-y-xsmall flex flex-col">
                 {fields.map((field, index) => {
                   return (
                     <div
                       key={field.indexId}
-                      className="last:mb-0 mb-xsmall flex items-end"
+                      className="mb-xsmall flex items-end last:mb-0"
                     >
                       <div className="flex-1">
                         <Controller
@@ -208,7 +204,7 @@ const AddDenominationModal: React.FC<AddDenominationModalProps> = ({
                       <Button
                         variant="ghost"
                         size="small"
-                        className="ml-large w-10 h-10"
+                        className="ml-large h-10 w-10"
                         type="button"
                       >
                         <TrashIcon
@@ -236,7 +232,7 @@ const AddDenominationModal: React.FC<AddDenominationModalProps> = ({
             </div>
           </Modal.Content>
           <Modal.Footer>
-            <div className="w-full flex justify-end">
+            <div className="flex w-full justify-end">
               <Button
                 variant="ghost"
                 size="small"
diff --git a/packages/admin-ui/ui/src/components/organisms/analytics-config-form/index.tsx b/packages/admin-ui/ui/src/components/organisms/analytics-config-form/index.tsx
index c609ed60d0..307ffa5903 100644
--- a/packages/admin-ui/ui/src/components/organisms/analytics-config-form/index.tsx
+++ b/packages/admin-ui/ui/src/components/organisms/analytics-config-form/index.tsx
@@ -1,5 +1,5 @@
 import clsx from "clsx"
-import React, { useEffect } from "react"
+import { useEffect } from "react"
 import { Controller, useWatch } from "react-hook-form"
 import { NestedForm } from "../../../utils/nested-form"
 import Switch from "../../atoms/switch"
@@ -29,13 +29,13 @@ const AnalyticsConfigForm = ({ form }: Props) => {
   }, [watchOptOut])
 
   return (
-    <div className="flex flex-col gap-y-xlarge">
+    <div className="gap-y-xlarge flex flex-col">
       <div
         className={clsx("flex items-start transition-opacity", {
           "opacity-50": watchOptOut,
         })}
       >
-        <div className="flex flex-col flex-1 gap-y-2xsmall">
+        <div className="gap-y-2xsmall flex flex-1 flex-col">
           <h2 className="inter-base-semibold">Anonymize my usage data</h2>
           <p className="inter-base-regular text-grey-50">
             You can choose to anonymize your usage data. If this option is
@@ -58,7 +58,7 @@ const AnalyticsConfigForm = ({ form }: Props) => {
         />
       </div>
       <div className="flex items-start">
-        <div className="flex flex-col flex-1 gap-y-2xsmall">
+        <div className="gap-y-2xsmall flex flex-1 flex-col">
           <h2 className="inter-base-semibold">
             Opt out of sharing my usage data
           </h2>
diff --git a/packages/admin-ui/ui/src/components/organisms/batch-jobs-activity-list/index.tsx b/packages/admin-ui/ui/src/components/organisms/batch-jobs-activity-list/index.tsx
index a28b34ed3a..2643d91298 100644
--- a/packages/admin-ui/ui/src/components/organisms/batch-jobs-activity-list/index.tsx
+++ b/packages/admin-ui/ui/src/components/organisms/batch-jobs-activity-list/index.tsx
@@ -7,7 +7,7 @@ import {
   useAdminDeleteFile,
   useAdminStore,
 } from "medusa-react"
-import React, { useEffect, useMemo, useRef, useState } from "react"
+import { useEffect, useMemo, useRef, useState } from "react"
 import useNotification from "../../../hooks/use-notification"
 import { bytesConverter } from "../../../utils/bytes-converter"
 import { getErrorMessage } from "../../../utils/error-messages"
@@ -67,14 +67,11 @@ const BatchJobActivityCard = (props: { batchJob: BatchJob }) => {
 
   const batchJob = useBatchJob(props.batchJob)
 
-  const {
-    mutate: cancelBatchJob,
-    error: cancelBatchJobError,
-  } = useAdminCancelBatchJob(batchJob.id)
+  const { mutate: cancelBatchJob, error: cancelBatchJobError } =
+    useAdminCancelBatchJob(batchJob.id)
   const { mutateAsync: deleteFile } = useAdminDeleteFile()
-  const {
-    mutateAsync: createPresignedUrl,
-  } = useAdminCreatePresignedDownloadUrl()
+  const { mutateAsync: createPresignedUrl } =
+    useAdminCreatePresignedDownloadUrl()
 
   const fileName = batchJob.result?.file_key ?? `${batchJob.type}.csv`
   const relativeTimeElapsed = getRelativeTime({
@@ -203,7 +200,7 @@ const BatchJobActivityCard = (props: { batchJob: BatchJob }) => {
         <Button
           onClick={onClick}
           size={"small"}
-          className={clsx("flex justify-start inter-small-regular", className)}
+          className={clsx("inter-small-regular flex justify-start", className)}
           variant={variant}
         >
           {text}
@@ -212,7 +209,7 @@ const BatchJobActivityCard = (props: { batchJob: BatchJob }) => {
     }
     return (
       (canDownload || canCancel) && (
-        <div className="flex mt-6">
+        <div className="mt-6 flex">
           {canDownload && (
             <div className="flex">
               {buildButton(onDeleteFile, "danger", "Delete")}
@@ -233,7 +230,7 @@ const BatchJobActivityCard = (props: { batchJob: BatchJob }) => {
       date={batchJob.created_at}
       shouldShowStatus={true}
     >
-      <div ref={activityCardRef} className="flex flex-col inter-small-regular">
+      <div ref={activityCardRef} className="inter-small-regular flex flex-col">
         <span>{batchJobActivityDescription}</span>
 
         {getBatchJobFileCard()}
diff --git a/packages/admin-ui/ui/src/components/organisms/confirmation-prompt.tsx b/packages/admin-ui/ui/src/components/organisms/confirmation-prompt.tsx
index 9deafd93e7..6885ad196c 100644
--- a/packages/admin-ui/ui/src/components/organisms/confirmation-prompt.tsx
+++ b/packages/admin-ui/ui/src/components/organisms/confirmation-prompt.tsx
@@ -38,14 +38,14 @@ const ConfirmationPrompt: React.FC<ConfirmationPromptProps> = ({
         <Modal.Content>
           <div className="flex flex-col">
             <span className="inter-large-semibold">{heading}</span>
-            <span className="inter-base-regular mt-1 text-grey-50">{text}</span>
+            <span className="inter-base-regular text-grey-50 mt-1">{text}</span>
           </div>
         </Modal.Content>
         <Modal.Footer>
-          <div className="flex w-full h-8 justify-end">
+          <div className="flex h-8 w-full justify-end">
             <Button
               variant="ghost"
-              className="mr-2 w-24 text-small justify-center"
+              className="text-small mr-2 w-24 justify-center"
               size="small"
               onClick={handleClose}
             >
@@ -54,7 +54,7 @@ const ConfirmationPrompt: React.FC<ConfirmationPromptProps> = ({
             <Button
               loading={isLoading}
               size="small"
-              className="w-24 text-small justify-center"
+              className="text-small w-24 justify-center"
               variant="primary"
               onClick={handleSubmit}
               disabled={isLoading}
diff --git a/packages/admin-ui/ui/src/components/organisms/currency-input/index.tsx b/packages/admin-ui/ui/src/components/organisms/currency-input/index.tsx
index 41a84c974e..d0a25baca7 100644
--- a/packages/admin-ui/ui/src/components/organisms/currency-input/index.tsx
+++ b/packages/admin-ui/ui/src/components/organisms/currency-input/index.tsx
@@ -82,9 +82,9 @@ const Root: React.FC<CurrencyInputProps> = ({
   const [value, setValue] = useState<Option | null>(
     currentCurrency
       ? {
-        label: currentCurrency.toUpperCase(),
-        value: currentCurrency,
-      }
+          label: currentCurrency.toUpperCase(),
+          value: currentCurrency,
+        }
       : null
   )
 
@@ -120,7 +120,7 @@ const Root: React.FC<CurrencyInputProps> = ({
         currencyInfo: selectedCurrency,
       }}
     >
-      <div className={clsx("flex items-center gap-x-xsmall", className)}>
+      <div className={clsx("gap-x-xsmall flex items-center", className)}>
         {!hideCurrency && (
           <div
             className={clsx(
@@ -239,9 +239,9 @@ const Amount = forwardRef<HTMLInputElement, AmountInputProps>(
         <InputHeader label={label} required={required} className="mb-xsmall" />
         <div
           className={clsx(
-            "w-full flex items-center bg-grey-5 border border-gray-20 px-small py-xsmall rounded-rounded h-10 focus-within:shadow-input focus-within:border-violet-60",
+            "bg-grey-5 border-gray-20 px-small py-xsmall rounded-rounded focus-within:shadow-input focus-within:border-violet-60 flex h-10 w-full items-center border",
             {
-              "border-rose-50 focus-within:shadow-cta focus-within:shadow-rose-60/10 focus-within:border-rose-50":
+              "focus-within:shadow-cta focus-within:shadow-rose-60/10 border-rose-50 focus-within:border-rose-50":
                 errors && name && errors[name],
             }
           )}
@@ -258,7 +258,7 @@ const Amount = forwardRef<HTMLInputElement, AmountInputProps>(
             </Tooltip>
           )}
           <AmountField
-            className="bg-transparent outline-none outline-0 w-full remove-number-spinner leading-base text-grey-90 font-normal caret-violet-60 placeholder-grey-40"
+            className="remove-number-spinner leading-base text-grey-90 caret-violet-60 placeholder-grey-40 w-full bg-transparent font-normal outline-none outline-0"
             decimalScale={currencyInfo?.decimal_digits}
             value={formattedValue}
             onValueChange={(value, _name, values) =>
@@ -272,7 +272,7 @@ const Amount = forwardRef<HTMLInputElement, AmountInputProps>(
           />
           <div className="flex items-center">
             <button
-              className="mr-2 text-grey-50 w-4 h-4 hover:bg-grey-10 rounded-soft cursor-pointer"
+              className="text-grey-50 hover:bg-grey-10 rounded-soft mr-2 h-4 w-4 cursor-pointer"
               type="button"
               onClick={() => handleManualValueChange(-step)}
             >
@@ -280,7 +280,7 @@ const Amount = forwardRef<HTMLInputElement, AmountInputProps>(
             </button>
             <button
               type="button"
-              className="text-grey-50 w-4 h-4 hover:bg-grey-10 rounded-soft cursor-pointer"
+              className="text-grey-50 hover:bg-grey-10 rounded-soft h-4 w-4 cursor-pointer"
               onClick={() => handleManualValueChange(step)}
             >
               <PlusIcon size={16} />
diff --git a/packages/admin-ui/ui/src/components/organisms/edit-denominations-modal/index.tsx b/packages/admin-ui/ui/src/components/organisms/edit-denominations-modal/index.tsx
index f5eb3f4605..72577fc8a0 100644
--- a/packages/admin-ui/ui/src/components/organisms/edit-denominations-modal/index.tsx
+++ b/packages/admin-ui/ui/src/components/organisms/edit-denominations-modal/index.tsx
@@ -101,7 +101,7 @@ const EditDenominationsModal = ({
               return (
                 <div
                   key={field.indexId}
-                  className="first:mt-0 mt-xsmall flex items-center"
+                  className="mt-xsmall flex items-center first:mt-0"
                 >
                   <div className="flex-1">
                     <CurrencyInput.Root
@@ -142,7 +142,7 @@ const EditDenominationsModal = ({
           </div>
         </Modal.Content>
         <Modal.Footer>
-          <div className="w-full flex justify-end">
+          <div className="flex w-full justify-end">
             <Button
               variant="ghost"
               size="small"
diff --git a/packages/admin-ui/ui/src/components/organisms/edit-user-modal/index.tsx b/packages/admin-ui/ui/src/components/organisms/edit-user-modal/index.tsx
index a9d71639c9..fd10bb6298 100644
--- a/packages/admin-ui/ui/src/components/organisms/edit-user-modal/index.tsx
+++ b/packages/admin-ui/ui/src/components/organisms/edit-user-modal/index.tsx
@@ -61,7 +61,7 @@ const EditUserModal: React.FC<EditUserModalProps> = ({
             <span className="inter-xlarge-semibold">Edit User</span>
           </Modal.Header>
           <Modal.Content>
-            <div className="w-full grid grid-cols-2 gap-large mb-base">
+            <div className="gap-large mb-base grid w-full grid-cols-2">
               <InputField
                 label="First Name"
                 placeholder="First name..."
@@ -88,7 +88,7 @@ const EditUserModal: React.FC<EditUserModalProps> = ({
             <InputField label="Email" disabled value={user.email} />
           </Modal.Content>
           <Modal.Footer>
-            <div className="w-full flex justify-end">
+            <div className="flex w-full justify-end">
               <Button
                 variant="ghost"
                 size="small"
diff --git a/packages/admin-ui/ui/src/components/organisms/error-boundary/index.tsx b/packages/admin-ui/ui/src/components/organisms/error-boundary/index.tsx
index 5981636eae..2c5bf5061b 100644
--- a/packages/admin-ui/ui/src/components/organisms/error-boundary/index.tsx
+++ b/packages/admin-ui/ui/src/components/organisms/error-boundary/index.tsx
@@ -1,5 +1,4 @@
 import { AxiosError } from "axios"
-import { useNavigate } from "react-router-dom"
 import React, { ErrorInfo } from "react"
 import { analytics, getAnalyticsConfig } from "../../../services/analytics"
 import Button from "../../fundamentals/button"
@@ -52,12 +51,12 @@ class ErrorBoundary extends React.Component<Props, State> {
   public render() {
     if (this.state.hasError) {
       return (
-        <div className="h-screen flex items-center justify-center px-large">
+        <div className="px-large flex h-screen items-center justify-center">
           <div className="max-w-[600px]">
             <div>
               <div>
                 {this.state.status && (
-                  <p className="text-grey-60 opacity-75 inter-small-semibold">
+                  <p className="text-grey-60 inter-small-semibold opacity-75">
                     {this.state.status}
                   </p>
                 )}
@@ -69,7 +68,7 @@ class ErrorBoundary extends React.Component<Props, State> {
                 </p>
               </div>
 
-              <div className="w-full flex items-center  mt-xlarge">
+              <div className="mt-xlarge flex w-full  items-center">
                 <Button
                   size="small"
                   variant="primary"
diff --git a/packages/admin-ui/ui/src/components/organisms/export-modal/index.tsx b/packages/admin-ui/ui/src/components/organisms/export-modal/index.tsx
index 57bc16de8b..e4e1b82751 100644
--- a/packages/admin-ui/ui/src/components/organisms/export-modal/index.tsx
+++ b/packages/admin-ui/ui/src/components/organisms/export-modal/index.tsx
@@ -29,12 +29,12 @@ const ExportModal: React.FC<ExportModalProps> = ({
             feature in many ways are controlled by how you filter the list
             overview.
           </div> */}
-          <div className="flex mb-4 inter-small-regular text-grey-50">
+          <div className="inter-small-regular text-grey-50 mb-4 flex">
             Initialize an export of your data
           </div>
         </Modal.Content>
         <Modal.Footer>
-          <div className="w-full flex justify-end">
+          <div className="flex w-full justify-end">
             <Button
               variant="ghost"
               size="small"
diff --git a/packages/admin-ui/ui/src/components/organisms/file-upload-modal/index.tsx b/packages/admin-ui/ui/src/components/organisms/file-upload-modal/index.tsx
index 89b8a8d8ea..f4e4474f5c 100644
--- a/packages/admin-ui/ui/src/components/organisms/file-upload-modal/index.tsx
+++ b/packages/admin-ui/ui/src/components/organisms/file-upload-modal/index.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useState } from "react"
+import React from "react"
 import FileUploadField from "../../atoms/file-upload-field"
 import Modal from "../../molecules/modal"
 
diff --git a/packages/admin-ui/ui/src/components/organisms/help-dialog/index.tsx b/packages/admin-ui/ui/src/components/organisms/help-dialog/index.tsx
index 1694e739b1..255c19d363 100644
--- a/packages/admin-ui/ui/src/components/organisms/help-dialog/index.tsx
+++ b/packages/admin-ui/ui/src/components/organisms/help-dialog/index.tsx
@@ -26,8 +26,8 @@ const MailDialog = ({ open, onClose }: MailDialogProps) => {
 
   return (
     <Dialog.Root open={open} onOpenChange={onClose}>
-      <Dialog.Overlay className="fixed z-50 grid top-0 left-0 right-0 bottom-0 place-items-end overflow-y-auto">
-        <Dialog.Content className="bg-grey-0 w-[400px] shadow-dropdown rounded-rounded p-8 top-[64px] bottom-2 right-3 fixed flex flex-col justify-between">
+      <Dialog.Overlay className="fixed top-0 left-0 right-0 bottom-0 z-50 grid place-items-end overflow-y-auto">
+        <Dialog.Content className="bg-grey-0 shadow-dropdown rounded-rounded fixed top-[64px] bottom-2 right-3 flex w-[400px] flex-col justify-between p-8">
           <div>
             <Dialog.Title className="inter-xlarge-semibold mb-1">
               How can we help?
@@ -53,14 +53,14 @@ const MailDialog = ({ open, onClose }: MailDialogProps) => {
               enableEmoji
             />
           </div>
-          <div className="flex flex-col items-center gap-y-base">
+          <div className="gap-y-base flex flex-col items-center">
             <a
               href="https://discord.gg/medusajs"
               target="_blank"
               rel="noopener noreferrer"
-              className="group cursor-pointer w-full"
+              className="group w-full cursor-pointer"
             >
-              <div className="flex flex-col items-center justify-center rounded-rounded group-hover:bg-grey-5 w-full py-small">
+              <div className="rounded-rounded group-hover:bg-grey-5 py-small flex w-full flex-col items-center justify-center">
                 <span className="text-grey-40 mb-3">
                   <DiscordIcon size={24} />
                 </span>
diff --git a/packages/admin-ui/ui/src/components/organisms/invite-modal/index.tsx b/packages/admin-ui/ui/src/components/organisms/invite-modal/index.tsx
index 0a5c8eb229..78ffe96acf 100644
--- a/packages/admin-ui/ui/src/components/organisms/invite-modal/index.tsx
+++ b/packages/admin-ui/ui/src/components/organisms/invite-modal/index.tsx
@@ -57,7 +57,7 @@ const InviteModal: React.FC<InviteModalProps> = ({ handleClose }) => {
             <span className="inter-xlarge-semibold">Invite Users</span>
           </Modal.Header>
           <Modal.Content>
-            <div className="flex flex-col gap-y-base">
+            <div className="gap-y-base flex flex-col">
               <InputField
                 label="Email"
                 placeholder="lebron@james.com"
@@ -82,10 +82,10 @@ const InviteModal: React.FC<InviteModalProps> = ({ handleClose }) => {
             </div>
           </Modal.Content>
           <Modal.Footer>
-            <div className="flex w-full h-8 justify-end">
+            <div className="flex h-8 w-full justify-end">
               <Button
                 variant="ghost"
-                className="mr-2 w-32 text-small justify-center"
+                className="text-small mr-2 w-32 justify-center"
                 size="large"
                 type="button"
                 onClick={handleClose}
@@ -96,7 +96,7 @@ const InviteModal: React.FC<InviteModalProps> = ({ handleClose }) => {
                 loading={isLoading}
                 disabled={isLoading}
                 size="large"
-                className="w-32 text-small justify-center"
+                className="text-small w-32 justify-center"
                 variant="primary"
               >
                 Invite
diff --git a/packages/admin-ui/ui/src/components/organisms/login-card/index.tsx b/packages/admin-ui/ui/src/components/organisms/login-card/index.tsx
index de6fb6d6ed..28bc559a37 100644
--- a/packages/admin-ui/ui/src/components/organisms/login-card/index.tsx
+++ b/packages/admin-ui/ui/src/components/organisms/login-card/index.tsx
@@ -34,7 +34,7 @@ const LoginCard: React.FC<LoginCardProps> = ({ toResetPassword }) => {
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
       <div className="flex flex-col items-center">
-        <span className="inter-2xlarge-semibold mt-4 text-grey-90">
+        <span className="inter-2xlarge-semibold text-grey-90 mt-4">
           Welcome back!
         </span>
         <span className="inter-base-regular text-grey-50 mt-2">
@@ -55,12 +55,12 @@ const LoginCard: React.FC<LoginCardProps> = ({ toResetPassword }) => {
           autoComplete="current-password"
         />
         {isInvalidLogin && (
-          <span className="text-rose-50 w-full mt-2 inter-small-regular">
+          <span className="inter-small-regular mt-2 w-full text-rose-50">
             These credentials do not match our records
           </span>
         )}
         <Button
-          className="rounded-rounded mt-4 w-[320px] inter-base-regular"
+          className="rounded-rounded inter-base-regular mt-4 w-[320px]"
           variant="primary"
           size="large"
           type="submit"
diff --git a/packages/admin-ui/ui/src/components/organisms/metadata/index.tsx b/packages/admin-ui/ui/src/components/organisms/metadata/index.tsx
index 1a36bb4a12..61fae2d613 100644
--- a/packages/admin-ui/ui/src/components/organisms/metadata/index.tsx
+++ b/packages/admin-ui/ui/src/components/organisms/metadata/index.tsx
@@ -58,7 +58,7 @@ const Metadata: React.FC<AddMetadataProps> = ({
   return (
     <div>
       <span className="inter-base-semibold">{heading}</span>
-      <div className="flex flex-col mt-base gap-y-base">
+      <div className="mt-base gap-y-base flex flex-col">
         {localData.map((field, index) => {
           return (
             <DeletableElement key={index} onDelete={deleteKeyPair(index)}>
@@ -95,7 +95,7 @@ type FieldProps = {
 
 const Field: React.FC<FieldProps> = ({ field, updateKey, updateValue }) => {
   return (
-    <div className="flex items-center w-full gap-x-xsmall">
+    <div className="gap-x-xsmall flex w-full items-center">
       <div className="maw-w-[200px]">
         <InputField
           label="Key"
@@ -130,12 +130,12 @@ const DeletableElement: React.FC<DeletableElementProps> = ({
   children,
 }) => {
   return (
-    <div className="flex items-end gap-x-xlarge">
+    <div className="gap-x-xlarge flex items-end">
       <div className="flex-grow">{children}</div>
       <Button
         variant="ghost"
         size="small"
-        className="text-grey-40 w-10 h-10"
+        className="text-grey-40 h-10 w-10"
         type="button"
         onClick={onDelete}
       >
diff --git a/packages/admin-ui/ui/src/components/organisms/price-input/index.tsx b/packages/admin-ui/ui/src/components/organisms/price-input/index.tsx
index 03d8d1c7f0..5fa1e58000 100644
--- a/packages/admin-ui/ui/src/components/organisms/price-input/index.tsx
+++ b/packages/admin-ui/ui/src/components/organisms/price-input/index.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import AmountField from "react-currency-input-field"
 
 import { CurrencyType } from "../../../utils/currencies"
@@ -27,8 +26,8 @@ function PriceInput(props: PriceInputProps) {
   const placeholder = `0.${"0".repeat(decimal_digits)}`
 
   return (
-    <div className="w-[314px] relative">
-      <div className="absolute flex items-center h-full top-0 left-3">
+    <div className="relative w-[314px]">
+      <div className="absolute top-0 left-3 flex h-full items-center">
         <span className="text-small text-grey-40 mt-[1px]">{code}</span>
       </div>
 
@@ -42,18 +41,18 @@ function PriceInput(props: PriceInputProps) {
         placeholder={placeholder}
         decimalScale={decimal_digits}
         style={{ paddingRight: rightOffset }}
-        className="focus:bg-white focus:border-violet-6
-            border border-solid border-grey-20
-            w-full h-[40px]
-            py-[10px] pl-12
-            rounded-lg
-            bg-grey-5
-            text-gray-90
+        className="focus:border-violet-6 border-grey-20
+            bg-grey-5 text-gray-90 text-small
+            h-[40px] w-full
+            rounded-lg border
+            border-solid
+            py-[10px]
+            pl-12
             text-right
-            text-small"
+            focus:bg-white"
       />
 
-      <div className="absolute flex items-center h-full top-0 right-3">
+      <div className="absolute top-0 right-3 flex h-full items-center">
         <span className="text-small text-grey-40 mt-[1px]">
           {symbol_native}
         </span>
diff --git a/packages/admin-ui/ui/src/components/organisms/product-variant-tree/index.tsx b/packages/admin-ui/ui/src/components/organisms/product-variant-tree/index.tsx
index d973490ff4..b6c76ac47c 100644
--- a/packages/admin-ui/ui/src/components/organisms/product-variant-tree/index.tsx
+++ b/packages/admin-ui/ui/src/components/organisms/product-variant-tree/index.tsx
@@ -36,7 +36,7 @@ const ProductVariantTree: React.FC<ProductVariantTreeProps> = ({
         <div>
           <img
             src={product.thumbnail || undefined}
-            className="w-4 h-5 rounded-base"
+            className="rounded-base h-5 w-4"
           />
         </div>
         <span className="inter-small-semibold">{product.title}</span>
@@ -65,7 +65,7 @@ const ProductVariantLeaf = ({ sku, title, prices = [] }: LeafProps) => {
         <span>{title}</span>
         {sku && <span className="text-grey-50 ml-xsmall">(SKU: {sku})</span>}
       </div>
-      <div className="flex items-center text-grey-50 flex-1 justify-end">
+      <div className="text-grey-50 flex flex-1 items-center justify-end">
         <div className="text-grey-50 mr-xsmall">
           {filteredPrices.length ? (
             <span>{`${filteredPrices.length} price${
diff --git a/packages/admin-ui/ui/src/components/organisms/radio-group/index.tsx b/packages/admin-ui/ui/src/components/organisms/radio-group/index.tsx
index 14712b98d4..209a0cbd13 100644
--- a/packages/admin-ui/ui/src/components/organisms/radio-group/index.tsx
+++ b/packages/admin-ui/ui/src/components/organisms/radio-group/index.tsx
@@ -36,7 +36,7 @@ const Item = ({
   return (
     <label
       className={clsx(
-        "rounded-rounded relative border border-grey-20 p-base flex items-start mb-xsmall gap-base cursor-pointer",
+        "rounded-rounded border-grey-20 p-base mb-xsmall gap-base relative flex cursor-pointer items-start border",
         { "bg-grey-5 text-grey-40": disabled },
         className
       )}
@@ -49,13 +49,13 @@ const Item = ({
           disabled={disabled}
           className={clsx(
             "radio-outer-ring outline-0",
-            "shrink-0 w-[20px] h-[20px] shadow-[0_0_0_1px] shadow-grey-20 rounded-circle"
+            "shadow-grey-20 rounded-circle h-[20px] w-[20px] shrink-0 shadow-[0_0_0_1px]"
           )}
         >
           <RadioGroupPrimitive.Indicator
             className={clsx(
-              "indicator flex items-center justify-center w-full h-full relative",
-              "after:absolute after:inset-0 after:m-auto after:block after:w-[12px] after:h-[12px] after:bg-violet-60 after:rounded-circle"
+              "indicator relative flex h-full w-full items-center justify-center",
+              "after:bg-violet-60 after:rounded-circle after:absolute after:inset-0 after:m-auto after:block after:h-[12px] after:w-[12px]"
             )}
           />
           {/* Outline indicator: purely stylistical */}
@@ -63,7 +63,7 @@ const Item = ({
             //  we want to hide this indicator from screen readers because the previous one is enough
             aria-hidden="true"
             className={clsx(
-              "absolute inset-0 shadow-violet-60 shadow-[0_0_0_2px] rounded-rounded"
+              "shadow-violet-60 rounded-rounded absolute inset-0 shadow-[0_0_0_2px]"
             )}
           />
         </RadioGroupPrimitive.Item>
@@ -110,9 +110,9 @@ const SimpleItem: React.FC<RadioGroupSimpleItemProps> = ({
   return (
     <label
       className={clsx(
-        "flex items-center mr-large last:mr-0",
+        "mr-large flex items-center last:mr-0",
         {
-          ["opacity-50 select-none pointer-events-none"]: rest.disabled,
+          ["pointer-events-none select-none opacity-50"]: rest.disabled,
         },
         className
       )}
@@ -123,17 +123,17 @@ const SimpleItem: React.FC<RadioGroupSimpleItemProps> = ({
         id={rest.value}
         className={clsx(
           "radio-outer-ring outline-0",
-          "shrink-0 w-[20px] h-[20px] shadow-[0_0_0_1px] shadow-[#D1D5DB] rounded-circle"
+          "rounded-circle h-[20px] w-[20px] shrink-0 shadow-[0_0_0_1px] shadow-[#D1D5DB]"
         )}
       >
         <RadioGroupPrimitive.Indicator
           className={clsx(
-            "flex items-center justify-center w-full h-full relative indicator",
-            "after:absolute after:inset-0 after:m-auto after:block after:w-[12px] after:h-[12px] after:bg-violet-60 after:rounded-circle"
+            "indicator relative flex h-full w-full items-center justify-center",
+            "after:bg-violet-60 after:rounded-circle after:absolute after:inset-0 after:m-auto after:block after:h-[12px] after:w-[12px]"
           )}
         />
       </RadioGroupPrimitive.Item>
-      <div className="ml-small inter-base-regular cursor-pointer w-full">
+      <div className="ml-small inter-base-regular w-full cursor-pointer">
         <span>{label && label}</span>
         <span>{description && description}</span>
       </div>
@@ -146,7 +146,7 @@ const Dot: React.FC<DotProps> = ({ className, ...rest }) => {
     <label
       className={clsx(
         {
-          ["opacity-50 select-none pointer-events-none"]: rest.disabled,
+          ["pointer-events-none select-none opacity-50"]: rest.disabled,
         },
         className
       )}
@@ -157,13 +157,13 @@ const Dot: React.FC<DotProps> = ({ className, ...rest }) => {
         id={rest.value}
         className={clsx(
           "radio-outer-ring outline-0",
-          "shrink-0 w-[20px] h-[20px] shadow-[0_0_0_1px] shadow-[#D1D5DB] rounded-circle"
+          "rounded-circle h-[20px] w-[20px] shrink-0 shadow-[0_0_0_1px] shadow-[#D1D5DB]"
         )}
       >
         <RadioGroupPrimitive.Indicator
           className={clsx(
-            "flex items-center justify-center w-full h-full relative indicator",
-            "after:absolute after:inset-0 after:m-auto after:block after:w-[12px] after:h-[12px] after:bg-violet-60 after:rounded-circle"
+            "indicator relative flex h-full w-full items-center justify-center",
+            "after:bg-violet-60 after:rounded-circle after:absolute after:inset-0 after:m-auto after:block after:h-[12px] after:w-[12px]"
           )}
         />
       </RadioGroupPrimitive.Item>
diff --git a/packages/admin-ui/ui/src/components/organisms/raw-json/index.tsx b/packages/admin-ui/ui/src/components/organisms/raw-json/index.tsx
index 9b83449f8f..0da48418d9 100644
--- a/packages/admin-ui/ui/src/components/organisms/raw-json/index.tsx
+++ b/packages/admin-ui/ui/src/components/organisms/raw-json/index.tsx
@@ -27,8 +27,8 @@ function RawJSON(props: RawJSONProps) {
   }
 
   return (
-    <BodyCard className={"w-full mb-4 min-h-0 h-auto"} title={title}>
-      <div className="flex flex-grow items-center mt-4">
+    <BodyCard className={"mb-4 h-auto min-h-0 w-full"} title={title}>
+      <div className="mt-4 flex flex-grow items-center">
         <JSONView data={data} />
       </div>
     </BodyCard>
diff --git a/packages/admin-ui/ui/src/components/organisms/reset-token-card/index.tsx b/packages/admin-ui/ui/src/components/organisms/reset-token-card/index.tsx
index ffed1bf0c3..de42662288 100644
--- a/packages/admin-ui/ui/src/components/organisms/reset-token-card/index.tsx
+++ b/packages/admin-ui/ui/src/components/organisms/reset-token-card/index.tsx
@@ -61,35 +61,36 @@ const ResetTokenCard: React.FC<ResetTokenCardProps> = ({ goBack }) => {
           <>
             <SigninInput
               placeholder="lebron@james.com..."
-              {...register('email', { required: true })}
-              className="mb-0 mt-xlarge" />
+              {...register("email", { required: true })}
+              className="mt-xlarge mb-0"
+            />
             {unrecognizedEmail && (
               <div className="mt-xsmall w-[318px]">
-                <span className="inter-small-regular text-rose-50 text-left">
+                <span className="inter-small-regular text-left text-rose-50">
                   We can't find a user with that email address
                 </span>
               </div>
             )}
             {invalidEmail && (
               <div className="mt-xsmall w-[318px]">
-                <span className="inter-small-regular text-rose-50 text-left">
+                <span className="inter-small-regular text-left text-rose-50">
                   Not a valid email address
                 </span>
               </div>
             )}
             <button
-              className="text-grey-0 w-[320px] h-[48px] border rounded-rounded mt-4 bg-violet-50 inter-base-regular py-3 px-4"
+              className="text-grey-0 rounded-rounded inter-base-regular mt-4 h-[48px] w-[320px] border bg-violet-50 py-3 px-4"
               type="submit"
             >
               Send reset instructions
             </button>
           </>
         ) : (
-          <div className="text-violet-60 rounded-rounded bg-violet-10 p-base flex gap-x-small mt-large">
+          <div className="text-violet-60 rounded-rounded bg-violet-10 p-base gap-x-small mt-large flex">
             <div>
               <CheckCircleIcon size={20} />
             </div>
-            <div className="flex flex-col gap-y-2xsmall">
+            <div className="gap-y-2xsmall flex flex-col">
               <span className="inter-small-semibold">
                 Succesfully sent you an email
               </span>
@@ -109,7 +110,7 @@ const ResetTokenCard: React.FC<ResetTokenCardProps> = ({ goBack }) => {
         </span>
       </div>
     </form>
-  );
+  )
 }
 
 export default ResetTokenCard
diff --git a/packages/admin-ui/ui/src/components/organisms/rma-return-product-table/index.tsx b/packages/admin-ui/ui/src/components/organisms/rma-return-product-table/index.tsx
index f858449f9d..fcc2b5634a 100644
--- a/packages/admin-ui/ui/src/components/organisms/rma-return-product-table/index.tsx
+++ b/packages/admin-ui/ui/src/components/organisms/rma-return-product-table/index.tsx
@@ -43,7 +43,7 @@ const RMAReturnProductsTable: React.FC<RMAReturnProductsTableProps> = ({
     <Table>
       <Table.HeadRow className="text-grey-50 inter-small-semibold">
         <Table.HeadCell>Product Details</Table.HeadCell>
-        <Table.HeadCell className="text-right pr-8">Quantity</Table.HeadCell>
+        <Table.HeadCell className="pr-8 text-right">Quantity</Table.HeadCell>
         <Table.HeadCell className="text-right">
           {isAdditionalItems ? "Unit Price" : "Refundable"}
         </Table.HeadCell>
@@ -54,14 +54,14 @@ const RMAReturnProductsTable: React.FC<RMAReturnProductsTableProps> = ({
         {itemsToAdd.map((item, index) => (
           <Table.Row className={clsx("border-b-grey-0 hover:bg-grey-0")}>
             <Table.Cell>
-              <div className="min-w-[240px] flex py-2">
-                <div className="w-[30px] h-[40px] ">
+              <div className="flex min-w-[240px] py-2">
+                <div className="h-[40px] w-[30px] ">
                   <img
-                    className="h-full w-full object-cover rounded"
+                    className="h-full w-full rounded object-cover"
                     src={item.product.thumbnail}
                   />
                 </div>
-                <div className="inter-small-regular text-grey-50 flex flex-col ml-4">
+                <div className="inter-small-regular text-grey-50 ml-4 flex flex-col">
                   <span>
                     <span className="text-grey-90">{item.product.title}</span>{" "}
                   </span>
@@ -69,11 +69,11 @@ const RMAReturnProductsTable: React.FC<RMAReturnProductsTableProps> = ({
                 </div>
               </div>
             </Table.Cell>
-            <Table.Cell className="text-right w-32 pr-8">
-              <div className="flex w-full text-right justify-end text-grey-50 ">
+            <Table.Cell className="w-32 pr-8 text-right">
+              <div className="text-grey-50 flex w-full justify-end text-right ">
                 <span
                   onClick={() => handleToAddQuantity(-1, index)}
-                  className="w-5 h-5 flex items-center justify-center rounded cursor-pointer hover:bg-grey-20 mr-2"
+                  className="hover:bg-grey-20 mr-2 flex h-5 w-5 cursor-pointer items-center justify-center rounded"
                 >
                   <MinusIcon size={16} />
                 </span>
@@ -81,7 +81,7 @@ const RMAReturnProductsTable: React.FC<RMAReturnProductsTableProps> = ({
                 <span
                   onClick={() => handleToAddQuantity(1, index)}
                   className={clsx(
-                    "w-5 h-5 flex items-center justify-center rounded cursor-pointer hover:bg-grey-20 ml-2"
+                    "hover:bg-grey-20 ml-2 flex h-5 w-5 cursor-pointer items-center justify-center rounded"
                   )}
                 >
                   <PlusIcon size={16} />
@@ -91,7 +91,7 @@ const RMAReturnProductsTable: React.FC<RMAReturnProductsTableProps> = ({
             <Table.Cell className="text-right">
               {extractPrice(item.prices, order)}
             </Table.Cell>
-            <Table.Cell className="text-right text-grey-40 pr-1">
+            <Table.Cell className="text-grey-40 pr-1 text-right">
               {order.currency_code.toUpperCase()}
             </Table.Cell>
             <Table.Cell>
@@ -99,7 +99,7 @@ const RMAReturnProductsTable: React.FC<RMAReturnProductsTableProps> = ({
                 onClick={() => handleRemoveItem(index)}
                 variant="ghost"
                 size="small"
-                className="w-8 h-8 text-grey-40"
+                className="text-grey-40 h-8 w-8"
               >
                 <TrashIcon size={20} />
               </Button>
diff --git a/packages/admin-ui/ui/src/components/organisms/rma-select-product-table/index.tsx b/packages/admin-ui/ui/src/components/organisms/rma-select-product-table/index.tsx
index 4c2d7b47ff..1822901939 100644
--- a/packages/admin-ui/ui/src/components/organisms/rma-select-product-table/index.tsx
+++ b/packages/admin-ui/ui/src/components/organisms/rma-select-product-table/index.tsx
@@ -113,7 +113,7 @@ const RMASelectProductTable: React.FC<RMASelectProductTableProps> = ({
       <Table.Head className="border-none">
         <Table.HeadRow className="text-grey-50 inter-small-semibold">
           <Table.HeadCell colSpan={2}>Product Details</Table.HeadCell>
-          <Table.HeadCell className="text-right pr-8">Quantity</Table.HeadCell>
+          <Table.HeadCell className="pr-8 text-right">Quantity</Table.HeadCell>
           <Table.HeadCell className="text-right">Refundable</Table.HeadCell>
           <Table.HeadCell></Table.HeadCell>
         </Table.HeadRow>
@@ -133,10 +133,10 @@ const RMASelectProductTable: React.FC<RMASelectProductTableProps> = ({
             <Fragment key={item.id}>
               <Table.Row className={clsx("border-b-grey-0 hover:bg-grey-0")}>
                 <Table.Cell>
-                  <div className="items-center ml-1 h-full flex">
+                  <div className="ml-1 flex h-full items-center">
                     <div
                       onClick={() => handleReturnToggle(item)}
-                      className={`mr-4 w-5 h-5 flex justify-center text-grey-0 border-grey-30 border cursor-pointer rounded-base ${
+                      className={`text-grey-0 border-grey-30 rounded-base mr-4 flex h-5 w-5 cursor-pointer justify-center border ${
                         checked && "bg-violet-60"
                       }`}
                     >
@@ -155,14 +155,14 @@ const RMASelectProductTable: React.FC<RMASelectProductTableProps> = ({
                   </div>
                 </Table.Cell>
                 <Table.Cell>
-                  <div className="min-w-[240px] flex py-2">
-                    <div className="w-[30px] h-[40px] ">
+                  <div className="flex min-w-[240px] py-2">
+                    <div className="h-[40px] w-[30px] ">
                       <img
-                        className="h-full w-full object-cover rounded"
+                        className="h-full w-full rounded object-cover"
                         src={item.thumbnail}
                       />
                     </div>
-                    <div className="inter-small-regular text-grey-50 flex flex-col ml-4">
+                    <div className="inter-small-regular text-grey-50 ml-4 flex flex-col">
                       <span>
                         <span className="text-grey-90">{item.title}</span>
                       </span>
@@ -180,12 +180,12 @@ const RMASelectProductTable: React.FC<RMASelectProductTableProps> = ({
                     </div>
                   </div>
                 </Table.Cell>
-                <Table.Cell className="text-right w-32 pr-8">
+                <Table.Cell className="w-32 pr-8 text-right">
                   {item.id in toReturn ? (
-                    <div className="flex w-full text-right justify-end text-grey-50 ">
+                    <div className="text-grey-50 flex w-full justify-end text-right ">
                       <span
                         onClick={() => handleQuantity(-1, item)}
-                        className="w-5 h-5 flex items-center justify-center rounded cursor-pointer hover:bg-grey-20 mr-2"
+                        className="hover:bg-grey-20 mr-2 flex h-5 w-5 cursor-pointer items-center justify-center rounded"
                       >
                         <MinusIcon size={16} />
                       </span>
@@ -193,7 +193,7 @@ const RMASelectProductTable: React.FC<RMASelectProductTableProps> = ({
                       <span
                         onClick={() => handleQuantity(1, item)}
                         className={clsx(
-                          "w-5 h-5 flex items-center justify-center rounded cursor-pointer hover:bg-grey-20 ml-2"
+                          "hover:bg-grey-20 ml-2 flex h-5 w-5 cursor-pointer items-center justify-center rounded"
                         )}
                       >
                         <PlusIcon size={16} />
@@ -211,12 +211,12 @@ const RMASelectProductTable: React.FC<RMASelectProductTableProps> = ({
                     amount: item.refundable || 0,
                   })}
                 </Table.Cell>
-                <Table.Cell className="text-right text-grey-40 pr-1">
+                <Table.Cell className="text-grey-40 pr-1 text-right">
                   {order.currency_code.toUpperCase()}
                 </Table.Cell>
               </Table.Row>
               {checked && !isSwapOrClaim && (
-                <Table.Row className="last:border-b-0 hover:bg-grey-0">
+                <Table.Row className="hover:bg-grey-0 last:border-b-0">
                   <Table.Cell></Table.Cell>
                   <Table.Cell colSpan={2}>
                     <div className="max-w-[470px] truncate">
@@ -244,7 +244,7 @@ const RMASelectProductTable: React.FC<RMASelectProductTableProps> = ({
                     </div>
                   </Table.Cell>
                   <Table.Cell colSpan={2}>
-                    <div className="flex w-full justify-end mb-small">
+                    <div className="mb-small flex w-full justify-end">
                       <Button
                         onClick={() =>
                           push(
@@ -261,7 +261,7 @@ const RMASelectProductTable: React.FC<RMASelectProductTableProps> = ({
                         }
                         variant="ghost"
                         size="small"
-                        className="border border-grey-20"
+                        className="border-grey-20 border"
                       >
                         Select Reason
                       </Button>
diff --git a/packages/admin-ui/ui/src/components/organisms/section/index.tsx b/packages/admin-ui/ui/src/components/organisms/section/index.tsx
index 3ddf2b046f..079c1e5310 100644
--- a/packages/admin-ui/ui/src/components/organisms/section/index.tsx
+++ b/packages/admin-ui/ui/src/components/organisms/section/index.tsx
@@ -26,7 +26,7 @@ const Section = ({
   return (
     <div
       className={clsx(
-        "px-xlarge pt-large pb-xlarge rounded-rounded bg-grey-0 border border-grey-20",
+        "px-xlarge pt-large pb-xlarge rounded-rounded bg-grey-0 border-grey-20 border",
         className
       )}
     >
diff --git a/packages/admin-ui/ui/src/components/organisms/table-container/index.tsx b/packages/admin-ui/ui/src/components/organisms/table-container/index.tsx
index b33a9a3a8a..9b404b5665 100644
--- a/packages/admin-ui/ui/src/components/organisms/table-container/index.tsx
+++ b/packages/admin-ui/ui/src/components/organisms/table-container/index.tsx
@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from "react"
+import { PropsWithChildren } from "react"
 import Spinner from "../../atoms/spinner"
 import { TablePagination } from "./pagination"
 import { PagingProps } from "./types"
@@ -32,7 +32,7 @@ const TableContainer = <T extends boolean>({
         }}
       >
         {isLoading && (
-          <div className="absolute inset-0 flex justify-center items-center bg-white bg-opacity-50 z-50">
+          <div className="absolute inset-0 z-50 flex items-center justify-center bg-white bg-opacity-50">
             <Spinner variant="secondary" />
           </div>
         )}
diff --git a/packages/admin-ui/ui/src/components/private-route/index.tsx b/packages/admin-ui/ui/src/components/private-route/index.tsx
index 95e775adc4..3d680883f4 100644
--- a/packages/admin-ui/ui/src/components/private-route/index.tsx
+++ b/packages/admin-ui/ui/src/components/private-route/index.tsx
@@ -22,7 +22,7 @@ const PrivateRoute = ({ children }: PrivateRouteProps) => {
   }
 
   return (
-    <div className="h-screen w-full flex items-center justify-center">
+    <div className="flex h-screen w-full items-center justify-center">
       <Spinner variant="secondary" />
     </div>
   )
diff --git a/packages/admin-ui/ui/src/components/templates/add-products-modal/index.tsx b/packages/admin-ui/ui/src/components/templates/add-products-modal/index.tsx
index b47b5c677a..f57fd5ea27 100644
--- a/packages/admin-ui/ui/src/components/templates/add-products-modal/index.tsx
+++ b/packages/admin-ui/ui/src/components/templates/add-products-modal/index.tsx
@@ -27,12 +27,13 @@ const AddProductsModal = ({
   /* ************* Data ************  */
 
   const params = useQueryFilters(defaultQueryProps)
-  const { products, isLoading, count = 0 } = useAdminProducts(
-    params.queryObject,
-    {
-      keepPreviousData: true,
-    }
-  )
+  const {
+    products,
+    isLoading,
+    count = 0,
+  } = useAdminProducts(params.queryObject, {
+    keepPreviousData: true,
+  })
 
   /* ************* State ************  */
 
@@ -64,7 +65,7 @@ const AddProductsModal = ({
           <h2 className="inter-xlarge-semibold">Add Products</h2>
         </Modal.Header>
         <Modal.Content>
-          <div className="w-full flex flex-col justify-between min-h-[300px] h-full ">
+          <div className="flex h-full min-h-[300px] w-full flex-col justify-between ">
             <SelectableTable
               columns={columns}
               data={products || []}
@@ -84,7 +85,7 @@ const AddProductsModal = ({
           </div>
         </Modal.Content>
         <Modal.Footer>
-          <div className="w-full flex justify-end gap-2">
+          <div className="flex w-full justify-end gap-2">
             <Button
               variant="ghost"
               className="rounded-rounded h-8 w-[128px]"
diff --git a/packages/admin-ui/ui/src/components/templates/add-products-modal/product-table-config.tsx b/packages/admin-ui/ui/src/components/templates/add-products-modal/product-table-config.tsx
index f3e0d0c941..d0b5694440 100644
--- a/packages/admin-ui/ui/src/components/templates/add-products-modal/product-table-config.tsx
+++ b/packages/admin-ui/ui/src/components/templates/add-products-modal/product-table-config.tsx
@@ -1,6 +1,5 @@
 import { Product } from "@medusajs/medusa"
 import clsx from "clsx"
-import * as React from "react"
 import { Column, HeaderGroup, Row } from "react-table"
 import ImagePlaceholder from "../../fundamentals/image-placeholder"
 import Table from "../../molecules/table"
@@ -11,12 +10,12 @@ export const columns: Column<Product>[] = [
     Header: <div className="pl-4">Product Details</div>,
     accessor: "title",
     Cell: ({ row: { original } }) => (
-      <div className="pl-4 flex items-center w-[400px]">
-        <div className="h-[40px] w-[30px] my-1.5 flex items-center mr-4">
+      <div className="flex w-[400px] items-center pl-4">
+        <div className="my-1.5 mr-4 flex h-[40px] w-[30px] items-center">
           {original.thumbnail ? (
             <img
               src={original.thumbnail}
-              className="h-full object-cover rounded-soft"
+              className="rounded-soft h-full object-cover"
             />
           ) : (
             <ImagePlaceholder />
@@ -37,16 +36,16 @@ export const columns: Column<Product>[] = [
     Header: <div>Status</div>,
     accessor: "status",
     Cell: ({ cell: { value } }) => (
-      <Table.Cell className="w-[10%] pr-base">
+      <Table.Cell className="pr-base w-[10%]">
         <div className="flex items-center">{decideStatus(value)}</div>
       </Table.Cell>
     ),
   },
   {
-    Header: <div className="flex justify-end items-center pr-4">Variants</div>,
+    Header: <div className="flex items-center justify-end pr-4">Variants</div>,
     accessor: "variants",
     Cell: ({ row: { original } }) => (
-      <Table.Cell className="flex justify-end items-center pr-4">
+      <Table.Cell className="flex items-center justify-end pr-4">
         {original.variants.length}
       </Table.Cell>
     ),
diff --git a/packages/admin-ui/ui/src/components/templates/address-form.tsx b/packages/admin-ui/ui/src/components/templates/address-form.tsx
index a0627e64d6..47e730a625 100644
--- a/packages/admin-ui/ui/src/components/templates/address-form.tsx
+++ b/packages/admin-ui/ui/src/components/templates/address-form.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import { Controller } from "react-hook-form"
 import { Option } from "../../types/shared"
 import FormValidator from "../../utils/form-validator"
@@ -51,7 +50,7 @@ const AddressForm = ({
       {(type === AddressType.SHIPPING || type === AddressType.BILLING) && (
         <>
           <span className="inter-base-semibold">General</span>
-          <div className="grid grid-cols-2 mt-4 mb-8 gap-large">
+          <div className="gap-large mt-4 mb-8 grid grid-cols-2">
             <Input
               {...register(path("first_name"), {
                 required: required
@@ -104,7 +103,7 @@ const AddressForm = ({
           }`}
         </span>
       )}
-      <div className="grid grid-cols-2 mt-4 gap-y-large gap-x-large">
+      <div className="gap-y-large gap-x-large mt-4 grid grid-cols-2">
         <Input
           {...form.register(path("address_1"), {
             required: required ? FormValidator.required("Address 1") : false,
diff --git a/packages/admin-ui/ui/src/components/templates/collection-modal/index.tsx b/packages/admin-ui/ui/src/components/templates/collection-modal/index.tsx
index 17cdf46fb7..4b52d838f5 100644
--- a/packages/admin-ui/ui/src/components/templates/collection-modal/index.tsx
+++ b/packages/admin-ui/ui/src/components/templates/collection-modal/index.tsx
@@ -141,7 +141,7 @@ const CollectionModal: React.FC<CollectionModalProps> = ({
           <Modal.Content>
             <div>
               <h2 className="inter-base-semibold mb-base">Details</h2>
-              <div className="flex items-center gap-x-base">
+              <div className="gap-x-base flex items-center">
                 <InputField
                   label="Title"
                   required
@@ -164,7 +164,7 @@ const CollectionModal: React.FC<CollectionModalProps> = ({
             </div>
           </Modal.Content>
           <Modal.Footer>
-            <div className="flex items-center justify-end w-full gap-x-xsmall">
+            <div className="gap-x-xsmall flex w-full items-center justify-end">
               <Button
                 variant="secondary"
                 size="small"
diff --git a/packages/admin-ui/ui/src/components/templates/collection-product-table/add-product-table.tsx b/packages/admin-ui/ui/src/components/templates/collection-product-table/add-product-table.tsx
index a9d13791fd..2d529d9ffd 100644
--- a/packages/admin-ui/ui/src/components/templates/collection-product-table/add-product-table.tsx
+++ b/packages/admin-ui/ui/src/components/templates/collection-product-table/add-product-table.tsx
@@ -76,7 +76,7 @@ const AddProductsTable: React.FC<AddProductsTableProps> = ({
           id: "selection",
           Cell: ({ row }) => {
             return (
-              <Table.Cell className="w-[5%] pl-base">
+              <Table.Cell className="pl-base w-[5%]">
                 <IndeterminateCheckbox {...row.getToggleRowSelectedProps()} />
               </Table.Cell>
             )
@@ -205,7 +205,7 @@ const AddProductsTable: React.FC<AddProductsTableProps> = ({
           </TableContainer>
         </Modal.Content>
         <Modal.Footer>
-          <div className="flex items-center justify-end gap-x-xsmall w-full">
+          <div className="gap-x-xsmall flex w-full items-center justify-end">
             <Button
               variant="ghost"
               size="small"
diff --git a/packages/admin-ui/ui/src/components/templates/collection-product-table/index.tsx b/packages/admin-ui/ui/src/components/templates/collection-product-table/index.tsx
index 9307b34b44..87c04a1091 100644
--- a/packages/admin-ui/ui/src/components/templates/collection-product-table/index.tsx
+++ b/packages/admin-ui/ui/src/components/templates/collection-product-table/index.tsx
@@ -98,7 +98,7 @@ const CollectionProductTable: React.FC<CollectionProductTableProps> = ({
           id: "selection",
           Cell: ({ row }) => {
             return (
-              <Table.Cell className="w-[5%] pl-base">
+              <Table.Cell className="pl-base w-[5%]">
                 <IndeterminateCheckbox {...row.getToggleRowSelectedProps()} />
               </Table.Cell>
             )
diff --git a/packages/admin-ui/ui/src/components/templates/collection-product-table/use-collection-product-columns.tsx b/packages/admin-ui/ui/src/components/templates/collection-product-table/use-collection-product-columns.tsx
index a71e401161..66d7d235b8 100644
--- a/packages/admin-ui/ui/src/components/templates/collection-product-table/use-collection-product-columns.tsx
+++ b/packages/admin-ui/ui/src/components/templates/collection-product-table/use-collection-product-columns.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from "react"
+import { useMemo } from "react"
 import { Column } from "react-table"
 import Table from "../../molecules/table"
 import { decideStatus, SimpleProductType } from "./utils"
@@ -10,7 +10,7 @@ const useCollectionProductColumns = () => {
         accessor: "thumbnail",
         Cell: ({ cell: { value } }) => (
           <Table.Cell className="w-[5%]">
-            <div className="h-[40px] w-[30px] bg-grey-5 rounded-soft overflow-hidden my-xsmall">
+            <div className="bg-grey-5 rounded-soft my-xsmall h-[40px] w-[30px] overflow-hidden">
               {value ? (
                 <img
                   src={value}
@@ -31,7 +31,7 @@ const useCollectionProductColumns = () => {
       {
         accessor: "status",
         Cell: ({ cell: { value } }) => (
-          <Table.Cell className="w-[10%] pr-base">
+          <Table.Cell className="pr-base w-[10%]">
             <div className="flex items-center justify-end">
               {decideStatus(value)}
             </div>
diff --git a/packages/admin-ui/ui/src/components/templates/collection-product-table/use-sorting-options.tsx b/packages/admin-ui/ui/src/components/templates/collection-product-table/use-sorting-options.tsx
index 3a1f60d1c7..dc9f30ba09 100644
--- a/packages/admin-ui/ui/src/components/templates/collection-product-table/use-sorting-options.tsx
+++ b/packages/admin-ui/ui/src/components/templates/collection-product-table/use-sorting-options.tsx
@@ -6,9 +6,8 @@ import { SimpleProductType } from "./utils"
 
 const useSortingOptions = (products: SimpleProductType[]) => {
   const [options, setOptions] = useState<FilteringOptionProps[]>([])
-  const [sortedProducts, setSortedProducts] = useState<SimpleProductType[]>(
-    products
-  )
+  const [sortedProducts, setSortedProducts] =
+    useState<SimpleProductType[]>(products)
 
   const sortByTitle = (a: SimpleProductType, b: SimpleProductType) => {
     if (a.title < b.title) {
diff --git a/packages/admin-ui/ui/src/components/templates/collection-product-table/use-view-product-columns.tsx b/packages/admin-ui/ui/src/components/templates/collection-product-table/use-view-product-columns.tsx
index e9f31544e0..dd239fbd2d 100644
--- a/packages/admin-ui/ui/src/components/templates/collection-product-table/use-view-product-columns.tsx
+++ b/packages/admin-ui/ui/src/components/templates/collection-product-table/use-view-product-columns.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from "react"
+import { useMemo } from "react"
 import { Link } from "react-router-dom"
 import { Column } from "react-table"
 import Table from "../../molecules/table"
@@ -11,7 +11,7 @@ const useViewProductColumns = () => {
         id: "selection",
         Cell: ({ row }) => {
           return (
-            <Table.Cell className="w-[0%] pl-base pr-large">
+            <Table.Cell className="pl-base pr-large w-[0%]">
               <div>{row.index + 1}</div>
             </Table.Cell>
           )
@@ -20,8 +20,8 @@ const useViewProductColumns = () => {
       {
         accessor: "thumbnail",
         Cell: ({ cell: { value } }) => (
-          <Table.Cell className="w-[0%] pr-base">
-            <div className="h-[40px] w-[30px] bg-grey-5 rounded-soft overflow-hidden my-xsmall">
+          <Table.Cell className="pr-base w-[0%]">
+            <div className="bg-grey-5 rounded-soft my-xsmall h-[40px] w-[30px] overflow-hidden">
               {value ? (
                 <img
                   src={value}
diff --git a/packages/admin-ui/ui/src/components/templates/collection-product-table/utils.tsx b/packages/admin-ui/ui/src/components/templates/collection-product-table/utils.tsx
index 2e10aee6c4..07ac880a98 100644
--- a/packages/admin-ui/ui/src/components/templates/collection-product-table/utils.tsx
+++ b/packages/admin-ui/ui/src/components/templates/collection-product-table/utils.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import StatusIndicator from "../../fundamentals/status-indicator"
 
 export type SimpleProductType = {
diff --git a/packages/admin-ui/ui/src/components/templates/collection-product-table/view-products-table.tsx b/packages/admin-ui/ui/src/components/templates/collection-product-table/view-products-table.tsx
index 4f0bab5e4f..b165b1b99e 100644
--- a/packages/admin-ui/ui/src/components/templates/collection-product-table/view-products-table.tsx
+++ b/packages/admin-ui/ui/src/components/templates/collection-product-table/view-products-table.tsx
@@ -89,7 +89,7 @@ const ViewProductsTable: React.FC<ViewProductsTableProps> = ({
           id: "actions",
           Cell: ({ row }) => {
             return (
-              <Table.Cell className="w-[0%] pr-2xsmall">
+              <Table.Cell className="pr-2xsmall w-[0%]">
                 <Button
                   variant="ghost"
                   size="small"
diff --git a/packages/admin-ui/ui/src/components/templates/collections-table/use-collection-actions.tsx b/packages/admin-ui/ui/src/components/templates/collections-table/use-collection-actions.tsx
index 6eb32b0725..eb827fbbce 100644
--- a/packages/admin-ui/ui/src/components/templates/collections-table/use-collection-actions.tsx
+++ b/packages/admin-ui/ui/src/components/templates/collections-table/use-collection-actions.tsx
@@ -1,5 +1,4 @@
 import { useAdminDeleteCollection } from "medusa-react"
-import * as React from "react"
 import { useNavigate } from "react-router-dom"
 import useImperativeDialog from "../../../hooks/use-imperative-dialog"
 import EditIcon from "../../fundamentals/icons/edit-icon"
diff --git a/packages/admin-ui/ui/src/components/templates/collections-table/use-collection-column.tsx b/packages/admin-ui/ui/src/components/templates/collections-table/use-collection-column.tsx
index 61082518a0..b39f697562 100644
--- a/packages/admin-ui/ui/src/components/templates/collections-table/use-collection-column.tsx
+++ b/packages/admin-ui/ui/src/components/templates/collections-table/use-collection-column.tsx
@@ -1,5 +1,5 @@
 import moment from "moment"
-import React, { useMemo } from "react"
+import { useMemo } from "react"
 import Tooltip from "../../atoms/tooltip"
 
 const useCollectionTableColumn = () => {
diff --git a/packages/admin-ui/ui/src/components/templates/customer-group-table/config.tsx b/packages/admin-ui/ui/src/components/templates/customer-group-table/config.tsx
index 694918eed1..815c92121f 100644
--- a/packages/admin-ui/ui/src/components/templates/customer-group-table/config.tsx
+++ b/packages/admin-ui/ui/src/components/templates/customer-group-table/config.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import { Customer, CustomerGroup } from "@medusajs/medusa"
 import { Column } from "react-table"
 
@@ -69,36 +68,38 @@ export const CUSTOMER_GROUPS_CUSTOMERS_TABLE_COLUMNS: Column<Customer>[] = [
   },
 ]
 
-export const CUSTOMER_GROUPS_CUSTOMERS_LIST_TABLE_COLUMNS: Column<
-  Customer
->[] = [
-  {
-    Header: () => (
-      <div className="flex items-center gap-1">
-        Name <SortingIcon size={16} />
-      </div>
-    ),
-    id: "avatar",
-    Cell: ({ row }) => (
-      <CustomerAvatarItem customer={row.original} color={getColor(row.index)} />
-    ),
-  },
-  {
-    Header: () => (
-      <div className="flex items-center gap-1">
-        Email <SortingIcon size={16} />
-      </div>
-    ),
-    accessor: "email",
-  },
-  {
-    accessor: "groups",
-    disableSortBy: true,
-    Header: "Groups",
-    Cell: ({ cell: { value } }) => <CustomersGroupsSummary groups={value} />,
-  },
-  {
-    Header: "",
-    id: "settings-col",
-  },
-]
+export const CUSTOMER_GROUPS_CUSTOMERS_LIST_TABLE_COLUMNS: Column<Customer>[] =
+  [
+    {
+      Header: () => (
+        <div className="flex items-center gap-1">
+          Name <SortingIcon size={16} />
+        </div>
+      ),
+      id: "avatar",
+      Cell: ({ row }) => (
+        <CustomerAvatarItem
+          customer={row.original}
+          color={getColor(row.index)}
+        />
+      ),
+    },
+    {
+      Header: () => (
+        <div className="flex items-center gap-1">
+          Email <SortingIcon size={16} />
+        </div>
+      ),
+      accessor: "email",
+    },
+    {
+      accessor: "groups",
+      disableSortBy: true,
+      Header: "Groups",
+      Cell: ({ cell: { value } }) => <CustomersGroupsSummary groups={value} />,
+    },
+    {
+      Header: "",
+      id: "settings-col",
+    },
+  ]
diff --git a/packages/admin-ui/ui/src/components/templates/customer-group-table/customer-groups-table.tsx b/packages/admin-ui/ui/src/components/templates/customer-group-table/customer-groups-table.tsx
index 03e12e72be..b216238fbb 100644
--- a/packages/admin-ui/ui/src/components/templates/customer-group-table/customer-groups-table.tsx
+++ b/packages/admin-ui/ui/src/components/templates/customer-group-table/customer-groups-table.tsx
@@ -1,6 +1,6 @@
 import { CustomerGroup } from "@medusajs/medusa"
 import { useAdminCustomerGroups } from "medusa-react"
-import React, { useContext } from "react"
+import { useContext } from "react"
 import { useNavigate } from "react-router-dom"
 import {
   HeaderGroup,
@@ -36,7 +36,7 @@ const defaultQueryProps = {
  */
 function CustomerGroupsPlaceholder() {
   return (
-    <div className="h-full flex center justify-center items-center min-h-[756px]">
+    <div className="center flex h-full min-h-[756px] items-center justify-center">
       <span className="text-xs text-gray-400">No customer groups yet</span>
     </div>
   )
@@ -137,14 +137,8 @@ type CustomerGroupsTableProps = ReturnType<typeof useQueryFilters> & {
  * Root component of the customer groups table.
  */
 function CustomerGroupsTable(props: CustomerGroupsTableProps) {
-  const {
-    customerGroups,
-    queryObject,
-    count,
-    paginate,
-    setQuery,
-    isLoading,
-  } = props
+  const { customerGroups, queryObject, count, paginate, setQuery, isLoading } =
+    props
 
   const tableConfig: TableOptions<CustomerGroup> = {
     columns: CUSTOMER_GROUPS_TABLE_COLUMNS,
diff --git a/packages/admin-ui/ui/src/components/templates/customer-group-table/edit-customers-table.tsx b/packages/admin-ui/ui/src/components/templates/customer-group-table/edit-customers-table.tsx
index ac221f186c..50c1c83ebb 100644
--- a/packages/admin-ui/ui/src/components/templates/customer-group-table/edit-customers-table.tsx
+++ b/packages/admin-ui/ui/src/components/templates/customer-group-table/edit-customers-table.tsx
@@ -1,6 +1,6 @@
 import { Customer } from "@medusajs/medusa"
 import { useAdminCustomerGroups, useAdminCustomers } from "medusa-react"
-import React, { useEffect, useState } from "react"
+import { useEffect, useState } from "react"
 import {
   HeaderGroup,
   Row,
@@ -74,26 +74,21 @@ type EditCustomersTableProps = {
  * Container for the "edit customers" table.
  */
 function EditCustomersTable(props: EditCustomersTableProps) {
-  const {
-    setSelectedCustomerIds,
-    selectedCustomerIds,
-    handleSubmit,
-    onClose,
-  } = props
+  const { setSelectedCustomerIds, selectedCustomerIds, handleSubmit, onClose } =
+    props
 
-  const {
-    paginate,
-    setQuery,
-    setFilters,
-    filters,
-    queryObject,
-  } = useQueryFilters(defaultQueryProps)
+  const { paginate, setQuery, setFilters, filters, queryObject } =
+    useQueryFilters(defaultQueryProps)
 
   const [numPages, setNumPages] = useState(0)
   const [activeGroupId, setActiveGroupId] = useState()
 
   const { customer_groups } = useAdminCustomerGroups({ expand: "customers" })
-  const { customers = [], count = 0, isLoading } = useAdminCustomers({
+  const {
+    customers = [],
+    count = 0,
+    isLoading,
+  } = useAdminCustomers({
     ...queryObject,
     groups: activeGroupId ? [activeGroupId] : null,
   })
@@ -226,7 +221,7 @@ function EditCustomersTable(props: EditCustomersTableProps) {
         </Modal.Content>
 
         <Modal.Footer>
-          <div className="flex items-center justify-end gap-x-xsmall w-full">
+          <div className="gap-x-xsmall flex w-full items-center justify-end">
             <Button
               variant="ghost"
               size="small"
diff --git a/packages/admin-ui/ui/src/components/templates/customer-orders-table/use-customer-orders-columns.tsx b/packages/admin-ui/ui/src/components/templates/customer-orders-table/use-customer-orders-columns.tsx
index 3f4415fe09..d4dde1ef07 100644
--- a/packages/admin-ui/ui/src/components/templates/customer-orders-table/use-customer-orders-columns.tsx
+++ b/packages/admin-ui/ui/src/components/templates/customer-orders-table/use-customer-orders-columns.tsx
@@ -73,12 +73,12 @@ export const useCustomerOrdersColumns = (): Column<Order>[] => {
           }
 
           return (
-            <div className="flex gap-x-2xsmall">
-              <div ref={containerRef} className="flex gap-x-xsmall">
+            <div className="gap-x-2xsmall flex">
+              <div ref={containerRef} className="gap-x-xsmall flex">
                 {visibleItems.map((item) => {
                   return (
                     <Tooltip content={item.title} key={item.id}>
-                      <div className="h-[35px] w-[25px] flex items-center justify-center rounded-rounded overflow-hidden">
+                      <div className="rounded-rounded flex h-[35px] w-[25px] items-center justify-center overflow-hidden">
                         {item.thumbnail ? (
                           <img
                             className="object-cover"
diff --git a/packages/admin-ui/ui/src/components/templates/customer-table/use-customer-columns.tsx b/packages/admin-ui/ui/src/components/templates/customer-table/use-customer-columns.tsx
index 0e81a4fa27..491264d740 100644
--- a/packages/admin-ui/ui/src/components/templates/customer-table/use-customer-columns.tsx
+++ b/packages/admin-ui/ui/src/components/templates/customer-table/use-customer-columns.tsx
@@ -1,5 +1,5 @@
 import moment from "moment"
-import React, { useMemo } from "react"
+import { useMemo } from "react"
 import { getColor } from "../../../utils/color"
 import CustomerAvatarItem from "../../molecules/customer-avatar-item"
 
diff --git a/packages/admin-ui/ui/src/components/templates/customer-table/use-customer-filters.tsx b/packages/admin-ui/ui/src/components/templates/customer-table/use-customer-filters.tsx
index ab07ee9ca2..4218fc1728 100644
--- a/packages/admin-ui/ui/src/components/templates/customer-table/use-customer-filters.tsx
+++ b/packages/admin-ui/ui/src/components/templates/customer-table/use-customer-filters.tsx
@@ -63,10 +63,10 @@ export const useCustomerFilters = (
     existing = existing.substring(1)
   }
 
-  const initial = useMemo(() => parseQueryString(existing, defaultFilters), [
-    existing,
-    defaultFilters,
-  ])
+  const initial = useMemo(
+    () => parseQueryString(existing, defaultFilters),
+    [existing, defaultFilters]
+  )
 
   const [state, dispatch] = useReducer(reducer, initial)
 
diff --git a/packages/admin-ui/ui/src/components/templates/discount-filter-dropdown/index.tsx b/packages/admin-ui/ui/src/components/templates/discount-filter-dropdown/index.tsx
index ab5a2cf673..2a26434c10 100644
--- a/packages/admin-ui/ui/src/components/templates/discount-filter-dropdown/index.tsx
+++ b/packages/admin-ui/ui/src/components/templates/discount-filter-dropdown/index.tsx
@@ -84,10 +84,10 @@ const DiscountFilters = ({
         triggerElement={
           <button
             className={clsx(
-              "flex rounded-rounded items-center space-x-1 focus-visible:outline-none focus-visible:shadow-input focus-visible:border-violet-60"
+              "rounded-rounded focus-visible:shadow-input focus-visible:border-violet-60 flex items-center space-x-1 focus-visible:outline-none"
             )}
           >
-            <div className="flex rounded-rounded items-center bg-grey-5 border border-grey-20 inter-small-semibold px-2 h-6">
+            <div className="rounded-rounded bg-grey-5 border-grey-20 inter-small-semibold flex h-6 items-center border px-2">
               Filters
               <div className="text-grey-40 ml-1 flex items-center rounded">
                 <span className="text-violet-60 inter-small-semibold">
@@ -95,7 +95,7 @@ const DiscountFilters = ({
                 </span>
               </div>
             </div>
-            <div className="flex items-center rounded-rounded bg-grey-5 border border-grey-20 inter-small-semibold p-1">
+            <div className="rounded-rounded bg-grey-5 border-grey-20 inter-small-semibold flex items-center border p-1">
               <PlusIcon size={14} />
             </div>
           </button>
diff --git a/packages/admin-ui/ui/src/components/templates/discount-table/use-promotion-columns.tsx b/packages/admin-ui/ui/src/components/templates/discount-table/use-promotion-columns.tsx
index 8aabc4e816..d34a864159 100644
--- a/packages/admin-ui/ui/src/components/templates/discount-table/use-promotion-columns.tsx
+++ b/packages/admin-ui/ui/src/components/templates/discount-table/use-promotion-columns.tsx
@@ -1,5 +1,5 @@
 import { end, parse } from "iso8601-duration"
-import React, { useMemo } from "react"
+import { useMemo } from "react"
 import { formatAmountWithSymbol } from "../../../utils/prices"
 import Badge from "../../fundamentals/badge"
 import StatusDot from "../../fundamentals/status-indicator"
@@ -20,10 +20,10 @@ const getPromotionStatus = (promotion) => {
       (promotion.ends_at && new Date(promotion.ends_at) < date) ||
       (promotion.valid_duration &&
         date >
-        end(
-          parse(promotion.valid_duration),
-          new Date(promotion.starts_at)
-        )) ||
+          end(
+            parse(promotion.valid_duration),
+            new Date(promotion.starts_at)
+          )) ||
       promotion.usage_count === promotion.usage_limit
     ) {
       return PromotionStatus.EXPIRED
@@ -111,7 +111,7 @@ export const usePromotionTableColumns = () => {
         Header: <div className="w-[60px]" />,
         id: "currency",
         Cell: ({ row: { original } }) => (
-          <div className="px-2 text-grey-40">{getCurrencySymbol(original)}</div>
+          <div className="text-grey-40 px-2">{getCurrencySymbol(original)}</div>
         ),
       },
       {
diff --git a/packages/admin-ui/ui/src/components/templates/discount-table/use-promotion-filters.tsx b/packages/admin-ui/ui/src/components/templates/discount-table/use-promotion-filters.tsx
index 02e877cc6c..0e05bc1689 100644
--- a/packages/admin-ui/ui/src/components/templates/discount-table/use-promotion-filters.tsx
+++ b/packages/admin-ui/ui/src/components/templates/discount-table/use-promotion-filters.tsx
@@ -118,10 +118,10 @@ export const usePromotionFilters = (
     existing = existing.substring(1)
   }
 
-  const initial = useMemo(() => parseQueryString(existing, defaultFilters), [
-    existing,
-    defaultFilters,
-  ])
+  const initial = useMemo(
+    () => parseQueryString(existing, defaultFilters),
+    [existing, defaultFilters]
+  )
 
   const initialTabs = useMemo(() => {
     const storageString = localStorage.getItem("promotions::filters")
diff --git a/packages/admin-ui/ui/src/components/templates/discount-table/use-promotion-row-actions.tsx b/packages/admin-ui/ui/src/components/templates/discount-table/use-promotion-row-actions.tsx
index bf8f7c8bde..d4aacaf4ec 100644
--- a/packages/admin-ui/ui/src/components/templates/discount-table/use-promotion-row-actions.tsx
+++ b/packages/admin-ui/ui/src/components/templates/discount-table/use-promotion-row-actions.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import { useAdminDeleteDiscount, useAdminUpdateDiscount } from "medusa-react"
 import useImperativeDialog from "../../../hooks/use-imperative-dialog"
 import useNotification from "../../../hooks/use-notification"
@@ -55,7 +54,8 @@ const usePromotionActions = (promotion) => {
               onSuccess: () => {
                 notification(
                   "Success",
-                  `Successfully ${promotion.is_disabled ? "published" : "unpublished"
+                  `Successfully ${
+                    promotion.is_disabled ? "published" : "unpublished"
                   } discount`,
                   "success"
                 )
diff --git a/packages/admin-ui/ui/src/components/templates/draft-order-table/index.tsx b/packages/admin-ui/ui/src/components/templates/draft-order-table/index.tsx
index 863636b4cf..88c877a221 100644
--- a/packages/admin-ui/ui/src/components/templates/draft-order-table/index.tsx
+++ b/packages/admin-ui/ui/src/components/templates/draft-order-table/index.tsx
@@ -1,5 +1,5 @@
 import { useAdminDraftOrders } from "medusa-react"
-import React, { Fragment, useEffect, useState } from "react"
+import { Fragment, useEffect, useState } from "react"
 import { useLocation } from "react-router-dom"
 import { usePagination, useTable } from "react-table"
 import Table from "../../molecules/table"
diff --git a/packages/admin-ui/ui/src/components/templates/draft-order-table/use-draft-order-column.tsx b/packages/admin-ui/ui/src/components/templates/draft-order-table/use-draft-order-column.tsx
index ddbb50f1f9..6efcf2cef3 100644
--- a/packages/admin-ui/ui/src/components/templates/draft-order-table/use-draft-order-column.tsx
+++ b/packages/admin-ui/ui/src/components/templates/draft-order-table/use-draft-order-column.tsx
@@ -1,5 +1,5 @@
 import moment from "moment"
-import React, { useMemo } from "react"
+import { useMemo } from "react"
 import { getColor } from "../../../utils/color"
 import StatusDot from "../../fundamentals/status-indicator"
 import CustomerAvatarItem from "../../molecules/customer-avatar-item"
diff --git a/packages/admin-ui/ui/src/components/templates/gift-card-filter-dropdown/index.tsx b/packages/admin-ui/ui/src/components/templates/gift-card-filter-dropdown/index.tsx
index 1dac42b83d..65137de5c3 100644
--- a/packages/admin-ui/ui/src/components/templates/gift-card-filter-dropdown/index.tsx
+++ b/packages/admin-ui/ui/src/components/templates/gift-card-filter-dropdown/index.tsx
@@ -110,10 +110,10 @@ const OrderFilters = ({
         triggerElement={
           <button
             className={clsx(
-              "flex rounded-rounded items-center space-x-1 focus-visible:outline-none focus-visible:shadow-input focus-visible:border-violet-60"
+              "rounded-rounded focus-visible:shadow-input focus-visible:border-violet-60 flex items-center space-x-1 focus-visible:outline-none"
             )}
           >
-            <div className="flex rounded-rounded items-center bg-grey-5 border border-grey-20 inter-small-semibold px-2 h-6">
+            <div className="rounded-rounded bg-grey-5 border-grey-20 inter-small-semibold flex h-6 items-center border px-2">
               Filters
               <div className="text-grey-40 ml-1 flex items-center rounded">
                 <span className="text-violet-60 inter-small-semibold">
@@ -121,7 +121,7 @@ const OrderFilters = ({
                 </span>
               </div>
             </div>
-            <div className="flex items-center rounded-rounded bg-grey-5 border border-grey-20 inter-small-semibold p-1">
+            <div className="rounded-rounded bg-grey-5 border-grey-20 inter-small-semibold flex items-center border p-1">
               <PlusIcon size={14} />
             </div>
           </button>
diff --git a/packages/admin-ui/ui/src/components/templates/gift-card-table/index.tsx b/packages/admin-ui/ui/src/components/templates/gift-card-table/index.tsx
index 965f56213e..42a5c1a91b 100644
--- a/packages/admin-ui/ui/src/components/templates/gift-card-table/index.tsx
+++ b/packages/admin-ui/ui/src/components/templates/gift-card-table/index.tsx
@@ -162,7 +162,7 @@ const GiftCardTable = () => {
           <Table.Body {...getTableBodyProps()}>
             <Table.Row>
               <Table.Cell colSpan={columns.length}>
-                <div className="flex w-full h-full absolute items-center justify-center mt-10">
+                <div className="absolute mt-10 flex h-full w-full items-center justify-center">
                   <div className="">
                     <Spinner size={"large"} variant={"secondary"} />
                   </div>
diff --git a/packages/admin-ui/ui/src/components/templates/gift-card-table/use-gift-card-column.tsx b/packages/admin-ui/ui/src/components/templates/gift-card-table/use-gift-card-column.tsx
index 14cb435e6a..9f887432da 100644
--- a/packages/admin-ui/ui/src/components/templates/gift-card-table/use-gift-card-column.tsx
+++ b/packages/admin-ui/ui/src/components/templates/gift-card-table/use-gift-card-column.tsx
@@ -80,14 +80,14 @@ const useGiftCardTableColums = () => {
       },
       {
         Header: () => (
-          <div className="pr-2 flex rounded-rounded w-full justify-end">
+          <div className="rounded-rounded flex w-full justify-end pr-2">
             Created
           </div>
         ),
         accessor: "created_at",
         Cell: ({ cell: { value }, index }) => (
           <Table.Cell className="pr-2" key={index}>
-            <div className="flex rounded-rounded w-full justify-end">
+            <div className="rounded-rounded flex w-full justify-end">
               {moment(value).format("MMM Do YYYY")}
             </div>
           </Table.Cell>
diff --git a/packages/admin-ui/ui/src/components/templates/gift-card-table/use-gift-card-filters.ts b/packages/admin-ui/ui/src/components/templates/gift-card-table/use-gift-card-filters.ts
index c0827f79a7..971837d63f 100644
--- a/packages/admin-ui/ui/src/components/templates/gift-card-table/use-gift-card-filters.ts
+++ b/packages/admin-ui/ui/src/components/templates/gift-card-table/use-gift-card-filters.ts
@@ -148,10 +148,10 @@ export const useGiftCardFilters = (
     existing = existing.substring(1)
   }
 
-  const initial = useMemo(() => parseQueryString(existing, defaultFilters), [
-    existing,
-    defaultFilters,
-  ])
+  const initial = useMemo(
+    () => parseQueryString(existing, defaultFilters),
+    [existing, defaultFilters]
+  )
 
   const initialTabs = useMemo(() => {
     const storageString = localStorage.getItem("GiftCards::filters")
diff --git a/packages/admin-ui/ui/src/components/templates/image-table/index.tsx b/packages/admin-ui/ui/src/components/templates/image-table/index.tsx
index b2c9d1ab20..d2a934421f 100644
--- a/packages/admin-ui/ui/src/components/templates/image-table/index.tsx
+++ b/packages/admin-ui/ui/src/components/templates/image-table/index.tsx
@@ -97,7 +97,7 @@ const ImageTable = ({ data, form, onDelete }: ImageTableProps) => {
               onClick={() => onDelete(row.index)}
               variant="ghost"
               size="small"
-              className="p-1 mx-6 cursor-pointer text-grey-40"
+              className="text-grey-40 mx-6 cursor-pointer p-1"
               type="button"
             >
               <TrashIcon size={20} />
diff --git a/packages/admin-ui/ui/src/components/templates/inventory-table/index.tsx b/packages/admin-ui/ui/src/components/templates/inventory-table/index.tsx
index b9c8d70adf..7e8d4ce281 100644
--- a/packages/admin-ui/ui/src/components/templates/inventory-table/index.tsx
+++ b/packages/admin-ui/ui/src/components/templates/inventory-table/index.tsx
@@ -413,7 +413,7 @@ const AdjustAvailabilityModal = ({
                     {variant?.product?.thumbnail ? (
                       <img
                         src={variant?.product?.thumbnail}
-                        className="object-cover h-full rounded-rounded"
+                        className="rounded-rounded h-full object-cover"
                       />
                     ) : (
                       <ImagePlaceholder />
@@ -422,7 +422,7 @@ const AdjustAvailabilityModal = ({
                   <div className="flex flex-col">
                     <span className="truncate">
                       {variant?.product?.title}
-                      <span className="truncate text-grey-50">
+                      <span className="text-grey-50 truncate">
                         ({inventory.sku})
                       </span>
                     </span>
@@ -445,7 +445,7 @@ const AdjustAvailabilityModal = ({
         </Modal.Content>
       </Modal.Body>
       <Modal.Footer>
-        <div className="flex justify-end w-full gap-x-xsmall">
+        <div className="gap-x-xsmall flex w-full justify-end">
           <Button
             size="small"
             variant="ghost"
diff --git a/packages/admin-ui/ui/src/components/templates/inventory-table/use-inventory-column.tsx b/packages/admin-ui/ui/src/components/templates/inventory-table/use-inventory-column.tsx
index a40ef5a4bf..1c8ec9673f 100644
--- a/packages/admin-ui/ui/src/components/templates/inventory-table/use-inventory-column.tsx
+++ b/packages/admin-ui/ui/src/components/templates/inventory-table/use-inventory-column.tsx
@@ -15,7 +15,7 @@ const useInventoryTableColumn = () => {
                 {original.variants[0]?.product?.thumbnail ? (
                   <img
                     src={original.variants[0].product.thumbnail}
-                    className="object-cover h-full rounded-soft"
+                    className="rounded-soft h-full object-cover"
                   />
                 ) : (
                   <ImagePlaceholder />
diff --git a/packages/admin-ui/ui/src/components/templates/login-layout.tsx b/packages/admin-ui/ui/src/components/templates/login-layout.tsx
index 08f29f2f76..a68e0878f3 100644
--- a/packages/admin-ui/ui/src/components/templates/login-layout.tsx
+++ b/packages/admin-ui/ui/src/components/templates/login-layout.tsx
@@ -1,9 +1,7 @@
-import React from "react"
-
 const LoginLayout = ({ children }) => {
   return (
-    <div className="min-h-screen flex flex-col">
-      <div className="grid grid-cols-1 grid-rows-1 min-h-screen">
+    <div className="flex min-h-screen flex-col">
+      <div className="grid min-h-screen grid-cols-1 grid-rows-1">
         <div
           className="flex flex-col items-center"
           style={{
diff --git a/packages/admin-ui/ui/src/components/templates/order-filter-dropdown/index.tsx b/packages/admin-ui/ui/src/components/templates/order-filter-dropdown/index.tsx
index 2f4e29ecd0..c751549a09 100644
--- a/packages/admin-ui/ui/src/components/templates/order-filter-dropdown/index.tsx
+++ b/packages/admin-ui/ui/src/components/templates/order-filter-dropdown/index.tsx
@@ -138,10 +138,10 @@ const OrderFilters = ({
         triggerElement={
           <button
             className={clsx(
-              "flex rounded-rounded items-center space-x-1 focus-visible:outline-none focus-visible:shadow-input focus-visible:border-violet-60"
+              "rounded-rounded focus-visible:shadow-input focus-visible:border-violet-60 flex items-center space-x-1 focus-visible:outline-none"
             )}
           >
-            <div className="flex rounded-rounded items-center bg-grey-5 border border-grey-20 inter-small-semibold px-2 h-6">
+            <div className="rounded-rounded bg-grey-5 border-grey-20 inter-small-semibold flex h-6 items-center border px-2">
               Filters
               <div className="text-grey-40 ml-1 flex items-center rounded">
                 <span className="text-violet-60 inter-small-semibold">
@@ -149,7 +149,7 @@ const OrderFilters = ({
                 </span>
               </div>
             </div>
-            <div className="flex items-center rounded-rounded bg-grey-5 border border-grey-20 inter-small-semibold p-1">
+            <div className="rounded-rounded bg-grey-5 border-grey-20 inter-small-semibold flex items-center border p-1">
               <PlusIcon size={14} />
             </div>
           </button>
diff --git a/packages/admin-ui/ui/src/components/templates/order-table/use-order-column.tsx b/packages/admin-ui/ui/src/components/templates/order-table/use-order-column.tsx
index 77f69c224c..08b936c605 100644
--- a/packages/admin-ui/ui/src/components/templates/order-table/use-order-column.tsx
+++ b/packages/admin-ui/ui/src/components/templates/order-table/use-order-column.tsx
@@ -95,7 +95,7 @@ const useOrderTableColums = () => {
         Header: "",
         accessor: "currency_code",
         Cell: ({ cell: { value } }) => (
-          <div className="text-right text-grey-40">{value.toUpperCase()}</div>
+          <div className="text-grey-40 text-right">{value.toUpperCase()}</div>
         ),
       },
       {
@@ -103,7 +103,7 @@ const useOrderTableColums = () => {
         accessor: "country_code",
         Cell: ({ row }) => (
           <div className="pr-2">
-            <div className="flex rounded-rounded w-full justify-end">
+            <div className="rounded-rounded flex w-full justify-end">
               <Tooltip
                 content={
                   isoAlpha2Countries[
diff --git a/packages/admin-ui/ui/src/components/templates/order-table/use-order-filters.ts b/packages/admin-ui/ui/src/components/templates/order-table/use-order-filters.ts
index cf26c4de84..03da8fb7b1 100644
--- a/packages/admin-ui/ui/src/components/templates/order-table/use-order-filters.ts
+++ b/packages/admin-ui/ui/src/components/templates/order-table/use-order-filters.ts
@@ -155,10 +155,10 @@ export const useOrderFilters = (
     existing = existing.substring(1)
   }
 
-  const initial = useMemo(() => parseQueryString(existing, defaultFilters), [
-    existing,
-    defaultFilters,
-  ])
+  const initial = useMemo(
+    () => parseQueryString(existing, defaultFilters),
+    [existing, defaultFilters]
+  )
 
   const initialTabs = useMemo(() => {
     const storageString = localStorage.getItem("orders::filters")
diff --git a/packages/admin-ui/ui/src/components/templates/price-list-table/price-list-filters.tsx b/packages/admin-ui/ui/src/components/templates/price-list-table/price-list-filters.tsx
index adf5b71263..8b5b556e3f 100644
--- a/packages/admin-ui/ui/src/components/templates/price-list-table/price-list-filters.tsx
+++ b/packages/admin-ui/ui/src/components/templates/price-list-table/price-list-filters.tsx
@@ -1,5 +1,5 @@
 import clsx from "clsx"
-import React, { useEffect, useMemo, useState } from "react"
+import { useEffect, useMemo, useState } from "react"
 import PlusIcon from "../../../components/fundamentals/icons/plus-icon"
 import FilterDropdownContainer from "../../../components/molecules/filter-dropdown/container"
 import FilterDropdownItem from "../../../components/molecules/filter-dropdown/item"
@@ -78,10 +78,10 @@ const PriceListsFilter = ({
         triggerElement={
           <button
             className={clsx(
-              "flex rounded-rounded items-center space-x-1 focus-visible:outline-none focus-visible:shadow-input focus-visible:border-violet-60"
+              "rounded-rounded focus-visible:shadow-input focus-visible:border-violet-60 flex items-center space-x-1 focus-visible:outline-none"
             )}
           >
-            <div className="flex rounded-rounded items-center bg-grey-5 border border-grey-20 inter-small-semibold px-2 h-6">
+            <div className="rounded-rounded bg-grey-5 border-grey-20 inter-small-semibold flex h-6 items-center border px-2">
               Filters
               <div className="text-grey-40 ml-1 flex items-center rounded">
                 <span className="text-violet-60 inter-small-semibold">
@@ -89,7 +89,7 @@ const PriceListsFilter = ({
                 </span>
               </div>
             </div>
-            <div className="flex items-center rounded-rounded bg-grey-5 border border-grey-20 inter-small-semibold p-1">
+            <div className="rounded-rounded bg-grey-5 border-grey-20 inter-small-semibold flex items-center border p-1">
               <PlusIcon size={14} />
             </div>
           </button>
diff --git a/packages/admin-ui/ui/src/components/templates/price-list-table/price-list-table.tsx b/packages/admin-ui/ui/src/components/templates/price-list-table/price-list-table.tsx
index 11f290ad93..df8eaf8b45 100644
--- a/packages/admin-ui/ui/src/components/templates/price-list-table/price-list-table.tsx
+++ b/packages/admin-ui/ui/src/components/templates/price-list-table/price-list-table.tsx
@@ -1,6 +1,5 @@
 import { PriceList } from "@medusajs/medusa"
-import { debounce } from "lodash"
-import React, { useCallback, useEffect, useState } from "react"
+import { useEffect, useState } from "react"
 import {
   Column,
   HeaderGroup,
diff --git a/packages/admin-ui/ui/src/components/templates/price-list-table/use-price-list-actions.tsx b/packages/admin-ui/ui/src/components/templates/price-list-table/use-price-list-actions.tsx
index 5b9f16dc22..e5d45de8ac 100644
--- a/packages/admin-ui/ui/src/components/templates/price-list-table/use-price-list-actions.tsx
+++ b/packages/admin-ui/ui/src/components/templates/price-list-table/use-price-list-actions.tsx
@@ -1,4 +1,3 @@
-import * as React from "react"
 import { useAdminDeletePriceList, useAdminUpdatePriceList } from "medusa-react"
 import useImperativeDialog from "../../../hooks/use-imperative-dialog"
 import useNotification from "../../../hooks/use-notification"
diff --git a/packages/admin-ui/ui/src/components/templates/price-list-table/use-price-list-columns.tsx b/packages/admin-ui/ui/src/components/templates/price-list-table/use-price-list-columns.tsx
index 63c7e7c9a2..67c33f3961 100644
--- a/packages/admin-ui/ui/src/components/templates/price-list-table/use-price-list-columns.tsx
+++ b/packages/admin-ui/ui/src/components/templates/price-list-table/use-price-list-columns.tsx
@@ -1,6 +1,6 @@
 import { PriceList } from "@medusajs/medusa"
 import { isArray } from "lodash"
-import React, { useMemo } from "react"
+import { useMemo } from "react"
 import { Column } from "react-table"
 import Actionables from "../../molecules/actionables"
 import Table from "../../molecules/table"
@@ -54,7 +54,7 @@ export const usePriceListTableColumns = () => {
           return (
             <Table.Cell
               onClick={(e) => e.stopPropagation()}
-              className="w-full flex justify-end"
+              className="flex w-full justify-end"
             >
               <div className="justify-end">
                 <Actionables forceDropdown actions={getActions()} />
diff --git a/packages/admin-ui/ui/src/components/templates/price-list-table/use-price-list-filters.tsx b/packages/admin-ui/ui/src/components/templates/price-list-table/use-price-list-filters.tsx
index 7d2adbae21..a3c259135e 100644
--- a/packages/admin-ui/ui/src/components/templates/price-list-table/use-price-list-filters.tsx
+++ b/packages/admin-ui/ui/src/components/templates/price-list-table/use-price-list-filters.tsx
@@ -105,10 +105,10 @@ export const usePriceListFilters = (
     existing = existing.substring(1)
   }
 
-  const initial = useMemo(() => parseQueryString(existing, defaultFilters), [
-    existing,
-    defaultFilters,
-  ])
+  const initial = useMemo(
+    () => parseQueryString(existing, defaultFilters),
+    [existing, defaultFilters]
+  )
 
   const initialTabs = useMemo(() => {
     const storageString = localStorage.getItem("priceLists::filters")
diff --git a/packages/admin-ui/ui/src/components/templates/price-list-table/utils.tsx b/packages/admin-ui/ui/src/components/templates/price-list-table/utils.tsx
index 41c375bdd4..7bb39b822a 100644
--- a/packages/admin-ui/ui/src/components/templates/price-list-table/utils.tsx
+++ b/packages/admin-ui/ui/src/components/templates/price-list-table/utils.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import StatusDot from "../../fundamentals/status-indicator"
 
 const isFuture = (date?: string) => {
diff --git a/packages/admin-ui/ui/src/components/templates/price-overrides/index.tsx b/packages/admin-ui/ui/src/components/templates/price-overrides/index.tsx
index 5f0cdeef56..53e1b57d32 100644
--- a/packages/admin-ui/ui/src/components/templates/price-overrides/index.tsx
+++ b/packages/admin-ui/ui/src/components/templates/price-overrides/index.tsx
@@ -88,7 +88,7 @@ const PriceOverrides = ({
           <RadioGroup.Root
             value={mode}
             onValueChange={(value) => setMode(value)}
-            className="pt-2 flex items-center"
+            className="flex items-center pt-2"
           >
             <RadioGroup.SimpleItem
               value={MODES.SELECTED_ONLY}
@@ -101,11 +101,11 @@ const PriceOverrides = ({
           </RadioGroup.Root>
         )}
         {mode === MODES.SELECTED_ONLY && !isEdit && (
-          <div className="pt-6 flex flex-col gap-2">
+          <div className="flex flex-col gap-2 pt-6">
             {variants.map((variant, idx) => (
               <div
                 id={variant.id}
-                className="py-2.5 px-3 border border-grey-20 rounded-rounded"
+                className="border-grey-20 rounded-rounded border py-2.5 px-3"
               >
                 <ControlledCheckbox
                   control={control}
@@ -147,10 +147,10 @@ const PriceOverrides = ({
         </div>
       </Modal.Content>
       <Modal.Footer>
-        <div className="flex w-full h-8 justify-end">
+        <div className="flex h-8 w-full justify-end">
           <Button
             variant="ghost"
-            className="mr-2 w-32 text-small justify-center rounded-rounded"
+            className="text-small rounded-rounded mr-2 w-32 justify-center"
             size="large"
             onClick={onClose}
           >
@@ -158,7 +158,7 @@ const PriceOverrides = ({
           </Button>
           <Button
             size="large"
-            className="text-small justify-center rounded-rounded"
+            className="text-small rounded-rounded justify-center"
             variant="primary"
             onClick={onClick}
             loading={isSubmitting}
@@ -198,7 +198,7 @@ const ControlledCheckbox = ({
       render={({ field }) => {
         return (
           <Checkbox
-            className="shrink-0 inter-small-regular"
+            className="inter-small-regular shrink-0"
             {...props}
             {...field}
             checked={variants?.some((variant) => variant === value)}
diff --git a/packages/admin-ui/ui/src/components/templates/price-overrides/price-amount.tsx b/packages/admin-ui/ui/src/components/templates/price-overrides/price-amount.tsx
index 0c62ccccdb..f6ab824b35 100644
--- a/packages/admin-ui/ui/src/components/templates/price-overrides/price-amount.tsx
+++ b/packages/admin-ui/ui/src/components/templates/price-overrides/price-amount.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import useToggleState from "../../../hooks/use-toggle-state"
 import { currencies } from "../../../utils/currencies"
 import Button from "../../fundamentals/button"
@@ -11,7 +10,7 @@ const PriceAmount = ({ value, onChange }) => {
 
   const currencyName = currencies[value.currency_code?.toUpperCase()]?.name
   return (
-    <div className="flex flex-col gap-3 py-3 first:border-t border-grey-20 border-solid border-b last:border-b-0">
+    <div className="border-grey-20 flex flex-col gap-3 border-b border-solid py-3 first:border-t last:border-b-0">
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-3">
           <div className="inter-base-semibold">
diff --git a/packages/admin-ui/ui/src/components/templates/product-table/overview.tsx b/packages/admin-ui/ui/src/components/templates/product-table/overview.tsx
index 3972dc59e8..514e005f64 100644
--- a/packages/admin-ui/ui/src/components/templates/product-table/overview.tsx
+++ b/packages/admin-ui/ui/src/components/templates/product-table/overview.tsx
@@ -1,6 +1,5 @@
 import { Product } from "@medusajs/medusa"
 import clsx from "clsx"
-import * as React from "react"
 import { Link } from "react-router-dom"
 import { getProductStatusVariant } from "../../../utils/product-status-variant"
 import Button from "../../fundamentals/button"
@@ -23,19 +22,19 @@ const ProductOverview = ({
 }: ProductOverviewProps) => {
   return (
     <>
-      <div className="flex justify-end border-t border-b border-grey-20 py-2.5 pr-xlarge">
+      <div className="border-grey-20 pr-xlarge flex justify-end border-t border-b py-2.5">
         <div className="inter-small-semibold text-grey-50 flex justify-self-end">
           <span
             onClick={toggleListView}
             className={clsx(
-              "hover:bg-grey-5 cursor-pointer rounded p-0.5 text-grey-40"
+              "hover:bg-grey-5 text-grey-40 cursor-pointer rounded p-0.5"
             )}
           >
             <ListIcon size={20} />
           </span>
           <span
             className={clsx(
-              "hover:bg-grey-5 cursor-pointer rounded p-0.5 text-grey-90"
+              "hover:bg-grey-5 text-grey-90 cursor-pointer rounded p-0.5"
             )}
           >
             <TileIcon size={20} />
@@ -55,10 +54,10 @@ const ProductTile = ({ product }) => {
   const { getActions } = useProductActions(product)
 
   return (
-    <div className="p-base group rounded-rounded hover:bg-grey-5 flex-col">
+    <div className="p-base rounded-rounded hover:bg-grey-5 group flex-col">
       <div className="relative">
         <div
-          className={clsx("rounded-base inline-block absolute top-2 right-2")}
+          className={clsx("rounded-base absolute top-2 right-2 inline-block")}
         >
           <Actionables
             actions={getActions()}
@@ -66,7 +65,7 @@ const ProductTile = ({ product }) => {
               <Button
                 variant="ghost"
                 size="small"
-                className="w-xlarge h-xlarge hidden-actions group-hover:opacity-100 focus-within:opacity-100 opacity-0 bg-grey-0"
+                className="w-xlarge h-xlarge hidden-actions bg-grey-0 opacity-0 focus-within:opacity-100 group-hover:opacity-100"
               >
                 <MoreHorizontalIcon size={20} />
               </Button>
@@ -76,11 +75,11 @@ const ProductTile = ({ product }) => {
         <Link to={`${product.id}`}>
           {product.thumbnail ? (
             <img
-              className="min-h-[230px] block object-cover rounded-rounded"
+              className="rounded-rounded block min-h-[230px] object-cover"
               src={product.thumbnail}
             />
           ) : (
-            <div className="min-h-[230px] flex items-center justify-center bg-grey-5 rounded-rounded">
+            <div className="bg-grey-5 rounded-rounded flex min-h-[230px] items-center justify-center">
               <ImagePlaceholder />
             </div>
           )}
diff --git a/packages/admin-ui/ui/src/components/templates/product-table/use-filter-tabs.tsx b/packages/admin-ui/ui/src/components/templates/product-table/use-filter-tabs.tsx
index 5cd3467e8a..b1456c5831 100644
--- a/packages/admin-ui/ui/src/components/templates/product-table/use-filter-tabs.tsx
+++ b/packages/admin-ui/ui/src/components/templates/product-table/use-filter-tabs.tsx
@@ -100,10 +100,10 @@ export const useProductFilters = (
     existing = existing.substring(1)
   }
 
-  const initial = useMemo(() => parseQueryString(existing, defaultFilters), [
-    existing,
-    defaultFilters,
-  ])
+  const initial = useMemo(
+    () => parseQueryString(existing, defaultFilters),
+    [existing, defaultFilters]
+  )
 
   const initialTabs = useMemo(() => {
     const storageString = localStorage.getItem("products::filters")
diff --git a/packages/admin-ui/ui/src/components/templates/product-table/use-product-actions.tsx b/packages/admin-ui/ui/src/components/templates/product-table/use-product-actions.tsx
index b1a7535d03..c7efa9ed01 100644
--- a/packages/admin-ui/ui/src/components/templates/product-table/use-product-actions.tsx
+++ b/packages/admin-ui/ui/src/components/templates/product-table/use-product-actions.tsx
@@ -1,6 +1,5 @@
 import { Product } from "@medusajs/medusa"
 import { useAdminDeleteProduct, useAdminUpdateProduct } from "medusa-react"
-import * as React from "react"
 import { useNavigate } from "react-router-dom"
 import useImperativeDialog from "../../../hooks/use-imperative-dialog"
 import useNotification from "../../../hooks/use-notification"
@@ -50,7 +49,8 @@ const useProductActions = (product: Product) => {
             onSuccess: () => {
               notification(
                 "Success",
-                `Successfully ${product.status === "published" ? "unpublished" : "published"
+                `Successfully ${
+                  product.status === "published" ? "unpublished" : "published"
                 } product`,
                 "success"
               )
diff --git a/packages/admin-ui/ui/src/components/templates/product-table/use-product-column.tsx b/packages/admin-ui/ui/src/components/templates/product-table/use-product-column.tsx
index dae6e0c82d..9e6db4bc67 100644
--- a/packages/admin-ui/ui/src/components/templates/product-table/use-product-column.tsx
+++ b/packages/admin-ui/ui/src/components/templates/product-table/use-product-column.tsx
@@ -46,7 +46,7 @@ const useProductTableColumn = ({ setTileView, setListView, showList }) => {
                 {original.thumbnail ? (
                   <img
                     src={original.thumbnail}
-                    className="object-cover h-full rounded-soft"
+                    className="rounded-soft h-full object-cover"
                   />
                 ) : (
                   <ImagePlaceholder />
diff --git a/packages/admin-ui/ui/src/components/templates/product-table/use-product-filters.ts b/packages/admin-ui/ui/src/components/templates/product-table/use-product-filters.ts
index f463a03936..255fd1e071 100644
--- a/packages/admin-ui/ui/src/components/templates/product-table/use-product-filters.ts
+++ b/packages/admin-ui/ui/src/components/templates/product-table/use-product-filters.ts
@@ -154,10 +154,10 @@ export const useProductFilters = (
     existing = existing.substring(1)
   }
 
-  const initial = useMemo(() => parseQueryString(existing, defaultFilters), [
-    existing,
-    defaultFilters,
-  ])
+  const initial = useMemo(
+    () => parseQueryString(existing, defaultFilters),
+    [existing, defaultFilters]
+  )
 
   const initialTabs = useMemo(() => {
     const storageString = localStorage.getItem("products::filters")
diff --git a/packages/admin-ui/ui/src/components/templates/search-modal/index.tsx b/packages/admin-ui/ui/src/components/templates/search-modal/index.tsx
index b39e3899aa..aa33fc70f6 100644
--- a/packages/admin-ui/ui/src/components/templates/search-modal/index.tsx
+++ b/packages/admin-ui/ui/src/components/templates/search-modal/index.tsx
@@ -74,17 +74,17 @@ const SearchModal = ({ handleClose }) => {
       <RadixDialog.Portal>
         <RadixDialog.Overlay
           className={clsx(
-            "fixed pt-[140px] pb-[100px] z-50 inset-0 backdrop-blur-sm",
+            "fixed inset-0 z-50 pt-[140px] pb-[100px] backdrop-blur-sm",
             { flex: totalLength > 0 }
           )}
         >
           <RadixDialog.Content
             className={clsx(
-              "max-w-[640px] flex-1 flex mx-auto bg-grey-0 rounded-rounded shadow-searchModal"
+              "bg-grey-0 rounded-rounded shadow-searchModal mx-auto flex max-w-[640px] flex-1"
             )}
           >
-            <div className="py-large flex-1 flex flex-col">
-              <div className="flex items-center gap-x-4 pb-large border-solid px-xlarge border-b border-grey-20">
+            <div className="py-large flex flex-1 flex-col">
+              <div className="pb-large px-xlarge border-grey-20 flex items-center gap-x-4 border-b border-solid">
                 <SearchIcon className="text-grey-40" />
                 <Input
                   className="flex-1"
@@ -98,17 +98,17 @@ const SearchModal = ({ handleClose }) => {
                   onClick={handleClear}
                   content="Clear search"
                 >
-                  <CrossIcon className="flex text-grey-50" />
+                  <CrossIcon className="text-grey-50 flex" />
                 </Tooltip>
               </div>
-              <KeyboardShortcuts className="mt-xlarge px-xlarge flex items-center gap-x-3 text-grey-40 inter-small-regular" />
+              <KeyboardShortcuts className="mt-xlarge px-xlarge text-grey-40 inter-small-regular flex items-center gap-x-3" />
               {totalLength > 0 ? (
                 <ul
                   {...getULProps()}
-                  className="flex-1 overflow-y-auto mt-large px-xlarge"
+                  className="mt-large px-xlarge flex-1 overflow-y-auto"
                 >
                   {isFetching ? (
-                    <div className="w-full pt-2xlarge flex items-center justify-center">
+                    <div className="pt-2xlarge flex w-full items-center justify-center">
                       <Spinner size={"large"} variant={"secondary"} />
                     </div>
                   ) : (
diff --git a/packages/admin-ui/ui/src/components/templates/search-modal/keyboard-shortcuts.tsx b/packages/admin-ui/ui/src/components/templates/search-modal/keyboard-shortcuts.tsx
index c5f26f6e90..b4b13f199a 100644
--- a/packages/admin-ui/ui/src/components/templates/search-modal/keyboard-shortcuts.tsx
+++ b/packages/admin-ui/ui/src/components/templates/search-modal/keyboard-shortcuts.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import ArrowDownIcon from "../../fundamentals/icons/arrow-down-icon"
 import ArrowUpIcon from "../../fundamentals/icons/arrow-up-icon"
 import DownLeftIcon from "../../fundamentals/icons/down-left"
@@ -7,26 +6,26 @@ import PointerIcon from "../../fundamentals/icons/pointer-icon"
 const KeyboardShortcuts = ({ ...props }) => {
   return (
     <p {...props}>
-      <span className="rounded p-1 bg-grey-10">
+      <span className="bg-grey-10 rounded p-1">
         <PointerIcon color="#9CA3AF" size="16px" />
       </span>
       or
-      <span className="rounded p-1 bg-grey-10">
+      <span className="bg-grey-10 rounded p-1">
         <ArrowUpIcon color="#9CA3AF" size="16px" />
       </span>
-      <span className="rounded -ml-1 p-1 bg-grey-10">
+      <span className="bg-grey-10 -ml-1 rounded p-1">
         <ArrowDownIcon color="#9CA3AF" size="16px" />
       </span>
       to navigate,
-      <span className="rounded p-1 bg-grey-10">
+      <span className="bg-grey-10 rounded p-1">
         <DownLeftIcon color="#9CA3AF" size="16px" />
       </span>
       to select, and
-      <span className="rounded px-1.5 py-0.5 bg-grey-10 font-semibold leading-small font-small">
+      <span className="bg-grey-10 leading-small font-small rounded px-1.5 py-0.5 font-semibold">
         <OSCommandIcon />
       </span>
       <span className="-mx-2">+</span>
-      <span className="rounded px-1.5 py-0.5 bg-grey-10 font-semibold leading-small font-small">
+      <span className="bg-grey-10 leading-small font-small rounded px-1.5 py-0.5 font-semibold">
         K
       </span>
       to search anytime
diff --git a/packages/admin-ui/ui/src/components/templates/search-modal/results/customer-results.tsx b/packages/admin-ui/ui/src/components/templates/search-modal/results/customer-results.tsx
index 9675f26c9d..bae71473c5 100644
--- a/packages/admin-ui/ui/src/components/templates/search-modal/results/customer-results.tsx
+++ b/packages/admin-ui/ui/src/components/templates/search-modal/results/customer-results.tsx
@@ -1,5 +1,4 @@
 import clsx from "clsx"
-import React from "react"
 import SectionCollapsible from "../section-collapsible"
 import { useAdminCustomers } from "medusa-react"
 import useKeyboardNavigationList from "../use-keyboard-navigation-list"
@@ -29,16 +28,16 @@ const CustomerResults = ({
                 index: offset + index,
               })}
               className={clsx(
-                "px-base group py-1.5 focus:bg-grey-5 rounded-rounded",
+                "px-base focus:bg-grey-5 rounded-rounded group py-1.5",
                 { "bg-grey-5": selected === offset + index }
               )}
             >
               <Link
                 to={`/a/customers/${customer.id}`}
-                className="py-1.5 flex items-center rounded-rounded justify-between"
+                className="rounded-rounded flex items-center justify-between py-1.5"
               >
                 <div className="flex items-center gap-x-3">
-                  <div className="w-[20px] h-[20px] shrink-0">
+                  <div className="h-[20px] w-[20px] shrink-0">
                     <Avatar user={customer} />
                   </div>
                   <p className="inter-small-regular text-grey-90">
@@ -49,7 +48,7 @@ const CustomerResults = ({
                 </div>
                 <span
                   className={clsx(
-                    "group-focus:visible text-grey-40 inter-small-regular",
+                    "text-grey-40 inter-small-regular group-focus:visible",
                     {
                       invisible: selected !== offset + index,
                     }
diff --git a/packages/admin-ui/ui/src/components/templates/search-modal/results/discount-results.tsx b/packages/admin-ui/ui/src/components/templates/search-modal/results/discount-results.tsx
index f352432cde..d819e9ef82 100644
--- a/packages/admin-ui/ui/src/components/templates/search-modal/results/discount-results.tsx
+++ b/packages/admin-ui/ui/src/components/templates/search-modal/results/discount-results.tsx
@@ -1,5 +1,4 @@
 import clsx from "clsx"
-import React from "react"
 import SectionCollapsible from "../section-collapsible"
 import { useAdminDiscounts } from "medusa-react"
 import useKeyboardNavigationList from "../use-keyboard-navigation-list"
@@ -26,16 +25,16 @@ const DiscountResults = ({
             <li
               {...getLIProps({ index: offset + index })}
               className={clsx(
-                "px-base py-1.5 group focus:bg-grey-5 rounded-rounded",
+                "px-base focus:bg-grey-5 rounded-rounded group py-1.5",
                 { "bg-grey-5": selected === offset + index }
               )}
             >
               <Link
                 to={`/a/discounts/${discount.id}`}
-                className="py-1.5 flex items-center rounded-rounded justify-between"
+                className="rounded-rounded flex items-center justify-between py-1.5"
               >
                 <div className="flex items-center gap-x-3">
-                  <div className="py-0.5 px-2 bg-grey-10 rounded-rounded">
+                  <div className="bg-grey-10 rounded-rounded py-0.5 px-2">
                     <span className="inter-small-regular">{discount.code}</span>
                   </div>
                   <p className="inter-small-regular text-grey-90">
@@ -44,7 +43,7 @@ const DiscountResults = ({
                 </div>
                 <span
                   className={clsx(
-                    "group-focus:visible text-grey-40 inter-small-regular",
+                    "text-grey-40 inter-small-regular group-focus:visible",
                     {
                       invisible: selected !== offset + index,
                     }
diff --git a/packages/admin-ui/ui/src/components/templates/search-modal/results/order-results.tsx b/packages/admin-ui/ui/src/components/templates/search-modal/results/order-results.tsx
index 687ad563a8..a01659ebba 100644
--- a/packages/admin-ui/ui/src/components/templates/search-modal/results/order-results.tsx
+++ b/packages/admin-ui/ui/src/components/templates/search-modal/results/order-results.tsx
@@ -1,5 +1,4 @@
 import clsx from "clsx"
-import React from "react"
 import SectionCollapsible from "../section-collapsible"
 import { useAdminOrders } from "medusa-react"
 import useKeyboardNavigationList from "../use-keyboard-navigation-list"
@@ -25,13 +24,13 @@ const OrderResults = ({
           {orders?.map((order, index) => (
             <li
               {...getLIProps({ index: offset + index })}
-              className={clsx("py-1.5 group focus:bg-grey-5 rounded-rounded", {
+              className={clsx("focus:bg-grey-5 rounded-rounded group py-1.5", {
                 "bg-grey-5": selected === offset + index,
               })}
             >
               <Link
                 to={`/a/orders/${order.id}`}
-                className="px-base py-1.5 flex items-center rounded-rounded justify-between"
+                className="px-base rounded-rounded flex items-center justify-between py-1.5"
               >
                 <div className="flex items-center gap-x-3">
                   <span className="inter-small-semibold">
@@ -43,7 +42,7 @@ const OrderResults = ({
                 </div>
                 <span
                   className={clsx(
-                    "group-focus:visible text-grey-40 inter-small-regular",
+                    "text-grey-40 inter-small-regular group-focus:visible",
                     {
                       invisible: selected !== offset + index,
                     }
diff --git a/packages/admin-ui/ui/src/components/templates/search-modal/results/product-results.tsx b/packages/admin-ui/ui/src/components/templates/search-modal/results/product-results.tsx
index 5eb9470cdc..5c2610494e 100644
--- a/packages/admin-ui/ui/src/components/templates/search-modal/results/product-results.tsx
+++ b/packages/admin-ui/ui/src/components/templates/search-modal/results/product-results.tsx
@@ -1,5 +1,4 @@
 import clsx from "clsx"
-import React from "react"
 import SectionCollapsible from "../section-collapsible"
 import { useAdminProducts } from "medusa-react"
 import useKeyboardNavigationList from "../use-keyboard-navigation-list"
@@ -28,7 +27,7 @@ const ProductResults = ({
                 index: offset + index,
               })}
               className={clsx(
-                "px-base py-1.5 group focus:bg-grey-5 rounded-rounded",
+                "px-base focus:bg-grey-5 rounded-rounded group py-1.5",
                 {
                   "bg-grey-5": selected === offset + index,
                 }
@@ -41,7 +40,7 @@ const ProductResults = ({
                 <div className="flex items-center gap-x-3">
                   <img
                     src={product.thumbnail}
-                    className="h-[32px] w-[24px] object-cover rounded"
+                    className="h-[32px] w-[24px] rounded object-cover"
                   />
                   <p className="inter-small-regular text-grey-90">
                     {product.title}
@@ -49,7 +48,7 @@ const ProductResults = ({
                 </div>
                 <span
                   className={clsx(
-                    "group-focus:visible text-grey-40 inter-small-regular",
+                    "text-grey-40 inter-small-regular group-focus:visible",
                     {
                       invisible: selected !== offset + index,
                     }
diff --git a/packages/admin-ui/ui/src/components/templates/search-modal/section-collapsible.tsx b/packages/admin-ui/ui/src/components/templates/search-modal/section-collapsible.tsx
index bdaf6367f3..55d6771b62 100644
--- a/packages/admin-ui/ui/src/components/templates/search-modal/section-collapsible.tsx
+++ b/packages/admin-ui/ui/src/components/templates/search-modal/section-collapsible.tsx
@@ -8,7 +8,7 @@ const SectionCollapsible = ({ title, length, children, ...props }) => {
   return (
     <RadixCollapsible.Root open={open} onOpenChange={setOpen} {...props}>
       <RadixCollapsible.Trigger asChild>
-        <button className="px-base py-small w-full justify-between flex items-center bg-grey-10 rounded-rounded">
+        <button className="px-base py-small bg-grey-10 rounded-rounded flex w-full items-center justify-between">
           <h6 className="inter-base-semibold text-grey-90">
             {title}
             <span className="inter-base-regular text-grey-40"> ({length})</span>
diff --git a/packages/admin-ui/ui/src/components/templates/settings-overview.tsx b/packages/admin-ui/ui/src/components/templates/settings-overview.tsx
index d5bd8e6077..d0f14b6857 100644
--- a/packages/admin-ui/ui/src/components/templates/settings-overview.tsx
+++ b/packages/admin-ui/ui/src/components/templates/settings-overview.tsx
@@ -8,7 +8,7 @@ const SettingsOverview: React.FC<React.PropsWithChildren> = ({ children }) => {
         title={"Settings"}
         subtitle={"Manage the settings for your Medusa store"}
       />
-      <div className="grid medium:grid-cols-2 auto-cols-fr grid-cols-1 gap-x-base gap-y-xsmall">
+      <div className="medium:grid-cols-2 gap-x-base gap-y-xsmall grid auto-cols-fr grid-cols-1">
         {children}
       </div>
     </div>
diff --git a/packages/admin-ui/ui/src/components/templates/transfer-orders-modal/index.tsx b/packages/admin-ui/ui/src/components/templates/transfer-orders-modal/index.tsx
index 93027e922b..64aebe49e3 100644
--- a/packages/admin-ui/ui/src/components/templates/transfer-orders-modal/index.tsx
+++ b/packages/admin-ui/ui/src/components/templates/transfer-orders-modal/index.tsx
@@ -127,10 +127,10 @@ const TransferOrdersModal: React.FC<TransferOrdersModalProps> = ({
           <h2 className="inter-xlarge-semibold">Transfer order</h2>
         </Modal.Header>
         <Modal.Content>
-          <div className="flex flex-col space-y-xlarge">
+          <div className="space-y-xlarge flex flex-col">
             <div className="space-y-xsmall">
               <h3 className="inter-base-semibold">Order</h3>
-              <div className="flex items-center justify-between border-grey-20 border rounded-rounded py-xsmall px-2.5">
+              <div className="border-grey-20 rounded-rounded py-xsmall flex items-center justify-between border px-2.5">
                 <Badge variant="default">
                   <span className="text-grey-60">{`#${order.display_id}`}</span>
                 </Badge>
@@ -145,7 +145,7 @@ const TransferOrdersModal: React.FC<TransferOrdersModalProps> = ({
                 />
               </div>
             </div>
-            <div className="w-full grid grid-cols-2">
+            <div className="grid w-full grid-cols-2">
               <div className="flex flex-col">
                 <span className="inter-base-semibold">Current Owner</span>
                 <span className="inter-base-regular">
@@ -172,7 +172,7 @@ const TransferOrdersModal: React.FC<TransferOrdersModalProps> = ({
                 />
               </div>
             </div>
-            <div className="w-full grid grid-cols-2">
+            <div className="grid w-full grid-cols-2">
               <div className="flex flex-col">
                 <span className="inter-base-semibold">New Owner</span>
                 <span className="inter-base-regular">
@@ -199,11 +199,11 @@ const TransferOrdersModal: React.FC<TransferOrdersModalProps> = ({
         </Modal.Content>
         <Modal.Footer>
           <div className="flex w-full justify-end">
-            <div className="flex gap-x-xsmall">
+            <div className="gap-x-xsmall flex">
               <Button
                 onClick={onDismiss}
                 size="small"
-                className="border border-grey-20"
+                className="border-grey-20 border"
                 variant="ghost"
               >
                 Cancel
diff --git a/packages/admin-ui/ui/src/components/templates/two-split-pane.tsx b/packages/admin-ui/ui/src/components/templates/two-split-pane.tsx
index 8c3b788af9..ed335a8fa9 100644
--- a/packages/admin-ui/ui/src/components/templates/two-split-pane.tsx
+++ b/packages/admin-ui/ui/src/components/templates/two-split-pane.tsx
@@ -18,8 +18,8 @@ const TwoSplitPane: React.FC<TwoSplitPaneProps> = ({
 
   const heightClass = height
     ? {
-      gridTemplateRows: `${height}px`,
-    }
+        gridTemplateRows: `${height}px`,
+      }
     : undefined
 
   if (childrenCount > 2) {
@@ -28,7 +28,7 @@ const TwoSplitPane: React.FC<TwoSplitPaneProps> = ({
 
   return (
     <div
-      className={clsx("grid gap-xsmall grid-cols-1", className, {
+      className={clsx("gap-xsmall grid grid-cols-1", className, {
         "medium:grid-cols-2": !threeCols,
         "medium:grid-cols-3": threeCols,
       })}
@@ -38,7 +38,7 @@ const TwoSplitPane: React.FC<TwoSplitPaneProps> = ({
       {Children.map(children, (child, i) => {
         return (
           <div
-            className={clsx("w-full h-full", {
+            className={clsx("h-full w-full", {
               "col-span-2": threeCols && i === 1,
             })}
             key={i}
diff --git a/packages/admin-ui/ui/src/components/templates/user-table.tsx b/packages/admin-ui/ui/src/components/templates/user-table.tsx
index 5beb8ba1f1..d653d34ce4 100644
--- a/packages/admin-ui/ui/src/components/templates/user-table.tsx
+++ b/packages/admin-ui/ui/src/components/templates/user-table.tsx
@@ -273,7 +273,7 @@ const UserTable: React.FC<UserTableProps> = ({
   }
 
   return (
-    <div className="w-full h-full overflow-y-auto">
+    <div className="h-full w-full overflow-y-auto">
       <Table
         filteringOptions={filteringOptions}
         enableSearch
diff --git a/packages/admin-ui/ui/src/domain/collections/details/index.tsx b/packages/admin-ui/ui/src/domain/collections/details/index.tsx
index 6080b5bb69..d102a1482e 100644
--- a/packages/admin-ui/ui/src/domain/collections/details/index.tsx
+++ b/packages/admin-ui/ui/src/domain/collections/details/index.tsx
@@ -107,15 +107,15 @@ const CollectionDetails = () => {
 
   return (
     <>
-      <div className="flex flex-col !pb-xlarge">
+      <div className="!pb-xlarge flex flex-col">
         <BackButton
           className="mb-xsmall"
           path="/a/products?view=collections"
           label="Back to Collections"
         />
-        <div className="rounded-rounded py-large px-xlarge border border-grey-20 bg-grey-0 mb-large">
+        <div className="rounded-rounded py-large px-xlarge border-grey-20 bg-grey-0 mb-large border">
           {isLoading || !collection ? (
-            <div className="flex items-center w-full h-12">
+            <div className="flex h-12 w-full items-center">
               <Spinner variant="secondary" size="large" />
             </div>
           ) : (
@@ -147,7 +147,7 @@ const CollectionDetails = () => {
                 </p>
               </div>
               {collection.metadata && (
-                <div className="mt-large flex flex-col gap-y-base">
+                <div className="mt-large gap-y-base flex flex-col">
                   <h3 className="inter-base-semibold">Metadata</h3>
                   <div>
                     <JSONView data={collection.metadata} />
diff --git a/packages/admin-ui/ui/src/domain/customers/details/edit.tsx b/packages/admin-ui/ui/src/domain/customers/details/edit.tsx
index 0f91c7b792..9e07b858b0 100644
--- a/packages/admin-ui/ui/src/domain/customers/details/edit.tsx
+++ b/packages/admin-ui/ui/src/domain/customers/details/edit.tsx
@@ -1,6 +1,6 @@
 import { Customer } from "@medusajs/medusa"
 import { useAdminUpdateCustomer } from "medusa-react"
-import React, { useEffect } from "react"
+import { useEffect } from "react"
 import { useForm } from "react-hook-form"
 import Button from "../../../components/fundamentals/button"
 import LockIcon from "../../../components/fundamentals/icons/lock-icon"
@@ -73,7 +73,7 @@ const EditCustomerModal = ({
         </Modal.Header>
         <Modal.Content>
           <div className="inter-base-semibold text-grey-90 mb-4">General</div>
-          <div className="w-full flex mb-4 space-x-2">
+          <div className="mb-4 flex w-full space-x-2">
             <InputField
               label="First Name"
               {...register("first_name")}
@@ -108,7 +108,7 @@ const EditCustomerModal = ({
           </div>
         </Modal.Content>
         <Modal.Footer>
-          <div className="w-full flex justify-end">
+          <div className="flex w-full justify-end">
             <Button
               variant="ghost"
               size="small"
diff --git a/packages/admin-ui/ui/src/domain/customers/groups/context/customer-group-context.tsx b/packages/admin-ui/ui/src/domain/customers/groups/context/customer-group-context.tsx
index 5746992221..136b2c0a26 100644
--- a/packages/admin-ui/ui/src/domain/customers/groups/context/customer-group-context.tsx
+++ b/packages/admin-ui/ui/src/domain/customers/groups/context/customer-group-context.tsx
@@ -1,4 +1,4 @@
-import React, { createContext, PropsWithChildren, useState } from "react"
+import { createContext, PropsWithChildren, useState } from "react"
 
 import { CustomerGroup } from "@medusajs/medusa"
 import {
diff --git a/packages/admin-ui/ui/src/domain/customers/groups/customer-group-modal.tsx b/packages/admin-ui/ui/src/domain/customers/groups/customer-group-modal.tsx
index 26eed7f42c..1075154b8e 100644
--- a/packages/admin-ui/ui/src/domain/customers/groups/customer-group-modal.tsx
+++ b/packages/admin-ui/ui/src/domain/customers/groups/customer-group-modal.tsx
@@ -3,7 +3,7 @@ import {
   AdminPostCustomerGroupsReq,
   CustomerGroup,
 } from "@medusajs/medusa"
-import React, { useState } from "react"
+import { useState } from "react"
 import { useForm } from "react-hook-form"
 
 import Button from "../../../components/fundamentals/button"
@@ -87,10 +87,10 @@ function CustomerGroupModal(props: CustomerGroupModalProps) {
         </Modal.Content>
 
         <Modal.Footer>
-          <div className="flex w-full h-8 justify-end">
+          <div className="flex h-8 w-full justify-end">
             <Button
               variant="ghost"
-              className="mr-2 w-32 text-small justify-center"
+              className="text-small mr-2 w-32 justify-center"
               size="large"
               onClick={handleClose}
             >
@@ -98,7 +98,7 @@ function CustomerGroupModal(props: CustomerGroupModalProps) {
             </Button>
             <Button
               size="medium"
-              className="w-32 text-small justify-center"
+              className="text-small w-32 justify-center"
               variant="primary"
               onClick={handleFromSubmit(onSubmit)}
             >
diff --git a/packages/admin-ui/ui/src/domain/customers/groups/details.tsx b/packages/admin-ui/ui/src/domain/customers/groups/details.tsx
index f2980d05fc..7e88622c46 100644
--- a/packages/admin-ui/ui/src/domain/customers/groups/details.tsx
+++ b/packages/admin-ui/ui/src/domain/customers/groups/details.tsx
@@ -37,7 +37,7 @@ const defaultQueryProps = {
  */
 function CustomersListPlaceholder() {
   return (
-    <div className="h-full flex center justify-center items-center min-h-[756px]">
+    <div className="center flex h-full min-h-[756px] items-center justify-center">
       <span className="text-xs text-gray-400">
         No customers in this group yet
       </span>
@@ -127,7 +127,7 @@ function CustomerGroupCustomersList(props: CustomerGroupCustomersListProps) {
     <BodyCard
       title="Customers"
       actionables={actions}
-      className="w-full my-4 min-h-[756px]"
+      className="my-4 min-h-[756px] w-full"
     >
       {showCustomersModal && (
         <EditCustomersTable
diff --git a/packages/admin-ui/ui/src/domain/customers/groups/index.tsx b/packages/admin-ui/ui/src/domain/customers/groups/index.tsx
index cb0c909724..91e7691e55 100644
--- a/packages/admin-ui/ui/src/domain/customers/groups/index.tsx
+++ b/packages/admin-ui/ui/src/domain/customers/groups/index.tsx
@@ -28,8 +28,8 @@ function Index() {
   ]
 
   return (
-    <div className="flex flex-col grow h-full">
-      <div className="w-full flex flex-col grow">
+    <div className="flex h-full grow flex-col">
+      <div className="flex w-full grow flex-col">
         <BodyCard
           actionables={actions}
           customHeader={<CustomersPageTableHeader activeView="groups" />}
diff --git a/packages/admin-ui/ui/src/domain/discounts/details/conditions/add-condition/conditions-provider.tsx b/packages/admin-ui/ui/src/domain/discounts/details/conditions/add-condition/conditions-provider.tsx
index 9ec7c3c391..d330393c64 100644
--- a/packages/admin-ui/ui/src/domain/discounts/details/conditions/add-condition/conditions-provider.tsx
+++ b/packages/admin-ui/ui/src/domain/discounts/details/conditions/add-condition/conditions-provider.tsx
@@ -1,6 +1,6 @@
 import { Discount } from "@medusajs/medusa"
 import { useAdminUpdateDiscount } from "medusa-react"
-import React, {
+import {
   createContext,
   ReactNode,
   useContext,
diff --git a/packages/admin-ui/ui/src/domain/discounts/details/conditions/edit-condition/add-condition-resources/collections/add-collections.tsx b/packages/admin-ui/ui/src/domain/discounts/details/conditions/edit-condition/add-condition-resources/collections/add-collections.tsx
index fbc99bc1a2..01b9623b3a 100644
--- a/packages/admin-ui/ui/src/domain/discounts/details/conditions/edit-condition/add-condition-resources/collections/add-collections.tsx
+++ b/packages/admin-ui/ui/src/domain/discounts/details/conditions/edit-condition/add-condition-resources/collections/add-collections.tsx
@@ -1,5 +1,5 @@
 import { useAdminCollections } from "medusa-react"
-import React, { useContext, useState } from "react"
+import { useContext, useState } from "react"
 import Button from "../../../../../../../components/fundamentals/button"
 import Modal from "../../../../../../../components/molecules/modal"
 import { LayeredModalContext } from "../../../../../../../components/molecules/modal/layered-modal"
@@ -53,7 +53,7 @@ const AddCollectionConditionsScreen = () => {
         />
       </Modal.Content>
       <Modal.Footer>
-        <div className="flex justify-end w-full space-x-xsmall">
+        <div className="space-x-xsmall flex w-full justify-end">
           <Button variant="secondary" size="small" onClick={pop}>
             Cancel
           </Button>
diff --git a/packages/admin-ui/ui/src/domain/discounts/details/conditions/edit-condition/add-condition-resources/collections/collections-conditions-table.tsx b/packages/admin-ui/ui/src/domain/discounts/details/conditions/edit-condition/add-condition-resources/collections/collections-conditions-table.tsx
index 9aff5976aa..75fd0279a6 100644
--- a/packages/admin-ui/ui/src/domain/discounts/details/conditions/edit-condition/add-condition-resources/collections/collections-conditions-table.tsx
+++ b/packages/admin-ui/ui/src/domain/discounts/details/conditions/edit-condition/add-condition-resources/collections/collections-conditions-table.tsx
@@ -1,5 +1,5 @@
 import { useAdminCollections } from "medusa-react"
-import React, { useEffect, useState } from "react"
+import { useEffect, useState } from "react"
 import Modal from "../../../../../../../components/molecules/modal"
 import { SelectableTable } from "../../../../../../../components/templates/selectable-table"
 import useQueryFilters from "../../../../../../../hooks/use-query-filters"
@@ -17,11 +17,8 @@ const ProductCollectionsConditionsTable = () => {
 
   const [selectedResources, setSelectedResources] = useState<string[]>([])
 
-  const {
-    condition,
-    removeConditionResources,
-    isLoading,
-  } = useEditConditionContext()
+  const { condition, removeConditionResources, isLoading } =
+    useEditConditionContext()
 
   const {
     isLoading: isLoadingCollections,
diff --git a/packages/admin-ui/ui/src/domain/discounts/details/conditions/edit-condition/add-condition-resources/customer-groups/add-customer-groups.tsx b/packages/admin-ui/ui/src/domain/discounts/details/conditions/edit-condition/add-condition-resources/customer-groups/add-customer-groups.tsx
index d952756d29..6f60a4974b 100644
--- a/packages/admin-ui/ui/src/domain/discounts/details/conditions/edit-condition/add-condition-resources/customer-groups/add-customer-groups.tsx
+++ b/packages/admin-ui/ui/src/domain/discounts/details/conditions/edit-condition/add-condition-resources/customer-groups/add-customer-groups.tsx
@@ -1,5 +1,5 @@
 import { useAdminCustomerGroups } from "medusa-react"
-import React, { useContext, useState } from "react"
+import { useContext, useState } from "react"
 import Modal from "../../../../../../../components/molecules/modal"
 import { SelectableTable } from "../../../../../../../components/templates/selectable-table"
 import useQueryFilters from "../../../../../../../hooks/use-query-filters"
@@ -53,7 +53,7 @@ const AddCustomerGroupsConditionsScreen = () => {
         />
       </Modal.Content>
       <Modal.Footer>
-        <div className="flex justify-end w-full space-x-xsmall">
+        <div className="space-x-xsmall flex w-full justify-end">
           <Button variant="secondary" size="small" onClick={pop}>
             Cancel
           </Button>
diff --git a/packages/admin-ui/ui/src/domain/discounts/details/conditions/edit-condition/add-condition-resources/customer-groups/customer-groups-conditions-table.tsx b/packages/admin-ui/ui/src/domain/discounts/details/conditions/edit-condition/add-condition-resources/customer-groups/customer-groups-conditions-table.tsx
index 83b66ae12f..4d43207b2e 100644
--- a/packages/admin-ui/ui/src/domain/discounts/details/conditions/edit-condition/add-condition-resources/customer-groups/customer-groups-conditions-table.tsx
+++ b/packages/admin-ui/ui/src/domain/discounts/details/conditions/edit-condition/add-condition-resources/customer-groups/customer-groups-conditions-table.tsx
@@ -1,5 +1,5 @@
 import { useAdminCustomerGroups } from "medusa-react"
-import React, { useEffect, useState } from "react"
+import { useEffect, useState } from "react"
 import Modal from "../../../../../../../components/molecules/modal"
 import { SelectableTable } from "../../../../../../../components/templates/selectable-table"
 import useQueryFilters from "../../../../../../../hooks/use-query-filters"
@@ -15,11 +15,8 @@ import ExistingConditionTableActions from "../../condition-table-actions"
 const CustomerGroupsConditionsTable = () => {
   const params = useQueryFilters(defaultQueryProps)
 
-  const {
-    condition,
-    removeConditionResources,
-    isLoading,
-  } = useEditConditionContext()
+  const { condition, removeConditionResources, isLoading } =
+    useEditConditionContext()
 
   const {
     isLoading: isLoadingCustomerGroups,
diff --git a/packages/admin-ui/ui/src/domain/discounts/details/conditions/edit-condition/add-condition-resources/product-types/add-types.tsx b/packages/admin-ui/ui/src/domain/discounts/details/conditions/edit-condition/add-condition-resources/product-types/add-types.tsx
index fdaa592445..b145d6c6d4 100644
--- a/packages/admin-ui/ui/src/domain/discounts/details/conditions/edit-condition/add-condition-resources/product-types/add-types.tsx
+++ b/packages/admin-ui/ui/src/domain/discounts/details/conditions/edit-condition/add-condition-resources/product-types/add-types.tsx
@@ -1,5 +1,5 @@
 import { useAdminProductTypes } from "medusa-react"
-import React, { useContext, useState } from "react"
+import { useContext, useState } from "react"
 import Button from "../../../../../../../components/fundamentals/button"
 import Modal from "../../../../../../../components/molecules/modal"
 import { LayeredModalContext } from "../../../../../../../components/molecules/modal/layered-modal"
@@ -55,7 +55,7 @@ const AddTypesConditionsScreen = () => {
         />
       </Modal.Content>
       <Modal.Footer>
-        <div className="flex justify-end w-full space-x-xsmall">
+        <div className="space-x-xsmall flex w-full justify-end">
           <Button variant="secondary" size="small" onClick={pop}>
             Cancel
           </Button>
diff --git a/packages/admin-ui/ui/src/domain/discounts/details/conditions/edit-condition/add-condition-resources/product-types/type-conditions-table.tsx b/packages/admin-ui/ui/src/domain/discounts/details/conditions/edit-condition/add-condition-resources/product-types/type-conditions-table.tsx
index d4f4104e49..c7a88a5ec8 100644
--- a/packages/admin-ui/ui/src/domain/discounts/details/conditions/edit-condition/add-condition-resources/product-types/type-conditions-table.tsx
+++ b/packages/admin-ui/ui/src/domain/discounts/details/conditions/edit-condition/add-condition-resources/product-types/type-conditions-table.tsx
@@ -1,5 +1,5 @@
 import { useAdminProductTypes } from "medusa-react"
-import React, { useEffect, useState } from "react"
+import { useEffect, useState } from "react"
 import Modal from "../../../../../../../components/molecules/modal"
 import { SelectableTable } from "../../../../../../../components/templates/selectable-table"
 import useQueryFilters from "../../../../../../../hooks/use-query-filters"
@@ -15,11 +15,8 @@ import ExistingConditionTableActions from "../../condition-table-actions"
 const ProductTypesConditionsTable = () => {
   const params = useQueryFilters(defaultQueryProps)
 
-  const {
-    condition,
-    removeConditionResources,
-    isLoading,
-  } = useEditConditionContext()
+  const { condition, removeConditionResources, isLoading } =
+    useEditConditionContext()
 
   const {
     isLoading: isLoadingTypes,
diff --git a/packages/admin-ui/ui/src/domain/discounts/details/conditions/edit-condition/add-condition-resources/products/add-products.tsx b/packages/admin-ui/ui/src/domain/discounts/details/conditions/edit-condition/add-condition-resources/products/add-products.tsx
index c2e328e099..f69621c55d 100644
--- a/packages/admin-ui/ui/src/domain/discounts/details/conditions/edit-condition/add-condition-resources/products/add-products.tsx
+++ b/packages/admin-ui/ui/src/domain/discounts/details/conditions/edit-condition/add-condition-resources/products/add-products.tsx
@@ -1,10 +1,9 @@
 import { useAdminProducts } from "medusa-react"
-import React, { useContext, useEffect, useState } from "react"
+import { useContext, useState } from "react"
 import Button from "../../../../../../../components/fundamentals/button"
 import Modal from "../../../../../../../components/molecules/modal"
 import { LayeredModalContext } from "../../../../../../../components/molecules/modal/layered-modal"
 import { SelectableTable } from "../../../../../../../components/templates/selectable-table"
-import { useDebounce } from "../../../../../../../hooks/use-debounce"
 import useQueryFilters from "../../../../../../../hooks/use-query-filters"
 import { defaultQueryProps } from "../../../../..//new/discount-form/condition-tables/shared/common"
 import {
@@ -51,7 +50,7 @@ const AddProductConditionsScreen = () => {
         />
       </Modal.Content>
       <Modal.Footer>
-        <div className="flex justify-end w-full space-x-xsmall">
+        <div className="space-x-xsmall flex w-full justify-end">
           <Button variant="secondary" size="small" onClick={pop}>
             Cancel
           </Button>
diff --git a/packages/admin-ui/ui/src/domain/discounts/details/conditions/edit-condition/add-condition-resources/tags/add-tags.tsx b/packages/admin-ui/ui/src/domain/discounts/details/conditions/edit-condition/add-condition-resources/tags/add-tags.tsx
index 8130c84580..6e9fd4b7b8 100644
--- a/packages/admin-ui/ui/src/domain/discounts/details/conditions/edit-condition/add-condition-resources/tags/add-tags.tsx
+++ b/packages/admin-ui/ui/src/domain/discounts/details/conditions/edit-condition/add-condition-resources/tags/add-tags.tsx
@@ -1,5 +1,5 @@
 import { useAdminProductTags } from "medusa-react"
-import React, { useContext, useState } from "react"
+import { useContext, useState } from "react"
 import Button from "../../../../../../../components/fundamentals/button"
 import Modal from "../../../../../../../components/molecules/modal"
 import { LayeredModalContext } from "../../../../../../../components/molecules/modal/layered-modal"
@@ -51,7 +51,7 @@ const AddTagsConditionsScreen = () => {
         />
       </Modal.Content>
       <Modal.Footer>
-        <div className="flex justify-end w-full space-x-xsmall">
+        <div className="space-x-xsmall flex w-full justify-end">
           <Button variant="secondary" size="small" onClick={pop}>
             Cancel
           </Button>
diff --git a/packages/admin-ui/ui/src/domain/discounts/details/conditions/edit-condition/add-condition-resources/tags/tags-conditions-table.tsx b/packages/admin-ui/ui/src/domain/discounts/details/conditions/edit-condition/add-condition-resources/tags/tags-conditions-table.tsx
index 08c0b85668..f952a43add 100644
--- a/packages/admin-ui/ui/src/domain/discounts/details/conditions/edit-condition/add-condition-resources/tags/tags-conditions-table.tsx
+++ b/packages/admin-ui/ui/src/domain/discounts/details/conditions/edit-condition/add-condition-resources/tags/tags-conditions-table.tsx
@@ -1,5 +1,5 @@
 import { useAdminProductTags } from "medusa-react"
-import React, { useEffect, useState } from "react"
+import { useEffect, useState } from "react"
 import Modal from "../../../../../../../components/molecules/modal"
 import { SelectableTable } from "../../../../../../../components/templates/selectable-table"
 import useQueryFilters from "../../../../../../../hooks/use-query-filters"
@@ -15,11 +15,8 @@ import ExistingConditionTableActions from "../../condition-table-actions"
 const ProductTagsConditionsTable = () => {
   const params = useQueryFilters(defaultQueryProps)
 
-  const {
-    condition,
-    removeConditionResources,
-    isLoading,
-  } = useEditConditionContext()
+  const { condition, removeConditionResources, isLoading } =
+    useEditConditionContext()
 
   const {
     isLoading: isLoadingTags,
diff --git a/packages/admin-ui/ui/src/domain/discounts/details/conditions/edit-condition/condition-table-actions.tsx b/packages/admin-ui/ui/src/domain/discounts/details/conditions/edit-condition/condition-table-actions.tsx
index 6ca177dfcb..cbc00bae3a 100644
--- a/packages/admin-ui/ui/src/domain/discounts/details/conditions/edit-condition/condition-table-actions.tsx
+++ b/packages/admin-ui/ui/src/domain/discounts/details/conditions/edit-condition/condition-table-actions.tsx
@@ -1,5 +1,4 @@
 import clsx from "clsx"
-import React from "react"
 import { useContext } from "react"
 import Button from "../../../../../components/fundamentals/button"
 import PlusIcon from "../../../../../components/fundamentals/icons/plus-icon"
@@ -32,18 +31,18 @@ const ExistingConditionTableActions = ({
   const { push } = useContext(LayeredModalContext)
 
   return (
-    <div className="flex space-x-xsmall h-[34px] overflow-hidden">
+    <div className="space-x-xsmall flex h-[34px] overflow-hidden">
       <div className={clsx("transition-all duration-200", classes)}>
-        <div className="divide-x flex items-center h-[34px] mb-2">
-          <span className="mr-3 inter-small-regular text-grey-50">
+        <div className="mb-2 flex h-[34px] items-center divide-x">
+          <span className="inter-small-regular text-grey-50 mr-3">
             {numberOfSelectedRows} selected
           </span>
-          <div className="flex space-x-xsmall pl-3">
+          <div className="space-x-xsmall flex pl-3">
             <Button
               onClick={onDeselect}
               size="small"
               variant="ghost"
-              className="border border-grey-20"
+              className="border-grey-20 border"
             >
               Deselect
             </Button>
@@ -51,17 +50,17 @@ const ExistingConditionTableActions = ({
               onClick={onRemove}
               size="small"
               variant="ghost"
-              className="border border-grey-20 text-rose-50"
+              className="border-grey-20 border text-rose-50"
             >
               Remove
             </Button>
           </div>
         </div>
-        <div className="flex justify-end h-[34px]">
+        <div className="flex h-[34px] justify-end">
           <Button
             size="small"
             variant="ghost"
-            className="border border-grey-20"
+            className="border-grey-20 border"
             onClick={() => push(addConditionsModalScreen)}
           >
             <PlusIcon size={20} /> Add
diff --git a/packages/admin-ui/ui/src/domain/discounts/details/conditions/edit-condition/edit-condition-modal.tsx b/packages/admin-ui/ui/src/domain/discounts/details/conditions/edit-condition/edit-condition-modal.tsx
index a0ac9c3ee2..0487d9efa4 100644
--- a/packages/admin-ui/ui/src/domain/discounts/details/conditions/edit-condition/edit-condition-modal.tsx
+++ b/packages/admin-ui/ui/src/domain/discounts/details/conditions/edit-condition/edit-condition-modal.tsx
@@ -1,4 +1,4 @@
-import React, { useContext } from "react"
+import { useContext } from "react"
 import Button from "../../../../../components/fundamentals/button"
 import Modal from "../../../../../components/molecules/modal"
 import LayeredModal, {
@@ -54,7 +54,7 @@ const EditConditionsModal = ({ open, condition, discount, onClose }: Props) => {
           </Modal.Header>
           {renderModalContext()}
           <Modal.Footer>
-            <div className="flex items-center justify-end w-full">
+            <div className="flex w-full items-center justify-end">
               <Button
                 variant="primary"
                 size="small"
diff --git a/packages/admin-ui/ui/src/domain/discounts/details/conditions/edit-condition/edit-condition-provider.tsx b/packages/admin-ui/ui/src/domain/discounts/details/conditions/edit-condition/edit-condition-provider.tsx
index 91a5bc9ccc..52f32de5fd 100644
--- a/packages/admin-ui/ui/src/domain/discounts/details/conditions/edit-condition/edit-condition-provider.tsx
+++ b/packages/admin-ui/ui/src/domain/discounts/details/conditions/edit-condition/edit-condition-provider.tsx
@@ -3,7 +3,7 @@ import {
   useAdminAddDiscountConditionResourceBatch,
   useAdminDeleteDiscountConditionResourceBatch,
 } from "medusa-react"
-import React, { createContext, ReactNode, useContext } from "react"
+import { createContext, ReactNode, useContext } from "react"
 import { LayeredModalContext } from "../../../../../components/molecules/modal/layered-modal"
 import useNotification from "../../../../../hooks/use-notification"
 
@@ -42,10 +42,8 @@ export const EditConditionProvider = ({
     condition.id
   )
 
-  const removeConditionResourceBatch = useAdminDeleteDiscountConditionResourceBatch(
-    discount.id,
-    condition.id
-  )
+  const removeConditionResourceBatch =
+    useAdminDeleteDiscountConditionResourceBatch(discount.id, condition.id)
 
   const addConditionResources = (
     resourcesToAdd: string[],
diff --git a/packages/admin-ui/ui/src/domain/discounts/details/conditions/index.tsx b/packages/admin-ui/ui/src/domain/discounts/details/conditions/index.tsx
index b619db7872..8e0b1feeb5 100644
--- a/packages/admin-ui/ui/src/domain/discounts/details/conditions/index.tsx
+++ b/packages/admin-ui/ui/src/domain/discounts/details/conditions/index.tsx
@@ -17,11 +17,8 @@ const DiscountDetailsConditions: React.FC<DiscountDetailsConditionsProps> = ({
 }) => {
   const [show, setShow] = useState(false)
 
-  const {
-    conditions,
-    selectedCondition,
-    deSelectCondition,
-  } = useDiscountConditions(discount)
+  const { conditions, selectedCondition, deSelectCondition } =
+    useDiscountConditions(discount)
 
   return (
     <ConditionsProvider discount={discount}>
@@ -44,7 +41,7 @@ const DiscountDetailsConditions: React.FC<DiscountDetailsConditionsProps> = ({
                 conditions?.length / 2
               )}, minmax(0, 1fr))`,
             }}
-            className="grid grid-cols-2 grid-flow-col gap-y-base gap-x-xlarge"
+            className="gap-y-base gap-x-xlarge grid grid-flow-col grid-cols-2"
           >
             {conditions.map((condition, i) => (
               <NumberedItem
@@ -57,7 +54,7 @@ const DiscountDetailsConditions: React.FC<DiscountDetailsConditionsProps> = ({
             ))}
           </div>
         ) : (
-          <div className="flex flex-col justify-center items-center flex-1 gap-y-small">
+          <div className="gap-y-small flex flex-1 flex-col items-center justify-center">
             <span className="inter-base-regular text-grey-50">
               This discount has no conditions
             </span>
diff --git a/packages/admin-ui/ui/src/domain/discounts/details/conditions/use-discount-conditions.tsx b/packages/admin-ui/ui/src/domain/discounts/details/conditions/use-discount-conditions.tsx
index 5d3a6ee4c9..4f4611d3a3 100644
--- a/packages/admin-ui/ui/src/domain/discounts/details/conditions/use-discount-conditions.tsx
+++ b/packages/admin-ui/ui/src/domain/discounts/details/conditions/use-discount-conditions.tsx
@@ -4,7 +4,7 @@ import {
   useAdminDiscountRemoveCondition,
   useAdminGetDiscountCondition,
 } from "medusa-react"
-import React, { useState } from "react"
+import { useState } from "react"
 import EditIcon from "../../../../components/fundamentals/icons/edit-icon"
 import TrashIcon from "../../../../components/fundamentals/icons/trash-icon"
 import { ActionType } from "../../../../components/molecules/actionables"
diff --git a/packages/admin-ui/ui/src/domain/discounts/details/configurations/edit-configurations.tsx b/packages/admin-ui/ui/src/domain/discounts/details/configurations/edit-configurations.tsx
index f4696ef8db..a1b5609274 100644
--- a/packages/admin-ui/ui/src/domain/discounts/details/configurations/edit-configurations.tsx
+++ b/packages/admin-ui/ui/src/domain/discounts/details/configurations/edit-configurations.tsx
@@ -69,7 +69,7 @@ const EditConfigurations: React.FC<EditConfigurationsProps> = ({
         </Modal.Header>
         <form onSubmit={handleSubmit(onSubmit)}>
           <Modal.Content>
-            <div className="flex flex-col gap-y-xlarge">
+            <div className="gap-y-xlarge flex flex-col">
               <Controller
                 name="starts_at"
                 defaultValue={discount.starts_at}
@@ -88,7 +88,7 @@ const EditConfigurations: React.FC<EditConfigurationsProps> = ({
                       title="Discount has a start date?"
                       description="Schedule the discount to activate in the future."
                     >
-                      <div className="flex gap-x-xsmall items-center">
+                      <div className="gap-x-xsmall flex items-center">
                         <DatePicker
                           date={value!}
                           label="Start date"
@@ -125,7 +125,7 @@ const EditConfigurations: React.FC<EditConfigurationsProps> = ({
                       title="Discount has an expiry date?"
                       description="Schedule the discount to deactivate in the future."
                     >
-                      <div className="flex gap-x-xsmall items-center">
+                      <div className="gap-x-xsmall flex items-center">
                         <DatePicker
                           date={value!}
                           label="Expiry date"
@@ -202,7 +202,7 @@ const EditConfigurations: React.FC<EditConfigurationsProps> = ({
             </div>
           </Modal.Content>
           <Modal.Footer>
-            <div className="gap-x-xsmall flex items-center justify-end w-full">
+            <div className="gap-x-xsmall flex w-full items-center justify-end">
               <Button
                 variant="ghost"
                 size="small"
diff --git a/packages/admin-ui/ui/src/domain/discounts/details/configurations/index.tsx b/packages/admin-ui/ui/src/domain/discounts/details/configurations/index.tsx
index e879c8b683..6a6f1c1f5c 100644
--- a/packages/admin-ui/ui/src/domain/discounts/details/configurations/index.tsx
+++ b/packages/admin-ui/ui/src/domain/discounts/details/configurations/index.tsx
@@ -34,7 +34,7 @@ const Configurations: React.FC<ConfigurationsProps> = ({ discount }) => {
               configurations.length / 2
             )}, minmax(0, 1fr))`,
           }}
-          className="grid grid-cols-2 grid-flow-col gap-y-base gap-x-xlarge"
+          className="gap-y-base gap-x-xlarge grid grid-flow-col grid-cols-2"
         >
           {configurations.map((setting, i) => (
             <NumberedItem
diff --git a/packages/admin-ui/ui/src/domain/discounts/details/configurations/use-discount-configurations.tsx b/packages/admin-ui/ui/src/domain/discounts/details/configurations/use-discount-configurations.tsx
index edb8812e88..e505df70c3 100644
--- a/packages/admin-ui/ui/src/domain/discounts/details/configurations/use-discount-configurations.tsx
+++ b/packages/admin-ui/ui/src/domain/discounts/details/configurations/use-discount-configurations.tsx
@@ -2,7 +2,7 @@ import { Discount } from "@medusajs/medusa"
 import { parse } from "iso8601-duration"
 import { useAdminUpdateDiscount } from "medusa-react"
 import moment from "moment"
-import React, { ReactNode } from "react"
+import { ReactNode } from "react"
 import ClockIcon from "../../../../components/fundamentals/icons/clock-icon"
 import TrashIcon from "../../../../components/fundamentals/icons/trash-icon"
 import { ActionType } from "../../../../components/molecules/actionables"
@@ -17,9 +17,9 @@ type displaySetting = {
 }
 
 const DisplaySettingsDateDescription = ({ date }: { date: Date }) => (
-  <div className="flex text-grey-50 inter-small-regular ">
+  <div className="text-grey-50 inter-small-regular flex ">
     {moment.utc(date).format("ddd, DD MMM YYYY")}
-    <span className="flex items-center ml-3">
+    <span className="ml-3 flex items-center">
       <ClockIcon size={16} />
       <span className="ml-2.5">{moment.utc(date).format("UTC HH:mm")}</span>
     </span>
diff --git a/packages/admin-ui/ui/src/domain/discounts/details/general/edit-general.tsx b/packages/admin-ui/ui/src/domain/discounts/details/general/edit-general.tsx
index 1e16f76d47..d1b5177b8f 100644
--- a/packages/admin-ui/ui/src/domain/discounts/details/general/edit-general.tsx
+++ b/packages/admin-ui/ui/src/domain/discounts/details/general/edit-general.tsx
@@ -119,7 +119,7 @@ const EditGeneral: React.FC<EditGeneralProps> = ({ discount, onClose }) => {
                 )
               }}
             />
-            <div className="flex gap-x-base gap-y-base my-base">
+            <div className="gap-x-base gap-y-base my-base flex">
               <InputField
                 label="Code"
                 className="flex-1"
@@ -178,7 +178,7 @@ const EditGeneral: React.FC<EditGeneralProps> = ({ discount, onClose }) => {
               )}
             </div>
 
-            <div className="text-grey-50 inter-small-regular flex flex-col mb-6">
+            <div className="text-grey-50 inter-small-regular mb-6 flex flex-col">
               <span>
                 The code your customers will enter during checkout. This will
                 appear on your customer’s invoice.
@@ -196,7 +196,7 @@ const EditGeneral: React.FC<EditGeneralProps> = ({ discount, onClose }) => {
             />
           </Modal.Content>
           <Modal.Footer>
-            <div className="gap-x-xsmall flex items-center justify-end w-full">
+            <div className="gap-x-xsmall flex w-full items-center justify-end">
               <Button
                 variant="ghost"
                 size="small"
diff --git a/packages/admin-ui/ui/src/domain/discounts/details/general/index.tsx b/packages/admin-ui/ui/src/domain/discounts/details/general/index.tsx
index 192fd92c43..2fcbe4d31a 100644
--- a/packages/admin-ui/ui/src/domain/discounts/details/general/index.tsx
+++ b/packages/admin-ui/ui/src/domain/discounts/details/general/index.tsx
@@ -88,7 +88,7 @@ const General: React.FC<GeneralProps> = ({ discount }) => {
         forceDropdown
         className="min-h-[200px]"
         status={
-          <div className="flex items-center gap-x-2xsmall">
+          <div className="gap-x-2xsmall flex items-center">
             {discount.is_dynamic && (
               <span>
                 <Badge variant="default">
@@ -108,13 +108,13 @@ const General: React.FC<GeneralProps> = ({ discount }) => {
         }
       >
         <div className="flex">
-          <div className="border-l border-grey-20 pl-6">
+          <div className="border-grey-20 border-l pl-6">
             {getPromotionDescription(discount)}
             <span className="inter-small-regular text-grey-50">
               Discount Amount
             </span>
           </div>
-          <div className="border-l border-grey-20 pl-6 ml-12">
+          <div className="border-grey-20 ml-12 border-l pl-6">
             <h2 className="inter-xlarge-regular text-grey-90">
               {discount.regions.length.toLocaleString("en-US")}
             </h2>
@@ -122,7 +122,7 @@ const General: React.FC<GeneralProps> = ({ discount }) => {
               Valid Regions
             </span>
           </div>
-          <div className="border-l border-grey-20 pl-6 ml-12">
+          <div className="border-grey-20 ml-12 border-l pl-6">
             <h2 className="inter-xlarge-regular text-grey-90">
               {discount.usage_count.toLocaleString("en-US")}
             </h2>
diff --git a/packages/admin-ui/ui/src/domain/discounts/details/index.tsx b/packages/admin-ui/ui/src/domain/discounts/details/index.tsx
index a218dbf9dc..c5c91ed59d 100644
--- a/packages/admin-ui/ui/src/domain/discounts/details/index.tsx
+++ b/packages/admin-ui/ui/src/domain/discounts/details/index.tsx
@@ -56,7 +56,7 @@ const Edit = () => {
         previousRoute="/a/discounts"
       />
       {isLoading || !discount ? (
-        <div className="h-full flex items-center justify-center">
+        <div className="flex h-full items-center justify-center">
           <Spinner variant="secondary" />
         </div>
       ) : (
diff --git a/packages/admin-ui/ui/src/domain/discounts/index.tsx b/packages/admin-ui/ui/src/domain/discounts/index.tsx
index bf4ef0a20d..f483d95b69 100644
--- a/packages/admin-ui/ui/src/domain/discounts/index.tsx
+++ b/packages/admin-ui/ui/src/domain/discounts/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import { useState } from "react"
 import { Route, Routes } from "react-router-dom"
 import Fade from "../../components/atoms/fade-wrapper"
 import PlusIcon from "../../components/fundamentals/icons/plus-icon"
@@ -22,8 +22,8 @@ const DiscountIndex = () => {
   ]
 
   return (
-    <div className="h-full flex flex-col">
-      <div className="w-full flex flex-col grow">
+    <div className="flex h-full flex-col">
+      <div className="flex w-full grow flex-col">
         <BodyCard
           actionables={actionables}
           customHeader={<TableViewHeader views={["discounts"]} />}
diff --git a/packages/admin-ui/ui/src/domain/discounts/new/discount-form/add-conditions-modal.tsx b/packages/admin-ui/ui/src/domain/discounts/new/discount-form/add-conditions-modal.tsx
index 7bad1f0a23..33b52b59c6 100644
--- a/packages/admin-ui/ui/src/domain/discounts/new/discount-form/add-conditions-modal.tsx
+++ b/packages/admin-ui/ui/src/domain/discounts/new/discount-form/add-conditions-modal.tsx
@@ -47,10 +47,10 @@ const AddConditionsModal = ({
 
   return (
     <LayeredModal context={layeredModalContext} handleClose={onClose}>
-      <Modal.Body className="h-[calc(100vh-134px)] flex flex-col">
+      <Modal.Body className="flex h-[calc(100vh-134px)] flex-col">
         <Modal.Header handleClose={onClose}>
           <span className="inter-xlarge-semibold">Add Conditions</span>
-          <span className="font-semibold text-grey-90 mt-6 flex items-center gap-1">
+          <span className="text-grey-90 mt-6 flex items-center gap-1 font-semibold">
             Choose a condition type{" "}
             <IconTooltip content="You can only add one of each type of condition" />
           </span>
@@ -60,7 +60,7 @@ const AddConditionsModal = ({
           {items.length ? (
             items.map((t) => <ConditionTypeItem key={t.value} {...t} />)
           ) : (
-            <div className="flex flex-col items-center justify-center flex-1 h-full">
+            <div className="flex h-full flex-1 flex-col items-center justify-center">
               <span className="inter-base-regular text-grey-40">
                 Can't add anymore conditions
               </span>
@@ -69,10 +69,10 @@ const AddConditionsModal = ({
         </Modal.Content>
 
         <Modal.Footer>
-          <div className="flex w-full h-8 justify-end">
+          <div className="flex h-8 w-full justify-end">
             <Button
               variant="ghost"
-              className="mr-2 w-32 text-small justify-center"
+              className="text-small mr-2 w-32 justify-center"
               size="small"
               onClick={onClose}
             >
@@ -86,7 +86,7 @@ const AddConditionsModal = ({
                 onClose()
               }}
               size="small"
-              className="w-32 text-small justify-center"
+              className="text-small w-32 justify-center"
               variant="primary"
             >
               Save
@@ -104,7 +104,7 @@ const ConditionTypeItem: React.FC<ConditionItem> = (props) => {
   return (
     <button
       onClick={onClick}
-      className="rounded-lg border border-1 p-4 mb-2 cursor-pointer hover:bg-grey-5 transition-all w-full flex items-center justify-between"
+      className="border-1 hover:bg-grey-5 mb-2 flex w-full cursor-pointer items-center justify-between rounded-lg border p-4 transition-all"
     >
       <div className="flex flex-col items-start">
         <div className="font-semibold ">{label}</div>
diff --git a/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/add-condition-tables/add-condition-footer.tsx b/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/add-condition-tables/add-condition-footer.tsx
index 209be48691..c04b6adc05 100644
--- a/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/add-condition-tables/add-condition-footer.tsx
+++ b/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/add-condition-tables/add-condition-footer.tsx
@@ -26,7 +26,7 @@ const AddConditionFooter: React.FC<AddConditionFooterProps> = ({
   const { updateCondition } = useDiscountForm()
 
   return (
-    <div className="w-full flex justify-end gap-x-xsmall">
+    <div className="gap-x-xsmall flex w-full justify-end">
       <Button
         variant="ghost"
         size="small"
diff --git a/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/add-condition-tables/collections.tsx b/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/add-condition-tables/collections.tsx
index 3fb4c45035..a83e6a7d0f 100644
--- a/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/add-condition-tables/collections.tsx
+++ b/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/add-condition-tables/collections.tsx
@@ -1,5 +1,5 @@
 import { useAdminCollections } from "medusa-react"
-import React, { useState } from "react"
+import { useState } from "react"
 import Modal from "../../../../../../components/molecules/modal"
 import { SelectableTable } from "../../../../../../components/templates/selectable-table"
 import useQueryFilters from "../../../../../../hooks/use-query-filters"
diff --git a/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/add-condition-tables/customer-groups.tsx b/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/add-condition-tables/customer-groups.tsx
index 54936b6386..0f898f3848 100644
--- a/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/add-condition-tables/customer-groups.tsx
+++ b/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/add-condition-tables/customer-groups.tsx
@@ -1,5 +1,5 @@
 import { useAdminCustomerGroups } from "medusa-react"
-import React, { useState } from "react"
+import { useState } from "react"
 import Modal from "../../../../../../components/molecules/modal"
 import { SelectableTable } from "../../../../../../components/templates/selectable-table"
 import useQueryFilters from "../../../../../../hooks/use-query-filters"
diff --git a/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/add-condition-tables/tags.tsx b/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/add-condition-tables/tags.tsx
index 8e7b1c01bc..ffbc3a9544 100644
--- a/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/add-condition-tables/tags.tsx
+++ b/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/add-condition-tables/tags.tsx
@@ -1,6 +1,5 @@
 import { useAdminProductTags } from "medusa-react"
-import React, { useState } from "react"
-import Spinner from "../../../../../../components/atoms/spinner"
+import { useState } from "react"
 import Modal from "../../../../../../components/molecules/modal"
 import { SelectableTable } from "../../../../../../components/templates/selectable-table"
 import useQueryFilters from "../../../../../../hooks/use-query-filters"
diff --git a/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/add-condition-tables/types.tsx b/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/add-condition-tables/types.tsx
index f229231b2b..d1b7435d9e 100644
--- a/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/add-condition-tables/types.tsx
+++ b/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/add-condition-tables/types.tsx
@@ -1,6 +1,5 @@
 import { useAdminProductTypes } from "medusa-react"
-import React, { useState } from "react"
-import Spinner from "../../../../../../components/atoms/spinner"
+import { useState } from "react"
 import Modal from "../../../../../../components/molecules/modal"
 import { SelectableTable } from "../../../../../../components/templates/selectable-table"
 import useQueryFilters from "../../../../../../hooks/use-query-filters"
diff --git a/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/details-condition-tables/collections.tsx b/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/details-condition-tables/collections.tsx
index abeec28268..02eb663d31 100644
--- a/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/details-condition-tables/collections.tsx
+++ b/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/details-condition-tables/collections.tsx
@@ -1,6 +1,5 @@
 import { useAdminCollections } from "medusa-react"
-import React, { useEffect, useState } from "react"
-import Spinner from "../../../../../../components/atoms/spinner"
+import { useEffect, useState } from "react"
 import Modal from "../../../../../../components/molecules/modal"
 import { SelectableTable } from "../../../../../../components/templates/selectable-table"
 import useQueryFilters from "../../../../../../hooks/use-query-filters"
diff --git a/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/details-condition-tables/customer-groups.tsx b/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/details-condition-tables/customer-groups.tsx
index ff65a69e50..aba4479c8b 100644
--- a/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/details-condition-tables/customer-groups.tsx
+++ b/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/details-condition-tables/customer-groups.tsx
@@ -1,6 +1,5 @@
 import { useAdminCustomerGroups } from "medusa-react"
-import React, { useState } from "react"
-import Spinner from "../../../../../../components/atoms/spinner"
+import { useState } from "react"
 import Modal from "../../../../../../components/molecules/modal"
 import { SelectableTable } from "../../../../../../components/templates/selectable-table"
 import useQueryFilters from "../../../../../../hooks/use-query-filters"
diff --git a/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/details-condition-tables/details-condition-footer.tsx b/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/details-condition-tables/details-condition-footer.tsx
index ecef84f4bb..17701df30f 100644
--- a/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/details-condition-tables/details-condition-footer.tsx
+++ b/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/details-condition-tables/details-condition-footer.tsx
@@ -26,7 +26,7 @@ const DetailsConditionFooter: React.FC<AddConditionFooterProps> = ({
   const { updateCondition, updateAndSave } = useConditions()
 
   return (
-    <div className="w-full flex justify-end gap-x-xsmall">
+    <div className="gap-x-xsmall flex w-full justify-end">
       <Button variant="ghost" size="small" onClick={onClose}>
         Cancel
       </Button>
diff --git a/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/details-condition-tables/products.tsx b/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/details-condition-tables/products.tsx
index 6ec3ac74f3..6759ea0c27 100644
--- a/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/details-condition-tables/products.tsx
+++ b/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/details-condition-tables/products.tsx
@@ -1,6 +1,5 @@
 import { useAdminProducts } from "medusa-react"
-import React, { useEffect, useState } from "react"
-import Spinner from "../../../../../../components/atoms/spinner"
+import { useState } from "react"
 import Modal from "../../../../../../components/molecules/modal"
 import { SelectableTable } from "../../../../../../components/templates/selectable-table"
 import useQueryFilters from "../../../../../../hooks/use-query-filters"
diff --git a/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/details-condition-tables/tags.tsx b/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/details-condition-tables/tags.tsx
index 2d300eb3b4..9e5b695a35 100644
--- a/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/details-condition-tables/tags.tsx
+++ b/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/details-condition-tables/tags.tsx
@@ -1,6 +1,5 @@
 import { useAdminProductTags } from "medusa-react"
-import React, { useState } from "react"
-import Spinner from "../../../../../../components/atoms/spinner"
+import { useState } from "react"
 import Modal from "../../../../../../components/molecules/modal"
 import { SelectableTable } from "../../../../../../components/templates/selectable-table"
 import useQueryFilters from "../../../../../../hooks/use-query-filters"
diff --git a/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/details-condition-tables/types.tsx b/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/details-condition-tables/types.tsx
index 3da893e3ea..e776cb4b36 100644
--- a/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/details-condition-tables/types.tsx
+++ b/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/details-condition-tables/types.tsx
@@ -1,5 +1,5 @@
 import { useAdminProductTypes } from "medusa-react"
-import React, { useState } from "react"
+import { useState } from "react"
 import Modal from "../../../../../../components/molecules/modal"
 import { SelectableTable } from "../../../../../../components/templates/selectable-table"
 import useQueryFilters from "../../../../../../hooks/use-query-filters"
diff --git a/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/edit-condition-tables/collections.tsx b/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/edit-condition-tables/collections.tsx
index a7c5a441c4..eca7802dc1 100644
--- a/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/edit-condition-tables/collections.tsx
+++ b/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/edit-condition-tables/collections.tsx
@@ -1,6 +1,5 @@
 import { useAdminCollections } from "medusa-react"
-import React, { useState } from "react"
-import Spinner from "../../../../../../components/atoms/spinner"
+import { useState } from "react"
 import Modal from "../../../../../../components/molecules/modal"
 import { SelectableTable } from "../../../../../../components/templates/selectable-table"
 import useQueryFilters from "../../../../../../hooks/use-query-filters"
diff --git a/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/edit-condition-tables/customer-groups.tsx b/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/edit-condition-tables/customer-groups.tsx
index 9981eb9509..5b830d0d9c 100644
--- a/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/edit-condition-tables/customer-groups.tsx
+++ b/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/edit-condition-tables/customer-groups.tsx
@@ -1,6 +1,5 @@
 import { useAdminCustomerGroups } from "medusa-react"
-import React, { useState } from "react"
-import Spinner from "../../../../../../components/atoms/spinner"
+import { useState } from "react"
 import Modal from "../../../../../../components/molecules/modal"
 import { SelectableTable } from "../../../../../../components/templates/selectable-table"
 import useQueryFilters from "../../../../../../hooks/use-query-filters"
diff --git a/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/edit-condition-tables/edit-condition-footer.tsx b/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/edit-condition-tables/edit-condition-footer.tsx
index 5aa849c850..08314a7131 100644
--- a/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/edit-condition-tables/edit-condition-footer.tsx
+++ b/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/edit-condition-tables/edit-condition-footer.tsx
@@ -23,7 +23,7 @@ const EditConditionFooter: React.FC<EditConditionFooterProps> = ({
 }) => {
   const { updateCondition } = useDiscountForm()
   return (
-    <div className="flex items-center justify-end w-full gap-x-xsmall">
+    <div className="gap-x-xsmall flex w-full items-center justify-end">
       <Button variant="secondary" size="small" onClick={onClose}>
         Cancel
       </Button>
diff --git a/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/edit-condition-tables/products.tsx b/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/edit-condition-tables/products.tsx
index 5461be95c8..2527f74ac3 100644
--- a/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/edit-condition-tables/products.tsx
+++ b/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/edit-condition-tables/products.tsx
@@ -1,6 +1,6 @@
 import { Product } from "@medusajs/medusa"
 import { useAdminProducts } from "medusa-react"
-import React, { useState } from "react"
+import { useState } from "react"
 import Modal from "../../../../../../components/molecules/modal"
 import { SelectableTable } from "../../../../../../components/templates/selectable-table"
 import useQueryFilters from "../../../../../../hooks/use-query-filters"
diff --git a/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/edit-condition-tables/tags.tsx b/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/edit-condition-tables/tags.tsx
index 00a237d077..30b6e14242 100644
--- a/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/edit-condition-tables/tags.tsx
+++ b/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/edit-condition-tables/tags.tsx
@@ -1,5 +1,5 @@
 import { useAdminProductTags } from "medusa-react"
-import React, { useState } from "react"
+import { useState } from "react"
 import Spinner from "../../../../../../components/atoms/spinner"
 import Modal from "../../../../../../components/molecules/modal"
 import { SelectableTable } from "../../../../../../components/templates/selectable-table"
diff --git a/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/edit-condition-tables/types.tsx b/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/edit-condition-tables/types.tsx
index f3306fb1b4..d2b8dd6ba1 100644
--- a/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/edit-condition-tables/types.tsx
+++ b/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/edit-condition-tables/types.tsx
@@ -1,5 +1,5 @@
 import { useAdminProductTypes } from "medusa-react"
-import React, { useState } from "react"
+import { useState } from "react"
 import Modal from "../../../../../../components/molecules/modal"
 import { SelectableTable } from "../../../../../../components/templates/selectable-table"
 import useQueryFilters from "../../../../../../hooks/use-query-filters"
diff --git a/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/shared/collection.tsx b/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/shared/collection.tsx
index 358bcdecb6..45f6c53ef1 100644
--- a/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/shared/collection.tsx
+++ b/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/shared/collection.tsx
@@ -1,5 +1,5 @@
 import { ProductCollection } from "@medusajs/medusa"
-import React, { useMemo } from "react"
+import { useMemo } from "react"
 import { Column, HeaderGroup, Row } from "react-table"
 import SortingIcon from "../../../../../../components/fundamentals/icons/sorting-icon"
 import Table from "../../../../../../components/molecules/table"
@@ -42,7 +42,7 @@ export const useCollectionColumns = () => {
     return [
       {
         Header: () => (
-          <div className="flex items-center gap-1 min-w-[546px]">
+          <div className="flex min-w-[546px] items-center gap-1">
             Title <SortingIcon size={16} />
           </div>
         ),
@@ -53,7 +53,7 @@ export const useCollectionColumns = () => {
       },
       {
         Header: () => (
-          <div className="flex justify-end items-center gap-1">
+          <div className="flex items-center justify-end gap-1">
             Products <SortingIcon size={16} />
           </div>
         ),
diff --git a/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/shared/condition-operator.tsx b/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/shared/condition-operator.tsx
index 734fd10b42..a7295a54c8 100644
--- a/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/shared/condition-operator.tsx
+++ b/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/shared/condition-operator.tsx
@@ -15,7 +15,7 @@ const ConditionOperator: React.FC<ConditionOperatorProps> = ({
     <RadioGroup.Root
       value={value}
       onValueChange={onChange}
-      className="grid grid-cols-2 gap-base mb-4"
+      className="gap-base mb-4 grid grid-cols-2"
     >
       <RadioGroup.Item
         className="w-full"
diff --git a/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/shared/groups.tsx b/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/shared/groups.tsx
index 2ef503f799..9614dd957d 100644
--- a/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/shared/groups.tsx
+++ b/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/shared/groups.tsx
@@ -1,5 +1,5 @@
 import { CustomerGroup } from "@medusajs/medusa"
-import React, { useMemo } from "react"
+import { useMemo } from "react"
 import { Column, HeaderGroup, Row } from "react-table"
 import SortingIcon from "../../../../../../components/fundamentals/icons/sorting-icon"
 import Table from "../../../../../../components/molecules/table"
@@ -42,7 +42,7 @@ export const useGroupColumns = () => {
     return [
       {
         Header: () => (
-          <div className="flex items-center gap-1 min-w-[540px]">
+          <div className="flex min-w-[540px] items-center gap-1">
             Title <SortingIcon size={16} />
           </div>
         ),
@@ -50,7 +50,7 @@ export const useGroupColumns = () => {
       },
       {
         Header: () => (
-          <div className="flex justify-end items-center gap-1">
+          <div className="flex items-center justify-end gap-1">
             Members <SortingIcon size={16} />
           </div>
         ),
diff --git a/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/shared/products.tsx b/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/shared/products.tsx
index 78388e18dd..e3f340ec71 100644
--- a/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/shared/products.tsx
+++ b/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/shared/products.tsx
@@ -1,5 +1,5 @@
 import { Product } from "@medusajs/medusa"
-import React, { useMemo } from "react"
+import { useMemo } from "react"
 import { Column, HeaderGroup, Row } from "react-table"
 import SortingIcon from "../../../../../../components/fundamentals/icons/sorting-icon"
 import ImagePlaceholder from "../../../../../../components/fundamentals/image-placeholder"
@@ -58,7 +58,7 @@ export const useProductColumns = () => {
     return [
       {
         Header: () => (
-          <div className="flex items-center gap-1 min-w-[443px]">
+          <div className="flex min-w-[443px] items-center gap-1">
             Title <SortingIcon size={16} />
           </div>
         ),
@@ -66,11 +66,11 @@ export const useProductColumns = () => {
         Cell: ({ row: { original } }) => {
           return (
             <div className="flex items-center">
-              <div className="h-[40px] w-[30px] my-1.5 flex items-center mr-4">
+              <div className="my-1.5 mr-4 flex h-[40px] w-[30px] items-center">
                 {original.thumbnail ? (
                   <img
                     src={original.thumbnail}
-                    className="h-full object-cover rounded-soft"
+                    className="rounded-soft h-full object-cover"
                   />
                 ) : (
                   <ImagePlaceholder />
@@ -101,7 +101,7 @@ export const useProductColumns = () => {
       },
       {
         Header: () => (
-          <div className="flex justify-end items-center gap-1">
+          <div className="flex items-center justify-end gap-1">
             Variants <SortingIcon size={16} />
           </div>
         ),
diff --git a/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/shared/tags.tsx b/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/shared/tags.tsx
index 1d4e5dfbde..5bf9a271b6 100644
--- a/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/shared/tags.tsx
+++ b/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/shared/tags.tsx
@@ -1,5 +1,4 @@
 import { ProductTag } from "@medusajs/medusa"
-import React from "react"
 import { Column, HeaderGroup, Row } from "react-table"
 import SortingIcon from "../../../../../../components/fundamentals/icons/sorting-icon"
 import Table from "../../../../../../components/molecules/table"
@@ -15,7 +14,7 @@ export const TagColumns: Column<ProductTag>[] = [
     Cell: ({ row: { original } }) => {
       return (
         <div className="w-[220px]">
-          <span className="bg-grey-10 px-2 py-0.5 rounded-rounded">
+          <span className="bg-grey-10 rounded-rounded px-2 py-0.5">
             #{original.value}
           </span>
         </div>
diff --git a/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/shared/types.tsx b/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/shared/types.tsx
index 0d34ac7e75..af5a77ef4e 100644
--- a/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/shared/types.tsx
+++ b/packages/admin-ui/ui/src/domain/discounts/new/discount-form/condition-tables/shared/types.tsx
@@ -1,5 +1,5 @@
 import { ProductType } from "@medusajs/medusa"
-import React, { useMemo } from "react"
+import { useMemo } from "react"
 import { Column, HeaderGroup, Row } from "react-table"
 import SortingIcon from "../../../../../../components/fundamentals/icons/sorting-icon"
 import Table from "../../../../../../components/molecules/table"
@@ -42,7 +42,7 @@ export const useTypesColumns = () => {
     return [
       {
         Header: () => (
-          <div className="flex items-center gap-1 min-w-[626px]">
+          <div className="flex min-w-[626px] items-center gap-1">
             Type <SortingIcon size={16} />
           </div>
         ),
diff --git a/packages/admin-ui/ui/src/domain/discounts/new/discount-form/index.tsx b/packages/admin-ui/ui/src/domain/discounts/new/discount-form/index.tsx
index c7551621c0..c80eb4984c 100644
--- a/packages/admin-ui/ui/src/domain/discounts/new/discount-form/index.tsx
+++ b/packages/admin-ui/ui/src/domain/discounts/new/discount-form/index.tsx
@@ -1,4 +1,3 @@
-import * as React from "react"
 import { useWatch } from "react-hook-form"
 import { useNavigate } from "react-router-dom"
 import Button from "../../../../components/fundamentals/button"
@@ -21,7 +20,6 @@ type DiscountFormProps = {
   closeForm?: () => void
 }
 
-
 const DiscountForm = ({ closeForm }: DiscountFormProps) => {
   const navigate = useNavigate()
   const notification = useNotification()
@@ -67,12 +65,12 @@ const DiscountForm = ({ closeForm }: DiscountFormProps) => {
   return (
     <FocusModal>
       <FocusModal.Header>
-        <div className="medium:w-8/12 w-full px-8 flex justify-between">
+        <div className="medium:w-8/12 flex w-full justify-between px-8">
           <Button
             size="small"
             variant="ghost"
             onClick={closeForm}
-            className="border rounded-rounded w-8 h-8"
+            className="rounded-rounded h-8 w-8 border"
           >
             <CrossIcon size={20} />
           </Button>
@@ -81,7 +79,7 @@ const DiscountForm = ({ closeForm }: DiscountFormProps) => {
               onClick={handleSubmit(submitGhost)}
               size="small"
               variant="ghost"
-              className="border rounded-rounded"
+              className="rounded-rounded border"
             >
               Save as draft
             </Button>
@@ -97,11 +95,11 @@ const DiscountForm = ({ closeForm }: DiscountFormProps) => {
         </div>
       </FocusModal.Header>
       <FocusModal.Main>
-        <div className="flex justify-center mb-[25%]">
-          <div className="max-w-[700px] w-full pt-16">
+        <div className="mb-[25%] flex justify-center">
+          <div className="w-full max-w-[700px] pt-16">
             <h1 className="inter-xlarge-semibold">Create new discount</h1>
             <Accordion
-              className="pt-7 text-grey-90"
+              className="text-grey-90 pt-7"
               defaultValue={["promotion-type"]}
               type="multiple"
             >
diff --git a/packages/admin-ui/ui/src/domain/discounts/new/discount-form/sections/conditions/condition-item.tsx b/packages/admin-ui/ui/src/domain/discounts/new/discount-form/sections/conditions/condition-item.tsx
index cb4b0b6829..bdf9806a48 100644
--- a/packages/admin-ui/ui/src/domain/discounts/new/discount-form/sections/conditions/condition-item.tsx
+++ b/packages/admin-ui/ui/src/domain/discounts/new/discount-form/sections/conditions/condition-item.tsx
@@ -162,20 +162,20 @@ const ConditionItem = <Type extends DiscountConditionType>({
 
   return (
     <div>
-      <div className="p-base border rounded-rounded flex gap-base justify-between items-center">
-        <div className="flex overflow-hidden gap-base w-full">
+      <div className="p-base rounded-rounded gap-base flex items-center justify-between border">
+        <div className="gap-base flex w-full overflow-hidden">
           <div>
             <Badge
-              className="inter-base-semibold flex justify-center items-center w-[40px] h-[40px]"
+              className="inter-base-semibold flex h-[40px] w-[40px] items-center justify-center"
               variant="default"
             >
               §{index + 1}
             </Badge>
           </div>
-          <div className="truncate flex flex-col justify-center flex-1 w-full">
+          <div className="flex w-full flex-1 flex-col justify-center truncate">
             <div className="inter-small-semibold">{getTitle(type)}</div>
-            <div className="w-full flex items-center inter-small-regular gap-x-xsmall flex-1">
-              <div className="gap-x-2xsmall text-grey-50 flex items-center w-full inter-small-regular flex-1">
+            <div className="inter-small-regular gap-x-xsmall flex w-full flex-1 items-center">
+              <div className="gap-x-2xsmall text-grey-50 inter-small-regular flex w-full flex-1 items-center">
                 {visibleItems.map((item, i) => {
                   return (
                     <span key={i}>
diff --git a/packages/admin-ui/ui/src/domain/discounts/new/discount-form/sections/conditions/index.tsx b/packages/admin-ui/ui/src/domain/discounts/new/discount-form/sections/conditions/index.tsx
index 824792cf19..c1e2a8d1cc 100644
--- a/packages/admin-ui/ui/src/domain/discounts/new/discount-form/sections/conditions/index.tsx
+++ b/packages/admin-ui/ui/src/domain/discounts/new/discount-form/sections/conditions/index.tsx
@@ -47,7 +47,7 @@ const DiscountNewConditions: React.FC<DiscountNewConditionsProps> = ({
 
   return (
     <div className="pt-5">
-      <div className="flex flex-col gap-y-small">
+      <div className="gap-y-small flex flex-col">
         {filteredConditions.map((values, i) => (
           <ConditionItem
             index={i}
@@ -65,7 +65,7 @@ const DiscountNewConditions: React.FC<DiscountNewConditionsProps> = ({
           size="small"
           variant="ghost"
           onClick={() => setShowConditionsModal(true)}
-          className="mt-4 p-2 w-full rounded-rounded border"
+          className="rounded-rounded mt-4 w-full border p-2"
         >
           <PlusIcon size={18} />
           <span>Add Condition</span>
diff --git a/packages/admin-ui/ui/src/domain/discounts/new/discount-form/sections/configuration.tsx b/packages/admin-ui/ui/src/domain/discounts/new/discount-form/sections/configuration.tsx
index cb21e1450c..80860e44ae 100644
--- a/packages/admin-ui/ui/src/domain/discounts/new/discount-form/sections/configuration.tsx
+++ b/packages/admin-ui/ui/src/domain/discounts/new/discount-form/sections/configuration.tsx
@@ -63,7 +63,7 @@ const Settings: React.FC<SettingsProps> = ({ promotion, isEdit = false }) => {
   return (
     <div className="flex flex-col">
       <Accordion
-        className="pt-7 text-grey-90"
+        className="text-grey-90 pt-7"
         type="multiple"
         value={openItems || []}
         onValueChange={(values) => {
@@ -88,7 +88,7 @@ const Settings: React.FC<SettingsProps> = ({ promotion, isEdit = false }) => {
             >
               <div
                 className={clsx(
-                  "flex items-center gap-xsmall",
+                  "gap-xsmall flex items-center",
                   marginTransition,
                   {
                     "mt-4": openItems.indexOf("starts_at") > -1,
@@ -98,7 +98,7 @@ const Settings: React.FC<SettingsProps> = ({ promotion, isEdit = false }) => {
                 <Controller
                   name="starts_at"
                   control={control}
-                  render={({ field: { value, onChange } }) => {
+                  render={({ field: { value, onChange } }) => {
                     const date = value || new Date()
                     return (
                       <>
@@ -132,7 +132,7 @@ const Settings: React.FC<SettingsProps> = ({ promotion, isEdit = false }) => {
             >
               <div
                 className={clsx(
-                  "flex items-center gap-xsmall",
+                  "gap-xsmall flex items-center",
                   marginTransition,
                   {
                     "mt-4": openItems.indexOf("ends_at") > -1,
@@ -142,7 +142,7 @@ const Settings: React.FC<SettingsProps> = ({ promotion, isEdit = false }) => {
                 <Controller
                   name="ends_at"
                   control={control}
-                  render={({ field: { value, onChange } }) => {
+                  render={({ field: { value, onChange } }) => {
                     const date =
                       value ||
                       new Date(new Date().getTime() + 7 * 24 * 60 * 60 * 1000)
@@ -182,7 +182,7 @@ const Settings: React.FC<SettingsProps> = ({ promotion, isEdit = false }) => {
                 })}
               >
                 <InputField
-                  {...register("usage_limit",{ valueAsNumber: true })}
+                  {...register("usage_limit", { valueAsNumber: true })}
                   label="Number of redemptions"
                   type="number"
                   placeholder="5"
diff --git a/packages/admin-ui/ui/src/domain/discounts/new/discount-form/sections/discount-allocation.tsx b/packages/admin-ui/ui/src/domain/discounts/new/discount-form/sections/discount-allocation.tsx
index 50a0936e7b..5f425cb733 100644
--- a/packages/admin-ui/ui/src/domain/discounts/new/discount-form/sections/discount-allocation.tsx
+++ b/packages/admin-ui/ui/src/domain/discounts/new/discount-form/sections/discount-allocation.tsx
@@ -1,5 +1,4 @@
 import clsx from "clsx"
-import React from "react"
 import { Controller } from "react-hook-form"
 import RadioGroup from "../../../../../components/organisms/radio-group"
 import { AllocationType } from "../../../types"
@@ -18,7 +17,7 @@ const DiscountAllocation = () => {
           <RadioGroup.Root
             value={value}
             onValueChange={onChange}
-            className={clsx("flex items-center gap-base mt-base px-1")}
+            className={clsx("gap-base mt-base flex items-center px-1")}
           >
             <RadioGroup.Item
               value={AllocationType.TOTAL}
diff --git a/packages/admin-ui/ui/src/domain/discounts/new/discount-form/sections/discount-type.tsx b/packages/admin-ui/ui/src/domain/discounts/new/discount-form/sections/discount-type.tsx
index c5d33f3617..c26f5cb23c 100644
--- a/packages/admin-ui/ui/src/domain/discounts/new/discount-form/sections/discount-type.tsx
+++ b/packages/admin-ui/ui/src/domain/discounts/new/discount-form/sections/discount-type.tsx
@@ -1,5 +1,4 @@
 import clsx from "clsx"
-import React from "react"
 import { Controller, useWatch } from "react-hook-form"
 import RadioGroup from "../../../../../components/organisms/radio-group"
 import { DiscountRuleType } from "../../../types"
@@ -23,7 +22,7 @@ const DiscountType = () => {
           <RadioGroup.Root
             value={value}
             onValueChange={onChange}
-            className={clsx("flex items-center gap-base mt-base px-1")}
+            className={clsx("gap-base mt-base flex items-center px-1")}
           >
             <RadioGroup.Item
               value={DiscountRuleType.PERCENTAGE}
diff --git a/packages/admin-ui/ui/src/domain/discounts/new/discount-form/sections/general.tsx b/packages/admin-ui/ui/src/domain/discounts/new/discount-form/sections/general.tsx
index 458d4870fb..ee6cada57b 100644
--- a/packages/admin-ui/ui/src/domain/discounts/new/discount-form/sections/general.tsx
+++ b/packages/admin-ui/ui/src/domain/discounts/new/discount-form/sections/general.tsx
@@ -80,7 +80,7 @@ const General: React.FC<GeneralProps> = ({ discount }) => {
               )
             }}
           />
-          <div className="flex gap-x-base gap-y-base my-base">
+          <div className="gap-x-base gap-y-base my-base flex">
             <InputField
               label="Code"
               className="flex-1"
@@ -139,7 +139,7 @@ const General: React.FC<GeneralProps> = ({ discount }) => {
             )}
           </div>
 
-          <div className="text-grey-50 inter-small-regular flex flex-col mb-6">
+          <div className="text-grey-50 inter-small-regular mb-6 flex flex-col">
             <span>
               The code your customers will enter during checkout. This will
               appear on your customer’s invoice.
diff --git a/packages/admin-ui/ui/src/domain/discounts/new/discount-form/use-condition-modal-items.tsx b/packages/admin-ui/ui/src/domain/discounts/new/discount-form/use-condition-modal-items.tsx
index 484af2c483..5676519000 100644
--- a/packages/admin-ui/ui/src/domain/discounts/new/discount-form/use-condition-modal-items.tsx
+++ b/packages/admin-ui/ui/src/domain/discounts/new/discount-form/use-condition-modal-items.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useMemo } from "react"
+import { useContext, useMemo } from "react"
 import { LayeredModalContext } from "../../../../components/molecules/modal/layered-modal"
 import { DiscountConditionType } from "../../types"
 import AddCollectionConditionSelector from "./condition-tables/add-condition-tables/collections"
diff --git a/packages/admin-ui/ui/src/domain/gift-cards/custom-giftcard.tsx b/packages/admin-ui/ui/src/domain/gift-cards/custom-giftcard.tsx
index e09ab209e6..5ec13518cb 100644
--- a/packages/admin-ui/ui/src/domain/gift-cards/custom-giftcard.tsx
+++ b/packages/admin-ui/ui/src/domain/gift-cards/custom-giftcard.tsx
@@ -78,7 +78,7 @@ const CustomGiftcard: React.FC<CustomGiftcardProps> = ({ onDismiss }) => {
         <Modal.Content>
           <div className="flex flex-col">
             <span className="inter-base-semibold">Value</span>
-            <div className="flex gap-x-2xsmall mt-4">
+            <div className="gap-x-2xsmall mt-4 flex">
               <div className="w-[267px]">
                 <Select
                   label={"Region"}
@@ -116,7 +116,7 @@ const CustomGiftcard: React.FC<CustomGiftcardProps> = ({ onDismiss }) => {
           </div>
           <div className="mt-8">
             <span className="inter-base-semibold">Receiver</span>
-            <div className="grid grid-cols-1 gap-y-xsmall mt-4">
+            <div className="gap-y-xsmall mt-4 grid grid-cols-1">
               <InputField
                 label={"Email"}
                 required
@@ -134,7 +134,7 @@ const CustomGiftcard: React.FC<CustomGiftcardProps> = ({ onDismiss }) => {
           </div>
         </Modal.Content>
         <Modal.Footer>
-          <div className="flex w-full justify-end gap-x-xsmall">
+          <div className="gap-x-xsmall flex w-full justify-end">
             <Button
               variant="ghost"
               onClick={onDismiss}
diff --git a/packages/admin-ui/ui/src/domain/gift-cards/details/edit-gift-card-modal.tsx b/packages/admin-ui/ui/src/domain/gift-cards/details/edit-gift-card-modal.tsx
index bbf182f173..c84a84df3c 100644
--- a/packages/admin-ui/ui/src/domain/gift-cards/details/edit-gift-card-modal.tsx
+++ b/packages/admin-ui/ui/src/domain/gift-cards/details/edit-gift-card-modal.tsx
@@ -1,5 +1,5 @@
 import { AdminPostGiftCardsGiftCardReq, Region } from "@medusajs/medusa"
-import React, { useMemo } from "react"
+import { useMemo } from "react"
 import { Controller, useForm } from "react-hook-form"
 import Button from "../../../components/fundamentals/button"
 import Modal from "../../../components/molecules/modal"
@@ -81,7 +81,7 @@ const EditGiftCardModal = ({
             />
           </Modal.Content>
           <Modal.Footer>
-            <div className="w-full flex justify-end">
+            <div className="flex w-full justify-end">
               <Button
                 variant="ghost"
                 size="small"
diff --git a/packages/admin-ui/ui/src/domain/gift-cards/details/index.tsx b/packages/admin-ui/ui/src/domain/gift-cards/details/index.tsx
index de1add8454..0f2d0fbd84 100644
--- a/packages/admin-ui/ui/src/domain/gift-cards/details/index.tsx
+++ b/packages/admin-ui/ui/src/domain/gift-cards/details/index.tsx
@@ -82,7 +82,7 @@ const GiftCardDetails = () => {
         previousRoute="/a/gift-cards"
       />
       {isLoading || !giftCard ? (
-        <div className="w-full bg-grey-0 border border-grey-20 rounded-rounded py-xlarge flex items-center justify-center">
+        <div className="bg-grey-0 border-grey-20 rounded-rounded py-xlarge flex w-full items-center justify-center border">
           <Spinner size={"large"} variant={"secondary"} />
         </div>
       ) : (
@@ -104,7 +104,7 @@ const GiftCardDetails = () => {
             actionables={actions}
           >
             <div className="flex justify-between">
-              <div className="flex mt-6 space-x-6 divide-x">
+              <div className="mt-6 flex space-x-6 divide-x">
                 <div className="flex flex-col">
                   <div className="inter-smaller-regular text-grey-50 mb-1">
                     Original amount
diff --git a/packages/admin-ui/ui/src/domain/gift-cards/details/update-balance-modal.tsx b/packages/admin-ui/ui/src/domain/gift-cards/details/update-balance-modal.tsx
index 7b7f5010e8..ea948292a9 100644
--- a/packages/admin-ui/ui/src/domain/gift-cards/details/update-balance-modal.tsx
+++ b/packages/admin-ui/ui/src/domain/gift-cards/details/update-balance-modal.tsx
@@ -1,6 +1,5 @@
 import { AdminPostGiftCardsGiftCardReq, GiftCard } from "@medusajs/medusa"
 import clsx from "clsx"
-import React from "react"
 import { Controller, useForm, useWatch } from "react-hook-form"
 import Tooltip from "../../../components/atoms/tooltip"
 import Button from "../../../components/fundamentals/button"
@@ -45,7 +44,7 @@ const UpdateBalanceModal = ({
             <span className="inter-xlarge-semibold">Update Balance</span>
             <span
               className={clsx(
-                "inter-small-regular text-rose-50 mt-2xsmall transition-display delay-75",
+                "inter-small-regular mt-2xsmall transition-display text-rose-50 delay-75",
                 {
                   hidden: !(balance > giftCard.value),
                 }
@@ -80,7 +79,7 @@ const UpdateBalanceModal = ({
             </CurrencyInput.Root>
           </Modal.Content>
           <Modal.Footer>
-            <div className="w-full flex justify-end">
+            <div className="flex w-full justify-end">
               <Button
                 variant="ghost"
                 size="small"
diff --git a/packages/admin-ui/ui/src/domain/gift-cards/manage/denomination-table.tsx b/packages/admin-ui/ui/src/domain/gift-cards/manage/denomination-table.tsx
index df164d28b0..c20fa161af 100644
--- a/packages/admin-ui/ui/src/domain/gift-cards/manage/denomination-table.tsx
+++ b/packages/admin-ui/ui/src/domain/gift-cards/manage/denomination-table.tsx
@@ -90,7 +90,7 @@ const DenominationTable: React.FC<DenominationTableProps> = ({
   }
 
   return (
-    <div className="w-full h-full overflow-y-auto">
+    <div className="h-full w-full overflow-y-auto">
       <Table>
         <Table.Head>
           <Table.HeadRow>
diff --git a/packages/admin-ui/ui/src/domain/gift-cards/manage/index.tsx b/packages/admin-ui/ui/src/domain/gift-cards/manage/index.tsx
index 849fa1a868..e91aad0318 100644
--- a/packages/admin-ui/ui/src/domain/gift-cards/manage/index.tsx
+++ b/packages/admin-ui/ui/src/domain/gift-cards/manage/index.tsx
@@ -1,5 +1,5 @@
 import { useAdminProducts } from "medusa-react"
-import React, { useEffect, useState } from "react"
+import { useEffect, useState } from "react"
 import toast from "react-hot-toast"
 import Spinner from "../../../components/atoms/spinner"
 import Toaster from "../../../components/declarative-toaster"
@@ -28,7 +28,7 @@ const ManageGiftCard = () => {
 
   if (!giftCard) {
     return (
-      <div className="w-full h-screen flex items-center justify-center">
+      <div className="flex h-screen w-full items-center justify-center">
         <Spinner variant="secondary" size="large" />
       </div>
     )
@@ -39,7 +39,7 @@ const ManageGiftCard = () => {
       giftCard={giftCardToFormValuesMapper(giftCard)}
       giftCardId={giftCard.id}
     >
-      <div className="flex flex-col gap-y-large pb-xlarge">
+      <div className="gap-y-large pb-xlarge flex flex-col">
         <Information giftCard={giftCard} />
         <Denominations giftCard={giftCard} />
         <Images />
diff --git a/packages/admin-ui/ui/src/domain/gift-cards/manage/sections/images.tsx b/packages/admin-ui/ui/src/domain/gift-cards/manage/sections/images.tsx
index 2cc5cd92f0..aaf39b99a6 100644
--- a/packages/admin-ui/ui/src/domain/gift-cards/manage/sections/images.tsx
+++ b/packages/admin-ui/ui/src/domain/gift-cards/manage/sections/images.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import { Controller, useFieldArray } from "react-hook-form"
 import FileUploadField from "../../../../components/atoms/file-upload-field"
 import BodyCard from "../../../../components/organisms/body-card"
diff --git a/packages/admin-ui/ui/src/domain/gift-cards/manage/sections/information.tsx b/packages/admin-ui/ui/src/domain/gift-cards/manage/sections/information.tsx
index 77861cc2f4..92b448001c 100644
--- a/packages/admin-ui/ui/src/domain/gift-cards/manage/sections/information.tsx
+++ b/packages/admin-ui/ui/src/domain/gift-cards/manage/sections/information.tsx
@@ -116,7 +116,7 @@ const Information: React.FC<InformationProps> = ({ giftCard }) => {
       ]}
     >
       <div className="flex flex-col space-y-6">
-        <div className="grid grid-cols-2 gap-large">
+        <div className="gap-large grid grid-cols-2">
           <Input
             label="Name"
             placeholder="Add name"
@@ -154,7 +154,7 @@ const Information: React.FC<InformationProps> = ({ giftCard }) => {
             forceMount: true,
           }}
         >
-          <div className="grid grid-cols-2 gap-large">
+          <div className="gap-large grid grid-cols-2">
             <Input
               label="Handle"
               placeholder="Product handle"
diff --git a/packages/admin-ui/ui/src/domain/gift-cards/new.tsx b/packages/admin-ui/ui/src/domain/gift-cards/new.tsx
index a30a857bd4..a6bdc61f4d 100644
--- a/packages/admin-ui/ui/src/domain/gift-cards/new.tsx
+++ b/packages/admin-ui/ui/src/domain/gift-cards/new.tsx
@@ -3,7 +3,6 @@ import {
   useAdminProducts,
   useAdminStore,
 } from "medusa-react"
-import React from "react"
 import { Controller, useFieldArray, useForm, useWatch } from "react-hook-form"
 import { useNavigate } from "react-router-dom"
 import FileUploadField from "../../components/atoms/file-upload-field"
@@ -146,7 +145,7 @@ const NewGiftCard = ({ onClose }: NewGiftCardProps) => {
             <div className="mb-base">
               <h3 className="inter-base-semibold">Gift Card Details</h3>
             </div>
-            <div className="flex flex-col gap-y-base">
+            <div className="gap-y-base flex flex-col">
               <InputField
                 label={"Name"}
                 required
@@ -161,13 +160,13 @@ const NewGiftCard = ({ onClose }: NewGiftCardProps) => {
             </div>
             <div className="mt-xlarge">
               <h3 className="inter-base-semibold">Thumbnail</h3>
-              <div className="h-[80px] mt-base">
+              <div className="mt-base h-[80px]">
                 {thumbnail ? (
                   <div className="flex items-center gap-x-6">
                     <img
                       src={thumbnail.url}
                       alt=""
-                      className="w-20 h-20 rounded-base object-cover object-center"
+                      className="rounded-base h-20 w-20 object-cover object-center"
                     />
                     <div className="flex flex-col gap-y-1">
                       <span className="inter-small-regular">
@@ -175,7 +174,7 @@ const NewGiftCard = ({ onClose }: NewGiftCardProps) => {
                       </span>
                       <div>
                         <button
-                          className="text-rose-50 inter-small-semibold"
+                          className="inter-small-semibold text-rose-50"
                           type="button"
                           onClick={() => setValue("thumbnail", null)}
                         >
@@ -202,12 +201,12 @@ const NewGiftCard = ({ onClose }: NewGiftCardProps) => {
               <h3 className="inter-base-semibold mb-base">
                 Denominations<span className="text-rose-50">*</span>
               </h3>
-              <div className="flex flex-col gap-y-xsmall">
+              <div className="gap-y-xsmall flex flex-col">
                 {fields.map((denomination, index) => {
                   return (
                     <div
                       key={denomination.id}
-                      className="flex items-end gap-x-base last:mb-large"
+                      className="gap-x-base last:mb-large flex items-end"
                     >
                       <CurrencyInput.Root
                         currentCurrency={store?.default_currency_code}
@@ -236,7 +235,7 @@ const NewGiftCard = ({ onClose }: NewGiftCardProps) => {
                       <Button
                         variant="ghost"
                         size="large"
-                        className="w-10 h-10 text-grey-40"
+                        className="text-grey-40 h-10 w-10"
                         type="button"
                         onClick={() => remove(index)}
                       >
@@ -263,7 +262,7 @@ const NewGiftCard = ({ onClose }: NewGiftCardProps) => {
             </div>
           </Modal.Content>
           <Modal.Footer>
-            <div className="flex items-center justify-end w-full">
+            <div className="flex w-full items-center justify-end">
               <Button
                 type="submit"
                 variant="ghost"
diff --git a/packages/admin-ui/ui/src/domain/gift-cards/overview.tsx b/packages/admin-ui/ui/src/domain/gift-cards/overview.tsx
index 6f58c70b5e..e50535dba2 100644
--- a/packages/admin-ui/ui/src/domain/gift-cards/overview.tsx
+++ b/packages/admin-ui/ui/src/domain/gift-cards/overview.tsx
@@ -4,7 +4,7 @@ import {
   useAdminStore,
   useAdminUpdateProduct,
 } from "medusa-react"
-import React, { useMemo, useState } from "react"
+import { useMemo, useState } from "react"
 import { useNavigate } from "react-router-dom"
 import PageDescription from "../../components/atoms/page-description"
 import Spinner from "../../components/atoms/spinner"
@@ -79,7 +79,7 @@ const Overview = () => {
 
   return (
     <>
-      <div className="flex flex-col grow h-full pb-xlarge">
+      <div className="pb-xlarge flex h-full grow flex-col">
         <PageDescription
           title="Gift Cards"
           subtitle="Manage the Gift Cards of your Medusa store"
@@ -107,7 +107,7 @@ const Overview = () => {
                 </BannerCard>
               )}
             </div>
-            <div className="w-full flex flex-col grow">
+            <div className="flex w-full grow flex-col">
               <BodyCard
                 title="History"
                 subtitle="See the history of purchased Gift Cards"
@@ -119,7 +119,7 @@ const Overview = () => {
             </div>
           </>
         ) : (
-          <div className="w-full flex items-center justify-center h-44 rounded-rounded border border-grey-20">
+          <div className="rounded-rounded border-grey-20 flex h-44 w-full items-center justify-center border">
             <Spinner variant="secondary" size="large" />
           </div>
         )}
diff --git a/packages/admin-ui/ui/src/domain/inventory/filter-dropdown.tsx b/packages/admin-ui/ui/src/domain/inventory/filter-dropdown.tsx
index 04f60edbfa..3d79dc4350 100644
--- a/packages/admin-ui/ui/src/domain/inventory/filter-dropdown.tsx
+++ b/packages/admin-ui/ui/src/domain/inventory/filter-dropdown.tsx
@@ -70,15 +70,15 @@ const ProductsFilter = ({
               "rounded-rounded focus-visible:shadow-input focus-visible:border-violet-60 flex items-center space-x-1 focus-visible:outline-none"
             )}
           >
-            <div className="flex items-center h-6 px-2 border rounded-rounded bg-grey-5 border-grey-20 inter-small-semibold">
+            <div className="rounded-rounded bg-grey-5 border-grey-20 inter-small-semibold flex h-6 items-center border px-2">
               Filters
-              <div className="flex items-center ml-1 rounded text-grey-40">
+              <div className="text-grey-40 ml-1 flex items-center rounded">
                 <span className="text-violet-60 inter-small-semibold">
                   {numberOfFilters ? numberOfFilters : "0"}
                 </span>
               </div>
             </div>
-            <div className="flex items-center p-1 border rounded-rounded bg-grey-5 border-grey-20 inter-small-semibold">
+            <div className="rounded-rounded bg-grey-5 border-grey-20 inter-small-semibold flex items-center border p-1">
               <PlusIcon size={14} />
             </div>
           </button>
diff --git a/packages/admin-ui/ui/src/domain/inventory/inventory/index.tsx b/packages/admin-ui/ui/src/domain/inventory/inventory/index.tsx
index 0cba02289a..5a8481711a 100644
--- a/packages/admin-ui/ui/src/domain/inventory/inventory/index.tsx
+++ b/packages/admin-ui/ui/src/domain/inventory/inventory/index.tsx
@@ -4,8 +4,8 @@ import InventoryPageTableHeader from "../header"
 
 const InventoryView = () => {
   return (
-    <div className="flex flex-col h-full grow">
-      <div className="flex flex-col w-full grow">
+    <div className="flex h-full grow flex-col">
+      <div className="flex w-full grow flex-col">
         <BodyCard
           customHeader={<InventoryPageTableHeader activeView="inventory" />}
           className="h-fit"
diff --git a/packages/admin-ui/ui/src/domain/inventory/locations/components/general-form/index.tsx b/packages/admin-ui/ui/src/domain/inventory/locations/components/general-form/index.tsx
index 731118c673..eb725c87f6 100644
--- a/packages/admin-ui/ui/src/domain/inventory/locations/components/general-form/index.tsx
+++ b/packages/admin-ui/ui/src/domain/inventory/locations/components/general-form/index.tsx
@@ -18,7 +18,7 @@ const GeneralForm = ({ form }: Props) => {
   } = form
   return (
     <div>
-      <div className="grid grid-cols-2 gap-x-large mb-small">
+      <div className="gap-x-large mb-small grid grid-cols-2">
         <InputField
           label="Location name"
           placeholder="Flagship store, warehouse"
diff --git a/packages/admin-ui/ui/src/domain/inventory/locations/components/sales-channels-form/index.tsx b/packages/admin-ui/ui/src/domain/inventory/locations/components/sales-channels-form/index.tsx
index b06b53dbe4..aa15a4779d 100644
--- a/packages/admin-ui/ui/src/domain/inventory/locations/components/sales-channels-form/index.tsx
+++ b/packages/admin-ui/ui/src/domain/inventory/locations/components/sales-channels-form/index.tsx
@@ -47,7 +47,7 @@ const SalesChannelsForm = ({
           Add sales channels
         </Button>
       ) : (
-        <div className="flex items-center justify-between w-full">
+        <div className="flex w-full items-center justify-between">
           <SalesChannelsList
             salesChannels={location?.sales_channels || fields}
             showMax={1}
diff --git a/packages/admin-ui/ui/src/domain/inventory/locations/components/sales-channels-section/index.tsx b/packages/admin-ui/ui/src/domain/inventory/locations/components/sales-channels-section/index.tsx
index 035dc0ccf1..1051f69e12 100644
--- a/packages/admin-ui/ui/src/domain/inventory/locations/components/sales-channels-section/index.tsx
+++ b/packages/admin-ui/ui/src/domain/inventory/locations/components/sales-channels-section/index.tsx
@@ -9,7 +9,7 @@ const SalesChannelsSection = ({
 }) => {
   return (
     <div className="py-base">
-      <div className="flex items-center justify-between w-full">
+      <div className="flex w-full items-center justify-between">
         {!location.sales_channels?.length ? (
           <span className="inter-base-regular text-grey-40">
             Not connected to any sales channels yet
diff --git a/packages/admin-ui/ui/src/domain/inventory/locations/edit/index.tsx b/packages/admin-ui/ui/src/domain/inventory/locations/edit/index.tsx
index 15b49e6a25..194a67cfe2 100644
--- a/packages/admin-ui/ui/src/domain/inventory/locations/edit/index.tsx
+++ b/packages/admin-ui/ui/src/domain/inventory/locations/edit/index.tsx
@@ -64,7 +64,7 @@ const LocationEditModal = ({ onClose, location }: LocationEditModalProps) => {
         </Modal.Header>
         <Modal.Content>
           <form className="w-full">
-            <div className="flex flex-col mt-xlarge gap-y-xlarge">
+            <div className="mt-xlarge gap-y-xlarge flex flex-col">
               <GeneralForm form={nestedForm(form, "general")} />
               <AddressForm form={nestedForm(form, "address")} />
             </div>
@@ -72,7 +72,7 @@ const LocationEditModal = ({ onClose, location }: LocationEditModalProps) => {
         </Modal.Content>
       </Modal.Body>
       <Modal.Footer>
-        <div className="flex justify-end w-full space-x-2">
+        <div className="flex w-full justify-end space-x-2">
           <Button
             size="small"
             variant="secondary"
diff --git a/packages/admin-ui/ui/src/domain/inventory/locations/index.tsx b/packages/admin-ui/ui/src/domain/inventory/locations/index.tsx
index 2f20f00dbe..b0ef7f5a28 100644
--- a/packages/admin-ui/ui/src/domain/inventory/locations/index.tsx
+++ b/packages/admin-ui/ui/src/domain/inventory/locations/index.tsx
@@ -29,15 +29,15 @@ const Locations = () => {
 
   return (
     <>
-      <div className="flex flex-col h-full grow">
-        <div className="flex flex-col w-full grow">
+      <div className="flex h-full grow flex-col">
+        <div className="flex w-full grow flex-col">
           <BodyCard
             customHeader={<InventoryPageTableHeader activeView="locations" />}
-            className="min-h-[85px] h-[85px]"
+            className="h-[85px] min-h-[85px]"
             customActionable={Actions}
           />
           {isLoading ? (
-            <div className="flex items-center justify-center w-full h-full">
+            <div className="flex h-full w-full items-center justify-center">
               <Spinner variant="secondary" />
             </div>
           ) : (
diff --git a/packages/admin-ui/ui/src/domain/orders/components/items-to-receive-form/items-to-receive-form.tsx b/packages/admin-ui/ui/src/domain/orders/components/items-to-receive-form/items-to-receive-form.tsx
index 698c4ad7a7..af3b473108 100644
--- a/packages/admin-ui/ui/src/domain/orders/components/items-to-receive-form/items-to-receive-form.tsx
+++ b/packages/admin-ui/ui/src/domain/orders/components/items-to-receive-form/items-to-receive-form.tsx
@@ -61,7 +61,7 @@ export const ItemsToReceiveForm = ({ form, order }: Props) => {
   })
 
   return (
-    <div className="flex flex-col gap-y-xsmall">
+    <div className="gap-y-xsmall flex flex-col">
       <h2 className="inter-base-semibold">Items to receive</h2>
 
       <ItemsToReceiveTable instance={tableInstance} />
diff --git a/packages/admin-ui/ui/src/domain/orders/components/items-to-return-form/add-return-reason/add-return-reason-screen.tsx b/packages/admin-ui/ui/src/domain/orders/components/items-to-return-form/add-return-reason/add-return-reason-screen.tsx
index 56054c9b32..c2c43729e3 100644
--- a/packages/admin-ui/ui/src/domain/orders/components/items-to-return-form/add-return-reason/add-return-reason-screen.tsx
+++ b/packages/admin-ui/ui/src/domain/orders/components/items-to-return-form/add-return-reason/add-return-reason-screen.tsx
@@ -73,7 +73,7 @@ const AddReasonScreen = ({
   return (
     <>
       <Modal.Content>
-        <div className="flex flex-col gap-y-base">
+        <div className="gap-y-base flex flex-col">
           <h2 className="inter-base-semibold">Reason for Return</h2>
           <Controller
             control={control}
@@ -98,7 +98,7 @@ const AddReasonScreen = ({
         </div>
       </Modal.Content>
       <Modal.Footer>
-        <div className="flex w-full items-center justify-end gap-x-xsmall">
+        <div className="gap-x-xsmall flex w-full items-center justify-end">
           <Button size="small" variant="secondary" onClick={pop} type="button">
             Cancel
           </Button>
diff --git a/packages/admin-ui/ui/src/domain/orders/components/items-to-return-form/add-return-reason/index.tsx b/packages/admin-ui/ui/src/domain/orders/components/items-to-return-form/add-return-reason/index.tsx
index 000216b465..17319f1806 100644
--- a/packages/admin-ui/ui/src/domain/orders/components/items-to-return-form/add-return-reason/index.tsx
+++ b/packages/admin-ui/ui/src/domain/orders/components/items-to-return-form/add-return-reason/index.tsx
@@ -41,7 +41,7 @@ const AddReturnReason = ({ row, form, isClaim = false }: Props) => {
   }
 
   return (
-    <div className="grid w-full grid-cols-[74px,1fr,1fr] pb-small">
+    <div className="pb-small grid w-full grid-cols-[74px,1fr,1fr]">
       <span />
       <div className="flex items-center">
         <p className="inter-small-semibold">{reasonDetails?.reason?.label}</p>
diff --git a/packages/admin-ui/ui/src/domain/orders/components/items-to-send-form/add-additional-items-screen/add-additional-items-screen.tsx b/packages/admin-ui/ui/src/domain/orders/components/items-to-send-form/add-additional-items-screen/add-additional-items-screen.tsx
index 46dd136694..b83dc7baed 100644
--- a/packages/admin-ui/ui/src/domain/orders/components/items-to-send-form/add-additional-items-screen/add-additional-items-screen.tsx
+++ b/packages/admin-ui/ui/src/domain/orders/components/items-to-send-form/add-additional-items-screen/add-additional-items-screen.tsx
@@ -160,7 +160,7 @@ const AddAdditionalItemsScreen = ({
         <TablePagination table={table} count={count} className="mt-11" />
       </Modal.Content>
       <Modal.Footer>
-        <div className="flex w-full items-center justify-end gap-x-xsmall">
+        <div className="gap-x-xsmall flex w-full items-center justify-end">
           <Button variant="secondary" size="small" onClick={pop}>
             Go back
           </Button>
diff --git a/packages/admin-ui/ui/src/domain/orders/components/items-to-send-form/add-additional-items-screen/use-add-additional-items-columns.tsx b/packages/admin-ui/ui/src/domain/orders/components/items-to-send-form/add-additional-items-screen/use-add-additional-items-columns.tsx
index 8bc2ee6e40..0e25bb4884 100644
--- a/packages/admin-ui/ui/src/domain/orders/components/items-to-send-form/add-additional-items-screen/use-add-additional-items-columns.tsx
+++ b/packages/admin-ui/ui/src/domain/orders/components/items-to-send-form/add-additional-items-screen/use-add-additional-items-columns.tsx
@@ -77,7 +77,7 @@ export const useAddAdditionalItemsColumns = (order: Order) => {
           >
             <p className="select-none">Title</p>
             <div
-              className="flex h-large w-large items-center justify-center"
+              className="h-large w-large flex items-center justify-center"
               onClick={getToggleSortingHandler()}
             >
               <SortingIcon size={16} isSorted={getIsSorted()} />
@@ -96,7 +96,7 @@ export const useAddAdditionalItemsColumns = (order: Order) => {
           return (
             <div
               className={clsx(
-                "inter-small-regular flex items-center gap-base py-xsmall",
+                "inter-small-regular gap-base py-xsmall flex items-center",
                 {
                   "opacity-50": !isSelectable,
                 }
@@ -157,7 +157,7 @@ export const useAddAdditionalItemsColumns = (order: Order) => {
                   content="The price has been overridden in a price list, that is applicable to this order."
                   side="top"
                 >
-                  <p className="cursor-default text-grey-40 line-through">
+                  <p className="text-grey-40 cursor-default line-through">
                     {formatAmountWithSymbol({
                       amount: original_price_incl_tax || 0,
                       currency: order.currency_code,
diff --git a/packages/admin-ui/ui/src/domain/orders/components/items-to-send-form/index.tsx b/packages/admin-ui/ui/src/domain/orders/components/items-to-send-form/index.tsx
index 8a5975e2f2..0d0d0012f6 100644
--- a/packages/admin-ui/ui/src/domain/orders/components/items-to-send-form/index.tsx
+++ b/packages/admin-ui/ui/src/domain/orders/components/items-to-send-form/index.tsx
@@ -63,7 +63,7 @@ const ItemsToSendForm = ({ form, order }: Props) => {
   return (
     <div
       className={clsx({
-        "flex flex-col gap-y-base": fields.length > 0,
+        "gap-y-base flex flex-col": fields.length > 0,
         "flex items-center justify-between": !fields.length,
       })}
     >
diff --git a/packages/admin-ui/ui/src/domain/orders/components/refund-amount-form/index.tsx b/packages/admin-ui/ui/src/domain/orders/components/refund-amount-form/index.tsx
index 34b5383dfc..d5def52b64 100644
--- a/packages/admin-ui/ui/src/domain/orders/components/refund-amount-form/index.tsx
+++ b/packages/admin-ui/ui/src/domain/orders/components/refund-amount-form/index.tsx
@@ -41,7 +41,7 @@ const RefundAmountForm = ({ form, initialValue = 0, order }: Props) => {
   }
 
   return (
-    <div className="grid grid-cols-[40px_1fr] justify-end gap-x-xsmall">
+    <div className="gap-x-xsmall grid grid-cols-[40px_1fr] justify-end">
       <div className="flex flex-shrink justify-end">
         {refundAmount !== undefined ? (
           <Button
diff --git a/packages/admin-ui/ui/src/domain/orders/components/rma-summaries/summary-shipping-line.tsx b/packages/admin-ui/ui/src/domain/orders/components/rma-summaries/summary-shipping-line.tsx
index f8eed3c23a..54a1f5f0d9 100644
--- a/packages/admin-ui/ui/src/domain/orders/components/rma-summaries/summary-shipping-line.tsx
+++ b/packages/admin-ui/ui/src/domain/orders/components/rma-summaries/summary-shipping-line.tsx
@@ -16,8 +16,8 @@ export const SummaryShippingLine = ({
 }: ShippingLineProps) => {
   return (
     <div className="flex items-center justify-between">
-      <div className="flex items-center gap-x-base">
-        <div className=" w-[30px] h-10 rounded-rounded flex items-center justify-center text-grey-50">
+      <div className="gap-x-base flex items-center">
+        <div className=" rounded-rounded text-grey-50 flex h-10 w-[30px] items-center justify-center">
           <CornerDownRightIcon size={16} />
         </div>
         <div className="inter-small-regular">
diff --git a/packages/admin-ui/ui/src/domain/orders/components/shipping-address-form/shipping-address-form-modal.tsx b/packages/admin-ui/ui/src/domain/orders/components/shipping-address-form/shipping-address-form-modal.tsx
index 274ddbdcbd..ef33bd2389 100644
--- a/packages/admin-ui/ui/src/domain/orders/components/shipping-address-form/shipping-address-form-modal.tsx
+++ b/packages/admin-ui/ui/src/domain/orders/components/shipping-address-form/shipping-address-form-modal.tsx
@@ -75,7 +75,7 @@ const ShippingAddressFormScreen = ({ form, order }: Props) => {
         />
       </Modal.Content>
       <Modal.Footer>
-        <div className="flex w-full items-center justify-end gap-x-xsmall">
+        <div className="gap-x-xsmall flex w-full items-center justify-end">
           <Button
             variant="secondary"
             size="small"
diff --git a/packages/admin-ui/ui/src/domain/orders/components/shipping-form/index.tsx b/packages/admin-ui/ui/src/domain/orders/components/shipping-form/index.tsx
index 0323c5e703..253c525e3a 100644
--- a/packages/admin-ui/ui/src/domain/orders/components/shipping-form/index.tsx
+++ b/packages/admin-ui/ui/src/domain/orders/components/shipping-form/index.tsx
@@ -108,7 +108,7 @@ const ShippingForm = ({
   }
 
   return (
-    <div className="flex flex-col gap-y-base">
+    <div className="gap-y-base flex flex-col">
       <div className="flex flex-col">
         <h2 className="inter-base-semibold">
           Shipping for {isReturn ? "return" : "replacement"} items
@@ -140,7 +140,7 @@ const ShippingForm = ({
         <div className="flex w-full items-center justify-end">
           {selectedOptionPrice !== undefined ? (
             <div className="flex w-full items-center justify-end">
-              <div className="grid grid-cols-[1fr_40px] gap-x-xsmall">
+              <div className="gap-x-xsmall grid grid-cols-[1fr_40px]">
                 <Controller
                   control={control}
                   name={path("price")}
diff --git a/packages/admin-ui/ui/src/domain/orders/components/table-quantity-selector.tsx b/packages/admin-ui/ui/src/domain/orders/components/table-quantity-selector.tsx
index f2ad147710..38e40d546e 100644
--- a/packages/admin-ui/ui/src/domain/orders/components/table-quantity-selector.tsx
+++ b/packages/admin-ui/ui/src/domain/orders/components/table-quantity-selector.tsx
@@ -54,7 +54,7 @@ const TableQuantitySelector = <
   return (
     <div className="flex items-center justify-end">
       {quantityFlag ? (
-        <div className="inter-small-regular grid grid-cols-3 gap-x-2xsmall text-grey-50">
+        <div className="inter-small-regular gap-x-2xsmall text-grey-50 grid grid-cols-3">
           <Button
             variant="ghost"
             size="small"
diff --git a/packages/admin-ui/ui/src/domain/orders/details/address-modal.tsx b/packages/admin-ui/ui/src/domain/orders/details/address-modal.tsx
index 985ac5fff6..905dde17d0 100644
--- a/packages/admin-ui/ui/src/domain/orders/details/address-modal.tsx
+++ b/packages/admin-ui/ui/src/domain/orders/details/address-modal.tsx
@@ -105,10 +105,10 @@ const AddressModal = ({
             />
           </Modal.Content>
           <Modal.Footer>
-            <div className="flex justify-end w-full h-8">
+            <div className="flex h-8 w-full justify-end">
               <Button
                 variant="ghost"
-                className="justify-center w-32 mr-2 text-small"
+                className="text-small mr-2 w-32 justify-center"
                 size="large"
                 onClick={handleClose}
                 type="button"
@@ -117,7 +117,7 @@ const AddressModal = ({
               </Button>
               <Button
                 size="large"
-                className="justify-center w-32 text-small"
+                className="text-small w-32 justify-center"
                 variant="primary"
                 type="submit"
                 loading={submitting}
diff --git a/packages/admin-ui/ui/src/domain/orders/details/claim/register-claim-menu.tsx b/packages/admin-ui/ui/src/domain/orders/details/claim/register-claim-menu.tsx
index c197a103c7..96333c2a08 100644
--- a/packages/admin-ui/ui/src/domain/orders/details/claim/register-claim-menu.tsx
+++ b/packages/admin-ui/ui/src/domain/orders/details/claim/register-claim-menu.tsx
@@ -227,7 +227,7 @@ const RegisterClaimMenu = ({ order, onClose }: Props) => {
         </Modal.Header>
         <form onSubmit={onSubmit} data-testid="register-claim-form">
           <Modal.Content>
-            <div className="flex flex-col gap-y-xlarge">
+            <div className="gap-y-xlarge flex flex-col">
               <ItemsToReturnForm
                 form={nestedForm(form, "return_items")}
                 order={order}
@@ -266,7 +266,7 @@ const RegisterClaimMenu = ({ order, onClose }: Props) => {
                 form={nestedForm(form, "notification")}
                 type="claim"
               />
-              <div className="flex items-center justify-end gap-x-xsmall">
+              <div className="gap-x-xsmall flex items-center justify-end">
                 <Button
                   variant="secondary"
                   size="small"
diff --git a/packages/admin-ui/ui/src/domain/orders/details/email-modal.tsx b/packages/admin-ui/ui/src/domain/orders/details/email-modal.tsx
index ce1f820a63..1c8ae456d7 100644
--- a/packages/admin-ui/ui/src/domain/orders/details/email-modal.tsx
+++ b/packages/admin-ui/ui/src/domain/orders/details/email-modal.tsx
@@ -54,7 +54,7 @@ const EmailModal: React.FC<EmailModalProps> = ({
           </Modal.Header>
           <Modal.Content>
             <div className="space-y-4">
-              <div className="flex mt-4 space-x-4">
+              <div className="mt-4 flex space-x-4">
                 <Input
                   label="Email"
                   {...register("email")}
@@ -64,10 +64,10 @@ const EmailModal: React.FC<EmailModalProps> = ({
             </div>
           </Modal.Content>
           <Modal.Footer>
-            <div className="flex w-full h-8 justify-end">
+            <div className="flex h-8 w-full justify-end">
               <Button
                 variant="ghost"
-                className="mr-2 w-32 text-small justify-center"
+                className="text-small mr-2 w-32 justify-center"
                 size="large"
                 type="button"
                 onClick={handleClose}
@@ -76,7 +76,7 @@ const EmailModal: React.FC<EmailModalProps> = ({
               </Button>
               <Button
                 size="large"
-                className="w-32 text-small justify-center"
+                className="text-small w-32 justify-center"
                 variant="primary"
                 loading={isLoading}
                 disabled={isLoading}
diff --git a/packages/admin-ui/ui/src/domain/orders/details/mark-shipped/index.tsx b/packages/admin-ui/ui/src/domain/orders/details/mark-shipped/index.tsx
index 116b3722cc..d9bdebda3a 100644
--- a/packages/admin-ui/ui/src/domain/orders/details/mark-shipped/index.tsx
+++ b/packages/admin-ui/ui/src/domain/orders/details/mark-shipped/index.tsx
@@ -164,7 +164,7 @@ const MarkShippedModal: React.FC<MarkShippedModalProps> = ({
                 ))}
               </div>
             </div>
-            <div className="flex w-full justify-end mt-4">
+            <div className="mt-4 flex w-full justify-end">
               <Button
                 size="small"
                 onClick={() => appendTracking({ value: undefined })}
@@ -176,13 +176,13 @@ const MarkShippedModal: React.FC<MarkShippedModalProps> = ({
             </div>
           </Modal.Content>
           <Modal.Footer>
-            <div className="flex w-full h-8 justify-between">
+            <div className="flex h-8 w-full justify-between">
               <div
-                className="items-center h-full flex cursor-pointer"
+                className="flex h-full cursor-pointer items-center"
                 onClick={() => setNoNotis(!noNotis)}
               >
                 <div
-                  className={`w-5 h-5 flex justify-center text-grey-0 border-grey-30 border rounded-base ${
+                  className={`text-grey-0 border-grey-30 rounded-base flex h-5 w-5 justify-center border ${
                     !noNotis && "bg-violet-60"
                   }`}
                 >
@@ -197,7 +197,7 @@ const MarkShippedModal: React.FC<MarkShippedModalProps> = ({
                   checked={!noNotis}
                   type="checkbox"
                 />
-                <span className="ml-3 flex items-center text-grey-90 gap-x-xsmall">
+                <span className="text-grey-90 gap-x-xsmall ml-3 flex items-center">
                   Send notifications
                   <IconTooltip content="" />
                 </span>
@@ -205,7 +205,7 @@ const MarkShippedModal: React.FC<MarkShippedModalProps> = ({
               <div className="flex">
                 <Button
                   variant="ghost"
-                  className="mr-2 w-32 text-small justify-center"
+                  className="text-small mr-2 w-32 justify-center"
                   size="large"
                   onClick={handleCancel}
                   type="button"
@@ -214,7 +214,7 @@ const MarkShippedModal: React.FC<MarkShippedModalProps> = ({
                 </Button>
                 <Button
                   size="large"
-                  className="w-32 text-small justify-center"
+                  className="text-small w-32 justify-center"
                   variant="primary"
                   type="submit"
                   loading={isSubmitting}
diff --git a/packages/admin-ui/ui/src/domain/orders/details/order-line/edit.tsx b/packages/admin-ui/ui/src/domain/orders/details/order-line/edit.tsx
index a1a3117ba3..79a2fda8c0 100644
--- a/packages/admin-ui/ui/src/domain/orders/details/order-line/edit.tsx
+++ b/packages/admin-ui/ui/src/domain/orders/details/order-line/edit.tsx
@@ -167,9 +167,9 @@ const OrderEditLine = ({
       open={isLocked ? undefined : false}
       content="This line item is part of a fulfillment and cannot be edited. Cancel the fulfillment to edit the line item."
     >
-      <div className="flex justify-between mb-1 h-[64px] py-2 mx-[-5px] px-[5px] hover:bg-grey-5 rounded-rounded">
-        <div className="flex space-x-4 justify-center flex-grow-1">
-          <div className="flex h-[48px] w-[36px] rounded-rounded overflow-hidden">
+      <div className="hover:bg-grey-5 rounded-rounded mx-[-5px] mb-1 flex h-[64px] justify-between py-2 px-[5px]">
+        <div className="flex-grow-1 flex justify-center space-x-4">
+          <div className="rounded-rounded flex h-[48px] w-[36px] overflow-hidden">
             {item.thumbnail ? (
               <img src={item.thumbnail} className="object-cover" />
             ) : (
@@ -177,10 +177,10 @@ const OrderEditLine = ({
             )}
           </div>
           <div className="flex flex-col justify-center">
-            <div className="flex gap-2 items-center max-w-[310px]">
+            <div className="flex max-w-[310px] items-center gap-2">
               <span
                 className={clsx(
-                  "font-semibold text-grey-900 flex-shrink-0 flex-grow",
+                  "text-grey-900 flex-shrink-0 flex-grow font-semibold",
                   {
                     "text-gray-400": isLocked,
                   }
@@ -191,7 +191,7 @@ const OrderEditLine = ({
               {item?.variant?.options && (
                 <span
                   className={clsx(
-                    "text-gray-400 flex gap-3 flex-shrink-1 truncate",
+                    "flex-shrink-1 flex gap-3 truncate text-gray-400",
                     {
                       "text-gray-400": isLocked,
                     }
@@ -203,13 +203,13 @@ const OrderEditLine = ({
             </div>
             <div className="flex items-center">
               {isNew && (
-                <div className="text-small text-blue-500 bg-blue-10 h-[24px] w-[42px] mr-2 flex-shrink-0 flex items-center justify-center rounded-rounded">
+                <div className="text-small bg-blue-10 rounded-rounded mr-2 flex h-[24px] w-[42px] flex-shrink-0 items-center justify-center text-blue-500">
                   New
                 </div>
               )}
 
               {isModified && (
-                <div className="text-small text-orange-500 bg-orange-10 h-[24px] w-[68px] mr-2 flex-shrink-0 flex items-center justify-center rounded-rounded">
+                <div className="text-small bg-orange-10 rounded-rounded mr-2 flex h-[24px] w-[68px] flex-shrink-0 items-center justify-center text-orange-500">
                   Modified
                 </div>
               )}
@@ -220,7 +220,7 @@ const OrderEditLine = ({
                     value={item.variant?.sku}
                     displayValue={
                       <span
-                        className={clsx("text-gray-500 flex gap-3", {
+                        className={clsx("flex gap-3 text-gray-500", {
                           "text-gray-400": isLocked,
                         })}
                       >
@@ -234,9 +234,9 @@ const OrderEditLine = ({
             </div>
           </div>
         </div>
-        <div className="flex items-center justify-between min-w-[312px]">
+        <div className="flex min-w-[312px] items-center justify-between">
           <div
-            className={clsx("flex items-center flex-grow-0 text-gray-400", {
+            className={clsx("flex flex-grow-0 items-center text-gray-400", {
               "pointer-events-none": isLocked,
             })}
           >
@@ -251,7 +251,7 @@ const OrderEditLine = ({
               }
             />
             <span
-              className={clsx("px-8 text-center text-gray-900 min-w-[74px]", {
+              className={clsx("min-w-[74px] px-8 text-center text-gray-900", {
                 "!text-gray-400": isLocked,
               })}
             >
@@ -265,16 +265,16 @@ const OrderEditLine = ({
             />
           </div>
 
-          <div className="flex gap-6 items-center h-full">
+          <div className="flex h-full items-center gap-6">
             <div
               className={clsx(
-                "flex small:space-x-2 medium:space-x-4 large:space-x-6",
-                { "!text-gray-400 pointer-events-none": isLocked }
+                "small:space-x-2 medium:space-x-4 large:space-x-6 flex",
+                { "pointer-events-none !text-gray-400": isLocked }
               )}
             >
               <div
-                className={clsx("text-gray-900 min-w-[60px] text-right", {
-                  "!text-gray-400 pointer-events-none": isLocked,
+                className={clsx("min-w-[60px] text-right text-gray-900", {
+                  "pointer-events-none !text-gray-400": isLocked,
                 })}
               >
                 {formatAmountWithSymbol({
@@ -283,7 +283,7 @@ const OrderEditLine = ({
                   tax: item.includes_tax ? 0 : item.tax_lines,
                   digits: 2,
                 })}
-                <span className="text-gray-400 ml-2">
+                <span className="ml-2 text-gray-400">
                   {currencyCode.toUpperCase()}
                 </span>
               </div>
diff --git a/packages/admin-ui/ui/src/domain/orders/details/refund/index.tsx b/packages/admin-ui/ui/src/domain/orders/details/refund/index.tsx
index 026c93ab5d..14aa1f042a 100644
--- a/packages/admin-ui/ui/src/domain/orders/details/refund/index.tsx
+++ b/packages/admin-ui/ui/src/domain/orders/details/refund/index.tsx
@@ -1,6 +1,6 @@
 import { Order } from "@medusajs/medusa"
 import { useAdminRefundPayment } from "medusa-react"
-import React, { useMemo, useState } from "react"
+import { useMemo, useState } from "react"
 import { Controller, useForm } from "react-hook-form"
 
 import Button from "../../../../components/fundamentals/button"
@@ -92,8 +92,8 @@ const RefundMenu = ({
           </Modal.Header>
           <Modal.Content>
             {isSystemPayment && (
-              <div className="inter-small-regular mb-6 p-4 text-orange-50 bg-orange-5 rounded-rounded flex">
-                <div className="h-full mr-3">
+              <div className="inter-small-regular bg-orange-5 rounded-rounded mb-6 flex p-4 text-orange-50">
+                <div className="mr-3 h-full">
                   <AlertIcon size={20} />
                 </div>
                 <div className="flex flex-col">
@@ -105,7 +105,7 @@ const RefundMenu = ({
               </div>
             )}
             <span className="inter-base-semibold">Details</span>
-            <div className="grid gap-y-base mt-4">
+            <div className="gap-y-base mt-4 grid">
               <CurrencyInput.Root
                 size="small"
                 currentCurrency={order.currency_code}
@@ -158,11 +158,11 @@ const RefundMenu = ({
           <Modal.Footer>
             <div className="flex w-full  justify-between">
               <div
-                className="items-center h-full flex cursor-pointer"
+                className="flex h-full cursor-pointer items-center"
                 onClick={() => setNoNotification(!noNotification)}
               >
                 <div
-                  className={`w-5 h-5 flex justify-center text-grey-0 border-grey-30 border rounded-base ${
+                  className={`text-grey-0 border-grey-30 rounded-base flex h-5 w-5 justify-center border ${
                     !noNotification && "bg-violet-60"
                   }`}
                 >
@@ -178,12 +178,12 @@ const RefundMenu = ({
                   onChange={() => setNoNotification(!noNotification)}
                   type="checkbox"
                 />
-                <span className="ml-3 flex items-center text-grey-90 gap-x-xsmall">
+                <span className="text-grey-90 gap-x-xsmall ml-3 flex items-center">
                   Send notifications
                   <IconTooltip content="Notify customer of created return" />
                 </span>
               </div>
-              <div className="flex gap-x-xsmall">
+              <div className="gap-x-xsmall flex">
                 <Button
                   onClick={onDismiss}
                   size="small"
diff --git a/packages/admin-ui/ui/src/domain/orders/details/returns/index.tsx b/packages/admin-ui/ui/src/domain/orders/details/returns/index.tsx
index e898d75d75..f97f8f77b2 100644
--- a/packages/admin-ui/ui/src/domain/orders/details/returns/index.tsx
+++ b/packages/admin-ui/ui/src/domain/orders/details/returns/index.tsx
@@ -213,7 +213,7 @@ const ReturnMenu: React.FC<ReturnMenuProps> = ({ order, onDismiss }) => {
                   <span>Shipping</span>
                   <div>
                     {displayAmount(order.currency_code, shippingPrice || 0)}{" "}
-                    <span className="ml-3 text-grey-40">
+                    <span className="text-grey-40 ml-3">
                       {order.currency_code.toUpperCase()}
                     </span>
                   </div>
@@ -225,7 +225,7 @@ const ReturnMenu: React.FC<ReturnMenuProps> = ({ order, onDismiss }) => {
                   {!refundEdited && (
                     <>
                       <span
-                        className="mr-2 cursor-pointer text-grey-40"
+                        className="text-grey-40 mr-2 cursor-pointer"
                         onClick={() => setRefundEdited(true)}
                       >
                         <EditIcon size={20} />{" "}
@@ -262,7 +262,7 @@ const ReturnMenu: React.FC<ReturnMenuProps> = ({ order, onDismiss }) => {
               onClick={() => setNoNotification(!noNotification)}
             >
               <div
-                className={`flex h-5 w-5 justify-center rounded-base border border-grey-30 text-grey-0 ${
+                className={`rounded-base border-grey-30 text-grey-0 flex h-5 w-5 justify-center border ${
                   !noNotification && "bg-violet-60"
                 }`}
               >
@@ -278,12 +278,12 @@ const ReturnMenu: React.FC<ReturnMenuProps> = ({ order, onDismiss }) => {
                 onChange={() => setNoNotification(!noNotification)}
                 type="checkbox"
               />
-              <span className="ml-3 flex items-center gap-x-xsmall text-grey-90">
+              <span className="gap-x-xsmall text-grey-90 ml-3 flex items-center">
                 Send notifications
                 <IconTooltip content="Notify customer of created return" />
               </span>
             </div>
-            <div className="flex gap-x-xsmall">
+            <div className="gap-x-xsmall flex">
               <Button
                 onClick={() => onDismiss()}
                 className="w-[112px]"
diff --git a/packages/admin-ui/ui/src/domain/orders/details/rma-sub-modals/address.tsx b/packages/admin-ui/ui/src/domain/orders/details/rma-sub-modals/address.tsx
index a9259816ea..de5815d0c6 100644
--- a/packages/admin-ui/ui/src/domain/orders/details/rma-sub-modals/address.tsx
+++ b/packages/admin-ui/ui/src/domain/orders/details/rma-sub-modals/address.tsx
@@ -36,9 +36,8 @@ const RMAEditAddressSubModal: React.FC<RMAEditAddressSubModalProps> = ({
 }) => {
   const { pop } = useContext(LayeredModalContext)
 
-  const { register, handleSubmit, control, reset } = useForm<
-    RMAEditAddressSubModalFormData
-  >()
+  const { register, handleSubmit, control, reset } =
+    useForm<RMAEditAddressSubModalFormData>()
 
   const { region } = useAdminRegion(order.region_id)
 
@@ -84,7 +83,7 @@ const RMAEditAddressSubModal: React.FC<RMAEditAddressSubModalProps> = ({
               <div>
                 <span className="inter-base-semibold">General</span>
 
-                <div className="grid grid-cols-2 gap-x-base gap-y-base">
+                <div className="gap-x-base gap-y-base grid grid-cols-2">
                   <Input
                     {...register("first_name", {
                       required: true,
@@ -110,7 +109,7 @@ const RMAEditAddressSubModal: React.FC<RMAEditAddressSubModalProps> = ({
               </div>
               <div className="mt-8">
                 <span className="inter-base-semibold">Shipping Address</span>
-                <div className="grid gap-y-base my-4">
+                <div className="gap-y-base my-4 grid">
                   <Input
                     {...register("address_1", {
                       required: true,
@@ -125,7 +124,7 @@ const RMAEditAddressSubModal: React.FC<RMAEditAddressSubModalProps> = ({
                     label="Address 2"
                   />
                 </div>
-                <div className="grid grid-cols-2 gap-x-base gap-y-base">
+                <div className="gap-x-base gap-y-base grid grid-cols-2">
                   <Input
                     {...register("province")}
                     placeholder="Province"
@@ -170,7 +169,7 @@ const RMAEditAddressSubModal: React.FC<RMAEditAddressSubModalProps> = ({
           </div>
         </Modal.Content>
         <Modal.Footer>
-          <div className="flex w-full justify-end gap-x-xsmall">
+          <div className="gap-x-xsmall flex w-full justify-end">
             <Button
               variant="ghost"
               size="small"
diff --git a/packages/admin-ui/ui/src/domain/orders/details/rma-sub-modals/products.tsx b/packages/admin-ui/ui/src/domain/orders/details/rma-sub-modals/products.tsx
index 63f58d3fed..34d589b040 100644
--- a/packages/admin-ui/ui/src/domain/orders/details/rma-sub-modals/products.tsx
+++ b/packages/admin-ui/ui/src/domain/orders/details/rma-sub-modals/products.tsx
@@ -66,11 +66,11 @@ const RMASelectProductSubModal: React.FC<RMASelectProductSubModalProps> = ({
         Cell: ({ row: { original } }) => {
           return (
             <div className="flex items-center">
-              <div className="h-[40px] w-[30px] my-1.5 flex items-center mr-4">
+              <div className="my-1.5 mr-4 flex h-[40px] w-[30px] items-center">
                 {original.product.thumbnail ? (
                   <img
                     src={original.product.thumbnail}
-                    className="h-full object-cover rounded-soft"
+                    className="rounded-soft h-full object-cover"
                   />
                 ) : (
                   <ImagePlaceholder />
@@ -266,7 +266,7 @@ const RMASelectProductSubModal: React.FC<RMASelectProductSubModalProps> = ({
         </TableContainer>
       </Modal.Content>
       <Modal.Footer>
-        <div className="flex w-full justify-end gap-x-xsmall">
+        <div className="gap-x-xsmall flex w-full justify-end">
           <Button
             variant="ghost"
             size="small"
diff --git a/packages/admin-ui/ui/src/domain/orders/details/rma-sub-modals/return-reasons.tsx b/packages/admin-ui/ui/src/domain/orders/details/rma-sub-modals/return-reasons.tsx
index 7c0417e71c..4d0c1c07c1 100644
--- a/packages/admin-ui/ui/src/domain/orders/details/rma-sub-modals/return-reasons.tsx
+++ b/packages/admin-ui/ui/src/domain/orders/details/rma-sub-modals/return-reasons.tsx
@@ -128,7 +128,7 @@ const RMAReturnReasonSubModal: React.FC<RMAReturnReasonSubModalProps> = ({
         </div>
       </Modal.Content>
       <Modal.Footer>
-        <div className="flex w-full justify-end gap-x-xsmall">
+        <div className="gap-x-xsmall flex w-full justify-end">
           <Button
             variant="ghost"
             size="small"
@@ -156,10 +156,10 @@ const RMAReturnReasonSubModal: React.FC<RMAReturnReasonSubModalProps> = ({
 }
 
 const ImageRow = ({ url, onDelete, name, size }) => (
-  <div className="flex items-center w-full justify-between my-8">
+  <div className="my-8 flex w-full items-center justify-between">
     <div className="flex items-center">
-      <div className="w-20 h-20 bg-voilet-60">
-        <img className="object-cover rounded-rounded w-full h-full" src={url} />
+      <div className="bg-voilet-60 h-20 w-20">
+        <img className="rounded-rounded h-full w-full object-cover" src={url} />
       </div>
       <div className="inter-small-regular ml-8 flex flex-col">
         {name}
@@ -169,7 +169,7 @@ const ImageRow = ({ url, onDelete, name, size }) => (
     <Button
       variant="ghost"
       size="small"
-      className="w-8 h-8 text-grey-40"
+      className="text-grey-40 h-8 w-8"
       onClick={onDelete}
     >
       <TrashIcon size={20} />
diff --git a/packages/admin-ui/ui/src/domain/orders/details/swap/create.tsx b/packages/admin-ui/ui/src/domain/orders/details/swap/create.tsx
index d94813052d..3aed1a7aaf 100644
--- a/packages/admin-ui/ui/src/domain/orders/details/swap/create.tsx
+++ b/packages/admin-ui/ui/src/domain/orders/details/swap/create.tsx
@@ -263,12 +263,12 @@ const SwapMenu: React.FC<SwapMenuProps> = ({ order, onDismiss }) => {
               />
             )}
           </div>
-          <div className="flex justify-between mt-8 items-center">
+          <div className="mt-8 flex items-center justify-between">
             <h3 className="inter-base-semibold ">Items to send</h3>
             {itemsToAdd.length === 0 ? (
               <Button
                 variant="ghost"
-                className="border border-grey-20"
+                className="border-grey-20 border"
                 size="small"
                 onClick={() => {
                   layeredModalContext.push(
@@ -299,7 +299,7 @@ const SwapMenu: React.FC<SwapMenuProps> = ({ order, onDismiss }) => {
               <div className="flex w-full justify-end">
                 <Button
                   variant="ghost"
-                  className="border border-grey-20"
+                  className="border-grey-20 border"
                   size="small"
                   onClick={() => {
                     layeredModalContext.push(
@@ -316,7 +316,7 @@ const SwapMenu: React.FC<SwapMenuProps> = ({ order, onDismiss }) => {
               </div>
             </>
           )}
-          <div className="flex text-grey-90 justify-between items-center inter-small-regular mt-8">
+          <div className="text-grey-90 inter-small-regular mt-8 flex items-center justify-between">
             <span>Return Total</span>
             <span>
               {formatAmountWithSymbol({
@@ -325,7 +325,7 @@ const SwapMenu: React.FC<SwapMenuProps> = ({ order, onDismiss }) => {
               })}
             </span>
           </div>
-          <div className="flex text-grey-90 justify-between items-center inter-small-regular mt-2">
+          <div className="text-grey-90 inter-small-regular mt-2 flex items-center justify-between">
             <span>Additional Total</span>
             <span>
               {formatAmountWithSymbol({
@@ -336,11 +336,11 @@ const SwapMenu: React.FC<SwapMenuProps> = ({ order, onDismiss }) => {
               })}
             </span>
           </div>
-          <div className="flex text-grey-90 justify-between items-center inter-small-regular mt-2">
+          <div className="text-grey-90 inter-small-regular mt-2 flex items-center justify-between">
             <span>Outbond Shipping</span>
             <span>Calculated at checkout</span>
           </div>
-          <div className="flex justify-between items-center inter-base-semibold mt-4">
+          <div className="inter-base-semibold mt-4 flex items-center justify-between">
             <span>Estimated difference</span>
             <span className="inter-large-semibold">
               {formatAmountWithSymbol({
@@ -355,11 +355,11 @@ const SwapMenu: React.FC<SwapMenuProps> = ({ order, onDismiss }) => {
         <Modal.Footer>
           <div className="flex w-full justify-between">
             <div
-              className="items-center h-full flex cursor-pointer"
+              className="flex h-full cursor-pointer items-center"
               onClick={() => setNoNotification(!noNotification)}
             >
               <div
-                className={`w-5 h-5 flex justify-center text-grey-0 border-grey-30 border rounded-base ${
+                className={`text-grey-0 border-grey-30 rounded-base flex h-5 w-5 justify-center border ${
                   !noNotification && "bg-violet-60"
                 }`}
               >
@@ -374,7 +374,7 @@ const SwapMenu: React.FC<SwapMenuProps> = ({ order, onDismiss }) => {
                 checked={!noNotification}
                 type="checkbox"
               />
-              <span className="ml-3 flex items-center text-grey-90 gap-x-xsmall">
+              <span className="text-grey-90 gap-x-xsmall ml-3 flex items-center">
                 Send notifications
                 <IconTooltip content="If unchecked the customer will not receive communication about this exchange" />
               </span>
diff --git a/packages/admin-ui/ui/src/domain/orders/details/templates/address.tsx b/packages/admin-ui/ui/src/domain/orders/details/templates/address.tsx
index 46228267d8..34dcc03426 100644
--- a/packages/admin-ui/ui/src/domain/orders/details/templates/address.tsx
+++ b/packages/admin-ui/ui/src/domain/orders/details/templates/address.tsx
@@ -1,5 +1,4 @@
 import { Address } from "@medusajs/medusa"
-import React from "react"
 
 type FormattedAddressProps = {
   title: string
@@ -11,7 +10,7 @@ export const FormattedAddress = ({ title, addr }: FormattedAddressProps) => {
     return (
       <div className="flex flex-col pl-6">
         <div className="inter-small-regular text-grey-50 mb-1">{title}</div>
-        <div className="flex flex-col inter-small-regular">N/A</div>
+        <div className="inter-small-regular flex flex-col">N/A</div>
       </div>
     )
   }
@@ -19,7 +18,7 @@ export const FormattedAddress = ({ title, addr }: FormattedAddressProps) => {
   return (
     <div className="flex flex-col pl-6">
       <div className="inter-small-regular text-grey-50 mb-1">{title}</div>
-      <div className="flex flex-col inter-small-regular">
+      <div className="inter-small-regular flex flex-col">
         <span>
           {addr?.address_1} {addr?.address_2}
         </span>
diff --git a/packages/admin-ui/ui/src/domain/orders/details/templates/display-total.tsx b/packages/admin-ui/ui/src/domain/orders/details/templates/display-total.tsx
index cc0e91b9ec..0abced24d1 100644
--- a/packages/admin-ui/ui/src/domain/orders/details/templates/display-total.tsx
+++ b/packages/admin-ui/ui/src/domain/orders/details/templates/display-total.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import clsx from "clsx"
 import { formatAmountWithSymbol } from "../../../../utils/prices"
 
@@ -10,7 +9,7 @@ export const DisplayTotal = ({
   subtitle = "",
   totalColor = "text-grey-90",
 }) => (
-  <div className="flex justify-between mt-4 items-center">
+  <div className="mt-4 flex items-center justify-between">
     <div className="flex flex-col">
       <div
         className={clsx("text-grey-90", {
diff --git a/packages/admin-ui/ui/src/domain/orders/details/templates/fulfillment-status.tsx b/packages/admin-ui/ui/src/domain/orders/details/templates/fulfillment-status.tsx
index bf7a1659c9..e1f7352dc8 100644
--- a/packages/admin-ui/ui/src/domain/orders/details/templates/fulfillment-status.tsx
+++ b/packages/admin-ui/ui/src/domain/orders/details/templates/fulfillment-status.tsx
@@ -1,5 +1,3 @@
-import React from "react"
-
 import StatusDot from "../../../../components/fundamentals/status-indicator"
 
 export const FulfillmentStatusComponent = ({ status }) => {
diff --git a/packages/admin-ui/ui/src/domain/orders/details/templates/fulfillment.tsx b/packages/admin-ui/ui/src/domain/orders/details/templates/fulfillment.tsx
index c0acc612c9..dc7138bc70 100644
--- a/packages/admin-ui/ui/src/domain/orders/details/templates/fulfillment.tsx
+++ b/packages/admin-ui/ui/src/domain/orders/details/templates/fulfillment.tsx
@@ -4,7 +4,6 @@ import {
   useAdminCancelFulfillment,
   useAdminCancelSwapFulfillment,
 } from "medusa-react"
-import React from "react"
 import CancelIcon from "../../../../components/fundamentals/icons/cancel-icon"
 import PackageIcon from "../../../../components/fundamentals/icons/package-icon"
 import Actionables from "../../../../components/molecules/actionables"
@@ -98,7 +97,7 @@ export const FormattedFulfillment = ({
                 fulfillment.provider_id
               )}`}
         </div>
-        <div className="flex text-grey-50">
+        <div className="text-grey-50 flex">
           {!fulfillment.shipped_at ? "Not shipped" : "Tracking"}
           {hasLinks &&
             fulfillment.tracking_links.map((tl, j) => (
diff --git a/packages/admin-ui/ui/src/domain/orders/details/templates/order-status.tsx b/packages/admin-ui/ui/src/domain/orders/details/templates/order-status.tsx
index c83c1d24e0..4569c2238d 100644
--- a/packages/admin-ui/ui/src/domain/orders/details/templates/order-status.tsx
+++ b/packages/admin-ui/ui/src/domain/orders/details/templates/order-status.tsx
@@ -1,5 +1,3 @@
-import React from "react"
-
 import StatusDot from "../../../../components/fundamentals/status-indicator"
 
 export const OrderStatusComponent = ({ status }) => {
diff --git a/packages/admin-ui/ui/src/domain/orders/details/templates/payment-actionables.tsx b/packages/admin-ui/ui/src/domain/orders/details/templates/payment-actionables.tsx
index fdb55f81f2..70190627ad 100644
--- a/packages/admin-ui/ui/src/domain/orders/details/templates/payment-actionables.tsx
+++ b/packages/admin-ui/ui/src/domain/orders/details/templates/payment-actionables.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import Button from "../../../../components/fundamentals/button"
 import useNotification from "../../../../hooks/use-notification"
 import { getErrorMessage } from "../../../../utils/error-messages"
diff --git a/packages/admin-ui/ui/src/domain/orders/details/templates/payment-details.tsx b/packages/admin-ui/ui/src/domain/orders/details/templates/payment-details.tsx
index bccec014cc..6905df1a60 100644
--- a/packages/admin-ui/ui/src/domain/orders/details/templates/payment-details.tsx
+++ b/packages/admin-ui/ui/src/domain/orders/details/templates/payment-details.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import { DisplayTotal } from "./display-total"
 
 export const PaymentDetails = ({
diff --git a/packages/admin-ui/ui/src/domain/orders/details/templates/payment-status.tsx b/packages/admin-ui/ui/src/domain/orders/details/templates/payment-status.tsx
index 8538e1eb6d..7d855b7db5 100644
--- a/packages/admin-ui/ui/src/domain/orders/details/templates/payment-status.tsx
+++ b/packages/admin-ui/ui/src/domain/orders/details/templates/payment-status.tsx
@@ -1,5 +1,3 @@
-import React from "react"
-
 import StatusDot from "../../../../components/fundamentals/status-indicator"
 
 export const PaymentStatusComponent = ({ status }) => {
diff --git a/packages/admin-ui/ui/src/domain/orders/details/templates/tracking-link.tsx b/packages/admin-ui/ui/src/domain/orders/details/templates/tracking-link.tsx
index 0328a9e568..544047ba59 100644
--- a/packages/admin-ui/ui/src/domain/orders/details/templates/tracking-link.tsx
+++ b/packages/admin-ui/ui/src/domain/orders/details/templates/tracking-link.tsx
@@ -1,5 +1,3 @@
-import React from "react"
-
 export const TrackingLink = ({ trackingLink }) => {
   if (trackingLink.url) {
     return (
@@ -7,6 +5,7 @@ export const TrackingLink = ({ trackingLink }) => {
         style={{ textDecoration: "none" }}
         target="_blank"
         href={trackingLink.url}
+        rel="noreferrer"
       >
         <div className="text-blue-60 ml-2">{trackingLink.tracking_number} </div>
       </a>
diff --git a/packages/admin-ui/ui/src/domain/orders/draft-orders/details.tsx b/packages/admin-ui/ui/src/domain/orders/draft-orders/details.tsx
index 4874a9ae8f..db408afaea 100644
--- a/packages/admin-ui/ui/src/domain/orders/draft-orders/details.tsx
+++ b/packages/admin-ui/ui/src/domain/orders/draft-orders/details.tsx
@@ -131,14 +131,14 @@ const DraftOrderDetails = () => {
         previousRoute="/a/draft-orders"
       />
       {isLoading || !draft_order ? (
-        <BodyCard className="w-full pt-2xlarge flex items-center justify-center">
+        <BodyCard className="pt-2xlarge flex w-full items-center justify-center">
           <Spinner size={"large"} variant={"secondary"} />
         </BodyCard>
       ) : (
         <div className="flex space-x-4">
-          <div className="flex flex-col w-full h-full">
+          <div className="flex h-full w-full flex-col">
             <BodyCard
-              className={"w-full mb-4 min-h-[200px]"}
+              className={"mb-4 min-h-[200px] w-full"}
               title={`Order #${draft_order.display_id}`}
               subtitle={moment(draft_order.created_at).format(
                 "D MMMM YYYY hh:mm a"
@@ -183,7 +183,7 @@ const DraftOrderDetails = () => {
                     ]
               }
             >
-              <div className="flex mt-6 space-x-6 divide-x">
+              <div className="mt-6 flex space-x-6 divide-x">
                 <div className="flex flex-col">
                   <div className="inter-smaller-regular text-grey-50 mb-1">
                     Email
@@ -211,15 +211,15 @@ const DraftOrderDetails = () => {
                 </div>
               </div>
             </BodyCard>
-            <BodyCard className={"w-full mb-4 min-h-0 h-auto"} title="Summary">
+            <BodyCard className={"mb-4 h-auto min-h-0 w-full"} title="Summary">
               <div className="mt-6">
                 {cart?.items?.map((item, i) => (
                   <div
                     key={i}
-                    className="flex justify-between mb-1 h-[64px] py-2 mx-[-5px] px-[5px] hover:bg-grey-5 rounded-rounded"
+                    className="hover:bg-grey-5 rounded-rounded mx-[-5px] mb-1 flex h-[64px] justify-between py-2 px-[5px]"
                   >
-                    <div className="flex space-x-4 justify-center">
-                      <div className="flex h-[48px] w-[36px] rounded-rounded items-center justify-center">
+                    <div className="flex justify-center space-x-4">
+                      <div className="rounded-rounded flex h-[48px] w-[36px] items-center justify-center">
                         {item?.thumbnail ? (
                           <img
                             src={item.thumbnail}
@@ -241,7 +241,7 @@ const DraftOrderDetails = () => {
                       </div>
                     </div>
                     <div className="flex  items-center">
-                      <div className="flex small:space-x-2 medium:space-x-4 large:space-x-6 mr-3">
+                      <div className="small:space-x-2 medium:space-x-4 large:space-x-6 mr-3 flex">
                         <div className="inter-small-regular text-grey-50">
                           {formatAmountWithSymbol({
                             amount: (item?.total ?? 0) / item.quantity,
@@ -276,9 +276,9 @@ const DraftOrderDetails = () => {
                 {cart?.discounts?.map((discount, index) => (
                   <div
                     key={index}
-                    className="flex justify-between mt-4 items-center"
+                    className="mt-4 flex items-center justify-between"
                   >
-                    <div className="flex inter-small-regular text-grey-90 items-center">
+                    <div className="inter-small-regular text-grey-90 flex items-center">
                       Discount:{" "}
                       <Badge className="ml-3" variant="default">
                         {discount.code}
@@ -314,7 +314,7 @@ const DraftOrderDetails = () => {
               </div>
             </BodyCard>
             <BodyCard
-              className={"w-full mb-4 min-h-0 h-auto"}
+              className={"mb-4 h-auto min-h-0 w-full"}
               title="Payment"
               customActionable={
                 draft_order?.status !== "completed" && <PaymentActionables />
@@ -343,7 +343,7 @@ const DraftOrderDetails = () => {
                   totalTitle={"Total to pay"}
                 />
                 {draft_order?.status !== "completed" && (
-                  <div className="text-grey-50 inter-small-regular w-full flex items-center mt-5">
+                  <div className="text-grey-50 inter-small-regular mt-5 flex w-full items-center">
                     <span className="mr-2.5">Payment link:</span>
                     {store?.payment_link_template ? (
                       <CopyToClipboard
@@ -358,7 +358,7 @@ const DraftOrderDetails = () => {
                 )}
               </div>
             </BodyCard>
-            <BodyCard className={"w-full mb-4 min-h-0 h-auto"} title="Shipping">
+            <BodyCard className={"mb-4 h-auto min-h-0 w-full"} title="Shipping">
               <div className="mt-6">
                 {cart?.shipping_methods.map((method) => (
                   <div className="flex flex-col" key={method.id}>
@@ -368,14 +368,14 @@ const DraftOrderDetails = () => {
                     <span className="inter-small-regular text-grey-90 mt-2">
                       {method?.shipping_option.name || ""}
                     </span>
-                    <div className="flex flex-col min-h-[100px] mt-8 bg-grey-5 px-3 py-2 h-full">
+                    <div className="bg-grey-5 mt-8 flex h-full min-h-[100px] flex-col px-3 py-2">
                       <span className="inter-base-semibold">
                         Data{" "}
                         <span className="text-grey-50 inter-base-regular">
                           (1 item)
                         </span>
                       </span>
-                      <div className="flex flex-grow items-center mt-4">
+                      <div className="mt-4 flex flex-grow items-center">
                         <JSONView data={method?.data} />
                       </div>
                     </div>
@@ -384,7 +384,7 @@ const DraftOrderDetails = () => {
               </div>
             </BodyCard>
             <BodyCard
-              className={"w-full mb-4 min-h-0 h-auto"}
+              className={"mb-4 h-auto min-h-0 w-full"}
               title="Customer"
               actionables={[
                 {
@@ -416,8 +416,8 @@ const DraftOrderDetails = () => {
               ]}
             >
               <div className="mt-6">
-                <div className="flex w-full space-x-4 items-center">
-                  <div className="flex w-[40px] h-[40px] ">
+                <div className="flex w-full items-center space-x-4">
+                  <div className="flex h-[40px] w-[40px] ">
                     <Avatar
                       user={cart?.customer}
                       font="inter-large-semibold"
@@ -440,12 +440,12 @@ const DraftOrderDetails = () => {
                     )}
                   </div>
                 </div>
-                <div className="flex mt-6 space-x-6 divide-x">
+                <div className="mt-6 flex space-x-6 divide-x">
                   <div className="flex flex-col">
                     <div className="inter-small-regular text-grey-50 mb-1">
                       Contact
                     </div>
-                    <div className="flex flex-col inter-small-regular">
+                    <div className="inter-small-regular flex flex-col">
                       <span>{cart?.email}</span>
                       <span>{cart?.shipping_address?.phone || ""}</span>
                     </div>
@@ -462,7 +462,7 @@ const DraftOrderDetails = () => {
               </div>
             </BodyCard>
             <BodyCard
-              className={"w-full mb-4 min-h-0 h-auto pt-[15px]"}
+              className={"mb-4 h-auto min-h-0 w-full pt-[15px]"}
               title="Raw Draft Order"
             >
               <JSONView data={draft_order!} />
diff --git a/packages/admin-ui/ui/src/domain/orders/draft-orders/index.tsx b/packages/admin-ui/ui/src/domain/orders/draft-orders/index.tsx
index 5e3b766d0b..398e7c6b4b 100644
--- a/packages/admin-ui/ui/src/domain/orders/draft-orders/index.tsx
+++ b/packages/admin-ui/ui/src/domain/orders/draft-orders/index.tsx
@@ -28,8 +28,8 @@ const DraftOrderIndex = () => {
   }, [view])
 
   return (
-    <div className="flex flex-col grow h-full">
-      <div className="w-full flex flex-col grow">
+    <div className="flex h-full grow flex-col">
+      <div className="flex w-full grow flex-col">
         <BodyCard
           customHeader={
             <TableViewHeader
diff --git a/packages/admin-ui/ui/src/domain/orders/edit/context.tsx b/packages/admin-ui/ui/src/domain/orders/edit/context.tsx
index 6852ed59f3..84c29ec69a 100644
--- a/packages/admin-ui/ui/src/domain/orders/edit/context.tsx
+++ b/packages/admin-ui/ui/src/domain/orders/edit/context.tsx
@@ -1,4 +1,4 @@
-import React, { createContext, PropsWithChildren, useEffect } from "react"
+import { createContext, PropsWithChildren, useEffect } from "react"
 import { useAdminOrderEdits } from "medusa-react"
 import { OrderEdit } from "@medusajs/medusa"
 
@@ -30,7 +30,7 @@ function OrderEditProvider(props: OrderEditProviderProps) {
   // TODO: sort by created_at
   const { order_edits, count } = useAdminOrderEdits({
     order_id: orderId,
-    //limit: count, // TODO
+    // limit: count, // TODO
   })
 
   useEffect(() => {
diff --git a/packages/admin-ui/ui/src/domain/orders/edit/modal.tsx b/packages/admin-ui/ui/src/domain/orders/edit/modal.tsx
index 29f91f8bc1..f7ddd456a8 100644
--- a/packages/admin-ui/ui/src/domain/orders/edit/modal.tsx
+++ b/packages/admin-ui/ui/src/domain/orders/edit/modal.tsx
@@ -37,8 +37,8 @@ function TotalsSection(props: TotalsSectionProps) {
 
   return (
     <>
-      <div className="h-px w-full bg-grey-20 mb-6" />
-      <div className="flex justify-between h-[40px] mb-2">
+      <div className="bg-grey-20 mb-6 h-px w-full" />
+      <div className="mb-2 flex h-[40px] justify-between">
         <span className="text-gray-500">Amount Paid</span>
         <span className="text-gray-900">
           {formatAmountWithSymbol({
@@ -49,8 +49,8 @@ function TotalsSection(props: TotalsSectionProps) {
         </span>
       </div>
 
-      <div className="flex justify-between h-[40px] mb-2">
-        <span className="text-gray-900 font-semibold">New Total</span>
+      <div className="mb-2 flex h-[40px] justify-between">
+        <span className="font-semibold text-gray-900">New Total</span>
         <span className="text-2xl font-semibold">
           {formatAmountWithSymbol({
             amount: newTotal,
@@ -75,7 +75,7 @@ function TotalsSection(props: TotalsSectionProps) {
         </span>
       </div>
 
-      <div className="h-px w-full bg-grey-20 mt-8 mb-6" />
+      <div className="bg-grey-20 mt-8 mb-6 h-px w-full" />
     </>
   )
 }
@@ -110,7 +110,7 @@ export function AddProductVariant(props: AddProductVariantProps) {
   return (
     <>
       <Modal.Content>
-        <div className="min-h-[680px] flex flex-col justify-between">
+        <div className="flex min-h-[680px] flex-col justify-between">
           <VariantsTable
             regionId={props.regionId}
             customerId={props.customerId}
@@ -121,7 +121,7 @@ export function AddProductVariant(props: AddProductVariantProps) {
         </div>
       </Modal.Content>
       <Modal.Footer>
-        <div className="flex justify-end w-full space-x-xsmall">
+        <div className="space-x-xsmall flex w-full justify-end">
           <Button variant="secondary" size="small" onClick={onBack}>
             Back
           </Button>
@@ -270,15 +270,15 @@ function OrderEditModal(props: OrderEditModalProps) {
           <h1 className="inter-xlarge-semibold">Edit Order</h1>
         </Modal.Header>
         <Modal.Content>
-          <div className="flex justify-between items-center mb-4">
-            <span className="text-gray-900 text-large font-semibold">
+          <div className="mb-4 flex items-center justify-between">
+            <span className="text-large font-semibold text-gray-900">
               Items
             </span>
             <div className="flex items-center justify-between">
               <Button
                 size="small"
                 variant="ghost"
-                className="border border-grey-20 text-gray-900 flex-shrink-0 h-[32px] mr-2"
+                className="border-grey-20 mr-2 h-[32px] flex-shrink-0 border text-gray-900"
                 onClick={() =>
                   layeredModalContext.push(addProductVariantScreen)
                 }
@@ -289,7 +289,7 @@ function OrderEditModal(props: OrderEditModalProps) {
                 <Button
                   size="small"
                   variant="secondary"
-                  className={clsx("h-full flex-shrink-0 w-[32px] h–[32px]", {
+                  className={clsx("h–[32px] h-full w-[32px] flex-shrink-0", {
                     "focus:bg-grey-20": showFilter,
                   })}
                   onClick={() => setShowFilter(true)}
@@ -354,7 +354,7 @@ function OrderEditModal(props: OrderEditModalProps) {
           )}
         </Modal.Content>
         <Modal.Footer>
-          <div className="flex items-center justify-end w-full gap-2">
+          <div className="flex w-full items-center justify-end gap-2">
             <Button
               variant="secondary"
               size="small"
diff --git a/packages/admin-ui/ui/src/domain/orders/edit/variants-table.tsx b/packages/admin-ui/ui/src/domain/orders/edit/variants-table.tsx
index b2e208ea7c..e82e8b21df 100644
--- a/packages/admin-ui/ui/src/domain/orders/edit/variants-table.tsx
+++ b/packages/admin-ui/ui/src/domain/orders/edit/variants-table.tsx
@@ -50,17 +50,17 @@ const VariantsTable: React.FC<Props> = (props) => {
     return [
       {
         Header: (
-          <div className="text-gray-500 text-small font-semibold">Name</div>
+          <div className="text-small font-semibold text-gray-500">Name</div>
         ),
         accessor: "title",
         Cell: ({ row: { original } }) => {
           return (
             <div className="flex items-center">
-              <div className="h-[40px] w-[30px] my-1.5 flex items-center mr-4">
+              <div className="my-1.5 mr-4 flex h-[40px] w-[30px] items-center">
                 {original.product.thumbnail ? (
                   <img
                     src={original.product.thumbnail}
-                    className="h-full object-cover rounded-soft"
+                    className="rounded-soft h-full object-cover"
                   />
                 ) : (
                   <ImagePlaceholder />
@@ -76,21 +76,21 @@ const VariantsTable: React.FC<Props> = (props) => {
       },
       {
         Header: (
-          <div className="text-gray-500 text-small font-semibold">SKU</div>
+          <div className="text-small font-semibold text-gray-500">SKU</div>
         ),
         accessor: "sku",
         Cell: ({ row: { original } }) => <div>{original.sku}</div>,
       },
       {
         Header: (
-          <div className="text-gray-500 text-small font-semibold">Options</div>
+          <div className="text-small font-semibold text-gray-500">Options</div>
         ),
         accessor: "options",
         Cell: ({ row: { original } }) => {
           const options = original.options?.map(({ value }) => value).join(", ")
 
           return (
-            <div title={options} className="truncate max-w-[160px]">
+            <div title={options} className="max-w-[160px] truncate">
               <span>{options}</span>
             </div>
           )
@@ -98,7 +98,7 @@ const VariantsTable: React.FC<Props> = (props) => {
       },
       {
         Header: (
-          <div className="text-right text-gray-500 text-small font-semibold">
+          <div className="text-small text-right font-semibold text-gray-500">
             In Stock
           </div>
         ),
@@ -109,7 +109,7 @@ const VariantsTable: React.FC<Props> = (props) => {
       },
       {
         Header: (
-          <div className="text-right text-gray-500 text-small font-semibold">
+          <div className="text-small text-right font-semibold text-gray-500">
             Price
           </div>
         ),
@@ -122,7 +122,7 @@ const VariantsTable: React.FC<Props> = (props) => {
           const showOriginal = original.calculated_price_type !== "default"
 
           return (
-            <div className="flex justify-end items-center gap-2">
+            <div className="flex items-center justify-end gap-2">
               <div className="flex flex-col items-end">
                 {showOriginal && (
                   <span className="text-gray-400 line-through">
diff --git a/packages/admin-ui/ui/src/domain/orders/new/components/billing-details.tsx b/packages/admin-ui/ui/src/domain/orders/new/components/billing-details.tsx
index e25b830f9e..f1d5a732de 100644
--- a/packages/admin-ui/ui/src/domain/orders/new/components/billing-details.tsx
+++ b/packages/admin-ui/ui/src/domain/orders/new/components/billing-details.tsx
@@ -1,5 +1,4 @@
 import clsx from "clsx"
-import React from "react"
 import { useWatch } from "react-hook-form"
 import CheckIcon from "../../../../components/fundamentals/icons/check-icon"
 import AddressForm, {
@@ -46,11 +45,11 @@ const Billing = () => {
       <span className="inter-base-semibold">Billing Address</span>
       {!isNullishObject(shippingAddress) || shippingAddressId ? (
         <div
-          className="items-center flex mt-4 mb-6 cursor-pointer"
+          className="mt-4 mb-6 flex cursor-pointer items-center"
           onClick={updateSameAsShipping}
         >
           <div
-            className={`w-5 h-5 flex justify-center text-grey-0 border-grey-30 border rounded-base ${
+            className={`text-grey-0 border-grey-30 rounded-base flex h-5 w-5 justify-center border ${
               sameAsShipping && "bg-violet-60"
             }`}
           >
@@ -64,11 +63,11 @@ const Billing = () => {
             {...form.register("same_as_shipping")}
             tabIndex={-1}
           />
-          <span className="ml-3 text-grey-90">Use same as shipping</span>
+          <span className="text-grey-90 ml-3">Use same as shipping</span>
         </div>
       ) : null}
       <div
-        className={clsx({ "opacity-50 pointer-events-none": sameAsShipping })}
+        className={clsx({ "pointer-events-none opacity-50": sameAsShipping })}
         tabIndex={sameAsShipping ? -1 : undefined}
       >
         <AddressForm
diff --git a/packages/admin-ui/ui/src/domain/orders/new/components/custom-item-sub-modal.tsx b/packages/admin-ui/ui/src/domain/orders/new/components/custom-item-sub-modal.tsx
index 7264376954..10f7dfb193 100644
--- a/packages/admin-ui/ui/src/domain/orders/new/components/custom-item-sub-modal.tsx
+++ b/packages/admin-ui/ui/src/domain/orders/new/components/custom-item-sub-modal.tsx
@@ -29,7 +29,7 @@ const CustomItemSubModal: React.FC<CustomItemSubModalProps> = ({
   return (
     <>
       <Modal.Content>
-        <div className="min-h-[705px] gap-y-xsmall">
+        <div className="gap-y-xsmall min-h-[705px]">
           <InputField
             placeholder="E.g. Gift wrapping"
             label="Title"
@@ -59,7 +59,7 @@ const CustomItemSubModal: React.FC<CustomItemSubModalProps> = ({
         </div>
       </Modal.Content>
       <Modal.Footer>
-        <div className="flex w-full justify-end gap-x-xsmall">
+        <div className="gap-x-xsmall flex w-full justify-end">
           <Button
             variant="ghost"
             size="small"
diff --git a/packages/admin-ui/ui/src/domain/orders/new/components/items.tsx b/packages/admin-ui/ui/src/domain/orders/new/components/items.tsx
index e25a167219..a4eaec6d7f 100644
--- a/packages/admin-ui/ui/src/domain/orders/new/components/items.tsx
+++ b/packages/admin-ui/ui/src/domain/orders/new/components/items.tsx
@@ -115,14 +115,14 @@ const Items = () => {
   }, [])
 
   return (
-    <div className="flex flex-col min-h-[705px] pt-4">
+    <div className="flex min-h-[705px] flex-col pt-4">
       <span className="inter-base-semibold mb-4">Items for the order</span>
       {fields.length > 0 && region && (
         <Table>
           <Table.Head>
-            <Table.HeadRow className="text-grey-50 border-t inter-small-semibold">
+            <Table.HeadRow className="text-grey-50 inter-small-semibold border-t">
               <Table.HeadCell>Details</Table.HeadCell>
-              <Table.HeadCell className="text-right pr-8">
+              <Table.HeadCell className="pr-8 text-right">
                 Quantity
               </Table.HeadCell>
               <Table.HeadCell className="text-right">
@@ -139,18 +139,18 @@ const Items = () => {
                   className={clsx("border-b-grey-0 hover:bg-grey-0")}
                 >
                   <Table.Cell>
-                    <div className="min-w-[240px] flex items-center py-2">
-                      <div className="w-[30px] h-[40px] ">
+                    <div className="flex min-w-[240px] items-center py-2">
+                      <div className="h-[40px] w-[30px] ">
                         {item.thumbnail ? (
                           <img
-                            className="h-full w-full object-cover rounded"
+                            className="h-full w-full rounded object-cover"
                             src={item.thumbnail}
                           />
                         ) : (
                           <ImagePlaceholder />
                         )}
                       </div>
-                      <div className="inter-small-regular text-grey-50 flex flex-col ml-4">
+                      <div className="inter-small-regular text-grey-50 ml-4 flex flex-col">
                         {item.product_title && (
                           <span className="text-grey-90">
                             {item.product_title}
@@ -160,7 +160,7 @@ const Items = () => {
                       </div>
                     </div>
                   </Table.Cell>
-                  <Table.Cell className="text-right w-32 pr-8">
+                  <Table.Cell className="w-32 pr-8 text-right">
                     {editQuantity === index ? (
                       <InputField
                         type="number"
@@ -170,16 +170,16 @@ const Items = () => {
                         onBlur={() => setEditQuantity(-1)}
                       />
                     ) : (
-                      <div className="flex w-full text-right justify-end text-grey-50 ">
+                      <div className="text-grey-50 flex w-full justify-end text-right ">
                         <span
                           onClick={() => handleEditQuantity(index, -1)}
-                          className="w-5 h-5 flex items-center justify-center rounded cursor-pointer hover:bg-grey-20 mr-2"
+                          className="hover:bg-grey-20 mr-2 flex h-5 w-5 cursor-pointer items-center justify-center rounded"
                         >
                           <MinusIcon size={16} />
                         </span>
                         <button
                           type="button"
-                          className="px-1 hover:bg-grey-20 rounded cursor-pointer"
+                          className="hover:bg-grey-20 cursor-pointer rounded px-1"
                           onClick={() => setEditQuantity(index)}
                         >
                           <input
@@ -187,14 +187,14 @@ const Items = () => {
                             {...register(`items.${index}.quantity`, {
                               valueAsNumber: true,
                             })}
-                            className="bg-transparent w-full text-center text-grey-90"
+                            className="text-grey-90 w-full bg-transparent text-center"
                             disabled
                           />
                         </button>
                         <span
                           onClick={() => handleEditQuantity(index, 1)}
                           className={clsx(
-                            "w-5 h-5 flex items-center justify-center rounded cursor-pointer hover:bg-grey-20 ml-2"
+                            "hover:bg-grey-20 ml-2 flex h-5 w-5 cursor-pointer items-center justify-center rounded"
                           )}
                         >
                           <PlusIcon size={16} />
@@ -246,7 +246,7 @@ const Items = () => {
                       />
                     )}
                   </Table.Cell>
-                  <Table.Cell className="text-right text-grey-40 pr-1">
+                  <Table.Cell className="text-grey-40 pr-1 text-right">
                     {region!.currency_code.toUpperCase()}
                   </Table.Cell>
                   <Table.Cell>
@@ -264,11 +264,11 @@ const Items = () => {
           </Table.Body>
         </Table>
       )}
-      <div className="flex w-full justify-end mt-3 gap-x-xsmall">
+      <div className="gap-x-xsmall mt-3 flex w-full justify-end">
         <Button
           variant="ghost"
           size="small"
-          className="border border-grey-20"
+          className="border-grey-20 border"
           onClick={() => {
             layeredContext.push(
               CreateCustomProductScreen(
@@ -285,7 +285,7 @@ const Items = () => {
         <Button
           variant="ghost"
           size="small"
-          className="border border-grey-20"
+          className="border-grey-20 border"
           onClick={() => {
             layeredContext.push(
               SelectProductsScreen(
diff --git a/packages/admin-ui/ui/src/domain/orders/new/components/select-shipping.tsx b/packages/admin-ui/ui/src/domain/orders/new/components/select-shipping.tsx
index 4d68bdd030..1f7671efa2 100644
--- a/packages/admin-ui/ui/src/domain/orders/new/components/select-shipping.tsx
+++ b/packages/admin-ui/ui/src/domain/orders/new/components/select-shipping.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from "react"
+import { useContext, useEffect, useState } from "react"
 import { Controller, useWatch } from "react-hook-form"
 import Spinner from "../../../../components/atoms/spinner"
 import Button from "../../../../components/fundamentals/button"
@@ -61,8 +61,8 @@ const SelectShippingMethod = () => {
 
       {region ? (
         !shippingOptions?.length ? (
-          <div className="inter-small-regular mt-6 p-4 text-orange-50 bg-orange-5 rounded-rounded flex">
-            <div className="h-full mr-3">
+          <div className="inter-small-regular bg-orange-5 rounded-rounded mt-6 flex p-4 text-orange-50">
+            <div className="mr-3 h-full">
               <AlertIcon size={20} />
             </div>
             <div className="flex flex-col">
@@ -98,11 +98,11 @@ const SelectShippingMethod = () => {
             />
             <div className="mt-4">
               {!showCustomPrice && (
-                <div className="w-full flex justify-end">
+                <div className="flex w-full justify-end">
                   <Button
                     variant="ghost"
                     size="small"
-                    className="w-[125px] border border-grey-20"
+                    className="border-grey-20 w-[125px] border"
                     disabled={!selectedShippingOption}
                     onClick={() => setShowCustomPrice(true)}
                   >
@@ -137,7 +137,7 @@ const SelectShippingMethod = () => {
                     variant="ghost"
                     size="small"
                     onClick={removeCustomPrice}
-                    className="ml-8 text-grey-40 w-8 h-8"
+                    className="text-grey-40 ml-8 h-8 w-8"
                   >
                     <TrashIcon size={20} />
                   </Button>
@@ -147,7 +147,7 @@ const SelectShippingMethod = () => {
           </div>
         )
       ) : (
-        <div className="flex-1 flex justify-center items-center">
+        <div className="flex flex-1 items-center justify-center">
           <Spinner />
         </div>
       )}
diff --git a/packages/admin-ui/ui/src/domain/orders/new/form/index.tsx b/packages/admin-ui/ui/src/domain/orders/new/form/index.tsx
index ec70412e3d..1434fbe916 100644
--- a/packages/admin-ui/ui/src/domain/orders/new/form/index.tsx
+++ b/packages/admin-ui/ui/src/domain/orders/new/form/index.tsx
@@ -5,13 +5,7 @@ import {
   useAdminShippingOptions,
   useMedusa,
 } from "medusa-react"
-import React, {
-  createContext,
-  ReactNode,
-  useContext,
-  useEffect,
-  useMemo,
-} from "react"
+import { createContext, ReactNode, useContext, useEffect, useMemo } from "react"
 import {
   FormProvider,
   useFieldArray,
diff --git a/packages/admin-ui/ui/src/domain/pricing/details/sections/header.tsx b/packages/admin-ui/ui/src/domain/pricing/details/sections/header.tsx
index f231db1ab3..5cf1b27f1b 100644
--- a/packages/admin-ui/ui/src/domain/pricing/details/sections/header.tsx
+++ b/packages/admin-ui/ui/src/domain/pricing/details/sections/header.tsx
@@ -22,7 +22,7 @@ const Header = ({ priceList }) => {
     <HeadingBodyCard priceList={priceList} setIsOpen={setIsOpen}>
       <div className="flex gap-12">
         {priceList.customer_groups.length ? (
-          <div className="border-l border-grey-20 pl-6">
+          <div className="border-grey-20 border-l pl-6">
             <span className="inter-base-regular text-grey-50">
               Customer groups
             </span>
@@ -33,13 +33,13 @@ const Header = ({ priceList }) => {
             </p>
           </div>
         ) : null}
-        <div className="border-l border-grey-20 pl-6">
+        <div className="border-grey-20 border-l pl-6">
           <span className="inter-base-regular text-grey-50">Last edited</span>
           <p className="inter-base-regular text-grey-90">
             {moment(priceList.updated_at).format("ddd, D MMM YYYY")}
           </p>
         </div>
-        <div className="border-l border-grey-20 pl-6">
+        <div className="border-grey-20 border-l pl-6">
           <span className="inter-base-regular text-grey-50">
             Price overrides
           </span>
@@ -115,7 +115,7 @@ const HeadingBodyCard = ({ priceList, setIsOpen, ...props }) => {
       forceDropdown
       className="min-h-[200px]"
       status={
-        <div className="flex items-center gap-x-2xsmall">
+        <div className="gap-x-2xsmall flex items-center">
           {getPriceListStatus(priceList)}
         </div>
       }
diff --git a/packages/admin-ui/ui/src/domain/pricing/details/sections/prices-details/edit-prices-overrides/index.tsx b/packages/admin-ui/ui/src/domain/pricing/details/sections/prices-details/edit-prices-overrides/index.tsx
index 54bf916ed2..00ce263f6c 100644
--- a/packages/admin-ui/ui/src/domain/pricing/details/sections/prices-details/edit-prices-overrides/index.tsx
+++ b/packages/admin-ui/ui/src/domain/pricing/details/sections/prices-details/edit-prices-overrides/index.tsx
@@ -70,7 +70,7 @@ const EditPricesOverridesModal = ({
 
   return (
     <LayeredModal isLargeModal context={context} handleClose={close}>
-      <Modal.Body className="h-[calc(100vh-134px)] flex flex-col">
+      <Modal.Body className="flex h-[calc(100vh-134px)] flex-col">
         <Modal.Header handleClose={close}>
           <h1 className="inter-xlarge-semibold">
             Price overrides{" "}
@@ -86,7 +86,7 @@ const EditPricesOverridesModal = ({
               <div>
                 <img
                   src={product.thumbnail || undefined}
-                  className="w-4 h-5 rounded-base"
+                  className="rounded-base h-5 w-4"
                 />
               </div>
               <span className="inter-small-semibold">{product.title}</span>
@@ -107,10 +107,10 @@ const EditPricesOverridesModal = ({
         </Modal.Content>
 
         <Modal.Footer>
-          <div className="flex w-full h-8 justify-end">
+          <div className="flex h-8 w-full justify-end">
             <Button
               variant="ghost"
-              className="mr-2 w-32 text-small justify-center rounded-rounded"
+              className="text-small rounded-rounded mr-2 w-32 justify-center"
               size="large"
               onClick={close}
             >
@@ -119,7 +119,7 @@ const EditPricesOverridesModal = ({
             <Button
               disabled
               size="large"
-              className="w-32 text-small justify-center rounded-rounded"
+              className="text-small rounded-rounded w-32 justify-center"
               variant="primary"
             >
               Save
diff --git a/packages/admin-ui/ui/src/domain/pricing/details/sections/prices-details/edit-prices-overrides/product-variant-leaf.tsx b/packages/admin-ui/ui/src/domain/pricing/details/sections/prices-details/edit-prices-overrides/product-variant-leaf.tsx
index 2418dd2a44..0d2f16e0e8 100644
--- a/packages/admin-ui/ui/src/domain/pricing/details/sections/prices-details/edit-prices-overrides/product-variant-leaf.tsx
+++ b/packages/admin-ui/ui/src/domain/pricing/details/sections/prices-details/edit-prices-overrides/product-variant-leaf.tsx
@@ -22,7 +22,7 @@ const ProductVariantLeaf = ({
         <span>{title}</span>
         {sku && <span className="text-grey-50 ml-xsmall">(SKU: {sku})</span>}
       </div>
-      <div className="flex items-center text-grey-50 flex-1 justify-end">
+      <div className="text-grey-50 flex flex-1 items-center justify-end">
         <div className="text-grey-50 mr-xsmall">
           {hasPrices ? (
             <span>{`${prices.length} price${
@@ -37,7 +37,7 @@ const ProductVariantLeaf = ({
         <Button
           variant="ghost"
           size="small"
-          className="w-[32px] h-[32px]"
+          className="h-[32px] w-[32px]"
           onClick={onClick}
         >
           <ChevronRightIcon className="text-grey-40" />
diff --git a/packages/admin-ui/ui/src/domain/pricing/details/sections/prices-details/edit-prices.tsx b/packages/admin-ui/ui/src/domain/pricing/details/sections/prices-details/edit-prices.tsx
index f4c0e6a27d..1f6bd2a31a 100644
--- a/packages/admin-ui/ui/src/domain/pricing/details/sections/prices-details/edit-prices.tsx
+++ b/packages/admin-ui/ui/src/domain/pricing/details/sections/prices-details/edit-prices.tsx
@@ -41,7 +41,7 @@ const EditPrices = ({ close, id }) => {
         <FormHeader id={id} viewType={ViewType.EDIT_PRICES} onClose={close} />
       </FocusModal.Header>
       <FocusModal.Main>
-        <div className="flex justify-center mb-[25%]">
+        <div className="mb-[25%] flex justify-center">
           <div className="medium:w-7/12 large:w-6/12 small:w-4/5 w-full pt-16">
             <h1 className="inter-xlarge-semibold">Edit prices</h1>
             <div className="mt-7">
diff --git a/packages/admin-ui/ui/src/domain/pricing/details/sections/prices-details/index.tsx b/packages/admin-ui/ui/src/domain/pricing/details/sections/prices-details/index.tsx
index 93584ddb67..d8ef22bd83 100644
--- a/packages/admin-ui/ui/src/domain/pricing/details/sections/prices-details/index.tsx
+++ b/packages/admin-ui/ui/src/domain/pricing/details/sections/prices-details/index.tsx
@@ -36,7 +36,6 @@ const Prices = ({ id }) => {
       </Fade>
       {showUpload && (
         <ImportPrices priceListId={id} handleClose={() => closeUpload()} />
-
       )}
       {selectedProduct && (
         <EditPricesOverridesModal
diff --git a/packages/admin-ui/ui/src/domain/pricing/details/sections/prices-details/prices-table/index.tsx b/packages/admin-ui/ui/src/domain/pricing/details/sections/prices-details/prices-table/index.tsx
index 5239d4bc9d..d640572c7a 100644
--- a/packages/admin-ui/ui/src/domain/pricing/details/sections/prices-details/prices-table/index.tsx
+++ b/packages/admin-ui/ui/src/domain/pricing/details/sections/prices-details/prices-table/index.tsx
@@ -3,7 +3,6 @@ import {
   useAdminDeletePriceListProductPrices,
   useAdminPriceListProducts,
 } from "medusa-react"
-import * as React from "react"
 import { HeaderGroup, Row } from "react-table"
 import CancelIcon from "../../../../../../components/fundamentals/icons/cancel-icon"
 import EditIcon from "../../../../../../components/fundamentals/icons/edit-icon"
@@ -27,14 +26,15 @@ type PricesTableProps = {
 
 const PricesTable = ({ id, selectProduct }: PricesTableProps) => {
   const params = useQueryFilters(defaultQueryProps)
-  const { products, isLoading, count = 0 } = useAdminPriceListProducts(
-    id,
-    params.queryObject
-  )
+  const {
+    products,
+    isLoading,
+    count = 0,
+  } = useAdminPriceListProducts(id, params.queryObject)
   const columns = usePricesColumns()
 
   return (
-    <div className="w-full overflow-y-auto flex flex-col justify-between h-full">
+    <div className="flex h-full w-full flex-col justify-between overflow-y-auto">
       <SelectableTable
         columns={columns}
         data={products || []}
diff --git a/packages/admin-ui/ui/src/domain/pricing/details/sections/prices-details/prices-table/use-columns.tsx b/packages/admin-ui/ui/src/domain/pricing/details/sections/prices-details/prices-table/use-columns.tsx
index b7bc633313..339e7c39df 100644
--- a/packages/admin-ui/ui/src/domain/pricing/details/sections/prices-details/prices-table/use-columns.tsx
+++ b/packages/admin-ui/ui/src/domain/pricing/details/sections/prices-details/prices-table/use-columns.tsx
@@ -11,12 +11,12 @@ const usePricesColumns = () => {
         Header: <div className="pl-4">Name</div>,
         accessor: "title",
         Cell: ({ row: { original } }) => (
-          <div className="pl-4 flex items-center">
-            <div className="h-[40px] w-[30px] my-1.5 flex items-center mr-4">
+          <div className="flex items-center pl-4">
+            <div className="my-1.5 mr-4 flex h-[40px] w-[30px] items-center">
               {original.thumbnail ? (
                 <img
                   src={original.thumbnail}
-                  className="h-full object-cover rounded-soft"
+                  className="rounded-soft h-full object-cover"
                 />
               ) : (
                 <ImagePlaceholder />
diff --git a/packages/admin-ui/ui/src/domain/pricing/index.tsx b/packages/admin-ui/ui/src/domain/pricing/index.tsx
index ca718ba0b4..e86256c105 100644
--- a/packages/admin-ui/ui/src/domain/pricing/index.tsx
+++ b/packages/admin-ui/ui/src/domain/pricing/index.tsx
@@ -18,8 +18,8 @@ const PricingIndex = () => {
   ]
 
   return (
-    <div className="h-full flex flex-col">
-      <div className="w-full flex flex-col grow">
+    <div className="flex h-full flex-col">
+      <div className="flex w-full grow flex-col">
         <BodyCard
           actionables={actionables}
           customHeader={<TableViewHeader views={["Price lists"]} />}
diff --git a/packages/admin-ui/ui/src/domain/pricing/new.tsx b/packages/admin-ui/ui/src/domain/pricing/new.tsx
index 5b11d27663..2fd8a9faee 100644
--- a/packages/admin-ui/ui/src/domain/pricing/new.tsx
+++ b/packages/admin-ui/ui/src/domain/pricing/new.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import PriceListForm from "./pricing-form"
 import { PriceListFormProvider } from "./pricing-form/form/pricing-form-context"
 import { ViewType } from "./pricing-form/types"
diff --git a/packages/admin-ui/ui/src/domain/pricing/pricing-form/index.tsx b/packages/admin-ui/ui/src/domain/pricing/pricing-form/index.tsx
index 9e1669ce4b..a7e7d6da3d 100644
--- a/packages/admin-ui/ui/src/domain/pricing/pricing-form/index.tsx
+++ b/packages/admin-ui/ui/src/domain/pricing/pricing-form/index.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import FocusModal from "../../../components/molecules/modal/focus-modal"
 import Accordion from "../../../components/organisms/accordion"
 import FormHeader from "./form-header"
@@ -15,7 +14,7 @@ const PriceListForm = (props: PriceListFormProps) => {
         <FormHeader {...props} />
       </FocusModal.Header>
       <FocusModal.Main>
-        <div className="flex justify-center mb-[25%]">
+        <div className="mb-[25%] flex justify-center">
           <div className="medium:w-7/12 large:w-6/12 small:w-4/5 w-full pt-16">
             <h1 className="inter-xlarge-semibold mb-[28px]">
               {props.viewType === ViewType.CREATE
diff --git a/packages/admin-ui/ui/src/domain/pricing/pricing-form/sections/configuration.tsx b/packages/admin-ui/ui/src/domain/pricing/pricing-form/sections/configuration.tsx
index 4f058ad382..cfb971b7ec 100644
--- a/packages/admin-ui/ui/src/domain/pricing/pricing-form/sections/configuration.tsx
+++ b/packages/admin-ui/ui/src/domain/pricing/pricing-form/sections/configuration.tsx
@@ -16,9 +16,7 @@ type ConfigurationProps = {
   priceList?: PriceList
 }
 
-const checkForEnabledConfigs = (
-  config: ConfigurationFields
-): string[] => {
+const checkForEnabledConfigs = (config: ConfigurationFields): string[] => {
   const enabledConfigs: string[] = []
 
   if (config.customer_groups && config.customer_groups.length > 0) {
@@ -36,11 +34,8 @@ const checkForEnabledConfigs = (
 
 const Configuration: React.FC<ConfigurationProps> = () => {
   const { customer_groups, isLoading } = useAdminCustomerGroups()
-  const {
-    control,
-    handleConfigurationSwitch,
-    configFields,
-  } = usePriceListForm()
+  const { control, handleConfigurationSwitch, configFields } =
+    usePriceListForm()
   const [openItems, setOpenItems] = useState<string[]>(
     checkForEnabledConfigs(configFields)
   )
@@ -75,7 +70,7 @@ const Configuration: React.FC<ConfigurationProps> = () => {
           >
             <div
               className={clsx(
-                "flex items-center gap-xsmall accordion-margin-transition",
+                "gap-xsmall accordion-margin-transition flex items-center",
                 {
                   "mt-4": openItems.indexOf("starts_at") > -1,
                 }
@@ -117,7 +112,7 @@ const Configuration: React.FC<ConfigurationProps> = () => {
           >
             <div
               className={clsx(
-                "flex items-center gap-xsmall accordion-margin-transition",
+                "gap-xsmall accordion-margin-transition flex items-center",
                 {
                   "mt-4": openItems.indexOf("ends_at") > -1,
                 }
@@ -160,11 +155,11 @@ const Configuration: React.FC<ConfigurationProps> = () => {
             <Controller
               name="customer_groups"
               control={control}
-              render={({ field: { value, onChange, ref }}) => {
+              render={({ field: { value, onChange, ref } }) => {
                 return (
                   <div
                     className={clsx(
-                      "flex items-center gap-xsmall accordion-margin-transition w-full",
+                      "gap-xsmall accordion-margin-transition flex w-full items-center",
                       {
                         "mt-4": openItems.indexOf("customer_groups") > -1,
                       }
diff --git a/packages/admin-ui/ui/src/domain/pricing/pricing-form/sections/general.tsx b/packages/admin-ui/ui/src/domain/pricing/pricing-form/sections/general.tsx
index dc68f28852..39d6cb15ac 100644
--- a/packages/admin-ui/ui/src/domain/pricing/pricing-form/sections/general.tsx
+++ b/packages/admin-ui/ui/src/domain/pricing/pricing-form/sections/general.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import { Controller } from "react-hook-form"
 import Switch from "../../../../components/atoms/switch"
 import FeatureToggle from "../../../../components/fundamentals/feature-toggle"
@@ -17,7 +16,7 @@ const General = () => {
       tooltip="General information for the price list."
       value="general"
     >
-      <div className="flex flex-col gap-y-small group-radix-state-open:mt-5 accordion-margin-transition">
+      <div className="gap-y-small group-radix-state-open:mt-5 accordion-margin-transition flex flex-col">
         <InputField
           label="Name"
           required
diff --git a/packages/admin-ui/ui/src/domain/pricing/pricing-form/sections/type.tsx b/packages/admin-ui/ui/src/domain/pricing/pricing-form/sections/type.tsx
index b402904a85..55151c062a 100644
--- a/packages/admin-ui/ui/src/domain/pricing/pricing-form/sections/type.tsx
+++ b/packages/admin-ui/ui/src/domain/pricing/pricing-form/sections/type.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import { Controller } from "react-hook-form"
 import Accordion from "../../../../components/organisms/accordion"
 import RadioGroup from "../../../../components/organisms/radio-group"
@@ -26,7 +25,7 @@ const Type = () => {
             <RadioGroup.Root
               value={value ?? undefined}
               onValueChange={onChange}
-              className="flex items-center gap-base group-radix-state-open:mt-5 accordion-margin-transition"
+              className="gap-base group-radix-state-open:mt-5 accordion-margin-transition flex items-center"
             >
               <RadioGroup.Item
                 value={PriceListType.SALE}
diff --git a/packages/admin-ui/ui/src/domain/pricing/pricing-form/types/index.ts b/packages/admin-ui/ui/src/domain/pricing/pricing-form/types/index.ts
index 9022c64e9c..4cf87674f1 100644
--- a/packages/admin-ui/ui/src/domain/pricing/pricing-form/types/index.ts
+++ b/packages/admin-ui/ui/src/domain/pricing/pricing-form/types/index.ts
@@ -34,7 +34,7 @@ export type PriceListFormValues = {
   customer_groups: Option[] | null
   type: PriceListType | null
   prices: PriceProps[] | null
-  includes_tax: boolean 
+  includes_tax: boolean
 }
 
 export type CreatePriceListPricesFormValues = {
@@ -49,7 +49,7 @@ export type CreatePriceListFormValues = {
   customer_groups: Option[] | null
   type: PriceListType | null
   prices: CreatePriceListPricesFormValues | null
-  includes_tax: boolean 
+  includes_tax: boolean
 }
 
 export type ConfigurationField = keyof Pick<
diff --git a/packages/admin-ui/ui/src/domain/products/components/customs-form/index.tsx b/packages/admin-ui/ui/src/domain/products/components/customs-form/index.tsx
index 6d0efe92f6..a30584116e 100644
--- a/packages/admin-ui/ui/src/domain/products/components/customs-form/index.tsx
+++ b/packages/admin-ui/ui/src/domain/products/components/customs-form/index.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import { Controller } from "react-hook-form"
 import InputField from "../../../../components/molecules/input"
 import { NextSelect } from "../../../../components/molecules/select/next-select"
@@ -36,7 +35,7 @@ const CustomsForm = ({ form }: CustomsFormProps) => {
   }))
 
   return (
-    <div className="grid grid-cols-2 gap-large pb-2xsmall">
+    <div className="gap-large pb-2xsmall grid grid-cols-2">
       <InputField
         label="MID Code"
         placeholder="XDSKLAD9999..."
diff --git a/packages/admin-ui/ui/src/domain/products/components/dimensions-form/index.tsx b/packages/admin-ui/ui/src/domain/products/components/dimensions-form/index.tsx
index d47e7a2863..456a19d3e8 100644
--- a/packages/admin-ui/ui/src/domain/products/components/dimensions-form/index.tsx
+++ b/packages/admin-ui/ui/src/domain/products/components/dimensions-form/index.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import InputField from "../../../../components/molecules/input"
 import FormValidator from "../../../../utils/form-validator"
 import { NestedForm } from "../../../../utils/nested-form"
@@ -27,7 +26,7 @@ const DimensionsForm = ({ form }: DimensionsFormProps) => {
   } = form
 
   return (
-    <div className="grid grid-cols-4 gap-x-large">
+    <div className="gap-x-large grid grid-cols-4">
       <InputField
         label="Width"
         placeholder="100..."
diff --git a/packages/admin-ui/ui/src/domain/products/components/discountable-form/index.tsx b/packages/admin-ui/ui/src/domain/products/components/discountable-form/index.tsx
index 06291a7a4e..4706bcb196 100644
--- a/packages/admin-ui/ui/src/domain/products/components/discountable-form/index.tsx
+++ b/packages/admin-ui/ui/src/domain/products/components/discountable-form/index.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import { Controller } from "react-hook-form"
 import Switch from "../../../../components/atoms/switch"
 import { NestedForm } from "../../../../utils/nested-form"
@@ -15,7 +14,7 @@ const DiscountableForm = ({ form }: Props) => {
   const { control, path } = form
   return (
     <div>
-      <div className="flex items-center justify-between mb-2xsmall">
+      <div className="mb-2xsmall flex items-center justify-between">
         <h2 className="inter-base-semibold">Discountable</h2>
         <Controller
           control={control}
diff --git a/packages/admin-ui/ui/src/domain/products/components/general-form/index.tsx b/packages/admin-ui/ui/src/domain/products/components/general-form/index.tsx
index ff8609af2c..82c0b5251c 100644
--- a/packages/admin-ui/ui/src/domain/products/components/general-form/index.tsx
+++ b/packages/admin-ui/ui/src/domain/products/components/general-form/index.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import InputField from "../../../../components/molecules/input"
 import TextArea from "../../../../components/molecules/textarea"
 import FormValidator from "../../../../utils/form-validator"
@@ -26,7 +25,7 @@ const GeneralForm = ({ form, requireHandle = true }: Props) => {
 
   return (
     <div>
-      <div className="grid grid-cols-2 gap-x-large mb-small">
+      <div className="gap-x-large mb-small grid grid-cols-2">
         <InputField
           label="Title"
           placeholder="Winter Jacket"
@@ -55,7 +54,7 @@ const GeneralForm = ({ form, requireHandle = true }: Props) => {
         <br />
         50-60 characters is the recommended length for search engines.
       </p>
-      <div className="grid grid-cols-2 gap-x-large mb-large">
+      <div className="gap-x-large mb-large grid grid-cols-2">
         <InputField
           label="Handle"
           tooltipContent={
diff --git a/packages/admin-ui/ui/src/domain/products/components/media-form/index.tsx b/packages/admin-ui/ui/src/domain/products/components/media-form/index.tsx
index 4581b954a3..92b73967eb 100644
--- a/packages/admin-ui/ui/src/domain/products/components/media-form/index.tsx
+++ b/packages/admin-ui/ui/src/domain/products/components/media-form/index.tsx
@@ -1,5 +1,5 @@
 import clsx from "clsx"
-import React, { useMemo } from "react"
+import { useMemo } from "react"
 import {
   Controller,
   FieldArrayWithId,
@@ -99,7 +99,7 @@ const MediaForm = ({ form }: Props) => {
               onRemove={handleRemove}
             />
           </div>
-          <div className="flex flex-col gap-y-2xsmall">
+          <div className="gap-y-2xsmall flex flex-col">
             {fields.map((field, index) => {
               return (
                 <Image
@@ -146,7 +146,7 @@ const Image = ({ image, index, form, remove }: ImageProps) => {
           <div className="relative">
             <button
               className={clsx(
-                "px-base py-xsmall group hover:bg-grey-5 rounded-rounded flex items-center justify-between",
+                "px-base py-xsmall hover:bg-grey-5 rounded-rounded group flex items-center justify-between",
                 {
                   "bg-grey-5": value,
                 }
@@ -154,32 +154,32 @@ const Image = ({ image, index, form, remove }: ImageProps) => {
               type="button"
               onClick={() => onChange(!value)}
             >
-              <div className="flex items-center gap-x-large">
-                <div className="w-16 h-16 flex items-center justify-center">
+              <div className="gap-x-large flex items-center">
+                <div className="flex h-16 w-16 items-center justify-center">
                   <img
                     src={image.url}
                     alt={image.name || "Uploaded image"}
-                    className="max-w-[64px] max-h-[64px] rounded-rounded"
+                    className="rounded-rounded max-h-[64px] max-w-[64px]"
                   />
                 </div>
-                <div className="flex flex-col inter-small-regular text-left">
+                <div className="inter-small-regular flex flex-col text-left">
                   <p>{image.name}</p>
                   <p className="text-grey-50">
                     {image.size ? `${(image.size / 1024).toFixed(2)} KB` : ""}
                   </p>
                 </div>
               </div>
-              <div className="flex items-center gap-x-base">
+              <div className="gap-x-base flex items-center">
                 <span
                   className={clsx("hidden", {
-                    "!block !text-violet-60": value,
+                    "!text-violet-60 !block": value,
                   })}
                 >
                   <CheckCircleFillIcon size={24} />
                 </span>
               </div>
             </button>
-            <div className="absolute top-0 right-base bottom-0 flex items-center">
+            <div className="right-base absolute top-0 bottom-0 flex items-center">
               <Actionables actions={actions} forceDropdown />
             </div>
           </div>
@@ -197,10 +197,10 @@ type ModalActionsProps = {
 
 const ModalActions = ({ number, onRemove, onDeselect }: ModalActionsProps) => {
   return (
-    <div className="h-10 overflow-y-hidden flex items-center pr-1">
+    <div className="flex h-10 items-center overflow-y-hidden pr-1">
       <div
         className={clsx(
-          "flex items-center gap-x-small transition-all duration-200",
+          "gap-x-small flex items-center transition-all duration-200",
           {
             "translate-y-[-42px]": !number,
             "translate-y-[0px]": number,
@@ -208,8 +208,8 @@ const ModalActions = ({ number, onRemove, onDeselect }: ModalActionsProps) => {
         )}
       >
         <span>{number} selected</span>
-        <div className="w-px h-5 bg-grey-20" />
-        <div className="flex items-center gap-x-xsmall">
+        <div className="bg-grey-20 h-5 w-px" />
+        <div className="gap-x-xsmall flex items-center">
           <Button
             variant="secondary"
             size="small"
diff --git a/packages/admin-ui/ui/src/domain/products/components/organize-form/index.tsx b/packages/admin-ui/ui/src/domain/products/components/organize-form/index.tsx
index 0afc9d3370..db7396648f 100644
--- a/packages/admin-ui/ui/src/domain/products/components/organize-form/index.tsx
+++ b/packages/admin-ui/ui/src/domain/products/components/organize-form/index.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import { Controller } from "react-hook-form"
 import {
   NextCreateableSelect,
diff --git a/packages/admin-ui/ui/src/domain/products/components/prices-form/index.tsx b/packages/admin-ui/ui/src/domain/products/components/prices-form/index.tsx
index c02f67116e..d94c11aaae 100644
--- a/packages/admin-ui/ui/src/domain/products/components/prices-form/index.tsx
+++ b/packages/admin-ui/ui/src/domain/products/components/prices-form/index.tsx
@@ -1,5 +1,5 @@
 import { useAdminRegions, useAdminStore } from "medusa-react"
-import React, { useEffect, useMemo } from "react"
+import { useEffect, useMemo } from "react"
 import { FieldArrayWithId, useFieldArray } from "react-hook-form"
 import { NestedForm } from "../../../../utils/nested-form"
 import NestedPrice from "./nested-price"
diff --git a/packages/admin-ui/ui/src/domain/products/components/prices-form/nested-price.tsx b/packages/admin-ui/ui/src/domain/products/components/prices-form/nested-price.tsx
index 8870b5a8f1..a45647edb2 100644
--- a/packages/admin-ui/ui/src/domain/products/components/prices-form/nested-price.tsx
+++ b/packages/admin-ui/ui/src/domain/products/components/prices-form/nested-price.tsx
@@ -1,5 +1,4 @@
 import clsx from "clsx"
-import React from "react"
 import { Controller } from "react-hook-form"
 import { NestedPriceObject, PricesFormType } from "."
 import IncludesTaxTooltip from "../../../../components/atoms/includes-tax-tooltip"
@@ -22,11 +21,11 @@ const NestedPrice = ({ form, nestedPrice }: Props) => {
   const { control, path } = form
   const { currencyPrice, regionPrices } = nestedPrice
   return (
-    <div key={currencyPrice.id} className="flex flex-col gap-y-2xsmall">
-      <div className="relative grid grid-cols-[1fr_223px] gap-x-base p-2xsmall pl-10 hover:bg-grey-5 focus-within:bg-grey-5 transition-colors rounded-rounded justify-between">
+    <div key={currencyPrice.id} className="gap-y-2xsmall flex flex-col">
+      <div className="gap-x-base p-2xsmall hover:bg-grey-5 focus-within:bg-grey-5 rounded-rounded relative grid grid-cols-[1fr_223px] justify-between pl-10 transition-colors">
         <button
           className={clsx(
-            "absolute top-1/2 -translate-y-1/2 left-xsmall text-grey-40 transition-all",
+            "left-xsmall text-grey-40 absolute top-1/2 -translate-y-1/2 transition-all",
             {
               "rotate-90": state,
             },
@@ -40,11 +39,11 @@ const NestedPrice = ({ form, nestedPrice }: Props) => {
         >
           <TriangleRightIcon />
         </button>
-        <div className="flex items-center gap-x-small">
-          <div className="w-10 h-10 bg-grey-10 rounded-rounded text-grey-50 flex items-center justify-center">
+        <div className="gap-x-small flex items-center">
+          <div className="bg-grey-10 rounded-rounded text-grey-50 flex h-10 w-10 items-center justify-center">
             <CoinsIcon size={20} />
           </div>
-          <div className="flex items-center gap-x-xsmall">
+          <div className="gap-x-xsmall flex items-center">
             <span className="inter-base-semibold">
               {currencyPrice.currency_code.toUpperCase()}
             </span>
@@ -71,7 +70,7 @@ const NestedPrice = ({ form, nestedPrice }: Props) => {
       </div>
       <ul
         className={clsx(
-          "flex flex-col gap-y-2xsmall my-2xsmall overflow-hidden",
+          "gap-y-2xsmall my-2xsmall flex flex-col overflow-hidden",
           {
             "max-h-0": !state,
             "max-h-[9999px]": state,
@@ -81,14 +80,14 @@ const NestedPrice = ({ form, nestedPrice }: Props) => {
         {regionPrices.map((rp) => {
           return (
             <div
-              className="grid grid-cols-[1fr_223px] p-2xsmall pl-10 hover:bg-grey-5 focus-within:bg-grey-5 transition-colors rounded-rounded justify-between"
+              className="p-2xsmall hover:bg-grey-5 focus-within:bg-grey-5 rounded-rounded grid grid-cols-[1fr_223px] justify-between pl-10 transition-colors"
               key={rp.id}
             >
-              <div className="flex items-center gap-x-small">
-                <div className="w-10 h-10 bg-grey-10 rounded-rounded text-grey-50 flex items-center justify-center">
+              <div className="gap-x-small flex items-center">
+                <div className="bg-grey-10 rounded-rounded text-grey-50 flex h-10 w-10 items-center justify-center">
                   <MapPinIcon size={20} />
                 </div>
-                <div className="flex items-center gap-x-xsmall">
+                <div className="gap-x-xsmall flex items-center">
                   <span className="inter-base-regular text-grey-50">
                     {rp.regionName}
                   </span>
diff --git a/packages/admin-ui/ui/src/domain/products/components/prices-form/price-form-input.tsx b/packages/admin-ui/ui/src/domain/products/components/prices-form/price-form-input.tsx
index eeede98f20..b5877a1758 100644
--- a/packages/admin-ui/ui/src/domain/products/components/prices-form/price-form-input.tsx
+++ b/packages/admin-ui/ui/src/domain/products/components/prices-form/price-form-input.tsx
@@ -1,5 +1,5 @@
 import clsx from "clsx"
-import React, { useEffect, useState } from "react"
+import { useEffect, useState } from "react"
 import AmountField from "react-currency-input-field"
 import InputError from "../../../../components/atoms/input-error"
 import { currencies } from "../../../../utils/currencies"
@@ -19,9 +19,8 @@ const PriceFormInput = ({
   amount,
   onChange,
 }: Props) => {
-  const { symbol_native, decimal_digits } = currencies[
-    currencyCode.toUpperCase()
-  ]
+  const { symbol_native, decimal_digits } =
+    currencies[currencyCode.toUpperCase()]
 
   const getFormattedValue = (value: number) => {
     return `${value / 10 ** decimal_digits}`
@@ -55,7 +54,7 @@ const PriceFormInput = ({
     <div>
       <div
         className={clsx(
-          "w-full flex items-center bg-grey-5 border border-gray-20 px-small py-xsmall rounded-rounded h-10 focus-within:shadow-input focus-within:border-violet-60",
+          "bg-grey-5 border-gray-20 px-small py-xsmall rounded-rounded focus-within:shadow-input focus-within:border-violet-60 flex h-10 w-full items-center border",
           {
             "border-rose-50": errors && name && errors[name],
           }
@@ -72,7 +71,7 @@ const PriceFormInput = ({
           allowNegativeValue={false}
           placeholder="-"
           decimalScale={decimal_digits}
-          className="bg-transparent outline-none outline-0 w-full remove-number-spinner leading-base text-grey-90 font-normal caret-violet-60 placeholder-grey-40 text-right"
+          className="remove-number-spinner leading-base text-grey-90 caret-violet-60 placeholder-grey-40 w-full bg-transparent text-right font-normal outline-none outline-0"
         />
       </div>
       <InputError name={name} errors={errors} />
diff --git a/packages/admin-ui/ui/src/domain/products/components/sales-channels-modal/add-screen.tsx b/packages/admin-ui/ui/src/domain/products/components/sales-channels-modal/add-screen.tsx
index 7514f82c01..24511d9237 100644
--- a/packages/admin-ui/ui/src/domain/products/components/sales-channels-modal/add-screen.tsx
+++ b/packages/admin-ui/ui/src/domain/products/components/sales-channels-modal/add-screen.tsx
@@ -93,7 +93,7 @@ const AddScreen = () => {
         />
       </Modal.Content>
       <Modal.Footer>
-        <div className="flex justify-end w-full space-x-xsmall">
+        <div className="space-x-xsmall flex w-full justify-end">
           <Button variant="secondary" size="small" onClick={pop}>
             Cancel
           </Button>
diff --git a/packages/admin-ui/ui/src/domain/products/components/sales-channels-modal/index.tsx b/packages/admin-ui/ui/src/domain/products/components/sales-channels-modal/index.tsx
index 987672c824..93b950dbde 100644
--- a/packages/admin-ui/ui/src/domain/products/components/sales-channels-modal/index.tsx
+++ b/packages/admin-ui/ui/src/domain/products/components/sales-channels-modal/index.tsx
@@ -36,7 +36,7 @@ const SalesChannelsModal = ({ open, source = [], onClose, onSave }: Props) => {
           </Modal.Header>
           <AvailableScreen />
           <Modal.Footer>
-            <div className="flex items-center justify-end w-full">
+            <div className="flex w-full items-center justify-end">
               <Button
                 variant="primary"
                 size="small"
diff --git a/packages/admin-ui/ui/src/domain/products/components/sales-channels-modal/table.tsx b/packages/admin-ui/ui/src/domain/products/components/sales-channels-modal/table.tsx
index f2a3278d9e..bf49be6921 100644
--- a/packages/admin-ui/ui/src/domain/products/components/sales-channels-modal/table.tsx
+++ b/packages/admin-ui/ui/src/domain/products/components/sales-channels-modal/table.tsx
@@ -35,7 +35,7 @@ export const useSalesChannelsTableColumns = () => {
         width: 30,
         id: "selection",
         Header: ({ getToggleAllPageRowsSelectedProps }) => (
-          <span className="flex justify-center w-[30px]">
+          <span className="flex w-[30px] justify-center">
             <IndeterminateCheckbox {...getToggleAllPageRowsSelectedProps()} />
           </span>
         ),
@@ -43,7 +43,7 @@ export const useSalesChannelsTableColumns = () => {
           return (
             <span
               onClick={(e) => e.stopPropagation()}
-              className="flex justify-center w-[30px]"
+              className="flex w-[30px] justify-center"
             >
               <IndeterminateCheckbox {...row.getToggleRowSelectedProps()} />
             </span>
@@ -184,18 +184,18 @@ export const SalesChannelTableActions = ({
   const { push } = React.useContext(LayeredModalContext)
 
   return (
-    <div className="flex space-x-xsmall h-[34px] overflow-hidden">
+    <div className="space-x-xsmall flex h-[34px] overflow-hidden">
       <div className={clsx("transition-all duration-200", classes)}>
-        <div className="divide-x flex items-center h-[34px] mb-2">
-          <span className="mr-3 inter-small-regular text-grey-50">
+        <div className="mb-2 flex h-[34px] items-center divide-x">
+          <span className="inter-small-regular text-grey-50 mr-3">
             {numberOfSelectedRows} selected
           </span>
-          <div className="flex space-x-xsmall pl-3">
+          <div className="space-x-xsmall flex pl-3">
             <Button
               onClick={onDeselect}
               size="small"
               variant="ghost"
-              className="border border-grey-20"
+              className="border-grey-20 border"
             >
               Deselect
             </Button>
@@ -203,17 +203,17 @@ export const SalesChannelTableActions = ({
               onClick={onRemove}
               size="small"
               variant="ghost"
-              className="border border-grey-20 text-rose-50"
+              className="border-grey-20 border text-rose-50"
             >
               Remove
             </Button>
           </div>
         </div>
-        <div className="flex justify-end h-[34px]">
+        <div className="flex h-[34px] justify-end">
           <Button
             size="small"
             variant="ghost"
-            className="border border-grey-20"
+            className="border-grey-20 border"
             onClick={() => push(addChannelModalScreen)}
           >
             <PlusIcon size={20} /> Add Channels
diff --git a/packages/admin-ui/ui/src/domain/products/components/sales-channels-modal/use-sales-channels-modal.tsx b/packages/admin-ui/ui/src/domain/products/components/sales-channels-modal/use-sales-channels-modal.tsx
index 1d772cbc17..71d45297bb 100644
--- a/packages/admin-ui/ui/src/domain/products/components/sales-channels-modal/use-sales-channels-modal.tsx
+++ b/packages/admin-ui/ui/src/domain/products/components/sales-channels-modal/use-sales-channels-modal.tsx
@@ -7,9 +7,8 @@ type SalesChannelsModalContextType = {
   onSave: (channels: SalesChannel[]) => void
 }
 
-export const SalesChannelsModalContext = React.createContext<SalesChannelsModalContextType | null>(
-  null
-)
+export const SalesChannelsModalContext =
+  React.createContext<SalesChannelsModalContextType | null>(null)
 
 export const useSalesChannelsModal = () => {
   const context = useContext(SalesChannelsModalContext)
diff --git a/packages/admin-ui/ui/src/domain/products/components/thumbnail-form/index.tsx b/packages/admin-ui/ui/src/domain/products/components/thumbnail-form/index.tsx
index 51f102d290..c2cda7df80 100644
--- a/packages/admin-ui/ui/src/domain/products/components/thumbnail-form/index.tsx
+++ b/packages/admin-ui/ui/src/domain/products/components/thumbnail-form/index.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import { FieldArrayWithId, useFieldArray } from "react-hook-form"
 import FileUploadField from "../../../../components/atoms/file-upload-field"
 import TrashIcon from "../../../../components/fundamentals/icons/trash-icon"
@@ -56,7 +55,7 @@ const ThumbnailForm = ({ form }: Props) => {
         <div className="mt-large">
           <h2 className="inter-large-semibold mb-small">Upload</h2>
 
-          <div className="flex flex-col gap-y-2xsmall">
+          <div className="gap-y-2xsmall flex flex-col">
             {fields.map((field, index) => {
               return (
                 <Image
@@ -91,16 +90,16 @@ const Image = ({ image, index, remove }: ThumbnailProps) => {
   ]
 
   return (
-    <div className="px-base py-xsmall group hover:bg-grey-5 rounded-rounded flex items-center justify-between">
-      <div className="flex items-center gap-x-large">
-        <div className="w-16 h-16 flex items-center justify-center">
+    <div className="px-base py-xsmall hover:bg-grey-5 rounded-rounded group flex items-center justify-between">
+      <div className="gap-x-large flex items-center">
+        <div className="flex h-16 w-16 items-center justify-center">
           <img
             src={image.url}
             alt={image.name || "Uploaded image"}
-            className="max-w-[64px] max-h-[64px] rounded-rounded"
+            className="rounded-rounded max-h-[64px] max-w-[64px]"
           />
         </div>
-        <div className="flex flex-col inter-small-regular text-left">
+        <div className="inter-small-regular flex flex-col text-left">
           <p>{image.name}</p>
           <p className="text-grey-50">
             {image.size ? `${(image.size / 1024).toFixed(2)} KB` : ""}
diff --git a/packages/admin-ui/ui/src/domain/products/components/variant-form/create-flow-variant-form/index.tsx b/packages/admin-ui/ui/src/domain/products/components/variant-form/create-flow-variant-form/index.tsx
index 8951355bf6..f0a12addcf 100644
--- a/packages/admin-ui/ui/src/domain/products/components/variant-form/create-flow-variant-form/index.tsx
+++ b/packages/admin-ui/ui/src/domain/products/components/variant-form/create-flow-variant-form/index.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import { UseFormReturn } from "react-hook-form"
 import InputError from "../../../../../components/atoms/input-error"
 import IconTooltip from "../../../../../components/molecules/icon-tooltip"
@@ -62,7 +61,7 @@ const CreateFlowVariantForm = ({ form, options, onCreateOption }: Props) => {
         <div>
           <VariantGeneralForm form={nestedForm(form, "general")} />
           <div className="mt-xlarge">
-            <div className="flex items-center gap-x-2xsmall mb-base">
+            <div className="gap-x-2xsmall mb-base flex items-center">
               <h3 className="inter-base-semibold">Options</h3>
               <IconTooltip
                 type="info"
diff --git a/packages/admin-ui/ui/src/domain/products/components/variant-form/variant-general-form/index.tsx b/packages/admin-ui/ui/src/domain/products/components/variant-form/variant-general-form/index.tsx
index 4cb6244590..3898773f14 100644
--- a/packages/admin-ui/ui/src/domain/products/components/variant-form/variant-general-form/index.tsx
+++ b/packages/admin-ui/ui/src/domain/products/components/variant-form/variant-general-form/index.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import InputField from "../../../../../components/molecules/input"
 import FormValidator from "../../../../../utils/form-validator"
 import { NestedForm } from "../../../../../utils/nested-form"
@@ -25,7 +24,7 @@ const VariantGeneralForm = ({ form }: Props) => {
         Configure the general information for this variant.
       </p>
       <div className="pt-large">
-        <div className="grid grid-cols-2 gap-x-large">
+        <div className="gap-x-large grid grid-cols-2">
           <InputField
             label="Custom title"
             placeholder="Green / XL..."
diff --git a/packages/admin-ui/ui/src/domain/products/components/variant-form/variant-prices-form/index.tsx b/packages/admin-ui/ui/src/domain/products/components/variant-form/variant-prices-form/index.tsx
index 677b02bc2b..1e85c2bb1d 100644
--- a/packages/admin-ui/ui/src/domain/products/components/variant-form/variant-prices-form/index.tsx
+++ b/packages/admin-ui/ui/src/domain/products/components/variant-form/variant-prices-form/index.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import { NestedForm } from "../../../../../utils/nested-form"
 import PricesForm, { PricesFormType } from "../../prices-form"
 
diff --git a/packages/admin-ui/ui/src/domain/products/components/variant-form/variant-select-options-form/index.tsx b/packages/admin-ui/ui/src/domain/products/components/variant-form/variant-select-options-form/index.tsx
index d7f15774d7..62753cead8 100644
--- a/packages/admin-ui/ui/src/domain/products/components/variant-form/variant-select-options-form/index.tsx
+++ b/packages/admin-ui/ui/src/domain/products/components/variant-form/variant-select-options-form/index.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import { Controller, useFieldArray } from "react-hook-form"
 import { NextCreateableSelect } from "../../../../../components/molecules/select/next-select"
 import { NestedForm } from "../../../../../utils/nested-form"
@@ -34,7 +33,7 @@ const VariantSelectOptionsForm = ({ form, options, onCreateOption }: Props) => {
   })
 
   return (
-    <div className="grid grid-cols-2 gap-large pb-2xsmall">
+    <div className="gap-large pb-2xsmall grid grid-cols-2">
       {fields.map((field, index) => {
         return (
           <Controller
diff --git a/packages/admin-ui/ui/src/domain/products/components/variant-inventory-form/variant-stock-form/index.tsx b/packages/admin-ui/ui/src/domain/products/components/variant-inventory-form/variant-stock-form/index.tsx
index 8f5519cb6c..f712598c83 100644
--- a/packages/admin-ui/ui/src/domain/products/components/variant-inventory-form/variant-stock-form/index.tsx
+++ b/packages/admin-ui/ui/src/domain/products/components/variant-inventory-form/variant-stock-form/index.tsx
@@ -69,10 +69,10 @@ const VariantStockForm = ({
 
   return (
     <div>
-      <div className="flex flex-col gap-y-xlarge">
+      <div className="gap-y-xlarge flex flex-col">
         <div className="flex flex-col gap-y-4">
           <h3 className="inter-base-semibold">General</h3>
-          <div className="grid grid-cols-2 gap-large">
+          <div className="gap-large grid grid-cols-2">
             <InputField
               label="Stock keeping unit (SKU)"
               placeholder="SUN-G, JK1234..."
@@ -95,7 +95,7 @@ const VariantStockForm = ({
             />
           </div>
         </div>
-        <div className="flex flex-col gap-y-2xsmall">
+        <div className="gap-y-2xsmall flex flex-col">
           <div className="flex items-center justify-between">
             <h3 className="inter-base-semibold mb-2xsmall">Manage inventory</h3>
             <Controller
@@ -111,7 +111,7 @@ const VariantStockForm = ({
             returns are made.
           </p>
         </div>
-        <div className="flex flex-col gap-y-2xsmall">
+        <div className="gap-y-2xsmall flex flex-col">
           <div className="flex items-center justify-between">
             <h3 className="inter-base-semibold mb-2xsmall">Allow backorders</h3>
             <Controller
@@ -127,11 +127,11 @@ const VariantStockForm = ({
             product being sold out
           </p>
         </div>
-        <div className="flex flex-col w-full text-base">
+        <div className="flex w-full flex-col text-base">
           <h3 className="inter-base-semibold mb-2xsmall">Quantity</h3>
           {!isLoading && locations && (
-            <div className="flex flex-col w-full">
-              <div className="flex justify-between py-3 inter-base-regular text-grey-50">
+            <div className="flex w-full flex-col">
+              <div className="inter-base-regular text-grey-50 flex justify-between py-3">
                 <div className="">Location</div>
                 <div className="">In Stock</div>
               </div>
@@ -142,18 +142,18 @@ const VariantStockForm = ({
 
                 return (
                   <div key={level.id} className="flex items-center py-3">
-                    <div className="flex items-center inter-base-regular">
+                    <div className="inter-base-regular flex items-center">
                       <IconBadge className="mr-base">
                         <BuildingsIcon />
                       </IconBadge>
                       {locationDetails?.name}
                     </div>
-                    <div className="flex ml-auto">
-                      <div className="flex flex-col mr-base text-small text-grey-50">
-                        <span className="text-right whitespace-nowrap">
+                    <div className="ml-auto flex">
+                      <div className="mr-base text-small text-grey-50 flex flex-col">
+                        <span className="whitespace-nowrap text-right">
                           {`${level.reserved_quantity} reserved`}
                         </span>
-                        <span className="text-right whitespace-nowrap">{`${
+                        <span className="whitespace-nowrap text-right">{`${
                           level.stocked_quantity - level.reserved_quantity
                         } available`}</span>
                       </div>
@@ -284,11 +284,11 @@ const ManageLocationsForm = ({
   }
 
   return (
-    <div className="w-full h-full">
+    <div className="h-full w-full">
       <form onSubmit={handleSubmit}>
         <Modal.Content>
           <div>
-            <div className="flex items-center justify-between w-full border-b border-grey-20 pb-base text-grey-50">
+            <div className="border-grey-20 pb-base text-grey-50 flex w-full items-center justify-between border-b">
               <div className="">
                 <p>Select locations that stock the selected variant</p>
                 <p>{`(${selectedLocations.length} of ${locationOptions.length} selected)`}</p>
@@ -307,7 +307,7 @@ const ManageLocationsForm = ({
 
               return (
                 <div
-                  className="flex items-center justify-between gap-6 border-b border-grey-20 py-base"
+                  className="border-grey-20 py-base flex items-center justify-between gap-6 border-b"
                   key={loc.id}
                 >
                   <div className="flex items-center">
@@ -326,7 +326,7 @@ const ManageLocationsForm = ({
           </div>
         </Modal.Content>
         <Modal.Footer>
-          <div className="flex justify-end w-full gap-x-xsmall">
+          <div className="gap-x-xsmall flex w-full justify-end">
             <Button
               variant="ghost"
               size="small"
diff --git a/packages/admin-ui/ui/src/domain/products/edit/index.tsx b/packages/admin-ui/ui/src/domain/products/edit/index.tsx
index 4580e99aa6..a7331fb87c 100644
--- a/packages/admin-ui/ui/src/domain/products/edit/index.tsx
+++ b/packages/admin-ui/ui/src/domain/products/edit/index.tsx
@@ -38,7 +38,7 @@ const Edit = () => {
   if (status === "loading" || !product) {
     // temp, perhaps use skeletons?
     return (
-      <div className="w-full h-[calc(100vh-64px)] flex items-center justify-center">
+      <div className="flex h-[calc(100vh-64px)] w-full items-center justify-center">
         <Spinner variant="secondary" />
       </div>
     )
@@ -51,14 +51,14 @@ const Edit = () => {
         label="Back to Products"
         className="mb-xsmall"
       />
-      <div className="grid grid-cols-12 gap-x-base">
-        <div className="col-span-8 flex flex-col gap-y-xsmall">
+      <div className="gap-x-base grid grid-cols-12">
+        <div className="gap-y-xsmall col-span-8 flex flex-col">
           <GeneralSection product={product} />
           <VariantsSection product={product} />
           <AttributesSection product={product} />
           <RawSection product={product} />
         </div>
-        <div className="flex flex-col col-span-4 gap-y-xsmall">
+        <div className="gap-y-xsmall col-span-4 flex flex-col">
           <ThumbnailSection product={product} />
           <MediaSection product={product} />
         </div>
diff --git a/packages/admin-ui/ui/src/domain/products/edit/sections/attributes/attribute-modal.tsx b/packages/admin-ui/ui/src/domain/products/edit/sections/attributes/attribute-modal.tsx
index d270bc9bd5..d4cdedeece 100644
--- a/packages/admin-ui/ui/src/domain/products/edit/sections/attributes/attribute-modal.tsx
+++ b/packages/admin-ui/ui/src/domain/products/edit/sections/attributes/attribute-modal.tsx
@@ -1,5 +1,5 @@
 import { Product } from "@medusajs/medusa"
-import React, { useEffect } from "react"
+import { useEffect } from "react"
 import { useForm } from "react-hook-form"
 import Button from "../../../../../components/fundamentals/button"
 import Modal from "../../../../../components/molecules/modal"
@@ -87,7 +87,7 @@ const AttributeModal = ({ product, open, onClose }: Props) => {
             </div>
           </Modal.Content>
           <Modal.Footer>
-            <div className="flex gap-x-2 justify-end w-full">
+            <div className="flex w-full justify-end gap-x-2">
               <Button
                 size="small"
                 variant="secondary"
diff --git a/packages/admin-ui/ui/src/domain/products/edit/sections/attributes/index.tsx b/packages/admin-ui/ui/src/domain/products/edit/sections/attributes/index.tsx
index a9c697c2c7..4067e9f7f4 100644
--- a/packages/admin-ui/ui/src/domain/products/edit/sections/attributes/index.tsx
+++ b/packages/admin-ui/ui/src/domain/products/edit/sections/attributes/index.tsx
@@ -1,5 +1,4 @@
 import { Product } from "@medusajs/medusa"
-import React from "react"
 import EditIcon from "../../../../../components/fundamentals/icons/edit-icon"
 import { ActionType } from "../../../../../components/molecules/actionables"
 import Section from "../../../../../components/organisms/section"
@@ -24,18 +23,18 @@ const AttributesSection = ({ product }: Props) => {
   return (
     <>
       <Section title="Attributes" actions={actions} forceDropdown>
-        <div className="flex flex-col gap-y-xsmall mb-large mt-base">
+        <div className="gap-y-xsmall mb-large mt-base flex flex-col">
           <h2 className="inter-base-semibold">Dimensions</h2>
-          <div className="flex flex-col gap-y-xsmall">
+          <div className="gap-y-xsmall flex flex-col">
             <Attribute attribute="Height" value={product.height} />
             <Attribute attribute="Width" value={product.width} />
             <Attribute attribute="Length" value={product.length} />
             <Attribute attribute="Weight" value={product.weight} />
           </div>
         </div>
-        <div className="flex flex-col gap-y-xsmall">
+        <div className="gap-y-xsmall flex flex-col">
           <h2 className="inter-base-semibold">Customs</h2>
-          <div className="flex flex-col gap-y-xsmall">
+          <div className="gap-y-xsmall flex flex-col">
             <Attribute attribute="MID Code" value={product.mid_code} />
             <Attribute attribute="HS Code" value={product.hs_code} />
             <Attribute
@@ -58,7 +57,7 @@ type AttributeProps = {
 
 const Attribute = ({ attribute, value }: AttributeProps) => {
   return (
-    <div className="flex items-center justify-between w-full inter-base-regular text-grey-50">
+    <div className="inter-base-regular text-grey-50 flex w-full items-center justify-between">
       <p>{attribute}</p>
       <p>{value || "–"}</p>
     </div>
diff --git a/packages/admin-ui/ui/src/domain/products/edit/sections/general/channels-modal.tsx b/packages/admin-ui/ui/src/domain/products/edit/sections/general/channels-modal.tsx
index f16692088d..c4f68c198f 100644
--- a/packages/admin-ui/ui/src/domain/products/edit/sections/general/channels-modal.tsx
+++ b/packages/admin-ui/ui/src/domain/products/edit/sections/general/channels-modal.tsx
@@ -1,6 +1,5 @@
 import { Product, SalesChannel } from "@medusajs/medusa"
 import { useAdminUpdateProduct } from "medusa-react"
-import React from "react"
 import SalesChannelsModal from "../../../components/sales-channels-modal"
 
 type Props = {
diff --git a/packages/admin-ui/ui/src/domain/products/edit/sections/general/general-modal.tsx b/packages/admin-ui/ui/src/domain/products/edit/sections/general/general-modal.tsx
index b40761380e..58390688f9 100644
--- a/packages/admin-ui/ui/src/domain/products/edit/sections/general/general-modal.tsx
+++ b/packages/admin-ui/ui/src/domain/products/edit/sections/general/general-modal.tsx
@@ -1,5 +1,5 @@
 import { Product } from "@medusajs/medusa"
-import React, { useEffect } from "react"
+import { useEffect } from "react"
 import { useForm } from "react-hook-form"
 import Button from "../../../../../components/fundamentals/button"
 import Modal from "../../../../../components/molecules/modal"
diff --git a/packages/admin-ui/ui/src/domain/products/edit/sections/media/index.tsx b/packages/admin-ui/ui/src/domain/products/edit/sections/media/index.tsx
index bdcb9c5bbf..7986ad09f7 100644
--- a/packages/admin-ui/ui/src/domain/products/edit/sections/media/index.tsx
+++ b/packages/admin-ui/ui/src/domain/products/edit/sections/media/index.tsx
@@ -1,5 +1,4 @@
 import { Product } from "@medusajs/medusa"
-import React from "react"
 import { ActionType } from "../../../../../components/molecules/actionables"
 import Section from "../../../../../components/organisms/section"
 import useToggleState from "../../../../../hooks/use-toggle-state"
@@ -23,17 +22,17 @@ const MediaSection = ({ product }: Props) => {
     <>
       <Section title="Media" actions={actions}>
         {product.images && product.images.length > 0 && (
-          <div className="grid grid-cols-3 gap-xsmall mt-base">
+          <div className="gap-xsmall mt-base grid grid-cols-3">
             {product.images.map((image, index) => {
               return (
                 <div
                   key={image.id}
-                  className="aspect-square flex items-center justify-center"
+                  className="flex aspect-square items-center justify-center"
                 >
                   <img
                     src={image.url}
                     alt={`Image ${index + 1}`}
-                    className="object-contain rounded-rounded max-w-full max-h-full"
+                    className="rounded-rounded max-h-full max-w-full object-contain"
                   />
                 </div>
               )
diff --git a/packages/admin-ui/ui/src/domain/products/edit/sections/media/media-modal.tsx b/packages/admin-ui/ui/src/domain/products/edit/sections/media/media-modal.tsx
index 7c11448981..03d52d245d 100644
--- a/packages/admin-ui/ui/src/domain/products/edit/sections/media/media-modal.tsx
+++ b/packages/admin-ui/ui/src/domain/products/edit/sections/media/media-modal.tsx
@@ -1,5 +1,5 @@
 import { Product } from "@medusajs/medusa"
-import React, { useEffect } from "react"
+import { useEffect } from "react"
 import { useForm } from "react-hook-form"
 import Button from "../../../../../components/fundamentals/button"
 import Modal from "../../../../../components/molecules/modal"
@@ -91,7 +91,7 @@ const MediaModal = ({ product, open, onClose }: Props) => {
             </div>
           </Modal.Content>
           <Modal.Footer>
-            <div className="flex gap-x-2 justify-end w-full">
+            <div className="flex w-full justify-end gap-x-2">
               <Button
                 size="small"
                 variant="secondary"
diff --git a/packages/admin-ui/ui/src/domain/products/edit/sections/thumbnail/index.tsx b/packages/admin-ui/ui/src/domain/products/edit/sections/thumbnail/index.tsx
index 69c91bc5bb..556bb860fc 100644
--- a/packages/admin-ui/ui/src/domain/products/edit/sections/thumbnail/index.tsx
+++ b/packages/admin-ui/ui/src/domain/products/edit/sections/thumbnail/index.tsx
@@ -1,6 +1,5 @@
 import { Product } from "@medusajs/medusa"
 import clsx from "clsx"
-import React from "react"
 import TwoStepDelete from "../../../../../components/atoms/two-step-delete"
 import Button from "../../../../../components/fundamentals/button"
 import Section from "../../../../../components/organisms/section"
@@ -42,7 +41,7 @@ const TumbnailSection = ({ product }: Props) => {
       <Section
         title="Thumbnail"
         customActions={
-          <div className="flex items-center gap-x-xsmall">
+          <div className="gap-x-xsmall flex items-center">
             <Button
               variant="secondary"
               size="small"
@@ -58,16 +57,16 @@ const TumbnailSection = ({ product }: Props) => {
         }
       >
         <div
-          className={clsx("grid grid-cols-3 gap-xsmall mt-base", {
+          className={clsx("gap-xsmall mt-base grid grid-cols-3", {
             hidden: !product.thumbnail,
           })}
         >
           {product.thumbnail && (
-            <div className="aspect-square flex items-center justify-center">
+            <div className="flex aspect-square items-center justify-center">
               <img
                 src={product.thumbnail}
                 alt={`Thumbnail for ${product.title}`}
-                className="object-contain rounded-rounded max-w-full max-h-full"
+                className="rounded-rounded max-h-full max-w-full object-contain"
               />
             </div>
           )}
diff --git a/packages/admin-ui/ui/src/domain/products/edit/sections/thumbnail/thumbnail-modal.tsx b/packages/admin-ui/ui/src/domain/products/edit/sections/thumbnail/thumbnail-modal.tsx
index cb2d22b125..9713ba3b38 100644
--- a/packages/admin-ui/ui/src/domain/products/edit/sections/thumbnail/thumbnail-modal.tsx
+++ b/packages/admin-ui/ui/src/domain/products/edit/sections/thumbnail/thumbnail-modal.tsx
@@ -1,5 +1,5 @@
 import { Product } from "@medusajs/medusa"
-import React, { useEffect } from "react"
+import { useEffect } from "react"
 import { useForm } from "react-hook-form"
 import Button from "../../../../../components/fundamentals/button"
 import Modal from "../../../../../components/molecules/modal"
@@ -92,7 +92,7 @@ const ThumbnailModal = ({ product, open, onClose }: Props) => {
             <ThumbnailForm form={nestedForm(form, "thumbnail")} />
           </Modal.Content>
           <Modal.Footer>
-            <div className="flex gap-x-2 justify-end w-full">
+            <div className="flex w-full justify-end gap-x-2">
               <Button
                 size="small"
                 variant="secondary"
diff --git a/packages/admin-ui/ui/src/domain/products/edit/sections/variants/edit-variant-inventory-modal.tsx b/packages/admin-ui/ui/src/domain/products/edit/sections/variants/edit-variant-inventory-modal.tsx
index ee52722759..881bbd8a3e 100644
--- a/packages/admin-ui/ui/src/domain/products/edit/sections/variants/edit-variant-inventory-modal.tsx
+++ b/packages/admin-ui/ui/src/domain/products/edit/sections/variants/edit-variant-inventory-modal.tsx
@@ -129,7 +129,7 @@ const StockForm = ({
         />
       </Modal.Content>
       <Modal.Footer>
-        <div className="flex items-center justify-end w-full gap-x-xsmall">
+        <div className="gap-x-xsmall flex w-full items-center justify-end">
           <Button
             variant="secondary"
             size="small"
diff --git a/packages/admin-ui/ui/src/domain/products/edit/sections/variants/edit-variants-modal/index.tsx b/packages/admin-ui/ui/src/domain/products/edit/sections/variants/edit-variants-modal/index.tsx
index 2726aaf608..6e207f8bbf 100644
--- a/packages/admin-ui/ui/src/domain/products/edit/sections/variants/edit-variants-modal/index.tsx
+++ b/packages/admin-ui/ui/src/domain/products/edit/sections/variants/edit-variants-modal/index.tsx
@@ -1,5 +1,5 @@
 import { Product } from "@medusajs/medusa"
-import React, { useCallback, useContext, useEffect } from "react"
+import { useCallback, useContext, useEffect } from "react"
 import {
   FieldArrayWithId,
   FormProvider,
@@ -132,14 +132,14 @@ const EditVariantsModal = ({ open, onClose, product }: Props) => {
                     ({product.variants.length})
                   </span>
                 </h2>
-                <div className="grid grid-cols-[1fr_1fr_48px] pr-base inter-small-semibold text-grey-50 mb-small">
+                <div className="pr-base inter-small-semibold text-grey-50 mb-small grid grid-cols-[1fr_1fr_48px]">
                   <p className="col-start-1 col-end-1 text-left">Variant</p>
                   <p className="col-start-2 col-end-2 text-right">Inventory</p>
                 </div>
                 <div>{fields.map((card, i) => renderCard(card, i))}</div>
               </Modal.Content>
               <Modal.Footer>
-                <div className="flex items-center gap-x-xsmall justify-end w-full">
+                <div className="gap-x-xsmall flex w-full items-center justify-end">
                   <Button
                     variant="secondary"
                     size="small"
diff --git a/packages/admin-ui/ui/src/domain/products/edit/sections/variants/edit-variants-modal/use-edit-variants-modal.tsx b/packages/admin-ui/ui/src/domain/products/edit/sections/variants/edit-variants-modal/use-edit-variants-modal.tsx
index 36cab45b7e..7f463b16ae 100644
--- a/packages/admin-ui/ui/src/domain/products/edit/sections/variants/edit-variants-modal/use-edit-variants-modal.tsx
+++ b/packages/admin-ui/ui/src/domain/products/edit/sections/variants/edit-variants-modal/use-edit-variants-modal.tsx
@@ -4,9 +4,8 @@ type EditVariantsModalContext = {
   onClose: () => void
 }
 
-export const EditVariantsModalContext = React.createContext<EditVariantsModalContext | null>(
-  null
-)
+export const EditVariantsModalContext =
+  React.createContext<EditVariantsModalContext | null>(null)
 
 export const useEditVariantsModal = () => {
   const context = useContext(EditVariantsModalContext)
diff --git a/packages/admin-ui/ui/src/domain/products/edit/sections/variants/edit-variants-modal/variant-card.tsx b/packages/admin-ui/ui/src/domain/products/edit/sections/variants/edit-variants-modal/variant-card.tsx
index 251f1704c7..c0b7ae8b4a 100644
--- a/packages/admin-ui/ui/src/domain/products/edit/sections/variants/edit-variants-modal/variant-card.tsx
+++ b/packages/admin-ui/ui/src/domain/products/edit/sections/variants/edit-variants-modal/variant-card.tsx
@@ -1,7 +1,7 @@
 import { Product } from "@medusajs/medusa"
 import clsx from "clsx"
 import type { Identifier, XYCoord } from "dnd-core"
-import React, { useContext, useMemo, useRef } from "react"
+import { useContext, useMemo, useRef } from "react"
 import { useDrag, useDrop } from "react-dnd"
 import { useFormContext } from "react-hook-form"
 import { VariantItem } from "."
@@ -118,19 +118,19 @@ export const VariantCard = ({
       ref={preview}
       data-handler-id={handlerId}
       className={clsx(
-        "grid grid-cols-[32px_1fr_1fr_48px] transition-all rounded-rounded hover:bg-grey-5 focus-within:bg-grey-5 h-16 py-xsmall pl-xsmall pr-base translate-y-0 translate-x-0",
+        "rounded-rounded hover:bg-grey-5 focus-within:bg-grey-5 py-xsmall pl-xsmall pr-base grid h-16 translate-y-0 translate-x-0 grid-cols-[32px_1fr_1fr_48px] transition-all",
         {
           "bg-grey-5 opacity-50": isDragging,
         }
       )}
     >
       <div
-        className="text-grey-40 cursor-move flex items-center justify-center"
+        className="text-grey-40 flex cursor-move items-center justify-center"
         ref={ref}
       >
         <GripIcon size={20} />
       </div>
-      <div className="flex flex-col text-left ml-base justify-center">
+      <div className="ml-base flex flex-col justify-center text-left">
         <p className="inter-base-semibold">
           {title}
           {sku && (
@@ -139,7 +139,7 @@ export const VariantCard = ({
         </p>
         {ean && <span className="inter-base-regular text-grey-50">{ean}</span>}
       </div>
-      <div className="text-right flex items-center justify-end">
+      <div className="flex items-center justify-end text-right">
         <InputField
           {...register(`variants.${index}.inventory_quantity`, {
             min: FormValidator.nonNegativeNumberRule("Inventory"),
@@ -151,14 +151,14 @@ export const VariantCard = ({
           errors={errors}
         />
       </div>
-      <div className="ml-xlarge flex items-center justify-center pr-base">
+      <div className="ml-xlarge pr-base flex items-center justify-center">
         <Actionables
           forceDropdown
           actions={actions}
           customTrigger={
             <Button
               variant="ghost"
-              className="w-xlarge h-xlarge p-0 flex items-center justify-center text-grey-50"
+              className="w-xlarge h-xlarge text-grey-50 flex items-center justify-center p-0"
             >
               <MoreHorizontalIcon size={20} />
             </Button>
diff --git a/packages/admin-ui/ui/src/domain/products/edit/sections/variants/options-modal.tsx b/packages/admin-ui/ui/src/domain/products/edit/sections/variants/options-modal.tsx
index 697dd3fd42..a1216d65af 100644
--- a/packages/admin-ui/ui/src/domain/products/edit/sections/variants/options-modal.tsx
+++ b/packages/admin-ui/ui/src/domain/products/edit/sections/variants/options-modal.tsx
@@ -4,7 +4,7 @@ import {
   useAdminDeleteProductOption,
   useAdminUpdateProductOption,
 } from "medusa-react"
-import React, { useEffect, useMemo } from "react"
+import { useEffect, useMemo } from "react"
 import { useFieldArray, useForm } from "react-hook-form"
 import Button from "../../../../../components/fundamentals/button"
 import PlusIcon from "../../../../../components/fundamentals/icons/plus-icon"
@@ -166,13 +166,13 @@ const OptionsModal = ({ product, open, onClose }: Props) => {
         <form onSubmit={onSubmit}>
           <Modal.Content>
             <h2 className="inter-large-semibold mb-base">Product options</h2>
-            <div className="flex flex-col gap-y-small">
+            <div className="gap-y-small flex flex-col">
               <p className="inter-small-semibold text-grey-50">Option title</p>
-              <div className="flex flex-col gap-y-xsmall">
+              <div className="gap-y-xsmall flex flex-col">
                 {fields.map((field, index) => {
                   return (
                     <div
-                      className="grid grid-cols-[1fr,40px] gap-x-xsmall"
+                      className="gap-x-xsmall grid grid-cols-[1fr,40px]"
                       key={field.id}
                     >
                       <InputField
@@ -180,16 +180,15 @@ const OptionsModal = ({ product, open, onClose }: Props) => {
                         placeholder="Color"
                         {...register(`options.${index}.title`, {
                           required: "Option title is required",
-                          minLength: FormValidator.minOneCharRule(
-                            "Option title"
-                          ),
+                          minLength:
+                            FormValidator.minOneCharRule("Option title"),
                           pattern: FormValidator.whiteSpaceRule("Option title"),
                         })}
                         errors={errors}
                       />
                       <Button
                         variant="secondary"
-                        className="px-2.5 py-2.5 max-h-[40px]"
+                        className="max-h-[40px] px-2.5 py-2.5"
                         type="button"
                         onClick={() => remove(index)}
                       >
@@ -202,7 +201,7 @@ const OptionsModal = ({ product, open, onClose }: Props) => {
             </div>
             <Button
               variant="secondary"
-              className="w-full h-10 mt-base"
+              className="mt-base h-10 w-full"
               type="button"
               onClick={handleAddAnOption}
             >
@@ -210,8 +209,13 @@ const OptionsModal = ({ product, open, onClose }: Props) => {
             </Button>
           </Modal.Content>
           <Modal.Footer>
-            <div className="flex items-center justify-end gap-xsmall w-full">
-              <Button variant="secondary" size="small" type="button" onClick={handleClose}>
+            <div className="gap-xsmall flex w-full items-center justify-end">
+              <Button
+                variant="secondary"
+                size="small"
+                type="button"
+                onClick={handleClose}
+              >
                 Cancel
               </Button>
               <Button
diff --git a/packages/admin-ui/ui/src/domain/products/filter-dropdown.tsx b/packages/admin-ui/ui/src/domain/products/filter-dropdown.tsx
index 5770ea2709..c32e114559 100644
--- a/packages/admin-ui/ui/src/domain/products/filter-dropdown.tsx
+++ b/packages/admin-ui/ui/src/domain/products/filter-dropdown.tsx
@@ -1,5 +1,5 @@
 import clsx from "clsx"
-import React, { useMemo, useEffect, useState } from "react"
+import { useMemo, useEffect, useState } from "react"
 import { useAdminProductTags, useAdminCollections } from "medusa-react"
 import CheckIcon from "../../components/fundamentals/icons/check-icon"
 import PlusIcon from "../../components/fundamentals/icons/plus-icon"
@@ -109,10 +109,10 @@ const ProductsFilter = ({
         triggerElement={
           <button
             className={clsx(
-              "flex rounded-rounded items-center space-x-1 focus-visible:outline-none focus-visible:shadow-input focus-visible:border-violet-60"
+              "rounded-rounded focus-visible:shadow-input focus-visible:border-violet-60 flex items-center space-x-1 focus-visible:outline-none"
             )}
           >
-            <div className="flex rounded-rounded items-center bg-grey-5 border border-grey-20 inter-small-semibold px-2 h-6">
+            <div className="rounded-rounded bg-grey-5 border-grey-20 inter-small-semibold flex h-6 items-center border px-2">
               Filters
               <div className="text-grey-40 ml-1 flex items-center rounded">
                 <span className="text-violet-60 inter-small-semibold">
@@ -120,7 +120,7 @@ const ProductsFilter = ({
                 </span>
               </div>
             </div>
-            <div className="flex items-center rounded-rounded bg-grey-5 border border-grey-20 inter-small-semibold p-1">
+            <div className="rounded-rounded bg-grey-5 border-grey-20 inter-small-semibold flex items-center border p-1">
               <PlusIcon size={14} />
             </div>
           </button>
@@ -150,9 +150,9 @@ const ProductsFilter = ({
           open={tempState.collection.open}
           setFilter={(v) => setSingleFilter("collection", v)}
         />
-        <div className="flex flex-col w-full pb-2">
+        <div className="flex w-full flex-col pb-2">
           <div
-            className="flex w-full items-center px-3 mb-1 py-1.5 hover:bg-grey-5 rounded cursor-pointer"
+            className="hover:bg-grey-5 mb-1 flex w-full cursor-pointer items-center rounded px-3 py-1.5"
             onClick={() => {
               setSingleFilter("tags", {
                 open: !tempState.tags.open,
@@ -161,7 +161,7 @@ const ProductsFilter = ({
             }}
           >
             <div
-              className={`w-5 h-5 flex justify-center border-grey-30 border text-grey-0 rounded-base ${
+              className={`border-grey-30 text-grey-0 rounded-base flex h-5 w-5 justify-center border ${
                 tempState.tags.open && "bg-violet-60"
               }`}
             >
diff --git a/packages/admin-ui/ui/src/domain/products/new/add-sales-channels.tsx b/packages/admin-ui/ui/src/domain/products/new/add-sales-channels.tsx
index 73cd8fc1ca..5935ee5a7e 100644
--- a/packages/admin-ui/ui/src/domain/products/new/add-sales-channels.tsx
+++ b/packages/admin-ui/ui/src/domain/products/new/add-sales-channels.tsx
@@ -95,7 +95,7 @@ const AddSalesChannelsForm = ({ form }: Props) => {
           </div>
           <Button
             variant="secondary"
-            className="w-full h-[40px] mt-large"
+            className="mt-large h-[40px] w-full"
             type="button"
             onClick={toggleModal}
           >
diff --git a/packages/admin-ui/ui/src/domain/products/new/add-variants/index.tsx b/packages/admin-ui/ui/src/domain/products/new/add-variants/index.tsx
index 9c3b3f1264..9b667a4e88 100644
--- a/packages/admin-ui/ui/src/domain/products/new/add-variants/index.tsx
+++ b/packages/admin-ui/ui/src/domain/products/new/add-variants/index.tsx
@@ -261,7 +261,7 @@ const AddVariantsForm = ({
   return (
     <>
       <div>
-        <div className="flex items-center gap-x-2xsmall">
+        <div className="gap-x-2xsmall flex items-center">
           <h3 className="inter-base-semibold">Product options</h3>
           <IconTooltip
             type="info"
@@ -275,7 +275,7 @@ const AddVariantsForm = ({
                 <span>Option title</span>
                 <span>Variations (comma separated)</span>
               </div>
-              <div className="grid grid-cols-1 gap-y-xsmall">
+              <div className="gap-y-xsmall grid grid-cols-1">
                 {options.map((field, index) => {
                   return (
                     <div
@@ -326,7 +326,7 @@ const AddVariantsForm = ({
           <Button
             variant="secondary"
             size="small"
-            className="w-full h-10 mt-base"
+            className="mt-base h-10 w-full"
             type="button"
             onClick={appendNewOption}
           >
@@ -334,7 +334,7 @@ const AddVariantsForm = ({
             <span>Add an option</span>
           </Button>
           <div className="mt-xlarge">
-            <div className="flex items-center gap-x-2xsmall">
+            <div className="gap-x-2xsmall flex items-center">
               <h3
                 className={clsx("inter-base-semibold", {
                   "opacity-50": !options.length,
@@ -356,7 +356,7 @@ const AddVariantsForm = ({
               <div className="mt-small">
                 <div className="inter-small-semibold pr-base text-grey-50 grid grid-cols-[1fr_90px_100px_48px]">
                   <p>Variant</p>
-                  <div className="flex justify-end mr-xlarge">
+                  <div className="mr-xlarge flex justify-end">
                     <p>Inventory</p>
                   </div>
                 </div>
@@ -384,7 +384,7 @@ const AddVariantsForm = ({
             <Button
               variant="secondary"
               size="small"
-              className="w-full h-10 mt-base"
+              className="mt-base h-10 w-full"
               type="button"
               disabled={!enableVariants}
               onClick={onToggleForm}
@@ -413,7 +413,7 @@ const AddVariantsForm = ({
             />
           </Modal.Content>
           <Modal.Footer>
-            <div className="flex items-center justify-end w-full gap-x-xsmall">
+            <div className="gap-x-xsmall flex w-full items-center justify-end">
               <Button
                 variant="secondary"
                 size="small"
diff --git a/packages/admin-ui/ui/src/domain/products/new/add-variants/new-variant/index.tsx b/packages/admin-ui/ui/src/domain/products/new/add-variants/new-variant/index.tsx
index 2ece27b303..3c3a7dad3f 100644
--- a/packages/admin-ui/ui/src/domain/products/new/add-variants/new-variant/index.tsx
+++ b/packages/admin-ui/ui/src/domain/products/new/add-variants/new-variant/index.tsx
@@ -175,11 +175,11 @@ const NewVariant = ({
       >
         <div
           ref={ref}
-          className="flex items-center justify-center cursor-move text-grey-40"
+          className="text-grey-40 flex cursor-move items-center justify-center"
         >
           <GripIcon size={20} />
         </div>
-        <div className="flex flex-col justify-center ml-base">
+        <div className="ml-base flex flex-col justify-center">
           <p className="inter-base-semibold">
             {source.general.title}
             {source.stock.sku && (
@@ -194,7 +194,7 @@ const NewVariant = ({
             </span>
           )}
         </div>
-        <div className="flex items-center justify-end mr-xlarge">
+        <div className="mr-xlarge flex items-center justify-end">
           <p>{source.stock.inventory_quantity || "-"}</p>
         </div>
         <div className="flex items-center justify-center">
@@ -204,7 +204,7 @@ const NewVariant = ({
             productDimensions={productDimensions}
           />
         </div>
-        <div className="flex items-center justify-center ml-xlarge pr-base">
+        <div className="ml-xlarge pr-base flex items-center justify-center">
           <Actionables
             forceDropdown
             actions={[
@@ -223,7 +223,7 @@ const NewVariant = ({
             customTrigger={
               <Button
                 variant="ghost"
-                className="flex items-center justify-center p-0 h-xlarge w-xlarge text-grey-50"
+                className="h-xlarge w-xlarge text-grey-50 flex items-center justify-center p-0"
               >
                 <MoreHorizontalIcon size={20} />
               </Button>
@@ -255,7 +255,7 @@ const NewVariant = ({
             />
           </Modal.Content>
           <Modal.Footer>
-            <div className="flex items-center justify-end w-full gap-x-xsmall">
+            <div className="gap-x-xsmall flex w-full items-center justify-end">
               <Button
                 variant="secondary"
                 size="small"
@@ -299,7 +299,7 @@ const VariantValidity = ({
       <IconTooltip
         type="error"
         content={
-          <div className="flex flex-col gap-y-2xsmall text-rose-50">
+          <div className="gap-y-2xsmall flex flex-col text-rose-50">
             <p>This variant has no options.</p>
           </div>
         }
@@ -314,9 +314,9 @@ const VariantValidity = ({
       <IconTooltip
         type="error"
         content={
-          <div className="flex flex-col gap-y-2xsmall text-rose-50">
+          <div className="gap-y-2xsmall flex flex-col text-rose-50">
             <p>You are missing options values for the following options:</p>
-            <ul className="list-disc list-inside">
+            <ul className="list-inside list-disc">
               {invalidOptions.map((io, index) => {
                 return <li key={index}>{io.title || `Option ${index + 1}`}</li>
               })}
@@ -350,12 +350,12 @@ const VariantValidity = ({
         type="warning"
         side="right"
         content={
-          <div className="flex flex-col gap-y-2xsmall text-orange-50">
+          <div className="gap-y-2xsmall flex flex-col text-orange-50">
             <p>
               Your variant is createable, but it's missing some important
               fields:
             </p>
-            <ul className="list-disc list-inside">
+            <ul className="list-inside list-disc">
               {!validPrices && <li>Pricing</li>}
               {!validDimensions && <li>Dimensions</li>}
               {!validCustoms && <li>Customs</li>}
diff --git a/packages/admin-ui/ui/src/domain/products/overview/index.tsx b/packages/admin-ui/ui/src/domain/products/overview/index.tsx
index 03d15cf503..645053931c 100644
--- a/packages/admin-ui/ui/src/domain/products/overview/index.tsx
+++ b/packages/admin-ui/ui/src/domain/products/overview/index.tsx
@@ -1,5 +1,5 @@
 import { useAdminCreateBatchJob, useAdminCreateCollection } from "medusa-react"
-import React, { useContext, useEffect, useState } from "react"
+import { useEffect, useState } from "react"
 import { useLocation, useNavigate } from "react-router-dom"
 import Fade from "../../../components/atoms/fade-wrapper"
 import Button from "../../../components/fundamentals/button"
diff --git a/packages/admin-ui/ui/src/domain/publishable-api-keys/modals/add-sales-channels.tsx b/packages/admin-ui/ui/src/domain/publishable-api-keys/modals/add-sales-channels.tsx
index 400d39f8e6..0c306a6d31 100644
--- a/packages/admin-ui/ui/src/domain/publishable-api-keys/modals/add-sales-channels.tsx
+++ b/packages/admin-ui/ui/src/domain/publishable-api-keys/modals/add-sales-channels.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useState } from "react"
+import { useRef, useState } from "react"
 import { useAdminSalesChannels } from "medusa-react"
 import { SalesChannel } from "@medusajs/medusa"
 
@@ -72,16 +72,16 @@ function AddSalesChannelsSideModal(props: AddSalesChannelsSideModalProps) {
 
   return (
     <SideModal close={onClose} isVisible={!!isVisible}>
-      <div className="flex flex-col justify-between h-full p-6">
+      <div className="flex h-full flex-col justify-between p-6">
         {/* === HEADER === */}
 
         <div className="flex items-center justify-between">
-          <h3 className="inter-large-semibold text-xl text-gray-900 flex items-center gap-2">
+          <h3 className="inter-large-semibold flex items-center gap-2 text-xl text-gray-900">
             Add sales channels
           </h3>
           <Button
             variant="secondary"
-            className="w-8 h-8 p-2"
+            className="h-8 w-8 p-2"
             onClick={props.close}
           >
             <CrossIcon size={20} className="text-grey-50" />
@@ -118,7 +118,7 @@ function AddSalesChannelsSideModal(props: AddSalesChannelsSideModalProps) {
         {/* === DIVIDER === */}
 
         <div
-          className="h-[1px] bg-gray-200 block"
+          className="block h-[1px] bg-gray-200"
           style={{ margin: "24px -24px" }}
         />
         {/* === FOOTER === */}
diff --git a/packages/admin-ui/ui/src/domain/publishable-api-keys/modals/details.tsx b/packages/admin-ui/ui/src/domain/publishable-api-keys/modals/details.tsx
index 6cf4eb13b1..9ae637d3cc 100644
--- a/packages/admin-ui/ui/src/domain/publishable-api-keys/modals/details.tsx
+++ b/packages/admin-ui/ui/src/domain/publishable-api-keys/modals/details.tsx
@@ -45,7 +45,7 @@ function DetailsModal(props: DetailsModalProps) {
 
   return (
     <SideModal close={close} isVisible={!!selectedKey}>
-      <div className="flex flex-col justify-between h-full p-6">
+      <div className="flex h-full flex-col justify-between p-6">
         {/* === HEADER === */}
 
         <div className="flex items-center justify-between">
@@ -59,7 +59,7 @@ function DetailsModal(props: DetailsModalProps) {
         {/* === DIVIDER === */}
 
         <div
-          className="h-[1px] bg-gray-200 block"
+          className="block h-[1px] bg-gray-200"
           style={{ margin: "24px -24px" }}
         />
         {/* === BODY === */}
@@ -77,7 +77,7 @@ function DetailsModal(props: DetailsModalProps) {
         {/* === DIVIDER === */}
 
         <div
-          className="h-[1px] bg-gray-200 block"
+          className="block h-[1px] bg-gray-200"
           style={{ margin: "24px -24px" }}
         />
         {/* === FOOTER === */}
diff --git a/packages/admin-ui/ui/src/domain/publishable-api-keys/modals/manage-sales-channels.tsx b/packages/admin-ui/ui/src/domain/publishable-api-keys/modals/manage-sales-channels.tsx
index a7edae3615..f7483655c3 100644
--- a/packages/admin-ui/ui/src/domain/publishable-api-keys/modals/manage-sales-channels.tsx
+++ b/packages/admin-ui/ui/src/domain/publishable-api-keys/modals/manage-sales-channels.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef, useState } from "react"
+import { useEffect, useMemo, useRef, useState } from "react"
 import { motion } from "framer-motion"
 
 import {
@@ -78,14 +78,14 @@ function AddScreen(props: {
   }
 
   return (
-    <div className="flex flex-col justify-between h-full p-6">
+    <div className="flex h-full flex-col justify-between p-6">
       {/* === HEADER === */}
 
       <div className="flex items-center justify-between">
-        <h3 className="inter-large-semibold text-xl text-gray-900 flex items-center gap-2">
+        <h3 className="inter-large-semibold flex items-center gap-2 text-xl text-gray-900">
           <Button
             variant="secondary"
-            className="w-8 h-8 p-2 text-grey-50"
+            className="text-grey-50 h-8 w-8 p-2"
             onClick={props.goBack}
           >
             <UTurnIcon size={18} />
@@ -94,7 +94,7 @@ function AddScreen(props: {
         </h3>
         <Button
           variant="secondary"
-          className="w-8 h-8 p-2"
+          className="h-8 w-8 p-2"
           onClick={props.close}
         >
           <CrossIcon size={20} className="text-grey-50" />
@@ -131,7 +131,7 @@ function AddScreen(props: {
       {/* === DIVIDER === */}
 
       <div
-        className="h-[1px] bg-gray-200 block"
+        className="block h-[1px] bg-gray-200"
         style={{ margin: "24px -24px" }}
       />
       {/* === FOOTER === */}
@@ -244,16 +244,16 @@ function EditScreen(props: {
   )
 
   return (
-    <div className="flex flex-col justify-between h-full p-6">
+    <div className="flex h-full flex-col justify-between p-6">
       {/* === HEADER === */}
 
       <div className="flex items-center justify-between">
-        <h3 className="inter-large-semibold text-xl text-gray-900 flex items-center gap-2">
+        <h3 className="inter-large-semibold flex items-center gap-2 text-xl text-gray-900">
           Edit sales channels
         </h3>
         <Button
           variant="secondary"
-          className="w-8 h-8 p-2"
+          className="h-8 w-8 p-2"
           onClick={props.close}
         >
           <CrossIcon size={20} className="text-grey-50" />
@@ -262,7 +262,7 @@ function EditScreen(props: {
       {/* === DIVIDER === */}
 
       <div className="flex-grow">
-        <div className="flex justify-between items-center gap-2 my-6">
+        <div className="my-6 flex items-center justify-between gap-2">
           <InputField
             small
             name="name"
@@ -275,13 +275,13 @@ function EditScreen(props: {
           />
 
           {selectedCount ? (
-            <div className="flex gap-2 justify-between items-center h-[32px]">
-              <span className="whitespace-nowrap text-small text-grey-50 px-2">
+            <div className="flex h-[32px] items-center justify-between gap-2">
+              <span className="text-small text-grey-50 whitespace-nowrap px-2">
                 {selectedCount} selected
               </span>
               <Button
                 size="small"
-                className="flex-shrink-0 h-[32px]"
+                className="h-[32px] flex-shrink-0"
                 variant="secondary"
                 onClick={onDeselect}
               >
@@ -289,7 +289,7 @@ function EditScreen(props: {
               </Button>
               <Button
                 size="small"
-                className="flex-shrink-0 h-[32px] text-rose-500"
+                className="h-[32px] flex-shrink-0 text-rose-500"
                 variant="secondary"
                 onClick={onRemove}
               >
@@ -299,7 +299,7 @@ function EditScreen(props: {
           ) : (
             <Button
               size="small"
-              className="flex-shrink-0 h-[32px]"
+              className="h-[32px] flex-shrink-0"
               variant="secondary"
               onClick={props.goAdd}
             >
@@ -323,7 +323,7 @@ function EditScreen(props: {
       {/* === DIVIDER === */}
 
       <div
-        className="h-[1px] bg-gray-200 block"
+        className="block h-[1px] bg-gray-200"
         style={{ margin: "24px -24px" }}
       />
       {/* === FOOTER === */}
diff --git a/packages/admin-ui/ui/src/domain/publishable-api-keys/tables/publishable-api-keys-table.tsx b/packages/admin-ui/ui/src/domain/publishable-api-keys/tables/publishable-api-keys-table.tsx
index c3477d70ef..c54a8bf205 100644
--- a/packages/admin-ui/ui/src/domain/publishable-api-keys/tables/publishable-api-keys-table.tsx
+++ b/packages/admin-ui/ui/src/domain/publishable-api-keys/tables/publishable-api-keys-table.tsx
@@ -27,14 +27,14 @@ const PAGE_SIZE = 12
 const COLUMNS: Column<PublishableApiKey>[] = [
   {
     accessor: "title",
-    Header: <div className="text-gray-500 text-small font-semibold">Name</div>,
+    Header: <div className="text-small font-semibold text-gray-500">Name</div>,
     Cell: ({ row: { original } }) => {
       return <span className="text-gray-900">{original.title}</span>
     },
   },
   {
     accessor: "id",
-    Header: <div className="text-gray-500 text-small font-semibold">Token</div>,
+    Header: <div className="text-small font-semibold text-gray-500">Token</div>,
     Cell: ({ row: { original } }) => {
       const [copied, setCopied] = useState(false)
 
@@ -49,7 +49,7 @@ const COLUMNS: Column<PublishableApiKey>[] = [
           onMouseLeave={debounce(() => setCopied(false), 1000)}
           content={
             copied ? (
-              <span className="flex flex-row gap-1 justify-between items-center">
+              <span className="flex flex-row items-center justify-between gap-1">
                 <CheckIcon size={16} className="text-green-700" /> done
               </span>
             ) : (
@@ -67,7 +67,7 @@ const COLUMNS: Column<PublishableApiKey>[] = [
   {
     accessor: "created_at",
     Header: (
-      <div className="text-gray-500 text-small font-semibold">Created</div>
+      <div className="text-small font-semibold text-gray-500">Created</div>
     ),
     Cell: ({ row: { original } }) => {
       return (
@@ -80,11 +80,11 @@ const COLUMNS: Column<PublishableApiKey>[] = [
   {
     accessor: "revoked_at",
     Header: (
-      <div className="text-gray-500 text-small font-semibold">Status</div>
+      <div className="text-small font-semibold text-gray-500">Status</div>
     ),
     Cell: ({ row: { original } }) => {
       return (
-        <span className="text-gray-900 min-w-[50px]">
+        <span className="min-w-[50px] text-gray-900">
           {original.revoked_at ? (
             <StatusIndicator title="Revoked" variant="danger" />
           ) : (
@@ -292,7 +292,7 @@ function PublishableApiKeysTable(props: PublishableApiKeysTableProps) {
 
       {/* === PLACEHOLDER === */}
       {!keys?.length && !isLoading && (
-        <div className="flex justify-center items-center h-[480px] w-[100%]">
+        <div className="flex h-[480px] w-[100%] items-center justify-center">
           <span className="text-gray-400">
             No keys yet, use the above button to create your first publishable
             key
diff --git a/packages/admin-ui/ui/src/domain/publishable-api-keys/tables/sales-channels-table.tsx b/packages/admin-ui/ui/src/domain/publishable-api-keys/tables/sales-channels-table.tsx
index dd5f313296..5454c9e450 100644
--- a/packages/admin-ui/ui/src/domain/publishable-api-keys/tables/sales-channels-table.tsx
+++ b/packages/admin-ui/ui/src/domain/publishable-api-keys/tables/sales-channels-table.tsx
@@ -20,7 +20,7 @@ const COLUMNS = [
     width: 30,
     id: "selection",
     Header: ({ getToggleAllPageRowsSelectedProps }) => (
-      <span className="flex justify-center w-[30px]">
+      <span className="flex w-[30px] justify-center">
         <IndeterminateCheckbox {...getToggleAllPageRowsSelectedProps()} />
       </span>
     ),
@@ -28,7 +28,7 @@ const COLUMNS = [
       return (
         <span
           onClick={(e) => e.stopPropagation()}
-          className="flex justify-center w-[30px]"
+          className="flex w-[30px] justify-center"
         >
           <IndeterminateCheckbox {...row.getToggleRowSelectedProps()} />
         </span>
@@ -44,7 +44,7 @@ const COLUMNS = [
       return (
         <span
           title={row.original.name}
-          className="truncate block max-w-[160px]"
+          className="block max-w-[160px] truncate"
         >
           {row.original.name}
         </span>
@@ -58,7 +58,7 @@ const COLUMNS = [
       return (
         <span
           title={row.original.description}
-          className="truncate block max-w-[200px]"
+          className="block max-w-[200px] truncate"
         >
           {row.original.description}
         </span>
@@ -208,7 +208,7 @@ const SalesChannelTable = forwardRef(
           </Table>
 
           {!isLoading && !data?.length && (
-            <div className="absolute w-full h-full flex justify-center items-center">
+            <div className="absolute flex h-full w-full items-center justify-center">
               <span className="text-sma text-grey-40">
                 No added sales channels
               </span>
diff --git a/packages/admin-ui/ui/src/domain/sales-channels/form/add-sales-channel.tsx b/packages/admin-ui/ui/src/domain/sales-channels/form/add-sales-channel.tsx
index a06181b78c..2e8557ee9b 100644
--- a/packages/admin-ui/ui/src/domain/sales-channels/form/add-sales-channel.tsx
+++ b/packages/admin-ui/ui/src/domain/sales-channels/form/add-sales-channel.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import { useState } from "react"
 import { useAdminCreateSalesChannel } from "medusa-react"
 
 import Button from "../../../components/fundamentals/button"
@@ -24,7 +24,7 @@ function General(props: GeneralProps) {
   const { name, description, setName, setDescription } = props
 
   return (
-    <div className="flex flex-col gap-y-base my-base">
+    <div className="gap-y-base my-base flex flex-col">
       <div className="flex-1">
         <InputField
           label="Title"
@@ -62,17 +62,17 @@ function AddProducts() {
         size="small"
         type="button"
         variant="secondary"
-        className="w-full h-[40px] mt-6"
+        className="mt-6 h-[40px] w-full"
         onClick={() => setShowModal(true)}
       >
         <PlusIcon size={20} />
         Add Products
       </Button>
-      {/*{showModal && (*/}
+      {/* {showModal && (*/}
       {/*  <SalesChannelAvaliableProductsModal*/}
       {/*    handleClose={() => setShowModal(false)}*/}
       {/*  />*/}
-      {/*)}*/}
+      {/* )}*/}
     </div>
   )
 }
@@ -135,12 +135,12 @@ const AddSalesChannelModal = ({ onClose }: AddSalesChannelModalProps) => {
   return (
     <FocusModal>
       <FocusModal.Header>
-        <div className="medium:w-8/12 w-full px-8 flex justify-between">
+        <div className="medium:w-8/12 flex w-full justify-between px-8">
           <Button
             size="small"
             variant="ghost"
             onClick={onClose}
-            className="border rounded-rounded w-8 h-8"
+            className="rounded-rounded h-8 w-8 border"
           >
             <CrossIcon size={20} />
           </Button>
@@ -168,11 +168,11 @@ const AddSalesChannelModal = ({ onClose }: AddSalesChannelModalProps) => {
         </div>
       </FocusModal.Header>
       <FocusModal.Main>
-        <div className="flex justify-center mb-[25%]">
+        <div className="mb-[25%] flex justify-center">
           <div className="medium:w-7/12 large:w-6/12 small:w-4/5 w-full pt-16">
             <h1 className="inter-xlarge-semibold">Create new sales channel</h1>
             <Accordion
-              className="pt-7 text-grey-90"
+              className="text-grey-90 pt-7"
               defaultValue={["general"]}
               type="multiple"
             >
@@ -188,10 +188,10 @@ const AddSalesChannelModal = ({ onClose }: AddSalesChannelModalProps) => {
                   setDescription={setDescription}
                 />
               </Accordion.Item>
-              {/*TODO: add a modal for initially selecting products*/}
-              {/*<Accordion.Item title="Products" value="products">*/}
+              {/* TODO: add a modal for initially selecting products*/}
+              {/* <Accordion.Item title="Products" value="products">*/}
               {/*  <AddProducts />*/}
-              {/*</Accordion.Item>*/}
+              {/* </Accordion.Item>*/}
             </Accordion>
           </div>
         </div>
diff --git a/packages/admin-ui/ui/src/domain/sales-channels/form/edit-sales-channel.tsx b/packages/admin-ui/ui/src/domain/sales-channels/form/edit-sales-channel.tsx
index e9e1f2acd4..8b75bb0469 100644
--- a/packages/admin-ui/ui/src/domain/sales-channels/form/edit-sales-channel.tsx
+++ b/packages/admin-ui/ui/src/domain/sales-channels/form/edit-sales-channel.tsx
@@ -1,5 +1,5 @@
 import { useAdminUpdateSalesChannel } from "medusa-react"
-import React, { useState } from "react"
+import { useState } from "react"
 
 import { SalesChannel } from "@medusajs/medusa"
 
@@ -57,7 +57,7 @@ function EditSalesChannel(props: EditSalesChannelProps) {
             General info
           </div>
 
-          <div className="w-full flex flex-col gap-3">
+          <div className="flex w-full flex-col gap-3">
             <InputField
               label="Name"
               name="name"
@@ -73,7 +73,7 @@ function EditSalesChannel(props: EditSalesChannelProps) {
           </div>
         </Modal.Content>
         <Modal.Footer>
-          <div className="w-full flex justify-end">
+          <div className="flex w-full justify-end">
             <Button
               variant="ghost"
               size="small"
diff --git a/packages/admin-ui/ui/src/domain/sales-channels/pages/details.tsx b/packages/admin-ui/ui/src/domain/sales-channels/pages/details.tsx
index 084595bb98..ace5bcccc0 100644
--- a/packages/admin-ui/ui/src/domain/sales-channels/pages/details.tsx
+++ b/packages/admin-ui/ui/src/domain/sales-channels/pages/details.tsx
@@ -41,14 +41,14 @@ function ListIndicator(props: ListIndicatorProps) {
   return (
     <div
       className={clsx(
-        "flex justify-center items-center flex-shrink-0 w-[18px] h-[18px] bg-white border rounded-circle",
+        "rounded-circle flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center border bg-white",
         {
-          "border-2 border-violet-60": isActive,
+          "border-violet-60 border-2": isActive,
         }
       )}
     >
       {isActive && (
-        <div className="w-[10px] h-[10px] bg-violet-60 rounded-circle" />
+        <div className="bg-violet-60 rounded-circle h-[10px] w-[10px]" />
       )}
     </div>
   )
@@ -61,11 +61,11 @@ function DisabledLabel() {
   return (
     <div
       className="
-      w-[54px] h-[28px]
-      rounded-xl
-      bg-grey-10
-      flex items-center justify-center
-      text-grey-50 text-small font-semibold"
+      bg-grey-10 text-grey-50
+      text-small
+      flex
+      h-[28px] w-[54px] items-center
+      justify-center rounded-xl font-semibold"
     >
       Draft
     </div>
@@ -89,16 +89,16 @@ function SalesChannelTile(props: SalesChannelTileProps) {
     <div
       onClick={onClick}
       className={clsx(
-        "mb-2 p-4 cursor-pointer rounded-lg border flex justify-between h-[83px]",
+        "mb-2 flex h-[83px] cursor-pointer justify-between rounded-lg border p-4",
         {
-          "border-2 border-violet-60": isSelected,
+          "border-violet-60 border-2": isSelected,
         }
       )}
     >
       <div className="flex gap-2 overflow-hidden">
         <ListIndicator isActive={isSelected} />
         <div className="block overflow-hidden truncate">
-          <h3 className="mb-1 font-semibold leading-5 text-grey-90">
+          <h3 className="text-grey-90 mb-1 font-semibold leading-5">
             {salesChannel.name}
           </h3>
           <span
@@ -110,7 +110,7 @@ function SalesChannelTile(props: SalesChannelTileProps) {
         </div>
       </div>
       {isDisabled && (
-        <div className="flex flex-col justify-center flex-shrink-0">
+        <div className="flex flex-shrink-0 flex-col justify-center">
           <DisabledLabel />
         </div>
       )}
@@ -144,11 +144,11 @@ function SalesChannelsHeader(props: SalesChannelsHeaderProps) {
   }
 
   return (
-    <div className="h-[55px] mb-6 overflow-hidden">
+    <div className="mb-6 h-[55px] overflow-hidden">
       <div className={clsx("transition-all duration-200", classes)}>
         <div className="h-[55px]">
-          <div className="flex items-center justify-between mb-1">
-            <h2 className="font-semibold text-xlarge text-grey-90">
+          <div className="mb-1 flex items-center justify-between">
+            <h2 className="text-xlarge text-grey-90 font-semibold">
               Sales channels
             </h2>
             <div className="flex items-center justify-between gap-4">
@@ -164,19 +164,19 @@ function SalesChannelsHeader(props: SalesChannelsHeaderProps) {
               />
             </div>
           </div>
-          <div className="text-grey-50 text-small mb-6 block overflow-hidden truncate max-w-[100%]">
+          <div className="text-grey-50 text-small mb-6 block max-w-[100%] overflow-hidden truncate">
             Control which products are available in which channels
           </div>
         </div>
 
-        <div className="h-[40px] my-[5px] w-full flex items-center justify-around gap-2 text-grey-40 bg-grey-5 px-4 rounded-xl border">
+        <div className="text-grey-40 bg-grey-5 my-[5px] flex h-[40px] w-full items-center justify-around gap-2 rounded-xl border px-4">
           <SearchIcon size={20} />
           <input
             ref={inputRef}
             value={filterText}
             onChange={(e) => setFilterText(e.target.value)}
             placeholder="Search by title or description"
-            className="w-full font-normal outline-none bg-inherit outline-0 remove-number-spinner leading-base text-grey-90 caret-violet-60 placeholder-grey-40"
+            className="remove-number-spinner leading-base text-grey-90 caret-violet-60 placeholder-grey-40 w-full bg-inherit font-normal outline-none outline-0"
             onBlur={() => setShowFilter(!!filterText)}
             autoComplete="off"
           />
@@ -210,7 +210,7 @@ function SalesChannelsList(props: SalesChannelsListProps) {
   } = props
 
   return (
-    <div className="col-span-1 rounded-lg border bg-grey-0 border-grey-20 px-8 py-6 h-[968px]">
+    <div className="bg-grey-0 border-grey-20 col-span-1 h-[968px] rounded-lg border px-8 py-6">
       <SalesChannelsHeader
         filterText={filterText}
         setFilterText={setFilterText}
@@ -302,7 +302,7 @@ function SalesChannelDetailsHeader(props: SalesChannelDetailsHeaderProps) {
 
   return (
     <div className="flex items-center justify-between">
-      <h2 className="mb-4 font-semibold text-xlarge text-grey-90">
+      <h2 className="text-xlarge text-grey-90 mb-4 font-semibold">
         {salesChannel.name}
       </h2>
       <div className="flex items-center justify-between gap-4">
@@ -338,7 +338,7 @@ function SalesChannelDetails(props: SalesChannelDetailsProps) {
     useToggleState(false)
 
   return (
-    <div className="col-span-2 rounded-rounded border bg-grey-0 border-grey-20 px-8 py-6 h-[968px]">
+    <div className="rounded-rounded bg-grey-0 border-grey-20 col-span-2 h-[968px] border px-8 py-6">
       <SalesChannelDetailsHeader
         isDefault={isDefault}
         resetDetails={resetDetails}
diff --git a/packages/admin-ui/ui/src/domain/sales-channels/tables/config.tsx b/packages/admin-ui/ui/src/domain/sales-channels/tables/config.tsx
index 74ec62406b..bfcb602776 100644
--- a/packages/admin-ui/ui/src/domain/sales-channels/tables/config.tsx
+++ b/packages/admin-ui/ui/src/domain/sales-channels/tables/config.tsx
@@ -1,5 +1,3 @@
-import React from "react"
-
 import IndeterminateCheckbox from "../../../components/molecules/indeterminate-checkbox"
 import ImagePlaceholder from "../../../components/fundamentals/image-placeholder"
 
@@ -29,14 +27,14 @@ export const SALES_CHANNEL_PRODUCTS_TABLE_COLUMNS = [
     Cell: ({ row: { original } }) => {
       return (
         <div className="flex items-center">
-          <div className="h-[40px] w-[30px] my-1.5 flex items-center mr-4">
+          <div className="my-1.5 mr-4 flex h-[40px] w-[30px] items-center">
             {original.thumbnail ? (
               <img
                 src={original.thumbnail}
-                className="h-full object-cover rounded-soft"
+                className="rounded-soft h-full object-cover"
               />
             ) : (
-              <div className="flex items-center justify-center w-full h-full rounded-soft bg-grey-10">
+              <div className="rounded-soft bg-grey-10 flex h-full w-full items-center justify-center">
                 <ImagePlaceholder size={16} />
               </div>
             )}
diff --git a/packages/admin-ui/ui/src/domain/sales-channels/tables/placeholder.tsx b/packages/admin-ui/ui/src/domain/sales-channels/tables/placeholder.tsx
index 7c50e7e123..f82422b546 100644
--- a/packages/admin-ui/ui/src/domain/sales-channels/tables/placeholder.tsx
+++ b/packages/admin-ui/ui/src/domain/sales-channels/tables/placeholder.tsx
@@ -1,19 +1,17 @@
-import React from "react"
-
 import Button from "../../../components/fundamentals/button"
 import SidedMouthFaceIcon from "../../../components/fundamentals/icons/sided-mouth-face"
 
 function Placeholder({ showAddModal }) {
   return (
-    <div className="h-full flex flex-col justify-center items-center">
+    <div className="flex h-full flex-col items-center justify-center">
       <span className="text-grey-50">
         <SidedMouthFaceIcon width="48" height="48" />
       </span>
 
-      <h3 className="font-semibold text-large text-gray-90 mt-6">
+      <h3 className="text-large text-gray-90 mt-6 font-semibold">
         Start building your channels setup...
       </h3>
-      <p className="mt-2 mb-8 text-grey-50 w-[358px] text-center">
+      <p className="text-grey-50 mt-2 mb-8 w-[358px] text-center">
         You haven’t added any products to this channels yet, but once you do
         they will live here.
       </p>
diff --git a/packages/admin-ui/ui/src/domain/sales-channels/tables/product.tsx b/packages/admin-ui/ui/src/domain/sales-channels/tables/product.tsx
index efdba748e3..ae52583178 100644
--- a/packages/admin-ui/ui/src/domain/sales-channels/tables/product.tsx
+++ b/packages/admin-ui/ui/src/domain/sales-channels/tables/product.tsx
@@ -297,7 +297,7 @@ const ProductRow = ({ row, actions, onClick, disabled }) => {
       color={"inherit"}
       className={clsx("cursor-pointer", {
         "bg-grey-5": row.isSelected,
-        "opacity-40 cursor-not-allowed pointer-events-none": disabled,
+        "pointer-events-none cursor-not-allowed opacity-40": disabled,
       })}
       actions={actions}
       {...row.getRowProps()}
@@ -335,13 +335,13 @@ function RemoveProductsPopup({
   return (
     <div
       className={clsx(
-        "absolute w-full bottom-1 flex justify-center transition-all duration-200 pointer-events-none",
+        "pointer-events-none absolute bottom-1 flex w-full justify-center transition-all duration-200",
         classes
       )}
     >
-      <div className="h-[48px] min-w-[224px] rounded-lg border shadow-toaster flex items-center justify-around gap-3 px-4 py-3 pointer-events-auto">
+      <div className="shadow-toaster pointer-events-auto flex h-[48px] min-w-[224px] items-center justify-around gap-3 rounded-lg border px-4 py-3">
         <span className="text-small text-grey-50">{total} selected</span>
-        <div className="w-[1px] h-[20px] bg-grey-20" />
+        <div className="bg-grey-20 h-[20px] w-[1px]" />
         <Button variant="danger" size="small" onClick={onRemove}>
           Remove
         </Button>
@@ -501,7 +501,7 @@ function SalesChannelProductsSelectModal(
           />
         </Modal.Content>
         <Modal.Footer>
-          <div className="w-full flex justify-end">
+          <div className="flex w-full justify-end">
             <Button
               variant="ghost"
               size="small"
diff --git a/packages/admin-ui/ui/src/domain/settings/currencies/components/currency-tax-setting.tsx b/packages/admin-ui/ui/src/domain/settings/currencies/components/currency-tax-setting.tsx
index fa75f6e36f..9081a22b52 100644
--- a/packages/admin-ui/ui/src/domain/settings/currencies/components/currency-tax-setting.tsx
+++ b/packages/admin-ui/ui/src/domain/settings/currencies/components/currency-tax-setting.tsx
@@ -53,19 +53,19 @@ const CurrencyTaxSetting = ({ currency, isDefault }: Props) => {
 
   return (
     <form>
-      <div className="flex items-center justify-between inter-base-regular">
-        <div className="flex items-center gap-x-base">
-          <div className="flex items-center justify-center bg-grey-10 rounded-rounded w-xlarge h-xlarge">
+      <div className="inter-base-regular flex items-center justify-between">
+        <div className="gap-x-base flex items-center">
+          <div className="bg-grey-10 rounded-rounded w-xlarge h-xlarge flex items-center justify-center">
             <CoinsIcon size={20} className="text-grey-50" />
           </div>
-          <div className="flex items-center gap-x-xsmall">
+          <div className="gap-x-xsmall flex items-center">
             <p className="inter-base-semibold text-grey-90">
               {currency.code.toUpperCase()}
             </p>
             <p className="text-grey-50 inter-small-regular">{currency.name}</p>
           </div>
           {isDefault && (
-            <div className="bg-grey-10 rounded-rounded py-[2px] px-xsmall">
+            <div className="bg-grey-10 rounded-rounded px-xsmall py-[2px]">
               <p className="inter-small-semibold text-grey-50">Default</p>
             </div>
           )}
diff --git a/packages/admin-ui/ui/src/domain/settings/currencies/components/default-store-currency/default-currency-selector.tsx b/packages/admin-ui/ui/src/domain/settings/currencies/components/default-store-currency/default-currency-selector.tsx
index 1665599732..4bdee40d11 100644
--- a/packages/admin-ui/ui/src/domain/settings/currencies/components/default-store-currency/default-currency-selector.tsx
+++ b/packages/admin-ui/ui/src/domain/settings/currencies/components/default-store-currency/default-currency-selector.tsx
@@ -1,6 +1,6 @@
 import { Store } from "@medusajs/medusa"
 import { useAdminUpdateStore } from "medusa-react"
-import React, { useEffect, useMemo } from "react"
+import { useEffect, useMemo } from "react"
 import { Controller, useForm } from "react-hook-form"
 import { NextSelect } from "../../../../../components/molecules/select/next-select"
 import useNotification from "../../../../../hooks/use-notification"
@@ -16,11 +16,10 @@ type DefaultStoreCurrencyFormType = {
 }
 
 const DefaultCurrencySelector = ({ store }: Props) => {
-  const { reset, control, handleSubmit } = useForm<
-    DefaultStoreCurrencyFormType
-  >({
-    defaultValues: getDefaultValue(store),
-  })
+  const { reset, control, handleSubmit } =
+    useForm<DefaultStoreCurrencyFormType>({
+      defaultValues: getDefaultValue(store),
+    })
 
   const { mutate } = useAdminUpdateStore()
   const notification = useNotification()
diff --git a/packages/admin-ui/ui/src/domain/settings/currencies/components/default-store-currency/index.tsx b/packages/admin-ui/ui/src/domain/settings/currencies/components/default-store-currency/index.tsx
index 1fbc70b3e7..984517f811 100644
--- a/packages/admin-ui/ui/src/domain/settings/currencies/components/default-store-currency/index.tsx
+++ b/packages/admin-ui/ui/src/domain/settings/currencies/components/default-store-currency/index.tsx
@@ -1,5 +1,4 @@
 import { Store } from "@medusajs/medusa"
-import React from "react"
 import DefaultCurrencySelector from "./default-currency-selector"
 
 type Props = {
@@ -8,7 +7,7 @@ type Props = {
 
 const DefaultStoreCurrency = ({ store }: Props) => {
   return (
-    <div className="flex flex-col gap-y-large">
+    <div className="gap-y-large flex flex-col">
       <div>
         <h3 className="inter-large-semibold mb-2xsmall">
           Default store currency
diff --git a/packages/admin-ui/ui/src/domain/settings/currencies/components/store-currencies/add-currencies-screen.tsx b/packages/admin-ui/ui/src/domain/settings/currencies/components/store-currencies/add-currencies-screen.tsx
index f0c3d5a743..e5c67630d7 100644
--- a/packages/admin-ui/ui/src/domain/settings/currencies/components/store-currencies/add-currencies-screen.tsx
+++ b/packages/admin-ui/ui/src/domain/settings/currencies/components/store-currencies/add-currencies-screen.tsx
@@ -1,6 +1,6 @@
 import { Currency } from "@medusajs/medusa"
 import { useAdminCurrencies, useAdminUpdateStore } from "medusa-react"
-import React, { useContext, useEffect, useState } from "react"
+import React, { useContext, useState } from "react"
 import { usePagination, useRowSelect, useSortBy, useTable } from "react-table"
 import Button from "../../../../../components/fundamentals/button"
 import Modal from "../../../../../components/molecules/modal"
@@ -95,7 +95,7 @@ const AddCurrenciesScreen = () => {
         />
       </Modal.Content>
       <Modal.Footer>
-        <div className="w-full gap-x-xsmall flex items-center justify-end">
+        <div className="gap-x-xsmall flex w-full items-center justify-end">
           <Button variant="secondary" size="small" onClick={pop}>
             Cancel
           </Button>
diff --git a/packages/admin-ui/ui/src/domain/settings/currencies/components/store-currencies/current-currencies-screen.tsx b/packages/admin-ui/ui/src/domain/settings/currencies/components/store-currencies/current-currencies-screen.tsx
index fd76e87ed0..1a432eda91 100644
--- a/packages/admin-ui/ui/src/domain/settings/currencies/components/store-currencies/current-currencies-screen.tsx
+++ b/packages/admin-ui/ui/src/domain/settings/currencies/components/store-currencies/current-currencies-screen.tsx
@@ -1,7 +1,7 @@
 import { Currency } from "@medusajs/medusa"
 import clsx from "clsx"
 import { useAdminUpdateStore } from "medusa-react"
-import React, { useMemo, useState } from "react"
+import { useMemo, useState } from "react"
 import { usePagination, useRowSelect, useSortBy, useTable } from "react-table"
 import Button from "../../../../../components/fundamentals/button"
 import PlusIcon from "../../../../../components/fundamentals/icons/plus-icon"
@@ -101,7 +101,7 @@ const CurrentCurrenciesScreen = () => {
         />
       </Modal.Content>
       <Modal.Footer>
-        <div className="w-full justify-end flex items-center">
+        <div className="flex w-full items-center justify-end">
           <Button variant="primary" size="small" onClick={onClose}>
             Close
           </Button>
@@ -132,18 +132,18 @@ const TableActions = ({
   }
 
   return (
-    <div className="flex space-x-xsmall h-[34px] overflow-hidden">
+    <div className="space-x-xsmall flex h-[34px] overflow-hidden">
       <div className={clsx("transition-all duration-200", classes)}>
-        <div className="divide-x flex items-center h-[34px] mb-2">
-          <span className="mr-3 inter-small-regular text-grey-50">
+        <div className="mb-2 flex h-[34px] items-center divide-x">
+          <span className="inter-small-regular text-grey-50 mr-3">
             {numberOfSelectedRows} selected
           </span>
-          <div className="flex space-x-xsmall pl-3">
+          <div className="space-x-xsmall flex pl-3">
             <Button
               onClick={onDeselect}
               size="small"
               variant="ghost"
-              className="border border-grey-20"
+              className="border-grey-20 border"
             >
               Deselect
             </Button>
@@ -151,17 +151,17 @@ const TableActions = ({
               onClick={onRemove}
               size="small"
               variant="ghost"
-              className="border border-grey-20 text-rose-50"
+              className="border-grey-20 border text-rose-50"
             >
               Remove
             </Button>
           </div>
         </div>
-        <div className="flex justify-end h-[34px]">
+        <div className="flex h-[34px] justify-end">
           <Button
             size="small"
             variant="ghost"
-            className="border border-grey-20"
+            className="border-grey-20 border"
             onClick={() => push(screen)}
           >
             <PlusIcon size={20} /> Add Currencies
diff --git a/packages/admin-ui/ui/src/domain/settings/currencies/components/store-currencies/edit-currencies-modal.tsx b/packages/admin-ui/ui/src/domain/settings/currencies/components/store-currencies/edit-currencies-modal.tsx
index 8126d4c052..651c6fe2ce 100644
--- a/packages/admin-ui/ui/src/domain/settings/currencies/components/store-currencies/edit-currencies-modal.tsx
+++ b/packages/admin-ui/ui/src/domain/settings/currencies/components/store-currencies/edit-currencies-modal.tsx
@@ -1,5 +1,5 @@
 import { Store } from "@medusajs/medusa"
-import React, { createContext, useContext } from "react"
+import { createContext, useContext } from "react"
 import LayeredModal, {
   LayeredModalContext,
 } from "../../../../../components/molecules/modal/layered-modal"
@@ -16,9 +16,8 @@ type EditCurrenciesModalContextType = {
   store: Store
 }
 
-const EditCurrenciesModalContext = createContext<EditCurrenciesModalContextType | null>(
-  null
-)
+const EditCurrenciesModalContext =
+  createContext<EditCurrenciesModalContextType | null>(null)
 
 const EditCurrenciesModal = ({ store, open, onClose }: Props) => {
   const context = useContext(LayeredModalContext)
diff --git a/packages/admin-ui/ui/src/domain/settings/currencies/components/store-currencies/index.tsx b/packages/admin-ui/ui/src/domain/settings/currencies/components/store-currencies/index.tsx
index dab3279a7b..cd96a79c24 100644
--- a/packages/admin-ui/ui/src/domain/settings/currencies/components/store-currencies/index.tsx
+++ b/packages/admin-ui/ui/src/domain/settings/currencies/components/store-currencies/index.tsx
@@ -1,5 +1,4 @@
 import { Store } from "@medusajs/medusa"
-import React from "react"
 import Button from "../../../../../components/fundamentals/button"
 import useToggleState from "../../../../../hooks/use-toggle-state"
 import EditCurrenciesModal from "./edit-currencies-modal"
diff --git a/packages/admin-ui/ui/src/domain/settings/currencies/components/store-currencies/use-currency-table-columns.tsx b/packages/admin-ui/ui/src/domain/settings/currencies/components/store-currencies/use-currency-table-columns.tsx
index 308c282e23..03a8fab16d 100644
--- a/packages/admin-ui/ui/src/domain/settings/currencies/components/store-currencies/use-currency-table-columns.tsx
+++ b/packages/admin-ui/ui/src/domain/settings/currencies/components/store-currencies/use-currency-table-columns.tsx
@@ -1,5 +1,5 @@
 import { Currency } from "@medusajs/medusa"
-import React, { useMemo } from "react"
+import { useMemo } from "react"
 import { Column } from "react-table"
 import SortingIcon from "../../../../../components/fundamentals/icons/sorting-icon"
 import IndeterminateCheckbox from "../../../../../components/molecules/indeterminate-checkbox"
@@ -29,7 +29,7 @@ export const useCurrencyColumns = (): Column<Currency>[] => {
       },
       {
         Header: ({ column: { isSorted, isSortedDesc } }) => (
-          <div className="flex items-center gap-x-2xsmall">
+          <div className="gap-x-2xsmall flex items-center">
             <span>Name</span>
             <SortingIcon
               className="text-grey-40"
@@ -42,7 +42,7 @@ export const useCurrencyColumns = (): Column<Currency>[] => {
         accessor: "name",
         Cell: ({ row, value }) => {
           return (
-            <div className="flex items-center gap-x-xsmall inter-small-regular">
+            <div className="gap-x-xsmall inter-small-regular flex items-center">
               <span className="inter-small-semibold">
                 {row.original.code.toUpperCase()}
               </span>
diff --git a/packages/admin-ui/ui/src/domain/settings/details.tsx b/packages/admin-ui/ui/src/domain/settings/details.tsx
index fdd808af6c..63644d2513 100644
--- a/packages/admin-ui/ui/src/domain/settings/details.tsx
+++ b/packages/admin-ui/ui/src/domain/settings/details.tsx
@@ -1,6 +1,6 @@
 import { Store } from "@medusajs/medusa"
 import { useAdminStore, useAdminUpdateStore } from "medusa-react"
-import React, { useEffect } from "react"
+import { useEffect } from "react"
 import { useForm } from "react-hook-form"
 import BreadCrumb from "../../components/molecules/breadcrumb"
 import Input from "../../components/molecules/input"
diff --git a/packages/admin-ui/ui/src/domain/settings/personal-information/edit-user-information/edit-user-information-modal.tsx b/packages/admin-ui/ui/src/domain/settings/personal-information/edit-user-information/edit-user-information-modal.tsx
index 8ca86745d6..28e9cf3a36 100644
--- a/packages/admin-ui/ui/src/domain/settings/personal-information/edit-user-information/edit-user-information-modal.tsx
+++ b/packages/admin-ui/ui/src/domain/settings/personal-information/edit-user-information/edit-user-information-modal.tsx
@@ -1,6 +1,6 @@
 import { User } from "@medusajs/medusa"
 import { useAdminGetSession, useAdminUpdateUser } from "medusa-react"
-import React, { useEffect } from "react"
+import { useEffect } from "react"
 import { useForm } from "react-hook-form"
 import Button from "../../../../components/fundamentals/button"
 import InputField from "../../../../components/molecules/input"
@@ -63,8 +63,8 @@ const EditUserInformationModal = ({ user, open, onClose }: Props) => {
       </Modal.Header>
       <Modal.Body>
         <Modal.Content>
-          <div className="flex flex-col gap-y-base">
-            <div className="grid grid-cols-2 gap-x-base">
+          <div className="gap-y-base flex flex-col">
+            <div className="gap-x-base grid grid-cols-2">
               <InputField
                 {...register("first_name")}
                 errors={errors}
@@ -78,8 +78,8 @@ const EditUserInformationModal = ({ user, open, onClose }: Props) => {
             </div>
           </div>
         </Modal.Content>
-        <Modal.Footer className="border-t border-grey-20 pt-base">
-          <div className="flex items-center justify-end gap-x-xsmall w-full">
+        <Modal.Footer className="border-grey-20 pt-base border-t">
+          <div className="gap-x-xsmall flex w-full items-center justify-end">
             <Button variant="secondary" size="small" onClick={onClose}>
               Cancel
             </Button>
diff --git a/packages/admin-ui/ui/src/domain/settings/personal-information/edit-user-information/index.tsx b/packages/admin-ui/ui/src/domain/settings/personal-information/edit-user-information/index.tsx
index 8bc3fb9071..a3af9045a5 100644
--- a/packages/admin-ui/ui/src/domain/settings/personal-information/edit-user-information/index.tsx
+++ b/packages/admin-ui/ui/src/domain/settings/personal-information/edit-user-information/index.tsx
@@ -1,5 +1,5 @@
 import { User } from "@medusajs/medusa"
-import React, { useMemo } from "react"
+import { useMemo } from "react"
 import Avatar from "../../../../components/atoms/avatar"
 import Button from "../../../../components/fundamentals/button"
 import useToggleState from "../../../../hooks/use-toggle-state"
@@ -21,10 +21,10 @@ const EditUserInformation = ({ user }: Props) => {
   return (
     <>
       <div className="flex items-center justify-between">
-        <div className="flex items-center gap-x-base">
-          <div className="w-18 aspect-square rounded-full border border-grey-20 flex items-center justify-center box-border">
+        <div className="gap-x-base flex items-center">
+          <div className="w-18 border-grey-20 box-border flex aspect-square items-center justify-center rounded-full border">
             {user ? (
-              <div className="w-16 aspect-square">
+              <div className="aspect-square w-16">
                 <Avatar
                   user={{ ...user }}
                   color="bg-teal-40"
@@ -32,11 +32,11 @@ const EditUserInformation = ({ user }: Props) => {
                 />
               </div>
             ) : (
-              <div className="w-16 aspect-square animate-pulse bg-teal-40 rounded-full" />
+              <div className="bg-teal-40 aspect-square w-16 animate-pulse rounded-full" />
             )}
           </div>
           <div className="flex flex-col">
-            {!!name ? (
+            {name ? (
               <>
                 <p className="inter-base-semibold">{name}</p>
                 <p className="inter-base-regular text-grey-50">{user?.email}</p>
diff --git a/packages/admin-ui/ui/src/domain/settings/personal-information/usage-insights/index.tsx b/packages/admin-ui/ui/src/domain/settings/personal-information/usage-insights/index.tsx
index 9f121dad53..c88164b3ad 100644
--- a/packages/admin-ui/ui/src/domain/settings/personal-information/usage-insights/index.tsx
+++ b/packages/admin-ui/ui/src/domain/settings/personal-information/usage-insights/index.tsx
@@ -1,5 +1,4 @@
 import { User } from "@medusajs/medusa"
-import React from "react"
 import Badge from "../../../../components/fundamentals/badge"
 import Button from "../../../../components/fundamentals/button"
 import useToggleState from "../../../../hooks/use-toggle-state"
@@ -17,11 +16,11 @@ const UsageInsights = ({ user }: Props) => {
   return (
     <>
       <div className="flex items-center justify-between">
-        <div className="flex flex-col gap-y-2xsmall">
-          <div className="flex items-center gap-x-xsmall">
+        <div className="gap-y-2xsmall flex flex-col">
+          <div className="gap-x-xsmall flex items-center">
             <h2 className="inter-base-semibold">Usage insights</h2>
             {isLoading ? (
-              <div className="badge bg-grey-10 animate-pulse w-16 h-large" />
+              <div className="badge bg-grey-10 h-large w-16 animate-pulse" />
             ) : !analytics_config || analytics_config?.opt_out ? (
               <Badge variant="disabled">Disabled</Badge>
             ) : (
diff --git a/packages/admin-ui/ui/src/domain/settings/personal-information/usage-insights/usage-insights-modal.tsx b/packages/admin-ui/ui/src/domain/settings/personal-information/usage-insights/usage-insights-modal.tsx
index 5f3b5c41e8..a65214e044 100644
--- a/packages/admin-ui/ui/src/domain/settings/personal-information/usage-insights/usage-insights-modal.tsx
+++ b/packages/admin-ui/ui/src/domain/settings/personal-information/usage-insights/usage-insights-modal.tsx
@@ -1,5 +1,5 @@
 import { AnalyticsConfig } from "@medusajs/medusa"
-import React, { useEffect } from "react"
+import { useEffect } from "react"
 import { useForm } from "react-hook-form"
 import Button from "../../../../components/fundamentals/button"
 import Modal from "../../../../components/molecules/modal"
@@ -64,8 +64,8 @@ const UsageInsightsModal = ({ config, open, onClose }: Props) => {
         <Modal.Content>
           <AnalyticsConfigForm form={nestedForm(form)} />
         </Modal.Content>
-        <Modal.Footer className="border-t border-grey-20 pt-base">
-          <div className="flex items-center justify-end gap-x-xsmall w-full">
+        <Modal.Footer className="border-grey-20 pt-base border-t">
+          <div className="gap-x-xsmall flex w-full items-center justify-end">
             <Button variant="secondary" size="small" onClick={onClose}>
               Cancel
             </Button>
diff --git a/packages/admin-ui/ui/src/domain/settings/regions/components/region-form/region-details-form.tsx b/packages/admin-ui/ui/src/domain/settings/regions/components/region-form/region-details-form.tsx
index 385c14a8ae..fc7d4c80c1 100644
--- a/packages/admin-ui/ui/src/domain/settings/regions/components/region-form/region-details-form.tsx
+++ b/packages/admin-ui/ui/src/domain/settings/regions/components/region-form/region-details-form.tsx
@@ -33,7 +33,7 @@ const RegionDetailsForm = ({ form, isCreate = false }: Props) => {
 
   return (
     <div>
-      <div className="grid grid-cols-2 gap-large">
+      <div className="gap-large grid grid-cols-2">
         <InputField
           label="Title"
           placeholder="Europe"
@@ -114,7 +114,7 @@ const RegionDetailsForm = ({ form, isCreate = false }: Props) => {
       </div>
       <FeatureToggle featureFlag="tax_inclusive_pricing">
         <div className="mt-xlarge flex items-start justify-between">
-          <div className="flex flex-col gap-y-2xsmall">
+          <div className="gap-y-2xsmall flex flex-col">
             <h3 className="inter-base-semibold">Tax inclusive prices</h3>
             <p className="inter-base-regular text-grey-50">
               When enabled region prices will be tax inclusive.
diff --git a/packages/admin-ui/ui/src/domain/settings/regions/components/region-form/region-providers-form.tsx b/packages/admin-ui/ui/src/domain/settings/regions/components/region-form/region-providers-form.tsx
index 758053272c..9bc10f271b 100644
--- a/packages/admin-ui/ui/src/domain/settings/regions/components/region-form/region-providers-form.tsx
+++ b/packages/admin-ui/ui/src/domain/settings/regions/components/region-form/region-providers-form.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import { Controller } from "react-hook-form"
 import { NextSelect } from "../../../../../components/molecules/select/next-select"
 import { Option } from "../../../../../types/shared"
@@ -23,7 +22,7 @@ const RegionProvidersForm = ({ form }: Props) => {
   const { fulfillmentProviderOptions, paymentProviderOptions } = useStoreData()
 
   return (
-    <div className="grid grid-cols-2 gap-large">
+    <div className="gap-large grid grid-cols-2">
       <Controller
         control={control}
         name={path("payment_providers")}
diff --git a/packages/admin-ui/ui/src/domain/settings/regions/components/shipping-option-card/edit-modal.tsx b/packages/admin-ui/ui/src/domain/settings/regions/components/shipping-option-card/edit-modal.tsx
index a49f45e4c4..f8b648e12a 100644
--- a/packages/admin-ui/ui/src/domain/settings/regions/components/shipping-option-card/edit-modal.tsx
+++ b/packages/admin-ui/ui/src/domain/settings/regions/components/shipping-option-card/edit-modal.tsx
@@ -1,6 +1,6 @@
 import { ShippingOption } from "@medusajs/medusa"
 import { useAdminUpdateShippingOption } from "medusa-react"
-import React, { useEffect } from "react"
+import { useEffect } from "react"
 import { useForm } from "react-hook-form"
 import Button from "../../../../../components/fundamentals/button"
 import Modal from "../../../../../components/molecules/modal"
@@ -75,7 +75,7 @@ const EditModal = ({ open, onClose, option }: Props) => {
                 {option.data.id} via {option.provider_id}
               </p>
             </div>
-            <div className="w-full h-px bg-grey-20 my-xlarge" />
+            <div className="bg-grey-20 my-xlarge h-px w-full" />
             <ShippingOptionForm
               form={form}
               region={option.region}
@@ -83,7 +83,7 @@ const EditModal = ({ open, onClose, option }: Props) => {
             />
           </Modal.Content>
           <Modal.Footer>
-            <div className="flex items-center gap-x-xsmall justify-end w-full">
+            <div className="gap-x-xsmall flex w-full items-center justify-end">
               <Button variant="secondary" size="small" onClick={closeAndReset}>
                 Cancel
               </Button>
diff --git a/packages/admin-ui/ui/src/domain/settings/regions/components/shipping-option-card/index.tsx b/packages/admin-ui/ui/src/domain/settings/regions/components/shipping-option-card/index.tsx
index c5f81b205b..98181daac1 100644
--- a/packages/admin-ui/ui/src/domain/settings/regions/components/shipping-option-card/index.tsx
+++ b/packages/admin-ui/ui/src/domain/settings/regions/components/shipping-option-card/index.tsx
@@ -1,7 +1,6 @@
 import { ShippingOption } from "@medusajs/medusa"
 import clsx from "clsx"
 import { useAdminDeleteShippingOption } from "medusa-react"
-import React from "react"
 import EditIcon from "../../../../../components/fundamentals/icons/edit-icon"
 import FastDeliveryIcon from "../../../../../components/fundamentals/icons/fast-delivery-icon"
 import TrashIcon from "../../../../../components/fundamentals/icons/trash-icon"
@@ -40,9 +39,9 @@ const ShippingOptionCard = ({ option }: Props) => {
 
   return (
     <>
-      <div className="bg-grey-0 rounded-rounded border border-grey-20 p-base flex items-center justify-between">
-        <div className="flex items-center gap-x-base">
-          <div className="bg-grey-10 p-2.5 rounded-rounded flex items-center justify-center h-10 w-10">
+      <div className="bg-grey-0 rounded-rounded border-grey-20 p-base flex items-center justify-between border">
+        <div className="gap-x-base flex items-center">
+          <div className="bg-grey-10 rounded-rounded flex h-10 w-10 items-center justify-center p-2.5">
             <FastDeliveryIcon size={20} className="text-grey-50" />
           </div>
           <div>
@@ -75,9 +74,9 @@ const ShippingOptionCard = ({ option }: Props) => {
             </div>
           </div>
         </div>
-        <div className="flex items-center gap-x-base">
+        <div className="gap-x-base flex items-center">
           <div
-            className={clsx("py-0.5 px-xsmall rounded-rounded", {
+            className={clsx("px-xsmall rounded-rounded py-0.5", {
               "bg-grey-10 text-grey-50": option.admin_only,
               "bg-emerald-10 text-emerald-50": !option.admin_only,
             })}
diff --git a/packages/admin-ui/ui/src/domain/settings/regions/components/shipping-option-form/index.tsx b/packages/admin-ui/ui/src/domain/settings/regions/components/shipping-option-form/index.tsx
index c39c16e178..31e1369239 100644
--- a/packages/admin-ui/ui/src/domain/settings/regions/components/shipping-option-form/index.tsx
+++ b/packages/admin-ui/ui/src/domain/settings/regions/components/shipping-option-form/index.tsx
@@ -48,7 +48,7 @@ const ShippingOptionForm = ({ form, region, isEdit = false }: Props) => {
   return (
     <div>
       <div>
-        <div className="flex flex-col gap-y-2xsmall">
+        <div className="gap-y-2xsmall flex flex-col">
           <div className="flex items-center justify-between">
             <h3 className="inter-base-semibold mb-2xsmall">Visible in store</h3>
             <Controller
@@ -64,10 +64,10 @@ const ShippingOptionForm = ({ form, region, isEdit = false }: Props) => {
           </p>
         </div>
       </div>
-      <div className="h-px w-full bg-grey-20 my-xlarge" />
+      <div className="bg-grey-20 my-xlarge h-px w-full" />
       <div>
         <h3 className="inter-base-semibold mb-base">Details</h3>
-        <div className="grid grid-cols-2 gap-large">
+        <div className="gap-large grid grid-cols-2">
           <InputField
             label="Title"
             required
@@ -78,7 +78,7 @@ const ShippingOptionForm = ({ form, region, isEdit = false }: Props) => {
             })}
             errors={errors}
           />
-          <div className="flex items-center gap-large">
+          <div className="gap-large flex items-center">
             <Controller
               control={control}
               name="price_type"
@@ -178,10 +178,10 @@ const ShippingOptionForm = ({ form, region, isEdit = false }: Props) => {
           )}
         </div>
       </div>
-      <div className="h-px w-full bg-grey-20 my-xlarge" />
+      <div className="bg-grey-20 my-xlarge h-px w-full" />
       <div>
         <h3 className="inter-base-semibold mb-base">Requirements</h3>
-        <div className="grid grid-cols-2 gap-large">
+        <div className="gap-large grid grid-cols-2">
           <Controller
             control={control}
             name="requirements.min_subtotal.amount"
diff --git a/packages/admin-ui/ui/src/domain/settings/regions/edit/general-section/index.tsx b/packages/admin-ui/ui/src/domain/settings/regions/edit/general-section/index.tsx
index b247aec674..356a1811d9 100644
--- a/packages/admin-ui/ui/src/domain/settings/regions/edit/general-section/index.tsx
+++ b/packages/admin-ui/ui/src/domain/settings/regions/edit/general-section/index.tsx
@@ -68,11 +68,11 @@ const GeneralSection = ({ region }: Props) => {
           },
         ]}
       >
-        <div className="flex flex-col gap-y-xsmall mt-large">
+        <div className="gap-y-xsmall mt-large flex flex-col">
           <h2 className="inter-large-semibold">Details</h2>
-          <div className="flex flex-col gap-y-xsmall">
+          <div className="gap-y-xsmall flex flex-col">
             <RegionDetail title={"Currency"}>
-              <div className="flex items-center gap-x-xsmall">
+              <div className="gap-x-xsmall flex items-center">
                 <span className="inter-base-semibold text-grey-90">
                   {region.currency_code.toUpperCase()}
                 </span>
@@ -84,7 +84,7 @@ const GeneralSection = ({ region }: Props) => {
             <RegionDetail title={"Countries"}>
               <div>
                 {region.countries && region.countries.length ? (
-                  <div className="flex items-center gap-x-xsmall">
+                  <div className="gap-x-xsmall flex items-center">
                     <p>
                       {region.countries
                         .slice(0, 4)
@@ -116,7 +116,7 @@ const GeneralSection = ({ region }: Props) => {
             <RegionDetail title={"Payment providers"}>
               <div>
                 {region.payment_providers && region.payment_providers.length ? (
-                  <div className="flex items-center gap-x-xsmall">
+                  <div className="gap-x-xsmall flex items-center">
                     <p>
                       {region.payment_providers
                         .slice(0, 4)
@@ -152,7 +152,7 @@ const GeneralSection = ({ region }: Props) => {
             <RegionDetail title={"Fulfillment providers"}>
               <div>
                 {region.payment_providers && region.payment_providers.length ? (
-                  <div className="flex items-center gap-x-xsmall">
+                  <div className="gap-x-xsmall flex items-center">
                     <p>
                       {region.fulfillment_providers
                         .slice(0, 4)
@@ -200,7 +200,7 @@ type DetailProps = {
 
 const RegionDetail = ({ title, children }: DetailProps) => {
   return (
-    <div className="flex items-center justify-between inter-base-regular text-grey-50">
+    <div className="inter-base-regular text-grey-50 flex items-center justify-between">
       <p>{title}</p>
       {children}
     </div>
diff --git a/packages/admin-ui/ui/src/domain/settings/regions/edit/index.tsx b/packages/admin-ui/ui/src/domain/settings/regions/edit/index.tsx
index 6e0502d426..e09056d640 100644
--- a/packages/admin-ui/ui/src/domain/settings/regions/edit/index.tsx
+++ b/packages/admin-ui/ui/src/domain/settings/regions/edit/index.tsx
@@ -1,5 +1,4 @@
 import { useAdminRegion } from "medusa-react"
-import React from "react"
 import Spinner from "../../../../components/atoms/spinner"
 import GeneralSection from "./general-section"
 import ReturnShippingOptions from "./return-shipping-options"
@@ -16,7 +15,7 @@ const EditRegion = ({ id }: Props) => {
 
   if (isLoading) {
     return (
-      <div className="h-full w-full flex items-center justify-center">
+      <div className="flex h-full w-full items-center justify-center">
         <Spinner variant="secondary" />
       </div>
     )
@@ -24,7 +23,7 @@ const EditRegion = ({ id }: Props) => {
 
   if (isError) {
     return (
-      <div className="bg-grey-0 rounded-rounded border border-grey-20 flex flex-col gap-y-xsmall items-center justify-center w-full h-full text-center ">
+      <div className="bg-grey-0 rounded-rounded border-grey-20 gap-y-xsmall flex h-full w-full flex-col items-center justify-center border text-center ">
         <h1 className="inter-large-semibold">Something went wrong...</h1>
         <p className="inter-base-regular text-grey-50">
           We can't find a region with that ID, use the menu to the left to
@@ -39,7 +38,7 @@ const EditRegion = ({ id }: Props) => {
   }
 
   return (
-    <div className="flex flex-col gap-y-xsmall">
+    <div className="gap-y-xsmall flex flex-col">
       <GeneralSection region={region} />
       <ShippingOptions region={region} />
       <ReturnShippingOptions region={region} />
diff --git a/packages/admin-ui/ui/src/domain/settings/regions/edit/return-shipping-options/create-return-shipping-option.modal.tsx b/packages/admin-ui/ui/src/domain/settings/regions/edit/return-shipping-options/create-return-shipping-option.modal.tsx
index b76fd32d6a..893f16fe6c 100644
--- a/packages/admin-ui/ui/src/domain/settings/regions/edit/return-shipping-options/create-return-shipping-option.modal.tsx
+++ b/packages/admin-ui/ui/src/domain/settings/regions/edit/return-shipping-options/create-return-shipping-option.modal.tsx
@@ -1,6 +1,5 @@
 import { Region } from "@medusajs/medusa"
 import { useAdminCreateShippingOption } from "medusa-react"
-import React from "react"
 import { useForm } from "react-hook-form"
 import Button from "../../../../../components/fundamentals/button"
 import Modal from "../../../../../components/molecules/modal"
@@ -76,7 +75,7 @@ const CreateReturnShippingOptionModal = ({ open, onClose, region }: Props) => {
             <ShippingOptionForm form={form} region={region} />
           </Modal.Content>
           <Modal.Footer>
-            <div className="w-full flex items-center gap-x-xsmall justify-end">
+            <div className="gap-x-xsmall flex w-full items-center justify-end">
               <Button
                 variant="secondary"
                 size="small"
diff --git a/packages/admin-ui/ui/src/domain/settings/regions/edit/return-shipping-options/index.tsx b/packages/admin-ui/ui/src/domain/settings/regions/edit/return-shipping-options/index.tsx
index e09cb188d8..c8e71e4bf2 100644
--- a/packages/admin-ui/ui/src/domain/settings/regions/edit/return-shipping-options/index.tsx
+++ b/packages/admin-ui/ui/src/domain/settings/regions/edit/return-shipping-options/index.tsx
@@ -1,6 +1,5 @@
 import { Region } from "@medusajs/medusa"
 import { useAdminShippingOptions } from "medusa-react"
-import React from "react"
 import Section from "../../../../../components/organisms/section"
 import useToggleState from "../../../../../hooks/use-toggle-state"
 import ShippingOptionCard from "../../components/shipping-option-card"
@@ -29,11 +28,11 @@ const ReturnShippingOptions = ({ region }: Props) => {
           },
         ]}
       >
-        <div className="flex flex-col gap-y-large">
+        <div className="gap-y-large flex flex-col">
           <p className="inter-base-regular text-grey-50">
             Enter specifics about available regional return shipment methods.
           </p>
-          <div className="flex flex-col gap-y-small">
+          <div className="gap-y-small flex flex-col">
             {returnShippingOptions?.map((option) => {
               return <ShippingOptionCard option={option} key={option.id} />
             })}
diff --git a/packages/admin-ui/ui/src/domain/settings/regions/edit/shipping-options/create-shipping-option-modal.tsx b/packages/admin-ui/ui/src/domain/settings/regions/edit/shipping-options/create-shipping-option-modal.tsx
index 85b4d852cf..9cffffe95f 100644
--- a/packages/admin-ui/ui/src/domain/settings/regions/edit/shipping-options/create-shipping-option-modal.tsx
+++ b/packages/admin-ui/ui/src/domain/settings/regions/edit/shipping-options/create-shipping-option-modal.tsx
@@ -1,6 +1,5 @@
 import { Region } from "@medusajs/medusa"
 import { useAdminCreateShippingOption } from "medusa-react"
-import React from "react"
 import { useForm } from "react-hook-form"
 import Button from "../../../../../components/fundamentals/button"
 import Modal from "../../../../../components/molecules/modal"
@@ -76,7 +75,7 @@ const CreateShippingOptionModal = ({ open, onClose, region }: Props) => {
             <ShippingOptionForm form={form} region={region} />
           </Modal.Content>
           <Modal.Footer>
-            <div className="w-full flex items-center gap-x-xsmall justify-end">
+            <div className="gap-x-xsmall flex w-full items-center justify-end">
               <Button
                 variant="secondary"
                 size="small"
diff --git a/packages/admin-ui/ui/src/domain/settings/regions/edit/shipping-options/index.tsx b/packages/admin-ui/ui/src/domain/settings/regions/edit/shipping-options/index.tsx
index 7e4ff5ae55..658e7bed8b 100644
--- a/packages/admin-ui/ui/src/domain/settings/regions/edit/shipping-options/index.tsx
+++ b/packages/admin-ui/ui/src/domain/settings/regions/edit/shipping-options/index.tsx
@@ -1,6 +1,5 @@
 import { Region } from "@medusajs/medusa"
 import { useAdminShippingOptions } from "medusa-react"
-import React from "react"
 import Section from "../../../../../components/organisms/section"
 import useToggleState from "../../../../../hooks/use-toggle-state"
 import ShippingOptionCard from "../../components/shipping-option-card"
@@ -29,11 +28,11 @@ const ShippingOptions = ({ region }: Props) => {
           },
         ]}
       >
-        <div className="flex flex-col gap-y-large">
+        <div className="gap-y-large flex flex-col">
           <p className="inter-base-regular text-grey-50">
             Enter specifics about available regional shipment methods.
           </p>
-          <div className="flex flex-col gap-y-small">
+          <div className="gap-y-small flex flex-col">
             {shippingOptions?.map((option) => {
               return <ShippingOptionCard option={option} key={option.id} />
             })}
diff --git a/packages/admin-ui/ui/src/domain/settings/regions/index.tsx b/packages/admin-ui/ui/src/domain/settings/regions/index.tsx
index 7d951d31b6..a2b75bb82c 100644
--- a/packages/admin-ui/ui/src/domain/settings/regions/index.tsx
+++ b/packages/admin-ui/ui/src/domain/settings/regions/index.tsx
@@ -8,10 +8,10 @@ const Regions = () => {
   const regId: string | undefined = params["*"]
 
   return (
-    <div className="flex flex-col gap-y-xsmall h-full">
+    <div className="gap-y-xsmall flex h-full flex-col">
       <BackButton label="Back to Settings" path="/a/settings" />
-      <div className="grid grid-cols-1 medium:grid-cols-3 gap-xsmall pb-xlarge">
-        <div className="w-full h-full">
+      <div className="medium:grid-cols-3 gap-xsmall pb-xlarge grid grid-cols-1">
+        <div className="h-full w-full">
           <RegionOverview id={regId} />
         </div>
         <div className="col-span-2">
diff --git a/packages/admin-ui/ui/src/domain/settings/regions/region-overview/region-card.tsx b/packages/admin-ui/ui/src/domain/settings/regions/region-overview/region-card.tsx
index 489ad0d0d0..4e3b719dc2 100644
--- a/packages/admin-ui/ui/src/domain/settings/regions/region-overview/region-card.tsx
+++ b/packages/admin-ui/ui/src/domain/settings/regions/region-overview/region-card.tsx
@@ -1,5 +1,4 @@
 import { Region } from "@medusajs/medusa"
-import React from "react"
 import RadioGroup from "../../../../components/organisms/radio-group"
 import fulfillmentProvidersMapper from "../../../../utils/fulfillment-providers.mapper"
 import paymentProvidersMapper from "../../../../utils/payment-providers-mapper"
@@ -19,7 +18,7 @@ const RegionCard = ({ region }: Props) => {
           : undefined
       }
     >
-      <div className="flex flex-col gap-y-2xsmall inter-small-regular text-grey-50">
+      <div className="gap-y-2xsmall inter-small-regular text-grey-50 flex flex-col">
         <p>
           Payment providers:{" "}
           <span className="truncate">
diff --git a/packages/admin-ui/ui/src/domain/settings/return-reasons/create-reason-modal.tsx b/packages/admin-ui/ui/src/domain/settings/return-reasons/create-reason-modal.tsx
index 6346e840e2..47007ff2e6 100644
--- a/packages/admin-ui/ui/src/domain/settings/return-reasons/create-reason-modal.tsx
+++ b/packages/admin-ui/ui/src/domain/settings/return-reasons/create-reason-modal.tsx
@@ -1,6 +1,5 @@
 import { ReturnReason } from "@medusajs/medusa"
 import { useAdminCreateReturnReason } from "medusa-react"
-import React from "react"
 import { useForm } from "react-hook-form"
 import Button from "../../../components/fundamentals/button"
 import Input from "../../../components/molecules/input"
@@ -69,7 +68,7 @@ const CreateReturnReasonModal = ({
         </Modal.Header>
         <form onSubmit={handleSubmit(onCreate)}>
           <Modal.Content>
-            <div className="grid grid-cols-2 gap-large mb-large">
+            <div className="gap-large mb-large grid grid-cols-2">
               <Input
                 {...register("value", {
                   required: "Value is required",
@@ -103,10 +102,10 @@ const CreateReturnReasonModal = ({
             />
           </Modal.Content>
           <Modal.Footer>
-            <div className="flex w-full h-8 justify-end">
+            <div className="flex h-8 w-full justify-end">
               <Button
                 variant="ghost"
-                className="mr-2 w-32 text-small justify-center"
+                className="text-small mr-2 w-32 justify-center"
                 size="large"
                 onClick={handleClose}
                 type="button"
@@ -117,7 +116,7 @@ const CreateReturnReasonModal = ({
                 loading={isLoading}
                 disabled={isLoading}
                 size="large"
-                className="w-32 text-small justify-center"
+                className="text-small w-32 justify-center"
                 variant="primary"
               >
                 Create
diff --git a/packages/admin-ui/ui/src/domain/settings/return-reasons/detail.tsx b/packages/admin-ui/ui/src/domain/settings/return-reasons/detail.tsx
index 02a85bd993..0d376f52cc 100644
--- a/packages/admin-ui/ui/src/domain/settings/return-reasons/detail.tsx
+++ b/packages/admin-ui/ui/src/domain/settings/return-reasons/detail.tsx
@@ -3,7 +3,7 @@ import {
   useAdminDeleteReturnReason,
   useAdminUpdateReturnReason,
 } from "medusa-react"
-import React, { useEffect } from "react"
+import { useEffect } from "react"
 import { useForm } from "react-hook-form"
 import DuplicateIcon from "../../../components/fundamentals/icons/duplicate-icon"
 import TrashIcon from "../../../components/fundamentals/icons/trash-icon"
@@ -35,9 +35,8 @@ const ReturnReasonDetail = ({ reason }: ReturnReasonDetailsProps) => {
     open: handleOpenPrompt,
     close: handleClosePrompt,
   } = useToggleState()
-  const { register, reset, handleSubmit } = useForm<
-    ReturnReasonDetailsFormData
-  >()
+  const { register, reset, handleSubmit } =
+    useForm<ReturnReasonDetailsFormData>()
   const notification = useNotification()
   const { mutate: deleteRR } = useAdminDeleteReturnReason(reason?.id)
   const { mutate: update } = useAdminUpdateReturnReason(reason?.id)
diff --git a/packages/admin-ui/ui/src/domain/settings/return-reasons/index.tsx b/packages/admin-ui/ui/src/domain/settings/return-reasons/index.tsx
index b80be7f24f..b93c3f2af6 100644
--- a/packages/admin-ui/ui/src/domain/settings/return-reasons/index.tsx
+++ b/packages/admin-ui/ui/src/domain/settings/return-reasons/index.tsx
@@ -1,5 +1,5 @@
 import { useAdminReturnReasons } from "medusa-react"
-import React, { useState } from "react"
+import { useState } from "react"
 import Spinner from "../../../components/atoms/spinner"
 import PlusIcon from "../../../components/fundamentals/icons/plus-icon"
 import BreadCrumb from "../../../components/molecules/breadcrumb"
diff --git a/packages/admin-ui/ui/src/domain/settings/taxes/details.tsx b/packages/admin-ui/ui/src/domain/settings/taxes/details.tsx
index c63cf09a12..5836198103 100644
--- a/packages/admin-ui/ui/src/domain/settings/taxes/details.tsx
+++ b/packages/admin-ui/ui/src/domain/settings/taxes/details.tsx
@@ -113,7 +113,7 @@ const TaxDetails = ({ id }) => {
             ))}
           </Table.Head>
           {regionIsLoading || taxRatesLoading ? (
-            <div className="flex w-full h-full absolute items-center justify-center mt-10">
+            <div className="absolute mt-10 flex h-full w-full items-center justify-center">
               <div className="">
                 <Spinner size={"large"} variant={"secondary"} />
               </div>
diff --git a/packages/admin-ui/ui/src/domain/settings/taxes/edit-form.tsx b/packages/admin-ui/ui/src/domain/settings/taxes/edit-form.tsx
index be5b3bb407..4a0698246d 100644
--- a/packages/admin-ui/ui/src/domain/settings/taxes/edit-form.tsx
+++ b/packages/admin-ui/ui/src/domain/settings/taxes/edit-form.tsx
@@ -1,6 +1,6 @@
 import { AdminPostTaxRatesTaxRateReq, TaxRate } from "@medusajs/medusa"
 import { useAdminUpdateRegion, useAdminUpdateTaxRate } from "medusa-react"
-import React, { useEffect, useState } from "react"
+import { useEffect, useState } from "react"
 import { useForm } from "react-hook-form"
 import Button from "../../../components/fundamentals/button"
 import PlusIcon from "../../../components/fundamentals/icons/plus-icon"
@@ -124,7 +124,7 @@ const EditTaxRate = ({
           {(product_types.length > 0 ||
             products.length > 0 ||
             shipping_options.length > 0) && (
-            <div className="flex flex-col gap-base">
+            <div className="gap-base flex flex-col">
               {products.length > 0 && (
                 <TaxRuleItem
                   onDelete={() =>
@@ -224,7 +224,7 @@ const EditTaxRate = ({
                   )
                 )
               }}
-              className="w-full mt-base"
+              className="mt-base w-full"
               size="medium"
               variant="secondary"
             >
@@ -234,7 +234,7 @@ const EditTaxRate = ({
         </div>
       </Modal.Content>
       <Modal.Footer>
-        <div className="flex items-center justify-end w-full">
+        <div className="flex w-full items-center justify-end">
           <Button
             type="button"
             onClick={onDismiss}
@@ -325,7 +325,7 @@ export const SimpleEditForm = ({ onDismiss, taxRate }: SimpleEditFormProps) => {
         <EditTaxRateDetails form={nestedForm(form, "details")} lockName />
       </Modal.Content>
       <Modal.Footer>
-        <div className="flex items-center justify-end w-full">
+        <div className="flex w-full items-center justify-end">
           <Button
             type="button"
             onClick={onDismiss}
diff --git a/packages/admin-ui/ui/src/domain/settings/taxes/edit-tax-rate-details.tsx b/packages/admin-ui/ui/src/domain/settings/taxes/edit-tax-rate-details.tsx
index 7c77466930..5983fe8076 100644
--- a/packages/admin-ui/ui/src/domain/settings/taxes/edit-tax-rate-details.tsx
+++ b/packages/admin-ui/ui/src/domain/settings/taxes/edit-tax-rate-details.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import LockIcon from "../../../components/fundamentals/icons/lock-icon"
 import Input from "../../../components/molecules/input"
 import FormValidator from "../../../utils/form-validator"
@@ -39,7 +38,7 @@ export const EditTaxRateDetails = ({
           required: !lockName ? FormValidator.required("Name") : undefined,
         })}
         required={!lockName}
-        className="mb-base min-w-[335px] w-full"
+        className="mb-base w-full min-w-[335px]"
         errors={errors}
       />
       <Input
@@ -58,7 +57,7 @@ export const EditTaxRateDetails = ({
           valueAsNumber: true,
         })}
         required
-        className="mb-base min-w-[335px] w-full"
+        className="mb-base w-full min-w-[335px]"
         errors={errors}
       />
       <Input
@@ -68,7 +67,7 @@ export const EditTaxRateDetails = ({
           required: FormValidator.required("Tax Code"),
         })}
         required
-        className="mb-base min-w-[335px] w-full"
+        className="mb-base w-full min-w-[335px]"
         errors={errors}
       />
     </div>
diff --git a/packages/admin-ui/ui/src/domain/settings/taxes/edit.tsx b/packages/admin-ui/ui/src/domain/settings/taxes/edit.tsx
index 99f3836825..3500d253dd 100644
--- a/packages/admin-ui/ui/src/domain/settings/taxes/edit.tsx
+++ b/packages/admin-ui/ui/src/domain/settings/taxes/edit.tsx
@@ -1,5 +1,5 @@
 import { useAdminTaxRate } from "medusa-react"
-import React, { useContext } from "react"
+import { useContext } from "react"
 import Spinner from "../../../components/atoms/spinner"
 import Modal from "../../../components/molecules/modal"
 import LayeredModal, {
diff --git a/packages/admin-ui/ui/src/domain/settings/taxes/index.tsx b/packages/admin-ui/ui/src/domain/settings/taxes/index.tsx
index c4068b78c8..110ed8d9b7 100644
--- a/packages/admin-ui/ui/src/domain/settings/taxes/index.tsx
+++ b/packages/admin-ui/ui/src/domain/settings/taxes/index.tsx
@@ -45,7 +45,7 @@ const Taxes = () => {
             ]}
           >
             {isLoading || !regions ? (
-              <div className="flex-grow h-full flex items-center justify-center">
+              <div className="flex h-full flex-grow items-center justify-center">
                 <Spinner size="large" variant="secondary" />
               </div>
             ) : (
diff --git a/packages/admin-ui/ui/src/domain/settings/taxes/new.tsx b/packages/admin-ui/ui/src/domain/settings/taxes/new.tsx
index a780ab0eb3..872e962882 100644
--- a/packages/admin-ui/ui/src/domain/settings/taxes/new.tsx
+++ b/packages/admin-ui/ui/src/domain/settings/taxes/new.tsx
@@ -1,5 +1,5 @@
 import { useAdminCreateTaxRate } from "medusa-react"
-import React, { useContext } from "react"
+import { useContext } from "react"
 import { useForm } from "react-hook-form"
 import Button from "../../../components/fundamentals/button"
 import PlusIcon from "../../../components/fundamentals/icons/plus-icon"
@@ -108,7 +108,7 @@ const NewTaxRate = ({ regionId, onDismiss }: NewTaxRateProps) => {
               {(product_types.length > 0 ||
                 products.length > 0 ||
                 shipping_options.length > 0) && (
-                <div className="flex flex-col gap-base">
+                <div className="gap-base flex flex-col">
                   {products.length > 0 && (
                     <TaxRuleItem
                       onDelete={() =>
@@ -210,7 +210,7 @@ const NewTaxRate = ({ regionId, onDismiss }: NewTaxRateProps) => {
                       )
                     )
                   }}
-                  className="w-full mt-base"
+                  className="mt-base w-full"
                   size="medium"
                   variant="secondary"
                 >
@@ -220,7 +220,7 @@ const NewTaxRate = ({ regionId, onDismiss }: NewTaxRateProps) => {
             </div>
           </Modal.Content>
           <Modal.Footer>
-            <div className="flex items-center justify-end w-full">
+            <div className="flex w-full items-center justify-end">
               <Button
                 type="button"
                 onClick={onDismiss}
diff --git a/packages/admin-ui/ui/src/domain/settings/taxes/product-selector.tsx b/packages/admin-ui/ui/src/domain/settings/taxes/product-selector.tsx
index a4acd57717..695e61ef6d 100644
--- a/packages/admin-ui/ui/src/domain/settings/taxes/product-selector.tsx
+++ b/packages/admin-ui/ui/src/domain/settings/taxes/product-selector.tsx
@@ -38,11 +38,11 @@ export const ProductSelector = ({ items, onChange }) => {
         Cell: ({ row: { original } }) => {
           return (
             <div className="flex items-center">
-              <div className="h-[40px] w-[30px] my-1.5 flex items-center mr-4 rounded-sm overflow-hidden">
+              <div className="my-1.5 mr-4 flex h-[40px] w-[30px] items-center overflow-hidden rounded-sm">
                 {original.thumbnail ? (
                   <img
                     src={original.thumbnail}
-                    className="h-full object-cover rounded-soft"
+                    className="rounded-soft h-full object-cover"
                   />
                 ) : (
                   <ImagePlaceholder />
diff --git a/packages/admin-ui/ui/src/domain/settings/taxes/product-type-selector.tsx b/packages/admin-ui/ui/src/domain/settings/taxes/product-type-selector.tsx
index 0806ad484c..0288cb552b 100644
--- a/packages/admin-ui/ui/src/domain/settings/taxes/product-type-selector.tsx
+++ b/packages/admin-ui/ui/src/domain/settings/taxes/product-type-selector.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from "react"
+import { useMemo, useState } from "react"
 import { useAdminProductTypes } from "medusa-react"
 import { SelectableTable } from "./selectable-table"
 
diff --git a/packages/admin-ui/ui/src/domain/settings/taxes/region-form.tsx b/packages/admin-ui/ui/src/domain/settings/taxes/region-form.tsx
index 6cd0b7b13e..b8f129250a 100644
--- a/packages/admin-ui/ui/src/domain/settings/taxes/region-form.tsx
+++ b/packages/admin-ui/ui/src/domain/settings/taxes/region-form.tsx
@@ -1,6 +1,6 @@
 import { Region } from "@medusajs/medusa"
 import { useAdminStoreTaxProviders, useAdminUpdateRegion } from "medusa-react"
-import React, { useEffect, useMemo } from "react"
+import { useEffect, useMemo } from "react"
 import { Controller, useForm } from "react-hook-form"
 import Checkbox from "../../../components/atoms/checkbox"
 import Button from "../../../components/fundamentals/button"
@@ -58,10 +58,8 @@ export const RegionTaxForm = ({ region }: RegionTaxFormProps) => {
     })
   }, [region])
 
-  const {
-    isLoading: isProvidersLoading,
-    tax_providers,
-  } = useAdminStoreTaxProviders()
+  const { isLoading: isProvidersLoading, tax_providers } =
+    useAdminStoreTaxProviders()
 
   const updateRegion = useAdminUpdateRegion(region.id)
 
@@ -108,8 +106,8 @@ export const RegionTaxForm = ({ region }: RegionTaxFormProps) => {
   }
 
   return (
-    <form className="flex flex-col flex-1" onSubmit={handleSubmit(onSubmit)}>
-      <div className="flex flex-col gap-base flex-1">
+    <form className="flex flex-1 flex-col" onSubmit={handleSubmit(onSubmit)}>
+      <div className="gap-base flex flex-1 flex-col">
         <Controller
           name="tax_provider_id"
           control={control}
@@ -125,7 +123,7 @@ export const RegionTaxForm = ({ region }: RegionTaxFormProps) => {
             />
           )}
         />
-        <div className="flex item-center gap-x-1.5">
+        <div className="item-center flex gap-x-1.5">
           <Checkbox
             className="inter-base-regular"
             {...register("automatic_taxes")}
@@ -137,7 +135,7 @@ export const RegionTaxForm = ({ region }: RegionTaxFormProps) => {
             }
           />
         </div>
-        <div className="flex item-center gap-x-1.5">
+        <div className="item-center flex gap-x-1.5">
           <Checkbox
             className="inter-base-regular"
             {...register("gift_cards_taxable")}
diff --git a/packages/admin-ui/ui/src/domain/settings/taxes/shipping-option-selector.tsx b/packages/admin-ui/ui/src/domain/settings/taxes/shipping-option-selector.tsx
index 6707e58d06..e607be22c3 100644
--- a/packages/admin-ui/ui/src/domain/settings/taxes/shipping-option-selector.tsx
+++ b/packages/admin-ui/ui/src/domain/settings/taxes/shipping-option-selector.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from "react"
+import { useMemo, useState } from "react"
 import { useAdminShippingOptions } from "medusa-react"
 import { SelectableTable } from "./selectable-table"
 
diff --git a/packages/admin-ui/ui/src/domain/settings/taxes/tax-rule-item.tsx b/packages/admin-ui/ui/src/domain/settings/taxes/tax-rule-item.tsx
index 6c96d90c99..4d0bff73d8 100644
--- a/packages/admin-ui/ui/src/domain/settings/taxes/tax-rule-item.tsx
+++ b/packages/admin-ui/ui/src/domain/settings/taxes/tax-rule-item.tsx
@@ -1,5 +1,3 @@
-import React from "react"
-
 import Actionables from "../../../components/molecules/actionables"
 import EditIcon from "../../../components/fundamentals/icons/edit-icon"
 import TrashIcon from "../../../components/fundamentals/icons/trash-icon"
@@ -7,10 +5,10 @@ import Badge from "../../../components/fundamentals/badge"
 
 export const TaxRuleItem = ({ onEdit, onDelete, index, name, description }) => {
   return (
-    <div className="p-base border rounded-rounded flex gap-base items-center">
+    <div className="p-base rounded-rounded gap-base flex items-center border">
       <div>
         <Badge
-          className="inter-base-semibold flex justify-center items-center w-[40px] h-[40px]"
+          className="inter-base-semibold flex h-[40px] w-[40px] items-center justify-center"
           variant="default"
         >
           §{index}
@@ -41,4 +39,3 @@ export const TaxRuleItem = ({ onEdit, onDelete, index, name, description }) => {
     </div>
   )
 }
-
diff --git a/packages/admin-ui/ui/src/domain/settings/taxes/tax-rule-selector.tsx b/packages/admin-ui/ui/src/domain/settings/taxes/tax-rule-selector.tsx
index 761bce9146..008e42ac3c 100644
--- a/packages/admin-ui/ui/src/domain/settings/taxes/tax-rule-selector.tsx
+++ b/packages/admin-ui/ui/src/domain/settings/taxes/tax-rule-selector.tsx
@@ -75,7 +75,7 @@ const TaxRuleSelector: React.FC<TaxRuleSelectorProps> = ({
             <>
               <div className="inter-base-semibold mb-large">Type</div>
               <RadioGroup.Root
-                className="flex gap-base"
+                className="gap-base flex"
                 value={selectedType}
                 onValueChange={handleTypeChange}
               >
@@ -122,7 +122,7 @@ const TaxRuleSelector: React.FC<TaxRuleSelectorProps> = ({
         </div>
       </Modal.Content>
       <Modal.Footer>
-        <div className="flex w-full justify-end gap-x-xsmall">
+        <div className="gap-x-xsmall flex w-full justify-end">
           <Button
             variant="ghost"
             size="small"
diff --git a/packages/admin-ui/ui/src/domain/settings/taxes/use-tax-rate-columns.tsx b/packages/admin-ui/ui/src/domain/settings/taxes/use-tax-rate-columns.tsx
index 51cfd6b976..0386beadc3 100644
--- a/packages/admin-ui/ui/src/domain/settings/taxes/use-tax-rate-columns.tsx
+++ b/packages/admin-ui/ui/src/domain/settings/taxes/use-tax-rate-columns.tsx
@@ -14,7 +14,7 @@ const useTaxRateColumns = () => {
           return (
             <div className="text-grey-90 group-hover:text-violet-60 pl-2">
               {row.original.type === "region" ? (
-                <div className="flex gap-x-xsmall text-grey-40 items-center">
+                <div className="gap-x-xsmall text-grey-40 flex items-center">
                   <LockIcon size={"12"} /> {value}
                 </div>
               ) : (
diff --git a/packages/admin-ui/ui/src/domain/settings/users/index.tsx b/packages/admin-ui/ui/src/domain/settings/users/index.tsx
index 7d3c16f2c5..2904745b54 100644
--- a/packages/admin-ui/ui/src/domain/settings/users/index.tsx
+++ b/packages/admin-ui/ui/src/domain/settings/users/index.tsx
@@ -44,8 +44,8 @@ const Users: React.FC = () => {
   ]
 
   return (
-    <div className="flex flex-col h-full">
-      <div className="w-full flex flex-col grow">
+    <div className="flex h-full flex-col">
+      <div className="flex w-full grow flex-col">
         <BreadCrumb
           previousRoute="/a/settings"
           previousBreadcrumb="Settings"
diff --git a/packages/admin-ui/ui/src/hooks/use-clipboard.js b/packages/admin-ui/ui/src/hooks/use-clipboard.js
index 0d00a3f412..d82a9fb480 100644
--- a/packages/admin-ui/ui/src/hooks/use-clipboard.js
+++ b/packages/admin-ui/ui/src/hooks/use-clipboard.js
@@ -7,7 +7,7 @@ import React from "react"
  * @param {Object} options
  * @param {number} options.successDuration - Duration of the success state in milliseconds
  * @param {function} options.onCopied - Callback function to call after copying
- * @returns {Array} returns tuple containing isCopied state and handleCopy function
+ * @return {Array} returns tuple containing isCopied state and handleCopy function
  */
 const useClipboard = (text, options = {}) => {
   const [isCopied, setIsCopied] = React.useState(false)
diff --git a/packages/admin-ui/ui/src/hooks/use-computed-height.ts b/packages/admin-ui/ui/src/hooks/use-computed-height.ts
index 60b634618f..d6c2a28b3f 100644
--- a/packages/admin-ui/ui/src/hooks/use-computed-height.ts
+++ b/packages/admin-ui/ui/src/hooks/use-computed-height.ts
@@ -9,7 +9,7 @@ export const useComputedHeight = (bottomPad: number) => {
 
   useLayoutEffect(() => {
     if (ref.current) {
-      let { top } = ref.current.getBoundingClientRect()
+      const { top } = ref.current.getBoundingClientRect()
       // take the inner height of the window, subtract 32 from it (for the bottom padding), then subtract that from the top position of our grid row (wherever that is)
       heightRef.current = height - bottomPad - top
     }
diff --git a/packages/admin-ui/ui/src/hooks/use-imperative-dialog.tsx b/packages/admin-ui/ui/src/hooks/use-imperative-dialog.tsx
index f3f19cdb85..8f84e68faa 100644
--- a/packages/admin-ui/ui/src/hooks/use-imperative-dialog.tsx
+++ b/packages/admin-ui/ui/src/hooks/use-imperative-dialog.tsx
@@ -23,11 +23,11 @@ const DeleteDialog = ({
         <Modal.Content className="!py-large">
           <div className="flex flex-col">
             <span className="inter-large-semibold">{heading}</span>
-            <span className="mt-1 inter-base-regular text-grey-50">{text}</span>
+            <span className="inter-base-regular text-grey-50 mt-1">{text}</span>
           </div>
           {extraConfirmation && (
-            <div className="flex flex-col my-base">
-              <span className="mt-1 inter-base-regular text-grey-50">
+            <div className="my-base flex flex-col">
+              <span className="inter-base-regular text-grey-50 mt-1">
                 Type the name{" "}
                 <span className="font-semibold">"{entityName}"</span> to
                 confirm.
@@ -44,10 +44,10 @@ const DeleteDialog = ({
           )}
         </Modal.Content>
         <Modal.Footer className="border-none !pt-0">
-          <div className="flex justify-end w-full">
+          <div className="flex w-full justify-end">
             <Button
               variant="secondary"
-              className="justify-center mr-2 text-small"
+              className="text-small mr-2 justify-center"
               size="small"
               onClick={onCancel}
             >
@@ -55,7 +55,7 @@ const DeleteDialog = ({
             </Button>
             <Button
               size="small"
-              className="justify-center text-small"
+              className="text-small justify-center"
               variant="nuclear"
               onClick={onConfirm}
               disabled={extraConfirmation && entityName !== confirmationString}
diff --git a/packages/admin-ui/ui/src/hooks/use-notification.tsx b/packages/admin-ui/ui/src/hooks/use-notification.tsx
index 488aef3913..bbaebd7327 100644
--- a/packages/admin-ui/ui/src/hooks/use-notification.tsx
+++ b/packages/admin-ui/ui/src/hooks/use-notification.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import { toast } from "react-hot-toast"
 import Notification, {
   NotificationTypes,
diff --git a/packages/admin-ui/ui/src/hooks/use-query-filters.ts b/packages/admin-ui/ui/src/hooks/use-query-filters.ts
index 083c8cf34f..813006b878 100644
--- a/packages/admin-ui/ui/src/hooks/use-query-filters.ts
+++ b/packages/admin-ui/ui/src/hooks/use-query-filters.ts
@@ -202,9 +202,10 @@ const useQueryFilters = (defaultFilters: Partial<FilterState>) => {
   /* ********* VALUES ********* */
 
   const queryObject = useMemo(() => getQueryObject(state), [state])
-  const representationObject = useMemo(() => getRepresentationObject(state), [
-    state,
-  ])
+  const representationObject = useMemo(
+    () => getRepresentationObject(state),
+    [state]
+  )
   const representationString = useMemo(() => getRepresentationString(), [state])
 
   return {
diff --git a/packages/admin-ui/ui/src/hooks/use-scroll.ts b/packages/admin-ui/ui/src/hooks/use-scroll.ts
index bfe069cb41..ca55ef1536 100644
--- a/packages/admin-ui/ui/src/hooks/use-scroll.ts
+++ b/packages/admin-ui/ui/src/hooks/use-scroll.ts
@@ -7,7 +7,7 @@ type useScrollProps = {
 export const useScroll = ({ threshold = 0 }: useScrollProps) => {
   const [isScrolled, setIsScrolled] = useState(false)
 
-  const scrollListener = e => {
+  const scrollListener = (e) => {
     const currentScrollY = e.target.scrollTop
     if (currentScrollY > threshold) {
       setIsScrolled(true)
diff --git a/packages/admin-ui/ui/src/pages/404.tsx b/packages/admin-ui/ui/src/pages/404.tsx
index 3f6c13c6a5..66ab3528e2 100644
--- a/packages/admin-ui/ui/src/pages/404.tsx
+++ b/packages/admin-ui/ui/src/pages/404.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import SEO from "../components/seo"
 import Layout from "../components/templates/layout"
 
diff --git a/packages/admin-ui/ui/src/pages/invite.tsx b/packages/admin-ui/ui/src/pages/invite.tsx
index 38811c2173..66dc67574b 100644
--- a/packages/admin-ui/ui/src/pages/invite.tsx
+++ b/packages/admin-ui/ui/src/pages/invite.tsx
@@ -1,7 +1,7 @@
 import ConfettiGenerator from "confetti-js"
 import { useAdminAcceptInvite } from "medusa-react"
 import qs from "qs"
-import React, { useEffect, useState } from "react"
+import { useEffect, useState } from "react"
 import { useForm } from "react-hook-form"
 import { decodeToken } from "react-jwt"
 import { Link, useLocation, useNavigate } from "react-router-dom"
@@ -122,27 +122,27 @@ const InvitePage = () => {
         <LoginLayout>
           <SEO title="Create Account" />
           <div className="flex h-full w-full items-center justify-center">
-            <div className="flex min-h-[600px] bg-grey-0 rounded-rounded justify-center">
+            <div className="bg-grey-0 rounded-rounded flex min-h-[600px] justify-center">
               <form
-                className="flex flex-col py-12 w-full px-[120px] items-center"
+                className="flex w-full flex-col items-center py-12 px-[120px]"
                 onSubmit={handleSubmit(handleAcceptInvite)}
               >
                 <MedusaIcon />
                 {!token ? (
-                  <div className="h-full flex flex-col gap-y-2 text-center items-center justify-center">
+                  <div className="flex h-full flex-col items-center justify-center gap-y-2 text-center">
                     <span className="inter-large-semibold text-grey-90">
                       You signup link is invalid
                     </span>
-                    <span className="inter-base-regular mt-2 text-grey-50">
+                    <span className="inter-base-regular text-grey-50 mt-2">
                       Contact your administrator to obtain a valid signup link
                     </span>
                   </div>
                 ) : (
                   <>
-                    <span className="inter-2xlarge-semibold mt-4 text-grey-90">
+                    <span className="inter-2xlarge-semibold text-grey-90 mt-4">
                       Welcome to the team!
                     </span>
-                    <span className="inter-base-regular text-grey-50 mt-2 mb-large">
+                    <span className="inter-base-regular text-grey-50 mb-large mt-2">
                       Create your account below👇🏼
                     </span>
                     <SigninInput
@@ -168,7 +168,7 @@ const InvitePage = () => {
                       autoComplete="new-password"
                     />
                     {passwordMismatch && (
-                      <span className="text-rose-50 w-full mt-2 inter-small-regular">
+                      <span className="inter-small-regular mt-2 w-full text-rose-50">
                         The two passwords are not the same
                       </span>
                     )}
@@ -176,7 +176,7 @@ const InvitePage = () => {
                       variant="primary"
                       size="large"
                       type="submit"
-                      className="w-full mt-base"
+                      className="mt-base w-full"
                       loading={formState.isSubmitting}
                       disabled={!ready}
                     >
@@ -196,9 +196,9 @@ const InvitePage = () => {
         </LoginLayout>
       ) : (
         <div className="bg-grey-90 h-screen w-full overflow-hidden">
-          <div className="z-10 flex-grow flex flex-col items-center justify-center h-full absolute inset-0 max-w-[1080px] mx-auto">
+          <div className="absolute inset-0 z-10 mx-auto flex h-full max-w-[1080px] flex-grow flex-col items-center justify-center">
             <MedusaVice className="mb-3xlarge" />
-            <div className="flex flex-col items-center max-w-3xl text-center">
+            <div className="flex max-w-3xl flex-col items-center text-center">
               <h1 className="inter-3xlarge-semibold text-grey-0 mb-base">
                 You have been invited to join the team
               </h1>
diff --git a/packages/admin-ui/ui/src/pages/login.tsx b/packages/admin-ui/ui/src/pages/login.tsx
index aad489dea4..38a9bd4c79 100644
--- a/packages/admin-ui/ui/src/pages/login.tsx
+++ b/packages/admin-ui/ui/src/pages/login.tsx
@@ -1,5 +1,5 @@
 import clsx from "clsx"
-import React, { useState } from "react"
+import { useState } from "react"
 import MedusaIcon from "../components/fundamentals/icons/medusa-icon"
 import LoginCard from "../components/organisms/login-card"
 import ResetTokenCard from "../components/organisms/reset-token-card"
@@ -15,13 +15,13 @@ const LoginPage = () => {
       <div className="flex h-full w-full items-center justify-center">
         <div
           className={clsx(
-            "flex min-h-[600px] w-[640px] bg-grey-0 rounded-rounded justify-center transition-['min-height'] duration-300",
+            "bg-grey-0 rounded-rounded flex min-h-[600px] w-[640px] justify-center transition-['min-height'] duration-300",
             {
               "min-h-[480px]": resetPassword,
             }
           )}
         >
-          <div className="flex flex-col pt-12 w-full px-[120px] items-center">
+          <div className="flex w-full flex-col items-center px-[120px] pt-12">
             <MedusaIcon />
             {resetPassword ? (
               <ResetTokenCard goBack={() => setResetPassword(false)} />
diff --git a/packages/admin-ui/ui/src/pages/reset-password.tsx b/packages/admin-ui/ui/src/pages/reset-password.tsx
index 2556986c8c..26cfbba764 100644
--- a/packages/admin-ui/ui/src/pages/reset-password.tsx
+++ b/packages/admin-ui/ui/src/pages/reset-password.tsx
@@ -1,6 +1,6 @@
 import { useAdminResetPassword } from "medusa-react"
 import qs from "qs"
-import React, { useEffect, useState } from "react"
+import { useEffect, useState } from "react"
 import { useForm } from "react-hook-form"
 import { decodeToken } from "react-jwt"
 import { useLocation, useNavigate } from "react-router-dom"
@@ -84,14 +84,14 @@ const ResetPasswordPage = () => {
     <LoginLayout>
       <SEO title="Reset Password" />
       <div className="flex h-full w-full items-center justify-center">
-        <div className="flex min-h-[540px] bg-grey-0 rounded-rounded justify-center">
+        <div className="bg-grey-0 rounded-rounded flex min-h-[540px] justify-center">
           <form
-            className="flex flex-col py-12 w-full px-[120px] items-center"
+            className="flex w-full flex-col items-center py-12 px-[120px]"
             onSubmit={handleSubmit(handleAcceptInvite)}
           >
             <MedusaIcon />
             {!token ? (
-              <div className="h-full flex flex-col gap-y-2 text-center items-center justify-center">
+              <div className="flex h-full flex-col items-center justify-center gap-y-2 text-center">
                 <span className="inter-large-semibold text-grey-90">
                   You reset link is invalid
                 </span>
@@ -101,10 +101,10 @@ const ResetPasswordPage = () => {
               </div>
             ) : (
               <>
-                <span className="inter-2xlarge-semibold mt-4 text-grey-90">
+                <span className="inter-2xlarge-semibold text-grey-90 mt-4">
                   Reset your password
                 </span>
-                <span className="inter-base-regular text-grey-50 mt-2 mb-xlarge">
+                <span className="inter-base-regular text-grey-50 mb-xlarge mt-2">
                   Choose a new password below 👇🏼
                 </span>
                 <SigninInput
@@ -127,12 +127,12 @@ const ResetPasswordPage = () => {
                   className="mb-0"
                 />
                 {error && (
-                  <span className="text-rose-50 w-full mt-xsmall inter-small-regular">
+                  <span className="mt-xsmall inter-small-regular w-full text-rose-50">
                     The two passwords are not the same
                   </span>
                 )}
                 {passwordMismatch && (
-                  <span className="text-rose-50 w-full mt-xsmall inter-small-regular">
+                  <span className="mt-xsmall inter-small-regular w-full text-rose-50">
                     The two passwords are not the same
                   </span>
                 )}
@@ -140,7 +140,7 @@ const ResetPasswordPage = () => {
                   variant="primary"
                   size="large"
                   type="submit"
-                  className="w-full mt-base rounded-rounded"
+                  className="mt-base rounded-rounded w-full"
                   loading={formState.isSubmitting}
                   disabled={!ready}
                 >
diff --git a/packages/admin-ui/ui/src/services/analytics.ts b/packages/admin-ui/ui/src/services/analytics.ts
index 28bd84d11e..3d1f8a97e9 100644
--- a/packages/admin-ui/ui/src/services/analytics.ts
+++ b/packages/admin-ui/ui/src/services/analytics.ts
@@ -75,7 +75,7 @@ export const useAdminAnalyticsConfig = () => {
 
   const { data, ...rest } = useQuery(
     ANALYTICS_CONFIG_KEY,
-    () => getAnalyticsConfig(),
+    async () => getAnalyticsConfig(),
     {
       retry: false,
       enabled: isFeatureEnabled("analytics"),
@@ -89,7 +89,7 @@ export const useAdminUpdateAnalyticsConfig = () => {
   const invalidateAnalyticsConfig = useInvalidateAnalyticsConfig()
 
   const mutation = useMutation(
-    (payload: UpdateConfigPayload) => updateAnalyticsConfig(payload),
+    async (payload: UpdateConfigPayload) => updateAnalyticsConfig(payload),
     {
       onSuccess: invalidateAnalyticsConfig,
     }
@@ -102,7 +102,7 @@ export const useAdminCreateAnalyticsConfig = () => {
   const invalidateAnalyticsConfig = useInvalidateAnalyticsConfig()
 
   const mutation = useMutation(
-    (payload: CreateConfigPayload) => createAnalyticsConfig(payload),
+    async (payload: CreateConfigPayload) => createAnalyticsConfig(payload),
     {
       onSuccess: invalidateAnalyticsConfig,
     }
diff --git a/packages/admin-ui/ui/src/types/react-table-config.d.ts b/packages/admin-ui/ui/src/types/react-table-config.d.ts
index 9e93126155..6d1c648e84 100644
--- a/packages/admin-ui/ui/src/types/react-table-config.d.ts
+++ b/packages/admin-ui/ui/src/types/react-table-config.d.ts
@@ -51,8 +51,9 @@ import {
 declare module "react-table" {
   // take this file as-is, or comment out the sections that don't apply to your plugin configuration
 
-  export interface TableOptions<D extends Record<string, unknown>>
-    extends UseExpandedOptions<D>,
+  export interface TableOptions<
+    D extends Record<string, unknown>
+  > extends UseExpandedOptions<D>,
       UseFiltersOptions<D>,
       UseGlobalFiltersOptions<D>,
       UseGroupByOptions<D>,
@@ -68,16 +69,14 @@ declare module "react-table" {
 
   export interface Hooks<
     D extends Record<string, unknown> = Record<string, unknown>
-  >
-    extends UseExpandedHooks<D>,
+  > extends UseExpandedHooks<D>,
       UseGroupByHooks<D>,
       UseRowSelectHooks<D>,
       UseSortByHooks<D> {}
 
   export interface TableInstance<
     D extends Record<string, unknown> = Record<string, unknown>
-  >
-    extends UseColumnOrderInstanceProps<D>,
+  > extends UseColumnOrderInstanceProps<D>,
       UseExpandedInstanceProps<D>,
       UseFiltersInstanceProps<D>,
       UseGlobalFiltersInstanceProps<D>,
@@ -89,8 +88,7 @@ declare module "react-table" {
 
   export interface TableState<
     D extends Record<string, unknown> = Record<string, unknown>
-  >
-    extends UseColumnOrderState<D>,
+  > extends UseColumnOrderState<D>,
       UseExpandedState<D>,
       UseFiltersState<D>,
       UseGlobalFiltersState<D>,
@@ -103,8 +101,7 @@ declare module "react-table" {
 
   export interface ColumnInterface<
     D extends Record<string, unknown> = Record<string, unknown>
-  >
-    extends UseFiltersColumnOptions<D>,
+  > extends UseFiltersColumnOptions<D>,
       UseGlobalFiltersColumnOptions<D>,
       UseGroupByColumnOptions<D>,
       UseResizeColumnsColumnOptions<D>,
@@ -112,8 +109,7 @@ declare module "react-table" {
 
   export interface ColumnInstance<
     D extends Record<string, unknown> = Record<string, unknown>
-  >
-    extends UseFiltersColumnProps<D>,
+  > extends UseFiltersColumnProps<D>,
       UseGroupByColumnProps<D>,
       UseResizeColumnsColumnProps<D>,
       UseSortByColumnProps<D> {}
@@ -121,12 +117,12 @@ declare module "react-table" {
   export interface Cell<
     D extends Record<string, unknown> = Record<string, unknown>,
     V = any
-  > extends UseGroupByCellProps<D>, UseRowStateCellProps<D> {}
+  > extends UseGroupByCellProps<D>,
+      UseRowStateCellProps<D> {}
 
   export interface Row<
     D extends Record<string, unknown> = Record<string, unknown>
-  >
-    extends UseExpandedRowProps<D>,
+  > extends UseExpandedRowProps<D>,
       UseGroupByRowProps<D>,
       UseRowSelectRowProps<D>,
       UseRowStateRowProps<D> {}
diff --git a/packages/admin-ui/ui/src/utils/bytes-converter.ts b/packages/admin-ui/ui/src/utils/bytes-converter.ts
index 8c0320fc16..8cf3192ff4 100644
--- a/packages/admin-ui/ui/src/utils/bytes-converter.ts
+++ b/packages/admin-ui/ui/src/utils/bytes-converter.ts
@@ -2,7 +2,7 @@ const units: [string, number][] = [
   ["B", 1],
   ["Kb", 1000],
   ["Mb", 1000000],
-  ["Gb", 1000000000]
+  ["Gb", 1000000000],
 ]
 
 export function bytesConverter(size: number): string | undefined {
diff --git a/packages/admin-ui/ui/src/utils/callAll.ts b/packages/admin-ui/ui/src/utils/callAll.ts
index 66a024dc8a..45a842600f 100644
--- a/packages/admin-ui/ui/src/utils/callAll.ts
+++ b/packages/admin-ui/ui/src/utils/callAll.ts
@@ -1,2 +1,4 @@
-export const callAll = (...fns: Function[]) => (...args) =>
-  fns?.forEach(async fn => typeof fn === "function" &&  fn(...args))
+export const callAll =
+  (...fns: Function[]) =>
+  (...args) =>
+    fns?.forEach(async (fn) => typeof fn === "function" && fn(...args))
diff --git a/packages/admin-ui/ui/src/utils/format-address.js b/packages/admin-ui/ui/src/utils/format-address.js
index 1eeb36d832..bfc187b8b7 100644
--- a/packages/admin-ui/ui/src/utils/format-address.js
+++ b/packages/admin-ui/ui/src/utils/format-address.js
@@ -3,7 +3,7 @@ import { countryLookup } from "./countries"
 /**
  * Formats a shipping or billing address using the postal code, city, province, and country name
  * @param shippingOrBillingAddress
- * @returns {string} Returns a formatted string of the address
+ * @return {string} Returns a formatted string of the address
  */
 const formatAddress = (shippingOrBillingAddress) => {
   const postalCode = shippingOrBillingAddress.postal_code || ""
diff --git a/packages/admin-ui/ui/src/utils/get-error-status.ts b/packages/admin-ui/ui/src/utils/get-error-status.ts
index 6d70f5d71f..324ae0db6a 100644
--- a/packages/admin-ui/ui/src/utils/get-error-status.ts
+++ b/packages/admin-ui/ui/src/utils/get-error-status.ts
@@ -1,9 +1,11 @@
-export const getErrorStatus = (error: Error): { status: number, message: string} | undefined => {
-    const formattedError = JSON.parse(JSON.stringify(error))
+export const getErrorStatus = (
+  error: Error
+): { status: number; message: string } | undefined => {
+  const formattedError = JSON.parse(JSON.stringify(error))
 
-    if ("status" in formattedError && "message" in formattedError) {
-        return { status: formattedError.status, message: formattedError.message }
-    }
+  if ("status" in formattedError && "message" in formattedError) {
+    return { status: formattedError.status, message: formattedError.message }
+  }
 
-    return undefined
-}
\ No newline at end of file
+  return undefined
+}
diff --git a/packages/admin-ui/ui/src/utils/get-relative-time.ts b/packages/admin-ui/ui/src/utils/get-relative-time.ts
index 3bc4afaf0e..2f9292f9ef 100644
--- a/packages/admin-ui/ui/src/utils/get-relative-time.ts
+++ b/packages/admin-ui/ui/src/utils/get-relative-time.ts
@@ -4,7 +4,7 @@ const units: [RelativeTimeFormatUnit, string, number][] = [
   ["day", "d", 86400000],
   ["hour", "h", 3600000],
   ["minute", "m", 60000],
-];
+]
 
 const getRelativeTime = (dates: { from: Date | string; to: Date | string }) => {
   const elapsed = new Date(dates.to).getTime() - new Date(dates.from).getTime()
@@ -15,24 +15,21 @@ const getRelativeTime = (dates: { from: Date | string; to: Date | string }) => {
       const suffix = elapsed <= 0 ? "ago" : ""
       const prefix = elapsed > 0 ? "in" : ""
       const indicator = Math.abs(elapsed) < 1 ? "<" : ""
-      const timeToShow = Math.max(
-        1,
-        Math.abs(Math.round(elapsed / amount))
-      )
+      const timeToShow = Math.max(1, Math.abs(Math.round(elapsed / amount)))
 
       return {
         raw: elapsed,
         rtf: `
           ${indicator}${prefix ? prefix + " " : ""}
-          ${(isLessThan1Min ? "< " : "")} 
+          ${isLessThan1Min ? "< " : ""} 
           ${timeToShow}${displayedUnit} 
           ${suffix}
-        `
-      };
+        `,
+      }
     }
   }
 
   return { raw: 0, rtf: "" }
-};
+}
 
 export default getRelativeTime
diff --git a/packages/admin-ui/ui/src/utils/handle-form-error.tsx b/packages/admin-ui/ui/src/utils/handle-form-error.tsx
index b46e20e86c..11d126a975 100644
--- a/packages/admin-ui/ui/src/utils/handle-form-error.tsx
+++ b/packages/admin-ui/ui/src/utils/handle-form-error.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import {
   DeepMap,
   FieldError,
@@ -49,7 +48,7 @@ function getFormErrors(errors: DeepMap<FieldValues, FieldError>) {
   }, [])
 
   const list = (
-    <ul className="list-disc list-inside">
+    <ul className="list-inside list-disc">
       {messages.map((m) => (
         <li>{m}</li>
       ))}
diff --git a/packages/admin-ui/ui/src/utils/images.ts b/packages/admin-ui/ui/src/utils/images.ts
index faca01db03..0763523d20 100644
--- a/packages/admin-ui/ui/src/utils/images.ts
+++ b/packages/admin-ui/ui/src/utils/images.ts
@@ -1,5 +1,5 @@
-import Medusa from "../services/api";
-import { FormImage } from "../types/shared";
+import Medusa from "../services/api"
+import { FormImage } from "../types/shared"
 
 const splitImages = (
   images: FormImage[]
@@ -30,4 +30,4 @@ export const prepareImages = async (images: FormImage[]) => {
   }
 
   return [...existingImages, ...uploadedImgs]
-}
\ No newline at end of file
+}
diff --git a/packages/admin-ui/ui/src/utils/nested-form.ts b/packages/admin-ui/ui/src/utils/nested-form.ts
index 8586ac7bd7..cff276fa3b 100644
--- a/packages/admin-ui/ui/src/utils/nested-form.ts
+++ b/packages/admin-ui/ui/src/utils/nested-form.ts
@@ -1,9 +1,10 @@
-
 import { get } from "lodash"
 import { FieldPath, FieldValues, UseFormReturn } from "react-hook-form"
 import { Get } from "type-fest"
 
-export type NestedForm<TValues extends FieldValues> = UseFormReturn<{ __nested__: TValues }> & {
+export type NestedForm<TValues extends FieldValues> = UseFormReturn<{
+  __nested__: TValues
+}> & {
   path(this: void): `__nested__`
   path<TPath extends FieldPath<TValues>>(
     this: void,
@@ -19,11 +20,11 @@ export type NestedForm<TValues extends FieldValues> = UseFormReturn<{ __nested__
 /**
  * Utility function to create a nested form. This is useful when you want to use a reusable form component within a form.
  * This is especially useful when you want to use a reusable form component within a form multiple times. For example, an form
- * that contains both a billing and a shipping address. 
+ * that contains both a billing and a shipping address.
  * @example
  * const MyForm = () => {
  *   const form = useForm<{ email: string, shipping_address: AddressPayload, billing_address: AddressPayload }>()
- * 
+ *
  *   return (
  *     <div>
  *       <Input {...form.register("email")} label="email" />
@@ -32,14 +33,14 @@ export type NestedForm<TValues extends FieldValues> = UseFormReturn<{ __nested__
  *     </div>
  *   )
  * }
- * 
+ *
  * type AddressFormProps = {
  *   form: NestedForm<AddressPayload>
  * }
- * 
+ *
  * const AddressForm = ({ form }: AddressFormProps) => {
  *   const { register, path } = form
- *   
+ *
  *   return (
  *     <div>
  *       <Input {...register(path("city"))} label="City" /> // path("city") resolves as "shipping_address.city" or "billing_address.city" depending on the second argument passed to nestedForm
@@ -51,7 +52,10 @@ export type NestedForm<TValues extends FieldValues> = UseFormReturn<{ __nested__
 export function nestedForm<TValues extends FieldValues>(
   form: UseFormReturn<TValues> | NestedForm<TValues>
 ): NestedForm<TValues>
-export function nestedForm<TValues extends FieldValues, TPath extends FieldPath<TValues>>(
+export function nestedForm<
+  TValues extends FieldValues,
+  TPath extends FieldPath<TValues>
+>(
   form: UseFormReturn<TValues> | NestedForm<TValues>,
   path: TPath
 ): NestedForm<Get<TValues, TPath>>
@@ -63,7 +67,7 @@ export function nestedForm(
     ...form,
     path(field?: string | number) {
       const fullPath = path && field ? `${path}.${field}` : path ? path : field
-      
+
       if ("path" in form) {
         return form.path(path as any)
       }
@@ -72,12 +76,12 @@ export function nestedForm(
     },
     get(obj: any, field?: string | number) {
       const fullPath = path && field ? `${path}.${field}` : path ? path : field
-      
-      if ("get" in form) { 
-        return form.get(path) 
+
+      if ("get" in form) {
+        return form.get(path)
       }
-      
+
       return fullPath ? get(obj, fullPath) : obj
     },
   }
-}
\ No newline at end of file
+}
diff --git a/packages/admin-ui/ui/src/utils/sales-channel-compare-operator.ts b/packages/admin-ui/ui/src/utils/sales-channel-compare-operator.ts
index b1a6229c98..e06c8a76d8 100644
--- a/packages/admin-ui/ui/src/utils/sales-channel-compare-operator.ts
+++ b/packages/admin-ui/ui/src/utils/sales-channel-compare-operator.ts
@@ -1,15 +1,13 @@
 import { SalesChannel } from "@medusajs/medusa"
 
-export const defaultChannelsSorter = (defaultSalesChanenlId: string) => (
-  sc1: SalesChannel,
-  sc2: SalesChannel
-) => {
-  if (sc1.id === defaultSalesChanenlId) {
-    return -1
-  }
-  if (sc2.id === defaultSalesChanenlId) {
-    return 1
-  }
+export const defaultChannelsSorter =
+  (defaultSalesChanenlId: string) => (sc1: SalesChannel, sc2: SalesChannel) => {
+    if (sc1.id === defaultSalesChanenlId) {
+      return -1
+    }
+    if (sc2.id === defaultSalesChanenlId) {
+      return 1
+    }
 
-  return sc1.name.localeCompare(sc2.name)
-}
+    return sc1.name.localeCompare(sc2.name)
+  }
diff --git a/packages/admin-ui/ui/src/vite-env.d.ts b/packages/admin-ui/ui/src/vite-env.d.ts
index ad8fce4ff9..86f394506a 100644
--- a/packages/admin-ui/ui/src/vite-env.d.ts
+++ b/packages/admin-ui/ui/src/vite-env.d.ts
@@ -1,3 +1,3 @@
-/// <reference types="vite/client" />
+// / <reference types="vite/client" />
 declare const __BASE__: string | undefined
 declare const __MEDUSA_BACKEND_URL__: string