diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
index ac3391115a..99bb451ff8 100644
--- a/.github/workflows/chromatic.yml
+++ b/.github/workflows/chromatic.yml
@@ -10,6 +10,11 @@ jobs:
   chromatic:
     name: Run Chromatic
     runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+      id-token: write
+      actions: read
     steps:
       - name: Harden the runner (Audit all outbound calls)
         uses: step-security/harden-runner@0634a2670c59f64b4a01f0f96f84700a4088b9f0 # v2.12.0
diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index 0df9dc5631..a354a323bd 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -25,7 +25,6 @@ permissions:
   id-token: write
   contents: read
   actions: read
-  checks: write
 
 jobs:
   build:
diff --git a/.github/workflows/release-docker-github.yml b/.github/workflows/release-docker-github.yml
index 58aee8cf5c..30238eb3cf 100644
--- a/.github/workflows/release-docker-github.yml
+++ b/.github/workflows/release-docker-github.yml
@@ -20,18 +20,15 @@ env:
   TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
   TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
 
-permissions:
-  contents: read
-
 jobs:
   build:
     runs-on: ubuntu-latest
     permissions:
       contents: read
       packages: write
+      id-token: write
       # This is used to complete the identity challenge
       # with sigstore/fulcio when running outside of PRs.
-      id-token: write
 
     outputs:
       VERSION: ${{ steps.extract_release_tag.outputs.VERSION }}
diff --git a/.github/workflows/release-helm-chart.yml b/.github/workflows/release-helm-chart.yml
index 1506dfeb27..fd3bb99022 100644
--- a/.github/workflows/release-helm-chart.yml
+++ b/.github/workflows/release-helm-chart.yml
@@ -4,7 +4,7 @@ on:
   workflow_call:
     inputs:
       VERSION:
-        description: 'The version of the Helm chart to release'
+        description: "The version of the Helm chart to release"
         required: true
         type: string
 
diff --git a/.github/workflows/terraform-plan-and-apply.yml b/.github/workflows/terraform-plan-and-apply.yml
index 2ae858c779..e9f047d0bf 100644
--- a/.github/workflows/terraform-plan-and-apply.yml
+++ b/.github/workflows/terraform-plan-and-apply.yml
@@ -1,8 +1,8 @@
-name: 'Terraform'
+name: "Terraform"
 
 on:
   workflow_dispatch:
-# TODO: enable it back when migration is completed.
+  # TODO: enable it back when migration is completed.
   push:
     branches:
       - main
@@ -14,14 +14,13 @@ on:
     paths:
       - "infra/terraform/**"
 
-permissions:
-  id-token: write
-  contents: write
-  pull-requests: write
-
 jobs:
   terraform:
     runs-on: ubuntu-latest
+    permissions:
+      id-token: write
+      contents: read
+      pull-requests: write
     env:
       GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
     steps:
@@ -83,4 +82,3 @@ jobs:
         if: github.ref == 'refs/heads/main' && github.event_name == 'push'
         run: terraform apply .planfile
         working-directory: "infra/terraform"
