diff --git a/src/RookieShop.AppHost/bicepconfig.json b/src/RookieShop.AppHost/bicepconfig.json
new file mode 100644
index 00000000..091a803d
--- /dev/null
+++ b/src/RookieShop.AppHost/bicepconfig.json
@@ -0,0 +1,17 @@
+{
+  "analyzers": {
+    "core": {
+      "rules": {
+        "secure-parameter-default": {
+          "level": "warning"
+        },
+        "no-unused-params": {
+          "level": "warning"
+        }
+      }
+    }
+  },
+  "experimentalFeaturesEnabled": {
+    "extensibility": true
+  }
+}
diff --git a/src/RookieShop.AppHost/storage.module.bicep b/src/RookieShop.AppHost/storage.module.bicep
index e73f0fb1..40ca603c 100644
--- a/src/RookieShop.AppHost/storage.module.bicep
+++ b/src/RookieShop.AppHost/storage.module.bicep
@@ -9,7 +9,6 @@ param principalId string
 @description('')
 param principalType string
 
-
 resource storageAccount_1XR3Um8QY 'Microsoft.Storage/storageAccounts@2022-09-01' = {
   name: toLower(take('storage${uniqueString(resourceGroup().id)}', 24))
   location: location
@@ -21,6 +20,7 @@ resource storageAccount_1XR3Um8QY 'Microsoft.Storage/storageAccounts@2022-09-01'
   }
   kind: 'StorageV2'
   properties: {
+    minimumTlsVersion: 'TLS1_2'
     accessTier: 'Hot'
     networkAcls: {
       defaultAction: 'Allow'
@@ -31,15 +31,20 @@ resource storageAccount_1XR3Um8QY 'Microsoft.Storage/storageAccounts@2022-09-01'
 resource blobService_vTLU20GRg 'Microsoft.Storage/storageAccounts/blobServices@2022-09-01' = {
   parent: storageAccount_1XR3Um8QY
   name: 'default'
-  properties: {
-  }
 }
 
 resource roleAssignment_Gz09cEnxb 'Microsoft.Authorization/roleAssignments@2022-04-01' = {
   scope: storageAccount_1XR3Um8QY
-  name: guid(storageAccount_1XR3Um8QY.id, principalId, subscriptionResourceId('Microsoft.Authorization/roleDefinitions', 'ba92f5b4-2d11-453d-a403-e96b0029c9fe'))
+  name: guid(
+    storageAccount_1XR3Um8QY.id,
+    principalId,
+    subscriptionResourceId('Microsoft.Authorization/roleDefinitions', 'ba92f5b4-2d11-453d-a403-e96b0029c9fe')
+  )
   properties: {
-    roleDefinitionId: subscriptionResourceId('Microsoft.Authorization/roleDefinitions', 'ba92f5b4-2d11-453d-a403-e96b0029c9fe')
+    roleDefinitionId: subscriptionResourceId(
+      'Microsoft.Authorization/roleDefinitions',
+      'ba92f5b4-2d11-453d-a403-e96b0029c9fe'
+    )
     principalId: principalId
     principalType: principalType
   }
@@ -47,9 +52,16 @@ resource roleAssignment_Gz09cEnxb 'Microsoft.Authorization/roleAssignments@2022-
 
 resource roleAssignment_HRj6MDafS 'Microsoft.Authorization/roleAssignments@2022-04-01' = {
   scope: storageAccount_1XR3Um8QY
-  name: guid(storageAccount_1XR3Um8QY.id, principalId, subscriptionResourceId('Microsoft.Authorization/roleDefinitions', '0a9a7e1f-b9d0-4cc4-a60d-0319b160aaa3'))
+  name: guid(
+    storageAccount_1XR3Um8QY.id,
+    principalId,
+    subscriptionResourceId('Microsoft.Authorization/roleDefinitions', '0a9a7e1f-b9d0-4cc4-a60d-0319b160aaa3')
+  )
   properties: {
-    roleDefinitionId: subscriptionResourceId('Microsoft.Authorization/roleDefinitions', '0a9a7e1f-b9d0-4cc4-a60d-0319b160aaa3')
+    roleDefinitionId: subscriptionResourceId(
+      'Microsoft.Authorization/roleDefinitions',
+      '0a9a7e1f-b9d0-4cc4-a60d-0319b160aaa3'
+    )
     principalId: principalId
     principalType: principalType
   }
@@ -57,9 +69,16 @@ resource roleAssignment_HRj6MDafS 'Microsoft.Authorization/roleAssignments@2022-
 
 resource roleAssignment_r0wA6OpKE 'Microsoft.Authorization/roleAssignments@2022-04-01' = {
   scope: storageAccount_1XR3Um8QY
-  name: guid(storageAccount_1XR3Um8QY.id, principalId, subscriptionResourceId('Microsoft.Authorization/roleDefinitions', '974c5e8b-45b9-4653-ba55-5f855dd0fb88'))
+  name: guid(
+    storageAccount_1XR3Um8QY.id,
+    principalId,
+    subscriptionResourceId('Microsoft.Authorization/roleDefinitions', '974c5e8b-45b9-4653-ba55-5f855dd0fb88')
+  )
   properties: {
-    roleDefinitionId: subscriptionResourceId('Microsoft.Authorization/roleDefinitions', '974c5e8b-45b9-4653-ba55-5f855dd0fb88')
+    roleDefinitionId: subscriptionResourceId(
+      'Microsoft.Authorization/roleDefinitions',
+      '974c5e8b-45b9-4653-ba55-5f855dd0fb88'
+    )
     principalId: principalId
     principalType: principalType
   }
diff --git a/src/RookieShop.BackOffice/app/(auth)/(login)/page.tsx b/src/RookieShop.BackOffice/app/(auth)/(login)/page.tsx
index f8890902..1a92448d 100644
--- a/src/RookieShop.BackOffice/app/(auth)/(login)/page.tsx
+++ b/src/RookieShop.BackOffice/app/(auth)/(login)/page.tsx
@@ -23,7 +23,7 @@ export default function LoginPage() {
           </p>
         </div>
         <DuendeAuthButton />
-        <p className="text-sm text-muted-foreground text-center">
+        <p className="text-center text-sm text-muted-foreground">
           Power by{" "}
           <Link
             href="https://duendesoftware.com/"
diff --git a/src/RookieShop.BackOffice/app/(dashboard)/dashboard/category/page.tsx b/src/RookieShop.BackOffice/app/(dashboard)/dashboard/category/page.tsx
index da5c650f..14c46421 100644
--- a/src/RookieShop.BackOffice/app/(dashboard)/dashboard/category/page.tsx
+++ b/src/RookieShop.BackOffice/app/(dashboard)/dashboard/category/page.tsx
@@ -40,7 +40,7 @@ export default function CatgoryPage({ searchParams }: Readonly<paramsProps>) {
   }, [data, name, refetch])
 
   return (
-    <div className="flex-1 space-y-4  p-4 pt-6 md:p-8">
+    <div className="flex-1 space-y-4 p-4 pt-6 md:p-8">
       <Breadcrumb items={breadcrumbItems} />
       <div className="flex items-start justify-between">
         <Heading
diff --git a/src/RookieShop.BackOffice/app/(dashboard)/dashboard/customer/page.tsx b/src/RookieShop.BackOffice/app/(dashboard)/dashboard/customer/page.tsx
index f87b24a6..85172156 100644
--- a/src/RookieShop.BackOffice/app/(dashboard)/dashboard/customer/page.tsx
+++ b/src/RookieShop.BackOffice/app/(dashboard)/dashboard/customer/page.tsx
@@ -31,7 +31,7 @@ export default function CustomerPage({ searchParams }: Readonly<paramsProps>) {
   const totalCustomers = data?.pagedInfo.totalRecords ?? 0
 
   return (
-    <div className="flex-1 space-y-4  p-4 pt-6 md:p-8">
+    <div className="flex-1 space-y-4 p-4 pt-6 md:p-8">
       <Breadcrumb items={breadcrumbItems} />
       <div className="flex items-start justify-between">
         <Heading
diff --git a/src/RookieShop.BackOffice/app/(dashboard)/dashboard/feedback/page.tsx b/src/RookieShop.BackOffice/app/(dashboard)/dashboard/feedback/page.tsx
index 91948d6b..82e60c1c 100644
--- a/src/RookieShop.BackOffice/app/(dashboard)/dashboard/feedback/page.tsx
+++ b/src/RookieShop.BackOffice/app/(dashboard)/dashboard/feedback/page.tsx
@@ -29,7 +29,7 @@ export default function FeedbackPage({ searchParams }: Readonly<paramsProps>) {
   const totalFeedbacks = data?.pagedInfo.totalRecords ?? 0
 
   return (
-    <div className="flex-1 space-y-4  p-4 pt-6 md:p-8">
+    <div className="flex-1 space-y-4 p-4 pt-6 md:p-8">
       <Breadcrumb items={breadcrumbItems} />
       <div className="flex items-start justify-between">
         <Heading
diff --git a/src/RookieShop.BackOffice/app/(dashboard)/dashboard/order/page.tsx b/src/RookieShop.BackOffice/app/(dashboard)/dashboard/order/page.tsx
index 3af6f6c3..ce7f1baf 100644
--- a/src/RookieShop.BackOffice/app/(dashboard)/dashboard/order/page.tsx
+++ b/src/RookieShop.BackOffice/app/(dashboard)/dashboard/order/page.tsx
@@ -29,7 +29,7 @@ export default function OrderPage({ searchParams }: Readonly<paramsProps>) {
   const totalOrders = data?.pagedInfo.totalRecords ?? 0
 
   return (
-    <div className="flex-1 space-y-4  p-4 pt-6 md:p-8">
+    <div className="flex-1 space-y-4 p-4 pt-6 md:p-8">
       <Breadcrumb items={breadcrumbItems} />
       <div className="flex items-start justify-between">
         <Heading title={`Order (${totalOrders})`} description="Manage order" />
diff --git a/src/RookieShop.BackOffice/app/(dashboard)/dashboard/page.tsx b/src/RookieShop.BackOffice/app/(dashboard)/dashboard/page.tsx
index 7d2aef31..b5006c85 100644
--- a/src/RookieShop.BackOffice/app/(dashboard)/dashboard/page.tsx
+++ b/src/RookieShop.BackOffice/app/(dashboard)/dashboard/page.tsx
@@ -119,7 +119,7 @@ export default function Dashboard() {
           </TabsContent>
         </Tabs>
       </div>
-      <div className="grid grid-cols-1 gap-4 p-4 md:grid-cols-2 lg:grid-cols-7 md:p-8">
+      <div className="grid grid-cols-1 gap-4 p-4 md:grid-cols-2 md:p-8 lg:grid-cols-7">
         <Card className="col-span-4">
           <CardHeader>
             <CardTitle>Overview</CardTitle>
diff --git a/src/RookieShop.BackOffice/app/(dashboard)/dashboard/product/page.tsx b/src/RookieShop.BackOffice/app/(dashboard)/dashboard/product/page.tsx
index 488ab09d..6043ae05 100644
--- a/src/RookieShop.BackOffice/app/(dashboard)/dashboard/product/page.tsx
+++ b/src/RookieShop.BackOffice/app/(dashboard)/dashboard/product/page.tsx
@@ -43,7 +43,7 @@ export default function ProductPage({ searchParams }: Readonly<paramsProps>) {
   const totalProducts = data?.pagedInfo.totalRecords ?? 0
 
   return (
-    <div className="flex-1 space-y-4  p-4 pt-6 md:p-8">
+    <div className="flex-1 space-y-4 p-4 pt-6 md:p-8">
       <Breadcrumb items={breadcrumbItems} />
       <div className="flex items-start justify-between">
         <Heading
diff --git a/src/RookieShop.BackOffice/app/error.tsx b/src/RookieShop.BackOffice/app/error.tsx
index adb3cae8..7184270d 100644
--- a/src/RookieShop.BackOffice/app/error.tsx
+++ b/src/RookieShop.BackOffice/app/error.tsx
@@ -16,7 +16,7 @@ export default function Error({
   }, [error])
 
   return (
-    <div className="p-24 flex items-center justify-center container mx-auto min-h-dvh">
+    <div className="container mx-auto flex min-h-dvh items-center justify-center p-24">
       <div className="flex flex-col space-y-4">
         <h2 className="text-4xl font-bold">Something went wrong!</h2>
         <Button onClick={() => reset()}>Try again</Button>
diff --git a/src/RookieShop.BackOffice/bun.lockb b/src/RookieShop.BackOffice/bun.lockb
index 30ab3f2a..77f610f6 100644
Binary files a/src/RookieShop.BackOffice/bun.lockb and b/src/RookieShop.BackOffice/bun.lockb differ
diff --git a/src/RookieShop.BackOffice/components/custom/file-upload.tsx b/src/RookieShop.BackOffice/components/custom/file-upload.tsx
index 96fbec63..21507607 100644
--- a/src/RookieShop.BackOffice/components/custom/file-upload.tsx
+++ b/src/RookieShop.BackOffice/components/custom/file-upload.tsx
@@ -51,14 +51,14 @@ export default function FileUpload({
           </div>
         )}
       </div>
-      <div className="flex items-center justify-center w-full">
+      <div className="flex w-full items-center justify-center">
         {!value && (
           <Label
             htmlFor="picture"
-            className="flex flex-col items-center justify-center w-full h-80 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600"
+            className="dark:hover:bg-bray-800 flex h-80 w-full cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:hover:border-gray-500 dark:hover:bg-gray-600"
           >
-            <div className="flex flex-col items-center justify-center pt-5 pb-6">
-              <Icons.upload className="w-8 h-8 mb-4 text-gray-500 dark:text-gray-400" />
+            <div className="flex flex-col items-center justify-center pb-6 pt-5">
+              <Icons.upload className="mb-4 h-8 w-8 text-gray-500 dark:text-gray-400" />
               <p className="mb-2 text-sm text-gray-500 dark:text-gray-400">
                 <span className="font-semibold">Click to upload</span> or drag
                 and drop
diff --git a/src/RookieShop.BackOffice/components/layouts/dashboard-nav.tsx b/src/RookieShop.BackOffice/components/layouts/dashboard-nav.tsx
index e40fe754..258b8c91 100644
--- a/src/RookieShop.BackOffice/components/layouts/dashboard-nav.tsx
+++ b/src/RookieShop.BackOffice/components/layouts/dashboard-nav.tsx
@@ -31,7 +31,7 @@ export default function DashboardNav({ items }: Readonly<DashboardNavProps>) {
                 item.disabled && "cursor-not-allowed opacity-80"
               )}
             >
-              <span className="truncate ml-3">{item.title}</span>
+              <span className="ml-3 truncate">{item.title}</span>
             </Link>
           )
         )
diff --git a/src/RookieShop.BackOffice/components/tables/feedback/column.tsx b/src/RookieShop.BackOffice/components/tables/feedback/column.tsx
index be120d4b..53f8e4c7 100644
--- a/src/RookieShop.BackOffice/components/tables/feedback/column.tsx
+++ b/src/RookieShop.BackOffice/components/tables/feedback/column.tsx
@@ -33,7 +33,7 @@ export const columns: ColumnDef<Feedback>[] = [
               return (
                 <svg
                   key={starId}
-                  className={`w-4 h-4 fill-current ${
+                  className={`h-4 w-4 fill-current ${
                     index < rating ? "text-yellow-500" : "text-gray-300"
                   }`}
                   xmlns="http://www.w3.org/2000/svg"
diff --git a/src/RookieShop.BackOffice/components/tables/order/columns.tsx b/src/RookieShop.BackOffice/components/tables/order/columns.tsx
index 14000d53..b2545b49 100644
--- a/src/RookieShop.BackOffice/components/tables/order/columns.tsx
+++ b/src/RookieShop.BackOffice/components/tables/order/columns.tsx
@@ -69,7 +69,7 @@ export const columns: ColumnDef<Order>[] = [
       return (
         <Badge
           variant="secondary"
-          className={`px-2 py-1 text-xs font-semibold rounded-full ${badgeClass}`}
+          className={`rounded-full px-2 py-1 text-xs font-semibold ${badgeClass}`}
         >
           {status}
         </Badge>
diff --git a/src/RookieShop.BackOffice/components/tables/product/columns.tsx b/src/RookieShop.BackOffice/components/tables/product/columns.tsx
index 1fd684a2..45cae654 100644
--- a/src/RookieShop.BackOffice/components/tables/product/columns.tsx
+++ b/src/RookieShop.BackOffice/components/tables/product/columns.tsx
@@ -27,7 +27,7 @@ export const columns: ColumnDef<Product>[] = [
       return imageUrl ? (
         <Image src={imageUrl} alt="product" width={90} height={120} />
       ) : (
-        <div className="flex items-center justify-center w-20 h-20 bg-gray-100 rounded-md">
+        <div className="flex h-20 w-20 items-center justify-center rounded-md bg-gray-100">
           <img
             loading="lazy"
             src="https://fakeimg.pl/90x120/?text=RookieShop"
@@ -58,7 +58,7 @@ export const columns: ColumnDef<Product>[] = [
       return (
         <Badge
           variant="secondary"
-          className={`px-2 py-1 text-xs font-semibold rounded-full ${badgeClass}`}
+          className={`rounded-full px-2 py-1 text-xs font-semibold ${badgeClass}`}
         >
           {status}
         </Badge>
@@ -79,7 +79,7 @@ export const columns: ColumnDef<Product>[] = [
             </span>
           </TooltipTrigger>
           <TooltipContent>
-            <div className="p-4 text-sm w-80">{parse(description)}</div>
+            <div className="w-80 p-4 text-sm">{parse(description)}</div>
           </TooltipContent>
         </Tooltip>
       ) : (
@@ -147,7 +147,7 @@ export const columns: ColumnDef<Product>[] = [
               return (
                 <svg
                   key={starId}
-                  className={`w-4 h-4 fill-current ${
+                  className={`h-4 w-4 fill-current ${
                     index < rating ? "text-yellow-500" : "text-gray-300"
                   }`}
                   xmlns="http://www.w3.org/2000/svg"
diff --git a/src/RookieShop.BackOffice/components/ui/alert-dialog.tsx b/src/RookieShop.BackOffice/components/ui/alert-dialog.tsx
index 25e7b474..57760f2e 100644
--- a/src/RookieShop.BackOffice/components/ui/alert-dialog.tsx
+++ b/src/RookieShop.BackOffice/components/ui/alert-dialog.tsx
@@ -18,7 +18,7 @@ const AlertDialogOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Overlay
     className={cn(
-      "fixed inset-0 z-50 bg-black/80  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/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     )}
     {...props}
diff --git a/src/RookieShop.BackOffice/components/ui/carousel.tsx b/src/RookieShop.BackOffice/components/ui/carousel.tsx
index ec505d00..5281c561 100644
--- a/src/RookieShop.BackOffice/components/ui/carousel.tsx
+++ b/src/RookieShop.BackOffice/components/ui/carousel.tsx
@@ -206,7 +206,7 @@ const CarouselPrevious = React.forwardRef<
       variant={variant}
       size={size}
       className={cn(
-        "absolute  h-8 w-8 rounded-full",
+        "absolute h-8 w-8 rounded-full",
         orientation === "horizontal"
           ? "-left-12 top-1/2 -translate-y-1/2"
           : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
diff --git a/src/RookieShop.BackOffice/components/ui/dialog.tsx b/src/RookieShop.BackOffice/components/ui/dialog.tsx
index 01ff19c7..f38593bd 100644
--- a/src/RookieShop.BackOffice/components/ui/dialog.tsx
+++ b/src/RookieShop.BackOffice/components/ui/dialog.tsx
@@ -21,7 +21,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-50 bg-black/80  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/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     )}
     {...props}
diff --git a/src/RookieShop.BackOffice/components/ui/input-otp.tsx b/src/RookieShop.BackOffice/components/ui/input-otp.tsx
index f66fcfa0..31f48bec 100644
--- a/src/RookieShop.BackOffice/components/ui/input-otp.tsx
+++ b/src/RookieShop.BackOffice/components/ui/input-otp.tsx
@@ -50,7 +50,7 @@ const InputOTPSlot = React.forwardRef<
       {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 h-4 w-px bg-foreground duration-1000" />
         </div>
       )}
     </div>
diff --git a/src/RookieShop.BackOffice/components/ui/navigation-menu.tsx b/src/RookieShop.BackOffice/components/ui/navigation-menu.tsx
index 1419f566..0863bf2b 100644
--- a/src/RookieShop.BackOffice/components/ui/navigation-menu.tsx
+++ b/src/RookieShop.BackOffice/components/ui/navigation-menu.tsx
@@ -69,7 +69,7 @@ const NavigationMenuContent = React.forwardRef<
   <NavigationMenuPrimitive.Content
     ref={ref}
     className={cn(
-      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
+      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto",
       className
     )}
     {...props}
diff --git a/src/RookieShop.BackOffice/components/ui/sheet.tsx b/src/RookieShop.BackOffice/components/ui/sheet.tsx
index a37f17ba..fe0127fb 100644
--- a/src/RookieShop.BackOffice/components/ui/sheet.tsx
+++ b/src/RookieShop.BackOffice/components/ui/sheet.tsx
@@ -21,7 +21,7 @@ const SheetOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Overlay
     className={cn(
-      "fixed inset-0 z-50 bg-black/80  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/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     )}
     {...props}
diff --git a/src/RookieShop.BackOffice/package.json b/src/RookieShop.BackOffice/package.json
index 0304437c..4b50f99a 100644
--- a/src/RookieShop.BackOffice/package.json
+++ b/src/RookieShop.BackOffice/package.json
@@ -117,6 +117,7 @@
     "eslint-config-next": "14.2.3",
     "postcss": "^8",
     "prettier": "3.3.0",
+    "prettier-plugin-tailwindcss": "^0.6.2",
     "tailwindcss": "^3.4.1",
     "typescript": "^5"
   }
diff --git a/src/RookieShop.BackOffice/prettier.config.js b/src/RookieShop.BackOffice/prettier.config.js
index 3635e2c5..160431a1 100644
--- a/src/RookieShop.BackOffice/prettier.config.js
+++ b/src/RookieShop.BackOffice/prettier.config.js
@@ -5,7 +5,10 @@ module.exports = {
   singleQuote: false,
   tabWidth: 2,
   trailingComma: "es5",
-  plugins: ["@ianvs/prettier-plugin-sort-imports"],
+  plugins: [
+    "@ianvs/prettier-plugin-sort-imports",
+    "prettier-plugin-tailwindcss",
+  ],
   importOrder: [
     "^(react/(.*)$)|^(react$)",
     "^(next/(.*)$)|^(next$)",