diff --git a/apps/design-system/src/pages/view-preview/profile-settings-view-wrapper.tsx b/apps/design-system/src/pages/view-preview/profile-settings-view-wrapper.tsx
index 2d53062d83..d1506404ae 100644
--- a/apps/design-system/src/pages/view-preview/profile-settings-view-wrapper.tsx
+++ b/apps/design-system/src/pages/view-preview/profile-settings-view-wrapper.tsx
@@ -1,11 +1,11 @@
-import { FC, PropsWithChildren } from 'react'
+import { FC, HTMLAttributes, PropsWithChildren } from 'react'
 import { Route, Routes } from 'react-router-dom'
 
 import { useTranslationsStore } from '@utils/viewUtils'
 
 import { ProfileSettingsLayout } from '@harnessio/ui/views'
 
-export const ProfileSettingsViewWrapper: FC<PropsWithChildren> = ({ children }) => {
+export const ProfileSettingsViewWrapper: FC<PropsWithChildren<HTMLAttributes<HTMLElement>>> = ({ children }) => {
   return (
     <Routes>
       <Route path="*" element={<ProfileSettingsLayout useTranslationStore={useTranslationsStore} />}>
diff --git a/apps/design-system/src/pages/view-preview/project-settings-wrapper.tsx b/apps/design-system/src/pages/view-preview/project-settings-wrapper.tsx
index 3a2f063dab..bed38b4e23 100644
--- a/apps/design-system/src/pages/view-preview/project-settings-wrapper.tsx
+++ b/apps/design-system/src/pages/view-preview/project-settings-wrapper.tsx
@@ -1,4 +1,4 @@
-import { FC, PropsWithChildren } from 'react'
+import { FC, HTMLAttributes, PropsWithChildren } from 'react'
 import { Route } from 'react-router-dom'
 
 import { ProjectSettingsPage } from '@harnessio/ui/views'
@@ -13,7 +13,7 @@ const Layout = () => {
   )
 }
 
-export const ProjectSettingsWrapper: FC<PropsWithChildren<React.HTMLAttributes<HTMLElement>>> = ({ children }) => {
+export const ProjectSettingsWrapper: FC<PropsWithChildren<HTMLAttributes<HTMLElement>>> = ({ children }) => {
   return (
     <>
       <RootViewWrapper asChild>
diff --git a/apps/design-system/src/pages/view-preview/repo-view-wrapper.tsx b/apps/design-system/src/pages/view-preview/repo-view-wrapper.tsx
index 7dc7963ce3..69b3a70d71 100644
--- a/apps/design-system/src/pages/view-preview/repo-view-wrapper.tsx
+++ b/apps/design-system/src/pages/view-preview/repo-view-wrapper.tsx
@@ -13,7 +13,7 @@ const RepoViewWrapper: FC<PropsWithChildren<React.HTMLAttributes<HTMLElement>>>
       path="*"
       element={
         <>
-          <div className="layer-high sticky top-[55px] bg-background-1">
+          <div className="layer-high bg-background-1 sticky top-[55px]">
             <RepoSubheader useTranslationStore={useTranslationsStore} />
           </div>
           {children}
diff --git a/apps/design-system/src/subjects/views/profile-settings-keys/index.tsx b/apps/design-system/src/subjects/views/profile-settings-keys/index.tsx
index c029c033a6..786b31ccd5 100644
--- a/apps/design-system/src/subjects/views/profile-settings-keys/index.tsx
+++ b/apps/design-system/src/subjects/views/profile-settings-keys/index.tsx
@@ -60,7 +60,7 @@ export const ProfileSettingsKeysView = () => {
   return (
     <>
       <SandboxLayout.Content className="px-0">
-        <h1 className="text-24 font-medium text-foreground-1">Keys and Tokens</h1>
+        <h1 className="text-24 text-foreground-1 font-medium">Keys and Tokens</h1>
         <Spacer size={10} />
         <FormWrapper>
           <Fieldset className="gap-y-5">
diff --git a/apps/design-system/src/subjects/views/profile-settings/index.tsx b/apps/design-system/src/subjects/views/profile-settings/index.tsx
index 640b369dc9..00400f318d 100644
--- a/apps/design-system/src/subjects/views/profile-settings/index.tsx
+++ b/apps/design-system/src/subjects/views/profile-settings/index.tsx
@@ -26,7 +26,7 @@ export const ProfileSettingsView = () => {
 
   return (
     <SandboxLayout.Content className="max-w-[476px] px-0">
-      <h1 className="text-24 font-medium text-foreground-1">Account settings</h1>
+      <h1 className="text-24 text-foreground-1 font-medium">Account settings</h1>
       <Spacer size={10} />
       {isLoadingUser ? (
         <SkeletonForm />
@@ -37,7 +37,7 @@ export const ProfileSettingsView = () => {
             <Avatar size="20" className="size-20 shadow-md">
               <AvatarImage src="/images/anon.jpg" />
               <AvatarFallback>
-                <span className="text-2xl font-medium text-foreground-3">TN</span>
+                <span className="text-foreground-3 text-2xl font-medium">TN</span>
               </AvatarFallback>
             </Avatar>
             <Fieldset>
@@ -67,7 +67,7 @@ export const ProfileSettingsView = () => {
             </ControlGroup>
           </FormWrapper>
 
-          <FormSeparator className="my-7 border-borders-4" />
+          <FormSeparator className="border-borders-4 my-7" />
 
           <FormWrapper>
             <Legend
diff --git a/packages/ui/src/components/alert-dialog.tsx b/packages/ui/src/components/alert-dialog.tsx
index 01066c2850..e5d20d2735 100644
--- a/packages/ui/src/components/alert-dialog.tsx
+++ b/packages/ui/src/components/alert-dialog.tsx
@@ -65,7 +65,7 @@ const AlertDialogContent = React.forwardRef<
         {...props}
       >
         <Button
-          className="absolute top-4 right-4 z-10 transition-colors duration-200 text-icons-4 hover:text-icons-2"
+          className="absolute right-4 top-4 z-10 text-icons-4 transition-colors duration-200 hover:text-icons-2"
           type="button"
           variant="custom"
           size="icon"
diff --git a/packages/ui/src/components/skeletons/skeleton-table.tsx b/packages/ui/src/components/skeletons/skeleton-table.tsx
index f0a3c27c6b..bbcc06b0ff 100644
--- a/packages/ui/src/components/skeletons/skeleton-table.tsx
+++ b/packages/ui/src/components/skeletons/skeleton-table.tsx
@@ -18,7 +18,7 @@ export const SkeletonTable = ({ className, countRows = 12, countColumns = 5 }: S
       {Array.from({ length: countRows }).map((_, index) => (
         <TableRow key={`row-${index}`}>
           {Array.from({ length: countColumns }).map((_, columnIndex) => (
-            <TableCell className="flex-1 h-12 content-center" key={`cell-${index}-${columnIndex}`}>
+            <TableCell className="h-12 flex-1 content-center" key={`cell-${index}-${columnIndex}`}>
               <Skeleton className="h-2.5" style={{ width: getRandomPercentageWidth(30, 80) }} />
             </TableCell>
           ))}
diff --git a/packages/ui/src/views/layouts/SandboxLayout.tsx b/packages/ui/src/views/layouts/SandboxLayout.tsx
index 908b76114f..9d87c89888 100644
--- a/packages/ui/src/views/layouts/SandboxLayout.tsx
+++ b/packages/ui/src/views/layouts/SandboxLayout.tsx
@@ -59,7 +59,7 @@ function Main({ children, fullWidth, className }: { children: ReactNode; fullWid
   }
 
   return (
-    <section className="size-full overflow-auto bg-background-1 flex-1" aria-label="Main Content">
+    <section className="size-full flex-1 overflow-auto bg-background-1" aria-label="Main Content">
       <div className={cn('mx-auto h-full max-w-[1200px]', className)}>{children}</div>
     </section>
   )
diff --git a/packages/ui/src/views/profile-settings/components/profile-settings-keys-create-dialog.tsx b/packages/ui/src/views/profile-settings/components/profile-settings-keys-create-dialog.tsx
index 395487bb47..235f6eda5c 100644
--- a/packages/ui/src/views/profile-settings/components/profile-settings-keys-create-dialog.tsx
+++ b/packages/ui/src/views/profile-settings/components/profile-settings-keys-create-dialog.tsx
@@ -86,7 +86,7 @@ export const ProfileSettingsKeysCreateDialog: FC<ProfileSettingsKeysCreateDialog
               error={errors.content?.message?.toString()}
             />
             {error?.type === ApiErrorType.KeyCreate && (
-              <span className="text-14 mt-6 text-destructive">{error.message}</span>
+              <span className="mt-6 text-14 text-destructive">{error.message}</span>
             )}
           </Fieldset>
         </FormWrapper>
diff --git a/packages/ui/src/views/profile-settings/components/profile-settings-keys-list.tsx b/packages/ui/src/views/profile-settings/components/profile-settings-keys-list.tsx
index 496df70953..39753696a2 100644
--- a/packages/ui/src/views/profile-settings/components/profile-settings-keys-list.tsx
+++ b/packages/ui/src/views/profile-settings/components/profile-settings-keys-list.tsx
@@ -18,7 +18,7 @@ import { KeysList } from '../types'
 
 interface ProfileKeysListProps {
   publicKeys: KeysList[]
-  isLoading: boolean
+  isLoading?: boolean
   openAlertDeleteDialog: (params: { identifier: string; type: string }) => void
   useTranslationStore: () => TranslationStore
 }
@@ -56,7 +56,7 @@ export const ProfileKeysList: FC<ProfileKeysListProps> = ({
                   <div className="inline-flex items-center gap-x-2.5">
                     <Icon name="ssh-key" size={32} />
                     <div className="flex flex-col">
-                      <span className="font-medium text-foreground-1 block max-w-[200px] truncate">
+                      <span className="block max-w-[200px] truncate font-medium text-foreground-1">
                         {key.identifier}
                       </span>
                       <span className="max-w-[200px] truncate text-12 text-foreground-3">{key.fingerprint}</span>
@@ -72,7 +72,7 @@ export const ProfileKeysList: FC<ProfileKeysListProps> = ({
                   {key.last_used ? new Date(key.last_used).toLocaleString() : 'Never used'}
                 </span> */}
                 </TableCell>
-                <TableCell className="text-right content-center">
+                <TableCell className="content-center text-right">
                   <MoreActionsTooltip
                     isInTable
                     actions={[
@@ -88,7 +88,7 @@ export const ProfileKeysList: FC<ProfileKeysListProps> = ({
             ))
           ) : (
             <TableRow className="hover:bg-transparent">
-              <TableCell className="!p-4 content-center" colSpan={4}>
+              <TableCell className="content-center !p-4" colSpan={4}>
                 <p className="text-center text-14 text-foreground-4">
                   {t(
                     'views:profileSettings.noDataKeysDescription',
diff --git a/packages/ui/src/views/profile-settings/components/profile-settings-tokens-list.tsx b/packages/ui/src/views/profile-settings/components/profile-settings-tokens-list.tsx
index 695ebc1b14..0ab20afe90 100644
--- a/packages/ui/src/views/profile-settings/components/profile-settings-tokens-list.tsx
+++ b/packages/ui/src/views/profile-settings/components/profile-settings-tokens-list.tsx
@@ -18,7 +18,7 @@ import { TokensList } from '../types'
 
 interface ProfileTokensListProps {
   tokens: TokensList[]
-  isLoading: boolean
+  isLoading?: boolean
   openAlertDeleteDialog: (params: { identifier: string; type: string }) => void
   useTranslationStore: () => TranslationStore
 }
@@ -53,7 +53,7 @@ export const ProfileTokensList: FC<ProfileTokensListProps> = ({
             tokens.map(token => (
               <TableRow key={token.uid}>
                 <TableCell className="content-center">
-                  <span className="font-medium text-foreground-1 block max-w-[200px] truncate">{token.identifier}</span>
+                  <span className="block max-w-[200px] truncate font-medium text-foreground-1">{token.identifier}</span>
                 </TableCell>
                 <TableCell className="content-center">
                   <div className="flex items-center gap-x-1.5">
@@ -71,7 +71,7 @@ export const ProfileTokensList: FC<ProfileTokensListProps> = ({
                 <TableCell className="content-center">
                   <span className="text-foreground-3">{timeAgo(new Date(token.issued_at!).getTime())}</span>
                 </TableCell>
-                <TableCell className="text-right content-center">
+                <TableCell className="content-center text-right">
                   <MoreActionsTooltip
                     isInTable
                     actions={[
@@ -89,7 +89,7 @@ export const ProfileTokensList: FC<ProfileTokensListProps> = ({
             ))
           ) : (
             <TableRow className="hover:bg-transparent">
-              <TableCell className="!p-4 content-center" colSpan={5}>
+              <TableCell className="content-center !p-4" colSpan={5}>
                 <p className="text-center text-14 text-foreground-4">
                   {t(
                     'views:profileSettings.noTokenDescription',