diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000..9395e98
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,10 @@
+# Dependencies and generated output
+**/node_modules/**
+**/build/**
+**/dist/**
+**/coverage/**
+backend/public/**
+backend/storage/**
+
+# Handlebars generator templates contain application syntax that is not valid HTML.
+backend/app/templates/**
diff --git a/CHANGELOG.md b/CHANGELOG.md
index c596a8c..38cfa73 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,16 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ### Added
 
+### Changed
+
+### Fixed
+
+### Removed
+
+## [1.1.0] - 2026-07-17
+
+### Added
+
 - Added image map editor for creating and editing interactive image map areas in the File Manager.
 
 ### Changed
diff --git a/apps/admin/package.json b/apps/admin/package.json
index 77fb704..f96734f 100755
--- a/apps/admin/package.json
+++ b/apps/admin/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@crux-kit/admin-app",
   "private": true,
-  "version": "1.0.1",
+  "version": "1.1.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/apps/admin/src/app/layouts/01__Default/components/Breadcrumb.tsx b/apps/admin/src/app/layouts/01__Default/components/Breadcrumb.tsx
index 9863f67..c210121 100755
--- a/apps/admin/src/app/layouts/01__Default/components/Breadcrumb.tsx
+++ b/apps/admin/src/app/layouts/01__Default/components/Breadcrumb.tsx
@@ -17,7 +17,7 @@ export function Breadcrumb() {
   }
 
   return (
-    <div className="flex items-center gap-1.25 text-xs lg:text-sm font-medium mb-2.5 lg:mb-0">
+    <div className="mb-2.5 flex items-center gap-1.25 text-xs font-medium lg:mb-0 lg:text-sm">
       {items.map((item, index) => {
         const last = index === items.length - 1;
         const active = item.path ? isActive(item.path) : false;
@@ -31,7 +31,7 @@ export function Breadcrumb() {
               {item.title}
             </span>
             {!last && (
-              <ChevronRight className="size-3.5 text-muted-foreground" key={`separator-${index}`} />
+              <ChevronRight className="text-muted-foreground size-3.5" key={`separator-${index}`} />
             )}
           </Fragment>
         );
diff --git a/apps/admin/src/app/layouts/01__Default/components/Content.tsx b/apps/admin/src/app/layouts/01__Default/components/Content.tsx
index 2629202..1142bec 100755
--- a/apps/admin/src/app/layouts/01__Default/components/Content.tsx
+++ b/apps/admin/src/app/layouts/01__Default/components/Content.tsx
@@ -7,7 +7,7 @@ export function Content() {
   const mobile = useIsMobile();
 
   return (
-    <div className="grow content pt-5" role="content">
+    <div className="content grow pt-5" role="content">
       {mobile && (
         <Container>
           <Breadcrumb />
diff --git a/apps/admin/src/app/layouts/01__Default/components/Footer.tsx b/apps/admin/src/app/layouts/01__Default/components/Footer.tsx
index b06f6f8..39d24e5 100755
--- a/apps/admin/src/app/layouts/01__Default/components/Footer.tsx
+++ b/apps/admin/src/app/layouts/01__Default/components/Footer.tsx
@@ -7,8 +7,8 @@ export function Footer() {
   return (
     <footer className="footer">
       <Container>
-        <div className="flex flex-col md:flex-row justify-center md:justify-between items-center gap-3 py-5">
-          <div className="flex order-2 md:order-1  gap-2 font-normal text-sm">
+        <div className="flex flex-col items-center justify-center gap-3 py-5 md:flex-row md:justify-between">
+          <div className="order-2 flex gap-2 text-sm font-normal md:order-1">
             <span className="text-muted-foreground">{currentYear} &copy;</span>
             <a
               href="https://keenthemes.com"
@@ -18,7 +18,7 @@ export function Footer() {
               Keenthemes Inc.
             </a>
           </div>
-          <nav className="flex order-1 md:order-2 gap-4 font-normal text-sm text-muted-foreground">
+          <nav className="text-muted-foreground order-1 flex gap-4 text-sm font-normal md:order-2">
             <a href={generalSettings.docsLink} target="_blank" className="hover:text-primary">
               Docs
             </a>
diff --git a/apps/admin/src/app/layouts/01__Default/components/Header.tsx b/apps/admin/src/app/layouts/01__Default/components/Header.tsx
index 75ebc1b..0014ab7 100755
--- a/apps/admin/src/app/layouts/01__Default/components/Header.tsx
+++ b/apps/admin/src/app/layouts/01__Default/components/Header.tsx
@@ -32,13 +32,13 @@ export function Header() {
   return (
     <header
       className={cn(
-        'header fixed top-0 z-10 start-0 flex items-stretch shrink-0 border-b border-transparent bg-background end-0 pe-(--removed-body-scroll-bar-size,0px)',
-        headerSticky && 'border-b border-border'
+        'header bg-background fixed start-0 end-0 top-0 z-10 flex shrink-0 items-stretch border-b border-transparent pe-(--removed-body-scroll-bar-size,0px)',
+        headerSticky && 'border-border border-b'
       )}
     >
-      <Container className="flex justify-between items-stretch lg:gap-4">
+      <Container className="flex items-stretch justify-between lg:gap-4">
         {/* HeaderLogo */}
-        <div className="flex lg:hidden items-center gap-2.5">
+        <div className="flex items-center gap-2.5 lg:hidden">
           <Link to="/" className="shrink-0">
             <img
               src={toAbsoluteUrl('/media/app/mini-logo.svg')}
@@ -54,9 +54,9 @@ export function Header() {
                     <Menu className="text-muted-foreground/70" />
                   </Button>
                 </SheetTrigger>
-                <SheetContent className="p-0 gap-0 w-68.75" side="left" close={false}>
-                  <SheetHeader className="p-0 space-y-0" />
-                  <SheetBody className="p-0 overflow-y-auto">
+                <SheetContent className="w-68.75 gap-0 p-0" side="left" close={false}>
+                  <SheetHeader className="space-y-0 p-0" />
+                  <SheetBody className="overflow-y-auto p-0">
                     <SidebarMenu />
                   </SheetBody>
                 </SheetContent>
@@ -69,9 +69,9 @@ export function Header() {
                     <SquareChevronRight className="text-muted-foreground/70" />
                   </Button>
                 </SheetTrigger>
-                <SheetContent className="p-0 gap-0 w-68.75" side="left" close={false}>
-                  <SheetHeader className="p-0 space-y-0" />
-                  <SheetBody className="p-0 overflow-y-auto">
+                <SheetContent className="w-68.75 gap-0 p-0" side="left" close={false}>
+                  <SheetHeader className="space-y-0 p-0" />
+                  <SheetBody className="overflow-y-auto p-0">
                     <MegaMenuMobile />
                   </SheetBody>
                 </SheetContent>
@@ -88,7 +88,7 @@ export function Header() {
           <UserDropdownMenu
             trigger={
               <img
-                className="size-9 rounded-full border-2 border-green-500 shrink-0 cursor-pointer"
+                className="size-9 shrink-0 cursor-pointer rounded-full border-2 border-green-500"
                 src={toAbsoluteUrl('/media/avatars/300-2.png')}
                 alt="User Avatar"
               />
diff --git a/apps/admin/src/app/layouts/01__Default/components/MegaMenuMobile.tsx b/apps/admin/src/app/layouts/01__Default/components/MegaMenuMobile.tsx
index 63b2c64..eca44f3 100755
--- a/apps/admin/src/app/layouts/01__Default/components/MegaMenuMobile.tsx
+++ b/apps/admin/src/app/layouts/01__Default/components/MegaMenuMobile.tsx
@@ -163,7 +163,7 @@ export function MegaMenuMobile() {
         <AccordionMenuItem key={index} value={item.path || ''} className="text-[13px]">
           <Link to={item.path || '#'}>
             {item.icon && <item.icon data-slot="accordion-menu-icon" />}
-            <div className="flex items-center justify-between grow gap-2">
+            <div className="flex grow items-center justify-between gap-2">
               <span>{item.title}</span>
               {item.badge && (
                 <Badge variant="secondary" size="sm" className="ms-auto">
@@ -182,7 +182,7 @@ export function MegaMenuMobile() {
   // };
 
   return (
-    <div className="flex grow shrink-0 py-5 px-5">
+    <div className="flex shrink-0 grow px-5 py-5">
       <AccordionMenu
         selectedValue={pathname}
         matchPath={matchPath}
diff --git a/apps/admin/src/app/layouts/01__Default/components/Sidebar.tsx b/apps/admin/src/app/layouts/01__Default/components/Sidebar.tsx
index 9b3ad2e..b2a2cf6 100755
--- a/apps/admin/src/app/layouts/01__Default/components/Sidebar.tsx
+++ b/apps/admin/src/app/layouts/01__Default/components/Sidebar.tsx
@@ -12,7 +12,7 @@ export function Sidebar() {
   return (
     <div
       className={cn(
-        'sidebar bg-background lg:border-e lg:border-border lg:fixed lg:top-0 lg:bottom-0 lg:z-20 lg:flex flex-col items-stretch shrink-0',
+        'sidebar bg-background lg:border-border shrink-0 flex-col items-stretch lg:fixed lg:top-0 lg:bottom-0 lg:z-20 lg:flex lg:border-e',
         (settings.layouts[LayoutNames.DEFAULT].sidebarTheme === 'dark' ||
           pathname.includes('dark-sidebar')) &&
           'dark'
diff --git a/apps/admin/src/app/layouts/01__Default/components/SidebarHeader.tsx b/apps/admin/src/app/layouts/01__Default/components/SidebarHeader.tsx
index 649cb34..eff3244 100755
--- a/apps/admin/src/app/layouts/01__Default/components/SidebarHeader.tsx
+++ b/apps/admin/src/app/layouts/01__Default/components/SidebarHeader.tsx
@@ -17,7 +17,7 @@ export function SidebarHeader() {
   };
 
   return (
-    <div className="sidebar-header hidden lg:flex items-center relative justify-between px-3 lg:px-6 shrink-0">
+    <div className="sidebar-header relative hidden shrink-0 items-center justify-between px-3 lg:flex lg:px-6">
       <Link to="/">
         <div className="dark:hidden">
           {/* <img
@@ -50,7 +50,7 @@ export function SidebarHeader() {
         mode="icon"
         variant="outline"
         className={cn(
-          'size-7 absolute start-full top-2/4 rtl:translate-x-2/4 -translate-x-2/4 -translate-y-2/4',
+          'absolute start-full top-2/4 size-7 -translate-x-2/4 -translate-y-2/4 rtl:translate-x-2/4',
           settings.layouts[LayoutNames.DEFAULT].sidebarCollapse
             ? 'ltr:rotate-180'
             : 'rtl:rotate-180'
diff --git a/apps/admin/src/app/layouts/01__Default/components/SidebarMenu.tsx b/apps/admin/src/app/layouts/01__Default/components/SidebarMenu.tsx
index bdb1090..7d53e44 100755
--- a/apps/admin/src/app/layouts/01__Default/components/SidebarMenu.tsx
+++ b/apps/admin/src/app/layouts/01__Default/components/SidebarMenu.tsx
@@ -65,7 +65,7 @@ export function SidebarMenu() {
     } else {
       return (
         <AccordionMenuItem key={index} value={item.path || ''} className="text-sm font-medium">
-          <Link to={item.path || '#'} className="flex items-center justify-start grow gap-2">
+          <Link to={item.path || '#'} className="flex grow items-center justify-start gap-2">
             {item.icon && <item.icon data-slot="accordion-menu-icon" />}
             <span data-slot="accordion-menu-title">{item.title}</span>
           </Link>
@@ -165,7 +165,7 @@ export function SidebarMenu() {
   };
 
   return (
-    <div className="kt-scrollable-y-hover flex grow shrink-0 py-5 px-5 lg:max-h-[calc(100vh-5.5rem)]">
+    <div className="kt-scrollable-y-hover flex shrink-0 grow px-5 py-5 lg:max-h-[calc(100vh-5.5rem)]">
       <AccordionMenu
         selectedValue={pathname}
         matchPath={matchPath}
diff --git a/apps/admin/src/app/layouts/01__Default/components/Toolbar.tsx b/apps/admin/src/app/layouts/01__Default/components/Toolbar.tsx
index faa8421..f594b2f 100755
--- a/apps/admin/src/app/layouts/01__Default/components/Toolbar.tsx
+++ b/apps/admin/src/app/layouts/01__Default/components/Toolbar.tsx
@@ -30,7 +30,7 @@ function ToolbarBreadcrumbs() {
   }
 
   return (
-    <div className="flex [.header_&]:below-lg:hidden items-center gap-1.25 text-xs lg:text-sm font-medium mb-2.5 lg:mb-0">
+    <div className="[.header_&]:below-lg:hidden mb-2.5 flex items-center gap-1.25 text-xs font-medium lg:mb-0 lg:text-sm">
       <div className="breadcrumb flex items-center gap-1">
         {items.map((item, index) => {
           const isLast = index === items.length - 1;
@@ -53,7 +53,7 @@ function ToolbarBreadcrumbs() {
                   {item.title}
                 </span>
               )}
-              {!isLast && <ChevronRight className="size-3.5 muted-foreground" />}
+              {!isLast && <ChevronRight className="muted-foreground size-3.5" />}
             </Fragment>
           );
         })}
@@ -71,11 +71,11 @@ function ToolbarHeading({ title = '', description }: ToolbarHeadingProps) {
 
   return (
     <div className="flex flex-col justify-center gap-2">
-      <h1 className="text-xl font-medium leading-none text-mono">
+      <h1 className="text-mono text-xl leading-none font-medium">
         {title || item?.title || 'Untitled'}
       </h1>
       {description && (
-        <div className="flex items-center gap-2 text-sm font-normal text-muted-foreground">
+        <div className="text-muted-foreground flex items-center gap-2 text-sm font-normal">
           {description}
         </div>
       )}
diff --git a/apps/admin/src/app/layouts/02__HorizontalMenu/components/Footer.tsx b/apps/admin/src/app/layouts/02__HorizontalMenu/components/Footer.tsx
index b06f6f8..39d24e5 100755
--- a/apps/admin/src/app/layouts/02__HorizontalMenu/components/Footer.tsx
+++ b/apps/admin/src/app/layouts/02__HorizontalMenu/components/Footer.tsx
@@ -7,8 +7,8 @@ export function Footer() {
   return (
     <footer className="footer">
       <Container>
-        <div className="flex flex-col md:flex-row justify-center md:justify-between items-center gap-3 py-5">
-          <div className="flex order-2 md:order-1  gap-2 font-normal text-sm">
+        <div className="flex flex-col items-center justify-center gap-3 py-5 md:flex-row md:justify-between">
+          <div className="order-2 flex gap-2 text-sm font-normal md:order-1">
             <span className="text-muted-foreground">{currentYear} &copy;</span>
             <a
               href="https://keenthemes.com"
@@ -18,7 +18,7 @@ export function Footer() {
               Keenthemes Inc.
             </a>
           </div>
-          <nav className="flex order-1 md:order-2 gap-4 font-normal text-sm text-muted-foreground">
+          <nav className="text-muted-foreground order-1 flex gap-4 text-sm font-normal md:order-2">
             <a href={generalSettings.docsLink} target="_blank" className="hover:text-primary">
               Docs
             </a>
diff --git a/apps/admin/src/app/layouts/02__HorizontalMenu/components/Header.tsx b/apps/admin/src/app/layouts/02__HorizontalMenu/components/Header.tsx
index 7cfadea..e2c20e6 100755
--- a/apps/admin/src/app/layouts/02__HorizontalMenu/components/Header.tsx
+++ b/apps/admin/src/app/layouts/02__HorizontalMenu/components/Header.tsx
@@ -30,13 +30,13 @@ export function Header() {
   return (
     <header
       className={cn(
-        'flex items-center transition-[height] shrink-0 h-(--header-height) in-data-[sticky-header=on]:pe-(--removed-body-scroll-bar-size,0px)',
+        'flex h-(--header-height) shrink-0 items-center transition-[height] in-data-[sticky-header=on]:pe-(--removed-body-scroll-bar-size,0px)',
         settings.layouts[LayoutNames.HORIZONTAL_MENU].headerSticky &&
           headerStickyOn &&
-          'transition-[height] fixed z-10 top-0 start-0 end-0 shadow-xs backdrop-blur-md bg-background/70'
+          'bg-background/70 fixed start-0 end-0 top-0 z-10 shadow-xs backdrop-blur-md transition-[height]'
       )}
     >
-      <Container className="flex justify-between items-center lg:gap-4">
+      <Container className="flex items-center justify-between lg:gap-4">
         <HeaderLogo />
         <HeaderTopbar />
       </Container>
diff --git a/apps/admin/src/app/layouts/02__HorizontalMenu/components/HeaderLogo.tsx b/apps/admin/src/app/layouts/02__HorizontalMenu/components/HeaderLogo.tsx
index 68b4fc8..19dc848 100755
--- a/apps/admin/src/app/layouts/02__HorizontalMenu/components/HeaderLogo.tsx
+++ b/apps/admin/src/app/layouts/02__HorizontalMenu/components/HeaderLogo.tsx
@@ -30,20 +30,20 @@ export function HeaderLogo() {
       <Link to="/" className="shrink-0">
         <img
           src={toAbsoluteUrl('/media/app/mini-logo-circle.svg')}
-          className="dark:hidden min-h-10.5"
+          className="min-h-10.5 dark:hidden"
           alt="logo"
         />
         <img
           src={toAbsoluteUrl('/media/app/mini-logo-circle-dark.svg')}
-          className="hidden dark:inline-block min-h-10.5"
+          className="hidden min-h-10.5 dark:inline-block"
           alt="logo"
         />
       </Link>
 
       {/* Menu Section */}
       <div className="flex items-center gap-3">
-        <h3 className="text-accent-foreground text-base hidden md:block">Metronic Team</h3>
-        <span className="text-sm text-muted-foreground font-medium hidden md:inline">/</span>
+        <h3 className="text-accent-foreground hidden text-base md:block">Metronic Team</h3>
+        <span className="text-muted-foreground hidden text-sm font-medium md:inline">/</span>
 
         {/* <DropdownMenu>
           <DropdownMenuTrigger className="cursor-pointer text-mono font-medium flex items-center gap-2">
diff --git a/apps/admin/src/app/layouts/02__HorizontalMenu/components/HeaderTopbar.tsx b/apps/admin/src/app/layouts/02__HorizontalMenu/components/HeaderTopbar.tsx
index 6ff9e2b..1779a68 100755
--- a/apps/admin/src/app/layouts/02__HorizontalMenu/components/HeaderTopbar.tsx
+++ b/apps/admin/src/app/layouts/02__HorizontalMenu/components/HeaderTopbar.tsx
@@ -35,7 +35,7 @@ export function HeaderTopbar() {
       <UserDropdownMenu
         trigger={
           <img
-            className="cursor-pointer size-9 rounded-full justify-center border border-gray-500 shrink-0"
+            className="size-9 shrink-0 cursor-pointer justify-center rounded-full border border-gray-500"
             src={toAbsoluteUrl('/media/avatars/gray/5.png')}
             alt=""
           />
diff --git a/apps/admin/src/app/layouts/02__HorizontalMenu/components/Navbar.tsx b/apps/admin/src/app/layouts/02__HorizontalMenu/components/Navbar.tsx
index 87b62fc..36cca9e 100755
--- a/apps/admin/src/app/layouts/02__HorizontalMenu/components/Navbar.tsx
+++ b/apps/admin/src/app/layouts/02__HorizontalMenu/components/Navbar.tsx
@@ -4,8 +4,8 @@ import { NavbarMenu } from './NavbarMenu';
 
 export function Navbar() {
   return (
-    <div className="border-b border-border pb-5 lg:pb-0 mb-5 lg:mb-10">
-      <Container className="flex flex-wrap justify-between items-center gap-2">
+    <div className="border-border mb-5 border-b pb-5 lg:mb-10 lg:pb-0">
+      <Container className="flex flex-wrap items-center justify-between gap-2">
         <NavbarMenu />
         <NavbarLinks />
       </Container>
diff --git a/apps/admin/src/app/layouts/02__HorizontalMenu/components/NavbarLinks.tsx b/apps/admin/src/app/layouts/02__HorizontalMenu/components/NavbarLinks.tsx
index ee13219..765416b 100755
--- a/apps/admin/src/app/layouts/02__HorizontalMenu/components/NavbarLinks.tsx
+++ b/apps/admin/src/app/layouts/02__HorizontalMenu/components/NavbarLinks.tsx
@@ -1,6 +1,6 @@
 export function NavbarLinks() {
   return (
-    <div className="flex items-center text-sm gap-5 lg:pb-1">
+    <div className="flex items-center gap-5 text-sm lg:pb-1">
       <a className="hover:text-primary" href="https://www.youtube.com/c/KeenThemesTuts/videos">
         Videos
       </a>
diff --git a/apps/admin/src/app/layouts/02__HorizontalMenu/components/NavbarMenu.tsx b/apps/admin/src/app/layouts/02__HorizontalMenu/components/NavbarMenu.tsx
index fb7c915..6990be0 100755
--- a/apps/admin/src/app/layouts/02__HorizontalMenu/components/NavbarMenu.tsx
+++ b/apps/admin/src/app/layouts/02__HorizontalMenu/components/NavbarMenu.tsx
@@ -33,11 +33,11 @@ export function NavbarMenu() {
           <MenubarMenu key={index}>
             <MenubarTrigger
               className={cn(
-                'flex items-center gap-1.5 px-3 py-3.5 text-sm text-secondary-foreground text-nowrap',
+                'text-secondary-foreground flex items-center gap-1.5 px-3 py-3.5 text-sm text-nowrap',
                 'rounded-none border-b-2 border-transparent bg-transparent!',
                 'hover:text-mono hover:bg-transparent',
                 'focus:text-mono focus:bg-transparent',
-                'data-[state=open]:bg-transparent data-[state=open]:text-mono',
+                'data-[state=open]:text-mono data-[state=open]:bg-transparent',
                 'data-[here=true]:text-mono data-[here=true]:border-mono'
               )}
               data-active={isActive(item.path) || undefined}
@@ -57,7 +57,7 @@ export function NavbarMenu() {
             <MenubarTrigger
               asChild
               className={cn(
-                'flex items-center py-3.5 text-sm text-secondary-foreground px-3 text-nowrap',
+                'text-secondary-foreground flex items-center px-3 py-3.5 text-sm text-nowrap',
                 'rounded-none border-b-2 border-transparent bg-transparent!',
                 'hover:text-mono hover:bg-transparent',
                 'focus:text-mono focus:bg-transparent',
@@ -112,7 +112,7 @@ export function NavbarMenu() {
   return (
     <div className="grid">
       <div className="kt-scrollable-x-auto">
-        <Menubar className="flex items-stretch border-none bg-transparent p-0 h-auto">
+        <Menubar className="flex h-auto items-stretch border-none bg-transparent p-0">
           {buildMenu(navbarMenu.children as MenuConfig)}
         </Menubar>
       </div>
diff --git a/apps/admin/src/app/layouts/02__HorizontalMenu/components/Toolbar.tsx b/apps/admin/src/app/layouts/02__HorizontalMenu/components/Toolbar.tsx
index 5a30ddd..95cbf35 100755
--- a/apps/admin/src/app/layouts/02__HorizontalMenu/components/Toolbar.tsx
+++ b/apps/admin/src/app/layouts/02__HorizontalMenu/components/Toolbar.tsx
@@ -15,7 +15,7 @@ export interface ToolbarHeadingProps {
 function Toolbar({ children }: { children?: ReactNode }) {
   return (
     <div className="mb-5 lg:mb-10">
-      <Container className="flex items-center justify-between flex-wrap gap-5">
+      <Container className="flex flex-wrap items-center justify-between gap-5">
         {children}
       </Container>
     </div>
@@ -37,7 +37,7 @@ function ToolbarBreadcrumbs() {
   }
 
   return (
-    <div className="flex [.header_&]:below-lg:hidden items-center gap-1.25 text-xs lg:text-sm font-medium mb-2.5 lg:mb-0">
+    <div className="[.header_&]:below-lg:hidden mb-2.5 flex items-center gap-1.25 text-xs font-medium lg:mb-0 lg:text-sm">
       <div className="breadcrumb flex items-center gap-1">
         {items.map((item, index) => {
           const isLast = index === items.length - 1;
@@ -60,7 +60,7 @@ function ToolbarBreadcrumbs() {
                   {item.title}
                 </span>
               )}
-              {!isLast && <ChevronRight className="size-3.5 muted-foreground" />}
+              {!isLast && <ChevronRight className="muted-foreground size-3.5" />}
             </Fragment>
           );
         })}
@@ -76,8 +76,8 @@ const ToolbarHeading = ({ title = '' }: ToolbarHeadingProps) => {
   const item = getCurrentItem(menuConfig);
 
   return (
-    <div className="flex items-center flex-wrap gap-1 lg:gap-5">
-      <h1 className="font-medium text-lg text-mono">{title || item?.title}</h1>
+    <div className="flex flex-wrap items-center gap-1 lg:gap-5">
+      <h1 className="text-mono text-lg font-medium">{title || item?.title}</h1>
       <ToolbarBreadcrumbs />
     </div>
   );
diff --git a/apps/admin/src/app/layouts/03__CompactSidebar/components/Footer.tsx b/apps/admin/src/app/layouts/03__CompactSidebar/components/Footer.tsx
index b06f6f8..39d24e5 100755
--- a/apps/admin/src/app/layouts/03__CompactSidebar/components/Footer.tsx
+++ b/apps/admin/src/app/layouts/03__CompactSidebar/components/Footer.tsx
@@ -7,8 +7,8 @@ export function Footer() {
   return (
     <footer className="footer">
       <Container>
-        <div className="flex flex-col md:flex-row justify-center md:justify-between items-center gap-3 py-5">
-          <div className="flex order-2 md:order-1  gap-2 font-normal text-sm">
+        <div className="flex flex-col items-center justify-center gap-3 py-5 md:flex-row md:justify-between">
+          <div className="order-2 flex gap-2 text-sm font-normal md:order-1">
             <span className="text-muted-foreground">{currentYear} &copy;</span>
             <a
               href="https://keenthemes.com"
@@ -18,7 +18,7 @@ export function Footer() {
               Keenthemes Inc.
             </a>
           </div>
-          <nav className="flex order-1 md:order-2 gap-4 font-normal text-sm text-muted-foreground">
+          <nav className="text-muted-foreground order-1 flex gap-4 text-sm font-normal md:order-2">
             <a href={generalSettings.docsLink} target="_blank" className="hover:text-primary">
               Docs
             </a>
diff --git a/apps/admin/src/app/layouts/03__CompactSidebar/components/Header.tsx b/apps/admin/src/app/layouts/03__CompactSidebar/components/Header.tsx
index a2cffb1..685d266 100755
--- a/apps/admin/src/app/layouts/03__CompactSidebar/components/Header.tsx
+++ b/apps/admin/src/app/layouts/03__CompactSidebar/components/Header.tsx
@@ -4,8 +4,8 @@ import { HeaderTopbar } from './HeaderTopbar';
 
 export function Header() {
   return (
-    <header className="flex items-center fixed z-10 top-0 left-0 right-0 shrink-0 h-(--header-height) bg-muted">
-      <Container className="flex justify-between items-stretch px-5 lg:ps-0 lg:gap-4">
+    <header className="bg-muted fixed top-0 right-0 left-0 z-10 flex h-(--header-height) shrink-0 items-center">
+      <Container className="flex items-stretch justify-between px-5 lg:gap-4 lg:ps-0">
         <HeaderLogo />
         <HeaderTopbar />
       </Container>
diff --git a/apps/admin/src/app/layouts/03__CompactSidebar/components/HeaderLogo.tsx b/apps/admin/src/app/layouts/03__CompactSidebar/components/HeaderLogo.tsx
index b19e47c..4088a69 100755
--- a/apps/admin/src/app/layouts/03__CompactSidebar/components/HeaderLogo.tsx
+++ b/apps/admin/src/app/layouts/03__CompactSidebar/components/HeaderLogo.tsx
@@ -27,16 +27,16 @@ export function HeaderLogo() {
   return (
     <div className="flex items-center gap-2.5">
       {/* Logo */}
-      <div className="flex items-center justify-center lg:w-(--sidebar-width) shrink-0">
+      <div className="flex shrink-0 items-center justify-center lg:w-(--sidebar-width)">
         <Sheet>
           <SheetTrigger asChild>
             <Button variant="ghost" mode="icon" className="-ms-2 lg:hidden">
               <Menu className="size-4!" />
             </Button>
           </SheetTrigger>
-          <SheetContent className="p-0 gap-0 w-(--sidebar-width)" side="left" close={false}>
-            <SheetHeader className="p-0 space-y-0" />
-            <SheetBody className="p-0 overflow-y-auto">
+          <SheetContent className="w-(--sidebar-width) gap-0 p-0" side="left" close={false}>
+            <SheetHeader className="space-y-0 p-0" />
+            <SheetBody className="overflow-y-auto p-0">
               <SidebarMenu />
             </SheetBody>
           </SheetContent>
@@ -45,12 +45,12 @@ export function HeaderLogo() {
         <Link to="/" className="mx-1">
           <img
             src={toAbsoluteUrl('/media/app/mini-logo-primary.svg')}
-            className="dark:hidden min-h-6"
+            className="min-h-6 dark:hidden"
             alt="logo"
           />
           <img
             src={toAbsoluteUrl('/media/app/mini-logo-primary-dark.svg')}
-            className="hidden dark:inline-block min-h-6"
+            className="hidden min-h-6 dark:inline-block"
             alt="logo"
           />
         </Link>
@@ -58,8 +58,8 @@ export function HeaderLogo() {
 
       {/* Menu Section */}
       <div className="flex items-center gap-3">
-        <h3 className="text-accent-foreground text-base hidden md:block">Metronic Team</h3>
-        <span className="text-sm text-muted-foreground font-medium hidden md:inline">/</span>
+        <h3 className="text-accent-foreground hidden text-base md:block">Metronic Team</h3>
+        <span className="text-muted-foreground hidden text-sm font-medium md:inline">/</span>
 
         {/* <DropdownMenu>
           <DropdownMenuTrigger className="cursor-pointer text-mono font-medium flex items-center gap-2">
diff --git a/apps/admin/src/app/layouts/03__CompactSidebar/components/HeaderTopbar.tsx b/apps/admin/src/app/layouts/03__CompactSidebar/components/HeaderTopbar.tsx
index 197109b..293aed2 100755
--- a/apps/admin/src/app/layouts/03__CompactSidebar/components/HeaderTopbar.tsx
+++ b/apps/admin/src/app/layouts/03__CompactSidebar/components/HeaderTopbar.tsx
@@ -45,7 +45,7 @@ export function HeaderTopbar() {
       <UserDropdownMenu
         trigger={
           <img
-            className="size-9 rounded-full border-2 border-input shrink-0 cursor-pointer"
+            className="border-input size-9 shrink-0 cursor-pointer rounded-full border-2"
             src={toAbsoluteUrl('/media/avatars/gray/5.png')}
             alt="User Avatar"
           />
diff --git a/apps/admin/src/app/layouts/03__CompactSidebar/components/Navbar.tsx b/apps/admin/src/app/layouts/03__CompactSidebar/components/Navbar.tsx
index 9de48ca..966ce6c 100755
--- a/apps/admin/src/app/layouts/03__CompactSidebar/components/Navbar.tsx
+++ b/apps/admin/src/app/layouts/03__CompactSidebar/components/Navbar.tsx
@@ -4,9 +4,9 @@ import { NavbarMenu } from './NavbarMenu';
 
 export function Navbar() {
   return (
-    <div className="flex items-stretch lg:fixed z-5 top-(--header-height) start-(--sidebar-width) end-5 h-(--navbar-height) mx-5 lg:mx-0 bg-muted">
-      <div className="rounded-t-xl border border-border bg-background flex items-stretch grow">
-        <Container className="flex justify-between items-stretch gap-5">
+    <div className="bg-muted start-(--sidebar-width) end-5 top-(--header-height) z-5 mx-5 flex h-(--navbar-height) items-stretch lg:fixed lg:mx-0">
+      <div className="border-border bg-background flex grow items-stretch rounded-t-xl border">
+        <Container className="flex items-stretch justify-between gap-5">
           <NavbarMenu />
           <NavbarLinks />
         </Container>
diff --git a/apps/admin/src/app/layouts/03__CompactSidebar/components/NavbarMenu.tsx b/apps/admin/src/app/layouts/03__CompactSidebar/components/NavbarMenu.tsx
index bba3cae..99fefa8 100755
--- a/apps/admin/src/app/layouts/03__CompactSidebar/components/NavbarMenu.tsx
+++ b/apps/admin/src/app/layouts/03__CompactSidebar/components/NavbarMenu.tsx
@@ -33,11 +33,11 @@ export function NavbarMenu() {
           <MenubarMenu key={index}>
             <MenubarTrigger
               className={cn(
-                'flex items-center gap-1 px-0 py-3.5 text-sm text-secondary-foreground text-nowrap',
+                'text-secondary-foreground flex items-center gap-1 px-0 py-3.5 text-sm text-nowrap',
                 'rounded-none border-b-2 border-transparent bg-transparent!',
                 'hover:text-mono hover:bg-transparent',
                 'focus:text-mono focus:bg-transparent',
-                'data-[state=open]:bg-transparent data-[state=open]:text-mono',
+                'data-[state=open]:text-mono data-[state=open]:bg-transparent',
                 'data-[here=true]:text-mono data-[here=true]:border-mono'
               )}
               data-active={isActive(item.path) || undefined}
@@ -57,7 +57,7 @@ export function NavbarMenu() {
             <MenubarTrigger
               asChild
               className={cn(
-                'flex items-center py-3.5 text-sm text-secondary-foreground px-3 text-nowrap',
+                'text-secondary-foreground flex items-center px-3 py-3.5 text-sm text-nowrap',
                 'rounded-none border-b-2 border-transparent bg-transparent!',
                 'hover:text-mono hover:bg-transparent',
                 'focus:text-mono focus:bg-transparent',
@@ -112,7 +112,7 @@ export function NavbarMenu() {
   return (
     <div className="grid">
       <div className="kt-scrollable-x-auto flex items-stretch">
-        <Menubar className="space-x-0 flex items-stretch border-none bg-transparent gap-5 p-0 h-auto">
+        <Menubar className="flex h-auto items-stretch gap-5 space-x-0 border-none bg-transparent p-0">
           {buildMenu(navbarMenu.children as MenuConfig)}
         </Menubar>
       </div>
diff --git a/apps/admin/src/app/layouts/03__CompactSidebar/components/Sidebar.tsx b/apps/admin/src/app/layouts/03__CompactSidebar/components/Sidebar.tsx
index d0b8056..116123b 100755
--- a/apps/admin/src/app/layouts/03__CompactSidebar/components/Sidebar.tsx
+++ b/apps/admin/src/app/layouts/03__CompactSidebar/components/Sidebar.tsx
@@ -2,9 +2,9 @@ import { SidebarMenu } from './SidebarMenu';
 
 export function Sidebar() {
   return (
-    <div className="fixed w-(--sidebar-width) lg:top-(--header-height) top-0 bottom-0 z-20 lg:flex flex-col items-stretch shrink-0 group py-3 lg:py-0">
-      <div className="flex grow shrink-0">
-        <div className="kt-scrollable-y-auto grow gap-2.5 shrink-0 flex items-center flex-col max-h-[calc(100vh-3rem)]">
+    <div className="group fixed top-0 bottom-0 z-20 w-(--sidebar-width) shrink-0 flex-col items-stretch py-3 lg:top-(--header-height) lg:flex lg:py-0">
+      <div className="flex shrink-0 grow">
+        <div className="kt-scrollable-y-auto flex max-h-[calc(100vh-3rem)] shrink-0 grow flex-col items-center gap-2.5">
           <SidebarMenu />
         </div>
       </div>
diff --git a/apps/admin/src/app/layouts/03__CompactSidebar/components/SidebarMenu.tsx b/apps/admin/src/app/layouts/03__CompactSidebar/components/SidebarMenu.tsx
index 3a7b7f7..9fc9023 100755
--- a/apps/admin/src/app/layouts/03__CompactSidebar/components/SidebarMenu.tsx
+++ b/apps/admin/src/app/layouts/03__CompactSidebar/components/SidebarMenu.tsx
@@ -69,7 +69,7 @@ export function SidebarMenu() {
 
   return (
     <TooltipProvider>
-      <div className="flex flex-col grow items-center py-3.5 lg:py-0 gap-2.5">
+      <div className="flex grow flex-col items-center gap-2.5 py-3.5 lg:py-0">
         {items.map((item, index) => (
           <Tooltip key={index}>
             <TooltipTrigger asChild>
@@ -79,8 +79,8 @@ export function SidebarMenu() {
                 mode="icon"
                 {...(item.active ? { 'data-state': 'open' } : {})}
                 className={cn(
-                  'data-[state=open]:bg-background data-[state=open]:border data-[state=open]:border-input data-[state=open]:text-primary',
-                  'hover:bg-background hover:border hover:border-input hover:text-primary'
+                  'data-[state=open]:bg-background data-[state=open]:border-input data-[state=open]:text-primary data-[state=open]:border',
+                  'hover:bg-background hover:border-input hover:text-primary hover:border'
                 )}
               >
                 <Link
diff --git a/apps/admin/src/app/layouts/03__CompactSidebar/components/Toolbar.tsx b/apps/admin/src/app/layouts/03__CompactSidebar/components/Toolbar.tsx
index 56a8c6f..594197e 100755
--- a/apps/admin/src/app/layouts/03__CompactSidebar/components/Toolbar.tsx
+++ b/apps/admin/src/app/layouts/03__CompactSidebar/components/Toolbar.tsx
@@ -15,7 +15,7 @@ export interface ToolbarHeadingProps {
 function Toolbar({ children }: { children?: ReactNode }) {
   return (
     <div className="mb-5 lg:mb-10">
-      <Container className="flex items-center justify-between flex-wrap gap-5">
+      <Container className="flex flex-wrap items-center justify-between gap-5">
         {children}
       </Container>
     </div>
@@ -38,7 +38,7 @@ function ToolbarBreadcrumbs() {
   }
 
   return (
-    <div className="flex items-center gap-1.5 text-xs lg:text-sm font-medium mb-2.5 lg:mb-0">
+    <div className="mb-2.5 flex items-center gap-1.5 text-xs font-medium lg:mb-0 lg:text-sm">
       <div className="breadcrumb flex items-center gap-1">
         {items.map((item, index) => {
           const isLast = index === items.length - 1;
@@ -61,7 +61,7 @@ function ToolbarBreadcrumbs() {
                   {item.title}
                 </span>
               )}
-              {!isLast && <ChevronRight className="size-3.5 muted-foreground" />}
+              {!isLast && <ChevronRight className="muted-foreground size-3.5" />}
             </Fragment>
           );
         })}
@@ -77,8 +77,8 @@ const ToolbarHeading = ({ title = '' }: ToolbarHeadingProps) => {
   const item = getCurrentItem(menuConfig);
 
   return (
-    <div className="flex items-center flex-wrap gap-1 lg:gap-5">
-      <h1 className="font-medium text-lg text-mono">{title || item?.title}</h1>
+    <div className="flex flex-wrap items-center gap-1 lg:gap-5">
+      <h1 className="text-mono text-lg font-medium">{title || item?.title}</h1>
       <ToolbarBreadcrumbs />
     </div>
   );
diff --git a/apps/admin/src/app/layouts/03__CompactSidebar/layout.tsx b/apps/admin/src/app/layouts/03__CompactSidebar/layout.tsx
index 48b9398..2ce9bdc 100755
--- a/apps/admin/src/app/layouts/03__CompactSidebar/layout.tsx
+++ b/apps/admin/src/app/layouts/03__CompactSidebar/layout.tsx
@@ -37,13 +37,13 @@ export function CompactSidebarLayout() {
       <div className="flex grow">
         <Header />
 
-        <div className="flex flex-col lg:flex-row grow pt-(--header-height)">
+        <div className="flex grow flex-col pt-(--header-height) lg:flex-row">
           {!isMobileMode && <Sidebar />}
 
           <Navbar />
 
-          <div className="flex grow rounded-b-xl bg-background border-x border-b border-border lg:mt-(--navbar-height) mx-5 lg:ms-(--sidebar-width) mb-5">
-            <div className="flex flex-col grow kt-scrollable-y lg:[scrollbar-width:auto] pt-7 lg:**:data-[slot=container]:pe-2">
+          <div className="bg-background border-border mx-5 mb-5 flex grow rounded-b-xl border-x border-b lg:ms-(--sidebar-width) lg:mt-(--navbar-height)">
+            <div className="kt-scrollable-y flex grow flex-col pt-7 lg:[scrollbar-width:auto] lg:**:data-[slot=container]:pe-2">
               <main className="grow" role="content">
                 {pathname !== '/' && (
                   <Toolbar>
diff --git a/apps/admin/src/app/layouts/04__TwoColumnSidebar/components/Footer.tsx b/apps/admin/src/app/layouts/04__TwoColumnSidebar/components/Footer.tsx
index 32b99c4..39d24e5 100755
--- a/apps/admin/src/app/layouts/04__TwoColumnSidebar/components/Footer.tsx
+++ b/apps/admin/src/app/layouts/04__TwoColumnSidebar/components/Footer.tsx
@@ -7,8 +7,8 @@ export function Footer() {
   return (
     <footer className="footer">
       <Container>
-        <div className="flex flex-col md:flex-row justify-center md:justify-between items-center gap-3 py-5">
-          <div className="flex order-2 md:order-1 gap-2 font-normal text-sm">
+        <div className="flex flex-col items-center justify-center gap-3 py-5 md:flex-row md:justify-between">
+          <div className="order-2 flex gap-2 text-sm font-normal md:order-1">
             <span className="text-muted-foreground">{currentYear} &copy;</span>
             <a
               href="https://keenthemes.com"
@@ -18,7 +18,7 @@ export function Footer() {
               Keenthemes Inc.
             </a>
           </div>
-          <nav className="flex order-1 md:order-2 gap-4 font-normal text-sm text-muted-foreground">
+          <nav className="text-muted-foreground order-1 flex gap-4 text-sm font-normal md:order-2">
             <a href={generalSettings.docsLink} target="_blank" className="hover:text-primary">
               Docs
             </a>
diff --git a/apps/admin/src/app/layouts/04__TwoColumnSidebar/components/Header.tsx b/apps/admin/src/app/layouts/04__TwoColumnSidebar/components/Header.tsx
index f166f71..a30498d 100755
--- a/apps/admin/src/app/layouts/04__TwoColumnSidebar/components/Header.tsx
+++ b/apps/admin/src/app/layouts/04__TwoColumnSidebar/components/Header.tsx
@@ -18,17 +18,17 @@ export function Header() {
   }, [pathname]);
 
   return (
-    <header className="flex lg:hidden items-center fixed z-10 top-0 start-0 end-0 shrink-0 bg-(--page-bg) dark:bg-(--page-bg-dark) h-(--header-height)">
-      <Container className="flex items-center justify-between flex-wrap gap-3">
+    <header className="fixed start-0 end-0 top-0 z-10 flex h-(--header-height) shrink-0 items-center bg-(--page-bg) lg:hidden dark:bg-(--page-bg-dark)">
+      <Container className="flex flex-wrap items-center justify-between gap-3">
         <Link to="/">
           <img
             src={toAbsoluteUrl('/media/app/mini-logo-gray.svg')}
-            className="dark:hidden min-h-7.5"
+            className="min-h-7.5 dark:hidden"
             alt=""
           />
           <img
             src={toAbsoluteUrl('/media/app/mini-logo-gray-dark.svg')}
-            className="hidden dark:block min-h-7.5"
+            className="hidden min-h-7.5 dark:block"
             alt=""
           />
         </Link>
@@ -39,9 +39,9 @@ export function Header() {
               <Menu />
             </Button>
           </SheetTrigger>
-          <SheetContent className="p-0 gap-0 w-(--sidebar-width)" side="left" close={false}>
-            <SheetHeader className="p-0 space-y-0" />
-            <SheetBody className="p-0 flex items-stretch shrink-0 overflow-y-auto">
+          <SheetContent className="w-(--sidebar-width) gap-0 p-0" side="left" close={false}>
+            <SheetHeader className="space-y-0 p-0" />
+            <SheetBody className="flex shrink-0 items-stretch overflow-y-auto p-0">
               <SidebarPrimary />
               <SidebarSecondary />
             </SheetBody>
diff --git a/apps/admin/src/app/layouts/04__TwoColumnSidebar/components/Sidebar.tsx b/apps/admin/src/app/layouts/04__TwoColumnSidebar/components/Sidebar.tsx
index c37a3f1..cadf301 100755
--- a/apps/admin/src/app/layouts/04__TwoColumnSidebar/components/Sidebar.tsx
+++ b/apps/admin/src/app/layouts/04__TwoColumnSidebar/components/Sidebar.tsx
@@ -3,7 +3,7 @@ import { SidebarSecondary } from './SidebarSecondary';
 
 export function Sidebar() {
   return (
-    <div className="fixed top-0 bottom-0 z-20 flex items-stretch shrink-0 w-(--sidebar-width) bg-muted">
+    <div className="bg-muted fixed top-0 bottom-0 z-20 flex w-(--sidebar-width) shrink-0 items-stretch">
       <SidebarPrimary />
       <SidebarSecondary />
     </div>
diff --git a/apps/admin/src/app/layouts/04__TwoColumnSidebar/components/SidebarMenuDefault.tsx b/apps/admin/src/app/layouts/04__TwoColumnSidebar/components/SidebarMenuDefault.tsx
index 367849b..a7de4d9 100755
--- a/apps/admin/src/app/layouts/04__TwoColumnSidebar/components/SidebarMenuDefault.tsx
+++ b/apps/admin/src/app/layouts/04__TwoColumnSidebar/components/SidebarMenuDefault.tsx
@@ -64,7 +64,7 @@ export function SidebarMenuDefault() {
     } else {
       return (
         <AccordionMenuItem key={index} value={item.path || ''} className="text-sm">
-          <Link to={item.path || '#'} className="flex items-center justify-between grow gap-2">
+          <Link to={item.path || '#'} className="flex grow items-center justify-between gap-2">
             {item.icon && <item.icon data-slot="accordion-menu-icon" />}
             <span data-slot="accordion-menu-title">{item.title}</span>
           </Link>
diff --git a/apps/admin/src/app/layouts/04__TwoColumnSidebar/components/SidebarPrimary.tsx b/apps/admin/src/app/layouts/04__TwoColumnSidebar/components/SidebarPrimary.tsx
index 29d7609..6e4e40e 100755
--- a/apps/admin/src/app/layouts/04__TwoColumnSidebar/components/SidebarPrimary.tsx
+++ b/apps/admin/src/app/layouts/04__TwoColumnSidebar/components/SidebarPrimary.tsx
@@ -101,25 +101,25 @@ export function SidebarPrimary() {
 
   return (
     <TooltipProvider>
-      <div className="flex flex-col items-stretch shrink-0 gap-5 py-5 w-17.5 border-e border-input">
-        <div ref={headerRef} className="hidden lg:flex items-center justify-center shrink-0">
+      <div className="border-input flex w-17.5 shrink-0 flex-col items-stretch gap-5 border-e py-5">
+        <div ref={headerRef} className="hidden shrink-0 items-center justify-center lg:flex">
           <Link to="/">
             <img
               src={toAbsoluteUrl('/media/app/mini-logo-gray.svg')}
-              className="dark:hidden min-h-7.5"
+              className="min-h-7.5 dark:hidden"
               alt=""
             />
             <img
               src={toAbsoluteUrl('/media/app/mini-logo-gray-dark.svg')}
-              className="hidden dark:block min-h-7.5"
+              className="hidden min-h-7.5 dark:block"
               alt=""
             />
           </Link>
         </div>
 
-        <div className="flex grow shrink-0">
+        <div className="flex shrink-0 grow">
           <div
-            className="kt-scrollable-y-hover grow gap-2.5 shrink-0 flex ps-4 flex-col"
+            className="kt-scrollable-y-hover flex shrink-0 grow flex-col gap-2.5 ps-4"
             style={{ height: `${scrollableHeight}px` }}
           >
             {menuItems.map((item, index) => (
@@ -131,9 +131,9 @@ export function SidebarPrimary() {
                     mode="icon"
                     {...(item === selectedMenuItem ? { 'data-state': 'open' } : {})}
                     className={cn(
-                      'shrink-0 rounded-md size-9',
-                      'data-[state=open]:bg-background data-[state=open]:border data-[state=open]:border-input data-[state=open]:text-primary',
-                      'hover:bg-background hover:border hover:border-input hover:text-primary'
+                      'size-9 shrink-0 rounded-md',
+                      'data-[state=open]:bg-background data-[state=open]:border-input data-[state=open]:text-primary data-[state=open]:border',
+                      'hover:bg-background hover:border-input hover:text-primary hover:border'
                     )}
                   >
                     <Link to={item.path}>
@@ -147,7 +147,7 @@ export function SidebarPrimary() {
           </div>
         </div>
 
-        <div ref={footerRef} className="flex flex-col gap-4 items-center shrink-0">
+        <div ref={footerRef} className="flex shrink-0 flex-col items-center gap-4">
           {/* <ChatSheet
             trigger={
               <Button
@@ -173,7 +173,7 @@ export function SidebarPrimary() {
           <UserDropdownMenu
             trigger={
               <img
-                className="size-9 rounded-full border border-border shrink-0 cursor-pointer"
+                className="border-border size-9 shrink-0 cursor-pointer rounded-full border"
                 src={toAbsoluteUrl('/media/avatars/300-2.png')}
                 alt="User Avatar"
               />
diff --git a/apps/admin/src/app/layouts/04__TwoColumnSidebar/components/SidebarSecondary.tsx b/apps/admin/src/app/layouts/04__TwoColumnSidebar/components/SidebarSecondary.tsx
index 958ad99..469a516 100755
--- a/apps/admin/src/app/layouts/04__TwoColumnSidebar/components/SidebarSecondary.tsx
+++ b/apps/admin/src/app/layouts/04__TwoColumnSidebar/components/SidebarSecondary.tsx
@@ -6,7 +6,7 @@ export function SidebarSecondary() {
   const { pathname } = useLocation();
 
   return (
-    <div className="grow shrink-0 ps-3.5 kt-scrollable-y-hover max-h-[calc(100vh-2rem)] pe-1 my-5">
+    <div className="kt-scrollable-y-hover my-5 max-h-[calc(100vh-2rem)] shrink-0 grow ps-3.5 pe-1">
       {pathname === '/' ? <SidebarMenuDashboard /> : <SidebarMenuDefault />}
     </div>
   );
diff --git a/apps/admin/src/app/layouts/04__TwoColumnSidebar/components/Toolbar.tsx b/apps/admin/src/app/layouts/04__TwoColumnSidebar/components/Toolbar.tsx
index c58def1..196da5b 100755
--- a/apps/admin/src/app/layouts/04__TwoColumnSidebar/components/Toolbar.tsx
+++ b/apps/admin/src/app/layouts/04__TwoColumnSidebar/components/Toolbar.tsx
@@ -14,7 +14,7 @@ export interface ToolbarHeadingProps {
 function Toolbar({ children }: { children?: ReactNode }) {
   return (
     <div className="mb-5">
-      <Container className="flex items-center justify-between flex-wrap gap-5">
+      <Container className="flex flex-wrap items-center justify-between gap-5">
         {children}
       </Container>
     </div>
@@ -73,8 +73,8 @@ const ToolbarHeading = ({ title = '' }: ToolbarHeadingProps) => {
   const item = getCurrentItem(menuConfig);
 
   return (
-    <div className="flex items-center flex-wrap gap-1 lg:gap-5">
-      <h1 className="font-medium text-lg text-mono">{title || item?.title}</h1>
+    <div className="flex flex-wrap items-center gap-1 lg:gap-5">
+      <h1 className="text-mono text-lg font-medium">{title || item?.title}</h1>
       <ToolbarBreadcrumbs />
     </div>
   );
diff --git a/apps/admin/src/app/layouts/04__TwoColumnSidebar/layout.tsx b/apps/admin/src/app/layouts/04__TwoColumnSidebar/layout.tsx
index b9a3a27..0bd396a 100755
--- a/apps/admin/src/app/layouts/04__TwoColumnSidebar/layout.tsx
+++ b/apps/admin/src/app/layouts/04__TwoColumnSidebar/layout.tsx
@@ -36,11 +36,11 @@ export function TwoColumnSidebarLayout() {
       <div className="flex grow">
         {isMobileMode && <Header />}
 
-        <div className="flex flex-col lg:flex-row grow pt-(--header-height) lg:pt-0">
+        <div className="flex grow flex-col pt-(--header-height) lg:flex-row lg:pt-0">
           {!isMobileMode && <Sidebar />}
 
-          <div className="flex grow rounded-xl bg-background border border-input lg:ms-(--sidebar-width) mt-0 lg:mt-5 m-5">
-            <div className="flex flex-col grow kt-scrollable-y-auto lg:[--kt-scrollbar-width:auto] pt-5">
+          <div className="bg-background border-input m-5 mt-0 flex grow rounded-xl border lg:ms-(--sidebar-width) lg:mt-5">
+            <div className="kt-scrollable-y-auto flex grow flex-col pt-5 lg:[--kt-scrollbar-width:auto]">
               <main className="grow" role="content">
                 <Toolbar>
                   <ToolbarHeading />
@@ -70,7 +70,7 @@ export function TwoColumnSidebarLayout() {
                     /> */}
                     <Button
                       variant="outline"
-                      className="hover:bg-background hover:[&_svg]:text-primary hover:text-primary ms-2.5 "
+                      className="hover:bg-background hover:[&_svg]:text-primary hover:text-primary ms-2.5"
                       asChild
                     >
                       <Link to={'/account/home/get-started'}>
diff --git a/apps/admin/src/app/layouts/05__DualRowsHeader/components/Footer.tsx b/apps/admin/src/app/layouts/05__DualRowsHeader/components/Footer.tsx
index 32b99c4..39d24e5 100755
--- a/apps/admin/src/app/layouts/05__DualRowsHeader/components/Footer.tsx
+++ b/apps/admin/src/app/layouts/05__DualRowsHeader/components/Footer.tsx
@@ -7,8 +7,8 @@ export function Footer() {
   return (
     <footer className="footer">
       <Container>
-        <div className="flex flex-col md:flex-row justify-center md:justify-between items-center gap-3 py-5">
-          <div className="flex order-2 md:order-1 gap-2 font-normal text-sm">
+        <div className="flex flex-col items-center justify-center gap-3 py-5 md:flex-row md:justify-between">
+          <div className="order-2 flex gap-2 text-sm font-normal md:order-1">
             <span className="text-muted-foreground">{currentYear} &copy;</span>
             <a
               href="https://keenthemes.com"
@@ -18,7 +18,7 @@ export function Footer() {
               Keenthemes Inc.
             </a>
           </div>
-          <nav className="flex order-1 md:order-2 gap-4 font-normal text-sm text-muted-foreground">
+          <nav className="text-muted-foreground order-1 flex gap-4 text-sm font-normal md:order-2">
             <a href={generalSettings.docsLink} target="_blank" className="hover:text-primary">
               Docs
             </a>
diff --git a/apps/admin/src/app/layouts/05__DualRowsHeader/components/Header.tsx b/apps/admin/src/app/layouts/05__DualRowsHeader/components/Header.tsx
index c9f19fa..32248e0 100755
--- a/apps/admin/src/app/layouts/05__DualRowsHeader/components/Header.tsx
+++ b/apps/admin/src/app/layouts/05__DualRowsHeader/components/Header.tsx
@@ -29,12 +29,12 @@ const Header = () => {
   return (
     <header
       className={cn(
-        'flex items-center transition-[height] shrink-0 bg-(--header-bg) dark:bg-(--header-bg-dark) h-(--header-height)',
+        'flex h-(--header-height) shrink-0 items-center bg-(--header-bg) transition-[height] dark:bg-(--header-bg-dark)',
         headerStickyOn &&
-          'transition-[height] fixed z-10 top-0 start-0 end-0 shadow-xs backdrop-blur-md bg-white/70'
+          'fixed start-0 end-0 top-0 z-10 bg-white/70 shadow-xs backdrop-blur-md transition-[height]'
       )}
     >
-      <Container width="fluid" className="flex flex-wrap justify-between items-center lg:gap-4">
+      <Container width="fluid" className="flex flex-wrap items-center justify-between lg:gap-4">
         <HeaderLogo />
         <HeaderTopbar />
       </Container>
diff --git a/apps/admin/src/app/layouts/05__DualRowsHeader/components/HeaderLogo.tsx b/apps/admin/src/app/layouts/05__DualRowsHeader/components/HeaderLogo.tsx
index 974d96a..b4ad080 100755
--- a/apps/admin/src/app/layouts/05__DualRowsHeader/components/HeaderLogo.tsx
+++ b/apps/admin/src/app/layouts/05__DualRowsHeader/components/HeaderLogo.tsx
@@ -94,12 +94,12 @@ export function HeaderLogo() {
       <Link to="/">
         <img
           src={toAbsoluteUrl('/media/app/mini-logo-circle.svg')}
-          className="dark:hidden min-h-8.5"
+          className="min-h-8.5 dark:hidden"
           alt="logo"
         />
         <img
           src={toAbsoluteUrl('/media/app/mini-logo-circle-dark.svg')}
-          className="hidden dark:inline-block min-h-8.5"
+          className="hidden min-h-8.5 dark:inline-block"
           alt="logo"
         />
       </Link>
@@ -111,9 +111,9 @@ export function HeaderLogo() {
               <Menu />
             </Button>
           </SheetTrigger>
-          <SheetContent className="p-0 gap-0 w-62.5" side="left" close={false}>
-            <SheetHeader className="p-0 space-y-0" />
-            <SheetBody className="p-3 overflow-y-auto">
+          <SheetContent className="w-62.5 gap-0 p-0" side="left" close={false}>
+            <SheetHeader className="space-y-0 p-0" />
+            <SheetBody className="overflow-y-auto p-3">
               {pathname === '/' ? <SidebarMenuDashboard /> : <SidebarMenuDefault />}
             </SheetBody>
           </SheetContent>
@@ -121,12 +121,12 @@ export function HeaderLogo() {
       )}
 
       {!isMobile && (
-        <div className="lg:flex items-stretch gap-3">
+        <div className="items-stretch gap-3 lg:flex">
           {/* Teams Dropdown */}
           <DropdownMenu>
-            <DropdownMenuTrigger className="cursor-pointer text-secondary-foreground text-sm font-medium flex items-center gap-2">
+            <DropdownMenuTrigger className="text-secondary-foreground flex cursor-pointer items-center gap-2 text-sm font-medium">
               {selectedTeam.title}
-              <ChevronDown className="size-3.5 text-muted-foreground" />
+              <ChevronDown className="text-muted-foreground size-3.5" />
             </DropdownMenuTrigger>
             <DropdownMenuContent sideOffset={15} side="bottom" align="start">
               {teams.map((team, index) => (
@@ -145,13 +145,13 @@ export function HeaderLogo() {
             </DropdownMenuContent>
           </DropdownMenu>
 
-          <span className="text-sm text-muted-foreground font-medium px-2.5 md:inline">/</span>
+          <span className="text-muted-foreground px-2.5 text-sm font-medium md:inline">/</span>
 
           {/* Items Dropdown */}
           <DropdownMenu>
-            <DropdownMenuTrigger className="cursor-pointer text-secondary-foreground text-sm font-medium flex items-center gap-2">
+            <DropdownMenuTrigger className="text-secondary-foreground flex cursor-pointer items-center gap-2 text-sm font-medium">
               {selectedItem.title}
-              <ChevronDown className="size-3.5 text-muted-foreground" />
+              <ChevronDown className="text-muted-foreground size-3.5" />
             </DropdownMenuTrigger>
             <DropdownMenuContent sideOffset={15} side="bottom" align="start">
               {items.map((item, index) => (
@@ -170,13 +170,13 @@ export function HeaderLogo() {
             </DropdownMenuContent>
           </DropdownMenu>
 
-          <span className="text-sm text-muted-foreground font-medium px-2.5">/</span>
+          <span className="text-muted-foreground px-2.5 text-sm font-medium">/</span>
 
           {/* Staging Dropdown */}
           <DropdownMenu>
-            <DropdownMenuTrigger className="cursor-pointer text-secondary-foreground text-sm font-medium flex items-center gap-2">
+            <DropdownMenuTrigger className="text-secondary-foreground flex cursor-pointer items-center gap-2 text-sm font-medium">
               {selectedStaging.title}
-              <ChevronDown className="size-3.5 text-muted-foreground" />
+              <ChevronDown className="text-muted-foreground size-3.5" />
             </DropdownMenuTrigger>
             <DropdownMenuContent sideOffset={15} side="bottom" align="start">
               {stagings.map((staging, index) => (
diff --git a/apps/admin/src/app/layouts/05__DualRowsHeader/components/HeaderTopbar.tsx b/apps/admin/src/app/layouts/05__DualRowsHeader/components/HeaderTopbar.tsx
index 849eea7..52e22c2 100755
--- a/apps/admin/src/app/layouts/05__DualRowsHeader/components/HeaderTopbar.tsx
+++ b/apps/admin/src/app/layouts/05__DualRowsHeader/components/HeaderTopbar.tsx
@@ -72,7 +72,7 @@ export function HeaderTopbar() {
       <UserDropdownMenu
         trigger={
           <img
-            className="cursor-pointer size-9 rounded-full border-2 border-mono/25 shrink-0"
+            className="border-mono/25 size-9 shrink-0 cursor-pointer rounded-full border-2"
             src={toAbsoluteUrl('/media/avatars/300-2.png')}
             alt="User Avatar"
           />
diff --git a/apps/admin/src/app/layouts/05__DualRowsHeader/components/Navbar.tsx b/apps/admin/src/app/layouts/05__DualRowsHeader/components/Navbar.tsx
index 242a441..c5173b0 100755
--- a/apps/admin/src/app/layouts/05__DualRowsHeader/components/Navbar.tsx
+++ b/apps/admin/src/app/layouts/05__DualRowsHeader/components/Navbar.tsx
@@ -3,8 +3,8 @@ import { NavbarMenu } from './NavbarMenu';
 
 const Navbar = () => {
   return (
-    <div className="bg-bg-background border-y border-border mb-5 lg:mb-8">
-      <Container className="flex flex-wrap justify-between items-center gap-2">
+    <div className="bg-bg-background border-border mb-5 border-y lg:mb-8">
+      <Container className="flex flex-wrap items-center justify-between gap-2">
         <NavbarMenu />
       </Container>
     </div>
diff --git a/apps/admin/src/app/layouts/05__DualRowsHeader/components/NavbarMenu.tsx b/apps/admin/src/app/layouts/05__DualRowsHeader/components/NavbarMenu.tsx
index 797cf68..ed2f7da 100755
--- a/apps/admin/src/app/layouts/05__DualRowsHeader/components/NavbarMenu.tsx
+++ b/apps/admin/src/app/layouts/05__DualRowsHeader/components/NavbarMenu.tsx
@@ -54,14 +54,14 @@ export function NavbarMenu() {
   return (
     <div className="grid">
       <div className="kt-scrollable-x-auto">
-        <div className="flex items-stretch h-12 gap-5 lg:gap-7.5">
+        <div className="flex h-12 items-stretch gap-5 lg:gap-7.5">
           {items.map((item, index) => (
             <Link
               key={index}
               to={item.path}
               className={cn(
-                'flex items-center text-nowrap font-medium text-sm text-secondary-foreground',
-                item.path === selectedItem.path && 'border-b border-mono text-mono'
+                'text-secondary-foreground flex items-center text-sm font-medium text-nowrap',
+                item.path === selectedItem.path && 'border-mono text-mono border-b'
               )}
             >
               {item.title}
diff --git a/apps/admin/src/app/layouts/05__DualRowsHeader/components/Sidebar.tsx b/apps/admin/src/app/layouts/05__DualRowsHeader/components/Sidebar.tsx
index ec83a83..845f6fb 100755
--- a/apps/admin/src/app/layouts/05__DualRowsHeader/components/Sidebar.tsx
+++ b/apps/admin/src/app/layouts/05__DualRowsHeader/components/Sidebar.tsx
@@ -6,7 +6,7 @@ export function Sidebar() {
   const { pathname } = useLocation();
 
   return (
-    <div className="flex items-stretch shrink-0 px-2 w-(--sidebar-width) bg-background">
+    <div className="bg-background flex w-(--sidebar-width) shrink-0 items-stretch px-2">
       {pathname === '/' ? <SidebarMenuDashboard /> : <SidebarMenuDefault />}
     </div>
   );
diff --git a/apps/admin/src/app/layouts/05__DualRowsHeader/components/SidebarMenuDefault.tsx b/apps/admin/src/app/layouts/05__DualRowsHeader/components/SidebarMenuDefault.tsx
index 5ae82b9..f6f4947 100755
--- a/apps/admin/src/app/layouts/05__DualRowsHeader/components/SidebarMenuDefault.tsx
+++ b/apps/admin/src/app/layouts/05__DualRowsHeader/components/SidebarMenuDefault.tsx
@@ -63,7 +63,7 @@ export function SidebarMenuDefault() {
     } else {
       return (
         <AccordionMenuItem key={index} value={item.path || ''} className="text-sm font-medium">
-          <Link to={item.path || '#'} className="flex items-center justify-between grow gap-2">
+          <Link to={item.path || '#'} className="flex grow items-center justify-between gap-2">
             {item.icon && <item.icon data-slot="accordion-menu-icon" />}
             <span data-slot="accordion-menu-title">{item.title}</span>
           </Link>
diff --git a/apps/admin/src/app/layouts/05__DualRowsHeader/components/Toolbar.tsx b/apps/admin/src/app/layouts/05__DualRowsHeader/components/Toolbar.tsx
index 2603850..9a81bb6 100755
--- a/apps/admin/src/app/layouts/05__DualRowsHeader/components/Toolbar.tsx
+++ b/apps/admin/src/app/layouts/05__DualRowsHeader/components/Toolbar.tsx
@@ -14,7 +14,7 @@ export interface ToolbarHeadingProps {
 function Toolbar({ children }: { children?: ReactNode }) {
   return (
     <div className="mb-5 lg:mb-7.5">
-      <Container className="flex items-center justify-between flex-wrap gap-5">
+      <Container className="flex flex-wrap items-center justify-between gap-5">
         {children}
       </Container>
     </div>
@@ -73,8 +73,8 @@ const ToolbarHeading = ({ title = '' }: ToolbarHeadingProps) => {
   const item = getCurrentItem(menuConfig);
 
   return (
-    <div className="flex flex-col md:flex-row md:items-center flex-wrap gap-1 lg:gap-5">
-      <h1 className="font-medium text-lg text-mono">{title || item?.title}</h1>
+    <div className="flex flex-col flex-wrap gap-1 md:flex-row md:items-center lg:gap-5">
+      <h1 className="text-mono text-lg font-medium">{title || item?.title}</h1>
       <ToolbarBreadcrumbs />
     </div>
   );
diff --git a/apps/admin/src/app/layouts/05__DualRowsHeader/layout.tsx b/apps/admin/src/app/layouts/05__DualRowsHeader/layout.tsx
index 02b1fcd..42d4c22 100755
--- a/apps/admin/src/app/layouts/05__DualRowsHeader/layout.tsx
+++ b/apps/admin/src/app/layouts/05__DualRowsHeader/layout.tsx
@@ -46,10 +46,10 @@ export const DualRowsHeaderLayout = () => {
 
         <Navbar />
 
-        <div className="w-full flex px-0 lg:ps-4">
+        <div className="flex w-full px-0 lg:ps-4">
           {!isMobile && <Sidebar />}
 
-          <main className="flex flex-col grow">
+          <main className="flex grow flex-col">
             {!pathname.includes('/public-profile/') && (
               <Toolbar>
                 <ToolbarHeading />
diff --git a/apps/admin/src/app/layouts/06__MultipleMenus/components/Footer.tsx b/apps/admin/src/app/layouts/06__MultipleMenus/components/Footer.tsx
index 85b3fc7..c10dae4 100755
--- a/apps/admin/src/app/layouts/06__MultipleMenus/components/Footer.tsx
+++ b/apps/admin/src/app/layouts/06__MultipleMenus/components/Footer.tsx
@@ -8,12 +8,12 @@ export function Footer() {
   return (
     <footer className="footer">
       <Container>
-        <div className="flex flex-col md:flex-row justify-center md:justify-between items-center gap-3 py-5">
+        <div className="flex flex-col items-center justify-center gap-3 py-5 md:flex-row md:justify-between">
           <Dialog>
             <DialogTrigger asChild>
               <button
                 type="button"
-                className="cursor-pointer flex order-2 md:order-1 gap-2 font-normal text-sm"
+                className="order-2 flex cursor-pointer gap-2 text-sm font-normal md:order-1"
               >
                 <span className="text-muted-foreground">{currentYear} &copy;</span>
                 <p className="text-secondary-foreground hover:text-primary">
@@ -40,7 +40,7 @@ export function Footer() {
             </DialogContent>
           </Dialog>
 
-          <nav className="flex order-1 md:order-2 gap-4 font-normal text-sm text-muted-foreground"></nav>
+          <nav className="text-muted-foreground order-1 flex gap-4 text-sm font-normal md:order-2"></nav>
         </div>
       </Container>
     </footer>
diff --git a/apps/admin/src/app/layouts/06__MultipleMenus/components/Header.tsx b/apps/admin/src/app/layouts/06__MultipleMenus/components/Header.tsx
index 5995471..c77dab8 100755
--- a/apps/admin/src/app/layouts/06__MultipleMenus/components/Header.tsx
+++ b/apps/admin/src/app/layouts/06__MultipleMenus/components/Header.tsx
@@ -21,17 +21,17 @@ const Header = () => {
   }, [pathname]);
 
   return (
-    <header className="flex lg:hidden items-center fixed z-10 top-0 start-0 end-0 shrink-0 bg-muted h-(--header-height)">
-      <Container className="flex items-center justify-between flex-wrap gap-3">
+    <header className="bg-muted fixed start-0 end-0 top-0 z-10 flex h-(--header-height) shrink-0 items-center lg:hidden">
+      <Container className="flex flex-wrap items-center justify-between gap-3">
         <Link to="/">
           <img
             src={toAbsoluteUrl('/media/app/logo-light.svg')}
-            className="dark:hidden h-8.5"
+            className="h-8.5 dark:hidden"
             alt="Logo"
           />
           <img
             src={toAbsoluteUrl('/media/app/logo-dark.svg')}
-            className="hidden dark:block h-8.5"
+            className="hidden h-8.5 dark:block"
             alt="Logo"
           />
         </Link>
@@ -43,9 +43,9 @@ const Header = () => {
                 <Menu />
               </Button>
             </SheetTrigger>
-            <SheetContent className="p-0 gap-0 w-68.75" side="left" close={false}>
-              <SheetHeader className="p-0 space-y-0" />
-              <SheetBody className="p-0 flex flex-col grow">
+            <SheetContent className="w-68.75 gap-0 p-0" side="left" close={false}>
+              <SheetHeader className="space-y-0 p-0" />
+              <SheetBody className="flex grow flex-col p-0">
                 <SidebarHeader />
                 <SidebarMenu />
                 <SidebarFooter />
diff --git a/apps/admin/src/app/layouts/06__MultipleMenus/components/RoosterPeek.tsx b/apps/admin/src/app/layouts/06__MultipleMenus/components/RoosterPeek.tsx
index f524c4a..3cdda5f 100644
--- a/apps/admin/src/app/layouts/06__MultipleMenus/components/RoosterPeek.tsx
+++ b/apps/admin/src/app/layouts/06__MultipleMenus/components/RoosterPeek.tsx
@@ -80,7 +80,7 @@ export const RoosterPeek: React.FC = () => {
       <img
         key={tick}
         src={toAbsoluteUrl('/media/app/brutal-aggressive-rooster-head-icon.svg')}
-        className="size-50 fixed z-1000"
+        className="fixed z-1000 size-50"
         style={buildStyle(side)}
         alt="Brutal rooster"
       />
diff --git a/apps/admin/src/app/layouts/06__MultipleMenus/components/Sidebar.tsx b/apps/admin/src/app/layouts/06__MultipleMenus/components/Sidebar.tsx
index d260b9e..a660f32 100755
--- a/apps/admin/src/app/layouts/06__MultipleMenus/components/Sidebar.tsx
+++ b/apps/admin/src/app/layouts/06__MultipleMenus/components/Sidebar.tsx
@@ -4,7 +4,7 @@ import { SidebarMenu } from './SidebarMenu';
 
 export function Sidebar() {
   return (
-    <div className="fixed top-0 bottom-0 z-50 lg:flex flex-col shrink-0 w-(--sidebar-width) bg-(--page-bg) dark:bg-(--page-bg-dark)">
+    <div className="fixed top-0 bottom-0 z-50 w-(--sidebar-width) shrink-0 flex-col bg-(--page-bg) lg:flex dark:bg-(--page-bg-dark)">
       <SidebarHeader />
       <SidebarMenu />
       <SidebarFooter />
diff --git a/apps/admin/src/app/layouts/06__MultipleMenus/components/SidebarFooter.tsx b/apps/admin/src/app/layouts/06__MultipleMenus/components/SidebarFooter.tsx
index ba98952..108c8c5 100755
--- a/apps/admin/src/app/layouts/06__MultipleMenus/components/SidebarFooter.tsx
+++ b/apps/admin/src/app/layouts/06__MultipleMenus/components/SidebarFooter.tsx
@@ -7,7 +7,7 @@ export function SidebarFooter() {
   const { user } = useAuth();
 
   return (
-    <div className="flex flex-center justify-between shrink-0 ps-4 pe-3.5 h-14">
+    <div className="flex-center flex h-14 shrink-0 justify-between ps-4 pe-3.5">
       {user && (
         <UserDropdownMenu
           trigger={
diff --git a/apps/admin/src/app/layouts/06__MultipleMenus/components/SidebarHeader.tsx b/apps/admin/src/app/layouts/06__MultipleMenus/components/SidebarHeader.tsx
index 8f6f9d2..d83a759 100755
--- a/apps/admin/src/app/layouts/06__MultipleMenus/components/SidebarHeader.tsx
+++ b/apps/admin/src/app/layouts/06__MultipleMenus/components/SidebarHeader.tsx
@@ -8,34 +8,34 @@ export function SidebarHeader() {
 
   return (
     <div className="mb-3.5">
-      <div className="flex items-center justify-between gap-2.5 px-3.5 h-17.5">
+      <div className="flex h-17.5 items-center justify-between gap-2.5 px-3.5">
         <Link to="/">
           <img
             src={toAbsoluteUrl('/media/app/logo-light.svg')}
-            className="dark:hidden h-10.5"
+            className="h-10.5 dark:hidden"
             alt=""
           />
           <img
             src={toAbsoluteUrl('/media/app/logo-dark.svg')}
-            className="hidden dark:inline-block h-10.5"
+            className="hidden h-10.5 dark:inline-block"
             alt=""
           />
         </Link>
-        <div className="dark:text-[#c08183] shrink-0">
+        <div className="shrink-0 dark:text-[#c08183]">
           C R U X <sub className="text-[50%]">Goat</sub>
         </div>
       </div>
 
-      <div className="pt-2.5 px-3.5 mb-1">
+      <div className="mb-1 px-3.5 pt-2.5">
         <div className="relative">
-          <Search className="text-muted-foreground absolute top-1/2 start-3.5 -translate-y-1/2 size-4" />
+          <Search className="text-muted-foreground absolute start-3.5 top-1/2 size-4 -translate-y-1/2" />
           <Input
             placeholder="Search"
             onChange={handleInputChange}
-            className="px-9 min-w-0"
+            className="min-w-0 px-9"
             value=""
           />
-          <span className="text-xs text-muted-foreground absolute end-3.5 top-1/2 -translate-y-1/2">
+          <span className="text-muted-foreground absolute end-3.5 top-1/2 -translate-y-1/2 text-xs">
             cmd + /
           </span>
         </div>
diff --git a/apps/admin/src/app/layouts/06__MultipleMenus/components/SidebarMenu.tsx b/apps/admin/src/app/layouts/06__MultipleMenus/components/SidebarMenu.tsx
index a870cea..fff5c3d 100755
--- a/apps/admin/src/app/layouts/06__MultipleMenus/components/SidebarMenu.tsx
+++ b/apps/admin/src/app/layouts/06__MultipleMenus/components/SidebarMenu.tsx
@@ -2,7 +2,7 @@ import { SidebarMenuPrimary } from './SidebarMenuPrimary';
 
 export function SidebarMenu() {
   return (
-    <div className="kt-scrollable-y-auto grow max-h-[calc(100vh-11.5rem)]">
+    <div className="kt-scrollable-y-auto max-h-[calc(100vh-11.5rem)] grow">
       <SidebarMenuPrimary />
     </div>
   );
diff --git a/apps/admin/src/app/layouts/06__MultipleMenus/components/Toolbar.tsx b/apps/admin/src/app/layouts/06__MultipleMenus/components/Toolbar.tsx
index 4f1fdd1..57cffc4 100755
--- a/apps/admin/src/app/layouts/06__MultipleMenus/components/Toolbar.tsx
+++ b/apps/admin/src/app/layouts/06__MultipleMenus/components/Toolbar.tsx
@@ -15,7 +15,7 @@ export interface ToolbarHeadingProps {
 function Toolbar({ children }: { children?: ReactNode }) {
   return (
     <div className="pb-5">
-      <Container className="flex items-center justify-between flex-wrap gap-3">
+      <Container className="flex flex-wrap items-center justify-between gap-3">
         {children}
       </Container>
     </div>
@@ -23,7 +23,7 @@ function Toolbar({ children }: { children?: ReactNode }) {
 }
 
 function ToolbarActions({ children }: { children?: ReactNode }) {
-  return <div className="flex items-center flex-wrap gap-1.5 lg:gap-3.5">{children}</div>;
+  return <div className="flex flex-wrap items-center gap-1.5 lg:gap-3.5">{children}</div>;
 }
 
 function ToolbarBreadcrumbs({ homeVisible = true }: { homeVisible?: boolean }) {
@@ -95,7 +95,7 @@ const ToolbarHeading = ({ title = '' }: ToolbarHeadingProps) => {
 
   return (
     <div className="flex flex-col gap-1">
-      <h1 className="font-medium text-lg text-mono">{title || item?.title}</h1>
+      <h1 className="text-mono text-lg font-medium">{title || item?.title}</h1>
       <ToolbarBreadcrumbs />
     </div>
   );
diff --git a/apps/admin/src/app/layouts/06__MultipleMenus/layout.tsx b/apps/admin/src/app/layouts/06__MultipleMenus/layout.tsx
index d3a8d1d..9cbc149 100755
--- a/apps/admin/src/app/layouts/06__MultipleMenus/layout.tsx
+++ b/apps/admin/src/app/layouts/06__MultipleMenus/layout.tsx
@@ -51,9 +51,9 @@ export const MultipleMenusLayout = () => {
 
         {isMobile && <Header />}
 
-        <div className="flex flex-col lg:flex-row grow pt-(--header-height) lg:pt-0">
-          <div className="overflow-hidden flex flex-col grow items-stretch rounded-xl bg-background border border-input lg:ms-(--sidebar-width) mt-0 lg:mt-3.75 m-3.75">
-            <div className="flex flex-col grow kt-scrollable-y-auto [--kt-scrollbar-width:auto] pt-5">
+        <div className="flex grow flex-col pt-(--header-height) lg:flex-row lg:pt-0">
+          <div className="bg-background border-input m-3.75 mt-0 flex grow flex-col items-stretch overflow-hidden rounded-xl border lg:ms-(--sidebar-width) lg:mt-3.75">
+            <div className="kt-scrollable-y-auto flex grow flex-col pt-5 [--kt-scrollbar-width:auto]">
               <main className="grow" role="content">
                 {toolbar}
                 <Outlet />
diff --git a/apps/admin/src/app/layouts/07__AdvancedMegaMenu/components/Footer.tsx b/apps/admin/src/app/layouts/07__AdvancedMegaMenu/components/Footer.tsx
index b06f6f8..39d24e5 100755
--- a/apps/admin/src/app/layouts/07__AdvancedMegaMenu/components/Footer.tsx
+++ b/apps/admin/src/app/layouts/07__AdvancedMegaMenu/components/Footer.tsx
@@ -7,8 +7,8 @@ export function Footer() {
   return (
     <footer className="footer">
       <Container>
-        <div className="flex flex-col md:flex-row justify-center md:justify-between items-center gap-3 py-5">
-          <div className="flex order-2 md:order-1  gap-2 font-normal text-sm">
+        <div className="flex flex-col items-center justify-center gap-3 py-5 md:flex-row md:justify-between">
+          <div className="order-2 flex gap-2 text-sm font-normal md:order-1">
             <span className="text-muted-foreground">{currentYear} &copy;</span>
             <a
               href="https://keenthemes.com"
@@ -18,7 +18,7 @@ export function Footer() {
               Keenthemes Inc.
             </a>
           </div>
-          <nav className="flex order-1 md:order-2 gap-4 font-normal text-sm text-muted-foreground">
+          <nav className="text-muted-foreground order-1 flex gap-4 text-sm font-normal md:order-2">
             <a href={generalSettings.docsLink} target="_blank" className="hover:text-primary">
               Docs
             </a>
diff --git a/apps/admin/src/app/layouts/07__AdvancedMegaMenu/components/Header.tsx b/apps/admin/src/app/layouts/07__AdvancedMegaMenu/components/Header.tsx
index d15859b..5510ef0 100755
--- a/apps/admin/src/app/layouts/07__AdvancedMegaMenu/components/Header.tsx
+++ b/apps/admin/src/app/layouts/07__AdvancedMegaMenu/components/Header.tsx
@@ -29,12 +29,12 @@ const Header = () => {
   return (
     <header
       className={cn(
-        'flex items-center transition-[height] shrink-0 bg-background py-4 lg:py-0 lg:h-(--header-height)',
+        'bg-background flex shrink-0 items-center py-4 transition-[height] lg:h-(--header-height) lg:py-0',
         headerStickyOn &&
-          'transition-[height] fixed z-10 top-0 left-0 right-0 shadow-xs backdrop-blur-md bg-background/70 pe-(--removed-body-scroll-bar-size,0px)'
+          'bg-background/70 fixed top-0 right-0 left-0 z-10 pe-(--removed-body-scroll-bar-size,0px) shadow-xs backdrop-blur-md transition-[height]'
       )}
     >
-      <Container className="flex flex-wrap gap-2 items-center lg:gap-4">
+      <Container className="flex flex-wrap items-center gap-2 lg:gap-4">
         <HeaderLogo />
         <HeaderTopbar />
       </Container>
diff --git a/apps/admin/src/app/layouts/07__AdvancedMegaMenu/components/HeaderLogo.tsx b/apps/admin/src/app/layouts/07__AdvancedMegaMenu/components/HeaderLogo.tsx
index 92c9c1b..df6f8b7 100755
--- a/apps/admin/src/app/layouts/07__AdvancedMegaMenu/components/HeaderLogo.tsx
+++ b/apps/admin/src/app/layouts/07__AdvancedMegaMenu/components/HeaderLogo.tsx
@@ -18,22 +18,22 @@ const HeaderLogo = () => {
   }, [pathname]);
 
   return (
-    <div className="flex items-stretch gap-1.5 lg:gap-10 grow">
+    <div className="flex grow items-stretch gap-1.5 lg:gap-10">
       <div className="flex items-center gap-2.5">
         <Link to="/">
           <img
             src={toAbsoluteUrl('/media/app/mini-logo-circle-primary.svg')}
-            className="dark:hidden min-h-8.5"
+            className="min-h-8.5 dark:hidden"
             alt="logo"
           />
           <img
             src={toAbsoluteUrl('/media/app/mini-logo-circle-primary-dark.svg')}
-            className="hidden dark:inline-block min-h-8.5"
+            className="hidden min-h-8.5 dark:inline-block"
             alt="logo"
           />
         </Link>
 
-        <h3 className="text-mono text-lg font-medium hidden lg:block">Metronic</h3>
+        <h3 className="text-mono hidden text-lg font-medium lg:block">Metronic</h3>
       </div>
 
       {!isMobile ? (
@@ -45,9 +45,9 @@ const HeaderLogo = () => {
               <Menu />
             </Button>
           </SheetTrigger>
-          <SheetContent className="p-0 gap-0 w-68.75" side="left" close={false}>
-            <SheetHeader className="p-0 space-y-0" />
-            <SheetBody className="p-0 flex flex-col grow">
+          <SheetContent className="w-68.75 gap-0 p-0" side="left" close={false}>
+            <SheetHeader className="space-y-0 p-0" />
+            <SheetBody className="flex grow flex-col p-0">
               <MegaMenuMobile />
             </SheetBody>
           </SheetContent>
diff --git a/apps/admin/src/app/layouts/07__AdvancedMegaMenu/components/HeaderTopbar.tsx b/apps/admin/src/app/layouts/07__AdvancedMegaMenu/components/HeaderTopbar.tsx
index 644aa31..d178abf 100755
--- a/apps/admin/src/app/layouts/07__AdvancedMegaMenu/components/HeaderTopbar.tsx
+++ b/apps/admin/src/app/layouts/07__AdvancedMegaMenu/components/HeaderTopbar.tsx
@@ -5,10 +5,10 @@ import { UserDropdownMenu } from '#shared/widgets/UserDropdownMenu';
 
 const HeaderTopbar = () => {
   return (
-    <div className="flex items-center flex-wrap gap-2 lg:gap-3.5">
+    <div className="flex flex-wrap items-center gap-2 lg:gap-3.5">
       <div className="flex items-center gap-2.5 lg:gap-3.5">
         <div className="flex flex-col items-end pt-0.5">
-          <span className="inline-flex gap-0.5 text-foreground font-medium text-xs uppercase">
+          <span className="text-foreground inline-flex gap-0.5 text-xs font-medium uppercase">
             <Crown className="size-3.5" />
             free
           </span>
@@ -25,11 +25,11 @@ const HeaderTopbar = () => {
         </Button>
       </div>
 
-      <div className="border-e border-border h-5 mx-1.5 lg:mx-3"></div>
+      <div className="border-border mx-1.5 h-5 border-e lg:mx-3"></div>
 
       <UserDropdownMenu
         trigger={
-          <div className="cursor-pointer size-8.5 rounded-full inline-flex items-center justify-center relative text-lg font-medium border border-input bg-muted">
+          <div className="border-input bg-muted relative inline-flex size-8.5 cursor-pointer items-center justify-center rounded-full border text-lg font-medium">
             S
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -37,7 +37,7 @@ const HeaderTopbar = () => {
               height="16"
               viewBox="0 0 15 16"
               fill="none"
-              className="absolute left-6 -top-0.5 text-primary size-3"
+              className="text-primary absolute -top-0.5 left-6 size-3"
             >
               <path
                 d="M14.5425 6.89749L13.5 5.83999C13.4273 5.76877 13.3699 5.6835 13.3312 5.58937C13.2925 5.49525 13.2734 5.39424 13.275 5.29249V3.79249C13.274 3.58699 13.2324 3.38371 13.1527 3.19432C13.0729 3.00494 12.9565 2.83318 12.8101 2.68892C12.6638 2.54466 12.4904 2.43073 12.2998 2.35369C12.1093 2.27665 11.9055 2.23801 11.7 2.23999H10.2C10.0982 2.24159 9.99722 2.22247 9.9031 2.18378C9.80898 2.1451 9.72371 2.08767 9.65249 2.01499L8.60249 0.957487C8.30998 0.665289 7.91344 0.50116 7.49999 0.50116C7.08654 0.50116 6.68999 0.665289 6.39749 0.957487L5.33999 1.99999C5.26876 2.07267 5.1835 2.1301 5.08937 2.16879C4.99525 2.20747 4.89424 2.22659 4.79249 2.22499H3.29249C3.08699 2.22597 2.88371 2.26754 2.69432 2.34731C2.50494 2.42709 2.33318 2.54349 2.18892 2.68985C2.04466 2.8362 1.93073 3.00961 1.85369 3.20013C1.77665 3.39064 1.73801 3.5945 1.73999 3.79999V5.29999C1.74159 5.40174 1.72247 5.50275 1.68378 5.59687C1.6451 5.691 1.58767 5.77627 1.51499 5.84749L0.457487 6.89749C0.165289 7.19 0.00115967 7.58654 0.00115967 7.99999C0.00115967 8.41344 0.165289 8.80998 0.457487 9.10249L1.49999 10.16C1.57267 10.2312 1.6301 10.3165 1.66878 10.4106C1.70747 10.5047 1.72659 10.6057 1.72499 10.7075V12.2075C1.72597 12.413 1.76754 12.6163 1.84731 12.8056C1.92709 12.995 2.04349 13.1668 2.18985 13.3111C2.3362 13.4553 2.50961 13.5692 2.70013 13.6463C2.89064 13.7233 3.0945 13.762 3.29999 13.76H4.79999C4.90174 13.7584 5.00275 13.7775 5.09687 13.8162C5.191 13.8549 5.27627 13.9123 5.34749 13.985L6.40499 15.0425C6.69749 15.3347 7.09404 15.4988 7.50749 15.4988C7.92094 15.4988 8.31748 15.3347 8.60999 15.0425L9.65999 14C9.73121 13.9273 9.81647 13.8699 9.9106 13.8312C10.0047 13.7925 10.1057 13.7734 10.2075 13.775H11.7075C12.1212 13.775 12.518 13.6106 12.8106 13.3181C13.1031 13.0255 13.2675 12.6287 13.2675 12.215V10.715C13.2659 10.6132 13.285 10.5122 13.3237 10.4181C13.3624 10.324 13.4198 10.2387 13.4925 10.1675L14.55 9.10999C14.6953 8.96452 14.8104 8.79176 14.8887 8.60164C14.9671 8.41152 15.007 8.20779 15.0063 8.00218C15.0056 7.79656 14.9643 7.59311 14.8847 7.40353C14.8051 7.21394 14.6888 7.04197 14.5425 6.89749ZM10.635 6.64999L6.95249 10.25C6.90055 10.3026 6.83864 10.3443 6.77038 10.3726C6.70212 10.4009 6.62889 10.4153 6.55499 10.415C6.48062 10.4139 6.40719 10.3982 6.33896 10.3685C6.27073 10.3389 6.20905 10.2961 6.15749 10.2425L4.37999 8.44249C4.32532 8.39044 4.28169 8.32793 4.25169 8.25867C4.22169 8.18941 4.20593 8.11482 4.20536 8.03934C4.20479 7.96387 4.21941 7.88905 4.24836 7.81934C4.27731 7.74964 4.31999 7.68647 4.37387 7.63361C4.42774 7.58074 4.4917 7.53926 4.56194 7.51163C4.63218 7.484 4.70726 7.47079 4.78271 7.47278C4.85816 7.47478 4.93244 7.49194 5.00112 7.52324C5.0698 7.55454 5.13148 7.59935 5.18249 7.65499L6.56249 9.05749L9.84749 5.84749C9.95296 5.74215 10.0959 5.68298 10.245 5.68298C10.394 5.68298 10.537 5.74215 10.6425 5.84749C10.6953 5.90034 10.737 5.96318 10.7653 6.03234C10.7935 6.1015 10.8077 6.1756 10.807 6.25031C10.8063 6.32502 10.7908 6.39884 10.7612 6.46746C10.7317 6.53608 10.6888 6.59813 10.635 6.64999Z"
diff --git a/apps/admin/src/app/layouts/07__AdvancedMegaMenu/components/MegaMenuMobile.tsx b/apps/admin/src/app/layouts/07__AdvancedMegaMenu/components/MegaMenuMobile.tsx
index b9d6c63..e834086 100755
--- a/apps/admin/src/app/layouts/07__AdvancedMegaMenu/components/MegaMenuMobile.tsx
+++ b/apps/admin/src/app/layouts/07__AdvancedMegaMenu/components/MegaMenuMobile.tsx
@@ -67,7 +67,7 @@ export function MegaMenuMobile() {
         <AccordionMenuSub key={index} value={item.path || `root-${index}`}>
           <AccordionMenuSubTrigger className="text-sm font-medium">
             {item.icon && <item.icon data-slot="accordion-menu-icon" />}
-            <div className="flex items-center justify-between grow gap-2">
+            <div className="flex grow items-center justify-between gap-2">
               <span data-slot="accordion-menu-title">{item.title}</span>
               {item.badge && (
                 <Badge variant="secondary" size="sm" className="ms-auto">
@@ -91,7 +91,7 @@ export function MegaMenuMobile() {
         <AccordionMenuItem key={index} value={item.path || ''} className="text-sm font-medium">
           <Link to={item.path || '#'} className="">
             {item.icon && <item.icon data-slot="accordion-menu-icon" />}
-            <div className="flex items-center justify-between grow gap-2">
+            <div className="flex grow items-center justify-between gap-2">
               <span data-slot="accordion-menu-title">{item.title}</span>
               {item.badge && (
                 <Badge variant="secondary" size="sm" className="ms-auto">
@@ -154,7 +154,7 @@ export function MegaMenuMobile() {
         <AccordionMenuItem key={index} value={item.path || ''} className="text-[13px]">
           <Link to={item.path || '#'}>
             {item.icon && <item.icon data-slot="accordion-menu-icon" />}
-            <div className="flex items-center justify-between grow gap-2">
+            <div className="flex grow items-center justify-between gap-2">
               <span>{item.title}</span>
               {item.badge && (
                 <Badge variant="secondary" size="sm" className="ms-auto">
@@ -173,7 +173,7 @@ export function MegaMenuMobile() {
   };
 
   return (
-    <div className="flex grow shrink-0 py-5 px-5">
+    <div className="flex shrink-0 grow px-5 py-5">
       <AccordionMenu
         selectedValue={pathname}
         matchPath={matchPath}
diff --git a/apps/admin/src/app/layouts/07__AdvancedMegaMenu/components/Toolbar.tsx b/apps/admin/src/app/layouts/07__AdvancedMegaMenu/components/Toolbar.tsx
index 9328084..f9853d7 100755
--- a/apps/admin/src/app/layouts/07__AdvancedMegaMenu/components/Toolbar.tsx
+++ b/apps/admin/src/app/layouts/07__AdvancedMegaMenu/components/Toolbar.tsx
@@ -14,17 +14,17 @@ export interface ToolbarHeadingProps {
 function Toolbar({ children }: { children?: ReactNode }) {
   return (
     <Container>
-      <div className="border-t border-border"></div>
-      <div className="flex items-center justify-between flex-wrap gap-2 la:gap-5 my-5">
+      <div className="border-border border-t"></div>
+      <div className="la:gap-5 my-5 flex flex-wrap items-center justify-between gap-2">
         {children}
       </div>
-      <div className="border-b border-border mb-5 lg:mb-7.5"></div>
+      <div className="border-border mb-5 border-b lg:mb-7.5"></div>
     </Container>
   );
 }
 
 function ToolbarActions({ children }: { children?: ReactNode }) {
-  return <div className="flex items-center flex-wrap gap-2.5">{children}</div>;
+  return <div className="flex flex-wrap items-center gap-2.5">{children}</div>;
 }
 
 function ToolbarBreadcrumbs() {
@@ -78,7 +78,7 @@ function ToolbarHeading({ title = '' }: ToolbarHeadingProps) {
 
   return (
     <div className="flex flex-col gap-1">
-      <h1 className="font-medium text-lg text-mono">{title || item?.title}</h1>
+      <h1 className="text-mono text-lg font-medium">{title || item?.title}</h1>
       <ToolbarBreadcrumbs />
     </div>
   );
diff --git a/apps/admin/src/app/layouts/08__DropdownMenu/components/Footer.tsx b/apps/admin/src/app/layouts/08__DropdownMenu/components/Footer.tsx
index b06f6f8..39d24e5 100755
--- a/apps/admin/src/app/layouts/08__DropdownMenu/components/Footer.tsx
+++ b/apps/admin/src/app/layouts/08__DropdownMenu/components/Footer.tsx
@@ -7,8 +7,8 @@ export function Footer() {
   return (
     <footer className="footer">
       <Container>
-        <div className="flex flex-col md:flex-row justify-center md:justify-between items-center gap-3 py-5">
-          <div className="flex order-2 md:order-1  gap-2 font-normal text-sm">
+        <div className="flex flex-col items-center justify-center gap-3 py-5 md:flex-row md:justify-between">
+          <div className="order-2 flex gap-2 text-sm font-normal md:order-1">
             <span className="text-muted-foreground">{currentYear} &copy;</span>
             <a
               href="https://keenthemes.com"
@@ -18,7 +18,7 @@ export function Footer() {
               Keenthemes Inc.
             </a>
           </div>
-          <nav className="flex order-1 md:order-2 gap-4 font-normal text-sm text-muted-foreground">
+          <nav className="text-muted-foreground order-1 flex gap-4 text-sm font-normal md:order-2">
             <a href={generalSettings.docsLink} target="_blank" className="hover:text-primary">
               Docs
             </a>
diff --git a/apps/admin/src/app/layouts/08__DropdownMenu/components/Header.tsx b/apps/admin/src/app/layouts/08__DropdownMenu/components/Header.tsx
index 611c6f0..70b59de 100755
--- a/apps/admin/src/app/layouts/08__DropdownMenu/components/Header.tsx
+++ b/apps/admin/src/app/layouts/08__DropdownMenu/components/Header.tsx
@@ -18,17 +18,17 @@ export function Header() {
   }, [pathname]);
 
   return (
-    <header className="flex items-center fixed z-10 top-0 start-0 end-0 shrink-0 bg-muted h-(--header-height)">
-      <Container className="flex items-center justify-between flex-wrap gap-3">
+    <header className="bg-muted fixed start-0 end-0 top-0 z-10 flex h-(--header-height) shrink-0 items-center">
+      <Container className="flex flex-wrap items-center justify-between gap-3">
         <Link to="/">
           <img
             src={toAbsoluteUrl('/media/app/mini-logo-gray.svg')}
-            className="dark:hidden h-7.5"
+            className="h-7.5 dark:hidden"
             alt="image"
           />
           <img
             src={toAbsoluteUrl('/media/app/mini-logo-gray-dark.svg')}
-            className="hidden dark:inline-block h-7.5"
+            className="hidden h-7.5 dark:inline-block"
             alt="image"
           />
         </Link>
@@ -39,9 +39,9 @@ export function Header() {
               <Menu />
             </Button>
           </SheetTrigger>
-          <SheetContent className="p-0 gap-0 w-(--sidebar-width)" side="left" close={false}>
-            <SheetHeader className="p-0 space-y-0" />
-            <SheetBody className="px-0 pt-5 flex flex-col grow">
+          <SheetContent className="w-(--sidebar-width) gap-0 p-0" side="left" close={false}>
+            <SheetHeader className="space-y-0 p-0" />
+            <SheetBody className="flex grow flex-col px-0 pt-5">
               <SidebarMenu />
               <SidebarFooter />
             </SheetBody>
diff --git a/apps/admin/src/app/layouts/08__DropdownMenu/components/Sidebar.tsx b/apps/admin/src/app/layouts/08__DropdownMenu/components/Sidebar.tsx
index ce1b630..250bd76 100755
--- a/apps/admin/src/app/layouts/08__DropdownMenu/components/Sidebar.tsx
+++ b/apps/admin/src/app/layouts/08__DropdownMenu/components/Sidebar.tsx
@@ -4,7 +4,7 @@ import { SidebarMenu } from './SidebarMenu';
 
 export function Sidebar() {
   return (
-    <div className="grow fixed top-0 bottom-0 z-20 flex flex-col items-stretch shrink-0 bg-muted w-(--sidebar-width)">
+    <div className="bg-muted fixed top-0 bottom-0 z-20 flex w-(--sidebar-width) shrink-0 grow flex-col items-stretch">
       <SidebarHeader />
       <SidebarMenu />
       <SidebarFooter />
diff --git a/apps/admin/src/app/layouts/08__DropdownMenu/components/SidebarFooter.tsx b/apps/admin/src/app/layouts/08__DropdownMenu/components/SidebarFooter.tsx
index d48908c..7e8f9ba 100755
--- a/apps/admin/src/app/layouts/08__DropdownMenu/components/SidebarFooter.tsx
+++ b/apps/admin/src/app/layouts/08__DropdownMenu/components/SidebarFooter.tsx
@@ -7,7 +7,7 @@ import { UserDropdownMenu } from '#shared/widgets/UserDropdownMenu';
 
 export function SidebarFooter() {
   return (
-    <div className="flex flex-col gap-5 items-center shrink-0 pb-5">
+    <div className="flex shrink-0 flex-col items-center gap-5 pb-5">
       <div className="flex flex-col gap-1.5">
         {/* <ChatSheet
           trigger={
@@ -36,7 +36,7 @@ export function SidebarFooter() {
       <UserDropdownMenu
         trigger={
           <img
-            className="size-8 rounded-lg border-2 border-mono/30 shrink-0 cursor-pointer"
+            className="border-mono/30 size-8 shrink-0 cursor-pointer rounded-lg border-2"
             src={toAbsoluteUrl('/media/avatars/300-2.png')}
             alt="User Avatar"
           />
diff --git a/apps/admin/src/app/layouts/08__DropdownMenu/components/SidebarHeader.tsx b/apps/admin/src/app/layouts/08__DropdownMenu/components/SidebarHeader.tsx
index 1212cc1..befdb22 100755
--- a/apps/admin/src/app/layouts/08__DropdownMenu/components/SidebarHeader.tsx
+++ b/apps/admin/src/app/layouts/08__DropdownMenu/components/SidebarHeader.tsx
@@ -3,16 +3,16 @@ import { toAbsoluteUrl } from '#shared/lib/helpers';
 
 export function SidebarHeader() {
   return (
-    <div className="hidden lg:flex items-center justify-center shrink-0 pt-8 pb-3.5">
+    <div className="hidden shrink-0 items-center justify-center pt-8 pb-3.5 lg:flex">
       <Link to="/">
         <img
           src={toAbsoluteUrl('/media/app/mini-logo-square-gray.svg')}
-          className="dark:hidden min-h-10.5"
+          className="min-h-10.5 dark:hidden"
           alt=""
         />
         <img
           src={toAbsoluteUrl('/media/app/mini-logo-square-gray-dark.svg')}
-          className="hidden dark:block min-h-10.5"
+          className="hidden min-h-10.5 dark:block"
           alt=""
         />
       </Link>
diff --git a/apps/admin/src/app/layouts/08__DropdownMenu/components/SidebarMenu.tsx b/apps/admin/src/app/layouts/08__DropdownMenu/components/SidebarMenu.tsx
index 27d3921..313a888 100755
--- a/apps/admin/src/app/layouts/08__DropdownMenu/components/SidebarMenu.tsx
+++ b/apps/admin/src/app/layouts/08__DropdownMenu/components/SidebarMenu.tsx
@@ -49,8 +49,8 @@ export function SidebarMenu() {
               <Button
                 data-here={hasActiveChild(item.children) || undefined}
                 className={cn(
-                  'flex flex-col items-center justify-center w-15 h-15 gap-1 rounded-lg shadow-none',
-                  'text-xs font-medium text-secondary-foreground bg-transparent',
+                  'flex h-15 w-15 flex-col items-center justify-center gap-1 rounded-lg shadow-none',
+                  'text-secondary-foreground bg-transparent text-xs font-medium',
                   'hover:text-primary hover:bg-background hover:border-border',
                   'data-[state=open]:text-primary data-[state=open]:bg-background data-[state=open]:border-border',
                   'data-[here=true]:text-primary data-[here=true]:bg-background data-[here=true]:border-border'
@@ -70,8 +70,8 @@ export function SidebarMenu() {
             data-active={isActive(item.path) || undefined}
             to={item.path || '#'}
             className={cn(
-              'flex flex-col items-center justify-center w-15.5 h-15 gap-1 p-2 rounded-lg',
-              'text-xs font-medium text-muted-foreground bg-transparent',
+              'flex h-15 w-15.5 flex-col items-center justify-center gap-1 rounded-lg p-2',
+              'text-muted-foreground bg-transparent text-xs font-medium',
               'hover:text-primary hover:bg-background hover:border-border',
               'data-[active=true]:text-primary data-[active=true]:bg-background data-[active=true]:border-border'
             )}
@@ -110,7 +110,7 @@ export function SidebarMenu() {
   };
 
   return (
-    <div className="flex flex-col gap-2.5 grow kt-scrollable-y-auto max-h-[calc(100vh-5rem)] lg:max-h-[calc(100vh-6rem)]">
+    <div className="kt-scrollable-y-auto flex max-h-[calc(100vh-5rem)] grow flex-col gap-2.5 lg:max-h-[calc(100vh-6rem)]">
       {buildMenu(menuConfig)}
     </div>
   );
diff --git a/apps/admin/src/app/layouts/08__DropdownMenu/components/Toolbar.tsx b/apps/admin/src/app/layouts/08__DropdownMenu/components/Toolbar.tsx
index dca4263..5499c01 100755
--- a/apps/admin/src/app/layouts/08__DropdownMenu/components/Toolbar.tsx
+++ b/apps/admin/src/app/layouts/08__DropdownMenu/components/Toolbar.tsx
@@ -13,7 +13,7 @@ export interface ToolbarHeadingProps {
 function Toolbar({ children }: { children?: ReactNode }) {
   return (
     <div className="pb-5">
-      <Container className="flex items-center justify-between flex-wrap gap-3">
+      <Container className="flex flex-wrap items-center justify-between gap-3">
         {children}
       </Container>
     </div>
@@ -21,7 +21,7 @@ function Toolbar({ children }: { children?: ReactNode }) {
 }
 
 function ToolbarActions({ children }: { children?: ReactNode }) {
-  return <div className="flex items-center flex-wrap gap-2.5">{children}</div>;
+  return <div className="flex flex-wrap items-center gap-2.5">{children}</div>;
 }
 
 function ToolbarBreadcrumbs() {
@@ -72,8 +72,8 @@ function ToolbarHeading({ title = '' }: ToolbarHeadingProps) {
   const item = getCurrentItem(menuConfig);
 
   return (
-    <div className="flex items-center flex-wrap gap-1 lg:gap-5">
-      <h1 className="font-medium text-base text-mono">{title || item?.title}</h1>
+    <div className="flex flex-wrap items-center gap-1 lg:gap-5">
+      <h1 className="text-mono text-base font-medium">{title || item?.title}</h1>
       <ToolbarBreadcrumbs />
     </div>
   );
diff --git a/apps/admin/src/app/layouts/08__DropdownMenu/layout.tsx b/apps/admin/src/app/layouts/08__DropdownMenu/layout.tsx
index b500b23..c7feb9d 100755
--- a/apps/admin/src/app/layouts/08__DropdownMenu/layout.tsx
+++ b/apps/admin/src/app/layouts/08__DropdownMenu/layout.tsx
@@ -35,11 +35,11 @@ export function DropdownMenuLayout() {
       <div className="flex grow">
         {isMobile && <Header />}
 
-        <div className="flex flex-col lg:flex-row grow pt-(--header-height) lg:pt-0">
+        <div className="flex grow flex-col pt-(--header-height) lg:flex-row lg:pt-0">
           {!isMobile && <Sidebar />}
 
-          <div className="flex flex-col grow rounded-xl bg-background border border-input lg:ms-(--sidebar-width) mt-0 m-4 lg:m-5">
-            <div className="flex flex-col grow kt-scrollable-y-auto lg:[scrollbar-width:auto] pt-5">
+          <div className="bg-background border-input m-4 mt-0 flex grow flex-col rounded-xl border lg:m-5 lg:ms-(--sidebar-width)">
+            <div className="kt-scrollable-y-auto flex grow flex-col pt-5 lg:[scrollbar-width:auto]">
               <main className="grow" role="content">
                 <Toolbar>
                   <ToolbarHeading />
@@ -62,7 +62,7 @@ export function DropdownMenuLayout() {
                     <Button
                       variant="outline"
                       asChild
-                      className="ms-2.5 hover:text-primary hover:[&_svg]:text-primary"
+                      className="hover:text-primary hover:[&_svg]:text-primary ms-2.5"
                     >
                       <Link to={'/account/home/get-started'}>
                         <Download />
diff --git a/apps/admin/src/app/layouts/09__ExtendedHeader/components/Footer.tsx b/apps/admin/src/app/layouts/09__ExtendedHeader/components/Footer.tsx
index b06f6f8..39d24e5 100755
--- a/apps/admin/src/app/layouts/09__ExtendedHeader/components/Footer.tsx
+++ b/apps/admin/src/app/layouts/09__ExtendedHeader/components/Footer.tsx
@@ -7,8 +7,8 @@ export function Footer() {
   return (
     <footer className="footer">
       <Container>
-        <div className="flex flex-col md:flex-row justify-center md:justify-between items-center gap-3 py-5">
-          <div className="flex order-2 md:order-1  gap-2 font-normal text-sm">
+        <div className="flex flex-col items-center justify-center gap-3 py-5 md:flex-row md:justify-between">
+          <div className="order-2 flex gap-2 text-sm font-normal md:order-1">
             <span className="text-muted-foreground">{currentYear} &copy;</span>
             <a
               href="https://keenthemes.com"
@@ -18,7 +18,7 @@ export function Footer() {
               Keenthemes Inc.
             </a>
           </div>
-          <nav className="flex order-1 md:order-2 gap-4 font-normal text-sm text-muted-foreground">
+          <nav className="text-muted-foreground order-1 flex gap-4 text-sm font-normal md:order-2">
             <a href={generalSettings.docsLink} target="_blank" className="hover:text-primary">
               Docs
             </a>
diff --git a/apps/admin/src/app/layouts/09__ExtendedHeader/components/Header.tsx b/apps/admin/src/app/layouts/09__ExtendedHeader/components/Header.tsx
index 7c52229..5dd16cc 100755
--- a/apps/admin/src/app/layouts/09__ExtendedHeader/components/Header.tsx
+++ b/apps/admin/src/app/layouts/09__ExtendedHeader/components/Header.tsx
@@ -30,12 +30,12 @@ export function Header() {
   return (
     <header
       className={cn(
-        'flex items-center transition-[height] shrink-0 h-(--header-height)',
+        'flex h-(--header-height) shrink-0 items-center transition-[height]',
         headerStickyOn &&
-          'transition-[height] fixed z-10 top-0 start-0 end-0 shadow-xs backdrop-blur-md bg-background/70'
+          'bg-background/70 fixed start-0 end-0 top-0 z-10 shadow-xs backdrop-blur-md transition-[height]'
       )}
     >
-      <Container className="flex lg:justify-between items-center gap-2.5">
+      <Container className="flex items-center gap-2.5 lg:justify-between">
         <HeaderLogo />
         <HeaderSearch />
         <HeaderTopbar />
diff --git a/apps/admin/src/app/layouts/09__ExtendedHeader/components/HeaderLogo.tsx b/apps/admin/src/app/layouts/09__ExtendedHeader/components/HeaderLogo.tsx
index 89f42a5..b116cc1 100755
--- a/apps/admin/src/app/layouts/09__ExtendedHeader/components/HeaderLogo.tsx
+++ b/apps/admin/src/app/layouts/09__ExtendedHeader/components/HeaderLogo.tsx
@@ -18,21 +18,21 @@ export function HeaderLogo() {
   }, [pathname]);
 
   return (
-    <div className="flex items-center gap-1 lg:w-100 grow lg:grow-0">
-      <div className="flex items-center gap-2 shrink-0">
+    <div className="flex grow items-center gap-1 lg:w-100 lg:grow-0">
+      <div className="flex shrink-0 items-center gap-2">
         <Link to="/">
           <img
             src={toAbsoluteUrl('/media/app/mini-logo-circle.svg')}
-            className="shrink-0 dark:hidden min-h-8.5"
+            className="min-h-8.5 shrink-0 dark:hidden"
             alt="logo"
           />
           <img
             src={toAbsoluteUrl('/media/app/mini-logo-circle-dark.svg')}
-            className="shrink-0 hidden dark:inline-block min-h-8.5"
+            className="hidden min-h-8.5 shrink-0 dark:inline-block"
             alt="logo"
           />
         </Link>
-        <h3 className="text-mono text-lg font-medium hidden md:block">Metronic</h3>
+        <h3 className="text-mono hidden text-lg font-medium md:block">Metronic</h3>
       </div>
 
       {isMobile && (
@@ -42,9 +42,9 @@ export function HeaderLogo() {
               <Menu />
             </Button>
           </SheetTrigger>
-          <SheetContent className="p-0 gap-0 w-68.75" side="left" close={false}>
-            <SheetHeader className="p-0 space-y-0" />
-            <SheetBody className="p-0 overflow-y-auto">
+          <SheetContent className="w-68.75 gap-0 p-0" side="left" close={false}>
+            <SheetHeader className="space-y-0 p-0" />
+            <SheetBody className="overflow-y-auto p-0">
               <MegaMenuMobile />
             </SheetBody>
           </SheetContent>
diff --git a/apps/admin/src/app/layouts/09__ExtendedHeader/components/HeaderSearch.tsx b/apps/admin/src/app/layouts/09__ExtendedHeader/components/HeaderSearch.tsx
index bb23040..f7bc791 100755
--- a/apps/admin/src/app/layouts/09__ExtendedHeader/components/HeaderSearch.tsx
+++ b/apps/admin/src/app/layouts/09__ExtendedHeader/components/HeaderSearch.tsx
@@ -5,16 +5,16 @@ export function HeaderSearch() {
   const handleInputChange = () => {};
 
   return (
-    <div className="hidden md:flex items-center">
+    <div className="hidden items-center md:flex">
       <div className="relative">
-        <Search className="text-muted-foreground absolute top-1/2 start-3.5 -translate-y-1/2 size-4" />
+        <Search className="text-muted-foreground absolute start-3.5 top-1/2 size-4 -translate-y-1/2" />
         <Input
           placeholder="Search"
           onChange={handleInputChange}
-          className="px-9 min-w-0"
+          className="min-w-0 px-9"
           value=""
         />
-        <span className="text-xs text-muted-foreground absolute end-3.5 top-1/2 -translate-y-1/2">
+        <span className="text-muted-foreground absolute end-3.5 top-1/2 -translate-y-1/2 text-xs">
           cmd + /
         </span>
       </div>
diff --git a/apps/admin/src/app/layouts/09__ExtendedHeader/components/HeaderTopbar.tsx b/apps/admin/src/app/layouts/09__ExtendedHeader/components/HeaderTopbar.tsx
index 3c68508..fd83887 100755
--- a/apps/admin/src/app/layouts/09__ExtendedHeader/components/HeaderTopbar.tsx
+++ b/apps/admin/src/app/layouts/09__ExtendedHeader/components/HeaderTopbar.tsx
@@ -10,8 +10,8 @@ import { UserDropdownMenu } from '#shared/widgets/UserDropdownMenu';
 
 export function HeaderTopbar() {
   return (
-    <div className="flex items-center gap-2 lg:gap-3.5 lg:w-100 justify-end">
-      <div className="flex items-center gap-2 me-0.5">
+    <div className="flex items-center justify-end gap-2 lg:w-100 lg:gap-3.5">
+      <div className="me-0.5 flex items-center gap-2">
         {/* <ChatSheet
           trigger={
             <Button
@@ -41,7 +41,7 @@ export function HeaderTopbar() {
         <UserDropdownMenu
           trigger={
             <img
-              className="ms-2.5 size-9 rounded-full border-2 border-success shrink-0 cursor-pointer"
+              className="border-success ms-2.5 size-9 shrink-0 cursor-pointer rounded-full border-2"
               src={toAbsoluteUrl('/media/avatars/300-2.png')}
               alt="User Avatar"
             />
@@ -49,14 +49,14 @@ export function HeaderTopbar() {
         />
       </div>
 
-      <div className="border-e border-border h-5"></div>
+      <div className="border-border h-5 border-e"></div>
 
       <div className="flex items-center space-x-2">
         <Switch id="auto-update" size="sm" defaultChecked />
         <Label htmlFor="auto-update">Pro</Label>
       </div>
 
-      <div className="border-e border-border h-5"></div>
+      <div className="border-border h-5 border-e"></div>
 
       {/* <DropdownMenu2
         trigger={
diff --git a/apps/admin/src/app/layouts/09__ExtendedHeader/components/MegaMenuMobile.tsx b/apps/admin/src/app/layouts/09__ExtendedHeader/components/MegaMenuMobile.tsx
index 63b2c64..eca44f3 100755
--- a/apps/admin/src/app/layouts/09__ExtendedHeader/components/MegaMenuMobile.tsx
+++ b/apps/admin/src/app/layouts/09__ExtendedHeader/components/MegaMenuMobile.tsx
@@ -163,7 +163,7 @@ export function MegaMenuMobile() {
         <AccordionMenuItem key={index} value={item.path || ''} className="text-[13px]">
           <Link to={item.path || '#'}>
             {item.icon && <item.icon data-slot="accordion-menu-icon" />}
-            <div className="flex items-center justify-between grow gap-2">
+            <div className="flex grow items-center justify-between gap-2">
               <span>{item.title}</span>
               {item.badge && (
                 <Badge variant="secondary" size="sm" className="ms-auto">
@@ -182,7 +182,7 @@ export function MegaMenuMobile() {
   // };
 
   return (
-    <div className="flex grow shrink-0 py-5 px-5">
+    <div className="flex shrink-0 grow px-5 py-5">
       <AccordionMenu
         selectedValue={pathname}
         matchPath={matchPath}
diff --git a/apps/admin/src/app/layouts/09__ExtendedHeader/components/Navbar.tsx b/apps/admin/src/app/layouts/09__ExtendedHeader/components/Navbar.tsx
index 0466fec..021d008 100755
--- a/apps/admin/src/app/layouts/09__ExtendedHeader/components/Navbar.tsx
+++ b/apps/admin/src/app/layouts/09__ExtendedHeader/components/Navbar.tsx
@@ -3,8 +3,8 @@ import { MegaMenu } from './MegaMenu';
 
 export function Navbar() {
   return (
-    <div className="bg-muted/80 lg:flex lg:items-stretch border-y border-border">
-      <Container className="flex flex-wrap justify-between items-center gap-2 px-0 lg:px-7.5">
+    <div className="bg-muted/80 border-border border-y lg:flex lg:items-stretch">
+      <Container className="flex flex-wrap items-center justify-between gap-2 px-0 lg:px-7.5">
         <MegaMenu />
       </Container>
     </div>
diff --git a/apps/admin/src/app/layouts/09__ExtendedHeader/components/Toolbar.tsx b/apps/admin/src/app/layouts/09__ExtendedHeader/components/Toolbar.tsx
index 56129e8..4d58c47 100755
--- a/apps/admin/src/app/layouts/09__ExtendedHeader/components/Toolbar.tsx
+++ b/apps/admin/src/app/layouts/09__ExtendedHeader/components/Toolbar.tsx
@@ -14,7 +14,7 @@ export interface ToolbarHeadingProps {
 function Toolbar({ children }: { children?: ReactNode }) {
   return (
     <Container>
-      <div className="flex items-center justify-between flex-wrap gap-2 la:gap-5 py-7">
+      <div className="la:gap-5 flex flex-wrap items-center justify-between gap-2 py-7">
         {children}
       </div>
     </Container>
@@ -22,7 +22,7 @@ function Toolbar({ children }: { children?: ReactNode }) {
 }
 
 function ToolbarActions({ children }: { children?: ReactNode }) {
-  return <div className="flex items-center flex-wrap gap-2.5">{children}</div>;
+  return <div className="flex flex-wrap items-center gap-2.5">{children}</div>;
 }
 
 function ToolbarBreadcrumbs() {
@@ -74,7 +74,7 @@ function ToolbarHeading({ title = '' }: ToolbarHeadingProps) {
 
   return (
     <div className="flex flex-col gap-1">
-      <h1 className="font-medium text-lg text-mono">{title || item?.title}</h1>
+      <h1 className="text-mono text-lg font-medium">{title || item?.title}</h1>
       <ToolbarBreadcrumbs />
     </div>
   );
diff --git a/apps/admin/src/app/layouts/09__ExtendedHeader/layout.tsx b/apps/admin/src/app/layouts/09__ExtendedHeader/layout.tsx
index f01b640..0b50329 100755
--- a/apps/admin/src/app/layouts/09__ExtendedHeader/layout.tsx
+++ b/apps/admin/src/app/layouts/09__ExtendedHeader/layout.tsx
@@ -43,7 +43,7 @@ export function ExtendedHeaderLayout() {
 
         {!isMobile && <Navbar />}
 
-        <main className="flex flex-col grow" role="content">
+        <main className="flex grow flex-col" role="content">
           {!pathname.includes('/public-profile/') && (
             <Toolbar>
               <ToolbarHeading />
diff --git a/apps/admin/src/app/layouts/10__DarkSidebar/components/Footer.tsx b/apps/admin/src/app/layouts/10__DarkSidebar/components/Footer.tsx
index 32b99c4..39d24e5 100755
--- a/apps/admin/src/app/layouts/10__DarkSidebar/components/Footer.tsx
+++ b/apps/admin/src/app/layouts/10__DarkSidebar/components/Footer.tsx
@@ -7,8 +7,8 @@ export function Footer() {
   return (
     <footer className="footer">
       <Container>
-        <div className="flex flex-col md:flex-row justify-center md:justify-between items-center gap-3 py-5">
-          <div className="flex order-2 md:order-1 gap-2 font-normal text-sm">
+        <div className="flex flex-col items-center justify-center gap-3 py-5 md:flex-row md:justify-between">
+          <div className="order-2 flex gap-2 text-sm font-normal md:order-1">
             <span className="text-muted-foreground">{currentYear} &copy;</span>
             <a
               href="https://keenthemes.com"
@@ -18,7 +18,7 @@ export function Footer() {
               Keenthemes Inc.
             </a>
           </div>
-          <nav className="flex order-1 md:order-2 gap-4 font-normal text-sm text-muted-foreground">
+          <nav className="text-muted-foreground order-1 flex gap-4 text-sm font-normal md:order-2">
             <a href={generalSettings.docsLink} target="_blank" className="hover:text-primary">
               Docs
             </a>
diff --git a/apps/admin/src/app/layouts/10__DarkSidebar/components/Header.tsx b/apps/admin/src/app/layouts/10__DarkSidebar/components/Header.tsx
index dc82498..0292d7e 100755
--- a/apps/admin/src/app/layouts/10__DarkSidebar/components/Header.tsx
+++ b/apps/admin/src/app/layouts/10__DarkSidebar/components/Header.tsx
@@ -21,8 +21,8 @@ export function Header() {
   }, [pathname]);
 
   return (
-    <header className="flex lg:hidden items-center fixed z-10 top-0 start-0 end-0 shrink-0 bg-mono dark:bg-background h-(--header-height)">
-      <Container className="flex items-center justify-between flex-wrap gap-3">
+    <header className="bg-mono dark:bg-background fixed start-0 end-0 top-0 z-10 flex h-(--header-height) shrink-0 items-center lg:hidden">
+      <Container className="flex flex-wrap items-center justify-between gap-3">
         <Link to="/">
           <img
             src={toAbsoluteUrl('/media/app/mini-logo-circle-success.svg')}
@@ -38,9 +38,9 @@ export function Header() {
                 <Menu />
               </Button>
             </SheetTrigger>
-            <SheetContent className="dark p-0 gap-0 w-62.5" side="left" close={false}>
-              <SheetHeader className="p-0 space-y-0" />
-              <SheetBody className="p-0 grow flex flex-col overflow-y-auto">
+            <SheetContent className="dark w-62.5 gap-0 p-0" side="left" close={false}>
+              <SheetHeader className="space-y-0 p-0" />
+              <SheetBody className="flex grow flex-col overflow-y-auto p-0">
                 <SidebarHeader />
                 <SidebarMenu />
                 <SidebarFooter />
diff --git a/apps/admin/src/app/layouts/10__DarkSidebar/components/Sidebar.tsx b/apps/admin/src/app/layouts/10__DarkSidebar/components/Sidebar.tsx
index 0389f3e..295d9a6 100755
--- a/apps/admin/src/app/layouts/10__DarkSidebar/components/Sidebar.tsx
+++ b/apps/admin/src/app/layouts/10__DarkSidebar/components/Sidebar.tsx
@@ -4,7 +4,7 @@ import { SidebarMenu } from './SidebarMenu';
 
 export function Sidebar() {
   return (
-    <div className="flex-col fixed top-0 bottom-0 z-20 lg:flex items-stretch shrink-0 w-(--sidebar-width) dark">
+    <div className="dark fixed top-0 bottom-0 z-20 w-(--sidebar-width) shrink-0 flex-col items-stretch lg:flex">
       <SidebarHeader />
       <SidebarMenu />
       <SidebarFooter />
diff --git a/apps/admin/src/app/layouts/10__DarkSidebar/components/SidebarFooter.tsx b/apps/admin/src/app/layouts/10__DarkSidebar/components/SidebarFooter.tsx
index 7d85d69..ff3269b 100755
--- a/apps/admin/src/app/layouts/10__DarkSidebar/components/SidebarFooter.tsx
+++ b/apps/admin/src/app/layouts/10__DarkSidebar/components/SidebarFooter.tsx
@@ -7,11 +7,11 @@ import { UserDropdownMenu } from '#shared/widgets/UserDropdownMenu';
 
 export function SidebarFooter() {
   return (
-    <div className="flex flex-center justify-between shrink-0 ps-4 pe-3.5 mb-3.5">
+    <div className="flex-center mb-3.5 flex shrink-0 justify-between ps-4 pe-3.5">
       <UserDropdownMenu
         trigger={
           <img
-            className="size-9 rounded-full border-2 border-mono/25 shrink-0 cursor-pointer"
+            className="border-mono/25 size-9 shrink-0 cursor-pointer rounded-full border-2"
             src={toAbsoluteUrl('/media/avatars/300-2.png')}
             alt="User Avatar"
           />
diff --git a/apps/admin/src/app/layouts/10__DarkSidebar/components/SidebarHeader.tsx b/apps/admin/src/app/layouts/10__DarkSidebar/components/SidebarHeader.tsx
index 58a4388..2e280d1 100755
--- a/apps/admin/src/app/layouts/10__DarkSidebar/components/SidebarHeader.tsx
+++ b/apps/admin/src/app/layouts/10__DarkSidebar/components/SidebarHeader.tsx
@@ -28,7 +28,7 @@ export function SidebarHeader() {
 
   return (
     <div className="flex flex-col gap-2.5">
-      <div className="flex items-center justify-between gap-2.5 px-3.5 h-17.5">
+      <div className="flex h-17.5 items-center justify-between gap-2.5 px-3.5">
         <Link to="/">
           <img
             src={toAbsoluteUrl('/media/app/mini-logo-circle-success.svg')}
@@ -38,9 +38,9 @@ export function SidebarHeader() {
         </Link>
 
         <DropdownMenu>
-          <DropdownMenuTrigger className="cursor-pointer text-mono font-medium flex items-center justify-between gap-2 w-47.5">
+          <DropdownMenuTrigger className="text-mono flex w-47.5 cursor-pointer items-center justify-between gap-2 font-medium">
             Metronic
-            <ChevronsUpDown className="size-3.5! me-1" />
+            <ChevronsUpDown className="me-1 size-3.5!" />
           </DropdownMenuTrigger>
           <DropdownMenuContent
             sideOffset={10}
@@ -65,7 +65,7 @@ export function SidebarHeader() {
       </div>
 
       <div className="flex items-center gap-2.5 px-3.5">
-        <Button asChild variant="secondary" className="text-white justify-center w-full max-w-49.5">
+        <Button asChild variant="secondary" className="w-full max-w-49.5 justify-center text-white">
           <Link to="/public-profile/projects/3-columns">
             <Plus /> Add New
           </Link>
diff --git a/apps/admin/src/app/layouts/10__DarkSidebar/components/SidebarMenu.tsx b/apps/admin/src/app/layouts/10__DarkSidebar/components/SidebarMenu.tsx
index 6587481..9a3bdc7 100755
--- a/apps/admin/src/app/layouts/10__DarkSidebar/components/SidebarMenu.tsx
+++ b/apps/admin/src/app/layouts/10__DarkSidebar/components/SidebarMenu.tsx
@@ -3,7 +3,7 @@ import { SidebarMenuSecondary } from './SidebarMenuSecondary';
 
 export function SidebarMenu() {
   return (
-    <div className="space-y-5 kt-scrollable-y-auto grow shrink-0 my-5 [--scrollbar-thumb-color:var(--input)] max-h-[calc(100vh-13rem)]">
+    <div className="kt-scrollable-y-auto my-5 max-h-[calc(100vh-13rem)] shrink-0 grow space-y-5 [--scrollbar-thumb-color:var(--input)]">
       <SidebarMenuPrimary />
       <SidebarMenuSecondary />
     </div>
diff --git a/apps/admin/src/app/layouts/10__DarkSidebar/components/SidebarMenuSecondary.tsx b/apps/admin/src/app/layouts/10__DarkSidebar/components/SidebarMenuSecondary.tsx
index a44449e..68a86a4 100755
--- a/apps/admin/src/app/layouts/10__DarkSidebar/components/SidebarMenuSecondary.tsx
+++ b/apps/admin/src/app/layouts/10__DarkSidebar/components/SidebarMenuSecondary.tsx
@@ -22,18 +22,18 @@ const items = [
 export function SidebarMenuSecondary() {
   return (
     <div>
-      <h3 className="text-xs text-muted-foreground uppercase ps-5 inline-block mb-3">Outline</h3>
-      <div className="flex flex-col w-full gap-1.5 px-3.5">
+      <h3 className="text-muted-foreground mb-3 inline-block ps-5 text-xs uppercase">Outline</h3>
+      <div className="flex w-full flex-col gap-1.5 px-3.5">
         {items.map((item, index) => (
-          <Link key={index} to={item.path} className="group flex items-center gap-2.5 py-1 px-1">
-            <span className="bg-black rounded-md flex items-center justify-center size-7">
+          <Link key={index} to={item.path} className="group flex items-center gap-2.5 px-1 py-1">
+            <span className="flex size-7 items-center justify-center rounded-md bg-black">
               <img
                 src={toAbsoluteUrl(`/media/brand-logos/${item.logo}`)}
                 className="size-3.5"
                 alt={item.title}
               />
             </span>
-            <span className="text-sm text-secondary-foreground group-hover:text-mono">
+            <span className="text-secondary-foreground group-hover:text-mono text-sm">
               {item.title}
             </span>
           </Link>
diff --git a/apps/admin/src/app/layouts/10__DarkSidebar/components/Toolbar.tsx b/apps/admin/src/app/layouts/10__DarkSidebar/components/Toolbar.tsx
index 2e80174..2c95599 100755
--- a/apps/admin/src/app/layouts/10__DarkSidebar/components/Toolbar.tsx
+++ b/apps/admin/src/app/layouts/10__DarkSidebar/components/Toolbar.tsx
@@ -14,7 +14,7 @@ export interface ToolbarHeadingProps {
 function Toolbar({ children }: { children?: ReactNode }) {
   return (
     <Container>
-      <div className="flex items-center justify-between flex-wrap gap-2 lg:gap-5 pt-3 pb-7">
+      <div className="flex flex-wrap items-center justify-between gap-2 pt-3 pb-7 lg:gap-5">
         {children}
       </div>
     </Container>
@@ -22,7 +22,7 @@ function Toolbar({ children }: { children?: ReactNode }) {
 }
 
 function ToolbarActions({ children }: { children?: ReactNode }) {
-  return <div className="flex items-center flex-wrap gap-2.5">{children}</div>;
+  return <div className="flex flex-wrap items-center gap-2.5">{children}</div>;
 }
 
 function ToolbarBreadcrumbs() {
@@ -74,7 +74,7 @@ function ToolbarHeading({ title = '' }: ToolbarHeadingProps) {
 
   return (
     <div className="flex flex-col gap-1">
-      <h1 className="font-medium text-lg text-mono">{title || item?.title}</h1>
+      <h1 className="text-mono text-lg font-medium">{title || item?.title}</h1>
       <ToolbarBreadcrumbs />
     </div>
   );
diff --git a/apps/admin/src/app/layouts/10__DarkSidebar/components/ToolbarMenu.tsx b/apps/admin/src/app/layouts/10__DarkSidebar/components/ToolbarMenu.tsx
index f00c82a..06bbb86 100755
--- a/apps/admin/src/app/layouts/10__DarkSidebar/components/ToolbarMenu.tsx
+++ b/apps/admin/src/app/layouts/10__DarkSidebar/components/ToolbarMenu.tsx
@@ -24,14 +24,14 @@ export function ToolbarMenu() {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="outline" size="sm" className="flex items-center gap-1 flex-nowrap">
+        <Button variant="outline" size="sm" className="flex flex-nowrap items-center gap-1">
           <Calendar className="h-4 w-4" />
-          <span className="hidden md:inline whitespace-nowrap">September, 2024</span>
-          <span className="inline md:hidden whitespace-nowrap">Sep, 2024</span>
-          <ChevronDown className="h-3 w-3 ml-1 lg:ml-4" />
+          <span className="hidden whitespace-nowrap md:inline">September, 2024</span>
+          <span className="inline whitespace-nowrap md:hidden">Sep, 2024</span>
+          <ChevronDown className="ml-1 h-3 w-3 lg:ml-4" />
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" className="w-48 max-h-62.5 overflow-y-auto">
+      <DropdownMenuContent align="end" className="max-h-62.5 w-48 overflow-y-auto">
         {months.map((item, index) => (
           <DropdownMenuItem
             key={index}
diff --git a/apps/admin/src/app/layouts/10__DarkSidebar/layout.tsx b/apps/admin/src/app/layouts/10__DarkSidebar/layout.tsx
index 358ef15..7a47967 100755
--- a/apps/admin/src/app/layouts/10__DarkSidebar/layout.tsx
+++ b/apps/admin/src/app/layouts/10__DarkSidebar/layout.tsx
@@ -41,11 +41,11 @@ export const DarkSidebarLayout = () => {
       <div className="flex grow">
         {isMobile && <Header />}
 
-        <div className="flex flex-col lg:flex-row grow pt-(--header-height) lg:pt-0">
+        <div className="flex grow flex-col pt-(--header-height) lg:flex-row lg:pt-0">
           {!isMobile && <Sidebar />}
 
-          <div className="flex flex-col grow lg:rounded-s-xl bg-background border border-input lg:ms-(--sidebar-width)">
-            <div className="flex flex-col grow kt-scrollable-y-auto lg:[scrollbar-width:auto] pt-5">
+          <div className="bg-background border-input flex grow flex-col border lg:ms-(--sidebar-width) lg:rounded-s-xl">
+            <div className="kt-scrollable-y-auto flex grow flex-col pt-5 lg:[scrollbar-width:auto]">
               <main className="grow" role="content">
                 <Toolbar>
                   <ToolbarHeading />
diff --git a/apps/admin/src/core/AccessControl/view/forms/AdminForm/Component.tsx b/apps/admin/src/core/AccessControl/view/forms/AdminForm/Component.tsx
index b5a2e5c..027b578 100755
--- a/apps/admin/src/core/AccessControl/view/forms/AdminForm/Component.tsx
+++ b/apps/admin/src/core/AccessControl/view/forms/AdminForm/Component.tsx
@@ -70,7 +70,7 @@ export const AdminForm: React.FC<{
           </GridElement>
         </FormGrid>
 
-        <div className="flex gap-4 items-center w-full">
+        <div className="flex w-full items-center gap-4">
           <h3 className="shrink-0 font-medium">
             {intl.formatMessage({ id: 'ACCESS_CONTROL.ROLE.ROLES' })}
           </h3>
@@ -83,7 +83,7 @@ export const AdminForm: React.FC<{
           </GridElement>
         </FormGrid>
 
-        <div className="flex gap-4 items-center w-full">
+        <div className="flex w-full items-center gap-4">
           <h3 className="shrink-0 font-medium">
             {intl.formatMessage({ id: 'ACCESS_CONTROL.PASSWORD.TITLE' })}
           </h3>
diff --git a/apps/admin/src/core/AccessControl/view/forms/RoleForm/Component.tsx b/apps/admin/src/core/AccessControl/view/forms/RoleForm/Component.tsx
index ec27d2a..60379da 100755
--- a/apps/admin/src/core/AccessControl/view/forms/RoleForm/Component.tsx
+++ b/apps/admin/src/core/AccessControl/view/forms/RoleForm/Component.tsx
@@ -57,7 +57,7 @@ export const RoleForm: React.FC<{
                           <FormItem key={index}>
                             <FormLabel className="capitalize">{name}</FormLabel>
                             <FormControl>
-                              <SwitchWrapper className="flex-col gap-2.5 items-start">
+                              <SwitchWrapper className="flex-col items-start gap-2.5">
                                 {list.map(({ label, value }, index) => {
                                   return (
                                     <FormItem key={index} className="flex-row items-center">
diff --git a/apps/admin/src/core/AccessControl/view/layouts/AdminManagementLayout.tsx b/apps/admin/src/core/AccessControl/view/layouts/AdminManagementLayout.tsx
index 3357f25..86a4367 100755
--- a/apps/admin/src/core/AccessControl/view/layouts/AdminManagementLayout.tsx
+++ b/apps/admin/src/core/AccessControl/view/layouts/AdminManagementLayout.tsx
@@ -17,15 +17,15 @@ const AdminManagementLayout: React.FC = () => {
 
   return (
     <React.Fragment>
-      <Container className="flex items-center justify-between flex-wrap gap-3 pb-5">
+      <Container className="flex flex-wrap items-center justify-between gap-3 pb-5">
         <header className="w-full space-y-1">
-          <div className="flex items-center gap-2 w-full">
+          <div className="flex w-full items-center gap-2">
             <AccessControlLogo />
             <div>
-              <h1 className="font-medium text-lg text-mono">
+              <h1 className="text-mono text-lg font-medium">
                 {intl.formatMessage({ id: 'ACCESS_CONTROL.MENU.TITLE' })}
               </h1>
-              <h2 className="flex items-center gap-2 text-sm font-normal text-muted-foreground">
+              <h2 className="text-muted-foreground flex items-center gap-2 text-sm font-normal">
                 {activePage?.title}
               </h2>
             </div>
diff --git a/apps/admin/src/core/AccessControl/view/ui/AccessControlLogo.tsx b/apps/admin/src/core/AccessControl/view/ui/AccessControlLogo.tsx
index a63b474..6db1a9c 100644
--- a/apps/admin/src/core/AccessControl/view/ui/AccessControlLogo.tsx
+++ b/apps/admin/src/core/AccessControl/view/ui/AccessControlLogo.tsx
@@ -11,13 +11,13 @@ const AccessControlLogo: React.FC<React.HTMLAttributes<HTMLImageElement>> = ({
     <React.Fragment>
       <img
         src={toAbsoluteUrl('/media/app/access-control-light.svg')}
-        className={cn('dark:hidden size-8.5', className)}
+        className={cn('size-8.5 dark:hidden', className)}
         alt="File Manager"
         {...props}
       />
       <img
         src={toAbsoluteUrl('/media/app/access-control-dark.svg')}
-        className={cn('hidden dark:inline-block size-8.5', className)}
+        className={cn('hidden size-8.5 dark:inline-block', className)}
         alt="File Manager"
         {...props}
       />
diff --git a/apps/admin/src/core/AccessControl/view/widgets/AdminTable.tsx b/apps/admin/src/core/AccessControl/view/widgets/AdminTable.tsx
index bfc3454..0f11231 100755
--- a/apps/admin/src/core/AccessControl/view/widgets/AdminTable.tsx
+++ b/apps/admin/src/core/AccessControl/view/widgets/AdminTable.tsx
@@ -126,7 +126,7 @@ export const AdminTable = () => {
           />
         ),
         cell: (info) => (
-          <div className="flex items-center text-foreground font-normal">
+          <div className="text-foreground flex items-center font-normal">
             {info.row.original.email}
           </div>
         ),
@@ -153,7 +153,7 @@ export const AdminTable = () => {
           />
         ),
         cell: (info) => (
-          <div className="flex items-center text-foreground font-normal">
+          <div className="text-foreground flex items-center font-normal">
             <Badge
               variant={
                 info.row.original.status === AdminStatusEnum.ACTIVE ? 'success' : 'destructive'
@@ -185,7 +185,7 @@ export const AdminTable = () => {
             intl.formatMessage({ id: 'ACCESS_CONTROL.ADMIN.EDIT' }) + ' ' + name;
 
           return (
-            <div className="flex items-center gap-2 justify-end">
+            <div className="flex items-center justify-end gap-2">
               <PermissionGate requiredPermissions="admins.update">
                 <ManageAdminTrigger title={editModalTitle} id={id}>
                   <Button variant="secondary" size="sm" shape="default" mode="icon">
diff --git a/apps/admin/src/core/AccessControl/view/widgets/RoleTable.tsx b/apps/admin/src/core/AccessControl/view/widgets/RoleTable.tsx
index 9641150..9011b3c 100755
--- a/apps/admin/src/core/AccessControl/view/widgets/RoleTable.tsx
+++ b/apps/admin/src/core/AccessControl/view/widgets/RoleTable.tsx
@@ -97,7 +97,7 @@ export const RoleTable = () => {
             intl.formatMessage({ id: 'ACCESS_CONTROL.ROLE.EDIT' }) + ' ' + info.row.original.name;
 
           return (
-            <div className="flex items-center gap-2 justify-end">
+            <div className="flex items-center justify-end gap-2">
               <PermissionGate requiredPermissions="role.update">
                 <ManageRoleTrigger title={editModalTitle} id={id}>
                   <Button variant="secondary" size="sm" shape="default" mode="icon">
diff --git a/apps/admin/src/core/AccountSettings/pages/Profile/index.tsx b/apps/admin/src/core/AccountSettings/pages/Profile/index.tsx
index f3205c7..96ae9ea 100755
--- a/apps/admin/src/core/AccountSettings/pages/Profile/index.tsx
+++ b/apps/admin/src/core/AccountSettings/pages/Profile/index.tsx
@@ -46,7 +46,7 @@ const ProfilePage: React.FC = () => {
         </Toolbar>
       </Container>
       <Container className="space-y-5 pb-5">
-        <Card className="max-w-lg w-full mx-auto">
+        <Card className="mx-auto w-full max-w-lg">
           <CardContent>
             <ProfileForm
               isSubmitting={loading}
@@ -56,7 +56,7 @@ const ProfilePage: React.FC = () => {
           </CardContent>
         </Card>
 
-        <Card className="max-w-lg w-full mx-auto">
+        <Card className="mx-auto w-full max-w-lg">
           <CardContent>
             <CardHeader>
               <CardTitle>{intl.formatMessage({ id: 'ACCOUNT.ROLES' })}</CardTitle>
diff --git a/apps/admin/src/core/AccountSettings/view/forms/ProfileForm/fields/AvatarCropperField.tsx b/apps/admin/src/core/AccountSettings/view/forms/ProfileForm/fields/AvatarCropperField.tsx
index 6757b14..f48bcbd 100755
--- a/apps/admin/src/core/AccountSettings/view/forms/ProfileForm/fields/AvatarCropperField.tsx
+++ b/apps/admin/src/core/AccountSettings/view/forms/ProfileForm/fields/AvatarCropperField.tsx
@@ -176,7 +176,7 @@ const AvatarCropperField: React.FC = () => {
         </DialogContent>
       </Dialog>
 
-      <div className="flex flex-col gap-5 items-center">
+      <div className="flex flex-col items-center gap-5">
         <input
           type="file"
           accept="image/png, image/jpeg"
@@ -193,10 +193,10 @@ const AvatarCropperField: React.FC = () => {
               <FormGrid columns={1} className="sm:grid-cols-2">
                 <GridElement colSpan={1}>
                   <FormControl>
-                    <div className="w-full sm:w-auto px-10 py-2 flex items-center justify-center bg-secondary/40 rounded-lg">
-                      <div className="rounded-full overflow-hidden size-28">
+                    <div className="bg-secondary/40 flex w-full items-center justify-center rounded-lg px-10 py-2 sm:w-auto">
+                      <div className="size-28 overflow-hidden rounded-full">
                         <img
-                          className="w-full h-full"
+                          className="h-full w-full"
                           alt={intl.formatMessage({ id: 'ACCOUNT.AVATAR.ALT' })}
                           src={getAvatarSrc(field.value)}
                         />
diff --git a/apps/admin/src/core/Auth/pages/SignInPage.tsx b/apps/admin/src/core/Auth/pages/SignInPage.tsx
index 432eb4f..711c2e4 100755
--- a/apps/admin/src/core/Auth/pages/SignInPage.tsx
+++ b/apps/admin/src/core/Auth/pages/SignInPage.tsx
@@ -78,11 +78,11 @@ export function SignInPage() {
 
   return (
     <>
-      <div className="text-center space-y-1 pb-3">
+      <div className="space-y-1 pb-3 text-center">
         <h1 className="text-2xl font-semibold tracking-tight">
           {intl.formatMessage({ id: 'AUTH.SIGN_IN' })}
         </h1>
-        <p className="text-sm text-muted-foreground">
+        <p className="text-muted-foreground text-sm">
           {intl.formatMessage({ id: 'AUTH.WELCOME_BACK_MESSAGE' })}
         </p>
       </div>
diff --git a/apps/admin/src/core/Auth/view/layouts/Branded.tsx b/apps/admin/src/core/Auth/view/layouts/Branded.tsx
index 73be6c4..61f651d 100755
--- a/apps/admin/src/core/Auth/view/layouts/Branded.tsx
+++ b/apps/admin/src/core/Auth/view/layouts/Branded.tsx
@@ -21,8 +21,8 @@ export function BrandedLayout() {
           }
         `}
       </style>
-      <div className="grid lg:grid-cols-2 grow">
-        <div className="flex justify-center items-center p-8 lg:p-10 order-2 lg:order-1">
+      <div className="grid grow lg:grid-cols-2">
+        <div className="order-2 flex items-center justify-center p-8 lg:order-1 lg:p-10">
           <Card className="w-full max-w-100">
             <CardContent className="p-6">
               <Outlet />
@@ -30,28 +30,28 @@ export function BrandedLayout() {
           </Card>
         </div>
 
-        <div className="lg:rounded-xl lg:border lg:border-border lg:m-5 order-1 lg:order-2 bg-top xxl:bg-center xl:bg-cover bg-no-repeat branded-bg">
-          <div className="flex flex-col p-8 lg:p-16 gap-4">
+        <div className="lg:border-border xxl:bg-center branded-bg order-1 bg-top bg-no-repeat lg:order-2 lg:m-5 lg:rounded-xl lg:border xl:bg-cover">
+          <div className="flex flex-col gap-4 p-8 lg:p-16">
             <Link to="/">
               <img
                 src={toAbsoluteUrl('/media/app/logo-dark.svg')}
-                className="hidden dark:inline-block h-25 max-w-none"
+                className="hidden h-25 max-w-none dark:inline-block"
                 alt="Logo"
               />
               <img
                 src={toAbsoluteUrl('/media/app/logo-light.svg')}
-                className="dark:hidden h-25 max-w-none"
+                className="h-25 max-w-none dark:hidden"
                 alt="Logo"
               />
             </Link>
 
             <div className="flex flex-col gap-3">
-              <h3 className="text-2xl font-semibold text-mono">
+              <h3 className="text-mono text-2xl font-semibold">
                 {intl.formatMessage({
                   id: 'AUTH.LAYOUT.SECURE_DASHBOARD_ACCESS'
                 })}
               </h3>
-              <div className="text-base font-medium text-secondary-foreground">
+              <div className="text-secondary-foreground text-base font-medium">
                 {intl.formatMessage(
                   { id: 'AUTH.LAYOUT.DASHBOARD_DESCRIPTION' },
                   {
diff --git a/apps/admin/src/core/Auth/view/layouts/Classic.tsx b/apps/admin/src/core/Auth/view/layouts/Classic.tsx
index f669d41..e12822e 100755
--- a/apps/admin/src/core/Auth/view/layouts/Classic.tsx
+++ b/apps/admin/src/core/Auth/view/layouts/Classic.tsx
@@ -16,7 +16,7 @@ export function ClassicLayout() {
           }
         `}
       </style>
-      <div className="flex flex-col items-center justify-center grow bg-center bg-no-repeat page-bg">
+      <div className="page-bg flex grow flex-col items-center justify-center bg-center bg-no-repeat">
         <div className="m-5">
           <Link to="/">
             <img
diff --git a/apps/admin/src/core/Dashboard/pages/DashboardPage.tsx b/apps/admin/src/core/Dashboard/pages/DashboardPage.tsx
index 77597ec..4fd7f0f 100644
--- a/apps/admin/src/core/Dashboard/pages/DashboardPage.tsx
+++ b/apps/admin/src/core/Dashboard/pages/DashboardPage.tsx
@@ -60,7 +60,7 @@ export default function DashboardPage() {
                   onSelect={setTempDateRange}
                   numberOfMonths={2}
                 />
-                <div className="flex items-center justify-end gap-1.5 border-t border-border p-3">
+                <div className="border-border flex items-center justify-end gap-1.5 border-t p-3">
                   <Button variant="outline" onClick={handleDateRangeReset}>
                     Reset
                   </Button>
diff --git a/apps/admin/src/core/Dashboard/view/widgets/DashboardContent/components/ChannelStats.tsx b/apps/admin/src/core/Dashboard/view/widgets/DashboardContent/components/ChannelStats.tsx
index a787475..701ecdb 100644
--- a/apps/admin/src/core/Dashboard/view/widgets/DashboardContent/components/ChannelStats.tsx
+++ b/apps/admin/src/core/Dashboard/view/widgets/DashboardContent/components/ChannelStats.tsx
@@ -33,30 +33,30 @@ const ChannelStats = () => {
   const renderItem = (item: IChannelStatsItem, index: number) => {
     return (
       <Card key={index}>
-        <CardContent className="p-0 flex flex-col justify-between gap-6 h-full bg-cover rtl:bg-position-[left_top_-1.7rem] bg-position-[right_top_-1.7rem] bg-no-repeat channel-stats-bg">
+        <CardContent className="channel-stats-bg flex h-full flex-col justify-between gap-6 bg-cover bg-position-[right_top_-1.7rem] bg-no-repeat p-0 rtl:bg-position-[left_top_-1.7rem]">
           {item.logoDark ? (
             <>
               <img
                 src={toAbsoluteUrl(`/media/brand-logos/${item.logo}`)}
-                className="dark:hidden w-7 mt-4 ms-5"
+                className="ms-5 mt-4 w-7 dark:hidden"
                 alt="image"
               />
               <img
                 src={toAbsoluteUrl(`/media/brand-logos/${item.logoDark}`)}
-                className="light:hidden w-7 mt-4 ms-5"
+                className="light:hidden ms-5 mt-4 w-7"
                 alt="image"
               />
             </>
           ) : (
             <img
               src={toAbsoluteUrl(`/media/brand-logos/${item.logo}`)}
-              className="w-7 mt-4 ms-5"
+              className="ms-5 mt-4 w-7"
               alt="image"
             />
           )}
-          <div className="flex flex-col gap-1 pb-4 px-5">
-            <span className="text-3xl font-semibold text-mono">{item.info}</span>
-            <span className="text-sm font-normal text-muted-forehead">{item.desc}</span>
+          <div className="flex flex-col gap-1 px-5 pb-4">
+            <span className="text-mono text-3xl font-semibold">{item.info}</span>
+            <span className="text-muted-forehead text-sm font-normal">{item.desc}</span>
           </div>
         </CardContent>
       </Card>
diff --git a/apps/admin/src/core/Dashboard/view/widgets/DashboardContent/components/EarningsChart.tsx b/apps/admin/src/core/Dashboard/view/widgets/DashboardContent/components/EarningsChart.tsx
index fde3c63..17402a3 100644
--- a/apps/admin/src/core/Dashboard/view/widgets/DashboardContent/components/EarningsChart.tsx
+++ b/apps/admin/src/core/Dashboard/view/widgets/DashboardContent/components/EarningsChart.tsx
@@ -194,7 +194,7 @@ const EarningsChart = () => {
           </Select>
         </div>
       </CardHeader>
-      <CardContent className="flex flex-col justify-end items-stretch grow px-3 py-1">
+      <CardContent className="flex grow flex-col items-stretch justify-end px-3 py-1">
         <ApexChart
           id="earnings_chart"
           options={options}
diff --git a/apps/admin/src/core/Dashboard/view/widgets/DashboardContent/components/EntryCallout.tsx b/apps/admin/src/core/Dashboard/view/widgets/DashboardContent/components/EntryCallout.tsx
index f839f85..02e6124 100644
--- a/apps/admin/src/core/Dashboard/view/widgets/DashboardContent/components/EntryCallout.tsx
+++ b/apps/admin/src/core/Dashboard/view/widgets/DashboardContent/components/EntryCallout.tsx
@@ -24,7 +24,7 @@ const EntryCallout = ({ className }: IEntryCalloutProps) => {
       </style>
 
       <Card className={`h-full ${className}`}>
-        <CardContent className="p-10 bg-size-[80%] rtl:bg-position-[-70%_25%] bg-position-[175%_25%] bg-no-repeat entry-callout-bg">
+        <CardContent className="entry-callout-bg bg-size-[80%] bg-position-[175%_25%] bg-no-repeat p-10 rtl:bg-position-[-70%_25%]">
           <div className="flex flex-col justify-center gap-4">
             <AvatarGroup
               size="size-10"
@@ -38,14 +38,14 @@ const EntryCallout = ({ className }: IEntryCalloutProps) => {
                 }
               ]}
             />
-            <h2 className="text-xl font-semibold text-mono">
+            <h2 className="text-mono text-xl font-semibold">
               Connect Today & Join <br />
               the{' '}
               <Button mode="link" asChild className="text-xl font-semibold">
                 <Link to="#">KeenThemes Network</Link>
               </Button>
             </h2>
-            <p className="text-sm font-normal text-secondary-foreground leading-5.5">
+            <p className="text-secondary-foreground text-sm leading-5.5 font-normal">
               Enhance your projects with premium themes and <br />
               templates. Join the KeenThemes community today <br />
               for top-quality designs and resources.
diff --git a/apps/admin/src/core/Dashboard/view/widgets/DashboardContent/components/Highlights.tsx b/apps/admin/src/core/Dashboard/view/widgets/DashboardContent/components/Highlights.tsx
index 19670c8..226e36f 100644
--- a/apps/admin/src/core/Dashboard/view/widgets/DashboardContent/components/Highlights.tsx
+++ b/apps/admin/src/core/Dashboard/view/widgets/DashboardContent/components/Highlights.tsx
@@ -62,16 +62,16 @@ const Highlights = ({ limit }: IHighlightsProps) => {
 
   const renderRow = (row: IHighlightsRow, index: number) => {
     return (
-      <div key={index} className="flex items-center justify-between flex-wrap gap-2">
+      <div key={index} className="flex flex-wrap items-center justify-between gap-2">
         <div className="flex items-center gap-1.5">
-          <row.icon className="size-4.5 text-muted-foreground" />
-          <span className="text-sm font-normal text-mono">{row.text}</span>
+          <row.icon className="text-muted-foreground size-4.5" />
+          <span className="text-mono text-sm font-normal">{row.text}</span>
         </div>
-        <div className="flex items-center text-sm font-medium text-foreground gap-6">
+        <div className="text-foreground flex items-center gap-6 text-sm font-medium">
           <span className="lg:text-right">${row.total}k</span>
           <span className="flex items-center justify-end gap-1">
             {row.increase ? (
-              <ArrowUp className="text-green-500 size-4" />
+              <ArrowUp className="size-4 text-green-500" />
             ) : (
               <ArrowDown className="text-destructive size-4" />
             )}
@@ -86,7 +86,7 @@ const Highlights = ({ limit }: IHighlightsProps) => {
     return (
       <div key={index} className="flex items-center gap-1.5">
         <BadgeDot className={item.badgeColor} />
-        <span className="text-sm font-normal text-foreground">{item.label}</span>
+        <span className="text-foreground text-sm font-normal">{item.label}</span>
       </div>
     );
   };
@@ -98,25 +98,25 @@ const Highlights = ({ limit }: IHighlightsProps) => {
       </CardHeader>
       <CardContent className="flex flex-col gap-4 p-5 lg:p-7.5 lg:pt-4">
         <div className="flex flex-col gap-0.5">
-          <span className="text-sm font-normal text-secondary-foreground">All time sales</span>
+          <span className="text-secondary-foreground text-sm font-normal">All time sales</span>
           <div className="flex items-center gap-2.5">
-            <span className="text-3xl font-semibold text-mono">$295.7k</span>
+            <span className="text-mono text-3xl font-semibold">$295.7k</span>
             <Badge size="sm" variant="success" appearance="outline">
               +2.7%
             </Badge>
           </div>
         </div>
-        <div className="flex items-center gap-1 mb-1.5">
-          <div className="bg-green-500 h-2 w-full max-w-[60%] rounded-xs"></div>
+        <div className="mb-1.5 flex items-center gap-1">
+          <div className="h-2 w-full max-w-[60%] rounded-xs bg-green-500"></div>
           <div className="bg-destructive h-2 w-full max-w-[25%] rounded-xs"></div>
-          <div className="bg-violet-500 h-2 w-full max-w-[15%] rounded-xs"></div>
+          <div className="h-2 w-full max-w-[15%] rounded-xs bg-violet-500"></div>
         </div>
-        <div className="flex items-center flex-wrap gap-4 mb-1">
+        <div className="mb-1 flex flex-wrap items-center gap-4">
           {items.map((item, index) => {
             return renderItem(item, index);
           })}
         </div>
-        <div className="border-b border-input"></div>
+        <div className="border-input border-b"></div>
         <div className="grid gap-3">{rows.slice(0, limit).map(renderRow)}</div>
       </CardContent>
     </Card>
diff --git a/apps/admin/src/core/Dashboard/view/widgets/DashboardContent/components/TeamMeeting.tsx b/apps/admin/src/core/Dashboard/view/widgets/DashboardContent/components/TeamMeeting.tsx
index 43e8061..d48bbac 100644
--- a/apps/admin/src/core/Dashboard/view/widgets/DashboardContent/components/TeamMeeting.tsx
+++ b/apps/admin/src/core/Dashboard/view/widgets/DashboardContent/components/TeamMeeting.tsx
@@ -8,30 +8,30 @@ import { AvatarGroup } from '#shared/widgets/common/AvatarGroup';
 const TeamMeeting = () => {
   return (
     <Card className="h-full">
-      <CardContent className="grow lg:p-7.5 lg:pt-6 p-5">
-        <div className="flex items-center justify-between flex-wrap gap-5 mb-7.5">
+      <CardContent className="grow p-5 lg:p-7.5 lg:pt-6">
+        <div className="mb-7.5 flex flex-wrap items-center justify-between gap-5">
           <div className="flex flex-col gap-1">
-            <span className="text-xl font-semibold text-mono">Team Meeting</span>
-            <span className="text-sm font-semibold text-foreground">09:00 - 09:30</span>
+            <span className="text-mono text-xl font-semibold">Team Meeting</span>
+            <span className="text-foreground text-sm font-semibold">09:00 - 09:30</span>
           </div>
           <img src={toAbsoluteUrl('/media/brand-logos/zoom.svg')} className="size-7" alt="image" />
         </div>
-        <p className="text-sm font-normal text-foreground leading-5.5 mb-8">
+        <p className="text-foreground mb-8 text-sm leading-5.5 font-normal">
           Team meeting to discuss strategies, outline <br />
           project milestones, define key goals, and <br />
           establish clear timelines.
         </p>
-        <div className="flex rounded-lg bg-accent/50 gap-10 p-5">
+        <div className="bg-accent/50 flex gap-10 rounded-lg p-5">
           <div className="flex flex-col gap-5">
-            <div className="flex items-center gap-1.5 text-sm font-normal text-foreground">
-              <MapPin size={16} className="text-base text-muted-foreground" />
+            <div className="text-foreground flex items-center gap-1.5 text-sm font-normal">
+              <MapPin size={16} className="text-muted-foreground text-base" />
               Location
             </div>
-            <div className="text-sm font-medium text-foreground pt-1.5">Amsterdam</div>
+            <div className="text-foreground pt-1.5 text-sm font-medium">Amsterdam</div>
           </div>
           <div className="flex flex-col gap-5">
-            <div className="flex items-center gap-1.5 text-sm font-normal text-foreground">
-              <Users size={16} className="text-base text-muted-foreground" />
+            <div className="text-foreground flex items-center gap-1.5 text-sm font-normal">
+              <Users size={16} className="text-muted-foreground text-base" />
               Team
             </div>
             <AvatarGroup
diff --git a/apps/admin/src/core/Dashboard/view/widgets/DashboardContent/components/Teams.tsx b/apps/admin/src/core/Dashboard/view/widgets/DashboardContent/components/Teams.tsx
index 186f18d..50742de 100644
--- a/apps/admin/src/core/Dashboard/view/widgets/DashboardContent/components/Teams.tsx
+++ b/apps/admin/src/core/Dashboard/view/widgets/DashboardContent/components/Teams.tsx
@@ -249,10 +249,10 @@ const Teams = () => {
         header: ({ column }) => <DataGridColumnHeader title="Team" column={column} />,
         cell: ({ row }) => (
           <div className="flex flex-col gap-2">
-            <span className="leading-none font-medium text-sm text-mono hover:text-primary">
+            <span className="text-mono hover:text-primary text-sm leading-none font-medium">
               {row.original.name}
             </span>
-            <span className="text-sm text-secondary-foreground font-normal leading-3">
+            <span className="text-secondary-foreground text-sm leading-3 font-normal">
               {row.original.description}
             </span>
           </div>
@@ -343,18 +343,18 @@ const Teams = () => {
         <CardHeader className="py-3.5">
           <CardTitle>Teams</CardTitle>
           <CardToolbar className="relative">
-            <Search className="size-4 text-muted-foreground absolute inset-s-3 top-1/2 -translate-y-1/2" />
+            <Search className="text-muted-foreground absolute inset-s-3 top-1/2 size-4 -translate-y-1/2" />
             <Input
               placeholder="Search Teams..."
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
-              className="ps-9 w-40"
+              className="w-40 ps-9"
             />
             {searchQuery.length > 0 && (
               <Button
                 mode="icon"
                 variant="ghost"
-                className="absolute inset-e-1.5 top-1/2 -translate-y-1/2 h-6 w-6"
+                className="absolute inset-e-1.5 top-1/2 h-6 w-6 -translate-y-1/2"
                 onClick={() => setSearchQuery('')}
               >
                 <X />
diff --git a/apps/admin/src/core/Dashboard/view/widgets/DashboardContent/index.tsx b/apps/admin/src/core/Dashboard/view/widgets/DashboardContent/index.tsx
index 6e11a82..4df2f58 100644
--- a/apps/admin/src/core/Dashboard/view/widgets/DashboardContent/index.tsx
+++ b/apps/admin/src/core/Dashboard/view/widgets/DashboardContent/index.tsx
@@ -3,9 +3,9 @@ import { ChannelStats, EarningsChart, EntryCallout, Highlights, TeamMeeting, Tea
 export function Content() {
   return (
     <div className="grid gap-5 lg:gap-7.5">
-      <div className="grid lg:grid-cols-3 gap-y-5 lg:gap-7.5 items-stretch">
+      <div className="grid items-stretch gap-y-5 lg:grid-cols-3 lg:gap-7.5">
         <div className="lg:col-span-1">
-          <div className="grid grid-cols-2 gap-5 lg:gap-7.5 h-full items-stretch">
+          <div className="grid h-full grid-cols-2 items-stretch gap-5 lg:gap-7.5">
             <ChannelStats />
           </div>
         </div>
@@ -13,7 +13,7 @@ export function Content() {
           <EntryCallout className="h-full" />
         </div>
       </div>
-      <div className="grid lg:grid-cols-3 gap-5 lg:gap-7.5 items-stretch">
+      <div className="grid items-stretch gap-5 lg:grid-cols-3 lg:gap-7.5">
         <div className="lg:col-span-1">
           <Highlights limit={3} />
         </div>
@@ -21,7 +21,7 @@ export function Content() {
           <EarningsChart />
         </div>
       </div>
-      <div className="grid lg:grid-cols-3 gap-5 lg:gap-7.5 items-stretch">
+      <div className="grid items-stretch gap-5 lg:grid-cols-3 lg:gap-7.5">
         <div className="lg:col-span-1">
           <TeamMeeting />
         </div>
diff --git a/apps/admin/src/core/FallbackScreens/pages/Error403Page/index.tsx b/apps/admin/src/core/FallbackScreens/pages/Error403Page/index.tsx
index 0c9c467..ec2410d 100755
--- a/apps/admin/src/core/FallbackScreens/pages/Error403Page/index.tsx
+++ b/apps/admin/src/core/FallbackScreens/pages/Error403Page/index.tsx
@@ -23,15 +23,15 @@ const Error403Page: React.FC = () => {
           id: 'FALLBACK_SCREENS.PERMISSION_DENIED.STATUS_ERROR'
         })}
       </Badge>
-      <h3 className="text-2xl font-semibold text-mono text-center mb-2">
+      <h3 className="text-mono mb-2 text-center text-2xl font-semibold">
         {intl.formatMessage({ id: 'FALLBACK_SCREENS.PERMISSION_DENIED.TITLE' })}
       </h3>
-      <div className="text-base text-center text-secondary-foreground mb-10">
+      <div className="text-secondary-foreground mb-10 text-center text-base">
         {intl.formatMessage(
           { id: 'FALLBACK_SCREENS.PERMISSION_DENIED.DESCRIPTION' },
           {
             children: (
-              <Link to="/" replace className="text-primary font-medium hover:text-primary-active">
+              <Link to="/" replace className="text-primary hover:text-primary-active font-medium">
                 {intl.formatMessage({ id: 'FALLBACK_SCREENS.RETURN_HOME' })}
               </Link>
             )
diff --git a/apps/admin/src/core/FallbackScreens/pages/Error404Page/index.tsx b/apps/admin/src/core/FallbackScreens/pages/Error404Page/index.tsx
index e0658d6..5bf2d81 100755
--- a/apps/admin/src/core/FallbackScreens/pages/Error404Page/index.tsx
+++ b/apps/admin/src/core/FallbackScreens/pages/Error404Page/index.tsx
@@ -14,14 +14,14 @@ const Error404Page: React.FC = () => {
       <div className="mb-10">
         <img
           src={toAbsoluteUrl('/media/illustrations/19.svg')}
-          className="dark:hidden max-h-40"
+          className="max-h-40 dark:hidden"
           alt={intl.formatMessage({
             id: 'FALLBACK_SCREENS.NOT_FOUND.IMAGE_ALT_TEXT'
           })}
         />
         <img
           src={toAbsoluteUrl('/media/illustrations/19-dark.svg')}
-          className="hidden dark:block max-h-40"
+          className="hidden max-h-40 dark:block"
           alt={intl.formatMessage({
             id: 'FALLBACK_SCREENS.NOT_FOUND.IMAGE_ALT_TEXT'
           })}
@@ -30,10 +30,10 @@ const Error404Page: React.FC = () => {
       <Badge variant="mono" className="mb-3">
         {intl.formatMessage({ id: 'FALLBACK_SCREENS.NOT_FOUND.STATUS_ERROR' })}
       </Badge>
-      <h3 className="text-2xl font-semibold text-mono text-center mb-2">
+      <h3 className="text-mono mb-2 text-center text-2xl font-semibold">
         {intl.formatMessage({ id: 'FALLBACK_SCREENS.NOT_FOUND.TITLE' })}
       </h3>
-      <div className="text-base text-center text-secondary-foreground mb-10">
+      <div className="text-secondary-foreground mb-10 text-center text-base">
         {intl.formatMessage(
           { id: 'FALLBACK_SCREENS.NOT_FOUND.DESCRIPTION' },
           {
@@ -42,7 +42,7 @@ const Error404Page: React.FC = () => {
                 to="/"
                 key={messageId}
                 replace
-                className="text-primary font-medium hover:text-primary-active"
+                className="text-primary hover:text-primary-active font-medium"
               >
                 {intl.formatMessage({ id: 'FALLBACK_SCREENS.RETURN_HOME' })}
               </Link>
diff --git a/apps/admin/src/core/FallbackScreens/pages/Error500Page/index.tsx b/apps/admin/src/core/FallbackScreens/pages/Error500Page/index.tsx
index 6b7b884..bfe1605 100755
--- a/apps/admin/src/core/FallbackScreens/pages/Error500Page/index.tsx
+++ b/apps/admin/src/core/FallbackScreens/pages/Error500Page/index.tsx
@@ -13,14 +13,14 @@ const Error500Page: React.FC = () => {
       <div className="mb-10">
         <img
           src={toAbsoluteUrl('/media/illustrations/20.svg')}
-          className="dark:hidden max-h-40"
+          className="max-h-40 dark:hidden"
           alt={intl.formatMessage({
             id: 'FALLBACK_SCREENS.INTERNAL_SERVER_ERROR.IMAGE_ALT_TEXT'
           })}
         />
         <img
           src={toAbsoluteUrl('/media/illustrations/20-dark.svg')}
-          className="hidden dark:block max-h-40"
+          className="hidden max-h-40 dark:block"
           alt={intl.formatMessage({
             id: 'FALLBACK_SCREENS.INTERNAL_SERVER_ERROR.IMAGE_ALT_TEXT'
           })}
@@ -31,10 +31,10 @@ const Error500Page: React.FC = () => {
           id: 'FALLBACK_SCREENS.INTERNAL_SERVER_ERROR.STATUS_ERROR'
         })}
       </Badge>
-      <h3 className="text-2xl font-semibold text-mono text-center mb-2">
+      <h3 className="text-mono mb-2 text-center text-2xl font-semibold">
         {intl.formatMessage({ id: 'FALLBACK_SCREENS.INTERNAL_SERVER_ERROR.TITLE' })}
       </h3>
-      <div className="text-base text-center text-secondary-foreground mb-10">
+      <div className="text-secondary-foreground mb-10 text-center text-base">
         {intl.formatMessage({
           id: 'FALLBACK_SCREENS.INTERNAL_SERVER_ERROR.DESCRIPTION'
         })}
diff --git a/apps/admin/src/core/FallbackScreens/view/layouts/FallbackScreensLayout.tsx b/apps/admin/src/core/FallbackScreens/view/layouts/FallbackScreensLayout.tsx
index fa4c489..ed2dea3 100755
--- a/apps/admin/src/core/FallbackScreens/view/layouts/FallbackScreensLayout.tsx
+++ b/apps/admin/src/core/FallbackScreens/view/layouts/FallbackScreensLayout.tsx
@@ -2,7 +2,7 @@ import { Outlet } from 'react-router-dom';
 
 export default function FallbackScreensLayout() {
   return (
-    <div className="flex flex-col items-center justify-center grow h-[95%]">
+    <div className="flex h-[95%] grow flex-col items-center justify-center">
       <Outlet />
     </div>
   );
diff --git a/apps/admin/src/core/FileManager/pages/DriveExplorerPage/index.tsx b/apps/admin/src/core/FileManager/pages/DriveExplorerPage/index.tsx
index 68e0b5c..8137e53 100644
--- a/apps/admin/src/core/FileManager/pages/DriveExplorerPage/index.tsx
+++ b/apps/admin/src/core/FileManager/pages/DriveExplorerPage/index.tsx
@@ -15,13 +15,13 @@ const DriveExplorerPage: React.FC = () => {
     <DriveProvider navigationMode="url">
       <OperationWatcher />
 
-      <div className="px-6 h-[calc(100%-3.375rem)] bg-background">
+      <div className="bg-background h-[calc(100%-3.375rem)] px-6">
         <div
-          className={cn('h-full grid', explorerSidebar ? 'grid-cols-[20rem_1fr]' : 'grid-cols-1')}
+          className={cn('grid h-full', explorerSidebar ? 'grid-cols-[20rem_1fr]' : 'grid-cols-1')}
         >
           {explorerSidebar && <DriveExplorerSidebar />}
 
-          <div className="flex-1 bg-background flex flex-col overflow-hidden">
+          <div className="bg-background flex flex-1 flex-col overflow-hidden">
             <DriveExplorerToolbar />
             <DriveExplorerContent />
           </div>
diff --git a/apps/admin/src/core/FileManager/pages/DriveSettingsPage/index.tsx b/apps/admin/src/core/FileManager/pages/DriveSettingsPage/index.tsx
index 5f0ad06..4edce2a 100644
--- a/apps/admin/src/core/FileManager/pages/DriveSettingsPage/index.tsx
+++ b/apps/admin/src/core/FileManager/pages/DriveSettingsPage/index.tsx
@@ -29,7 +29,7 @@ const DriveSettingsPage: React.FC = observer(() => {
 
   return (
     <Container className="pb-15">
-      <div className="bg-background space-y-8 max-w-2xl mx-auto">
+      <div className="bg-background mx-auto max-w-2xl space-y-8">
         <h2 className="text-lg font-semibold">
           {intl.formatMessage({ id: 'FILE_MANAGER.SETTINGS.TITLE' })}
         </h2>
@@ -39,21 +39,21 @@ const DriveSettingsPage: React.FC = observer(() => {
             <h6 className="font-semibold">
               {intl.formatMessage({ id: 'FILE_MANAGER.SETTINGS.DISPLAY_MODE' })}
             </h6>
-            <p className="text-xs text-muted-foreground">
+            <p className="text-muted-foreground text-xs">
               {intl.formatMessage({ id: 'FILE_MANAGER.SETTINGS.DISPLAY_MODE_DESC' })}
             </p>
             <RadioGroup className="grid-cols-3" onValueChange={changeMode} value={viewMode}>
-              <Label className="flex  items-center gap-3 rounded-lg border border-border bg-card p-3 hover:bg-accent transition-colors cursor-pointer">
+              <Label className="border-border bg-card hover:bg-accent flex cursor-pointer items-center gap-3 rounded-lg border p-3 transition-colors">
                 <AlignJustifyIcon className="size-4" />
                 {intl.formatMessage({ id: 'FILE_MANAGER.SETTINGS.LIST' })}
                 <RadioGroupItem className="ml-auto" value="list" />
               </Label>
-              <Label className="flex items-center gap-3 rounded-lg border border-border bg-card p-3 hover:bg-accent transition-colors cursor-pointer">
+              <Label className="border-border bg-card hover:bg-accent flex cursor-pointer items-center gap-3 rounded-lg border p-3 transition-colors">
                 <LayoutGrid className="size-4" />
                 {intl.formatMessage({ id: 'FILE_MANAGER.SETTINGS.GRID' })}
                 <RadioGroupItem className="ml-auto" value="grid" />
               </Label>
-              <Label className="flex items-center gap-3 rounded-lg border border-border bg-card p-3 hover:bg-accent transition-colors pointer-events-none opacity-50">
+              <Label className="border-border bg-card hover:bg-accent pointer-events-none flex items-center gap-3 rounded-lg border p-3 opacity-50 transition-colors">
                 <ImagePlay className="size-4" />
                 {intl.formatMessage({ id: 'FILE_MANAGER.SETTINGS.GALLERY' })}
                 <RadioGroupItem disabled className="ml-auto" value="gallery" />
@@ -65,7 +65,7 @@ const DriveSettingsPage: React.FC = observer(() => {
             <h6 className="font-semibold">
               {intl.formatMessage({ id: 'FILE_MANAGER.SETTINGS.GRID_ELEMENT_SIZE' })}
             </h6>
-            <p className="text-xs text-muted-foreground">
+            <p className="text-muted-foreground text-xs">
               {intl.formatMessage({ id: 'FILE_MANAGER.SETTINGS.GRID_ELEMENT_SIZE_DESC' })}
             </p>
             <RadioGroup
@@ -73,24 +73,24 @@ const DriveSettingsPage: React.FC = observer(() => {
               onValueChange={changeGridElementSize}
               value={gridElementSize}
             >
-              <Label className="flex  items-center gap-3 rounded-lg border border-border bg-card px-3 py-2 hover:bg-accent transition-colors cursor-pointer">
+              <Label className="border-border bg-card hover:bg-accent flex cursor-pointer items-center gap-3 rounded-lg border px-3 py-2 transition-colors">
                 <div>
                   <p>{intl.formatMessage({ id: 'FILE_MANAGER.SETTINGS.GRID_ELEMENT_SIZE.SM' })}</p>
-                  <p className="text-xs text-muted-foreground">{gridElementSizeMap.sm.px}</p>
+                  <p className="text-muted-foreground text-xs">{gridElementSizeMap.sm.px}</p>
                 </div>
                 <RadioGroupItem className="ml-auto" value={gridElementSizeMap.sm.value} />
               </Label>
-              <Label className="flex items-center gap-3 rounded-lg border border-border bg-card px-3 py-2 hover:bg-accent transition-colors cursor-pointer">
+              <Label className="border-border bg-card hover:bg-accent flex cursor-pointer items-center gap-3 rounded-lg border px-3 py-2 transition-colors">
                 <div>
                   <p>{intl.formatMessage({ id: 'FILE_MANAGER.SETTINGS.GRID_ELEMENT_SIZE.MD' })}</p>
-                  <p className="text-xs text-muted-foreground">{gridElementSizeMap.md.px}</p>
+                  <p className="text-muted-foreground text-xs">{gridElementSizeMap.md.px}</p>
                 </div>
                 <RadioGroupItem className="ml-auto" value={gridElementSizeMap.md.value} />
               </Label>
-              <Label className="flex items-center gap-3 rounded-lg border border-border bg-card px-3 py-2 hover:bg-accent transition-colors cursor-pointer">
+              <Label className="border-border bg-card hover:bg-accent flex cursor-pointer items-center gap-3 rounded-lg border px-3 py-2 transition-colors">
                 <div>
                   <p>{intl.formatMessage({ id: 'FILE_MANAGER.SETTINGS.GRID_ELEMENT_SIZE.LG' })}</p>
-                  <p className="text-xs text-muted-foreground">{gridElementSizeMap.lg.px}</p>
+                  <p className="text-muted-foreground text-xs">{gridElementSizeMap.lg.px}</p>
                 </div>
                 <RadioGroupItem className="ml-auto" value={gridElementSizeMap.lg.value} />
               </Label>
@@ -101,7 +101,7 @@ const DriveSettingsPage: React.FC = observer(() => {
             <h6 className="font-semibold">
               {intl.formatMessage({ id: 'FILE_MANAGER.SETTINGS.FILE_EXPLORER' })}
             </h6>
-            <div className="flex gap-4 items-center">
+            <div className="flex items-center gap-4">
               <Label className="flex items-center gap-4">
                 <Switch
                   size="md"
@@ -113,7 +113,7 @@ const DriveSettingsPage: React.FC = observer(() => {
                 })}
               </Label>
             </div>
-            <div className="flex gap-4 items-center">
+            <div className="flex items-center gap-4">
               <Label className="flex items-center gap-4">
                 <Switch size="md" checked={compactMode} onCheckedChange={changeCompactMode} />
                 {intl.formatMessage({ id: 'FILE_MANAGER.SETTINGS.COMPACT_MODE.ENABLE' })}
@@ -134,7 +134,7 @@ const DriveSettingsPage: React.FC = observer(() => {
           <h6 className="font-semibold">
             {intl.formatMessage({ id: 'FILE_MANAGER.SETTINGS.LOAD_BATCH' })}
           </h6>
-          <p className="text-xs text-muted-foreground">
+          <p className="text-muted-foreground text-xs">
             {intl.formatMessage({ id: 'FILE_MANAGER.SETTINGS.LOAD_BATCH_DESC' })}
           </p>
           <RadioGroup
@@ -142,15 +142,15 @@ const DriveSettingsPage: React.FC = observer(() => {
             onValueChange={changePerPage}
             value={String(entriesPerPage)}
           >
-            <Label className="flex  items-center gap-3 rounded-lg border border-border bg-card px-3 py-2 hover:bg-accent transition-colors cursor-pointer">
+            <Label className="border-border bg-card hover:bg-accent flex cursor-pointer items-center gap-3 rounded-lg border px-3 py-2 transition-colors">
               {intl.formatMessage({ id: 'FILE_MANAGER.SETTINGS.LOAD_BATCH_N' }, { n: 25 })}
               <RadioGroupItem className="ml-auto" value="25" />
             </Label>
-            <Label className="flex items-center gap-3 rounded-lg border border-border bg-card px-3 py-2 hover:bg-accent transition-colors cursor-pointer">
+            <Label className="border-border bg-card hover:bg-accent flex cursor-pointer items-center gap-3 rounded-lg border px-3 py-2 transition-colors">
               {intl.formatMessage({ id: 'FILE_MANAGER.SETTINGS.LOAD_BATCH_N' }, { n: 50 })}
               <RadioGroupItem className="ml-auto" value="50" />
             </Label>
-            <Label className="flex items-center gap-3 rounded-lg border border-border bg-card px-3 py-2 hover:bg-accent transition-colors cursor-pointer">
+            <Label className="border-border bg-card hover:bg-accent flex cursor-pointer items-center gap-3 rounded-lg border px-3 py-2 transition-colors">
               {intl.formatMessage({ id: 'FILE_MANAGER.SETTINGS.LOAD_BATCH_N' }, { n: 100 })}
               <RadioGroupItem className="ml-auto" value="100" />
             </Label>
diff --git a/apps/admin/src/core/FileManager/pages/DriveViewerPage/Breadcrumbs.tsx b/apps/admin/src/core/FileManager/pages/DriveViewerPage/Breadcrumbs.tsx
index 40014f5..4f6332a 100644
--- a/apps/admin/src/core/FileManager/pages/DriveViewerPage/Breadcrumbs.tsx
+++ b/apps/admin/src/core/FileManager/pages/DriveViewerPage/Breadcrumbs.tsx
@@ -30,7 +30,7 @@ const Breadcrumbs: React.FC<{ path: string }> = ({ path }) => {
           <BreadcrumbLink asChild>
             <Link
               to={driveExplorePath('/')}
-              className="px-3 py-1.5 rounded-full hover:bg-secondary text-sm"
+              className="hover:bg-secondary rounded-full px-3 py-1.5 text-sm"
             >
               <span className="line-clamp-1">
                 {intl.formatMessage({ id: 'FILE_MANAGER.DRIVE.MY_DRIVE' })}
@@ -47,7 +47,7 @@ const Breadcrumbs: React.FC<{ path: string }> = ({ path }) => {
             <BreadcrumbItem>
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
-                  <BreadcrumbEllipsis className="cursor-pointer hover:bg-secondary rounded-full" />
+                  <BreadcrumbEllipsis className="hover:bg-secondary cursor-pointer rounded-full" />
                 </DropdownMenuTrigger>
                 <DropdownMenuContent side="bottom">
                   {hidden.map((crumb) => (
@@ -73,7 +73,7 @@ const Breadcrumbs: React.FC<{ path: string }> = ({ path }) => {
               <BreadcrumbLink asChild>
                 <Link
                   to={driveExplorePath(parent.drivePath)}
-                  className="px-3 py-1.5 rounded-full hover:bg-secondary text-sm"
+                  className="hover:bg-secondary rounded-full px-3 py-1.5 text-sm"
                 >
                   <span className="line-clamp-1">{parent.name}</span>
                 </Link>
@@ -86,7 +86,7 @@ const Breadcrumbs: React.FC<{ path: string }> = ({ path }) => {
           <SlashIcon className="-rotate-12" />
         </BreadcrumbSeparator>
         <BreadcrumbItem className="line-clamp-1">
-          <BreadcrumbPage className="text-sm px-3">{fileName}</BreadcrumbPage>
+          <BreadcrumbPage className="px-3 text-sm">{fileName}</BreadcrumbPage>
         </BreadcrumbItem>
       </BreadcrumbList>
     </Breadcrumb>
diff --git a/apps/admin/src/core/FileManager/pages/DriveViewerPage/PageLayout.tsx b/apps/admin/src/core/FileManager/pages/DriveViewerPage/PageLayout.tsx
index 340f1fc..4c43524 100644
--- a/apps/admin/src/core/FileManager/pages/DriveViewerPage/PageLayout.tsx
+++ b/apps/admin/src/core/FileManager/pages/DriveViewerPage/PageLayout.tsx
@@ -17,8 +17,8 @@ const PageLayout: React.FC<{
   const intl = useIntl();
 
   return (
-    <div className="flex flex-col bg-background" style={{ height: 'calc(100% - 54px)' }}>
-      <div className="border-b bg-card px-4 py-2 flex items-center justify-between">
+    <div className="bg-background flex flex-col" style={{ height: 'calc(100% - 54px)' }}>
+      <div className="bg-card flex items-center justify-between border-b px-4 py-2">
         <BackButton />
         <Breadcrumbs path={path} />
         {isFileFormattable(path) && (
@@ -45,9 +45,9 @@ const PageLayout: React.FC<{
         )}
       </div>
 
-      <div className="flex-1 flex overflow-hidden">
-        <div className="flex-1 flex items-center justify-center bg-muted/30">{main}</div>
-        <div className="w-80 border-l bg-card flex flex-col overflow-auto">{rightside}</div>
+      <div className="flex flex-1 overflow-hidden">
+        <div className="bg-muted/30 flex flex-1 items-center justify-center">{main}</div>
+        <div className="bg-card flex w-80 flex-col overflow-auto border-l">{rightside}</div>
       </div>
     </div>
   );
diff --git a/apps/admin/src/core/FileManager/pages/DriveViewerPage/index.tsx b/apps/admin/src/core/FileManager/pages/DriveViewerPage/index.tsx
index 9adfa38..e36fdf4 100644
--- a/apps/admin/src/core/FileManager/pages/DriveViewerPage/index.tsx
+++ b/apps/admin/src/core/FileManager/pages/DriveViewerPage/index.tsx
@@ -66,32 +66,32 @@ const DriveViewerPage: FC = () => {
       <Table>
         <TableBody>
           <TableRow>
-            <TableCell className="text-xs text-muted-foreground w-28 py-3 px-4">
+            <TableCell className="text-muted-foreground w-28 px-4 py-3 text-xs">
               {intl.formatMessage({ id: 'FILE_MANAGER.FILE_DETAILS.FILE_NAME' })}
             </TableCell>
-            <TableCell className="text-xs py-3 px-4 break-all">{file.name}</TableCell>
+            <TableCell className="px-4 py-3 text-xs break-all">{file.name}</TableCell>
           </TableRow>
           <TableRow>
-            <TableCell className="text-xs text-muted-foreground w-28 py-3 px-4">
+            <TableCell className="text-muted-foreground w-28 px-4 py-3 text-xs">
               {intl.formatMessage({ id: 'FILE_MANAGER.FILE_DETAILS.SIZE' })}
             </TableCell>
-            <TableCell className="text-xs py-3 px-4 break-all">
+            <TableCell className="px-4 py-3 text-xs break-all">
               {bytesToHumanReadableFormat(file.size)}
             </TableCell>
           </TableRow>
           <TableRow>
-            <TableCell className="text-xs text-muted-foreground w-28 py-3 px-4">
+            <TableCell className="text-muted-foreground w-28 px-4 py-3 text-xs">
               {intl.formatMessage({ id: 'FILE_MANAGER.FILE_DETAILS.LAST_MODIFIED' })}
             </TableCell>
-            <TableCell className="text-xs py-3 px-4 break-all">{displayDate}</TableCell>
+            <TableCell className="px-4 py-3 text-xs break-all">{displayDate}</TableCell>
           </TableRow>
           <TableRow>
-            <TableCell className="text-xs text-muted-foreground w-28 py-3 px-4">
+            <TableCell className="text-muted-foreground w-28 px-4 py-3 text-xs">
               {intl.formatMessage({ id: 'FILE_MANAGER.FILE_DETAILS.URL' })}
             </TableCell>
-            <TableCell className="text-xs py-3 px-4 break-all">
+            <TableCell className="px-4 py-3 text-xs break-all">
               <div className="flex items-center gap-2">
-                <span className="flex-1 line-clamp-1">{fileURL}</span>
+                <span className="line-clamp-1 flex-1">{fileURL}</span>
                 {fileURL && <CopyButton copyText={fileURL} size="xs" />}
               </div>
             </TableCell>
diff --git a/apps/admin/src/core/FileManager/view/ui/ExplorerEntry/ExplorerEntriesContainer.tsx b/apps/admin/src/core/FileManager/view/ui/ExplorerEntry/ExplorerEntriesContainer.tsx
index 12619a2..fa871b5 100644
--- a/apps/admin/src/core/FileManager/view/ui/ExplorerEntry/ExplorerEntriesContainer.tsx
+++ b/apps/admin/src/core/FileManager/view/ui/ExplorerEntry/ExplorerEntriesContainer.tsx
@@ -10,13 +10,13 @@ const ExplorerEntriesContainer: React.FC<
   }>
 > = ({ children, compactMode, gridElementSizePx, viewMode }) => {
   if (viewMode === 'list') {
-    return <div className="divide-y divide-border py-2">{children}</div>;
+    return <div className="divide-border divide-y py-2">{children}</div>;
   }
 
   if (viewMode === 'grid') {
     return (
       <div
-        className={cn('grid', compactMode ? 'p-2' : 'px-6 pb-6 pt-4')}
+        className={cn('grid', compactMode ? 'p-2' : 'px-6 pt-4 pb-6')}
         style={{
           gap: compactMode ? 8 : 20,
           gridTemplateColumns: `repeat(auto-fill, minmax(${gridElementSizePx}, 1fr))`
diff --git a/apps/admin/src/core/FileManager/view/ui/ExplorerEntry/ExplorerFileEntryGrid.tsx b/apps/admin/src/core/FileManager/view/ui/ExplorerEntry/ExplorerFileEntryGrid.tsx
index 706b63d..41d2ff3 100644
--- a/apps/admin/src/core/FileManager/view/ui/ExplorerEntry/ExplorerFileEntryGrid.tsx
+++ b/apps/admin/src/core/FileManager/view/ui/ExplorerEntry/ExplorerFileEntryGrid.tsx
@@ -23,36 +23,36 @@ const ExplorerFileEntryGrid: React.FC<
       onDoubleClick={onDoubleClick}
       style={{ contentVisibility: 'auto' }}
       className={cn(
-        'w-full aspect-6/5 select-none flex flex-col group pb-1 rounded-md border border-border relative bg-secondary cursor-pointer',
+        'group border-border bg-secondary relative flex aspect-6/5 w-full cursor-pointer flex-col rounded-md border pb-1 select-none',
         {
           'bg-primary/10 border-primary/20 hover:bg-primary/10 hover:border-primary/20': isSelected
         }
       )}
     >
-      <div className="w-full grow overflow-hidden relative">
+      <div className="relative w-full grow overflow-hidden">
         {fileType === 'image' ? (
-          <img alt="Image preview" className="absolute top-0 left-0 right-0 w-full" src={img} />
+          <img alt="Image preview" className="absolute top-0 right-0 left-0 w-full" src={img} />
         ) : (
           <div
             className={cn(
-              'size-full flex flex-col items-center justify-center gap-1',
+              'flex size-full flex-col items-center justify-center gap-1',
               FILE_PREVIEW_BACKGROUND_GRADIENT[fileType]
             )}
           >
             <FileManagerFileIcon
               name={name}
-              className="text-secondary-foreground dark:text-white size-6"
+              className="text-secondary-foreground size-6 dark:text-white"
               strokeWidth={1}
             />
-            <span className="text-[0.5rem] rounded bg-white/20 px-1.5 py-0.5 text-xs font-bold uppercase tracking-wide text-secondary-foreground dark:text-white">
+            <span className="text-secondary-foreground rounded bg-white/20 px-1.5 py-0.5 text-xs text-[0.5rem] font-bold tracking-wide uppercase dark:text-white">
               {ext}
             </span>
           </div>
         )}
       </div>
 
-      <div className="flex items-center px-2 mt-2">
-        <h6 className="grow font-medium truncate text-2xs">{name}</h6>
+      <div className="mt-2 flex items-center px-2">
+        <h6 className="text-2xs grow truncate font-medium">{name}</h6>
       </div>
     </div>
   );
diff --git a/apps/admin/src/core/FileManager/view/ui/ExplorerEntry/ExplorerFileEntryList.tsx b/apps/admin/src/core/FileManager/view/ui/ExplorerEntry/ExplorerFileEntryList.tsx
index 18deec1..68448bd 100644
--- a/apps/admin/src/core/FileManager/view/ui/ExplorerEntry/ExplorerFileEntryList.tsx
+++ b/apps/admin/src/core/FileManager/view/ui/ExplorerEntry/ExplorerFileEntryList.tsx
@@ -24,7 +24,7 @@ const ExplorerFileEntryList: React.FC<
       onDoubleClick={onDoubleClick}
       style={{ contentVisibility: 'auto' }}
       className={cn(
-        'select-none group flex items-center gap-4 px-6 py-3 hover:bg-accent cursor-pointer w-full text-base',
+        'group hover:bg-accent flex w-full cursor-pointer items-center gap-4 px-6 py-3 text-base select-none',
         {
           'bg-primary/10 border-primary/20 hover:bg-primary/10 hover:border-primary/20': isSelected,
           'px-3 py-1.5 text-sm': compactMode
@@ -33,13 +33,13 @@ const ExplorerFileEntryList: React.FC<
     >
       <FileManagerFileIcon name={name} className="size-4 shrink-0" strokeWidth={1.5} />
 
-      <p className="flex-1 min-w-0 font-medium text-ellipsis line-clamp-1 text-nowrap overflow-hidden">
+      <p className="line-clamp-1 min-w-0 flex-1 overflow-hidden font-medium text-nowrap text-ellipsis">
         {name}
       </p>
 
-      <div className="hidden md:block w-24 text-muted-foreground">{displayDate}</div>
+      <div className="text-muted-foreground hidden w-24 md:block">{displayDate}</div>
 
-      <div className="hidden md:block w-24 text-muted-foreground text-right">
+      <div className="text-muted-foreground hidden w-24 text-right md:block">
         {bytesToHumanReadableFormat(size)}
       </div>
     </div>
diff --git a/apps/admin/src/core/FileManager/view/ui/ExplorerEntry/ExplorerFolderEntryGrid.tsx b/apps/admin/src/core/FileManager/view/ui/ExplorerEntry/ExplorerFolderEntryGrid.tsx
index 5936160..fb0b9aa 100644
--- a/apps/admin/src/core/FileManager/view/ui/ExplorerEntry/ExplorerFolderEntryGrid.tsx
+++ b/apps/admin/src/core/FileManager/view/ui/ExplorerEntry/ExplorerFolderEntryGrid.tsx
@@ -17,7 +17,7 @@ const ExplorerFolderEntryGrid: React.FC<
       onDoubleClick={onDoubleClick}
       style={{ contentVisibility: 'auto' }}
       className={cn(
-        'w-full aspect-6/5 select-none bg-secondary cursor-pointer flex flex-col group pb-1 rounded-md border border-border relative',
+        'bg-secondary group border-border relative flex aspect-6/5 w-full cursor-pointer flex-col rounded-md border pb-1 select-none',
         {
           'bg-primary/10 border-primary/20 hover:bg-primary/10 hover:border-primary/20': isSelected
         }
@@ -25,21 +25,21 @@ const ExplorerFolderEntryGrid: React.FC<
     >
       <div
         className={cn(
-          'w-full grow overflow-hidden flex flex-col items-center justify-center gap-1',
+          'flex w-full grow flex-col items-center justify-center gap-1 overflow-hidden',
           FOLDER_PREVIEW_BACKGROUND_GRADIENT
         )}
       >
         <Folder
           strokeWidth={1}
-          className="text-secondary-foreground dark:text-white fill-secondary-foreground dark:fill-white size-6"
+          className="text-secondary-foreground fill-secondary-foreground size-6 dark:fill-white dark:text-white"
         />
-        <span className="text-[0.5rem] rounded bg-white/20 px-1.5 py-0.5 text-xs font-bold uppercase tracking-wide text-secondary-foreground dark:text-white">
+        <span className="text-secondary-foreground rounded bg-white/20 px-1.5 py-0.5 text-xs text-[0.5rem] font-bold tracking-wide uppercase dark:text-white">
           Folder
         </span>
       </div>
 
-      <div className="flex items-center px-2 mt-2">
-        <h6 className="grow font-medium truncate text-2xs">{name}</h6>
+      <div className="mt-2 flex items-center px-2">
+        <h6 className="text-2xs grow truncate font-medium">{name}</h6>
       </div>
     </div>
   );
diff --git a/apps/admin/src/core/FileManager/view/ui/ExplorerEntry/ExplorerFolderEntryList.tsx b/apps/admin/src/core/FileManager/view/ui/ExplorerEntry/ExplorerFolderEntryList.tsx
index 72cc5e4..10ce0ec 100644
--- a/apps/admin/src/core/FileManager/view/ui/ExplorerEntry/ExplorerFolderEntryList.tsx
+++ b/apps/admin/src/core/FileManager/view/ui/ExplorerEntry/ExplorerFolderEntryList.tsx
@@ -24,22 +24,22 @@ const ExplorerFolderEntryList: React.FC<
       onDoubleClick={onDoubleClick}
       style={{ contentVisibility: 'auto' }}
       className={cn(
-        'select-none flex items-center gap-4 px-6 py-3 hover:bg-accent cursor-pointer w-full text-base',
+        'hover:bg-accent flex w-full cursor-pointer items-center gap-4 px-6 py-3 text-base select-none',
         {
           'bg-primary/10 border-primary/20 hover:bg-primary/10 hover:border-primary/20': isSelected,
           'px-3 py-1.5 text-sm': compactMode
         }
       )}
     >
-      <Folder className="shrink-0 size-4 text-secondary-foreground fill-secondary-foreground" />
+      <Folder className="text-secondary-foreground fill-secondary-foreground size-4 shrink-0" />
 
-      <p className="flex-1 min-w-0 font-medium text-ellipsis line-clamp-1 text-nowrap overflow-hidden">
+      <p className="line-clamp-1 min-w-0 flex-1 overflow-hidden font-medium text-nowrap text-ellipsis">
         {name}
       </p>
 
-      <div className="hidden md:block w-24 text-muted-foreground">{displayDate}</div>
+      <div className="text-muted-foreground hidden w-24 md:block">{displayDate}</div>
 
-      <div className="hidden md:block w-24 text-muted-foreground text-right" />
+      <div className="text-muted-foreground hidden w-24 text-right md:block" />
     </div>
   );
 };
diff --git a/apps/admin/src/core/FileManager/view/ui/ExplorerToolbar/ExplorerToolbarBreadcrumbs.tsx b/apps/admin/src/core/FileManager/view/ui/ExplorerToolbar/ExplorerToolbarBreadcrumbs.tsx
index 9a010a9..767ca9c 100644
--- a/apps/admin/src/core/FileManager/view/ui/ExplorerToolbar/ExplorerToolbarBreadcrumbs.tsx
+++ b/apps/admin/src/core/FileManager/view/ui/ExplorerToolbar/ExplorerToolbarBreadcrumbs.tsx
@@ -32,7 +32,7 @@ const ExplorerToolbarBreadcrumbs: React.FC<{
       <BreadcrumbList className="flex-nowrap">
         <ExplorerToolbarActionDropdown onCreateFolder={root.isActive ? onCreateFolder : undefined}>
           <BreadcrumbItem
-            className="px-3 py-1.5 rounded-full cursor-pointer hover:bg-secondary shrink-0"
+            className="hover:bg-secondary shrink-0 cursor-pointer rounded-full px-3 py-1.5"
             onClick={() => onActivePathChange(root.path)}
           >
             {intl.formatMessage({ id: 'FILE_MANAGER.DRIVE.MY_DRIVE' })}
@@ -47,7 +47,7 @@ const ExplorerToolbarBreadcrumbs: React.FC<{
 
             <ExplorerBreadcrumbsMoreDropdown breadcrumbs={hidden} onClick={onActivePathChange}>
               <BreadcrumbItem>
-                <BreadcrumbEllipsis className="cursor-pointer hover:bg-secondary rounded-full w-8 h-8" />
+                <BreadcrumbEllipsis className="hover:bg-secondary h-8 w-8 cursor-pointer rounded-full" />
               </BreadcrumbItem>
             </ExplorerBreadcrumbsMoreDropdown>
           </React.Fragment>
@@ -60,7 +60,7 @@ const ExplorerToolbarBreadcrumbs: React.FC<{
             </BreadcrumbSeparator>
             <BreadcrumbItem>
               {disableActions ? (
-                <BreadcrumbPage className="flex items-center gap-1 text-sm px-3 py-1.5 rounded-full hover:bg-secondary">
+                <BreadcrumbPage className="hover:bg-secondary flex items-center gap-1 rounded-full px-3 py-1.5 text-sm">
                   <span className="line-clamp-1">{active.directory}</span>
                 </BreadcrumbPage>
               ) : (
@@ -69,9 +69,9 @@ const ExplorerToolbarBreadcrumbs: React.FC<{
                   onDelete={onDelete}
                   onRename={onRenameActive}
                 >
-                  <BreadcrumbPage className="flex items-center gap-1 text-sm px-3 py-1.5 rounded-full cursor-pointer hover:bg-secondary">
+                  <BreadcrumbPage className="hover:bg-secondary flex cursor-pointer items-center gap-1 rounded-full px-3 py-1.5 text-sm">
                     <span className="line-clamp-1">{active.directory}</span>
-                    <ChevronsUpDown className="size-3 shrink-0 text-muted-foreground" />
+                    <ChevronsUpDown className="text-muted-foreground size-3 shrink-0" />
                   </BreadcrumbPage>
                 </ExplorerToolbarActionDropdown>
               )}
diff --git a/apps/admin/src/core/FileManager/view/ui/ExplorerToolbar/ExplorerToolbarContainer.tsx b/apps/admin/src/core/FileManager/view/ui/ExplorerToolbar/ExplorerToolbarContainer.tsx
index f28704a..7139b78 100644
--- a/apps/admin/src/core/FileManager/view/ui/ExplorerToolbar/ExplorerToolbarContainer.tsx
+++ b/apps/admin/src/core/FileManager/view/ui/ExplorerToolbar/ExplorerToolbarContainer.tsx
@@ -11,13 +11,13 @@ const ExplorerToolbarContainer: React.FC<
   return (
     <div
       className={cn(
-        'h-14 flex items-center w-full px-4 lg:px-6 border-b border-border',
-        compactMode && 'px-2 lg:px-1 h-12',
+        'border-border flex h-14 w-full items-center border-b px-4 lg:px-6',
+        compactMode && 'h-12 px-2 lg:px-1',
         className
       )}
       {...props}
     >
-      <div className="flex items-center justify-between gap-1 w-full">{children}</div>
+      <div className="flex w-full items-center justify-between gap-1">{children}</div>
     </div>
   );
 };
diff --git a/apps/admin/src/core/FileManager/view/ui/ExplorerToolbar/ExplorerToolbarFilterDropdown.tsx b/apps/admin/src/core/FileManager/view/ui/ExplorerToolbar/ExplorerToolbarFilterDropdown.tsx
index e4367e0..8c7d44b 100644
--- a/apps/admin/src/core/FileManager/view/ui/ExplorerToolbar/ExplorerToolbarFilterDropdown.tsx
+++ b/apps/admin/src/core/FileManager/view/ui/ExplorerToolbar/ExplorerToolbarFilterDropdown.tsx
@@ -25,7 +25,7 @@ const ExplorerToolbarFilterDropdown: React.FC<{
         <Button type="button" variant="dim" mode="icon" size="md" className="relative">
           <SlidersHorizontal />
           {filter !== 'all' && (
-            <span className="absolute top-0.5 right-0.5 size-1.5 rounded-full bg-primary" />
+            <span className="bg-primary absolute top-0.5 right-0.5 size-1.5 rounded-full" />
           )}
         </Button>
       </DropdownMenuTrigger>
@@ -35,19 +35,19 @@ const ExplorerToolbarFilterDropdown: React.FC<{
         </DropdownMenuLabel>
         <DropdownMenuRadioGroup value={filter} onValueChange={onFilter}>
           <DropdownMenuRadioItem value="all" className="cursor-pointer">
-            <Layers className="size-4 mr-2" />
+            <Layers className="mr-2 size-4" />
             {intl.formatMessage({ id: 'FILE_MANAGER.DRIVE.FILTER.ALL' })}
           </DropdownMenuRadioItem>
           <DropdownMenuRadioItem value="media" className="cursor-pointer">
-            <Image className="size-4 mr-2" />
+            <Image className="mr-2 size-4" />
             {intl.formatMessage({ id: 'FILE_MANAGER.DRIVE.FILTER.MEDIA' })}
           </DropdownMenuRadioItem>
           <DropdownMenuRadioItem value="archives" className="cursor-pointer">
-            <FolderArchive className="size-4 mr-2" />
+            <FolderArchive className="mr-2 size-4" />
             {intl.formatMessage({ id: 'FILE_MANAGER.DRIVE.FILTER.ARCHIVES' })}
           </DropdownMenuRadioItem>
           <DropdownMenuRadioItem value="documents" className="cursor-pointer">
-            <FileText className="size-4 mr-2" />
+            <FileText className="mr-2 size-4" />
             {intl.formatMessage({ id: 'FILE_MANAGER.DRIVE.FILTER.DOCUMENTS' })}
           </DropdownMenuRadioItem>
         </DropdownMenuRadioGroup>
@@ -74,16 +74,16 @@ const ExplorerToolbarFilterDropdown: React.FC<{
 
         <DropdownMenuSeparator />
 
-        <DropdownMenuLabel className="text-xs text-muted-foreground font-normal">
+        <DropdownMenuLabel className="text-muted-foreground text-xs font-normal">
           {intl.formatMessage({ id: 'FILE_MANAGER.DRIVE.SORT.OPTION.SORT_DIRECTION' })}
         </DropdownMenuLabel>
         <DropdownMenuRadioGroup value={sortDirection} onValueChange={onSortDirection}>
           <DropdownMenuRadioItem value="asc" className="cursor-pointer">
-            <ArrowUp className="size-4 mr-2" />
+            <ArrowUp className="mr-2 size-4" />
             {intl.formatMessage({ id: 'FILE_MANAGER.DRIVE.SORT.OPTION.SORT_DIRECTION.ASC' })}
           </DropdownMenuRadioItem>
           <DropdownMenuRadioItem value="desc" className="cursor-pointer">
-            <ArrowDown className="size-4 mr-2" />
+            <ArrowDown className="mr-2 size-4" />
             {intl.formatMessage({ id: 'FILE_MANAGER.DRIVE.SORT.OPTION.SORT_DIRECTION.DESC' })}
           </DropdownMenuRadioItem>
         </DropdownMenuRadioGroup>
diff --git a/apps/admin/src/core/FileManager/view/ui/ExplorerTree/ExplorerTreeElement.tsx b/apps/admin/src/core/FileManager/view/ui/ExplorerTree/ExplorerTreeElement.tsx
index 8c306c3..985a7de 100644
--- a/apps/admin/src/core/FileManager/view/ui/ExplorerTree/ExplorerTreeElement.tsx
+++ b/apps/admin/src/core/FileManager/view/ui/ExplorerTree/ExplorerTreeElement.tsx
@@ -32,15 +32,15 @@ const ExplorerTreeElement: React.FC<{
       <button
         type="button"
         className={cn(
-          'flex w-full group items-center gap-1 rounded-md px-2 py-1.5 text-sm hover:bg-accent font-medium',
+          'group hover:bg-accent flex w-full items-center gap-1 rounded-md px-2 py-1.5 text-sm font-medium',
           active && 'bg-accent'
         )}
         onClick={handleClick}
       >
         {opened ? (
-          <FolderOpen className="shrink-0 size-4 text-blue-500" />
+          <FolderOpen className="size-4 shrink-0 text-blue-500" />
         ) : (
-          <Folder className="shrink-0 size-4 text-blue-500" />
+          <Folder className="size-4 shrink-0 text-blue-500" />
         )}
         <span className="text-foreground line-clamp-1">{entry.name}</span>
       </button>
diff --git a/apps/admin/src/core/FileManager/view/ui/FileManagerHeader.tsx b/apps/admin/src/core/FileManager/view/ui/FileManagerHeader.tsx
index 2900640..ddc11da 100644
--- a/apps/admin/src/core/FileManager/view/ui/FileManagerHeader.tsx
+++ b/apps/admin/src/core/FileManager/view/ui/FileManagerHeader.tsx
@@ -6,12 +6,12 @@ const FileManagerHeader: React.FC<React.PropsWithChildren<{ title: React.ReactNo
   title
 }) => {
   return (
-    <header className="flex items-center gap-1 w-full pb-5 px-6">
-      <div className="flex items-center gap-2 w-full">
+    <header className="flex w-full items-center gap-1 px-6 pb-5">
+      <div className="flex w-full items-center gap-2">
         <FileManagerLogo />
-        <h1 className="font-medium text-lg text-mono">{title}</h1>
+        <h1 className="text-mono text-lg font-medium">{title}</h1>
       </div>
-      <div className="flex items-center gap-2 shrink-0">{children}</div>
+      <div className="flex shrink-0 items-center gap-2">{children}</div>
     </header>
   );
 };
diff --git a/apps/admin/src/core/FileManager/view/ui/FileManagerLogo.tsx b/apps/admin/src/core/FileManager/view/ui/FileManagerLogo.tsx
index 320073f..e3557b8 100644
--- a/apps/admin/src/core/FileManager/view/ui/FileManagerLogo.tsx
+++ b/apps/admin/src/core/FileManager/view/ui/FileManagerLogo.tsx
@@ -11,13 +11,13 @@ const FileManagerLogo: React.FC<React.HTMLAttributes<HTMLImageElement>> = ({
     <React.Fragment>
       <img
         src={toAbsoluteUrl('/media/app/file-manager-dark.svg')}
-        className={cn('dark:hidden size-8.5', className)}
+        className={cn('size-8.5 dark:hidden', className)}
         alt="File Manager"
         {...props}
       />
       <img
         src={toAbsoluteUrl('/media/app/file-manager-light.svg')}
-        className={cn('hidden dark:inline-block size-8.5', className)}
+        className={cn('hidden size-8.5 dark:inline-block', className)}
         alt="File Manager"
         {...props}
       />
diff --git a/apps/admin/src/core/FileManager/view/ui/FilePreview/FilePreview.tsx b/apps/admin/src/core/FileManager/view/ui/FilePreview/FilePreview.tsx
index cd94e33..8070c13 100644
--- a/apps/admin/src/core/FileManager/view/ui/FilePreview/FilePreview.tsx
+++ b/apps/admin/src/core/FileManager/view/ui/FilePreview/FilePreview.tsx
@@ -16,10 +16,10 @@ export const FilePreview: React.FC<{
   if (previewType === 'image' && src) {
     return (
       <FilePreviewGrid>
-        <div className="relative bg-card rounded-lg shadow-lg overflow-hidden max-w-full max-h-full">
+        <div className="bg-card relative max-h-full max-w-full overflow-hidden rounded-lg shadow-lg">
           <img
             alt="preview"
-            className="max-w-full max-h-[calc(100vh-220px)] object-contain"
+            className="max-h-[calc(100vh-220px)] max-w-full object-contain"
             src={src}
           />
         </div>
@@ -30,8 +30,8 @@ export const FilePreview: React.FC<{
   if (previewType === 'video' && src) {
     return (
       <FilePreviewGrid>
-        <div className="relative bg-card rounded-lg shadow-lg overflow-hidden max-w-full max-h-full">
-          <video controls className="max-w-full max-h-[calc(100vh-220px)]" src={src} />
+        <div className="bg-card relative max-h-full max-w-full overflow-hidden rounded-lg shadow-lg">
+          <video controls className="max-h-[calc(100vh-220px)] max-w-full" src={src} />
         </div>
       </FilePreviewGrid>
     );
@@ -40,8 +40,8 @@ export const FilePreview: React.FC<{
   if (previewType === 'audio' && src) {
     return (
       <FilePreviewGrid>
-        <div className="relative rounded-lg overflow-hidden max-w-full max-h-full">
-          <audio controls className="max-w-full max-h-[calc(100vh-220px)]" src={src}>
+        <div className="relative max-h-full max-w-full overflow-hidden rounded-lg">
+          <audio controls className="max-h-[calc(100vh-220px)] max-w-full" src={src}>
             Your browser does not support the audio element.
           </audio>
         </div>
@@ -52,8 +52,8 @@ export const FilePreview: React.FC<{
   if (previewType === 'plaintext' && content) {
     return (
       <FilePreviewGrid>
-        <div className="relative bg-card rounded-lg shadow-lg overflow-hidden max-w-full max-h-full">
-          <pre className="whitespace-pre-wrap wrap-break-word p-4 text-sm overflow-auto max-h-[calc(100vh-220px)]">
+        <div className="bg-card relative max-h-full max-w-full overflow-hidden rounded-lg shadow-lg">
+          <pre className="max-h-[calc(100vh-220px)] overflow-auto p-4 text-sm wrap-break-word whitespace-pre-wrap">
             {content}
           </pre>
         </div>
diff --git a/apps/admin/src/core/FileManager/view/ui/FilePreview/FilePreviewGrid.tsx b/apps/admin/src/core/FileManager/view/ui/FilePreview/FilePreviewGrid.tsx
index f3229b5..b354b42 100644
--- a/apps/admin/src/core/FileManager/view/ui/FilePreview/FilePreviewGrid.tsx
+++ b/apps/admin/src/core/FileManager/view/ui/FilePreview/FilePreviewGrid.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 export const FilePreviewGrid: React.FC<React.PropsWithChildren> = ({ children }) => (
-  <div className="relative flex items-center justify-center w-full h-full p-8 overflow-hidden">
+  <div className="relative flex h-full w-full items-center justify-center overflow-hidden p-8">
     <div
       className="absolute inset-0 opacity-[0.03]"
       style={{
diff --git a/apps/admin/src/core/FileManager/view/ui/FilePreview/UnsupportedPreview.tsx b/apps/admin/src/core/FileManager/view/ui/FilePreview/UnsupportedPreview.tsx
index 574a404..36b6391 100644
--- a/apps/admin/src/core/FileManager/view/ui/FilePreview/UnsupportedPreview.tsx
+++ b/apps/admin/src/core/FileManager/view/ui/FilePreview/UnsupportedPreview.tsx
@@ -144,12 +144,12 @@ export function UnsupportedPreview({
   const Icon = config.icon;
 
   return (
-    <div className="relative flex flex-col items-center justify-center gap-6 p-8 w-full h-full mx-auto">
+    <div className="relative mx-auto flex h-full w-full flex-col items-center justify-center gap-6 p-8">
       <div className="absolute inset-0 overflow-hidden rounded-2xl">
         {[...Array(6)].map((_, i) => (
           <div
             key={i}
-            className={`absolute w-1 h-1 rounded-full ${config.bgColor} opacity-60`}
+            className={`absolute h-1 w-1 rounded-full ${config.bgColor} opacity-60`}
             style={{
               left: `${15 + i * 15}%`,
               animation: `float-particle ${3 + i * 0.5}s ease-in-out infinite`,
@@ -173,13 +173,13 @@ export function UnsupportedPreview({
         {/* Rotating dashed border */}
         <div className="absolute -inset-6 animate-[spin_20s_linear_infinite]">
           <div
-            className={`w-full h-full rounded-full border-2 border-dashed ${config.color} opacity-20`}
+            className={`h-full w-full rounded-full border-2 border-dashed ${config.color} opacity-20`}
           />
         </div>
 
         {/* Counter-rotating border */}
         <div className="absolute -inset-4 animate-[spin_15s_linear_infinite_reverse]">
-          <div className={`w-full h-full rounded-full border ${config.color} opacity-10`} />
+          <div className={`h-full w-full rounded-full border ${config.color} opacity-10`} />
         </div>
 
         {/* Pulsing rings */}
@@ -190,21 +190,21 @@ export function UnsupportedPreview({
 
         {/* Icon background */}
         <div
-          className={`relative w-24 h-24 rounded-2xl ${config.bgColor} flex items-center justify-center transition-all duration-300 ${isHovered ? 'scale-105 rotate-3' : ''}`}
+          className={`relative h-24 w-24 rounded-2xl ${config.bgColor} flex items-center justify-center transition-all duration-300 ${isHovered ? 'scale-105 rotate-3' : ''}`}
         >
           {/* Inner glow */}
-          <div className={`absolute inset-0 rounded-2xl ${config.bgColor} blur-md opacity-50`} />
+          <div className={`absolute inset-0 rounded-2xl ${config.bgColor} opacity-50 blur-md`} />
 
           {/* The icon */}
           <Icon
-            className={`relative w-12 h-12 ${config.color} transition-transform duration-300 ${isHovered ? 'scale-110' : ''}`}
+            className={`relative h-12 w-12 ${config.color} transition-transform duration-300 ${isHovered ? 'scale-110' : ''}`}
           />
 
           {/* Corner accents */}
           <div
-            className={`absolute -top-1 -right-1 w-3 h-3 ${config.bgColor} rounded-full flex items-center justify-center`}
+            className={`absolute -top-1 -right-1 h-3 w-3 ${config.bgColor} flex items-center justify-center rounded-full`}
           >
-            <Sparkles className={`w-2 h-2 ${config.color}`} />
+            <Sparkles className={`h-2 w-2 ${config.color}`} />
           </div>
         </div>
 
@@ -215,12 +215,12 @@ export function UnsupportedPreview({
         >
           <div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2">
             <div
-              className={`w-8 h-8 rounded-full ${config.bgColor} flex items-center justify-center shadow-lg`}
+              className={`h-8 w-8 rounded-full ${config.bgColor} flex items-center justify-center shadow-lg`}
             >
               {isHovered ? (
-                <Eye className={`w-4 h-4 ${config.color}`} />
+                <Eye className={`h-4 w-4 ${config.color}`} />
               ) : (
-                <EyeOff className={`w-4 h-4 ${config.color} opacity-50`} />
+                <EyeOff className={`h-4 w-4 ${config.color} opacity-50`} />
               )}
             </div>
           </div>
@@ -228,43 +228,43 @@ export function UnsupportedPreview({
       </div>
 
       {/* File info */}
-      <div className="relative text-center space-y-2 mt-4">
+      <div className="relative mt-4 space-y-2 text-center">
         {/* Extension badge */}
         <div
-          className={`inline-flex items-center gap-1.5 px-3 py-1 rounded-full ${config.bgColor} ${config.color} text-xs font-medium uppercase tracking-wider`}
+          className={`inline-flex items-center gap-1.5 rounded-full px-3 py-1 ${config.bgColor} ${config.color} text-xs font-medium tracking-wider uppercase`}
         >
-          <span className="w-1.5 h-1.5 rounded-full bg-current animate-pulse" />
+          <span className="h-1.5 w-1.5 animate-pulse rounded-full bg-current" />
           {config.label}
         </div>
 
         {/* File name */}
-        <h3 className="text-lg font-semibold text-foreground max-w-70 truncate">{fileName}</h3>
+        <h3 className="text-foreground max-w-70 truncate text-lg font-semibold">{fileName}</h3>
 
         {/* File size */}
-        {fileSize && <p className="text-sm text-muted-foreground">{fileSize}</p>}
+        {fileSize && <p className="text-muted-foreground text-sm">{fileSize}</p>}
 
         {/* Message */}
-        <p className="text-sm text-muted-foreground mt-2">
+        <p className="text-muted-foreground mt-2 text-sm">
           Preview not available for this file type
         </p>
       </div>
 
       {/* Action buttons */}
-      <div className="relative flex items-center gap-3 mt-2">
+      <div className="relative mt-2 flex items-center gap-3">
         {onDownload && (
           <Button
             // variant="default"
             size="sm"
             onClick={onDownload}
-            className="gap-2 group"
+            className="group gap-2"
           >
-            <Download className="w-4 h-4 transition-transform group-hover:-translate-y-0.5" />
+            <Download className="h-4 w-4 transition-transform group-hover:-translate-y-0.5" />
             Download
           </Button>
         )}
         {onOpenExternal && (
-          <Button variant="outline" size="sm" onClick={onOpenExternal} className="gap-2 group">
-            <ExternalLink className="w-4 h-4 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
+          <Button variant="outline" size="sm" onClick={onOpenExternal} className="group gap-2">
+            <ExternalLink className="h-4 w-4 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
             Open
           </Button>
         )}
diff --git a/apps/admin/src/core/FileManager/view/widgets/DriveExplorer/DriveExplorerFooter.tsx b/apps/admin/src/core/FileManager/view/widgets/DriveExplorer/DriveExplorerFooter.tsx
index 7042cf6..cf13d48 100644
--- a/apps/admin/src/core/FileManager/view/widgets/DriveExplorer/DriveExplorerFooter.tsx
+++ b/apps/admin/src/core/FileManager/view/widgets/DriveExplorer/DriveExplorerFooter.tsx
@@ -27,9 +27,9 @@ const DriveExplorerFooter: React.FC = observer(() => {
   });
 
   return (
-    <footer className="px-6 sticky left-0 right-0 bottom-0 bg-background">
-      <div className="py-5 border-t border-border flex items-center justify-end">
-        <div className="flex gap-2 text-2xs leading-5 select-none">
+    <footer className="bg-background sticky right-0 bottom-0 left-0 px-6">
+      <div className="border-border flex items-center justify-end border-t py-5">
+        <div className="text-2xs flex gap-2 leading-5 select-none">
           {multiselection.isOpen && (
             <Kbd variant="default" size="xs">
               {intl.formatMessage({ id: 'FILE_MANAGER.DRIVE.STATE.SELECTION_MODE' })}
diff --git a/apps/admin/src/core/FileManager/view/widgets/DriveExplorer/DriveExplorerSidebar.tsx b/apps/admin/src/core/FileManager/view/widgets/DriveExplorer/DriveExplorerSidebar.tsx
index 3f57030..39ab796 100644
--- a/apps/admin/src/core/FileManager/view/widgets/DriveExplorer/DriveExplorerSidebar.tsx
+++ b/apps/admin/src/core/FileManager/view/widgets/DriveExplorer/DriveExplorerSidebar.tsx
@@ -20,14 +20,14 @@ const DriveExplorerSidebar: React.FC = observer(() => {
   const rootEntries = entriesStore.getEntriesByPath('/');
 
   return (
-    <div className="border-r border-border bg-card">
+    <div className="border-border bg-card border-r">
       <div
         className={cn(
-          'flex h-14 items-center border-b gap-1 border-border pr-4 pl-2',
+          'border-border flex h-14 items-center gap-1 border-b pr-4 pl-2',
           compactMode && 'h-12'
         )}
       >
-        <div className="flex gap-2 flex-1 text-base font-medium text-foreground">
+        <div className="text-foreground flex flex-1 gap-2 text-base font-medium">
           <span className="leading-7">
             {intl.formatMessage({ id: 'FILE_MANAGER.DRIVE.FILES' })}
           </span>
diff --git a/apps/admin/src/core/FileManager/view/widgets/FilePickerDialog/FilePickerContent.tsx b/apps/admin/src/core/FileManager/view/widgets/FilePickerDialog/FilePickerContent.tsx
index a05ec39..65ed49c 100644
--- a/apps/admin/src/core/FileManager/view/widgets/FilePickerDialog/FilePickerContent.tsx
+++ b/apps/admin/src/core/FileManager/view/widgets/FilePickerDialog/FilePickerContent.tsx
@@ -64,7 +64,7 @@ const FilePickerDialogContent: React.FC = observer(() => {
 
   return (
     <React.Fragment>
-      <div className="flex items-center justify-between gap-2 mb-4">
+      <div className="mb-4 flex items-center justify-between gap-2">
         <ExplorerToolbarBreadcrumbs
           breadcrumbs={breadcrumbs}
           onActivePathChange={explorerStore.setActivePath}
diff --git a/apps/admin/src/core/FileManager/view/widgets/FilePickerDialog/index.tsx b/apps/admin/src/core/FileManager/view/widgets/FilePickerDialog/index.tsx
index de26d07..6194662 100644
--- a/apps/admin/src/core/FileManager/view/widgets/FilePickerDialog/index.tsx
+++ b/apps/admin/src/core/FileManager/view/widgets/FilePickerDialog/index.tsx
@@ -36,7 +36,7 @@ const FilePickerDialog: React.FC<{
       </SheetTrigger>
       <SheetContent side="left" close={true} className="w-full max-w-full!">
         <FilePickerProvider>
-          <SheetHeader className="p-0 space-y-0">
+          <SheetHeader className="space-y-0 p-0">
             <SheetTitle className="flex items-center gap-2">
               <FileManagerLogo />
               {intl.formatMessage({ id: 'FILE_MANAGER.MENU.TITLE' })}
@@ -45,7 +45,7 @@ const FilePickerDialog: React.FC<{
               {intl.formatMessage({ id: 'FILE_MANAGER.WIDGET.FILE_PICKER.BROWSE_AND_SELECT_FILE' })}
             </SheetDescription>
           </SheetHeader>
-          <SheetBody className="p-0 grow flex flex-col overflow-y-auto">
+          <SheetBody className="flex grow flex-col overflow-y-auto p-0">
             <SettingsProvider>
               <FilePickerContent />
             </SettingsProvider>
diff --git a/apps/admin/src/core/FileManager/view/widgets/ImageEditor/ImageEditorCanvas.tsx b/apps/admin/src/core/FileManager/view/widgets/ImageEditor/ImageEditorCanvas.tsx
index 7d4666d..2eb2f89 100644
--- a/apps/admin/src/core/FileManager/view/widgets/ImageEditor/ImageEditorCanvas.tsx
+++ b/apps/admin/src/core/FileManager/view/widgets/ImageEditor/ImageEditorCanvas.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
 import { Upload } from 'lucide-react';
+import React from 'react';
 import ReactCrop, { Crop, PixelCrop } from 'react-image-crop';
 import { useIntl } from 'react-intl';
 import 'react-image-crop/dist/ReactCrop.css';
@@ -32,19 +32,19 @@ const ImageEditorCanvas: React.FC<Props> = ({
   const intl = useIntl();
 
   return (
-    <div className="flex-1 flex items-center justify-center p-8 bg-muted/30 overflow-auto">
+    <div className="bg-muted/30 flex flex-1 items-center justify-center overflow-auto p-8">
       {!src ? (
         <div
           onClick={() => fileInputRef.current?.click()}
-          className="flex flex-col items-center justify-center w-full max-w-md h-80 border-2 border-dashed border-border rounded-xl bg-card cursor-pointer hover:border-primary/50 hover:bg-accent/30 transition-colors"
+          className="border-border bg-card hover:border-primary/50 hover:bg-accent/30 flex h-80 w-full max-w-md cursor-pointer flex-col items-center justify-center rounded-xl border-2 border-dashed transition-colors"
         >
-          <div className="w-16 h-16 rounded-full bg-muted flex items-center justify-center mb-4">
-            <Upload className="h-8 w-8 text-muted-foreground" />
+          <div className="bg-muted mb-4 flex h-16 w-16 items-center justify-center rounded-full">
+            <Upload className="text-muted-foreground h-8 w-8" />
           </div>
-          <p className="text-lg font-medium text-foreground mb-1">
+          <p className="text-foreground mb-1 text-lg font-medium">
             {intl.formatMessage({ id: 'FILE_MANAGER.IMAGE_EDITOR.UPLOAD_TITLE' })}
           </p>
-          <p className="text-sm text-muted-foreground">
+          <p className="text-muted-foreground text-sm">
             {intl.formatMessage({ id: 'FILE_MANAGER.IMAGE_EDITOR.UPLOAD_HINT' })}
           </p>
         </div>
@@ -59,17 +59,17 @@ const ImageEditorCanvas: React.FC<Props> = ({
             ref={imgRef}
             src={src}
             alt="Preview"
-            className="max-w-full max-h-[calc(100vh-200px)] object-contain"
+            className="max-h-[calc(100vh-200px)] max-w-full object-contain"
             onLoad={onImageLoad}
           />
         </ReactCrop>
       ) : (
-        <div className="relative bg-card rounded-lg shadow-lg overflow-hidden max-w-full max-h-full">
+        <div className="bg-card relative max-h-full max-w-full overflow-hidden rounded-lg shadow-lg">
           <img
             ref={imgRef}
             src={src}
             alt="Preview"
-            className="max-w-full max-h-[calc(100vh-200px)] object-contain"
+            className="max-h-[calc(100vh-200px)] max-w-full object-contain"
             onLoad={onImageLoad}
           />
         </div>
diff --git a/apps/admin/src/core/FileManager/view/widgets/ImageEditor/ImageEditorSidebar.tsx b/apps/admin/src/core/FileManager/view/widgets/ImageEditor/ImageEditorSidebar.tsx
index ca48bc4..8a37727 100644
--- a/apps/admin/src/core/FileManager/view/widgets/ImageEditor/ImageEditorSidebar.tsx
+++ b/apps/admin/src/core/FileManager/view/widgets/ImageEditor/ImageEditorSidebar.tsx
@@ -40,33 +40,33 @@ const ImageEditorSidebar: React.FC<Props> = ({
   const intl = useIntl();
 
   return (
-    <div className="w-80 border-l bg-card flex flex-col">
+    <div className="bg-card flex w-80 flex-col border-l">
       <Tabs
         value={activeTab}
         onValueChange={(v) => onTabChange(v as 'crop' | 'resize')}
-        className="flex-1 flex flex-col"
+        className="flex flex-1 flex-col"
       >
-        <TabsList className="w-full rounded-none border-b bg-transparent h-12 p-0">
+        <TabsList className="h-12 w-full rounded-none border-b bg-transparent p-0">
           <TabsTrigger
             value="crop"
-            className="flex-1 rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent h-full"
+            className="data-[state=active]:border-primary h-full flex-1 rounded-none border-b-2 border-transparent data-[state=active]:bg-transparent"
           >
-            <CropIcon className="h-4 w-4 mr-2" />
+            <CropIcon className="mr-2 h-4 w-4" />
             {intl.formatMessage({ id: 'FILE_MANAGER.DRIVE.ACTION.CROP' })}
           </TabsTrigger>
           <TabsTrigger
             value="resize"
-            className="flex-1 rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent h-full"
+            className="data-[state=active]:border-primary h-full flex-1 rounded-none border-b-2 border-transparent data-[state=active]:bg-transparent"
           >
-            <Maximize2 className="h-4 w-4 mr-2" />
+            <Maximize2 className="mr-2 h-4 w-4" />
             {intl.formatMessage({ id: 'FILE_MANAGER.DRIVE.ACTION.RESIZE' })}
           </TabsTrigger>
         </TabsList>
 
-        <TabsContent value="crop" className="flex-1 m-0 overflow-auto">
-          <div className="p-4 space-y-6">
+        <TabsContent value="crop" className="m-0 flex-1 overflow-auto">
+          <div className="space-y-6 p-4">
             <div>
-              <h3 className="text-sm font-medium mb-3">
+              <h3 className="mb-3 text-sm font-medium">
                 {intl.formatMessage({ id: 'FILE_MANAGER.IMAGE_EDITOR.ASPECT_RATIO' })}
               </h3>
               <div className="grid grid-cols-3 gap-2">
@@ -75,7 +75,7 @@ const ImageEditorSidebar: React.FC<Props> = ({
                     key={ratio.name}
                     onClick={() => onSelectCropRatio(ratio.ratio)}
                     className={cn(
-                      'flex flex-col items-center justify-center p-3 rounded-lg border-2 transition-all hover:border-primary/50',
+                      'hover:border-primary/50 flex flex-col items-center justify-center rounded-lg border-2 p-3 transition-all',
                       selectedCropRatio === ratio.ratio
                         ? 'border-primary bg-primary/5'
                         : 'border-border bg-background'
@@ -84,12 +84,12 @@ const ImageEditorSidebar: React.FC<Props> = ({
                     <div
                       className={cn(
                         'mb-2 border-2 border-current',
-                        ratio.name === 'Free' && 'w-5 h-4 border-dashed',
-                        ratio.name === '1:1' && 'w-5 h-5',
-                        ratio.name === '4:3' && 'w-6 h-4',
-                        ratio.name === '3:4' && 'w-4 h-6',
-                        ratio.name === '16:9' && 'w-7 h-4',
-                        ratio.name === '9:16' && 'w-4 h-7'
+                        ratio.name === 'Free' && 'h-4 w-5 border-dashed',
+                        ratio.name === '1:1' && 'h-5 w-5',
+                        ratio.name === '4:3' && 'h-4 w-6',
+                        ratio.name === '3:4' && 'h-6 w-4',
+                        ratio.name === '16:9' && 'h-4 w-7',
+                        ratio.name === '9:16' && 'h-7 w-4'
                       )}
                     />
                     <span className="text-xs font-medium">{ratio.name}</span>
@@ -98,8 +98,8 @@ const ImageEditorSidebar: React.FC<Props> = ({
               </div>
             </div>
 
-            <div className="p-4 bg-muted/50 rounded-lg">
-              <div className="flex items-center gap-2 text-sm text-muted-foreground">
+            <div className="bg-muted/50 rounded-lg p-4">
+              <div className="text-muted-foreground flex items-center gap-2 text-sm">
                 <ImageIcon className="h-4 w-4" />
                 <span>
                   {intl.formatMessage({ id: 'FILE_MANAGER.IMAGE_EDITOR.ORIGINAL' })}:{' '}
@@ -108,21 +108,21 @@ const ImageEditorSidebar: React.FC<Props> = ({
               </div>
             </div>
 
-            <p className="text-xs text-muted-foreground">
+            <p className="text-muted-foreground text-xs">
               {intl.formatMessage({ id: 'FILE_MANAGER.IMAGE_EDITOR.CROP_HINT' })}
             </p>
           </div>
         </TabsContent>
 
-        <TabsContent value="resize" className="flex-1 m-0 overflow-auto">
-          <div className="p-4 space-y-6">
+        <TabsContent value="resize" className="m-0 flex-1 overflow-auto">
+          <div className="space-y-6 p-4">
             <div>
-              <h3 className="text-sm font-medium mb-3">
+              <h3 className="mb-3 text-sm font-medium">
                 {intl.formatMessage({ id: 'FILE_MANAGER.IMAGE_EDITOR.CUSTOM_SIZE' })}
               </h3>
               <div className="flex items-center gap-2">
                 <div className="flex-1">
-                  <label className="text-xs text-muted-foreground mb-1 block">
+                  <label className="text-muted-foreground mb-1 block text-xs">
                     {intl.formatMessage({ id: 'FILE_MANAGER.IMAGE_EDITOR.WIDTH' })}
                   </label>
                   <div className="relative">
@@ -132,7 +132,7 @@ const ImageEditorSidebar: React.FC<Props> = ({
                       onChange={(e) => onWidthChange(e.target.value)}
                       className="pr-8"
                     />
-                    <span className="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-muted-foreground">
+                    <span className="text-muted-foreground absolute top-1/2 right-3 -translate-y-1/2 text-xs">
                       px
                     </span>
                   </div>
@@ -141,7 +141,7 @@ const ImageEditorSidebar: React.FC<Props> = ({
                   type="button"
                   onClick={onToggleAspectRatio}
                   className={cn(
-                    'mt-5 p-2 rounded-md transition-colors',
+                    'mt-5 rounded-md p-2 transition-colors',
                     maintainAspectRatio
                       ? 'text-primary bg-primary/10'
                       : 'text-muted-foreground hover:bg-muted'
@@ -154,7 +154,7 @@ const ImageEditorSidebar: React.FC<Props> = ({
                   )}
                 </button>
                 <div className="flex-1">
-                  <label className="text-xs text-muted-foreground mb-1 block">
+                  <label className="text-muted-foreground mb-1 block text-xs">
                     {intl.formatMessage({ id: 'FILE_MANAGER.IMAGE_EDITOR.HEIGHT' })}
                   </label>
                   <div className="relative">
@@ -164,7 +164,7 @@ const ImageEditorSidebar: React.FC<Props> = ({
                       onChange={(e) => onHeightChange(e.target.value)}
                       className="pr-8"
                     />
-                    <span className="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-muted-foreground">
+                    <span className="text-muted-foreground absolute top-1/2 right-3 -translate-y-1/2 text-xs">
                       px
                     </span>
                   </div>
@@ -173,23 +173,23 @@ const ImageEditorSidebar: React.FC<Props> = ({
             </div>
 
             <div>
-              <h3 className="text-sm font-medium mb-3">
+              <h3 className="mb-3 text-sm font-medium">
                 {intl.formatMessage({ id: 'FILE_MANAGER.IMAGE_EDITOR.PRESET_SIZES' })}
               </h3>
-              <div className="space-y-1.5 max-h-100 overflow-auto pr-1">
+              <div className="max-h-100 space-y-1.5 overflow-auto pr-1">
                 {PRESET_SIZES.map((preset, index) => (
                   <button
                     key={preset.name}
                     onClick={() => onSelectPreset(index)}
                     className={cn(
-                      'w-full flex items-center justify-between px-3 py-2.5 rounded-lg border transition-all text-left',
+                      'flex w-full items-center justify-between rounded-lg border px-3 py-2.5 text-left transition-all',
                       selectedPreset === index
                         ? 'border-primary bg-primary/5 text-foreground'
-                        : 'border-transparent bg-muted/50 hover:bg-muted text-foreground'
+                        : 'bg-muted/50 hover:bg-muted text-foreground border-transparent'
                     )}
                   >
                     <span className="text-sm font-medium">{preset.name}</span>
-                    <span className="text-xs text-muted-foreground">
+                    <span className="text-muted-foreground text-xs">
                       {preset.width} x {preset.height}
                     </span>
                   </button>
@@ -198,7 +198,7 @@ const ImageEditorSidebar: React.FC<Props> = ({
             </div>
 
             {originalDimensions.width > 0 && (
-              <div className="p-4 bg-muted/50 rounded-lg space-y-2">
+              <div className="bg-muted/50 space-y-2 rounded-lg p-4">
                 <div className="flex items-center justify-between text-sm">
                   <span className="text-muted-foreground">
                     {intl.formatMessage({ id: 'FILE_MANAGER.IMAGE_EDITOR.ORIGINAL' })}
@@ -212,7 +212,7 @@ const ImageEditorSidebar: React.FC<Props> = ({
                     <span className="text-muted-foreground">
                       {intl.formatMessage({ id: 'FILE_MANAGER.IMAGE_EDITOR.NEW_SIZE' })}
                     </span>
-                    <span className="font-medium text-primary">
+                    <span className="text-primary font-medium">
                       {customWidth} x {customHeight}px
                     </span>
                   </div>
diff --git a/apps/admin/src/core/FileManager/view/widgets/ImageEditor/ImageEditorToolbar.tsx b/apps/admin/src/core/FileManager/view/widgets/ImageEditor/ImageEditorToolbar.tsx
index d9ea287..39d11e2 100644
--- a/apps/admin/src/core/FileManager/view/widgets/ImageEditor/ImageEditorToolbar.tsx
+++ b/apps/admin/src/core/FileManager/view/widgets/ImageEditor/ImageEditorToolbar.tsx
@@ -26,10 +26,10 @@ const ImageEditorToolbar: React.FC<Props> = ({
   const intl = useIntl();
 
   return (
-    <div className="border-b bg-card px-4 py-2 flex items-center justify-between">
-      <div className="flex items-center gap-2 min-w-0">
+    <div className="bg-card flex items-center justify-between border-b px-4 py-2">
+      <div className="flex min-w-0 items-center gap-2">
         <BackButton />
-        <h2 className="max-w-md font-bold line-clamp-1">{title}</h2>
+        <h2 className="line-clamp-1 max-w-md font-bold">{title}</h2>
       </div>
 
       <div className="flex items-center gap-2">
@@ -49,7 +49,7 @@ const ImageEditorToolbar: React.FC<Props> = ({
             type="button"
             variant="ghost"
             size="sm"
-            className="h-8 gap-1.5 text-destructive hover:text-destructive"
+            className="text-destructive hover:text-destructive h-8 gap-1.5"
             onClick={onCancel}
             disabled={saving}
           >
diff --git a/apps/admin/src/core/FileManager/view/widgets/ImageEditor/index.tsx b/apps/admin/src/core/FileManager/view/widgets/ImageEditor/index.tsx
index 6cf384d..d56b191 100644
--- a/apps/admin/src/core/FileManager/view/widgets/ImageEditor/index.tsx
+++ b/apps/admin/src/core/FileManager/view/widgets/ImageEditor/index.tsx
@@ -39,7 +39,7 @@ const ImageEditor: React.FC<Props> = ({ src, fileName, directory, saving, onSave
   });
 
   return (
-    <div className="flex flex-col bg-background" style={{ height: 'calc(100% - 72px)' }}>
+    <div className="bg-background flex flex-col" style={{ height: 'calc(100% - 72px)' }}>
       <ImageEditorToolbar
         title={state.effectiveSrc ? state.effectiveName : undefined}
         saving={saving}
@@ -50,7 +50,7 @@ const ImageEditor: React.FC<Props> = ({ src, fileName, directory, saving, onSave
         onApply={() => actions.apply(activeTab)}
       />
 
-      <div className="flex-1 flex overflow-hidden">
+      <div className="flex flex-1 overflow-hidden">
         <ImageEditorCanvas
           src={state.effectiveSrc}
           activeTab={activeTab}
@@ -81,7 +81,7 @@ const ImageEditor: React.FC<Props> = ({ src, fileName, directory, saving, onSave
         />
       </div>
 
-      <div className="border-t bg-card px-4 py-1.5 text-xs text-muted-foreground flex items-center justify-between">
+      <div className="bg-card text-muted-foreground flex items-center justify-between border-t px-4 py-1.5 text-xs">
         <span>
           {intl.formatMessage({
             id: state.effectiveSrc
diff --git a/apps/admin/src/core/FileManager/view/widgets/ImageMap/ImageMapCanvas.tsx b/apps/admin/src/core/FileManager/view/widgets/ImageMap/ImageMapCanvas.tsx
index 3ecd4f3..58522d5 100644
--- a/apps/admin/src/core/FileManager/view/widgets/ImageMap/ImageMapCanvas.tsx
+++ b/apps/admin/src/core/FileManager/view/widgets/ImageMap/ImageMapCanvas.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
 import { Upload } from 'lucide-react';
+import React from 'react';
 import { useIntl } from 'react-intl';
 import { getAreaBoundingBox, getScaledCircleOverlayStyle, getScaledRectOverlayStyle, scaleArea } from './helpers';
-import { ImageMapArea, ImageMapCircleArea, ImageMapPolygonArea, ImageMapRectArea } from './types';
 import { CircleOverlay, PolygonOverlay, RectOverlay } from './ImageMapResizeHandles';
+import { ImageMapArea, ImageMapCircleArea, ImageMapPolygonArea, ImageMapRectArea } from './types';
 
 type Props = {
   src?: string;
@@ -105,19 +105,19 @@ const ImageMapCanvas: React.FC<Props> = ({
   );
 
   return (
-    <div className="flex-1 flex items-center justify-center p-8 bg-muted/30 overflow-auto">
+    <div className="bg-muted/30 flex flex-1 items-center justify-center overflow-auto p-8">
       {!src ? (
         <div
           onClick={() => fileInputRef.current?.click()}
-          className="flex flex-col items-center justify-center w-full max-w-md h-80 border-2 border-dashed border-border rounded-xl bg-card cursor-pointer hover:border-primary/50 hover:bg-accent/30 transition-colors"
+          className="border-border bg-card hover:border-primary/50 hover:bg-accent/30 flex h-80 w-full max-w-md cursor-pointer flex-col items-center justify-center rounded-xl border-2 border-dashed transition-colors"
         >
-          <div className="w-16 h-16 rounded-full bg-muted flex items-center justify-center mb-4">
-            <Upload className="h-8 w-8 text-muted-foreground" />
+          <div className="bg-muted mb-4 flex h-16 w-16 items-center justify-center rounded-full">
+            <Upload className="text-muted-foreground h-8 w-8" />
           </div>
-          <p className="text-lg font-medium text-foreground mb-1">
+          <p className="text-foreground mb-1 text-lg font-medium">
             {intl.formatMessage({ id: 'FILE_MANAGER.IMAGE_EDITOR.UPLOAD_TITLE' })}
           </p>
-          <p className="text-sm text-muted-foreground">
+          <p className="text-muted-foreground text-sm">
             {intl.formatMessage({ id: 'FILE_MANAGER.IMAGE_EDITOR.UPLOAD_HINT' })}
           </p>
         </div>
@@ -133,7 +133,7 @@ const ImageMapCanvas: React.FC<Props> = ({
             ref={imgRef}
             src={src}
             alt="Preview"
-            className="max-w-full max-h-[calc(100vh-200px)] object-contain"
+            className="max-h-[calc(100vh-200px)] max-w-full object-contain"
             onLoad={handleImageLoad}
           />
 
diff --git a/apps/admin/src/core/FileManager/view/widgets/ImageMap/ImageMapResizeHandles.tsx b/apps/admin/src/core/FileManager/view/widgets/ImageMap/ImageMapResizeHandles.tsx
index 71e2569..023cd47 100644
--- a/apps/admin/src/core/FileManager/view/widgets/ImageMap/ImageMapResizeHandles.tsx
+++ b/apps/admin/src/core/FileManager/view/widgets/ImageMap/ImageMapResizeHandles.tsx
@@ -1,7 +1,6 @@
-import { ImageMapPolygonArea, ImageMapRectArea } from './types';
 import React from 'react';
 import { cn } from '@crux-kit/utils';
-import { ImageMapCircleArea } from './types';
+import { ImageMapCircleArea, ImageMapPolygonArea, ImageMapRectArea } from './types';
 
 type BoundingBox = {
   x: number;
@@ -18,7 +17,7 @@ const HandleDot: React.FC<{
   return (
     <span
       className={cn(
-        'bg-primary absolute rounded-full size-3 border border-background shadow -translate-x-1/2 -translate-y-1/2 cursor-pointer',
+        'bg-primary border-background absolute size-3 -translate-x-1/2 -translate-y-1/2 cursor-pointer rounded-full border shadow',
         className
       )}
       style={{
@@ -45,7 +44,7 @@ export const AreaLabel: React.FC<AreaLabelProps> = ({
 
   return (
     <div
-      className="absolute px-2 py-1 rounded bg-black/70 text-white font-medium whitespace-nowrap"
+      className="absolute rounded bg-black/70 px-2 py-1 font-medium whitespace-nowrap text-white"
       style={{
         left: boundingBox.x,
         top: Math.max(0, boundingBox.y - offset),
@@ -72,7 +71,7 @@ export const CircleOverlay: React.FC<CircleOverlayProps> = ({
   const [centerPoint, edgePoint] = area.points;
 
   return (
-    <div className="absolute inset-0 pointer-events-none">
+    <div className="pointer-events-none absolute inset-0">
       {overlayStyle ? (
         <div
           className={cn(
@@ -106,7 +105,7 @@ export const RectOverlay: React.FC<RectOverlayProps> = ({
   const [firstPoint, secondPoint] = area.points;
 
   return (
-    <div className="absolute inset-0 pointer-events-none">
+    <div className="pointer-events-none absolute inset-0">
       {overlayStyle ? (
         <div
           className={cn(
@@ -157,9 +156,9 @@ export const PolygonOverlay: React.FC<PolygonOverlayProps> = ({
   }, [area.points]);
 
   return (
-    <div className="absolute inset-0 pointer-events-none">
+    <div className="pointer-events-none absolute inset-0">
       <svg
-        className="absolute inset-0 pointer-events-none"
+        className="pointer-events-none absolute inset-0"
         width={canvasWidth}
         height={canvasHeight}
         viewBox={`0 0 ${canvasWidth} ${canvasHeight}`}
diff --git a/apps/admin/src/core/FileManager/view/widgets/ImageMap/ImageMapSidebar.tsx b/apps/admin/src/core/FileManager/view/widgets/ImageMap/ImageMapSidebar.tsx
index d0fbad5..b174fb3 100644
--- a/apps/admin/src/core/FileManager/view/widgets/ImageMap/ImageMapSidebar.tsx
+++ b/apps/admin/src/core/FileManager/view/widgets/ImageMap/ImageMapSidebar.tsx
@@ -1,15 +1,15 @@
+import { Code2, Link2, MousePointerSquareDashed, X } from 'lucide-react';
 import React from 'react';
 import { useIntl } from 'react-intl';
-import { Code2, Link2, MousePointerSquareDashed, X } from 'lucide-react';
-import { Input } from '#shared/ui/Input';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '#shared/ui/Select';
-import { Button } from '#shared/ui/Button';
-import { Textarea } from '#shared/ui/Textarea';
-import { ImageMapArea, ImageMapTarget } from './types';
-import { shapeOptions, targetOptions } from './config';
 import { cn } from '@crux-kit/utils';
-import { RadioGroup, RadioGroupItem } from '#shared/ui/RadioGroup';
+import { Button } from '#shared/ui/Button';
 import { CopyButton } from '#shared/ui/CopyButton';
+import { Input } from '#shared/ui/Input';
+import { RadioGroup, RadioGroupItem } from '#shared/ui/RadioGroup';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '#shared/ui/Select';
+import { Textarea } from '#shared/ui/Textarea';
+import { shapeOptions, targetOptions } from './config';
+import { ImageMapArea, ImageMapTarget } from './types';
 
 type Props = {
   hasImage: boolean;
@@ -35,12 +35,12 @@ const ImageMapSidebar: React.FC<Props> = ({
   const intl = useIntl();
 
   return (
-    <div className="flex w-80 flex-col overflow-hidden border-l bg-card">
+    <div className="bg-card flex w-80 flex-col overflow-hidden border-l">
       <div className="flex-1 space-y-4 overflow-y-auto p-4">
-        <section className="rounded-lg p-4 shadow space-y-3">
+        <section className="space-y-3 rounded-lg p-4 shadow">
           <div className="flex items-center gap-2">
-            <MousePointerSquareDashed className="size-4 shrink-0 text-muted-foreground" />
-            <div className="text-sm grow font-medium">
+            <MousePointerSquareDashed className="text-muted-foreground size-4 shrink-0" />
+            <div className="grow text-sm font-medium">
               {intl.formatMessage({ id: 'FILE_MANAGER.IMAGE_MAP.AREAS.TITLE' })}
             </div>
             <Button variant="primary" onClick={onAddArea} disabled={!hasImage}>
@@ -55,12 +55,12 @@ const ImageMapSidebar: React.FC<Props> = ({
                   <div
                     onClick={() => onSelectArea(area.id)}
                     className={cn(
-                      'grow cursor-pointer rounded-lg border py-3 px-2 transition',
+                      'grow cursor-pointer rounded-lg border px-2 py-3 transition',
                       selectedArea?.id === area.id && 'border-primary bg-primary/5'
                     )}
                   >
-                    <div className="flex items-center justify-between min-w-0 gap-1">
-                      <p className="text-left text-sm font-medium line-clamp-1 max-w-38">
+                    <div className="flex min-w-0 items-center justify-between gap-1">
+                      <p className="line-clamp-1 max-w-38 text-left text-sm font-medium">
                         {area.title ||
                           `${intl.formatMessage({
                             id: 'FILE_MANAGER.IMAGE_MAP.AREAS.ITEM'
@@ -68,7 +68,7 @@ const ImageMapSidebar: React.FC<Props> = ({
                       </p>
 
                       {area.shape && (
-                        <span className="rounded bg-muted px-1.5 py-0.5 text-[10px] uppercase tracking-wide text-muted-foreground">
+                        <span className="bg-muted text-muted-foreground rounded px-1.5 py-0.5 text-[10px] tracking-wide uppercase">
                           {intl.formatMessage({
                             id: shapeOptions.find((opt) => opt.value === area.shape)?.labelId
                           })}
@@ -80,7 +80,7 @@ const ImageMapSidebar: React.FC<Props> = ({
                   <Button
                     type="button"
                     variant="foreground"
-                    className="shrink-0 text-muted-foreground hover:text-destructive p-0"
+                    className="text-muted-foreground hover:text-destructive shrink-0 p-0"
                     onClick={() => onRemoveArea(area.id)}
                     title={intl.formatMessage({
                       id: 'FILE_MANAGER.IMAGE_MAP.AREAS.REMOVE'
@@ -95,9 +95,9 @@ const ImageMapSidebar: React.FC<Props> = ({
         </section>
 
         {selectedArea && (
-          <section className="rounded-lg p-4 shadow space-y-3">
+          <section className="space-y-3 rounded-lg p-4 shadow">
             <div className="flex items-center gap-2">
-              <Link2 className="h-4 w-4 shrink-0 text-muted-foreground" />
+              <Link2 className="text-muted-foreground h-4 w-4 shrink-0" />
               <div className="text-sm font-medium">
                 {intl.formatMessage({
                   id: 'FILE_MANAGER.IMAGE_MAP.SELECTED_AREA.TITLE'
@@ -106,7 +106,7 @@ const ImageMapSidebar: React.FC<Props> = ({
             </div>
 
             <div>
-              <label className="inline-block mb-2 text-xs font-medium text-muted-foreground">
+              <label className="text-muted-foreground mb-2 inline-block text-xs font-medium">
                 {intl.formatMessage({
                   id: 'FILE_MANAGER.IMAGE_MAP.SELECTED_AREA.SHAPE'
                 })}
@@ -124,7 +124,7 @@ const ImageMapSidebar: React.FC<Props> = ({
                       }) as ImageMapArea
                   );
                 }}
-                className="flex flex-wrap gap-4 items-center"
+                className="flex flex-wrap items-center gap-4"
               >
                 {shapeOptions.map((option) => (
                   <label
@@ -140,7 +140,7 @@ const ImageMapSidebar: React.FC<Props> = ({
             </div>
 
             <div>
-              <label className="text-xs font-medium text-muted-foreground">
+              <label className="text-muted-foreground text-xs font-medium">
                 {intl.formatMessage({
                   id: 'FILE_MANAGER.IMAGE_MAP.SELECTED_AREA.URL'
                 })}
@@ -158,7 +158,7 @@ const ImageMapSidebar: React.FC<Props> = ({
             </div>
 
             <div>
-              <label className="text-xs font-medium text-muted-foreground">
+              <label className="text-muted-foreground text-xs font-medium">
                 {intl.formatMessage({
                   id: 'FILE_MANAGER.IMAGE_MAP.SELECTED_AREA.TITLE_FIELD'
                 })}
@@ -178,7 +178,7 @@ const ImageMapSidebar: React.FC<Props> = ({
             </div>
 
             <div>
-              <label className="text-xs font-medium text-muted-foreground">
+              <label className="text-muted-foreground text-xs font-medium">
                 {intl.formatMessage({
                   id: 'FILE_MANAGER.IMAGE_MAP.SELECTED_AREA.TARGET'
                 })}
@@ -209,10 +209,10 @@ const ImageMapSidebar: React.FC<Props> = ({
         )}
 
         {areas.length > 0 && (
-          <section className="rounded-lg p-4 shadow space-y-3">
+          <section className="space-y-3 rounded-lg p-4 shadow">
             <div className="flex items-center justify-between gap-2">
               <div className="flex items-center gap-2">
-                <Code2 className="size-4 shrink-0 text-muted-foreground" />
+                <Code2 className="text-muted-foreground size-4 shrink-0" />
                 <div className="text-sm font-medium">
                   {intl.formatMessage({
                     id: 'FILE_MANAGER.IMAGE_MAP.CODE_PREVIEW.TITLE'
diff --git a/apps/admin/src/core/FileManager/view/widgets/ImageMap/ImageMapToolbar.tsx b/apps/admin/src/core/FileManager/view/widgets/ImageMap/ImageMapToolbar.tsx
index 37530d1..70dab99 100644
--- a/apps/admin/src/core/FileManager/view/widgets/ImageMap/ImageMapToolbar.tsx
+++ b/apps/admin/src/core/FileManager/view/widgets/ImageMap/ImageMapToolbar.tsx
@@ -16,10 +16,10 @@ const ImageMapToolbar: React.FC<Props> = ({ title, hasImage, canCancel, onReset,
   const intl = useIntl();
 
   return (
-    <div className="border-b bg-card px-4 py-2 flex items-center justify-between">
-      <div className="flex items-center gap-2 min-w-0">
+    <div className="bg-card flex items-center justify-between border-b px-4 py-2">
+      <div className="flex min-w-0 items-center gap-2">
         <BackButton />
-        <h2 className="max-w-md font-bold line-clamp-1">{title}</h2>
+        <h2 className="line-clamp-1 max-w-md font-bold">{title}</h2>
       </div>
 
       <div className="flex items-center gap-2">
@@ -39,7 +39,7 @@ const ImageMapToolbar: React.FC<Props> = ({ title, hasImage, canCancel, onReset,
             type="button"
             variant="ghost"
             size="sm"
-            className="h-8 gap-1.5 text-destructive hover:text-destructive"
+            className="text-destructive hover:text-destructive h-8 gap-1.5"
             onClick={onCancel}
           >
             <X className="h-4 w-4" />
diff --git a/apps/admin/src/core/FileManager/view/widgets/ImageMap/index.tsx b/apps/admin/src/core/FileManager/view/widgets/ImageMap/index.tsx
index 8707f7b..c40f168 100644
--- a/apps/admin/src/core/FileManager/view/widgets/ImageMap/index.tsx
+++ b/apps/admin/src/core/FileManager/view/widgets/ImageMap/index.tsx
@@ -16,7 +16,7 @@ const ImageMap: React.FC<ImageMapProps> = ({ src, fileName }) => {
   const { state, actions, refs } = useImageMapControl({ src, fileName });
 
   return (
-    <div className="flex flex-col bg-background" style={{ height: 'calc(100% - 72px)' }}>
+    <div className="bg-background flex flex-col" style={{ height: 'calc(100% - 72px)' }}>
       <ImageMapToolbar
         title={state.localFileName ? state.localFileName : undefined}
         hasImage={Boolean(state.localSrc)}
@@ -25,7 +25,7 @@ const ImageMap: React.FC<ImageMapProps> = ({ src, fileName }) => {
         onCancel={actions.cancel}
       />
 
-      <div className="flex-1 min-w-0 min-h-0 flex overflow-hidden">
+      <div className="flex min-h-0 min-w-0 flex-1 overflow-hidden">
         <ImageMapCanvas
           src={state.localSrc}
           imgRef={refs.imgRef}
@@ -53,7 +53,7 @@ const ImageMap: React.FC<ImageMapProps> = ({ src, fileName }) => {
         />
       </div>
 
-      <div className="border-t bg-card px-4 py-1.5 text-xs text-muted-foreground flex items-center justify-between">
+      <div className="bg-card text-muted-foreground flex items-center justify-between border-t px-4 py-1.5 text-xs">
         <span>
           {intl.formatMessage({
             id: state.localSrc
diff --git a/apps/admin/src/core/FileManager/view/widgets/ImageMap/useImageMapControl.ts b/apps/admin/src/core/FileManager/view/widgets/ImageMap/useImageMapControl.ts
index 23b5102..95dbc2a 100644
--- a/apps/admin/src/core/FileManager/view/widgets/ImageMap/useImageMapControl.ts
+++ b/apps/admin/src/core/FileManager/view/widgets/ImageMap/useImageMapControl.ts
@@ -1,6 +1,6 @@
 import React from 'react';
 import { appendPointToArea, clampAreaToBounds, clampPointToBounds, createEmptyArea, getDisplayScale, getPolygonVertexAtPoint, getRelativePoint, getShapePointAtPoint, isAreaComplete, isPointInsideArea, moveArea, movePolygonPoint, replaceShapePoint } from './helpers';
-import { ImageMapPolygonArea, ImageMapRectArea, ImageMapCircleArea, ImageMapArea } from './types';
+import { ImageMapArea, ImageMapCircleArea, ImageMapPolygonArea, ImageMapRectArea } from './types';
 import useImageMapState from './useImageMapState';
 
 export type Params = {
diff --git a/apps/admin/src/core/FileManager/view/widgets/ImageMap/useImageMapState.ts b/apps/admin/src/core/FileManager/view/widgets/ImageMap/useImageMapState.ts
index df18d90..0619b25 100644
--- a/apps/admin/src/core/FileManager/view/widgets/ImageMap/useImageMapState.ts
+++ b/apps/admin/src/core/FileManager/view/widgets/ImageMap/useImageMapState.ts
@@ -1,6 +1,6 @@
 import React from 'react';
-import { ImageSize, ImageMapArea, InteractionState } from './types';
 import { getAreaCoords } from './helpers';
+import { ImageMapArea, ImageSize, InteractionState } from './types';
 
 type State = {
   localSrc?: string;
diff --git a/apps/admin/src/core/FileManager/view/widgets/OperationWatcher/DeleteCard.tsx b/apps/admin/src/core/FileManager/view/widgets/OperationWatcher/DeleteCard.tsx
index b25c3e0..1ac3035 100644
--- a/apps/admin/src/core/FileManager/view/widgets/OperationWatcher/DeleteCard.tsx
+++ b/apps/admin/src/core/FileManager/view/widgets/OperationWatcher/DeleteCard.tsx
@@ -27,21 +27,21 @@ const FileDeleteWidget: React.FC<
 
   return (
     <div className="w-80">
-      <div className="rounded-xl border border-border bg-card overflow-hidden">
+      <div className="border-border bg-card overflow-hidden rounded-xl border">
         <button
           type="button"
           onClick={() => setIsCollapsed((collapsed) => !collapsed)}
-          className="flex items-center justify-between w-full px-4 py-3 border-b border-border bg-accent cursor-pointer"
+          className="border-border bg-accent flex w-full cursor-pointer items-center justify-between border-b px-4 py-3"
         >
           <div className={cn('flex items-center gap-3', isPending && 'animate-pulse')}>
-            <Trash2 className="shrink-0 size-5" />
+            <Trash2 className="size-5 shrink-0" />
 
             <div className="flex flex-col items-start">
-              <span className="text-sm font-medium text-foreground">
+              <span className="text-foreground text-sm font-medium">
                 {intl.formatMessage({ id: 'FILE_MANAGER.DRIVE.DELETES' })}
               </span>
               {errorCount > 0 && (
-                <span className="text-xs text-destructive">
+                <span className="text-destructive text-xs">
                   {intl.formatMessage(
                     { id: 'FILE_MANAGER.WIDGET.OPERATION_WATCHER.FAILED_N' },
                     { n: errorCount }
@@ -54,7 +54,7 @@ const FileDeleteWidget: React.FC<
           <div className="flex items-center gap-2">
             <ChevronDown
               className={cn(
-                'size-4 text-muted-foreground transition-transform duration-200',
+                'text-muted-foreground size-4 transition-transform duration-200',
                 isCollapsed ? '-rotate-90' : ''
               )}
             />
@@ -72,8 +72,8 @@ const FileDeleteWidget: React.FC<
             isCollapsed ? 'max-h-0' : 'max-h-64'
           )}
         >
-          <div className="overflow-y-auto max-h-64">
-            <ul className="divide-y divide-border">{children}</ul>
+          <div className="max-h-64 overflow-y-auto">
+            <ul className="divide-border divide-y">{children}</ul>
           </div>
         </div>
       </div>
diff --git a/apps/admin/src/core/FileManager/view/widgets/OperationWatcher/DeleteItem.tsx b/apps/admin/src/core/FileManager/view/widgets/OperationWatcher/DeleteItem.tsx
index 8c7d258..7f52625 100644
--- a/apps/admin/src/core/FileManager/view/widgets/OperationWatcher/DeleteItem.tsx
+++ b/apps/admin/src/core/FileManager/view/widgets/OperationWatcher/DeleteItem.tsx
@@ -17,14 +17,14 @@ const FileDeleteItem: React.FC<{
   return (
     <li
       className={cn(
-        'flex flex-col px-4 py-3 hover:bg-accent/50 transition-colors group',
+        'hover:bg-accent/50 group flex flex-col px-4 py-3 transition-colors',
         hasError && 'bg-destructive/5'
       )}
     >
       <div className="flex items-center gap-3">
         <div className="shrink-0">
           {hasError ? (
-            <AlertCircle className="size-5 text-destructive" />
+            <AlertCircle className="text-destructive size-5" />
           ) : (
             <img className="size-5" src={getFileIconSrc(data.name)} />
           )}
@@ -32,14 +32,14 @@ const FileDeleteItem: React.FC<{
 
         <span
           className={cn(
-            'flex-1 text-sm truncate',
+            'flex-1 truncate text-sm',
             hasError ? 'text-destructive' : 'text-foreground'
           )}
         >
           <span className="relative inline-block max-w-full truncate">
             {data.name}
             {deleted && (
-              <span className="absolute left-0 top-1/2 w-full h-0.5 bg-destructive animate-strike" />
+              <span className="bg-destructive animate-strike absolute top-1/2 left-0 h-0.5 w-full" />
             )}
           </span>
         </span>
@@ -51,7 +51,7 @@ const FileDeleteItem: React.FC<{
               size="sm"
               mode="icon"
               variant="ghost"
-              className="shrink-0 text-muted-foreground opacity-0 group-hover:opacity-100 hover:text-destructive hover:bg-destructive/10"
+              className="text-muted-foreground hover:text-destructive hover:bg-destructive/10 shrink-0 opacity-0 group-hover:opacity-100"
               onClick={onRemove}
             >
               <X className="size-4" />
@@ -64,9 +64,9 @@ const FileDeleteItem: React.FC<{
               size="sm"
               mode="icon"
               variant="ghost"
-              className="shrink-0 pointer-events-none"
+              className="pointer-events-none shrink-0"
             >
-              <Loader2 className="animate-spin text-primary size-4" />
+              <Loader2 className="text-primary size-4 animate-spin" />
             </Button>
           )}
 
@@ -76,9 +76,9 @@ const FileDeleteItem: React.FC<{
               size="sm"
               mode="icon"
               variant="ghost"
-              className="shrink-0 pointer-events-none"
+              className="pointer-events-none shrink-0"
             >
-              <CircleCheck className="text-emerald-500 size-4" />
+              <CircleCheck className="size-4 text-emerald-500" />
             </Button>
           )}
 
@@ -88,7 +88,7 @@ const FileDeleteItem: React.FC<{
               size="sm"
               mode="icon"
               variant="ghost"
-              className="shrink-0 text-muted-foreground hover:text-foreground"
+              className="text-muted-foreground hover:text-foreground shrink-0"
               onClick={onRetry}
             >
               <RefreshCcw className="size-4" />
@@ -97,7 +97,7 @@ const FileDeleteItem: React.FC<{
         </div>
       </div>
 
-      {hasError && <p className="ml-8 text-xs text-destructive/80">{data.error}</p>}
+      {hasError && <p className="text-destructive/80 ml-8 text-xs">{data.error}</p>}
     </li>
   );
 });
diff --git a/apps/admin/src/core/FileManager/view/widgets/OperationWatcher/UploadCard.tsx b/apps/admin/src/core/FileManager/view/widgets/OperationWatcher/UploadCard.tsx
index 86200ab..1e3660a 100644
--- a/apps/admin/src/core/FileManager/view/widgets/OperationWatcher/UploadCard.tsx
+++ b/apps/admin/src/core/FileManager/view/widgets/OperationWatcher/UploadCard.tsx
@@ -25,21 +25,21 @@ const FileUploadWidget: React.FC<{
 
   return (
     <div className="w-80">
-      <div className="rounded-xl border border-border bg-card overflow-hidden">
+      <div className="border-border bg-card overflow-hidden rounded-xl border">
         <button
           type="button"
           onClick={() => setIsCollapsed((collapsed) => !collapsed)}
-          className="flex items-center justify-between w-full px-4 py-3 bg-accent cursor-pointer"
+          className="bg-accent flex w-full cursor-pointer items-center justify-between px-4 py-3"
         >
           <div className={cn('flex items-center gap-3', isPending && 'animate-pulse')}>
-            <UploadCloud className="shrink-0 size-5" />
+            <UploadCloud className="size-5 shrink-0" />
 
             <div className="flex flex-col items-start">
-              <span className="text-sm font-medium text-foreground">
+              <span className="text-foreground text-sm font-medium">
                 {intl.formatMessage({ id: 'FILE_MANAGER.DRIVE.UPLOADS' })}
               </span>
               {errorCount > 0 && (
-                <span className="text-xs text-destructive">
+                <span className="text-destructive text-xs">
                   {intl.formatMessage(
                     { id: 'FILE_MANAGER.WIDGET.OPERATION_WATCHER.FAILED_N' },
                     { n: errorCount }
@@ -51,7 +51,7 @@ const FileUploadWidget: React.FC<{
           <div className="flex items-center gap-2">
             <ChevronDown
               className={cn(
-                'size-4 text-muted-foreground transition-transform duration-200',
+                'text-muted-foreground size-4 transition-transform duration-200',
                 isCollapsed ? '-rotate-90' : ''
               )}
             />
@@ -69,8 +69,8 @@ const FileUploadWidget: React.FC<{
             isCollapsed ? 'max-h-0' : 'max-h-64'
           )}
         >
-          <div className="overflow-y-auto max-h-64">
-            <ul className="divide-y divide-border">{children}</ul>
+          <div className="max-h-64 overflow-y-auto">
+            <ul className="divide-border divide-y">{children}</ul>
           </div>
         </div>
       </div>
diff --git a/apps/admin/src/core/FileManager/view/widgets/OperationWatcher/UploadItem.tsx b/apps/admin/src/core/FileManager/view/widgets/OperationWatcher/UploadItem.tsx
index 2d8af61..146c2cd 100644
--- a/apps/admin/src/core/FileManager/view/widgets/OperationWatcher/UploadItem.tsx
+++ b/apps/admin/src/core/FileManager/view/widgets/OperationWatcher/UploadItem.tsx
@@ -17,23 +17,23 @@ const FileUploadItem: React.FC<{
   return (
     <li
       className={cn(
-        'flex flex-col px-4 py-3 hover:bg-accent/50 transition-colors group',
+        'hover:bg-accent/50 group flex flex-col px-4 py-3 transition-colors',
         hasError && 'bg-destructive/5'
       )}
     >
       <div className="flex items-center gap-3">
         <div className="shrink-0">
           {hasError ? (
-            <AlertCircle className="size-5 text-destructive" />
+            <AlertCircle className="text-destructive size-5" />
           ) : (
             <img className="size-5" src={getFileIconSrc(data.file.name)} />
           )}
         </div>
 
-        <div className="flex-1 min-w-0 relative">
+        <div className="relative min-w-0 flex-1">
           <span
             className={cn(
-              'block text-sm truncate',
+              'block truncate text-sm',
               hasError ? 'text-destructive' : 'text-foreground'
             )}
           >
@@ -41,7 +41,7 @@ const FileUploadItem: React.FC<{
           </span>
 
           {data.status === FileUploadStatus.IN_PROGRESS && (
-            <div className="absolute left-0 -bottom-1.5 right-0 h-1 bg-secondary rounded-full overflow-hidden">
+            <div className="bg-secondary absolute right-0 -bottom-1.5 left-0 h-1 overflow-hidden rounded-full">
               <div
                 className="h-full bg-green-500 transition-all duration-300"
                 style={{ width: `${data.progress}%` }}
@@ -51,7 +51,7 @@ const FileUploadItem: React.FC<{
         </div>
 
         {data.status === FileUploadStatus.IN_PROGRESS && (
-          <span className="text-xs text-muted-foreground tabular-nums">{data.progress}%</span>
+          <span className="text-muted-foreground text-xs tabular-nums">{data.progress}%</span>
         )}
 
         <div className="flex items-center">
@@ -61,7 +61,7 @@ const FileUploadItem: React.FC<{
               size="sm"
               mode="icon"
               variant="ghost"
-              className="shrink-0 pointer-events-none text-muted-foreground"
+              className="text-muted-foreground pointer-events-none shrink-0"
             >
               <Hourglass className="size-4" />
             </Button>
@@ -73,11 +73,11 @@ const FileUploadItem: React.FC<{
               size="sm"
               variant="ghost"
               mode="icon"
-              className="shrink-0 relative text-muted-foreground hover:text-destructive"
+              className="text-muted-foreground hover:text-destructive relative shrink-0"
               onClick={onAbort}
             >
-              <Loader2 className="animate-spin text-primary size-4" />
-              <X className="size-2 absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2" />
+              <Loader2 className="text-primary size-4 animate-spin" />
+              <X className="absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
             </Button>
           )}
 
@@ -87,9 +87,9 @@ const FileUploadItem: React.FC<{
               size="sm"
               variant="ghost"
               mode="icon"
-              className="shrink-0 pointer-events-none"
+              className="pointer-events-none shrink-0"
             >
-              <CircleCheck className="text-emerald-500 size-4" />
+              <CircleCheck className="size-4 text-emerald-500" />
             </Button>
           )}
 
@@ -100,7 +100,7 @@ const FileUploadItem: React.FC<{
                 size="sm"
                 variant="ghost"
                 mode="icon"
-                className="shrink-0 text-muted-foreground hover:text-foreground"
+                className="text-muted-foreground hover:text-foreground shrink-0"
                 onClick={onRetry}
               >
                 <RefreshCcw className="size-4" />
@@ -110,7 +110,7 @@ const FileUploadItem: React.FC<{
                 size="sm"
                 mode="icon"
                 variant="ghost"
-                className="shrink-0 text-destructive hover:text-destructive hover:bg-destructive/10"
+                className="text-destructive hover:text-destructive hover:bg-destructive/10 shrink-0"
                 onClick={onRemove}
               >
                 <XCircle className="size-4" />
@@ -120,7 +120,7 @@ const FileUploadItem: React.FC<{
         </div>
       </div>
 
-      {hasError && <p className="mt-1 ml-8 text-xs text-destructive/80">{data.error}</p>}
+      {hasError && <p className="text-destructive/80 mt-1 ml-8 text-xs">{data.error}</p>}
     </li>
   );
 });
diff --git a/apps/admin/src/core/FileManager/view/widgets/OperationWatcher/index.tsx b/apps/admin/src/core/FileManager/view/widgets/OperationWatcher/index.tsx
index 502c7f8..c5ad516 100644
--- a/apps/admin/src/core/FileManager/view/widgets/OperationWatcher/index.tsx
+++ b/apps/admin/src/core/FileManager/view/widgets/OperationWatcher/index.tsx
@@ -33,7 +33,7 @@ const OperationWatcher: React.FC = observer(() => {
       />
 
       {isOpen && (
-        <div className="fixed bottom-6 right-6 z-50 flex flex-col gap-3">
+        <div className="fixed right-6 bottom-6 z-50 flex flex-col gap-3">
           {hasUploads && (
             <FileUploadWidget
               isPending={uploadOperationStore.isLoading}
diff --git a/apps/admin/src/core/FileManager/view/widgets/SearchCommand.tsx b/apps/admin/src/core/FileManager/view/widgets/SearchCommand.tsx
index 7833977..732ff3a 100644
--- a/apps/admin/src/core/FileManager/view/widgets/SearchCommand.tsx
+++ b/apps/admin/src/core/FileManager/view/widgets/SearchCommand.tsx
@@ -86,7 +86,7 @@ const SearchCommand: React.FC = () => {
         appearance="default"
         size="sm"
         mode="default"
-        className="border border-input"
+        className="border-input border"
       >
         {intl.formatMessage({ id: 'FILE_MANAGER.WIDGET.SEARCH.BUTTON' })}
         <Kbd className="bg-background gap-1" size="xs">
@@ -112,7 +112,7 @@ const SearchCommand: React.FC = () => {
             value={query}
             onValueChange={onChange}
             startAdorned={
-              search.isLoading && <Loader2 className="animate-spin opacity-50 size-4!" />
+              search.isLoading && <Loader2 className="size-4! animate-spin opacity-50" />
             }
             placeholder={intl.formatMessage({ id: 'FILE_MANAGER.WIDGET.SEARCH.PLACEHOLDER' })}
           />
@@ -141,7 +141,7 @@ const SearchCommand: React.FC = () => {
                   >
                     <File />
                     <span>{renderHighlightedName(file.name, query)}</span>
-                    <Cmd.CommandShortcut className="max-w-96 line-clamp-1 text-ellipsis">
+                    <Cmd.CommandShortcut className="line-clamp-1 max-w-96 text-ellipsis">
                       {renderHighlightedName(file.path, query)}
                     </Cmd.CommandShortcut>
                   </Cmd.CommandItem>
@@ -161,10 +161,10 @@ const SearchCommand: React.FC = () => {
                       onSelect={() => handleOpenFolder(folder.path)}
                     >
                       <Folder />
-                      <span className="line-clamp-1 text-ellipsis text-nowrap">
+                      <span className="line-clamp-1 text-nowrap text-ellipsis">
                         {renderHighlightedName(folder.name, query)}
                       </span>
-                      <Cmd.CommandShortcut className="max-w-96 line-clamp-1 text-ellipsis">
+                      <Cmd.CommandShortcut className="line-clamp-1 max-w-96 text-ellipsis">
                         {renderHighlightedName(folder.path, query)}
                       </Cmd.CommandShortcut>
                     </Cmd.CommandItem>
diff --git a/apps/admin/src/core/FileManager/view/widgets/ViewModeToggle.tsx b/apps/admin/src/core/FileManager/view/widgets/ViewModeToggle.tsx
index 4372481..54a16ca 100644
--- a/apps/admin/src/core/FileManager/view/widgets/ViewModeToggle.tsx
+++ b/apps/admin/src/core/FileManager/view/widgets/ViewModeToggle.tsx
@@ -7,8 +7,8 @@ import { useSettings } from '../../providers/SettingsProvider';
 
 const CheckIcon: React.FC<{ isActive: boolean }> = ({ isActive }) => (
   <Check
-    className={cn('absolute left-2 top-2 h-4 transition-all duration-300 w-0 opacity-0', {
-      'opacity-100 w-4': isActive
+    className={cn('absolute top-2 left-2 h-4 w-0 opacity-0 transition-all duration-300', {
+      'w-4 opacity-100': isActive
     })}
   />
 );
@@ -23,7 +23,7 @@ const Button: React.FC<
     type="button"
     onClick={onClick}
     className={cn(
-      'cursor-pointer text-foreground px-3 py-2 flex items-center justify-center w-14 relative',
+      'text-foreground relative flex w-14 cursor-pointer items-center justify-center px-3 py-2',
       { 'bg-primary/70 text-white': isActive }
     )}
   >
@@ -37,11 +37,11 @@ const ViewModeToggle: React.FC = observer(() => {
   const { changeMode, viewMode } = useSettings();
 
   return (
-    <div className="flex rounded-full bg-transparent border-border border overflow-hidden">
+    <div className="border-border flex overflow-hidden rounded-full border bg-transparent">
       <Button isActive={viewMode === 'list'} onClick={() => changeMode('list')}>
         <AlignJustifyIcon
           className={cn(
-            'transition-transform duration-300 size-4 absolute top-2 left-5',
+            'absolute top-2 left-5 size-4 transition-transform duration-300',
             viewMode === 'list' && 'translate-x-1/2'
           )}
         />
@@ -52,7 +52,7 @@ const ViewModeToggle: React.FC = observer(() => {
       <Button isActive={viewMode === 'grid'} onClick={() => changeMode('grid')}>
         <LayoutGrid
           className={cn(
-            'transition-transform duration-300 size-4 absolute top-2 left-5',
+            'absolute top-2 left-5 size-4 transition-transform duration-300',
             viewMode === 'grid' && 'translate-x-1/2'
           )}
         />
diff --git a/apps/admin/src/core/Permission/view/gates/PermissionPageGate.tsx b/apps/admin/src/core/Permission/view/gates/PermissionPageGate.tsx
index 152cfc0..a49a544 100644
--- a/apps/admin/src/core/Permission/view/gates/PermissionPageGate.tsx
+++ b/apps/admin/src/core/Permission/view/gates/PermissionPageGate.tsx
@@ -23,7 +23,7 @@ export const PermissionPageGate: React.FC<
 
   return (
     fallback ?? (
-      <div className="flex flex-col items-center justify-center grow h-[90%]">
+      <div className="flex h-[90%] grow flex-col items-center justify-center">
         <h1>Access Denied</h1>
       </div>
     )
diff --git a/apps/admin/src/devtools/data/builders/DataTableSourceBuilder.ts b/apps/admin/src/devtools/data/builders/DataTableSourceBuilder.ts
index 86441d5..290610f 100644
--- a/apps/admin/src/devtools/data/builders/DataTableSourceBuilder.ts
+++ b/apps/admin/src/devtools/data/builders/DataTableSourceBuilder.ts
@@ -1,6 +1,6 @@
 import { ModuleAsset } from '#devtools/entities/ModuleAsset';
 import { ModuleGeneratorConfig, ModuleTableColumn, ModuleTableConfig } from '#devtools/entities/ModuleGeneratorTypes';
-import { indentSource, SourceFile, source } from './shared/SourceFile';
+import { indentSource, source, SourceFile } from './shared/SourceFile';
 
 class DataTableSourceBuilder {
   build(data: ModuleGeneratorConfig) {
diff --git a/apps/admin/src/devtools/data/builders/FormSourceBuilder.ts b/apps/admin/src/devtools/data/builders/FormSourceBuilder.ts
index 2bd30f2..db47286 100644
--- a/apps/admin/src/devtools/data/builders/FormSourceBuilder.ts
+++ b/apps/admin/src/devtools/data/builders/FormSourceBuilder.ts
@@ -1,6 +1,6 @@
 import { ModuleFieldType } from '#devtools/entities/ModuleFieldType';
 import { ModuleGridCell, ModuleLayoutConfig } from '#devtools/entities/ModuleGeneratorTypes';
-import { indentSource, SourceFile, source } from './shared/SourceFile';
+import { indentSource, source, SourceFile } from './shared/SourceFile';
 
 class FormSourceBuilder {
   buildComponent(data: ModuleLayoutConfig) {
diff --git a/apps/admin/src/devtools/pages/SandboxFormsPage/components/FormActions.tsx b/apps/admin/src/devtools/pages/SandboxFormsPage/components/FormActions.tsx
index baa30fc..63fcd58 100644
--- a/apps/admin/src/devtools/pages/SandboxFormsPage/components/FormActions.tsx
+++ b/apps/admin/src/devtools/pages/SandboxFormsPage/components/FormActions.tsx
@@ -3,7 +3,7 @@ import { Button } from '#shared/ui/Button';
 
 export default function FormActions<T extends FieldValues>({ form }: { form: UseFormReturn<T> }) {
   return (
-    <div className="flex flex-wrap justify-end gap-2 border-t border-border pt-5">
+    <div className="border-border flex flex-wrap justify-end gap-2 border-t pt-5">
       <Button type="button" variant="outline" onClick={() => form.reset()}>
         Reset
       </Button>
diff --git a/apps/admin/src/devtools/pages/SandboxUIPage/components/ButtonSandbox.tsx b/apps/admin/src/devtools/pages/SandboxUIPage/components/ButtonSandbox.tsx
index a7c150c..690fa1f 100644
--- a/apps/admin/src/devtools/pages/SandboxUIPage/components/ButtonSandbox.tsx
+++ b/apps/admin/src/devtools/pages/SandboxUIPage/components/ButtonSandbox.tsx
@@ -25,7 +25,7 @@ export default function ButtonSandbox() {
       description="Button variants communicate emphasis and intent. Size controls density, appearance changes visual weight, and mode adapts the component for icons, links, and input-like triggers."
       code={button}
     >
-      <div className="grid min-w-0 w-full gap-6">
+      <div className="grid w-full min-w-0 gap-6">
         <ExampleGroup title="Variants">
           {variants.map((variant) => (
             <Button key={variant} variant={variant}>
diff --git a/apps/admin/src/devtools/pages/SandboxUIPage/components/CollapsibleSandbox.tsx b/apps/admin/src/devtools/pages/SandboxUIPage/components/CollapsibleSandbox.tsx
index 0bea3c1..07d2574 100644
--- a/apps/admin/src/devtools/pages/SandboxUIPage/components/CollapsibleSandbox.tsx
+++ b/apps/admin/src/devtools/pages/SandboxUIPage/components/CollapsibleSandbox.tsx
@@ -20,7 +20,7 @@ export default function CollapsibleSandbox() {
             </Button>
           </CollapsibleTrigger>
           <CollapsibleContent>
-            <div className="rounded-md border border-border bg-muted/40 p-4 text-sm text-muted-foreground">
+            <div className="border-border bg-muted/40 text-muted-foreground rounded-md border p-4 text-sm">
               Closed by default. Use this pattern for optional settings.
             </div>
           </CollapsibleContent>
@@ -32,7 +32,7 @@ export default function CollapsibleSandbox() {
             </Button>
           </CollapsibleTrigger>
           <CollapsibleContent>
-            <div className="rounded-md border border-border bg-muted/40 p-4 text-sm text-muted-foreground">
+            <div className="border-border bg-muted/40 text-muted-foreground rounded-md border p-4 text-sm">
               Open by default. The content animates when its state changes.
             </div>
           </CollapsibleContent>
diff --git a/apps/admin/src/devtools/pages/SandboxUIPage/components/ExampleGroup.tsx b/apps/admin/src/devtools/pages/SandboxUIPage/components/ExampleGroup.tsx
index b7d43ad..e35b32d 100644
--- a/apps/admin/src/devtools/pages/SandboxUIPage/components/ExampleGroup.tsx
+++ b/apps/admin/src/devtools/pages/SandboxUIPage/components/ExampleGroup.tsx
@@ -3,8 +3,8 @@ export default function ExampleGroup({
   children
 }: React.PropsWithChildren<{ title: string }>) {
   return (
-    <div className="min-w-0 w-full space-y-3">
-      <h3 className="text-sm font-semibold text-foreground">{title}</h3>
+    <div className="w-full min-w-0 space-y-3">
+      <h3 className="text-foreground text-sm font-semibold">{title}</h3>
       <div className="flex flex-wrap items-center gap-3">{children}</div>
     </div>
   );
diff --git a/apps/admin/src/devtools/pages/SandboxUIPage/components/MarqueeSandbox.tsx b/apps/admin/src/devtools/pages/SandboxUIPage/components/MarqueeSandbox.tsx
index 7e9eb1e..9ba9634 100644
--- a/apps/admin/src/devtools/pages/SandboxUIPage/components/MarqueeSandbox.tsx
+++ b/apps/admin/src/devtools/pages/SandboxUIPage/components/MarqueeSandbox.tsx
@@ -14,12 +14,12 @@ export default function MarqueeSandbox() {
       code={marquee}
       className="flex-nowrap"
     >
-      <div className="min-w-0 w-full space-y-6">
+      <div className="w-full min-w-0 space-y-6">
         <ExampleGroup title="Horizontal with pause on hover">
           <Marquee
             pauseOnHover
             repeat={4}
-            className="w-full min-w-0 max-w-full rounded-lg border border-border [--duration:20s]"
+            className="border-border w-full max-w-full min-w-0 rounded-lg border [--duration:20s]"
           >
             {['React', 'TypeScript', 'Radix UI', 'Tailwind CSS'].map((item) => (
               <Badge key={item} variant="primary" appearance="light" size="lg">
@@ -33,10 +33,10 @@ export default function MarqueeSandbox() {
           <Marquee
             reverse
             repeat={3}
-            className="w-full rounded-lg border border-border [--duration:16s]"
+            className="border-border w-full rounded-lg border [--duration:16s]"
           >
             {['Fast', 'Accessible', 'Composable', 'Consistent'].map((item) => (
-              <div key={item} className="rounded-md bg-muted px-4 py-2 text-sm font-medium">
+              <div key={item} className="bg-muted rounded-md px-4 py-2 text-sm font-medium">
                 {item}
               </div>
             ))}
@@ -48,7 +48,7 @@ export default function MarqueeSandbox() {
             vertical
             pauseOnHover
             repeat={3}
-            className="h-48 w-full max-w-sm rounded-lg border border-border [--duration:12s]"
+            className="border-border h-48 w-full max-w-sm rounded-lg border [--duration:12s]"
           >
             {['Build completed', 'Tests passed', 'Preview deployed'].map((item) => (
               <Alert key={item} variant="success" appearance="light" size="sm">
diff --git a/apps/admin/src/devtools/view/components/ModuleFormGrid/Cell.tsx b/apps/admin/src/devtools/view/components/ModuleFormGrid/Cell.tsx
index 2f4f252..10d5995 100644
--- a/apps/admin/src/devtools/view/components/ModuleFormGrid/Cell.tsx
+++ b/apps/admin/src/devtools/view/components/ModuleFormGrid/Cell.tsx
@@ -34,8 +34,8 @@ export const Cell: React.FC<{
       style={cellStyle}
       className={cn(
         'overflow-hidden',
-        'relative border border-input border-dashed rounded-lg p-4 cursor-pointer transition-all bg-muted hover:bg-primary/10 hover:border-primary/20',
-        isSelected && 'border-solid bg-primary/10 border-primary/20 hover:border-primary/20',
+        'border-input bg-muted hover:bg-primary/10 hover:border-primary/20 relative cursor-pointer rounded-lg border border-dashed p-4 transition-all',
+        isSelected && 'bg-primary/10 border-primary/20 hover:border-primary/20 border-solid',
         disabled && 'pointer-events-none opacity-50'
       )}
       onClick={onClick}
@@ -47,8 +47,8 @@ export const Cell: React.FC<{
         onClick={(e) => e.stopPropagation()}
       />
 
-      <div className="flex flex-col items-center justify-center h-full text-center">
-        {Icon && <Icon className="w-6 h-6 mb-2 text-gray-500" />}
+      <div className="flex h-full flex-col items-center justify-center text-center">
+        {Icon && <Icon className="mb-2 h-6 w-6 text-gray-500" />}
 
         {cell.isEmpty ? (
           <span className="text-sm text-gray-500">
@@ -56,7 +56,7 @@ export const Cell: React.FC<{
           </span>
         ) : (
           <div>
-            <div className="font-medium text-sm text-gray-700">
+            <div className="text-sm font-medium text-gray-700">
               {cell.body?.label || intl.formatMessage({ id: 'DEVTOOLS.MODULES.UNTITLED_FIELD' })}
             </div>
             {dbColumnName && (
@@ -85,7 +85,7 @@ export const Cell: React.FC<{
             variant="ghost"
             className="hover:bg-transparent"
           >
-            <Split className="w-4 h-4" />
+            <Split className="h-4 w-4" />
           </Button>
         )}
         {cell.isEmpty === false && (
@@ -101,7 +101,7 @@ export const Cell: React.FC<{
             appearance="ghost"
             className="hover:bg-transparent"
           >
-            <RotateCcw className="w-4 h-4" />
+            <RotateCcw className="h-4 w-4" />
           </Button>
         )}
       </div>
diff --git a/apps/admin/src/devtools/view/components/ModuleFormGrid/index.tsx b/apps/admin/src/devtools/view/components/ModuleFormGrid/index.tsx
index f2116e1..0604fd8 100644
--- a/apps/admin/src/devtools/view/components/ModuleFormGrid/index.tsx
+++ b/apps/admin/src/devtools/view/components/ModuleFormGrid/index.tsx
@@ -26,7 +26,7 @@ const ModuleFormGrid: React.FC<{
   const mainMergeCellsIds = getMainCellsIds(data);
 
   return (
-    <div style={gridStyle} className="border rounded-lg p-4 bg-background">
+    <div style={gridStyle} className="bg-background rounded-lg border p-4">
       {visibleCells.map((cell) => {
         const isSelected = selectedCells.includes(cell.id);
 
diff --git a/apps/admin/src/devtools/view/components/ModuleGenerateAlert/ModuleGenerateAlert.tsx b/apps/admin/src/devtools/view/components/ModuleGenerateAlert/ModuleGenerateAlert.tsx
index 844bc28..0f9bf73 100755
--- a/apps/admin/src/devtools/view/components/ModuleGenerateAlert/ModuleGenerateAlert.tsx
+++ b/apps/admin/src/devtools/view/components/ModuleGenerateAlert/ModuleGenerateAlert.tsx
@@ -13,11 +13,11 @@ const ModuleGenerateAlert: React.FC<{
         <CardHeader className="flex-nowrap border-b-transparent p-0">
           <span className="mb-auto shrink-0">
             {status === 'loading' && <CloudDownload className="size-5 animate-bounce" />}
-            {status === 'success' && <CheckCircle className="size-5 text-primary" />}
-            {status === 'error' && <OctagonAlert className="size-5 text-destructive" />}
+            {status === 'success' && <CheckCircle className="text-primary size-5" />}
+            {status === 'error' && <OctagonAlert className="text-destructive size-5" />}
           </span>
 
-          <CardHeading className="grow mb-auto">
+          <CardHeading className="mb-auto grow">
             <CardTitle>{title}</CardTitle>
             <CardDescription>{message}</CardDescription>
           </CardHeading>
diff --git a/apps/admin/src/devtools/view/components/ModuleGeneratorDocs/OverviewSection.tsx b/apps/admin/src/devtools/view/components/ModuleGeneratorDocs/OverviewSection.tsx
index 846dbf1..9f6a851 100644
--- a/apps/admin/src/devtools/view/components/ModuleGeneratorDocs/OverviewSection.tsx
+++ b/apps/admin/src/devtools/view/components/ModuleGeneratorDocs/OverviewSection.tsx
@@ -14,7 +14,7 @@ export default function OverviewSection() {
         <div className="grid justify-center">
           <img
             src={toAbsoluteUrl('/public/media/illustrations/11.svg')}
-            className="dark:hidden h-42 max-h-42"
+            className="h-42 max-h-42 dark:hidden"
             alt="Module generator illustration"
           />
           <img
diff --git a/apps/admin/src/devtools/view/components/SandboxShowcase.tsx b/apps/admin/src/devtools/view/components/SandboxShowcase.tsx
index 3cff1df..b9d3095 100644
--- a/apps/admin/src/devtools/view/components/SandboxShowcase.tsx
+++ b/apps/admin/src/devtools/view/components/SandboxShowcase.tsx
@@ -1,11 +1,11 @@
 import { Code2 } from 'lucide-react';
 import React from 'react';
 import { useIntl } from 'react-intl';
+import { cn } from '@crux-kit/utils';
 import { Button } from '#shared/ui/Button';
 import { Card, CardContent, CardDescription, CardHeader, CardHeading, CardTitle, CardToolbar } from '#shared/ui/Card';
 import { CopyButton } from '#shared/ui/CopyButton';
 import { Sheet, SheetBody, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from '#shared/ui/Sheet';
-import { cn } from '@crux-kit/utils';
 
 const SandboxShowcase: React.FC<
   React.PropsWithChildren<{
@@ -39,7 +39,7 @@ const SandboxShowcase: React.FC<
                 </SheetDescription>
               </SheetHeader>
               <SheetBody className="min-h-0 overflow-auto">
-                <div className="relative rounded-lg border border-border bg-muted/50">
+                <div className="border-border bg-muted/50 relative rounded-lg border">
                   <CopyButton copyText={code} className="absolute inset-e-2 top-2" />
                   <pre className="overflow-x-auto p-4 pe-12 text-xs leading-relaxed">
                     <code>{code}</code>
diff --git a/apps/admin/src/devtools/view/forms/ModuleGeneratorForm/Component.tsx b/apps/admin/src/devtools/view/forms/ModuleGeneratorForm/Component.tsx
index 1025079..44d284e 100644
--- a/apps/admin/src/devtools/view/forms/ModuleGeneratorForm/Component.tsx
+++ b/apps/admin/src/devtools/view/forms/ModuleGeneratorForm/Component.tsx
@@ -26,7 +26,7 @@ export const ModuleGeneratorForm: React.FC<{
   });
 
   return (
-    <div className="w-full mx-auto">
+    <div className="mx-auto w-full">
       <Form {...form}>
         <FormElement onSubmit={handleSubmit}>
           <MetadataSection />
@@ -37,7 +37,7 @@ export const ModuleGeneratorForm: React.FC<{
 
           <Separator />
 
-          <div className="flex gap-4 justify-between">
+          <div className="flex justify-between gap-4">
             <ToDocsButton to="/devtools/module-generator/docs?section=tutorial">
               {intl.formatMessage({ id: 'DEVTOOLS.MODULE_GENERATOR_DOCS' })}
             </ToDocsButton>
diff --git a/apps/admin/src/devtools/view/forms/ModuleGeneratorForm/sections/DataTableSection/components/EditColumnButton.tsx b/apps/admin/src/devtools/view/forms/ModuleGeneratorForm/sections/DataTableSection/components/EditColumnButton.tsx
index e14f56e..486a725 100644
--- a/apps/admin/src/devtools/view/forms/ModuleGeneratorForm/sections/DataTableSection/components/EditColumnButton.tsx
+++ b/apps/admin/src/devtools/view/forms/ModuleGeneratorForm/sections/DataTableSection/components/EditColumnButton.tsx
@@ -2,11 +2,11 @@ import { Info, LetterText } from 'lucide-react';
 import React from 'react';
 import { useIntl } from 'react-intl';
 import { useDisclosure } from '@crux-kit/hooks';
+import { Alert, AlertContent, AlertDescription, AlertIcon, AlertTitle } from '#shared/ui/Alert';
 import { Badge } from '#shared/ui/Badge';
 import { Button } from '#shared/ui/Button';
 import { Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '#shared/ui/Dialog';
 import { DropdownMenuItem } from '#shared/ui/DropdownMenu';
-import { Alert, AlertContent, AlertDescription, AlertIcon, AlertTitle } from '#shared/ui/Alert';
 import { Input } from '#shared/ui/Input';
 import { Label } from '#shared/ui/Label';
 import { Switch } from '#shared/ui/Switch';
@@ -99,9 +99,9 @@ const Form: React.FC<{
 
   return (
     <React.Fragment>
-      <DialogBody className="text-sm space-y-3">
+      <DialogBody className="space-y-3 text-sm">
         <div className="flex flex-col gap-2">
-          <Label className="font-medium text-foreground" htmlFor="column-label">
+          <Label className="text-foreground font-medium" htmlFor="column-label">
             {intl.formatMessage({ id: 'DEVTOOLS.MODULES.LABEL' })}
           </Label>
           <Input
@@ -113,7 +113,7 @@ const Form: React.FC<{
           />
         </div>
 
-        <div className="flex items-center justify-between gap-2 grow">
+        <div className="flex grow items-center justify-between gap-2">
           <div className="flex flex-col gap-1">
             <Label>
               {intl.formatMessage({ id: 'DEVTOOLS.MODULES.MANUAL.ADD_BADGE' })}
@@ -129,7 +129,7 @@ const Form: React.FC<{
           <Switch size="sm" checked={badge} onCheckedChange={setBadge} />
         </div>
 
-        <div className="flex items-center justify-between gap-2 grow">
+        <div className="flex grow items-center justify-between gap-2">
           <div className="flex flex-col gap-1">
             <Label>{intl.formatMessage({ id: 'DEVTOOLS.MODULES.MANUAL.ADD_SORTING' })}</Label>
             <div className="-mt-0.5 text-xs font-normal">
@@ -140,7 +140,7 @@ const Form: React.FC<{
           <Switch size="sm" checked={sort} onCheckedChange={setSort} />
         </div>
 
-        <div className="flex items-center justify-between gap-2 grow">
+        <div className="flex grow items-center justify-between gap-2">
           <div className="flex flex-col gap-1">
             <Label>{intl.formatMessage({ id: 'DEVTOOLS.MODULES.MANUAL.ADD_COPY_BUTTON' })}</Label>
             <div className="-mt-0.5 text-xs font-normal">
diff --git a/apps/admin/src/devtools/view/forms/ModuleGeneratorForm/sections/DataTableSection/index.tsx b/apps/admin/src/devtools/view/forms/ModuleGeneratorForm/sections/DataTableSection/index.tsx
index f74cd3f..4ef7c24 100644
--- a/apps/admin/src/devtools/view/forms/ModuleGeneratorForm/sections/DataTableSection/index.tsx
+++ b/apps/admin/src/devtools/view/forms/ModuleGeneratorForm/sections/DataTableSection/index.tsx
@@ -62,7 +62,7 @@ const DataTableSection: React.FC = () => {
             />
           ),
           cell: () => (
-            <div className="flex items-center gap-2 justify-end">
+            <div className="flex items-center justify-end gap-2">
               {showEditButton && (
                 <EditButton cols={cols} grid={grid} rows={rows} size={dialogSize} />
               )}
diff --git a/apps/admin/src/devtools/view/forms/ModuleGeneratorForm/sections/FormSection/components/FormToolbar.tsx b/apps/admin/src/devtools/view/forms/ModuleGeneratorForm/sections/FormSection/components/FormToolbar.tsx
index ccd58bc..60fa6dd 100644
--- a/apps/admin/src/devtools/view/forms/ModuleGeneratorForm/sections/FormSection/components/FormToolbar.tsx
+++ b/apps/admin/src/devtools/view/forms/ModuleGeneratorForm/sections/FormSection/components/FormToolbar.tsx
@@ -56,9 +56,9 @@ const FormToolbar: React.FC<{
   const intl = useIntl();
 
   return (
-    <div className="flex flex-wrap items-center gap-2 p-4 bg-muted rounded-lg border">
+    <div className="bg-muted flex flex-wrap items-center gap-2 rounded-lg border p-4">
       <div className="flex items-center gap-1">
-        <Rows className="w-4 h-4" />
+        <Rows className="h-4 w-4" />
         <span className="inline-block w-5 text-center">{rows}</span>
         <div>
           <Button
@@ -69,7 +69,7 @@ const FormToolbar: React.FC<{
             mode="icon"
             variant="ghost"
           >
-            <Plus className="w-4 h-4" />
+            <Plus className="h-4 w-4" />
           </Button>
           <Button
             type="button"
@@ -79,7 +79,7 @@ const FormToolbar: React.FC<{
             variant="ghost"
             disabled={!canRemoveRow}
           >
-            <Minus className="w-4 h-4" />
+            <Minus className="h-4 w-4" />
           </Button>
         </div>
       </div>
@@ -87,7 +87,7 @@ const FormToolbar: React.FC<{
       <Separator orientation="vertical" className="h-6" />
 
       <div className="flex items-center gap-1">
-        <Columns className="w-4 h-4" />
+        <Columns className="h-4 w-4" />
         <span className="inline-block w-5 text-center">{cols}</span>
         <div>
           <Button
@@ -98,7 +98,7 @@ const FormToolbar: React.FC<{
             variant="ghost"
             onClick={onAddColumn}
           >
-            <Plus className="w-4 h-4" />
+            <Plus className="h-4 w-4" />
           </Button>
           <Button
             type="button"
@@ -108,7 +108,7 @@ const FormToolbar: React.FC<{
             disabled={!canRemoveColumn}
             onClick={onRemoveColumn}
           >
-            <Minus className="w-4 h-4" />
+            <Minus className="h-4 w-4" />
           </Button>
         </div>
       </div>
@@ -116,31 +116,31 @@ const FormToolbar: React.FC<{
       <Separator orientation="vertical" className="h-6" />
 
       <Button type="button" size="sm" variant="mono" disabled={!canSwap} onClick={onSwap}>
-        <ArrowUpDown className="w-4 h-4 mr-1" />
+        <ArrowUpDown className="mr-1 h-4 w-4" />
         {intl.formatMessage({ id: 'DEVTOOLS.ACTION.SWAP' })}
       </Button>
 
       <Button type="button" size="sm" variant="outline" disabled={!canMerge} onClick={onMergeCells}>
-        <Merge className="w-4 h-4 mr-1" />
+        <Merge className="mr-1 h-4 w-4" />
         {intl.formatMessage({ id: 'DEVTOOLS.ACTION.MERGE' })}
         <span className="inline-block w-5">({selectedCount})</span>
       </Button>
 
       <Button type="button" size="sm" variant="outline" disabled={!canSplit} onClick={onSplitCell}>
-        <Split className="w-4 h-4 mr-1" />
+        <Split className="mr-1 h-4 w-4" />
         {intl.formatMessage({ id: 'DEVTOOLS.ACTION.SPLIT' })}
       </Button>
 
       <Separator orientation="vertical" className="h-6" />
 
       <Button type="button" onClick={onReset} size="sm" variant="outline">
-        <RotateCcw className="w-4 h-4 mr-1" />
+        <RotateCcw className="mr-1 h-4 w-4" />
         {intl.formatMessage({ id: 'DEVTOOLS.ACTION.RESET' })}
       </Button>
 
       <FormPreviewTrigger cols={cols} rows={rows} size={dialogSize} grid={grid}>
         <Button variant="dashed" type="button" size="sm">
-          <View className="w-4 h-4 mr-1" />
+          <View className="mr-1 h-4 w-4" />
           {intl.formatMessage({ id: 'DEVTOOLS.ACTION.PREVIEW' })}
         </Button>
       </FormPreviewTrigger>
diff --git a/apps/admin/src/devtools/view/forms/ModuleGeneratorForm/sections/FormSection/components/ManageFieldForm.tsx b/apps/admin/src/devtools/view/forms/ModuleGeneratorForm/sections/FormSection/components/ManageFieldForm.tsx
index 22a6882..23e3de2 100644
--- a/apps/admin/src/devtools/view/forms/ModuleGeneratorForm/sections/FormSection/components/ManageFieldForm.tsx
+++ b/apps/admin/src/devtools/view/forms/ModuleGeneratorForm/sections/FormSection/components/ManageFieldForm.tsx
@@ -90,7 +90,7 @@ const ManageFieldForm: React.FC<{
               <FormItem className="w-full">
                 <FormLabel>
                   {intl.formatMessage({ id: 'DEVTOOLS.MODULES.COLUMN' })}
-                  <span className="text-red-500 ml-1">*</span>
+                  <span className="ml-1 text-red-500">*</span>
                 </FormLabel>
                 <Select
                   onValueChange={field.onChange}
@@ -158,9 +158,9 @@ const ManageFieldForm: React.FC<{
           )}
 
           {showOptionsField && (
-            <div className="space-y-2 overflow-auto max-h-48">
+            <div className="max-h-48 space-y-2 overflow-auto">
               {fields.map((field, index) => (
-                <div className="flex gap-2.5 items-start justify-between" key={field.id}>
+                <div className="flex items-start justify-between gap-2.5" key={field.id}>
                   <div className="flex grow items-start gap-2.5">
                     <span className="w-4 leading-8.5">{index + 1}</span>
                     <InputText
@@ -204,7 +204,7 @@ const ManageFieldForm: React.FC<{
               { id: 'DEVTOOLS.MODULES.ADD_RED_STAR_MESSAGE' },
               {
                 children: (
-                  <span key={uid()} className="text-red-500 mx-1">
+                  <span key={uid()} className="mx-1 text-red-500">
                     *
                   </span>
                 )
diff --git a/apps/admin/src/devtools/view/forms/ModuleGeneratorForm/sections/MetadataSection/index.tsx b/apps/admin/src/devtools/view/forms/ModuleGeneratorForm/sections/MetadataSection/index.tsx
index edb76ff..c518f29 100644
--- a/apps/admin/src/devtools/view/forms/ModuleGeneratorForm/sections/MetadataSection/index.tsx
+++ b/apps/admin/src/devtools/view/forms/ModuleGeneratorForm/sections/MetadataSection/index.tsx
@@ -91,7 +91,7 @@ const MetadataSection: React.FC = () => {
                   {...field}
                   id="name"
                   type="string"
-                  className="tracking-widest font-medium placeholder:tracking-normal placeholder:font-normal"
+                  className="font-medium tracking-widest placeholder:font-normal placeholder:tracking-normal"
                   placeholder={intl.formatMessage({
                     id: 'DEVTOOLS.MODULES.ENTER_MODULE_NAME'
                   })}
@@ -123,7 +123,7 @@ const MetadataSection: React.FC = () => {
               :
             </FormLabel>
 
-            <div className={`grid grid-cols-1 md:grid-cols-2 gap-4 ${!table && 'opacity-50'}`}>
+            <div className={`grid grid-cols-1 gap-4 md:grid-cols-2 ${!table && 'opacity-50'}`}>
               {GENERATE_OPTIONS.map((item, index) => (
                 <FormField
                   key={index}
diff --git a/apps/admin/src/devtools/view/layouts/DevtoolsLayout/MegaMenuItem.tsx b/apps/admin/src/devtools/view/layouts/DevtoolsLayout/MegaMenuItem.tsx
index d5a177a..a1fadc3 100644
--- a/apps/admin/src/devtools/view/layouts/DevtoolsLayout/MegaMenuItem.tsx
+++ b/apps/admin/src/devtools/view/layouts/DevtoolsLayout/MegaMenuItem.tsx
@@ -32,7 +32,7 @@ export const MegaMenuItem: React.FC<
         {title}
       </NavigationMenuTrigger>
       <NavigationMenuContent className="p-0">
-        <div className={cn('w-[calc(100vw-2rem)] gap-0 max-w-2xl')}>
+        <div className={cn('w-[calc(100vw-2rem)] max-w-2xl gap-0')}>
           <div className="pt-4 pb-2 lg:p-7.5">
             <div
               className={cn(
@@ -44,7 +44,7 @@ export const MegaMenuItem: React.FC<
             >
               {columns.map((column, index) => (
                 <div className="flex flex-col" key={index}>
-                  <h3 className="text-sm text-foreground font-semibold leading-none ps-2.5 mb-2 lg:mb-4">
+                  <h3 className="text-foreground mb-2 ps-2.5 text-sm leading-none font-semibold lg:mb-4">
                     {column.heading}
                   </h3>
                   <div className="grid gap-0">
diff --git a/apps/admin/src/devtools/view/layouts/DevtoolsLayout/MegaMenuItemFooter.tsx b/apps/admin/src/devtools/view/layouts/DevtoolsLayout/MegaMenuItemFooter.tsx
index 058c970..edf14cc 100644
--- a/apps/admin/src/devtools/view/layouts/DevtoolsLayout/MegaMenuItemFooter.tsx
+++ b/apps/admin/src/devtools/view/layouts/DevtoolsLayout/MegaMenuItemFooter.tsx
@@ -9,10 +9,10 @@ export const MegaMenuItemFooter: React.FC<{
   bottonTitle: string;
 }> = ({ bottonTitle, desc, title, to }) => {
   return (
-    <div className="flex flex-wrap items-center lg:justify-between rounded-xl lg:rounded-t-none border border-border lg:border-0 lg:border-t lg:border-t-border px-4 py-4 lg:px-7.5 lg:py-5 gap-2.5 bg-muted/50">
+    <div className="border-border lg:border-t-border bg-muted/50 flex flex-wrap items-center gap-2.5 rounded-xl border px-4 py-4 lg:justify-between lg:rounded-t-none lg:border-0 lg:border-t lg:px-7.5 lg:py-5">
       <div className="flex flex-col gap-1.5">
-        <div className="text-base font-semibold text-mono leading-none">{title}</div>
-        <div className="text-sm fomt-medium text-secondary-foreground">{desc}</div>
+        <div className="text-mono text-base leading-none font-semibold">{title}</div>
+        <div className="fomt-medium text-secondary-foreground text-sm">{desc}</div>
       </div>
 
       <Button variant="mono" asChild>
diff --git a/apps/admin/src/devtools/view/layouts/DevtoolsLayout/MegaMenuLink.tsx b/apps/admin/src/devtools/view/layouts/DevtoolsLayout/MegaMenuLink.tsx
index 9ffd594..382c359 100644
--- a/apps/admin/src/devtools/view/layouts/DevtoolsLayout/MegaMenuLink.tsx
+++ b/apps/admin/src/devtools/view/layouts/DevtoolsLayout/MegaMenuLink.tsx
@@ -23,7 +23,7 @@ export const MegaMenuLink: React.FC<
         data-active={isActive}
         to={to}
         className={cn(
-          'flex flex-row items-center gap-2.5 px-2.5 py-2 rounded-md hover:bg-accent/50 text-sm',
+          'hover:bg-accent/50 flex flex-row items-center gap-2.5 rounded-md px-2.5 py-2 text-sm',
           '[&_svg]:text-muted-foreground hover:[&_svg]:text-primary [&[data-active=true]_svg]:text-primary'
         )}
       >
diff --git a/apps/admin/src/devtools/view/layouts/DevtoolsLayout/index.tsx b/apps/admin/src/devtools/view/layouts/DevtoolsLayout/index.tsx
index e98ba63..a469542 100644
--- a/apps/admin/src/devtools/view/layouts/DevtoolsLayout/index.tsx
+++ b/apps/admin/src/devtools/view/layouts/DevtoolsLayout/index.tsx
@@ -15,15 +15,15 @@ export default function DevtoolsLayout() {
   return (
     <React.Fragment>
       <Container>
-        <header className="flex items-center gap-1 w-full pb-5">
-          <div className="flex items-center gap-2 w-full">
+        <header className="flex w-full items-center gap-1 pb-5">
+          <div className="flex w-full items-center gap-2">
             <DevtoolsLogo />
-            <h1 className="font-medium text-lg text-mono">
+            <h1 className="text-mono text-lg font-medium">
               {intl.formatMessage({ id: 'DEVTOOLS.TITLE' })}
             </h1>
           </div>
-          <div className="flex items-center gap-2 shrink-0">
-            <div className="flex items-stretch gap-1.5 lg:gap-10 grow">
+          <div className="flex shrink-0 items-center gap-2">
+            <div className="flex grow items-stretch gap-1.5 lg:gap-10">
               <NavigationMenu viewportClassName="right-0 left-auto max-w-[calc(100vw-2rem)]">
                 <NavigationMenuList className="gap-7.5">
                   <MegaMenuItem
diff --git a/apps/admin/src/devtools/view/layouts/SandboxLayout.tsx b/apps/admin/src/devtools/view/layouts/SandboxLayout.tsx
index f32c0e4..eec2452 100644
--- a/apps/admin/src/devtools/view/layouts/SandboxLayout.tsx
+++ b/apps/admin/src/devtools/view/layouts/SandboxLayout.tsx
@@ -6,12 +6,12 @@ export default function SandboxLayout() {
 
   return (
     <div className="space-y-6">
-      <div className="flex flex-col gap-4 border-b border-border pb-5 sm:flex-row sm:items-end sm:justify-between">
+      <div className="border-border flex flex-col gap-4 border-b pb-5 sm:flex-row sm:items-end sm:justify-between">
         <div className="space-y-1">
           <h2 className="text-2xl font-semibold tracking-tight">
             {intl.formatMessage({ id: 'DEVTOOLS.SANDBOX.TITLE' })}
           </h2>
-          <p className="max-w-2xl text-sm text-muted-foreground">
+          <p className="text-muted-foreground max-w-2xl text-sm">
             {intl.formatMessage({ id: 'DEVTOOLS.SANDBOX.DESCRIPTION' })}
           </p>
         </div>
diff --git a/apps/admin/src/devtools/view/ui/CentralSeparator.tsx b/apps/admin/src/devtools/view/ui/CentralSeparator.tsx
index e4e3129..cc28fb1 100644
--- a/apps/admin/src/devtools/view/ui/CentralSeparator.tsx
+++ b/apps/admin/src/devtools/view/ui/CentralSeparator.tsx
@@ -3,9 +3,9 @@ import { Separator } from '#shared/ui/Separator';
 
 const CentralSeparator: React.FC<React.PropsWithChildren> = ({ children }) => {
   return (
-    <div className="flex gap-4 items-center w-full mb-2">
+    <div className="mb-2 flex w-full items-center gap-4">
       <Separator className="w-auto grow" />
-      <h3 className="shrink-0 text-md">{children}</h3>
+      <h3 className="text-md shrink-0">{children}</h3>
       <Separator className="w-auto grow" />
     </div>
   );
diff --git a/apps/admin/src/devtools/view/ui/DevtoolsLogo.tsx b/apps/admin/src/devtools/view/ui/DevtoolsLogo.tsx
index ef2b650..288411c 100644
--- a/apps/admin/src/devtools/view/ui/DevtoolsLogo.tsx
+++ b/apps/admin/src/devtools/view/ui/DevtoolsLogo.tsx
@@ -11,13 +11,13 @@ const DevtoolsLogo: React.FC<React.HTMLAttributes<HTMLImageElement>> = ({
     <React.Fragment>
       <img
         src={toAbsoluteUrl('/media/app/devtools-dark.svg')}
-        className={cn('dark:hidden size-8.5', className)}
+        className={cn('size-8.5 dark:hidden', className)}
         alt="File Manager"
         {...props}
       />
       <img
         src={toAbsoluteUrl('/media/app/devtools-light.svg')}
-        className={cn('hidden dark:inline-block size-8.5', className)}
+        className={cn('hidden size-8.5 dark:inline-block', className)}
         alt="File Manager"
         {...props}
       />
diff --git a/apps/admin/src/devtools/view/ui/OffsetSeparator.tsx b/apps/admin/src/devtools/view/ui/OffsetSeparator.tsx
index 28d40b5..4a89ac4 100644
--- a/apps/admin/src/devtools/view/ui/OffsetSeparator.tsx
+++ b/apps/admin/src/devtools/view/ui/OffsetSeparator.tsx
@@ -6,9 +6,9 @@ const OffsetSeparator: React.FC<React.PropsWithChildren & { action?: React.React
   action
 }) => {
   return (
-    <div className="flex gap-4 items-center w-full">
+    <div className="flex w-full items-center gap-4">
       <Separator className="w-10 shrink-0" />
-      <h3 className="shrink-0 text-md">{children}</h3>
+      <h3 className="text-md shrink-0">{children}</h3>
       <Separator className="w-auto grow" />
       {action}
     </div>
@@ -19,9 +19,9 @@ export default OffsetSeparator;
 
 export const CentralSeparator: React.FC<React.PropsWithChildren> = ({ children }) => {
   return (
-    <div className="flex gap-4 items-center w-full mb-2">
+    <div className="mb-2 flex w-full items-center gap-4">
       <Separator className="w-auto grow" />
-      <h3 className="shrink-0 text-md">{children}</h3>
+      <h3 className="text-md shrink-0">{children}</h3>
       <Separator className="w-auto grow" />
     </div>
   );
diff --git a/apps/admin/src/devtools/view/widgets/VersionManager/index.tsx b/apps/admin/src/devtools/view/widgets/VersionManager/index.tsx
index 641a3dd..85526e1 100644
--- a/apps/admin/src/devtools/view/widgets/VersionManager/index.tsx
+++ b/apps/admin/src/devtools/view/widgets/VersionManager/index.tsx
@@ -27,16 +27,16 @@ const VersionManager: React.FC<VersionManagerProps> = ({
 
   return (
     <Container>
-      <div className="max-w-2xl mx-auto space-y-8">
+      <div className="mx-auto max-w-2xl space-y-8">
         <Card.Card>
           <Card.CardContent className="space-y-1">
-            <h2 className="text-sm font-medium text-muted-foreground">
+            <h2 className="text-muted-foreground text-sm font-medium">
               {intl.formatMessage({
                 id: 'DEVTOOLS.VERSION_MANAGER.CURRENT_VERSION'
               })}
             </h2>
             <div className="flex items-center gap-3">
-              <span className="text-4xl font-bold text-foreground tracking-widest">
+              <span className="text-foreground text-4xl font-bold tracking-widest">
                 {currentVersion}
               </span>
               <CheckCircle2 className="size-5 text-green-500" />
@@ -45,9 +45,9 @@ const VersionManager: React.FC<VersionManagerProps> = ({
         </Card.Card>
 
         {hasUpdate && (
-          <Card.Card className="bg-primary/10 border border-primary/20 space-y-2">
-            <Card.CardHeader className="pt-5 gap-5 border-b-0">
-              <AlertCircle className="size-5 text-primary mb-auto shrink-0" />
+          <Card.Card className="bg-primary/10 border-primary/20 space-y-2 border">
+            <Card.CardHeader className="gap-5 border-b-0 pt-5">
+              <AlertCircle className="text-primary mb-auto size-5 shrink-0" />
               <Card.CardHeading className="grow">
                 <Card.CardTitle className="text-primary">
                   {intl.formatMessage({
@@ -63,29 +63,29 @@ const VersionManager: React.FC<VersionManagerProps> = ({
             </Card.CardHeader>
             <Card.CardContent className="flex items-start gap-5">
               <div>
-                <p className="text-xs text-primary mb-1">
+                <p className="text-primary mb-1 text-xs">
                   {intl.formatMessage({
                     id: 'DEVTOOLS.VERSION_MANAGER.LATEST_VERSION'
                   })}
                 </p>
-                <p className="text-lg font-semibold text-primary tracking-widest">
+                <p className="text-primary text-lg font-semibold tracking-widest">
                   {latestVersion}
                 </p>
               </div>
               <div>
-                <p className="text-xs text-primary mb-1">
+                <p className="text-primary mb-1 text-xs">
                   {intl.formatMessage({
                     id: 'DEVTOOLS.VERSION_MANAGER.RELEASE_TYPE'
                   })}
                 </p>
-                <p className="text-lg font-semibold text-primary tracking-widest">Minor</p>
+                <p className="text-primary text-lg font-semibold tracking-widest">Minor</p>
               </div>
             </Card.CardContent>
           </Card.Card>
         )}
 
         <Card.Card>
-          <Card.CardHeader className="pt-5 border-b-0">
+          <Card.CardHeader className="border-b-0 pt-5">
             <Card.CardHeading>
               <Card.CardTitle>
                 {intl.formatMessage({
@@ -134,7 +134,7 @@ const VersionManager: React.FC<VersionManagerProps> = ({
         {lastUpdated && (
           <Card.Card>
             <Card.CardContent>
-              <p className="text-sm text-muted-foreground">
+              <p className="text-muted-foreground text-sm">
                 {intl.formatMessage(
                   { id: 'DEVTOOLS.VERSION_MANAGER.LAST_UPDATED_DATE' },
                   {
@@ -150,22 +150,22 @@ const VersionManager: React.FC<VersionManagerProps> = ({
           </Card.Card>
         )}
 
-        <Card.Card className="bg-muted/50 border border-border p-6 space-y-4">
-          <h3 className="font-semibold text-foreground">
+        <Card.Card className="bg-muted/50 border-border space-y-4 border p-6">
+          <h3 className="text-foreground font-semibold">
             {intl.formatMessage({
               id: 'DEVTOOLS.VERSION_MANAGER.SYSTEM_INFORMATION'
             })}
           </h3>
           <div className="space-y-3">
-            <div className="flex justify-between items-center text-sm">
+            <div className="flex items-center justify-between text-sm">
               <span className="text-muted-foreground">
                 {intl.formatMessage({
                   id: 'DEVTOOLS.VERSION_MANAGER.INSTALLATION_PATH'
                 })}
               </span>
-              <span className="font-mono text-foreground">/src/devtools</span>
+              <span className="text-foreground font-mono">/src/devtools</span>
             </div>
-            <div className="flex justify-between items-center text-sm">
+            <div className="flex items-center justify-between text-sm">
               <span className="text-muted-foreground">
                 {intl.formatMessage({
                   id: 'DEVTOOLS.VERSION_MANAGER.ENVIRONMENT'
@@ -173,7 +173,7 @@ const VersionManager: React.FC<VersionManagerProps> = ({
               </span>
               <span className="text-foreground capitalize">{environment}</span>
             </div>
-            <div className="flex justify-between items-center text-sm">
+            <div className="flex items-center justify-between text-sm">
               <span className="text-muted-foreground">
                 {intl.formatMessage({
                   id: 'DEVTOOLS.VERSION_MANAGER.LAST_CHECK'
diff --git a/apps/admin/src/modules/_template/view/widgets/DataTable.tsx b/apps/admin/src/modules/_template/view/widgets/DataTable.tsx
index 16b2389..0dab670 100755
--- a/apps/admin/src/modules/_template/view/widgets/DataTable.tsx
+++ b/apps/admin/src/modules/_template/view/widgets/DataTable.tsx
@@ -121,7 +121,7 @@ export const DataTable = () => {
           const id = data.id;
 
           return (
-            <div className="flex items-center gap-2 justify-end">
+            <div className="flex items-center justify-end gap-2">
               <PermissionGate requiredPermissions={MODULE_PERMISSION_UPDATE}>
                 <ManageTrigger title={`Edit ${MODULE_NAME_LABEL}`} id={id}>
                   <Button variant="secondary" size="sm" shape="default" mode="icon">
diff --git a/apps/admin/src/providers/ThemeProvider.tsx b/apps/admin/src/providers/ThemeProvider.tsx
index ea6c59e..46a2d88 100755
--- a/apps/admin/src/providers/ThemeProvider.tsx
+++ b/apps/admin/src/providers/ThemeProvider.tsx
@@ -1,7 +1,7 @@
 'use client';
 
-import * as React from 'react';
 import { ThemeProvider as NextThemesProvider } from 'next-themes';
+import * as React from 'react';
 
 export default function ThemeProvider({
   children
diff --git a/apps/admin/src/shared/editors/Tinymce/components/Toolbar/code.tsx b/apps/admin/src/shared/editors/Tinymce/components/Toolbar/code.tsx
index 8a625b6..cd6c928 100755
--- a/apps/admin/src/shared/editors/Tinymce/components/Toolbar/code.tsx
+++ b/apps/admin/src/shared/editors/Tinymce/components/Toolbar/code.tsx
@@ -85,7 +85,7 @@ export const Insert: React.FC = () => {
           <CodeIcon />
         </Button>
       </DialogTrigger>
-      <DialogContent className="max-w-3xl w-full">
+      <DialogContent className="w-full max-w-3xl">
         <DialogHeader>
           <DialogTitle>Insert/Edit Code</DialogTitle>
           <DialogDescription className="sr-only">
diff --git a/apps/admin/src/shared/editors/Tinymce/components/Toolbar/color.tsx b/apps/admin/src/shared/editors/Tinymce/components/Toolbar/color.tsx
index 9d89676..805a704 100755
--- a/apps/admin/src/shared/editors/Tinymce/components/Toolbar/color.tsx
+++ b/apps/admin/src/shared/editors/Tinymce/components/Toolbar/color.tsx
@@ -17,7 +17,7 @@ export const Forecolor: React.FC = () => {
 
   return (
     <ColorPicker
-      className="relative w-7 text-center justify-center"
+      className="relative w-7 justify-center text-center"
       size="sm"
       mode="icon"
       title="Text Color"
@@ -26,7 +26,7 @@ export const Forecolor: React.FC = () => {
     >
       <Baseline />
       <div
-        className="h-0.5 absolute bottom-1 left-1 right-1"
+        className="absolute right-1 bottom-1 left-1 h-0.5"
         style={{ backgroundColor: formats.forecolor }}
       />
     </ColorPicker>
@@ -47,7 +47,7 @@ export const Backcolor: React.FC = () => {
 
   return (
     <ColorPicker
-      className="relative w-7 text-center justify-center"
+      className="relative w-7 justify-center text-center"
       size="sm"
       mode="icon"
       title="Background Color"
@@ -56,7 +56,7 @@ export const Backcolor: React.FC = () => {
     >
       <Paintbrush />
       <div
-        className="h-0.5 absolute bottom-1 left-1 right-1"
+        className="absolute right-1 bottom-1 left-1 h-0.5"
         style={{ backgroundColor: formats.backcolor }}
       />
     </ColorPicker>
diff --git a/apps/admin/src/shared/editors/Tinymce/components/Toolbar/image.tsx b/apps/admin/src/shared/editors/Tinymce/components/Toolbar/image.tsx
index d14fef1..a57fd64 100755
--- a/apps/admin/src/shared/editors/Tinymce/components/Toolbar/image.tsx
+++ b/apps/admin/src/shared/editors/Tinymce/components/Toolbar/image.tsx
@@ -148,7 +148,7 @@ const DialogForm: React.FC<{ onSubmit: () => void }> = ({ onSubmit }) => {
                 <FormItem className="w-full">
                   <FormLabel>
                     Image URL
-                    <span className="text-red-500 ml-1">*</span>
+                    <span className="ml-1 text-red-500">*</span>
                   </FormLabel>
                   <FormControl>
                     <InputWrapper>
diff --git a/apps/admin/src/shared/editors/Tinymce/components/Toolbar/link.tsx b/apps/admin/src/shared/editors/Tinymce/components/Toolbar/link.tsx
index 332a1d1..850a719 100755
--- a/apps/admin/src/shared/editors/Tinymce/components/Toolbar/link.tsx
+++ b/apps/admin/src/shared/editors/Tinymce/components/Toolbar/link.tsx
@@ -60,7 +60,7 @@ export const Insert: React.FC = () => {
     <Dialog open={isOpen} onOpenChange={toggle}>
       <DialogTrigger asChild>
         <Button type="button" size="sm" mode="icon" variant="ghost" title="Link">
-          <Link className="w-4 h-4" />
+          <Link className="h-4 w-4" />
         </Button>
       </DialogTrigger>
       <DialogContent className="w-96">
diff --git a/apps/admin/src/shared/editors/Tinymce/components/Toolbar/toolbar.tsx b/apps/admin/src/shared/editors/Tinymce/components/Toolbar/toolbar.tsx
index eabec7d..d7cdbdc 100755
--- a/apps/admin/src/shared/editors/Tinymce/components/Toolbar/toolbar.tsx
+++ b/apps/admin/src/shared/editors/Tinymce/components/Toolbar/toolbar.tsx
@@ -43,7 +43,7 @@ export const Toolbar: React.FC<{
   return (
     <div className="flex flex-col gap-1">
       {layout.map((row, index) => (
-        <div key={index} className="flex flex-wrap gap-x-2 gap-y-1 items-center h-full">
+        <div key={index} className="flex h-full flex-wrap items-center gap-x-2 gap-y-1">
           {renderToolbar(row)}
         </div>
       ))}
diff --git a/apps/admin/src/shared/forms/composed/fields/InputCalendar.tsx b/apps/admin/src/shared/forms/composed/fields/InputCalendar.tsx
index 932a001..4792883 100755
--- a/apps/admin/src/shared/forms/composed/fields/InputCalendar.tsx
+++ b/apps/admin/src/shared/forms/composed/fields/InputCalendar.tsx
@@ -35,7 +35,7 @@ export const InputCalendar: React.FC<{
             {label && (
               <FormLabel>
                 {label}
-                {required && <span className="text-red-500 ml-1">*</span>}
+                {required && <span className="ml-1 text-red-500">*</span>}
               </FormLabel>
             )}
             <FormControl>
diff --git a/apps/admin/src/shared/forms/composed/fields/InputCheckboxGroup.tsx b/apps/admin/src/shared/forms/composed/fields/InputCheckboxGroup.tsx
index 968c0ac..dfb6210 100755
--- a/apps/admin/src/shared/forms/composed/fields/InputCheckboxGroup.tsx
+++ b/apps/admin/src/shared/forms/composed/fields/InputCheckboxGroup.tsx
@@ -39,13 +39,13 @@ export const InputCheckboxGroup: React.FC<{
           {label && (
             <FormLabel>
               {label}
-              {required && <span className="text-red-500 ml-1">*</span>}
+              {required && <span className="ml-1 text-red-500">*</span>}
             </FormLabel>
           )}
 
           <div
             className={cn(
-              'grid grid-cols-1 md:grid-cols-2 gap-x-[--field-grid-horizontal-gap] gap-y-[--field-grid-vertical-gap]',
+              'grid grid-cols-1 gap-x-[--field-grid-horizontal-gap] gap-y-[--field-grid-vertical-gap] md:grid-cols-2',
               gridClassName
             )}
           >
diff --git a/apps/admin/src/shared/forms/composed/fields/InputColorPicker.tsx b/apps/admin/src/shared/forms/composed/fields/InputColorPicker.tsx
index 2a9e364..517900a 100755
--- a/apps/admin/src/shared/forms/composed/fields/InputColorPicker.tsx
+++ b/apps/admin/src/shared/forms/composed/fields/InputColorPicker.tsx
@@ -23,7 +23,7 @@ export const InputColorPicker: React.FC<
           {label && (
             <FormLabel>
               {label}
-              {required && <span className="text-red-500 ml-1">*</span>}
+              {required && <span className="ml-1 text-red-500">*</span>}
             </FormLabel>
           )}
           <FormControl>
diff --git a/apps/admin/src/shared/forms/composed/fields/InputCombobox.tsx b/apps/admin/src/shared/forms/composed/fields/InputCombobox.tsx
index 1f7e55b..c6ee869 100755
--- a/apps/admin/src/shared/forms/composed/fields/InputCombobox.tsx
+++ b/apps/admin/src/shared/forms/composed/fields/InputCombobox.tsx
@@ -84,11 +84,11 @@ export const InputCombobox: React.FC<{
         };
 
         return (
-          <FRM.FormItem className="flex flex-col w-full" ref={ref}>
+          <FRM.FormItem className="flex w-full flex-col" ref={ref}>
             {label && (
               <FRM.FormLabel>
                 {label}
-                {required && <span className="text-red-500 ml-1">*</span>}
+                {required && <span className="ml-1 text-red-500">*</span>}
               </FRM.FormLabel>
             )}
             <POV.Popover modal open={popover.isOpen} onOpenChange={popover.toggle}>
diff --git a/apps/admin/src/shared/forms/composed/fields/InputDate.tsx b/apps/admin/src/shared/forms/composed/fields/InputDate.tsx
index 41f3f08..203c4bb 100755
--- a/apps/admin/src/shared/forms/composed/fields/InputDate.tsx
+++ b/apps/admin/src/shared/forms/composed/fields/InputDate.tsx
@@ -21,7 +21,7 @@ export const InputDate: React.FC<{
           {label && (
             <FormLabel>
               {label}
-              {required && <span className="text-red-500 ml-1">*</span>}
+              {required && <span className="ml-1 text-red-500">*</span>}
             </FormLabel>
           )}
           <FormControl>
diff --git a/apps/admin/src/shared/forms/composed/fields/InputDatePicker.tsx b/apps/admin/src/shared/forms/composed/fields/InputDatePicker.tsx
index ef9c61b..4893a05 100755
--- a/apps/admin/src/shared/forms/composed/fields/InputDatePicker.tsx
+++ b/apps/admin/src/shared/forms/composed/fields/InputDatePicker.tsx
@@ -39,7 +39,7 @@ export const InputDatePicker: React.FC<{
             {label && (
               <FormLabel>
                 {label}
-                {required && <span className="text-red-500 ml-1">*</span>}
+                {required && <span className="ml-1 text-red-500">*</span>}
               </FormLabel>
             )}
             <FormControl>
diff --git a/apps/admin/src/shared/forms/composed/fields/InputDatePickerRange.tsx b/apps/admin/src/shared/forms/composed/fields/InputDatePickerRange.tsx
index b9087c5..a0eebd9 100755
--- a/apps/admin/src/shared/forms/composed/fields/InputDatePickerRange.tsx
+++ b/apps/admin/src/shared/forms/composed/fields/InputDatePickerRange.tsx
@@ -29,7 +29,7 @@ export const InputDatePickerRange: React.FC<{
             {label && (
               <FormLabel>
                 {label}
-                {required && <span className="text-red-500 ml-1">*</span>}
+                {required && <span className="ml-1 text-red-500">*</span>}
               </FormLabel>
             )}
             <FormControl>
diff --git a/apps/admin/src/shared/forms/composed/fields/InputDropzone.tsx b/apps/admin/src/shared/forms/composed/fields/InputDropzone.tsx
index 490e9e4..fad25c2 100755
--- a/apps/admin/src/shared/forms/composed/fields/InputDropzone.tsx
+++ b/apps/admin/src/shared/forms/composed/fields/InputDropzone.tsx
@@ -37,11 +37,11 @@ export const InputDropzone: React.FC<{
 
         return (
           <FormItem>
-            <div className="flex justify-between items-center gap-2.5">
+            <div className="flex items-center justify-between gap-2.5">
               {label && (
                 <FormLabel>
                   {label}
-                  {required && <span className="text-red-500 ml-1">*</span>}
+                  {required && <span className="ml-1 text-red-500">*</span>}
                 </FormLabel>
               )}
             </div>
@@ -57,12 +57,12 @@ export const InputDropzone: React.FC<{
                     <React.Fragment>
                       <div
                         className={cn(
-                          'w-full h-32 flex items-center justify-center rounded-md',
-                          'relative border border-input border-dashed cursor-pointer',
+                          'flex h-32 w-full items-center justify-center rounded-md',
+                          'border-input relative cursor-pointer border border-dashed',
                           {
-                            'pointer-events-none opacity-60 cursor-not-allowed': disabled,
+                            'pointer-events-none cursor-not-allowed opacity-60': disabled,
                             '': hasValue,
-                            'border-blue-500 ': isDragging
+                            'border-blue-500': isDragging
                           },
                           className
                         )}
@@ -74,8 +74,8 @@ export const InputDropzone: React.FC<{
                         onClick={onImageUpload}
                       >
                         <div className="flex flex-col items-center">
-                          <p className="text-base text-mono">Drag & Drop files here</p>
-                          <p className="text-xs text-foreground">or Click to Browse</p>
+                          <p className="text-mono text-base">Drag & Drop files here</p>
+                          <p className="text-foreground text-xs">or Click to Browse</p>
                         </div>
                       </div>
 
@@ -87,7 +87,7 @@ export const InputDropzone: React.FC<{
                           )}
                         >
                           {fileList.map((file, index) => (
-                            <div key={index} className="relative w-full pl-2 pr-8 line-clamp-1">
+                            <div key={index} className="relative line-clamp-1 w-full pr-8 pl-2">
                               {file.file?.name}
 
                               <Button
@@ -95,7 +95,7 @@ export const InputDropzone: React.FC<{
                                 variant="ghost"
                                 mode="icon"
                                 size="sm"
-                                className="hover:bg-transparent absolute right-0 top-1/2 -translate-y-1/2"
+                                className="absolute top-1/2 right-0 -translate-y-1/2 hover:bg-transparent"
                                 onClick={() => {
                                   onImageRemove(index);
                                 }}
diff --git a/apps/admin/src/shared/forms/composed/fields/InputFile.tsx b/apps/admin/src/shared/forms/composed/fields/InputFile.tsx
index 2310952..ed658c4 100755
--- a/apps/admin/src/shared/forms/composed/fields/InputFile.tsx
+++ b/apps/admin/src/shared/forms/composed/fields/InputFile.tsx
@@ -44,11 +44,11 @@ export const InputFile: React.FC<
 
         return (
           <FormItem>
-            <div className="flex justify-between items-center gap-2.5">
+            <div className="flex items-center justify-between gap-2.5">
               {label && (
                 <FormLabel>
                   {label}
-                  {required && <span className="text-red-500 ml-1">*</span>}
+                  {required && <span className="ml-1 text-red-500">*</span>}
                 </FormLabel>
               )}
             </div>
@@ -82,7 +82,7 @@ export const InputFile: React.FC<
                     variant="ghost"
                     mode="icon"
                     size="sm"
-                    className="hover:bg-transparent absolute right-1 top-1/2 -translate-y-1/2"
+                    className="absolute top-1/2 right-1 -translate-y-1/2 hover:bg-transparent"
                     onClick={(event) => {
                       event.stopPropagation();
 
diff --git a/apps/admin/src/shared/forms/composed/fields/InputFilePicker/InputFilePicker.tsx b/apps/admin/src/shared/forms/composed/fields/InputFilePicker/InputFilePicker.tsx
index 21a0ad4..4c36996 100644
--- a/apps/admin/src/shared/forms/composed/fields/InputFilePicker/InputFilePicker.tsx
+++ b/apps/admin/src/shared/forms/composed/fields/InputFilePicker/InputFilePicker.tsx
@@ -134,11 +134,11 @@ export const InputFilePicker: React.FC<Props> = ({
 
         return (
           <FormItem>
-            <div className="flex justify-between items-center gap-2.5">
+            <div className="flex items-center justify-between gap-2.5">
               {label && (
                 <FormLabel>
                   {label}
-                  {required && <span className="text-red-500 ml-1">*</span>}
+                  {required && <span className="ml-1 text-red-500">*</span>}
                 </FormLabel>
               )}
             </div>
@@ -177,7 +177,7 @@ export const InputFilePicker: React.FC<Props> = ({
             {fieldState.error && (
               <div
                 data-slot="form-message"
-                className="-mt-0.5 text-xs font-normal text-destructive"
+                className="text-destructive -mt-0.5 text-xs font-normal"
               >
                 {rootErrorMessage}
               </div>
diff --git a/apps/admin/src/shared/forms/composed/fields/InputMCEEditor.tsx b/apps/admin/src/shared/forms/composed/fields/InputMCEEditor.tsx
index 20a1835..5c23b8f 100755
--- a/apps/admin/src/shared/forms/composed/fields/InputMCEEditor.tsx
+++ b/apps/admin/src/shared/forms/composed/fields/InputMCEEditor.tsx
@@ -35,7 +35,7 @@ export const InputMCEEditor: React.FC<{
             {label && (
               <FormLabel>
                 {label}
-                {required && <span className="text-red-500 ml-1">*</span>}
+                {required && <span className="ml-1 text-red-500">*</span>}
               </FormLabel>
             )}
             <FormControl>
diff --git a/apps/admin/src/shared/forms/composed/fields/InputMultiSelect.tsx b/apps/admin/src/shared/forms/composed/fields/InputMultiSelect.tsx
index db7fb86..1c7e23c 100755
--- a/apps/admin/src/shared/forms/composed/fields/InputMultiSelect.tsx
+++ b/apps/admin/src/shared/forms/composed/fields/InputMultiSelect.tsx
@@ -33,7 +33,7 @@ export const InputMultiSelect: React.FC<
           {label && (
             <FormLabel>
               {label}
-              {required && <span className="text-red-500 ml-1">*</span>}
+              {required && <span className="ml-1 text-red-500">*</span>}
             </FormLabel>
           )}
           <FormControl>
diff --git a/apps/admin/src/shared/forms/composed/fields/InputNumberCounter.tsx b/apps/admin/src/shared/forms/composed/fields/InputNumberCounter.tsx
index ddf24df..7fa0c12 100755
--- a/apps/admin/src/shared/forms/composed/fields/InputNumberCounter.tsx
+++ b/apps/admin/src/shared/forms/composed/fields/InputNumberCounter.tsx
@@ -69,16 +69,16 @@ export const InputNumberCounter: React.FC<
             {label && (
               <FormLabel>
                 {label}
-                {required && <span className="text-red-500 ml-1">*</span>}
+                {required && <span className="ml-1 text-red-500">*</span>}
               </FormLabel>
             )}
             <FormControl>
-              <InputGroup className="flex items-center w-full">
+              <InputGroup className="flex w-full items-center">
                 <Button
                   type="button"
                   size={props.variant}
                   className={cn(
-                    'rounded-r-none border-l border-y border-border px-2',
+                    'border-border rounded-r-none border-y border-l px-2',
                     leftButtonClasses
                   )}
                   variant="secondary"
@@ -89,7 +89,7 @@ export const InputNumberCounter: React.FC<
                 <Input
                   type="number"
                   placeholder={placeholder}
-                  className={cn('rounded-none text-center px-0', className)}
+                  className={cn('rounded-none px-0 text-center', className)}
                   {...props}
                   {...field}
                   onChange={onChange}
@@ -98,7 +98,7 @@ export const InputNumberCounter: React.FC<
                   type="button"
                   variant="secondary"
                   size={props.variant}
-                  className={cn('rounded-l-none border-r border-y px-2', rightButtonClasses)}
+                  className={cn('rounded-l-none border-y border-r px-2', rightButtonClasses)}
                   onClick={onPlus}
                 >
                   <ChevronRight className="size-3" />
diff --git a/apps/admin/src/shared/forms/composed/fields/InputPhone/CountryDropdown.tsx b/apps/admin/src/shared/forms/composed/fields/InputPhone/CountryDropdown.tsx
index 87a25a3..20bc8bf 100755
--- a/apps/admin/src/shared/forms/composed/fields/InputPhone/CountryDropdown.tsx
+++ b/apps/admin/src/shared/forms/composed/fields/InputPhone/CountryDropdown.tsx
@@ -35,11 +35,11 @@ const CountryDropdownComponent = (
       <Pop.PopoverTrigger asChild ref={ref}>
         <div
           className={cn(
-            'flex h-8 w-10 items-center justify-between whitespace-nowrap rounded-md',
+            'flex h-8 w-10 items-center justify-between rounded-md whitespace-nowrap',
             'bg-transparent focus:outline-none [&>span]:line-clamp-1'
           )}
         >
-          <span className="size-4 flex items-center justify-center">
+          <span className="flex size-4 items-center justify-center">
             {value ? (
               <img src={value.flagSrc} className="size-full rounded-full" alt={value.label} />
             ) : (
@@ -50,9 +50,9 @@ const CountryDropdownComponent = (
         </div>
       </Pop.PopoverTrigger>
       <Pop.PopoverContent collisionPadding={10} side="bottom" align="start" className="w-fit p-0">
-        <Cmd.Command className="w-full max-h-50 sm:max-h-70">
+        <Cmd.Command className="max-h-50 w-full sm:max-h-70">
           <Cmd.CommandList>
-            <div className="sticky top-0 z-10 bg-popover">
+            <div className="bg-popover sticky top-0 z-10">
               <Cmd.CommandInput placeholder={intl.formatMessage({ id: 'ACTION.SEARCH' })} />
             </div>
             <Cmd.CommandEmpty>{intl.formatMessage({ id: 'NO_RESULTS_FOUND' })}</Cmd.CommandEmpty>
@@ -62,14 +62,14 @@ const CountryDropdownComponent = (
                 .map((option, index: number) => (
                   <Cmd.CommandItem
                     key={index}
-                    className="flex items-center w-full gap-2"
+                    className="flex w-full items-center gap-2"
                     onSelect={() => handleSelect(option)}
                   >
                     <div className="flex grow space-x-2 overflow-hidden">
-                      <div className="inline-flex items-center justify-center w-5 h-5 shrink-0 overflow-hidden rounded-full">
+                      <div className="inline-flex h-5 w-5 shrink-0 items-center justify-center overflow-hidden rounded-full">
                         <img
                           src={option.flagSrc}
-                          className="w-4 h-4 rounded-full"
+                          className="h-4 w-4 rounded-full"
                           alt={option.label}
                         />
                       </div>
diff --git a/apps/admin/src/shared/forms/composed/fields/InputPhone/InputPhone.tsx b/apps/admin/src/shared/forms/composed/fields/InputPhone/InputPhone.tsx
index 9a71193..109aaf3 100755
--- a/apps/admin/src/shared/forms/composed/fields/InputPhone/InputPhone.tsx
+++ b/apps/admin/src/shared/forms/composed/fields/InputPhone/InputPhone.tsx
@@ -40,7 +40,7 @@ export const InputPhone: React.FC<
           {label && (
             <Form.FormLabel>
               {label}
-              {required && <span className="text-red-500 ml-1">*</span>}
+              {required && <span className="ml-1 text-red-500">*</span>}
             </Form.FormLabel>
           )}
           <Form.FormControl>
diff --git a/apps/admin/src/shared/forms/composed/fields/InputRadioGroup.tsx b/apps/admin/src/shared/forms/composed/fields/InputRadioGroup.tsx
index 4463259..9af9a7e 100755
--- a/apps/admin/src/shared/forms/composed/fields/InputRadioGroup.tsx
+++ b/apps/admin/src/shared/forms/composed/fields/InputRadioGroup.tsx
@@ -41,7 +41,7 @@ export const InputRadioGroup: React.FC<
             {label && (
               <FormLabel>
                 {label}
-                {required && <span className="text-red-500 ml-1">*</span>}
+                {required && <span className="ml-1 text-red-500">*</span>}
               </FormLabel>
             )}
             <FormControl>
@@ -50,7 +50,7 @@ export const InputRadioGroup: React.FC<
                   return (
                     <FormItem
                       key={option.value}
-                      className="flex flex-row items-center space-x-3 space-y-0"
+                      className="flex flex-row items-center space-y-0 space-x-3"
                     >
                       <FormControl>
                         <RadioGroupItem
diff --git a/apps/admin/src/shared/forms/composed/fields/InputSelect.tsx b/apps/admin/src/shared/forms/composed/fields/InputSelect.tsx
index e323aba..27dabb0 100755
--- a/apps/admin/src/shared/forms/composed/fields/InputSelect.tsx
+++ b/apps/admin/src/shared/forms/composed/fields/InputSelect.tsx
@@ -42,7 +42,7 @@ export const InputSelect: React.FC<{
           {label && (
             <FormLabel>
               {label}
-              {required && <span className="text-red-500 ml-1">*</span>}
+              {required && <span className="ml-1 text-red-500">*</span>}
             </FormLabel>
           )}
           <Select onValueChange={field.onChange} value={field.value} disabled={field.disabled}>
diff --git a/apps/admin/src/shared/forms/composed/fields/InputSwitch.tsx b/apps/admin/src/shared/forms/composed/fields/InputSwitch.tsx
index 57acbde..8ddfb85 100755
--- a/apps/admin/src/shared/forms/composed/fields/InputSwitch.tsx
+++ b/apps/admin/src/shared/forms/composed/fields/InputSwitch.tsx
@@ -20,11 +20,11 @@ export const InputSwitch: React.FC<{
       name={name}
       disabled={disabled}
       render={({ field }) => (
-        <FormItem className={cn('flex-row justify-between items-center', wrapperClassName)}>
+        <FormItem className={cn('flex-row items-center justify-between', wrapperClassName)}>
           <div>
             <FormLabel>
               {label}
-              {required && <span className="text-red-500 ml-1">*</span>}
+              {required && <span className="ml-1 text-red-500">*</span>}
             </FormLabel>
             <FormMessage>{description}</FormMessage>
           </div>
diff --git a/apps/admin/src/shared/forms/composed/fields/InputText.tsx b/apps/admin/src/shared/forms/composed/fields/InputText.tsx
index 4ec8786..12e725e 100755
--- a/apps/admin/src/shared/forms/composed/fields/InputText.tsx
+++ b/apps/admin/src/shared/forms/composed/fields/InputText.tsx
@@ -34,7 +34,7 @@ export const InputText: React.FC<
           {label && (
             <FormLabel>
               {label}
-              {required && <span className="text-red-500 ml-1">*</span>}
+              {required && <span className="ml-1 text-red-500">*</span>}
             </FormLabel>
           )}
           <FormControl>
@@ -47,7 +47,7 @@ export const InputText: React.FC<
               <InputWrapper>
                 {type === 'email' && <Mail />}
                 {type === 'text' && <Type />}
-                {type === 'number' && <i className="font-medium text-muted-foreground">N</i>}
+                {type === 'number' && <i className="text-muted-foreground font-medium">N</i>}
                 <Input placeholder={placeholder} type={type} {...props} {...field} />
               </InputWrapper>
             )}
diff --git a/apps/admin/src/shared/forms/composed/fields/InputTextarea.tsx b/apps/admin/src/shared/forms/composed/fields/InputTextarea.tsx
index ba870d1..37f5a36 100755
--- a/apps/admin/src/shared/forms/composed/fields/InputTextarea.tsx
+++ b/apps/admin/src/shared/forms/composed/fields/InputTextarea.tsx
@@ -23,7 +23,7 @@ export const InputTextarea: React.FC<
           {label && (
             <FormLabel>
               {label}
-              {required && <span className="text-red-500 ml-1">*</span>}
+              {required && <span className="ml-1 text-red-500">*</span>}
             </FormLabel>
           )}
           <FormControl>
diff --git a/apps/admin/src/shared/forms/composed/fields/InputTime.tsx b/apps/admin/src/shared/forms/composed/fields/InputTime.tsx
index 29227ba..d36aef6 100755
--- a/apps/admin/src/shared/forms/composed/fields/InputTime.tsx
+++ b/apps/admin/src/shared/forms/composed/fields/InputTime.tsx
@@ -28,7 +28,7 @@ export const InputTime: React.FC<{
             {label && (
               <FormLabel>
                 {label}
-                {required && <span className="text-red-500 ml-1">*</span>}
+                {required && <span className="ml-1 text-red-500">*</span>}
               </FormLabel>
             )}
             <FormControl>
diff --git a/apps/admin/src/shared/ui/Accordion.tsx b/apps/admin/src/shared/ui/Accordion.tsx
index 65ed27d..6569352 100755
--- a/apps/admin/src/shared/ui/Accordion.tsx
+++ b/apps/admin/src/shared/ui/Accordion.tsx
@@ -1,9 +1,9 @@
 'use client';
 
-import * as React from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { cva, type VariantProps } from 'class-variance-authority';
 import { ChevronDown, Plus } from 'lucide-react';
+import * as React from 'react';
 import { cn } from '@crux-kit/utils';
 
 const accordionRootVariants = cva('', {
@@ -152,7 +152,7 @@ function AccordionContent(props: React.ComponentProps<typeof AccordionPrimitive.
       className={cn(accordionContentVariants({ variant }), className)}
       {...rest}
     >
-      <div className={cn('pb-5 pt-0', className)}>{children}</div>
+      <div className={cn('pt-0 pb-5', className)}>{children}</div>
     </AccordionPrimitive.Content>
   );
 }
diff --git a/apps/admin/src/shared/ui/AccordionMenu.tsx b/apps/admin/src/shared/ui/AccordionMenu.tsx
index aa09472..6090b38 100755
--- a/apps/admin/src/shared/ui/AccordionMenu.tsx
+++ b/apps/admin/src/shared/ui/AccordionMenu.tsx
@@ -1,9 +1,9 @@
 'use client';
 
-import * as React from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { cva, type VariantProps } from 'class-variance-authority';
 import { ChevronDown } from 'lucide-react';
+import * as React from 'react';
 import { cn } from '@crux-kit/utils';
 
 interface AccordionMenuContextValue {
@@ -177,7 +177,7 @@ function AccordionMenuLabel({ children, className, ...props }: AccordionMenuLabe
       data-slot="accordion-menu-label"
       role="presentation"
       className={cn(
-        'px-2 py-1.5 text-xs font-medium text-muted-foreground',
+        'text-muted-foreground px-2 py-1.5 text-xs font-medium',
         classNames?.label,
         className
       )}
@@ -196,7 +196,7 @@ function AccordionMenuSeparator({ className, ...props }: AccordionMenuSeparatorP
     <div
       data-slot="accordion-menu-separator"
       role="separator"
-      className={cn('my-1 h-px bg-border', classNames?.separator, className)}
+      className={cn('bg-border my-1 h-px', classNames?.separator, className)}
       {...props}
     />
   );
@@ -296,7 +296,7 @@ function AccordionMenuSubTrigger({
       <AccordionPrimitive.Trigger
         data-slot="accordion-menu-sub-trigger"
         className={cn(
-          'w-full relative flex items-center cursor-pointer select-none text-start rounded-lg gap-2 px-2 py-1.5 text-sm outline-hidden text-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([role=img]):not([class*=text-])]:opacity-60 [&_svg:not([class*=size-])]:size-4 [&_svg]:shrink-0',
+          'text-foreground hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground relative flex w-full cursor-pointer items-center gap-2 rounded-lg px-2 py-1.5 text-start text-sm outline-hidden transition-colors select-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4 [&_svg:not([role=img]):not([class*=text-])]:opacity-60',
           classNames?.subTrigger,
           className
         )}
@@ -306,7 +306,7 @@ function AccordionMenuSubTrigger({
           <ChevronDown
             data-slot="accordion-menu-sub-indicator"
             className={cn(
-              'ms-auto size-3.5! shrink-0 text-muted-foreground transition-transform duration-200 [[data-state=open]>&]:-rotate-180'
+              'text-muted-foreground ms-auto size-3.5! shrink-0 transition-transform duration-200 [[data-state=open]>&]:-rotate-180'
             )}
           />
         </>
@@ -361,7 +361,7 @@ function AccordionMenuSubContent({
       data-slot="accordion-menu-sub-content"
       className={cn(
         'ps-5',
-        'overflow-hidden transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down',
+        'data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden transition-all',
         classNames?.subContent,
         className
       )}
diff --git a/apps/admin/src/shared/ui/Alert.tsx b/apps/admin/src/shared/ui/Alert.tsx
index 35eb133..e5f280a 100755
--- a/apps/admin/src/shared/ui/Alert.tsx
+++ b/apps/admin/src/shared/ui/Alert.tsx
@@ -259,9 +259,9 @@ function Alert({
           onClick={onClose}
           aria-label="Dismiss"
           data-alert-close="true"
-          className={cn('group shrink-0 size-4')}
+          className={cn('group size-4 shrink-0')}
         >
-          <X className="opacity-60! group-hover:opacity-100! size-4!" />
+          <X className="size-4! opacity-60! group-hover:opacity-100!" />
         </Button>
       )}
     </div>
@@ -294,7 +294,7 @@ function AlertDescription({ className, ...props }: React.HTMLAttributes<HTMLPara
   return (
     <div
       data-slot="alert-description"
-      className={cn('text-sm [&_p]:leading-relaxed [&_p]:mb-2', className)}
+      className={cn('text-sm [&_p]:mb-2 [&_p]:leading-relaxed', className)}
       {...props}
     />
   );
diff --git a/apps/admin/src/shared/ui/AlertDialog.tsx b/apps/admin/src/shared/ui/AlertDialog.tsx
index 75806b1..20acf64 100755
--- a/apps/admin/src/shared/ui/AlertDialog.tsx
+++ b/apps/admin/src/shared/ui/AlertDialog.tsx
@@ -28,7 +28,7 @@ function AlertDialogOverlay({
     <AlertDialogPrimitive.Overlay
       data-slot="alert-dialog-overlay"
       className={cn(
-        'fixed inset-0 z-50 bg-black/30 [backdrop-filter:blur(4px)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/30 [backdrop-filter:blur(4px)]',
         className
       )}
       {...props}
@@ -46,7 +46,7 @@ function AlertDialogContent({
       <AlertDialogPrimitive.Content
         data-slot="alert-dialog-content"
         className={cn(
-          'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg shadow-black/5 duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:rounded-lg',
+          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg shadow-black/5 duration-200 sm:rounded-lg',
           className
         )}
         {...props}
@@ -91,7 +91,7 @@ function AlertDialogDescription({
   return (
     <AlertDialogPrimitive.Description
       data-slot="alert-dialog-description"
-      className={cn('text-sm text-muted-foreground', className)}
+      className={cn('text-muted-foreground text-sm', className)}
       {...props}
     />
   );
diff --git a/apps/admin/src/shared/ui/AspectRatio.tsx b/apps/admin/src/shared/ui/AspectRatio.tsx
index ab60c94..fd2cb1e 100755
--- a/apps/admin/src/shared/ui/AspectRatio.tsx
+++ b/apps/admin/src/shared/ui/AspectRatio.tsx
@@ -1,7 +1,7 @@
 'use client';
 
-import * as React from 'react';
 import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
+import * as React from 'react';
 
 function AspectRatio({ ...props }: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
   return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />;
diff --git a/apps/admin/src/shared/ui/Avatar.tsx b/apps/admin/src/shared/ui/Avatar.tsx
index 8fd492e..f4eba8b 100755
--- a/apps/admin/src/shared/ui/Avatar.tsx
+++ b/apps/admin/src/shared/ui/Avatar.tsx
@@ -1,8 +1,8 @@
 'use client';
 
-import * as React from 'react';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import { cva, VariantProps } from 'class-variance-authority';
+import * as React from 'react';
 import { cn } from '@crux-kit/utils';
 
 const avatarStatusVariants = cva(
@@ -29,7 +29,7 @@ function Avatar({
   return (
     <AvatarPrimitive.Root
       data-slot="avatar"
-      className={cn('relative flex shrink-0 size-10', className)}
+      className={cn('relative flex size-10 shrink-0', className)}
       {...props}
     />
   );
@@ -58,7 +58,7 @@ function AvatarFallback({
     <AvatarPrimitive.Fallback
       data-slot="avatar-fallback"
       className={cn(
-        'flex h-full w-full items-center justify-center rounded-full border border-border bg-accent text-accent-foreground text-xs',
+        'border-border bg-accent text-accent-foreground flex h-full w-full items-center justify-center rounded-full border text-xs',
         className
       )}
       {...props}
diff --git a/apps/admin/src/shared/ui/Badge.tsx b/apps/admin/src/shared/ui/Badge.tsx
index 5e5a6c9..c6e7ff1 100755
--- a/apps/admin/src/shared/ui/Badge.tsx
+++ b/apps/admin/src/shared/ui/Badge.tsx
@@ -1,6 +1,6 @@
-import * as React from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
 import { cn } from '@crux-kit/utils';
 
 export interface BadgeProps
diff --git a/apps/admin/src/shared/ui/Breadcrumb.tsx b/apps/admin/src/shared/ui/Breadcrumb.tsx
index da5d1cc..fe088e0 100755
--- a/apps/admin/src/shared/ui/Breadcrumb.tsx
+++ b/apps/admin/src/shared/ui/Breadcrumb.tsx
@@ -1,6 +1,6 @@
-import * as React from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { ChevronRight, MoreHorizontal } from 'lucide-react';
+import * as React from 'react';
 import { cn } from '@crux-kit/utils';
 
 function Breadcrumb({
@@ -16,7 +16,7 @@ function BreadcrumbList({ className, ...props }: React.ComponentPropsWithoutRef<
     <ol
       data-slot="breadcrumb-list"
       className={cn(
-        'flex flex-wrap items-center gap-1.5 wrap-break-word text-sm text-muted-foreground',
+        'text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm wrap-break-word',
         className
       )}
       {...props}
@@ -46,7 +46,7 @@ function BreadcrumbLink({
   return (
     <Comp
       data-slot="breadcrumb-link"
-      className={cn('transition-colors hover:text-foreground', className)}
+      className={cn('hover:text-foreground transition-colors', className)}
       {...props}
     />
   );
@@ -59,7 +59,7 @@ function BreadcrumbPage({ className, ...props }: React.ComponentPropsWithoutRef<
       role="link"
       aria-disabled="true"
       aria-current="page"
-      className={cn('font-normal text-foreground', className)}
+      className={cn('text-foreground font-normal', className)}
       {...props}
     />
   );
@@ -70,7 +70,7 @@ const BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentP
     data-slot="breadcrumb-separator"
     role="presentation"
     aria-hidden="true"
-    className={cn('[&>svg]:w-3.5 [&>svg]:h-3.5', className)}
+    className={cn('[&>svg]:h-3.5 [&>svg]:w-3.5', className)}
     {...props}
   >
     {children ?? <ChevronRight className="rtl:rotate-180" />}
diff --git a/apps/admin/src/shared/ui/Button.tsx b/apps/admin/src/shared/ui/Button.tsx
index 1f0cd21..a17e420 100755
--- a/apps/admin/src/shared/ui/Button.tsx
+++ b/apps/admin/src/shared/ui/Button.tsx
@@ -1,7 +1,7 @@
-import * as React from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva, type VariantProps } from 'class-variance-authority';
 import { ChevronDown, LucideIcon } from 'lucide-react';
+import * as React from 'react';
 import { cn } from '@crux-kit/utils';
 
 const buttonVariants = cva(
diff --git a/apps/admin/src/shared/ui/Card.tsx b/apps/admin/src/shared/ui/Card.tsx
index a42ee00..4de5fce 100755
--- a/apps/admin/src/shared/ui/Card.tsx
+++ b/apps/admin/src/shared/ui/Card.tsx
@@ -1,7 +1,7 @@
 'use client';
 
-import * as React from 'react';
 import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
 import { cn } from '@crux-kit/utils';
 
 // Define CardContext
@@ -166,7 +166,7 @@ function CardTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElem
   return (
     <h3
       data-slot="card-title"
-      className={cn('text-base font-semibold leading-none tracking-tight', className)}
+      className={cn('text-base leading-none font-semibold tracking-tight', className)}
       {...props}
     />
   );
@@ -176,7 +176,7 @@ function CardDescription({ className, ...props }: React.HTMLAttributes<HTMLDivEl
   return (
     <div
       data-slot="card-description"
-      className={cn('text-sm text-muted-foreground', className)}
+      className={cn('text-muted-foreground text-sm', className)}
       {...props}
     />
   );
diff --git a/apps/admin/src/shared/ui/Checkbox.tsx b/apps/admin/src/shared/ui/Checkbox.tsx
index be0bb94..2db1f80 100755
--- a/apps/admin/src/shared/ui/Checkbox.tsx
+++ b/apps/admin/src/shared/ui/Checkbox.tsx
@@ -1,9 +1,9 @@
 'use client';
 
-import * as React from 'react';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import { cva, VariantProps } from 'class-variance-authority';
 import { Check, Minus } from 'lucide-react';
+import * as React from 'react';
 import { cn } from '@crux-kit/utils';
 
 // Define the variants for the Checkbox using cva.
diff --git a/apps/admin/src/shared/ui/Collapsible.tsx b/apps/admin/src/shared/ui/Collapsible.tsx
index 2680df3..c9d981e 100755
--- a/apps/admin/src/shared/ui/Collapsible.tsx
+++ b/apps/admin/src/shared/ui/Collapsible.tsx
@@ -1,7 +1,7 @@
 'use client';
 
-import React from 'react';
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+import React from 'react';
 import { cn } from '@crux-kit/utils';
 
 function Collapsible({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
@@ -23,7 +23,7 @@ function CollapsibleContent({
     <CollapsiblePrimitive.CollapsibleContent
       data-slot="collapsible-content"
       className={cn(
-        'overflow-hidden transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down',
+        'data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down overflow-hidden transition-all',
         className
       )}
       {...props}
diff --git a/apps/admin/src/shared/ui/ColorPicker.tsx b/apps/admin/src/shared/ui/ColorPicker.tsx
index 22b3af5..d3d54f3 100755
--- a/apps/admin/src/shared/ui/ColorPicker.tsx
+++ b/apps/admin/src/shared/ui/ColorPicker.tsx
@@ -178,9 +178,9 @@ export const ColorPicker: React.FC<ColorPickerProps> = ({
           {...triggerProps}
         >
           {children ?? (
-            <div className="flex items-center justify-between grow gap-2">
+            <div className="flex grow items-center justify-between gap-2">
               <div
-                className="h-4 w-4 rounded border border-border"
+                className="border-border h-4 w-4 rounded border"
                 style={{ backgroundColor: color }}
               />
               <span>{color}</span>
@@ -193,14 +193,14 @@ export const ColorPicker: React.FC<ColorPickerProps> = ({
         <div className="space-y-4">
           <div className="flex items-center gap-3">
             <div
-              className="h-12 w-12 rounded-lg border border-border"
+              className="border-border h-12 w-12 rounded-lg border"
               style={{ backgroundColor: color }}
             />
             <div className="flex-1">
               <Label htmlFor="hex-input" className="text-sm font-medium">
                 Hex Color
               </Label>
-              <div className="flex gap-2 mt-1">
+              <div className="mt-1 flex gap-2">
                 <Input
                   id="hex-input"
                   variant="sm"
@@ -261,7 +261,7 @@ export const ColorPicker: React.FC<ColorPickerProps> = ({
           <PresetColors color={color} onChange={handlePresetColor} />
         </div>
 
-        <div className="flex justify-end mt-3">
+        <div className="mt-3 flex justify-end">
           <PopoverClose asChild>
             <Button type="button" variant="ghost" size="sm" mode="icon" title="Ok">
               Ok
@@ -279,7 +279,7 @@ const PresetColors: React.FC<{
 }> = React.memo(({ color, onChange }) => {
   return (
     <div>
-      <Label className="text-sm font-medium mb-2 block">Presets</Label>
+      <Label className="mb-2 block text-sm font-medium">Presets</Label>
       <div className="grid grid-cols-8 gap-2">
         {presetColors.map((presetColor) => (
           <PopoverClose asChild key={presetColor}>
@@ -287,7 +287,7 @@ const PresetColors: React.FC<{
               type="button"
               size="sm"
               variant="outline"
-              className={cn(color === presetColor && 'outline-2 outline-primary')}
+              className={cn(color === presetColor && 'outline-primary outline-2')}
               style={{ backgroundColor: presetColor }}
               onClick={() => onChange(presetColor)}
               title={presetColor}
@@ -311,7 +311,7 @@ const HSLSlider: React.FC<{
     <div>
       <Label className="text-sm font-medium">{label}</Label>
       <Slider value={[value]} onValueChange={onChange} max={max} step={step} className="mt-2" />
-      <div className="text-xs text-muted-foreground mt-1">
+      <div className="text-muted-foreground mt-1 text-xs">
         {value}
         {valueMark}
       </div>
diff --git a/apps/admin/src/shared/ui/Command.tsx b/apps/admin/src/shared/ui/Command.tsx
index fda0901..8e5c76d 100755
--- a/apps/admin/src/shared/ui/Command.tsx
+++ b/apps/admin/src/shared/ui/Command.tsx
@@ -11,7 +11,7 @@ function Command({ className, ...props }: React.ComponentPropsWithoutRef<typeof
   return (
     <CommandPrimitive
       className={cn(
-        'flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground',
+        'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md',
         className
       )}
       {...props}
@@ -34,7 +34,7 @@ const CommandDialog = ({ children, className, close, variant, ...props }: Comman
         close={close}
       >
         <DialogTitle className="hidden" />
-        <Command className="**:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 **:[[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 **:[[cmdk-input]]:h-12 **:[[cmdk-item]]:px-2 **:[[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+        <Command className="**:[[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group]]:px-2 **:[[cmdk-input]]:h-12 **:[[cmdk-item]]:px-2 **:[[cmdk-item]]:py-3">
           {children}
         </Command>
       </DialogContent>
@@ -53,18 +53,18 @@ function CommandInput({
 }) {
   return (
     <div
-      className="flex items-center border-border border-b px-3"
+      className="border-border flex items-center border-b px-3"
       cmdk-input-wrapper=""
       data-slot="command-input"
     >
       {withStartAdorned && (
-        <span className="flex me-2">
+        <span className="me-2 flex">
           {startAdorned ? startAdorned : <Search className="size-4! shrink-0 opacity-50" />}
         </span>
       )}
       <CommandPrimitive.Input
         className={cn(
-          'flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-hidden text-foreground placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
+          'text-foreground placeholder:text-muted-foreground flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
           className
         )}
         {...props}
@@ -80,7 +80,7 @@ function CommandList({
   return (
     <CommandPrimitive.List
       data-slot="command-list"
-      className={cn('max-h-75 overflow-y-auto overflow-x-hidden', className)}
+      className={cn('max-h-75 overflow-x-hidden overflow-y-auto', className)}
       {...props}
     />
   );
@@ -107,7 +107,7 @@ function CommandGroup({
     <CommandPrimitive.Group
       data-slot="command-group"
       className={cn(
-        'overflow-hidden p-1.5 text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground',
+        'text-foreground **:[[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1.5 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium',
         className
       )}
       {...props}
@@ -122,7 +122,7 @@ function CommandSeparator({
   return (
     <CommandPrimitive.Separator
       data-slot="command-separator"
-      className={cn('-mx-1.5 h-px bg-border', className)}
+      className={cn('bg-border -mx-1.5 h-px', className)}
       {...props}
     />
   );
@@ -136,7 +136,7 @@ function CommandItem({
     <CommandPrimitive.Item
       data-slot="command-item"
       className={cn(
-        'relative flex text-foreground cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+        'text-foreground data-[selected=true]:bg-accent relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
         className
       )}
       {...props}
@@ -148,7 +148,7 @@ const CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanE
   return (
     <span
       data-slot="command-shortcut"
-      className={cn('ms-auto text-xs tracking-widest text-muted-foreground text-nowrap', className)}
+      className={cn('text-muted-foreground ms-auto text-xs tracking-widest text-nowrap', className)}
       {...props}
     />
   );
@@ -163,7 +163,7 @@ function CommandCheck({ icon: Icon = Check, className, ...props }: ButtonArrowPr
     <Icon
       data-slot="command-check"
       data-check="true"
-      className={cn('size-4 ms-auto text-primary', className)}
+      className={cn('text-primary ms-auto size-4', className)}
       {...props}
     />
   );
diff --git a/apps/admin/src/shared/ui/ContextMenu.tsx b/apps/admin/src/shared/ui/ContextMenu.tsx
index 14db5f9..8e99fbf 100755
--- a/apps/admin/src/shared/ui/ContextMenu.tsx
+++ b/apps/admin/src/shared/ui/ContextMenu.tsx
@@ -1,8 +1,8 @@
 'use client';
 
-import * as React from 'react';
 import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
 import { Check, ChevronRight, Circle } from 'lucide-react';
+import * as React from 'react';
 import { cn } from '@crux-kit/utils';
 
 function ContextMenu({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
@@ -45,8 +45,8 @@ function ContextMenuSubTrigger({
     <ContextMenuPrimitive.SubTrigger
       data-slot="context-menu-sub-trigger"
       className={cn(
-        'flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
-        '[&>svg]:pointer-events-none [&>svg]:opacity-60 [&>svg]:size-4 [&>svg]:shrink-0',
+        'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-hidden select-none',
+        '[&>svg]:pointer-events-none [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:opacity-60',
         inset && 'ps-8',
         className
       )}
@@ -66,7 +66,7 @@ function ContextMenuSubContent({
     <ContextMenuPrimitive.SubContent
       data-slot="context-menu-sub-content"
       className={cn(
-        'z-50 min-w-32 overflow-hidden rounded-md border border-border bg-popover p-2 text-popover-foreground shadow-md shadow-black/5 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'border-border bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-2 shadow-md shadow-black/5',
         className
       )}
       {...props}
@@ -83,7 +83,7 @@ function ContextMenuContent({
       <ContextMenuPrimitive.Content
         data-slot="context-menu-content"
         className={cn(
-          'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-2 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          'bg-popover text-popover-foreground animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-2 shadow-md',
           className
         )}
         {...props}
@@ -103,8 +103,8 @@ function ContextMenuItem({
     <ContextMenuPrimitive.Item
       data-slot="context-menu-item"
       className={cn(
-        'relative flex gap-2 cursor-default select-none items-center rounded-md px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
-        '[&>svg]:pointer-events-none [&>svg]:opacity-60 [&>svg]:size-4 [&>svg]:shrink-0',
+        'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50',
+        '[&>svg]:pointer-events-none [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:opacity-60',
         inset && 'ps-8',
         className
       )}
@@ -123,7 +123,7 @@ function ContextMenuCheckboxItem({
     <ContextMenuPrimitive.CheckboxItem
       data-slot="context-menu-checkbox-item"
       className={cn(
-        'relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
+        'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50',
         className
       )}
       checked={checked}
@@ -148,7 +148,7 @@ function ContextMenuRadioItem({
     <ContextMenuPrimitive.RadioItem
       data-slot="context-menu-radio-item"
       className={cn(
-        'relative flex cursor-default select-none items-center rounded-md py-1.5 ps-8 pe-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
+        'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-md py-1.5 ps-8 pe-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50',
         className
       )}
       {...props}
@@ -174,7 +174,7 @@ function ContextMenuLabel({
     <ContextMenuPrimitive.Label
       data-slot="context-menu-label"
       className={cn(
-        'px-2 py-1.5 text-sm font-semibold text-foreground',
+        'text-foreground px-2 py-1.5 text-sm font-semibold',
         inset && 'ps-8',
         className
       )}
@@ -190,7 +190,7 @@ function ContextMenuSeparator({
   return (
     <ContextMenuPrimitive.Separator
       data-slot="context-menu-separator"
-      className={cn('-mx-2 my-1.5 h-px bg-border', className)}
+      className={cn('bg-border -mx-2 my-1.5 h-px', className)}
       {...props}
     />
   );
@@ -200,7 +200,7 @@ const ContextMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLS
   return (
     <span
       data-slot="context-menu-shortcut"
-      className={cn('ms-auto text-xs tracking-widest text-muted-foreground', className)}
+      className={cn('text-muted-foreground ms-auto text-xs tracking-widest', className)}
       {...props}
     />
   );
diff --git a/apps/admin/src/shared/ui/CopyButton.tsx b/apps/admin/src/shared/ui/CopyButton.tsx
index 467cf5e..73fe924 100644
--- a/apps/admin/src/shared/ui/CopyButton.tsx
+++ b/apps/admin/src/shared/ui/CopyButton.tsx
@@ -17,7 +17,7 @@ export const CopyButton: React.FC<ButtonProps & { copyText: string; timeout?: nu
       variant="dim"
       mode="icon"
       onClick={() => copyToClipboard(copyText)}
-      className="shrink-0 data-[copied=true]:hover:bg-inherit data-[copied=true]:text-primary data-[copied=true]:hover:text-primary"
+      className="data-[copied=true]:text-primary data-[copied=true]:hover:text-primary shrink-0 data-[copied=true]:hover:bg-inherit"
       {...props}
       data-copied={isCopied}
     >
diff --git a/apps/admin/src/shared/ui/DateInput/DateInput.tsx b/apps/admin/src/shared/ui/DateInput/DateInput.tsx
index a527a14..e388174 100755
--- a/apps/admin/src/shared/ui/DateInput/DateInput.tsx
+++ b/apps/admin/src/shared/ui/DateInput/DateInput.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
 import { CalendarIcon } from 'lucide-react';
+import React from 'react';
 import { IsoDateString } from '@crux-kit/types';
 import { cn, detectUserDateInputMode } from '@crux-kit/utils';
 import { Label } from '../Label';
@@ -48,12 +48,12 @@ export const DateInput = React.forwardRef<HTMLInputElement, DateInputProps>(
     return (
       <Label
         className={cn(
-          'flex items-center h-8.5 px-3 text-[0.8125rem] [&_svg]:text-muted-foreground gap-1.5 [&_svg:not([class*=size-])]:size-4 leading-(--text-sm--line-height) rounded-md focus-within:ring-[3px] disabled:cursor-not-allowed disabled:opacity-60 placeholder:text-muted-foreground/80 focus-within:ring-ring/30 focus-within:border-ring focus-within:outline-none w-full bg-background border border-input shadow-xs shadow-black/5 transition-[color,box-shadow] text-foreground',
+          '[&_svg]:text-muted-foreground placeholder:text-muted-foreground/80 focus-within:ring-ring/30 focus-within:border-ring bg-background border-input text-foreground flex h-8.5 w-full items-center gap-1.5 rounded-md border px-3 text-[0.8125rem] leading-(--text-sm--line-height) shadow-xs shadow-black/5 transition-[color,box-shadow] focus-within:ring-[3px] focus-within:outline-none disabled:cursor-not-allowed disabled:opacity-60 [&_svg:not([class*=size-])]:size-4',
           containerClassName
         )}
       >
-        <div className="flex items-center relative w-full gap-1">
-          <CalendarIcon className="text-muted-foreground w-4 h-4" />
+        <div className="relative flex w-full items-center gap-1">
+          <CalendarIcon className="text-muted-foreground h-4 w-4" />
           {dateOrder.map((part, i) => {
             const date = transformedDates[part];
 
diff --git a/apps/admin/src/shared/ui/DateInput/DateInputSegment.tsx b/apps/admin/src/shared/ui/DateInput/DateInputSegment.tsx
index e7a2d4b..090c358 100755
--- a/apps/admin/src/shared/ui/DateInput/DateInputSegment.tsx
+++ b/apps/admin/src/shared/ui/DateInput/DateInputSegment.tsx
@@ -29,7 +29,7 @@ export const DateInputSegment = ({
       value={value}
       placeholder={placeholder}
       className={cn(
-        'bg-transparent outline-none text-foreground typography-body-lg font-semibold tracking-widest',
+        'text-foreground typography-body-lg bg-transparent font-semibold tracking-widest outline-none',
         className
       )}
       onChange={(e) => onInputChange(e.target.value, datePart)}
diff --git a/apps/admin/src/shared/ui/Dialog.tsx b/apps/admin/src/shared/ui/Dialog.tsx
index d7fe976..b69c523 100755
--- a/apps/admin/src/shared/ui/Dialog.tsx
+++ b/apps/admin/src/shared/ui/Dialog.tsx
@@ -50,7 +50,7 @@ function DialogOverlay({
     <DialogPrimitive.Overlay
       data-slot="dialog-overlay"
       className={cn(
-        'fixed inset-0 z-50 bg-black/30 [backdrop-filter:blur(4px)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/30 [backdrop-filter:blur(4px)]',
         className
       )}
       {...props}
@@ -80,7 +80,7 @@ function DialogContent({
       >
         {children}
         {close && (
-          <DialogClose asChild className="cursor-pointer absolute right-5 top-5">
+          <DialogClose asChild className="absolute top-5 right-5 cursor-pointer">
             <Button type="button" size="xs" appearance="ghost" variant="dim" mode="icon">
               <X className="size-4" />
               <span className="sr-only">Close</span>
@@ -95,7 +95,7 @@ function DialogContent({
 const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     data-slot="dialog-header"
-    className={cn('flex flex-col space-y-1 text-center sm:text-start mb-5', className)}
+    className={cn('mb-5 flex flex-col space-y-1 text-center sm:text-start', className)}
     {...props}
   />
 );
@@ -104,7 +104,7 @@ const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivEleme
   <div
     data-slot="dialog-footer"
     className={cn(
-      'flex flex-col gap-2.5 sm:gap-0 sm:flex-row sm:justify-end pt-5 sm:space-x-2.5',
+      'flex flex-col gap-2.5 pt-5 sm:flex-row sm:justify-end sm:gap-0 sm:space-x-2.5',
       className
     )}
     {...props}
@@ -118,7 +118,7 @@ function DialogTitle({
   return (
     <DialogPrimitive.Title
       data-slot="dialog-title"
-      className={cn('text-lg font-semibold leading-none tracking-tight', className)}
+      className={cn('text-lg leading-none font-semibold tracking-tight', className)}
       {...props}
     />
   );
@@ -135,7 +135,7 @@ function DialogDescription({
   return (
     <DialogPrimitive.Description
       data-slot="dialog-description"
-      className={cn('text-sm text-muted-foreground', className)}
+      className={cn('text-muted-foreground text-sm', className)}
       {...props}
     />
   );
diff --git a/apps/admin/src/shared/ui/Drawer.tsx b/apps/admin/src/shared/ui/Drawer.tsx
index 862fc03..97f1a0f 100755
--- a/apps/admin/src/shared/ui/Drawer.tsx
+++ b/apps/admin/src/shared/ui/Drawer.tsx
@@ -52,7 +52,7 @@ function DrawerContent({
         )}
         {...props}
       >
-        <div className="mx-auto mt-4 h-2 w-25 rounded-full bg-muted" />
+        <div className="bg-muted mx-auto mt-4 h-2 w-25 rounded-full" />
         {children}
       </DrawerPrimitive.Content>
     </DrawerPortal>
@@ -82,7 +82,7 @@ function DrawerTitle({
   return (
     <DrawerPrimitive.Title
       data-slot="drawer-title"
-      className={cn('text-lg font-semibold leading-none tracking-tight', className)}
+      className={cn('text-lg leading-none font-semibold tracking-tight', className)}
       {...props}
     />
   );
@@ -95,7 +95,7 @@ function DrawerDescription({
   return (
     <DrawerPrimitive.Description
       data-slot="drawer-description"
-      className={cn('text-sm text-muted-foreground', className)}
+      className={cn('text-muted-foreground text-sm', className)}
       {...props}
     />
   );
diff --git a/apps/admin/src/shared/ui/DropdownMenu.tsx b/apps/admin/src/shared/ui/DropdownMenu.tsx
index 48a7b45..28f411d 100755
--- a/apps/admin/src/shared/ui/DropdownMenu.tsx
+++ b/apps/admin/src/shared/ui/DropdownMenu.tsx
@@ -1,8 +1,8 @@
 'use client';
 
-import * as React from 'react';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { Check, ChevronRight, Circle } from 'lucide-react';
+import * as React from 'react';
 import { cn } from '@crux-kit/utils';
 
 function DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
@@ -39,11 +39,11 @@ function DropdownMenuSubTrigger({
     <DropdownMenuPrimitive.SubTrigger
       data-slot="dropdown-menu-sub-trigger"
       className={cn(
-        'flex cursor-default gap-2 select-none items-center rounded-md px-2 py-1.5 text-sm outline-hidden',
+        'flex cursor-default items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-hidden select-none',
         'focus:bg-accent focus:text-foreground',
         'data-[state=open]:bg-accent data-[state=open]:text-foreground',
         'data-[here=true]:bg-accent data-[here=true]:text-foreground',
-        '[&>svg]:pointer-events-none [&_svg:not([role=img]):not([class*=text-])]:opacity-60 [&>svg]:size-4 [&>svg]:shrink-0',
+        '[&_svg:not([role=img]):not([class*=text-])]:opacity-60 [&>svg]:pointer-events-none [&>svg]:size-4 [&>svg]:shrink-0',
         inset && 'ps-8',
         className
       )}
@@ -66,7 +66,7 @@ function DropdownMenuSubContent({
     <DropdownMenuPrimitive.SubContent
       data-slot="dropdown-menu-sub-content"
       className={cn(
-        'space-y-0.5 z-50 min-w-32 overflow-hidden shadow-md shadow-black/5 rounded-md border border-border bg-popover text-popover-foreground p-2 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'border-border bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 space-y-0.5 overflow-hidden rounded-md border p-2 shadow-md shadow-black/5',
         className
       )}
       {...props}
@@ -85,7 +85,7 @@ function DropdownMenuContent({
         data-slot="dropdown-menu-content"
         sideOffset={sideOffset}
         className={cn(
-          'space-y-0.5 z-50 min-w-32 overflow-hidden rounded-md border border-border bg-popover p-2 text-popover-foreground shadow-md shadow-black/5 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          'border-border bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 space-y-0.5 overflow-hidden rounded-md border p-2 shadow-md shadow-black/5',
           className
         )}
         {...props}
@@ -111,7 +111,7 @@ function DropdownMenuItem({
     <DropdownMenuPrimitive.Item
       data-slot="dropdown-menu-item"
       className={cn(
-        'text-foreground relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-hidden transition-colors data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([role=img]):not([class*=text-])]:opacity-60 [&_svg:not([class*=size-])]:size-4 [&_svg]:shrink-0',
+        'text-foreground relative flex cursor-default items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4 [&_svg:not([role=img]):not([class*=text-])]:opacity-60',
         'focus:bg-accent focus:text-foreground',
         'data-[active=true]:bg-accent data-[active=true]:text-accent-foreground',
         inset && 'ps-8',
@@ -134,15 +134,15 @@ function DropdownMenuCheckboxItem({
     <DropdownMenuPrimitive.CheckboxItem
       data-slot="dropdown-menu-checkbox-item"
       className={cn(
-        'relative flex cursor-default select-none items-center rounded-md py-1.5 ps-8 pe-2 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
+        'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-md py-1.5 ps-8 pe-2 text-sm outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50',
         className
       )}
       checked={checked}
       {...props}
     >
-      <span className="absolute start-2 flex h-3.5 w-3.5 items-center text-muted-foreground justify-center">
+      <span className="text-muted-foreground absolute start-2 flex h-3.5 w-3.5 items-center justify-center">
         <DropdownMenuPrimitive.ItemIndicator>
-          <Check className="h-4 w-4 text-primary" />
+          <Check className="text-primary h-4 w-4" />
         </DropdownMenuPrimitive.ItemIndicator>
       </span>
       {children}
@@ -159,14 +159,14 @@ function DropdownMenuRadioItem({
     <DropdownMenuPrimitive.RadioItem
       data-slot="dropdown-menu-radio-item"
       className={cn(
-        'relative flex cursor-default select-none items-center rounded-md py-1.5 ps-6 pe-2 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
+        'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-md py-1.5 ps-6 pe-2 text-sm outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50',
         className
       )}
       {...props}
     >
       <span className="absolute start-1.5 flex h-3.5 w-3.5 items-center justify-center">
         <DropdownMenuPrimitive.ItemIndicator>
-          <Circle className="h-1.5 w-1.5 fill-primary stroke-primary" />
+          <Circle className="fill-primary stroke-primary h-1.5 w-1.5" />
         </DropdownMenuPrimitive.ItemIndicator>
       </span>
       {children}
@@ -185,7 +185,7 @@ function DropdownMenuLabel({
     <DropdownMenuPrimitive.Label
       data-slot="dropdown-menu-label"
       className={cn(
-        'px-2 py-1.5 text-xs text-muted-foreground font-medium',
+        'text-muted-foreground px-2 py-1.5 text-xs font-medium',
         inset && 'ps-8',
         className
       )}
@@ -207,7 +207,7 @@ function DropdownMenuSeparator({
   return (
     <DropdownMenuPrimitive.Separator
       data-slot="dropdown-menu-separator"
-      className={cn('-mx-2 my-1.5 h-px bg-muted', className)}
+      className={cn('bg-muted -mx-2 my-1.5 h-px', className)}
       {...props}
     />
   );
diff --git a/apps/admin/src/shared/ui/FilePickerButton.tsx b/apps/admin/src/shared/ui/FilePickerButton.tsx
index c366186..237ca11 100644
--- a/apps/admin/src/shared/ui/FilePickerButton.tsx
+++ b/apps/admin/src/shared/ui/FilePickerButton.tsx
@@ -66,12 +66,12 @@ export const FilePickerButton: React.FC<Props> = ({
             )}
           >
             <File className="size-4 shrink-0 opacity-60" />
-            <span className="truncate text-start grow">{displayText}</span>
+            <span className="grow truncate text-start">{displayText}</span>
 
             <div className="flex items-center gap-1">
               {hasMultiple && (
                 <span
-                  className="ml-auto flex size-4.5 shrink-0 items-center justify-center rounded-full bg-mono text-2xs font-medium text-mono-foreground"
+                  className="bg-mono text-2xs text-mono-foreground ml-auto flex size-4.5 shrink-0 items-center justify-center rounded-full font-medium"
                   aria-label={intl.formatMessage(
                     { id: 'COMPONENT.FILE_INPUT.SELECTED_NUM_OF_FILES' },
                     { num: selectedCount }
@@ -117,14 +117,14 @@ export const FilePickerButton: React.FC<Props> = ({
           </PopoverTrigger>
           <PopoverContent align="end" className="w-72 p-2">
             <div className="space-y-1">
-              <p className="px-2 py-1 text-xs font-medium text-muted-foreground tracking-wide">
+              <p className="text-muted-foreground px-2 py-1 text-xs font-medium tracking-wide">
                 {intl.formatMessage({ id: 'COMPONENT.FILE_INPUT.SELECTED_FILES' })}
               </p>
-              <ul className="max-h-48 overflow-y-auto space-y-1">
+              <ul className="max-h-48 space-y-1 overflow-y-auto">
                 {selectedFiles.map((file, index) => (
                   <li
                     key={index}
-                    className="flex flex-col gap-1 px-2 py-1.5 border-l-2 border-transparent hover:bg-accent rounded-sm"
+                    className="hover:bg-accent flex flex-col gap-1 rounded-sm border-l-2 border-transparent px-2 py-1.5"
                   >
                     <div
                       className={
@@ -135,10 +135,10 @@ export const FilePickerButton: React.FC<Props> = ({
                     >
                       <div className="flex items-center gap-2">
                         {file.source === 'internal' && (
-                          <HardDrive className="size-3.5 shrink-0 text-muted-foreground" />
+                          <HardDrive className="text-muted-foreground size-3.5 shrink-0" />
                         )}
                         {file.source === 'external' && (
-                          <Cloud className="size-3.5 shrink-0 text-muted-foreground" />
+                          <Cloud className="text-muted-foreground size-3.5 shrink-0" />
                         )}
                         <span className="flex-1 truncate text-sm">{file.name}</span>
                         <Button
@@ -156,7 +156,7 @@ export const FilePickerButton: React.FC<Props> = ({
                         </Button>
                       </div>
                       {file.errors && file.errors.length > 0 && (
-                        <div className="ml-6 text-2xs text-destructive space-y-0.5">
+                        <div className="text-2xs text-destructive ml-6 space-y-0.5">
                           {file.errors.map((error, errorIndex) => (
                             <p key={errorIndex}>{error}</p>
                           ))}
diff --git a/apps/admin/src/shared/ui/FileTree/component.tsx b/apps/admin/src/shared/ui/FileTree/component.tsx
index 7cb41aa..1fcbb11 100644
--- a/apps/admin/src/shared/ui/FileTree/component.tsx
+++ b/apps/admin/src/shared/ui/FileTree/component.tsx
@@ -90,7 +90,7 @@ export const FileTreeSidebar: React.FC<
   React.PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>
 > = ({ children, className, ...props }) => {
   return (
-    <div className={cn('w-80 border-r border-border bg-card', className)} {...props}>
+    <div className={cn('border-border bg-card w-80 border-r', className)} {...props}>
       {children}
     </div>
   );
@@ -115,7 +115,7 @@ export const FileTreeSidebarHeader: React.FC<
 > = ({ children, className, ...props }) => {
   return (
     <div
-      className={cn('flex h-14 items-center border-b gap-1 border-border px-4', className)}
+      className={cn('border-border flex h-14 items-center gap-1 border-b px-4', className)}
       {...props}
     >
       {children}
@@ -128,7 +128,7 @@ export const FileTreeSidebarTitle: React.FC<
   React.PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>
 > = ({ children, className, ...props }) => {
   return (
-    <div className={cn('flex-1 text-base font-medium text-foreground', className)} {...props}>
+    <div className={cn('text-foreground flex-1 text-base font-medium', className)} {...props}>
       {children}
     </div>
   );
@@ -143,7 +143,7 @@ export const FileTreeBody: React.FC<
   >
 > = ({ children, className, disableFallback = false, ...props }) => {
   return (
-    <div className={cn('flex-1 bg-background', className)} {...props}>
+    <div className={cn('bg-background flex-1', className)} {...props}>
       {children ? children : disableFallback === true ? children : <FileTreeBodyFallback />}
     </div>
   );
@@ -158,8 +158,8 @@ export const FileTreeBodyFallback: React.FC<
   return (
     <div className={cn('flex h-full items-center justify-center', className)} {...props}>
       <div className="text-center">
-        <Folder strokeWidth={1} className="mx-auto h-12 w-12 text-muted-foreground" />
-        <p className="mt-4 text-sm text-muted-foreground">
+        <Folder strokeWidth={1} className="text-muted-foreground mx-auto h-12 w-12" />
+        <p className="text-muted-foreground mt-4 text-sm">
           {intl.formatMessage({ id: 'COMMON.SELECT_FILE_TO_VIEW_ITS_CONTENT' })}
         </p>
       </div>
@@ -190,12 +190,12 @@ export const FileTreeItem: React.FC<{
           data-open={isOpen}
           data-node="dir"
           className={cn(
-            'flex w-full group items-center gap-2 rounded-md',
-            'px-2 py-1.5 text-sm hover:bg-accent',
+            'group flex w-full items-center gap-2 rounded-md',
+            'hover:bg-accent px-2 py-1.5 text-sm',
             className
           )}
         >
-          <ChevronRight className="size-4 text-muted-foreground transition-transform duration-150 group-data-[open=true]:rotate-90" />
+          <ChevronRight className="text-muted-foreground size-4 transition-transform duration-150 group-data-[open=true]:rotate-90" />
 
           {isOpen ? (
             <FolderOpen className="size-4 text-blue-500" />
@@ -228,12 +228,12 @@ export const FileTreeItem: React.FC<{
       data-node="file"
       className={cn(
         'flex w-full items-center gap-2 rounded-md px-2 py-1.5',
-        'text-sm hover:bg-accent data-[selected=true]:bg-accent',
+        'hover:bg-accent data-[selected=true]:bg-accent text-sm',
         className
       )}
     >
       <div className="w-4" />
-      <File className="size-4 text-muted-foreground shrink-0" />
+      <File className="text-muted-foreground size-4 shrink-0" />
       <span className="text-foreground line-clamp-1">{node.label}</span>
 
       {children && React.cloneElement(children, { node })}
diff --git a/apps/admin/src/shared/ui/GridPicker.tsx b/apps/admin/src/shared/ui/GridPicker.tsx
index 9c7f457..5c64d9a 100755
--- a/apps/admin/src/shared/ui/GridPicker.tsx
+++ b/apps/admin/src/shared/ui/GridPicker.tsx
@@ -46,7 +46,7 @@ export const GridPicker: React.FC<GridPickerProps> = ({
           <PopoverClose key={`${col}-${row}`}>
             <div
               className={cn(
-                'size-4 outline outline-input cursor-pointer transition-colors',
+                'outline-input size-4 cursor-pointer outline transition-colors',
                 isHighlighted ? 'bg-primary' : 'bg-background'
               )}
               onMouseEnter={() => handleCellHover(col, row)}
@@ -67,16 +67,16 @@ export const GridPicker: React.FC<GridPickerProps> = ({
         ) : (
           <Button variant="outline" type="button" {...triggerProps}>
             <div className="flex items-center gap-2">
-              <Grid3X3 className="w-4 h-4" />
+              <Grid3X3 className="h-4 w-4" />
               <span>
                 Table Size: {selectedCols} x {selectedRows}
               </span>
             </div>
-            <ChevronDown className="w-4 h-4" />
+            <ChevronDown className="h-4 w-4" />
           </Button>
         )}
       </PopoverTrigger>
-      <PopoverContent className="w-auto p-0 overflow-hidden" align="start">
+      <PopoverContent className="w-auto overflow-hidden p-0" align="start">
         <div
           className="grid grid-cols-10"
           onMouseLeave={() => {
@@ -86,7 +86,7 @@ export const GridPicker: React.FC<GridPickerProps> = ({
         >
           {renderGrid()}
         </div>
-        <div className="text-xs text-secondary-foreground text-center">
+        <div className="text-secondary-foreground text-center text-xs">
           {hoveredCols > 0 && hoveredRows > 0
             ? `${hoveredCols} x ${hoveredRows} table`
             : 'Hover to preview size'}
diff --git a/apps/admin/src/shared/ui/HoverCard.tsx b/apps/admin/src/shared/ui/HoverCard.tsx
index f4eb872..13a1477 100755
--- a/apps/admin/src/shared/ui/HoverCard.tsx
+++ b/apps/admin/src/shared/ui/HoverCard.tsx
@@ -1,7 +1,7 @@
 'use client';
 
-import * as React from 'react';
 import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
+import * as React from 'react';
 import { cn } from '@crux-kit/utils';
 
 function HoverCard({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
@@ -24,7 +24,7 @@ function HoverCardContent({
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        'z-50 w-64 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md shadow-black/5 outline-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'border-border bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 rounded-md border p-4 shadow-md shadow-black/5 outline-hidden',
         className
       )}
       {...props}
diff --git a/apps/admin/src/shared/ui/Input.tsx b/apps/admin/src/shared/ui/Input.tsx
index 183251a..c53512d 100755
--- a/apps/admin/src/shared/ui/Input.tsx
+++ b/apps/admin/src/shared/ui/Input.tsx
@@ -1,6 +1,6 @@
-import * as React from 'react';
 import { cva, type VariantProps } from 'class-variance-authority';
 import { Eye, EyeOff } from 'lucide-react';
+import * as React from 'react';
 import { cn } from '@crux-kit/utils';
 import { Button } from './Button';
 
@@ -140,7 +140,7 @@ export function InputPassword({ className, ...props }: Omit<InputProps, 'type'>)
         variant="ghost"
         mode="icon"
         onClick={() => setPasswordVisible(!passwordVisible)}
-        className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
+        className="absolute top-0 right-0 h-full px-3 py-2 hover:bg-transparent"
       >
         {passwordVisible ? (
           <EyeOff className="text-muted-foreground" />
diff --git a/apps/admin/src/shared/ui/InputOTP.tsx b/apps/admin/src/shared/ui/InputOTP.tsx
index 9fc315e..8af4cb1 100755
--- a/apps/admin/src/shared/ui/InputOTP.tsx
+++ b/apps/admin/src/shared/ui/InputOTP.tsx
@@ -1,8 +1,8 @@
 'use client';
 
-import * as React from 'react';
 import { OTPInput, OTPInputContext } from 'input-otp';
 import { Dot } from 'lucide-react';
+import * as React from 'react';
 import { cn } from '@crux-kit/utils';
 
 function InputOTP({
@@ -38,8 +38,8 @@ function InputOTPSlot({
     <div
       data-slot="input-otp-slot"
       className={cn(
-        'relative flex h-10 w-10 items-center justify-center border-y border-e border-input text-sm transition-all first:rounded-s-md first:border-s last:rounded-e-md outline-hidden focus:border-ring',
-        isActive && 'z-10 ring-2 ring-ring ring-offset-background',
+        'border-input focus:border-ring relative flex h-10 w-10 items-center justify-center border-y border-e text-sm outline-hidden transition-all first:rounded-s-md first:border-s last:rounded-e-md',
+        isActive && 'ring-ring ring-offset-background z-10 ring-2',
         className
       )}
       {...props}
@@ -47,7 +47,7 @@ function InputOTPSlot({
       {char}
       {hasFakeCaret && (
         <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
+          <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
         </div>
       )}
     </div>
diff --git a/apps/admin/src/shared/ui/KBD.tsx b/apps/admin/src/shared/ui/KBD.tsx
index 9374827..a431193 100755
--- a/apps/admin/src/shared/ui/KBD.tsx
+++ b/apps/admin/src/shared/ui/KBD.tsx
@@ -1,7 +1,7 @@
 'use client';
 
-import * as React from 'react';
 import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
 import { cn } from '@crux-kit/utils';
 
 const kbdVariants = cva('inline-flex items-center justify-center font-mono rounded-md shrink-0', {
diff --git a/apps/admin/src/shared/ui/Label.tsx b/apps/admin/src/shared/ui/Label.tsx
index da8e39c..6762a1a 100755
--- a/apps/admin/src/shared/ui/Label.tsx
+++ b/apps/admin/src/shared/ui/Label.tsx
@@ -1,8 +1,8 @@
 'use client';
 
-import * as React from 'react';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
 import { cn } from '@crux-kit/utils';
 
 const labelVariants = cva(
diff --git a/apps/admin/src/shared/ui/Marquee.tsx b/apps/admin/src/shared/ui/Marquee.tsx
index be060f6..2bddd0a 100755
--- a/apps/admin/src/shared/ui/Marquee.tsx
+++ b/apps/admin/src/shared/ui/Marquee.tsx
@@ -126,7 +126,7 @@ export function Marquee({
       ref={marqueeRef}
       data-slot="marquee"
       className={cn(
-        'group flex min-w-0 max-w-full overflow-hidden p-2 [--duration:40s] [--gap:1rem] gap-(--gap)',
+        'group flex max-w-full min-w-0 gap-(--gap) overflow-hidden p-2 [--duration:40s] [--gap:1rem]',
         {
           'flex-row': !vertical,
           'flex-col': vertical
diff --git a/apps/admin/src/shared/ui/MenuBar.tsx b/apps/admin/src/shared/ui/MenuBar.tsx
index f89f8e7..dfd33ec 100755
--- a/apps/admin/src/shared/ui/MenuBar.tsx
+++ b/apps/admin/src/shared/ui/MenuBar.tsx
@@ -1,8 +1,8 @@
 'use client';
 
-import * as React from 'react';
 import * as MenubarPrimitive from '@radix-ui/react-menubar';
 import { Check, ChevronRight, Circle } from 'lucide-react';
+import * as React from 'react';
 import { cn } from '@crux-kit/utils';
 
 function MenubarMenu({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
@@ -29,7 +29,7 @@ function Menubar({
     <MenubarPrimitive.Root
       data-slot="menubar"
       className={cn(
-        'flex h-10 items-center space-x-1 rounded-md border bg-background p-1',
+        'bg-background flex h-10 items-center space-x-1 rounded-md border p-1',
         className
       )}
       {...props}
@@ -45,10 +45,10 @@ function MenubarTrigger({
     <MenubarPrimitive.Trigger
       data-slot="menubar-trigger"
       className={cn(
-        'flex cursor-pointer select-none items-center rounded-md px-3 py-1.5 text-sm font-medium outline-hidden',
+        'flex cursor-pointer items-center rounded-md px-3 py-1.5 text-sm font-medium outline-hidden select-none',
         'focus:bg-accent focus:text-accent-foreground',
         'data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
-        '[&>svg]:pointer-events-none [&_svg:not([role=img]):not([class*=text-])]:opacity-60 [&_svg:not([class*=size-])]:size-4 [&>svg]:shrink-0',
+        '[&_svg:not([class*=size-])]:size-4 [&_svg:not([role=img]):not([class*=text-])]:opacity-60 [&>svg]:pointer-events-none [&>svg]:shrink-0',
         'data-[here=true]:bg-accent',
         className
       )}
@@ -69,10 +69,10 @@ function MenubarSubTrigger({
     <MenubarPrimitive.SubTrigger
       data-slot="menubar-sub-tirgger"
       className={cn(
-        'flex cursor-pointer select-none items-center rounded-md px-2 py-1.5 text-sm outline-hidden',
+        'flex cursor-pointer items-center rounded-md px-2 py-1.5 text-sm outline-hidden select-none',
         'focus:bg-accent focus:text-accent-foreground',
         'data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
-        '[&>svg]:pointer-events-none [&_svg:not([role=img]):not([class*=text-])]:opacity-60 [&_svg:not([class*=size-])]:size-4 [&>svg]:shrink-0',
+        '[&_svg:not([class*=size-])]:size-4 [&_svg:not([role=img]):not([class*=text-])]:opacity-60 [&>svg]:pointer-events-none [&>svg]:shrink-0',
         'data-[here=true]:bg-accent data-[here=true]:text-accent-foreground',
         inset && 'ps-8',
         className
@@ -93,7 +93,7 @@ function MenubarSubContent({
     <MenubarPrimitive.SubContent
       data-slot="menubar-sub-content"
       className={cn(
-        'space-y-0.5 z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-2 text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 space-y-0.5 overflow-hidden rounded-md border p-2',
         className
       )}
       {...props}
@@ -116,7 +116,7 @@ function MenubarContent({
         alignOffset={alignOffset}
         sideOffset={sideOffset}
         className={cn(
-          'space-y-0.5 z-50 min-w-48 overflow-hidden rounded-md border border-border bg-popover p-2 text-popover-foreground shadow-md shadow-black/5 transition-shadow data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          'border-border bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-48 space-y-0.5 overflow-hidden rounded-md border p-2 shadow-md shadow-black/5 transition-shadow',
           className
         )}
         {...props}
@@ -136,7 +136,7 @@ function MenubarItem({
     <MenubarPrimitive.Item
       data-slot="menubar-item"
       className={cn(
-        'relative flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-sm outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50',
+        'relative flex cursor-default items-center rounded-md px-2 py-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50',
         'focus:bg-accent focus:text-accent-foreground',
         'data-[active=true]:bg-accent data-[active=true]:text-accent-foreground',
         inset && 'ps-8',
@@ -157,7 +157,7 @@ function MenubarCheckboxItem({
     <MenubarPrimitive.CheckboxItem
       data-slot="menubar-checkbox-item"
       className={cn(
-        'relative flex cursor-default select-none items-center rounded-md py-1.5 ps-8 pe-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
+        'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-md py-1.5 ps-8 pe-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50',
         className
       )}
       checked={checked}
@@ -165,7 +165,7 @@ function MenubarCheckboxItem({
     >
       <span className="absolute start-2 flex h-3.5 w-3.5 items-center justify-center">
         <MenubarPrimitive.ItemIndicator>
-          <Check className="h-4 w-4 text-primary" />
+          <Check className="text-primary h-4 w-4" />
         </MenubarPrimitive.ItemIndicator>
       </span>
       {children}
@@ -182,7 +182,7 @@ function MenubarRadioItem({
     <MenubarPrimitive.RadioItem
       data-slot="menubar-radio-item"
       className={cn(
-        'relative flex cursor-default select-none items-center rounded-md py-1.5 ps-8 pe-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
+        'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-md py-1.5 ps-8 pe-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50',
         className
       )}
       {...props}
@@ -220,7 +220,7 @@ function MenubarSeparator({
   return (
     <MenubarPrimitive.Separator
       data-slot="menubar-separator"
-      className={cn('-mx-2 my-1.5 h-px bg-muted', className)}
+      className={cn('bg-muted -mx-2 my-1.5 h-px', className)}
       {...props}
     />
   );
@@ -234,7 +234,7 @@ const MenubarShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanE
   return (
     <span
       data-slot="menubar-shortcut"
-      className={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)}
+      className={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)}
       {...props}
     />
   );
diff --git a/apps/admin/src/shared/ui/Multiselect.tsx b/apps/admin/src/shared/ui/Multiselect.tsx
index f296047..3b4ec28 100755
--- a/apps/admin/src/shared/ui/Multiselect.tsx
+++ b/apps/admin/src/shared/ui/Multiselect.tsx
@@ -596,7 +596,7 @@ const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>((props, r
           disabled={disabled}
           role="combobox"
           className={cn(
-            'min-h-8.5 h-auto',
+            'h-auto min-h-8.5',
             autoSize ? 'w-auto' : 'w-full',
             screenSize === 'mobile' && 'min-h-12 text-base',
             className,
@@ -608,11 +608,11 @@ const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>((props, r
           }}
         >
           {selectedValues.length > 0 ? (
-            <div className="flex justify-between items-center w-full">
+            <div className="flex w-full items-center justify-between">
               <div
                 className={cn(
                   'flex items-center',
-                  singleLine ? 'overflow-x-auto gap-1 pb-3 -mb-3' : 'flex-wrap'
+                  singleLine ? '-mb-3 gap-1 overflow-x-auto pb-3' : 'flex-wrap'
                 )}
               >
                 {selectedValues
@@ -640,7 +640,7 @@ const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>((props, r
                         size="md"
                         className={cn(
                           multiSelectVariants({ variant }),
-                          customStyle?.gradient && 'text-white border-transparent',
+                          customStyle?.gradient && 'border-transparent text-white',
                           screenSize === 'mobile' && 'max-w-30 truncate',
                           singleLine && 'shrink-0 whitespace-nowrap',
                           '[&>svg]:pointer-events-auto'
@@ -654,7 +654,7 @@ const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>((props, r
                         {IconComponent && !responsiveSettings.hideIcons && (
                           <IconComponent
                             className={cn(
-                              'w-full h-full mr-2',
+                              'mr-2 h-full w-full',
                               customStyle?.iconColor && 'text-current'
                             )}
                             {...(customStyle?.iconColor && {
@@ -679,7 +679,7 @@ const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>((props, r
                               toggleOption(value);
                             }
                           }}
-                          className="ml-2 size-4 flex items-center justify-center cursor-pointer rounded-sm focus:outline-none focus:ring-1 focus:ring-white/50"
+                          className="ml-2 flex size-4 cursor-pointer items-center justify-center rounded-sm focus:ring-1 focus:ring-white/50 focus:outline-none"
                         >
                           <XCircle className="size-3.5" />
                         </div>
@@ -691,7 +691,7 @@ const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>((props, r
                   <Badge
                     size="md"
                     className={cn(
-                      'bg-transparent text-foreground border-foreground/1 hover:bg-transparent',
+                      'text-foreground border-foreground/1 bg-transparent hover:bg-transparent',
                       multiSelectVariants({ variant }),
                       singleLine && 'shrink-0 whitespace-nowrap',
                       '[&>svg]:pointer-events-auto'
@@ -715,14 +715,14 @@ const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>((props, r
                         event.stopPropagation();
                         clearExtraOptions();
                       }}
-                      className="ml-2 size-4 flex items-center justify-center cursor-pointer rounded-sm focus:outline-none focus:ring-1 focus:ring-white/50"
+                      className="ml-2 flex size-4 cursor-pointer items-center justify-center rounded-sm focus:ring-1 focus:ring-white/50 focus:outline-none"
                     >
                       <XCircle className="size-3.5" />
                     </div>
                   </Badge>
                 )}
               </div>
-              <div className="flex items-center gap-2 justify-between">
+              <div className="flex items-center justify-between gap-2">
                 <div
                   role="button"
                   tabIndex={0}
@@ -737,20 +737,20 @@ const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>((props, r
                       handleClear();
                     }
                   }}
-                  className="flex items-center justify-center ml-3 h-4 w-4 cursor-pointer text-muted-foreground hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1 rounded-sm"
+                  className="text-muted-foreground hover:text-foreground focus:ring-ring ml-3 flex h-4 w-4 cursor-pointer items-center justify-center rounded-sm focus:ring-2 focus:ring-offset-1 focus:outline-none"
                 >
                   <XIcon className="h-4 w-4" />
                 </div>
-                <Separator orientation="vertical" className="flex min-h-6 h-full" />
-                <ChevronDown className="h-4 cursor-pointer text-muted-foreground" />
+                <Separator orientation="vertical" className="flex h-full min-h-6" />
+                <ChevronDown className="text-muted-foreground h-4 cursor-pointer" />
               </div>
             </div>
           ) : (
-            <div className="flex items-center justify-between w-full mx-auto">
-              <span className="text-sm text-muted-foreground mx-3">
+            <div className="mx-auto flex w-full items-center justify-between">
+              <span className="text-muted-foreground mx-3 text-sm">
                 {placeholder || intl.formatMessage({ id: 'SELECT_OPTION' })}
               </span>
-              <ChevronDown className="h-4 cursor-pointer text-muted-foreground" />
+              <ChevronDown className="text-muted-foreground h-4 cursor-pointer" />
             </div>
           )}
         </Button>
@@ -788,7 +788,7 @@ const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>((props, r
 
             <CommandList
               className={cn(
-                'max-h-[40vh] overflow-y-auto multiselect-scrollbar',
+                'multiselect-scrollbar max-h-[40vh] overflow-y-auto',
                 screenSize === 'mobile' && 'max-h-[50vh]',
                 'overscroll-behavior-y-contain'
               )}
@@ -806,7 +806,7 @@ const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>((props, r
                   >
                     <div
                       className={cn(
-                        'mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary',
+                        'border-primary mr-2 flex h-4 w-4 items-center justify-center rounded-sm border',
                         selectedValues.length ===
                           getAllOptions().filter((opt) => !opt.disabled).length
                           ? 'bg-primary text-primary-foreground'
@@ -838,13 +838,13 @@ const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>((props, r
                           role="option"
                           className={cn(
                             'cursor-pointer',
-                            option.disabled && 'opacity-50 cursor-not-allowed'
+                            option.disabled && 'cursor-not-allowed opacity-50'
                           )}
                           disabled={option.disabled}
                         >
                           <div
                             className={cn(
-                              'mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary',
+                              'border-primary mr-2 flex h-4 w-4 items-center justify-center rounded-sm border',
                               isSelected
                                 ? 'bg-primary text-primary-foreground'
                                 : 'opacity-50 [&_svg]:invisible'
@@ -853,7 +853,7 @@ const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>((props, r
                             <CheckIcon className="h-4 w-4" />
                           </div>
                           {option.icon && (
-                            <option.icon className="mr-2 h-4 w-4 text-muted-foreground" />
+                            <option.icon className="text-muted-foreground mr-2 h-4 w-4" />
                           )}
                           <span>{option.label}</span>
                         </CommandItem>
@@ -872,13 +872,13 @@ const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>((props, r
                         role="option"
                         className={cn(
                           'cursor-pointer',
-                          option.disabled && 'opacity-50 cursor-not-allowed'
+                          option.disabled && 'cursor-not-allowed opacity-50'
                         )}
                         disabled={option.disabled}
                       >
                         <div
                           className={cn(
-                            'mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary',
+                            'border-primary mr-2 flex h-4 w-4 items-center justify-center rounded-sm border',
                             isSelected
                               ? 'bg-primary text-primary-foreground'
                               : 'opacity-50 [&_svg]:invisible'
@@ -887,7 +887,7 @@ const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>((props, r
                           <CheckIcon className="h-4 w-4" />
                         </div>
                         {option.icon && (
-                          <option.icon className="mr-2 h-4 w-4 text-muted-foreground" />
+                          <option.icon className="text-muted-foreground mr-2 h-4 w-4" />
                         )}
                         <span>{option.label}</span>
                       </CommandItem>
@@ -902,16 +902,16 @@ const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>((props, r
                     <React.Fragment>
                       <CommandItem
                         onSelect={handleClear}
-                        className="flex-1 justify-center cursor-pointer"
+                        className="flex-1 cursor-pointer justify-center"
                       >
                         {intl.formatMessage({ id: 'ACTION.CLEAR' })}
                       </CommandItem>
-                      <Separator orientation="vertical" className="flex min-h-6 h-full" />
+                      <Separator orientation="vertical" className="flex h-full min-h-6" />
                     </React.Fragment>
                   )}
                   <CommandItem
                     onSelect={() => setIsPopoverOpen(false)}
-                    className="flex-1 justify-center cursor-pointer max-w-full"
+                    className="max-w-full flex-1 cursor-pointer justify-center"
                   >
                     {intl.formatMessage({ id: 'ACTION.CLOSE' })}
                   </CommandItem>
diff --git a/apps/admin/src/shared/ui/NavigationMenu.tsx b/apps/admin/src/shared/ui/NavigationMenu.tsx
index af6a431..dd69e9b 100755
--- a/apps/admin/src/shared/ui/NavigationMenu.tsx
+++ b/apps/admin/src/shared/ui/NavigationMenu.tsx
@@ -1,9 +1,9 @@
 'use client';
 
-import * as React from 'react';
 import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
 import { cva } from 'class-variance-authority';
 import { ChevronDownIcon } from 'lucide-react';
+import * as React from 'react';
 import { cn } from '@crux-kit/utils';
 
 function NavigationMenu({
@@ -113,7 +113,7 @@ function NavigationMenuViewport({
       <NavigationMenuPrimitive.Viewport
         data-slot="navigation-menu-viewport"
         className={cn(
-          'shadow-md shadow-black/5 rounded-md border border-border bg-popover text-popover-foreground p-1.5 origin-top-center data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-full overflow-hidden md:w-(--radix-navigation-menu-viewport-width)',
+          'border-border bg-popover text-popover-foreground origin-top-center data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-full overflow-hidden rounded-md border p-1.5 shadow-md shadow-black/5 md:w-(--radix-navigation-menu-viewport-width)',
           className
         )}
         {...props}
@@ -151,7 +151,7 @@ function NavigationMenuIndicator({
       )}
       {...props}
     >
-      <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-ts-md shadow-md" />
+      <div className="bg-border rounded-ts-md relative top-[60%] h-2 w-2 rotate-45 shadow-md" />
     </NavigationMenuPrimitive.Indicator>
   );
 }
diff --git a/apps/admin/src/shared/ui/Pagination.tsx b/apps/admin/src/shared/ui/Pagination.tsx
index 9e86ae5..c1c0369 100755
--- a/apps/admin/src/shared/ui/Pagination.tsx
+++ b/apps/admin/src/shared/ui/Pagination.tsx
@@ -1,7 +1,7 @@
 'use client';
 
-import * as React from 'react';
 import { MoreHorizontal } from 'lucide-react';
+import * as React from 'react';
 import { cn } from '@crux-kit/utils';
 
 const Pagination = ({ className, ...props }: React.ComponentProps<'nav'>) => (
diff --git a/apps/admin/src/shared/ui/Popover.tsx b/apps/admin/src/shared/ui/Popover.tsx
index f9043ac..95f8f58 100755
--- a/apps/admin/src/shared/ui/Popover.tsx
+++ b/apps/admin/src/shared/ui/Popover.tsx
@@ -1,7 +1,7 @@
 'use client';
 
-import * as React from 'react';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
+import * as React from 'react';
 import { cn } from '@crux-kit/utils';
 
 const PopoverClose = PopoverPrimitive.Close;
@@ -28,7 +28,7 @@ function PopoverContent({
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        'z-50 w-72 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md shadow-black/5 outline-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'border-border bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md shadow-black/5 outline-hidden',
         className
       )}
       {...props}
diff --git a/apps/admin/src/shared/ui/Progress.tsx b/apps/admin/src/shared/ui/Progress.tsx
index 230aac8..23cb35e 100755
--- a/apps/admin/src/shared/ui/Progress.tsx
+++ b/apps/admin/src/shared/ui/Progress.tsx
@@ -1,7 +1,7 @@
 'use client';
 
-import * as React from 'react';
 import * as ProgressPrimitive from '@radix-ui/react-progress';
+import * as React from 'react';
 import { cn } from '@crux-kit/utils';
 
 function Progress({
@@ -15,12 +15,12 @@ function Progress({
   return (
     <ProgressPrimitive.Root
       data-slot="progress"
-      className={cn('relative h-2 w-full overflow-hidden rounded-full bg-secondary', className)}
+      className={cn('bg-secondary relative h-2 w-full overflow-hidden rounded-full', className)}
       {...props}
     >
       <ProgressPrimitive.Indicator
         data-slot="progress-indicator"
-        className={cn('h-full w-full flex-1 bg-primary transition-all', indicatorClassName)}
+        className={cn('bg-primary h-full w-full flex-1 transition-all', indicatorClassName)}
         style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
       />
     </ProgressPrimitive.Root>
diff --git a/apps/admin/src/shared/ui/RadioGroup.tsx b/apps/admin/src/shared/ui/RadioGroup.tsx
index 4312d6e..e7800e8 100755
--- a/apps/admin/src/shared/ui/RadioGroup.tsx
+++ b/apps/admin/src/shared/ui/RadioGroup.tsx
@@ -1,9 +1,9 @@
 'use client';
 
-import * as React from 'react';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import { cva, VariantProps } from 'class-variance-authority';
 import { Circle } from 'lucide-react';
+import * as React from 'react';
 import { cn } from '@crux-kit/utils';
 
 type RadioVariant = 'primary' | 'mono';
diff --git a/apps/admin/src/shared/ui/Resizable.tsx b/apps/admin/src/shared/ui/Resizable.tsx
index 261231a..f16bcc6 100755
--- a/apps/admin/src/shared/ui/Resizable.tsx
+++ b/apps/admin/src/shared/ui/Resizable.tsx
@@ -1,7 +1,7 @@
 'use client';
 
-import React from 'react';
 import { GripVertical } from 'lucide-react';
+import React from 'react';
 import * as ResizablePrimitive from 'react-resizable-panels';
 import { cn } from '@crux-kit/utils';
 
@@ -28,13 +28,13 @@ const ResizableHandle = ({
   <ResizablePrimitive.PanelResizeHandle
     data-slot="resizable-handle"
     className={cn(
-      'relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90',
+      'bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90',
       className
     )}
     {...props}
   >
     {withHandle && (
-      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
+      <div className="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-sm border">
         <GripVertical className="h-2.5 w-2.5" />
       </div>
     )}
diff --git a/apps/admin/src/shared/ui/ScrollArea.tsx b/apps/admin/src/shared/ui/ScrollArea.tsx
index 859d861..3fa8a89 100755
--- a/apps/admin/src/shared/ui/ScrollArea.tsx
+++ b/apps/admin/src/shared/ui/ScrollArea.tsx
@@ -1,7 +1,7 @@
 'use client';
 
-import * as React from 'react';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import * as React from 'react';
 import { cn } from '@crux-kit/utils';
 
 function ScrollArea({
@@ -42,14 +42,14 @@ function ScrollBar({
       data-slot="scroll-area-scrollbar"
       orientation={orientation}
       className={cn(
-        'flex touch-none select-none transition-colors',
+        'flex touch-none transition-colors select-none',
         orientation === 'vertical' && 'h-full w-2 border-l border-l-transparent p-px',
         orientation === 'horizontal' && 'h-2 flex-col border-t border-t-transparent p-px',
         className
       )}
       {...props}
     >
-      <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+      <ScrollAreaPrimitive.ScrollAreaThumb className="bg-border relative flex-1 rounded-full" />
     </ScrollAreaPrimitive.ScrollAreaScrollbar>
   );
 }
diff --git a/apps/admin/src/shared/ui/Select.tsx b/apps/admin/src/shared/ui/Select.tsx
index 758719d..5df48af 100755
--- a/apps/admin/src/shared/ui/Select.tsx
+++ b/apps/admin/src/shared/ui/Select.tsx
@@ -1,10 +1,10 @@
 'use client';
 
-import * as React from 'react';
-import { isValidElement, ReactNode } from 'react';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import { cva, VariantProps } from 'class-variance-authority';
 import { Check, ChevronDown, ChevronUp } from 'lucide-react';
+import * as React from 'react';
+import { isValidElement, ReactNode } from 'react';
 import { cn } from '@crux-kit/utils';
 
 const SelectContext = React.createContext<{
@@ -84,7 +84,7 @@ function SelectTrigger({
       {children}
       {showChevron && (
         <SelectPrimitive.Icon asChild>
-          <ChevronDown className="h-4 w-4 opacity-60 -me-0.5" />
+          <ChevronDown className="-me-0.5 h-4 w-4 opacity-60" />
         </SelectPrimitive.Icon>
       )}
     </SelectPrimitive.Trigger>
@@ -132,7 +132,7 @@ function SelectContent({
       <SelectPrimitive.Content
         data-slot="select-content"
         className={cn(
-          'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border border-border bg-popover shadow-md shadow-black/5 text-secondary-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          'border-border bg-popover text-secondary-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border shadow-md shadow-black/5',
           position === 'popper' &&
             'data-[side=bottom]:translate-y-1.5 data-[side=left]:-translate-x-1.5 data-[side=right]:translate-x-1.5 data-[side=top]:-translate-y-1.5',
           className
@@ -163,7 +163,7 @@ function SelectLabel({
   return (
     <SelectPrimitive.Label
       data-slot="select-label"
-      className={cn('py-1.5 ps-8 pe-2 text-xs text-muted-foreground font-medium', className)}
+      className={cn('text-muted-foreground py-1.5 ps-8 pe-2 text-xs font-medium', className)}
       {...props}
     />
   );
@@ -177,8 +177,8 @@ function SelectItem({ className, children, ...props }: SelectItemProps) {
     <SelectPrimitive.Item
       data-slot="select-item"
       className={cn(
-        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 text-sm outline-hidden text-foreground hover:bg-accent focus:bg-accent data-disabled:pointer-events-none data-disabled:opacity-50',
-        indicatorPosition === 'left' ? 'ps-8 pe-2' : 'pe-8 ps-2',
+        'text-foreground hover:bg-accent focus:bg-accent relative flex w-full cursor-default items-center rounded-sm py-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50',
+        indicatorPosition === 'left' ? 'ps-8 pe-2' : 'ps-2 pe-8',
         className
       )}
       {...props}
@@ -194,7 +194,7 @@ function SelectItem({ className, children, ...props }: SelectItemProps) {
             )}
           >
             <SelectPrimitive.ItemIndicator>
-              <Check className="h-4 w-4 text-primary" />
+              <Check className="text-primary h-4 w-4" />
             </SelectPrimitive.ItemIndicator>
           </span>
         ))}
@@ -214,7 +214,7 @@ function SelectIndicator({
     <span
       data-slot="select-indicator"
       className={cn(
-        'absolute flex top-1/2 -translate-y-1/2 items-center justify-center',
+        'absolute top-1/2 flex -translate-y-1/2 items-center justify-center',
         indicatorPosition === 'left' ? 'start-2' : 'end-2',
         className
       )}
@@ -232,7 +232,7 @@ function SelectSeparator({
   return (
     <SelectPrimitive.Separator
       data-slot="select-separator"
-      className={cn('-mx-1.5 my-1.5 h-px bg-border', className)}
+      className={cn('bg-border -mx-1.5 my-1.5 h-px', className)}
       {...props}
     />
   );
diff --git a/apps/admin/src/shared/ui/Separator.tsx b/apps/admin/src/shared/ui/Separator.tsx
index 820763b..2ab2c04 100755
--- a/apps/admin/src/shared/ui/Separator.tsx
+++ b/apps/admin/src/shared/ui/Separator.tsx
@@ -1,7 +1,7 @@
 'use client';
 
-import * as React from 'react';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import * as React from 'react';
 import { cn } from '@crux-kit/utils';
 
 function Separator({
@@ -16,7 +16,7 @@ function Separator({
       decorative={decorative}
       orientation={orientation}
       className={cn(
-        'shrink-0 bg-border',
+        'bg-border shrink-0',
         orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px',
         className
       )}
diff --git a/apps/admin/src/shared/ui/Sheet.tsx b/apps/admin/src/shared/ui/Sheet.tsx
index 6dcc731..4b78681 100755
--- a/apps/admin/src/shared/ui/Sheet.tsx
+++ b/apps/admin/src/shared/ui/Sheet.tsx
@@ -1,9 +1,9 @@
 'use client';
 
-import * as React from 'react';
 import * as SheetPrimitive from '@radix-ui/react-dialog';
 import { cva, type VariantProps } from 'class-variance-authority';
 import { X } from 'lucide-react';
+import * as React from 'react';
 import { cn } from '@crux-kit/utils';
 
 function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
@@ -30,7 +30,7 @@ function SheetOverlay({
     <SheetPrimitive.Overlay
       data-slot="sheet-overlay"
       className={cn(
-        'fixed inset-0 z-50 bg-black/30 [backdrop-filter:blur(4px)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/30 [backdrop-filter:blur(4px)]',
         className
       )}
       {...props}
@@ -80,7 +80,7 @@ function SheetContent({
         {close && (
           <SheetPrimitive.Close
             data-slot="sheet-close"
-            className="cursor-pointer absolute inset-e-5 top-4 rounded-sm opacity-60 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary"
+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute inset-e-5 top-4 cursor-pointer rounded-sm opacity-60 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none"
           >
             <X className="h-4 w-4" />
             <span className="sr-only">Close</span>
@@ -118,7 +118,7 @@ function SheetTitle({
   return (
     <SheetPrimitive.Title
       data-slot="sheet-title"
-      className={cn('text-base font-semibold text-foreground', className)}
+      className={cn('text-foreground text-base font-semibold', className)}
       {...props}
     />
   );
@@ -131,7 +131,7 @@ function SheetDescription({
   return (
     <SheetPrimitive.Description
       data-slot="sheet-description"
-      className={cn('text-sm text-muted-foreground', className)}
+      className={cn('text-muted-foreground text-sm', className)}
       {...props}
     />
   );
diff --git a/apps/admin/src/shared/ui/Skeleton.tsx b/apps/admin/src/shared/ui/Skeleton.tsx
index ee9ae46..771b756 100755
--- a/apps/admin/src/shared/ui/Skeleton.tsx
+++ b/apps/admin/src/shared/ui/Skeleton.tsx
@@ -5,7 +5,7 @@ function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="skeleton"
-      className={cn('animate-pulse rounded-md bg-accent', className)}
+      className={cn('bg-accent animate-pulse rounded-md', className)}
       {...props}
     />
   );
diff --git a/apps/admin/src/shared/ui/Slider.tsx b/apps/admin/src/shared/ui/Slider.tsx
index 8217433..de153dc 100755
--- a/apps/admin/src/shared/ui/Slider.tsx
+++ b/apps/admin/src/shared/ui/Slider.tsx
@@ -1,7 +1,7 @@
 'use client';
 
-import * as React from 'react';
 import * as SliderPrimitive from '@radix-ui/react-slider';
+import * as React from 'react';
 import { cn } from '@crux-kit/utils';
 
 function Slider({
@@ -12,11 +12,11 @@ function Slider({
   return (
     <SliderPrimitive.Root
       data-slot="slider"
-      className={cn('relative flex h-4 w-full touch-none select-none items-center', className)}
+      className={cn('relative flex h-4 w-full touch-none items-center select-none', className)}
       {...props}
     >
-      <SliderPrimitive.Track className="relative h-1.5 w-full overflow-hidden rounded-full bg-accent">
-        <SliderPrimitive.Range className="absolute h-full bg-primary" />
+      <SliderPrimitive.Track className="bg-accent relative h-1.5 w-full overflow-hidden rounded-full">
+        <SliderPrimitive.Range className="bg-primary absolute h-full" />
       </SliderPrimitive.Track>
       {children}
     </SliderPrimitive.Root>
@@ -31,7 +31,7 @@ function SliderThumb({
     <SliderPrimitive.Thumb
       data-slot="slider-thumb"
       className={cn(
-        'box-content block size-4 shrink-0 cursor-pointer rounded-full border-2 border-primary bg-primary-foreground shadow-xs shadow-black/5 outline-hidden focus:outline-hidden',
+        'border-primary bg-primary-foreground box-content block size-4 shrink-0 cursor-pointer rounded-full border-2 shadow-xs shadow-black/5 outline-hidden focus:outline-hidden',
         className
       )}
       {...props}
diff --git a/apps/admin/src/shared/ui/Sonner.tsx b/apps/admin/src/shared/ui/Sonner.tsx
index bccfd98..a89ae73 100755
--- a/apps/admin/src/shared/ui/Sonner.tsx
+++ b/apps/admin/src/shared/ui/Sonner.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
 import { useTheme } from 'next-themes';
+import * as React from 'react';
 import { Toaster as Sonner } from 'sonner';
 import { cn } from '@crux-kit/utils';
 
diff --git a/apps/admin/src/shared/ui/Switch.tsx b/apps/admin/src/shared/ui/Switch.tsx
index 1596113..6c1c1e4 100755
--- a/apps/admin/src/shared/ui/Switch.tsx
+++ b/apps/admin/src/shared/ui/Switch.tsx
@@ -1,8 +1,8 @@
 'use client';
 
-import * as React from 'react';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
 import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
 import { cn } from '@crux-kit/utils';
 
 // Define a context for `permanent` state
diff --git a/apps/admin/src/shared/ui/Table.tsx b/apps/admin/src/shared/ui/Table.tsx
index a48d0e6..a48ec0e 100755
--- a/apps/admin/src/shared/ui/Table.tsx
+++ b/apps/admin/src/shared/ui/Table.tsx
@@ -8,7 +8,7 @@ function Table({ className, ...props }: React.HTMLAttributes<HTMLTableElement>)
     <div data-slot="table-wrapper" className="relative w-full overflow-auto">
       <table
         data-slot="table"
-        className={cn('w-full caption-bottom text-foreground text-sm', className)}
+        className={cn('text-foreground w-full caption-bottom text-sm', className)}
         {...props}
       />
     </div>
@@ -33,7 +33,7 @@ function TableFooter({ className, ...props }: React.HTMLAttributes<HTMLTableSect
   return (
     <tfoot
       data-slot="table-footer"
-      className={cn('border-t bg-muted/50 font-medium last:[&>tr]:border-b-0', className)}
+      className={cn('bg-muted/50 border-t font-medium last:[&>tr]:border-b-0', className)}
       {...props}
     />
   );
@@ -44,7 +44,7 @@ function TableRow({ className, ...props }: React.HTMLAttributes<HTMLTableRowElem
     <tr
       data-slot="table-row"
       className={cn(
-        'border-b transition-colors [&:has(td):hover]:bg-muted/50 data-[state=selected]:bg-muted',
+        '[&:has(td):hover]:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors',
         className
       )}
       {...props}
@@ -57,7 +57,7 @@ function TableHead({ className, ...props }: React.ThHTMLAttributes<HTMLTableCell
     <th
       data-slot="table-head"
       className={cn(
-        'h-12 px-4 text-left rtl:text-right align-middle font-normal text-muted-foreground [&:has([role=checkbox])]:pe-0',
+        'text-muted-foreground h-12 px-4 text-left align-middle font-normal rtl:text-right [&:has([role=checkbox])]:pe-0',
         className
       )}
       {...props}
@@ -79,7 +79,7 @@ function TableCaption({ className, ...props }: React.HTMLAttributes<HTMLTableCap
   return (
     <caption
       data-slot="table-caption"
-      className={cn('mt-4 text-sm text-muted-foreground', className)}
+      className={cn('text-muted-foreground mt-4 text-sm', className)}
       {...props}
     />
   );
diff --git a/apps/admin/src/shared/ui/Tabs.tsx b/apps/admin/src/shared/ui/Tabs.tsx
index 92251fa..62bdc5d 100755
--- a/apps/admin/src/shared/ui/Tabs.tsx
+++ b/apps/admin/src/shared/ui/Tabs.tsx
@@ -1,8 +1,8 @@
 'use client';
 
-import * as React from 'react';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
 import { cn } from '@crux-kit/utils';
 
 // Variants for TabsList
diff --git a/apps/admin/src/shared/ui/Textarea.tsx b/apps/admin/src/shared/ui/Textarea.tsx
index c60cdc1..26f092d 100755
--- a/apps/admin/src/shared/ui/Textarea.tsx
+++ b/apps/admin/src/shared/ui/Textarea.tsx
@@ -1,7 +1,7 @@
 'use client';
 
-import * as React from 'react';
 import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
 import { cn } from '@crux-kit/utils';
 
 // Define input size variants
diff --git a/apps/admin/src/shared/ui/TimeInput/TimeInput.tsx b/apps/admin/src/shared/ui/TimeInput/TimeInput.tsx
index 5bc6f1b..79b64c2 100755
--- a/apps/admin/src/shared/ui/TimeInput/TimeInput.tsx
+++ b/apps/admin/src/shared/ui/TimeInput/TimeInput.tsx
@@ -135,11 +135,11 @@ export const TimeInput = React.forwardRef<
     return (
       <Label
         className={cn(
-          'flex items-center h-8.5 px-3 text-[0.8125rem] [&_svg]:text-muted-foreground gap-1.5 [&_svg:not([class*=size-])]:size-4 leading-(--text-sm--line-height) rounded-md  focus-within:ring-[3px] disabled:cursor-not-allowed disabled:opacity-60 placeholder:text-muted-foreground/80 focus-within:ring-ring/30 focus-within:border-ring focus-within:outline-none w-full bg-background border border-input shadow-xs shadow-black/5 transition-[color,box-shadow] text-foreground',
+          '[&_svg]:text-muted-foreground placeholder:text-muted-foreground/80 focus-within:ring-ring/30 focus-within:border-ring bg-background border-input text-foreground flex h-8.5 w-full items-center gap-1.5 rounded-md border px-3 text-[0.8125rem] leading-(--text-sm--line-height) shadow-xs shadow-black/5 transition-[color,box-shadow] focus-within:ring-[3px] focus-within:outline-none disabled:cursor-not-allowed disabled:opacity-60 [&_svg:not([class*=size-])]:size-4',
           containerClassName
         )}
       >
-        <div className="flex items-center relative w-full gap-1">
+        <div className="relative flex w-full items-center gap-1">
           <Clock3Icon />
           <input
             ref={ref}
@@ -153,7 +153,7 @@ export const TimeInput = React.forwardRef<
             min={is12Hour(timeMode) ? 1 : 0}
             max={is12Hour(timeMode) ? 12 : 23}
             className={cn(
-              'bg-transparent w-7 text-right outline-none text-foreground typography-body-lg font-semibold tracking-widest',
+              'text-foreground typography-body-lg w-7 bg-transparent text-right font-semibold tracking-widest outline-none',
               className
             )}
             onChange={(e) => handleChangeHours(e.target.value)}
@@ -171,7 +171,7 @@ export const TimeInput = React.forwardRef<
             min={0}
             max={59}
             className={cn(
-              'bg-transparent w-7 text-left outline-none text-foreground typography-body-lg font-semibold tracking-widest',
+              'text-foreground typography-body-lg w-7 bg-transparent text-left font-semibold tracking-widest outline-none',
               className
             )}
             onBlur={onBlur}
@@ -181,23 +181,23 @@ export const TimeInput = React.forwardRef<
 
           {is12Hour(timeMode) && (
             <Popover>
-              <PopoverTrigger asChild className="absolute top-1/2 -translate-y-1/2 right-0">
+              <PopoverTrigger asChild className="absolute top-1/2 right-0 -translate-y-1/2">
                 <button
                   type="button"
-                  className="w-7 cursor-pointer text-center bg-transparent outline-none text-foreground typography-body-lg font-semibold tracking-widest"
+                  className="text-foreground typography-body-lg w-7 cursor-pointer bg-transparent text-center font-semibold tracking-widest outline-none"
                 >
                   {ampm.toUpperCase()}
                 </button>
               </PopoverTrigger>
               <PopoverContent
                 align="center"
-                className="isolate overflow-hidden p-0 w-10 border-input text-center bg-background rounded-sm shadow-soft"
+                className="border-input bg-background shadow-soft isolate w-10 overflow-hidden rounded-sm p-0 text-center"
               >
                 <div className="flex w-full flex-col">
                   <button
                     type="button"
                     onClick={() => handleChangeAmpm('am')}
-                    className={cn('w-full py-1 cursor-pointer hover:bg-accent', {
+                    className={cn('hover:bg-accent w-full cursor-pointer py-1', {
                       'bg-accent pointer-events-none': ampm === 'am'
                     })}
                   >
@@ -206,7 +206,7 @@ export const TimeInput = React.forwardRef<
                   <button
                     onClick={() => handleChangeAmpm('pm')}
                     type="button"
-                    className={cn('w-full py-1 cursor-pointer hover:bg-accent', {
+                    className={cn('hover:bg-accent w-full cursor-pointer py-1', {
                       'bg-accent pointer-events-none': ampm === 'pm'
                     })}
                   >
diff --git a/apps/admin/src/shared/ui/Toggle.tsx b/apps/admin/src/shared/ui/Toggle.tsx
index 4019e6c..269a394 100755
--- a/apps/admin/src/shared/ui/Toggle.tsx
+++ b/apps/admin/src/shared/ui/Toggle.tsx
@@ -1,8 +1,8 @@
 'use client';
 
-import * as React from 'react';
 import * as TogglePrimitive from '@radix-ui/react-toggle';
 import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
 import { cn } from '@crux-kit/utils';
 
 const toggleVariants = cva(
diff --git a/apps/admin/src/shared/ui/ToggleGroup.tsx b/apps/admin/src/shared/ui/ToggleGroup.tsx
index 8176cad..fa69dc9 100755
--- a/apps/admin/src/shared/ui/ToggleGroup.tsx
+++ b/apps/admin/src/shared/ui/ToggleGroup.tsx
@@ -24,7 +24,7 @@ function ToggleGroup({
       data-variant={variant}
       data-size={size}
       className={cn(
-        'group/toggle-group flex items-center rounded-md gap-1 data-[variant=outline]:gap-0 data-[variant=outline]:shadow-xs',
+        'group/toggle-group flex items-center gap-1 rounded-md data-[variant=outline]:gap-0 data-[variant=outline]:shadow-xs',
         className
       )}
       {...props}
@@ -55,7 +55,7 @@ function ToggleGroupItem({
           variant: context.variant || variant,
           size: context.size || size
         }),
-        'shrink-0 shadow-none data-[variant=outline]:rounded-none data-[variant=outline]:first:rounded-s-md data-[variant=outline]:last:rounded-e-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-s-0 data-[variant=outline]:first:border-s',
+        'shrink-0 shadow-none focus:z-10 focus-visible:z-10 data-[variant=outline]:rounded-none data-[variant=outline]:border-s-0 data-[variant=outline]:first:rounded-s-md data-[variant=outline]:first:border-s data-[variant=outline]:last:rounded-e-md',
         className
       )}
       {...props}
diff --git a/apps/admin/src/shared/ui/Tooltip.tsx b/apps/admin/src/shared/ui/Tooltip.tsx
index eb2de1d..6832abe 100755
--- a/apps/admin/src/shared/ui/Tooltip.tsx
+++ b/apps/admin/src/shared/ui/Tooltip.tsx
@@ -1,8 +1,8 @@
 'use client';
 
-import * as React from 'react';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
 import { cn } from '@crux-kit/utils';
 
 function TooltipProvider({
diff --git a/apps/admin/src/shared/ui/form.tsx b/apps/admin/src/shared/ui/form.tsx
index 3e8f00e..a5c159d 100755
--- a/apps/admin/src/shared/ui/form.tsx
+++ b/apps/admin/src/shared/ui/form.tsx
@@ -88,7 +88,7 @@ function FormLabel({
   return (
     <Label
       data-slot="form-label"
-      className={cn('font-medium text-foreground', className)}
+      className={cn('text-foreground font-medium', className)}
       htmlFor={formItemId}
       {...props}
     />
@@ -120,7 +120,7 @@ function FormDescription({ className, ...props }: React.HTMLAttributes<HTMLParag
     <div
       data-slot="form-description"
       id={formDescriptionId}
-      className={cn('text-xs text-muted-foreground -mt-0.5', className)}
+      className={cn('text-muted-foreground -mt-0.5 text-xs', className)}
       {...props}
     />
   );
diff --git a/apps/admin/src/shared/widgets/DataGrid/DataGrid.tsx b/apps/admin/src/shared/widgets/DataGrid/DataGrid.tsx
index 990ab3e..a0b75b6 100755
--- a/apps/admin/src/shared/widgets/DataGrid/DataGrid.tsx
+++ b/apps/admin/src/shared/widgets/DataGrid/DataGrid.tsx
@@ -1,7 +1,7 @@
 'use client';
 
-import { createContext, ReactNode, useContext } from 'react';
 import { ColumnFiltersState, RowData, SortingState, Table } from '@tanstack/react-table';
+import { createContext, ReactNode, useContext } from 'react';
 
 declare module '@tanstack/react-table' {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
diff --git a/apps/admin/src/shared/widgets/DataGrid/DataGridColumnFilter.tsx b/apps/admin/src/shared/widgets/DataGrid/DataGridColumnFilter.tsx
index 2f0376d..f246e1a 100755
--- a/apps/admin/src/shared/widgets/DataGrid/DataGridColumnFilter.tsx
+++ b/apps/admin/src/shared/widgets/DataGrid/DataGridColumnFilter.tsx
@@ -87,7 +87,7 @@ export function DataGridColumnFilter<TData, TValue>({
                   >
                     <div
                       className={cn(
-                        'me-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary',
+                        'border-primary me-2 flex h-4 w-4 items-center justify-center rounded-sm border',
                         isSelected
                           ? 'bg-primary text-primary-foreground'
                           : 'opacity-50 [&_svg]:invisible'
@@ -95,7 +95,7 @@ export function DataGridColumnFilter<TData, TValue>({
                     >
                       <Check className={cn('h-4 w-4')} />
                     </div>
-                    {option.icon && <option.icon className="mr-2 h-4 w-4 text-muted-foreground" />}
+                    {option.icon && <option.icon className="text-muted-foreground mr-2 h-4 w-4" />}
                     <span>{option.label}</span>
                     {facets?.get(option.value) && (
                       <span className="ms-auto flex h-4 w-4 items-center justify-center font-mono text-xs">
diff --git a/apps/admin/src/shared/widgets/DataGrid/DataGridColumnHeader.tsx b/apps/admin/src/shared/widgets/DataGrid/DataGridColumnHeader.tsx
index 5c0a93d..449099a 100755
--- a/apps/admin/src/shared/widgets/DataGrid/DataGridColumnHeader.tsx
+++ b/apps/admin/src/shared/widgets/DataGrid/DataGridColumnHeader.tsx
@@ -62,7 +62,7 @@ export function DataGridColumnHeader<TData, TValue>({
     return (
       <div
         className={cn(
-          'text-accent-foreground font-normal inline-flex h-full items-center gap-1.5 text-[0.8125rem] leading-1.5 [&_svg]:size-3.5 [&_svg]:opacity-60',
+          'text-accent-foreground inline-flex h-full items-center gap-1.5 text-[0.8125rem] leading-1.5 font-normal [&_svg]:size-3.5 [&_svg]:opacity-60',
           className
         )}
       >
@@ -77,7 +77,7 @@ export function DataGridColumnHeader<TData, TValue>({
       <Button
         variant="ghost"
         className={cn(
-          'text-secondary-foreground rounded-md font-normal -ms-2 px-2 h-7 hover:bg-secondary data-[state=open]:bg-secondary hover:text-foreground data-[state=open]:text-foreground',
+          'text-secondary-foreground hover:bg-secondary data-[state=open]:bg-secondary hover:text-foreground data-[state=open]:text-foreground -ms-2 h-7 rounded-md px-2 font-normal',
           className
         )}
         disabled={isLoading || recordCount === 0}
@@ -97,11 +97,11 @@ export function DataGridColumnHeader<TData, TValue>({
 
         {column.getCanSort() &&
           (column.getIsSorted() === 'desc' ? (
-            <ArrowDown className="size-[0.7rem]! mt-px" />
+            <ArrowDown className="mt-px size-[0.7rem]!" />
           ) : column.getIsSorted() === 'asc' ? (
-            <ArrowUp className="size-[0.7rem]! mt-px" />
+            <ArrowUp className="mt-px size-[0.7rem]!" />
           ) : (
-            <ChevronsUpDown className="size-[0.7rem]! mt-px" />
+            <ChevronsUpDown className="mt-px size-[0.7rem]!" />
           ))}
       </Button>
     );
@@ -125,7 +125,7 @@ export function DataGridColumnHeader<TData, TValue>({
 
   const headerControls = () => {
     return (
-      <div className="flex items-center h-full gap-1.5 justify-between">
+      <div className="flex h-full items-center justify-between gap-1.5">
         <DropdownMenu>
           <DropdownMenuTrigger asChild>{headerButton()}</DropdownMenuTrigger>
           <DropdownMenuContent className="w-52" align="start">
@@ -152,7 +152,7 @@ export function DataGridColumnHeader<TData, TValue>({
                   <ArrowUp className="size-3.5!" />
                   <span className="grow">Asc</span>
                   {column.getIsSorted() === 'asc' && (
-                    <Check className="size-4 opacity-100! text-primary" />
+                    <Check className="text-primary size-4 opacity-100!" />
                   )}
                 </DropdownMenuItem>
                 <DropdownMenuItem
@@ -168,7 +168,7 @@ export function DataGridColumnHeader<TData, TValue>({
                   <ArrowDown className="size-3.5!" />
                   <span className="grow">Desc</span>
                   {column.getIsSorted() === 'desc' && (
-                    <Check className="size-4 opacity-100! text-primary" />
+                    <Check className="text-primary size-4 opacity-100!" />
                   )}
                 </DropdownMenuItem>
               </>
@@ -187,7 +187,7 @@ export function DataGridColumnHeader<TData, TValue>({
                   <ArrowLeftToLine className="size-3.5!" aria-hidden="true" />
                   <span className="grow">Pin to left</span>
                   {column.getIsPinned() === 'left' && (
-                    <Check className="size-4 opacity-100! text-primary" />
+                    <Check className="text-primary size-4 opacity-100!" />
                   )}
                 </DropdownMenuItem>
                 <DropdownMenuItem
@@ -196,7 +196,7 @@ export function DataGridColumnHeader<TData, TValue>({
                   <ArrowRightToLine className="size-3.5!" aria-hidden="true" />
                   <span className="grow">Pin to right</span>
                   {column.getIsPinned() === 'right' && (
-                    <Check className="size-4 opacity-100! text-primary" />
+                    <Check className="text-primary size-4 opacity-100!" />
                   )}
                 </DropdownMenuItem>
               </>
@@ -274,7 +274,7 @@ export function DataGridColumnHeader<TData, TValue>({
   }
 
   if (column.getCanSort() || (props.tableLayout?.columnsResizable && column.getCanResize())) {
-    return <div className="flex items-center h-full">{headerButton()}</div>;
+    return <div className="flex h-full items-center">{headerButton()}</div>;
   }
 
   return headerLabel();
diff --git a/apps/admin/src/shared/widgets/DataGrid/DataGridContainer.tsx b/apps/admin/src/shared/widgets/DataGrid/DataGridContainer.tsx
index 98c0ca4..48d46cd 100644
--- a/apps/admin/src/shared/widgets/DataGrid/DataGridContainer.tsx
+++ b/apps/admin/src/shared/widgets/DataGrid/DataGridContainer.tsx
@@ -13,7 +13,7 @@ export function DataGridContainer({
   return (
     <div
       data-slot="data-grid"
-      className={cn('grid w-full', border && 'border border-border rounded-lg', className)}
+      className={cn('grid w-full', border && 'border-border rounded-lg border', className)}
     >
       {children}
     </div>
diff --git a/apps/admin/src/shared/widgets/DataGrid/DataGridPagination.tsx b/apps/admin/src/shared/widgets/DataGrid/DataGridPagination.tsx
index 222001f..6a87b7e 100755
--- a/apps/admin/src/shared/widgets/DataGrid/DataGridPagination.tsx
+++ b/apps/admin/src/shared/widgets/DataGrid/DataGridPagination.tsx
@@ -125,14 +125,14 @@ export function DataGridPagination(props: DataGridPaginationProps) {
   return (
     <div
       data-slot="data-grid-pagination"
-      className="flex flex-wrap flex-col sm:flex-row justify-between items-center gap-2.5 py-2.5 sm:py-0 grow"
+      className="flex grow flex-col flex-wrap items-center justify-between gap-2.5 py-2.5 sm:flex-row sm:py-0"
     >
-      <div className="flex flex-wrap items-center space-x-2.5 pb-2.5 sm:pb-0 order-2 sm:order-1">
+      <div className="order-2 flex flex-wrap items-center space-x-2.5 pb-2.5 sm:order-1 sm:pb-0">
         {isLoading ? (
           mergedProps?.sizesSkeleton
         ) : (
           <>
-            <div className="text-sm text-muted-foreground">
+            <div className="text-muted-foreground text-sm">
               {intl.formatMessage({ id: 'TABLE.COMMON.ROWS_PER_PAGE' })}
             </div>
             <Select
@@ -143,7 +143,7 @@ export function DataGridPagination(props: DataGridPaginationProps) {
                 table.setPageSize(newPageSize);
               }}
             >
-              <SelectTrigger className="w-fit h-8" size="sm">
+              <SelectTrigger className="h-8 w-fit" size="sm">
                 <SelectValue placeholder={`${pageSize}`} />
               </SelectTrigger>
               <SelectContent side="top" className="min-w-12.5">
@@ -157,16 +157,16 @@ export function DataGridPagination(props: DataGridPaginationProps) {
           </>
         )}
       </div>
-      <div className="flex flex-col sm:flex-row justify-center sm:justify-end items-center gap-2.5 pt-2.5 sm:pt-0 order-1 sm:order-2">
+      <div className="order-1 flex flex-col items-center justify-center gap-2.5 pt-2.5 sm:order-2 sm:flex-row sm:justify-end sm:pt-0">
         {isLoading ? (
           mergedProps?.infoSkeleton
         ) : (
           <>
-            <div className="text-sm text-muted-foreground text-nowrap order-2 sm:order-1">
+            <div className="text-muted-foreground order-2 text-sm text-nowrap sm:order-1">
               {paginationInfo}
             </div>
             {pageCount > 1 && (
-              <div className="flex items-center space-x-1 order-1 sm:order-2">
+              <div className="order-1 flex items-center space-x-1 sm:order-2">
                 <Button
                   size="sm"
                   mode="icon"
diff --git a/apps/admin/src/shared/widgets/DataGrid/DataGridTable.tsx b/apps/admin/src/shared/widgets/DataGrid/DataGridTable.tsx
index 0eaffc9..9266a93 100755
--- a/apps/admin/src/shared/widgets/DataGrid/DataGridTable.tsx
+++ b/apps/admin/src/shared/widgets/DataGrid/DataGridTable.tsx
@@ -49,7 +49,7 @@ function DataGridTableBase({ children }: { children: ReactNode }) {
     <table
       data-slot="data-grid-table"
       className={cn(
-        'w-full align-middle caption-bottom text-left rtl:text-right text-foreground font-normal text-sm',
+        'text-foreground w-full caption-bottom text-left align-middle text-sm font-normal rtl:text-right',
         !props.tableLayout?.columnsDraggable && 'border-separate border-spacing-0',
         props.tableLayout?.width === 'fixed' ? 'table-fixed' : 'table-auto',
         props.tableClassNames?.base
@@ -136,13 +136,13 @@ function DataGridTableHeadRowCell<TData>({
       data-pinned={isPinned || undefined}
       data-last-col={isLastLeftPinned ? 'left' : isFirstRightPinned ? 'right' : undefined}
       className={cn(
-        'relative h-10 text-left rtl:text-right align-middle font-normal text-accent-foreground [&:has([role=checkbox])]:pe-0',
+        'text-accent-foreground relative h-10 text-left align-middle font-normal rtl:text-right [&:has([role=checkbox])]:pe-0',
         headerCellSpacing,
         props.tableLayout?.cellBorder && 'border-e',
         props.tableLayout?.columnsResizable && column.getCanResize() && 'truncate',
         props.tableLayout?.columnsPinnable &&
           column.getCanPin() &&
-          '[&:not([data-pinned]):has(+[data-pinned])_div.cursor-col-resize:last-child]:opacity-0 [&[data-last-col=left]_div.cursor-col-resize:last-child]:opacity-0 [&[data-pinned=left][data-last-col=left]]:border-e! [&[data-pinned=right]:last-child_div.cursor-col-resize:last-child]:opacity-0 [&[data-pinned=right][data-last-col=right]]:border-s! [&[data-pinned][data-last-col]]:border-border data-pinned:bg-muted/90 data-pinned:backdrop-blur-xs',
+          '[&[data-pinned][data-last-col]]:border-border data-pinned:bg-muted/90 data-pinned:backdrop-blur-xs [&:not([data-pinned]):has(+[data-pinned])_div.cursor-col-resize:last-child]:opacity-0 [&[data-last-col=left]_div.cursor-col-resize:last-child]:opacity-0 [&[data-pinned=left][data-last-col=left]]:border-e! [&[data-pinned=right]:last-child_div.cursor-col-resize:last-child]:opacity-0 [&[data-pinned=right][data-last-col=right]]:border-s!',
         header.column.columnDef.meta?.headerClassName,
         column.getIndex() === 0 || column.getIndex() === header.headerGroup.headers.length - 1
           ? props.tableClassNames?.edgeCell
@@ -201,9 +201,9 @@ function DataGridTableBodyRowSkeleton({ children }: { children: ReactNode }) {
         props.onRowClick && 'cursor-pointer',
         !props.tableLayout?.stripped &&
           props.tableLayout?.rowBorder &&
-          'border-b border-border [&:not(:last-child)>td]:border-b',
+          'border-border border-b [&:not(:last-child)>td]:border-b',
         props.tableLayout?.cellBorder && '*:last:border-e-0',
-        props.tableLayout?.stripped && 'odd:bg-muted/90 hover:bg-transparent odd:hover:bg-muted',
+        props.tableLayout?.stripped && 'odd:bg-muted/90 odd:hover:bg-muted hover:bg-transparent',
         table.options.enableRowSelection && '*:first:relative',
         props.tableClassNames?.bodyRow
       )}
@@ -235,7 +235,7 @@ function DataGridTableBodyRowSkeletonCell<TData>({
         column.columnDef.meta?.cellClassName,
         props.tableLayout?.columnsPinnable &&
           column.getCanPin() &&
-          '[&[data-pinned=left][data-last-col=left]]:border-e! [&[data-pinned=right][data-last-col=right]]:border-s! [&[data-pinned][data-last-col]]:border-border data-pinned:bg-background/90 data-pinned:backdrop-blur-xs"',
+          '[&[data-pinned][data-last-col]]:border-border data-pinned:bg-background/90 data-pinned:backdrop-blur-xs" [&[data-pinned=left][data-last-col=left]]:border-e! [&[data-pinned=right][data-last-col=right]]:border-s!',
         column.getIndex() === 0 || column.getIndex() === table.getVisibleFlatColumns().length - 1
           ? props.tableClassNames?.edgeCell
           : ''
@@ -270,9 +270,9 @@ function DataGridTableBodyRow<TData>({
         props.onRowClick && 'cursor-pointer',
         !props.tableLayout?.stripped &&
           props.tableLayout?.rowBorder &&
-          'border-b border-border [&:not(:last-child)>td]:border-b',
+          'border-border border-b [&:not(:last-child)>td]:border-b',
         props.tableLayout?.cellBorder && '*:last:border-e-0',
-        props.tableLayout?.stripped && 'odd:bg-muted/90 hover:bg-transparent odd:hover:bg-muted',
+        props.tableLayout?.stripped && 'odd:bg-muted/90 odd:hover:bg-muted hover:bg-transparent',
         table.options.enableRowSelection && '*:first:relative',
         props.tableClassNames?.bodyRow
       )}
@@ -337,7 +337,7 @@ function DataGridTableBodyRowCell<TData>({
         cell.column.columnDef.meta?.cellClassName,
         props.tableLayout?.columnsPinnable &&
           column.getCanPin() &&
-          '[&[data-pinned=left][data-last-col=left]]:border-e! [&[data-pinned=right][data-last-col=right]]:border-s! [&[data-pinned][data-last-col]]:border-border data-pinned:bg-background/90 data-pinned:backdrop-blur-xs"',
+          '[&[data-pinned][data-last-col]]:border-border data-pinned:bg-background/90 data-pinned:backdrop-blur-xs" [&[data-pinned=left][data-last-col=left]]:border-e! [&[data-pinned=right][data-last-col=right]]:border-s!',
         column.getIndex() === 0 || column.getIndex() === row.getVisibleCells().length - 1
           ? props.tableClassNames?.edgeCell
           : ''
@@ -354,7 +354,7 @@ function DataGridTableEmpty() {
 
   return (
     <tr>
-      <td colSpan={totalColumns} className="text-center text-muted-foreground py-6">
+      <td colSpan={totalColumns} className="text-muted-foreground py-6 text-center">
         {props.emptyMessage || 'No data available'}
       </td>
     </tr>
@@ -366,9 +366,9 @@ function DataGridTableLoader() {
 
   return (
     <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
-      <div className="text-muted-foreground bg-card  flex items-center gap-2 px-4 py-2 font-medium leading-none text-sm border shadow-xs rounded-md">
+      <div className="text-muted-foreground bg-card flex items-center gap-2 rounded-md border px-4 py-2 text-sm leading-none font-medium shadow-xs">
         <svg
-          className="animate-spin -ml-1 h-5 w-5 text-muted-foreground"
+          className="text-muted-foreground -ml-1 h-5 w-5 animate-spin"
           xmlns="http://www.w3.org/2000/svg"
           fill="none"
           viewBox="0 0 24 24"
@@ -398,7 +398,7 @@ function DataGridTableRowSelect<TData>({ row }: { row: Row<TData> }) {
     <>
       <div
         className={cn(
-          'hidden absolute top-0 bottom-0 start-0 w-0.5 bg-primary',
+          'bg-primary absolute start-0 top-0 bottom-0 hidden w-0.5',
           row.getIsSelected() && 'block'
         )}
       ></div>
diff --git a/apps/admin/src/shared/widgets/MegaMenu/MegaMenuSubAccount.tsx b/apps/admin/src/shared/widgets/MegaMenu/MegaMenuSubAccount.tsx
index 03cbd5e..6895d86 100755
--- a/apps/admin/src/shared/widgets/MegaMenu/MegaMenuSubAccount.tsx
+++ b/apps/admin/src/shared/widgets/MegaMenu/MegaMenuSubAccount.tsx
@@ -8,21 +8,21 @@ const MegaMenuSubAccount = ({ items }: { items: MenuConfig }) => {
   const myAccountItemOthers = myAccountItem.children ? myAccountItem.children[1] : {};
 
   return (
-    <div className="flex flex-col lg:flex-row gap-0 w-full lg:w-300 overflow-hidden">
-      <div className="lg:w-56.25 mt-2 lg:mt-0 lg:border-e lg:border-border shrink-0 px-3 py-4 lg:p-7.5 bg-accent/30">
-        <h3 className="text-sm text-foreground font-semibold leading-none ps-2.5 mb-2 lg:mb-5">
+    <div className="flex w-full flex-col gap-0 overflow-hidden lg:w-300 lg:flex-row">
+      <div className="lg:border-border bg-accent/30 mt-2 shrink-0 px-3 py-4 lg:mt-0 lg:w-56.25 lg:border-e lg:p-7.5">
+        <h3 className="text-foreground mb-2 ps-2.5 text-sm leading-none font-semibold lg:mb-5">
           {myAccountItemGeneral.title}
         </h3>
         <div className="flex flex-col">
           {myAccountItemGeneral.children && MegaMenuSubHighlighted(myAccountItemGeneral.children)}
         </div>
       </div>
-      <div className="pt-4 pb-2 lg:p-7.5 lg:pb-5 grow">
-        <div className="grid lg:grid-cols-5 gap-4">
+      <div className="grow pt-4 pb-2 lg:p-7.5 lg:pb-5">
+        <div className="grid gap-4 lg:grid-cols-5">
           {myAccountItemOthers.children?.map((item: MenuItem, index) => {
             return (
               <div key={`account-${index}`}>
-                <h3 className="text-sm text-foreground font-semibold leading-none ps-2.5 mb-2 lg:mb-5">
+                <h3 className="text-foreground mb-2 ps-2.5 text-sm leading-none font-semibold lg:mb-5">
                   {item.title}
                 </h3>
                 <div className="space-y-0.5">
diff --git a/apps/admin/src/shared/widgets/MegaMenu/MegaMenuSubAuth.tsx b/apps/admin/src/shared/widgets/MegaMenu/MegaMenuSubAuth.tsx
index 6936a57..22d0408 100755
--- a/apps/admin/src/shared/widgets/MegaMenu/MegaMenuSubAuth.tsx
+++ b/apps/admin/src/shared/widgets/MegaMenu/MegaMenuSubAuth.tsx
@@ -10,14 +10,14 @@ const MegaMenuSubAuth = ({ items }: { items: MenuConfig }) => {
   const authItemOthers = authItem.children ? authItem.children[1] : {};
 
   return (
-    <div className="flex-col gap-0 w-full lg:w-167.5">
+    <div className="w-full flex-col gap-0 lg:w-167.5">
       <div className="flex flex-col lg:flex-row">
-        <div className="pt-4 pb-2 lg:p-7.5 lg:pb-5 grow">
-          <div className="grid lg:grid-cols-2 gap-5">
+        <div className="grow pt-4 pb-2 lg:p-7.5 lg:pb-5">
+          <div className="grid gap-5 lg:grid-cols-2">
             {authItemGeneral.children?.map((item: MenuItem, index) => {
               return (
                 <div key={`auth-${index}`} className="flex flex-col">
-                  <h3 className="text-sm text-foreground font-semibold leading-none ps-2.5 mb-2 lg:mb-5">
+                  <h3 className="text-foreground mb-2 ps-2.5 text-sm leading-none font-semibold lg:mb-5">
                     {item.title}
                     {item.badge && (
                       <Badge variant="primary" size="sm" appearance="outline">
@@ -33,8 +33,8 @@ const MegaMenuSubAuth = ({ items }: { items: MenuConfig }) => {
             })}
           </div>
         </div>
-        <div className="lg:w-62.5 mb-4 lg:mb-0 lg:border-s lg:border-border shrink-0 px-3 py-4 lg:p-7.5 bg-accent/50">
-          <h3 className="text-sm text-foreground font-semibold leading-none ps-2.5 mb-5">
+        <div className="lg:border-border bg-accent/50 mb-4 shrink-0 px-3 py-4 lg:mb-0 lg:w-62.5 lg:border-s lg:p-7.5">
+          <h3 className="text-foreground mb-5 ps-2.5 text-sm leading-none font-semibold">
             {authItemOthers.title}
           </h3>
           <div className="flex flex-col gap-1">
diff --git a/apps/admin/src/shared/widgets/MegaMenu/MegaMenuSubNetwork.tsx b/apps/admin/src/shared/widgets/MegaMenu/MegaMenuSubNetwork.tsx
index 78d0baa..81ea9d2 100755
--- a/apps/admin/src/shared/widgets/MegaMenu/MegaMenuSubNetwork.tsx
+++ b/apps/admin/src/shared/widgets/MegaMenu/MegaMenuSubNetwork.tsx
@@ -10,22 +10,22 @@ const MegaMenuSubNetwork = ({ items }: { items: MenuConfig }) => {
   const networkItemOthers = networkItem.children ? networkItem.children[1] : {};
 
   return (
-    <div className="flex-col gap-0 w-full lg:w-167.5">
+    <div className="w-full flex-col gap-0 lg:w-167.5">
       <div className="flex flex-col lg:flex-row">
-        <div className="flex flex-col gap-5 lg:w-62.5 mt-2 lg:mt-0 lg:border-e lg:border-border shrink-0 px-3 py-4 lg:p-7.5 bg-accent/30">
-          <h3 className="text-sm text-foreground font-semibold leading-none ps-2.5 h-3.5">
+        <div className="lg:border-border bg-accent/30 mt-2 flex shrink-0 flex-col gap-5 px-3 py-4 lg:mt-0 lg:w-62.5 lg:border-e lg:p-7.5">
+          <h3 className="text-foreground h-3.5 ps-2.5 text-sm leading-none font-semibold">
             {networkItemGeneral.title}
           </h3>
           <div className="flex flex-col">
             {networkItemGeneral.children && MegaMenuSubHighlighted(networkItemGeneral.children)}
           </div>
         </div>
-        <div className="pt-4 pb-2 lg:p-7.5 lg:pb-5 grow">
-          <div className="grid lg:grid-cols-2 gap-5">
+        <div className="grow pt-4 pb-2 lg:p-7.5 lg:pb-5">
+          <div className="grid gap-5 lg:grid-cols-2">
             {networkItemOthers.children?.map((item: MenuItem, index) => {
               return (
                 <div key={`network-${index}`} className="flex flex-col gap-5">
-                  <h3 className="flex items-center gap-1.5 text-sm text-foreground font-semibold leading-none ps-2.5 h-3.5">
+                  <h3 className="text-foreground flex h-3.5 items-center gap-1.5 ps-2.5 text-sm leading-none font-semibold">
                     {item.title}
                     {item.badge && (
                       <Badge variant="primary" size="sm" appearance="outline">
diff --git a/apps/admin/src/shared/widgets/MegaMenu/MegaMenuSubProfiles.tsx b/apps/admin/src/shared/widgets/MegaMenu/MegaMenuSubProfiles.tsx
index 209eacd..3fa7712 100755
--- a/apps/admin/src/shared/widgets/MegaMenu/MegaMenuSubProfiles.tsx
+++ b/apps/admin/src/shared/widgets/MegaMenu/MegaMenuSubProfiles.tsx
@@ -8,11 +8,11 @@ const MegaMenuSubProfiles = ({ items }: { items: MenuConfig }) => {
   return (
     <div className="w-full gap-0 lg:w-218.75">
       <div className="pt-4 pb-2 lg:p-7.5">
-        <div className="grid lg:grid-cols-2 gap-5 lg:gap-10">
+        <div className="grid gap-5 lg:grid-cols-2 lg:gap-10">
           {publicProfilesItem.children?.map((item: MenuItem, index) => {
             return (
               <div key={`profile-${index}`} className="flex flex-col">
-                <h3 className="text-sm text-foreground font-semibold leading-none ps-2.5 mb-2 lg:mb-4">
+                <h3 className="text-foreground mb-2 ps-2.5 text-sm leading-none font-semibold lg:mb-4">
                   {item.title}
                 </h3>
                 <div className="grid lg:grid-cols-2 lg:gap-5">
diff --git a/apps/admin/src/shared/widgets/MegaMenu/MegaMenuSubStore.tsx b/apps/admin/src/shared/widgets/MegaMenu/MegaMenuSubStore.tsx
index 9c24ffe..1957cdf 100755
--- a/apps/admin/src/shared/widgets/MegaMenu/MegaMenuSubStore.tsx
+++ b/apps/admin/src/shared/widgets/MegaMenu/MegaMenuSubStore.tsx
@@ -11,7 +11,7 @@ const MegaMenuSubStore = ({ items }: { items: MenuConfig }) => {
         {storeItem.children?.map((item: MenuItem, index) => {
           return (
             <div key={`profile-${index}`} className="flex flex-col">
-              <h3 className="text-sm text-foreground font-semibold leading-none ps-2.5 mb-2 lg:mb-4">
+              <h3 className="text-foreground mb-2 ps-2.5 text-sm leading-none font-semibold lg:mb-4">
                 {item.title}
               </h3>
               <div className="grid lg:grid-cols-2 lg:gap-5">
diff --git a/apps/admin/src/shared/widgets/MegaMenu/components/MegaMenuFooter.tsx b/apps/admin/src/shared/widgets/MegaMenu/components/MegaMenuFooter.tsx
index 30dca44..7de2eab 100755
--- a/apps/admin/src/shared/widgets/MegaMenu/components/MegaMenuFooter.tsx
+++ b/apps/admin/src/shared/widgets/MegaMenu/components/MegaMenuFooter.tsx
@@ -4,10 +4,10 @@ import { NavigationMenuLink } from '#shared/ui/NavigationMenu';
 
 const MegaMenuFooter = () => {
   return (
-    <div className="flex flex-wrap items-center lg:justify-between rounded-xl lg:rounded-t-none border border-border lg:border-0 lg:border-t lg:border-t-border px-4 py-4 lg:px-7.5 lg:py-5 gap-2.5 bg-muted/50">
+    <div className="border-border lg:border-t-border bg-muted/50 flex flex-wrap items-center gap-2.5 rounded-xl border px-4 py-4 lg:justify-between lg:rounded-t-none lg:border-0 lg:border-t lg:px-7.5 lg:py-5">
       <div className="flex flex-col gap-1.5">
-        <div className="text-base font-semibold text-mono leading-none">Read to Get Started ?</div>
-        <div className="text-sm fomt-medium text-secondary-foreground">
+        <div className="text-mono text-base leading-none font-semibold">Read to Get Started ?</div>
+        <div className="fomt-medium text-secondary-foreground text-sm">
           Take your docs to the next level of Metronic
         </div>
       </div>
diff --git a/apps/admin/src/shared/widgets/MegaMenu/components/MegaMenuSubDefault.tsx b/apps/admin/src/shared/widgets/MegaMenu/components/MegaMenuSubDefault.tsx
index 1445825..8c6afc8 100755
--- a/apps/admin/src/shared/widgets/MegaMenu/components/MegaMenuSubDefault.tsx
+++ b/apps/admin/src/shared/widgets/MegaMenu/components/MegaMenuSubDefault.tsx
@@ -16,7 +16,7 @@ const MegaMenuSubDefault = (items: MenuConfig) => {
         return (
           <div key={index}>
             <div className="pt-1">
-              <span className="text-secondary-foreground font-medium text-sm p-2.5">
+              <span className="text-secondary-foreground p-2.5 text-sm font-medium">
                 {item.title}
               </span>
             </div>
@@ -30,7 +30,7 @@ const MegaMenuSubDefault = (items: MenuConfig) => {
               {...(isActive(item.path) && { 'data-active': true })}
               to={item.path || ''}
               className={cn(
-                'flex flex-row items-center gap-2.5 px-2.5 py-2 rounded-md hover:bg-accent/50 text-sm',
+                'hover:bg-accent/50 flex flex-row items-center gap-2.5 rounded-md px-2.5 py-2 text-sm',
                 '[&_svg]:text-muted-foreground hover:[&_svg]:text-primary [&[data-active=true]_svg]:text-primary'
               )}
             >
diff --git a/apps/admin/src/shared/widgets/MegaMenu/components/MegaMenuSubHighlighted.tsx b/apps/admin/src/shared/widgets/MegaMenu/components/MegaMenuSubHighlighted.tsx
index 2d77f6c..b2c7b2d 100755
--- a/apps/admin/src/shared/widgets/MegaMenu/components/MegaMenuSubHighlighted.tsx
+++ b/apps/admin/src/shared/widgets/MegaMenu/components/MegaMenuSubHighlighted.tsx
@@ -19,8 +19,8 @@ const MegaMenuSubHighlighted = (items: MenuConfig) => {
             {...(isActive(item.path) && { 'data-active': true })}
             to={item.path || ''}
             className={cn(
-              'border border-transparent hover:border-border hover:bg-background',
-              'flex flex-row items-center gap-2.5 px-2.5 py-2 rounded-md text-sm',
+              'hover:border-border hover:bg-background border border-transparent',
+              'flex flex-row items-center gap-2.5 rounded-md px-2.5 py-2 text-sm',
               '[&_svg]:text-muted-foreground hover:[&_svg]:text-primary [&[data-active=true]_svg]:text-primary'
             )}
           >
diff --git a/apps/admin/src/shared/widgets/Navbar/Navbar.tsx b/apps/admin/src/shared/widgets/Navbar/Navbar.tsx
index 6aa79ac..8494455 100755
--- a/apps/admin/src/shared/widgets/Navbar/Navbar.tsx
+++ b/apps/admin/src/shared/widgets/Navbar/Navbar.tsx
@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 
 export function Navbar({ children }: { children: ReactNode }) {
   return (
-    <div className="flex items-center flex-wrap md:flex-nowrap lg:items-end justify-between border-b border-border gap-3 lg:gap-6 mb-5 lg:mb-10">
+    <div className="border-border mb-5 flex flex-wrap items-center justify-between gap-3 border-b md:flex-nowrap lg:mb-10 lg:items-end lg:gap-6">
       {children}
     </div>
   );
@@ -10,7 +10,7 @@ export function Navbar({ children }: { children: ReactNode }) {
 
 export function NavbarActions({ children }: { children: ReactNode }) {
   return (
-    <div className="flex items-center justify-end grow lg:grow-0 lg:pb-4 gap-2.5 mb-1.5 lg:mb-0">
+    <div className="mb-1.5 flex grow items-center justify-end gap-2.5 lg:mb-0 lg:grow-0 lg:pb-4">
       {children}
     </div>
   );
diff --git a/apps/admin/src/shared/widgets/Navbar/NavbarMenu.tsx b/apps/admin/src/shared/widgets/Navbar/NavbarMenu.tsx
index 690b6a9..a7993c2 100755
--- a/apps/admin/src/shared/widgets/Navbar/NavbarMenu.tsx
+++ b/apps/admin/src/shared/widgets/Navbar/NavbarMenu.tsx
@@ -16,11 +16,11 @@ export const NavbarMenu = ({ items }: { items: MenuConfig }) => {
           <MenubarMenu key={index}>
             <MenubarTrigger
               className={cn(
-                'flex items-center gap-1.5 px-3 py-3.5 text-sm text-secondary-foreground',
+                'text-secondary-foreground flex items-center gap-1.5 px-3 py-3.5 text-sm',
                 'rounded-none border-b-2 border-transparent bg-transparent!',
                 'hover:text-primary hover:bg-transparent',
                 'focus:text-primary focus:bg-transparent',
-                'data-[state=open]:bg-transparent data-[state=open]:text-primary',
+                'data-[state=open]:text-primary data-[state=open]:bg-transparent',
                 'data-[here=true]:text-primary data-[here=true]:border-primary'
               )}
               data-active={isActive(item.path) || undefined}
@@ -38,7 +38,7 @@ export const NavbarMenu = ({ items }: { items: MenuConfig }) => {
             <MenubarTrigger
               asChild
               className={cn(
-                'flex items-center py-3.5 text-sm text-secondary-foreground px-3',
+                'text-secondary-foreground flex items-center px-3 py-3.5 text-sm',
                 'rounded-none border-b-2 border-transparent bg-transparent!',
                 'hover:text-primary hover:bg-transparent',
                 'focus:text-primary focus:bg-transparent',
@@ -93,7 +93,7 @@ export const NavbarMenu = ({ items }: { items: MenuConfig }) => {
   return (
     <div className="grid">
       <div className="kt-scrollable-x-auto">
-        <Menubar className="flex items-stretch gap-3 border-none bg-transparent p-0 h-auto">
+        <Menubar className="flex h-auto items-stretch gap-3 border-none bg-transparent p-0">
           {buildMenu(items)}
         </Menubar>
       </div>
diff --git a/apps/admin/src/shared/widgets/Navbar/ScrollspyMenu.tsx b/apps/admin/src/shared/widgets/Navbar/ScrollspyMenu.tsx
index 214e799..71e60a3 100755
--- a/apps/admin/src/shared/widgets/Navbar/ScrollspyMenu.tsx
+++ b/apps/admin/src/shared/widgets/Navbar/ScrollspyMenu.tsx
@@ -19,11 +19,11 @@ export const ScrollspyMenu = ({ items }: ScrollspyMenuProps) => {
         key={index}
         data-scrollspy-anchor={item.target}
         className={cn(
-          'cursor-pointer flex items-center rounded-lg ps-2.5 pe-2.5 py-1.5 border border-transparent text-accent-foreground hover:text-primary data-[active=true]:bg-accent data-[active=true]:text-primary data-[active=true]:font-medium',
+          'text-accent-foreground hover:text-primary data-[active=true]:bg-accent data-[active=true]:text-primary flex cursor-pointer items-center rounded-lg border border-transparent py-1.5 ps-2.5 pe-2.5 data-[active=true]:font-medium',
           indent ? 'gap-3.5' : 'gap-1.5'
         )}
       >
-        <span className="flex w-1.5 relative before:absolute start-px rtl:-start-1.25 before:top-0 before:size-1.5 before:rounded-full before:-translate-x-2/4 before:-translate-y-2/4 [[data-active=true]>&]:before:bg-primary"></span>
+        <span className="[[data-active=true]>&]:before:bg-primary relative start-px flex w-1.5 before:absolute before:top-0 before:size-1.5 before:-translate-x-2/4 before:-translate-y-2/4 before:rounded-full rtl:-start-1.25"></span>
         {item.title}
       </div>
     );
@@ -40,7 +40,7 @@ export const ScrollspyMenu = ({ items }: ScrollspyMenuProps) => {
       if (item.children) {
         return (
           <div key={index} className="flex flex-col">
-            <div className="ps-6 pe-2.5 py-2.5 text-sm font-semibold text-mono">{item.title}</div>
+            <div className="text-mono py-2.5 ps-6 pe-2.5 text-sm font-semibold">{item.title}</div>
             <div className="flex flex-col">{buildSubAnchors(item.children)}</div>
           </div>
         );
@@ -51,7 +51,7 @@ export const ScrollspyMenu = ({ items }: ScrollspyMenuProps) => {
   };
 
   return (
-    <div className="flex flex-col grow relative before:absolute before:start-2.75 before:top-0 before:bottom-0 before:border-s before:border-border text-sm">
+    <div className="before:border-border relative flex grow flex-col text-sm before:absolute before:start-2.75 before:top-0 before:bottom-0 before:border-s">
       {renderChildren(items)}
     </div>
   );
diff --git a/apps/admin/src/shared/widgets/UserDropdownMenu.tsx b/apps/admin/src/shared/widgets/UserDropdownMenu.tsx
index 24c641f..02cb686 100755
--- a/apps/admin/src/shared/widgets/UserDropdownMenu.tsx
+++ b/apps/admin/src/shared/widgets/UserDropdownMenu.tsx
@@ -47,13 +47,13 @@ export function UserDropdownMenu({ trigger }: { trigger: ReactNode }) {
               <div className="flex flex-col">
                 <Link
                   to="/account/profile"
-                  className="text-sm text-mono hover:text-primary font-semibold"
+                  className="text-mono hover:text-primary text-sm font-semibold"
                 >
                   {displayName}
                 </Link>
                 <a
                   href={`mailto:${displayEmail}`}
-                  className="text-xs text-muted-foreground hover:text-primary"
+                  className="text-muted-foreground hover:text-primary text-xs"
                 >
                   {displayEmail}
                 </a>
@@ -90,16 +90,16 @@ export function UserDropdownMenu({ trigger }: { trigger: ReactNode }) {
         </DropdownMenuSub>
 
         <DropdownMenuSub>
-          <DropdownMenuSubTrigger className="flex items-center gap-2 **:data-[slot=dropdown-menu-sub-trigger-indicator]:hidden hover:**:data-[slot=badge]:border-input data-[state=open]:**:data-[slot=badge]:border-input">
+          <DropdownMenuSubTrigger className="hover:**:data-[slot=badge]:border-input data-[state=open]:**:data-[slot=badge]:border-input flex items-center gap-2 **:data-[slot=dropdown-menu-sub-trigger-indicator]:hidden">
             <Globe />
-            <span className="flex items-center justify-between gap-2 grow relative">
+            <span className="relative flex grow items-center justify-between gap-2">
               {intl.formatMessage({ id: 'USER.MENU.LANGUAGE' })}
 
               <Badge appearance="stroke" className="absolute inset-e-0 top-1/2 -translate-y-1/2">
                 {currenLanguage.label}
                 <img
                   src={currenLanguage.flag}
-                  className="w-3.5 h-3.5 rounded-full"
+                  className="h-3.5 w-3.5 rounded-full"
                   alt={currenLanguage.label}
                 />
               </Badge>
@@ -119,7 +119,7 @@ export function UserDropdownMenu({ trigger }: { trigger: ReactNode }) {
                   value={item.code}
                   className="flex items-center gap-2"
                 >
-                  <img src={item.flag} className="w-4 h-4 rounded-full" alt={item.label} />
+                  <img src={item.flag} className="h-4 w-4 rounded-full" alt={item.label} />
                   <span>{item.label}</span>
                 </DropdownMenuRadioItem>
               ))}
@@ -134,7 +134,7 @@ export function UserDropdownMenu({ trigger }: { trigger: ReactNode }) {
           onSelect={(event) => event.preventDefault()}
         >
           <Moon />
-          <div className="flex items-center gap-2 justify-between grow">
+          <div className="flex grow items-center justify-between gap-2">
             {intl.formatMessage({ id: 'USER.MENU.DARK_MODE' })}
             <Switch
               size="sm"
@@ -143,7 +143,7 @@ export function UserDropdownMenu({ trigger }: { trigger: ReactNode }) {
             />
           </div>
         </DropdownMenuItem>
-        <div className="p-2 mt-1">
+        <div className="mt-1 p-2">
           <Button variant="outline" size="sm" className="w-full" onClick={logout}>
             {intl.formatMessage({ id: 'USER.MENU.LOGOUT' })}
           </Button>
diff --git a/apps/admin/src/shared/widgets/common/AvatarGroup.tsx b/apps/admin/src/shared/widgets/common/AvatarGroup.tsx
index 8277d70..873b6b9 100755
--- a/apps/admin/src/shared/widgets/common/AvatarGroup.tsx
+++ b/apps/admin/src/shared/widgets/common/AvatarGroup.tsx
@@ -28,13 +28,13 @@ function AvatarGroup({ size, group, more, className }: AvatarGroupProp) {
           <AvatarImage
             src={toAbsoluteUrl(each.path || `/media/avatars/${each.filename}`)}
             alt="image"
-            className="border border-background hover:z-10"
+            className="border-background border hover:z-10"
           />
         ) : null}
         {each.fallback ? (
           <AvatarFallback
             className={cn(
-              'relative border border-background hover:z-10 text-[11px]',
+              'border-background relative border text-[11px] hover:z-10',
               size,
               each.variant
             )}
@@ -52,7 +52,7 @@ function AvatarGroup({ size, group, more, className }: AvatarGroupProp) {
       {more && (
         <span
           className={cn(
-            'flex items-center cursor-default justify-center relative shrink-0 rounded-full border border-background hover:z-10 font-semibold text-[11px] leading-none',
+            'border-background relative flex shrink-0 cursor-default items-center justify-center rounded-full border text-[11px] leading-none font-semibold hover:z-10',
             avatarSize,
             more.variant
           )}
diff --git a/apps/admin/src/shared/widgets/common/AvatarInput.tsx b/apps/admin/src/shared/widgets/common/AvatarInput.tsx
index ecae179..97354ef 100755
--- a/apps/admin/src/shared/widgets/common/AvatarInput.tsx
+++ b/apps/admin/src/shared/widgets/common/AvatarInput.tsx
@@ -13,14 +13,14 @@ export function AvatarInput() {
   return (
     <ImageInput value={avatar} onChange={(selectedAvatar) => setAvatar(selectedAvatar)}>
       {({ onImageUpload }) => (
-        <div className="size-16 relative cursor-pointer" onClick={onImageUpload}>
+        <div className="relative size-16 cursor-pointer" onClick={onImageUpload}>
           <TooltipProvider>
             <Tooltip>
               <TooltipTrigger asChild>
                 <Button
                   variant="outline"
                   mode="icon"
-                  className="shadow-xs text-secondary-foreground/80 hover:text-foreground absolute z-1 size-5 -top-0.5 -end-0.5 rounded-full"
+                  className="text-secondary-foreground/80 hover:text-foreground absolute -end-0.5 -top-0.5 z-1 size-5 rounded-full shadow-xs"
                   onClick={(e) => {
                     e.stopPropagation();
                     setAvatar([]);
@@ -33,13 +33,13 @@ export function AvatarInput() {
             </Tooltip>
           </TooltipProvider>
           <div
-            className="relative border-2 border-green-500 rounded-full overflow-hidden"
+            className="relative overflow-hidden rounded-full border-2 border-green-500"
             style={{
               backgroundImage: `url(${toAbsoluteUrl(`/media/avatars/blank.png`)})`
             }}
           >
             {avatar.length > 0 && <img src={avatar[0].dataURL} alt="avatar" />}
-            <div className="flex items-center justify-center cursor-pointer h-5 left-0 right-0 bottom-0 bg-black/25 absolute">
+            <div className="absolute right-0 bottom-0 left-0 flex h-5 cursor-pointer items-center justify-center bg-black/25">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 width="14"
diff --git a/apps/admin/src/shared/widgets/common/ContentLoader.tsx b/apps/admin/src/shared/widgets/common/ContentLoader.tsx
index d5f357b..3e77585 100755
--- a/apps/admin/src/shared/widgets/common/ContentLoader.tsx
+++ b/apps/admin/src/shared/widgets/common/ContentLoader.tsx
@@ -3,10 +3,10 @@ import { cn } from '@crux-kit/utils';
 
 export function ContentLoader({ className }: { className?: string }) {
   return (
-    <div className={cn('flex items-center justify-center grow w-full', className)}>
+    <div className={cn('flex w-full grow items-center justify-center', className)}>
       <div className="flex items-center gap-2.5">
-        <LoaderCircleIcon className="animate-spin text-muted-foreground opacity-50" />
-        <span className="text-muted-foreground font-medium text-sm">Loading...</span>
+        <LoaderCircleIcon className="text-muted-foreground animate-spin opacity-50" />
+        <span className="text-muted-foreground text-sm font-medium">Loading...</span>
       </div>
     </div>
   );
diff --git a/apps/admin/src/shared/widgets/common/Engage.tsx b/apps/admin/src/shared/widgets/common/Engage.tsx
index 7aac778..660a792 100755
--- a/apps/admin/src/shared/widgets/common/Engage.tsx
+++ b/apps/admin/src/shared/widgets/common/Engage.tsx
@@ -17,10 +17,10 @@ export function Engage({ title, description, image, more }: EngageProps) {
   return (
     <Card>
       <CardContent className="px-10 py-7.5 lg:pr-12.5">
-        <div className="flex flex-wrap md:flex-nowrap items-center gap-6 md:gap-10">
+        <div className="flex flex-wrap items-center gap-6 md:flex-nowrap md:gap-10">
           <div className="flex flex-col items-start gap-3">
-            <h2 className="text-xl font-medium text-mono">{title}</h2>
-            <p className="text-sm text-foreground leading-5.5 mb-2.5">{description}</p>
+            <h2 className="text-mono text-xl font-medium">{title}</h2>
+            <p className="text-foreground mb-2.5 text-sm leading-5.5">{description}</p>
           </div>
           {image}
         </div>
diff --git a/apps/admin/src/shared/widgets/common/Help.tsx b/apps/admin/src/shared/widgets/common/Help.tsx
index b4abf90..b56edec 100755
--- a/apps/admin/src/shared/widgets/common/Help.tsx
+++ b/apps/admin/src/shared/widgets/common/Help.tsx
@@ -3,7 +3,7 @@ import { Engage } from './Engage';
 
 export function Help() {
   return (
-    <div className="grid lg:grid-cols-2 gap-5 lg:gap-7.5">
+    <div className="grid gap-5 lg:grid-cols-2 lg:gap-7.5">
       <Engage
         title="Questions ?"
         description="Visit our Help Center for detailed assistance on billing, payments, and subscriptions."
@@ -11,7 +11,7 @@ export function Help() {
           <>
             <img
               src={toAbsoluteUrl('/media/illustrations/2.svg')}
-              className="dark:hidden max-h-37.5"
+              className="max-h-37.5 dark:hidden"
               alt="image"
             />
             <img
@@ -30,7 +30,7 @@ export function Help() {
           <>
             <img
               src={toAbsoluteUrl('/media/illustrations/4.svg')}
-              className="dark:hidden max-h-37.5"
+              className="max-h-37.5 dark:hidden"
               alt="image"
             />
             <img
diff --git a/apps/admin/src/shared/widgets/common/Help2.tsx b/apps/admin/src/shared/widgets/common/Help2.tsx
index 4a3252f..700675e 100755
--- a/apps/admin/src/shared/widgets/common/Help2.tsx
+++ b/apps/admin/src/shared/widgets/common/Help2.tsx
@@ -3,7 +3,7 @@ import { Engage } from './Engage';
 
 export function Help2() {
   return (
-    <div className="grid lg:grid-cols-2 gap-5 lg:gap-7.5">
+    <div className="grid gap-5 lg:grid-cols-2 lg:gap-7.5">
       <Engage
         title="Questions ?"
         description="Visit our Help Center for detailed assistance on billing, payments, and subscriptions."
@@ -11,7 +11,7 @@ export function Help2() {
           <>
             <img
               src={toAbsoluteUrl('/media/illustrations/29.svg')}
-              className="dark:hidden max-h-37.5"
+              className="max-h-37.5 dark:hidden"
               alt="image"
             />
             <img
@@ -30,7 +30,7 @@ export function Help2() {
           <>
             <img
               src={toAbsoluteUrl('/media/illustrations/31.svg')}
-              className="dark:hidden max-h-37.5"
+              className="max-h-37.5 dark:hidden"
               alt="image"
             />
             <img
diff --git a/apps/admin/src/shared/widgets/common/HexagonBadge.tsx b/apps/admin/src/shared/widgets/common/HexagonBadge.tsx
index 1d975ce..6927526 100755
--- a/apps/admin/src/shared/widgets/common/HexagonBadge.tsx
+++ b/apps/admin/src/shared/widgets/common/HexagonBadge.tsx
@@ -11,7 +11,7 @@ export const HexagonBadge = ({ size, stroke, fill, badge }: HexagonBadgeProps) =
   return (
     <div className={`relative ${size} shrink-0`}>
       <svg
-        className={`w-full h-full ${stroke} ${fill}`}
+        className={`h-full w-full ${stroke} ${fill}`}
         width="44"
         height="48"
         viewBox="0 0 44 48"
@@ -31,7 +31,7 @@ export const HexagonBadge = ({ size, stroke, fill, badge }: HexagonBadgeProps) =
           stroke=""
         />
       </svg>
-      <div className="absolute leading-none start-2/4 top-2/4 -translate-y-2/4 -translate-x-2/4 rtl:translate-x-2/4">
+      <div className="absolute start-2/4 top-2/4 -translate-x-2/4 -translate-y-2/4 leading-none rtl:translate-x-2/4">
         {badge}
       </div>
     </div>
diff --git a/apps/admin/src/shared/widgets/common/HighlightedPosts.tsx b/apps/admin/src/shared/widgets/common/HighlightedPosts.tsx
index b8df28e..8e46a3c 100755
--- a/apps/admin/src/shared/widgets/common/HighlightedPosts.tsx
+++ b/apps/admin/src/shared/widgets/common/HighlightedPosts.tsx
@@ -28,28 +28,28 @@ export function HighlightedPosts({ posts }: HighlightedPostsProps) {
               stroke="stroke-orange-200 dark:stroke-orange-950"
               fill="fill-orange-50 dark:fill-orange-950/30"
               size="size-[50px]"
-              badge={<post.icon size={28} className="text-xl ps-px text-orange-400" />}
+              badge={<post.icon size={28} className="ps-px text-xl text-orange-400" />}
             />
           </div>
           <Link
             to={`${post.path}`}
-            className="text-base font-semibold text-mono hover:text-primary"
+            className="text-mono hover:text-primary text-base font-semibold"
           >
             {post.title}
           </Link>
-          <p className="text-sm text-secondary-foreground">{post.summary}</p>
+          <p className="text-secondary-foreground text-sm">{post.summary}</p>
           <Button mode="link" underlined="dashed" asChild>
             <Link to={`${post.path}`}>Learn more</Link>
           </Button>
         </div>
-        <span className="hidden not-last:block not-last:border-b border-b-border"></span>
+        <span className="border-b-border hidden not-last:block not-last:border-b"></span>
       </Fragment>
     );
   };
 
   return (
     <Card>
-      <CardContent className="py-10 flex flex-col gap-5 lg:gap-7.5">
+      <CardContent className="flex flex-col gap-5 py-10 lg:gap-7.5">
         {posts.map((post, index) => {
           return renderItem(post, index);
         })}
diff --git a/apps/admin/src/shared/widgets/common/RecaptchaPopover.tsx b/apps/admin/src/shared/widgets/common/RecaptchaPopover.tsx
index c97a6a7..976dc08 100755
--- a/apps/admin/src/shared/widgets/common/RecaptchaPopover.tsx
+++ b/apps/admin/src/shared/widgets/common/RecaptchaPopover.tsx
@@ -80,7 +80,7 @@ export function RecaptchaPopover({
 
       <Popover.Portal>
         <Popover.Content
-          className="bg-white p-4 rounded-lg shadow-lg z-50"
+          className="z-50 rounded-lg bg-white p-4 shadow-lg"
           sideOffset={5}
           align="end"
           onInteractOutside={(e) => {
diff --git a/apps/admin/src/shared/widgets/common/ScreenLoader.tsx b/apps/admin/src/shared/widgets/common/ScreenLoader.tsx
index b85fae4..ae7e6ef 100755
--- a/apps/admin/src/shared/widgets/common/ScreenLoader.tsx
+++ b/apps/admin/src/shared/widgets/common/ScreenLoader.tsx
@@ -5,18 +5,18 @@ export function ScreenLoader() {
   const intl = useIntl();
 
   return (
-    <div className="flex flex-col items-center gap-2 justify-center fixed inset-0 z-50 transition-opacity duration-700 ease-in-out">
+    <div className="fixed inset-0 z-50 flex flex-col items-center justify-center gap-2 transition-opacity duration-700 ease-in-out">
       <img
         src={toAbsoluteUrl('/media/app/logo-light.svg')}
-        className="dark:hidden h-15"
+        className="h-15 dark:hidden"
         alt="logo"
       />
       <img
         src={toAbsoluteUrl('/media/app/logo-dark.svg')}
-        className="hidden dark:inline-block h-15"
+        className="hidden h-15 dark:inline-block"
         alt="logo"
       />
-      <div className="text-muted-foreground font-medium text-sm">
+      <div className="text-muted-foreground text-sm font-medium">
         {intl.formatMessage({ id: 'STATE.LOADING' })}...
       </div>
     </div>
diff --git a/apps/admin/src/shared/widgets/common/UserHero.tsx b/apps/admin/src/shared/widgets/common/UserHero.tsx
index fcd0756..ccf093b 100755
--- a/apps/admin/src/shared/widgets/common/UserHero.tsx
+++ b/apps/admin/src/shared/widgets/common/UserHero.tsx
@@ -22,13 +22,13 @@ export function UserHero({ image, name, info }: UserHeroProps) {
   const buildInfo = (info: UserHeroInfo[]) => {
     return info.map((item, index) => {
       return (
-        <div className="flex gap-1.25 items-center" key={`info-${index}`}>
+        <div className="flex items-center gap-1.25" key={`info-${index}`}>
           {item.icon && <item.icon size={16} className="text-muted-foreground text-sm" />}
           {item.email ? (
             <Link
               to={item.email}
               target="_blank"
-              className="text-secondary-foreground font-medium hover:text-primary"
+              className="text-secondary-foreground hover:text-primary font-medium"
               rel="noreferrer"
             >
               {item.email}
@@ -43,7 +43,7 @@ export function UserHero({ image, name, info }: UserHeroProps) {
 
   return (
     <div
-      className="bg-center bg-cover bg-no-repeat hero-bg"
+      className="hero-bg bg-cover bg-center bg-no-repeat"
       style={{
         backgroundImage:
           theme === 'dark'
@@ -52,10 +52,10 @@ export function UserHero({ image, name, info }: UserHeroProps) {
       }}
     >
       <Container>
-        <div className="flex flex-col items-center gap-2 lg:gap-3.5 py-4 lg:pt-5 lg:pb-10">
+        <div className="flex flex-col items-center gap-2 py-4 lg:gap-3.5 lg:pt-5 lg:pb-10">
           {image}
           <div className="flex items-center gap-1.5">
-            <div className="text-lg leading-5 font-semibold text-mono">{name}</div>
+            <div className="text-mono text-lg leading-5 font-semibold">{name}</div>
             <svg
               xmlns="http://www.w3.org/2000/svg"
               width="15"
@@ -70,7 +70,7 @@ export function UserHero({ image, name, info }: UserHeroProps) {
               />
             </svg>
           </div>
-          <div className="flex flex-wrap justify-center gap-1 lg:gap-4.5 text-sm">
+          <div className="flex flex-wrap justify-center gap-1 text-sm lg:gap-4.5">
             {buildInfo(info)}
           </div>
         </div>
diff --git a/apps/admin/src/shared/widgets/common/toolbar.tsx b/apps/admin/src/shared/widgets/common/toolbar.tsx
index 35a8ad5..6342ec2 100755
--- a/apps/admin/src/shared/widgets/common/toolbar.tsx
+++ b/apps/admin/src/shared/widgets/common/toolbar.tsx
@@ -5,7 +5,7 @@ import { useMenu } from '#shared/hooks/useMenu';
 
 const Toolbar = ({ children }: { children: ReactNode }) => {
   return (
-    <div className="flex flex-wrap items-center lg:items-end justify-between gap-5 pb-7.5">
+    <div className="flex flex-wrap items-center justify-between gap-5 pb-7.5 lg:items-end">
       {children}
     </div>
   );
@@ -21,12 +21,12 @@ const ToolbarPageTitle = ({ text }: { text?: string }) => {
   const menuConfig = useMenuConfig();
   const item = getCurrentItem(menuConfig);
 
-  return <h1 className="text-xl font-medium leading-none text-mono">{text ?? item?.title}</h1>;
+  return <h1 className="text-mono text-xl leading-none font-medium">{text ?? item?.title}</h1>;
 };
 
 const ToolbarDescription = ({ children }: { children: ReactNode }) => {
   return (
-    <div className="flex items-center gap-2 text-sm font-normal text-secondary-foreground">
+    <div className="text-secondary-foreground flex items-center gap-2 text-sm font-normal">
       {children}
     </div>
   );
diff --git a/apps/admin/src/shared/widgets/diff/component.tsx b/apps/admin/src/shared/widgets/diff/component.tsx
index 9847c80..8b6d63c 100644
--- a/apps/admin/src/shared/widgets/diff/component.tsx
+++ b/apps/admin/src/shared/widgets/diff/component.tsx
@@ -21,7 +21,7 @@ export function DiffViewer({ fileDiff }: { fileDiff: FileDiff }) {
                 line.type === 'unchanged' && 'border-transparent'
               )}
             >
-              <div className="flex min-w-20 select-none items-center gap-2 px-4 py-1 text-xs text-muted-foreground">
+              <div className="text-muted-foreground flex min-w-20 items-center gap-2 px-4 py-1 text-xs select-none">
                 <span className="w-8 text-right">{line.oldLineNumber || ''}</span>
                 <span className="w-8 text-right">{line.newLineNumber || ''}</span>
               </div>
diff --git a/apps/admin/src/shared/widgets/screens/FileLoading.tsx b/apps/admin/src/shared/widgets/screens/FileLoading.tsx
index f2b70b0..5db9615 100644
--- a/apps/admin/src/shared/widgets/screens/FileLoading.tsx
+++ b/apps/admin/src/shared/widgets/screens/FileLoading.tsx
@@ -1,7 +1,7 @@
 'use client';
 
-import * as React from 'react';
 import { Database, File, Folder, HardDrive } from 'lucide-react';
+import * as React from 'react';
 
 interface FileLoadingProps {
   message?: string;
@@ -9,12 +9,12 @@ interface FileLoadingProps {
 
 export const FileLoading: React.FC<FileLoadingProps> = ({ message = 'Loading your file...' }) => {
   return (
-    <div className="relative flex h-full min-h-100 w-full flex-col items-center justify-center overflow-hidden rounded-lg bg-background">
+    <div className="bg-background relative flex h-full min-h-100 w-full flex-col items-center justify-center overflow-hidden rounded-lg">
       <div className="pointer-events-none absolute inset-0 overflow-hidden opacity-20">
         {[...Array(8)].map((_, i) => (
           <div
             key={i}
-            className="absolute h-px bg-gradient-to-r from-transparent via-primary to-transparent"
+            className="via-primary absolute h-px bg-gradient-to-r from-transparent to-transparent"
             style={{
               top: `${12 + i * 12}%`,
               left: 0,
@@ -27,7 +27,7 @@ export const FileLoading: React.FC<FileLoadingProps> = ({ message = 'Loading you
         {[...Array(6)].map((_, i) => (
           <div
             key={`v-${i}`}
-            className="absolute w-px bg-gradient-to-b from-transparent via-primary to-transparent"
+            className="via-primary absolute w-px bg-gradient-to-b from-transparent to-transparent"
             style={{
               left: `${15 + i * 15}%`,
               top: 0,
@@ -44,7 +44,7 @@ export const FileLoading: React.FC<FileLoadingProps> = ({ message = 'Loading you
         {[...Array(3)].map((_, i) => (
           <div
             key={i}
-            className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full border border-primary/30"
+            className="border-primary/30 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full border"
             style={{
               width: `${120 + i * 60}px`,
               height: `${120 + i * 60}px`,
@@ -65,14 +65,14 @@ export const FileLoading: React.FC<FileLoadingProps> = ({ message = 'Loading you
         ].map(({ Icon, delay, duration }, i) => (
           <div
             key={i}
-            className="absolute left-1/2 top-1/2 h-full w-full -translate-x-1/2 -translate-y-1/2"
+            className="absolute top-1/2 left-1/2 h-full w-full -translate-x-1/2 -translate-y-1/2"
             style={{
               animation: `orbit ${duration}s linear infinite`,
               animationDelay: `${delay}s`
             }}
           >
             <div
-              className="absolute -top-2 left-1/2 -translate-x-1/2 rounded-md bg-primary/10 p-1.5 text-primary"
+              className="bg-primary/10 text-primary absolute -top-2 left-1/2 -translate-x-1/2 rounded-md p-1.5"
               style={{
                 animation: `counter-orbit ${duration}s linear infinite`,
                 animationDelay: `${delay}s`
@@ -90,26 +90,26 @@ export const FileLoading: React.FC<FileLoadingProps> = ({ message = 'Loading you
         <div className="relative">
           {/* Outer spinning ring */}
           <div
-            className="absolute -inset-4 rounded-full border-2 border-transparent border-t-primary"
+            className="border-t-primary absolute -inset-4 rounded-full border-2 border-transparent"
             style={{ animation: 'spin 1s linear infinite' }}
           />
 
           {/* Middle spinning ring (opposite direction) */}
           <div
-            className="absolute -inset-2 rounded-full border-2 border-transparent border-b-primary/50"
+            className="border-b-primary/50 absolute -inset-2 rounded-full border-2 border-transparent"
             style={{ animation: 'spin 1.5s linear infinite reverse' }}
           />
 
           {/* Center icon container */}
-          <div className="relative flex h-16 w-16 items-center justify-center rounded-xl bg-gradient-to-br from-primary/20 to-primary/5 backdrop-blur-sm">
+          <div className="from-primary/20 to-primary/5 relative flex h-16 w-16 items-center justify-center rounded-xl bg-gradient-to-br backdrop-blur-sm">
             {/* Morphing file icon */}
             <div style={{ animation: 'morph-icon 2s ease-in-out infinite' }}>
-              <File className="h-8 w-8 text-primary" />
+              <File className="text-primary h-8 w-8" />
             </div>
 
             {/* Scanning line */}
             <div
-              className="absolute inset-x-0 h-0.5 bg-gradient-to-r from-transparent via-primary to-transparent"
+              className="via-primary absolute inset-x-0 h-0.5 bg-gradient-to-r from-transparent to-transparent"
               style={{ animation: 'scan-vertical 1.5s ease-in-out infinite' }}
             />
           </div>
@@ -117,14 +117,14 @@ export const FileLoading: React.FC<FileLoadingProps> = ({ message = 'Loading you
 
         {/* Loading text with typing effect */}
         <div className="flex flex-col items-center gap-2">
-          <p className="text-sm font-medium text-foreground">{message}</p>
+          <p className="text-foreground text-sm font-medium">{message}</p>
 
           {/* Animated dots */}
           <div className="flex items-center gap-1.5">
             {[...Array(4)].map((_, i) => (
               <div
                 key={i}
-                className="h-1.5 w-1.5 rounded-full bg-primary"
+                className="bg-primary h-1.5 w-1.5 rounded-full"
                 style={{
                   animation: 'bounce-dot 1.2s ease-in-out infinite',
                   animationDelay: `${i * 0.15}s`
@@ -135,9 +135,9 @@ export const FileLoading: React.FC<FileLoadingProps> = ({ message = 'Loading you
         </div>
 
         {/* Progress bar */}
-        <div className="relative h-1 w-48 overflow-hidden rounded-full bg-muted">
+        <div className="bg-muted relative h-1 w-48 overflow-hidden rounded-full">
           <div
-            className="absolute inset-y-0 left-0 w-1/3 rounded-full bg-gradient-to-r from-primary/50 via-primary to-primary/50"
+            className="from-primary/50 via-primary to-primary/50 absolute inset-y-0 left-0 w-1/3 rounded-full bg-gradient-to-r"
             style={{ animation: 'progress-slide 1.5s ease-in-out infinite' }}
           />
         </div>
@@ -148,7 +148,7 @@ export const FileLoading: React.FC<FileLoadingProps> = ({ message = 'Loading you
         {[...Array(12)].map((_, i) => (
           <div
             key={i}
-            className="absolute h-1 w-1 rounded-full bg-primary/40"
+            className="bg-primary/40 absolute h-1 w-1 rounded-full"
             style={{
               left: `${10 + Math.random() * 80}%`,
               bottom: '-5%',
diff --git a/apps/admin/src/shared/widgets/screens/PermissionDenied.tsx b/apps/admin/src/shared/widgets/screens/PermissionDenied.tsx
index e942234..8cb456b 100644
--- a/apps/admin/src/shared/widgets/screens/PermissionDenied.tsx
+++ b/apps/admin/src/shared/widgets/screens/PermissionDenied.tsx
@@ -18,9 +18,9 @@ export const PermissionDenied: React.FC<PermissionDeniedProps> = ({
   onRequestAccess
 }) => {
   return (
-    <div className="relative flex flex-col items-center justify-center h-full overflow-hidden bg-background">
+    <div className="bg-background relative flex h-full flex-col items-center justify-center overflow-hidden">
       {/* Animated scan lines */}
-      <div className="absolute inset-0 overflow-hidden pointer-events-none">
+      <div className="pointer-events-none absolute inset-0 overflow-hidden">
         <div
           className="absolute inset-0 opacity-[0.03]"
           style={{
@@ -34,11 +34,11 @@ export const PermissionDenied: React.FC<PermissionDeniedProps> = ({
           }}
         />
         {/* Moving scan line */}
-        <div className="absolute left-0 right-0 h-32 bg-gradient-to-b from-transparent via-amber-500/5 to-transparent animate-[scan_4s_ease-in-out_infinite]" />
+        <div className="absolute right-0 left-0 h-32 animate-[scan_4s_ease-in-out_infinite] bg-gradient-to-b from-transparent via-amber-500/5 to-transparent" />
       </div>
 
       {/* Vault door circles */}
-      <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
+      <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
         {[...Array(3)].map((_, i) => (
           <div
             key={i}
@@ -53,11 +53,11 @@ export const PermissionDenied: React.FC<PermissionDeniedProps> = ({
       </div>
 
       {/* Corner brackets */}
-      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-64 h-64 pointer-events-none">
-        <div className="absolute top-0 left-0 w-8 h-8 border-l-2 border-t-2 border-amber-500/30" />
-        <div className="absolute top-0 right-0 w-8 h-8 border-r-2 border-t-2 border-amber-500/30" />
-        <div className="absolute bottom-0 left-0 w-8 h-8 border-l-2 border-b-2 border-amber-500/30" />
-        <div className="absolute bottom-0 right-0 w-8 h-8 border-r-2 border-b-2 border-amber-500/30" />
+      <div className="pointer-events-none absolute top-1/2 left-1/2 h-64 w-64 -translate-x-1/2 -translate-y-1/2">
+        <div className="absolute top-0 left-0 h-8 w-8 border-t-2 border-l-2 border-amber-500/30" />
+        <div className="absolute top-0 right-0 h-8 w-8 border-t-2 border-r-2 border-amber-500/30" />
+        <div className="absolute bottom-0 left-0 h-8 w-8 border-b-2 border-l-2 border-amber-500/30" />
+        <div className="absolute right-0 bottom-0 h-8 w-8 border-r-2 border-b-2 border-amber-500/30" />
       </div>
 
       {/* Floating lock icons */}
@@ -75,13 +75,13 @@ export const PermissionDenied: React.FC<PermissionDeniedProps> = ({
         return (
           <div
             key={i}
-            className="absolute text-amber-500/20 animate-[float_3s_ease-in-out_infinite]"
+            className="absolute animate-[float_3s_ease-in-out_infinite] text-amber-500/20"
             style={{
               ...positions[i],
               animationDelay: `${i * 0.4}s`
             }}
           >
-            <Icon className="w-5 h-5" />
+            <Icon className="h-5 w-5" />
           </div>
         );
       })}
@@ -89,23 +89,23 @@ export const PermissionDenied: React.FC<PermissionDeniedProps> = ({
       {/* Main content */}
       <div className="relative z-10 flex flex-col items-center gap-6 p-8">
         {/* Lock icon with shield */}
-        <div className="relative group">
+        <div className="group relative">
           {/* Pulsing shield background */}
           <div className="absolute inset-0 flex items-center justify-center">
-            <div className="w-28 h-28 rounded-full bg-amber-500/5 animate-[pulse_2s_ease-in-out_infinite]" />
+            <div className="h-28 w-28 animate-[pulse_2s_ease-in-out_infinite] rounded-full bg-amber-500/5" />
           </div>
           <div className="absolute inset-0 flex items-center justify-center">
             <div
-              className="w-20 h-20 rounded-full bg-amber-500/10 animate-[pulse_2s_ease-in-out_infinite]"
+              className="h-20 w-20 animate-[pulse_2s_ease-in-out_infinite] rounded-full bg-amber-500/10"
               style={{ animationDelay: '0.5s' }}
             />
           </div>
 
           {/* Hexagon border */}
-          <div className="relative w-24 h-24 flex items-center justify-center">
+          <div className="relative flex h-24 w-24 items-center justify-center">
             <svg
               viewBox="0 0 100 100"
-              className="absolute inset-0 w-full h-full animate-[spin_20s_linear_infinite]"
+              className="absolute inset-0 h-full w-full animate-[spin_20s_linear_infinite]"
             >
               <polygon
                 points="50,2 95,25 95,75 50,98 5,75 5,25"
@@ -119,44 +119,44 @@ export const PermissionDenied: React.FC<PermissionDeniedProps> = ({
 
             {/* Lock icon */}
             <div className="relative">
-              <Lock className="w-10 h-10 text-amber-500 transition-transform duration-300 group-hover:scale-110" />
+              <Lock className="h-10 w-10 text-amber-500 transition-transform duration-300 group-hover:scale-110" />
               {/* Lock shake animation on hover */}
-              <div className="absolute -top-1 -right-1 w-4 h-4 bg-background rounded-full flex items-center justify-center">
-                <Ban className="w-3 h-3 text-amber-600" />
+              <div className="bg-background absolute -top-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full">
+                <Ban className="h-3 w-3 text-amber-600" />
               </div>
             </div>
           </div>
         </div>
 
         {/* Status badge */}
-        <div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-amber-500/10 border border-amber-500/20">
-          <ShieldOff className="w-3.5 h-3.5 text-amber-500" />
-          <span className="text-xs font-mono font-medium text-amber-500 tracking-wider">
+        <div className="flex items-center gap-2 rounded-full border border-amber-500/20 bg-amber-500/10 px-3 py-1.5">
+          <ShieldOff className="h-3.5 w-3.5 text-amber-500" />
+          <span className="font-mono text-xs font-medium tracking-wider text-amber-500">
             403 FORBIDDEN
           </span>
         </div>
 
         {/* Text content */}
-        <div className="text-center space-y-2 max-w-sm">
-          <h2 className="text-xl font-semibold text-foreground">{title}</h2>
-          <p className="text-sm text-muted-foreground leading-relaxed">{message}</p>
+        <div className="max-w-sm space-y-2 text-center">
+          <h2 className="text-foreground text-xl font-semibold">{title}</h2>
+          <p className="text-muted-foreground text-sm leading-relaxed">{message}</p>
         </div>
 
         {/* Access level indicator */}
-        <div className="flex items-center gap-3 px-4 py-2 rounded-lg bg-muted/50 border border-border">
+        <div className="bg-muted/50 border-border flex items-center gap-3 rounded-lg border px-4 py-2">
           <div className="flex items-center gap-1.5">
-            <div className="w-2 h-2 rounded-full bg-emerald-500" />
-            <span className="text-xs text-muted-foreground">Public</span>
+            <div className="h-2 w-2 rounded-full bg-emerald-500" />
+            <span className="text-muted-foreground text-xs">Public</span>
           </div>
-          <div className="w-px h-4 bg-border" />
+          <div className="bg-border h-4 w-px" />
           <div className="flex items-center gap-1.5">
-            <div className="w-2 h-2 rounded-full bg-amber-500" />
-            <span className="text-xs text-muted-foreground">Internal</span>
+            <div className="h-2 w-2 rounded-full bg-amber-500" />
+            <span className="text-muted-foreground text-xs">Internal</span>
           </div>
-          <div className="w-px h-4 bg-border" />
+          <div className="bg-border h-4 w-px" />
           <div className="flex items-center gap-1.5 opacity-50">
-            <div className="w-2 h-2 rounded-full bg-red-500 animate-pulse" />
-            <span className="text-xs text-muted-foreground">Restricted</span>
+            <div className="h-2 w-2 animate-pulse rounded-full bg-red-500" />
+            <span className="text-muted-foreground text-xs">Restricted</span>
           </div>
         </div>
 
@@ -164,7 +164,7 @@ export const PermissionDenied: React.FC<PermissionDeniedProps> = ({
         <div className="flex items-center gap-3 pt-2">
           {onBack && (
             <Button variant="outline" size="sm" onClick={onBack} className="gap-2">
-              <ArrowLeft className="w-4 h-4" />
+              <ArrowLeft className="h-4 w-4" />
               Go back
             </Button>
           )}
@@ -172,18 +172,18 @@ export const PermissionDenied: React.FC<PermissionDeniedProps> = ({
             <Button
               size="sm"
               onClick={onRequestAccess}
-              className="gap-2 bg-amber-500 hover:bg-amber-600 text-white"
+              className="gap-2 bg-amber-500 text-white hover:bg-amber-600"
             >
-              <KeyRound className="w-4 h-4" />
+              <KeyRound className="h-4 w-4" />
               Request access
             </Button>
           )}
         </div>
       </div>
 
-      <div className="absolute bottom-6 left-1/2 -translate-x-1/2 flex items-center gap-2 text-muted-foreground/50">
-        <Lock className="w-3 h-3" />
-        <span className="text-[10px] font-mono tracking-widest uppercase">Protected Resource</span>
+      <div className="text-muted-foreground/50 absolute bottom-6 left-1/2 flex -translate-x-1/2 items-center gap-2">
+        <Lock className="h-3 w-3" />
+        <span className="font-mono text-[10px] tracking-widest uppercase">Protected Resource</span>
       </div>
 
       <style>{`
diff --git a/apps/admin/src/shared/widgets/screens/ResourceLoading.tsx b/apps/admin/src/shared/widgets/screens/ResourceLoading.tsx
index accee9a..4f3b4d9 100644
--- a/apps/admin/src/shared/widgets/screens/ResourceLoading.tsx
+++ b/apps/admin/src/shared/widgets/screens/ResourceLoading.tsx
@@ -16,18 +16,18 @@ export const ResourceLoading: React.FC<LoadingStateProps> = ({
   return (
     <div
       className={cn(
-        'relative flex h-full min-h-100 w-full flex-col items-center justify-center overflow-hidden rounded-lg bg-background',
+        'bg-background relative flex h-full min-h-100 w-full flex-col items-center justify-center overflow-hidden rounded-lg',
         className
       )}
     >
       {/* Animated gradient background */}
       <div className="pointer-events-none absolute inset-0 overflow-hidden">
         <div
-          className="absolute -left-1/4 -top-1/4 h-1/2 w-1/2 animate-[drift_8s_ease-in-out_infinite] rounded-full bg-primary/5 blur-3xl"
+          className="bg-primary/5 absolute -top-1/4 -left-1/4 h-1/2 w-1/2 animate-[drift_8s_ease-in-out_infinite] rounded-full blur-3xl"
           style={{ animationDelay: '0s' }}
         />
         <div
-          className="absolute -bottom-1/4 -right-1/4 h-1/2 w-1/2 animate-[drift_8s_ease-in-out_infinite_reverse] rounded-full bg-primary/5 blur-3xl"
+          className="bg-primary/5 absolute -right-1/4 -bottom-1/4 h-1/2 w-1/2 animate-[drift_8s_ease-in-out_infinite_reverse] rounded-full blur-3xl"
           style={{ animationDelay: '-4s' }}
         />
       </div>
@@ -46,26 +46,26 @@ export const ResourceLoading: React.FC<LoadingStateProps> = ({
       <div className="relative mb-8">
         {/* Outer rotating ring */}
         <div className="absolute inset-0 flex items-center justify-center">
-          <div className="h-32 w-32 animate-[spin_3s_linear_infinite] rounded-full border-2 border-dashed border-primary/20" />
+          <div className="border-primary/20 h-32 w-32 animate-[spin_3s_linear_infinite] rounded-full border-2 border-dashed" />
         </div>
 
         {/* Middle pulsing ring */}
         <div className="absolute inset-0 flex items-center justify-center">
-          <div className="h-24 w-24 animate-[pulse_2s_ease-in-out_infinite] rounded-full border border-primary/30" />
+          <div className="border-primary/30 h-24 w-24 animate-[pulse_2s_ease-in-out_infinite] rounded-full border" />
         </div>
 
         {/* Inner counter-rotating ring */}
         <div className="absolute inset-0 flex items-center justify-center">
-          <div className="h-16 w-16 animate-[spin_2s_linear_infinite_reverse] rounded-full border-2 border-primary/40" />
+          <div className="border-primary/40 h-16 w-16 animate-[spin_2s_linear_infinite_reverse] rounded-full border-2" />
         </div>
 
         {/* Core animated element */}
         <div className="relative flex h-32 w-32 items-center justify-center">
           {/* Morphing shape */}
-          <div className="absolute h-10 w-10 animate-[morph_4s_ease-in-out_infinite] bg-primary/80" />
+          <div className="bg-primary/80 absolute h-10 w-10 animate-[morph_4s_ease-in-out_infinite]" />
 
           {/* Center dot */}
-          <div className="absolute h-3 w-3 animate-pulse rounded-full bg-primary" />
+          <div className="bg-primary absolute h-3 w-3 animate-pulse rounded-full" />
         </div>
 
         {/* Orbiting dots */}
@@ -79,7 +79,7 @@ export const ResourceLoading: React.FC<LoadingStateProps> = ({
             }}
           >
             <div
-              className="absolute h-2 w-2 rounded-full bg-primary"
+              className="bg-primary absolute h-2 w-2 rounded-full"
               style={{
                 top: '0%',
                 left: '50%',
@@ -94,24 +94,24 @@ export const ResourceLoading: React.FC<LoadingStateProps> = ({
       {/* Text content */}
       <div className="relative z-10 text-center">
         <div className="mb-2 flex items-center justify-center gap-1">
-          <span className="text-lg font-medium text-foreground">{message}</span>
+          <span className="text-foreground text-lg font-medium">{message}</span>
           <span className="flex gap-0.5">
             {[...Array(3)].map((_, i) => (
               <span
                 key={i}
-                className="inline-block h-1 w-1 animate-bounce rounded-full bg-foreground"
+                className="bg-foreground inline-block h-1 w-1 animate-bounce rounded-full"
                 style={{ animationDelay: `${i * 0.15}s` }}
               />
             ))}
           </span>
         </div>
-        <p className="text-sm text-muted-foreground">{submessage}</p>
+        <p className="text-muted-foreground text-sm">{submessage}</p>
       </div>
 
       {/* Bottom progress indicator */}
       <div className="absolute bottom-8 left-1/2 w-48 -translate-x-1/2">
-        <div className="h-1 w-full overflow-hidden rounded-full bg-muted">
-          <div className="h-full w-1/3 animate-[slide_1.5s_ease-in-out_infinite] rounded-full bg-gradient-to-r from-transparent via-primary to-transparent" />
+        <div className="bg-muted h-1 w-full overflow-hidden rounded-full">
+          <div className="via-primary h-full w-1/3 animate-[slide_1.5s_ease-in-out_infinite] rounded-full bg-gradient-to-r from-transparent to-transparent" />
         </div>
       </div>
 
diff --git a/apps/admin/src/shared/widgets/screens/ResourceNotFound.tsx b/apps/admin/src/shared/widgets/screens/ResourceNotFound.tsx
index 5420dbb..1a7c095 100644
--- a/apps/admin/src/shared/widgets/screens/ResourceNotFound.tsx
+++ b/apps/admin/src/shared/widgets/screens/ResourceNotFound.tsx
@@ -23,19 +23,19 @@ export const ResourceNotFound: React.FC<ResourceNotFoundProps> = ({
   return (
     <div
       className={cn(
-        'relative flex h-full min-h-100 w-full flex-col items-center justify-center overflow-hidden rounded-xl bg-gradient-to-b from-background to-muted/20 p-8',
+        'from-background to-muted/20 relative flex h-full min-h-100 w-full flex-col items-center justify-center overflow-hidden rounded-xl bg-gradient-to-b p-8',
         className
       )}
     >
       <div className="pointer-events-none absolute inset-0 overflow-hidden">
-        <div className="absolute inset-0 bg-[linear-gradient(to_right,hsl(var(--muted)/0.3)_1px,transparent_1px),linear-gradient(to_bottom,hsl(var(--muted)/0.3)_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_110%)]" />
+        <div className="absolute inset-0 bg-[linear-gradient(to_right,hsl(var(--muted)/0.3)_1px,transparent_1px),linear-gradient(to_bottom,hsl(var(--muted)/0.3)_1px,transparent_1px)] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_110%)] bg-[size:4rem_4rem]" />
       </div>
 
       <div className="pointer-events-none absolute inset-0">
         {[...Array(6)].map((_, i) => (
           <div
             key={i}
-            className="absolute h-1 w-1 rounded-full bg-primary/20"
+            className="bg-primary/20 absolute h-1 w-1 rounded-full"
             style={{
               left: `${20 + i * 12}%`,
               top: `${30 + (i % 3) * 15}%`,
@@ -50,33 +50,33 @@ export const ResourceNotFound: React.FC<ResourceNotFoundProps> = ({
         {/* Animated icon container */}
         <div className="group relative mb-8">
           {/* Glow effect */}
-          <div className="absolute -inset-4 rounded-full bg-primary/5 blur-2xl transition-all duration-500 group-hover:bg-primary/10" />
+          <div className="bg-primary/5 group-hover:bg-primary/10 absolute -inset-4 rounded-full blur-2xl transition-all duration-500" />
 
           {/* Orbiting elements */}
           <div className="absolute inset-0 animate-[spin_8s_linear_infinite]">
-            <Folder className="absolute -left-8 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground/40" />
+            <Folder className="text-muted-foreground/40 absolute top-1/2 -left-8 h-4 w-4 -translate-y-1/2" />
           </div>
           <div className="absolute inset-0 animate-[spin_12s_linear_infinite_reverse]">
-            <Search className="absolute -right-6 top-1/4 h-3 w-3 text-muted-foreground/30" />
+            <Search className="text-muted-foreground/30 absolute top-1/4 -right-6 h-3 w-3" />
           </div>
 
           {/* Main icon with glitch effect */}
           <div className="relative">
             <div className="absolute inset-0 animate-pulse">
-              <FileQuestion className="h-24 w-24 text-primary/10" />
+              <FileQuestion className="text-primary/10 h-24 w-24" />
             </div>
-            <FileQuestion className="relative h-24 w-24 text-muted-foreground/70 transition-colors duration-300 group-hover:text-primary/60" />
+            <FileQuestion className="text-muted-foreground/70 group-hover:text-primary/60 relative h-24 w-24 transition-colors duration-300" />
 
             {/* Glitch layers */}
             <FileQuestion
-              className="absolute inset-0 h-24 w-24 text-destructive/20 transition-transform duration-100"
+              className="text-destructive/20 absolute inset-0 h-24 w-24 transition-transform duration-100"
               style={{
                 animation: 'glitch-1 2.5s infinite',
                 clipPath: 'polygon(0 0, 100% 0, 100% 45%, 0 45%)'
               }}
             />
             <FileQuestion
-              className="absolute inset-0 h-24 w-24 text-primary/20 transition-transform duration-100"
+              className="text-primary/20 absolute inset-0 h-24 w-24 transition-transform duration-100"
               style={{
                 animation: 'glitch-2 2.5s infinite',
                 clipPath: 'polygon(0 45%, 100% 45%, 100% 100%, 0 100%)'
@@ -84,36 +84,36 @@ export const ResourceNotFound: React.FC<ResourceNotFoundProps> = ({
             />
           </div>
 
-          <div className="absolute -bottom-2 left-1/2 flex -translate-x-1/2 items-center gap-1.5 rounded-full border border-border/50 bg-background/80 px-3 py-1 backdrop-blur-sm">
+          <div className="border-border/50 bg-background/80 absolute -bottom-2 left-1/2 flex -translate-x-1/2 items-center gap-1.5 rounded-full border px-3 py-1 backdrop-blur-sm">
             <span className="relative flex h-2 w-2">
               <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-amber-400 opacity-75" />
               <span className="relative inline-flex h-2 w-2 rounded-full bg-amber-500" />
             </span>
-            <span className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
+            <span className="text-muted-foreground text-[10px] font-medium tracking-wider uppercase">
               404
             </span>
           </div>
         </div>
 
-        <h2 className="mb-3 bg-gradient-to-b from-foreground to-foreground/70 bg-clip-text text-2xl font-semibold tracking-tight text-transparent">
+        <h2 className="from-foreground to-foreground/70 mb-3 bg-gradient-to-b bg-clip-text text-2xl font-semibold tracking-tight text-transparent">
           {title}
         </h2>
-        <p className="mb-8 max-w-sm text-sm leading-relaxed text-muted-foreground">{message}</p>
+        <p className="text-muted-foreground mb-8 max-w-sm text-sm leading-relaxed">{message}</p>
 
         {onBack && (
           <Button
             variant="outline"
             onClick={onBack}
-            className="group/btn relative overflow-hidden border-border/50 bg-background/50 backdrop-blur-sm transition-all duration-300 hover:border-primary/30 hover:bg-primary/5"
+            className="group/btn border-border/50 bg-background/50 hover:border-primary/30 hover:bg-primary/5 relative overflow-hidden backdrop-blur-sm transition-all duration-300"
           >
-            <span className="absolute inset-0 bg-gradient-to-r from-primary/0 via-primary/5 to-primary/0 opacity-0 transition-opacity duration-300 group-hover/btn:opacity-100" />
+            <span className="from-primary/0 via-primary/5 to-primary/0 absolute inset-0 bg-gradient-to-r opacity-0 transition-opacity duration-300 group-hover/btn:opacity-100" />
             <ArrowLeft className="mr-2 h-4 w-4 transition-transform duration-300 group-hover/btn:-translate-x-1" />
             {backButtonText ?? 'Go back'}
           </Button>
         )}
       </div>
 
-      <div className="absolute bottom-0 left-1/2 h-px w-1/2 -translate-x-1/2 bg-gradient-to-r from-transparent via-border to-transparent" />
+      <div className="via-border absolute bottom-0 left-1/2 h-px w-1/2 -translate-x-1/2 bg-gradient-to-r from-transparent to-transparent" />
 
       <style>{`
         @keyframes float {
diff --git a/apps/admin/src/shared/widgets/screens/SomethingWentWrong.tsx b/apps/admin/src/shared/widgets/screens/SomethingWentWrong.tsx
index 91c8a23..48d2696 100644
--- a/apps/admin/src/shared/widgets/screens/SomethingWentWrong.tsx
+++ b/apps/admin/src/shared/widgets/screens/SomethingWentWrong.tsx
@@ -33,7 +33,7 @@ export const SomethingWentWrong: React.FC<SomethingWentWrongProps> = ({
   return (
     <div
       className={cn(
-        'relative flex h-full min-h-100 w-full flex-col items-center justify-center overflow-hidden rounded-xl bg-gradient-to-b from-background to-destructive/5 p-8',
+        'from-background to-destructive/5 relative flex h-full min-h-100 w-full flex-col items-center justify-center overflow-hidden rounded-xl bg-gradient-to-b p-8',
         className
       )}
     >
@@ -59,7 +59,7 @@ export const SomethingWentWrong: React.FC<SomethingWentWrongProps> = ({
         {[...Array(3)].map((_, i) => (
           <div
             key={i}
-            className="absolute rounded-full border border-destructive/10"
+            className="border-destructive/10 absolute rounded-full border"
             style={{
               width: `${150 + i * 80}px`,
               height: `${150 + i * 80}px`,
@@ -80,7 +80,7 @@ export const SomethingWentWrong: React.FC<SomethingWentWrongProps> = ({
         ].map((item, i) => (
           <item.Icon
             key={i}
-            className="absolute text-destructive/20"
+            className="text-destructive/20 absolute"
             style={{
               left: item.left,
               top: item.top,
@@ -98,11 +98,11 @@ export const SomethingWentWrong: React.FC<SomethingWentWrongProps> = ({
         {/* Animated icon container */}
         <div className="group relative mb-8">
           {/* Glow effect */}
-          <div className="absolute -inset-4 rounded-full bg-destructive/5 blur-2xl transition-all duration-500 group-hover:bg-destructive/10" />
+          <div className="bg-destructive/5 group-hover:bg-destructive/10 absolute -inset-4 rounded-full blur-2xl transition-all duration-500" />
 
           {/* Rotating warning ring */}
           <div
-            className="absolute -inset-6 rounded-full border-2 border-dashed border-destructive/20"
+            className="border-destructive/20 absolute -inset-6 rounded-full border-2 border-dashed"
             style={{ animation: 'spin 10s linear infinite' }}
           />
 
@@ -110,20 +110,20 @@ export const SomethingWentWrong: React.FC<SomethingWentWrongProps> = ({
           <div className="relative">
             {/* Background pulse */}
             <div className="absolute inset-0 flex items-center justify-center">
-              <div className="h-20 w-20 animate-ping rounded-full bg-destructive/10" />
+              <div className="bg-destructive/10 h-20 w-20 animate-ping rounded-full" />
             </div>
 
             {/* Icon container with shake */}
             <div
-              className="relative rounded-2xl bg-gradient-to-br from-destructive/10 to-destructive/5 p-6 backdrop-blur-sm transition-transform duration-300 group-hover:scale-105"
+              className="from-destructive/10 to-destructive/5 relative rounded-2xl bg-gradient-to-br p-6 backdrop-blur-sm transition-transform duration-300 group-hover:scale-105"
               style={{ animation: 'shake 4s ease-in-out infinite' }}
             >
-              <AlertTriangle className="h-12 w-12 text-destructive/70 transition-colors duration-300 group-hover:text-destructive" />
+              <AlertTriangle className="text-destructive/70 group-hover:text-destructive h-12 w-12 transition-colors duration-300" />
             </div>
 
             {/* Glitch overlay */}
             <div
-              className="absolute inset-0 rounded-2xl bg-destructive/5"
+              className="bg-destructive/5 absolute inset-0 rounded-2xl"
               style={{
                 animation: 'glitch-flash 3s ease-in-out infinite'
               }}
@@ -131,22 +131,22 @@ export const SomethingWentWrong: React.FC<SomethingWentWrongProps> = ({
           </div>
 
           {/* Status indicator */}
-          <div className="absolute -bottom-2 left-1/2 flex -translate-x-1/2 items-center gap-1.5 rounded-full border border-destructive/30 bg-background/80 px-3 py-1 backdrop-blur-sm">
+          <div className="border-destructive/30 bg-background/80 absolute -bottom-2 left-1/2 flex -translate-x-1/2 items-center gap-1.5 rounded-full border px-3 py-1 backdrop-blur-sm">
             <span className="relative flex h-2 w-2">
-              <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-destructive opacity-75" />
-              <span className="relative inline-flex h-2 w-2 rounded-full bg-destructive" />
+              <span className="bg-destructive absolute inline-flex h-full w-full animate-ping rounded-full opacity-75" />
+              <span className="bg-destructive relative inline-flex h-2 w-2 rounded-full" />
             </span>
-            <span className="text-[10px] font-medium uppercase tracking-wider text-destructive">
+            <span className="text-destructive text-[10px] font-medium tracking-wider uppercase">
               Error
             </span>
           </div>
         </div>
 
         {/* Text content */}
-        <h2 className="mb-3 bg-gradient-to-b from-foreground to-foreground/70 bg-clip-text text-2xl font-semibold tracking-tight text-transparent">
+        <h2 className="from-foreground to-foreground/70 mb-3 bg-gradient-to-b bg-clip-text text-2xl font-semibold tracking-tight text-transparent">
           {title}
         </h2>
-        <p className="mb-8 max-w-sm text-sm leading-relaxed text-muted-foreground">{message}</p>
+        <p className="text-muted-foreground mb-8 max-w-sm text-sm leading-relaxed">{message}</p>
 
         {/* Action buttons */}
         <div className="flex items-center gap-3">
@@ -164,9 +164,9 @@ export const SomethingWentWrong: React.FC<SomethingWentWrongProps> = ({
               variant="outline"
               onClick={handleRetry}
               disabled={isRetrying}
-              className="group/btn relative overflow-hidden border-destructive/30 bg-background/50 backdrop-blur-sm transition-all duration-300 hover:border-destructive/50 hover:bg-destructive/5"
+              className="group/btn border-destructive/30 bg-background/50 hover:border-destructive/50 hover:bg-destructive/5 relative overflow-hidden backdrop-blur-sm transition-all duration-300"
             >
-              <span className="absolute inset-0 bg-gradient-to-r from-destructive/0 via-destructive/5 to-destructive/0 opacity-0 transition-opacity duration-300 group-hover/btn:opacity-100" />
+              <span className="from-destructive/0 via-destructive/5 to-destructive/0 absolute inset-0 bg-gradient-to-r opacity-0 transition-opacity duration-300 group-hover/btn:opacity-100" />
               <RefreshCw
                 className={cn(
                   'mr-2 h-4 w-4 transition-transform duration-300',
@@ -179,7 +179,7 @@ export const SomethingWentWrong: React.FC<SomethingWentWrongProps> = ({
         </div>
       </div>
 
-      <div className="absolute bottom-0 left-1/2 h-px w-1/2 -translate-x-1/2 bg-gradient-to-r from-transparent via-destructive/30 to-transparent" />
+      <div className="via-destructive/30 absolute bottom-0 left-1/2 h-px w-1/2 -translate-x-1/2 bg-gradient-to-r from-transparent to-transparent" />
 
       <style>{`
         @keyframes stripe-move {
diff --git a/apps/admin/tests/unit/core/AccessControl/data/mappers/AdminMapper.test.ts b/apps/admin/tests/unit/core/AccessControl/data/mappers/AdminMapper.test.ts
index e77eb04..bb15aa4 100644
--- a/apps/admin/tests/unit/core/AccessControl/data/mappers/AdminMapper.test.ts
+++ b/apps/admin/tests/unit/core/AccessControl/data/mappers/AdminMapper.test.ts
@@ -1,7 +1,7 @@
 import { describe, expect, it } from 'vitest';
-import { AdminStatusEnum } from '#core/AccessControl/entities/AdminEntity';
 import type { AdminDTO } from '#core/AccessControl/data/api/dto';
 import AdminMapper from '#core/AccessControl/data/mappers/AdminMapper';
+import { AdminStatusEnum } from '#core/AccessControl/entities/AdminEntity';
 
 describe('AdminMapper', () => {
   it('maps an admin DTO with nested roles and permissions', () => {
diff --git a/apps/admin/tests/unit/core/FileManager/data/mappers/EntryMapper.test.ts b/apps/admin/tests/unit/core/FileManager/data/mappers/EntryMapper.test.ts
index c52b05e..f562100 100644
--- a/apps/admin/tests/unit/core/FileManager/data/mappers/EntryMapper.test.ts
+++ b/apps/admin/tests/unit/core/FileManager/data/mappers/EntryMapper.test.ts
@@ -1,7 +1,7 @@
 import { describe, expect, it } from 'vitest';
-import { EntryType } from '#core/FileManager/entities/entry';
 import type { EntryDTO } from '#core/FileManager/data/api/dto';
 import EntryMapper from '#core/FileManager/data/mappers/EntryMapper';
+import { EntryType } from '#core/FileManager/entities/entry';
 
 describe('EntryMapper', () => {
   it('maps folder DTOs and normalizes paths', () => {
diff --git a/backend/package.json b/backend/package.json
index 7d32449..3291e49 100755
--- a/backend/package.json
+++ b/backend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@crux-kit/backend",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "private": true,
   "type": "module",
   "license": "UNLICENSED",
diff --git a/package-lock.json b/package-lock.json
index 2fcd5d6..2b42abe 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "crux",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "crux",
-      "version": "1.0.1",
+      "version": "1.1.0",
       "license": "UNLICENSED",
       "workspaces": [
         "apps/*",
diff --git a/package.json b/package.json
index 15b13fb..93e6a22 100755
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "crux",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "private": true,
   "type": "module",
   "license": "UNLICENSED",
@@ -28,7 +28,9 @@
     "version:major": "npm version major --no-git-tag-version && npm version major --workspaces --no-git-tag-version",
     "prepare": "husky",
     "lint": "node scripts/eslint-with-typescript6.cjs .",
-    "lint:fix": "node scripts/eslint-with-typescript6.cjs --fix ."
+    "lint:fix": "node scripts/eslint-with-typescript6.cjs --fix .",
+    "format": "prettier --write --ignore-unknown .",
+    "format:check": "prettier --check --ignore-unknown ."
   },
   "imports": {},
   "devDependencies": {
diff --git a/packages/design-system/keenicon/.prettierrc b/packages/design-system/keenicon/.prettierrc
index d1bb781..cfe5cbe 100644
--- a/packages/design-system/keenicon/.prettierrc
+++ b/packages/design-system/keenicon/.prettierrc
@@ -8,6 +8,5 @@
   "semi": true,
   "bracketSameLine": false,
   "jsxSingleQuote": false,
-  "arrowParens": "always",
-  "importOrderCaseSensitive": false
+  "arrowParens": "always"
 }
diff --git a/packages/design-system/keenicon/package.json b/packages/design-system/keenicon/package.json
index 78570be..81d4882 100755
--- a/packages/design-system/keenicon/package.json
+++ b/packages/design-system/keenicon/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@crux-kit/keenicon",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "type": "module",
   "types": "src/index.ts",
   "private": true,
diff --git a/packages/hooks/.prettierrc b/packages/hooks/.prettierrc
index 8e40bb2..facf99e 100644
--- a/packages/hooks/.prettierrc
+++ b/packages/hooks/.prettierrc
@@ -8,6 +8,5 @@
   "semi": true,
   "bracketSameLine": false,
   "jsxSingleQuote": false,
-  "arrowParens": "always",
-  "importOrderCaseSensitive": false
+  "arrowParens": "always"
 }
diff --git a/packages/hooks/package.json b/packages/hooks/package.json
index 7dba825..e75bc5b 100644
--- a/packages/hooks/package.json
+++ b/packages/hooks/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@crux-kit/hooks",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "type": "module",
   "types": "src/index.ts",
   "private": true,
diff --git a/packages/services/intl-date/.prettierrc b/packages/services/intl-date/.prettierrc
index 8e40bb2..facf99e 100644
--- a/packages/services/intl-date/.prettierrc
+++ b/packages/services/intl-date/.prettierrc
@@ -8,6 +8,5 @@
   "semi": true,
   "bracketSameLine": false,
   "jsxSingleQuote": false,
-  "arrowParens": "always",
-  "importOrderCaseSensitive": false
+  "arrowParens": "always"
 }
diff --git a/packages/services/intl-date/package.json b/packages/services/intl-date/package.json
index 3778004..2497aa8 100755
--- a/packages/services/intl-date/package.json
+++ b/packages/services/intl-date/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@crux-kit/intl-date",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "type": "module",
   "types": "src/index.ts",
   "private": true,
diff --git a/packages/services/intl-name/.prettierrc b/packages/services/intl-name/.prettierrc
index 8e40bb2..facf99e 100644
--- a/packages/services/intl-name/.prettierrc
+++ b/packages/services/intl-name/.prettierrc
@@ -8,6 +8,5 @@
   "semi": true,
   "bracketSameLine": false,
   "jsxSingleQuote": false,
-  "arrowParens": "always",
-  "importOrderCaseSensitive": false
+  "arrowParens": "always"
 }
diff --git a/packages/services/intl-name/package.json b/packages/services/intl-name/package.json
index 9f95741..4bb4750 100755
--- a/packages/services/intl-name/package.json
+++ b/packages/services/intl-name/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@crux-kit/intl-name",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "type": "module",
   "types": "src/index.ts",
   "private": true,
diff --git a/packages/services/local-storage/.prettierrc b/packages/services/local-storage/.prettierrc
index 8e40bb2..facf99e 100644
--- a/packages/services/local-storage/.prettierrc
+++ b/packages/services/local-storage/.prettierrc
@@ -8,6 +8,5 @@
   "semi": true,
   "bracketSameLine": false,
   "jsxSingleQuote": false,
-  "arrowParens": "always",
-  "importOrderCaseSensitive": false
+  "arrowParens": "always"
 }
diff --git a/packages/services/local-storage/package.json b/packages/services/local-storage/package.json
index 39f978e..df8ac5e 100644
--- a/packages/services/local-storage/package.json
+++ b/packages/services/local-storage/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@crux-kit/local-storage",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "type": "module",
   "types": "src/index.ts",
   "private": true,
diff --git a/packages/types/package.json b/packages/types/package.json
index 01666b0..b1f51cc 100755
--- a/packages/types/package.json
+++ b/packages/types/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@crux-kit/types",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "type": "module",
   "types": "src/index.ts",
   "private": true,
diff --git a/packages/utils/.prettierrc b/packages/utils/.prettierrc
index 8e40bb2..facf99e 100644
--- a/packages/utils/.prettierrc
+++ b/packages/utils/.prettierrc
@@ -8,6 +8,5 @@
   "semi": true,
   "bracketSameLine": false,
   "jsxSingleQuote": false,
-  "arrowParens": "always",
-  "importOrderCaseSensitive": false
+  "arrowParens": "always"
 }
diff --git a/packages/utils/package.json b/packages/utils/package.json
index dd5894f..b5b2d17 100755
--- a/packages/utils/package.json
+++ b/packages/utils/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@crux-kit/utils",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "type": "module",
   "types": "src/index.ts",
   "private": true,
diff --git a/plugins/prettier/one-line-sorted-imports.cjs b/plugins/prettier/one-line-sorted-imports.cjs
index 59eaf14..e4d1bca 100644
--- a/plugins/prettier/one-line-sorted-imports.cjs
+++ b/plugins/prettier/one-line-sorted-imports.cjs
@@ -1,11 +1,14 @@
-const estreePlugin = require('prettier/plugins/estree');
+const estreePlugin = require("prettier/plugins/estree");
 
 function hasSpecifierComments(node) {
-  return node.specifiers?.some((specifier) => specifier.comments?.length > 0) ?? false;
+  return (
+    node.specifiers?.some((specifier) => specifier.comments?.length > 0) ??
+    false
+  );
 }
 
 function flattenImportLines(doc) {
-  if (typeof doc === 'string') {
+  if (typeof doc === "string") {
     return doc;
   }
 
@@ -13,40 +16,40 @@ function flattenImportLines(doc) {
     return doc.map(flattenImportLines);
   }
 
-  if (!doc || typeof doc !== 'object') {
+  if (!doc || typeof doc !== "object") {
     return doc;
   }
 
-  if (doc.type === 'line') {
-    return ' ';
+  if (doc.type === "line") {
+    return " ";
   }
 
-  if ('contents' in doc) {
+  if ("contents" in doc) {
     return {
       ...doc,
-      contents: flattenImportLines(doc.contents)
+      contents: flattenImportLines(doc.contents),
     };
   }
 
-  if (doc.type === 'fill' && 'parts' in doc) {
+  if (doc.type === "fill" && "parts" in doc) {
     return {
       ...doc,
-      parts: flattenImportLines(doc.parts)
+      parts: flattenImportLines(doc.parts),
     };
   }
 
-  if (doc.type === 'if-break') {
+  if (doc.type === "if-break") {
     return {
       ...doc,
       breakContents: flattenImportLines(doc.breakContents),
-      flatContents: flattenImportLines(doc.flatContents)
+      flatContents: flattenImportLines(doc.flatContents),
     };
   }
 
-  if (doc.type === 'group' && 'expandedStates' in doc) {
+  if (doc.type === "group" && "expandedStates" in doc) {
     return {
       ...doc,
-      expandedStates: flattenImportLines(doc.expandedStates)
+      expandedStates: flattenImportLines(doc.expandedStates),
     };
   }
 
@@ -63,13 +66,12 @@ module.exports = {
         const printed = estreePrinter.print(path, options, print, args);
         const node = path.getNode();
 
-        if (node?.type === 'ImportDeclaration' && !hasSpecifierComments(node)) {
+        if (node?.type === "ImportDeclaration" && !hasSpecifierComments(node)) {
           return flattenImportLines(printed);
         }
 
         return printed;
-      }
-    }
-  }
+      },
+    },
+  },
 };
-
diff --git a/scripts/eslint-with-typescript6.cjs b/scripts/eslint-with-typescript6.cjs
index 1a6bac0..6ce5f40 100644
--- a/scripts/eslint-with-typescript6.cjs
+++ b/scripts/eslint-with-typescript6.cjs
@@ -1,18 +1,18 @@
 #!/usr/bin/env node
-const Module = require('node:module')
-const { createRequire } = require('node:module')
-const path = require('node:path')
+const Module = require("node:module");
+const { createRequire } = require("node:module");
+const path = require("node:path");
 
-const rootRequire = createRequire(path.join(process.cwd(), 'package.json'))
-const ts6 = rootRequire('typescript-eslint-ts6')
-const originalLoad = Module._load
+const rootRequire = createRequire(path.join(process.cwd(), "package.json"));
+const ts6 = rootRequire("typescript-eslint-ts6");
+const originalLoad = Module._load;
 
 Module._load = function patchedLoad(request, parent, isMain) {
-  if (request === 'typescript') {
-    return ts6
+  if (request === "typescript") {
+    return ts6;
   }
 
-  return originalLoad.apply(this, arguments)
-}
+  return originalLoad.apply(this, arguments);
+};
 
-require('../node_modules/eslint/bin/eslint.js')
+require("../node_modules/eslint/bin/eslint.js");