-
diff --git a/apps/web/app/(app)/(onboarding)/environments/[environmentId]/connect/page.tsx b/apps/web/app/(app)/(onboarding)/environments/[environmentId]/connect/page.tsx
index c48d49edbc..af35f6db54 100644
--- a/apps/web/app/(app)/(onboarding)/environments/[environmentId]/connect/page.tsx
+++ b/apps/web/app/(app)/(onboarding)/environments/[environmentId]/connect/page.tsx
@@ -44,7 +44,7 @@ const Page = async (props: ConnectPageProps) => {
         channel={channel}
       />
       <Button
-        className="absolute top-5 right-5 !mt-0 text-slate-500 hover:text-slate-700"
+        className="absolute right-5 top-5 !mt-0 text-slate-500 hover:text-slate-700"
         variant="ghost"
         asChild>
         <Link href={`/environments/${environment.id}`}>
diff --git a/apps/web/app/(app)/(onboarding)/environments/[environmentId]/xm-templates/page.tsx b/apps/web/app/(app)/(onboarding)/environments/[environmentId]/xm-templates/page.tsx
index ad6c480710..bed5a872ca 100644
--- a/apps/web/app/(app)/(onboarding)/environments/[environmentId]/xm-templates/page.tsx
+++ b/apps/web/app/(app)/(onboarding)/environments/[environmentId]/xm-templates/page.tsx
@@ -49,7 +49,7 @@ const Page = async (props: XMTemplatePageProps) => {
       <XMTemplateList project={project} user={user} environmentId={environment.id} />
       {projects.length >= 2 && (
         <Button
-          className="absolute top-5 right-5 !mt-0 text-slate-500 hover:text-slate-700"
+          className="absolute right-5 top-5 !mt-0 text-slate-500 hover:text-slate-700"
           variant="ghost"
           asChild>
           <Link href={`/environments/${environment.id}/surveys`}>
diff --git a/apps/web/app/(app)/(onboarding)/organizations/[organizationId]/projects/new/channel/page.tsx b/apps/web/app/(app)/(onboarding)/organizations/[organizationId]/projects/new/channel/page.tsx
index b1e26d1113..13da215193 100644
--- a/apps/web/app/(app)/(onboarding)/organizations/[organizationId]/projects/new/channel/page.tsx
+++ b/apps/web/app/(app)/(onboarding)/organizations/[organizationId]/projects/new/channel/page.tsx
@@ -50,7 +50,7 @@ const Page = async (props: ChannelPageProps) => {
       <OnboardingOptionsContainer options={channelOptions} />
       {projects.length >= 1 && (
         <Button
-          className="absolute top-5 right-5 !mt-0 text-slate-500 hover:text-slate-700"
+          className="absolute right-5 top-5 !mt-0 text-slate-500 hover:text-slate-700"
           variant="ghost"
           asChild>
           <Link href={"/"}>
diff --git a/apps/web/app/(app)/(onboarding)/organizations/[organizationId]/projects/new/settings/components/ProjectSettings.tsx b/apps/web/app/(app)/(onboarding)/organizations/[organizationId]/projects/new/settings/components/ProjectSettings.tsx
index ab4713933a..ea64a64791 100644
--- a/apps/web/app/(app)/(onboarding)/organizations/[organizationId]/projects/new/settings/components/ProjectSettings.tsx
+++ b/apps/web/app/(app)/(onboarding)/organizations/[organizationId]/projects/new/settings/components/ProjectSettings.tsx
@@ -225,7 +225,7 @@ export const ProjectSettings = ({
             alt="Logo"
             width={256}
             height={56}
-            className="absolute top-2 left-2 -mb-6 h-20 w-auto max-w-64 rounded-lg border object-contain p-1"
+            className="absolute left-2 top-2 -mb-6 h-20 w-auto max-w-64 rounded-lg border object-contain p-1"
           />
         )}
         <p className="text-sm text-slate-400">{t("common.preview")}</p>
diff --git a/apps/web/app/(app)/environments/[environmentId]/actions/components/ActionRowData.tsx b/apps/web/app/(app)/environments/[environmentId]/actions/components/ActionRowData.tsx
index 2e2601d91d..cb5a49a39c 100644
--- a/apps/web/app/(app)/environments/[environmentId]/actions/components/ActionRowData.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/actions/components/ActionRowData.tsx
@@ -23,7 +23,7 @@ export const ActionClassDataRow = ({
           </div>
         </div>
       </div>
-      <div className="col-span-2 my-auto text-center text-sm whitespace-nowrap text-slate-500">
+      <div className="col-span-2 my-auto whitespace-nowrap text-center text-sm text-slate-500">
         {timeSince(actionClass.createdAt.toString(), locale)}
       </div>
       <div className="text-center"></div>
diff --git a/apps/web/app/(app)/environments/[environmentId]/components/WidgetStatusIndicator.tsx b/apps/web/app/(app)/environments/[environmentId]/components/WidgetStatusIndicator.tsx
index a39e9879aa..e5a63bb16c 100644
--- a/apps/web/app/(app)/environments/[environmentId]/components/WidgetStatusIndicator.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/components/WidgetStatusIndicator.tsx
@@ -53,7 +53,7 @@ export const WidgetStatusIndicator = ({ environment }: WidgetStatusIndicatorProp
         <currentStatus.icon />
       </div>
       <p className="text-md font-bold text-slate-800 md:text-xl">{currentStatus.title}</p>
-      <p className="w-2/3 text-sm text-balance text-slate-600">{currentStatus.subtitle}</p>
+      <p className="w-2/3 text-balance text-sm text-slate-600">{currentStatus.subtitle}</p>
       {status === "notImplemented" && (
         <Button variant="outline" size="sm" className="bg-white" onClick={() => router.refresh()}>
           <RotateCcwIcon />
diff --git a/apps/web/app/(app)/environments/[environmentId]/integrations/google-sheets/components/AddIntegrationModal.tsx b/apps/web/app/(app)/environments/[environmentId]/integrations/google-sheets/components/AddIntegrationModal.tsx
index 22ba799aef..b44f656ee2 100644
--- a/apps/web/app/(app)/environments/[environmentId]/integrations/google-sheets/components/AddIntegrationModal.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/integrations/google-sheets/components/AddIntegrationModal.tsx
@@ -255,7 +255,7 @@ export const AddIntegrationModal = ({
                 <div className="space-y-4">
                   <div>
                     <Label htmlFor="Surveys">{t("common.questions")}</Label>
-                    <div className="mt-1 max-h-[15vh] overflow-x-hidden overflow-y-auto rounded-lg border border-slate-200">
+                    <div className="mt-1 max-h-[15vh] overflow-y-auto overflow-x-hidden rounded-lg border border-slate-200">
                       <div className="grid content-center rounded-lg bg-slate-50 p-3 text-left text-sm text-slate-900">
                         {replaceHeadlineRecall(selectedSurvey, "default")?.questions.map((question) => (
                           <div key={question.id} className="my-1 flex items-center space-x-2">
diff --git a/apps/web/app/(app)/environments/[environmentId]/settings/components/SettingsCard.tsx b/apps/web/app/(app)/environments/[environmentId]/settings/components/SettingsCard.tsx
index 1f5f1f5b58..dfb1f2107e 100644
--- a/apps/web/app/(app)/environments/[environmentId]/settings/components/SettingsCard.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/settings/components/SettingsCard.tsx
@@ -31,7 +31,7 @@ export const SettingsCard = ({
       id={title}>
       <div className="border-b border-slate-200 px-4 pb-4">
         <div className="flex">
-          <h3 className="text-lg leading-6 font-medium text-slate-900 capitalize">{title}</h3>
+          <h3 className="text-lg font-medium capitalize leading-6 text-slate-900">{title}</h3>
           <div className="ml-2">
             {beta && <Badge size="normal" type="warning" text="Beta" />}
             {soon && (
diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/components/ResponseTableCell.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/components/ResponseTableCell.tsx
index 5cdc2294f1..75e5e90e96 100644
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/components/ResponseTableCell.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/components/ResponseTableCell.tsx
@@ -38,7 +38,7 @@ export const ResponseTableCell = ({
     <button
       type="button"
       aria-label="Expand response"
-      className="hidden flex-shrink-0 cursor-pointer items-center rounded-md border border-slate-200 bg-white p-2 group-hover:flex hover:border-slate-300 focus:outline-none"
+      className="hidden flex-shrink-0 cursor-pointer items-center rounded-md border border-slate-200 bg-white p-2 hover:border-slate-300 focus:outline-none group-hover:flex"
       onClick={handleCellClick}>
       <Maximize2Icon className="h-4 w-4" />
     </button>
diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/ConsentSummary.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/ConsentSummary.tsx
index 3bffa7e961..73f1a243a3 100644
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/ConsentSummary.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/ConsentSummary.tsx
@@ -41,7 +41,7 @@ export const ConsentSummary = ({ questionSummary, survey, setFilter }: ConsentSu
   return (
     <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
       <QuestionSummaryHeader questionSummary={questionSummary} survey={survey} />
-      <div className="space-y-5 px-4 pt-4 pb-6 text-sm md:px-6 md:text-base">
+      <div className="space-y-5 px-4 pb-6 pt-4 text-sm md:px-6 md:text-base">
         {summaryItems.map((summaryItem) => {
           return (
             <button
diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/DateQuestionSummary.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/DateQuestionSummary.tsx
index c31a59fc04..a2fa7558a3 100644
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/DateQuestionSummary.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/DateQuestionSummary.tsx
@@ -80,7 +80,7 @@ export const DateQuestionSummary = ({
                   </div>
                 )}
               </div>
-              <div className="ph-no-capture col-span-2 pl-6 font-semibold whitespace-pre-wrap">
+              <div className="ph-no-capture col-span-2 whitespace-pre-wrap pl-6 font-semibold">
                 {renderResponseValue(response.value)}
               </div>
               <div className="px-4 text-slate-500 md:px-6">
diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/FileUploadSummary.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/FileUploadSummary.tsx
index 405c84b168..39cb0ed6ec 100644
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/FileUploadSummary.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/FileUploadSummary.tsx
@@ -80,7 +80,7 @@ export const FileUploadSummary = ({
                       return (
                         <div className="relative m-2 rounded-lg bg-slate-200" key={fileUrl}>
                           <a href={fileUrl} key={fileUrl} target="_blank" rel="noopener noreferrer">
-                            <div className="absolute top-0 right-0 m-2">
+                            <div className="absolute right-0 top-0 m-2">
                               <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-slate-50 hover:bg-white">
                                 <DownloadIcon className="h-6 text-slate-500" />
                               </div>
diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/HiddenFieldsSummary.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/HiddenFieldsSummary.tsx
index 15f6485603..e4210bde63 100644
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/HiddenFieldsSummary.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/HiddenFieldsSummary.tsx
@@ -28,7 +28,7 @@ export const HiddenFieldsSummary = ({ environment, questionSummary, locale }: Hi
   };
   return (
     <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
-      <div className="space-y-2 px-4 pt-6 pb-5 md:px-6">
+      <div className="space-y-2 px-4 pb-5 pt-6 md:px-6">
         <div className={"align-center flex justify-between gap-4"}>
           <h3 className="pb-1 text-lg font-semibold text-slate-900 md:text-xl">{questionSummary.id}</h3>
         </div>
@@ -76,7 +76,7 @@ export const HiddenFieldsSummary = ({ environment, questionSummary, locale }: Hi
                 </div>
               )}
             </div>
-            <div className="ph-no-capture col-span-2 pl-6 font-semibold whitespace-pre-wrap">
+            <div className="ph-no-capture col-span-2 whitespace-pre-wrap pl-6 font-semibold">
               {response.value}
             </div>
             <div className="px-4 text-slate-500 md:px-6">
diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/MatrixQuestionSummary.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/MatrixQuestionSummary.tsx
index e038e7c0aa..2b249875ba 100644
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/MatrixQuestionSummary.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/MatrixQuestionSummary.tsx
@@ -52,7 +52,7 @@ export const MatrixQuestionSummary = ({ questionSummary, survey, setFilter }: Ma
         <table className="mx-auto border-collapse cursor-default text-left">
           <thead>
             <tr>
-              <th className="p-4 pt-0 pb-3 font-medium text-slate-400 dark:border-slate-600 dark:text-slate-200"></th>
+              <th className="p-4 pb-3 pt-0 font-medium text-slate-400 dark:border-slate-600 dark:text-slate-200"></th>
               {columns.map((column) => (
                 <th key={column} className="text-center font-medium">
                   <TooltipRenderer tooltipContent={getTooltipContent(column)} shouldRender={true}>
@@ -65,7 +65,7 @@ export const MatrixQuestionSummary = ({ questionSummary, survey, setFilter }: Ma
           <tbody>
             {questionSummary.data.map(({ rowLabel, columnPercentages }, rowIndex) => (
               <tr key={rowLabel}>
-                <td className="max-w-60 overflow-hidden p-4 text-ellipsis whitespace-nowrap">
+                <td className="max-w-60 overflow-hidden text-ellipsis whitespace-nowrap p-4">
                   <TooltipRenderer tooltipContent={getTooltipContent(rowLabel)} shouldRender={true}>
                     <p className="max-w-40 overflow-hidden text-ellipsis whitespace-nowrap">{rowLabel}</p>
                   </TooltipRenderer>
diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/MultipleChoiceSummary.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/MultipleChoiceSummary.tsx
index 235ba3e422..45ef0d3614 100644
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/MultipleChoiceSummary.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/MultipleChoiceSummary.tsx
@@ -83,7 +83,7 @@ export const MultipleChoiceSummary = ({
           ) : undefined
         }
       />
-      <div className="space-y-5 px-4 pt-4 pb-6 text-sm md:px-6 md:text-base">
+      <div className="space-y-5 px-4 pb-6 pt-4 text-sm md:px-6 md:text-base">
         {results.map((result, resultsIdx) => (
           <Fragment key={result.value}>
             <button
diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/NPSSummary.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/NPSSummary.tsx
index 948d41e34e..fc119fef50 100644
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/NPSSummary.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/NPSSummary.tsx
@@ -62,7 +62,7 @@ export const NPSSummary = ({ questionSummary, survey, setFilter }: NPSSummaryPro
   return (
     <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
       <QuestionSummaryHeader questionSummary={questionSummary} survey={survey} />
-      <div className="space-y-5 px-4 pt-4 pb-6 text-sm md:px-6 md:text-base">
+      <div className="space-y-5 px-4 pb-6 pt-4 text-sm md:px-6 md:text-base">
         {["promoters", "passives", "detractors", "dismissed"].map((group) => (
           <button
             className="w-full cursor-pointer hover:opacity-80"
@@ -72,7 +72,7 @@ export const NPSSummary = ({ questionSummary, survey, setFilter }: NPSSummaryPro
               className={`mb-2 flex justify-between ${group === "dismissed" ? "mb-2 border-t bg-white pt-4 text-sm md:text-base" : ""}`}>
               <div className="mr-8 flex space-x-1">
                 <p
-                  className={`font-semibold text-slate-700 capitalize ${group === "dismissed" ? "" : "text-slate-700"}`}>
+                  className={`font-semibold capitalize text-slate-700 ${group === "dismissed" ? "" : "text-slate-700"}`}>
                   {group}
                 </p>
                 <div>
@@ -94,7 +94,7 @@ export const NPSSummary = ({ questionSummary, survey, setFilter }: NPSSummaryPro
         ))}
       </div>
 
-      <div className="flex justify-center pt-4 pb-4">
+      <div className="flex justify-center pb-4 pt-4">
         <HalfCircle value={questionSummary.score} />
       </div>
     </div>
diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/PictureChoiceSummary.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/PictureChoiceSummary.tsx
index fc7a7b2268..e13789e2f0 100644
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/PictureChoiceSummary.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/PictureChoiceSummary.tsx
@@ -43,7 +43,7 @@ export const PictureChoiceSummary = ({ questionSummary, survey, setFilter }: Pic
           ) : undefined
         }
       />
-      <div className="space-y-5 px-4 pt-4 pb-6 text-sm md:px-6 md:text-base">
+      <div className="space-y-5 px-4 pb-6 pt-4 text-sm md:px-6 md:text-base">
         {results.map((result, index) => (
           <button
             className="w-full cursor-pointer hover:opacity-80"
diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/QuestionSummaryHeader.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/QuestionSummaryHeader.tsx
index 1500882b15..fbeff93c20 100644
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/QuestionSummaryHeader.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/QuestionSummaryHeader.tsx
@@ -26,7 +26,7 @@ export const QuestionSummaryHeader = ({
   const questionType = getQuestionTypes(t).find((type) => type.id === questionSummary.question.type);
 
   return (
-    <div className="space-y-2 px-4 pt-6 pb-5 md:px-6">
+    <div className="space-y-2 px-4 pb-5 pt-6 md:px-6">
       <div className={"align-center flex justify-between gap-4"}>
         <h3 className="pb-1 text-lg font-semibold text-slate-900 md:text-xl">
           {formatTextWithSlashes(
diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/RatingSummary.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/RatingSummary.tsx
index 2234a70584..675c4f703f 100644
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/RatingSummary.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/RatingSummary.tsx
@@ -50,7 +50,7 @@ export const RatingSummary = ({ questionSummary, survey, setFilter }: RatingSumm
           </div>
         }
       />
-      <div className="space-y-5 px-4 pt-4 pb-6 text-sm md:px-6 md:text-base">
+      <div className="space-y-5 px-4 pb-6 pt-4 text-sm md:px-6 md:text-base">
         {questionSummary.choices.map((result) => (
           <button
             className="w-full cursor-pointer hover:opacity-80"
diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryDropOffs.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryDropOffs.tsx
index 507a48cfe9..433e25fc95 100644
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryDropOffs.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryDropOffs.tsx
@@ -61,10 +61,10 @@ export const SummaryDropOffs = ({ dropOff, survey }: SummaryDropOffsProps) => {
                 )}
               </p>
             </div>
-            <div className="text-center font-semibold whitespace-pre-wrap">
+            <div className="whitespace-pre-wrap text-center font-semibold">
               {quesDropOff.ttc > 0 ? (quesDropOff.ttc / 1000).toFixed(2) + "s" : "N/A"}
             </div>
-            <div className="text-center font-semibold whitespace-pre-wrap">{quesDropOff.impressions}</div>
+            <div className="whitespace-pre-wrap text-center font-semibold">{quesDropOff.impressions}</div>
             <div className="pl-6 text-center md:px-6">
               <span className="mr-1.5 font-semibold">{quesDropOff.dropOffCount}</span>
               <span>({Math.round(quesDropOff.dropOffPercentage)}%)</span>
diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/CustomFilter.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/CustomFilter.tsx
index c054b33776..484d010efe 100755
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/CustomFilter.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/CustomFilter.tsx
@@ -390,7 +390,7 @@ export const CustomFilter = ({ survey }: CustomFilterProps) => {
                 value && handleDatePickerClose();
               }}>
               <DropdownMenuTrigger asChild className="focus:bg-muted cursor-pointer outline-none">
-                <div className="h-auto min-w-auto rounded-md border border-slate-200 bg-white p-3 hover:border-slate-300 sm:flex sm:px-6 sm:py-3">
+                <div className="min-w-auto h-auto rounded-md border border-slate-200 bg-white p-3 hover:border-slate-300 sm:flex sm:px-6 sm:py-3">
                   <div className="hidden w-full items-center justify-between sm:flex">
                     <span className="text-sm text-slate-700">{t("common.download")}</span>
                     <ArrowDownToLineIcon className="ml-2 h-4 w-4" />
diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/QuestionFilterComboBox.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/QuestionFilterComboBox.tsx
index 5dbe2e1e1d..675cb80954 100644
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/QuestionFilterComboBox.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/QuestionFilterComboBox.tsx
@@ -91,7 +91,7 @@ export const QuestionFilterComboBox = ({
             key={`${o}-${index}`}
             type="button"
             onClick={() => handleRemoveMultiSelect(filterComboBoxValue.filter((i) => i !== o))}
-            className="flex w-30 items-center bg-slate-100 px-2 whitespace-nowrap text-slate-600">
+            className="w-30 flex items-center whitespace-nowrap bg-slate-100 px-2 text-slate-600">
             {o}
             <X width={14} height={14} className="ml-2" />
           </button>
@@ -129,7 +129,7 @@ export const QuestionFilterComboBox = ({
           <DropdownMenuTrigger
             disabled={disabled}
             className={clsx(
-              "h-9 max-w-fit rounded-md rounded-r-none border-r-[1px] border-slate-300 bg-white p-2 text-sm text-slate-600 focus:ring-0 focus:outline-transparent",
+              "h-9 max-w-fit rounded-md rounded-r-none border-r-[1px] border-slate-300 bg-white p-2 text-sm text-slate-600 focus:outline-transparent focus:ring-0",
               !disabled ? "cursor-pointer" : "opacity-50"
             )}>
             <div className="flex items-center justify-between">
diff --git a/apps/web/modules/analysis/components/ShareSurveyLink/components/SurveyLinkDisplay.tsx b/apps/web/modules/analysis/components/ShareSurveyLink/components/SurveyLinkDisplay.tsx
index eb99af8299..05013784ae 100644
--- a/apps/web/modules/analysis/components/ShareSurveyLink/components/SurveyLinkDisplay.tsx
+++ b/apps/web/modules/analysis/components/ShareSurveyLink/components/SurveyLinkDisplay.tsx
@@ -11,7 +11,7 @@ export const SurveyLinkDisplay = ({ surveyUrl }: SurveyLinkDisplayProps) => {
         <Input
           data-testid="survey-url-input"
           autoFocus={true}
-          className="mt-2 w-full min-w-96 rounded-lg border bg-white px-4 py-2 text-ellipsis text-slate-800 caret-transparent"
+          className="mt-2 w-full min-w-96 text-ellipsis rounded-lg border bg-white px-4 py-2 text-slate-800 caret-transparent"
           value={surveyUrl}
         />
       ) : (
diff --git a/apps/web/modules/analysis/components/SingleResponseCard/components/QuestionSkip.tsx b/apps/web/modules/analysis/components/SingleResponseCard/components/QuestionSkip.tsx
index ae0abe8aab..5cac1ae290 100644
--- a/apps/web/modules/analysis/components/SingleResponseCard/components/QuestionSkip.tsx
+++ b/apps/web/modules/analysis/components/SingleResponseCard/components/QuestionSkip.tsx
@@ -39,7 +39,7 @@ export const QuestionSkip = ({
                     background:
                       "repeating-linear-gradient(rgb(148, 163, 184), rgb(148, 163, 184) 5px, transparent 5px, transparent 8px)", // adjust the values to fit your design
                   }}>
-                  <CheckCircle2Icon className="absolute top-0 w-[1.5rem] min-w-[1.5rem] rounded-full bg-white p-0.25 text-slate-400" />
+                  <CheckCircle2Icon className="p-0.25 absolute top-0 w-[1.5rem] min-w-[1.5rem] rounded-full bg-white text-slate-400" />
                 </div>
               }
               <div className="ml-6 flex flex-col text-slate-700">{t("common.welcome_card")}</div>
diff --git a/apps/web/modules/analysis/components/SingleResponseCard/components/RenderResponse.tsx b/apps/web/modules/analysis/components/SingleResponseCard/components/RenderResponse.tsx
index 003a698868..2250f9b33e 100644
--- a/apps/web/modules/analysis/components/SingleResponseCard/components/RenderResponse.tsx
+++ b/apps/web/modules/analysis/components/SingleResponseCard/components/RenderResponse.tsx
@@ -101,7 +101,7 @@ export const RenderResponse: React.FC<RenderResponseProps> = ({
               return (
                 <p
                   key={rowValueInSelectedLanguage}
-                  className="ph-no-capture my-1 font-normal text-slate-700 capitalize">
+                  className="ph-no-capture my-1 font-normal capitalize text-slate-700">
                   {rowValueInSelectedLanguage}:{processResponseData(responseData[rowValueInSelectedLanguage])}
                 </p>
               );
diff --git a/apps/web/modules/analysis/components/SingleResponseCard/components/ResponseNote.tsx b/apps/web/modules/analysis/components/SingleResponseCard/components/ResponseNote.tsx
index 950a788c83..be4e619c42 100644
--- a/apps/web/modules/analysis/components/SingleResponseCard/components/ResponseNote.tsx
+++ b/apps/web/modules/analysis/components/SingleResponseCard/components/ResponseNote.tsx
@@ -104,10 +104,10 @@ export const ResponseNotes = ({
         !isOpen && unresolvedNotes.length && "group/hint cursor-pointer bg-white hover:-right-3",
         !isOpen && !unresolvedNotes.length && "cursor-pointer bg-slate-50",
         isOpen
-          ? "top-0 -right-2 h-5/6 max-h-[600px] w-1/4 bg-white"
+          ? "-right-2 top-0 h-5/6 max-h-[600px] w-1/4 bg-white"
           : unresolvedNotes.length
-            ? "top-[8.33%] right-0 h-5/6 max-h-[600px] w-1/12"
-            : "top-[8.333%] right-[120px] h-5/6 max-h-[600px] w-1/12 group-hover:right-[0]"
+            ? "right-0 top-[8.33%] h-5/6 max-h-[600px] w-1/12"
+            : "right-[120px] top-[8.333%] h-5/6 max-h-[600px] w-1/12 group-hover:right-[0]"
       )}
       onClick={() => {
         if (!isOpen) setIsOpen(true);
@@ -116,7 +116,7 @@ export const ResponseNotes = ({
         <div className="flex h-full flex-col">
           <div
             className={clsx(
-              "space-y-2 rounded-t-lg px-2 pt-2 pb-2",
+              "space-y-2 rounded-t-lg px-2 pb-2 pt-2",
               unresolvedNotes.length ? "flex h-12 items-center justify-end bg-amber-50" : "bg-slate-200"
             )}>
             {!unresolvedNotes.length ? (
@@ -127,7 +127,7 @@ export const ResponseNotes = ({
               </div>
             ) : (
               <div className="float-left mr-1.5">
-                <Maximize2Icon className="h-4 w-4 text-amber-500 group-hover/hint:scale-110 hover:text-amber-600" />
+                <Maximize2Icon className="h-4 w-4 text-amber-500 hover:text-amber-600 group-hover/hint:scale-110" />
               </div>
             )}
           </div>
@@ -141,7 +141,7 @@ export const ResponseNotes = ({
         </div>
       ) : (
         <div className="relative flex h-full flex-col">
-          <div className="rounded-t-lg bg-amber-50 px-4 pt-4 pb-3">
+          <div className="rounded-t-lg bg-amber-50 px-4 pb-3 pt-4">
             <div className="flex items-center justify-between">
               <div className="group flex items-center">
                 <h3 className="pb-1 text-sm text-amber-500">{t("common.note")}</h3>
diff --git a/apps/web/modules/analysis/components/SingleResponseCard/components/SingleResponseCardBody.tsx b/apps/web/modules/analysis/components/SingleResponseCard/components/SingleResponseCardBody.tsx
index 9547470f58..fcfb6c61de 100644
--- a/apps/web/modules/analysis/components/SingleResponseCard/components/SingleResponseCardBody.tsx
+++ b/apps/web/modules/analysis/components/SingleResponseCard/components/SingleResponseCardBody.tsx
@@ -37,7 +37,7 @@ export const SingleResponseCardBody = ({
         return (
           <span
             key={index}
-            className="mr-0.5 ml-0.5 rounded-md border border-slate-200 bg-slate-50 px-1 py-0.5 text-sm first:ml-0">
+            className="ml-0.5 mr-0.5 rounded-md border border-slate-200 bg-slate-50 px-1 py-0.5 text-sm first:ml-0">
             @{part}
           </span>
         );
diff --git a/apps/web/modules/analysis/components/SingleResponseCard/components/SingleResponseCardHeader.tsx b/apps/web/modules/analysis/components/SingleResponseCard/components/SingleResponseCardHeader.tsx
index 86f0df73bd..13a26263f3 100644
--- a/apps/web/modules/analysis/components/SingleResponseCard/components/SingleResponseCardHeader.tsx
+++ b/apps/web/modules/analysis/components/SingleResponseCard/components/SingleResponseCardHeader.tsx
@@ -153,7 +153,7 @@ export const SingleResponseCardHeader = ({
   const deleteSubmissionToolTip = <>{t("environments.surveys.responses.this_response_is_in_progress")}</>;
 
   return (
-    <div className="space-y-2 border-b border-slate-200 px-6 pt-4 pb-4">
+    <div className="space-y-2 border-b border-slate-200 px-6 pb-4 pt-4">
       <div className="flex items-center justify-between">
         <div className="flex items-center justify-center space-x-4">
           {pageType === "response" && (
diff --git a/apps/web/modules/auth/verification-requested/page.tsx b/apps/web/modules/auth/verification-requested/page.tsx
index 5250075594..93a60022d6 100644
--- a/apps/web/modules/auth/verification-requested/page.tsx
+++ b/apps/web/modules/auth/verification-requested/page.tsx
@@ -14,7 +14,7 @@ export const VerificationRequestedPage = async ({ searchParams }) => {
       return (
         <FormWrapper>
           <>
-            <h1 className="mb-4 text-center text-lg leading-2 font-semibold text-slate-900">
+            <h1 className="leading-2 mb-4 text-center text-lg font-semibold text-slate-900">
               {t("auth.verification-requested.please_confirm_your_email_address")}
             </h1>
             <p className="text-center text-sm text-slate-700">
diff --git a/apps/web/modules/ee/billing/components/billing-slider.tsx b/apps/web/modules/ee/billing/components/billing-slider.tsx
index e6190298bb..7f43bb53f7 100644
--- a/apps/web/modules/ee/billing/components/billing-slider.tsx
+++ b/apps/web/modules/ee/billing/components/billing-slider.tsx
@@ -19,7 +19,7 @@ export const BillingSlider = React.forwardRef<React.ElementRef<typeof SliderPrim
     return (
       <SliderPrimitive.Root
         ref={ref}
-        className={cn("relative flex w-full touch-none items-center select-none", className)}
+        className={cn("relative flex w-full touch-none select-none items-center", className)}
         {...props}>
         <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-r-full bg-slate-300">
           <div
diff --git a/apps/web/modules/ee/billing/components/pricing-card.tsx b/apps/web/modules/ee/billing/components/pricing-card.tsx
index 20dd16750f..680a9be2f4 100644
--- a/apps/web/modules/ee/billing/components/pricing-card.tsx
+++ b/apps/web/modules/ee/billing/components/pricing-card.tsx
@@ -126,7 +126,7 @@ export const PricingCard = ({
             id={plan.id}
             className={cn(
               plan.featured ? "text-slate-900" : "text-slate-800",
-              "text-sm leading-6 font-semibold"
+              "text-sm font-semibold leading-6"
             )}>
             {t(plan.name)}
           </h2>
diff --git a/apps/web/modules/ee/contacts/[contactId]/page.tsx b/apps/web/modules/ee/contacts/[contactId]/page.tsx
index a58d2d4a24..00f58fab30 100644
--- a/apps/web/modules/ee/contacts/[contactId]/page.tsx
+++ b/apps/web/modules/ee/contacts/[contactId]/page.tsx
@@ -41,7 +41,7 @@ export const SingleContactPage = async (props: {
   return (
     <PageContentWrapper>
       <PageHeader pageTitle={getContactIdentifier(contactAttributes)} cta={getDeletePersonButton()} />
-      <section className="pt-6 pb-24">
+      <section className="pb-24 pt-6">
         <div className="grid grid-cols-4 gap-x-8">
           <AttributesSection contactId={params.contactId} />
           <ResponseSection
diff --git a/apps/web/modules/ee/contacts/segments/components/segment-filter.tsx b/apps/web/modules/ee/contacts/segments/components/segment-filter.tsx
index 36c4a95101..a37f7bbc18 100644
--- a/apps/web/modules/ee/contacts/segments/components/segment-filter.tsx
+++ b/apps/web/modules/ee/contacts/segments/components/segment-filter.tsx
@@ -312,7 +312,7 @@ function AttributeSegmentFilter({
         }}
         value={attrKeyValue}>
         <SelectTrigger
-          className="flex w-auto items-center justify-center bg-white whitespace-nowrap capitalize"
+          className="flex w-auto items-center justify-center whitespace-nowrap bg-white capitalize"
           hideArrow>
           <SelectValue>
             <div className={cn("flex items-center gap-2", !isCapitalized(attrKeyValue ?? "") && "lowercase")}>
@@ -494,7 +494,7 @@ function PersonSegmentFilter({
         }}
         value={personIdentifier}>
         <SelectTrigger
-          className="flex w-auto items-center justify-center bg-white whitespace-nowrap capitalize"
+          className="flex w-auto items-center justify-center whitespace-nowrap bg-white capitalize"
           hideArrow>
           <SelectValue>
             <div className="flex items-center gap-1 lowercase">
@@ -643,7 +643,7 @@ function SegmentSegmentFilter({
         }}
         value={currentSegment?.id}>
         <SelectTrigger
-          className="flex w-auto items-center justify-center bg-white whitespace-nowrap capitalize"
+          className="flex w-auto items-center justify-center whitespace-nowrap bg-white capitalize"
           hideArrow>
           <div className="flex items-center gap-1">
             <Users2Icon className="h-4 w-4 text-sm" />
diff --git a/apps/web/modules/ee/contacts/segments/components/targeting-card.tsx b/apps/web/modules/ee/contacts/segments/components/targeting-card.tsx
index 00600b4a0c..1dfc38ab88 100644
--- a/apps/web/modules/ee/contacts/segments/components/targeting-card.tsx
+++ b/apps/web/modules/ee/contacts/segments/components/targeting-card.tsx
@@ -171,7 +171,7 @@ export function TargetingCard({
         asChild
         className="h-full w-full cursor-pointer rounded-lg hover:bg-slate-50">
         <div className="inline-flex px-4 py-6">
-          <div className="flex items-center pr-5 pl-2">
+          <div className="flex items-center pl-2 pr-5">
             <CheckIcon
               className="h-7 w-7 rounded-full border border-green-300 bg-green-100 p-1.5 text-green-600"
               strokeWidth={3}
diff --git a/apps/web/modules/ee/multi-language-surveys/components/edit-language.tsx b/apps/web/modules/ee/multi-language-surveys/components/edit-language.tsx
index ccc534a5ed..bf63abe885 100644
--- a/apps/web/modules/ee/multi-language-surveys/components/edit-language.tsx
+++ b/apps/web/modules/ee/multi-language-surveys/components/edit-language.tsx
@@ -228,7 +228,7 @@ export function EditLanguage({
                 ))}
               </>
             ) : (
-              <p className="text-sm text-slate-500 italic">
+              <p className="text-sm italic text-slate-500">
                 {t("environments.project.languages.no_language_found")}
               </p>
             )}
diff --git a/apps/web/modules/ee/multi-language-surveys/components/language-indicator.tsx b/apps/web/modules/ee/multi-language-surveys/components/language-indicator.tsx
index 5356f19491..deae75c371 100644
--- a/apps/web/modules/ee/multi-language-surveys/components/language-indicator.tsx
+++ b/apps/web/modules/ee/multi-language-surveys/components/language-indicator.tsx
@@ -44,7 +44,7 @@ export function LanguageIndicator({
   });
 
   return (
-    <div className="absolute top-2 right-2">
+    <div className="absolute right-2 top-2">
       <button
         aria-expanded={showLanguageDropdown}
         aria-haspopup="true"
diff --git a/apps/web/modules/ee/multi-language-surveys/components/language-select.tsx b/apps/web/modules/ee/multi-language-surveys/components/language-select.tsx
index 1b70300d7b..2229af8a11 100644
--- a/apps/web/modules/ee/multi-language-surveys/components/language-select.tsx
+++ b/apps/web/modules/ee/multi-language-surveys/components/language-select.tsx
@@ -65,7 +65,7 @@ export function LanguageSelect({ language, onLanguageChange, disabled, locale }:
         <ChevronDown className="h-4 w-4" />
       </Button>
       <div
-        className={`ring-opacity-5 absolute right-0 z-30 mt-2 space-y-1 rounded-md bg-white p-1 shadow-lg ring-1 ring-black ${isOpen ? "" : "hidden"}`}>
+        className={`absolute right-0 z-30 mt-2 space-y-1 rounded-md bg-white p-1 shadow-lg ring-1 ring-black ring-opacity-5 ${isOpen ? "" : "hidden"}`}>
         <Input
           autoComplete="off"
           onChange={(e) => {
diff --git a/apps/web/modules/ee/multi-language-surveys/components/multi-language-card.tsx b/apps/web/modules/ee/multi-language-surveys/components/multi-language-card.tsx
index 113f3e5d39..45538c853d 100644
--- a/apps/web/modules/ee/multi-language-surveys/components/multi-language-card.tsx
+++ b/apps/web/modules/ee/multi-language-surveys/components/multi-language-card.tsx
@@ -186,7 +186,7 @@ export const MultiLanguageCard: FC<MultiLanguageCardProps> = ({
       <div
         className={cn(
           open ? "bg-slate-50" : "bg-white group-hover:bg-slate-50",
-          "flex w-10 items-center justify-center rounded-l-lg border-t border-b border-l group-aria-expanded:rounded-bl-none"
+          "flex w-10 items-center justify-center rounded-l-lg border-b border-l border-t group-aria-expanded:rounded-bl-none"
         )}>
         <p>
           <Languages className="h-6 w-6 rounded-full bg-indigo-500 p-1 text-white" />
@@ -248,7 +248,7 @@ export const MultiLanguageCard: FC<MultiLanguageCardProps> = ({
             ) : (
               <>
                 {projectLanguages.length <= 1 && (
-                  <div className="mb-4 text-sm text-slate-500 italic">
+                  <div className="mb-4 text-sm italic text-slate-500">
                     {projectLanguages.length === 0
                       ? t("environments.surveys.edit.no_languages_found_add_first_one_to_get_started")
                       : t(
@@ -260,7 +260,7 @@ export const MultiLanguageCard: FC<MultiLanguageCardProps> = ({
                   <div className="my-4 space-y-4">
                     <div>
                       {isMultiLanguageAllowed && !isMultiLanguageActivated ? (
-                        <div className="text-sm text-slate-500 italic">
+                        <div className="text-sm italic text-slate-500">
                           {t("environments.surveys.edit.switch_multi_lanugage_on_to_get_started")}
                         </div>
                       ) : null}
diff --git a/apps/web/modules/ee/whitelabel/email-customization/components/email-customization-settings.tsx b/apps/web/modules/ee/whitelabel/email-customization/components/email-customization-settings.tsx
index 2de060fbf3..ff68bee140 100644
--- a/apps/web/modules/ee/whitelabel/email-customization/components/email-customization-settings.tsx
+++ b/apps/web/modules/ee/whitelabel/email-customization/components/email-customization-settings.tsx
@@ -193,7 +193,7 @@ export const EmailCustomizationSettings = ({
             <div className="mb-10">
               <Small>{t("environments.settings.general.logo_in_email_header")}</Small>
 
-              <div className="mt-2 mb-6 flex items-center gap-4">
+              <div className="mb-6 mt-2 flex items-center gap-4">
                 {logoUrl && (
                   <div className="flex flex-col gap-2">
                     <div className="flex w-max items-center justify-center rounded-lg border border-slate-200 px-4 py-2">
@@ -256,7 +256,7 @@ export const EmailCustomizationSettings = ({
                 </Button>
               </div>
             </div>
-            <div className="shadow-card-xl min-h-52 w-[446px] rounded-t-lg border border-slate-100 px-10 pt-10 pb-4">
+            <div className="shadow-card-xl min-h-52 w-[446px] rounded-t-lg border border-slate-100 px-10 pb-4 pt-10">
               <Image
                 data-testid="email-customization-preview-image"
                 src={logoUrl || fbLogoUrl}
@@ -284,7 +284,7 @@ export const EmailCustomizationSettings = ({
         )}
 
         {hasWhiteLabelPermission && isReadOnly && (
-          <Alert variant="warning" className="mt-4 mb-6">
+          <Alert variant="warning" className="mb-6 mt-4">
             <AlertDescription>
               {t("common.only_owners_managers_and_manage_access_members_can_perform_this_action")}
             </AlertDescription>
diff --git a/apps/web/modules/email/components/email-question-header.tsx b/apps/web/modules/email/components/email-question-header.tsx
index 9bd4d98ed1..3dfeb57d33 100644
--- a/apps/web/modules/email/components/email-question-header.tsx
+++ b/apps/web/modules/email/components/email-question-header.tsx
@@ -10,11 +10,11 @@ interface QuestionHeaderProps {
 export function QuestionHeader({ headline, subheader, className }: QuestionHeaderProps): React.JSX.Element {
   return (
     <>
-      <Text className={cn("text-question-color m-0 block text-base leading-6 font-semibold", className)}>
+      <Text className={cn("text-question-color m-0 block text-base font-semibold leading-6", className)}>
         {headline}
       </Text>
       {subheader && (
-        <Text className="text-question-color m-0 block p-0 text-sm leading-6 font-normal">{subheader}</Text>
+        <Text className="text-question-color m-0 block p-0 text-sm font-normal leading-6">{subheader}</Text>
       )}
     </>
   );
diff --git a/apps/web/modules/email/components/preview-email-template.tsx b/apps/web/modules/email/components/preview-email-template.tsx
index 8008f29287..47179f338a 100644
--- a/apps/web/modules/email/components/preview-email-template.tsx
+++ b/apps/web/modules/email/components/preview-email-template.tsx
@@ -72,8 +72,8 @@ export async function PreviewEmailTemplate({
     case TSurveyQuestionTypeEnum.Consent:
       return (
         <EmailTemplateWrapper styling={styling} surveyUrl={url}>
-          <Text className="text-question-color m-0 block text-base leading-6 font-semibold">{headline}</Text>
-          <Container className="text-question-color m-0 text-sm leading-6 font-normal">
+          <Text className="text-question-color m-0 block text-base font-semibold leading-6">{headline}</Text>
+          <Container className="text-question-color m-0 text-sm font-normal leading-6">
             <div
               className="m-0 p-0"
               dangerouslySetInnerHTML={{
@@ -131,7 +131,7 @@ export async function PreviewEmailTemplate({
                         )}>
                         {firstQuestion.isColorCodingEnabled ? (
                           <Section
-                            className={`absolute top-0 left-0 h-[6px] w-full ${getNPSOptionColor(i)}`}
+                            className={`absolute left-0 top-0 h-[6px] w-full ${getNPSOptionColor(i)}`}
                           />
                         ) : null}
                         {i}
@@ -162,8 +162,8 @@ export async function PreviewEmailTemplate({
     case TSurveyQuestionTypeEnum.CTA:
       return (
         <EmailTemplateWrapper styling={styling} surveyUrl={url}>
-          <Text className="text-question-color m-0 block text-base leading-6 font-semibold">{headline}</Text>
-          <Container className="text-question-color mt-2 ml-0 text-sm leading-6 font-normal">
+          <Text className="text-question-color m-0 block text-base font-semibold leading-6">{headline}</Text>
+          <Container className="text-question-color ml-0 mt-2 text-sm font-normal leading-6">
             <div
               className="m-0 p-0"
               dangerouslySetInnerHTML={{
@@ -227,7 +227,7 @@ export async function PreviewEmailTemplate({
                           <>
                             {firstQuestion.isColorCodingEnabled ? (
                               <Section
-                                className={`absolute top-0 left-0 h-[6px] w-full ${getRatingNumberOptionColor(firstQuestion.range, i + 1)}`}
+                                className={`absolute left-0 top-0 h-[6px] w-full ${getRatingNumberOptionColor(firstQuestion.range, i + 1)}`}
                               />
                             ) : null}
                             <Text className="m-0 flex h-10 items-center">{i + 1}</Text>
@@ -315,13 +315,13 @@ export async function PreviewEmailTemplate({
             {firstQuestion.choices.map((choice) =>
               firstQuestion.allowMulti ? (
                 <Img
-                  className="rounded-custom mr-1 mb-1 inline-block h-[140px] w-[220px]"
+                  className="rounded-custom mb-1 mr-1 inline-block h-[140px] w-[220px]"
                   key={choice.id}
                   src={choice.imageUrl}
                 />
               ) : (
                 <Link
-                  className="rounded-custom mr-1 mb-1 inline-block h-[140px] w-[220px]"
+                  className="rounded-custom mb-1 mr-1 inline-block h-[140px] w-[220px]"
                   href={`${urlWithPrefilling}${firstQuestion.id}=${choice.id}`}
                   key={choice.id}
                   target="_blank">
@@ -369,11 +369,11 @@ export async function PreviewEmailTemplate({
           <Container className="mx-0">
             <Section className="w-full table-auto">
               <Row>
-                <Column className="w-40 px-4 py-2 break-words" />
+                <Column className="w-40 break-words px-4 py-2" />
                 {firstQuestion.columns.map((column) => {
                   return (
                     <Column
-                      className="text-question-color max-w-40 px-4 py-2 text-center break-words"
+                      className="text-question-color max-w-40 break-words px-4 py-2 text-center"
                       key={getLocalizedValue(column, "default")}>
                       {getLocalizedValue(column, "default")}
                     </Column>
@@ -385,7 +385,7 @@ export async function PreviewEmailTemplate({
                   <Row
                     className={`${rowIndex % 2 === 0 ? "bg-input-color" : ""} rounded-custom`}
                     key={getLocalizedValue(row, "default")}>
-                    <Column className="w-40 px-4 py-2 break-words">
+                    <Column className="w-40 break-words px-4 py-2">
                       {getLocalizedValue(row, "default")}
                     </Column>
                     {firstQuestion.columns.map((_) => {
diff --git a/apps/web/modules/email/emails/lib/utils.tsx b/apps/web/modules/email/emails/lib/utils.tsx
index d33bbd8510..a62b0603dc 100644
--- a/apps/web/modules/email/emails/lib/utils.tsx
+++ b/apps/web/modules/email/emails/lib/utils.tsx
@@ -15,7 +15,7 @@ export const renderEmailResponseValue = async (
       return (
         <Container>
           {overrideFileUploadResponse ? (
-            <Text className="mt-0 font-bold break-words whitespace-pre-wrap italic">
+            <Text className="mt-0 whitespace-pre-wrap break-words font-bold italic">
               {t("emails.render_email_response_value_file_upload_response_link_not_included")}
             </Text>
           ) : (
@@ -66,6 +66,6 @@ export const renderEmailResponseValue = async (
       );
 
     default:
-      return <Text className="mt-0 font-bold break-words whitespace-pre-wrap">{response}</Text>;
+      return <Text className="mt-0 whitespace-pre-wrap break-words font-bold">{response}</Text>;
   }
 };
diff --git a/apps/web/modules/email/emails/survey/response-finished-email.tsx b/apps/web/modules/email/emails/survey/response-finished-email.tsx
index d7d5d072a7..9a7dea48ff 100644
--- a/apps/web/modules/email/emails/survey/response-finished-email.tsx
+++ b/apps/web/modules/email/emails/survey/response-finished-email.tsx
@@ -66,7 +66,7 @@ export async function ResponseFinishedEmail({
                         )}
                         {variable.name}
                       </Text>
-                      <Text className="mt-0 font-bold break-words whitespace-pre-wrap">
+                      <Text className="mt-0 whitespace-pre-wrap break-words font-bold">
                         {variableResponse}
                       </Text>
                     </Column>
@@ -84,7 +84,7 @@ export async function ResponseFinishedEmail({
                       <Text className="mb-2 flex items-center gap-2 font-medium">
                         {hiddenFieldId} <EyeOffIcon />
                       </Text>
-                      <Text className="mt-0 font-bold break-words whitespace-pre-wrap">
+                      <Text className="mt-0 whitespace-pre-wrap break-words font-bold">
                         {hiddenFieldResponse}
                       </Text>
                     </Column>
diff --git a/apps/web/modules/integrations/webhooks/components/webhook-row-data.tsx b/apps/web/modules/integrations/webhooks/components/webhook-row-data.tsx
index 8357886822..df4a2ed992 100644
--- a/apps/web/modules/integrations/webhooks/components/webhook-row-data.tsx
+++ b/apps/web/modules/integrations/webhooks/components/webhook-row-data.tsx
@@ -90,7 +90,7 @@ export const WebhookRowData = ({
       <div className="col-span-2 my-auto text-center text-sm text-slate-800">
         {renderSelectedTriggersText(webhook, t)}
       </div>
-      <div className="col-span-2 my-auto text-center text-sm whitespace-nowrap text-slate-500">
+      <div className="col-span-2 my-auto whitespace-nowrap text-center text-sm text-slate-500">
         {timeSince(webhook.createdAt.toString(), locale)}
       </div>
       <div className="text-center"></div>
diff --git a/apps/web/modules/organization/settings/api-keys/components/edit-api-keys.tsx b/apps/web/modules/organization/settings/api-keys/components/edit-api-keys.tsx
index a0fad2a1bb..a99d60cb00 100644
--- a/apps/web/modules/organization/settings/api-keys/components/edit-api-keys.tsx
+++ b/apps/web/modules/organization/settings/api-keys/components/edit-api-keys.tsx
@@ -162,7 +162,7 @@ export const EditAPIKeys = ({ organizationId, apiKeys, locale, isReadOnly, proje
         </div>
         <div className="grid-cols-9">
           {apiKeysLocal?.length === 0 ? (
-            <div className="flex h-12 items-center justify-center px-6 text-sm font-medium whitespace-nowrap text-slate-400">
+            <div className="flex h-12 items-center justify-center whitespace-nowrap px-6 text-sm font-medium text-slate-400">
               {t("environments.project.api_keys.no_api_keys_yet")}
             </div>
           ) : (
diff --git a/apps/web/modules/organization/settings/api-keys/loading.tsx b/apps/web/modules/organization/settings/api-keys/loading.tsx
index 0aae3168e7..a273426e37 100644
--- a/apps/web/modules/organization/settings/api-keys/loading.tsx
+++ b/apps/web/modules/organization/settings/api-keys/loading.tsx
@@ -10,7 +10,7 @@ const LoadingCard = () => {
   return (
     <div className="w-full max-w-4xl rounded-xl border border-slate-200 bg-white py-4 shadow-sm">
       <div className="grid content-center border-b border-slate-200 px-4 pb-4 text-left text-slate-900">
-        <h3 className="h-6 w-full max-w-56 animate-pulse rounded-lg bg-slate-100 text-lg leading-6 font-medium">
+        <h3 className="h-6 w-full max-w-56 animate-pulse rounded-lg bg-slate-100 text-lg font-medium leading-6">
           <span className="sr-only">{t("common.loading")}</span>
         </h3>
         <p className="mt-3 h-4 w-full max-w-80 animate-pulse rounded-lg bg-slate-100 text-sm text-slate-500">
diff --git a/apps/web/modules/organization/settings/teams/components/invite-member/invite-member-modal.tsx b/apps/web/modules/organization/settings/teams/components/invite-member/invite-member-modal.tsx
index f8abba9815..f766261446 100644
--- a/apps/web/modules/organization/settings/teams/components/invite-member/invite-member-modal.tsx
+++ b/apps/web/modules/organization/settings/teams/components/invite-member/invite-member-modal.tsx
@@ -71,7 +71,7 @@ export const InviteMemberModal = ({
       <div className="sticky top-0 flex h-full flex-col rounded-lg">
         <button
           className={cn(
-            "absolute top-0 right-0 hidden pt-4 pr-4 text-slate-400 hover:text-slate-500 focus:ring-0 focus:outline-none sm:block"
+            "absolute right-0 top-0 hidden pr-4 pt-4 text-slate-400 hover:text-slate-500 focus:outline-none focus:ring-0 sm:block"
           )}
           onClick={() => {
             setOpen(false);
diff --git a/apps/web/modules/projects/settings/look/loading.tsx b/apps/web/modules/projects/settings/look/loading.tsx
index 16cb57fc86..503ca66048 100644
--- a/apps/web/modules/projects/settings/look/loading.tsx
+++ b/apps/web/modules/projects/settings/look/loading.tsx
@@ -149,7 +149,7 @@ export const ProjectLookSettingsLoading = () => {
               <div className={cn("absolute bottom-3 h-16 w-16 rounded bg-slate-700 sm:right-3")}></div>
             </div>
           </div>
-          <Button className="pointer-events-none mt-4 animate-pulse cursor-not-allowed bg-slate-200 select-none">
+          <Button className="pointer-events-none mt-4 animate-pulse cursor-not-allowed select-none bg-slate-200">
             {t("common.loading")}
           </Button>
         </div>
@@ -159,7 +159,7 @@ export const ProjectLookSettingsLoading = () => {
         title="Formbricks Signature"
         description="We love your support but understand if you toggle it off.">
         <div className="w-full items-center">
-          <div className="pointer-events-none flex cursor-not-allowed items-center space-x-2 select-none">
+          <div className="pointer-events-none flex cursor-not-allowed select-none items-center space-x-2">
             <Switch id="signature" checked={false} />
             <Label htmlFor="signature">{t("environments.project.look.show_powered_by_formbricks")}</Label>
           </div>
diff --git a/apps/web/modules/projects/settings/tags/components/single-tag.tsx b/apps/web/modules/projects/settings/tags/components/single-tag.tsx
index 818064ffbe..02a6f00ccc 100644
--- a/apps/web/modules/projects/settings/tags/components/single-tag.tsx
+++ b/apps/web/modules/projects/settings/tags/components/single-tag.tsx
@@ -99,12 +99,12 @@ export const SingleTag: React.FC<SingleTagProps> = ({
           </div>
         </div>
 
-        <div className="col-span-1 my-auto text-center text-sm whitespace-nowrap text-slate-500">
+        <div className="col-span-1 my-auto whitespace-nowrap text-center text-sm text-slate-500">
           <div className="text-slate-900">{tagCountLoading ? <LoadingSpinner /> : <p>{tagCount}</p>}</div>
         </div>
 
         {!isReadOnly && (
-          <div className="col-span-1 my-auto flex items-center justify-center gap-2 text-center text-sm whitespace-nowrap text-slate-500">
+          <div className="col-span-1 my-auto flex items-center justify-center gap-2 whitespace-nowrap text-center text-sm text-slate-500">
             <div>
               {isMergingTags ? (
                 <div className="w-24">
@@ -139,7 +139,7 @@ export const SingleTag: React.FC<SingleTagProps> = ({
               <Button
                 variant="destructive"
                 size="sm"
-                className="font-medium text-slate-50 focus:border-transparent focus:ring-0 focus:shadow-transparent focus:ring-transparent focus:outline-transparent"
+                className="font-medium text-slate-50 focus:border-transparent focus:shadow-transparent focus:outline-transparent focus:ring-0 focus:ring-transparent"
                 onClick={() => setOpenDeleteTagDialog(true)}>
                 {t("common.delete")}
               </Button>
diff --git a/apps/web/modules/survey/components/question-form-input/components/recall-item-select.tsx b/apps/web/modules/survey/components/question-form-input/components/recall-item-select.tsx
index 95e791a278..4e33171b65 100644
--- a/apps/web/modules/survey/components/question-form-input/components/recall-item-select.tsx
+++ b/apps/web/modules/survey/components/question-form-input/components/recall-item-select.tsx
@@ -179,7 +179,7 @@ export const RecallItemSelect = ({
               }
             }}
           />
-          <div className="max-h-72 overflow-x-hidden overflow-y-auto">
+          <div className="max-h-72 overflow-y-auto overflow-x-hidden">
             {filteredRecallItems.map((recallItem, index) => {
               const IconComponent = getRecallItemIcon(recallItem);
               return (
@@ -201,7 +201,7 @@ export const RecallItemSelect = ({
                     }
                   }}>
                   <div>{IconComponent && <IconComponent className="mr-2 w-4" />}</div>
-                  <p className="max-w-full overflow-hidden text-sm text-ellipsis whitespace-nowrap">
+                  <p className="max-w-full overflow-hidden text-ellipsis whitespace-nowrap text-sm">
                     {getRecallLabel(recallItem.label)}
                   </p>
                 </DropdownMenuItem>
diff --git a/apps/web/modules/survey/components/question-form-input/components/recall-wrapper.tsx b/apps/web/modules/survey/components/question-form-input/components/recall-wrapper.tsx
index d07afc5295..cd726709bd 100644
--- a/apps/web/modules/survey/components/question-form-input/components/recall-wrapper.tsx
+++ b/apps/web/modules/survey/components/question-form-input/components/recall-wrapper.tsx
@@ -220,7 +220,7 @@ export const RecallWrapper = ({
           }
           parts.push(
             <span
-              className="z-30 flex h-fit cursor-pointer justify-center rounded-md bg-slate-100 text-sm whitespace-pre text-transparent"
+              className="z-30 flex h-fit cursor-pointer justify-center whitespace-pre rounded-md bg-slate-100 text-sm text-transparent"
               key={`recall-${parts.length}`}>
               {"@" + label}
             </span>
@@ -255,7 +255,7 @@ export const RecallWrapper = ({
               <Button
                 variant="ghost"
                 type="button"
-                className="absolute top-full right-2 z-[1] flex h-6 cursor-pointer items-center rounded-t-none rounded-b-lg bg-slate-100 px-2.5 py-0 text-xs hover:bg-slate-200"
+                className="absolute right-2 top-full z-[1] flex h-6 cursor-pointer items-center rounded-b-lg rounded-t-none bg-slate-100 px-2.5 py-0 text-xs hover:bg-slate-200"
                 onClick={(e) => {
                   e.preventDefault();
                   setShowFallbackInput(true);
diff --git a/apps/web/modules/survey/components/question-form-input/index.tsx b/apps/web/modules/survey/components/question-form-input/index.tsx
index 1b793ac5de..a04920df1f 100644
--- a/apps/web/modules/survey/components/question-form-input/index.tsx
+++ b/apps/web/modules/survey/components/question-form-input/index.tsx
@@ -271,7 +271,7 @@ export const QuestionFormInput = ({
   return (
     <div className="w-full">
       {label && (
-        <div className="mt-3 mb-2">
+        <div className="mb-2 mt-3">
           <Label htmlFor={id}>{label}</Label>
         </div>
       )}
@@ -342,7 +342,7 @@ export const QuestionFormInput = ({
                         <div className="h-10 w-full"></div>
                         <div
                           ref={highlightContainerRef}
-                          className={`no-scrollbar absolute top-0 z-0 mt-0.5 flex h-10 w-full overflow-scroll px-3 py-2 text-center text-sm whitespace-nowrap text-transparent ${
+                          className={`no-scrollbar absolute top-0 z-0 mt-0.5 flex h-10 w-full overflow-scroll whitespace-nowrap px-3 py-2 text-center text-sm text-transparent ${
                             localSurvey.languages?.length > 1 ? "pr-24" : ""
                           }`}
                           dir="auto"
diff --git a/apps/web/modules/survey/components/template-list/components/start-from-scratch-template.tsx b/apps/web/modules/survey/components/template-list/components/start-from-scratch-template.tsx
index bb69772c57..2a03706492 100644
--- a/apps/web/modules/survey/components/template-list/components/start-from-scratch-template.tsx
+++ b/apps/web/modules/survey/components/template-list/components/start-from-scratch-template.tsx
@@ -45,10 +45,10 @@ export const StartFromScratchTemplate = ({
         activeTemplate?.name === customSurvey.name
           ? "ring-brand-dark border-transparent ring-2"
           : "hover:border-brand-dark border-dashed border-slate-300",
-        "group relative rounded-lg border-2 bg-transparent p-6 transition-colors duration-120 duration-150"
+        "duration-120 group relative rounded-lg border-2 bg-transparent p-6 transition-colors duration-150"
       )}>
       <PlusCircleIcon className="text-brand-dark h-8 w-8 transition-all duration-150 group-hover:scale-110" />
-      <h3 className="text-md mt-3 mb-1 text-left font-bold text-slate-700">{customSurvey.name}</h3>
+      <h3 className="text-md mb-1 mt-3 text-left font-bold text-slate-700">{customSurvey.name}</h3>
       <p className="text-left text-xs text-slate-600">{customSurvey.description}</p>
       {activeTemplate?.name === customSurvey.name && (
         <div className="text-left">
diff --git a/apps/web/modules/survey/components/template-list/components/template-filters.tsx b/apps/web/modules/survey/components/template-list/components/template-filters.tsx
index a3a66004ea..8fdb880744 100644
--- a/apps/web/modules/survey/components/template-list/components/template-filters.tsx
+++ b/apps/web/modules/survey/components/template-list/components/template-filters.tsx
@@ -41,7 +41,7 @@ export const TemplateFilters = ({
               className={cn(
                 selectedFilter[index] === null
                   ? "bg-slate-800 font-semibold text-white"
-                  : "bg-white text-slate-700 hover:bg-slate-100 focus:scale-105 focus:bg-slate-100 focus:ring-0 focus:outline-none",
+                  : "bg-white text-slate-700 hover:bg-slate-100 focus:scale-105 focus:bg-slate-100 focus:outline-none focus:ring-0",
                 "rounded border border-slate-800 px-2 py-1 text-xs transition-all duration-150"
               )}>
               {index === 0
@@ -59,7 +59,7 @@ export const TemplateFilters = ({
                 className={cn(
                   selectedFilter[index] === filter.value
                     ? "bg-slate-800 font-semibold text-white"
-                    : "bg-white text-slate-700 hover:bg-slate-100 focus:scale-105 focus:bg-slate-100 focus:ring-0 focus:outline-none",
+                    : "bg-white text-slate-700 hover:bg-slate-100 focus:scale-105 focus:bg-slate-100 focus:outline-none focus:ring-0",
                   "rounded border border-slate-800 px-2 py-1 text-xs transition-all duration-150"
                 )}>
                 {t(filter.label)}
diff --git a/apps/web/modules/survey/components/template-list/components/template.tsx b/apps/web/modules/survey/components/template-list/components/template.tsx
index c354ab5a19..09244be749 100644
--- a/apps/web/modules/survey/components/template-list/components/template.tsx
+++ b/apps/web/modules/survey/components/template-list/components/template.tsx
@@ -46,10 +46,10 @@ export const Template = ({
       key={template.name}
       className={cn(
         activeTemplate?.name === template.name && "ring-2 ring-slate-400",
-        "group relative cursor-pointer rounded-lg bg-white p-6 shadow transition-all duration-120 duration-150 hover:ring-2 hover:ring-slate-300"
+        "duration-120 group relative cursor-pointer rounded-lg bg-white p-6 shadow transition-all duration-150 hover:ring-2 hover:ring-slate-300"
       )}>
       <TemplateTags template={template} selectedFilter={selectedFilter} />
-      <h3 className="text-md mt-3 mb-1 text-left font-bold text-slate-700">{template.name}</h3>
+      <h3 className="text-md mb-1 mt-3 text-left font-bold text-slate-700">{template.name}</h3>
       <p className="text-left text-xs text-slate-600">{template.description}</p>
       {activeTemplate?.name === template.name && (
         <div className="flex justify-start">
diff --git a/apps/web/modules/survey/components/template-list/index.tsx b/apps/web/modules/survey/components/template-list/index.tsx
index 0d7c99f2cb..4cfcc63c9d 100644
--- a/apps/web/modules/survey/components/template-list/index.tsx
+++ b/apps/web/modules/survey/components/template-list/index.tsx
@@ -105,7 +105,7 @@ export const TemplateList = ({
   };
 
   return (
-    <main className="relative z-0 flex-1 overflow-y-auto px-6 pt-2 pb-6 focus:outline-none">
+    <main className="relative z-0 flex-1 overflow-y-auto px-6 pb-6 pt-2 focus:outline-none">
       {showFilters && !templateSearch && (
         <TemplateFilters
           selectedFilter={selectedFilter}
diff --git a/apps/web/modules/survey/editor/components/add-question-button.tsx b/apps/web/modules/survey/editor/components/add-question-button.tsx
index e8ffb6e00b..83fc8d425a 100644
--- a/apps/web/modules/survey/editor/components/add-question-button.tsx
+++ b/apps/web/modules/survey/editor/components/add-question-button.tsx
@@ -38,7 +38,7 @@ export const AddQuestionButton = ({ addQuestion, project, isCxMode }: AddQuestio
       )}>
       <Collapsible.CollapsibleTrigger asChild className="group h-full w-full">
         <div className="inline-flex">
-          <div className="bg-brand-dark flex w-10 items-center justify-center rounded-l-lg group-aria-expanded:rounded-br group-aria-expanded:rounded-bl-none">
+          <div className="bg-brand-dark flex w-10 items-center justify-center rounded-l-lg group-aria-expanded:rounded-bl-none group-aria-expanded:rounded-br">
             <PlusIcon className="h-5 w-5 text-white" />
           </div>
           <div className="px-4 py-3">
@@ -68,7 +68,7 @@ export const AddQuestionButton = ({ addQuestion, project, isCxMode }: AddQuestio
             onMouseEnter={() => setHoveredQuestionId(questionType.id)}
             onMouseLeave={() => setHoveredQuestionId(null)}>
             <div className="flex items-center">
-              <questionType.icon className="text-brand-dark mr-2 -ml-0.5 h-4 w-4" aria-hidden="true" />
+              <questionType.icon className="text-brand-dark -ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
               {questionType.label}
             </div>
             <div
diff --git a/apps/web/modules/survey/editor/components/edit-ending-card.tsx b/apps/web/modules/survey/editor/components/edit-ending-card.tsx
index 1dd14f1ff5..91f470c101 100644
--- a/apps/web/modules/survey/editor/components/edit-ending-card.tsx
+++ b/apps/web/modules/survey/editor/components/edit-ending-card.tsx
@@ -167,7 +167,7 @@ export const EditEndingCard = ({
         {...attributes}
         className={cn(
           open ? "bg-slate-50" : "",
-          "flex w-10 flex-col items-center justify-between rounded-l-lg border-t border-b border-l py-2 group-aria-expanded:rounded-bl-none",
+          "flex w-10 flex-col items-center justify-between rounded-l-lg border-b border-l border-t py-2 group-aria-expanded:rounded-bl-none",
           isInvalid ? "bg-red-400" : "bg-white group-hover:bg-slate-50"
         )}>
         <div className="mt-3 flex w-full justify-center">
@@ -177,7 +177,7 @@ export const EditEndingCard = ({
             <Undo2 className="h-4 w-4 rotate-180" />
           )}
         </div>
-        <button className="opacity-0 transition-all duration-300 group-hover:opacity-100 hover:cursor-move">
+        <button className="opacity-0 transition-all duration-300 hover:cursor-move group-hover:opacity-100">
           <GripIcon className="h-4 w-4" />
         </button>
       </div>
diff --git a/apps/web/modules/survey/editor/components/end-screen-form.tsx b/apps/web/modules/survey/editor/components/end-screen-form.tsx
index 3491349d8d..7ce0931a64 100644
--- a/apps/web/modules/survey/editor/components/end-screen-form.tsx
+++ b/apps/web/modules/survey/editor/components/end-screen-form.tsx
@@ -123,7 +123,7 @@ export const EndScreenForm = ({
           </Label>
         </div>
         {showEndingCardCTA && (
-          <div className="mt-4 space-y-4 rounded-md border border-1 bg-slate-100 p-4 pt-2">
+          <div className="border-1 mt-4 space-y-4 rounded-md border bg-slate-100 p-4 pt-2">
             <div className="space-y-2">
               <QuestionFormInput
                 id="buttonLabel"
@@ -166,7 +166,7 @@ export const EndScreenForm = ({
                       <div className="group relative">
                         {/* The highlight container is absolutely positioned behind the input */}
                         <div
-                          className={`no-scrollbar absolute top-0 z-0 mt-0.5 flex h-10 w-full overflow-scroll px-3 py-2 text-center text-sm whitespace-nowrap text-transparent`}
+                          className={`no-scrollbar absolute top-0 z-0 mt-0.5 flex h-10 w-full overflow-scroll whitespace-nowrap px-3 py-2 text-center text-sm text-transparent`}
                           dir="auto"
                           key={highlightedJSX.toString()}>
                           {highlightedJSX}
diff --git a/apps/web/modules/survey/editor/components/form-styling-settings.tsx b/apps/web/modules/survey/editor/components/form-styling-settings.tsx
index ece7a80d04..301a211cb0 100644
--- a/apps/web/modules/survey/editor/components/form-styling-settings.tsx
+++ b/apps/web/modules/survey/editor/components/form-styling-settings.tsx
@@ -89,7 +89,7 @@ export const FormStylingSettings = ({
         )}>
         <div className="inline-flex px-4 py-4">
           {!isSettingsPage && (
-            <div className="flex items-center pr-5 pl-2">
+            <div className="flex items-center pl-2 pr-5">
               <CheckIcon
                 strokeWidth={3}
                 className="h-7 w-7 rounded-full border border-green-300 bg-green-100 p-1.5 text-green-600"
diff --git a/apps/web/modules/survey/editor/components/hidden-fields-card.tsx b/apps/web/modules/survey/editor/components/hidden-fields-card.tsx
index e35dc13ebb..019f3f59e0 100644
--- a/apps/web/modules/survey/editor/components/hidden-fields-card.tsx
+++ b/apps/web/modules/survey/editor/components/hidden-fields-card.tsx
@@ -113,7 +113,7 @@ export const HiddenFieldsCard = ({
       <div
         className={cn(
           open ? "bg-slate-50" : "bg-white group-hover:bg-slate-50",
-          "flex w-10 items-center justify-center rounded-l-lg border-t border-b border-l group-aria-expanded:rounded-bl-none"
+          "flex w-10 items-center justify-center rounded-l-lg border-b border-l border-t group-aria-expanded:rounded-bl-none"
         )}>
         <EyeOff className="h-4 w-4" />
       </div>
@@ -161,7 +161,7 @@ export const HiddenFieldsCard = ({
                 );
               })
             ) : (
-              <p className="mt-2 text-sm text-slate-500 italic">
+              <p className="mt-2 text-sm italic text-slate-500">
                 {t("environments.surveys.edit.no_hidden_fields_yet_add_first_one_below")}
               </p>
             )}
diff --git a/apps/web/modules/survey/editor/components/how-to-send-card.tsx b/apps/web/modules/survey/editor/components/how-to-send-card.tsx
index a4ba500ad1..d2bb384639 100644
--- a/apps/web/modules/survey/editor/components/how-to-send-card.tsx
+++ b/apps/web/modules/survey/editor/components/how-to-send-card.tsx
@@ -106,7 +106,7 @@ export const HowToSendCard = ({ localSurvey, setLocalSurvey, environment }: HowT
         className="h-full w-full cursor-pointer"
         id="howToSendCardTrigger">
         <div className="inline-flex px-4 py-4">
-          <div className="flex items-center pr-5 pl-2">
+          <div className="flex items-center pl-2 pr-5">
             <CheckIcon
               strokeWidth={3}
               className="h-7 w-7 rounded-full border border-green-300 bg-green-100 p-1.5 text-green-600"
diff --git a/apps/web/modules/survey/editor/components/recontact-options-card.tsx b/apps/web/modules/survey/editor/components/recontact-options-card.tsx
index d07a8c7f9c..6c87680c6c 100644
--- a/apps/web/modules/survey/editor/components/recontact-options-card.tsx
+++ b/apps/web/modules/survey/editor/components/recontact-options-card.tsx
@@ -121,7 +121,7 @@ export const RecontactOptionsCard = ({
         className="h-full w-full cursor-pointer rounded-lg hover:bg-slate-50"
         id="recontactOptionsCardTrigger">
         <div className="inline-flex px-4 py-4">
-          <div className="flex items-center pr-5 pl-2">
+          <div className="flex items-center pl-2 pr-5">
             <CheckIcon
               strokeWidth={3}
               className="h-7 w-7 rounded-full border border-green-300 bg-green-100 p-1.5 text-green-600"
@@ -256,7 +256,7 @@ export const RecontactOptionsCard = ({
                       id="inputDays"
                       value={inputDays === 0 ? 1 : inputDays}
                       onChange={handleRecontactDaysChange}
-                      className="mr-2 ml-2 inline w-16 bg-white text-center text-sm"
+                      className="ml-2 mr-2 inline w-16 bg-white text-center text-sm"
                     />
                     {t("environments.surveys.edit.days_before_showing_this_survey_again")}.
                   </p>
diff --git a/apps/web/modules/survey/editor/components/redirect-url-form.tsx b/apps/web/modules/survey/editor/components/redirect-url-form.tsx
index 97fe59162d..6262f2384b 100644
--- a/apps/web/modules/survey/editor/components/redirect-url-form.tsx
+++ b/apps/web/modules/survey/editor/components/redirect-url-form.tsx
@@ -45,7 +45,7 @@ export const RedirectUrlForm = ({ localSurvey, endingCard, updateSurvey }: Redir
               <div className="group relative">
                 {/* The highlight container is absolutely positioned behind the input */}
                 <div
-                  className={`no-scrollbar absolute top-0 z-0 mt-0.5 flex h-10 w-full overflow-scroll px-3 py-2 text-center text-sm whitespace-nowrap text-transparent`}
+                  className={`no-scrollbar absolute top-0 z-0 mt-0.5 flex h-10 w-full overflow-scroll whitespace-nowrap px-3 py-2 text-center text-sm text-transparent`}
                   dir="auto"
                   key={highlightedJSX.toString()}>
                   {highlightedJSX}
diff --git a/apps/web/modules/survey/editor/components/saved-actions-tab.tsx b/apps/web/modules/survey/editor/components/saved-actions-tab.tsx
index 367511a788..f36c1a86f6 100644
--- a/apps/web/modules/survey/editor/components/saved-actions-tab.tsx
+++ b/apps/web/modules/survey/editor/components/saved-actions-tab.tsx
@@ -64,7 +64,7 @@ export const SavedActionsTab = ({
           (actions, i) =>
             actions.length > 0 && (
               <div key={i} className="me-4">
-                <h2 className="mt-4 mb-2 font-semibold">
+                <h2 className="mb-2 mt-4 font-semibold">
                   {i === 0 ? t("common.no_code") : t("common.code")}
                 </h2>
                 <div className="flex flex-col gap-2">
diff --git a/apps/web/modules/survey/editor/components/survey-menu-bar.tsx b/apps/web/modules/survey/editor/components/survey-menu-bar.tsx
index a119bc9b8a..15a035048f 100644
--- a/apps/web/modules/survey/editor/components/survey-menu-bar.tsx
+++ b/apps/web/modules/survey/editor/components/survey-menu-bar.tsx
@@ -329,7 +329,7 @@ export const SurveyMenuBar = ({
         />
       </div>
 
-      <div className="mt-3 flex items-center gap-2 sm:mt-0 sm:ml-4">
+      <div className="mt-3 flex items-center gap-2 sm:ml-4 sm:mt-0">
         {responseCount > 0 && (
           <div>
             <Alert variant="warning" size="small">
diff --git a/apps/web/modules/survey/editor/components/targeting-locked-card.tsx b/apps/web/modules/survey/editor/components/targeting-locked-card.tsx
index 0f94e8503a..ea94c86f16 100644
--- a/apps/web/modules/survey/editor/components/targeting-locked-card.tsx
+++ b/apps/web/modules/survey/editor/components/targeting-locked-card.tsx
@@ -24,7 +24,7 @@ export const TargetingLockedCard = ({ isFormbricksCloud, environmentId }: Target
         asChild
         className="h-full w-full cursor-pointer rounded-lg hover:bg-slate-50">
         <div className="inline-flex px-4 py-6">
-          <div className="flex items-center pr-5 pl-2">
+          <div className="flex items-center pl-2 pr-5">
             <div className="rounded-full border border-slate-300 bg-slate-100 p-1">
               <LockIcon className="h-4 w-4 text-slate-500" strokeWidth={3} />
             </div>
diff --git a/apps/web/modules/survey/editor/components/unsplash-images.tsx b/apps/web/modules/survey/editor/components/unsplash-images.tsx
index 73fc336e6c..e7a76c22b9 100644
--- a/apps/web/modules/survey/editor/components/unsplash-images.tsx
+++ b/apps/web/modules/survey/editor/components/unsplash-images.tsx
@@ -192,7 +192,7 @@ export const ImageFromUnsplashSurveyBg = ({ handleBgChange }: ImageFromUnsplashS
   return (
     <div className="relative mt-2 w-full">
       <div className="relative">
-        <SearchIcon className="absolute top-1/2 left-2 h-6 w-4 -translate-y-1/2 text-slate-500" />
+        <SearchIcon className="absolute left-2 top-1/2 h-6 w-4 -translate-y-1/2 text-slate-500" />
         <Input
           value={query}
           onChange={handleChange}
@@ -215,7 +215,7 @@ export const ImageFromUnsplashSurveyBg = ({ handleBgChange }: ImageFromUnsplashS
                 className="h-full cursor-pointer rounded-lg object-cover"
               />
               {image.authorName && (
-                <span className="bg-opacity-75 absolute right-1 bottom-1 hidden rounded bg-black px-2 py-1 text-xs text-white group-hover:block">
+                <span className="absolute bottom-1 right-1 hidden rounded bg-black bg-opacity-75 px-2 py-1 text-xs text-white group-hover:block">
                   {image.authorName}
                 </span>
               )}
diff --git a/apps/web/modules/survey/editor/components/when-to-send-card.tsx b/apps/web/modules/survey/editor/components/when-to-send-card.tsx
index 50408e60fe..d06bafa12b 100644
--- a/apps/web/modules/survey/editor/components/when-to-send-card.tsx
+++ b/apps/web/modules/survey/editor/components/when-to-send-card.tsx
@@ -155,7 +155,7 @@ export const WhenToSendCard = ({
           className="h-full w-full cursor-pointer rounded-lg hover:bg-slate-50"
           id="whenToSendCardTrigger">
           <div className="inline-flex px-4 py-4">
-            <div className="flex items-center pr-5 pl-2">
+            <div className="flex items-center pl-2 pr-5">
               {containsEmptyTriggers ? (
                 <div className="h-7 w-7 rounded-full border border-amber-500 bg-amber-50" />
               ) : (
@@ -178,7 +178,7 @@ export const WhenToSendCard = ({
         <Collapsible.CollapsibleContent className="flex flex-col" ref={parent}>
           <hr className="py-1 text-slate-600" />
 
-          <div className="px-3 pt-1 pb-3">
+          <div className="px-3 pb-3 pt-1">
             <div className="filter-scrollbar flex flex-col gap-4 overflow-auto rounded-lg border border-slate-300 bg-slate-50 p-4">
               <p className="text-sm font-semibold text-slate-800">
                 {t("environments.surveys.edit.trigger_survey_when_one_of_the_actions_is_fired")}
@@ -265,7 +265,7 @@ export const WhenToSendCard = ({
             </div>
 
             {/* Survey Display Settings */}
-            <div className="mt-8 mb-4 space-y-1 px-4">
+            <div className="mb-4 mt-8 space-y-1 px-4">
               <h3 className="font-semibold text-slate-800">
                 {t("environments.surveys.edit.survey_display_settings")}
               </h3>
@@ -294,7 +294,7 @@ export const WhenToSendCard = ({
                       id="triggerDelay"
                       value={localSurvey.delay.toString()}
                       onChange={(e) => handleTriggerDelay(e)}
-                      className="mr-2 ml-2 inline w-16 bg-white text-center text-sm"
+                      className="ml-2 mr-2 inline w-16 bg-white text-center text-sm"
                     />
                     {t("environments.surveys.edit.seconds_before_showing_the_survey")}
                   </p>
diff --git a/apps/web/modules/survey/follow-ups/components/follow-up-item.tsx b/apps/web/modules/survey/follow-ups/components/follow-up-item.tsx
index c30b1ca4cf..d82982ad36 100644
--- a/apps/web/modules/survey/follow-ups/components/follow-up-item.tsx
+++ b/apps/web/modules/survey/follow-ups/components/follow-up-item.tsx
@@ -146,7 +146,7 @@ export const FollowUpItem = ({
           </div>
         </div>
 
-        <div className="absolute top-4 right-4 flex items-center">
+        <div className="absolute right-4 top-4 flex items-center">
           <TooltipRenderer tooltipContent={t("common.delete")}>
             <Button
               variant="ghost"
diff --git a/apps/web/modules/survey/follow-ups/components/follow-up-modal.tsx b/apps/web/modules/survey/follow-ups/components/follow-up-modal.tsx
index 269f43ae43..0cb9e17472 100644
--- a/apps/web/modules/survey/follow-ups/components/follow-up-modal.tsx
+++ b/apps/web/modules/survey/follow-ups/components/follow-up-modal.tsx
@@ -856,7 +856,7 @@ export const FollowUpModal = ({
             </div>
           </div>
 
-          <div className="absolute right-0 bottom-0 z-20 h-12 w-full bg-white p-2">
+          <div className="absolute bottom-0 right-0 z-20 h-12 w-full bg-white p-2">
             <div className="flex justify-end space-x-2">
               <Button
                 type="button"
diff --git a/apps/web/modules/survey/link/components/link-survey-wrapper.tsx b/apps/web/modules/survey/link/components/link-survey-wrapper.tsx
index 46a0be7744..f4317fbc4b 100644
--- a/apps/web/modules/survey/link/components/link-survey-wrapper.tsx
+++ b/apps/web/modules/survey/link/components/link-survey-wrapper.tsx
@@ -82,7 +82,7 @@ export const LinkSurveyWrapper = ({
             {!styling.isLogoHidden && project.logo?.url && <ClientLogo projectLogo={project.logo} />}
             <div className="h-full w-full max-w-4xl space-y-6 px-1.5">
               {isPreview && (
-                <div className="fixed top-0 left-0 flex w-full items-center justify-between bg-slate-600 p-2 px-4 text-center text-sm text-white shadow-sm">
+                <div className="fixed left-0 top-0 flex w-full items-center justify-between bg-slate-600 p-2 px-4 text-center text-sm text-white shadow-sm">
                   <div />
                   Survey Preview 👀
                   <ResetProgressButton onClick={handleResetSurvey} />
diff --git a/apps/web/modules/survey/link/components/verify-email.tsx b/apps/web/modules/survey/link/components/verify-email.tsx
index 3ada99a769..65cb5d15ae 100644
--- a/apps/web/modules/survey/link/components/verify-email.tsx
+++ b/apps/web/modules/survey/link/components/verify-email.tsx
@@ -170,7 +170,7 @@ export const VerifyEmail = ({
         {!emailSent && showPreviewQuestions && (
           <div>
             <p className="text-2xl font-bold">{t("s.question_preview")}</p>
-            <div className="bg-opacity-20 mt-4 flex w-full flex-col justify-center rounded-lg border border-slate-200 bg-slate-50 p-8 text-slate-700">
+            <div className="mt-4 flex w-full flex-col justify-center rounded-lg border border-slate-200 bg-slate-50 bg-opacity-20 p-8 text-slate-700">
               {localSurvey.questions.map((question, index) => (
                 <p
                   key={index}
diff --git a/apps/web/modules/survey/list/components/copy-survey-form.test.tsx b/apps/web/modules/survey/list/components/copy-survey-form.test.tsx
index 787222ed43..f3a0493259 100644
--- a/apps/web/modules/survey/list/components/copy-survey-form.test.tsx
+++ b/apps/web/modules/survey/list/components/copy-survey-form.test.tsx
@@ -32,7 +32,7 @@ vi.mock("@/modules/ui/components/checkbox", () => ({
       id={id}
       data-testid={id}
       name={props.name}
-      className="focus:ring-opacity-50 mr-2 h-4 w-4 appearance-none border-slate-300 checked:border-transparent checked:bg-slate-500 checked:after:bg-slate-500 checked:hover:bg-slate-500 focus:ring-2 focus:ring-slate-500"
+      className="mr-2 h-4 w-4 appearance-none border-slate-300 checked:border-transparent checked:bg-slate-500 checked:after:bg-slate-500 checked:hover:bg-slate-500 focus:ring-2 focus:ring-slate-500 focus:ring-opacity-50"
       onChange={() => {
         // Call onCheckedChange with true to simulate checkbox selection
         onCheckedChange(true);
diff --git a/apps/web/modules/survey/list/components/survey-card.tsx b/apps/web/modules/survey/list/components/survey-card.tsx
index 2a4b5ee9aa..3087bfe416 100644
--- a/apps/web/modules/survey/list/components/survey-card.tsx
+++ b/apps/web/modules/survey/list/components/survey-card.tsx
@@ -72,7 +72,7 @@ export const SurveyCard = ({
         </div>
         <div
           className={cn(
-            "col-span-1 flex w-fit items-center gap-2 rounded-full py-1 pr-2 pl-1 text-sm whitespace-nowrap text-slate-800",
+            "col-span-1 flex w-fit items-center gap-2 whitespace-nowrap rounded-full py-1 pl-1 pr-2 text-sm text-slate-800",
             surveyStatusLabel === "Scheduled" && "bg-slate-200",
             surveyStatusLabel === "In Progress" && "bg-emerald-50",
             surveyStatusLabel === "Completed" && "bg-slate-200",
@@ -81,23 +81,23 @@ export const SurveyCard = ({
           )}>
           <SurveyStatusIndicator status={survey.status} /> {surveyStatusLabel}{" "}
         </div>
-        <div className="col-span-1 max-w-full overflow-hidden text-sm text-ellipsis whitespace-nowrap text-slate-600">
+        <div className="col-span-1 max-w-full overflow-hidden text-ellipsis whitespace-nowrap text-sm text-slate-600">
           {survey.responseCount}
         </div>
         <div className="col-span-1 flex justify-between">
           <SurveyTypeIndicator type={survey.type} />
         </div>
-        <div className="col-span-1 max-w-full overflow-hidden text-sm text-ellipsis whitespace-nowrap text-slate-600">
+        <div className="col-span-1 max-w-full overflow-hidden text-ellipsis whitespace-nowrap text-sm text-slate-600">
           {convertDateString(survey.createdAt.toString())}
         </div>
-        <div className="col-span-1 max-w-full overflow-hidden text-sm text-ellipsis whitespace-nowrap text-slate-600">
+        <div className="col-span-1 max-w-full overflow-hidden text-ellipsis whitespace-nowrap text-sm text-slate-600">
           {timeSince(survey.updatedAt.toString(), locale)}
         </div>
-        <div className="col-span-1 max-w-full overflow-hidden text-sm text-ellipsis whitespace-nowrap text-slate-600">
+        <div className="col-span-1 max-w-full overflow-hidden text-ellipsis whitespace-nowrap text-sm text-slate-600">
           {survey.creator ? survey.creator.name : "-"}
         </div>
       </div>
-      <div className="absolute top-3.5 right-3">
+      <div className="absolute right-3 top-3.5">
         <SurveyDropDownMenu
           survey={survey}
           key={`surveys-${survey.id}`}
diff --git a/apps/web/modules/survey/templates/components/template-container.tsx b/apps/web/modules/survey/templates/components/template-container.tsx
index d93626b5ac..f442637a5e 100644
--- a/apps/web/modules/survey/templates/components/template-container.tsx
+++ b/apps/web/modules/survey/templates/components/template-container.tsx
@@ -37,7 +37,7 @@ export const TemplateContainerWithPreview = ({
       <MenuBar />
       <div className="relative z-0 flex flex-1 overflow-hidden">
         <div className="flex-1 flex-col overflow-auto bg-slate-50">
-          <div className="mt-6 mb-3 ml-6 flex flex-col items-center justify-between md:flex-row md:items-end">
+          <div className="mb-3 ml-6 mt-6 flex flex-col items-center justify-between md:flex-row md:items-end">
             <h1 className="text-2xl font-bold text-slate-800">
               {t("environments.surveys.templates.create_a_new_survey")}
             </h1>
diff --git a/apps/web/modules/ui/components/background-styling-card/index.tsx b/apps/web/modules/ui/components/background-styling-card/index.tsx
index 0de56b2fd6..82426f85f5 100644
--- a/apps/web/modules/ui/components/background-styling-card/index.tsx
+++ b/apps/web/modules/ui/components/background-styling-card/index.tsx
@@ -58,7 +58,7 @@ export const BackgroundStylingCard = ({
         )}>
         <div className="inline-flex px-4 py-4">
           {!isSettingsPage && (
-            <div className="flex items-center pr-5 pl-2">
+            <div className="flex items-center pl-2 pr-5">
               <CheckIcon
                 strokeWidth={3}
                 className="h-7 w-7 rounded-full border border-green-300 bg-green-100 p-1.5 text-green-600"
diff --git a/apps/web/modules/ui/components/card-styling-settings/index.tsx b/apps/web/modules/ui/components/card-styling-settings/index.tsx
index 38702de7d0..0974e599b7 100644
--- a/apps/web/modules/ui/components/card-styling-settings/index.tsx
+++ b/apps/web/modules/ui/components/card-styling-settings/index.tsx
@@ -64,7 +64,7 @@ export const CardStylingSettings = ({
         )}>
         <div className="inline-flex px-4 py-4">
           {!isSettingsPage && (
-            <div className="flex items-center pr-5 pl-2">
+            <div className="flex items-center pl-2 pr-5">
               <CheckIcon
                 strokeWidth={3}
                 className="h-7 w-7 rounded-full border border-green-300 bg-green-100 p-1.5 text-green-600"
diff --git a/apps/web/modules/ui/components/card/index.tsx b/apps/web/modules/ui/components/card/index.tsx
index 8ce9862605..56bf95a5c0 100644
--- a/apps/web/modules/ui/components/card/index.tsx
+++ b/apps/web/modules/ui/components/card/index.tsx
@@ -57,7 +57,7 @@ const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HT
     return (
       <h3
         ref={ref}
-        className={cn("text-2xl leading-none font-semibold tracking-tight", className)}
+        className={cn("text-2xl font-semibold leading-none tracking-tight", className)}
         {...props}>
         {headingContent}
       </h3>
diff --git a/apps/web/modules/ui/components/checkbox/index.tsx b/apps/web/modules/ui/components/checkbox/index.tsx
index 6811bc2015..907fa06633 100644
--- a/apps/web/modules/ui/components/checkbox/index.tsx
+++ b/apps/web/modules/ui/components/checkbox/index.tsx
@@ -10,7 +10,7 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxPrimitive.CheckboxPr
     <CheckboxPrimitive.Root
       ref={ref as React.Ref<HTMLButtonElement>}
       className={cn(
-        "peer h-5 w-5 shrink-0 rounded-md border border-slate-300 bg-white focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-slate-600 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900",
+        "peer h-5 w-5 shrink-0 rounded-md border border-slate-300 bg-white focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-slate-600 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900",
         className
       )}
       {...props}>
diff --git a/apps/web/modules/ui/components/client-logo/index.tsx b/apps/web/modules/ui/components/client-logo/index.tsx
index 6cda2fb71f..983b2e0f23 100644
--- a/apps/web/modules/ui/components/client-logo/index.tsx
+++ b/apps/web/modules/ui/components/client-logo/index.tsx
@@ -17,7 +17,7 @@ export const ClientLogo = ({ environmentId, projectLogo, previewSurvey = false }
   const { t } = useTranslate();
   return (
     <div
-      className={cn(previewSurvey ? "" : "top-3 left-3 md:top-7 md:left-7", "group absolute z-0 rounded-lg")}
+      className={cn(previewSurvey ? "" : "left-3 top-3 md:left-7 md:top-7", "group absolute z-0 rounded-lg")}
       style={{ backgroundColor: projectLogo?.bgColor }}>
       {previewSurvey && environmentId && (
         <Link
@@ -26,7 +26,7 @@ export const ClientLogo = ({ environmentId, projectLogo, previewSurvey = false }
           target="_blank">
           <ArrowUpRight
             size={24}
-            className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transform rounded-md bg-white/80 p-0.5 text-slate-700 opacity-0 transition-all duration-200 ease-in-out group-hover/link:opacity-100"
+            className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform rounded-md bg-white/80 p-0.5 text-slate-700 opacity-0 transition-all duration-200 ease-in-out group-hover/link:opacity-100"
           />
         </Link>
       )}
@@ -49,7 +49,7 @@ export const ClientLogo = ({ environmentId, projectLogo, previewSurvey = false }
               e.preventDefault();
             }
           }}
-          className="rounded-md border border-dashed border-slate-400 bg-slate-200 px-6 py-3 text-xs whitespace-nowrap text-slate-900 opacity-50 backdrop-blur-sm hover:cursor-pointer hover:border-slate-600"
+          className="whitespace-nowrap rounded-md border border-dashed border-slate-400 bg-slate-200 px-6 py-3 text-xs text-slate-900 opacity-50 backdrop-blur-sm hover:cursor-pointer hover:border-slate-600"
           target="_blank">
           {t("common.add_logo")}
         </Link>
diff --git a/apps/web/modules/ui/components/code-block/index.tsx b/apps/web/modules/ui/components/code-block/index.tsx
index 44f5a6ecae..be1cefccf7 100644
--- a/apps/web/modules/ui/components/code-block/index.tsx
+++ b/apps/web/modules/ui/components/code-block/index.tsx
@@ -32,7 +32,7 @@ export const CodeBlock = ({
   return (
     <div className="group relative mt-4 rounded-md text-sm text-slate-200">
       {showCopyToClipboard && (
-        <div className="absolute top-2 right-2 z-20 flex cursor-pointer items-center justify-center p-1.5 text-slate-500 hover:text-slate-900">
+        <div className="absolute right-2 top-2 z-20 flex cursor-pointer items-center justify-center p-1.5 text-slate-500 hover:text-slate-900">
           <CopyIcon
             data-testid="copy-icon"
             onClick={() => {
diff --git a/apps/web/modules/ui/components/color-picker/index.tsx b/apps/web/modules/ui/components/color-picker/index.tsx
index 9234b82f08..df5e15c07c 100644
--- a/apps/web/modules/ui/components/color-picker/index.tsx
+++ b/apps/web/modules/ui/components/color-picker/index.tsx
@@ -17,7 +17,7 @@ export const ColorPicker = ({ color, onChange, containerClass, disabled = false
         <div className="flex w-full items-center">
           #
           <HexColorInput
-            className="mr-2 ml-2 h-10 w-32 flex-1 border-0 bg-transparent text-slate-500 outline-none focus:border-none"
+            className="ml-2 mr-2 h-10 w-32 flex-1 border-0 bg-transparent text-slate-500 outline-none focus:border-none"
             color={color}
             onChange={onChange}
             id="color"
diff --git a/apps/web/modules/ui/components/command/index.tsx b/apps/web/modules/ui/components/command/index.tsx
index 39fd394675..5ada795dff 100644
--- a/apps/web/modules/ui/components/command/index.tsx
+++ b/apps/web/modules/ui/components/command/index.tsx
@@ -27,7 +27,7 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
   return (
     <Dialog {...props}>
       <DialogContent className="overflow-hidden p-0 shadow-2xl">
-        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
           {children}
         </Command>
       </DialogContent>
@@ -59,7 +59,7 @@ const CommandList = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <CommandPrimitive.List
     ref={ref}
-    className={cn("max-h-full overflow-x-hidden overflow-y-auto", className)}
+    className={cn("max-h-full overflow-y-auto overflow-x-hidden", className)}
     {...props}
   />
 ));
@@ -104,7 +104,7 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default items-center rounded-md px-2 py-1.5 text-sm font-medium text-slate-700 outline-none select-none hover:bg-slate-100 data-[disabled='true']:pointer-events-none data-[disabled='true']:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-sm font-medium text-slate-700 outline-none hover:bg-slate-100 data-[disabled='true']:pointer-events-none data-[disabled='true']:opacity-50",
       className
     )}
     {...props}
diff --git a/apps/web/modules/ui/components/data-table/components/data-table-header.tsx b/apps/web/modules/ui/components/data-table/components/data-table-header.tsx
index 1ae7c1227d..06285a11a9 100644
--- a/apps/web/modules/ui/components/data-table/components/data-table-header.tsx
+++ b/apps/web/modules/ui/components/data-table/components/data-table-header.tsx
@@ -65,7 +65,7 @@ export const DataTableHeader = <T,>({ header, setIsTableSettingsModalOpen }: Dat
           onTouchStart={header.getResizeHandler()}
           data-testid="column-resize-handle"
           className={cn(
-            "absolute top-0 right-0 hidden h-full w-1 cursor-col-resize bg-slate-500",
+            "absolute right-0 top-0 hidden h-full w-1 cursor-col-resize bg-slate-500",
             header.column.getIsResizing() ? "bg-black" : "bg-slate-500",
             !header.column.getCanResize() ? "hidden" : "group-hover:block"
           )}
diff --git a/apps/web/modules/ui/components/dialog/index.tsx b/apps/web/modules/ui/components/dialog/index.tsx
index 96f3aa9251..5af8ccd81f 100644
--- a/apps/web/modules/ui/components/dialog/index.tsx
+++ b/apps/web/modules/ui/components/dialog/index.tsx
@@ -47,7 +47,7 @@ const DialogContent = React.forwardRef<
       )}
       {...props}>
       {children}
-      <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none">
+      <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
         {!hideCloseButton ? <X className="h-4 w-4" /> : null}
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
@@ -88,7 +88,7 @@ const DialogTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Title
     ref={ref}
-    className={cn("text-lg leading-none font-semibold tracking-tight", className)}
+    className={cn("text-lg font-semibold leading-none tracking-tight", className)}
     {...props}
   />
 ));
diff --git a/apps/web/modules/ui/components/dropdown-menu/index.tsx b/apps/web/modules/ui/components/dropdown-menu/index.tsx
index e5ffd63cdb..6ed7e36c90 100644
--- a/apps/web/modules/ui/components/dropdown-menu/index.tsx
+++ b/apps/web/modules/ui/components/dropdown-menu/index.tsx
@@ -29,7 +29,7 @@ const DropdownMenuSubTrigger: React.ComponentType<
     <DropdownMenuPrimitive.SubTrigger
       ref={ref as any}
       className={cn(
-        "flex cursor-default items-center rounded-lg px-2 py-1.5 text-sm font-medium text-slate-600 outline-none select-none hover:text-slate-700 focus:bg-slate-100 data-[state=open]:bg-slate-100",
+        "flex cursor-default select-none items-center rounded-lg px-2 py-1.5 text-sm font-medium text-slate-600 outline-none hover:text-slate-700 focus:bg-slate-100 data-[state=open]:bg-slate-100",
         inset && "pl-8",
         className
       )}
@@ -92,7 +92,7 @@ const DropdownMenuItem: React.ForwardRefExoticComponent<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex w-full cursor-pointer items-center gap-x-2 rounded-lg px-2 py-1.5 text-sm font-medium outline-none select-none focus:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex w-full cursor-pointer select-none items-center gap-x-2 rounded-lg px-2 py-1.5 text-sm font-medium outline-none focus:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
       className
     )}
@@ -112,7 +112,7 @@ const DropdownMenuCheckboxItem: React.ComponentType<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default items-center rounded-lg py-1.5 pr-2 pl-8 text-sm font-medium outline-none select-none focus:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-lg py-1.5 pl-8 pr-2 text-sm font-medium outline-none focus:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     checked={checked}
@@ -136,7 +136,7 @@ const DropdownMenuRadioItem: React.ComponentType<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default items-center rounded-lg py-1.5 pr-2 pl-8 text-sm font-medium outline-none select-none focus:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-lg py-1.5 pl-8 pr-2 text-sm font-medium outline-none focus:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     {...props}>
diff --git a/apps/web/modules/ui/components/file-input/components/uploader.tsx b/apps/web/modules/ui/components/file-input/components/uploader.tsx
index c8ca079b42..1d5aefdd7e 100644
--- a/apps/web/modules/ui/components/file-input/components/uploader.tsx
+++ b/apps/web/modules/ui/components/file-input/components/uploader.tsx
@@ -43,7 +43,7 @@ export const Uploader = ({
       )}
       onDragOver={(e) => !disabled && handleDragOver(e)}
       onDrop={(e) => !disabled && handleDrop(e)}>
-      <div className="flex flex-col items-center justify-center pt-5 pb-6">
+      <div className="flex flex-col items-center justify-center pb-6 pt-5">
         <ArrowUpFromLineIcon className="h-6 text-slate-500" />
         <p className={cn("mt-2 text-center text-sm text-slate-500", uploadMore && "text-xs")}>
           <span className="font-semibold">Click or drag to upload files.</span>
diff --git a/apps/web/modules/ui/components/file-input/index.tsx b/apps/web/modules/ui/components/file-input/index.tsx
index c6304d5ae8..8f5cf3b265 100644
--- a/apps/web/modules/ui/components/file-input/index.tsx
+++ b/apps/web/modules/ui/components/file-input/index.tsx
@@ -237,7 +237,7 @@ export const FileInput = ({
                             />
                             {file.uploaded ? (
                               <div
-                                className="absolute top-2 right-2 flex cursor-pointer items-center justify-center rounded-md bg-slate-100 p-1 hover:bg-slate-200 hover:bg-white/90"
+                                className="absolute right-2 top-2 flex cursor-pointer items-center justify-center rounded-md bg-slate-100 p-1 hover:bg-slate-200 hover:bg-white/90"
                                 onClick={() => handleRemove(idx)}>
                                 <XIcon className="h-5 text-slate-700 hover:text-slate-900" />
                               </div>
@@ -255,7 +255,7 @@ export const FileInput = ({
                             </p>
                             {file.uploaded ? (
                               <div
-                                className="absolute top-2 right-2 flex cursor-pointer items-center justify-center rounded-md bg-slate-100 p-1 hover:bg-slate-200 hover:bg-white/90"
+                                className="absolute right-2 top-2 flex cursor-pointer items-center justify-center rounded-md bg-slate-100 p-1 hover:bg-slate-200 hover:bg-white/90"
                                 onClick={() => handleRemove(idx)}>
                                 <XIcon className="h-5 text-slate-700 hover:text-slate-900" />
                               </div>
@@ -295,7 +295,7 @@ export const FileInput = ({
                         />
                         {selectedFiles[0].uploaded ? (
                           <div
-                            className="absolute top-2 right-2 flex cursor-pointer items-center justify-center rounded-md bg-slate-100 p-1 hover:bg-slate-200 hover:bg-white/90"
+                            className="absolute right-2 top-2 flex cursor-pointer items-center justify-center rounded-md bg-slate-100 p-1 hover:bg-slate-200 hover:bg-white/90"
                             onClick={() => handleRemove(0)}>
                             <XIcon className="h-5 text-slate-700 hover:text-slate-900" />
                           </div>
@@ -311,7 +311,7 @@ export const FileInput = ({
                         </p>
                         {selectedFiles[0].uploaded ? (
                           <div
-                            className="absolute top-2 right-2 flex cursor-pointer items-center justify-center rounded-md bg-slate-100 p-1 hover:bg-slate-200 hover:bg-white/90"
+                            className="absolute right-2 top-2 flex cursor-pointer items-center justify-center rounded-md bg-slate-100 p-1 hover:bg-slate-200 hover:bg-white/90"
                             onClick={() => handleRemove(0)}>
                             <XIcon className="h-5 text-slate-700 hover:text-slate-900" />
                           </div>
diff --git a/apps/web/modules/ui/components/file-upload-response/index.tsx b/apps/web/modules/ui/components/file-upload-response/index.tsx
index b61bead25c..518aeb2f18 100644
--- a/apps/web/modules/ui/components/file-upload-response/index.tsx
+++ b/apps/web/modules/ui/components/file-upload-response/index.tsx
@@ -23,7 +23,7 @@ export const FileUploadResponse = ({ selected }: FileUploadResponseProps) => {
             target="_blank"
             rel="noopener noreferrer"
             className="group flex max-w-60 items-center justify-center rounded-lg bg-slate-200 px-2 py-1 hover:bg-slate-300">
-            <p className="w-full overflow-hidden text-center overflow-ellipsis whitespace-nowrap text-slate-700 group-hover:text-slate-800">
+            <p className="w-full overflow-hidden overflow-ellipsis whitespace-nowrap text-center text-slate-700 group-hover:text-slate-800">
               {fileName ? fileName : "Download"}
             </p>
             <DownloadIcon className="p-0.5" strokeWidth={1.5} />
diff --git a/apps/web/modules/ui/components/input/index.tsx b/apps/web/modules/ui/components/input/index.tsx
index c83f9101e9..6aeb86b4ce 100644
--- a/apps/web/modules/ui/components/input/index.tsx
+++ b/apps/web/modules/ui/components/input/index.tsx
@@ -14,7 +14,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, isInv
   return (
     <input
       className={cn(
-        "focus:border-brand-dark flex h-10 w-full rounded-md border border-slate-300 bg-transparent px-3 py-2 text-sm text-slate-800 placeholder:text-slate-400 focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-500 dark:text-slate-300",
+        "focus:border-brand-dark flex h-10 w-full rounded-md border border-slate-300 bg-transparent px-3 py-2 text-sm text-slate-800 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-500 dark:text-slate-300",
         className,
         isInvalid && "border border-red-500 focus:border-red-500"
       )}
diff --git a/apps/web/modules/ui/components/label/index.tsx b/apps/web/modules/ui/components/label/index.tsx
index 3c57faa486..9866a1d00e 100644
--- a/apps/web/modules/ui/components/label/index.tsx
+++ b/apps/web/modules/ui/components/label/index.tsx
@@ -16,7 +16,7 @@ const Label: LabelType = React.forwardRef<
   <LabelPrimitive.Root
     ref={ref}
     className={cn(
-      "text-sm leading-none font-medium text-slate-800 peer-disabled:cursor-not-allowed peer-disabled:opacity-70 disabled:opacity-70 dark:text-slate-400 dark:peer-disabled:opacity-70",
+      "text-sm font-medium leading-none text-slate-800 disabled:opacity-70 peer-disabled:cursor-not-allowed peer-disabled:opacity-70 dark:text-slate-400 dark:peer-disabled:opacity-70",
       className
     )}
     {...props}
diff --git a/apps/web/modules/ui/components/modal/index.tsx b/apps/web/modules/ui/components/modal/index.tsx
index 135ed873ee..1061088756 100644
--- a/apps/web/modules/ui/components/modal/index.tsx
+++ b/apps/web/modules/ui/components/modal/index.tsx
@@ -13,7 +13,7 @@ const DialogOverlay = React.forwardRef<
     ref={ref}
     className={cn(
       blur && "backdrop-blur-md",
-      "bg-opacity-30 fixed inset-0 z-50",
+      "fixed inset-0 z-50 bg-opacity-30",
       "data-[state='closed']:animate-fadeOut data-[state='open']:animate-fadeIn"
     )}
     {...props}
@@ -58,8 +58,8 @@ const DialogContent = React.forwardRef<
       <DialogPrimitive.Content
         ref={ref}
         className={cn(
-          "fixed top-[50%] left-[50%] z-50 translate-x-[-50%] translate-y-[-50%] transform rounded-lg bg-white text-left shadow-xl transition-all sm:my-2 sm:w-full sm:max-w-xl",
-          `${noPadding ? "" : "px-4 pt-5 pb-4 sm:p-6"}`,
+          "fixed left-[50%] top-[50%] z-50 translate-x-[-50%] translate-y-[-50%] transform rounded-lg bg-white text-left shadow-xl transition-all sm:my-2 sm:w-full sm:max-w-xl",
+          `${noPadding ? "" : "px-4 pb-4 pt-5 sm:p-6"}`,
           "data-[state='closed']:animate-fadeOut data-[state='open']:animate-fadeIn",
           size && sizeClassName && sizeClassName[size],
           !restrictOverflow && "overflow-hidden",
@@ -78,7 +78,7 @@ const DialogContent = React.forwardRef<
         {children}
         <DialogPrimitive.Close
           className={cn(
-            "absolute top-0 right-0 hidden pt-4 pr-4 text-slate-400 hover:text-slate-500 focus:ring-0 focus:outline-none sm:block",
+            "absolute right-0 top-0 hidden pr-4 pt-4 text-slate-400 hover:text-slate-500 focus:outline-none focus:ring-0 sm:block",
             hideCloseButton && "!hidden"
           )}>
           <XIcon className="h-6 w-6 rounded-md bg-white" />
diff --git a/apps/web/modules/ui/components/no-code-action-form/components/page-url-selector.tsx b/apps/web/modules/ui/components/no-code-action-form/components/page-url-selector.tsx
index aee6eded98..cd2557fcb4 100644
--- a/apps/web/modules/ui/components/no-code-action-form/components/page-url-selector.tsx
+++ b/apps/web/modules/ui/components/no-code-action-form/components/page-url-selector.tsx
@@ -99,7 +99,7 @@ export const PageUrlSelector = ({ form, isReadOnly }: PageUrlSelectorProps) => {
         />
       </div>
       {filterType === "specific" && (
-        <div className="mt-4 mb-2 w-full space-y-3 pe-2">
+        <div className="mb-2 mt-4 w-full space-y-3 pe-2">
           <Label>{t("environments.actions.url")}</Label>
           <UrlInput
             control={form.control}
diff --git a/apps/web/modules/ui/components/page-header/index.tsx b/apps/web/modules/ui/components/page-header/index.tsx
index 911341d2d1..c6466c7da1 100644
--- a/apps/web/modules/ui/components/page-header/index.tsx
+++ b/apps/web/modules/ui/components/page-header/index.tsx
@@ -10,7 +10,7 @@ export const PageHeader = ({ cta, pageTitle, children }: PageHeaderProps) => {
   return (
     <div className="border-b border-slate-200">
       <div className="flex items-center justify-between space-x-4 pb-4">
-        <h1 className={cn("text-3xl font-bold text-slate-800 capitalize")}>{pageTitle}</h1>
+        <h1 className={cn("text-3xl font-bold capitalize text-slate-800")}>{pageTitle}</h1>
         {cta}
       </div>
       {children}
diff --git a/apps/web/modules/ui/components/password-input/index.tsx b/apps/web/modules/ui/components/password-input/index.tsx
index b51ae16ee6..11a19263cb 100644
--- a/apps/web/modules/ui/components/password-input/index.tsx
+++ b/apps/web/modules/ui/components/password-input/index.tsx
@@ -28,7 +28,7 @@ const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(
         />
         <button
           type="button"
-          className={cn("absolute top-1/2 right-3 -translate-y-1/2 transform")}
+          className={cn("absolute right-3 top-1/2 -translate-y-1/2 transform")}
           onClick={togglePasswordVisibility}>
           {showPassword ? (
             <EyeOff className="h-5 w-5 text-slate-400" />
diff --git a/apps/web/modules/ui/components/preview-survey/index.tsx b/apps/web/modules/ui/components/preview-survey/index.tsx
index 5898c76763..5e232d1a87 100644
--- a/apps/web/modules/ui/components/preview-survey/index.tsx
+++ b/apps/web/modules/ui/components/preview-survey/index.tsx
@@ -246,10 +246,10 @@ export const PreviewSurvey = ({
         className="relative flex h-full w-[95%] items-center justify-center rounded-lg border border-slate-300 bg-slate-200">
         {previewMode === "mobile" && (
           <>
-            <p className="absolute top-0 left-0 m-2 rounded bg-slate-100 px-2 py-1 text-xs text-slate-400">
+            <p className="absolute left-0 top-0 m-2 rounded bg-slate-100 px-2 py-1 text-xs text-slate-400">
               Preview
             </p>
-            <div className="absolute top-0 right-0 m-2">
+            <div className="absolute right-0 top-0 m-2">
               <ResetProgressButton onClick={resetQuestionProgress} />
             </div>
             <MediaBackground
@@ -284,7 +284,7 @@ export const PreviewSurvey = ({
                 </Modal>
               ) : (
                 <div className="flex h-full w-full flex-col justify-center px-1">
-                  <div className="absolute top-5 left-5">
+                  <div className="absolute left-5 top-5">
                     {!styling.isLogoHidden && (
                       <ClientLogo environmentId={environment.id} projectLogo={project.logo} previewSurvey />
                     )}
@@ -392,7 +392,7 @@ export const PreviewSurvey = ({
                 styling={styling}
                 ContentRef={ContentRef as React.RefObject<HTMLDivElement>}
                 isEditorView>
-                <div className="absolute top-5 left-5">
+                <div className="absolute left-5 top-5">
                   {!styling.isLogoHidden && (
                     <ClientLogo environmentId={environment.id} projectLogo={project.logo} previewSurvey />
                   )}
diff --git a/apps/web/modules/ui/components/select/index.tsx b/apps/web/modules/ui/components/select/index.tsx
index 89ed003b2e..06bca2bff4 100644
--- a/apps/web/modules/ui/components/select/index.tsx
+++ b/apps/web/modules/ui/components/select/index.tsx
@@ -18,7 +18,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-10 w-full items-center justify-between rounded-md border border-slate-300 bg-transparent px-3 py-2 text-sm focus:ring-2 focus:ring-slate-400 focus:ring-offset-1 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-slate-400",
+      "flex h-10 w-full items-center justify-between rounded-md border border-slate-300 bg-transparent px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-slate-400",
       className
     )}
     {...props}>
@@ -52,7 +52,7 @@ const SelectLabel: React.ComponentType<SelectPrimitive.SelectLabelProps> = React
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Label
     ref={ref}
-    className={cn("py-1.5 pr-2 pl-8 text-sm font-semibold text-slate-900 dark:text-slate-200", className)}
+    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold text-slate-900 dark:text-slate-200", className)}
     {...props}
   />
 ));
@@ -65,7 +65,7 @@ const SelectItem: React.ComponentType<SelectPrimitive.SelectItemProps> = React.f
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-pointer items-center rounded-md py-1.5 pr-2 pl-2 text-sm font-medium outline-none select-none focus:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-pointer select-none items-center rounded-md py-1.5 pl-2 pr-2 text-sm font-medium outline-none focus:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     {...props}>
diff --git a/apps/web/modules/ui/components/slider/index.tsx b/apps/web/modules/ui/components/slider/index.tsx
index efa56372c1..8e4a7301cd 100644
--- a/apps/web/modules/ui/components/slider/index.tsx
+++ b/apps/web/modules/ui/components/slider/index.tsx
@@ -10,12 +10,12 @@ export const Slider: React.ForwardRefExoticComponent<
 > = React.forwardRef(({ className, ...props }, ref) => (
   <SliderPrimitive.Root
     ref={ref}
-    className={cn("relative flex w-full touch-none items-center select-none", className)}
+    className={cn("relative flex w-full touch-none select-none items-center", className)}
     {...props}>
     <SliderPrimitive.Track className="relative h-1 w-full grow overflow-hidden rounded-full bg-slate-300">
       <SliderPrimitive.Range className="absolute h-full bg-slate-300" />
     </SliderPrimitive.Track>
-    <SliderPrimitive.Thumb className="border-primary ring-offset-background focus-visible:ring-ring block h-5 w-5 rounded-full border-2 bg-slate-900 transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50" />
+    <SliderPrimitive.Thumb className="border-primary ring-offset-background focus-visible:ring-ring block h-5 w-5 rounded-full border-2 bg-slate-900 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
   </SliderPrimitive.Root>
 ));
 Slider.displayName = SliderPrimitive.Root.displayName;
diff --git a/apps/web/modules/ui/components/styling-tabs/index.tsx b/apps/web/modules/ui/components/styling-tabs/index.tsx
index 459c6a85d0..813e137650 100644
--- a/apps/web/modules/ui/components/styling-tabs/index.tsx
+++ b/apps/web/modules/ui/components/styling-tabs/index.tsx
@@ -57,7 +57,7 @@ export const StylingTabs = <T extends string | number>({
             className={cn(
               "flex flex-1 cursor-pointer items-center justify-center gap-4 rounded-md py-2 text-center text-sm",
               selectedOption === option.value ? "bg-slate-100" : "bg-white",
-              "focus:ring-brand-dark focus:ring-opacity-50 focus:ring-2 focus:outline-none"
+              "focus:ring-brand-dark focus:outline-none focus:ring-2 focus:ring-opacity-50"
             )}>
             <input
               type="radio"
diff --git a/apps/web/modules/ui/components/switch/index.tsx b/apps/web/modules/ui/components/switch/index.tsx
index 1f7fda8039..9b9da49f5c 100644
--- a/apps/web/modules/ui/components/switch/index.tsx
+++ b/apps/web/modules/ui/components/switch/index.tsx
@@ -10,7 +10,7 @@ const Switch: React.ComponentType<SwitchPrimitives.SwitchProps> = React.forwardR
 >(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
-      "peer inline-flex h-[20px] w-[40px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-slate-900 data-[state=unchecked]:bg-slate-200",
+      "peer inline-flex h-[20px] w-[40px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-slate-900 data-[state=unchecked]:bg-slate-200",
       className
     )}
     {...props}
diff --git a/apps/web/modules/ui/components/tab-toggle/index.tsx b/apps/web/modules/ui/components/tab-toggle/index.tsx
index d83e3176dc..553c1c44f0 100644
--- a/apps/web/modules/ui/components/tab-toggle/index.tsx
+++ b/apps/web/modules/ui/components/tab-toggle/index.tsx
@@ -39,7 +39,7 @@ export const TabToggle = <T extends string | number>({
             className={cn(
               "flex-1 cursor-pointer rounded-md py-2 text-center text-sm text-slate-800",
               selectedOption === option.value && "bg-white",
-              "focus:ring-brand-dark focus:ring-opacity-50 focus:ring-2 focus:outline-none",
+              "focus:ring-brand-dark focus:outline-none focus:ring-2 focus:ring-opacity-50",
               disabled && "cursor-not-allowed opacity-50"
             )}>
             <input