diff --git a/app/(prowler)/error.tsx b/app/(prowler)/error.tsx
index 3719b239e3..980e681220 100644
--- a/app/(prowler)/error.tsx
+++ b/app/(prowler)/error.tsx
@@ -20,7 +20,7 @@ export default function Error({
   }, [error]);
 
   return (
-    <Alert className="w-fit mx-auto mt-[35%]">
+    <Alert className="mx-auto mt-[35%] w-fit">
       <RocketIcon className="h-5 w-5" />
       <AlertTitle className="text-lg">An unexpected error occurred</AlertTitle>
       <AlertDescription className="mb-5">
diff --git a/app/(prowler)/findings/page.tsx b/app/(prowler)/findings/page.tsx
index 5ef11d41ed..280ecf293b 100644
--- a/app/(prowler)/findings/page.tsx
+++ b/app/(prowler)/findings/page.tsx
@@ -13,7 +13,7 @@ export default async function Findings() {
     <>
       <Header title="Findings" icon="ph:list-checks-duotone" />
       <Spacer />
-      <div className="flex flex-col items-start w-full overflow-hidden">
+      <div className="flex w-full flex-col items-start overflow-hidden">
         <Spacer y={6} />
         <Suspense fallback={<SkeletonTableFindings />}>
           <SSRDataTable />
diff --git a/app/(prowler)/layout.tsx b/app/(prowler)/layout.tsx
index ebf66c7975..ea8d1f13bc 100644
--- a/app/(prowler)/layout.tsx
+++ b/app/(prowler)/layout.tsx
@@ -44,9 +44,9 @@ export default function RootLayout({
         )}
       >
         <Providers themeProps={{ attribute: "class", defaultTheme: "dark" }}>
-          <div className="flex items-center h-dvh justify-center overflow-hidden">
+          <div className="flex h-dvh items-center justify-center overflow-hidden">
             <SidebarWrap />
-            <main className="container h-full flex-1 flex-col p-4 mb-auto overflow-y-auto no-scrollbar">
+            <main className="no-scrollbar container mb-auto h-full flex-1 flex-col overflow-y-auto p-4">
               {children}
               <Toaster />
             </main>
diff --git a/app/(prowler)/users/page.tsx b/app/(prowler)/users/page.tsx
index a7f643d73b..0a2f240f57 100644
--- a/app/(prowler)/users/page.tsx
+++ b/app/(prowler)/users/page.tsx
@@ -29,7 +29,7 @@ export default async function Users({
     <>
       <Header title="User Management" icon="ci:users" />
       <Spacer y={4} />
-      <div className="flex flex-col items-end w-full">
+      <div className="flex w-full flex-col items-end">
         <div className="flex space-x-6">
           <AddUserModal />
         </div>
diff --git a/components/ThemeSwitch.tsx b/components/ThemeSwitch.tsx
index 1e581560ae..d397c4a678 100644
--- a/components/ThemeSwitch.tsx
+++ b/components/ThemeSwitch.tsx
@@ -57,7 +57,7 @@ export const ThemeSwitch: FC<ThemeSwitchProps> = ({
         className={slots.wrapper({
           class: clsx(
             [
-              "w-auto h-auto",
+              "h-auto w-auto",
               "bg-transparent",
               "rounded-lg",
               "flex items-center justify-center",
diff --git a/components/auth/AuthForm.tsx b/components/auth/AuthForm.tsx
index 11176f0aab..b1bbcb866a 100644
--- a/components/auth/AuthForm.tsx
+++ b/components/auth/AuthForm.tsx
@@ -74,7 +74,7 @@ export const AuthForm = ({ type }: { type: string }) => {
     >
       {/* Brand Logo and ThemeSwitch */}
       <div className="absolute right-10 top-10">
-        <div className="flex items-center self-center gap-4">
+        <div className="flex items-center gap-4 self-center">
           <ThemeSwitch aria-label="Toggle theme" />
           <ProwlerExtended />
         </div>
@@ -82,7 +82,7 @@ export const AuthForm = ({ type }: { type: string }) => {
 
       {/* Testimonial */}
       <div className="absolute bottom-10 right-10 hidden md:block">
-        <p className="max-w-xl text-right text-white/60 text-md">
+        <p className="text-md max-w-xl text-right text-white/60">
           <span className="font-medium">“</span>
           Open Cloud Security
           <span className="font-medium">”</span>
diff --git a/components/charts/StatusChart.tsx b/components/charts/StatusChart.tsx
index 7ac851ccf8..d906db502e 100644
--- a/components/charts/StatusChart.tsx
+++ b/components/charts/StatusChart.tsx
@@ -55,7 +55,7 @@ export function StatusChart() {
   }, []);
 
   return (
-    <div className="flex items-center justify-center self-center my-auto">
+    <div className="my-auto flex items-center justify-center self-center">
       <ChartContainer
         config={chartConfig}
         className="mx-auto aspect-square min-w-[200px] md:min-h-[250px]"
@@ -102,7 +102,7 @@ export function StatusChart() {
           </Pie>
         </PieChart>
       </ChartContainer>
-      <div className="flex flex-col justify-center gap-2 mx-6 text-small">
+      <div className="mx-6 flex flex-col justify-center gap-2 text-small">
         <div className="flex space-x-4">
           <Chip
             className="h-5"
@@ -122,7 +122,7 @@ export function StatusChart() {
           No change from last scan
         </div>
         <Spacer y={4} />
-        <div className="flex flex-col gap-2 leading-none text-muted-foreground">
+        <div className="text-muted-foreground flex flex-col gap-2 leading-none">
           <div className="flex space-x-4">
             <Chip
               className="h-5"
@@ -138,7 +138,7 @@ export function StatusChart() {
             <span>{updatedChartData[1].percent}</span>
             <Divider orientation="vertical" />
           </div>
-          <div className="flex items-center font-medium leading-none gap-1">
+          <div className="flex items-center gap-1 font-medium leading-none">
             +2 findings from last scan <TrendingUp className="h-4 w-4" />
           </div>
         </div>
diff --git a/components/compliance/ComplianceCard.tsx b/components/compliance/ComplianceCard.tsx
index 32e8004377..41cd740a73 100644
--- a/components/compliance/ComplianceCard.tsx
+++ b/components/compliance/ComplianceCard.tsx
@@ -50,15 +50,15 @@ export const ComplianceCard: React.FC<ComplianceCardProps> = ({
 
   return (
     <Card fullWidth isPressable isHoverable shadow="sm">
-      <CardBody className="flex flex-row items-center space-x-4 justify-between">
-        <div className="flex space-x-4 items-center w-full">
+      <CardBody className="flex flex-row items-center justify-between space-x-4">
+        <div className="flex w-full items-center space-x-4">
           <Image
             src={getComplianceIcon(title)}
             alt={`${title} logo`}
-            className="rounded-md p-1 border-gray-300 border-1 bg-white object-contain h-10 w-10 min-w-10"
+            className="h-10 w-10 min-w-10 rounded-md border-1 border-gray-300 bg-white object-contain p-1"
           />
-          <div className="flex flex-col w-full">
-            <h4 className="font-bold text-md 3xl:text-lg leading-5">{title}</h4>
+          <div className="flex w-full flex-col">
+            <h4 className="text-md font-bold leading-5 3xl:text-lg">{title}</h4>
             <Progress
               label="Your Rating:"
               size="sm"
@@ -68,9 +68,9 @@ export const ComplianceCard: React.FC<ComplianceCardProps> = ({
               className="mt-2 font-semibold"
               color={getRatingColor(ratingPercentage)}
             />
-            <div className="flex justify-between mt-2">
+            <div className="mt-2 flex justify-between">
               <small>
-                <span className="font-semibold mr-1">
+                <span className="mr-1 font-semibold">
                   {passingRequirements} / {totalRequirements}
                 </span>
                 Passing Requirements
diff --git a/components/compliance/ComplianceSkeletonGrid.tsx b/components/compliance/ComplianceSkeletonGrid.tsx
index c16d3edca9..54ec78ce26 100644
--- a/components/compliance/ComplianceSkeletonGrid.tsx
+++ b/components/compliance/ComplianceSkeletonGrid.tsx
@@ -3,8 +3,8 @@ import React from "react";
 
 export const ComplianceSkeletonGrid = () => {
   return (
-    <Card className="w-full h-fit p-4">
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 3xl:grid-cols-4 gap-4">
+    <Card className="h-fit w-full p-4">
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 3xl:grid-cols-4">
         {[...Array(28)].map((_, index) => (
           <div key={index} className="flex flex-col space-y-4">
             <Skeleton className="h-28 rounded-lg">
diff --git a/components/filters/custom-date-picker.tsx b/components/filters/custom-date-picker.tsx
index 4343e06f30..91118322af 100644
--- a/components/filters/custom-date-picker.tsx
+++ b/components/filters/custom-date-picker.tsx
@@ -57,13 +57,13 @@ export const CustomDatePicker = () => {
   };
 
   return (
-    <div className="flex flex-col md:gap-2 w-full">
+    <div className="flex w-full flex-col md:gap-2">
       <DatePicker
         aria-label="Select a Date"
         CalendarTopContent={
           <ButtonGroup
             fullWidth
-            className="px-3 pb-2 pt-3 bg-content1 [&>button]:text-default-500 [&>button]:border-default-200/60"
+            className="bg-content1 px-3 pb-2 pt-3 [&>button]:border-default-200/60 [&>button]:text-default-500"
             radius="full"
             size="sm"
             variant="bordered"
diff --git a/components/filters/custom-provider-inputs.tsx b/components/filters/custom-provider-inputs.tsx
index 373b6255b1..6587bcb7e7 100644
--- a/components/filters/custom-provider-inputs.tsx
+++ b/components/filters/custom-provider-inputs.tsx
@@ -9,7 +9,7 @@ import {
 
 export const CustomProviderInputAWS = () => {
   return (
-    <div className="flex gap-x-2 items-center">
+    <div className="flex items-center gap-x-2">
       <AWSProviderBadge width={25} height={25} />
       <p className="text-sm">Amazon Web Services</p>
     </div>
@@ -18,7 +18,7 @@ export const CustomProviderInputAWS = () => {
 
 export const CustomProviderInputAzure = () => {
   return (
-    <div className="flex gap-x-2 items-center">
+    <div className="flex items-center gap-x-2">
       <AzureProviderBadge width={25} height={25} />
       <p className="text-sm">Azure</p>
     </div>
@@ -27,7 +27,7 @@ export const CustomProviderInputAzure = () => {
 
 export const CustomProviderInputGCP = () => {
   return (
-    <div className="flex gap-x-2 items-center">
+    <div className="flex items-center gap-x-2">
       <GCPProviderBadge width={25} height={25} />
       <p className="text-sm">Google Cloud Platform</p>
     </div>
@@ -36,7 +36,7 @@ export const CustomProviderInputGCP = () => {
 
 export const CustomProviderInputKubernetes = () => {
   return (
-    <div className="flex gap-x-2 items-center">
+    <div className="flex items-center gap-x-2">
       <KS8ProviderBadge width={25} height={25} />
       <p className="text-sm">Kubernetes</p>
     </div>
diff --git a/components/filters/custom-select-provider.tsx b/components/filters/custom-select-provider.tsx
index 876f42d030..0aff523282 100644
--- a/components/filters/custom-select-provider.tsx
+++ b/components/filters/custom-select-provider.tsx
@@ -83,7 +83,7 @@ export const CustomSelectProvider: React.FC = () => {
     >
       {(item) => (
         <SelectItem key={item.key} textValue={item.key} aria-label={item.label}>
-          <div className="flex gap-2 items-center">{item.value}</div>
+          <div className="flex items-center gap-2">{item.value}</div>
         </SelectItem>
       )}
     </Select>
diff --git a/components/filters/filter-controls.tsx b/components/filters/filter-controls.tsx
index 13d4962b26..19053cb62b 100644
--- a/components/filters/filter-controls.tsx
+++ b/components/filters/filter-controls.tsx
@@ -47,7 +47,7 @@ export const FilterControls: React.FC<FilterControlsProps> = ({
 
   return (
     <div className="flex flex-col gap-4">
-      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-x-4 gap-y-4 items-center">
+      <div className="grid grid-cols-1 items-center gap-x-4 gap-y-4 md:grid-cols-2 xl:grid-cols-4">
         {search && <CustomSearchInput />}
         {providers && <CustomSelectProvider />}
         {date && <CustomDatePicker />}
diff --git a/components/findings/FindingsCard.tsx b/components/findings/FindingsCard.tsx
index cec81ffb54..b4f9cab7a6 100644
--- a/components/findings/FindingsCard.tsx
+++ b/components/findings/FindingsCard.tsx
@@ -41,12 +41,12 @@ export const FindingsCard: React.FC<FindingsCardProps> = ({ selectedRow }) => {
         className={clsx(
           "max-h-[calc(100vh-146px)] overflow-y-auto rounded-md border bg-background transition-all duration-300",
           {
-            "w-1/3 translate-x-0 ml-2 p-3 opacity-100": selectedRow,
-            "translate-x-full w-0 opacity-0": !selectedRow,
+            "ml-2 w-1/3 translate-x-0 p-3 opacity-100": selectedRow,
+            "w-0 translate-x-full opacity-0": !selectedRow,
           },
         )}
       >
-        <p className="font-bold mb-3">{CheckTitle}</p>
+        <p className="mb-3 font-bold">{CheckTitle}</p>
         <Divider />
 
         <FindingsCardContent
diff --git a/components/findings/FindingsCardContent.tsx b/components/findings/FindingsCardContent.tsx
index f0f0f7becf..09bba0150a 100644
--- a/components/findings/FindingsCardContent.tsx
+++ b/components/findings/FindingsCardContent.tsx
@@ -14,7 +14,7 @@ export const FindingsCardContent: React.FC<FindingsCardContentProps> = ({
 }) => {
   return (
     <>
-      <p className="text-sm font-bold mt-3">{title}</p>
+      <p className="mt-3 text-sm font-bold">{title}</p>
       {url ? (
         <Link className="text-sm" href={url}>
           {description}
diff --git a/components/findings/FindingsCardDetail.tsx b/components/findings/FindingsCardDetail.tsx
index 5b3ffc59bd..957cc6809e 100644
--- a/components/findings/FindingsCardDetail.tsx
+++ b/components/findings/FindingsCardDetail.tsx
@@ -34,9 +34,9 @@ export const FindingsCardDetail: React.FC<FindingsCardDetailProps> = ({
     <>
       {description && (
         <div
-          className={`text-sm mt-3 rounded-md border-2 ${getDetailColorClass(type)} p-2`}
+          className={`mt-3 rounded-md border-2 text-sm ${getDetailColorClass(type)} p-2`}
         >
-          <p className="font-bold flex justify-between items-center mb-2">
+          <p className="mb-2 flex items-center justify-between font-bold">
             <span>{title}</span>
             {url && (
               <Button
diff --git a/components/findings/FindingsCardScan.tsx b/components/findings/FindingsCardScan.tsx
index b4dd7bd656..1ccab7a0a8 100644
--- a/components/findings/FindingsCardScan.tsx
+++ b/components/findings/FindingsCardScan.tsx
@@ -16,7 +16,7 @@ export const FindingsCardScan: React.FC<FindingsCardScanProps> = ({
 
   return (
     <>
-      <p className="text-sm font-bold mt-3">{title}</p>
+      <p className="mt-3 text-sm font-bold">{title}</p>
       <p className="text-sm">
         {formattedDate} at {formattedTime}
       </p>
diff --git a/components/findings/FindingsCardType.tsx b/components/findings/FindingsCardType.tsx
index e98fca6f1f..a525d0d1ab 100644
--- a/components/findings/FindingsCardType.tsx
+++ b/components/findings/FindingsCardType.tsx
@@ -16,7 +16,7 @@ export const FindingsCardType: React.FC<FindingsCardTypeProps> = ({
 
   return (
     <>
-      <p className="text-sm font-bold mt-3">
+      <p className="mt-3 text-sm font-bold">
         {type.length > 1 ? "Types:" : "Type:"}
       </p>
       <p className="text-sm">{typeContent()}</p>
diff --git a/components/findings/table/ColumnsFindings.tsx b/components/findings/table/ColumnsFindings.tsx
index ba9d128300..c8fef32133 100644
--- a/components/findings/table/ColumnsFindings.tsx
+++ b/components/findings/table/ColumnsFindings.tsx
@@ -47,7 +47,7 @@ export const ColumnsFindings: ColumnDef<FindingProps>[] = [
     header: "Region",
     cell: ({ row }) => {
       const { region } = getFindingsAttributes(row);
-      return <p className="text-sm text-nowrap">{region}</p>;
+      return <p className="text-nowrap text-sm">{region}</p>;
     },
   },
   {
@@ -69,8 +69,8 @@ export const ColumnsFindings: ColumnDef<FindingProps>[] = [
   {
     accessorKey: "actions",
     header: () => (
-      <div className="relative flex justify-end items-center gap-2">
-        <Dropdown className="bg-background border-1 border-default-200">
+      <div className="relative flex items-center justify-end gap-2">
+        <Dropdown className="border-1 border-default-200 bg-background">
           <DropdownTrigger>
             <Button isIconOnly radius="full" size="sm" variant="light">
               <VerticalDotsIcon className="text-default-400" />
diff --git a/components/findings/table/DataTableFindings.tsx b/components/findings/table/DataTableFindings.tsx
index 91fa9077ea..1bc3884492 100644
--- a/components/findings/table/DataTableFindings.tsx
+++ b/components/findings/table/DataTableFindings.tsx
@@ -48,7 +48,7 @@ export function DataTableFindings<TData extends FindingProps, TValue>({
 
   return (
     <>
-      <div className="flex flex-row w-full">
+      <div className="flex w-full flex-row">
         <div
           className={clsx("transition-all duration-300", {
             "w-2/3": selectedRow,
diff --git a/components/findings/table/SkeletonTableFindings.tsx b/components/findings/table/SkeletonTableFindings.tsx
index 074405d8a7..3af6403e7c 100644
--- a/components/findings/table/SkeletonTableFindings.tsx
+++ b/components/findings/table/SkeletonTableFindings.tsx
@@ -3,9 +3,9 @@ import React from "react";
 
 export const SkeletonTableFindings = () => {
   return (
-    <Card className="w-full h-full space-y-5 p-4" radius="sm">
+    <Card className="h-full w-full space-y-5 p-4" radius="sm">
       {/* Table headers */}
-      <div className="hidden md:flex justify-between">
+      <div className="hidden justify-between md:flex">
         <Skeleton className="w-1/12 rounded-lg">
           <div className="h-8 bg-default-200"></div>
         </Skeleton>
@@ -34,27 +34,27 @@ export const SkeletonTableFindings = () => {
         {[...Array(3)].map((_, index) => (
           <div
             key={index}
-            className="flex flex-col md:flex-row justify-between items-center space-x-0 md:space-x-4"
+            className="flex flex-col items-center justify-between space-x-0 md:flex-row md:space-x-4"
           >
-            <Skeleton className="w-full md:w-1/12 rounded-lg mb-2 md:mb-0">
+            <Skeleton className="mb-2 w-full rounded-lg md:mb-0 md:w-1/12">
               <div className="h-12 bg-default-300"></div>
             </Skeleton>
-            <Skeleton className="w-full md:w-2/12 rounded-lg mb-2 md:mb-0">
+            <Skeleton className="mb-2 w-full rounded-lg md:mb-0 md:w-2/12">
               <div className="h-12 bg-default-300"></div>
             </Skeleton>
-            <Skeleton className="hidden sm:flex md:w-2/12 rounded-lg mb-2 md:mb-0">
+            <Skeleton className="mb-2 hidden rounded-lg sm:flex md:mb-0 md:w-2/12">
               <div className="h-12 bg-default-300"></div>
             </Skeleton>
-            <Skeleton className="hidden sm:flex md:w-2/12 rounded-lg mb-2 md:mb-0">
+            <Skeleton className="mb-2 hidden rounded-lg sm:flex md:mb-0 md:w-2/12">
               <div className="h-12 bg-default-300"></div>
             </Skeleton>
-            <Skeleton className="hidden sm:flex md:w-2/12 rounded-lg mb-2 md:mb-0">
+            <Skeleton className="mb-2 hidden rounded-lg sm:flex md:mb-0 md:w-2/12">
               <div className="h-12 bg-default-300"></div>
             </Skeleton>
-            <Skeleton className="hidden sm:flex md:w-1/12 rounded-lg mb-2 md:mb-0">
+            <Skeleton className="mb-2 hidden rounded-lg sm:flex md:mb-0 md:w-1/12">
               <div className="h-12 bg-default-300"></div>
             </Skeleton>
-            <Skeleton className="hidden sm:flex md:w-1/12 rounded-lg mb-2 md:mb-0">
+            <Skeleton className="mb-2 hidden rounded-lg sm:flex md:mb-0 md:w-1/12">
               <div className="h-12 bg-default-300"></div>
             </Skeleton>
           </div>
diff --git a/components/providers/add-provider.tsx b/components/providers/add-provider.tsx
index 2461fd86f7..3033f8b904 100644
--- a/components/providers/add-provider.tsx
+++ b/components/providers/add-provider.tsx
@@ -22,7 +22,7 @@ export const AddProvider = () => {
         <AddForm setIsOpen={setIsAddOpen} />
       </CustomAlertModal>
 
-      <div className="w-full flex items-center justify-end">
+      <div className="flex w-full items-center justify-end">
         <CustomButton
           ariaLabel="Add Account"
           variant="solid"
diff --git a/components/providers/DateWithTime.tsx b/components/providers/date-with-time.tsx
similarity index 100%
rename from components/providers/DateWithTime.tsx
rename to components/providers/date-with-time.tsx
diff --git a/components/providers/forms/AddForm.tsx b/components/providers/forms/add-form.tsx
similarity index 94%
rename from components/providers/forms/AddForm.tsx
rename to components/providers/forms/add-form.tsx
index c9af93d286..f30855d2d0 100644
--- a/components/providers/forms/AddForm.tsx
+++ b/components/providers/forms/add-form.tsx
@@ -12,7 +12,7 @@ import { CustomButton, CustomInput } from "@/components/ui/custom";
 import { Form } from "@/components/ui/form";
 import { addProviderFormSchema } from "@/types";
 
-import { CustomRadioProvider } from "../CustomRadioProvider";
+import { RadioGroupProvider } from "../radio-group-provider";
 
 export const AddForm = ({
   setIsOpen,
@@ -67,7 +67,7 @@ export const AddForm = ({
         onSubmit={form.handleSubmit(onSubmitClient)}
         className="flex flex-col space-y-4"
       >
-        <CustomRadioProvider control={form.control} />
+        <RadioGroupProvider control={form.control} />
         <CustomInput
           control={form.control}
           name="providerId"
@@ -91,7 +91,7 @@ export const AddForm = ({
           isInvalid={!!form.formState.errors.providerAlias}
         />
 
-        <div className="w-full flex justify-center sm:space-x-6">
+        <div className="flex w-full justify-center sm:space-x-6">
           <CustomButton
             type="button"
             ariaLabel="Cancel"
diff --git a/components/providers/forms/DeleteForm.tsx b/components/providers/forms/delete-form.tsx
similarity index 97%
rename from components/providers/forms/DeleteForm.tsx
rename to components/providers/forms/delete-form.tsx
index 0e614f7a91..434f453279 100644
--- a/components/providers/forms/DeleteForm.tsx
+++ b/components/providers/forms/delete-form.tsx
@@ -54,7 +54,7 @@ export const DeleteForm = ({
     <Form {...form}>
       <form action={onSubmitClient}>
         <input type="hidden" name="id" value={providerId} />
-        <div className="w-full flex justify-center sm:space-x-6">
+        <div className="flex w-full justify-center sm:space-x-6">
           <CustomButton
             type="button"
             ariaLabel="Cancel"
diff --git a/components/providers/forms/EditForm.tsx b/components/providers/forms/edit-form.tsx
similarity index 98%
rename from components/providers/forms/EditForm.tsx
rename to components/providers/forms/edit-form.tsx
index 75282abb01..669e4a9184 100644
--- a/components/providers/forms/EditForm.tsx
+++ b/components/providers/forms/edit-form.tsx
@@ -86,7 +86,7 @@ export const EditForm = ({
         </div>
         <input type="hidden" name="providerId" value={providerId} />
 
-        <div className="w-full flex justify-center sm:space-x-6">
+        <div className="flex w-full justify-center sm:space-x-6">
           <CustomButton
             type="button"
             ariaLabel="Cancel"
diff --git a/components/providers/forms/index.ts b/components/providers/forms/index.ts
index 7bab77754f..6b31209f91 100644
--- a/components/providers/forms/index.ts
+++ b/components/providers/forms/index.ts
@@ -1,3 +1,3 @@
-export * from "./AddForm";
-export * from "./DeleteForm";
-export * from "./EditForm";
+export * from "./add-form";
+export * from "./delete-form";
+export * from "./edit-form";
diff --git a/components/providers/index.ts b/components/providers/index.ts
index 0709c892b2..9f2aed9e3a 100644
--- a/components/providers/index.ts
+++ b/components/providers/index.ts
@@ -1,8 +1,8 @@
 export * from "./add-provider";
 export * from "./CheckConnectionProvider";
-export * from "./CustomRadioProvider";
-export * from "./DateWithTime";
-export * from "./forms/DeleteForm";
-export * from "./ProviderInfo";
-export * from "./ScanStatus";
-export * from "./SnippetIdProvider";
+export * from "./date-with-time";
+export * from "./forms/delete-form";
+export * from "./provider-info";
+export * from "./radio-group-provider";
+export * from "./scan-status";
+export * from "./snippet-id-provider";
diff --git a/components/providers/ProviderInfo.tsx b/components/providers/provider-info.tsx
similarity index 88%
rename from components/providers/ProviderInfo.tsx
rename to components/providers/provider-info.tsx
index 5c3fa06fbe..7ff3a52821 100644
--- a/components/providers/ProviderInfo.tsx
+++ b/components/providers/provider-info.tsx
@@ -23,19 +23,19 @@ export const ProviderInfo: React.FC<ProviderInfoProps> = ({
     switch (connected) {
       case true:
         return (
-          <div className="flex items-center justify-center rounded-medium border p-1 bg-system-success-lighter border-system-success">
+          <div className="flex items-center justify-center rounded-medium border border-system-success bg-system-success-lighter p-1">
             <ConnectionIcon className="text-system-success" size={24} />
           </div>
         );
       case false:
         return (
-          <div className="flex items-center justify-center rounded-medium border p-1 bg-system-error-lighter border-danger">
+          <div className="flex items-center justify-center rounded-medium border border-danger bg-system-error-lighter p-1">
             <ConnectionIcon className="text-danger" size={24} />
           </div>
         );
       case null:
         return (
-          <div className="flex items-center justify-center rounded-medium border p-1 bg-info-lighter border-info-lighter">
+          <div className="bg-info-lighter border-info-lighter flex items-center justify-center rounded-medium border p-1">
             <ConnectionIcon className="text-info" size={24} />
           </div>
         );
diff --git a/components/providers/CustomRadioProvider.tsx b/components/providers/radio-group-provider.tsx
similarity index 90%
rename from components/providers/CustomRadioProvider.tsx
rename to components/providers/radio-group-provider.tsx
index 68d2c59576..392be4772d 100644
--- a/components/providers/CustomRadioProvider.tsx
+++ b/components/providers/radio-group-provider.tsx
@@ -35,8 +35,8 @@ export const CustomRadio: React.FC<CustomRadioProps> = (props) => {
     <Component
       {...getBaseProps()}
       className={cn(
-        "group inline-flex items-center hover:opacity-70 active:opacity-50 justify-between flex-row-reverse tap-highlight-transparent",
-        "max-w-full cursor-pointer border-2 border-default rounded-lg gap-4 p-4",
+        "group inline-flex flex-row-reverse items-center justify-between tap-highlight-transparent hover:opacity-70 active:opacity-50",
+        "max-w-full cursor-pointer gap-4 rounded-lg border-2 border-default p-4",
         "data-[selected=true]:border-primary",
       )}
     >
@@ -58,11 +58,11 @@ export const CustomRadio: React.FC<CustomRadioProps> = (props) => {
   );
 };
 
-interface CustomRadioProviderProps {
+interface RadioGroupProviderProps {
   control: Control<z.infer<typeof addProviderFormSchema>>;
 }
 
-export const CustomRadioProvider: React.FC<CustomRadioProviderProps> = ({
+export const RadioGroupProvider: React.FC<RadioGroupProviderProps> = ({
   control,
 }) => {
   return (
diff --git a/components/providers/ScanStatus.tsx b/components/providers/scan-status.tsx
similarity index 100%
rename from components/providers/ScanStatus.tsx
rename to components/providers/scan-status.tsx
diff --git a/components/providers/SnippetIdProvider.tsx b/components/providers/snippet-id-provider.tsx
similarity index 90%
rename from components/providers/SnippetIdProvider.tsx
rename to components/providers/snippet-id-provider.tsx
index 4d4b901f2c..820b08bd6d 100644
--- a/components/providers/SnippetIdProvider.tsx
+++ b/components/providers/snippet-id-provider.tsx
@@ -22,7 +22,7 @@ export const SnippetIdProvider: React.FC<SnippetIdProviderProps> = ({
     >
       <p className="flex items-center space-x-2">
         <IdIcon size={16} />
-        <span className="text-sm max-w-24 overflow-x-scroll no-scrollbar">
+        <span className="no-scrollbar max-w-24 overflow-x-scroll text-sm">
           {providerId}
         </span>
       </p>
diff --git a/components/providers/table/columns-provider.tsx b/components/providers/table/columns-provider.tsx
index e302a9dbfe..fd190a811a 100644
--- a/components/providers/table/columns-provider.tsx
+++ b/components/providers/table/columns-provider.tsx
@@ -6,9 +6,9 @@ import { add } from "date-fns";
 import { StatusBadge } from "@/components/ui/table";
 import { ProviderProps } from "@/types";
 
-import { DateWithTime } from "../DateWithTime";
-import { ProviderInfo } from "../ProviderInfo";
-import { SnippetIdProvider } from "../SnippetIdProvider";
+import { DateWithTime } from "../date-with-time";
+import { ProviderInfo } from "../provider-info";
+import { SnippetIdProvider } from "../snippet-id-provider";
 import { DataTableColumnHeader } from "./data-table-column-header";
 import { DataTableRowActions } from "./data-table-row-actions";
 
diff --git a/components/providers/table/data-table-column-header.tsx b/components/providers/table/data-table-column-header.tsx
index 4df6af2d78..142bd7f346 100644
--- a/components/providers/table/data-table-column-header.tsx
+++ b/components/providers/table/data-table-column-header.tsx
@@ -80,7 +80,7 @@ export const DataTableColumnHeader = <TData, TValue>({
 
   return (
     <Button
-      className="w-full justify-between px-0 text-left align-middle dark:text-slate-400 h-10 bg-transparent whitespace-nowrap text-foreground-500 text-tiny font-semibold outline-none"
+      className="h-10 w-full justify-between whitespace-nowrap bg-transparent px-0 text-left align-middle text-tiny font-semibold text-foreground-500 outline-none dark:text-slate-400"
       onClick={getToggleSortingHandler}
     >
       <span>{title}</span>
diff --git a/components/providers/table/data-table-pagination.tsx b/components/providers/table/data-table-pagination.tsx
index 4c4278682f..e17170d7c8 100644
--- a/components/providers/table/data-table-pagination.tsx
+++ b/components/providers/table/data-table-pagination.tsx
@@ -49,7 +49,7 @@ export function DataTablePagination({ metadata }: DataTablePaginationProps) {
         <div className="flex items-center space-x-2">
           <Link
             aria-label="Go to first page"
-            className="page-link relative block py-1.5 px-3 border-0 bg-transparent outline-none transition-all duration-300 rounded text-gray-800 hover:text-gray-800 hover:bg-gray-200 focus:shadow-none"
+            className="page-link relative block rounded border-0 bg-transparent px-3 py-1.5 text-gray-800 outline-none transition-all duration-300 hover:bg-gray-200 hover:text-gray-800 focus:shadow-none"
             href={createPageUrl(1)}
             aria-disabled="true"
           >
@@ -57,7 +57,7 @@ export function DataTablePagination({ metadata }: DataTablePaginationProps) {
           </Link>
           <Link
             aria-label="Go to previous page"
-            className="page-link relative block py-1.5 px-3 border-0 bg-transparent outline-none transition-all duration-300 rounded text-gray-800 hover:text-gray-800 hover:bg-gray-200 focus:shadow-none"
+            className="page-link relative block rounded border-0 bg-transparent px-3 py-1.5 text-gray-800 outline-none transition-all duration-300 hover:bg-gray-200 hover:text-gray-800 focus:shadow-none"
             href={createPageUrl(currentPage - 1)}
             aria-disabled="true"
           >
@@ -65,14 +65,14 @@ export function DataTablePagination({ metadata }: DataTablePaginationProps) {
           </Link>
           <Link
             aria-label="Go to next page"
-            className="page-link relative block py-1.5 px-3 border-0 bg-transparent outline-none transition-all duration-300 rounded text-gray-800 hover:text-gray-800 hover:bg-gray-200 focus:shadow-none"
+            className="page-link relative block rounded border-0 bg-transparent px-3 py-1.5 text-gray-800 outline-none transition-all duration-300 hover:bg-gray-200 hover:text-gray-800 focus:shadow-none"
             href={createPageUrl(currentPage + 1)}
           >
             <ChevronRightIcon className="size-4" aria-hidden="true" />
           </Link>
           <Link
             aria-label="Go to last page"
-            className="page-link relative block py-1.5 px-3 border-0 bg-transparent outline-none transition-all duration-300 rounded text-gray-800 hover:text-gray-800 hover:bg-gray-200 focus:shadow-none"
+            className="page-link relative block rounded border-0 bg-transparent px-3 py-1.5 text-gray-800 outline-none transition-all duration-300 hover:bg-gray-200 hover:text-gray-800 focus:shadow-none"
             href={createPageUrl(totalPages)}
           >
             <DoubleArrowRightIcon className="size-4" aria-hidden="true" />
diff --git a/components/providers/table/data-table-provider.tsx b/components/providers/table/data-table-provider.tsx
index b2a0655779..c859faaaba 100644
--- a/components/providers/table/data-table-provider.tsx
+++ b/components/providers/table/data-table-provider.tsx
@@ -56,7 +56,7 @@ export function DataTableProvider<TData, TValue>({
 
   return (
     <>
-      <div className="p-4 z-0 flex flex-col relative justify-between gap-4 bg-content1 overflow-auto rounded-large shadow-small w-full  ">
+      <div className="relative z-0 flex w-full flex-col justify-between gap-4 overflow-auto rounded-large bg-content1 p-4 shadow-small">
         <Table>
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
@@ -106,7 +106,7 @@ export function DataTableProvider<TData, TValue>({
           </TableBody>
         </Table>
       </div>
-      <div className="flex items-center w-full space-x-2 py-4">
+      <div className="flex w-full items-center space-x-2 py-4">
         <DataTablePagination metadata={metadata} />
       </div>
     </>
diff --git a/components/providers/table/data-table-row-actions.tsx b/components/providers/table/data-table-row-actions.tsx
index 5b8067e0e8..661b2e86c8 100644
--- a/components/providers/table/data-table-row-actions.tsx
+++ b/components/providers/table/data-table-row-actions.tsx
@@ -22,7 +22,7 @@ import { CustomAlertModal } from "@/components/ui/custom";
 
 import { CheckConnectionProvider } from "../CheckConnectionProvider";
 import { EditForm } from "../forms";
-import { DeleteForm } from "../forms/DeleteForm";
+import { DeleteForm } from "../forms/delete-form";
 
 interface DataTableRowActionsProps<ProviderProps> {
   row: Row<ProviderProps>;
@@ -60,7 +60,7 @@ export function DataTableRowActions<ProviderProps>({
         <DeleteForm providerId={providerId} setIsOpen={setIsDeleteOpen} />
       </CustomAlertModal>
 
-      <div className="relative flex justify-end items-center gap-2">
+      <div className="relative flex items-center justify-end gap-2">
         <Dropdown className="shadow-xl" placement="bottom">
           <DropdownTrigger>
             <Button isIconOnly radius="full" size="sm" variant="light">
diff --git a/components/providers/table/skeleton-table-provider.tsx b/components/providers/table/skeleton-table-provider.tsx
index e43ca38cab..598d246b6a 100644
--- a/components/providers/table/skeleton-table-provider.tsx
+++ b/components/providers/table/skeleton-table-provider.tsx
@@ -3,9 +3,9 @@ import React from "react";
 
 export const SkeletonTableProvider = () => {
   return (
-    <Card className="w-full h-full space-y-5 p-4" radius="sm">
+    <Card className="h-full w-full space-y-5 p-4" radius="sm">
       {/* Table headers */}
-      <div className="hidden md:flex justify-between">
+      <div className="hidden justify-between md:flex">
         <Skeleton className="w-1/12 rounded-lg">
           <div className="h-8 bg-default-200"></div>
         </Skeleton>
@@ -34,27 +34,27 @@ export const SkeletonTableProvider = () => {
         {[...Array(3)].map((_, index) => (
           <div
             key={index}
-            className="flex flex-col md:flex-row justify-between items-center space-x-0 md:space-x-4"
+            className="flex flex-col items-center justify-between space-x-0 md:flex-row md:space-x-4"
           >
-            <Skeleton className="w-full md:w-1/12 rounded-lg mb-2 md:mb-0">
+            <Skeleton className="mb-2 w-full rounded-lg md:mb-0 md:w-1/12">
               <div className="h-12 bg-default-300"></div>
             </Skeleton>
-            <Skeleton className="w-full md:w-2/12 rounded-lg mb-2 md:mb-0">
+            <Skeleton className="mb-2 w-full rounded-lg md:mb-0 md:w-2/12">
               <div className="h-12 bg-default-300"></div>
             </Skeleton>
-            <Skeleton className="hidden sm:flex md:w-2/12 rounded-lg mb-2 md:mb-0">
+            <Skeleton className="mb-2 hidden rounded-lg sm:flex md:mb-0 md:w-2/12">
               <div className="h-12 bg-default-300"></div>
             </Skeleton>
-            <Skeleton className="hidden sm:flex md:w-2/12 rounded-lg mb-2 md:mb-0">
+            <Skeleton className="mb-2 hidden rounded-lg sm:flex md:mb-0 md:w-2/12">
               <div className="h-12 bg-default-300"></div>
             </Skeleton>
-            <Skeleton className="hidden sm:flex md:w-2/12 rounded-lg mb-2 md:mb-0">
+            <Skeleton className="mb-2 hidden rounded-lg sm:flex md:mb-0 md:w-2/12">
               <div className="h-12 bg-default-300"></div>
             </Skeleton>
-            <Skeleton className="hidden sm:flex md:w-1/12 rounded-lg mb-2 md:mb-0">
+            <Skeleton className="mb-2 hidden rounded-lg sm:flex md:mb-0 md:w-1/12">
               <div className="h-12 bg-default-300"></div>
             </Skeleton>
-            <Skeleton className="hidden sm:flex md:w-1/12 rounded-lg mb-2 md:mb-0">
+            <Skeleton className="mb-2 hidden rounded-lg sm:flex md:mb-0 md:w-1/12">
               <div className="h-12 bg-default-300"></div>
             </Skeleton>
           </div>
diff --git a/components/services/ServiceCard.tsx b/components/services/ServiceCard.tsx
index 1dcc0a73fd..9da8b62f2e 100644
--- a/components/services/ServiceCard.tsx
+++ b/components/services/ServiceCard.tsx
@@ -12,11 +12,11 @@ export const ServiceCard: React.FC<CardServiceProps> = ({
 }) => {
   return (
     <Card fullWidth isPressable isHoverable shadow="sm">
-      <CardBody className="flex flex-row items-center space-x-4 justify-between">
-        <div className="flex space-x-4 items-center">
+      <CardBody className="flex flex-row items-center justify-between space-x-4">
+        <div className="flex items-center space-x-4">
           {getAWSIcon(serviceAlias)}
           <div className="flex flex-col">
-            <h4 className="font-bold text-md leading-5">{serviceAlias}</h4>
+            <h4 className="text-md font-bold leading-5">{serviceAlias}</h4>
             <small className="text-default-500">
               {fidingsFailed > 0
                 ? `${fidingsFailed} Failed Findings`
diff --git a/components/services/ServiceSkeletonGrid.tsx b/components/services/ServiceSkeletonGrid.tsx
index 7caeaf11d7..2e43ced7a0 100644
--- a/components/services/ServiceSkeletonGrid.tsx
+++ b/components/services/ServiceSkeletonGrid.tsx
@@ -3,8 +3,8 @@ import React from "react";
 
 export const ServiceSkeletonGrid = () => {
   return (
-    <Card className="w-full h-fit p-4">
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+    <Card className="h-fit w-full p-4">
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
         {[...Array(25)].map((_, index) => (
           <div key={index} className="flex flex-col space-y-4">
             <Skeleton className="h-16 rounded-lg">
diff --git a/components/ui/action-card/ActionCard.tsx b/components/ui/action-card/ActionCard.tsx
index aa078bfc6a..ea7e8295ce 100644
--- a/components/ui/action-card/ActionCard.tsx
+++ b/components/ui/action-card/ActionCard.tsx
@@ -60,7 +60,7 @@ export const ActionCard = React.forwardRef<HTMLDivElement, ActionCardProps>(
         shadow="sm"
         {...props}
       >
-        <CardBody className="flex h-full flex-row gap-2 p-2 items-center">
+        <CardBody className="flex h-full flex-row items-center gap-2 p-2">
           <div
             className={cn(
               "item-center flex rounded-medium border p-1",
diff --git a/components/ui/alert-dialog/AlertDialog.tsx b/components/ui/alert-dialog/AlertDialog.tsx
index 474aee7665..26b8aec946 100644
--- a/components/ui/alert-dialog/AlertDialog.tsx
+++ b/components/ui/alert-dialog/AlertDialog.tsx
@@ -34,7 +34,7 @@ const AlertDialogContent = React.forwardRef<
     <AlertDialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-neutral-200 bg-white p-6 shadow-lg 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 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg dark:border-neutral-800 dark:bg-neutral-950",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-neutral-200 bg-white p-6 shadow-lg 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 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] dark:border-neutral-800 dark:bg-neutral-950 sm:rounded-lg",
         className,
       )}
       {...props}
diff --git a/components/ui/chart/Chart.tsx b/components/ui/chart/Chart.tsx
index 3ff9192840..9d096726f5 100644
--- a/components/ui/chart/Chart.tsx
+++ b/components/ui/chart/Chart.tsx
@@ -57,7 +57,7 @@ const ChartContainer = React.forwardRef<
         data-chart={chartId}
         ref={ref}
         className={cn(
-          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
           className,
         )}
         {...props}
diff --git a/components/ui/custom/CustomBox.tsx b/components/ui/custom/CustomBox.tsx
index 9f669b6111..4ceba6b9be 100644
--- a/components/ui/custom/CustomBox.tsx
+++ b/components/ui/custom/CustomBox.tsx
@@ -19,17 +19,17 @@ export const CustomBox = ({
     <Card fullWidth {...props}>
       {(preTitle || subTitle || title) && (
         <>
-          <CardHeader className="pt-4 pb-3 px-3 flex-col items-start">
+          <CardHeader className="flex-col items-start px-3 pb-3 pt-4">
             {preTitle && (
-              <p className="text-tiny uppercase font-bold">{preTitle}</p>
+              <p className="text-tiny font-bold uppercase">{preTitle}</p>
             )}
             {subTitle && <small className="text-default-500">{subTitle}</small>}
-            {title && <h4 className="font-bold text-large">{title}</h4>}
+            {title && <h4 className="text-large font-bold">{title}</h4>}
           </CardHeader>
           <Divider />
         </>
       )}
-      <CardBody className="px-3 pt-3 pb-4">{children}</CardBody>
+      <CardBody className="px-3 pb-4 pt-3">{children}</CardBody>
     </Card>
   );
 };
diff --git a/components/ui/custom/CustomButtonClientAction.tsx b/components/ui/custom/CustomButtonClientAction.tsx
index ef31fbb5ec..bafc945e17 100644
--- a/components/ui/custom/CustomButtonClientAction.tsx
+++ b/components/ui/custom/CustomButtonClientAction.tsx
@@ -17,7 +17,7 @@ export const CustomButtonClientAction = ({
 
   return (
     <Button
-      className={clsx("bg-transparent border-none p-0 m-0 h-fit min-w-min", {
+      className={clsx("m-0 h-fit min-w-min border-none bg-transparent p-0", {
         "text-danger": danger,
       })}
       spinner={<CircularProgress aria-label="Loading..." size="sm" />}
diff --git a/components/ui/dialog/dialog.tsx b/components/ui/dialog/dialog.tsx
index 93542df32f..8ef88c0487 100644
--- a/components/ui/dialog/dialog.tsx
+++ b/components/ui/dialog/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}
@@ -44,7 +44,7 @@ const DialogContent = React.forwardRef<
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+      <DialogPrimitive.Close className="focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
         <Cross2Icon className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
@@ -102,7 +102,7 @@ const DialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Description
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn("text-muted-foreground text-sm", className)}
     {...props}
   />
 ));
diff --git a/components/ui/dropdown/Dropdown.tsx b/components/ui/dropdown/Dropdown.tsx
index b88da41b59..a5376204cf 100644
--- a/components/ui/dropdown/Dropdown.tsx
+++ b/components/ui/dropdown/Dropdown.tsx
@@ -27,7 +27,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+      "focus:bg-accent data-[state=open]:bg-accent flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
       inset && "pl-8",
       className,
     )}
@@ -47,7 +47,7 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg 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",
       className,
     )}
     {...props}
@@ -65,7 +65,7 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md 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",
         className,
       )}
       {...props}
@@ -83,7 +83,7 @@ const DropdownMenuItem = React.forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none 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 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
       className,
     )}
@@ -99,7 +99,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none 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 select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
     checked={checked}
@@ -123,7 +123,7 @@ const DropdownMenuRadioItem = React.forwardRef<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none 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 select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
     {...props}
@@ -162,7 +162,7 @@ const DropdownMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    className={cn("bg-muted -mx-1 my-1 h-px", className)}
     {...props}
   />
 ));
diff --git a/components/ui/header/Header.tsx b/components/ui/header/Header.tsx
index 900db419bb..b7ccefaf7b 100644
--- a/components/ui/header/Header.tsx
+++ b/components/ui/header/Header.tsx
@@ -12,7 +12,7 @@ export const Header: React.FC<HeaderProps> = ({ title, icon }) => {
     <>
       <header className="flex items-center gap-3 py-4">
         <Icon className="text-default-500" height={40} icon={icon} width={40} />
-        <h1 className="font-bold text-default-700 text-2xl">{title}</h1>
+        <h1 className="text-2xl font-bold text-default-700">{title}</h1>
       </header>
       <Divider className="mb-4" />
     </>
diff --git a/components/ui/select/Select.tsx b/components/ui/select/Select.tsx
index 64b4d471c5..4443ebba91 100644
--- a/components/ui/select/Select.tsx
+++ b/components/ui/select/Select.tsx
@@ -24,7 +24,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-slate-200 bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-white placeholder:text-slate-500 focus:outline-none focus:ring-1 focus:ring-slate-950 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 dark:border-slate-800 dark:ring-offset-slate-950 dark:placeholder:text-slate-400 dark:focus:ring-slate-300",
+      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-slate-200 bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-white placeholder:text-slate-500 focus:outline-none focus:ring-1 focus:ring-slate-950 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-800 dark:ring-offset-slate-950 dark:placeholder:text-slate-400 dark:focus:ring-slate-300 [&>span]:line-clamp-1",
       className,
     )}
     {...props}
diff --git a/components/ui/sidebar/Sidebar.tsx b/components/ui/sidebar/Sidebar.tsx
index 7ab1cfe163..1607609099 100644
--- a/components/ui/sidebar/Sidebar.tsx
+++ b/components/ui/sidebar/Sidebar.tsx
@@ -113,7 +113,7 @@ const Sidebar = React.forwardRef<HTMLElement, SidebarProps>(
             endContent={
               isCompact || isNestType || hideEndContent
                 ? null
-                : item.endContent ?? null
+                : (item.endContent ?? null)
             }
             startContent={
               isCompact || isNestType ? null : item.icon ? (
@@ -127,7 +127,7 @@ const Sidebar = React.forwardRef<HTMLElement, SidebarProps>(
                   width={24}
                 />
               ) : (
-                item.startContent ?? null
+                (item.startContent ?? null)
               )
             }
             title={isCompact || isNestType ? null : item.title}
@@ -146,7 +146,7 @@ const Sidebar = React.forwardRef<HTMLElement, SidebarProps>(
                       width={24}
                     />
                   ) : (
-                    item.startContent ?? null
+                    (item.startContent ?? null)
                   )}
                 </div>
               </Tooltip>
@@ -180,7 +180,7 @@ const Sidebar = React.forwardRef<HTMLElement, SidebarProps>(
                         </span>
                       </div>
                     ) : (
-                      item.startContent ?? null
+                      (item.startContent ?? null)
                     )
                   }
                 >
@@ -223,7 +223,7 @@ const Sidebar = React.forwardRef<HTMLElement, SidebarProps>(
             {...item}
             key={item.key}
             endContent={
-              isCompact || hideEndContent ? null : item.endContent ?? null
+              isCompact || hideEndContent ? null : (item.endContent ?? null)
             }
             startContent={
               isCompact ? null : item.icon ? (
@@ -236,7 +236,7 @@ const Sidebar = React.forwardRef<HTMLElement, SidebarProps>(
                   width={24}
                 />
               ) : (
-                item.startContent ?? null
+                (item.startContent ?? null)
               )
             }
             textValue={item.title}
@@ -255,7 +255,7 @@ const Sidebar = React.forwardRef<HTMLElement, SidebarProps>(
                       width={24}
                     />
                   ) : (
-                    item.startContent ?? null
+                    (item.startContent ?? null)
                   )}
                 </div>
               </Tooltip>
diff --git a/components/ui/sidebar/SidebarWrap.tsx b/components/ui/sidebar/SidebarWrap.tsx
index 6fcf559f93..949cd59da0 100644
--- a/components/ui/sidebar/SidebarWrap.tsx
+++ b/components/ui/sidebar/SidebarWrap.tsx
@@ -50,7 +50,7 @@ export const SidebarWrap = () => {
       )}
     >
       <div
-        className={clsx("flex items-center gap-3 px-3 justify-center", {
+        className={clsx("flex items-center justify-center gap-3 px-3", {
           "gap-0": isCompact,
         })}
       >
@@ -268,9 +268,9 @@ export const SidebarWrap = () => {
         >
           <div
             className={clsx(
-              "text-default-500 data-[hover=true]:text-foreground px-0",
+              "px-0 text-default-500 data-[hover=true]:text-foreground",
               {
-                "justify-center mt-3": isCompact,
+                "mt-3 justify-center": isCompact,
               },
             )}
           >
@@ -284,7 +284,7 @@ export const SidebarWrap = () => {
           <Button
             aria-label={isCompact ? "Open sidebar" : "Close sidebar"}
             className={clsx(
-              "text-default-500 data-[hover=true]:text-foreground px-0",
+              "px-0 text-default-500 data-[hover=true]:text-foreground",
               {
                 "justify-center": isCompact,
               },
diff --git a/components/ui/table/severity-badge.tsx b/components/ui/table/severity-badge.tsx
index 2ce9d9e65c..9539e56bb3 100644
--- a/components/ui/table/severity-badge.tsx
+++ b/components/ui/table/severity-badge.tsx
@@ -36,7 +36,7 @@ export const SeverityBadge = ({ severity }: { severity: Severity }) => {
 
   return (
     <Chip
-      className={clsx("capitalize border-none gap-1 text-default-600", {
+      className={clsx("gap-1 border-none capitalize text-default-600", {
         "bg-rose-700/20": severity === "critical",
       })}
       size="sm"
diff --git a/components/ui/table/status-badge.tsx b/components/ui/table/status-badge.tsx
index 99a2f52e60..e688021cd4 100644
--- a/components/ui/table/status-badge.tsx
+++ b/components/ui/table/status-badge.tsx
@@ -30,7 +30,7 @@ export const StatusBadge = ({ status }: { status: Status }) => {
 
   return (
     <Chip
-      className="capitalize border-none gap-1 text-default-600"
+      className="gap-1 border-none capitalize text-default-600"
       size="sm"
       variant="flat"
       color={color}
diff --git a/components/ui/table/table.tsx b/components/ui/table/table.tsx
index 91230d9f39..aca884960c 100644
--- a/components/ui/table/table.tsx
+++ b/components/ui/table/table.tsx
@@ -45,7 +45,7 @@ const TableFooter = React.forwardRef<
   <tfoot
     ref={ref}
     className={cn(
-      "font-medium [&>tr]:last:border-b-0 dark:bg-slate-800/50",
+      "font-medium dark:bg-slate-800/50 [&>tr]:last:border-b-0",
       className,
     )}
     {...props}
@@ -75,7 +75,7 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      "px-4 text-left align-middle bg-default-100 [&:has([role=checkbox])]:pr-0 dark:text-slate-400 h-10 rtl:text-right whitespace-nowrap text-foreground-500 text-tiny font-semibold first:rounded-l-lg rtl:first:rounded-r-lg rtl:first:rounded-l-[unset] last:rounded-r-lg rtl:last:rounded-l-lg rtl:last:rounded-r-[unset] data-[hover=true]:text-foreground-400 outline-none data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2",
+      "h-10 whitespace-nowrap bg-default-100 px-4 text-left align-middle text-tiny font-semibold text-foreground-500 outline-none first:rounded-l-lg last:rounded-r-lg data-[focus-visible=true]:z-10 data-[hover=true]:text-foreground-400 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-offset-2 data-[focus-visible=true]:outline-focus dark:text-slate-400 rtl:text-right rtl:first:rounded-l-[unset] rtl:first:rounded-r-lg rtl:last:rounded-l-lg rtl:last:rounded-r-[unset] [&:has([role=checkbox])]:pr-0",
       className,
     )}
     {...props}
diff --git a/components/ui/toast/Toast.tsx b/components/ui/toast/Toast.tsx
index dba0e5a784..ed6797b45c 100644
--- a/components/ui/toast/Toast.tsx
+++ b/components/ui/toast/Toast.tsx
@@ -95,7 +95,7 @@ const ToastTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <ToastPrimitives.Title
     ref={ref}
-    className={cn("text-lg font-semibold [&+div]:text-md", className)}
+    className={cn("[&+div]:text-md text-lg font-semibold", className)}
     {...props}
   />
 ));
diff --git a/components/users/AddUserModal.tsx b/components/users/AddUserModal.tsx
index 49d4b70dd9..e309ea0516 100644
--- a/components/users/AddUserModal.tsx
+++ b/components/users/AddUserModal.tsx
@@ -30,10 +30,10 @@ export const AddUserModal = () => {
         className="flex flex-col sm:max-w-md md:max-w-lg"
       >
         <DialogHeader className="mb-6 space-y-3">
-          <DialogTitle className="text-2xl text-center">Add User</DialogTitle>
+          <DialogTitle className="text-center text-2xl">Add User</DialogTitle>
         </DialogHeader>
         <form ref={ref} onSubmit={() => setOpen(false)}>
-          <div className="col-span-1 flex flex-col gap-y-2 my-auto">
+          <div className="col-span-1 my-auto flex flex-col gap-y-2">
             <Input
               type="text"
               name="email"
@@ -52,7 +52,7 @@ export const AddUserModal = () => {
             />
             <CustomSelectUser />
           </div>
-          <div className="col-span-2 flex justify-center mt-4">
+          <div className="col-span-2 mt-4 flex justify-center">
             <ButtonAddUser />
           </div>
         </form>
diff --git a/components/users/CustomSelectUser.tsx b/components/users/CustomSelectUser.tsx
index 10acfc973c..676fe881e6 100644
--- a/components/users/CustomSelectUser.tsx
+++ b/components/users/CustomSelectUser.tsx
@@ -22,7 +22,7 @@ export const CustomSelectUser: React.FC<CustomSelectUserProps> = ({
         Select a role<span className="text-red-500">*</span>
       </Label>
       <Select>
-        <SelectTrigger className="shadow-none h-12 rounded-xl bg-zinc-100 border-transparent text-foreground-500 focus:ring-2 focus:ring-blue-600 ring-0 hover:bg-zinc-200 focus:border-2 focus:border-white">
+        <SelectTrigger className="h-12 rounded-xl border-transparent bg-zinc-100 text-foreground-500 shadow-none ring-0 hover:bg-zinc-200 focus:border-2 focus:border-white focus:ring-2 focus:ring-blue-600">
           <SelectValue
             placeholder={(userData && userData?.role) || "Select a role"}
           />
diff --git a/components/users/EditUserModal.tsx b/components/users/EditUserModal.tsx
index 0d64c7f940..45d7c86791 100644
--- a/components/users/EditUserModal.tsx
+++ b/components/users/EditUserModal.tsx
@@ -34,10 +34,10 @@ export const EditUserModal: React.FC<EditUserModalProps> = ({
         className="flex flex-col sm:max-w-md md:max-w-lg"
       >
         <DialogHeader className="mb-6 space-y-3">
-          <DialogTitle className="text-2xl text-center">Edit User</DialogTitle>
+          <DialogTitle className="text-center text-2xl">Edit User</DialogTitle>
         </DialogHeader>
         <form ref={ref} onSubmit={() => setIsOpen(false)}>
-          <div className="col-span-1 flex flex-col gap-y-2 my-auto">
+          <div className="col-span-1 my-auto flex flex-col gap-y-2">
             <Input
               type="name"
               name="name"
@@ -72,7 +72,7 @@ export const EditUserModal: React.FC<EditUserModalProps> = ({
             />
             <CustomSelectUser userData={userData} />
           </div>
-          <div className="col-span-2 flex justify-center mt-4">
+          <div className="col-span-2 mt-4 flex justify-center">
             <ButtonEditUser />
           </div>
         </form>
diff --git a/components/users/table/DataTablePagination.tsx b/components/users/table/DataTablePagination.tsx
index 4c4278682f..e17170d7c8 100644
--- a/components/users/table/DataTablePagination.tsx
+++ b/components/users/table/DataTablePagination.tsx
@@ -49,7 +49,7 @@ export function DataTablePagination({ metadata }: DataTablePaginationProps) {
         <div className="flex items-center space-x-2">
           <Link
             aria-label="Go to first page"
-            className="page-link relative block py-1.5 px-3 border-0 bg-transparent outline-none transition-all duration-300 rounded text-gray-800 hover:text-gray-800 hover:bg-gray-200 focus:shadow-none"
+            className="page-link relative block rounded border-0 bg-transparent px-3 py-1.5 text-gray-800 outline-none transition-all duration-300 hover:bg-gray-200 hover:text-gray-800 focus:shadow-none"
             href={createPageUrl(1)}
             aria-disabled="true"
           >
@@ -57,7 +57,7 @@ export function DataTablePagination({ metadata }: DataTablePaginationProps) {
           </Link>
           <Link
             aria-label="Go to previous page"
-            className="page-link relative block py-1.5 px-3 border-0 bg-transparent outline-none transition-all duration-300 rounded text-gray-800 hover:text-gray-800 hover:bg-gray-200 focus:shadow-none"
+            className="page-link relative block rounded border-0 bg-transparent px-3 py-1.5 text-gray-800 outline-none transition-all duration-300 hover:bg-gray-200 hover:text-gray-800 focus:shadow-none"
             href={createPageUrl(currentPage - 1)}
             aria-disabled="true"
           >
@@ -65,14 +65,14 @@ export function DataTablePagination({ metadata }: DataTablePaginationProps) {
           </Link>
           <Link
             aria-label="Go to next page"
-            className="page-link relative block py-1.5 px-3 border-0 bg-transparent outline-none transition-all duration-300 rounded text-gray-800 hover:text-gray-800 hover:bg-gray-200 focus:shadow-none"
+            className="page-link relative block rounded border-0 bg-transparent px-3 py-1.5 text-gray-800 outline-none transition-all duration-300 hover:bg-gray-200 hover:text-gray-800 focus:shadow-none"
             href={createPageUrl(currentPage + 1)}
           >
             <ChevronRightIcon className="size-4" aria-hidden="true" />
           </Link>
           <Link
             aria-label="Go to last page"
-            className="page-link relative block py-1.5 px-3 border-0 bg-transparent outline-none transition-all duration-300 rounded text-gray-800 hover:text-gray-800 hover:bg-gray-200 focus:shadow-none"
+            className="page-link relative block rounded border-0 bg-transparent px-3 py-1.5 text-gray-800 outline-none transition-all duration-300 hover:bg-gray-200 hover:text-gray-800 focus:shadow-none"
             href={createPageUrl(totalPages)}
           >
             <DoubleArrowRightIcon className="size-4" aria-hidden="true" />
diff --git a/components/users/table/DataTableUser.tsx b/components/users/table/DataTableUser.tsx
index 68fee28e55..0211491262 100644
--- a/components/users/table/DataTableUser.tsx
+++ b/components/users/table/DataTableUser.tsx
@@ -49,7 +49,7 @@ export function DataTableUser<TData, TValue>({
   });
   return (
     <>
-      <div className="rounded-md border w-full">
+      <div className="w-full rounded-md border">
         <Table>
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
@@ -99,7 +99,7 @@ export function DataTableUser<TData, TValue>({
           </TableBody>
         </Table>
       </div>
-      <div className="flex items-center w-full space-x-2 py-4">
+      <div className="flex w-full items-center space-x-2 py-4">
         <DataTablePagination metadata={metadata} />
       </div>
     </>
diff --git a/components/users/table/SkeletonTableUser.tsx b/components/users/table/SkeletonTableUser.tsx
index cf4a584428..362760b58c 100644
--- a/components/users/table/SkeletonTableUser.tsx
+++ b/components/users/table/SkeletonTableUser.tsx
@@ -3,9 +3,9 @@ import React from "react";
 
 export const SkeletonTableUser = () => {
   return (
-    <Card className="w-full h-full space-y-5 p-4" radius="sm">
+    <Card className="h-full w-full space-y-5 p-4" radius="sm">
       {/* Table headers */}
-      <div className="hidden md:flex justify-between">
+      <div className="hidden justify-between md:flex">
         <Skeleton className="w-2/12 rounded-lg">
           <div className="h-8 bg-default-200"></div>
         </Skeleton>
@@ -31,24 +31,24 @@ export const SkeletonTableUser = () => {
         {[...Array(10)].map((_, index) => (
           <div
             key={index}
-            className="flex flex-col md:flex-row justify-between items-center space-x-0 md:space-x-4"
+            className="flex flex-col items-center justify-between space-x-0 md:flex-row md:space-x-4"
           >
-            <Skeleton className="w-full md:w-2/12 rounded-lg mb-2 md:mb-0">
+            <Skeleton className="mb-2 w-full rounded-lg md:mb-0 md:w-2/12">
               <div className="h-12 bg-default-300"></div>
             </Skeleton>
-            <Skeleton className="w-full md:w-2/12 rounded-lg mb-2 md:mb-0">
+            <Skeleton className="mb-2 w-full rounded-lg md:mb-0 md:w-2/12">
               <div className="h-12 bg-default-300"></div>
             </Skeleton>
-            <Skeleton className="hidden sm:flex md:w-2/12 rounded-lg mb-2 md:mb-0">
+            <Skeleton className="mb-2 hidden rounded-lg sm:flex md:mb-0 md:w-2/12">
               <div className="h-12 bg-default-300"></div>
             </Skeleton>
-            <Skeleton className="hidden sm:flex md:w-2/12 rounded-lg mb-2 md:mb-0">
+            <Skeleton className="mb-2 hidden rounded-lg sm:flex md:mb-0 md:w-2/12">
               <div className="h-12 bg-default-300"></div>
             </Skeleton>
-            <Skeleton className="hidden sm:flex md:w-2/12 rounded-lg mb-2 md:mb-0">
+            <Skeleton className="mb-2 hidden rounded-lg sm:flex md:mb-0 md:w-2/12">
               <div className="h-12 bg-default-300"></div>
             </Skeleton>
-            <Skeleton className="hidden sm:flex md:w-1/12 rounded-lg mb-2 md:mb-0">
+            <Skeleton className="mb-2 hidden rounded-lg sm:flex md:mb-0 md:w-1/12">
               <div className="h-12 bg-default-300"></div>
             </Skeleton>
           </div>
diff --git a/components/users/table/UserActions.tsx b/components/users/table/UserActions.tsx
index 9ff00eda1d..15d0e3e67a 100644
--- a/components/users/table/UserActions.tsx
+++ b/components/users/table/UserActions.tsx
@@ -21,22 +21,22 @@ export const UserActions: React.FC<UserActionsProps> = ({ userData }) => {
 
   return (
     <>
-      <div className="relative flex justify-end items-center gap-2">
+      <div className="relative flex items-center justify-end gap-2">
         <DropdownMenu modal={false}>
           <DropdownMenuTrigger>
             <VerticalDotsIcon
               size={28}
-              className="text-default-400 p-0.5 hover:bg-gray-200 hover:rounded-full"
+              className="p-0.5 text-default-400 hover:rounded-full hover:bg-gray-200"
             />
           </DropdownMenuTrigger>
           <DropdownMenuContent className="bg-white">
             <DropdownMenuItem
-              className="hover:bg-gray-200 hover:cursor-pointer"
+              className="hover:cursor-pointer hover:bg-gray-200"
               onClick={() => setIsEditOpen(true)}
             >
               Edit
             </DropdownMenuItem>
-            <DropdownMenuItem className="hover:bg-gray-200 hover:cursor-pointer">
+            <DropdownMenuItem className="hover:cursor-pointer hover:bg-gray-200">
               Delete
             </DropdownMenuItem>
           </DropdownMenuContent>