From 9002e6cb331b0136963723d577c79ccf5adcaded Mon Sep 17 00:00:00 2001
From: Daniel Hougaard <62331820+DanielHougaard@users.noreply.github.com>
Date: Mon, 18 Mar 2024 16:00:03 +0100
Subject: [PATCH] Fix: Format entire frontend properly

---
 .../utilities/telemetry/Telemetry.ts          |  14 +-
 .../v2/Accordion/Accordion.stories.tsx        |   2 +-
 .../src/components/v2/Accordion/Accordion.tsx |  10 +-
 .../src/components/v2/Accordion/index.tsx     |   2 +-
 frontend/src/components/v2/Card/Card.tsx      |   2 +-
 .../src/components/v2/Checkbox/Checkbox.tsx   |   4 +-
 .../DeleteActionModal/DeleteActionModal.tsx   |   8 +-
 frontend/src/components/v2/Drawer/Drawer.tsx  |   2 +-
 frontend/src/components/v2/Drawer/index.tsx   |   2 +-
 .../v2/Dropdown/Dropdown.stories.tsx          |   8 +-
 .../src/components/v2/Dropdown/Dropdown.tsx   |  22 +-
 .../EmailServiceSetupModal.tsx                |   5 +-
 .../components/v2/FormControl/FormControl.tsx |   2 +-
 .../src/components/v2/HoverCard/HoverCard.tsx |  12 +-
 .../src/components/v2/HoverCardv2/index.tsx   |   2 +-
 frontend/src/components/v2/Modal/Modal.tsx    |   2 +-
 .../components/v2/Pagination/Pagination.tsx   |   2 +-
 .../src/components/v2/Popover/Popover.tsx     |  25 +-
 .../src/components/v2/Popoverv2/index.tsx     |   2 +-
 .../components/v2/RadioGroup/RadioGroup.tsx   |  20 +-
 frontend/src/components/v2/Select/Select.tsx  |   4 +-
 .../src/components/v2/Spinner/Spinner.tsx     |   2 +-
 .../src/components/v2/Stepper/Stepper.tsx     |  12 +-
 frontend/src/components/v2/Stepper/index.tsx  |   4 +-
 frontend/src/components/v2/Table/index.tsx    |   5 +-
 frontend/src/components/v2/Tabs/Tabs.tsx      |   6 +-
 frontend/src/components/v2/Tabs/index.tsx     |   2 +-
 .../src/context/AuthContext/AuthContext.tsx   |   2 +-
 .../ProjectPermissionContext/index.tsx        |   2 +-
 .../ServerConfigContext.tsx                   |  21 +-
 .../src/context/ServerConfigContext/index.tsx |   2 +-
 frontend/src/context/index.tsx                |   2 +-
 .../UpdateUserProjectPermission.ts            |   2 +-
 frontend/src/ee/utilities/timeSince.ts        |  16 +-
 frontend/src/helpers/key.ts                   | 126 +++---
 .../src/hoc/withPermission/withPermission.tsx |   6 +-
 frontend/src/hooks/api/apiKeys/index.ts       |   5 +-
 frontend/src/hooks/api/apiKeys/queries.tsx    |  26 +-
 .../src/hooks/api/auditLogs/constants.tsx     | 102 ++---
 frontend/src/hooks/api/auditLogs/enums.tsx    |   4 +-
 frontend/src/hooks/api/auditLogs/index.tsx    |   2 +-
 frontend/src/hooks/api/auth/types.ts          |  36 +-
 frontend/src/hooks/api/bots/queries.tsx       |   4 +-
 .../src/hooks/api/identities/constants.tsx    |   4 +-
 frontend/src/hooks/api/identities/index.tsx   |  20 +-
 .../src/hooks/api/identities/mutations.tsx    | 277 +++++++-------
 frontend/src/hooks/api/identities/queries.tsx |  62 +--
 frontend/src/hooks/api/index.tsx              |   4 +-
 .../src/hooks/api/integrationAuth/index.tsx   |   2 +-
 .../src/hooks/api/integrationAuth/queries.tsx |  10 +-
 frontend/src/hooks/api/integrations/index.tsx |   6 +-
 .../src/hooks/api/integrations/queries.tsx    |   8 +-
 frontend/src/hooks/api/ldapConfig/index.tsx   |   6 +-
 frontend/src/hooks/api/ldapConfig/queries.tsx |  94 +++--
 frontend/src/hooks/api/organization/index.ts  |  40 +-
 frontend/src/hooks/api/scim/index.tsx         |   7 +-
 frontend/src/hooks/api/scim/mutations.tsx     |  62 ++-
 frontend/src/hooks/api/scim/queries.tsx       |  34 +-
 frontend/src/hooks/api/scim/types.ts          |  32 +-
 frontend/src/hooks/api/serverDetails/index.ts |   2 +-
 .../src/hooks/api/serverDetails/queries.tsx   |   8 +-
 frontend/src/hooks/api/serverDetails/types.ts |   4 +-
 frontend/src/hooks/api/serviceTokens/enums.ts |   6 +-
 frontend/src/hooks/api/serviceTokens/index.ts |   6 +-
 frontend/src/hooks/api/ssoConfig/index.tsx    |   6 +-
 frontend/src/hooks/api/ssoConfig/queries.tsx  |   2 +-
 frontend/src/hooks/api/trustedIps/index.ts    |   9 +-
 frontend/src/hooks/api/trustedIps/queries.ts  | 173 +++++----
 frontend/src/hooks/api/workspace/queries.tsx  |  14 +-
 frontend/src/hooks/api/workspace/types.ts     |  36 +-
 frontend/src/i18n.ts                          |   2 +-
 frontend/src/lib/fn/array.ts                  |  16 +-
 frontend/src/pages/404.tsx                    |  25 +-
 frontend/src/pages/admin/signup.tsx           |   2 +-
 frontend/src/pages/api/auth/CheckAuth.ts      |   2 +-
 .../linkGitAppInstallationWithOrganization.ts |   4 +-
 .../api/secret-scanning/updateRiskStatus.ts   |  27 +-
 frontend/src/pages/cli-redirect.tsx           |  12 +-
 frontend/src/pages/email-not-verified.tsx     |   6 +-
 frontend/src/pages/index.tsx                  |   2 +-
 .../cloudflare-pages/authorize.tsx            | 147 ++++---
 .../cloudflare-workers/create.tsx             |  10 +-
 .../src/pages/integrations/heroku/create.tsx  |  69 ++--
 .../src/pages/integrations/railway/create.tsx |  20 +-
 .../src/pages/integrations/render/create.tsx  |  27 +-
 frontend/src/pages/login/index.tsx            |   4 +-
 frontend/src/pages/login/provider/error.tsx   |  10 +-
 frontend/src/pages/login/provider/success.tsx |  16 +-
 frontend/src/pages/login/sso/index.tsx        |  42 +-
 frontend/src/pages/org/[id]/members/index.tsx |   2 +-
 .../src/pages/org/[id]/overview/index.tsx     |   7 +-
 frontend/src/pages/org/none/index.tsx         |  22 +-
 frontend/src/pages/password-reset.tsx         |  88 ++---
 frontend/src/pages/personal-settings.tsx      |   2 +-
 .../pages/project/[id]/allowlist/index.tsx    |  24 +-
 .../pages/project/[id]/audit-logs/index.tsx   |  24 +-
 frontend/src/pages/requestnewinvite.tsx       |  17 +-
 frontend/src/pages/secret-scanning.tsx        |  17 +-
 frontend/src/pages/signup/sso/index.tsx       |  40 +-
 frontend/src/pages/verify-email.tsx           |  13 +-
 frontend/src/services/KeyService.ts           | 195 +++++-----
 frontend/src/services/index.ts                |   5 +-
 .../IntegrationsSection.tsx                   |   6 +-
 frontend/src/views/Login/LoginSSO.tsx         |  90 ++---
 .../Login/components/InitialStep/index.tsx    |   2 +-
 .../Login/components/LDAPStep/LDAPStep.tsx    | 242 ++++++------
 .../views/Login/components/LDAPStep/index.tsx |   2 +-
 .../views/Login/components/MFAStep/index.tsx  |   2 +-
 .../Login/components/PasswordStep/index.tsx   |   2 +-
 .../components/SAMLSSOStep/SAMLSSOStep.tsx    | 122 +++---
 .../Login/components/SAMLSSOStep/index.tsx    |   2 +-
 frontend/src/views/Login/components/index.tsx |   2 +-
 .../OrgIdentityTab/OrgIdentityTab.tsx         |  28 +-
 .../IdentityAuthMethodModal.tsx               | 171 ++++-----
 .../components/IdentitySection/index.tsx      |   2 +-
 .../OrgIdentityTab/components/index.tsx       |   2 +-
 .../components/OrgIdentityTab/index.tsx       |   2 +-
 .../OrgMembersTab/OrgMembersTab.tsx           |  24 +-
 .../OrgMembersSection/OrgMembersSection.tsx   |   2 +-
 .../OrgMembersSection/OrgMembersTable.tsx     |   5 +-
 .../components/OrgMembersSection/index.tsx    |   2 +-
 .../OrgMembersTab/components/index.tsx        |   2 +-
 .../components/OrgMembersTab/index.tsx        |   2 +-
 .../SimpleLevelPermissionOptions.tsx          |  10 +-
 .../WorkspacePermission.tsx                   |   8 +-
 .../Org/MembersPage/components/index.tsx      |   2 +-
 frontend/src/views/Org/NonePage/NonePage.tsx  |   4 +-
 frontend/src/views/Org/NonePage/index.tsx     |   2 +-
 .../Project/AuditLogsPage/AuditLogsPage.tsx   |   6 +-
 .../AuditLogsPage/components/index.tsx        |   2 +-
 .../AuditLogsPage/components/types.tsx        |  22 +-
 .../src/views/Project/AuditLogsPage/index.tsx |   2 +-
 .../IPAllowListPage/IPAllowlistPage.tsx       |   4 +-
 .../IPAllowListPage/components/index.tsx      |   2 +-
 .../views/Project/IPAllowListPage/index.tsx   |   2 +-
 .../components/IdentityTab/IdentityTab.tsx    |  28 +-
 .../IdentitySection/IdentityRoles.tsx         |  18 +-
 .../components/IdentitySection/index.tsx      |   2 +-
 .../IdentityTab/components/index.tsx          |   2 +-
 .../components/IdentityTab/index.tsx          |   2 +-
 .../MemberListTab/MemberListTab.tsx           |  21 +-
 .../components/MemberListTab/MemberRoles.tsx  |  22 +-
 .../SecretRollbackPermission.tsx              |   8 +-
 .../SingleProjectPermission.tsx               |   8 +-
 .../WsProjectPermission.tsx                   |   8 +-
 .../ServiceTokenTab/ServiceTokenTab.tsx       |  28 +-
 .../AddServiceTokenModal.tsx                  |   2 +-
 .../ServiceTokenSection.tsx                   |   4 +-
 .../components/ServiceTokenSection/index.tsx  |   2 +-
 .../ServiceTokenTab/components/index.tsx      |   2 +-
 .../components/ServiceTokenTab/index.tsx      |   2 +-
 .../Project/MembersPage/components/index.tsx  |   2 +-
 .../SecretApprovalRequestChangeItem.tsx       |   2 +-
 .../components/CreateSecretForm/index.tsx     |   2 +-
 .../ProjectIndexSecretsSection/index.tsx      |   2 +-
 .../SecretOverviewTableRow/SecretEditRow.tsx  |   2 +-
 .../CreateRotationForm/CreateRotationForm.tsx |   2 +-
 .../steps/RotationInputForm.tsx               |   2 +-
 .../components/RiskStatusSelection.tsx        |   2 +-
 .../views/SecretScanning/components/index.tsx |   2 +-
 .../BillingSettingsPage.tsx                   |  26 +-
 .../BillingCloudTab/BillingCloudTab.tsx       |  14 +-
 .../BillingCloudTab/ManagePlansModal.tsx      | 104 +++--
 .../components/BillingCloudTab/index.tsx      |   2 +-
 .../BillingDetailsTab/BillingDetailsTab.tsx   |  18 +-
 .../BillingDetailsTab/TaxIDSection.tsx        |   6 +-
 .../components/BillingDetailsTab/index.tsx    |   2 +-
 .../BillingReceiptsTab/BillingReceiptsTab.tsx |  14 +-
 .../components/BillingReceiptsTab/index.tsx   |   2 +-
 .../BillingSelfHostedTab.tsx                  |  12 +-
 .../components/BillingSelfHostedTab/index.tsx |   2 +-
 .../BillingTabGroup/BillingTabGroup.tsx       |   2 +-
 .../components/BillingTabGroup/index.tsx      |   2 +-
 .../BillingSettingsPage/components/index.tsx  |   2 +-
 .../Settings/BillingSettingsPage/index.tsx    |   2 +-
 .../OrgSettingsPage/OrgSettingsPage.tsx       |  14 +-
 .../components/OrgAuthTab/LDAPModal.tsx       | 359 ++++++++----------
 .../OrgAuthTab/OrgGeneralAuthSection.tsx      | 152 ++++----
 .../components/OrgAuthTab/OrgLDAPSection.tsx  |  70 ++--
 .../components/OrgAuthTab/OrgSCIMSection.tsx  | 205 +++++-----
 .../components/OrgAuthTab/OrgSSOSection.tsx   |  50 ++-
 .../components/OrgAuthTab/ScimTokenModal.tsx  | 241 ++++++------
 .../components/OrgAuthTab/index.tsx           |   2 +-
 .../OrgDeleteSection/OrgDeleteSection.tsx     |   2 +-
 .../components/OrgDeleteSection/index.tsx     |   2 +-
 .../OrgGeneralTab/OrgGeneralTab.tsx           |   2 +-
 .../components/OrgGeneralTab/index.tsx        |   2 +-
 .../OrgIncidentContactsSection/index.tsx      |   4 +-
 .../OrgNameChangeSection.tsx                  |  28 +-
 .../components/OrgTabGroup/OrgTabGroup.tsx    |   4 +-
 .../components/OrgTabGroup/index.tsx          |   2 +-
 .../OrgSettingsPage/components/index.tsx      |   2 +-
 .../APIKeySection/AddAPIKeyModal.tsx          | 296 +++++++--------
 .../APIKeySection/index.tsx                   |   3 +-
 .../AuthMethodSection/index.tsx               |   2 +-
 .../ChangeLanguageSection.tsx                 |  48 +--
 .../ChangeLanguageSection/index.tsx           |   2 +-
 .../ChangePasswordSection/index.tsx           |   2 +-
 .../DeleteAccountSection.tsx                  | 101 +++--
 .../DeleteAccountSection/index.tsx            |   2 +-
 .../EmergencyKitSection.tsx                   | 144 ++++---
 .../EmergencyKitSection/index.tsx             |   2 +-
 .../PersonalAPIKeyTab/index.tsx               |   2 +-
 .../PersonalAuthTab/PersonalAuthTab.tsx       |  30 +-
 .../PersonalAuthTab/index.tsx                 |   2 +-
 .../PersonalGeneralTab/PersonalGeneralTab.tsx |  18 +-
 .../PersonalGeneralTab/index.tsx              |   2 +-
 .../PersonalSettingsPage.tsx                  |  24 +-
 .../PersonalTabGroup/index.tsx                |   2 +-
 .../SecuritySection/MFASection.tsx            |  72 ++--
 .../SecuritySection/index.tsx                 |   2 +-
 .../SessionsSection/SessionsSection.tsx       |  67 ++--
 .../SessionsSection/index.tsx                 |   2 +-
 .../UserNameSection/index.tsx                 |   2 +-
 .../Settings/PersonalSettingsPage/index.tsx   |   2 +-
 .../ProjectSettingsPage.tsx                   |   6 +-
 .../AutoCapitalizationSection/index.tsx       |   2 +-
 .../components/DeleteProjectSection/index.tsx |   2 +-
 .../components/E2EESection/index.tsx          |   4 +-
 .../components/ProjectGeneralTab/index.tsx    |   2 +-
 .../ProjectNameChangeSection.tsx              |   6 +-
 .../components/SecretTagsSection/index.tsx    |   2 +-
 .../ProjectSettingsPage/components/index.tsx  |   2 +-
 frontend/src/views/Signup/SignupSSO.tsx       |  81 ++--
 .../BackupPDFStep/BackupPDFStep.tsx           |  50 +--
 .../Signup/components/BackupPDFStep/index.tsx |   2 +-
 .../components/UserInfoSSOStep/index.tsx      |   2 +-
 .../src/views/Signup/components/index.tsx     |   2 +-
 frontend/src/views/Signup/index.tsx           |   2 +-
 .../DownloadBackupKeys/DownloadBackupKeys.tsx |  17 +-
 230 files changed, 2752 insertions(+), 2941 deletions(-)

diff --git a/frontend/src/components/utilities/telemetry/Telemetry.ts b/frontend/src/components/utilities/telemetry/Telemetry.ts
index 76e86fa37..6f6fc2367 100644
--- a/frontend/src/components/utilities/telemetry/Telemetry.ts
+++ b/frontend/src/components/utilities/telemetry/Telemetry.ts
@@ -1,7 +1,7 @@
 /* eslint-disable */
-import { PostHog } from 'posthog-js';
-import { initPostHog } from '@app/components/analytics/posthog';
-import { ENV } from '@app/components/utilities/config';
+import { PostHog } from "posthog-js";
+import { initPostHog } from "@app/components/analytics/posthog";
+import { ENV } from "@app/components/utilities/config";
 
 declare let TELEMETRY_CAPTURING_ENABLED: any;
 
@@ -13,23 +13,23 @@ class Capturer {
   }
 
   capture(item: string) {
-    if (ENV === 'production' && TELEMETRY_CAPTURING_ENABLED === "true") {
+    if (ENV === "production" && TELEMETRY_CAPTURING_ENABLED === "true") {
       try {
         this.api.capture(item);
       } catch (error) {
-        console.error('PostHog', error);
+        console.error("PostHog", error);
       }
     }
   }
 
   identify(id: string, email?: string) {
-    if (ENV === 'production' && TELEMETRY_CAPTURING_ENABLED === "true") {
+    if (ENV === "production" && TELEMETRY_CAPTURING_ENABLED === "true") {
       try {
         this.api.identify(id, {
           email: email
         });
       } catch (error) {
-        console.error('PostHog', error);
+        console.error("PostHog", error);
       }
     }
   }
diff --git a/frontend/src/components/v2/Accordion/Accordion.stories.tsx b/frontend/src/components/v2/Accordion/Accordion.stories.tsx
index bd17c8743..d49f2b62b 100644
--- a/frontend/src/components/v2/Accordion/Accordion.stories.tsx
+++ b/frontend/src/components/v2/Accordion/Accordion.stories.tsx
@@ -14,7 +14,7 @@ type Story = StoryObj<typeof Accordion>;
 
 export const Basic: Story = {
   render: (args) => (
-    <div className="flex justify-center w-full">
+    <div className="flex w-full justify-center">
       <Accordion {...args}>
         <AccordionItem value="section-1">
           <AccordionTrigger>Section 1</AccordionTrigger>
diff --git a/frontend/src/components/v2/Accordion/Accordion.tsx b/frontend/src/components/v2/Accordion/Accordion.tsx
index 9188b873e..dc7edd05e 100644
--- a/frontend/src/components/v2/Accordion/Accordion.tsx
+++ b/frontend/src/components/v2/Accordion/Accordion.tsx
@@ -8,7 +8,7 @@ export const AccordionItem = forwardRef<HTMLDivElement, AccordionPrimitive.Accor
   ({ children, className, ...props }, forwardedRef) => (
     <AccordionPrimitive.Item
       className={twMerge(
-        "mt-px overflow-hidden first:mt-0 data-[state=open]:border-l data-[state=open]:border-primary transition-all border-transparent",
+        "mt-px overflow-hidden border-transparent transition-all first:mt-0 data-[state=open]:border-l data-[state=open]:border-primary",
         className
       )}
       {...props}
@@ -27,7 +27,7 @@ export const AccordionTrigger = forwardRef<
   <AccordionPrimitive.Header className="flex">
     <AccordionPrimitive.Trigger
       className={twMerge(
-        "py-2 px-4 group data-[state=open]:text-primary h-11 hover:text-primary flex flex-1 outline-none items-center justify-between ",
+        "group flex h-11 flex-1 items-center justify-between py-2 px-4 outline-none hover:text-primary data-[state=open]:text-primary ",
         className
       )}
       {...props}
@@ -36,7 +36,7 @@ export const AccordionTrigger = forwardRef<
       {children}
       <FontAwesomeIcon
         icon={faChevronDown}
-        className="ease-[cubic-bezier(0.87,_0,_0.13,_1)] transition-transform duration-300 group-data-[state=open]:rotate-180 text-sm"
+        className="text-sm transition-transform duration-300 ease-[cubic-bezier(0.87,_0,_0.13,_1)] group-data-[state=open]:rotate-180"
         aria-hidden
       />
     </AccordionPrimitive.Trigger>
@@ -51,13 +51,13 @@ export const AccordionContent = forwardRef<
 >(({ children, className, ...props }, forwardedRef) => (
   <AccordionPrimitive.Content
     className={twMerge(
-      "data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp overflow-hidden",
+      "overflow-hidden data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp",
       className
     )}
     {...props}
     ref={forwardedRef}
   >
-    <div className="text-sm py-2 px-4">{children}</div>
+    <div className="py-2 px-4 text-sm">{children}</div>
   </AccordionPrimitive.Content>
 ));
 
diff --git a/frontend/src/components/v2/Accordion/index.tsx b/frontend/src/components/v2/Accordion/index.tsx
index 831904d54..fd2e2ddd3 100644
--- a/frontend/src/components/v2/Accordion/index.tsx
+++ b/frontend/src/components/v2/Accordion/index.tsx
@@ -1 +1 @@
-export { Accordion, AccordionContent, AccordionItem,AccordionTrigger } from "./Accordion";
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./Accordion";
diff --git a/frontend/src/components/v2/Card/Card.tsx b/frontend/src/components/v2/Card/Card.tsx
index 4d7c134a0..0e86d0357 100644
--- a/frontend/src/components/v2/Card/Card.tsx
+++ b/frontend/src/components/v2/Card/Card.tsx
@@ -10,7 +10,7 @@ export type CardTitleProps = {
 export const CardTitle = ({ children, className, subTitle }: CardTitleProps) => (
   <div
     className={twMerge(
-      "px-6 py-4 mb-5 font-sans text-lg font-normal border-b border-mineshaft-600 break-words",
+      "mb-5 break-words border-b border-mineshaft-600 px-6 py-4 font-sans text-lg font-normal",
       className
     )}
   >
diff --git a/frontend/src/components/v2/Checkbox/Checkbox.tsx b/frontend/src/components/v2/Checkbox/Checkbox.tsx
index dc0e1a491..0e4581372 100644
--- a/frontend/src/components/v2/Checkbox/Checkbox.tsx
+++ b/frontend/src/components/v2/Checkbox/Checkbox.tsx
@@ -30,7 +30,7 @@ export const Checkbox = ({
     <div className="flex items-center font-inter text-bunker-300">
       <CheckboxPrimitive.Root
         className={twMerge(
-          "flex items-center flex-shrink-0 justify-center w-4 h-4 transition-all rounded shadow border border-mineshaft-400 hover:bg-mineshaft-500 bg-mineshaft-600",
+          "flex h-4 w-4 flex-shrink-0 items-center justify-center rounded border border-mineshaft-400 bg-mineshaft-600 shadow transition-all hover:bg-mineshaft-500",
           isDisabled && "bg-bunker-400 hover:bg-bunker-400",
           isChecked && "bg-primary hover:bg-primary",
           Boolean(children) && "mr-3",
@@ -46,7 +46,7 @@ export const Checkbox = ({
           <FontAwesomeIcon icon={faCheck} size="sm" />
         </CheckboxPrimitive.Indicator>
       </CheckboxPrimitive.Root>
-      <label className="text-sm whitespace-nowrap truncate" htmlFor={id}>
+      <label className="truncate whitespace-nowrap text-sm" htmlFor={id}>
         {children}
         {isRequired && <span className="pl-1 text-red">*</span>}
       </label>
diff --git a/frontend/src/components/v2/DeleteActionModal/DeleteActionModal.tsx b/frontend/src/components/v2/DeleteActionModal/DeleteActionModal.tsx
index 1eb2faaf4..2657686de 100644
--- a/frontend/src/components/v2/DeleteActionModal/DeleteActionModal.tsx
+++ b/frontend/src/components/v2/DeleteActionModal/DeleteActionModal.tsx
@@ -58,7 +58,7 @@ export const DeleteActionModal = ({
         title={title}
         subTitle={subTitle}
         footerContent={
-          <div className="flex items-center mx-2">
+          <div className="mx-2 flex items-center">
             <Button
               className="mr-4"
               colorSchema="danger"
@@ -91,7 +91,11 @@ export const DeleteActionModal = ({
             }
             className="mb-0"
           >
-            <Input value={inputData} onChange={(e) => setInputData(e.target.value)} placeholder="Type to delete..." />
+            <Input
+              value={inputData}
+              onChange={(e) => setInputData(e.target.value)}
+              placeholder="Type to delete..."
+            />
           </FormControl>
         </form>
       </ModalContent>
diff --git a/frontend/src/components/v2/Drawer/Drawer.tsx b/frontend/src/components/v2/Drawer/Drawer.tsx
index 3a92c14db..027946a2e 100644
--- a/frontend/src/components/v2/Drawer/Drawer.tsx
+++ b/frontend/src/components/v2/Drawer/Drawer.tsx
@@ -45,7 +45,7 @@ export const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
         ref={forwardedRef}
         className={twMerge(drawerContentVariation({ direction, className }))}
       >
-        <Card isRounded={false} className="h-full w-full dark">
+        <Card isRounded={false} className="dark h-full w-full">
           {title && (
             <CardTitle subTitle={subTitle} className="px-4">
               {title}
diff --git a/frontend/src/components/v2/Drawer/index.tsx b/frontend/src/components/v2/Drawer/index.tsx
index d35708891..4f1a34981 100644
--- a/frontend/src/components/v2/Drawer/index.tsx
+++ b/frontend/src/components/v2/Drawer/index.tsx
@@ -1 +1 @@
-export { Drawer, DrawerClose,DrawerContent, DrawerTrigger } from "./Drawer";
+export { Drawer, DrawerClose, DrawerContent, DrawerTrigger } from "./Drawer";
diff --git a/frontend/src/components/v2/Dropdown/Dropdown.stories.tsx b/frontend/src/components/v2/Dropdown/Dropdown.stories.tsx
index 0679cfe59..7ae57deb9 100644
--- a/frontend/src/components/v2/Dropdown/Dropdown.stories.tsx
+++ b/frontend/src/components/v2/Dropdown/Dropdown.stories.tsx
@@ -25,7 +25,7 @@ type Story = StoryObj<typeof DropdownMenuContent>;
 
 export const Basic: Story = {
   render: (args) => (
-    <div className="flex justify-center w-full">
+    <div className="flex w-full justify-center">
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
           <IconButton ariaLabel="add">
@@ -43,7 +43,7 @@ export const Basic: Story = {
 
 export const Icons: Story = {
   render: (args) => (
-    <div className="flex justify-center w-full">
+    <div className="flex w-full justify-center">
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
           <IconButton ariaLabel="add">
@@ -65,7 +65,7 @@ export const Icons: Story = {
 
 export const WithDivider: Story = {
   render: (args) => (
-    <div className="flex justify-center w-full">
+    <div className="flex w-full justify-center">
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
           <IconButton ariaLabel="add">
@@ -86,7 +86,7 @@ export const WithDivider: Story = {
 
 export const Group: Story = {
   render: (args) => (
-    <div className="flex justify-center w-full">
+    <div className="flex w-full justify-center">
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
           <IconButton ariaLabel="add">
diff --git a/frontend/src/components/v2/Dropdown/Dropdown.tsx b/frontend/src/components/v2/Dropdown/Dropdown.tsx
index 057a7b4a6..99a148bbe 100644
--- a/frontend/src/components/v2/Dropdown/Dropdown.tsx
+++ b/frontend/src/components/v2/Dropdown/Dropdown.tsx
@@ -24,7 +24,7 @@ export const DropdownMenuContent = forwardRef<HTMLDivElement, DropdownMenuConten
           {...props}
           ref={forwardedRef}
           className={twMerge(
-            "min-w-[220px] z-30 bg-mineshaft-900 border border-mineshaft-600 will-change-auto text-bunker-300 rounded-md shadow data-[side=top]:animate-slideDownAndFade data-[side=left]:animate-slideRightAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade",
+            "z-30 min-w-[220px] rounded-md border border-mineshaft-600 bg-mineshaft-900 text-bunker-300 shadow will-change-auto data-[side=top]:animate-slideDownAndFade data-[side=left]:animate-slideRightAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade",
             className
           )}
         >
@@ -48,7 +48,7 @@ export const DropdownSubMenuContent = forwardRef<HTMLDivElement, DropdownSubMenu
           {...props}
           ref={forwardedRef}
           className={twMerge(
-            "min-w-[220px] z-30 bg-mineshaft-900 border border-mineshaft-600 will-change-auto text-bunker-300 rounded-md shadow data-[side=top]:animate-slideDownAndFade data-[side=left]:animate-slideRightAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade",
+            "z-30 min-w-[220px] rounded-md border border-mineshaft-600 bg-mineshaft-900 text-bunker-300 shadow will-change-auto data-[side=top]:animate-slideDownAndFade data-[side=left]:animate-slideRightAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade",
             className
           )}
         >
@@ -66,7 +66,7 @@ export type DropdownLabelProps = DropdownMenuPrimitive.MenuLabelProps;
 export const DropdownMenuLabel = ({ className, ...props }: DropdownLabelProps) => (
   <DropdownMenuPrimitive.Label
     {...props}
-    className={twMerge("text-xs text-bunker-400 px-4 pt-2 pb-1", className)}
+    className={twMerge("px-4 pt-2 pb-1 text-xs text-bunker-400", className)}
   />
 );
 
@@ -91,14 +91,14 @@ export const DropdownMenuItem = <T extends ElementType = "button">({
   <DropdownMenuPrimitive.Item
     {...props}
     className={twMerge(
-      "text-xs text-mineshaft-200 block font-inter px-4 py-2 data-[highlighted]:bg-mineshaft-700 rounded-sm outline-none cursor-pointer",
+      "block cursor-pointer rounded-sm px-4 py-2 font-inter text-xs text-mineshaft-200 outline-none data-[highlighted]:bg-mineshaft-700",
       className
     )}
   >
     <Item type="button" role="menuitem" className="flex w-full items-center" ref={inputRef}>
-      {icon && iconPos === "left" && <span className="flex items-center mr-2">{icon}</span>}
+      {icon && iconPos === "left" && <span className="mr-2 flex items-center">{icon}</span>}
       <span className="flex-grow text-left">{children}</span>
-      {icon && iconPos === "right" && <span className="flex items-center ml-2">{icon}</span>}
+      {icon && iconPos === "right" && <span className="ml-2 flex items-center">{icon}</span>}
     </Item>
   </DropdownMenuPrimitive.Item>
 );
@@ -124,14 +124,14 @@ export const DropdownSubMenuTrigger = <T extends ElementType = "button">({
   <DropdownMenuPrimitive.SubTrigger
     {...props}
     className={twMerge(
-      "text-xs text-mineshaft-200 block font-inter px-4 py-2 data-[highlighted]:bg-mineshaft-700 rounded-sm outline-none cursor-pointer",
+      "block cursor-pointer rounded-sm px-4 py-2 font-inter text-xs text-mineshaft-200 outline-none data-[highlighted]:bg-mineshaft-700",
       className
     )}
   >
     <Item type="button" role="menuitem" className="flex w-full items-center" ref={inputRef}>
-      {icon && iconPos === "left" && <span className="flex items-center mr-2">{icon}</span>}
+      {icon && iconPos === "left" && <span className="mr-2 flex items-center">{icon}</span>}
       <span className="flex-grow text-left">{children}</span>
-      {icon && iconPos === "right" && <span className="flex items-center ml-2">{icon}</span>}
+      {icon && iconPos === "right" && <span className="ml-2 flex items-center">{icon}</span>}
     </Item>
   </DropdownMenuPrimitive.SubTrigger>
 );
@@ -143,7 +143,7 @@ export const DropdownMenuGroup = forwardRef<HTMLDivElement, DropdownMenuGroupPro
   ({ ...props }, ref) => (
     <DropdownMenuPrimitive.Group
       {...props}
-      className={twMerge("text-xs py-2 pl-3", props.className)}
+      className={twMerge("py-2 pl-3 text-xs", props.className)}
       ref={ref}
     />
   )
@@ -159,7 +159,7 @@ export const DropdownMenuSeparator = forwardRef<
   <DropdownMenuPrimitive.Separator
     ref={ref}
     {...props}
-    className={twMerge("h-[1px] bg-gray-700 m-1", className)}
+    className={twMerge("m-1 h-[1px] bg-gray-700", className)}
   />
 ));
 
diff --git a/frontend/src/components/v2/EmailServiceSetupModal/EmailServiceSetupModal.tsx b/frontend/src/components/v2/EmailServiceSetupModal/EmailServiceSetupModal.tsx
index ec130fd29..a81321cd5 100644
--- a/frontend/src/components/v2/EmailServiceSetupModal/EmailServiceSetupModal.tsx
+++ b/frontend/src/components/v2/EmailServiceSetupModal/EmailServiceSetupModal.tsx
@@ -10,9 +10,10 @@ export const EmailServiceSetupModal = ({ isOpen, onOpenChange }: Props): JSX.Ele
   <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
     <ModalContent title="Email service not configured">
       <p className="mb-4 text-bunker-300">
-        The administrators of this Infisical instance have not yet set up an email service provider required to perform this action
+        The administrators of this Infisical instance have not yet set up an email service provider
+        required to perform this action
       </p>
-      
+
       <a href="https://infisical.com/docs/self-hosting/configuration/email">
         <Button className="mr-4">Learn more</Button>
       </a>
diff --git a/frontend/src/components/v2/FormControl/FormControl.tsx b/frontend/src/components/v2/FormControl/FormControl.tsx
index 8f2e57f48..9f4e33cac 100644
--- a/frontend/src/components/v2/FormControl/FormControl.tsx
+++ b/frontend/src/components/v2/FormControl/FormControl.tsx
@@ -23,7 +23,7 @@ export const FormLabel = ({ id, label, isRequired, icon, className }: FormLabelP
     {label}
     {isRequired && <span className="ml-1 text-red">*</span>}
     {icon && (
-      <span className="ml-2 text-mineshaft-300 hover:text-mineshaft-200 cursor-default">
+      <span className="ml-2 cursor-default text-mineshaft-300 hover:text-mineshaft-200">
         {icon}
       </span>
     )}
diff --git a/frontend/src/components/v2/HoverCard/HoverCard.tsx b/frontend/src/components/v2/HoverCard/HoverCard.tsx
index 7b0e64cad..32393a238 100644
--- a/frontend/src/components/v2/HoverCard/HoverCard.tsx
+++ b/frontend/src/components/v2/HoverCard/HoverCard.tsx
@@ -10,22 +10,16 @@ type Props = {
 
 export type HoverCardProps = Props;
 
-export const HoverObject = ({
-    text,
-    icon,
-    color
-  }: Props): JSX.Element => (
+export const HoverObject = ({ text, icon, color }: Props): JSX.Element => (
   <HoverCard.Root openDelay={50}>
     <HoverCard.Trigger asChild>
-      <a
-        className="ImageTrigger z-20"
-      >
+      <a className="ImageTrigger z-20">
         <FontAwesomeIcon icon={icon} className={`text-${color}`} />
       </a>
     </HoverCard.Trigger>
     <HoverCard.Portal>
       <HoverCard.Content className="HoverCardContent z-[300]" sideOffset={5}>
-        <div className='bg-bunker-700 border border-mineshaft-600 p-2 rounded-md drop-shadow-xl text-bunker-300'>
+        <div className="rounded-md border border-mineshaft-600 bg-bunker-700 p-2 text-bunker-300 drop-shadow-xl">
           <div style={{ display: "flex", flexDirection: "column", gap: 15 }}>
             <div>
               <div className="Text bold">{text}</div>
diff --git a/frontend/src/components/v2/HoverCardv2/index.tsx b/frontend/src/components/v2/HoverCardv2/index.tsx
index 6a7e7ea18..30419fca6 100644
--- a/frontend/src/components/v2/HoverCardv2/index.tsx
+++ b/frontend/src/components/v2/HoverCardv2/index.tsx
@@ -1 +1 @@
-export { HoverCard,HoverCardContent, HoverCardTrigger } from "./HoverCardv2";
+export { HoverCard, HoverCardContent, HoverCardTrigger } from "./HoverCardv2";
diff --git a/frontend/src/components/v2/Modal/Modal.tsx b/frontend/src/components/v2/Modal/Modal.tsx
index 98a4ad71a..250feeff1 100644
--- a/frontend/src/components/v2/Modal/Modal.tsx
+++ b/frontend/src/components/v2/Modal/Modal.tsx
@@ -29,7 +29,7 @@ export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
         <Card
           isRounded
           className={twMerge(
-            "fixed top-1/2 left-1/2 z-30 dark:[color-scheme:dark] max-h-screen thin-scrollbar max-w-xl -translate-y-2/4 -translate-x-2/4 animate-popIn border border-mineshaft-600 drop-shadow-2xl",
+            "thin-scrollbar fixed top-1/2 left-1/2 z-30 max-h-screen max-w-xl -translate-y-2/4 -translate-x-2/4 animate-popIn border border-mineshaft-600 drop-shadow-2xl dark:[color-scheme:dark]",
             className
           )}
         >
diff --git a/frontend/src/components/v2/Pagination/Pagination.tsx b/frontend/src/components/v2/Pagination/Pagination.tsx
index cdde53640..c8afb389b 100644
--- a/frontend/src/components/v2/Pagination/Pagination.tsx
+++ b/frontend/src/components/v2/Pagination/Pagination.tsx
@@ -44,7 +44,7 @@ export const Pagination = ({
   return (
     <div
       className={twMerge(
-        "flex items-center justify-end text-white w-full py-3 px-4 bg-mineshaft-800",
+        "flex w-full items-center justify-end bg-mineshaft-800 py-3 px-4 text-white",
         className
       )}
     >
diff --git a/frontend/src/components/v2/Popover/Popover.tsx b/frontend/src/components/v2/Popover/Popover.tsx
index 82d1852fa..04c5d688b 100644
--- a/frontend/src/components/v2/Popover/Popover.tsx
+++ b/frontend/src/components/v2/Popover/Popover.tsx
@@ -3,39 +3,42 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import * as Popover from "@radix-ui/react-popover";
 
 type Props = {
-  children: any; 
-  text: string; 
-  onChangeHandler: (value: string, id: string) => void; 
+  children: any;
+  text: string;
+  onChangeHandler: (value: string, id: string) => void;
   id: string;
 };
 
 export type PopoverProps = Props;
 
-export const PopoverObject = ({children, text, onChangeHandler, id}: Props) => (
+export const PopoverObject = ({ children, text, onChangeHandler, id }: Props) => (
   <Popover.Root>
-    <Popover.Trigger asChild className='data-[state=open]:outline data-[state=open]:outline-primary data-[state=closed]:hover:outline data-[state=closed]:hover:outline-mineshaft-400'>
+    <Popover.Trigger
+      asChild
+      className="data-[state=open]:outline data-[state=open]:outline-primary data-[state=closed]:hover:outline data-[state=closed]:hover:outline-mineshaft-400"
+    >
       {children}
     </Popover.Trigger>
     <Popover.Portal>
       <Popover.Content
-        className="rounded z-[100] p-3 w-[460px] min-h-fit border border-chicago-700 bg-mineshaft-600 shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2)] focus:shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2),0_0_0_2px_theme(colors.violet7)] will-change-[transform,opacity] data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade"
+        className="z-[100] min-h-fit w-[460px] rounded border border-chicago-700 bg-mineshaft-600 p-3 shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2)] will-change-[transform,opacity] focus:shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2),0_0_0_2px_theme(colors.violet7)] data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade"
         sideOffset={5}
         hideWhenDetached
         side="left"
       >
-        <div className="flex flex-col pt-2 dark">
-          <p className="text-bunker-200 text-[15px] leading-[0px] font-medium mb-5">Comment</p>
+        <div className="dark flex flex-col pt-2">
+          <p className="mb-5 text-[15px] font-medium leading-[0px] text-bunker-200">Comment</p>
           <textarea
             onChange={(e) => onChangeHandler(e.target.value, id)}
             // type={type}
             value={text}
-            className='z-10 dark:[color-scheme:dark] peer h-[20rem] ph-no-capture bg-bunker-600 border border-mineshaft-500 rounded-md py-2.5 caret-bunker-200 text-sm px-2 w-full outline-none text-bunker-300 focus:text-bunker-100 placeholder:text-bunker-400 placeholder:focus:text-transparent placeholder duration-200'
+            className="ph-no-capture placeholder peer z-10 h-[20rem] w-full rounded-md border border-mineshaft-500 bg-bunker-600 py-2.5 px-2 text-sm text-bunker-300 caret-bunker-200 outline-none duration-200 placeholder:text-bunker-400 focus:text-bunker-100 placeholder:focus:text-transparent dark:[color-scheme:dark]"
             spellCheck="false"
-            placeholder='–'
+            placeholder="–"
           />
         </div>
         <Popover.Close
-          className="rounded-full h-[25px] w-[25px] inline-flex items-center justify-center text-bunker-300 hover:text-white absolute top-[5px] right-[5px] hover:bg-violet4 focus:shadow-[0_0_0_2px] focus:shadow-violet7 outline-none cursor-default"
+          className="hover:bg-violet4 focus:shadow-violet7 absolute top-[5px] right-[5px] inline-flex h-[25px] w-[25px] cursor-default items-center justify-center rounded-full text-bunker-300 outline-none hover:text-white focus:shadow-[0_0_0_2px]"
           aria-label="Close"
         >
           <FontAwesomeIcon icon={faXmark} />
diff --git a/frontend/src/components/v2/Popoverv2/index.tsx b/frontend/src/components/v2/Popoverv2/index.tsx
index 3bbe21b96..ffad09cdc 100644
--- a/frontend/src/components/v2/Popoverv2/index.tsx
+++ b/frontend/src/components/v2/Popoverv2/index.tsx
@@ -1 +1 @@
-export { Popover,PopoverContent, PopoverTrigger } from "./Popoverv2";
+export { Popover, PopoverContent, PopoverTrigger } from "./Popoverv2";
diff --git a/frontend/src/components/v2/RadioGroup/RadioGroup.tsx b/frontend/src/components/v2/RadioGroup/RadioGroup.tsx
index 1919e4f7a..d03770455 100644
--- a/frontend/src/components/v2/RadioGroup/RadioGroup.tsx
+++ b/frontend/src/components/v2/RadioGroup/RadioGroup.tsx
@@ -6,35 +6,35 @@ export type RadioGroupProps = RadioGroupPrimitive.RadioGroupProps;
 
 // Note this component is not customizable (Heroku integration and potentially other pages depend on it)
 export const RadioGroup = ({ className, children, ...props }: RadioGroupProps) => (
-  <RadioGroupPrimitive.Root 
-    className={twMerge("flex flex-row gap-5 px-6 mb-6", className)}
+  <RadioGroupPrimitive.Root
+    className={twMerge("mb-6 flex flex-row gap-5 px-6", className)}
     defaultValue="App"
     aria-label="View density"
     {...props}
-  >  
+  >
     <div className="flex items-center">
       <RadioGroupPrimitive.Item
-        className="bg-bunker-400/20 w-[20px] h-[20px] rounded-full hover:bg-bunker-400/40 border border-bunker-400/60 duration-200 outline-none cursor-default"
+        className="h-[20px] w-[20px] cursor-default rounded-full border border-bunker-400/60 bg-bunker-400/20 outline-none duration-200 hover:bg-bunker-400/40"
         value="App"
         id="r1"
       >
-        <RadioGroupPrimitive.Indicator className="flex items-center justify-center w-full h-full relative after:content-[''] after:block after:w-[11px] after:h-[11px] after:rounded-[50%] after:bg-primary" />
+        <RadioGroupPrimitive.Indicator className="relative flex h-full w-full items-center justify-center after:block after:h-[11px] after:w-[11px] after:rounded-[50%] after:bg-primary after:content-['']" />
       </RadioGroupPrimitive.Item>
-      <label className="text-bunker-200 text-sm leading-none pl-2" htmlFor="r1">
+      <label className="pl-2 text-sm leading-none text-bunker-200" htmlFor="r1">
         App
       </label>
     </div>
     <div className="flex items-center">
       <RadioGroupPrimitive.Item
-        className="bg-bunker-400/20 w-[22px] h-[22px] rounded-full hover:bg-bunker-400/40 border border-bunker-400/60 duration-200 outline-none cursor-default"
+        className="h-[22px] w-[22px] cursor-default rounded-full border border-bunker-400/60 bg-bunker-400/20 outline-none duration-200 hover:bg-bunker-400/40"
         value="Pipeline"
         id="r2"
       >
-        <RadioGroupPrimitive.Indicator className="flex items-center justify-center w-full h-full relative after:content-[''] after:block after:w-[13px] after:h-[13px] after:rounded-[50%] after:bg-primary" />
+        <RadioGroupPrimitive.Indicator className="relative flex h-full w-full items-center justify-center after:block after:h-[13px] after:w-[13px] after:rounded-[50%] after:bg-primary after:content-['']" />
       </RadioGroupPrimitive.Item>
-      <label className="text-bunker-200 text-sm leading-none pl-2" htmlFor="r2">
+      <label className="pl-2 text-sm leading-none text-bunker-200" htmlFor="r2">
         Pipeline
       </label>
     </div>
   </RadioGroupPrimitive.Root>
-);
\ No newline at end of file
+);
diff --git a/frontend/src/components/v2/Select/Select.tsx b/frontend/src/components/v2/Select/Select.tsx
index 2b45dceac..81c4fb177 100644
--- a/frontend/src/components/v2/Select/Select.tsx
+++ b/frontend/src/components/v2/Select/Select.tsx
@@ -1,6 +1,6 @@
 import { forwardRef, ReactNode } from "react";
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
-import { faCaretDown, faCaretUp,faCheck } from "@fortawesome/free-solid-svg-icons";
+import { faCaretDown, faCaretUp, faCheck } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { twMerge } from "tailwind-merge";
@@ -57,7 +57,7 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
         <SelectPrimitive.Portal>
           <SelectPrimitive.Content
             className={twMerge(
-              "relative top-1 z-[100] overflow-hidden rounded-md bg-mineshaft-900 border border-mineshaft-600 font-inter text-bunker-100 shadow-md",
+              "relative top-1 z-[100] overflow-hidden rounded-md border border-mineshaft-600 bg-mineshaft-900 font-inter text-bunker-100 shadow-md",
               dropdownContainerClassName
             )}
             position={position}
diff --git a/frontend/src/components/v2/Spinner/Spinner.tsx b/frontend/src/components/v2/Spinner/Spinner.tsx
index 4f0cb15aa..d8a344e3e 100644
--- a/frontend/src/components/v2/Spinner/Spinner.tsx
+++ b/frontend/src/components/v2/Spinner/Spinner.tsx
@@ -20,7 +20,7 @@ export const Spinner = ({ className, size = "md" }: Props): JSX.Element => {
       <svg
         aria-hidden="true"
         className={twMerge(
-          "text-gray-200 animate-spin dark:text-gray-600 fill-primary m-1",
+          "m-1 animate-spin fill-primary text-gray-200 dark:text-gray-600",
           sizeChart[size],
           className
         )}
diff --git a/frontend/src/components/v2/Stepper/Stepper.tsx b/frontend/src/components/v2/Stepper/Stepper.tsx
index 8389121c0..89a8e30ab 100644
--- a/frontend/src/components/v2/Stepper/Stepper.tsx
+++ b/frontend/src/components/v2/Stepper/Stepper.tsx
@@ -14,7 +14,7 @@ export const Stepper = ({ activeStep, children, direction, className }: StepperP
   return (
     <div
       className={twMerge(
-        "flex items-center w-full space-x-3 p-2 border border-bunker-300/30 rounded-md",
+        "flex w-full items-center space-x-3 rounded-md border border-bunker-300/30 p-2",
         className
       )}
     >
@@ -25,15 +25,15 @@ export const Stepper = ({ activeStep, children, direction, className }: StepperP
         return (
           <div
             className={twMerge(
-              "flex items-center space-x-3 flex-shrink-0",
+              "flex flex-shrink-0 items-center space-x-3",
               isNotLast && "flex-grow"
             )}
           >
-            <div className="flex items-center space-x-2 flex-shrink-0">
+            <div className="flex flex-shrink-0 items-center space-x-2">
               <div
                 className={twMerge(
-                  "w-7 h-7 flex items-center justify-center font-medium text-mineshaft-800 text-sm rounded-full transition-all",
-                  isCompleted ? "bg-primary" : "border text-bunker-300 border-primary/30",
+                  "flex h-7 w-7 items-center justify-center rounded-full text-sm font-medium text-mineshaft-800 transition-all",
+                  isCompleted ? "bg-primary" : "border border-primary/30 text-bunker-300",
                   isActive && "bg-primary text-mineshaft-800"
                 )}
               >
@@ -71,7 +71,7 @@ export type StepProps = {
 export const Step = ({ title, description }: StepProps) => {
   return (
     <div className="flex flex-col text-gray-300">
-      <div className="font-medium text-sm">{title}</div>
+      <div className="text-sm font-medium">{title}</div>
       {description && <div className="text-xs">{description}</div>}
     </div>
   );
diff --git a/frontend/src/components/v2/Stepper/index.tsx b/frontend/src/components/v2/Stepper/index.tsx
index b90544cdd..a3d7aa3f8 100644
--- a/frontend/src/components/v2/Stepper/index.tsx
+++ b/frontend/src/components/v2/Stepper/index.tsx
@@ -1,2 +1,2 @@
-export type { StepperProps,StepProps } from "./Stepper";
-export { Step,Stepper } from "./Stepper";
+export type { StepperProps, StepProps } from "./Stepper";
+export { Step, Stepper } from "./Stepper";
diff --git a/frontend/src/components/v2/Table/index.tsx b/frontend/src/components/v2/Table/index.tsx
index 8270cb002..ef3987cc0 100644
--- a/frontend/src/components/v2/Table/index.tsx
+++ b/frontend/src/components/v2/Table/index.tsx
@@ -6,5 +6,6 @@ export type {
   TFootProps,
   THeadProps,
   ThProps,
-  TrProps} from "./Table";
-export { Table, TableContainer, TableSkeleton, TBody, Td, TFoot,Th, THead, Tr } from "./Table";
+  TrProps
+} from "./Table";
+export { Table, TableContainer, TableSkeleton, TBody, Td, TFoot, Th, THead, Tr } from "./Table";
diff --git a/frontend/src/components/v2/Tabs/Tabs.tsx b/frontend/src/components/v2/Tabs/Tabs.tsx
index 98bb649bd..ca5c22dcb 100644
--- a/frontend/src/components/v2/Tabs/Tabs.tsx
+++ b/frontend/src/components/v2/Tabs/Tabs.tsx
@@ -13,7 +13,7 @@ export type TabListProps = TabsPrimitive.TabsListProps;
 
 export const TabList = ({ className, children, ...props }: TabListProps) => (
   <TabsPrimitive.List
-    className={twMerge("flex-shrink-0 flex  border-b-2 border-mineshaft-800", className)}
+    className={twMerge("flex flex-shrink-0  border-b-2 border-mineshaft-800", className)}
     {...props}
   >
     {children}
@@ -25,7 +25,7 @@ export type TabProps = TabsPrimitive.TabsTriggerProps;
 export const Tab = ({ className, children, ...props }: TabProps) => (
   <TabsPrimitive.Trigger
     className={twMerge(
-      "px-3 h-10 font-medium text-sm flex items-center justify-center select-none first:rounded-tl-md last:rounded-tr-md hover:text-mineshaft-200 text-mineshaft-400 transition-all data-[state=active]:text-white data-[state=active]:border-b data-[state=active]:border-primary",
+      "flex h-10 select-none items-center justify-center px-3 text-sm font-medium text-mineshaft-400 transition-all first:rounded-tl-md last:rounded-tr-md hover:text-mineshaft-200 data-[state=active]:border-b data-[state=active]:border-primary data-[state=active]:text-white",
       className
     )}
     {...props}
@@ -38,7 +38,7 @@ export type TabPanelProps = TabsPrimitive.TabsContentProps;
 
 export const TabPanel = ({ className, children, ...props }: TabPanelProps) => (
   <TabsPrimitive.Content
-    className={twMerge("outline-none flex-grow py-5 rounded-bl-md rounded-br-md", className)}
+    className={twMerge("flex-grow rounded-bl-md rounded-br-md py-5 outline-none", className)}
     {...props}
   >
     {children}
diff --git a/frontend/src/components/v2/Tabs/index.tsx b/frontend/src/components/v2/Tabs/index.tsx
index 4e2246aaf..0a17c0dca 100644
--- a/frontend/src/components/v2/Tabs/index.tsx
+++ b/frontend/src/components/v2/Tabs/index.tsx
@@ -1,2 +1,2 @@
-export type { TabListProps,TabPanelProps, TabProps, TabsProps } from "./Tabs";
+export type { TabListProps, TabPanelProps, TabProps, TabsProps } from "./Tabs";
 export { Tab, TabList, TabPanel, Tabs } from "./Tabs";
diff --git a/frontend/src/context/AuthContext/AuthContext.tsx b/frontend/src/context/AuthContext/AuthContext.tsx
index 3c615485b..2950b5cc5 100644
--- a/frontend/src/context/AuthContext/AuthContext.tsx
+++ b/frontend/src/context/AuthContext/AuthContext.tsx
@@ -39,7 +39,7 @@ export const AuthProvider = ({ children }: Props): JSX.Element => {
   // wait for app to load the auth state
   if (isLoading || !isReady) {
     return (
-      <div className="flex items-center justify-center w-screen h-screen bg-bunker-800">
+      <div className="flex h-screen w-screen items-center justify-center bg-bunker-800">
         <img
           src="/images/loading/loading.gif"
           height={70}
diff --git a/frontend/src/context/ProjectPermissionContext/index.tsx b/frontend/src/context/ProjectPermissionContext/index.tsx
index 68da4a459..dca8dc168 100644
--- a/frontend/src/context/ProjectPermissionContext/index.tsx
+++ b/frontend/src/context/ProjectPermissionContext/index.tsx
@@ -1,3 +1,3 @@
 export { ProjectPermissionProvider, useProjectPermission } from "./ProjectPermissionContext";
 export type { ProjectPermissionSet, TProjectPermission } from "./types";
-export { ProjectPermissionActions,ProjectPermissionSub } from "./types";
+export { ProjectPermissionActions, ProjectPermissionSub } from "./types";
diff --git a/frontend/src/context/ServerConfigContext/ServerConfigContext.tsx b/frontend/src/context/ServerConfigContext/ServerConfigContext.tsx
index 291765e3b..659cff968 100644
--- a/frontend/src/context/ServerConfigContext/ServerConfigContext.tsx
+++ b/frontend/src/context/ServerConfigContext/ServerConfigContext.tsx
@@ -38,22 +38,31 @@ export const ServerConfigProvider = ({ children }: Props): JSX.Element => {
       <div className="relative mx-auto flex h-screen w-full flex-col items-center justify-center space-y-8 bg-bunker-800 px-8 text-mineshaft-50 dark:[color-scheme:dark]">
         <Head>
           <title>Infisical Maintenance Mode</title>
-          <link rel='icon' href='/infisical.ico' />
+          <link rel="icon" href="/infisical.ico" />
         </Head>
-        <img src="/images/maintenance.png" height={175} width={300} alt="maintenance mode" className="w-[40rem]"/>
+        <img
+          src="/images/maintenance.png"
+          height={175}
+          width={300}
+          alt="maintenance mode"
+          className="w-[40rem]"
+        />
         <p className="mx-8 mb-4 flex justify-center bg-gradient-to-tr from-mineshaft-300 to-white bg-clip-text text-4xl font-bold text-transparent md:mx-16">
           Scheduled Maintenance
         </p>
         <div className="mt-2 text-center text-lg text-bunker-300">
-          Infisical is undergoing planned maintenance. <br /> No action is required on your end — your applications will continue to fetch secrets. 
-          <br /> If you have questions, please <a
-            className="text-bunker-300 underline underline-offset-4 decoration-primary-800 hover:decoration-primary-600 hover:text-mineshaft-100 duration-200"
+          Infisical is undergoing planned maintenance. <br /> No action is required on your end —
+          your applications will continue to fetch secrets.
+          <br /> If you have questions, please{" "}
+          <a
+            className="text-bunker-300 underline decoration-primary-800 underline-offset-4 duration-200 hover:text-mineshaft-100 hover:decoration-primary-600"
             href="https://infisical.com/slack"
             target="_blank"
             rel="noopener noreferrer"
           >
             join our Slack community
-          </a>.
+          </a>
+          .
         </div>
       </div>
     );
diff --git a/frontend/src/context/ServerConfigContext/index.tsx b/frontend/src/context/ServerConfigContext/index.tsx
index aa7e7a4d0..856eb5c77 100644
--- a/frontend/src/context/ServerConfigContext/index.tsx
+++ b/frontend/src/context/ServerConfigContext/index.tsx
@@ -1 +1 @@
-export { ServerConfigProvider,useServerConfig } from "./ServerConfigContext";
+export { ServerConfigProvider, useServerConfig } from "./ServerConfigContext";
diff --git a/frontend/src/context/index.tsx b/frontend/src/context/index.tsx
index 11c729080..2b3b6ddf5 100644
--- a/frontend/src/context/index.tsx
+++ b/frontend/src/context/index.tsx
@@ -14,7 +14,7 @@ export {
   ProjectPermissionSub,
   useProjectPermission
 } from "./ProjectPermissionContext";
-export { ServerConfigProvider,useServerConfig } from "./ServerConfigContext";
+export { ServerConfigProvider, useServerConfig } from "./ServerConfigContext";
 export { SubscriptionProvider, useSubscription } from "./SubscriptionContext";
 export { UserProvider, useUser } from "./UserContext";
 export { useWorkspace, WorkspaceProvider } from "./WorkspaceContext";
diff --git a/frontend/src/ee/api/memberships/UpdateUserProjectPermission.ts b/frontend/src/ee/api/memberships/UpdateUserProjectPermission.ts
index c50710601..d50805311 100644
--- a/frontend/src/ee/api/memberships/UpdateUserProjectPermission.ts
+++ b/frontend/src/ee/api/memberships/UpdateUserProjectPermission.ts
@@ -15,7 +15,7 @@ const updateUserProjectPermission = async ({
   denials: {
     ability: string;
     environmentSlug: string;
-  }[]
+  }[];
 }) =>
   SecurityClient.fetchCall(`/api/v1/membership/${membershipId}/deny-permissions`, {
     method: "POST",
diff --git a/frontend/src/ee/utilities/timeSince.ts b/frontend/src/ee/utilities/timeSince.ts
index 3c80cb78b..a70ae1905 100644
--- a/frontend/src/ee/utilities/timeSince.ts
+++ b/frontend/src/ee/utilities/timeSince.ts
@@ -4,32 +4,30 @@
  * @returns {String} text - how much time has passed since a certain timestamp
  */
 function timeSince(date: Date) {
-  const seconds = Math.floor(
-    ((new Date() as any) - (date as any)) / 1000
-  ) as number;
+  const seconds = Math.floor(((new Date() as any) - (date as any)) / 1000) as number;
 
   let interval = seconds / 31536000;
 
   if (interval > 1) {
-    return `${Math.floor(interval)  } years ago`;
+    return `${Math.floor(interval)} years ago`;
   }
   interval = seconds / 2592000;
   if (interval > 1) {
-    return `${Math.floor(interval)  } months ago`;
+    return `${Math.floor(interval)} months ago`;
   }
   interval = seconds / 86400;
   if (interval > 1) {
-    return `${Math.floor(interval)  } days ago`;
+    return `${Math.floor(interval)} days ago`;
   }
   interval = seconds / 3600;
   if (interval > 1) {
-    return `${Math.floor(interval)  } hours ago`;
+    return `${Math.floor(interval)} hours ago`;
   }
   interval = seconds / 60;
   if (interval > 1) {
-    return `${Math.floor(interval)  } minutes ago`;
+    return `${Math.floor(interval)} minutes ago`;
   }
-  return `${Math.floor(seconds)  } seconds ago`;
+  return `${Math.floor(seconds)} seconds ago`;
 }
 
 export default timeSince;
diff --git a/frontend/src/helpers/key.ts b/frontend/src/helpers/key.ts
index f91279821..9301bb77b 100644
--- a/frontend/src/helpers/key.ts
+++ b/frontend/src/helpers/key.ts
@@ -14,73 +14,71 @@ import { deriveArgonKey } from "@app/components/utilities/cryptography/crypto";
  * @param {String} obj.protectedKeyTag
  */
 const decryptPrivateKeyHelper = async ({
-    encryptionVersion,
-    encryptedPrivateKey,
-    iv,
-    tag,
-    password,
-    salt,
-    protectedKey,
-    protectedKeyIV,
-    protectedKeyTag,
+  encryptionVersion,
+  encryptedPrivateKey,
+  iv,
+  tag,
+  password,
+  salt,
+  protectedKey,
+  protectedKeyIV,
+  protectedKeyTag
 }: {
-    encryptionVersion: number;
-    encryptedPrivateKey: string;
-    iv: string;
-    tag: string;
-    password: string;
-    salt: string;
-    protectedKey?: string;
-    protectedKeyIV?: string;
-    protectedKeyTag?: string;
+  encryptionVersion: number;
+  encryptedPrivateKey: string;
+  iv: string;
+  tag: string;
+  password: string;
+  salt: string;
+  protectedKey?: string;
+  protectedKeyIV?: string;
+  protectedKeyTag?: string;
 }) => {
-let privateKey;
-    try {
-        if (encryptionVersion === 1) {
-            privateKey = Aes256Gcm.decrypt({
-                ciphertext: encryptedPrivateKey,
-                iv,
-                tag,
-                secret: password
-                .slice(0, 32)
-                .padStart(32 + (password.slice(0, 32).length - new Blob([password]).size), "0")
-            });
-        } else if (encryptionVersion === 2 && protectedKey && protectedKeyIV && protectedKeyTag) {
-            const derivedKey = await deriveArgonKey({
-                password,
-                salt,
-                mem: 65536,
-                time: 3,
-                parallelism: 1,
-                hashLen: 32
-            });
-            
-            if (!derivedKey) throw new Error("Failed to generate derived key");
+  let privateKey;
+  try {
+    if (encryptionVersion === 1) {
+      privateKey = Aes256Gcm.decrypt({
+        ciphertext: encryptedPrivateKey,
+        iv,
+        tag,
+        secret: password
+          .slice(0, 32)
+          .padStart(32 + (password.slice(0, 32).length - new Blob([password]).size), "0")
+      });
+    } else if (encryptionVersion === 2 && protectedKey && protectedKeyIV && protectedKeyTag) {
+      const derivedKey = await deriveArgonKey({
+        password,
+        salt,
+        mem: 65536,
+        time: 3,
+        parallelism: 1,
+        hashLen: 32
+      });
 
-            const key = Aes256Gcm.decrypt({
-                ciphertext: protectedKey,
-                iv: protectedKeyIV,
-                tag: protectedKeyTag,
-                secret: Buffer.from(derivedKey.hash)
-            });
-            
-            // decrypt back the private key
-            privateKey = Aes256Gcm.decrypt({
-                ciphertext: encryptedPrivateKey,
-                iv,
-                tag,
-                secret: Buffer.from(key, "hex")
-            });
-        } else {
-            throw new Error("Insufficient details to decrypt private key");
-        }
-    } catch (err) {
-        throw new Error("Failed to decrypt private key");
+      if (!derivedKey) throw new Error("Failed to generate derived key");
+
+      const key = Aes256Gcm.decrypt({
+        ciphertext: protectedKey,
+        iv: protectedKeyIV,
+        tag: protectedKeyTag,
+        secret: Buffer.from(derivedKey.hash)
+      });
+
+      // decrypt back the private key
+      privateKey = Aes256Gcm.decrypt({
+        ciphertext: encryptedPrivateKey,
+        iv,
+        tag,
+        secret: Buffer.from(key, "hex")
+      });
+    } else {
+      throw new Error("Insufficient details to decrypt private key");
     }
+  } catch (err) {
+    throw new Error("Failed to decrypt private key");
+  }
 
-    return privateKey;
-}
+  return privateKey;
+};
 
-export {
-    decryptPrivateKeyHelper
-};
\ No newline at end of file
+export { decryptPrivateKeyHelper };
diff --git a/frontend/src/hoc/withPermission/withPermission.tsx b/frontend/src/hoc/withPermission/withPermission.tsx
index 389d8509c..0fe2d9f4f 100644
--- a/frontend/src/hoc/withPermission/withPermission.tsx
+++ b/frontend/src/hoc/withPermission/withPermission.tsx
@@ -29,13 +29,13 @@ export const withPermission = <T extends {}, J extends TOrgPermission>(
       return (
         <div
           className={twMerge(
-            "container h-full mx-auto flex justify-center items-center",
+            "container mx-auto flex h-full items-center justify-center",
             containerClassName
           )}
         >
           <div
             className={twMerge(
-              "rounded-md bg-mineshaft-800 text-bunker-300 p-16 flex space-x-12 items-end",
+              "flex items-end space-x-12 rounded-md bg-mineshaft-800 p-16 text-bunker-300",
               className
             )}
           >
@@ -43,7 +43,7 @@ export const withPermission = <T extends {}, J extends TOrgPermission>(
               <FontAwesomeIcon icon={faLock} size="6x" />
             </div>
             <div>
-              <div className="text-4xl font-medium mb-2">Access Restricted</div>
+              <div className="mb-2 text-4xl font-medium">Access Restricted</div>
               <div className="text-sm">
                 Your role has limited permissions, please <br /> contact your admin to gain access
               </div>
diff --git a/frontend/src/hooks/api/apiKeys/index.ts b/frontend/src/hooks/api/apiKeys/index.ts
index c63762b97..58c3717ab 100644
--- a/frontend/src/hooks/api/apiKeys/index.ts
+++ b/frontend/src/hooks/api/apiKeys/index.ts
@@ -1,4 +1 @@
-export {
-  useCreateAPIKeyV2,
-  useDeleteAPIKeyV2,
-  useUpdateAPIKeyV2} from "./queries";
\ No newline at end of file
+export { useCreateAPIKeyV2, useDeleteAPIKeyV2, useUpdateAPIKeyV2 } from "./queries";
diff --git a/frontend/src/hooks/api/apiKeys/queries.tsx b/frontend/src/hooks/api/apiKeys/queries.tsx
index 2d19146fe..d37917435 100644
--- a/frontend/src/hooks/api/apiKeys/queries.tsx
+++ b/frontend/src/hooks/api/apiKeys/queries.tsx
@@ -8,14 +8,13 @@ import {
   CreateAPIKeyDataV2DTO,
   CreateServiceTokenDataV3Res,
   DeleteAPIKeyDataV2DTO,
-  UpdateAPIKeyDataV2DTO} from "./types";
+  UpdateAPIKeyDataV2DTO
+} from "./types";
 
 export const useCreateAPIKeyV2 = () => {
   const queryClient = useQueryClient();
   return useMutation<CreateServiceTokenDataV3Res, {}, CreateAPIKeyDataV2DTO>({
-    mutationFn: async ({
-      name
-    }) => {
+    mutationFn: async ({ name }) => {
       const { data } = await apiRequest.post("/api/v3/api-key", {
         name
       });
@@ -31,11 +30,10 @@ export const useCreateAPIKeyV2 = () => {
 export const useUpdateAPIKeyV2 = () => {
   const queryClient = useQueryClient();
   return useMutation<APIKeyDataV2, {}, UpdateAPIKeyDataV2DTO>({
-    mutationFn: async ({
-      apiKeyDataId,
-      name
-    }) => {
-      const { data: { apiKeyData } } = await apiRequest.patch(`/api/v3/api-key/${apiKeyDataId}`, {
+    mutationFn: async ({ apiKeyDataId, name }) => {
+      const {
+        data: { apiKeyData }
+      } = await apiRequest.patch(`/api/v3/api-key/${apiKeyDataId}`, {
         name
       });
       return apiKeyData;
@@ -49,14 +47,14 @@ export const useUpdateAPIKeyV2 = () => {
 export const useDeleteAPIKeyV2 = () => {
   const queryClient = useQueryClient();
   return useMutation<APIKeyDataV2, {}, DeleteAPIKeyDataV2DTO>({
-    mutationFn: async ({
-      apiKeyDataId
-    }) => {
-      const { data: { apiKeyData } } = await apiRequest.delete(`/api/v3/api-key/${apiKeyDataId}`);
+    mutationFn: async ({ apiKeyDataId }) => {
+      const {
+        data: { apiKeyData }
+      } = await apiRequest.delete(`/api/v3/api-key/${apiKeyDataId}`);
       return apiKeyData;
     },
     onSuccess: () => {
       queryClient.invalidateQueries(userKeys.myAPIKeysV2);
     }
   });
-};
\ No newline at end of file
+};
diff --git a/frontend/src/hooks/api/auditLogs/constants.tsx b/frontend/src/hooks/api/auditLogs/constants.tsx
index 31ca17c0d..348700374 100644
--- a/frontend/src/hooks/api/auditLogs/constants.tsx
+++ b/frontend/src/hooks/api/auditLogs/constants.tsx
@@ -1,57 +1,57 @@
 import { EventType, UserAgentType } from "./enums";
 
 export const eventToNameMap: { [K in EventType]: string } = {
-    [EventType.GET_SECRETS]: "List secrets",
-    [EventType.GET_SECRET]: "Read secret",
-    [EventType.CREATE_SECRET]: "Create secret",
-    [EventType.UPDATE_SECRET]: "Update secret",
-    [EventType.DELETE_SECRET]: "Delete secret",
-    [EventType.GET_WORKSPACE_KEY]: "Read project key",
-    [EventType.AUTHORIZE_INTEGRATION]: "Authorize integration",
-    [EventType.UNAUTHORIZE_INTEGRATION]: "Unauthorize integration",
-    [EventType.CREATE_INTEGRATION]: "Create integration",
-    [EventType.DELETE_INTEGRATION]: "Delete integration",
-    [EventType.ADD_TRUSTED_IP]: "Add trusted IP",
-    [EventType.UPDATE_TRUSTED_IP]: "Update trusted IP",
-    [EventType.DELETE_TRUSTED_IP]: "Delete trusted IP",
-    [EventType.CREATE_SERVICE_TOKEN]: "Create service token",
-    [EventType.DELETE_SERVICE_TOKEN]: "Delete service token",
-    [EventType.CREATE_IDENTITY]: "Create identity",
-    [EventType.UPDATE_IDENTITY]: "Update identity",
-    [EventType.DELETE_IDENTITY]: "Delete identity",
-    [EventType.LOGIN_IDENTITY_UNIVERSAL_AUTH]: "Login via universal auth",
-    [EventType.ADD_IDENTITY_UNIVERSAL_AUTH]: "Add universal auth",
-    [EventType.UPDATE_IDENTITY_UNIVERSAL_AUTH]: "Update universal auth",
-    [EventType.GET_IDENTITY_UNIVERSAL_AUTH]: "Get universal auth",
-    [EventType.CREATE_IDENTITY_UNIVERSAL_AUTH_CLIENT_SECRET]: "Create universal auth client secret",
-    [EventType.REVOKE_IDENTITY_UNIVERSAL_AUTH_CLIENT_SECRET]: "Revoke universal auth client secret",
-    [EventType.GET_IDENTITY_UNIVERSAL_AUTH_CLIENT_SECRETS]: "Get universal auth client secrets",
-    [EventType.GET_IDENTITY_UNIVERSAL_AUTH]: "Get universal auth",
-    [EventType.CREATE_ENVIRONMENT]: "Create environment",
-    [EventType.UPDATE_ENVIRONMENT]: "Update environment",
-    [EventType.DELETE_ENVIRONMENT]: "Delete environment",
-    [EventType.ADD_WORKSPACE_MEMBER]: "Add member",
-    [EventType.REMOVE_WORKSPACE_MEMBER]: "Remove member",
-    [EventType.CREATE_FOLDER]: "Create folder",
-    [EventType.UPDATE_FOLDER]: "Update folder",
-    [EventType.DELETE_FOLDER]: "Delete folder",
-    [EventType.CREATE_WEBHOOK]: "Create webhook",
-    [EventType.UPDATE_WEBHOOK_STATUS]: "Update webhook status",
-    [EventType.DELETE_WEBHOOK]: "Delete webhook",
-    [EventType.GET_SECRET_IMPORTS]: "List secret imports",
-    [EventType.CREATE_SECRET_IMPORT]: "Create secret import",
-    [EventType.UPDATE_SECRET_IMPORT]: "Update secret import",
-    [EventType.DELETE_SECRET_IMPORT]: "Delete secret import",
-    [EventType.UPDATE_USER_WORKSPACE_DENIED_PERMISSIONS]: "Update denied permissions",
-    [EventType.UPDATE_USER_WORKSPACE_ROLE]: "Update user role"
+  [EventType.GET_SECRETS]: "List secrets",
+  [EventType.GET_SECRET]: "Read secret",
+  [EventType.CREATE_SECRET]: "Create secret",
+  [EventType.UPDATE_SECRET]: "Update secret",
+  [EventType.DELETE_SECRET]: "Delete secret",
+  [EventType.GET_WORKSPACE_KEY]: "Read project key",
+  [EventType.AUTHORIZE_INTEGRATION]: "Authorize integration",
+  [EventType.UNAUTHORIZE_INTEGRATION]: "Unauthorize integration",
+  [EventType.CREATE_INTEGRATION]: "Create integration",
+  [EventType.DELETE_INTEGRATION]: "Delete integration",
+  [EventType.ADD_TRUSTED_IP]: "Add trusted IP",
+  [EventType.UPDATE_TRUSTED_IP]: "Update trusted IP",
+  [EventType.DELETE_TRUSTED_IP]: "Delete trusted IP",
+  [EventType.CREATE_SERVICE_TOKEN]: "Create service token",
+  [EventType.DELETE_SERVICE_TOKEN]: "Delete service token",
+  [EventType.CREATE_IDENTITY]: "Create identity",
+  [EventType.UPDATE_IDENTITY]: "Update identity",
+  [EventType.DELETE_IDENTITY]: "Delete identity",
+  [EventType.LOGIN_IDENTITY_UNIVERSAL_AUTH]: "Login via universal auth",
+  [EventType.ADD_IDENTITY_UNIVERSAL_AUTH]: "Add universal auth",
+  [EventType.UPDATE_IDENTITY_UNIVERSAL_AUTH]: "Update universal auth",
+  [EventType.GET_IDENTITY_UNIVERSAL_AUTH]: "Get universal auth",
+  [EventType.CREATE_IDENTITY_UNIVERSAL_AUTH_CLIENT_SECRET]: "Create universal auth client secret",
+  [EventType.REVOKE_IDENTITY_UNIVERSAL_AUTH_CLIENT_SECRET]: "Revoke universal auth client secret",
+  [EventType.GET_IDENTITY_UNIVERSAL_AUTH_CLIENT_SECRETS]: "Get universal auth client secrets",
+  [EventType.GET_IDENTITY_UNIVERSAL_AUTH]: "Get universal auth",
+  [EventType.CREATE_ENVIRONMENT]: "Create environment",
+  [EventType.UPDATE_ENVIRONMENT]: "Update environment",
+  [EventType.DELETE_ENVIRONMENT]: "Delete environment",
+  [EventType.ADD_WORKSPACE_MEMBER]: "Add member",
+  [EventType.REMOVE_WORKSPACE_MEMBER]: "Remove member",
+  [EventType.CREATE_FOLDER]: "Create folder",
+  [EventType.UPDATE_FOLDER]: "Update folder",
+  [EventType.DELETE_FOLDER]: "Delete folder",
+  [EventType.CREATE_WEBHOOK]: "Create webhook",
+  [EventType.UPDATE_WEBHOOK_STATUS]: "Update webhook status",
+  [EventType.DELETE_WEBHOOK]: "Delete webhook",
+  [EventType.GET_SECRET_IMPORTS]: "List secret imports",
+  [EventType.CREATE_SECRET_IMPORT]: "Create secret import",
+  [EventType.UPDATE_SECRET_IMPORT]: "Update secret import",
+  [EventType.DELETE_SECRET_IMPORT]: "Delete secret import",
+  [EventType.UPDATE_USER_WORKSPACE_DENIED_PERMISSIONS]: "Update denied permissions",
+  [EventType.UPDATE_USER_WORKSPACE_ROLE]: "Update user role"
 };
 
 export const userAgentTTypeoNameMap: { [K in UserAgentType]: string } = {
-    [UserAgentType.WEB]: "Web",
-    [UserAgentType.CLI]: "CLI",
-    [UserAgentType.K8_OPERATOR]: "K8s operator",
-    [UserAgentType.TERRAFORM]: "Terraform",
-    [UserAgentType.NODE_SDK]: "InfisicalNodeSDK",
-    [UserAgentType.PYTHON_SDK]: "InfisicalPythonSDK",
-    [UserAgentType.OTHER]: "Other",
-};
\ No newline at end of file
+  [UserAgentType.WEB]: "Web",
+  [UserAgentType.CLI]: "CLI",
+  [UserAgentType.K8_OPERATOR]: "K8s operator",
+  [UserAgentType.TERRAFORM]: "Terraform",
+  [UserAgentType.NODE_SDK]: "InfisicalNodeSDK",
+  [UserAgentType.PYTHON_SDK]: "InfisicalPythonSDK",
+  [UserAgentType.OTHER]: "Other"
+};
diff --git a/frontend/src/hooks/api/auditLogs/enums.tsx b/frontend/src/hooks/api/auditLogs/enums.tsx
index 4b9aa9bd2..f6ccd8f81 100644
--- a/frontend/src/hooks/api/auditLogs/enums.tsx
+++ b/frontend/src/hooks/api/auditLogs/enums.tsx
@@ -38,7 +38,7 @@ export enum EventType {
   UPDATE_IDENTITY_UNIVERSAL_AUTH = "update-identity-universal-auth",
   GET_IDENTITY_UNIVERSAL_AUTH = "get-identity-universal-auth",
   CREATE_IDENTITY_UNIVERSAL_AUTH_CLIENT_SECRET = "create-identity-universal-auth-client-secret",
-  REVOKE_IDENTITY_UNIVERSAL_AUTH_CLIENT_SECRET =  "revoke-identity-universal-auth-client-secret",
+  REVOKE_IDENTITY_UNIVERSAL_AUTH_CLIENT_SECRET = "revoke-identity-universal-auth-client-secret",
   GET_IDENTITY_UNIVERSAL_AUTH_CLIENT_SECRETS = "get-identity-universal-auth-client-secret",
   CREATE_ENVIRONMENT = "create-environment",
   UPDATE_ENVIRONMENT = "update-environment",
@@ -57,4 +57,4 @@ export enum EventType {
   DELETE_SECRET_IMPORT = "delete-secret-import",
   UPDATE_USER_WORKSPACE_ROLE = "update-user-workspace-role",
   UPDATE_USER_WORKSPACE_DENIED_PERMISSIONS = "update-user-workspace-denied-permissions"
-}
\ No newline at end of file
+}
diff --git a/frontend/src/hooks/api/auditLogs/index.tsx b/frontend/src/hooks/api/auditLogs/index.tsx
index fb026aebb..b69c25120 100644
--- a/frontend/src/hooks/api/auditLogs/index.tsx
+++ b/frontend/src/hooks/api/auditLogs/index.tsx
@@ -1 +1 @@
-export * from "./queries";
\ No newline at end of file
+export * from "./queries";
diff --git a/frontend/src/hooks/api/auth/types.ts b/frontend/src/hooks/api/auth/types.ts
index a18d023c4..41c324bff 100644
--- a/frontend/src/hooks/api/auth/types.ts
+++ b/frontend/src/hooks/api/auth/types.ts
@@ -4,12 +4,12 @@ export type GetAuthTokenAPI = {
 
 export type SendMfaTokenDTO = {
   email: string;
-}
+};
 
 export type VerifyMfaTokenDTO = {
   email: string;
   mfaCode: string;
-}
+};
 
 export type VerifyMfaTokenRes = {
   encryptionVersion: number;
@@ -21,24 +21,24 @@ export type VerifyMfaTokenRes = {
   encryptedPrivateKey: string;
   iv: string;
   tag: string;
-}
+};
 
 export type Login1DTO = {
   email: string;
   clientPublicKey: string;
   providerAuthToken?: string;
-}
+};
 
 export type Login2DTO = {
   email: string;
   clientProof: string;
   providerAuthToken?: string;
-}
+};
 
 export type Login1Res = {
   serverPublicKey: string;
   salt: string;
-}
+};
 
 export type Login2Res = {
   mfaEnabled: boolean;
@@ -51,26 +51,26 @@ export type Login2Res = {
   encryptedPrivateKey?: string;
   iv?: string;
   tag?: string;
-}
+};
 
 export type LoginLDAPDTO = {
   organizationSlug: string;
   username: string;
   password: string;
-}
+};
 
 export type LoginLDAPRes = {
   nextUrl: string;
-}
+};
 
 export type SRP1DTO = {
   clientPublicKey: string;
-}
+};
 
 export type SRPR1Res = {
   serverPublicKey: string;
   salt: string;
-}
+};
 
 export type CompleteAccountDTO = {
   email: string;
@@ -85,19 +85,19 @@ export type CompleteAccountDTO = {
   encryptedPrivateKeyTag: string;
   salt: string;
   verifier: string;
-}
+};
 
 export type CompleteAccountSignupDTO = CompleteAccountDTO & {
   providerAuthToken?: string;
   attributionSource?: string;
   organizationName: string;
-}
+};
 
 export type VerifySignupInviteDTO = {
   email: string;
   code: string;
   organizationId: string;
-}
+};
 
 export type ChangePasswordDTO = {
   clientProof: string;
@@ -109,7 +109,7 @@ export type ChangePasswordDTO = {
   encryptedPrivateKeyTag: string;
   salt: string;
   verifier: string;
-}
+};
 
 export type ResetPasswordDTO = {
   protectedKey: string;
@@ -121,7 +121,7 @@ export type ResetPasswordDTO = {
   salt: string;
   verifier: string;
   verificationToken: string;
-}
+};
 
 export type IssueBackupPrivateKeyDTO = {
   encryptedPrivateKey: string;
@@ -130,8 +130,8 @@ export type IssueBackupPrivateKeyDTO = {
   salt: string;
   verifier: string;
   clientProof: string;
-}
+};
 
 export type GetBackupEncryptedPrivateKeyDTO = {
   verificationToken: string;
-}
\ No newline at end of file
+};
diff --git a/frontend/src/hooks/api/bots/queries.tsx b/frontend/src/hooks/api/bots/queries.tsx
index 3e35a58f0..23049892c 100644
--- a/frontend/src/hooks/api/bots/queries.tsx
+++ b/frontend/src/hooks/api/bots/queries.tsx
@@ -12,7 +12,9 @@ export const useGetWorkspaceBot = (workspaceId: string) =>
   useQuery({
     queryKey: queryKeys.getBot(workspaceId),
     queryFn: async () => {
-      const { data: { bot } } = await apiRequest.get<{ bot: TBot }>(`/api/v1/bot/${workspaceId}`);
+      const {
+        data: { bot }
+      } = await apiRequest.get<{ bot: TBot }>(`/api/v1/bot/${workspaceId}`);
       return bot;
     },
     enabled: Boolean(workspaceId)
diff --git a/frontend/src/hooks/api/identities/constants.tsx b/frontend/src/hooks/api/identities/constants.tsx
index 6cce84b53..53fceb7d5 100644
--- a/frontend/src/hooks/api/identities/constants.tsx
+++ b/frontend/src/hooks/api/identities/constants.tsx
@@ -1,5 +1,5 @@
 import { IdentityAuthMethod } from "./enums";
 
 export const identityAuthToNameMap: { [I in IdentityAuthMethod]: string } = {
-    [IdentityAuthMethod.UNIVERSAL_AUTH]: "Universal Auth"
-};
\ No newline at end of file
+  [IdentityAuthMethod.UNIVERSAL_AUTH]: "Universal Auth"
+};
diff --git a/frontend/src/hooks/api/identities/index.tsx b/frontend/src/hooks/api/identities/index.tsx
index 61b3035eb..684a00b6f 100644
--- a/frontend/src/hooks/api/identities/index.tsx
+++ b/frontend/src/hooks/api/identities/index.tsx
@@ -1,14 +1,12 @@
 export { identityAuthToNameMap } from "./constants";
 export { IdentityAuthMethod } from "./enums";
 export {
-    useAddIdentityUniversalAuth,
-    useCreateIdentity,
-    useCreateIdentityUniversalAuthClientSecret,
-    useDeleteIdentity,
-    useRevokeIdentityUniversalAuthClientSecret,
-    useUpdateIdentity,
-    useUpdateIdentityUniversalAuth} from "./mutations";
-export {
-    useGetIdentityUniversalAuth,
-    useGetIdentityUniversalAuthClientSecrets
-} from "./queries";
\ No newline at end of file
+  useAddIdentityUniversalAuth,
+  useCreateIdentity,
+  useCreateIdentityUniversalAuthClientSecret,
+  useDeleteIdentity,
+  useRevokeIdentityUniversalAuthClientSecret,
+  useUpdateIdentity,
+  useUpdateIdentityUniversalAuth
+} from "./mutations";
+export { useGetIdentityUniversalAuth, useGetIdentityUniversalAuthClientSecrets } from "./queries";
diff --git a/frontend/src/hooks/api/identities/mutations.tsx b/frontend/src/hooks/api/identities/mutations.tsx
index 3711fd459..ec418659d 100644
--- a/frontend/src/hooks/api/identities/mutations.tsx
+++ b/frontend/src/hooks/api/identities/mutations.tsx
@@ -4,161 +4,168 @@ import { apiRequest } from "@app/config/request";
 
 import { organizationKeys } from "../organization/queries";
 import { identitiesKeys } from "./queries";
-import { 
-    AddIdentityUniversalAuthDTO,
-    ClientSecretData,
-    CreateIdentityDTO, 
-    CreateIdentityUniversalAuthClientSecretDTO,
-    CreateIdentityUniversalAuthClientSecretRes,
-    DeleteIdentityDTO,
-    DeleteIdentityUniversalAuthClientSecretDTO,
-    Identity,
-    IdentityUniversalAuth,
-    UpdateIdentityDTO,
-    UpdateIdentityUniversalAuthDTO} from "./types";
+import {
+  AddIdentityUniversalAuthDTO,
+  ClientSecretData,
+  CreateIdentityDTO,
+  CreateIdentityUniversalAuthClientSecretDTO,
+  CreateIdentityUniversalAuthClientSecretRes,
+  DeleteIdentityDTO,
+  DeleteIdentityUniversalAuthClientSecretDTO,
+  Identity,
+  IdentityUniversalAuth,
+  UpdateIdentityDTO,
+  UpdateIdentityUniversalAuthDTO
+} from "./types";
 
 export const useCreateIdentity = () => {
-    const queryClient = useQueryClient();
-    return useMutation<Identity, {}, CreateIdentityDTO>({
-        mutationFn: async (body) => {
-            const { data: { identity } } = await apiRequest.post("/api/v1/identities/", body);
-            return identity;
-        },
-        onSuccess: (_, { organizationId }) => {
-            queryClient.invalidateQueries(organizationKeys.getOrgIdentityMemberships(organizationId));
-        }
-    });
+  const queryClient = useQueryClient();
+  return useMutation<Identity, {}, CreateIdentityDTO>({
+    mutationFn: async (body) => {
+      const {
+        data: { identity }
+      } = await apiRequest.post("/api/v1/identities/", body);
+      return identity;
+    },
+    onSuccess: (_, { organizationId }) => {
+      queryClient.invalidateQueries(organizationKeys.getOrgIdentityMemberships(organizationId));
+    }
+  });
 };
 
 export const useUpdateIdentity = () => {
-    const queryClient = useQueryClient();
-    return useMutation<Identity, {}, UpdateIdentityDTO>({
-        mutationFn: async ({
-            identityId,
-            name,
-            role
-        }) => {
-            
-            const { data: { identity } } = await apiRequest.patch(`/api/v1/identities/${identityId}`, {
-                name,
-                role
-            });
+  const queryClient = useQueryClient();
+  return useMutation<Identity, {}, UpdateIdentityDTO>({
+    mutationFn: async ({ identityId, name, role }) => {
+      const {
+        data: { identity }
+      } = await apiRequest.patch(`/api/v1/identities/${identityId}`, {
+        name,
+        role
+      });
 
-            return identity;
-        },
-        onSuccess: (_, { organizationId }) => {
-            queryClient.invalidateQueries(organizationKeys.getOrgIdentityMemberships(organizationId));
-        }
-    });
-}
+      return identity;
+    },
+    onSuccess: (_, { organizationId }) => {
+      queryClient.invalidateQueries(organizationKeys.getOrgIdentityMemberships(organizationId));
+    }
+  });
+};
 
 export const useDeleteIdentity = () => {
-    const queryClient = useQueryClient();
-    return useMutation<Identity, {}, DeleteIdentityDTO>({
-        mutationFn: async ({
-            identityId,
-        }) => {
-            const { data: { identity } } = await apiRequest.delete(`/api/v1/identities/${identityId}`);
-            return identity;
-        },
-        onSuccess: (_, { organizationId }) => {
-            queryClient.invalidateQueries(organizationKeys.getOrgIdentityMemberships(organizationId));
-        }
-    });
+  const queryClient = useQueryClient();
+  return useMutation<Identity, {}, DeleteIdentityDTO>({
+    mutationFn: async ({ identityId }) => {
+      const {
+        data: { identity }
+      } = await apiRequest.delete(`/api/v1/identities/${identityId}`);
+      return identity;
+    },
+    onSuccess: (_, { organizationId }) => {
+      queryClient.invalidateQueries(organizationKeys.getOrgIdentityMemberships(organizationId));
+    }
+  });
 };
 
 // TODO: move these to /auth
 
 export const useAddIdentityUniversalAuth = () => {
-    const queryClient = useQueryClient();
-    return useMutation<IdentityUniversalAuth, {}, AddIdentityUniversalAuthDTO>({
-        mutationFn: async ({
-            identityId,
-            clientSecretTrustedIps,
-            accessTokenTTL,
-            accessTokenMaxTTL,
-            accessTokenNumUsesLimit,
-            accessTokenTrustedIps,
-        }) => {
-            const { data: { identityUniversalAuth } } = await apiRequest.post(`/api/v1/auth/universal-auth/identities/${identityId}`,
-                {
-                    clientSecretTrustedIps,
-                    accessTokenTTL,
-                    accessTokenMaxTTL,
-                    accessTokenNumUsesLimit,
-                    accessTokenTrustedIps,
-                }
-            );
-            return identityUniversalAuth;
-        },
-        onSuccess: (_, { organizationId }) => {
-            queryClient.invalidateQueries(organizationKeys.getOrgIdentityMemberships(organizationId));
-        }
-    });
+  const queryClient = useQueryClient();
+  return useMutation<IdentityUniversalAuth, {}, AddIdentityUniversalAuthDTO>({
+    mutationFn: async ({
+      identityId,
+      clientSecretTrustedIps,
+      accessTokenTTL,
+      accessTokenMaxTTL,
+      accessTokenNumUsesLimit,
+      accessTokenTrustedIps
+    }) => {
+      const {
+        data: { identityUniversalAuth }
+      } = await apiRequest.post(`/api/v1/auth/universal-auth/identities/${identityId}`, {
+        clientSecretTrustedIps,
+        accessTokenTTL,
+        accessTokenMaxTTL,
+        accessTokenNumUsesLimit,
+        accessTokenTrustedIps
+      });
+      return identityUniversalAuth;
+    },
+    onSuccess: (_, { organizationId }) => {
+      queryClient.invalidateQueries(organizationKeys.getOrgIdentityMemberships(organizationId));
+    }
+  });
 };
 
 export const useUpdateIdentityUniversalAuth = () => {
-    const queryClient = useQueryClient();
-    return useMutation<IdentityUniversalAuth, {}, UpdateIdentityUniversalAuthDTO>({
-        mutationFn: async ({
-            identityId,
-            clientSecretTrustedIps,
-            accessTokenTTL,
-            accessTokenMaxTTL,
-            accessTokenNumUsesLimit,
-            accessTokenTrustedIps,
-        }) => {
-            const { data: { identityUniversalAuth } } = await apiRequest.patch(`/api/v1/auth/universal-auth/identities/${identityId}`,
-                {
-                    clientSecretTrustedIps,
-                    accessTokenTTL,
-                    accessTokenMaxTTL,
-                    accessTokenNumUsesLimit,
-                    accessTokenTrustedIps,
-                }
-            );
-            return identityUniversalAuth;
-        },
-        onSuccess: (_, { organizationId }) => {
-            queryClient.invalidateQueries(organizationKeys.getOrgIdentityMemberships(organizationId));
-        }
-    });
+  const queryClient = useQueryClient();
+  return useMutation<IdentityUniversalAuth, {}, UpdateIdentityUniversalAuthDTO>({
+    mutationFn: async ({
+      identityId,
+      clientSecretTrustedIps,
+      accessTokenTTL,
+      accessTokenMaxTTL,
+      accessTokenNumUsesLimit,
+      accessTokenTrustedIps
+    }) => {
+      const {
+        data: { identityUniversalAuth }
+      } = await apiRequest.patch(`/api/v1/auth/universal-auth/identities/${identityId}`, {
+        clientSecretTrustedIps,
+        accessTokenTTL,
+        accessTokenMaxTTL,
+        accessTokenNumUsesLimit,
+        accessTokenTrustedIps
+      });
+      return identityUniversalAuth;
+    },
+    onSuccess: (_, { organizationId }) => {
+      queryClient.invalidateQueries(organizationKeys.getOrgIdentityMemberships(organizationId));
+    }
+  });
 };
 
 export const useCreateIdentityUniversalAuthClientSecret = () => {
-    const queryClient = useQueryClient();
-    return useMutation<CreateIdentityUniversalAuthClientSecretRes, {}, CreateIdentityUniversalAuthClientSecretDTO>({
-        mutationFn: async ({
-            identityId,
-            description,
-            ttl,
-            numUsesLimit
-        }) => {
-            const { data } = await apiRequest.post(`/api/v1/auth/universal-auth/identities/${identityId}/client-secrets`, {
-                description,
-                ttl,
-                numUsesLimit
-            });
-            return data;
-        },
-        onSuccess: (_, { identityId }) => {
-            queryClient.invalidateQueries(identitiesKeys.getIdentityUniversalAuthClientSecrets(identityId));
+  const queryClient = useQueryClient();
+  return useMutation<
+    CreateIdentityUniversalAuthClientSecretRes,
+    {},
+    CreateIdentityUniversalAuthClientSecretDTO
+  >({
+    mutationFn: async ({ identityId, description, ttl, numUsesLimit }) => {
+      const { data } = await apiRequest.post(
+        `/api/v1/auth/universal-auth/identities/${identityId}/client-secrets`,
+        {
+          description,
+          ttl,
+          numUsesLimit
         }
-    });
+      );
+      return data;
+    },
+    onSuccess: (_, { identityId }) => {
+      queryClient.invalidateQueries(
+        identitiesKeys.getIdentityUniversalAuthClientSecrets(identityId)
+      );
+    }
+  });
 };
 
 export const useRevokeIdentityUniversalAuthClientSecret = () => {
-    const queryClient = useQueryClient();
-    return useMutation<ClientSecretData, {}, DeleteIdentityUniversalAuthClientSecretDTO>({
-        mutationFn: async ({
-            identityId,
-            clientSecretId
-        }) => {
-            const { data: { clientSecretData } } = await apiRequest.post<{ clientSecretData: ClientSecretData }>(`/api/v1/auth/universal-auth/identities/${identityId}/client-secrets/${clientSecretId}/revoke`);
-            return clientSecretData;
-        },
-        onSuccess: (_, { identityId }) => {
-            queryClient.invalidateQueries(identitiesKeys.getIdentityUniversalAuthClientSecrets(identityId));
-        }
-    });
-};
\ No newline at end of file
+  const queryClient = useQueryClient();
+  return useMutation<ClientSecretData, {}, DeleteIdentityUniversalAuthClientSecretDTO>({
+    mutationFn: async ({ identityId, clientSecretId }) => {
+      const {
+        data: { clientSecretData }
+      } = await apiRequest.post<{ clientSecretData: ClientSecretData }>(
+        `/api/v1/auth/universal-auth/identities/${identityId}/client-secrets/${clientSecretId}/revoke`
+      );
+      return clientSecretData;
+    },
+    onSuccess: (_, { identityId }) => {
+      queryClient.invalidateQueries(
+        identitiesKeys.getIdentityUniversalAuthClientSecrets(identityId)
+      );
+    }
+  });
+};
diff --git a/frontend/src/hooks/api/identities/queries.tsx b/frontend/src/hooks/api/identities/queries.tsx
index e43073f40..92d2a432f 100644
--- a/frontend/src/hooks/api/identities/queries.tsx
+++ b/frontend/src/hooks/api/identities/queries.tsx
@@ -2,39 +2,45 @@ import { useQuery } from "@tanstack/react-query";
 
 import { apiRequest } from "@app/config/request";
 
-import { ClientSecretData , IdentityUniversalAuth } from "./types";
+import { ClientSecretData, IdentityUniversalAuth } from "./types";
 
 export const identitiesKeys = {
-    getIdentityUniversalAuth: (identityId: string) => [{ identityId }, "identity-universal-auth"] as const,
-    getIdentityUniversalAuthClientSecrets: (identityId: string) => [{ identityId }, "identity-universal-auth-client-secrets"] as const
-}
+  getIdentityUniversalAuth: (identityId: string) =>
+    [{ identityId }, "identity-universal-auth"] as const,
+  getIdentityUniversalAuthClientSecrets: (identityId: string) =>
+    [{ identityId }, "identity-universal-auth-client-secrets"] as const
+};
 
 export const useGetIdentityUniversalAuth = (identityId: string) => {
-    return useQuery({
-        queryKey: identitiesKeys.getIdentityUniversalAuth(identityId),
-        queryFn: async () => {
-            if (identityId === "") throw new Error("Identity ID is required");
+  return useQuery({
+    queryKey: identitiesKeys.getIdentityUniversalAuth(identityId),
+    queryFn: async () => {
+      if (identityId === "") throw new Error("Identity ID is required");
 
-            const { data: { identityUniversalAuth } } = await apiRequest.get<{ identityUniversalAuth: IdentityUniversalAuth }>(
-                `/api/v1/auth/universal-auth/identities/${identityId}`
-            );
-        
-            return identityUniversalAuth;
-        }
-    });
-}
+      const {
+        data: { identityUniversalAuth }
+      } = await apiRequest.get<{ identityUniversalAuth: IdentityUniversalAuth }>(
+        `/api/v1/auth/universal-auth/identities/${identityId}`
+      );
+
+      return identityUniversalAuth;
+    }
+  });
+};
 
 export const useGetIdentityUniversalAuthClientSecrets = (identityId: string) => {
-    return useQuery({
-        queryKey: identitiesKeys.getIdentityUniversalAuthClientSecrets(identityId),
-        queryFn: async () => {
-            if (identityId === "") return [];
+  return useQuery({
+    queryKey: identitiesKeys.getIdentityUniversalAuthClientSecrets(identityId),
+    queryFn: async () => {
+      if (identityId === "") return [];
 
-            const { data: { clientSecretData } } = await apiRequest.get<{ clientSecretData: ClientSecretData[] }>(
-                `/api/v1/auth/universal-auth/identities/${identityId}/client-secrets`
-            );
-        
-            return clientSecretData;
-        }
-    });
-}
\ No newline at end of file
+      const {
+        data: { clientSecretData }
+      } = await apiRequest.get<{ clientSecretData: ClientSecretData[] }>(
+        `/api/v1/auth/universal-auth/identities/${identityId}/client-secrets`
+      );
+
+      return clientSecretData;
+    }
+  });
+};
diff --git a/frontend/src/hooks/api/index.tsx b/frontend/src/hooks/api/index.tsx
index 84c1632c1..4ec8db3ac 100644
--- a/frontend/src/hooks/api/index.tsx
+++ b/frontend/src/hooks/api/index.tsx
@@ -1,4 +1,4 @@
-export * from "./admin"
+export * from "./admin";
 export * from "./apiKeys";
 export * from "./auditLogs";
 export * from "./auth";
@@ -27,4 +27,4 @@ export * from "./tags";
 export * from "./trustedIps";
 export * from "./users";
 export * from "./webhooks";
-export * from "./workspace";
\ No newline at end of file
+export * from "./workspace";
diff --git a/frontend/src/hooks/api/integrationAuth/index.tsx b/frontend/src/hooks/api/integrationAuth/index.tsx
index 545985fa9..5f0503eee 100644
--- a/frontend/src/hooks/api/integrationAuth/index.tsx
+++ b/frontend/src/hooks/api/integrationAuth/index.tsx
@@ -15,4 +15,4 @@ export {
   useGetIntegrationAuthTeams,
   useGetIntegrationAuthVercelBranches,
   useSaveIntegrationAccessToken
-} from "./queries";
\ No newline at end of file
+} from "./queries";
diff --git a/frontend/src/hooks/api/integrationAuth/queries.tsx b/frontend/src/hooks/api/integrationAuth/queries.tsx
index fda7e322d..073fde34b 100644
--- a/frontend/src/hooks/api/integrationAuth/queries.tsx
+++ b/frontend/src/hooks/api/integrationAuth/queries.tsx
@@ -68,8 +68,8 @@ const integrationAuthKeys = {
     environmentId: string;
     scope: "job" | "application" | "container";
   }) => [{ integrationAuthId, environmentId, scope }, "integrationAuthQoveryScopes"] as const,
-  getIntegrationAuthHerokuPipelines: ({ integrationAuthId }: { integrationAuthId: string; }) => 
-  [{ integrationAuthId}, "integrationAuthHerokuPipelines"] as const,
+  getIntegrationAuthHerokuPipelines: ({ integrationAuthId }: { integrationAuthId: string }) =>
+    [{ integrationAuthId }, "integrationAuthHerokuPipelines"] as const,
   getIntegrationAuthRailwayEnvironments: ({
     integrationAuthId,
     appId
@@ -322,8 +322,10 @@ const fetchIntegrationAuthQoveryScopes = async ({
   return undefined;
 };
 
-const fetchIntegrationAuthHerokuPipelines = async ({ integrationAuthId }: { 
-  integrationAuthId: string; 
+const fetchIntegrationAuthHerokuPipelines = async ({
+  integrationAuthId
+}: {
+  integrationAuthId: string;
 }) => {
   const {
     data: { pipelines }
diff --git a/frontend/src/hooks/api/integrations/index.tsx b/frontend/src/hooks/api/integrations/index.tsx
index d0eb50ca6..f91d85644 100644
--- a/frontend/src/hooks/api/integrations/index.tsx
+++ b/frontend/src/hooks/api/integrations/index.tsx
@@ -1,5 +1 @@
-export { 
-    useCreateIntegration,
-    useDeleteIntegration,
-    useGetCloudIntegrations 
-} from "./queries";
+export { useCreateIntegration, useDeleteIntegration, useGetCloudIntegrations } from "./queries";
diff --git a/frontend/src/hooks/api/integrations/queries.tsx b/frontend/src/hooks/api/integrations/queries.tsx
index 74eb0b465..80a2df6fa 100644
--- a/frontend/src/hooks/api/integrations/queries.tsx
+++ b/frontend/src/hooks/api/integrations/queries.tsx
@@ -63,9 +63,11 @@ export const useCreateIntegration = () => {
         secretSuffix?: string;
         initialSyncBehavior?: string;
         shouldAutoRedeploy?: boolean;
-      }
+      };
     }) => {
-      const { data: { integration } } = await apiRequest.post("/api/v1/integration", {
+      const {
+        data: { integration }
+      } = await apiRequest.post("/api/v1/integration", {
         integrationAuthId,
         isActive,
         app,
@@ -101,4 +103,4 @@ export const useDeleteIntegration = () => {
       queryClient.invalidateQueries(workspaceKeys.getWorkspaceAuthorization(workspaceId));
     }
   });
-};
\ No newline at end of file
+};
diff --git a/frontend/src/hooks/api/ldapConfig/index.tsx b/frontend/src/hooks/api/ldapConfig/index.tsx
index db04c294f..bc93e7fcf 100644
--- a/frontend/src/hooks/api/ldapConfig/index.tsx
+++ b/frontend/src/hooks/api/ldapConfig/index.tsx
@@ -1,5 +1 @@
-export {
-    useCreateLDAPConfig,
-    useGetLDAPConfig,
-    useUpdateLDAPConfig
-} from "./queries";
\ No newline at end of file
+export { useCreateLDAPConfig, useGetLDAPConfig, useUpdateLDAPConfig } from "./queries";
diff --git a/frontend/src/hooks/api/ldapConfig/queries.tsx b/frontend/src/hooks/api/ldapConfig/queries.tsx
index 5616ad35c..4c97c5fc6 100644
--- a/frontend/src/hooks/api/ldapConfig/queries.tsx
+++ b/frontend/src/hooks/api/ldapConfig/queries.tsx
@@ -3,27 +3,42 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { apiRequest } from "@app/config/request";
 
 const ldapConfigKeys = {
-  getLDAPConfig: (orgId: string) => [{ orgId }, "organization-ldap"] as const,
-}
+  getLDAPConfig: (orgId: string) => [{ orgId }, "organization-ldap"] as const
+};
 
 export const useGetLDAPConfig = (organizationId: string) => {
   return useQuery({
     queryKey: ldapConfigKeys.getLDAPConfig(organizationId),
     queryFn: async () => {
-      const { data } = await apiRequest.get(
-        `/api/v1/ldap/config?organizationId=${organizationId}`
-      );
+      const { data } = await apiRequest.get(`/api/v1/ldap/config?organizationId=${organizationId}`);
 
       return data;
     },
     enabled: true
   });
-}
+};
 
 export const useCreateLDAPConfig = () => {
   const queryClient = useQueryClient();
   return useMutation({
     mutationFn: async ({
+      organizationId,
+      isActive,
+      url,
+      bindDN,
+      bindPass,
+      searchBase,
+      caCert
+    }: {
+      organizationId: string;
+      isActive: boolean;
+      url: string;
+      bindDN: string;
+      bindPass: string;
+      searchBase: string;
+      caCert?: string;
+    }) => {
+      const { data } = await apiRequest.post("/api/v1/ldap/config", {
         organizationId,
         isActive,
         url,
@@ -31,28 +46,8 @@ export const useCreateLDAPConfig = () => {
         bindPass,
         searchBase,
         caCert
-    }: {
-        organizationId: string;
-        isActive: boolean;
-        url: string;
-        bindDN: string;
-        bindPass: string;
-        searchBase: string;
-        caCert?: string;
-    }) => {
-      const { data } = await apiRequest.post(
-        "/api/v1/ldap/config",
-        {
-            organizationId,
-            isActive,
-            url,
-            bindDN,
-            bindPass,
-            searchBase,
-            caCert
-        }
-      );
-      
+      });
+
       return data;
     },
     onSuccess(_, dto) {
@@ -65,6 +60,23 @@ export const useUpdateLDAPConfig = () => {
   const queryClient = useQueryClient();
   return useMutation({
     mutationFn: async ({
+      organizationId,
+      isActive,
+      url,
+      bindDN,
+      bindPass,
+      searchBase,
+      caCert
+    }: {
+      organizationId: string;
+      isActive?: boolean;
+      url?: string;
+      bindDN?: string;
+      bindPass?: string;
+      searchBase?: string;
+      caCert?: string;
+    }) => {
+      const { data } = await apiRequest.patch("/api/v1/ldap/config", {
         organizationId,
         isActive,
         url,
@@ -72,32 +84,12 @@ export const useUpdateLDAPConfig = () => {
         bindPass,
         searchBase,
         caCert
-    }: {
-        organizationId: string;
-        isActive?: boolean;
-        url?: string;
-        bindDN?: string;
-        bindPass?: string;
-        searchBase?: string;
-        caCert?: string;
-    }) => {
-      const { data } = await apiRequest.patch(
-        "/api/v1/ldap/config",
-        {
-            organizationId,
-            isActive,
-            url,
-            bindDN,
-            bindPass,
-            searchBase,
-            caCert
-        }
-      );
-      
+      });
+
       return data;
     },
     onSuccess(_, dto) {
       queryClient.invalidateQueries(ldapConfigKeys.getLDAPConfig(dto.organizationId));
     }
   });
-};
\ No newline at end of file
+};
diff --git a/frontend/src/hooks/api/organization/index.ts b/frontend/src/hooks/api/organization/index.ts
index 6a8af3b67..9570f29b6 100644
--- a/frontend/src/hooks/api/organization/index.ts
+++ b/frontend/src/hooks/api/organization/index.ts
@@ -1,22 +1,22 @@
 export {
-    useAddOrgPmtMethod,
-    useAddOrgTaxId,
-    useCreateCustomerPortalSession,
-    useCreateOrg,
-    useDeleteOrgById,
-    useDeleteOrgPmtMethod,
-    useDeleteOrgTaxId,
-    useGetIdentityMembershipOrgs,
-    useGetOrganizations, 
-    useGetOrgBillingDetails,
-    useGetOrgInvoices,
-    useGetOrgLicenses,
-    useGetOrgPlanBillingInfo,
-    useGetOrgPlansTable,
-    useGetOrgPlanTable,
-    useGetOrgPmtMethods,
-    useGetOrgTaxIds,
-    useGetOrgTrialUrl,
-    useUpdateOrg, 
-    useUpdateOrgBillingDetails
+  useAddOrgPmtMethod,
+  useAddOrgTaxId,
+  useCreateCustomerPortalSession,
+  useCreateOrg,
+  useDeleteOrgById,
+  useDeleteOrgPmtMethod,
+  useDeleteOrgTaxId,
+  useGetIdentityMembershipOrgs,
+  useGetOrganizations,
+  useGetOrgBillingDetails,
+  useGetOrgInvoices,
+  useGetOrgLicenses,
+  useGetOrgPlanBillingInfo,
+  useGetOrgPlansTable,
+  useGetOrgPlanTable,
+  useGetOrgPmtMethods,
+  useGetOrgTaxIds,
+  useGetOrgTrialUrl,
+  useUpdateOrg,
+  useUpdateOrgBillingDetails
 } from "./queries";
diff --git a/frontend/src/hooks/api/scim/index.tsx b/frontend/src/hooks/api/scim/index.tsx
index 1981659d1..a015b0b82 100644
--- a/frontend/src/hooks/api/scim/index.tsx
+++ b/frontend/src/hooks/api/scim/index.tsx
@@ -1,5 +1,2 @@
-export { 
-    useCreateScimToken,
-    useDeleteScimToken
-} from "./mutations";
-export { useGetScimTokens } from "./queries";
\ No newline at end of file
+export { useCreateScimToken, useDeleteScimToken } from "./mutations";
+export { useGetScimTokens } from "./queries";
diff --git a/frontend/src/hooks/api/scim/mutations.tsx b/frontend/src/hooks/api/scim/mutations.tsx
index 7469fb532..f779b8860 100644
--- a/frontend/src/hooks/api/scim/mutations.tsx
+++ b/frontend/src/hooks/api/scim/mutations.tsx
@@ -3,43 +3,35 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { apiRequest } from "@app/config/request";
 
 import { scimKeys } from "./queries";
-import {
-    CreateScimTokenDTO,
-    CreateScimTokenRes,
-    DeleteScimTokenDTO
-} from "./types";
+import { CreateScimTokenDTO, CreateScimTokenRes, DeleteScimTokenDTO } from "./types";
 
 export const useCreateScimToken = () => {
-    const queryClient = useQueryClient();
-    return useMutation<CreateScimTokenRes, {}, CreateScimTokenDTO>({
-        mutationFn: async ({
-            organizationId,
-            description,
-            ttlDays
-        }) => {
-            const { data } = await apiRequest.post("/api/v1/scim/scim-tokens", {
-                organizationId,
-                description,
-                ttlDays
-            });
-            
-            return data;
-        },
-        onSuccess: (_, { organizationId }) => {
-            queryClient.invalidateQueries(scimKeys.getScimTokens(organizationId));
-        }
-    });
+  const queryClient = useQueryClient();
+  return useMutation<CreateScimTokenRes, {}, CreateScimTokenDTO>({
+    mutationFn: async ({ organizationId, description, ttlDays }) => {
+      const { data } = await apiRequest.post("/api/v1/scim/scim-tokens", {
+        organizationId,
+        description,
+        ttlDays
+      });
+
+      return data;
+    },
+    onSuccess: (_, { organizationId }) => {
+      queryClient.invalidateQueries(scimKeys.getScimTokens(organizationId));
+    }
+  });
 };
 
 export const useDeleteScimToken = () => {
-    const queryClient = useQueryClient();
-    return useMutation<CreateScimTokenRes, {}, DeleteScimTokenDTO>({
-        mutationFn: async ({ scimTokenId }) => {
-            const { data } = await apiRequest.delete(`/api/v1/scim/scim-tokens/${scimTokenId}`);
-            return data;
-        },
-        onSuccess: (_, { organizationId }) => {
-            queryClient.invalidateQueries(scimKeys.getScimTokens(organizationId));
-        }
-    });
-};
\ No newline at end of file
+  const queryClient = useQueryClient();
+  return useMutation<CreateScimTokenRes, {}, DeleteScimTokenDTO>({
+    mutationFn: async ({ scimTokenId }) => {
+      const { data } = await apiRequest.delete(`/api/v1/scim/scim-tokens/${scimTokenId}`);
+      return data;
+    },
+    onSuccess: (_, { organizationId }) => {
+      queryClient.invalidateQueries(scimKeys.getScimTokens(organizationId));
+    }
+  });
+};
diff --git a/frontend/src/hooks/api/scim/queries.tsx b/frontend/src/hooks/api/scim/queries.tsx
index f76018c01..3aa578efb 100644
--- a/frontend/src/hooks/api/scim/queries.tsx
+++ b/frontend/src/hooks/api/scim/queries.tsx
@@ -5,21 +5,25 @@ import { apiRequest } from "@app/config/request";
 import { ScimTokenData } from "./types";
 
 export const scimKeys = {
-    getScimTokens: (orgId: string) => [{ orgId }, "organization-scim-token"] as const,
+  getScimTokens: (orgId: string) => [{ orgId }, "organization-scim-token"] as const
 };
 
 export const useGetScimTokens = (organizationId: string) => {
-    return useQuery({
-        queryKey: scimKeys.getScimTokens(organizationId),
-        queryFn: async () => {
-            if (organizationId === "") {
-                return undefined;
-            }
-            
-            const { data: { scimTokens } } = await apiRequest.get<{ scimTokens: ScimTokenData[] }>(`/api/v1/scim/scim-tokens?organizationId=${organizationId}`);
-            
-            return scimTokens;
-        },
-        enabled: true
-    });
-};
\ No newline at end of file
+  return useQuery({
+    queryKey: scimKeys.getScimTokens(organizationId),
+    queryFn: async () => {
+      if (organizationId === "") {
+        return undefined;
+      }
+
+      const {
+        data: { scimTokens }
+      } = await apiRequest.get<{ scimTokens: ScimTokenData[] }>(
+        `/api/v1/scim/scim-tokens?organizationId=${organizationId}`
+      );
+
+      return scimTokens;
+    },
+    enabled: true
+  });
+};
diff --git a/frontend/src/hooks/api/scim/types.ts b/frontend/src/hooks/api/scim/types.ts
index a373ba943..45bdf2f4c 100644
--- a/frontend/src/hooks/api/scim/types.ts
+++ b/frontend/src/hooks/api/scim/types.ts
@@ -1,24 +1,24 @@
 export type ScimTokenData = {
-    id: string;
-    ttlDays: number;
-    description: string;
-    tokenSuffix: string;
-    orgId: string;
-    createdAt: string;
-    updatedAt: string;
+  id: string;
+  ttlDays: number;
+  description: string;
+  tokenSuffix: string;
+  orgId: string;
+  createdAt: string;
+  updatedAt: string;
 };
 
 export type CreateScimTokenDTO = {
-    organizationId: string;
-    description?: string;
-    ttlDays?: number;
-}
+  organizationId: string;
+  description?: string;
+  ttlDays?: number;
+};
 
 export type DeleteScimTokenDTO = {
-    organizationId: string;
-    scimTokenId: string;
-}
+  organizationId: string;
+  scimTokenId: string;
+};
 
 export type CreateScimTokenRes = {
-    scimToken: string;
-}
\ No newline at end of file
+  scimToken: string;
+};
diff --git a/frontend/src/hooks/api/serverDetails/index.ts b/frontend/src/hooks/api/serverDetails/index.ts
index 7e6aa7df6..8f3a116e3 100644
--- a/frontend/src/hooks/api/serverDetails/index.ts
+++ b/frontend/src/hooks/api/serverDetails/index.ts
@@ -1 +1 @@
-export { useFetchServerStatus } from "./queries"
\ No newline at end of file
+export { useFetchServerStatus } from "./queries";
diff --git a/frontend/src/hooks/api/serverDetails/queries.tsx b/frontend/src/hooks/api/serverDetails/queries.tsx
index 711405f2c..886cc4da3 100644
--- a/frontend/src/hooks/api/serverDetails/queries.tsx
+++ b/frontend/src/hooks/api/serverDetails/queries.tsx
@@ -1,4 +1,4 @@
-import {useQuery } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
 
 import { apiRequest } from "@app/config/request";
 
@@ -10,10 +10,10 @@ const serverStatusKeys = {
 };
 
 const fetchServerStatus = async () => {
-  const {data} = await apiRequest.get<ServerStatus>("/api/status");
+  const { data } = await apiRequest.get<ServerStatus>("/api/status");
   return data;
 };
 
-export const useFetchServerStatus= () => {
+export const useFetchServerStatus = () => {
   return useQuery({ queryKey: serverStatusKeys.serverStatus, queryFn: fetchServerStatus });
-}
\ No newline at end of file
+};
diff --git a/frontend/src/hooks/api/serverDetails/types.ts b/frontend/src/hooks/api/serverDetails/types.ts
index af7bc5b28..80d34a150 100644
--- a/frontend/src/hooks/api/serverDetails/types.ts
+++ b/frontend/src/hooks/api/serverDetails/types.ts
@@ -2,6 +2,6 @@ export type ServerStatus = {
   date: string;
   message: string;
   emailConfigured: boolean;
-  secretScanningConfigured: boolean
-  redisConfigured: boolean
+  secretScanningConfigured: boolean;
+  redisConfigured: boolean;
 };
diff --git a/frontend/src/hooks/api/serviceTokens/enums.ts b/frontend/src/hooks/api/serviceTokens/enums.ts
index 317bdb0f6..5472be503 100644
--- a/frontend/src/hooks/api/serviceTokens/enums.ts
+++ b/frontend/src/hooks/api/serviceTokens/enums.ts
@@ -1,4 +1,4 @@
 export enum Permission {
-    READ = "read",
-    WRITE = "write"
-}
\ No newline at end of file
+  READ = "read",
+  WRITE = "write"
+}
diff --git a/frontend/src/hooks/api/serviceTokens/index.ts b/frontend/src/hooks/api/serviceTokens/index.ts
index 033e6ff1a..b594d5a64 100644
--- a/frontend/src/hooks/api/serviceTokens/index.ts
+++ b/frontend/src/hooks/api/serviceTokens/index.ts
@@ -1,5 +1 @@
-export { 
-    useCreateServiceToken, 
-    useDeleteServiceToken, 
-    useGetUserWsServiceTokens,
-} from "./queries";
+export { useCreateServiceToken, useDeleteServiceToken, useGetUserWsServiceTokens } from "./queries";
diff --git a/frontend/src/hooks/api/ssoConfig/index.tsx b/frontend/src/hooks/api/ssoConfig/index.tsx
index 5b618ed07..fbc0e4670 100644
--- a/frontend/src/hooks/api/ssoConfig/index.tsx
+++ b/frontend/src/hooks/api/ssoConfig/index.tsx
@@ -1,5 +1 @@
-export {
-    useCreateSSOConfig,
-    useGetSSOConfig,
-    useUpdateSSOConfig
-} from "./queries";
\ No newline at end of file
+export { useCreateSSOConfig, useGetSSOConfig, useUpdateSSOConfig } from "./queries";
diff --git a/frontend/src/hooks/api/ssoConfig/queries.tsx b/frontend/src/hooks/api/ssoConfig/queries.tsx
index c294679f8..3074c5eda 100644
--- a/frontend/src/hooks/api/ssoConfig/queries.tsx
+++ b/frontend/src/hooks/api/ssoConfig/queries.tsx
@@ -87,7 +87,7 @@ export const useUpdateSSOConfig = () => {
       if (isActive === false) {
         queryClient.invalidateQueries(organizationKeys.getUserOrganizations);
       }
-    
+
       queryClient.invalidateQueries(ssoConfigKeys.getSSOConfig(organizationId));
     }
   });
diff --git a/frontend/src/hooks/api/trustedIps/index.ts b/frontend/src/hooks/api/trustedIps/index.ts
index eb86f8e40..c40c2b2a5 100644
--- a/frontend/src/hooks/api/trustedIps/index.ts
+++ b/frontend/src/hooks/api/trustedIps/index.ts
@@ -1,5 +1,6 @@
 export {
-    useAddTrustedIp,
-    useDeleteTrustedIp,
-    useGetTrustedIps,
-    useUpdateTrustedIp} from "./queries";
\ No newline at end of file
+  useAddTrustedIp,
+  useDeleteTrustedIp,
+  useGetTrustedIps,
+  useUpdateTrustedIp
+} from "./queries";
diff --git a/frontend/src/hooks/api/trustedIps/queries.ts b/frontend/src/hooks/api/trustedIps/queries.ts
index f239bb0ca..c8b4f922b 100644
--- a/frontend/src/hooks/api/trustedIps/queries.ts
+++ b/frontend/src/hooks/api/trustedIps/queries.ts
@@ -2,107 +2,104 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 
 import { apiRequest } from "@app/config/request";
 
-import {
-    TrustedIp
-} from "./types";
+import { TrustedIp } from "./types";
 
 const trustedIps = {
-    getTrustedIps: (workspaceId: string) => [{ workspaceId }, "trusted-ips"] as const
-}
+  getTrustedIps: (workspaceId: string) => [{ workspaceId }, "trusted-ips"] as const
+};
 
 export const useGetTrustedIps = (workspaceId: string) => {
-    return useQuery({ 
-        queryKey: trustedIps.getTrustedIps(workspaceId), 
-        queryFn: async () => {
-            const { data } = await apiRequest.get<{ trustedIps: TrustedIp[] }>(`/api/v1/workspace/${workspaceId}/trusted-ips`);
+  return useQuery({
+    queryKey: trustedIps.getTrustedIps(workspaceId),
+    queryFn: async () => {
+      const { data } = await apiRequest.get<{ trustedIps: TrustedIp[] }>(
+        `/api/v1/workspace/${workspaceId}/trusted-ips`
+      );
 
-            return data.trustedIps;
-        }
-    });
-}
+      return data.trustedIps;
+    }
+  });
+};
 
 export const useAddTrustedIp = () => {
-    const queryClient = useQueryClient();
-    return useMutation({
-        mutationFn: async ({
-            workspaceId,
-            ipAddress,
-            comment,
-            isActive
-        }: {
-            workspaceId: string;
-            ipAddress: string;
-            comment?: string;
-            isActive: boolean;
-        }) => {
-            const { data } = await apiRequest.post(
-                `/api/v1/workspace/${workspaceId}/trusted-ips`, 
-                {
-                    ipAddress,
-                    ...(comment ? { comment } : {}),
-                    isActive
-                }
-            );
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async ({
+      workspaceId,
+      ipAddress,
+      comment,
+      isActive
+    }: {
+      workspaceId: string;
+      ipAddress: string;
+      comment?: string;
+      isActive: boolean;
+    }) => {
+      const { data } = await apiRequest.post(`/api/v1/workspace/${workspaceId}/trusted-ips`, {
+        ipAddress,
+        ...(comment ? { comment } : {}),
+        isActive
+      });
 
-            return data;
-        },
-            onSuccess(_, dto) {
-            queryClient.invalidateQueries(trustedIps.getTrustedIps(dto.workspaceId));
-        }
-    });
+      return data;
+    },
+    onSuccess(_, dto) {
+      queryClient.invalidateQueries(trustedIps.getTrustedIps(dto.workspaceId));
+    }
+  });
 };
 
 export const useUpdateTrustedIp = () => {
-    const queryClient = useQueryClient();
-    return useMutation({
-        mutationFn: async ({
-            workspaceId,
-            trustedIpId,
-            ipAddress,
-            comment,
-            isActive
-        }: {
-            workspaceId: string;
-            trustedIpId: string;
-            ipAddress: string;
-            comment?: string;
-            isActive: boolean;
-        }) => {
-            const { data } = await apiRequest.patch(
-                `/api/v1/workspace/${workspaceId}/trusted-ips/${trustedIpId}`,
-                {
-                    ipAddress,
-                    ...(comment ? { comment } : {}),
-                    isActive
-                }
-            );
-
-            return data;
-        },
-            onSuccess(_, dto) {
-            queryClient.invalidateQueries(trustedIps.getTrustedIps(dto.workspaceId));
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async ({
+      workspaceId,
+      trustedIpId,
+      ipAddress,
+      comment,
+      isActive
+    }: {
+      workspaceId: string;
+      trustedIpId: string;
+      ipAddress: string;
+      comment?: string;
+      isActive: boolean;
+    }) => {
+      const { data } = await apiRequest.patch(
+        `/api/v1/workspace/${workspaceId}/trusted-ips/${trustedIpId}`,
+        {
+          ipAddress,
+          ...(comment ? { comment } : {}),
+          isActive
         }
-    });
+      );
+
+      return data;
+    },
+    onSuccess(_, dto) {
+      queryClient.invalidateQueries(trustedIps.getTrustedIps(dto.workspaceId));
+    }
+  });
 };
 
 export const useDeleteTrustedIp = () => {
-    const queryClient = useQueryClient();
-    return useMutation({
-        mutationFn: async ({
-            workspaceId,
-            trustedIpId,
-        }: {
-            workspaceId: string;
-            trustedIpId: string;
-        }) => {
-            const { data } = await apiRequest.delete(
-                `/api/v1/workspace/${workspaceId}/trusted-ips/${trustedIpId}`
-            );
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async ({
+      workspaceId,
+      trustedIpId
+    }: {
+      workspaceId: string;
+      trustedIpId: string;
+    }) => {
+      const { data } = await apiRequest.delete(
+        `/api/v1/workspace/${workspaceId}/trusted-ips/${trustedIpId}`
+      );
 
-            return data;
-        },
-            onSuccess(_, dto) {
-            queryClient.invalidateQueries(trustedIps.getTrustedIps(dto.workspaceId));
-        }
-    });
-};
\ No newline at end of file
+      return data;
+    },
+    onSuccess(_, dto) {
+      queryClient.invalidateQueries(trustedIps.getTrustedIps(dto.workspaceId));
+    }
+  });
+};
diff --git a/frontend/src/hooks/api/workspace/queries.tsx b/frontend/src/hooks/api/workspace/queries.tsx
index 24a7e5794..716f02d18 100644
--- a/frontend/src/hooks/api/workspace/queries.tsx
+++ b/frontend/src/hooks/api/workspace/queries.tsx
@@ -325,7 +325,13 @@ export const useDeleteUserFromWorkspace = () => {
   const queryClient = useQueryClient();
 
   return useMutation({
-    mutationFn: async ({ usernames, workspaceId }: { workspaceId: string; usernames: string[] }) => {
+    mutationFn: async ({
+      usernames,
+      workspaceId
+    }: {
+      workspaceId: string;
+      usernames: string[];
+    }) => {
       const {
         data: { deletedMembership }
       } = await apiRequest.delete(`/api/v2/workspace/${workspaceId}/memberships`, {
@@ -391,11 +397,7 @@ export const useAddIdentityToWorkspace = () => {
 export const useUpdateIdentityWorkspaceRole = () => {
   const queryClient = useQueryClient();
   return useMutation({
-    mutationFn: async ({
-      identityId,
-      workspaceId,
-      roles
-    }:TUpdateWorkspaceIdentityRoleDTO)=> {
+    mutationFn: async ({ identityId, workspaceId, roles }: TUpdateWorkspaceIdentityRoleDTO) => {
       const {
         data: { identityMembership }
       } = await apiRequest.patch(
diff --git a/frontend/src/hooks/api/workspace/types.ts b/frontend/src/hooks/api/workspace/types.ts
index 657b07693..d6219c9c7 100644
--- a/frontend/src/hooks/api/workspace/types.ts
+++ b/frontend/src/hooks/api/workspace/types.ts
@@ -82,16 +82,16 @@ export type TUpdateWorkspaceUserRoleDTO = {
   workspaceId: string;
   roles: (
     | {
-      role: string;
-      isTemporary?: false;
-    }
+        role: string;
+        isTemporary?: false;
+      }
     | {
-      role: string;
-      isTemporary: true;
-      temporaryMode: ProjectUserMembershipTemporaryMode;
-      temporaryRange: string;
-      temporaryAccessStartTime: string;
-    }
+        role: string;
+        isTemporary: true;
+        temporaryMode: ProjectUserMembershipTemporaryMode;
+        temporaryRange: string;
+        temporaryAccessStartTime: string;
+      }
   )[];
 };
 
@@ -100,15 +100,15 @@ export type TUpdateWorkspaceIdentityRoleDTO = {
   workspaceId: string;
   roles: (
     | {
-      role: string;
-      isTemporary?: false;
-    }
+        role: string;
+        isTemporary?: false;
+      }
     | {
-      role: string;
-      isTemporary: true;
-      temporaryMode: ProjectUserMembershipTemporaryMode;
-      temporaryRange: string;
-      temporaryAccessStartTime: string;
-    }
+        role: string;
+        isTemporary: true;
+        temporaryMode: ProjectUserMembershipTemporaryMode;
+        temporaryRange: string;
+        temporaryAccessStartTime: string;
+      }
   )[];
 };
diff --git a/frontend/src/i18n.ts b/frontend/src/i18n.ts
index 8eed25a42..4179efb23 100644
--- a/frontend/src/i18n.ts
+++ b/frontend/src/i18n.ts
@@ -19,7 +19,7 @@ i18n
   // init i18next
   // for all options read: https://www.i18next.com/overview/configuration-options
   .init({
-    lng:"en",
+    lng: "en",
     fallbackLng: "en",
     // supportedLngs: ["en", "ko", "fr", "pt-BR", "pt-PT", "es"],
     debug: process.env.NODE_ENV === "development",
diff --git a/frontend/src/lib/fn/array.ts b/frontend/src/lib/fn/array.ts
index 33409653a..b92390697 100644
--- a/frontend/src/lib/fn/array.ts
+++ b/frontend/src/lib/fn/array.ts
@@ -4,12 +4,12 @@
  * each item in that group.
  */
 export const groupBy = <T, Key extends string | number | symbol>(
-	array: readonly T[],
-	getGroupId: (item: T) => Key
+  array: readonly T[],
+  getGroupId: (item: T) => Key
 ): Record<Key, T[]> =>
-	array.reduce((acc, item) => {
-		const groupId = getGroupId(item);
-		if (!acc[groupId]) acc[groupId] = [];
-		acc[groupId].push(item);
-		return acc;
-	}, {} as Record<Key, T[]>);
+  array.reduce((acc, item) => {
+    const groupId = getGroupId(item);
+    if (!acc[groupId]) acc[groupId] = [];
+    acc[groupId].push(item);
+    return acc;
+  }, {} as Record<Key, T[]>);
diff --git a/frontend/src/pages/404.tsx b/frontend/src/pages/404.tsx
index d24e534ca..f4d380786 100644
--- a/frontend/src/pages/404.tsx
+++ b/frontend/src/pages/404.tsx
@@ -4,34 +4,31 @@ import Link from "next/link";
 
 export default function Custom404() {
   return (
-    <div className='bg-bunker-800 md:h-screen flex flex-col justify-between'>
+    <div className="flex flex-col justify-between bg-bunker-800 md:h-screen">
       <Head>
         <title>Infisical | Page Not Found</title>
-        <link rel='icon' href='/infisical.ico' />
+        <link rel="icon" href="/infisical.ico" />
       </Head>
-      <div className='flex flex-col items-center justify-center text-gray-200 h-screen w-screen'>
-        <p className='text-4xl mt-32'>Oops, something went wrong</p>
-        <p className='mt-2 mb-1 text-lg'>
+      <div className="flex h-screen w-screen flex-col items-center justify-center text-gray-200">
+        <p className="mt-32 text-4xl">Oops, something went wrong</p>
+        <p className="mt-2 mb-1 text-lg">
           Think this is a mistake? Email{" "}
-          <a
-            className='text-primary underline underline-offset-4'
-            href='mailto:team@infisical.com'
-          >
+          <a className="text-primary underline underline-offset-4" href="mailto:team@infisical.com">
             team@infisical.com
           </a>{" "}
           and we`ll fix it!{" "}
         </p>
-        <Link href='/dashboard'>
-          <div className="mt-8 bg-mineshaft-500 py-2 px-4 rounded-md hover:bg-primary diration-200 hover:text-black font-semibold cursor-default">
+        <Link href="/dashboard">
+          <div className="diration-200 mt-8 cursor-default rounded-md bg-mineshaft-500 py-2 px-4 font-semibold hover:bg-primary hover:text-black">
             Go to Dashboard
           </div>
         </Link>
         <Image
-          src='/images/dragon-404.svg'
+          src="/images/dragon-404.svg"
           height={554}
           width={942}
-          alt='infisical dragon - page not found'
-         />
+          alt="infisical dragon - page not found"
+        />
       </div>
     </div>
   );
diff --git a/frontend/src/pages/admin/signup.tsx b/frontend/src/pages/admin/signup.tsx
index 2aa1d17d1..af191c771 100644
--- a/frontend/src/pages/admin/signup.tsx
+++ b/frontend/src/pages/admin/signup.tsx
@@ -7,7 +7,7 @@ export default function LoginPage() {
   const { t } = useTranslation();
 
   return (
-    <div className="flex min-h-screen max-h-screen overflow-y-auto flex-col justify-center bg-gradient-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 px-6">
+    <div className="flex max-h-screen min-h-screen flex-col justify-center overflow-y-auto bg-gradient-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 px-6">
       <Head>
         <title>{t("common.head-title", { title: t("signup.title") })}</title>
         <link rel="icon" href="/infisical.ico" />
diff --git a/frontend/src/pages/api/auth/CheckAuth.ts b/frontend/src/pages/api/auth/CheckAuth.ts
index f1b98f087..28d9f1d7c 100644
--- a/frontend/src/pages/api/auth/CheckAuth.ts
+++ b/frontend/src/pages/api/auth/CheckAuth.ts
@@ -11,6 +11,6 @@ const checkAuth = async () => {
       "Content-Type": "application/json"
     }
   }).then((res) => res);
-}
+};
 
 export default checkAuth;
diff --git a/frontend/src/pages/api/secret-scanning/linkGitAppInstallationWithOrganization.ts b/frontend/src/pages/api/secret-scanning/linkGitAppInstallationWithOrganization.ts
index fa841d9c5..e8732f5a0 100644
--- a/frontend/src/pages/api/secret-scanning/linkGitAppInstallationWithOrganization.ts
+++ b/frontend/src/pages/api/secret-scanning/linkGitAppInstallationWithOrganization.ts
@@ -2,7 +2,7 @@ import SecurityClient from "@app/components/utilities/SecurityClient";
 
 /**
  * Will create a new integration session and return it for the given org
- * @returns 
+ * @returns
  */
 const linkGitAppInstallationWithOrganization = (installationId: string, sessionId: string) =>
   SecurityClient.fetchCall("/api/v1/secret-scanning/link-installation", {
@@ -16,7 +16,7 @@ const linkGitAppInstallationWithOrganization = (installationId: string, sessionI
     })
   }).then(async (res) => {
     if (res && res.status === 200) {
-      return true
+      return true;
     }
     console.log("Failed to link installation to organization");
     return undefined;
diff --git a/frontend/src/pages/api/secret-scanning/updateRiskStatus.ts b/frontend/src/pages/api/secret-scanning/updateRiskStatus.ts
index 470385af4..361e70236 100644
--- a/frontend/src/pages/api/secret-scanning/updateRiskStatus.ts
+++ b/frontend/src/pages/api/secret-scanning/updateRiskStatus.ts
@@ -4,25 +4,26 @@ export enum RiskStatus {
   RESOLVED_FALSE_POSITIVE = "RESOLVED_FALSE_POSITIVE",
   RESOLVED_REVOKED = "RESOLVED_REVOKED",
   RESOLVED_NOT_REVOKED = "RESOLVED_NOT_REVOKED",
-  UNRESOLVED = "UNRESOLVED",
+  UNRESOLVED = "UNRESOLVED"
 }
 
-
-
 /**
  * Will create a new integration session and return it for the given org
- * @returns 
+ * @returns
  */
 const updateRiskStatus = (organizationId: string, riskId: string, status: RiskStatus) =>
-  SecurityClient.fetchCall(`/api/v1/secret-scanning/organization/${organizationId}/risks/${riskId}/status`, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json"
-    },
-    body: JSON.stringify({
-      status
-    })
-  }).then(async (res) => {
+  SecurityClient.fetchCall(
+    `/api/v1/secret-scanning/organization/${organizationId}/risks/${riskId}/status`,
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({
+        status
+      })
+    }
+  ).then(async (res) => {
     if (res && res.status === 200) {
       return res.json();
     }
diff --git a/frontend/src/pages/cli-redirect.tsx b/frontend/src/pages/cli-redirect.tsx
index 977222cd7..9838d3ea1 100644
--- a/frontend/src/pages/cli-redirect.tsx
+++ b/frontend/src/pages/cli-redirect.tsx
@@ -3,17 +3,19 @@ import Image from "next/image";
 
 export default function CliRedirect() {
   return (
-    <div className='bg-bunker-800 md:h-screen flex flex-col justify-between'>
+    <div className="flex flex-col justify-between bg-bunker-800 md:h-screen">
       <Head>
         <title>Infisical CLI | Login Successful!</title>
-        <link rel='icon' href='/infisical.ico' />
+        <link rel="icon" href="/infisical.ico" />
       </Head>
-      <div className='flex flex-col items-center justify-center text-gray-200 h-screen w-screen'>
+      <div className="flex h-screen w-screen flex-col items-center justify-center text-gray-200">
         <div className="mb-8 flex justify-center">
           <Image src="/images/gradientLogo.svg" height={90} width={120} alt="Infisical Logo" />
         </div>
-        <p className='text-3xl font-medium text-transparent bg-clip-text bg-gradient-to-b from-white to-bunker-200 text-center'>Head back to your terminal</p>
-        <p className='mb-1 text-lg text-light text-mineshaft-400'>
+        <p className="bg-gradient-to-b from-white to-bunker-200 bg-clip-text text-center text-3xl font-medium text-transparent">
+          Head back to your terminal
+        </p>
+        <p className="text-light mb-1 text-lg text-mineshaft-400">
           You&apos;ve successfully logged in to the Infisical CLI
         </p>
       </div>
diff --git a/frontend/src/pages/email-not-verified.tsx b/frontend/src/pages/email-not-verified.tsx
index 7325d4d4a..485cbdca3 100644
--- a/frontend/src/pages/email-not-verified.tsx
+++ b/frontend/src/pages/email-not-verified.tsx
@@ -3,16 +3,16 @@ import Head from "next/head";
 
 export default function EmailNotFeriviedPage() {
   return (
-    <div className="bg-bunker-800 md:h-screen flex flex-col justify-between">
+    <div className="flex flex-col justify-between bg-bunker-800 md:h-screen">
       <Head>
         <title>Request a New Invite</title>
         <link rel="icon" href="/infisical.ico" />
       </Head>
-      <div className="flex flex-col items-center justify-center text-gray-200 h-screen w-screen">
+      <div className="flex h-screen w-screen flex-col items-center justify-center text-gray-200">
         <p className="text-6xl">Oops.</p>
         <p className="mt-2 mb-1 text-xl">Your email was not verified. </p>
         <p className="text-xl">Please try again.</p>
-        <p className="text-md mt-8 text-gray-600 max-w-sm text-center">
+        <p className="text-md mt-8 max-w-sm text-center text-gray-600">
           Note: If it still doesn&apos;t work, please reach out to us at support@infisical.com
         </p>
       </div>
diff --git a/frontend/src/pages/index.tsx b/frontend/src/pages/index.tsx
index 615393cbd..331e05c6e 100644
--- a/frontend/src/pages/index.tsx
+++ b/frontend/src/pages/index.tsx
@@ -9,5 +9,5 @@ export default function Home() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  return <div className="bg-bunker-800 w-screen" />;
+  return <div className="w-screen bg-bunker-800" />;
 }
diff --git a/frontend/src/pages/integrations/cloudflare-pages/authorize.tsx b/frontend/src/pages/integrations/cloudflare-pages/authorize.tsx
index e526271e5..6495f00bd 100644
--- a/frontend/src/pages/integrations/cloudflare-pages/authorize.tsx
+++ b/frontend/src/pages/integrations/cloudflare-pages/authorize.tsx
@@ -1,92 +1,87 @@
 import { useState } from "react";
 import { useRouter } from "next/router";
 
-import {
-    useSaveIntegrationAccessToken
-} from "@app/hooks/api";
+import { useSaveIntegrationAccessToken } from "@app/hooks/api";
 
-import { Button,Card, CardTitle, FormControl, Input } from "../../../components/v2";
+import { Button, Card, CardTitle, FormControl, Input } from "../../../components/v2";
 
 export default function CloudflarePagesIntegrationPage() {
-    const router = useRouter();
-    const { mutateAsync } = useSaveIntegrationAccessToken();
+  const router = useRouter();
+  const { mutateAsync } = useSaveIntegrationAccessToken();
 
-    const [accessKey, setAccessKey] = useState("");
-    const [accessKeyErrorText, setAccessKeyErrorText] = useState("");
-    const [accountId, setAccountId] = useState("");
-    const [accountIdErrorText, setAccountIdErrorText] = useState("");
-    const [isLoading, setIsLoading] = useState(false);
+  const [accessKey, setAccessKey] = useState("");
+  const [accessKeyErrorText, setAccessKeyErrorText] = useState("");
+  const [accountId, setAccountId] = useState("");
+  const [accountIdErrorText, setAccountIdErrorText] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
 
-    const handleButtonClick = async () => {
-        try {
-            setAccessKeyErrorText("");
-            setAccountIdErrorText("");
-            if (accessKey.length === 0 || accountId.length === 0) {
-                if (accessKey.length === 0) setAccessKeyErrorText("API token cannot be blank!");
-                if (accountId.length === 0) setAccountIdErrorText("Account ID cannot be blank!");
-                return;
-            }
+  const handleButtonClick = async () => {
+    try {
+      setAccessKeyErrorText("");
+      setAccountIdErrorText("");
+      if (accessKey.length === 0 || accountId.length === 0) {
+        if (accessKey.length === 0) setAccessKeyErrorText("API token cannot be blank!");
+        if (accountId.length === 0) setAccountIdErrorText("Account ID cannot be blank!");
+        return;
+      }
 
-            setIsLoading(true);
+      setIsLoading(true);
 
-            const integrationAuth = await mutateAsync({
-                workspaceId: localStorage.getItem("projectData.id"),
-                integration: "cloudflare-pages",
-                accessId: accountId,
-                accessToken: accessKey
-            });
+      const integrationAuth = await mutateAsync({
+        workspaceId: localStorage.getItem("projectData.id"),
+        integration: "cloudflare-pages",
+        accessId: accountId,
+        accessToken: accessKey
+      });
 
-            setAccessKey("");
-            setAccountId("");
-            setIsLoading(false);
+      setAccessKey("");
+      setAccountId("");
+      setIsLoading(false);
 
-            router.push(`/integrations/cloudflare-pages/create?integrationAuthId=${integrationAuth.id}`);
-        } catch (err) {
-            console.error(err);
-        }
+      router.push(`/integrations/cloudflare-pages/create?integrationAuthId=${integrationAuth.id}`);
+    } catch (err) {
+      console.error(err);
     }
+  };
 
-    return (
-        <div className="flex h-full w-full items-center justify-center">
-            <Card className="max-w-lg rounded-md border border-mineshaft-600 mb-12">
-                <CardTitle className="text-left px-6" subTitle="After adding your API-key, you will be prompted to set up an integration for a particular Infisical project and environment.">Cloudflare Pages Integration</CardTitle>
-                <FormControl
-                    label="Cloudflare Pages API token"
-                    errorText={accessKeyErrorText}
-                    isError={accessKeyErrorText !== "" ?? false}
-                    className="mx-6"
-                >
-                    <Input
-                        placeholder=""
-                        value={accessKey}
-                        onChange={(e) => setAccessKey(e.target.value)}
-                    />
-                </FormControl>
-                <FormControl
-                    label="Cloudflare Pages Account ID"
-                    errorText={accountIdErrorText}
-                    isError={accountIdErrorText !== "" ?? false}
-                    className="mx-6"
-                >
-                    <Input
-                        placeholder=""
-                        value={accountId}
-                        onChange={(e) => setAccountId(e.target.value)}
-                    />
-                </FormControl>
-                <Button
-                    onClick={handleButtonClick}
-                    color="mineshaft"
-                    variant="outline_bg"
-                    className="mb-6 mt-2 ml-auto mr-6 w-min"
-                    isFullWidth={false}
-                    isLoading={isLoading}
-                >
-                    Connect to Cloudflare Pages
-                </Button>
-            </Card>
-        </div>
-    );
+  return (
+    <div className="flex h-full w-full items-center justify-center">
+      <Card className="mb-12 max-w-lg rounded-md border border-mineshaft-600">
+        <CardTitle
+          className="px-6 text-left"
+          subTitle="After adding your API-key, you will be prompted to set up an integration for a particular Infisical project and environment."
+        >
+          Cloudflare Pages Integration
+        </CardTitle>
+        <FormControl
+          label="Cloudflare Pages API token"
+          errorText={accessKeyErrorText}
+          isError={accessKeyErrorText !== "" ?? false}
+          className="mx-6"
+        >
+          <Input placeholder="" value={accessKey} onChange={(e) => setAccessKey(e.target.value)} />
+        </FormControl>
+        <FormControl
+          label="Cloudflare Pages Account ID"
+          errorText={accountIdErrorText}
+          isError={accountIdErrorText !== "" ?? false}
+          className="mx-6"
+        >
+          <Input placeholder="" value={accountId} onChange={(e) => setAccountId(e.target.value)} />
+        </FormControl>
+        <Button
+          onClick={handleButtonClick}
+          color="mineshaft"
+          variant="outline_bg"
+          className="mb-6 mt-2 ml-auto mr-6 w-min"
+          isFullWidth={false}
+          isLoading={isLoading}
+        >
+          Connect to Cloudflare Pages
+        </Button>
+      </Card>
+    </div>
+  );
 }
 
-CloudflarePagesIntegrationPage.requireAuth = true;
\ No newline at end of file
+CloudflarePagesIntegrationPage.requireAuth = true;
diff --git a/frontend/src/pages/integrations/cloudflare-workers/create.tsx b/frontend/src/pages/integrations/cloudflare-workers/create.tsx
index 6dd87cbb7..4813de36d 100644
--- a/frontend/src/pages/integrations/cloudflare-workers/create.tsx
+++ b/frontend/src/pages/integrations/cloudflare-workers/create.tsx
@@ -6,7 +6,15 @@ import queryString from "query-string";
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import { useCreateIntegration, useGetWorkspaceById } from "@app/hooks/api";
 
-import { Button, Card, CardTitle, FormControl, Input, Select, SelectItem } from "../../../components/v2";
+import {
+  Button,
+  Card,
+  CardTitle,
+  FormControl,
+  Input,
+  Select,
+  SelectItem
+} from "../../../components/v2";
 import {
   useGetIntegrationAuthApps,
   useGetIntegrationAuthById
diff --git a/frontend/src/pages/integrations/heroku/create.tsx b/frontend/src/pages/integrations/heroku/create.tsx
index f0b66d52e..db2237253 100644
--- a/frontend/src/pages/integrations/heroku/create.tsx
+++ b/frontend/src/pages/integrations/heroku/create.tsx
@@ -4,11 +4,11 @@ import Head from "next/head";
 import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { 
-  faArrowUpRightFromSquare, 
-  faBookOpen, 
-  faBugs, 
-  // faCircleInfo 
+import {
+  faArrowUpRightFromSquare,
+  faBookOpen,
+  faBugs
+  // faCircleInfo
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { yupResolver } from "@hookform/resolvers/yup";
@@ -34,13 +34,16 @@ import {
   useGetIntegrationAuthApps,
   useGetIntegrationAuthById
 } from "../../../hooks/api/integrationAuth";
-import { 
-  // useCreateWsEnvironment, 
-  useGetWorkspaceById 
+import {
+  // useCreateWsEnvironment,
+  useGetWorkspaceById
 } from "../../../hooks/api/workspace";
 
 const initialSyncBehaviors = [
-  { label: "No Import - Overwrite all values in Heroku", value: IntegrationSyncBehavior.OVERWRITE_TARGET },
+  {
+    label: "No Import - Overwrite all values in Heroku",
+    value: IntegrationSyncBehavior.OVERWRITE_TARGET
+  },
   { label: "Import - Prefer values from Heroku", value: IntegrationSyncBehavior.PREFER_TARGET },
   { label: "Import - Prefer values from Infisical", value: IntegrationSyncBehavior.PREFER_SOURCE }
 ];
@@ -51,7 +54,10 @@ const schema = yup.object({
   targetApp: yup.string().required("Heroku app is required"),
   initialSyncBehavior: yup
     .string()
-    .oneOf(initialSyncBehaviors.map((b) => b.value), "Invalid initial sync behavior")
+    .oneOf(
+      initialSyncBehaviors.map((b) => b.value),
+      "Invalid initial sync behavior"
+    )
     .required("Initial sync behavior is required")
 });
 
@@ -59,7 +65,7 @@ type FormData = yup.InferType<typeof schema>;
 
 export default function HerokuCreateIntegrationPage() {
   const router = useRouter();
-  
+
   const { control, handleSubmit, setValue, watch } = useForm<FormData>({
     resolver: yupResolver(schema),
     defaultValues: {
@@ -70,7 +76,6 @@ export default function HerokuCreateIntegrationPage() {
 
   const selectedSourceEnvironment = watch("selectedSourceEnvironment");
 
-
   const { mutateAsync } = useCreateIntegration();
   // const { mutateAsync: mutateAsyncEnv } = useCreateWsEnvironment();
 
@@ -78,19 +83,20 @@ export default function HerokuCreateIntegrationPage() {
 
   const { data: workspace } = useGetWorkspaceById(localStorage.getItem("projectData.id") ?? "");
   const { data: integrationAuth } = useGetIntegrationAuthById((integrationAuthId as string) ?? "");
-  const { data: integrationAuthApps, isLoading: isIntegrationAuthAppsLoading  } = useGetIntegrationAuthApps({
-    integrationAuthId: (integrationAuthId as string) ?? ""
-  });
+  const { data: integrationAuthApps, isLoading: isIntegrationAuthAppsLoading } =
+    useGetIntegrationAuthApps({
+      integrationAuthId: (integrationAuthId as string) ?? ""
+    });
 
   // const { data: integrationAuthPipelineCouplings } = useGetIntegrationAuthHerokuPipelines({
   //   integrationAuthId: (integrationAuthId as string) ?? ""
   // });
-  
+
   // const [uniquePipelines, setUniquePipelines] = useState<Pipeline[]>();
   // const [selectedPipeline, setSelectedPipeline] = useState("");
   // const [selectedPipelineApps, setSelectedPipelineApps] = useState<App[]>();
   // const [integrationType, setIntegrationType] = useState("App");
-  
+
   const [isLoading, setIsLoading] = useState(false);
 
   useEffect(() => {
@@ -110,7 +116,7 @@ export default function HerokuCreateIntegrationPage() {
   //             }))
   //             .map((obj) => JSON.stringify(obj))
   //         )).map((str) => JSON.parse(str)) as { pipelineId: string; name: string }[]
-          
+
   //         [... (new Set())]
   //       setUniquePipelines(uniquePipelinesConst);
   //       if (uniquePipelinesConst) {
@@ -181,11 +187,7 @@ export default function HerokuCreateIntegrationPage() {
   //   }
   // };
 
-  const onFormSubmit = async ({
-    secretPath,
-    targetApp,
-    initialSyncBehavior,
-  }: FormData) => {
+  const onFormSubmit = async ({ secretPath, targetApp, initialSyncBehavior }: FormData) => {
     try {
       if (!integrationAuth?.id) return;
 
@@ -207,13 +209,10 @@ export default function HerokuCreateIntegrationPage() {
     } catch (err) {
       console.error(err);
     }
-  }
+  };
 
-  return integrationAuth &&
-    workspace &&
-    selectedSourceEnvironment &&
-    integrationAuthApps ? (
-    <div className="flex flex-col h-full w-full items-center justify-center">
+  return integrationAuth && workspace && selectedSourceEnvironment && integrationAuthApps ? (
+    <div className="flex h-full w-full flex-col items-center justify-center">
       <Head>
         <title>Set Up Heroku Integration</title>
         <link rel="icon" href="/infisical.ico" />
@@ -280,11 +279,7 @@ export default function HerokuCreateIntegrationPage() {
             defaultValue=""
             name="secretPath"
             render={({ field, fieldState: { error } }) => (
-              <FormControl
-                label="Secrets Path"
-                isError={Boolean(error)}
-                errorText={error?.message}
-              >
+              <FormControl label="Secrets Path" isError={Boolean(error)} errorText={error?.message}>
                 <Input {...field} placeholder="/" />
               </FormControl>
             )}
@@ -294,11 +289,7 @@ export default function HerokuCreateIntegrationPage() {
             name="targetApp"
             render={({ field: { onChange, ...field }, fieldState: { error } }) => {
               return (
-                <FormControl
-                  label="Heroku App"
-                  errorText={error?.message}
-                  isError={Boolean(error)}
-                >
+                <FormControl label="Heroku App" errorText={error?.message} isError={Boolean(error)}>
                   <Select
                     {...field}
                     onValueChange={(e) => {
diff --git a/frontend/src/pages/integrations/railway/create.tsx b/frontend/src/pages/integrations/railway/create.tsx
index 26845cb72..685305913 100644
--- a/frontend/src/pages/integrations/railway/create.tsx
+++ b/frontend/src/pages/integrations/railway/create.tsx
@@ -114,7 +114,9 @@ export default function RailwayCreateIntegrationPage() {
     }
   };
 
-  const filteredTargetServices = targetServices ? [ { name: "", serviceId: "none" }, ...targetServices ] : [ { name: "", serviceId: "none" } ];
+  const filteredTargetServices = targetServices
+    ? [{ name: "", serviceId: "none" }, ...targetServices]
+    : [{ name: "", serviceId: "none" }];
 
   return workspace &&
     selectedSourceEnvironment &&
@@ -201,14 +203,14 @@ export default function RailwayCreateIntegrationPage() {
             className="w-full border border-mineshaft-500"
             isDisabled={targetServices.length === 0}
           >
-              {filteredTargetServices.map((targetService) => (
-                <SelectItem
-                  value={targetService.serviceId as string}
-                  key={`target-service-${targetService.serviceId as string}`}
-                >
-                  {targetService.name}
-                </SelectItem>
-              ))}
+            {filteredTargetServices.map((targetService) => (
+              <SelectItem
+                value={targetService.serviceId as string}
+                key={`target-service-${targetService.serviceId as string}`}
+              >
+                {targetService.name}
+              </SelectItem>
+            ))}
           </Select>
         </FormControl>
         <Button
diff --git a/frontend/src/pages/integrations/render/create.tsx b/frontend/src/pages/integrations/render/create.tsx
index 72bd30445..d911940ac 100644
--- a/frontend/src/pages/integrations/render/create.tsx
+++ b/frontend/src/pages/integrations/render/create.tsx
@@ -45,7 +45,7 @@ type FormData = yup.InferType<typeof schema>;
 export default function RenderCreateIntegrationPage() {
   const router = useRouter();
   const { mutateAsync } = useCreateIntegration();
-  
+
   const { control, handleSubmit, setValue, watch } = useForm<FormData>({
     resolver: yupResolver(schema),
     defaultValues: {
@@ -84,12 +84,8 @@ export default function RenderCreateIntegrationPage() {
       }
     }
   }, [integrationAuthApps]);
-  
-  const onFormSubmit = async ({
-    secretPath,
-    targetAppId,
-    shouldAutoRedeploy
-  }: FormData) => {
+
+  const onFormSubmit = async ({ secretPath, targetAppId, shouldAutoRedeploy }: FormData) => {
     try {
       if (!integrationAuth?.id) return;
 
@@ -115,13 +111,10 @@ export default function RenderCreateIntegrationPage() {
     } catch (err) {
       console.error(err);
     }
-  }
+  };
 
-  return integrationAuth &&
-    workspace &&
-    selectedSourceEnvironment &&
-    integrationAuthApps ? (
-    <form 
+  return integrationAuth && workspace && selectedSourceEnvironment && integrationAuthApps ? (
+    <form
       onSubmit={handleSubmit(onFormSubmit)}
       className="flex h-full w-full flex-col items-center justify-center"
     >
@@ -191,11 +184,7 @@ export default function RenderCreateIntegrationPage() {
             defaultValue=""
             name="secretPath"
             render={({ field, fieldState: { error } }) => (
-              <FormControl
-                label="Secrets Path"
-                isError={Boolean(error)}
-                errorText={error?.message}
-              >
+              <FormControl label="Secrets Path" isError={Boolean(error)} errorText={error?.message}>
                 <Input {...field} placeholder="/" />
               </FormControl>
             )}
@@ -256,7 +245,7 @@ export default function RenderCreateIntegrationPage() {
         <Button
           colorSchema="primary"
           variant="outline_bg"
-          className="mb-8 ml-auto mr-6 w-min mt-4"
+          className="mb-8 ml-auto mr-6 mt-4 w-min"
           size="sm"
           type="submit"
           isLoading={isLoading}
diff --git a/frontend/src/pages/login/index.tsx b/frontend/src/pages/login/index.tsx
index fd4011feb..dd8068dd2 100644
--- a/frontend/src/pages/login/index.tsx
+++ b/frontend/src/pages/login/index.tsx
@@ -9,7 +9,7 @@ export default function LoginPage() {
   const { t } = useTranslation();
 
   return (
-    <div className="flex min-h-screen max-h-screen overflow-y-auto flex-col justify-center bg-gradient-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 px-6">
+    <div className="flex max-h-screen min-h-screen flex-col justify-center overflow-y-auto bg-gradient-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 px-6">
       <Head>
         <title>{t("common.head-title", { title: t("login.title") })}</title>
         <link rel="icon" href="/infisical.ico" />
@@ -23,7 +23,7 @@ export default function LoginPage() {
         </div>
       </Link>
       <Login />
-      <div className="pb-28"/>
+      <div className="pb-28" />
     </div>
   );
 }
diff --git a/frontend/src/pages/login/provider/error.tsx b/frontend/src/pages/login/provider/error.tsx
index e9b805fe7..7d1864511 100644
--- a/frontend/src/pages/login/provider/error.tsx
+++ b/frontend/src/pages/login/provider/error.tsx
@@ -1,10 +1,10 @@
 import { useEffect } from "react";
 
 export default function LoginProviderError() {
-    useEffect(() => {
-        window.localStorage.setItem("PROVIDER_AUTH_ERROR", "err");
-        window.close();
-    }, [])
+  useEffect(() => {
+    window.localStorage.setItem("PROVIDER_AUTH_ERROR", "err");
+    window.close();
+  }, []);
 
-    return <div />
+  return <div />;
 }
diff --git a/frontend/src/pages/login/provider/success.tsx b/frontend/src/pages/login/provider/success.tsx
index 30f256834..9d2320723 100644
--- a/frontend/src/pages/login/provider/success.tsx
+++ b/frontend/src/pages/login/provider/success.tsx
@@ -1,16 +1,16 @@
 import { useEffect } from "react";
-import { useRouter } from "next/router"
+import { useRouter } from "next/router";
 
 import SecurityClient from "@app/components/utilities/SecurityClient";
 
 export default function LoginProviderSuccess() {
-    const router = useRouter();
+  const router = useRouter();
 
-    useEffect(() => {
-        const { token } = router.query;
-        SecurityClient.setProviderAuthToken(token as string);
-        window.close();
-    }, [])
+  useEffect(() => {
+    const { token } = router.query;
+    SecurityClient.setProviderAuthToken(token as string);
+    window.close();
+  }, []);
 
-    return <div />
+  return <div />;
 }
diff --git a/frontend/src/pages/login/sso/index.tsx b/frontend/src/pages/login/sso/index.tsx
index 95bffab70..d1b5c1795 100644
--- a/frontend/src/pages/login/sso/index.tsx
+++ b/frontend/src/pages/login/sso/index.tsx
@@ -2,30 +2,30 @@ import { useTranslation } from "react-i18next";
 import Head from "next/head";
 import Image from "next/image";
 import Link from "next/link";
-import { useRouter } from "next/router"
+import { useRouter } from "next/router";
 
 import { LoginSSO } from "@app/views/Login";
 
 export default function LoginSSOPage() {
-    const { t } = useTranslation();
-    const router = useRouter();
-    const token = router.query.token as string;
+  const { t } = useTranslation();
+  const router = useRouter();
+  const token = router.query.token as string;
 
-    return (
-        <div className="flex h-screen flex-col justify-center bg-gradient-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 px-6 pb-28 ">
-            <Head>
-                <title>{t("common.head-title", { title: t("login.title") })}</title>
-                <link rel="icon" href="/infisical.ico" />
-                <meta property="og:image" content="/images/message.png" />
-                <meta property="og:title" content={t("login.og-title") ?? ""} />
-                <meta name="og:description" content={t("login.og-description") ?? ""} />
-            </Head>
-            <Link href="/">
-                <div className="mb-4 mt-20 flex justify-center">
-                <Image src="/images/gradientLogo.svg" height={90} width={120} alt="Infisical logo" />
-                </div>
-            </Link>
-            <LoginSSO providerAuthToken={token} />
+  return (
+    <div className="flex h-screen flex-col justify-center bg-gradient-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 px-6 pb-28 ">
+      <Head>
+        <title>{t("common.head-title", { title: t("login.title") })}</title>
+        <link rel="icon" href="/infisical.ico" />
+        <meta property="og:image" content="/images/message.png" />
+        <meta property="og:title" content={t("login.og-title") ?? ""} />
+        <meta name="og:description" content={t("login.og-description") ?? ""} />
+      </Head>
+      <Link href="/">
+        <div className="mb-4 mt-20 flex justify-center">
+          <Image src="/images/gradientLogo.svg" height={90} width={120} alt="Infisical logo" />
+        </div>
+      </Link>
+      <LoginSSO providerAuthToken={token} />
     </div>
-    );
-}
\ No newline at end of file
+  );
+}
diff --git a/frontend/src/pages/org/[id]/members/index.tsx b/frontend/src/pages/org/[id]/members/index.tsx
index d287400ae..e14e675ed 100644
--- a/frontend/src/pages/org/[id]/members/index.tsx
+++ b/frontend/src/pages/org/[id]/members/index.tsx
@@ -18,4 +18,4 @@ export default function SettingsOrg() {
   );
 }
 
-SettingsOrg.requireAuth = true;
\ No newline at end of file
+SettingsOrg.requireAuth = true;
diff --git a/frontend/src/pages/org/[id]/overview/index.tsx b/frontend/src/pages/org/[id]/overview/index.tsx
index b37c8ab9e..41922e5ba 100644
--- a/frontend/src/pages/org/[id]/overview/index.tsx
+++ b/frontend/src/pages/org/[id]/overview/index.tsx
@@ -454,7 +454,12 @@ const LearningItemSquare = ({
 };
 
 const formSchema = yup.object({
-  name: yup.string().required().label("Project Name").trim().max(64, "Too long, maximum length is 64 characters"),
+  name: yup
+    .string()
+    .required()
+    .label("Project Name")
+    .trim()
+    .max(64, "Too long, maximum length is 64 characters"),
   addMembers: yup.bool().required().label("Add Members")
 });
 
diff --git a/frontend/src/pages/org/none/index.tsx b/frontend/src/pages/org/none/index.tsx
index 0dacc3c03..968860fc7 100644
--- a/frontend/src/pages/org/none/index.tsx
+++ b/frontend/src/pages/org/none/index.tsx
@@ -5,16 +5,16 @@ import Head from "next/head";
 import { NonePage } from "@app/views/Org/NonePage";
 
 export default function NoneOrganization() {
-    const { t } = useTranslation();
-    return (
-        <>
-            <Head>
-                <title>{t("common.head-title", { title: t("settings.org.title") })}</title>
-                <link rel="icon" href="/infisical.ico" />
-            </Head>
-            <NonePage />
-        </>
-    );
+  const { t } = useTranslation();
+  return (
+    <>
+      <Head>
+        <title>{t("common.head-title", { title: t("settings.org.title") })}</title>
+        <link rel="icon" href="/infisical.ico" />
+      </Head>
+      <NonePage />
+    </>
+  );
 }
 
-NoneOrganization.requireAuth = true;
\ No newline at end of file
+NoneOrganization.requireAuth = true;
diff --git a/frontend/src/pages/password-reset.tsx b/frontend/src/pages/password-reset.tsx
index 3e2699e20..c23331289 100644
--- a/frontend/src/pages/password-reset.tsx
+++ b/frontend/src/pages/password-reset.tsx
@@ -308,64 +308,58 @@ export default function PasswordReset() {
               <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
             )}
             <div
-              className={`${passwordErrorNoNumOrSpecialChar ? "text-gray-400" : "text-gray-600"} text-sm`}
+              className={`${
+                passwordErrorNoNumOrSpecialChar ? "text-gray-400" : "text-gray-600"
+              } text-sm`}
             >
               at least 1 number or special character
             </div>
           </div>
           <div className="ml-1 flex flex-row items-center justify-start">
-              {passwordErrorRepeatedChar ? (
-                <FontAwesomeIcon icon={faX} className="text-md mr-2.5 text-red" />
-              ) : (
-                <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
-              )}
-              <div
-                className={`${
-                  passwordErrorRepeatedChar ? "text-gray-400" : "text-gray-600"
-                } text-sm`}
-              >
-                at most 3 repeated, consecutive characters
-              </div>
+            {passwordErrorRepeatedChar ? (
+              <FontAwesomeIcon icon={faX} className="text-md mr-2.5 text-red" />
+            ) : (
+              <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
+            )}
+            <div
+              className={`${passwordErrorRepeatedChar ? "text-gray-400" : "text-gray-600"} text-sm`}
+            >
+              at most 3 repeated, consecutive characters
+            </div>
           </div>
           <div className="ml-1 flex flex-row items-center justify-start">
-              {passwordErrorEscapeChar ? (
-                <FontAwesomeIcon icon={faX} className="text-md mr-2.5 text-red" />
-              ) : (
-                <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
-              )}
-              <div
-                className={`${
-                  passwordErrorEscapeChar ? "text-gray-400" : "text-gray-600"
-                } text-sm`}
-              >
-                No escape characters allowed.
-              </div>
+            {passwordErrorEscapeChar ? (
+              <FontAwesomeIcon icon={faX} className="text-md mr-2.5 text-red" />
+            ) : (
+              <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
+            )}
+            <div
+              className={`${passwordErrorEscapeChar ? "text-gray-400" : "text-gray-600"} text-sm`}
+            >
+              No escape characters allowed.
+            </div>
           </div>
           <div className="ml-1 flex flex-row items-center justify-start">
-              {passwordErrorLowEntropy ? (
-                <FontAwesomeIcon icon={faX} className="text-md mr-2.5 text-red" />
-              ) : (
-                <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
-              )}
-              <div
-                className={`${passwordErrorLowEntropy ? "text-gray-400" : "text-gray-600"} text-sm`}
-              >
-                Password contains personal info.
-              </div>
+            {passwordErrorLowEntropy ? (
+              <FontAwesomeIcon icon={faX} className="text-md mr-2.5 text-red" />
+            ) : (
+              <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
+            )}
+            <div
+              className={`${passwordErrorLowEntropy ? "text-gray-400" : "text-gray-600"} text-sm`}
+            >
+              Password contains personal info.
+            </div>
           </div>
           <div className="ml-1 flex flex-row items-center justify-start">
-              {passwordErrorBreached ? (
-                <FontAwesomeIcon icon={faX} className="text-md mr-2.5 text-red" />
-              ) : (
-                <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
-              )}
-              <div
-                className={`${
-                  passwordErrorBreached ? "text-gray-400" : "text-gray-600"
-                } text-sm`}
-              >
-                Password was found in a data breach.
-              </div>
+            {passwordErrorBreached ? (
+              <FontAwesomeIcon icon={faX} className="text-md mr-2.5 text-red" />
+            ) : (
+              <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
+            )}
+            <div className={`${passwordErrorBreached ? "text-gray-400" : "text-gray-600"} text-sm`}>
+              Password was found in a data breach.
+            </div>
           </div>
         </div>
       ) : (
diff --git a/frontend/src/pages/personal-settings.tsx b/frontend/src/pages/personal-settings.tsx
index 62c279200..e9e9fb260 100644
--- a/frontend/src/pages/personal-settings.tsx
+++ b/frontend/src/pages/personal-settings.tsx
@@ -7,7 +7,7 @@ export default function PersonalSettings() {
   const { t } = useTranslation();
 
   return (
-    <div className="bg-bunker-800 text-white h-full">
+    <div className="h-full bg-bunker-800 text-white">
       <Head>
         <title>{t("common.head-title", { title: t("settings.personal.title") })}</title>
         <link rel="icon" href="/infisical.ico" />
diff --git a/frontend/src/pages/project/[id]/allowlist/index.tsx b/frontend/src/pages/project/[id]/allowlist/index.tsx
index 9014cf0e9..73c25d802 100644
--- a/frontend/src/pages/project/[id]/allowlist/index.tsx
+++ b/frontend/src/pages/project/[id]/allowlist/index.tsx
@@ -4,18 +4,18 @@ import Head from "next/head";
 import { IPAllowlistPage } from "@app/views/Project/IPAllowListPage";
 
 const ProjectAllowlist = () => {
-    const { t } = useTranslation();
-    return (
-        <>
-            <Head>
-                <title>{t("common.head-title", { title: t("settings.project.title") })}</title>
-                <link rel="icon" href="/infisical.ico" />
-            </Head>
-            <IPAllowlistPage />
-        </>
-    );
-}
+  const { t } = useTranslation();
+  return (
+    <>
+      <Head>
+        <title>{t("common.head-title", { title: t("settings.project.title") })}</title>
+        <link rel="icon" href="/infisical.ico" />
+      </Head>
+      <IPAllowlistPage />
+    </>
+  );
+};
 
 export default ProjectAllowlist;
 
-ProjectAllowlist.requireAuth = true;
\ No newline at end of file
+ProjectAllowlist.requireAuth = true;
diff --git a/frontend/src/pages/project/[id]/audit-logs/index.tsx b/frontend/src/pages/project/[id]/audit-logs/index.tsx
index 3fb43de4e..6d09255f4 100644
--- a/frontend/src/pages/project/[id]/audit-logs/index.tsx
+++ b/frontend/src/pages/project/[id]/audit-logs/index.tsx
@@ -4,20 +4,20 @@ import Head from "next/head";
 import { AuditLogsPage } from "@app/views/Project/AuditLogsPage";
 
 const Logs = () => {
-    const { t } = useTranslation();
+  const { t } = useTranslation();
 
-    return (
-        <div className="h-full bg-bunker-800">
-        <Head>
-            <title>{t("common.head-title", { title: t("settings.project.title") })}</title>
-            <link rel="icon" href="/infisical.ico" />
-            <meta property="og:image" content="/images/message.png" />
-        </Head>
-        <AuditLogsPage />
+  return (
+    <div className="h-full bg-bunker-800">
+      <Head>
+        <title>{t("common.head-title", { title: t("settings.project.title") })}</title>
+        <link rel="icon" href="/infisical.ico" />
+        <meta property="og:image" content="/images/message.png" />
+      </Head>
+      <AuditLogsPage />
     </div>
-    );
-}
+  );
+};
 
 export default Logs;
 
-Logs.requireAuth = true;
\ No newline at end of file
+Logs.requireAuth = true;
diff --git a/frontend/src/pages/requestnewinvite.tsx b/frontend/src/pages/requestnewinvite.tsx
index 7bfacb4ee..dc23b5740 100644
--- a/frontend/src/pages/requestnewinvite.tsx
+++ b/frontend/src/pages/requestnewinvite.tsx
@@ -7,20 +7,25 @@ import Image from "next/image";
  */
 export default function RequestNewInvite() {
   return (
-    <div className="bg-bunker-700 md:h-screen flex flex-col justify-between">
+    <div className="flex flex-col justify-between bg-bunker-700 md:h-screen">
       <Head>
         <title>Request a New Invite</title>
         <link rel="icon" href="/infisical.ico" />
       </Head>
-      <div className="flex flex-col items-center justify-center text-bunker-200 h-screen w-screen mt-8">
+      <div className="mt-8 flex h-screen w-screen flex-col items-center justify-center text-bunker-200">
         <p className="text-4xl text-primary-100">Oops, your invite has expired.</p>
-        <p className="text-lg my-4">Ask your admin for a new one.</p>
-        <p className="text-sm text-bunker-400 max-w-xs px-7 text-center leading-tight">
-          <span className="bg-primary-500/40 text-black px-1 rounded-md">Note:</span> If it still
+        <p className="my-4 text-lg">Ask your admin for a new one.</p>
+        <p className="max-w-xs px-7 text-center text-sm leading-tight text-bunker-400">
+          <span className="rounded-md bg-primary-500/40 px-1 text-black">Note:</span> If it still
           doesn&apos;t work, please reach out to us at support@infisical.com
         </p>
         <div className="">
-          <Image src="/images/invitation-expired.svg" height={500} width={800} alt="invitation expired illustration" />
+          <Image
+            src="/images/invitation-expired.svg"
+            height={500}
+            width={800}
+            alt="invitation expired illustration"
+          />
         </div>
       </div>
     </div>
diff --git a/frontend/src/pages/secret-scanning.tsx b/frontend/src/pages/secret-scanning.tsx
index 6d043461f..f63c35f69 100644
--- a/frontend/src/pages/secret-scanning.tsx
+++ b/frontend/src/pages/secret-scanning.tsx
@@ -1,15 +1,18 @@
 import { useEffect } from "react";
-import { useRouter } from "next/router"
+import { useRouter } from "next/router";
 
 export default function SecretScanning() {
   const router = useRouter();
 
-  useEffect(()=>{
-    router.push(`${router.asPath.split("secret-scanning")[0]}/org/${localStorage.getItem("orgData.id")}/secret-scanning${router.asPath.split("secret-scanning")[1]}`)
-  }, [])
+  useEffect(() => {
+    router.push(
+      `${router.asPath.split("secret-scanning")[0]}/org/${localStorage.getItem(
+        "orgData.id"
+      )}/secret-scanning${router.asPath.split("secret-scanning")[1]}`
+    );
+  }, []);
 
-
-  return <div/>;
+  return <div />;
 }
 
-SecretScanning.requireAuth = true;
\ No newline at end of file
+SecretScanning.requireAuth = true;
diff --git a/frontend/src/pages/signup/sso/index.tsx b/frontend/src/pages/signup/sso/index.tsx
index 5d964f38d..173a4a65d 100644
--- a/frontend/src/pages/signup/sso/index.tsx
+++ b/frontend/src/pages/signup/sso/index.tsx
@@ -1,28 +1,28 @@
 import { useTranslation } from "react-i18next";
 import Head from "next/head";
 import Image from "next/image";
-import { useRouter } from "next/router"
+import { useRouter } from "next/router";
 
 import { SignupSSO } from "@app/views/Signup";
 
 export default function SignupSSOPage() {
-    const { t } = useTranslation();
-    const router = useRouter();
-    const token = router.query.token as string;
+  const { t } = useTranslation();
+  const router = useRouter();
+  const token = router.query.token as string;
 
-    return (
-        <div className="flex min-h-screen flex-col justify-center bg-gradient-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 px-6 pb-28 ">
-            <Head>
-                <title>{t("common.head-title", { title: t("signup.title") })}</title>
-                <link rel="icon" href="/infisical.ico" />
-                <meta property="og:image" content="/images/message.png" />
-                <meta property="og:title" content={t("signup.og-title") as string} />
-                <meta name="og:description" content={t("signup.og-description") as string} />
-            </Head>
-            <div className="mb-4 mt-20 flex justify-center">
-                <Image src="/images/gradientLogo.svg" height={90} width={120} alt="Infisical Logo" />
-            </div>
-            <SignupSSO providerAuthToken={token} />
-        </div>
-    );
-}
\ No newline at end of file
+  return (
+    <div className="flex min-h-screen flex-col justify-center bg-gradient-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 px-6 pb-28 ">
+      <Head>
+        <title>{t("common.head-title", { title: t("signup.title") })}</title>
+        <link rel="icon" href="/infisical.ico" />
+        <meta property="og:image" content="/images/message.png" />
+        <meta property="og:title" content={t("signup.og-title") as string} />
+        <meta name="og:description" content={t("signup.og-description") as string} />
+      </Head>
+      <div className="mb-4 mt-20 flex justify-center">
+        <Image src="/images/gradientLogo.svg" height={90} width={120} alt="Infisical Logo" />
+      </div>
+      <SignupSSO providerAuthToken={token} />
+    </div>
+  );
+}
diff --git a/frontend/src/pages/verify-email.tsx b/frontend/src/pages/verify-email.tsx
index 509a82a7b..995e60ed8 100644
--- a/frontend/src/pages/verify-email.tsx
+++ b/frontend/src/pages/verify-email.tsx
@@ -59,7 +59,10 @@ export default function VerifyEmail() {
         </div>
       </Link>
       {step === 1 && (
-        <form onSubmit={onSubmit} className="h-7/12 mx-auto w-full max-w-md rounded-xl bg-bunker px-6 py-4 pt-8 drop-shadow-xl">
+        <form
+          onSubmit={onSubmit}
+          className="h-7/12 mx-auto w-full max-w-md rounded-xl bg-bunker px-6 py-4 pt-8 drop-shadow-xl"
+        >
           <p className="mx-auto mb-6 flex w-max justify-center text-2xl font-semibold text-bunker-100 md:text-3xl">
             Forgot your password?
           </p>
@@ -81,7 +84,13 @@ export default function VerifyEmail() {
           </div>
           <div className="mx-auto mt-4 flex max-h-20 w-full max-w-md flex-col items-center justify-center text-sm md:p-2">
             <div className="text-l m-8 mt-6 px-8 py-3 text-lg">
-              <Button type="submit" text="Continue" size="lg" onButtonPressed={() => {}} loading={loading} />
+              <Button
+                type="submit"
+                text="Continue"
+                size="lg"
+                onButtonPressed={() => {}}
+                loading={loading}
+              />
             </div>
           </div>
         </form>
diff --git a/frontend/src/services/KeyService.ts b/frontend/src/services/KeyService.ts
index c2857510e..1cbc06cd3 100644
--- a/frontend/src/services/KeyService.ts
+++ b/frontend/src/services/KeyService.ts
@@ -1,111 +1,104 @@
 import {
-    decryptAssymmetric,
-    encryptAssymmetric} from "@app/components/utilities/cryptography/crypto";
-import { 
-    decryptPrivateKeyHelper
-} from "@app/helpers/key";
+  decryptAssymmetric,
+  encryptAssymmetric
+} from "@app/components/utilities/cryptography/crypto";
+import { decryptPrivateKeyHelper } from "@app/helpers/key";
 
 /**
  * Class to handle key actions
- * TODO: in future, all private key-related encryption operations 
+ * TODO: in future, all private key-related encryption operations
  * must pass through this class
  */
 class KeyService {
-    private static privateKey: string = "";
-    
-    static setPrivateKey(privateKey: string) {
-        KeyService.privateKey = privateKey;
-    }
+  private static privateKey: string = "";
 
-    /** Return the user's decrypted private key
-     * @param {Object} obj
-     * @param {Number} obj.encryptionVersion
-     * @param {String} obj.encryptedPrivateKey
-     * @param {String} obj.iv
-     * @param {String} obj.tag
-     * @param {String} obj.password
-     * @param {String} obj.salt
-     * @param {String} obj.protectedKey
-     * @param {String} obj.protectedKeyIV
-     * @param {String} obj.protectedKeyTag
-     * @returns {String} privateKey - decrypted private key
-     */
-    static async decryptPrivateKey({
-        encryptionVersion,
-        encryptedPrivateKey,
-        iv,
-        tag,
-        password,
-        salt,
-        protectedKey,
-        protectedKeyIV,
-        protectedKeyTag,
-    }: {
-        encryptionVersion: number;
-        encryptedPrivateKey: string;
-        iv: string;
-        tag: string;
-        password: string;
-        salt: string;
-        protectedKey?: string;
-        protectedKeyIV?: string;
-        protectedKeyTag?: string;
-    }) {
-        return decryptPrivateKeyHelper({
-            encryptionVersion,
-            encryptedPrivateKey,
-            iv,
-            tag,
-            password,
-            salt,
-            protectedKey,
-            protectedKeyIV,
-            protectedKeyTag
-        });
-    }
-    
-    /**
-     * Return [plaintext] encrypted by the user's private key
-     * @param {Object} obj
-     * @param {String} obj.plaintext - plaintext to encrypt
-     */
-    static encryptWithPrivateKey({
-        plaintext,
-        publicKey,
-    }: {
-        plaintext: string;
-        publicKey: string;
-    }) {
-        return encryptAssymmetric({
-            plaintext,
-            publicKey,
-            privateKey: KeyService.privateKey
-        });
-    }
-    
-    /**
-     * Return [ciphertext] decrypted by the user's private key
-     * @param {Object} obj
-     * @param {String} obj.ciphertext - ciphertext to decrypt
-     * @param {String} obj.ciphertext - iv of ciphertext
-     * @param {String} obj.ciphertext - tag of ciphertext
-     */
-    static decryptWithPrivateKey({
-        ciphertext,
-        nonce,
-        publicKey
-    }: {
-        ciphertext: string;
-        nonce: string;
-        publicKey: string;
-    }) {
-        return decryptAssymmetric({
-            ciphertext,
-            nonce,
-            publicKey,
-            privateKey: KeyService.privateKey
-        });
-    }
+  static setPrivateKey(privateKey: string) {
+    KeyService.privateKey = privateKey;
+  }
+
+  /** Return the user's decrypted private key
+   * @param {Object} obj
+   * @param {Number} obj.encryptionVersion
+   * @param {String} obj.encryptedPrivateKey
+   * @param {String} obj.iv
+   * @param {String} obj.tag
+   * @param {String} obj.password
+   * @param {String} obj.salt
+   * @param {String} obj.protectedKey
+   * @param {String} obj.protectedKeyIV
+   * @param {String} obj.protectedKeyTag
+   * @returns {String} privateKey - decrypted private key
+   */
+  static async decryptPrivateKey({
+    encryptionVersion,
+    encryptedPrivateKey,
+    iv,
+    tag,
+    password,
+    salt,
+    protectedKey,
+    protectedKeyIV,
+    protectedKeyTag
+  }: {
+    encryptionVersion: number;
+    encryptedPrivateKey: string;
+    iv: string;
+    tag: string;
+    password: string;
+    salt: string;
+    protectedKey?: string;
+    protectedKeyIV?: string;
+    protectedKeyTag?: string;
+  }) {
+    return decryptPrivateKeyHelper({
+      encryptionVersion,
+      encryptedPrivateKey,
+      iv,
+      tag,
+      password,
+      salt,
+      protectedKey,
+      protectedKeyIV,
+      protectedKeyTag
+    });
+  }
+
+  /**
+   * Return [plaintext] encrypted by the user's private key
+   * @param {Object} obj
+   * @param {String} obj.plaintext - plaintext to encrypt
+   */
+  static encryptWithPrivateKey({ plaintext, publicKey }: { plaintext: string; publicKey: string }) {
+    return encryptAssymmetric({
+      plaintext,
+      publicKey,
+      privateKey: KeyService.privateKey
+    });
+  }
+
+  /**
+   * Return [ciphertext] decrypted by the user's private key
+   * @param {Object} obj
+   * @param {String} obj.ciphertext - ciphertext to decrypt
+   * @param {String} obj.ciphertext - iv of ciphertext
+   * @param {String} obj.ciphertext - tag of ciphertext
+   */
+  static decryptWithPrivateKey({
+    ciphertext,
+    nonce,
+    publicKey
+  }: {
+    ciphertext: string;
+    nonce: string;
+    publicKey: string;
+  }) {
+    return decryptAssymmetric({
+      ciphertext,
+      nonce,
+      publicKey,
+      privateKey: KeyService.privateKey
+    });
+  }
 }
 
-export default KeyService;
\ No newline at end of file
+export default KeyService;
diff --git a/frontend/src/services/index.ts b/frontend/src/services/index.ts
index 1e57461f7..53addcd23 100644
--- a/frontend/src/services/index.ts
+++ b/frontend/src/services/index.ts
@@ -1,7 +1,4 @@
 import KeyService from "./KeyService";
 import ProjectService from "./ProjectService";
 
-export {
-    KeyService,
-    ProjectService
-}
+export { KeyService, ProjectService };
diff --git a/frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx b/frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx
index 714817ad1..8125bc6ad 100644
--- a/frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx
+++ b/frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx
@@ -207,7 +207,11 @@ export const IntegrationsSection = ({
           (popUp?.deleteConfirmation.data as TIntegration)?.integration || " "
         } integration for ${(popUp?.deleteConfirmation.data as TIntegration)?.app || " "}?`}
         onChange={(isOpen) => handlePopUpToggle("deleteConfirmation", isOpen)}
-        deleteKey={(popUp?.deleteConfirmation?.data as TIntegration)?.app || (popUp?.deleteConfirmation?.data as TIntegration)?.owner || ""}
+        deleteKey={
+          (popUp?.deleteConfirmation?.data as TIntegration)?.app ||
+          (popUp?.deleteConfirmation?.data as TIntegration)?.owner ||
+          ""
+        }
         onDeleteApproved={async () =>
           onIntegrationDelete(popUp?.deleteConfirmation.data as TIntegration, () =>
             handlePopUpClose("deleteConfirmation")
diff --git a/frontend/src/views/Login/LoginSSO.tsx b/frontend/src/views/Login/LoginSSO.tsx
index ea26ca7d6..a182a2713 100644
--- a/frontend/src/views/Login/LoginSSO.tsx
+++ b/frontend/src/views/Login/LoginSSO.tsx
@@ -1,62 +1,46 @@
 import { useEffect, useState } from "react";
 import jwt_decode from "jwt-decode";
 
-import {
-    MFAStep,
-    PasswordStep
-} from "./components";
+import { MFAStep, PasswordStep } from "./components";
 
-type Props = { 
-    providerAuthToken: string;
-}
+type Props = {
+  providerAuthToken: string;
+};
 
 export const LoginSSO = ({ providerAuthToken }: Props) => {
-    const [step, setStep] = useState(0);
-    const [password, setPassword] = useState("");
+  const [step, setStep] = useState(0);
+  const [password, setPassword] = useState("");
 
-    const {
-        username,
-        isUserCompleted
-    } = jwt_decode(providerAuthToken) as any;
-    
-    useEffect(() => {
-        if (isUserCompleted) {
-            setStep(1);
-        }
-    }, []);
-    
-    const renderView = () => {
-        switch (step) {
-            case 0:
-                return (
-                    <div />
-                );
-            case 1:
-                return (
-                    <PasswordStep 
-                        providerAuthToken={providerAuthToken}
-                        email={username}
-                        password={password}
-                        setPassword={setPassword}
-                        setStep={setStep}
-                    />
-                );
-            case 2: 
-                return (
-                    <MFAStep 
-                        providerAuthToken={providerAuthToken}
-                        email={username}
-                        password={password}
-                    />
-                );
-            default:
-                return <div />;
-        }
+  const { username, isUserCompleted } = jwt_decode(providerAuthToken) as any;
+
+  useEffect(() => {
+    if (isUserCompleted) {
+      setStep(1);
     }
+  }, []);
 
-    return (
-        <div>
-            {renderView()}
-        </div>
-    );
-}
\ No newline at end of file
+  const renderView = () => {
+    switch (step) {
+      case 0:
+        return <div />;
+      case 1:
+        return (
+          <PasswordStep
+            providerAuthToken={providerAuthToken}
+            email={username}
+            password={password}
+            setPassword={setPassword}
+            setStep={setStep}
+          />
+        );
+      case 2:
+        return (
+          <MFAStep providerAuthToken={providerAuthToken} email={username} password={password} />
+        );
+      default:
+        return <div />;
+    }
+  };
+
+  return <div>{renderView()}</div>;
+};
diff --git a/frontend/src/views/Login/components/InitialStep/index.tsx b/frontend/src/views/Login/components/InitialStep/index.tsx
index 466fbe1d7..33142e0b0 100644
--- a/frontend/src/views/Login/components/InitialStep/index.tsx
+++ b/frontend/src/views/Login/components/InitialStep/index.tsx
@@ -1 +1 @@
-export { InitialStep } from "./InitialStep";
\ No newline at end of file
+export { InitialStep } from "./InitialStep";
diff --git a/frontend/src/views/Login/components/LDAPStep/LDAPStep.tsx b/frontend/src/views/Login/components/LDAPStep/LDAPStep.tsx
index 44f19b605..f097d5ff0 100644
--- a/frontend/src/views/Login/components/LDAPStep/LDAPStep.tsx
+++ b/frontend/src/views/Login/components/LDAPStep/LDAPStep.tsx
@@ -6,132 +6,130 @@ import { Button, Input } from "@app/components/v2";
 import { loginLDAPRedirect } from "@app/hooks/api/auth/queries";
 
 type Props = {
-    setStep: (step: number) => void;
-}
+  setStep: (step: number) => void;
+};
 
-export const LDAPStep = ({
-    setStep
-}: Props) => {
-    const { createNotification } = useNotificationContext();
-    const [organizationSlug, setOrganizationSlug] = useState("");
-    const [username, setUsername] = useState("");
-    const [password, setPassword] = useState("");
-    
-    const { t } = useTranslation();
+export const LDAPStep = ({ setStep }: Props) => {
+  const { createNotification } = useNotificationContext();
+  const [organizationSlug, setOrganizationSlug] = useState("");
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
 
-    // const queryParams = new URLSearchParams(window.location.search);
+  const { t } = useTranslation();
 
-    const handleSubmission = async (e:React.FormEvent) => {
-        e.preventDefault()
-        try {
-            const { nextUrl } = await loginLDAPRedirect({
-                organizationSlug,
-                username,
-                password
-            });
-            
-            if (!nextUrl) {
-                createNotification({
-                    text: "Login unsuccessful. Double-check your credentials and try again.",
-                    type: "error"
-                });
-                
-                return;
-            }
-            
-            createNotification({
-                text: "Successfully logged in",
-                type: "success"
-            });
+  // const queryParams = new URLSearchParams(window.location.search);
 
-            // redirects either to /login/sso or /signup/sso
-            window.open(nextUrl);
-            window.close();
-        } catch (err) {
-            createNotification({
-                text: "Login unsuccessful. Double-check your credentials and try again.",
-                type: "error"
-            });
-        }
-        
-        // TODO: add callback port support
-        
-        // const callbackPort = queryParams.get("callback_port");
-        // window.open(`/api/v1/ldap/redirect/saml2/${ssoIdentifier}${callbackPort ? `?callback_port=${callbackPort}` : ""}`);
-        // window.close();
+  const handleSubmission = async (e: React.FormEvent) => {
+    e.preventDefault();
+    try {
+      const { nextUrl } = await loginLDAPRedirect({
+        organizationSlug,
+        username,
+        password
+      });
+
+      if (!nextUrl) {
+        createNotification({
+          text: "Login unsuccessful. Double-check your credentials and try again.",
+          type: "error"
+        });
+
+        return;
+      }
+
+      createNotification({
+        text: "Successfully logged in",
+        type: "success"
+      });
+
+      // redirects either to /login/sso or /signup/sso
+      window.open(nextUrl);
+      window.close();
+    } catch (err) {
+      createNotification({
+        text: "Login unsuccessful. Double-check your credentials and try again.",
+        type: "error"
+      });
     }
 
-    return (
-        <div className="mx-auto w-full max-w-md md:px-6">
-            <p className="mx-auto mb-6 flex w-max justify-center text-xl font-medium text-transparent bg-clip-text bg-gradient-to-b from-white to-bunker-200 text-center mb-8">
-                What&apos;s your LDAP Login?
-            </p>
-            <form onSubmit={handleSubmission}>
-            <div className="relative flex items-center justify-center lg:w-1/6 w-1/4 min-w-[20rem] md:min-w-[22rem] mx-auto w-full rounded-lg max-h-24 md:max-h-28">
-                <div className="flex items-center justify-center w-full rounded-lg max-h-24 md:max-h-28">
-                <Input
-                    value={organizationSlug}
-                    onChange={(e) => setOrganizationSlug(e.target.value)}
-                    type="text"
-                    placeholder="Enter your organization slug..."
-                    isRequired
-                    autoComplete="email"
-                    id="email"
-                    className="h-12"
-                />
-                </div>
-            </div>
-            <div className="mt-2 relative flex items-center justify-center lg:w-1/6 w-1/4 min-w-[20rem] md:min-w-[22rem] mx-auto w-full rounded-lg max-h-24 md:max-h-28">
-                <div className="flex items-center justify-center w-full rounded-lg max-h-24 md:max-h-28">
-                <Input
-                    value={username}
-                    onChange={(e) => setUsername(e.target.value)}
-                    type="text"
-                    placeholder="Enter your LDAP username..."
-                    isRequired
-                    autoComplete="email"
-                    id="email"
-                    className="h-12"
-                />
-                </div>
-            </div>
-            <div className="mt-2 relative flex items-center justify-center lg:w-1/6 w-1/4 min-w-[20rem] md:min-w-[22rem] mx-auto w-full rounded-lg max-h-24 md:max-h-28">
-                <div className="flex items-center justify-center w-full rounded-lg max-h-24 md:max-h-28">
-                <Input
-                    value={password}
-                    onChange={(e) => setPassword(e.target.value)}
-                    type="password"
-                    placeholder="Enter your LDAP password..."
-                    isRequired
-                    autoComplete="current-password"
-                    id="current-password"
-                    className="select:-webkit-autofill:focus h-10"
-                />
-                </div>
-            </div>
-            <div className='lg:w-1/6 w-1/4 w-full mx-auto flex items-center justify-center min-w-[20rem] md:min-w-[22rem] text-center rounded-md mt-4'>
-                <Button
-                    type="submit" 
-                    colorSchema="primary" 
-                    variant="outline_bg"
-                    isFullWidth
-                    className="h-14"
-                > 
-                    {t("login.login")} 
-                </Button>
-            </div>
-            </form>
-            <div className="flex flex-row items-center justify-center mt-4">
-                <button
-                onClick={() => {
-                    setStep(0);
-                }}
-                type="button"
-                className="text-bunker-300 text-sm hover:underline mt-2 hover:underline-offset-4 hover:decoration-primary-700 hover:text-bunker-200 duration-200 cursor-pointer"
-                >
-                {t("login.other-option")}
-                </button>
-            </div>
+    // TODO: add callback port support
+
+    // const callbackPort = queryParams.get("callback_port");
+    // window.open(`/api/v1/ldap/redirect/saml2/${ssoIdentifier}${callbackPort ? `?callback_port=${callbackPort}` : ""}`);
+    // window.close();
+  };
+
+  return (
+    <div className="mx-auto w-full max-w-md md:px-6">
+      <p className="mx-auto mb-6 mb-8 flex w-max justify-center bg-gradient-to-b from-white to-bunker-200 bg-clip-text text-center text-xl font-medium text-transparent">
+        What&apos;s your LDAP Login?
+      </p>
+      <form onSubmit={handleSubmission}>
+        <div className="relative mx-auto flex max-h-24 w-1/4 w-full min-w-[20rem] items-center justify-center rounded-lg md:max-h-28 md:min-w-[22rem] lg:w-1/6">
+          <div className="flex max-h-24 w-full items-center justify-center rounded-lg md:max-h-28">
+            <Input
+              value={organizationSlug}
+              onChange={(e) => setOrganizationSlug(e.target.value)}
+              type="text"
+              placeholder="Enter your organization slug..."
+              isRequired
+              autoComplete="email"
+              id="email"
+              className="h-12"
+            />
+          </div>
         </div>
-    );
-};
\ No newline at end of file
+        <div className="relative mx-auto mt-2 flex max-h-24 w-1/4 w-full min-w-[20rem] items-center justify-center rounded-lg md:max-h-28 md:min-w-[22rem] lg:w-1/6">
+          <div className="flex max-h-24 w-full items-center justify-center rounded-lg md:max-h-28">
+            <Input
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              type="text"
+              placeholder="Enter your LDAP username..."
+              isRequired
+              autoComplete="email"
+              id="email"
+              className="h-12"
+            />
+          </div>
+        </div>
+        <div className="relative mx-auto mt-2 flex max-h-24 w-1/4 w-full min-w-[20rem] items-center justify-center rounded-lg md:max-h-28 md:min-w-[22rem] lg:w-1/6">
+          <div className="flex max-h-24 w-full items-center justify-center rounded-lg md:max-h-28">
+            <Input
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              type="password"
+              placeholder="Enter your LDAP password..."
+              isRequired
+              autoComplete="current-password"
+              id="current-password"
+              className="select:-webkit-autofill:focus h-10"
+            />
+          </div>
+        </div>
+        <div className="mx-auto mt-4 flex w-1/4 w-full min-w-[20rem] items-center justify-center rounded-md text-center md:min-w-[22rem] lg:w-1/6">
+          <Button
+            type="submit"
+            colorSchema="primary"
+            variant="outline_bg"
+            isFullWidth
+            className="h-14"
+          >
+            {t("login.login")}
+          </Button>
+        </div>
+      </form>
+      <div className="mt-4 flex flex-row items-center justify-center">
+        <button
+          onClick={() => {
+            setStep(0);
+          }}
+          type="button"
+          className="mt-2 cursor-pointer text-sm text-bunker-300 duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4"
+        >
+          {t("login.other-option")}
+        </button>
+      </div>
+    </div>
+  );
+};
diff --git a/frontend/src/views/Login/components/LDAPStep/index.tsx b/frontend/src/views/Login/components/LDAPStep/index.tsx
index 3420f802b..0e94c001e 100644
--- a/frontend/src/views/Login/components/LDAPStep/index.tsx
+++ b/frontend/src/views/Login/components/LDAPStep/index.tsx
@@ -1 +1 @@
-export { LDAPStep } from "./LDAPStep";
\ No newline at end of file
+export { LDAPStep } from "./LDAPStep";
diff --git a/frontend/src/views/Login/components/MFAStep/index.tsx b/frontend/src/views/Login/components/MFAStep/index.tsx
index 633981543..4062f25d1 100644
--- a/frontend/src/views/Login/components/MFAStep/index.tsx
+++ b/frontend/src/views/Login/components/MFAStep/index.tsx
@@ -1 +1 @@
-export { MFAStep } from "./MFAStep";
\ No newline at end of file
+export { MFAStep } from "./MFAStep";
diff --git a/frontend/src/views/Login/components/PasswordStep/index.tsx b/frontend/src/views/Login/components/PasswordStep/index.tsx
index fb89c29a5..e2d3993e4 100644
--- a/frontend/src/views/Login/components/PasswordStep/index.tsx
+++ b/frontend/src/views/Login/components/PasswordStep/index.tsx
@@ -1 +1 @@
-export { PasswordStep } from "./PasswordStep";
\ No newline at end of file
+export { PasswordStep } from "./PasswordStep";
diff --git a/frontend/src/views/Login/components/SAMLSSOStep/SAMLSSOStep.tsx b/frontend/src/views/Login/components/SAMLSSOStep/SAMLSSOStep.tsx
index 4a4545ac8..94c383c1a 100644
--- a/frontend/src/views/Login/components/SAMLSSOStep/SAMLSSOStep.tsx
+++ b/frontend/src/views/Login/components/SAMLSSOStep/SAMLSSOStep.tsx
@@ -4,67 +4,69 @@ import { useTranslation } from "react-i18next";
 import { Button, Input } from "@app/components/v2";
 
 type Props = {
-    setStep: (step: number) => void;
-}
+  setStep: (step: number) => void;
+};
 
-export const SAMLSSOStep = ({
-    setStep
-}: Props) => {
-    const [ssoIdentifier, setSSOIdentifier] = useState("");
-    const { t } = useTranslation();
+export const SAMLSSOStep = ({ setStep }: Props) => {
+  const [ssoIdentifier, setSSOIdentifier] = useState("");
+  const { t } = useTranslation();
 
-    const queryParams = new URLSearchParams(window.location.search);
+  const queryParams = new URLSearchParams(window.location.search);
 
-    const handleSubmission = (e:React.FormEvent) => {
-        e.preventDefault()
-        const callbackPort = queryParams.get("callback_port");
-        window.open(`/api/v1/sso/redirect/saml2/organizations/${ssoIdentifier}${callbackPort ? `?callback_port=${callbackPort}` : ""}`);
-        window.close();
-    }
-
-    return (
-        <div className="mx-auto w-full max-w-md md:px-6">
-            <p className="mx-auto mb-6 flex w-max justify-center text-xl font-medium text-transparent bg-clip-text bg-gradient-to-b from-white to-bunker-200 text-center mb-8">
-                What&apos;s your organization slug?
-            </p>
-            <form onSubmit={handleSubmission}>
-            <div className="relative flex items-center justify-center lg:w-1/6 w-1/4 min-w-[20rem] md:min-w-[22rem] mx-auto w-full rounded-lg max-h-24 md:max-h-28">
-                <div className="flex items-center justify-center w-full rounded-lg max-h-24 md:max-h-28">
-                <Input
-                    value={ssoIdentifier}
-                    onChange={(e) => setSSOIdentifier(e.target.value)}
-                    type="text"
-                    placeholder="acme-123"
-                    isRequired
-                    autoComplete="email"
-                    id="email"
-                    className="h-12"
-                />
-                </div>
-            </div>
-            <div className='lg:w-1/6 w-1/4 w-full mx-auto flex items-center justify-center min-w-[20rem] md:min-w-[22rem] text-center rounded-md mt-4'>
-                <Button
-                    type="submit" 
-                    colorSchema="primary" 
-                    variant="outline_bg"
-                    isFullWidth
-                    className="h-14"
-                > 
-                    Continue with SAML
-                </Button>
-            </div>
-            </form>
-            <div className="flex flex-row items-center justify-center mt-4">
-                <button
-                onClick={() => {
-                    setStep(0);
-                }}
-                type="button"
-                className="text-bunker-300 text-sm hover:underline mt-2 hover:underline-offset-4 hover:decoration-primary-700 hover:text-bunker-200 duration-200 cursor-pointer"
-                >
-                {t("login.other-option")}
-                </button>
-            </div>
-        </div>
+  const handleSubmission = (e: React.FormEvent) => {
+    e.preventDefault();
+    const callbackPort = queryParams.get("callback_port");
+    window.open(
+      `/api/v1/sso/redirect/saml2/organizations/${ssoIdentifier}${
+        callbackPort ? `?callback_port=${callbackPort}` : ""
+      }`
     );
-}
\ No newline at end of file
+    window.close();
+  };
+
+  return (
+    <div className="mx-auto w-full max-w-md md:px-6">
+      <p className="mx-auto mb-6 mb-8 flex w-max justify-center bg-gradient-to-b from-white to-bunker-200 bg-clip-text text-center text-xl font-medium text-transparent">
+        What&apos;s your organization slug?
+      </p>
+      <form onSubmit={handleSubmission}>
+        <div className="relative mx-auto flex max-h-24 w-1/4 w-full min-w-[20rem] items-center justify-center rounded-lg md:max-h-28 md:min-w-[22rem] lg:w-1/6">
+          <div className="flex max-h-24 w-full items-center justify-center rounded-lg md:max-h-28">
+            <Input
+              value={ssoIdentifier}
+              onChange={(e) => setSSOIdentifier(e.target.value)}
+              type="text"
+              placeholder="acme-123"
+              isRequired
+              autoComplete="email"
+              id="email"
+              className="h-12"
+            />
+          </div>
+        </div>
+        <div className="mx-auto mt-4 flex w-1/4 w-full min-w-[20rem] items-center justify-center rounded-md text-center md:min-w-[22rem] lg:w-1/6">
+          <Button
+            type="submit"
+            colorSchema="primary"
+            variant="outline_bg"
+            isFullWidth
+            className="h-14"
+          >
+            Continue with SAML
+          </Button>
+        </div>
+      </form>
+      <div className="mt-4 flex flex-row items-center justify-center">
+        <button
+          onClick={() => {
+            setStep(0);
+          }}
+          type="button"
+          className="mt-2 cursor-pointer text-sm text-bunker-300 duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4"
+        >
+          {t("login.other-option")}
+        </button>
+      </div>
+    </div>
+  );
+};
diff --git a/frontend/src/views/Login/components/SAMLSSOStep/index.tsx b/frontend/src/views/Login/components/SAMLSSOStep/index.tsx
index d3d2105bd..f07ee8ed3 100644
--- a/frontend/src/views/Login/components/SAMLSSOStep/index.tsx
+++ b/frontend/src/views/Login/components/SAMLSSOStep/index.tsx
@@ -1 +1 @@
-export { SAMLSSOStep } from "./SAMLSSOStep";
\ No newline at end of file
+export { SAMLSSOStep } from "./SAMLSSOStep";
diff --git a/frontend/src/views/Login/components/index.tsx b/frontend/src/views/Login/components/index.tsx
index ccf603f79..7c1b5f800 100644
--- a/frontend/src/views/Login/components/index.tsx
+++ b/frontend/src/views/Login/components/index.tsx
@@ -4,4 +4,4 @@ export { MFAStep } from "./MFAStep";
 export { SAMLSSOStep } from "./SAMLSSOStep";
 
 // SSO-specific step
-export { PasswordStep } from "./PasswordStep";
\ No newline at end of file
+export { PasswordStep } from "./PasswordStep";
diff --git a/frontend/src/views/Org/MembersPage/components/OrgIdentityTab/OrgIdentityTab.tsx b/frontend/src/views/Org/MembersPage/components/OrgIdentityTab/OrgIdentityTab.tsx
index 74b710374..251b0b831 100644
--- a/frontend/src/views/Org/MembersPage/components/OrgIdentityTab/OrgIdentityTab.tsx
+++ b/frontend/src/views/Org/MembersPage/components/OrgIdentityTab/OrgIdentityTab.tsx
@@ -1,19 +1,17 @@
 import { motion } from "framer-motion";
 
-import { 
-    IdentitySection
-} from "./components";
+import { IdentitySection } from "./components";
 
 export const OrgIdentityTab = () => {
-    return (
-        <motion.div
-            key="panel-service-token"
-            transition={{ duration: 0.15 }}
-            initial={{ opacity: 0, translateX: 30 }}
-            animate={{ opacity: 1, translateX: 0 }}
-            exit={{ opacity: 0, translateX: 30 }}
-        >
-            <IdentitySection />
-        </motion.div>
-    );
-}
\ No newline at end of file
+  return (
+    <motion.div
+      key="panel-service-token"
+      transition={{ duration: 0.15 }}
+      initial={{ opacity: 0, translateX: 30 }}
+      animate={{ opacity: 1, translateX: 0 }}
+      exit={{ opacity: 0, translateX: 30 }}
+    >
+      <IdentitySection />
+    </motion.div>
+  );
+};
diff --git a/frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityAuthMethodModal.tsx b/frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityAuthMethodModal.tsx
index c10760496..7ec17dd31 100644
--- a/frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityAuthMethodModal.tsx
+++ b/frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityAuthMethodModal.tsx
@@ -1,14 +1,14 @@
-import { Controller, useForm } from "react-hook-form"; 
+import { Controller, useForm } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";
 
 import {
-    FormControl,
-    Modal,
-    ModalContent,
-    Select,
-    SelectItem,
-    UpgradePlanModal
+  FormControl,
+  Modal,
+  ModalContent,
+  Select,
+  SelectItem,
+  UpgradePlanModal
 } from "@app/components/v2";
 import { IdentityAuthMethod } from "@app/hooks/api/identities";
 import { UsePopUpState } from "@app/hooks/usePopUp";
@@ -16,93 +16,90 @@ import { UsePopUpState } from "@app/hooks/usePopUp";
 import { IdentityUniversalAuthForm } from "./IdentityUniversalAuthForm";
 
 type Props = {
-    popUp: UsePopUpState<["identityAuthMethod", "upgradePlan"]>;
-    handlePopUpOpen: (popUpName: keyof UsePopUpState<["upgradePlan"]>) => void;
-    handlePopUpToggle: (popUpName: keyof UsePopUpState<["identityAuthMethod", "upgradePlan"]>, state?: boolean) => void;
-}
+  popUp: UsePopUpState<["identityAuthMethod", "upgradePlan"]>;
+  handlePopUpOpen: (popUpName: keyof UsePopUpState<["upgradePlan"]>) => void;
+  handlePopUpToggle: (
+    popUpName: keyof UsePopUpState<["identityAuthMethod", "upgradePlan"]>,
+    state?: boolean
+  ) => void;
+};
 
-const identityAuthMethods = [
-    { label: "Universal Auth", value: IdentityAuthMethod.UNIVERSAL_AUTH }
-];
+const identityAuthMethods = [{ label: "Universal Auth", value: IdentityAuthMethod.UNIVERSAL_AUTH }];
 
-const schema = yup.object({
-    authMethod: yup.string().required("Auth method is required"), // TODO: better enforcement here
-}).required();
+const schema = yup
+  .object({
+    authMethod: yup.string().required("Auth method is required") // TODO: better enforcement here
+  })
+  .required();
 
 export type FormData = yup.InferType<typeof schema>;
 
-export const IdentityAuthMethodModal = ({
-    popUp,
-    handlePopUpOpen,
-    handlePopUpToggle
-}: Props) => {
+export const IdentityAuthMethodModal = ({ popUp, handlePopUpOpen, handlePopUpToggle }: Props) => {
+  const {
+    control
+    // watch,
+  } = useForm<FormData>({
+    resolver: yupResolver(schema)
+  });
 
-    const {
-        control,
-        // watch,
-    } = useForm<FormData>({
-        resolver: yupResolver(schema)
-    });
+  const identityAuthMethodData = popUp?.identityAuthMethod?.data as {
+    identityId: string;
+    name: string;
+    authMethod?: IdentityAuthMethod;
+  };
 
-    const identityAuthMethodData = popUp?.identityAuthMethod?.data as {
-        identityId: string;
-        name: string;
-        authMethod?: IdentityAuthMethod;
-    }
-    
-    // const authMethod = watch("authMethod");
-    
-    const renderIdentityAuthForm = () => {
-        return (
-            <IdentityUniversalAuthForm 
-                handlePopUpOpen={handlePopUpOpen}
-                handlePopUpToggle={handlePopUpToggle}
-                identityAuthMethodData={identityAuthMethodData}
-            />
-        );
-    }
-    
+  // const authMethod = watch("authMethod");
+
+  const renderIdentityAuthForm = () => {
     return (
-        <Modal
-            isOpen={popUp?.identityAuthMethod?.isOpen}
-                onOpenChange={(isOpen) => {
-                handlePopUpToggle("identityAuthMethod", isOpen);
-            }}
-        >
-            <ModalContent title={`${identityAuthMethodData?.authMethod ? "Update" : "Configure"} Identity Auth Method for ${identityAuthMethodData?.name ?? ""}`}>
-                <Controller
-                    control={control}
-                    name="authMethod"
-                    defaultValue={IdentityAuthMethod.UNIVERSAL_AUTH}
-                    render={({ field: { onChange, ...field }, fieldState: { error } }) => (
-                        <FormControl
-                            label="Auth Method"
-                            errorText={error?.message}
-                            isError={Boolean(error)}
-                        >
-                            <Select
-                                defaultValue={field.value}
-                                {...field}
-                                onValueChange={(e) => onChange(e)}
-                                className="w-full"
-                            >
-                                {identityAuthMethods.map(({ label, value }) => (
-                                    <SelectItem value={String(value || "")} key={label}>
-                                        {label}
-                                    </SelectItem>
-                                ))}
-                            </Select>
-                        </FormControl>
-                    )}
-                />
-                {renderIdentityAuthForm()}
-                <UpgradePlanModal
-                    isOpen={popUp?.upgradePlan?.isOpen}
-                    onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
-                    text="You can use IP allowlisting if you switch to Infisical's Pro plan."
-                />
-            </ModalContent>
-        </Modal>
+      <IdentityUniversalAuthForm
+        handlePopUpOpen={handlePopUpOpen}
+        handlePopUpToggle={handlePopUpToggle}
+        identityAuthMethodData={identityAuthMethodData}
+      />
     );
-}
+  };
 
+  return (
+    <Modal
+      isOpen={popUp?.identityAuthMethod?.isOpen}
+      onOpenChange={(isOpen) => {
+        handlePopUpToggle("identityAuthMethod", isOpen);
+      }}
+    >
+      <ModalContent
+        title={`${
+          identityAuthMethodData?.authMethod ? "Update" : "Configure"
+        } Identity Auth Method for ${identityAuthMethodData?.name ?? ""}`}
+      >
+        <Controller
+          control={control}
+          name="authMethod"
+          defaultValue={IdentityAuthMethod.UNIVERSAL_AUTH}
+          render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+            <FormControl label="Auth Method" errorText={error?.message} isError={Boolean(error)}>
+              <Select
+                defaultValue={field.value}
+                {...field}
+                onValueChange={(e) => onChange(e)}
+                className="w-full"
+              >
+                {identityAuthMethods.map(({ label, value }) => (
+                  <SelectItem value={String(value || "")} key={label}>
+                    {label}
+                  </SelectItem>
+                ))}
+              </Select>
+            </FormControl>
+          )}
+        />
+        {renderIdentityAuthForm()}
+        <UpgradePlanModal
+          isOpen={popUp?.upgradePlan?.isOpen}
+          onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+          text="You can use IP allowlisting if you switch to Infisical's Pro plan."
+        />
+      </ModalContent>
+    </Modal>
+  );
+};
diff --git a/frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/index.tsx b/frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/index.tsx
index 3aa8cee58..f0663a6a5 100644
--- a/frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/index.tsx
+++ b/frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/index.tsx
@@ -1 +1 @@
-export { IdentitySection } from "./IdentitySection";
\ No newline at end of file
+export { IdentitySection } from "./IdentitySection";
diff --git a/frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/index.tsx b/frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/index.tsx
index 3aa8cee58..f0663a6a5 100644
--- a/frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/index.tsx
+++ b/frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/index.tsx
@@ -1 +1 @@
-export { IdentitySection } from "./IdentitySection";
\ No newline at end of file
+export { IdentitySection } from "./IdentitySection";
diff --git a/frontend/src/views/Org/MembersPage/components/OrgIdentityTab/index.tsx b/frontend/src/views/Org/MembersPage/components/OrgIdentityTab/index.tsx
index 38c7a320e..bf193d94f 100644
--- a/frontend/src/views/Org/MembersPage/components/OrgIdentityTab/index.tsx
+++ b/frontend/src/views/Org/MembersPage/components/OrgIdentityTab/index.tsx
@@ -1 +1 @@
-export { OrgIdentityTab } from "./OrgIdentityTab";
\ No newline at end of file
+export { OrgIdentityTab } from "./OrgIdentityTab";
diff --git a/frontend/src/views/Org/MembersPage/components/OrgMembersTab/OrgMembersTab.tsx b/frontend/src/views/Org/MembersPage/components/OrgMembersTab/OrgMembersTab.tsx
index 0455b4f7d..4b04b0128 100644
--- a/frontend/src/views/Org/MembersPage/components/OrgMembersTab/OrgMembersTab.tsx
+++ b/frontend/src/views/Org/MembersPage/components/OrgMembersTab/OrgMembersTab.tsx
@@ -3,15 +3,15 @@ import { motion } from "framer-motion";
 import { OrgMembersSection } from "./components";
 
 export const OrgMembersTab = () => {
-    return (
-        <motion.div
-            key="panel-service-token"
-            transition={{ duration: 0.15 }}
-            initial={{ opacity: 0, translateX: 30 }}
-            animate={{ opacity: 1, translateX: 0 }}
-            exit={{ opacity: 0, translateX: 30 }}
-        >
-            <OrgMembersSection />
-        </motion.div>
-    );
-}
\ No newline at end of file
+  return (
+    <motion.div
+      key="panel-service-token"
+      transition={{ duration: 0.15 }}
+      initial={{ opacity: 0, translateX: 30 }}
+      animate={{ opacity: 1, translateX: 0 }}
+      exit={{ opacity: 0, translateX: 30 }}
+    >
+      <OrgMembersSection />
+    </motion.div>
+  );
+};
diff --git a/frontend/src/views/Org/MembersPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersSection.tsx b/frontend/src/views/Org/MembersPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersSection.tsx
index 65346533e..b022f7b62 100644
--- a/frontend/src/views/Org/MembersPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersSection.tsx
+++ b/frontend/src/views/Org/MembersPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersSection.tsx
@@ -27,7 +27,7 @@ export const OrgMembersSection = () => {
   const { subscription } = useSubscription();
   const { currentOrg } = useOrganization();
   const orgId = currentOrg?.id ?? "";
-  
+
   const [completeInviteLink, setCompleteInviteLink] = useState<string>("");
 
   const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
diff --git a/frontend/src/views/Org/MembersPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersTable.tsx b/frontend/src/views/Org/MembersPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersTable.tsx
index 011f67de7..c32a54cfe 100644
--- a/frontend/src/views/Org/MembersPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersTable.tsx
+++ b/frontend/src/views/Org/MembersPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersTable.tsx
@@ -208,7 +208,8 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLink }: Prop
                                     ))}
                                 </Select>
                               )}
-                              {(status === "invited" || status === "verified") && email &&
+                              {(status === "invited" || status === "verified") &&
+                                email &&
                                 serverDetails?.emailConfigured && (
                                   <Button
                                     isDisabled={!isAllowed}
@@ -240,7 +241,7 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLink }: Prop
                                     });
                                     return;
                                   }
-                                  
+
                                   handlePopUpOpen("removeMember", { orgMembershipId, username });
                                 }}
                                 size="lg"
diff --git a/frontend/src/views/Org/MembersPage/components/OrgMembersTab/components/OrgMembersSection/index.tsx b/frontend/src/views/Org/MembersPage/components/OrgMembersTab/components/OrgMembersSection/index.tsx
index 306158a16..973e12e3e 100644
--- a/frontend/src/views/Org/MembersPage/components/OrgMembersTab/components/OrgMembersSection/index.tsx
+++ b/frontend/src/views/Org/MembersPage/components/OrgMembersTab/components/OrgMembersSection/index.tsx
@@ -1 +1 @@
-export { OrgMembersSection } from "./OrgMembersSection";
\ No newline at end of file
+export { OrgMembersSection } from "./OrgMembersSection";
diff --git a/frontend/src/views/Org/MembersPage/components/OrgMembersTab/components/index.tsx b/frontend/src/views/Org/MembersPage/components/OrgMembersTab/components/index.tsx
index 306158a16..973e12e3e 100644
--- a/frontend/src/views/Org/MembersPage/components/OrgMembersTab/components/index.tsx
+++ b/frontend/src/views/Org/MembersPage/components/OrgMembersTab/components/index.tsx
@@ -1 +1 @@
-export { OrgMembersSection } from "./OrgMembersSection";
\ No newline at end of file
+export { OrgMembersSection } from "./OrgMembersSection";
diff --git a/frontend/src/views/Org/MembersPage/components/OrgMembersTab/index.tsx b/frontend/src/views/Org/MembersPage/components/OrgMembersTab/index.tsx
index 8b20853b9..eae77c2b3 100644
--- a/frontend/src/views/Org/MembersPage/components/OrgMembersTab/index.tsx
+++ b/frontend/src/views/Org/MembersPage/components/OrgMembersTab/index.tsx
@@ -1 +1 @@
-export { OrgMembersTab } from "./OrgMembersTab";
\ No newline at end of file
+export { OrgMembersTab } from "./OrgMembersTab";
diff --git a/frontend/src/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleModifySection/SimpleLevelPermissionOptions.tsx b/frontend/src/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleModifySection/SimpleLevelPermissionOptions.tsx
index 1eba6f9fe..8fe6a1953 100644
--- a/frontend/src/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleModifySection/SimpleLevelPermissionOptions.tsx
+++ b/frontend/src/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleModifySection/SimpleLevelPermissionOptions.tsx
@@ -71,7 +71,7 @@ const getPermissionList = (option: Props["formName"]) => {
     case "incident-contact":
       return INCIDENT_CONTACTS_PERMISSIONS;
     case "member":
-      return MEMBERS_PERMISSIONS
+      return MEMBERS_PERMISSIONS;
     default:
       return PERMISSIONS;
   }
@@ -149,7 +149,7 @@ export const SimpleLevelPermissionOption = ({
   return (
     <div
       className={twMerge(
-        "px-10 py-6 bg-mineshaft-800 rounded-md",
+        "rounded-md bg-mineshaft-800 px-10 py-6",
         selectedPermissionCategory !== Permission.NoAccess && "border-l-2 border-primary-600"
       )}
     >
@@ -157,8 +157,8 @@ export const SimpleLevelPermissionOption = ({
         <div>
           <FontAwesomeIcon icon={icon} className="text-4xl" />
         </div>
-        <div className="flex-grow flex flex-col">
-          <div className="font-medium mb-1 text-lg">{title}</div>
+        <div className="flex flex-grow flex-col">
+          <div className="mb-1 text-lg font-medium">{title}</div>
           <div className="text-xs font-light">{subtitle}</div>
         </div>
         <div>
@@ -178,7 +178,7 @@ export const SimpleLevelPermissionOption = ({
       <motion.div
         initial={false}
         animate={{ height: isCustom ? "2.5rem" : 0, paddingTop: isCustom ? "1rem" : 0 }}
-        className="overflow-hidden grid gap-8 grid-flow-col auto-cols-min"
+        className="grid auto-cols-min grid-flow-col gap-8 overflow-hidden"
       >
         {isCustom &&
           getPermissionList(formName).map(({ action, label }) => (
diff --git a/frontend/src/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleModifySection/WorkspacePermission.tsx b/frontend/src/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleModifySection/WorkspacePermission.tsx
index 915fa12c5..7c98f1759 100644
--- a/frontend/src/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleModifySection/WorkspacePermission.tsx
+++ b/frontend/src/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleModifySection/WorkspacePermission.tsx
@@ -76,7 +76,7 @@ export const WorkspacePermission = ({ isNonEditable, setValue, control }: Props)
   return (
     <div
       className={twMerge(
-        "px-10 py-6 bg-mineshaft-800 rounded-md",
+        "rounded-md bg-mineshaft-800 px-10 py-6",
         selectedPermissionCategory !== Permission.NoAccess && "border-l-2 border-primary-600"
       )}
     >
@@ -84,8 +84,8 @@ export const WorkspacePermission = ({ isNonEditable, setValue, control }: Props)
         <div>
           <FontAwesomeIcon icon={faMoneyBill} className="text-4xl" />
         </div>
-        <div className="flex-grow flex flex-col">
-          <div className="font-medium mb-1 text-lg">Project</div>
+        <div className="flex flex-grow flex-col">
+          <div className="mb-1 text-lg font-medium">Project</div>
           <div className="text-xs font-light">
             View and create new projects in this organization
           </div>
@@ -107,7 +107,7 @@ export const WorkspacePermission = ({ isNonEditable, setValue, control }: Props)
       <motion.div
         initial={false}
         animate={{ height: isCustom ? "2.5rem" : 0, paddingTop: isCustom ? "1rem" : 0 }}
-        className="overflow-hidden grid gap-8 grid-flow-col auto-cols-min"
+        className="grid auto-cols-min grid-flow-col gap-8 overflow-hidden"
       >
         {isCustom &&
           PERMISSIONS.map(({ action, label }) => (
diff --git a/frontend/src/views/Org/MembersPage/components/index.tsx b/frontend/src/views/Org/MembersPage/components/index.tsx
index 9e13e717a..6a83bde02 100644
--- a/frontend/src/views/Org/MembersPage/components/index.tsx
+++ b/frontend/src/views/Org/MembersPage/components/index.tsx
@@ -1,3 +1,3 @@
 export { OrgIdentityTab } from "./OrgIdentityTab";
 export { OrgMembersTab } from "./OrgMembersTab";
-export { OrgRoleTabSection } from "./OrgRoleTabSection";
\ No newline at end of file
+export { OrgRoleTabSection } from "./OrgRoleTabSection";
diff --git a/frontend/src/views/Org/NonePage/NonePage.tsx b/frontend/src/views/Org/NonePage/NonePage.tsx
index 531ef823b..5c85e3e36 100644
--- a/frontend/src/views/Org/NonePage/NonePage.tsx
+++ b/frontend/src/views/Org/NonePage/NonePage.tsx
@@ -6,7 +6,7 @@ import { CreateOrgModal } from "../components";
 
 export const NonePage = () => {
   const { popUp, handlePopUpToggle } = usePopUp(["createOrg"] as const);
-  
+
   useEffect(() => {
     handlePopUpToggle("createOrg", true);
   }, []);
@@ -19,4 +19,4 @@ export const NonePage = () => {
       />
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/frontend/src/views/Org/NonePage/index.tsx b/frontend/src/views/Org/NonePage/index.tsx
index 42505f072..1ece302c9 100644
--- a/frontend/src/views/Org/NonePage/index.tsx
+++ b/frontend/src/views/Org/NonePage/index.tsx
@@ -1 +1 @@
-export { NonePage } from "./NonePage";
\ No newline at end of file
+export { NonePage } from "./NonePage";
diff --git a/frontend/src/views/Project/AuditLogsPage/AuditLogsPage.tsx b/frontend/src/views/Project/AuditLogsPage/AuditLogsPage.tsx
index d0a09688d..d9f95f2d5 100644
--- a/frontend/src/views/Project/AuditLogsPage/AuditLogsPage.tsx
+++ b/frontend/src/views/Project/AuditLogsPage/AuditLogsPage.tsx
@@ -6,9 +6,9 @@ import { LogsSection } from "./components";
 export const AuditLogsPage = withProjectPermission(
   () => {
     return (
-      <div className="flex justify-center bg-bunker-800 text-white w-full h-full">
-        <div className="max-w-7xl px-6 w-full">
-          <div className="py-6 sticky top-0 z-10 bg-bunker-800">
+      <div className="flex h-full w-full justify-center bg-bunker-800 text-white">
+        <div className="w-full max-w-7xl px-6">
+          <div className="sticky top-0 z-10 bg-bunker-800 py-6">
             <p className="text-3xl font-semibold text-gray-200">Audit Logs</p>
             <div />
           </div>
diff --git a/frontend/src/views/Project/AuditLogsPage/components/index.tsx b/frontend/src/views/Project/AuditLogsPage/components/index.tsx
index 009b8fecd..e15301e9b 100644
--- a/frontend/src/views/Project/AuditLogsPage/components/index.tsx
+++ b/frontend/src/views/Project/AuditLogsPage/components/index.tsx
@@ -1 +1 @@
-export { LogsSection } from "./LogsSection";
\ No newline at end of file
+export { LogsSection } from "./LogsSection";
diff --git a/frontend/src/views/Project/AuditLogsPage/components/types.tsx b/frontend/src/views/Project/AuditLogsPage/components/types.tsx
index b15ba4978..73d0aef47 100644
--- a/frontend/src/views/Project/AuditLogsPage/components/types.tsx
+++ b/frontend/src/views/Project/AuditLogsPage/components/types.tsx
@@ -2,25 +2,25 @@ import * as yup from "yup";
 
 import { EventType, UserAgentType } from "@app/hooks/api/auditLogs/enums";
 
-export const auditLogFilterFormSchema = yup.object({
-    eventType: yup.string()
-        .oneOf(Object.values(EventType), "Invalid event type"),
+export const auditLogFilterFormSchema = yup
+  .object({
+    eventType: yup.string().oneOf(Object.values(EventType), "Invalid event type"),
     actor: yup.string(),
-    userAgentType: yup.string()
-        .oneOf(Object.values(UserAgentType), "Invalid user agent type"),
+    userAgentType: yup.string().oneOf(Object.values(UserAgentType), "Invalid user agent type"),
     startDate: yup.date(),
     endDate: yup.date().min(yup.ref("startDate"), "End date cannot be before start date"),
     page: yup.number(),
     perPage: yup.number()
-}).required();
+  })
+  .required();
 
 export type AuditLogFilterFormData = yup.InferType<typeof auditLogFilterFormSchema>;
 
 export type SetValueType = (
-  name: keyof AuditLogFilterFormData, 
-  value: any, 
+  name: keyof AuditLogFilterFormData,
+  value: any,
   options?: {
-    shouldValidate?: boolean,
-    shouldDirty?: boolean
+    shouldValidate?: boolean;
+    shouldDirty?: boolean;
   }
-) => void;
\ No newline at end of file
+) => void;
diff --git a/frontend/src/views/Project/AuditLogsPage/index.tsx b/frontend/src/views/Project/AuditLogsPage/index.tsx
index a9bdafa7e..3864b1435 100644
--- a/frontend/src/views/Project/AuditLogsPage/index.tsx
+++ b/frontend/src/views/Project/AuditLogsPage/index.tsx
@@ -1 +1 @@
-export { AuditLogsPage } from "./AuditLogsPage";
\ No newline at end of file
+export { AuditLogsPage } from "./AuditLogsPage";
diff --git a/frontend/src/views/Project/IPAllowListPage/IPAllowlistPage.tsx b/frontend/src/views/Project/IPAllowListPage/IPAllowlistPage.tsx
index 64eec6a2f..41e628769 100644
--- a/frontend/src/views/Project/IPAllowListPage/IPAllowlistPage.tsx
+++ b/frontend/src/views/Project/IPAllowListPage/IPAllowlistPage.tsx
@@ -6,8 +6,8 @@ import { IPAllowlistSection } from "./components";
 export const IPAllowlistPage = withProjectPermission(
   () => {
     return (
-      <div className="flex justify-center bg-bunker-800 text-white w-full h-full">
-        <div className="max-w-7xl px-6 w-full">
+      <div className="flex h-full w-full justify-center bg-bunker-800 text-white">
+        <div className="w-full max-w-7xl px-6">
           <div className="my-6">
             <p className="text-3xl font-semibold text-gray-200">IP Allowlist</p>
             <div />
diff --git a/frontend/src/views/Project/IPAllowListPage/components/index.tsx b/frontend/src/views/Project/IPAllowListPage/components/index.tsx
index d4146cb4d..488a07e71 100644
--- a/frontend/src/views/Project/IPAllowListPage/components/index.tsx
+++ b/frontend/src/views/Project/IPAllowListPage/components/index.tsx
@@ -1 +1 @@
-export { IPAllowlistSection } from "./IPAllowlistSection";
\ No newline at end of file
+export { IPAllowlistSection } from "./IPAllowlistSection";
diff --git a/frontend/src/views/Project/IPAllowListPage/index.tsx b/frontend/src/views/Project/IPAllowListPage/index.tsx
index e7a407184..c13a0d1eb 100644
--- a/frontend/src/views/Project/IPAllowListPage/index.tsx
+++ b/frontend/src/views/Project/IPAllowListPage/index.tsx
@@ -1 +1 @@
-export { IPAllowlistPage } from "./IPAllowlistPage";
\ No newline at end of file
+export { IPAllowlistPage } from "./IPAllowlistPage";
diff --git a/frontend/src/views/Project/MembersPage/components/IdentityTab/IdentityTab.tsx b/frontend/src/views/Project/MembersPage/components/IdentityTab/IdentityTab.tsx
index 1f928daae..58397d96a 100644
--- a/frontend/src/views/Project/MembersPage/components/IdentityTab/IdentityTab.tsx
+++ b/frontend/src/views/Project/MembersPage/components/IdentityTab/IdentityTab.tsx
@@ -1,19 +1,17 @@
 import { motion } from "framer-motion";
 
-import { 
-    IdentitySection,
-} from "./components";
+import { IdentitySection } from "./components";
 
 export const IdentityTab = () => {
-    return (
-        <motion.div
-            key="panel-identity"
-            transition={{ duration: 0.15 }}
-            initial={{ opacity: 0, translateX: 30 }}
-            animate={{ opacity: 1, translateX: 0 }}
-            exit={{ opacity: 0, translateX: 30 }}
-        >
-            <IdentitySection />
-        </motion.div>
-    );
-}
\ No newline at end of file
+  return (
+    <motion.div
+      key="panel-identity"
+      transition={{ duration: 0.15 }}
+      initial={{ opacity: 0, translateX: 30 }}
+      animate={{ opacity: 1, translateX: 0 }}
+      exit={{ opacity: 0, translateX: 30 }}
+    >
+      <IdentitySection />
+    </motion.div>
+  );
+};
diff --git a/frontend/src/views/Project/MembersPage/components/IdentityTab/components/IdentitySection/IdentityRoles.tsx b/frontend/src/views/Project/MembersPage/components/IdentityTab/components/IdentitySection/IdentityRoles.tsx
index c7a68a6b2..82d9a8179 100644
--- a/frontend/src/views/Project/MembersPage/components/IdentityTab/components/IdentitySection/IdentityRoles.tsx
+++ b/frontend/src/views/Project/MembersPage/components/IdentityTab/components/IdentitySection/IdentityRoles.tsx
@@ -318,7 +318,7 @@ export const IdentityRoles = ({
                               icon={faClock}
                               className={twMerge(
                                 new Date() > new Date(temporaryAccessEndTime as string) &&
-                                "text-red-600"
+                                  "text-red-600"
                               )}
                             />
                           </Tooltip>
@@ -391,14 +391,14 @@ export const IdentityRoles = ({
                               defaultValue={
                                 userProjectRoleDetails?.isTemporary
                                   ? {
-                                    isTemporary: true,
-                                    temporaryAccessStartTime:
-                                      userProjectRoleDetails.temporaryAccessStartTime as string,
-                                    temporaryRange:
-                                      userProjectRoleDetails.temporaryRange as string,
-                                    temporaryAccessEndTime:
-                                      userProjectRoleDetails.temporaryAccessEndTime
-                                  }
+                                      isTemporary: true,
+                                      temporaryAccessStartTime:
+                                        userProjectRoleDetails.temporaryAccessStartTime as string,
+                                      temporaryRange:
+                                        userProjectRoleDetails.temporaryRange as string,
+                                      temporaryAccessEndTime:
+                                        userProjectRoleDetails.temporaryAccessEndTime
+                                    }
                                   : false
                               }
                               render={({ field }) => (
diff --git a/frontend/src/views/Project/MembersPage/components/IdentityTab/components/IdentitySection/index.tsx b/frontend/src/views/Project/MembersPage/components/IdentityTab/components/IdentitySection/index.tsx
index 3aa8cee58..f0663a6a5 100644
--- a/frontend/src/views/Project/MembersPage/components/IdentityTab/components/IdentitySection/index.tsx
+++ b/frontend/src/views/Project/MembersPage/components/IdentityTab/components/IdentitySection/index.tsx
@@ -1 +1 @@
-export { IdentitySection } from "./IdentitySection";
\ No newline at end of file
+export { IdentitySection } from "./IdentitySection";
diff --git a/frontend/src/views/Project/MembersPage/components/IdentityTab/components/index.tsx b/frontend/src/views/Project/MembersPage/components/IdentityTab/components/index.tsx
index 3aa8cee58..f0663a6a5 100644
--- a/frontend/src/views/Project/MembersPage/components/IdentityTab/components/index.tsx
+++ b/frontend/src/views/Project/MembersPage/components/IdentityTab/components/index.tsx
@@ -1 +1 @@
-export { IdentitySection } from "./IdentitySection";
\ No newline at end of file
+export { IdentitySection } from "./IdentitySection";
diff --git a/frontend/src/views/Project/MembersPage/components/IdentityTab/index.tsx b/frontend/src/views/Project/MembersPage/components/IdentityTab/index.tsx
index 7b6d6dbc5..86d3c710a 100644
--- a/frontend/src/views/Project/MembersPage/components/IdentityTab/index.tsx
+++ b/frontend/src/views/Project/MembersPage/components/IdentityTab/index.tsx
@@ -1 +1 @@
-export { IdentityTab } from "./IdentityTab";
\ No newline at end of file
+export { IdentityTab } from "./IdentityTab";
diff --git a/frontend/src/views/Project/MembersPage/components/MemberListTab/MemberListTab.tsx b/frontend/src/views/Project/MembersPage/components/MemberListTab/MemberListTab.tsx
index c57b37475..cfe8c863f 100644
--- a/frontend/src/views/Project/MembersPage/components/MemberListTab/MemberListTab.tsx
+++ b/frontend/src/views/Project/MembersPage/components/MemberListTab/MemberListTab.tsx
@@ -71,7 +71,7 @@ export const MemberListTab = () => {
   const { data: wsKey } = useGetUserWsKey(workspaceId);
   const { data: members, isLoading: isMembersLoading } = useGetWorkspaceUsers(workspaceId);
   const { data: orgUsers } = useGetOrgUsers(orgId);
-  
+
   const [searchMemberFilter, setSearchMemberFilter] = useState("");
 
   const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
@@ -105,7 +105,8 @@ export const MemberListTab = () => {
     const orgUser = (orgUsers || []).find(({ id }) => id === orgMembershipId);
     if (!orgUser) return;
 
-    try { // TODO: update
+    try {
+      // TODO: update
       if (currentWorkspace.version === ProjectVersion.V1) {
         await addUserToWorkspace({
           workspaceId,
@@ -236,14 +237,14 @@ export const MemberListTab = () => {
                           a={ProjectPermissionSub.Member}
                         >
                           {(isAllowed) => (
-                              <MemberRoles
-                                roles={roles}
-                                disableEdit={u.id === user?.id || !isAllowed}
-                                onOpenUpgradeModal={(description) =>
-                                  handlePopUpOpen("upgradePlan", { description })
-                                }
-                                membershipId={membershipId}
-                              />
+                            <MemberRoles
+                              roles={roles}
+                              disableEdit={u.id === user?.id || !isAllowed}
+                              onOpenUpgradeModal={(description) =>
+                                handlePopUpOpen("upgradePlan", { description })
+                              }
+                              membershipId={membershipId}
+                            />
                           )}
                         </ProjectPermissionCan>
                       </Td>
diff --git a/frontend/src/views/Project/MembersPage/components/MemberListTab/MemberRoles.tsx b/frontend/src/views/Project/MembersPage/components/MemberListTab/MemberRoles.tsx
index fbc36aa95..b71b224e3 100644
--- a/frontend/src/views/Project/MembersPage/components/MemberListTab/MemberRoles.tsx
+++ b/frontend/src/views/Project/MembersPage/components/MemberListTab/MemberRoles.tsx
@@ -325,14 +325,12 @@ export const MemberRoles = ({
                       <div>{formatRoleName(role, customRoleName)}</div>
                       {isTemporary && (
                         <div>
-                          <Tooltip
-                            content={isExpired ? "Access expired" : "Temporary access"}
-                          >
+                          <Tooltip content={isExpired ? "Access expired" : "Temporary access"}>
                             <FontAwesomeIcon
                               icon={faClock}
                               className={twMerge(
                                 new Date() > new Date(temporaryAccessEndTime as string) &&
-                                "text-red-600"
+                                  "text-red-600"
                               )}
                             />
                           </Tooltip>
@@ -405,14 +403,14 @@ export const MemberRoles = ({
                               defaultValue={
                                 userProjectRoleDetails?.isTemporary
                                   ? {
-                                    isTemporary: true,
-                                    temporaryAccessStartTime:
-                                      userProjectRoleDetails.temporaryAccessStartTime as string,
-                                    temporaryRange:
-                                      userProjectRoleDetails.temporaryRange as string,
-                                    temporaryAccessEndTime:
-                                      userProjectRoleDetails.temporaryAccessEndTime
-                                  }
+                                      isTemporary: true,
+                                      temporaryAccessStartTime:
+                                        userProjectRoleDetails.temporaryAccessStartTime as string,
+                                      temporaryRange:
+                                        userProjectRoleDetails.temporaryRange as string,
+                                      temporaryAccessEndTime:
+                                        userProjectRoleDetails.temporaryAccessEndTime
+                                    }
                                   : false
                               }
                               render={({ field }) => (
diff --git a/frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/SecretRollbackPermission.tsx b/frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/SecretRollbackPermission.tsx
index 9d36b58da..03fa41b68 100644
--- a/frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/SecretRollbackPermission.tsx
+++ b/frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/SecretRollbackPermission.tsx
@@ -91,7 +91,7 @@ export const SecretRollbackPermission = ({ isNonEditable, setValue, control }: P
   return (
     <div
       className={twMerge(
-        "px-10 py-6 bg-mineshaft-800 rounded-md",
+        "rounded-md bg-mineshaft-800 px-10 py-6",
         selectedPermissionCategory !== Permission.NoAccess && "border-l-2 border-primary-600"
       )}
     >
@@ -99,8 +99,8 @@ export const SecretRollbackPermission = ({ isNonEditable, setValue, control }: P
         <div>
           <FontAwesomeIcon icon={faPuzzlePiece} className="text-4xl" />
         </div>
-        <div className="flex-grow flex flex-col">
-          <div className="font-medium mb-1 text-lg">Secret Rollback</div>
+        <div className="flex flex-grow flex-col">
+          <div className="mb-1 text-lg font-medium">Secret Rollback</div>
           <div className="text-xs font-light">Secret rollback control actions</div>
         </div>
         <div>
@@ -120,7 +120,7 @@ export const SecretRollbackPermission = ({ isNonEditable, setValue, control }: P
       <motion.div
         initial={false}
         animate={{ height: isCustom ? "2.5rem" : 0, paddingTop: isCustom ? "1rem" : 0 }}
-        className="overflow-hidden grid gap-8 grid-flow-col auto-cols-min"
+        className="grid auto-cols-min grid-flow-col gap-8 overflow-hidden"
       >
         {isCustom &&
           PERMISSIONS.map(({ action, label }) => (
diff --git a/frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/SingleProjectPermission.tsx b/frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/SingleProjectPermission.tsx
index 84a4c1c9a..572325d4a 100644
--- a/frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/SingleProjectPermission.tsx
+++ b/frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/SingleProjectPermission.tsx
@@ -135,7 +135,7 @@ export const SingleProjectPermission = ({
   return (
     <div
       className={twMerge(
-        "px-10 py-6 bg-mineshaft-800 rounded-md",
+        "rounded-md bg-mineshaft-800 px-10 py-6",
         selectedPermissionCategory !== Permission.NoAccess && "border-l-2 border-primary-600"
       )}
     >
@@ -143,8 +143,8 @@ export const SingleProjectPermission = ({
         <div>
           <FontAwesomeIcon icon={icon} className="text-4xl" />
         </div>
-        <div className="flex-grow flex flex-col">
-          <div className="font-medium mb-1 text-lg">{title}</div>
+        <div className="flex flex-grow flex-col">
+          <div className="mb-1 text-lg font-medium">{title}</div>
           <div className="text-xs font-light">{subtitle}</div>
         </div>
         <div>
@@ -164,7 +164,7 @@ export const SingleProjectPermission = ({
       <motion.div
         initial={false}
         animate={{ height: isCustom ? "2.5rem" : 0, paddingTop: isCustom ? "1rem" : 0 }}
-        className="overflow-hidden grid gap-8 grid-flow-col auto-cols-min"
+        className="grid auto-cols-min grid-flow-col gap-8 overflow-hidden"
       >
         {isCustom &&
           getPermissionList(formName).map(({ action, label }) => (
diff --git a/frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/WsProjectPermission.tsx b/frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/WsProjectPermission.tsx
index 985b7b09d..9b04c5236 100644
--- a/frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/WsProjectPermission.tsx
+++ b/frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/WsProjectPermission.tsx
@@ -71,7 +71,7 @@ export const WsProjectPermission = ({ isNonEditable, setValue, control }: Props)
   return (
     <div
       className={twMerge(
-        "px-10 py-6 bg-mineshaft-800 rounded-md",
+        "rounded-md bg-mineshaft-800 px-10 py-6",
         selectedPermissionCategory !== Permission.NoAccess && "border-l-2 border-primary-600"
       )}
     >
@@ -79,8 +79,8 @@ export const WsProjectPermission = ({ isNonEditable, setValue, control }: Props)
         <div>
           <FontAwesomeIcon icon={faPuzzlePiece} className="text-4xl" />
         </div>
-        <div className="flex-grow flex flex-col">
-          <div className="font-medium mb-1 text-lg">Project</div>
+        <div className="flex flex-grow flex-col">
+          <div className="mb-1 text-lg font-medium">Project</div>
           <div className="text-xs font-light">Project control actions</div>
         </div>
         <div>
@@ -99,7 +99,7 @@ export const WsProjectPermission = ({ isNonEditable, setValue, control }: Props)
       <motion.div
         initial={false}
         animate={{ height: isCustom ? "2.5rem" : 0, paddingTop: isCustom ? "1rem" : 0 }}
-        className="overflow-hidden grid gap-8 grid-flow-col auto-cols-min"
+        className="grid auto-cols-min grid-flow-col gap-8 overflow-hidden"
       >
         {isCustom &&
           PERMISSIONS.map(({ action, label }) => (
diff --git a/frontend/src/views/Project/MembersPage/components/ServiceTokenTab/ServiceTokenTab.tsx b/frontend/src/views/Project/MembersPage/components/ServiceTokenTab/ServiceTokenTab.tsx
index bbb6262c0..3ee061328 100644
--- a/frontend/src/views/Project/MembersPage/components/ServiceTokenTab/ServiceTokenTab.tsx
+++ b/frontend/src/views/Project/MembersPage/components/ServiceTokenTab/ServiceTokenTab.tsx
@@ -1,19 +1,17 @@
 import { motion } from "framer-motion";
 
-import { 
-    ServiceTokenSection, 
-} from "./components";
+import { ServiceTokenSection } from "./components";
 
 export const ServiceTokenTab = () => {
-    return (
-        <motion.div
-            key="panel-service-token"
-            transition={{ duration: 0.15 }}
-            initial={{ opacity: 0, translateX: 30 }}
-            animate={{ opacity: 1, translateX: 0 }}
-            exit={{ opacity: 0, translateX: 30 }}
-        >
-            <ServiceTokenSection />
-        </motion.div>
-    );
-}
\ No newline at end of file
+  return (
+    <motion.div
+      key="panel-service-token"
+      transition={{ duration: 0.15 }}
+      initial={{ opacity: 0, translateX: 30 }}
+      animate={{ opacity: 1, translateX: 0 }}
+      exit={{ opacity: 0, translateX: 30 }}
+    >
+      <ServiceTokenSection />
+    </motion.div>
+  );
+};
diff --git a/frontend/src/views/Project/MembersPage/components/ServiceTokenTab/components/ServiceTokenSection/AddServiceTokenModal.tsx b/frontend/src/views/Project/MembersPage/components/ServiceTokenTab/components/ServiceTokenSection/AddServiceTokenModal.tsx
index 0659e64f4..dccae48d1 100644
--- a/frontend/src/views/Project/MembersPage/components/ServiceTokenTab/components/ServiceTokenSection/AddServiceTokenModal.tsx
+++ b/frontend/src/views/Project/MembersPage/components/ServiceTokenTab/components/ServiceTokenSection/AddServiceTokenModal.tsx
@@ -161,7 +161,7 @@ export const AddServiceTokenModal = ({ popUp, handlePopUpToggle }: Props) => {
       });
     } catch (err) {
       console.error(err);
-      const axiosError = err as AxiosError
+      const axiosError = err as AxiosError;
       if (axiosError?.response?.status === 401) {
         createNotification({
           text: "You do not have access to the selected environment/path",
diff --git a/frontend/src/views/Project/MembersPage/components/ServiceTokenTab/components/ServiceTokenSection/ServiceTokenSection.tsx b/frontend/src/views/Project/MembersPage/components/ServiceTokenTab/components/ServiceTokenSection/ServiceTokenSection.tsx
index 94a185871..1f2280f41 100644
--- a/frontend/src/views/Project/MembersPage/components/ServiceTokenTab/components/ServiceTokenSection/ServiceTokenSection.tsx
+++ b/frontend/src/views/Project/MembersPage/components/ServiceTokenTab/components/ServiceTokenSection/ServiceTokenSection.tsx
@@ -49,9 +49,7 @@ export const ServiceTokenSection = withProjectPermission(
     return (
       <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
         <div className="mb-2 flex justify-between">
-          <p className="text-xl font-semibold text-mineshaft-100">
-            Service Tokens
-          </p>
+          <p className="text-xl font-semibold text-mineshaft-100">Service Tokens</p>
           <ProjectPermissionCan
             I={ProjectPermissionActions.Create}
             a={ProjectPermissionSub.ServiceTokens}
diff --git a/frontend/src/views/Project/MembersPage/components/ServiceTokenTab/components/ServiceTokenSection/index.tsx b/frontend/src/views/Project/MembersPage/components/ServiceTokenTab/components/ServiceTokenSection/index.tsx
index 588dd234d..ddc3bdedb 100644
--- a/frontend/src/views/Project/MembersPage/components/ServiceTokenTab/components/ServiceTokenSection/index.tsx
+++ b/frontend/src/views/Project/MembersPage/components/ServiceTokenTab/components/ServiceTokenSection/index.tsx
@@ -1 +1 @@
-export {ServiceTokenSection} from "./ServiceTokenSection"
\ No newline at end of file
+export { ServiceTokenSection } from "./ServiceTokenSection";
diff --git a/frontend/src/views/Project/MembersPage/components/ServiceTokenTab/components/index.tsx b/frontend/src/views/Project/MembersPage/components/ServiceTokenTab/components/index.tsx
index 7d8b5ff15..ddc3bdedb 100644
--- a/frontend/src/views/Project/MembersPage/components/ServiceTokenTab/components/index.tsx
+++ b/frontend/src/views/Project/MembersPage/components/ServiceTokenTab/components/index.tsx
@@ -1 +1 @@
-export { ServiceTokenSection } from "./ServiceTokenSection";
\ No newline at end of file
+export { ServiceTokenSection } from "./ServiceTokenSection";
diff --git a/frontend/src/views/Project/MembersPage/components/ServiceTokenTab/index.tsx b/frontend/src/views/Project/MembersPage/components/ServiceTokenTab/index.tsx
index 762c29bde..1c093e700 100644
--- a/frontend/src/views/Project/MembersPage/components/ServiceTokenTab/index.tsx
+++ b/frontend/src/views/Project/MembersPage/components/ServiceTokenTab/index.tsx
@@ -1 +1 @@
-export { ServiceTokenTab } from "./ServiceTokenTab";
\ No newline at end of file
+export { ServiceTokenTab } from "./ServiceTokenTab";
diff --git a/frontend/src/views/Project/MembersPage/components/index.tsx b/frontend/src/views/Project/MembersPage/components/index.tsx
index a39af27f7..30adfff22 100644
--- a/frontend/src/views/Project/MembersPage/components/index.tsx
+++ b/frontend/src/views/Project/MembersPage/components/index.tsx
@@ -1,4 +1,4 @@
 export { IdentityTab } from "./IdentityTab";
 export { MemberListTab } from "./MemberListTab";
 export { ProjectRoleListTab } from "./ProjectRoleListTab";
-export { ServiceTokenTab } from "./ServiceTokenTab";
\ No newline at end of file
+export { ServiceTokenTab } from "./ServiceTokenTab";
diff --git a/frontend/src/views/SecretApprovalPage/components/SecretApprovalRequest/components/SecretApprovalRequestChangeItem.tsx b/frontend/src/views/SecretApprovalPage/components/SecretApprovalRequest/components/SecretApprovalRequestChangeItem.tsx
index 9c6c5922e..bdb059a63 100644
--- a/frontend/src/views/SecretApprovalPage/components/SecretApprovalRequest/components/SecretApprovalRequestChangeItem.tsx
+++ b/frontend/src/views/SecretApprovalPage/components/SecretApprovalRequest/components/SecretApprovalRequestChangeItem.tsx
@@ -151,7 +151,7 @@ export const SecretApprovalRequestChangeItem = ({
                 </Td>
                 <Td>
                   {(op === CommitType.CREATE ? newVersion?.tags : secretVersion?.tags)?.map(
-                    ({ name, id: tagId, color}) => (
+                    ({ name, id: tagId, color }) => (
                       <Tag
                         className="flex w-min items-center space-x-2"
                         key={`${
diff --git a/frontend/src/views/SecretOverviewPage/components/CreateSecretForm/index.tsx b/frontend/src/views/SecretOverviewPage/components/CreateSecretForm/index.tsx
index ffbe98f57..a7851ed77 100644
--- a/frontend/src/views/SecretOverviewPage/components/CreateSecretForm/index.tsx
+++ b/frontend/src/views/SecretOverviewPage/components/CreateSecretForm/index.tsx
@@ -1 +1 @@
-export { CreateSecretForm } from "./CreateSecretForm"
+export { CreateSecretForm } from "./CreateSecretForm";
diff --git a/frontend/src/views/SecretOverviewPage/components/ProjectIndexSecretsSection/index.tsx b/frontend/src/views/SecretOverviewPage/components/ProjectIndexSecretsSection/index.tsx
index 1f98d31a5..29106abaf 100644
--- a/frontend/src/views/SecretOverviewPage/components/ProjectIndexSecretsSection/index.tsx
+++ b/frontend/src/views/SecretOverviewPage/components/ProjectIndexSecretsSection/index.tsx
@@ -1 +1 @@
-export { ProjectIndexSecretsSection } from "./ProjectIndexSecretsSection";
\ No newline at end of file
+export { ProjectIndexSecretsSection } from "./ProjectIndexSecretsSection";
diff --git a/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx b/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx
index 478d99086..9653a9bd0 100644
--- a/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx
+++ b/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx
@@ -87,7 +87,7 @@ export const SecretEditRow = ({
   };
 
   return (
-    <div className="group flex w-full cursor-text space-x-2 items-center">
+    <div className="group flex w-full cursor-text items-center space-x-2">
       <div className="flex-grow border-r border-r-mineshaft-600 pr-2 pl-1">
         <Controller
           control={control}
diff --git a/frontend/src/views/SecretRotationPage/components/CreateRotationForm/CreateRotationForm.tsx b/frontend/src/views/SecretRotationPage/components/CreateRotationForm/CreateRotationForm.tsx
index ed7b571e3..37fae9389 100644
--- a/frontend/src/views/SecretRotationPage/components/CreateRotationForm/CreateRotationForm.tsx
+++ b/frontend/src/views/SecretRotationPage/components/CreateRotationForm/CreateRotationForm.tsx
@@ -90,7 +90,7 @@ export const CreateRotationForm = ({
       <ModalContent
         title={`Secret rotation for ${provider.name}`}
         subTitle="Provide the required inputs needed for the rotation"
-        className="max-w-2xl max-h-screen overflow-scroll my-4"
+        className="my-4 max-h-screen max-w-2xl overflow-scroll"
       >
         <Stepper activeStep={wizardStep} direction="horizontal" className="mb-4">
           {WIZARD_STEPS.map(({ title, description }, index) => (
diff --git a/frontend/src/views/SecretRotationPage/components/CreateRotationForm/steps/RotationInputForm.tsx b/frontend/src/views/SecretRotationPage/components/CreateRotationForm/steps/RotationInputForm.tsx
index 125515bf1..3b336a750 100644
--- a/frontend/src/views/SecretRotationPage/components/CreateRotationForm/steps/RotationInputForm.tsx
+++ b/frontend/src/views/SecretRotationPage/components/CreateRotationForm/steps/RotationInputForm.tsx
@@ -39,7 +39,7 @@ export const RotationInputForm = ({ onSubmit, onCancel, inputSchema }: Props) =>
               key={`provider-input-${inputName}`}
               label={
                 <div className="flex items-center space-x-2">
-                  <FormLabel className="uppercase mb-0" label={inputName.replaceAll("_", " ")} />
+                  <FormLabel className="mb-0 uppercase" label={inputName.replaceAll("_", " ")} />
                   {Boolean(inputSchema.properties[inputName]?.desc) && (
                     <Tooltip
                       className="max-w-xs"
diff --git a/frontend/src/views/SecretScanning/components/RiskStatusSelection.tsx b/frontend/src/views/SecretScanning/components/RiskStatusSelection.tsx
index 3d8daa2f5..36cf8fb9d 100644
--- a/frontend/src/views/SecretScanning/components/RiskStatusSelection.tsx
+++ b/frontend/src/views/SecretScanning/components/RiskStatusSelection.tsx
@@ -32,7 +32,7 @@ export const RiskStatusSelection = ({
           disabled={!isAllowed}
           value={selectedRiskStatus}
           onChange={(e) => setSelectedRiskStatus(e.target.value)}
-          className="block w-full py-2 px-3 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
+          className="block w-full rounded-md py-2 px-3 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-blue-500"
         >
           <option>Unresolved</option>
           <option value={RiskStatus.RESOLVED_FALSE_POSITIVE}>
diff --git a/frontend/src/views/SecretScanning/components/index.tsx b/frontend/src/views/SecretScanning/components/index.tsx
index d8a2f5b35..52f516593 100644
--- a/frontend/src/views/SecretScanning/components/index.tsx
+++ b/frontend/src/views/SecretScanning/components/index.tsx
@@ -1 +1 @@
-export { SecretScanningLogsTable } from "./SecretScanningLogsTable";
\ No newline at end of file
+export { SecretScanningLogsTable } from "./SecretScanningLogsTable";
diff --git a/frontend/src/views/Settings/BillingSettingsPage/BillingSettingsPage.tsx b/frontend/src/views/Settings/BillingSettingsPage/BillingSettingsPage.tsx
index 797b95afd..da0c4f764 100644
--- a/frontend/src/views/Settings/BillingSettingsPage/BillingSettingsPage.tsx
+++ b/frontend/src/views/Settings/BillingSettingsPage/BillingSettingsPage.tsx
@@ -1,20 +1,18 @@
 import { useTranslation } from "react-i18next";
 
-import {
-  BillingTabGroup
-} from "./components";
+import { BillingTabGroup } from "./components";
 
 export const BillingSettingsPage = () => {
-    const { t } = useTranslation();
-    return (
-      <div className="flex justify-center bg-bunker-800 text-white w-full h-full">
-        <div className="max-w-7xl px-6 w-full">
-          <div className="my-6">
-              <p className="text-3xl font-semibold text-gray-200">{t("billing.title")}</p>
-            <div />
-          </div>
-          <BillingTabGroup />
+  const { t } = useTranslation();
+  return (
+    <div className="flex h-full w-full justify-center bg-bunker-800 text-white">
+      <div className="w-full max-w-7xl px-6">
+        <div className="my-6">
+          <p className="text-3xl font-semibold text-gray-200">{t("billing.title")}</p>
+          <div />
         </div>
+        <BillingTabGroup />
       </div>
-    );
-};
\ No newline at end of file
+    </div>
+  );
+};
diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/BillingCloudTab.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/BillingCloudTab.tsx
index 4ce5fb1d7..6085b90c6 100644
--- a/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/BillingCloudTab.tsx
+++ b/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/BillingCloudTab.tsx
@@ -2,10 +2,10 @@ import { CurrentPlanSection } from "./CurrentPlanSection";
 import { PreviewSection } from "./PreviewSection";
 
 export const BillingCloudTab = () => {
-    return (
-        <div>
-            <PreviewSection />
-            <CurrentPlanSection />
-        </div>
-    );
-}
\ No newline at end of file
+  return (
+    <div>
+      <PreviewSection />
+      <CurrentPlanSection />
+    </div>
+  );
+};
diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/ManagePlansModal.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/ManagePlansModal.tsx
index 20c240544..453404d35 100644
--- a/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/ManagePlansModal.tsx
+++ b/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/ManagePlansModal.tsx
@@ -1,10 +1,7 @@
-import { Fragment } from "react"
-import { Tab } from "@headlessui/react"
+import { Fragment } from "react";
+import { Tab } from "@headlessui/react";
 
-import { 
-    Modal,
-    ModalContent
-} from "@app/components/v2";
+import { Modal, ModalContent } from "@app/components/v2";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 import { ManagePlansTable } from "./ManagePlansTable";
@@ -14,51 +11,52 @@ type Props = {
   handlePopUpToggle: (popUpName: keyof UsePopUpState<["managePlan"]>, state?: boolean) => void;
 };
 
-export const ManagePlansModal = ({
-    popUp,
-    handlePopUpToggle 
-}: Props) => {
-    return (
+export const ManagePlansModal = ({ popUp, handlePopUpToggle }: Props) => {
+  return (
     <Modal
-            isOpen={popUp?.managePlan?.isOpen}
-            onOpenChange={(isOpen) => {
-                handlePopUpToggle("managePlan", isOpen);
-            }}
-        >
-            <ModalContent className="max-w-screen-lg" title="Infisical Cloud Plans">
-                <Tab.Group>
-                    <Tab.List className="border-b-2 border-mineshaft-600 max-w-screen-lg">
-                        <Tab as={Fragment}>
-                            {({ selected }) => (
-                                <button 
-                                    type="button"
-                                    className={`p-4 ${selected ? "border-b-2 border-white text-white" : "text-mineshaft-400"} w-30 font-semibold outline-none`}
-                                >
-                                    Bill monthly
-                                </button>
-                            )}
-                        </Tab>
-                        <Tab as={Fragment}>
-                            {({ selected }) => (
-                                <button 
-                                    type="button"
-                                    className={`p-4 ${selected ? "border-b-2 border-white text-white" : "text-mineshaft-400"} w-30 font-semibold outline-none`}
-                                >
-                                    Bill yearly
-                                </button>
-                            )}
-                        </Tab>
-                    </Tab.List>
-                    <Tab.Panels className="mt-4">
-                        <Tab.Panel>
-                            <ManagePlansTable billingCycle="monthly" />
-                        </Tab.Panel>
-                        <Tab.Panel>
-                            <ManagePlansTable billingCycle="yearly" />
-                        </Tab.Panel>
-                    </Tab.Panels>
-                </Tab.Group>
-            </ModalContent>
-        </Modal>
-    );
-}
+      isOpen={popUp?.managePlan?.isOpen}
+      onOpenChange={(isOpen) => {
+        handlePopUpToggle("managePlan", isOpen);
+      }}
+    >
+      <ModalContent className="max-w-screen-lg" title="Infisical Cloud Plans">
+        <Tab.Group>
+          <Tab.List className="max-w-screen-lg border-b-2 border-mineshaft-600">
+            <Tab as={Fragment}>
+              {({ selected }) => (
+                <button
+                  type="button"
+                  className={`p-4 ${
+                    selected ? "border-b-2 border-white text-white" : "text-mineshaft-400"
+                  } w-30 font-semibold outline-none`}
+                >
+                  Bill monthly
+                </button>
+              )}
+            </Tab>
+            <Tab as={Fragment}>
+              {({ selected }) => (
+                <button
+                  type="button"
+                  className={`p-4 ${
+                    selected ? "border-b-2 border-white text-white" : "text-mineshaft-400"
+                  } w-30 font-semibold outline-none`}
+                >
+                  Bill yearly
+                </button>
+              )}
+            </Tab>
+          </Tab.List>
+          <Tab.Panels className="mt-4">
+            <Tab.Panel>
+              <ManagePlansTable billingCycle="monthly" />
+            </Tab.Panel>
+            <Tab.Panel>
+              <ManagePlansTable billingCycle="yearly" />
+            </Tab.Panel>
+          </Tab.Panels>
+        </Tab.Group>
+      </ModalContent>
+    </Modal>
+  );
+};
diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/index.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/index.tsx
index 07696dc7e..341251e99 100644
--- a/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/index.tsx
+++ b/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/index.tsx
@@ -1 +1 @@
-export { BillingCloudTab } from "./BillingCloudTab";
\ No newline at end of file
+export { BillingCloudTab } from "./BillingCloudTab";
diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/BillingDetailsTab.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/BillingDetailsTab.tsx
index 3e149a1fd..f422fe046 100644
--- a/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/BillingDetailsTab.tsx
+++ b/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/BillingDetailsTab.tsx
@@ -4,12 +4,12 @@ import { PmtMethodsSection } from "./PmtMethodsSection";
 import { TaxIDSection } from "./TaxIDSection";
 
 export const BillingDetailsTab = () => {
-    return (
-        <>
-            <CompanyNameSection />
-            <InvoiceEmailSection />
-            <PmtMethodsSection />
-            <TaxIDSection />
-        </>
-    );
-}
\ No newline at end of file
+  return (
+    <>
+      <CompanyNameSection />
+      <InvoiceEmailSection />
+      <PmtMethodsSection />
+      <TaxIDSection />
+    </>
+  );
+};
diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/TaxIDSection.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/TaxIDSection.tsx
index 4ff640b73..ecb876aa5 100644
--- a/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/TaxIDSection.tsx
+++ b/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/TaxIDSection.tsx
@@ -15,9 +15,9 @@ export const TaxIDSection = () => {
   ] as const);
 
   return (
-    <div className="p-4 bg-mineshaft-900 mb-6 rounded-lg border border-mineshaft-600">
-      <div className="flex items-center mb-8">
-        <h2 className="text-xl font-semibold flex-1 text-white">Tax ID</h2>
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="mb-8 flex items-center">
+        <h2 className="flex-1 text-xl font-semibold text-white">Tax ID</h2>
         <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Billing}>
           {(isAllowed) => (
             <Button
diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/index.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/index.tsx
index 359e74012..346c0f7d3 100644
--- a/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/index.tsx
+++ b/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/index.tsx
@@ -1 +1 @@
-export { BillingDetailsTab } from "./BillingDetailsTab";
\ No newline at end of file
+export { BillingDetailsTab } from "./BillingDetailsTab";
diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/BillingReceiptsTab/BillingReceiptsTab.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/BillingReceiptsTab/BillingReceiptsTab.tsx
index e6b75a0cb..0ae6d2c77 100644
--- a/frontend/src/views/Settings/BillingSettingsPage/components/BillingReceiptsTab/BillingReceiptsTab.tsx
+++ b/frontend/src/views/Settings/BillingSettingsPage/components/BillingReceiptsTab/BillingReceiptsTab.tsx
@@ -1,10 +1,10 @@
 import { InvoicesTable } from "./InvoicesTable";
 
 export const BillingReceiptsTab = () => {
-    return (
-        <div className="p-4 bg-mineshaft-900 mb-6 rounded-lg border border-mineshaft-600">
-          <h2 className="text-xl font-semibold flex-1 text-white">Invoices</h2>
-          <InvoicesTable />
-        </div>
-    );
-}
\ No newline at end of file
+  return (
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <h2 className="flex-1 text-xl font-semibold text-white">Invoices</h2>
+      <InvoicesTable />
+    </div>
+  );
+};
diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/BillingReceiptsTab/index.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/BillingReceiptsTab/index.tsx
index 4f4b60a8c..eec019952 100644
--- a/frontend/src/views/Settings/BillingSettingsPage/components/BillingReceiptsTab/index.tsx
+++ b/frontend/src/views/Settings/BillingSettingsPage/components/BillingReceiptsTab/index.tsx
@@ -1 +1 @@
-export { BillingReceiptsTab } from "./BillingReceiptsTab";
\ No newline at end of file
+export { BillingReceiptsTab } from "./BillingReceiptsTab";
diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/BillingSelfHostedTab/BillingSelfHostedTab.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/BillingSelfHostedTab/BillingSelfHostedTab.tsx
index 1ea4ca36b..c5a8d8f94 100644
--- a/frontend/src/views/Settings/BillingSettingsPage/components/BillingSelfHostedTab/BillingSelfHostedTab.tsx
+++ b/frontend/src/views/Settings/BillingSettingsPage/components/BillingSelfHostedTab/BillingSelfHostedTab.tsx
@@ -1,9 +1,9 @@
 import { LicensesSection } from "./LicensesSection";
 
 export const BillingSelfHostedTab = () => {
-    return (
-        <div>
-            <LicensesSection />
-        </div>
-    );
-}
\ No newline at end of file
+  return (
+    <div>
+      <LicensesSection />
+    </div>
+  );
+};
diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/BillingSelfHostedTab/index.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/BillingSelfHostedTab/index.tsx
index 3e443c2df..da9282157 100644
--- a/frontend/src/views/Settings/BillingSettingsPage/components/BillingSelfHostedTab/index.tsx
+++ b/frontend/src/views/Settings/BillingSettingsPage/components/BillingSelfHostedTab/index.tsx
@@ -1 +1 @@
-export * from "./BillingSelfHostedTab";
\ No newline at end of file
+export * from "./BillingSelfHostedTab";
diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/BillingTabGroup/BillingTabGroup.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/BillingTabGroup/BillingTabGroup.tsx
index de4a3071a..e7b26c8e1 100644
--- a/frontend/src/views/Settings/BillingSettingsPage/components/BillingTabGroup/BillingTabGroup.tsx
+++ b/frontend/src/views/Settings/BillingSettingsPage/components/BillingTabGroup/BillingTabGroup.tsx
@@ -26,7 +26,7 @@ export const BillingTabGroup = withPermission(
               {({ selected }) => (
                 <button
                   type="button"
-                  className={`w-30 py-2 mx-2 mr-4 font-medium text-sm outline-none ${
+                  className={`w-30 mx-2 mr-4 py-2 text-sm font-medium outline-none ${
                     selected ? "border-b border-white text-white" : "text-mineshaft-400"
                   }`}
                 >
diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/BillingTabGroup/index.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/BillingTabGroup/index.tsx
index 6c13599f8..8ad1fb5b8 100644
--- a/frontend/src/views/Settings/BillingSettingsPage/components/BillingTabGroup/index.tsx
+++ b/frontend/src/views/Settings/BillingSettingsPage/components/BillingTabGroup/index.tsx
@@ -1 +1 @@
-export { BillingTabGroup } from "./BillingTabGroup";
\ No newline at end of file
+export { BillingTabGroup } from "./BillingTabGroup";
diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/index.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/index.tsx
index 6c13599f8..8ad1fb5b8 100644
--- a/frontend/src/views/Settings/BillingSettingsPage/components/index.tsx
+++ b/frontend/src/views/Settings/BillingSettingsPage/components/index.tsx
@@ -1 +1 @@
-export { BillingTabGroup } from "./BillingTabGroup";
\ No newline at end of file
+export { BillingTabGroup } from "./BillingTabGroup";
diff --git a/frontend/src/views/Settings/BillingSettingsPage/index.tsx b/frontend/src/views/Settings/BillingSettingsPage/index.tsx
index 2c4e77101..cf076dae8 100644
--- a/frontend/src/views/Settings/BillingSettingsPage/index.tsx
+++ b/frontend/src/views/Settings/BillingSettingsPage/index.tsx
@@ -1 +1 @@
-export { BillingSettingsPage } from "./BillingSettingsPage";
\ No newline at end of file
+export { BillingSettingsPage } from "./BillingSettingsPage";
diff --git a/frontend/src/views/Settings/OrgSettingsPage/OrgSettingsPage.tsx b/frontend/src/views/Settings/OrgSettingsPage/OrgSettingsPage.tsx
index 8c9a64222..b5ed6d26a 100644
--- a/frontend/src/views/Settings/OrgSettingsPage/OrgSettingsPage.tsx
+++ b/frontend/src/views/Settings/OrgSettingsPage/OrgSettingsPage.tsx
@@ -6,13 +6,13 @@ export const OrgSettingsPage = () => {
   const { t } = useTranslation();
 
   return (
-    <div className="flex justify-center bg-bunker-800 text-white w-full py-6">
-		<div className="max-w-4xl w-full px-6">
-			<div className="mb-4">
-				<p className="text-3xl font-semibold text-gray-200">{t("settings.org.title")}</p>
-			</div>
-			<OrgTabGroup />
-		</div>
+    <div className="flex w-full justify-center bg-bunker-800 py-6 text-white">
+      <div className="w-full max-w-4xl px-6">
+        <div className="mb-4">
+          <p className="text-3xl font-semibold text-gray-200">{t("settings.org.title")}</p>
+        </div>
+        <OrgTabGroup />
+      </div>
     </div>
   );
 };
diff --git a/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/LDAPModal.tsx b/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/LDAPModal.tsx
index c0e7cf772..8ecc595cb 100644
--- a/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/LDAPModal.tsx
+++ b/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/LDAPModal.tsx
@@ -1,31 +1,20 @@
 import { useEffect } from "react";
-import { Controller, useForm } from "react-hook-form"; 
+import { Controller, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
-import {
-    Button,
-    FormControl,
-    Input,
-    Modal,
-    ModalContent,
-    TextArea
-} from "@app/components/v2";
+import { Button, FormControl, Input, Modal, ModalContent, TextArea } from "@app/components/v2";
 import { useOrganization } from "@app/context";
-import {
-    useCreateLDAPConfig,
-    useGetLDAPConfig,
-    useUpdateLDAPConfig
-} from "@app/hooks/api";
+import { useCreateLDAPConfig, useGetLDAPConfig, useUpdateLDAPConfig } from "@app/hooks/api";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 const LDAPFormSchema = z.object({
-    url: z.string().default(""),
-    bindDN: z.string().default(""),
-    bindPass: z.string().default(""),
-    searchBase: z.string().default(""),
-    caCert: z.string().optional()
+  url: z.string().default(""),
+  bindDN: z.string().default(""),
+  bindPass: z.string().default(""),
+  searchBase: z.string().default(""),
+  caCert: z.string().optional()
 });
 
 export type TLDAPFormData = z.infer<typeof LDAPFormSchema>;
@@ -36,194 +25,152 @@ type Props = {
   handlePopUpToggle: (popUpName: keyof UsePopUpState<["addLDAP"]>, state?: boolean) => void;
 };
 
-export const LDAPModal = ({
-    popUp,
-    handlePopUpClose,
-    handlePopUpToggle
-}: Props) => {
-    const { currentOrg } = useOrganization();
-    const { createNotification } = useNotificationContext();
-    const { mutateAsync: createMutateAsync, isLoading: createIsLoading } = useCreateLDAPConfig();
-    const { mutateAsync: updateMutateAsync, isLoading: updateIsLoading } = useUpdateLDAPConfig();
-    const { data } = useGetLDAPConfig(currentOrg?.id?? "");
-    
-    const {
-        control,
-        handleSubmit,
-        reset,
-    } = useForm<TLDAPFormData>({
-        resolver: zodResolver(LDAPFormSchema)
-    })
-    
-    useEffect(() => {
-        if (data) {
-            reset({
-                url: data?.url ?? "",
-                bindDN: data?.bindDN ?? "",
-                bindPass: data?.bindPass ?? "",
-                searchBase: data?.searchBase ?? "",
-                caCert: data?.caCert ?? ""
-            });
-        }
-    }, [data]);
-    
-    const onSSOModalSubmit = async ({
-        url,
-        bindDN,
-        bindPass,
-        searchBase,
-        caCert
-    }: TLDAPFormData) => {
-        try {
-            if (!currentOrg) return;
-            
-            if (!data) {
-                await createMutateAsync({
-                    organizationId: currentOrg.id,
-                    isActive: false,
-                    url,
-                    bindDN,
-                    bindPass,
-                    searchBase,
-                    caCert
-                });
-            } else {
-                await updateMutateAsync({
-                    organizationId: currentOrg.id,
-                    isActive: false,
-                    url,
-                    bindDN,
-                    bindPass,
-                    searchBase,
-                    caCert
-                });
-            }
+export const LDAPModal = ({ popUp, handlePopUpClose, handlePopUpToggle }: Props) => {
+  const { currentOrg } = useOrganization();
+  const { createNotification } = useNotificationContext();
+  const { mutateAsync: createMutateAsync, isLoading: createIsLoading } = useCreateLDAPConfig();
+  const { mutateAsync: updateMutateAsync, isLoading: updateIsLoading } = useUpdateLDAPConfig();
+  const { data } = useGetLDAPConfig(currentOrg?.id ?? "");
 
-            handlePopUpClose("addLDAP");
+  const { control, handleSubmit, reset } = useForm<TLDAPFormData>({
+    resolver: zodResolver(LDAPFormSchema)
+  });
 
-            createNotification({
-                text: `Successfully ${!data ? "added" : "updated"} LDAP configuration`,
-                type: "success"
-            });
-        } catch (err) {
-            console.error(err);
-            createNotification({
-                text: `Failed to ${!data ? "add" : "update"} LDAP configuration`,
-                type: "error"
-            });
-        }
+  useEffect(() => {
+    if (data) {
+      reset({
+        url: data?.url ?? "",
+        bindDN: data?.bindDN ?? "",
+        bindPass: data?.bindPass ?? "",
+        searchBase: data?.searchBase ?? "",
+        caCert: data?.caCert ?? ""
+      });
     }
+  }, [data]);
 
-    return (
-        <Modal
-            isOpen={popUp?.addLDAP?.isOpen}
-                onOpenChange={(isOpen) => {
-                handlePopUpToggle("addLDAP", isOpen);
-                reset();
-            }}
-        >
-            <ModalContent title="Manage LDAP configuration">
-                <form onSubmit={handleSubmit(onSSOModalSubmit)}>
-                    <Controller
-                            control={control}
-                            name="url"
-                            render={({ field, fieldState: { error } }) => (
-                                <FormControl
-                                    label="URL"
-                                    errorText={error?.message}
-                                    isError={Boolean(error)}
-                                >
-                                    <Input 
-                                        {...field} 
-                                        placeholder="ldaps://ldap.myorg.com:636"
-                                    />
-                                </FormControl>
-                            )}
-                        />
-                        <Controller
-                            control={control}
-                            name="bindDN"
-                            render={({ field, fieldState: { error } }) => (
-                                <FormControl
-                                    label="Bind DN"
-                                    errorText={error?.message}
-                                    isError={Boolean(error)}
-                                >
-                                    <Input 
-                                        {...field} 
-                                        placeholder="cn=infisical,ou=Users,dc=example,dc=com"
-                                    />
-                                </FormControl>
-                            )}
-                        />
-                        <Controller
-                            control={control}
-                            name="bindPass"
-                            render={({ field, fieldState: { error } }) => (
-                                <FormControl
-                                    label="Bind Pass"
-                                    errorText={error?.message}
-                                    isError={Boolean(error)}
-                                >
-                                    <Input 
-                                        {...field} 
-                                        type="password"
-                                        placeholder="********"
-                                    />
-                                </FormControl>
-                            )}
-                        />
-                        <Controller
-                            control={control}
-                            name="searchBase"
-                            render={({ field, fieldState: { error } }) => (
-                                <FormControl
-                                    label="Search Base / User DN"
-                                    errorText={error?.message}
-                                    isError={Boolean(error)}
-                                >
-                                    <Input 
-                                        {...field} 
-                                        placeholder="ou=people,dc=acme,dc=com"
-                                    />
-                                </FormControl>
-                            )}
-                        />
-                        <Controller
-                            control={control}
-                            name="caCert"
-                            render={({ field, fieldState: { error } }) => (
-                                <FormControl
-                                    label="CA Certificate"
-                                    errorText={error?.message}
-                                    isError={Boolean(error)}
-                                >
-                                    <TextArea 
-                                        {...field} 
-                                        placeholder="-----BEGIN CERTIFICATE----- ..."
-                                    />
-                                </FormControl>
-                            )}
-                        />
-                    <div className="mt-8 flex items-center">
-                        <Button
-                            className="mr-4"
-                            size="sm"
-                            type="submit"
-                            isLoading={createIsLoading || updateIsLoading}
-                        >
-                            {!data ? "Add" : "Update"}
-                        </Button>
-                        <Button 
-                            colorSchema="secondary" 
-                            variant="plain"
-                            onClick={() => handlePopUpClose("addLDAP")}
-                        >
-                            Cancel
-                        </Button>
-                    </div>
-                </form>
-            </ModalContent>
-        </Modal>
-    );
-}
\ No newline at end of file
+  const onSSOModalSubmit = async ({ url, bindDN, bindPass, searchBase, caCert }: TLDAPFormData) => {
+    try {
+      if (!currentOrg) return;
+
+      if (!data) {
+        await createMutateAsync({
+          organizationId: currentOrg.id,
+          isActive: false,
+          url,
+          bindDN,
+          bindPass,
+          searchBase,
+          caCert
+        });
+      } else {
+        await updateMutateAsync({
+          organizationId: currentOrg.id,
+          isActive: false,
+          url,
+          bindDN,
+          bindPass,
+          searchBase,
+          caCert
+        });
+      }
+
+      handlePopUpClose("addLDAP");
+
+      createNotification({
+        text: `Successfully ${!data ? "added" : "updated"} LDAP configuration`,
+        type: "success"
+      });
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: `Failed to ${!data ? "add" : "update"} LDAP configuration`,
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={popUp?.addLDAP?.isOpen}
+      onOpenChange={(isOpen) => {
+        handlePopUpToggle("addLDAP", isOpen);
+        reset();
+      }}
+    >
+      <ModalContent title="Manage LDAP configuration">
+        <form onSubmit={handleSubmit(onSSOModalSubmit)}>
+          <Controller
+            control={control}
+            name="url"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl label="URL" errorText={error?.message} isError={Boolean(error)}>
+                <Input {...field} placeholder="ldaps://ldap.myorg.com:636" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            name="bindDN"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl label="Bind DN" errorText={error?.message} isError={Boolean(error)}>
+                <Input {...field} placeholder="cn=infisical,ou=Users,dc=example,dc=com" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            name="bindPass"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl label="Bind Pass" errorText={error?.message} isError={Boolean(error)}>
+                <Input {...field} type="password" placeholder="********" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            name="searchBase"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Search Base / User DN"
+                errorText={error?.message}
+                isError={Boolean(error)}
+              >
+                <Input {...field} placeholder="ou=people,dc=acme,dc=com" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            name="caCert"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="CA Certificate"
+                errorText={error?.message}
+                isError={Boolean(error)}
+              >
+                <TextArea {...field} placeholder="-----BEGIN CERTIFICATE----- ..." />
+              </FormControl>
+            )}
+          />
+          <div className="mt-8 flex items-center">
+            <Button
+              className="mr-4"
+              size="sm"
+              type="submit"
+              isLoading={createIsLoading || updateIsLoading}
+            >
+              {!data ? "Add" : "Update"}
+            </Button>
+            <Button
+              colorSchema="secondary"
+              variant="plain"
+              onClick={() => handlePopUpClose("addLDAP")}
+            >
+              Cancel
+            </Button>
+          </div>
+        </form>
+      </ModalContent>
+    </Modal>
+  );
+};
diff --git a/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgGeneralAuthSection.tsx b/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgGeneralAuthSection.tsx
index fb6fa2295..6de61c97f 100644
--- a/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgGeneralAuthSection.tsx
+++ b/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgGeneralAuthSection.tsx
@@ -1,66 +1,60 @@
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import { OrgPermissionCan } from "@app/components/permissions";
+import { Switch, UpgradePlanModal } from "@app/components/v2";
 import {
-    Switch,
-    UpgradePlanModal
-} from "@app/components/v2";
-import {
-    OrgPermissionActions,
-    OrgPermissionSubjects,
-    useOrganization,
-    useSubscription
+  OrgPermissionActions,
+  OrgPermissionSubjects,
+  useOrganization,
+  useSubscription
 } from "@app/context";
 import { useLogoutUser, useUpdateOrg } from "@app/hooks/api";
 import { usePopUp } from "@app/hooks/usePopUp";
 
 export const OrgGeneralAuthSection = () => {
-    const { createNotification } = useNotificationContext();
-    const { currentOrg } = useOrganization();
-    const { subscription } = useSubscription();
-    const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp([
-        "upgradePlan"
-    ] as const);
-    
-    const { mutateAsync } = useUpdateOrg();
-    
-    const logout = useLogoutUser();
-    
-    const handleEnforceOrgAuthToggle = async (value: boolean) => {
-        try {
-            if (!currentOrg?.id) return;
-            if (!subscription?.samlSSO) {
-                handlePopUpOpen("upgradePlan");
-                return;
-            }
-            
-            await mutateAsync({ 
-                orgId: currentOrg?.id, 
-                authEnforced: value 
-            });
-            
-            createNotification({
-                text: `Successfully ${value ? "enforced" : "un-enforced"} org-level auth`,
-                type: "success"
-            });
-            
-            if (value) {
-                await logout.mutateAsync();
-                window.open(`/api/v1/sso/redirect/saml2/organizations/${currentOrg.slug}`);
-                window.close();
-            }
-            
-        } catch (err) {
-            console.error(err);
-            createNotification({
-                text: (err as { response: { data: { message: string; }}}).response.data.message,
-                type: "error"
-            });
-        }
-    }
+  const { createNotification } = useNotificationContext();
+  const { currentOrg } = useOrganization();
+  const { subscription } = useSubscription();
+  const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["upgradePlan"] as const);
 
-    return (
-        <>
-            {/* <div className="py-4">
+  const { mutateAsync } = useUpdateOrg();
+
+  const logout = useLogoutUser();
+
+  const handleEnforceOrgAuthToggle = async (value: boolean) => {
+    try {
+      if (!currentOrg?.id) return;
+      if (!subscription?.samlSSO) {
+        handlePopUpOpen("upgradePlan");
+        return;
+      }
+
+      await mutateAsync({
+        orgId: currentOrg?.id,
+        authEnforced: value
+      });
+
+      createNotification({
+        text: `Successfully ${value ? "enforced" : "un-enforced"} org-level auth`,
+        type: "success"
+      });
+
+      if (value) {
+        await logout.mutateAsync();
+        window.open(`/api/v1/sso/redirect/saml2/organizations/${currentOrg.slug}`);
+        window.close();
+      }
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: (err as { response: { data: { message: string } } }).response.data.message,
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <>
+      {/* <div className="py-4">
                 <div className="mb-2 flex justify-between">
                     <h3 className="text-md text-mineshaft-100">Allow users to send invites</h3>
                     <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Sso}>
@@ -76,27 +70,29 @@ export const OrgGeneralAuthSection = () => {
                 </div>
                 <p className="text-sm text-mineshaft-300">Allow members to invite new users to this organization</p>
             </div> */}
-            <div className="py-4">
-                <div className="mb-2 flex justify-between"> 
-                    <h3 className="text-md text-mineshaft-100">Enforce SAML SSO</h3>
-                    <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Sso}>
-                        {(isAllowed) => (
-                            <Switch
-                                id="enforce-org-auth"
-                                onCheckedChange={(value) => handleEnforceOrgAuthToggle(value)}
-                                isChecked={currentOrg?.authEnforced ?? false}
-                                isDisabled={!isAllowed}
-                            />
-                        )}
-                    </OrgPermissionCan>
-                </div>
-                <p className="text-sm text-mineshaft-300">Enforce members to authenticate via SAML to access this organization</p>
-            </div>
-            <UpgradePlanModal
-                isOpen={popUp.upgradePlan.isOpen}
-                onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
-                text="You can enforce SAML SSO if you switch to Infisical's Pro plan."
-            />
-        </>
-    );
-}
\ No newline at end of file
+      <div className="py-4">
+        <div className="mb-2 flex justify-between">
+          <h3 className="text-md text-mineshaft-100">Enforce SAML SSO</h3>
+          <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Sso}>
+            {(isAllowed) => (
+              <Switch
+                id="enforce-org-auth"
+                onCheckedChange={(value) => handleEnforceOrgAuthToggle(value)}
+                isChecked={currentOrg?.authEnforced ?? false}
+                isDisabled={!isAllowed}
+              />
+            )}
+          </OrgPermissionCan>
+        </div>
+        <p className="text-sm text-mineshaft-300">
+          Enforce members to authenticate via SAML to access this organization
+        </p>
+      </div>
+      <UpgradePlanModal
+        isOpen={popUp.upgradePlan.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+        text="You can enforce SAML SSO if you switch to Infisical's Pro plan."
+      />
+    </>
+  );
+};
diff --git a/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgLDAPSection.tsx b/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgLDAPSection.tsx
index 48dfcd271..771737d69 100644
--- a/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgLDAPSection.tsx
+++ b/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgLDAPSection.tsx
@@ -1,21 +1,13 @@
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import { OrgPermissionCan } from "@app/components/permissions";
-import {
-  Button,
-  Switch,
-  UpgradePlanModal
-} from "@app/components/v2";
+import { Button, Switch, UpgradePlanModal } from "@app/components/v2";
 import {
   OrgPermissionActions,
   OrgPermissionSubjects,
   useOrganization,
   useSubscription
 } from "@app/context";
-import { 
-    useCreateLDAPConfig,
-    useGetLDAPConfig,
-    useUpdateLDAPConfig
-} from "@app/hooks/api";
+import { useCreateLDAPConfig, useGetLDAPConfig, useUpdateLDAPConfig } from "@app/hooks/api";
 import { usePopUp } from "@app/hooks/usePopUp";
 
 import { LDAPModal } from "./LDAPModal";
@@ -30,7 +22,7 @@ export const OrgLDAPSection = (): JSX.Element => {
     "addLDAP",
     "upgradePlan"
   ] as const);
-  
+
   const { mutateAsync: createMutateAsync } = useCreateLDAPConfig();
 
   const handleLDAPToggle = async (value: boolean) => {
@@ -71,7 +63,7 @@ export const OrgLDAPSection = (): JSX.Element => {
             url: "",
             bindDN: "",
             bindPass: "",
-            searchBase: "",
+            searchBase: ""
           });
         }
 
@@ -92,11 +84,7 @@ export const OrgLDAPSection = (): JSX.Element => {
           <h2 className="text-md text-mineshaft-100">LDAP</h2>
           <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Ldap}>
             {(isAllowed) => (
-              <Button
-                onClick={addLDAPBtnClick}
-                colorSchema="secondary"
-                isDisabled={!isAllowed}
-              >
+              <Button onClick={addLDAPBtnClick} colorSchema="secondary" isDisabled={!isAllowed}>
                 Manage
               </Button>
             )}
@@ -109,31 +97,33 @@ export const OrgLDAPSection = (): JSX.Element => {
           <div className="mb-2 flex items-center justify-between">
             <h2 className="text-md text-mineshaft-100">Enable LDAP</h2>
             <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Ldap}>
-                {(isAllowed) => (
-                  <Switch
-                    id="enable-saml-sso"
-                    onCheckedChange={(value) => handleLDAPToggle(value)}
-                    isChecked={data ? data.isActive : false}
-                    isDisabled={!isAllowed}
-                  >
-                    Enable
-                  </Switch>
-                )}
-              </OrgPermissionCan>
+              {(isAllowed) => (
+                <Switch
+                  id="enable-saml-sso"
+                  onCheckedChange={(value) => handleLDAPToggle(value)}
+                  isChecked={data ? data.isActive : false}
+                  isDisabled={!isAllowed}
+                >
+                  Enable
+                </Switch>
+              )}
+            </OrgPermissionCan>
           </div>
-          <p className="text-sm text-mineshaft-300">Allow members to authenticate into Infisical with LDAP</p>
+          <p className="text-sm text-mineshaft-300">
+            Allow members to authenticate into Infisical with LDAP
+          </p>
         </div>
       )}
-        <LDAPModal
-          popUp={popUp}
-          handlePopUpClose={handlePopUpClose}
-          handlePopUpToggle={handlePopUpToggle}
-        />
-        <UpgradePlanModal
-            isOpen={popUp.upgradePlan.isOpen}
-            onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
-            text="You can use LDAP authentication if you switch to Infisical's Enterprise plan."
-        />
+      <LDAPModal
+        popUp={popUp}
+        handlePopUpClose={handlePopUpClose}
+        handlePopUpToggle={handlePopUpToggle}
+      />
+      <UpgradePlanModal
+        isOpen={popUp.upgradePlan.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+        text="You can use LDAP authentication if you switch to Infisical's Enterprise plan."
+      />
     </>
   );
-};
\ No newline at end of file
+};
diff --git a/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgSCIMSection.tsx b/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgSCIMSection.tsx
index f599bc07a..a606507a8 100644
--- a/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgSCIMSection.tsx
+++ b/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgSCIMSection.tsx
@@ -1,117 +1,116 @@
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import { OrgPermissionCan } from "@app/components/permissions";
-import { 
-    Button,
-    Switch,
-    UpgradePlanModal
-} from "@app/components/v2";
+import { Button, Switch, UpgradePlanModal } from "@app/components/v2";
 import {
   OrgPermissionActions,
   OrgPermissionSubjects,
   useOrganization,
-  useSubscription} from "@app/context";
+  useSubscription
+} from "@app/context";
 import { useUpdateOrg } from "@app/hooks/api";
 import { usePopUp } from "@app/hooks/usePopUp";
 
 import { ScimTokenModal } from "./ScimTokenModal";
 
 export const OrgScimSection = () => {
-    const { createNotification } = useNotificationContext();
-    const { currentOrg } = useOrganization();
-    const { subscription } = useSubscription();
-    const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp([
-        "scimToken",
-        "deleteScimToken",
-        "upgradePlan"
-    ] as const);
-    
-    const { mutateAsync } = useUpdateOrg();
-    
-    const addScimTokenBtnClick = () => {
-        if (subscription?.scim) {
-            handlePopUpOpen("scimToken");
-        } else {
-            handlePopUpOpen("upgradePlan");
-        }
-    }
-    
-    const handleEnableSCIMToggle = async (value: boolean) => {
-        try {
-            if (!currentOrg?.id) return;
-            if (!subscription?.scim) {
-                handlePopUpOpen("upgradePlan");
-                return;
-            }
-            
-            await mutateAsync({
-                orgId: currentOrg?.id,
-                scimEnabled: value
-            });
+  const { createNotification } = useNotificationContext();
+  const { currentOrg } = useOrganization();
+  const { subscription } = useSubscription();
+  const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp([
+    "scimToken",
+    "deleteScimToken",
+    "upgradePlan"
+  ] as const);
 
-            createNotification({
-                text: `Successfully ${value ? "enabled" : "disabled"} SCIM provisioning`,
-                type: "success"
-            });
-        } catch (err) {
-            createNotification({
-                text: (err as { response: { data: { message: string; }}}).response.data.message,
-                type: "error"
-            });
-        }
+  const { mutateAsync } = useUpdateOrg();
+
+  const addScimTokenBtnClick = () => {
+    if (subscription?.scim) {
+      handlePopUpOpen("scimToken");
+    } else {
+      handlePopUpOpen("upgradePlan");
     }
-    
-    return (
-        <>
-            <hr className="border-mineshaft-600" />
-            <div className="py-4">
-                <div className="mb-2 flex justify-between items-center">
-                    <h2 className="text-md text-mineshaft-100">SCIM</h2>
-                    <OrgPermissionCan I={OrgPermissionActions.Read} a={OrgPermissionSubjects.Scim}>
-                    {(isAllowed) => (
-                        <Button
-                            onClick={addScimTokenBtnClick}
-                            colorSchema="secondary"
-                            isDisabled={!isAllowed}
-                        >
-                            Manage
-                        </Button>
-                    )}
-                </OrgPermissionCan>
-                </div>
-                <p className="text-sm text-mineshaft-300">Manage SCIM configuration</p>
-            </div>
-            <div className="py-4">
-                <div className="mb-2 flex justify-between items-center">
-                    <h2 className="text-md text-mineshaft-100">Enable SCIM</h2>
-                    <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Scim}>
-                        {(isAllowed) => (
-                            <Switch
-                                id="enable-scim"
-                                onCheckedChange={(value) => {
-                                    if (subscription?.scim) {
-                                        handleEnableSCIMToggle(value)
-                                    } else {
-                                        handlePopUpOpen("upgradePlan");
-                                    }
-                                }}
-                                isChecked={currentOrg?.scimEnabled ?? false}
-                                isDisabled={!isAllowed}
-                             />
-                        )}
-                    </OrgPermissionCan>
-                </div>
-                <p className="text-sm text-mineshaft-300">Allow member provisioning/deprovisioning with SCIM</p>
-            </div>
-            <ScimTokenModal 
-                popUp={popUp}
-                handlePopUpOpen={handlePopUpOpen}
-                handlePopUpToggle={handlePopUpToggle}
-            />
-            <UpgradePlanModal
-                isOpen={popUp.upgradePlan.isOpen}
-                onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
-                text="You can use SCIM Provisioning if you switch to Infisical's Enterprise plan."
-            />
-        </>
-    );
-}
\ No newline at end of file
+  };
+
+  const handleEnableSCIMToggle = async (value: boolean) => {
+    try {
+      if (!currentOrg?.id) return;
+      if (!subscription?.scim) {
+        handlePopUpOpen("upgradePlan");
+        return;
+      }
+
+      await mutateAsync({
+        orgId: currentOrg?.id,
+        scimEnabled: value
+      });
+
+      createNotification({
+        text: `Successfully ${value ? "enabled" : "disabled"} SCIM provisioning`,
+        type: "success"
+      });
+    } catch (err) {
+      createNotification({
+        text: (err as { response: { data: { message: string } } }).response.data.message,
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <>
+      <hr className="border-mineshaft-600" />
+      <div className="py-4">
+        <div className="mb-2 flex items-center justify-between">
+          <h2 className="text-md text-mineshaft-100">SCIM</h2>
+          <OrgPermissionCan I={OrgPermissionActions.Read} a={OrgPermissionSubjects.Scim}>
+            {(isAllowed) => (
+              <Button
+                onClick={addScimTokenBtnClick}
+                colorSchema="secondary"
+                isDisabled={!isAllowed}
+              >
+                Manage
+              </Button>
+            )}
+          </OrgPermissionCan>
+        </div>
+        <p className="text-sm text-mineshaft-300">Manage SCIM configuration</p>
+      </div>
+      <div className="py-4">
+        <div className="mb-2 flex items-center justify-between">
+          <h2 className="text-md text-mineshaft-100">Enable SCIM</h2>
+          <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Scim}>
+            {(isAllowed) => (
+              <Switch
+                id="enable-scim"
+                onCheckedChange={(value) => {
+                  if (subscription?.scim) {
+                    handleEnableSCIMToggle(value);
+                  } else {
+                    handlePopUpOpen("upgradePlan");
+                  }
+                }}
+                isChecked={currentOrg?.scimEnabled ?? false}
+                isDisabled={!isAllowed}
+              />
+            )}
+          </OrgPermissionCan>
+        </div>
+        <p className="text-sm text-mineshaft-300">
+          Allow member provisioning/deprovisioning with SCIM
+        </p>
+      </div>
+      <ScimTokenModal
+        popUp={popUp}
+        handlePopUpOpen={handlePopUpOpen}
+        handlePopUpToggle={handlePopUpToggle}
+      />
+      <UpgradePlanModal
+        isOpen={popUp.upgradePlan.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+        text="You can use SCIM Provisioning if you switch to Infisical's Enterprise plan."
+      />
+    </>
+  );
+};
diff --git a/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgSSOSection.tsx b/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgSSOSection.tsx
index 240a1db2e..54c1b76c1 100644
--- a/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgSSOSection.tsx
+++ b/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgSSOSection.tsx
@@ -28,7 +28,7 @@ export const OrgSSOSection = (): JSX.Element => {
   const handleSamlSSOToggle = async (value: boolean) => {
     try {
       if (!currentOrg?.id) return;
-      
+
       if (!subscription?.samlSSO) {
         handlePopUpOpen("upgradePlan");
         return;
@@ -86,11 +86,7 @@ export const OrgSSOSection = (): JSX.Element => {
           {!isLoading && (
             <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Sso}>
               {(isAllowed) => (
-                <Button
-                  onClick={addSSOBtnClick}
-                  colorSchema="secondary"
-                  isDisabled={!isAllowed}
-                >
+                <Button onClick={addSSOBtnClick} colorSchema="secondary" isDisabled={!isAllowed}>
                   Manage
                 </Button>
               )}
@@ -98,35 +94,37 @@ export const OrgSSOSection = (): JSX.Element => {
           )}
         </div>
         <p className="text-sm text-mineshaft-300">Manage SAML authentication configuration</p>
-        </div>
-        <div className="py-4">
-          <div className="mb-2 flex items-center justify-between">
-            <h2 className="text-md text-mineshaft-100">Enable SAML</h2>
-            {!isLoading && (
-              <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Sso}>
+      </div>
+      <div className="py-4">
+        <div className="mb-2 flex items-center justify-between">
+          <h2 className="text-md text-mineshaft-100">Enable SAML</h2>
+          {!isLoading && (
+            <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Sso}>
               {(isAllowed) => (
                 <Switch
                   id="enable-saml-sso"
                   onCheckedChange={(value) => handleSamlSSOToggle(value)}
                   isChecked={data ? data.isActive : false}
                   isDisabled={!isAllowed}
-                 />
+                />
               )}
             </OrgPermissionCan>
-            )}
-          </div>
-          <p className="text-sm text-mineshaft-300">Allow members to authenticate into Infisical with SAML</p>
+          )}
         </div>
-        <SSOModal
-          popUp={popUp}
-          handlePopUpClose={handlePopUpClose}
-          handlePopUpToggle={handlePopUpToggle}
-        />
-        <UpgradePlanModal
-          isOpen={popUp.upgradePlan.isOpen}
-          onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
-          text="You can use SAML SSO if you switch to Infisical's Pro plan."
-        />
+        <p className="text-sm text-mineshaft-300">
+          Allow members to authenticate into Infisical with SAML
+        </p>
+      </div>
+      <SSOModal
+        popUp={popUp}
+        handlePopUpClose={handlePopUpClose}
+        handlePopUpToggle={handlePopUpToggle}
+      />
+      <UpgradePlanModal
+        isOpen={popUp.upgradePlan.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+        text="You can use SAML SSO if you switch to Infisical's Pro plan."
+      />
     </>
   );
 };
diff --git a/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/ScimTokenModal.tsx b/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/ScimTokenModal.tsx
index e7d4b1063..caa081d47 100644
--- a/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/ScimTokenModal.tsx
+++ b/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/ScimTokenModal.tsx
@@ -28,10 +28,7 @@ import {
 } from "@app/components/v2";
 import { useOrganization } from "@app/context";
 import { useToggle } from "@app/hooks";
-import {
-    useCreateScimToken,
-    useDeleteScimToken,
-    useGetScimTokens} from "@app/hooks/api";
+import { useCreateScimToken, useDeleteScimToken, useGetScimTokens } from "@app/hooks/api";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 const schema = yup.object({
@@ -46,53 +43,47 @@ type Props = {
   handlePopUpOpen: (
     popUpName: keyof UsePopUpState<["deleteScimToken"]>,
     data?: {
-        scimTokenId: string;
+      scimTokenId: string;
     }
   ) => void;
   handlePopUpToggle: (
-    popUpName: keyof UsePopUpState<
-      ["scimToken", "deleteScimToken"]
-    >,
+    popUpName: keyof UsePopUpState<["scimToken", "deleteScimToken"]>,
     state?: boolean
   ) => void;
 };
 
-export const ScimTokenModal = ({
-  popUp,
-  handlePopUpOpen,
-  handlePopUpToggle
-}: Props) => {
-    const { currentOrg } = useOrganization();
-    const { t } = useTranslation();
-    const { createNotification } = useNotificationContext();
-    const [token, setToken] = useState("");
+export const ScimTokenModal = ({ popUp, handlePopUpOpen, handlePopUpToggle }: Props) => {
+  const { currentOrg } = useOrganization();
+  const { t } = useTranslation();
+  const { createNotification } = useNotificationContext();
+  const [token, setToken] = useState("");
 
-    const [isScimUrlCopied, setIsScimUrlCopied] = useToggle(false);
-    const [isScimTokenCopied, setIsScimTokenCopied] = useToggle(false);
-    
-    const { data, isLoading } = useGetScimTokens(currentOrg?.id ?? "");
-    const { mutateAsync: createScimTokenMutateAsync  } = useCreateScimToken();
-    const { mutateAsync: deleteScimTokenMutateAsync  } = useDeleteScimToken();
+  const [isScimUrlCopied, setIsScimUrlCopied] = useToggle(false);
+  const [isScimTokenCopied, setIsScimTokenCopied] = useToggle(false);
 
-    const {
-        control,
-        handleSubmit,
-        reset,
-        formState: { isSubmitting }
-    } = useForm<FormData>({
-        resolver: yupResolver(schema),
-        defaultValues: {
-            description: "",
-            ttlDays: "365"
-        }
-    });
+  const { data, isLoading } = useGetScimTokens(currentOrg?.id ?? "");
+  const { mutateAsync: createScimTokenMutateAsync } = useCreateScimToken();
+  const { mutateAsync: deleteScimTokenMutateAsync } = useDeleteScimToken();
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { isSubmitting }
+  } = useForm<FormData>({
+    resolver: yupResolver(schema),
+    defaultValues: {
+      description: "",
+      ttlDays: "365"
+    }
+  });
 
   useEffect(() => {
     let timer: NodeJS.Timeout;
     if (isScimUrlCopied) {
       timer = setTimeout(() => setIsScimUrlCopied.off(), 2000);
     }
-    
+
     if (isScimTokenCopied) {
       timer = setTimeout(() => setIsScimTokenCopied.off(), 2000);
     }
@@ -102,36 +93,36 @@ export const ScimTokenModal = ({
 
   const onFormSubmit = async ({ description, ttlDays }: FormData) => {
     try {
-        if (!currentOrg?.id) return;
-      
-        const { scimToken } = await createScimTokenMutateAsync({
-          organizationId: currentOrg.id,
-          description,
-          ttlDays: Number(ttlDays)
-        });
-        
-        setToken(scimToken);
+      if (!currentOrg?.id) return;
 
-        createNotification({
-            text: "Successfully created SCIM token",
-            type: "success"
-        });
+      const { scimToken } = await createScimTokenMutateAsync({
+        organizationId: currentOrg.id,
+        description,
+        ttlDays: Number(ttlDays)
+      });
+
+      setToken(scimToken);
+
+      createNotification({
+        text: "Successfully created SCIM token",
+        type: "success"
+      });
     } catch (err) {
-        console.error(err);
-        createNotification({
-            text: "Failed to create SCIM token",
-            type: "error"
-        });
+      console.error(err);
+      createNotification({
+        text: "Failed to create SCIM token",
+        type: "error"
+      });
     }
   };
 
   const onDeleteScimTokenSubmit = async (scimTokenId: string) => {
     try {
       if (!currentOrg?.id) return;
-      
+
       await deleteScimTokenMutateAsync({
-          organizationId: currentOrg.id,
-          scimTokenId
+        organizationId: currentOrg.id,
+        scimTokenId
       });
 
       handlePopUpToggle("deleteScimToken", false);
@@ -170,8 +161,8 @@ export const ScimTokenModal = ({
             colorSchema="secondary"
             className="group relative"
             onClick={() => {
-                navigator.clipboard.writeText(scimUrl);
-                setIsScimUrlCopied.on();
+              navigator.clipboard.writeText(scimUrl);
+              setIsScimUrlCopied.on();
             }}
           >
             <FontAwesomeIcon icon={isScimUrlCopied ? faCheck : faCopy} />
@@ -203,8 +194,8 @@ export const ScimTokenModal = ({
                 colorSchema="secondary"
                 className="group relative"
                 onClick={() => {
-                    navigator.clipboard.writeText(token);
-                    setIsScimTokenCopied.on();
+                  navigator.clipboard.writeText(token);
+                  setIsScimTokenCopied.on();
                 }}
               >
                 <FontAwesomeIcon icon={isScimTokenCopied ? faCheck : faCopy} />
@@ -230,31 +221,27 @@ export const ScimTokenModal = ({
                 </FormControl>
               )}
             />
-              <Controller
-                control={control}
-                defaultValue="365"
-                name="ttlDays"
-                render={({ field, fieldState: { error } }) => (
-                  <FormControl
-                    label="TTL (days)"
-                    isError={Boolean(error)}
-                    errorText={error?.message}
-                  >
-                    <div className="flex">
-                        <Input {...field} placeholder="0" type="number" min="0" step="1" />
-                        <Button
-                            className="ml-4"
-                            size="sm"
-                            type="submit"
-                            isLoading={isSubmitting}
-                            isDisabled={isSubmitting}
-                        >
-                            Create
-                        </Button>
-                    </div>
-                  </FormControl>
-                )}
-              />
+            <Controller
+              control={control}
+              defaultValue="365"
+              name="ttlDays"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl label="TTL (days)" isError={Boolean(error)} errorText={error?.message}>
+                  <div className="flex">
+                    <Input {...field} placeholder="0" type="number" min="0" step="1" />
+                    <Button
+                      className="ml-4"
+                      size="sm"
+                      type="submit"
+                      isLoading={isSubmitting}
+                      isDisabled={isSubmitting}
+                    >
+                      Create
+                    </Button>
+                  </div>
+                </FormControl>
+              )}
+            />
           </form>
         )}
         <h2 className="mb-4">SCIM Tokens</h2>
@@ -273,53 +260,42 @@ export const ScimTokenModal = ({
               {!isLoading &&
                 data &&
                 data.length > 0 &&
-                data.map(
-                  ({
-                    id,
-                    description,
-                    ttlDays,
-                    createdAt
-                  }) => {
-                    
-                    let expiresAt;
-                    if (ttlDays > 0) {
-                      expiresAt = new Date(new Date(createdAt).getTime() + ttlDays * 86400 * 1000);
-                    }
-
-                    return (
-                      <Tr className="h-10 items-center" key={`mi-client-secret-${id}`}>
-                        <Td>{description === "" ? "-" : description}</Td>
-                        <Td>{expiresAt ? format(expiresAt, "yyyy-MM-dd HH:mm:ss") : "-"}</Td>
-                        <Td>{format(new Date(createdAt), "yyyy-MM-dd HH:mm:ss")}</Td>
-                        <Td>
-                          <IconButton
-                            onClick={() => {
-                              handlePopUpOpen("deleteScimToken", {
-                                scimTokenId: id
-                              });
-                            }}
-                            size="lg"
-                            colorSchema="primary"
-                            variant="plain"
-                            ariaLabel="update"
-                          >
-                            <FontAwesomeIcon icon={faXmark} />
-                          </IconButton>
-                        </Td>
-                      </Tr>
-                    );
+                data.map(({ id, description, ttlDays, createdAt }) => {
+                  let expiresAt;
+                  if (ttlDays > 0) {
+                    expiresAt = new Date(new Date(createdAt).getTime() + ttlDays * 86400 * 1000);
                   }
-                )}
-                {!isLoading && data && data?.length === 0 && (
-                    <Tr>
-                        <Td colSpan={4}>
-                            <EmptyState
-                            title="No SCIM tokens have been created yet"
-                            icon={faKey}
-                            />
-                        </Td>
+
+                  return (
+                    <Tr className="h-10 items-center" key={`mi-client-secret-${id}`}>
+                      <Td>{description === "" ? "-" : description}</Td>
+                      <Td>{expiresAt ? format(expiresAt, "yyyy-MM-dd HH:mm:ss") : "-"}</Td>
+                      <Td>{format(new Date(createdAt), "yyyy-MM-dd HH:mm:ss")}</Td>
+                      <Td>
+                        <IconButton
+                          onClick={() => {
+                            handlePopUpOpen("deleteScimToken", {
+                              scimTokenId: id
+                            });
+                          }}
+                          size="lg"
+                          colorSchema="primary"
+                          variant="plain"
+                          ariaLabel="update"
+                        >
+                          <FontAwesomeIcon icon={faXmark} />
+                        </IconButton>
+                      </Td>
                     </Tr>
-                )}
+                  );
+                })}
+              {!isLoading && data && data?.length === 0 && (
+                <Tr>
+                  <Td colSpan={4}>
+                    <EmptyState title="No SCIM tokens have been created yet" icon={faKey} />
+                  </Td>
+                </Tr>
+              )}
             </TBody>
           </Table>
         </TableContainer>
@@ -329,9 +305,8 @@ export const ScimTokenModal = ({
           onChange={(isOpen) => handlePopUpToggle("scimToken", isOpen)}
           deleteKey="confirm"
           onDeleteApproved={() => {
-        
             const deleteScimTokenData = popUp?.deleteScimToken?.data as {
-                scimTokenId: string;
+              scimTokenId: string;
             };
 
             return onDeleteScimTokenSubmit(deleteScimTokenData.scimTokenId);
diff --git a/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/index.tsx b/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/index.tsx
index 7e5bbb9bb..537be9831 100644
--- a/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/index.tsx
+++ b/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/index.tsx
@@ -1 +1 @@
-export { OrgAuthTab } from "./OrgAuthTab";
\ No newline at end of file
+export { OrgAuthTab } from "./OrgAuthTab";
diff --git a/frontend/src/views/Settings/OrgSettingsPage/components/OrgDeleteSection/OrgDeleteSection.tsx b/frontend/src/views/Settings/OrgSettingsPage/components/OrgDeleteSection/OrgDeleteSection.tsx
index 6c18e9247..e2598413c 100644
--- a/frontend/src/views/Settings/OrgSettingsPage/components/OrgDeleteSection/OrgDeleteSection.tsx
+++ b/frontend/src/views/Settings/OrgSettingsPage/components/OrgDeleteSection/OrgDeleteSection.tsx
@@ -48,7 +48,7 @@ export const OrgDeleteSection = () => {
     <>
       <hr className="border-mineshaft-600" />
       <div className="py-4">
-        <p className="mb-4 text-md text-mineshaft-100">Danger Zone</p>
+        <p className="text-md mb-4 text-mineshaft-100">Danger Zone</p>
         <Button
           isLoading={isLoading}
           colorSchema="danger"
diff --git a/frontend/src/views/Settings/OrgSettingsPage/components/OrgDeleteSection/index.tsx b/frontend/src/views/Settings/OrgSettingsPage/components/OrgDeleteSection/index.tsx
index b55aa296e..3ab22f286 100644
--- a/frontend/src/views/Settings/OrgSettingsPage/components/OrgDeleteSection/index.tsx
+++ b/frontend/src/views/Settings/OrgSettingsPage/components/OrgDeleteSection/index.tsx
@@ -1 +1 @@
-export { OrgDeleteSection } from "./OrgDeleteSection";
\ No newline at end of file
+export { OrgDeleteSection } from "./OrgDeleteSection";
diff --git a/frontend/src/views/Settings/OrgSettingsPage/components/OrgGeneralTab/OrgGeneralTab.tsx b/frontend/src/views/Settings/OrgSettingsPage/components/OrgGeneralTab/OrgGeneralTab.tsx
index e51272ebf..917d08be9 100644
--- a/frontend/src/views/Settings/OrgSettingsPage/components/OrgGeneralTab/OrgGeneralTab.tsx
+++ b/frontend/src/views/Settings/OrgSettingsPage/components/OrgGeneralTab/OrgGeneralTab.tsx
@@ -13,4 +13,4 @@ export const OrgGeneralTab = () => {
       {membership && membership.role === "admin" && <OrgDeleteSection />}
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/frontend/src/views/Settings/OrgSettingsPage/components/OrgGeneralTab/index.tsx b/frontend/src/views/Settings/OrgSettingsPage/components/OrgGeneralTab/index.tsx
index eca93ecb2..46db8314d 100644
--- a/frontend/src/views/Settings/OrgSettingsPage/components/OrgGeneralTab/index.tsx
+++ b/frontend/src/views/Settings/OrgSettingsPage/components/OrgGeneralTab/index.tsx
@@ -1 +1 @@
-export { OrgGeneralTab } from "./OrgGeneralTab";
\ No newline at end of file
+export { OrgGeneralTab } from "./OrgGeneralTab";
diff --git a/frontend/src/views/Settings/OrgSettingsPage/components/OrgIncidentContactsSection/index.tsx b/frontend/src/views/Settings/OrgSettingsPage/components/OrgIncidentContactsSection/index.tsx
index 33511f319..ceaf7269e 100644
--- a/frontend/src/views/Settings/OrgSettingsPage/components/OrgIncidentContactsSection/index.tsx
+++ b/frontend/src/views/Settings/OrgSettingsPage/components/OrgIncidentContactsSection/index.tsx
@@ -1,2 +1,2 @@
-export { AddOrgIncidentContactModal } from "./AddOrgIncidentContactModal"
-export { OrgIncidentContactsSection } from "./OrgIncidentContactsSection";
\ No newline at end of file
+export { AddOrgIncidentContactModal } from "./AddOrgIncidentContactModal";
+export { OrgIncidentContactsSection } from "./OrgIncidentContactsSection";
diff --git a/frontend/src/views/Settings/OrgSettingsPage/components/OrgNameChangeSection/OrgNameChangeSection.tsx b/frontend/src/views/Settings/OrgSettingsPage/components/OrgNameChangeSection/OrgNameChangeSection.tsx
index 63e5fe40d..1c4db741f 100644
--- a/frontend/src/views/Settings/OrgSettingsPage/components/OrgNameChangeSection/OrgNameChangeSection.tsx
+++ b/frontend/src/views/Settings/OrgSettingsPage/components/OrgNameChangeSection/OrgNameChangeSection.tsx
@@ -10,12 +10,16 @@ import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@a
 import { useUpdateOrg } from "@app/hooks/api";
 
 const formSchema = yup.object({
-  name: yup.string().required().label("Organization Name").max(64, "Too long, maximum length is 64 characters"),
+  name: yup
+    .string()
+    .required()
+    .label("Organization Name")
+    .max(64, "Too long, maximum length is 64 characters"),
   slug: yup
-      .string()
-      .matches(/^[a-zA-Z0-9-]+$/, "Name must only contain alphanumeric characters or hyphens")
-      .required()
-      .label("Organization Slug")
+    .string()
+    .matches(/^[a-zA-Z0-9-]+$/, "Name must only contain alphanumeric characters or hyphens")
+    .required()
+    .label("Organization Slug")
 });
 
 type FormData = yup.InferType<typeof formSchema>;
@@ -30,7 +34,7 @@ export const OrgNameChangeSection = (): JSX.Element => {
 
   useEffect(() => {
     if (currentOrg) {
-      reset({ 
+      reset({
         name: currentOrg.name,
         slug: currentOrg.slug
       });
@@ -41,12 +45,12 @@ export const OrgNameChangeSection = (): JSX.Element => {
     try {
       if (!currentOrg?.id) return;
 
-      await mutateAsync({ 
-        orgId: currentOrg?.id, 
+      await mutateAsync({
+        orgId: currentOrg?.id,
         name,
         slug
       });
-      
+
       createNotification({
         text: "Successfully updated organization details",
         type: "success"
@@ -63,7 +67,7 @@ export const OrgNameChangeSection = (): JSX.Element => {
   return (
     <form onSubmit={handleSubmit(onFormSubmit)} className="py-4">
       <div className="">
-        <h2 className="mb-2 text-md text-mineshaft-100">Organization Name</h2>
+        <h2 className="text-md mb-2 text-mineshaft-100">Organization Name</h2>
         <Controller
           defaultValue=""
           render={({ field, fieldState: { error } }) => (
@@ -76,7 +80,7 @@ export const OrgNameChangeSection = (): JSX.Element => {
         />
       </div>
       <div className="py-4">
-        <h2 className="mb-2 text-md text-mineshaft-100">Organization Slug</h2>
+        <h2 className="text-md mb-2 text-mineshaft-100">Organization Slug</h2>
         <Controller
           defaultValue=""
           render={({ field, fieldState: { error } }) => (
@@ -103,4 +107,4 @@ export const OrgNameChangeSection = (): JSX.Element => {
       </OrgPermissionCan>
     </form>
   );
-};
\ No newline at end of file
+};
diff --git a/frontend/src/views/Settings/OrgSettingsPage/components/OrgTabGroup/OrgTabGroup.tsx b/frontend/src/views/Settings/OrgSettingsPage/components/OrgTabGroup/OrgTabGroup.tsx
index d4c01d0ef..de6bf0453 100644
--- a/frontend/src/views/Settings/OrgSettingsPage/components/OrgTabGroup/OrgTabGroup.tsx
+++ b/frontend/src/views/Settings/OrgSettingsPage/components/OrgTabGroup/OrgTabGroup.tsx
@@ -11,13 +11,13 @@ const tabs = [
 export const OrgTabGroup = () => {
   return (
     <Tab.Group>
-      <Tab.List className="mb-6 border-b-2 border-mineshaft-800 w-full">
+      <Tab.List className="mb-6 w-full border-b-2 border-mineshaft-800">
         {tabs.map((tab) => (
           <Tab as={Fragment} key={tab.key}>
             {({ selected }) => (
               <button
                 type="button"
-                className={`w-30 py-2 mx-2 mr-4 font-medium text-sm outline-none ${
+                className={`w-30 mx-2 mr-4 py-2 text-sm font-medium outline-none ${
                   selected ? "border-b border-white text-white" : "text-mineshaft-400"
                 }`}
               >
diff --git a/frontend/src/views/Settings/OrgSettingsPage/components/OrgTabGroup/index.tsx b/frontend/src/views/Settings/OrgSettingsPage/components/OrgTabGroup/index.tsx
index d8178d911..648613642 100644
--- a/frontend/src/views/Settings/OrgSettingsPage/components/OrgTabGroup/index.tsx
+++ b/frontend/src/views/Settings/OrgSettingsPage/components/OrgTabGroup/index.tsx
@@ -1 +1 @@
-export { OrgTabGroup } from "./OrgTabGroup";
\ No newline at end of file
+export { OrgTabGroup } from "./OrgTabGroup";
diff --git a/frontend/src/views/Settings/OrgSettingsPage/components/index.tsx b/frontend/src/views/Settings/OrgSettingsPage/components/index.tsx
index d8178d911..648613642 100644
--- a/frontend/src/views/Settings/OrgSettingsPage/components/index.tsx
+++ b/frontend/src/views/Settings/OrgSettingsPage/components/index.tsx
@@ -1 +1 @@
-export { OrgTabGroup } from "./OrgTabGroup";
\ No newline at end of file
+export { OrgTabGroup } from "./OrgTabGroup";
diff --git a/frontend/src/views/Settings/PersonalSettingsPage/APIKeySection/AddAPIKeyModal.tsx b/frontend/src/views/Settings/PersonalSettingsPage/APIKeySection/AddAPIKeyModal.tsx
index ceaf852f3..d3814f636 100644
--- a/frontend/src/views/Settings/PersonalSettingsPage/APIKeySection/AddAPIKeyModal.tsx
+++ b/frontend/src/views/Settings/PersonalSettingsPage/APIKeySection/AddAPIKeyModal.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { Controller, useForm } from "react-hook-form"; 
+import { Controller, useForm } from "react-hook-form";
 import { faCheck, faCopy } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { yupResolver } from "@hookform/resolvers/yup";
@@ -21,25 +21,27 @@ import { useCreateAPIKey } from "@app/hooks/api";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 const expirations = [
-    { label: "1 day", value: "1d" },
-    { label: "7 days", value: "7d" },
-    { label: "1 month", value: "1mo" },
-    { label: "6 months", value: "6mo" },
-    { label: "12 months", value: "12mo" }
+  { label: "1 day", value: "1d" },
+  { label: "7 days", value: "7d" },
+  { label: "1 month", value: "1mo" },
+  { label: "6 months", value: "6mo" },
+  { label: "12 months", value: "12mo" }
 ];
 
 const expirationMapping: { [key: string]: number } = {
-    "1d": 86400,
-    "7d": 604800,
-    "1mo": 2592000,
-    "6mo": 15552000,
-    "12mo": 31104000
-}
+  "1d": 86400,
+  "7d": 604800,
+  "1mo": 2592000,
+  "6mo": 15552000,
+  "12mo": 31104000
+};
 
-const schema = yup.object({
+const schema = yup
+  .object({
     name: yup.string().required("API Key name is required"),
     expiresIn: yup.string().required("API Key expiration window is required")
-}).required();
+  })
+  .required();
 
 export type FormData = yup.InferType<typeof schema>;
 
@@ -48,154 +50,136 @@ type Props = {
   handlePopUpToggle: (popUpName: keyof UsePopUpState<["addAPIKey"]>, state?: boolean) => void;
 };
 
-export const AddAPIKeyModal = ({
-    popUp,
-    handlePopUpToggle
-}: Props) => {
-    const [newAPIKey, setNewAPIKey] = useState("");
-    const [isAPIKeyCopied, setIsAPIKeyCopied] = useToggle(false);
-    const { createNotification } = useNotificationContext();
-    const { mutateAsync, isLoading } = useCreateAPIKey();
-    
-    const {
-        control,
-        handleSubmit,
-        reset
-    } = useForm<FormData>({
-        resolver: yupResolver(schema)
-    });
+export const AddAPIKeyModal = ({ popUp, handlePopUpToggle }: Props) => {
+  const [newAPIKey, setNewAPIKey] = useState("");
+  const [isAPIKeyCopied, setIsAPIKeyCopied] = useToggle(false);
+  const { createNotification } = useNotificationContext();
+  const { mutateAsync, isLoading } = useCreateAPIKey();
 
-    useEffect(() => {
-        let timer: NodeJS.Timeout;
+  const { control, handleSubmit, reset } = useForm<FormData>({
+    resolver: yupResolver(schema)
+  });
 
-        if (isAPIKeyCopied) {
-            timer = setTimeout(() => setIsAPIKeyCopied.off(), 2000);
-        }
+  useEffect(() => {
+    let timer: NodeJS.Timeout;
 
-        return () => clearTimeout(timer);
+    if (isAPIKeyCopied) {
+      timer = setTimeout(() => setIsAPIKeyCopied.off(), 2000);
+    }
+
+    return () => clearTimeout(timer);
   }, [setIsAPIKeyCopied]);
 
-    const copyTokenToClipboard = () => {
-        navigator.clipboard.writeText(newAPIKey);
-        setIsAPIKeyCopied.on();
-    };
+  const copyTokenToClipboard = () => {
+    navigator.clipboard.writeText(newAPIKey);
+    setIsAPIKeyCopied.on();
+  };
 
-    const onFormSubmit = async ({ name, expiresIn }: FormData) => {
-        try {
-            const { apiKey } = await mutateAsync({
-                name,
-                expiresIn: expirationMapping[expiresIn]
-            });
-            
-            setNewAPIKey(apiKey);
+  const onFormSubmit = async ({ name, expiresIn }: FormData) => {
+    try {
+      const { apiKey } = await mutateAsync({
+        name,
+        expiresIn: expirationMapping[expiresIn]
+      });
 
-            createNotification({
-                text: "Successfully created API key",
-                type: "success"
-            });
-            
-            reset();
-        } catch (err) {
-            console.error(err);
-            createNotification({
-                text: "Failed to create API key",
-                type: "error"
-            });
-        }
+      setNewAPIKey(apiKey);
+
+      createNotification({
+        text: "Successfully created API key",
+        type: "success"
+      });
+
+      reset();
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to create API key",
+        type: "error"
+      });
     }
-    
-    const hasAPIKey = Boolean(newAPIKey);
-    
-    return (
-        <Modal
-            isOpen={popUp?.addAPIKey?.isOpen}
-                onOpenChange={(isOpen) => {
-                handlePopUpToggle("addAPIKey", isOpen);
-                reset();
-                setNewAPIKey("");
-            }}
-        >
-            <ModalContent title="Create API Key">
-            {!hasAPIKey ? (
-                <form onSubmit={handleSubmit(onFormSubmit)}>
-                    <Controller
-                        control={control}
-                        defaultValue=""
-                        name="name"
-                        render={({ field, fieldState: { error } }) => (
-                            <FormControl
-                                label="Name"
-                                isError={Boolean(error)}
-                                errorText={error?.message}
-                            >
-                            <Input 
-                                {...field} 
-                                placeholder="My API Key"
-                            />
-                            </FormControl>
-                        )}
-                    />
-                    <Controller
-                        control={control}
-                        name="expiresIn"
-                        defaultValue="6mo"
-                        render={({ field: { onChange, ...field }, fieldState: { error } }) => (
-                            <FormControl
-                                label="Expiration"
-                                errorText={error?.message}
-                                isError={Boolean(error)}
-                            >
-                                <Select
-                                    defaultValue={field.value}
-                                    {...field}
-                                    onValueChange={(e) => onChange(e)}
-                                    className="w-full"
-                                >
-                                    {expirations.map(({ label, value }) => (
-                                        <SelectItem value={String(value || "")} key={`api-key-expiration-${label}`}>
-                                            {label}
-                                        </SelectItem>
-                                    ))}
-                                </Select>
-                            </FormControl>
-                        )}
-                    />
-                    <div className="mt-8 flex items-center">
-                        <Button
-                            className="mr-4"
-                            size="sm"
-                            type="submit"
-                            isLoading={isLoading}
-                            isDisabled={isLoading}
-                        >
-                            Add
-                        </Button>
-                        <Button 
-                            colorSchema="secondary" 
-                            variant="plain" 
-                            onClick={() => handlePopUpToggle("addAPIKey", false)}
-                        >
-                            Cancel
-                        </Button>
-                    </div>
-                </form>
-            ) : (
-                <div className="mt-2 mb-3 mr-2 flex items-center justify-end rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
-                  <p className="mr-4 break-all">{newAPIKey}</p>
-                  <IconButton
-                    ariaLabel="copy icon"
-                    colorSchema="secondary"
-                    className="group relative"
-                    onClick={copyTokenToClipboard}
+  };
+
+  const hasAPIKey = Boolean(newAPIKey);
+
+  return (
+    <Modal
+      isOpen={popUp?.addAPIKey?.isOpen}
+      onOpenChange={(isOpen) => {
+        handlePopUpToggle("addAPIKey", isOpen);
+        reset();
+        setNewAPIKey("");
+      }}
+    >
+      <ModalContent title="Create API Key">
+        {!hasAPIKey ? (
+          <form onSubmit={handleSubmit(onFormSubmit)}>
+            <Controller
+              control={control}
+              defaultValue=""
+              name="name"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl label="Name" isError={Boolean(error)} errorText={error?.message}>
+                  <Input {...field} placeholder="My API Key" />
+                </FormControl>
+              )}
+            />
+            <Controller
+              control={control}
+              name="expiresIn"
+              defaultValue="6mo"
+              render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                <FormControl label="Expiration" errorText={error?.message} isError={Boolean(error)}>
+                  <Select
+                    defaultValue={field.value}
+                    {...field}
+                    onValueChange={(e) => onChange(e)}
+                    className="w-full"
                   >
-                    <FontAwesomeIcon icon={isAPIKeyCopied ? faCheck : faCopy} />
-                    <span className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
-                        Click to copy
-                    </span>
-                  </IconButton>
-                </div>
-            )}
-            </ModalContent>
-        </Modal> 
-    );
-}
\ No newline at end of file
+                    {expirations.map(({ label, value }) => (
+                      <SelectItem value={String(value || "")} key={`api-key-expiration-${label}`}>
+                        {label}
+                      </SelectItem>
+                    ))}
+                  </Select>
+                </FormControl>
+              )}
+            />
+            <div className="mt-8 flex items-center">
+              <Button
+                className="mr-4"
+                size="sm"
+                type="submit"
+                isLoading={isLoading}
+                isDisabled={isLoading}
+              >
+                Add
+              </Button>
+              <Button
+                colorSchema="secondary"
+                variant="plain"
+                onClick={() => handlePopUpToggle("addAPIKey", false)}
+              >
+                Cancel
+              </Button>
+            </div>
+          </form>
+        ) : (
+          <div className="mt-2 mb-3 mr-2 flex items-center justify-end rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
+            <p className="mr-4 break-all">{newAPIKey}</p>
+            <IconButton
+              ariaLabel="copy icon"
+              colorSchema="secondary"
+              className="group relative"
+              onClick={copyTokenToClipboard}
+            >
+              <FontAwesomeIcon icon={isAPIKeyCopied ? faCheck : faCopy} />
+              <span className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
+                Click to copy
+              </span>
+            </IconButton>
+          </div>
+        )}
+      </ModalContent>
+    </Modal>
+  );
+};
diff --git a/frontend/src/views/Settings/PersonalSettingsPage/APIKeySection/index.tsx b/frontend/src/views/Settings/PersonalSettingsPage/APIKeySection/index.tsx
index 912b8709a..f4bdf430e 100644
--- a/frontend/src/views/Settings/PersonalSettingsPage/APIKeySection/index.tsx
+++ b/frontend/src/views/Settings/PersonalSettingsPage/APIKeySection/index.tsx
@@ -1,2 +1 @@
-
-export { APIKeySection } from "./APIKeySection";
\ No newline at end of file
+export { APIKeySection } from "./APIKeySection";
diff --git a/frontend/src/views/Settings/PersonalSettingsPage/AuthMethodSection/index.tsx b/frontend/src/views/Settings/PersonalSettingsPage/AuthMethodSection/index.tsx
index 12540cbb4..3f6ad3da6 100644
--- a/frontend/src/views/Settings/PersonalSettingsPage/AuthMethodSection/index.tsx
+++ b/frontend/src/views/Settings/PersonalSettingsPage/AuthMethodSection/index.tsx
@@ -1 +1 @@
-export { AuthMethodSection } from "./AuthMethodSection";
\ No newline at end of file
+export { AuthMethodSection } from "./AuthMethodSection";
diff --git a/frontend/src/views/Settings/PersonalSettingsPage/ChangeLanguageSection/ChangeLanguageSection.tsx b/frontend/src/views/Settings/PersonalSettingsPage/ChangeLanguageSection/ChangeLanguageSection.tsx
index c64050c41..f962f6c75 100644
--- a/frontend/src/views/Settings/PersonalSettingsPage/ChangeLanguageSection/ChangeLanguageSection.tsx
+++ b/frontend/src/views/Settings/PersonalSettingsPage/ChangeLanguageSection/ChangeLanguageSection.tsx
@@ -4,29 +4,29 @@ import { useRouter } from "next/router";
 import ListBox from "@app/components/basic/Listbox";
 
 export const ChangeLanguageSection = () => {
-    const { t, i18n } = useTranslation();
-    const router = useRouter();
-    const lang = router.locale ?? "en";
+  const { t, i18n } = useTranslation();
+  const router = useRouter();
+  const lang = router.locale ?? "en";
 
-    const setLanguage = async (to: string) => {
-        router.push(router.asPath, router.asPath, { locale: to });
-        localStorage.setItem("lang", to);
-        i18n.changeLanguage(to);
-    };
+  const setLanguage = async (to: string) => {
+    router.push(router.asPath, router.asPath, { locale: to });
+    localStorage.setItem("lang", to);
+    i18n.changeLanguage(to);
+  };
 
-    return (
-        <div className="p-4 bg-mineshaft-900 mb-6 rounded-lg border border-mineshaft-600">
-            <p className="text-xl font-semibold text-mineshaft-100 mb-8">
-                {t("settings.personal.change-language")}
-            </p>
-            <div className="w-28">
-                <ListBox
-                    isSelected={lang}
-                    onChange={setLanguage}
-                    data={["en", "ko", "fr", "es"]}
-                    text={`${t("common.language")}: `}
-                />
-            </div>
-        </div>
-    );
-}
\ No newline at end of file
+  return (
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <p className="mb-8 text-xl font-semibold text-mineshaft-100">
+        {t("settings.personal.change-language")}
+      </p>
+      <div className="w-28">
+        <ListBox
+          isSelected={lang}
+          onChange={setLanguage}
+          data={["en", "ko", "fr", "es"]}
+          text={`${t("common.language")}: `}
+        />
+      </div>
+    </div>
+  );
+};
diff --git a/frontend/src/views/Settings/PersonalSettingsPage/ChangeLanguageSection/index.tsx b/frontend/src/views/Settings/PersonalSettingsPage/ChangeLanguageSection/index.tsx
index 42fa6d01a..ce1ecad6e 100644
--- a/frontend/src/views/Settings/PersonalSettingsPage/ChangeLanguageSection/index.tsx
+++ b/frontend/src/views/Settings/PersonalSettingsPage/ChangeLanguageSection/index.tsx
@@ -1 +1 @@
-export { ChangeLanguageSection } from "./ChangeLanguageSection";
\ No newline at end of file
+export { ChangeLanguageSection } from "./ChangeLanguageSection";
diff --git a/frontend/src/views/Settings/PersonalSettingsPage/ChangePasswordSection/index.tsx b/frontend/src/views/Settings/PersonalSettingsPage/ChangePasswordSection/index.tsx
index 9fce256cf..c2d2dfd80 100644
--- a/frontend/src/views/Settings/PersonalSettingsPage/ChangePasswordSection/index.tsx
+++ b/frontend/src/views/Settings/PersonalSettingsPage/ChangePasswordSection/index.tsx
@@ -1 +1 @@
-export { ChangePasswordSection } from "./ChangePasswordSection";
\ No newline at end of file
+export { ChangePasswordSection } from "./ChangePasswordSection";
diff --git a/frontend/src/views/Settings/PersonalSettingsPage/DeleteAccountSection/DeleteAccountSection.tsx b/frontend/src/views/Settings/PersonalSettingsPage/DeleteAccountSection/DeleteAccountSection.tsx
index ea7e154e9..3a2e947ae 100644
--- a/frontend/src/views/Settings/PersonalSettingsPage/DeleteAccountSection/DeleteAccountSection.tsx
+++ b/frontend/src/views/Settings/PersonalSettingsPage/DeleteAccountSection/DeleteAccountSection.tsx
@@ -1,64 +1,59 @@
 import { useRouter } from "next/router";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
-import {
-    Button,
-    DeleteActionModal
-} from "@app/components/v2";
+import { Button, DeleteActionModal } from "@app/components/v2";
 import { useDeleteUser } from "@app/hooks/api";
 import { usePopUp } from "@app/hooks/usePopUp";
 
 export const DeleteAccountSection = () => {
-    const router = useRouter();
-    const { createNotification } = useNotificationContext();
-    const { popUp, handlePopUpOpen, handlePopUpClose,  handlePopUpToggle } = usePopUp([
-        "deleteAccount"
-    ] as const);
+  const router = useRouter();
+  const { createNotification } = useNotificationContext();
+  const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+    "deleteAccount"
+  ] as const);
 
-    const { mutateAsync: deleteUserMutateAsync, isLoading } = useDeleteUser();
+  const { mutateAsync: deleteUserMutateAsync, isLoading } = useDeleteUser();
 
-    const handleDeleteAccountSubmit = async () => {
-        try {
-            await deleteUserMutateAsync();
-            
-            createNotification({
-                text: "Successfully deleted account",
-                type: "success"
-            });
+  const handleDeleteAccountSubmit = async () => {
+    try {
+      await deleteUserMutateAsync();
 
-            router.push("/login");
-            handlePopUpClose("deleteAccount");
-        } catch (err) {
-            console.error(err);
-            createNotification({
-                text: "Failed to delete account",
-                type: "error"
-            });
-        }
+      createNotification({
+        text: "Successfully deleted account",
+        type: "success"
+      });
+
+      router.push("/login");
+      handlePopUpClose("deleteAccount");
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to delete account",
+        type: "error"
+      });
     }
-    
-    return (
-        <div className="p-4 bg-mineshaft-900 rounded-lg border border-mineshaft-600 mb-6">
-            <p className="text-xl font-semibold text-mineshaft-100 mb-4">
-                Danger Zone
-            </p>
-            <Button
-                isLoading={isLoading}
-                colorSchema="danger"
-                variant="outline_bg"
-                type="submit"
-                onClick={() => handlePopUpOpen("deleteAccount")}
-            >
-                Delete my account
-            </Button>
-            <DeleteActionModal
-                isOpen={popUp.deleteAccount.isOpen}
-                title="Are you sure want to delete your account?"
-                subTitle="Permanently remove this account and all of its data. This action is not reversible, so please be careful."
-                onChange={(isOpen) => handlePopUpToggle("deleteAccount", isOpen)}
-                deleteKey="confirm"
-                onDeleteApproved={handleDeleteAccountSubmit}
-            />
-        </div>
-    );
-}
\ No newline at end of file
+  };
+
+  return (
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <p className="mb-4 text-xl font-semibold text-mineshaft-100">Danger Zone</p>
+      <Button
+        isLoading={isLoading}
+        colorSchema="danger"
+        variant="outline_bg"
+        type="submit"
+        onClick={() => handlePopUpOpen("deleteAccount")}
+      >
+        Delete my account
+      </Button>
+      <DeleteActionModal
+        isOpen={popUp.deleteAccount.isOpen}
+        title="Are you sure want to delete your account?"
+        subTitle="Permanently remove this account and all of its data. This action is not reversible, so please be careful."
+        onChange={(isOpen) => handlePopUpToggle("deleteAccount", isOpen)}
+        deleteKey="confirm"
+        onDeleteApproved={handleDeleteAccountSubmit}
+      />
+    </div>
+  );
+};
diff --git a/frontend/src/views/Settings/PersonalSettingsPage/DeleteAccountSection/index.tsx b/frontend/src/views/Settings/PersonalSettingsPage/DeleteAccountSection/index.tsx
index d54d3d4ac..a4354d533 100644
--- a/frontend/src/views/Settings/PersonalSettingsPage/DeleteAccountSection/index.tsx
+++ b/frontend/src/views/Settings/PersonalSettingsPage/DeleteAccountSection/index.tsx
@@ -1 +1 @@
-export { DeleteAccountSection } from "./DeleteAccountSection";
\ No newline at end of file
+export { DeleteAccountSection } from "./DeleteAccountSection";
diff --git a/frontend/src/views/Settings/PersonalSettingsPage/EmergencyKitSection/EmergencyKitSection.tsx b/frontend/src/views/Settings/PersonalSettingsPage/EmergencyKitSection/EmergencyKitSection.tsx
index a164cfdb0..ebe3880ec 100644
--- a/frontend/src/views/Settings/PersonalSettingsPage/EmergencyKitSection/EmergencyKitSection.tsx
+++ b/frontend/src/views/Settings/PersonalSettingsPage/EmergencyKitSection/EmergencyKitSection.tsx
@@ -1,91 +1,81 @@
-import { Controller, useForm } from "react-hook-form"; 
+import { Controller, useForm } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import issueBackupKey from "@app/components/utilities/cryptography/issueBackupKey";
-import { 
-    Button,
-    FormControl,
-    Input
-} from "@app/components/v2";
+import { Button, FormControl, Input } from "@app/components/v2";
 import { useUser } from "@app/context";
 
-const schema = yup.object({
+const schema = yup
+  .object({
     password: yup.string().required("Password is required")
-}).required();
+  })
+  .required();
 
 export type FormData = yup.InferType<typeof schema>;
 
 export const EmergencyKitSection = () => {
-    const { createNotification } = useNotificationContext();
-    const { user } = useUser();
-    const { reset, control, handleSubmit } = useForm({
-        defaultValues: {
-            password: "",
-        },
-        resolver: yupResolver(schema)
-    });
-    
-    const onFormSubmit = ({
-        password
-    }: FormData) => {
-        try {
-            if (!user?.email) return;
+  const { createNotification } = useNotificationContext();
+  const { user } = useUser();
+  const { reset, control, handleSubmit } = useForm({
+    defaultValues: {
+      password: ""
+    },
+    resolver: yupResolver(schema)
+  });
 
-            issueBackupKey({
-                email: user.email,
-                password,
-                personalName: `${user.firstName} ${user.lastName}`,
-                setBackupKeyError: () => {},
-                setBackupKeyIssued: () => {}
-            });
-            
-            reset();
-        } catch (err) {
-            console.error(err);
-            createNotification({
-                text: "Failed to download emergency kit",
-                type: "error"
-            });
-        }
+  const onFormSubmit = ({ password }: FormData) => {
+    try {
+      if (!user?.email) return;
+
+      issueBackupKey({
+        email: user.email,
+        password,
+        personalName: `${user.firstName} ${user.lastName}`,
+        setBackupKeyError: () => {},
+        setBackupKeyIssued: () => {}
+      });
+
+      reset();
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to download emergency kit",
+        type: "error"
+      });
     }
-    
-    return (
-        <form 
-            onSubmit={handleSubmit(onFormSubmit)}
-            className="p-4 bg-mineshaft-900 mb-6 rounded-lg border border-mineshaft-600"
-        >
-            <h2 className="text-xl font-semibold flex-1 text-mineshaft-100">
-                Emergency Kit
-            </h2>
-            <p className="text-gray-400 mb-8">
-                The kit contains information you can use to recover your account.
-            </p>
-            <div className="max-w-md">
-                <Controller
-                    defaultValue=""
-                    render={({ field, fieldState: { error } }) => (
-                        <FormControl isError={Boolean(error)} errorText={error?.message}>
-                            <Input 
-                                placeholder="Password" 
-                                type="password"
-                                {...field} 
-                                className="bg-mineshaft-800" 
-                            />
-                        </FormControl>
-                    )}
-                    control={control}
-                    name="password"
-                />
-            </div>
-            <Button
-                type="submit"
-                colorSchema="secondary"
-                isLoading={false}
-            >
-                Save
-            </Button>
-        </form>
-    );
-}
\ No newline at end of file
+  };
+
+  return (
+    <form
+      onSubmit={handleSubmit(onFormSubmit)}
+      className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
+    >
+      <h2 className="flex-1 text-xl font-semibold text-mineshaft-100">Emergency Kit</h2>
+      <p className="mb-8 text-gray-400">
+        The kit contains information you can use to recover your account.
+      </p>
+      <div className="max-w-md">
+        <Controller
+          defaultValue=""
+          render={({ field, fieldState: { error } }) => (
+            <FormControl isError={Boolean(error)} errorText={error?.message}>
+              <Input
+                placeholder="Password"
+                type="password"
+                {...field}
+                className="bg-mineshaft-800"
+              />
+            </FormControl>
+          )}
+          control={control}
+          name="password"
+        />
+      </div>
+      <Button type="submit" colorSchema="secondary" isLoading={false}>
+        Save
+      </Button>
+    </form>
+  );
+};
diff --git a/frontend/src/views/Settings/PersonalSettingsPage/EmergencyKitSection/index.tsx b/frontend/src/views/Settings/PersonalSettingsPage/EmergencyKitSection/index.tsx
index cebe0fe23..c817666b1 100644
--- a/frontend/src/views/Settings/PersonalSettingsPage/EmergencyKitSection/index.tsx
+++ b/frontend/src/views/Settings/PersonalSettingsPage/EmergencyKitSection/index.tsx
@@ -1 +1 @@
-export { EmergencyKitSection } from "./EmergencyKitSection";
\ No newline at end of file
+export { EmergencyKitSection } from "./EmergencyKitSection";
diff --git a/frontend/src/views/Settings/PersonalSettingsPage/PersonalAPIKeyTab/index.tsx b/frontend/src/views/Settings/PersonalSettingsPage/PersonalAPIKeyTab/index.tsx
index 3821b87f1..50c77ba0a 100644
--- a/frontend/src/views/Settings/PersonalSettingsPage/PersonalAPIKeyTab/index.tsx
+++ b/frontend/src/views/Settings/PersonalSettingsPage/PersonalAPIKeyTab/index.tsx
@@ -1 +1 @@
-export { PersonalAPIKeyTab } from "./PersonalAPIKeyTab";
\ No newline at end of file
+export { PersonalAPIKeyTab } from "./PersonalAPIKeyTab";
diff --git a/frontend/src/views/Settings/PersonalSettingsPage/PersonalAuthTab/PersonalAuthTab.tsx b/frontend/src/views/Settings/PersonalSettingsPage/PersonalAuthTab/PersonalAuthTab.tsx
index 78de8d5cb..b87d87dbb 100644
--- a/frontend/src/views/Settings/PersonalSettingsPage/PersonalAuthTab/PersonalAuthTab.tsx
+++ b/frontend/src/views/Settings/PersonalSettingsPage/PersonalAuthTab/PersonalAuthTab.tsx
@@ -1,6 +1,4 @@
-import {
-    useGetUser
-} from "@app/hooks/api";
+import { useGetUser } from "@app/hooks/api";
 import { AuthMethod } from "@app/hooks/api/users/types";
 
 import { AuthMethodSection } from "../AuthMethodSection";
@@ -8,16 +6,16 @@ import { ChangePasswordSection } from "../ChangePasswordSection";
 import { MFASection } from "../SecuritySection";
 
 export const PersonalAuthTab = () => {
-    const { data: user } = useGetUser();
-    return (
-        <div>
-            {user && !user.authMethods.includes(AuthMethod.LDAP) && (
-                <>
-                    <MFASection />
-                    <AuthMethodSection />
-                </>
-            )}
-            <ChangePasswordSection />
-        </div>
-    );
-}
\ No newline at end of file
+  const { data: user } = useGetUser();
+  return (
+    <div>
+      {user && !user.authMethods.includes(AuthMethod.LDAP) && (
+        <>
+          <MFASection />
+          <AuthMethodSection />
+        </>
+      )}
+      <ChangePasswordSection />
+    </div>
+  );
+};
diff --git a/frontend/src/views/Settings/PersonalSettingsPage/PersonalAuthTab/index.tsx b/frontend/src/views/Settings/PersonalSettingsPage/PersonalAuthTab/index.tsx
index 4ab3d0b6e..2a042aaf5 100644
--- a/frontend/src/views/Settings/PersonalSettingsPage/PersonalAuthTab/index.tsx
+++ b/frontend/src/views/Settings/PersonalSettingsPage/PersonalAuthTab/index.tsx
@@ -1 +1 @@
-export { PersonalAuthTab } from "./PersonalAuthTab";
\ No newline at end of file
+export { PersonalAuthTab } from "./PersonalAuthTab";
diff --git a/frontend/src/views/Settings/PersonalSettingsPage/PersonalGeneralTab/PersonalGeneralTab.tsx b/frontend/src/views/Settings/PersonalSettingsPage/PersonalGeneralTab/PersonalGeneralTab.tsx
index 6f82a9a7a..ac4c5bea2 100644
--- a/frontend/src/views/Settings/PersonalSettingsPage/PersonalGeneralTab/PersonalGeneralTab.tsx
+++ b/frontend/src/views/Settings/PersonalSettingsPage/PersonalGeneralTab/PersonalGeneralTab.tsx
@@ -4,12 +4,12 @@ import { SessionsSection } from "../SessionsSection";
 import { UserNameSection } from "../UserNameSection";
 
 export const PersonalGeneralTab = () => {
-    return (
-        <div>
-            <UserNameSection />
-            <SessionsSection />
-            <EmergencyKitSection />
-            <DeleteAccountSection />
-        </div>
-    );
-}
+  return (
+    <div>
+      <UserNameSection />
+      <SessionsSection />
+      <EmergencyKitSection />
+      <DeleteAccountSection />
+    </div>
+  );
+};
diff --git a/frontend/src/views/Settings/PersonalSettingsPage/PersonalGeneralTab/index.tsx b/frontend/src/views/Settings/PersonalSettingsPage/PersonalGeneralTab/index.tsx
index 1a83f1b88..97c1cb39a 100644
--- a/frontend/src/views/Settings/PersonalSettingsPage/PersonalGeneralTab/index.tsx
+++ b/frontend/src/views/Settings/PersonalSettingsPage/PersonalGeneralTab/index.tsx
@@ -1 +1 @@
-export { PersonalGeneralTab } from "./PersonalGeneralTab";
\ No newline at end of file
+export { PersonalGeneralTab } from "./PersonalGeneralTab";
diff --git a/frontend/src/views/Settings/PersonalSettingsPage/PersonalSettingsPage.tsx b/frontend/src/views/Settings/PersonalSettingsPage/PersonalSettingsPage.tsx
index da827490d..5e764397e 100644
--- a/frontend/src/views/Settings/PersonalSettingsPage/PersonalSettingsPage.tsx
+++ b/frontend/src/views/Settings/PersonalSettingsPage/PersonalSettingsPage.tsx
@@ -3,17 +3,15 @@ import { useTranslation } from "react-i18next";
 import { PersonalTabGroup } from "./PersonalTabGroup";
 
 export const PersonalSettingsPage = () => {
-    const { t } = useTranslation();
-    return (
-        <div className="flex justify-center bg-bunker-800 text-white w-full px-6">
-            <div className="max-w-6xl w-full">
-                <div className="mt-6 mb-6">
-                    <p className="text-3xl font-semibold text-gray-200">
-                        {t("settings.personal.title")}
-                    </p>
-                </div>
-                <PersonalTabGroup />
-            </div>
+  const { t } = useTranslation();
+  return (
+    <div className="flex w-full justify-center bg-bunker-800 px-6 text-white">
+      <div className="w-full max-w-6xl">
+        <div className="mt-6 mb-6">
+          <p className="text-3xl font-semibold text-gray-200">{t("settings.personal.title")}</p>
         </div>
-    );
-}
\ No newline at end of file
+        <PersonalTabGroup />
+      </div>
+    </div>
+  );
+};
diff --git a/frontend/src/views/Settings/PersonalSettingsPage/PersonalTabGroup/index.tsx b/frontend/src/views/Settings/PersonalSettingsPage/PersonalTabGroup/index.tsx
index 0844cd2ca..5bc002597 100644
--- a/frontend/src/views/Settings/PersonalSettingsPage/PersonalTabGroup/index.tsx
+++ b/frontend/src/views/Settings/PersonalSettingsPage/PersonalTabGroup/index.tsx
@@ -1 +1 @@
-export { PersonalTabGroup } from "./PersonalTabGroup";
\ No newline at end of file
+export { PersonalTabGroup } from "./PersonalTabGroup";
diff --git a/frontend/src/views/Settings/PersonalSettingsPage/SecuritySection/MFASection.tsx b/frontend/src/views/Settings/PersonalSettingsPage/SecuritySection/MFASection.tsx
index 109247bd1..696c2d78e 100644
--- a/frontend/src/views/Settings/PersonalSettingsPage/SecuritySection/MFASection.tsx
+++ b/frontend/src/views/Settings/PersonalSettingsPage/SecuritySection/MFASection.tsx
@@ -1,8 +1,6 @@
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import { Checkbox, EmailServiceSetupModal } from "@app/components/v2";
-import {
-  useGetUser,
-  useUpdateMfaEnabled} from "@app/hooks/api";
+import { useGetUser, useUpdateMfaEnabled } from "@app/hooks/api";
 import { useFetchServerStatus } from "@app/hooks/api/serverDetails";
 import { AuthMethod } from "@app/hooks/api/users/types";
 import { usePopUp } from "@app/hooks/usePopUp";
@@ -11,12 +9,10 @@ export const MFASection = () => {
   const { data: user } = useGetUser();
   const { mutateAsync } = useUpdateMfaEnabled();
   const { createNotification } = useNotificationContext();
-  const { handlePopUpToggle, popUp, handlePopUpOpen } = usePopUp([
-    "setUpEmail"
-  ] as const);
-  
-  const {data: serverDetails } = useFetchServerStatus()
-  
+  const { handlePopUpToggle, popUp, handlePopUpOpen } = usePopUp(["setUpEmail"] as const);
+
+  const { data: serverDetails } = useFetchServerStatus();
+
   const toggleMfa = async (state: boolean) => {
     try {
       if (!user) return;
@@ -27,13 +23,17 @@ export const MFASection = () => {
         });
         return;
       }
-      
+
       const newUser = await mutateAsync({
         isMfaEnabled: state
       });
 
       createNotification({
-        text: `${newUser.isMfaEnabled ? "Successfully turned on two-factor authentication." : "Successfully turned off two-factor authentication."}`,
+        text: `${
+          newUser.isMfaEnabled
+            ? "Successfully turned on two-factor authentication."
+            : "Successfully turned off two-factor authentication."
+        }`,
         type: "success"
       });
     } catch (err) {
@@ -43,34 +43,32 @@ export const MFASection = () => {
       });
       console.error(err);
     }
-  }
-  
+  };
+
   return (
     <>
-    <form>
-      <div className="p-4 mb-6 bg-mineshaft-900 max-w-6xl rounded-lg border border-mineshaft-600">
-        <p className="text-xl font-semibold text-mineshaft-100 mb-8">
-          Two-factor Authentication
-        </p>
-        {user && (
-          <Checkbox
-            className="data-[state=checked]:bg-primary"
-            id="isTwoFAEnabled"
-            isChecked={user?.isMfaEnabled}
-            onCheckedChange={(state) => {
-              if (serverDetails?.emailConfigured){
-                toggleMfa(state as boolean);
-              } else {
-                handlePopUpOpen("setUpEmail");
-              }
-            }}
-          >
-            Enable 2-factor authentication via your personal email.
-          </Checkbox>
-        )}
-      </div>
-    </form>
-    <EmailServiceSetupModal
+      <form>
+        <div className="mb-6 max-w-6xl rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+          <p className="mb-8 text-xl font-semibold text-mineshaft-100">Two-factor Authentication</p>
+          {user && (
+            <Checkbox
+              className="data-[state=checked]:bg-primary"
+              id="isTwoFAEnabled"
+              isChecked={user?.isMfaEnabled}
+              onCheckedChange={(state) => {
+                if (serverDetails?.emailConfigured) {
+                  toggleMfa(state as boolean);
+                } else {
+                  handlePopUpOpen("setUpEmail");
+                }
+              }}
+            >
+              Enable 2-factor authentication via your personal email.
+            </Checkbox>
+          )}
+        </div>
+      </form>
+      <EmailServiceSetupModal
         isOpen={popUp.setUpEmail?.isOpen}
         onOpenChange={(isOpen) => handlePopUpToggle("setUpEmail", isOpen)}
       />
diff --git a/frontend/src/views/Settings/PersonalSettingsPage/SecuritySection/index.tsx b/frontend/src/views/Settings/PersonalSettingsPage/SecuritySection/index.tsx
index 981ac6d5c..1284d0848 100644
--- a/frontend/src/views/Settings/PersonalSettingsPage/SecuritySection/index.tsx
+++ b/frontend/src/views/Settings/PersonalSettingsPage/SecuritySection/index.tsx
@@ -1 +1 @@
-export { MFASection } from "./MFASection";
\ No newline at end of file
+export { MFASection } from "./MFASection";
diff --git a/frontend/src/views/Settings/PersonalSettingsPage/SessionsSection/SessionsSection.tsx b/frontend/src/views/Settings/PersonalSettingsPage/SessionsSection/SessionsSection.tsx
index a085b8a17..91369d060 100644
--- a/frontend/src/views/Settings/PersonalSettingsPage/SessionsSection/SessionsSection.tsx
+++ b/frontend/src/views/Settings/PersonalSettingsPage/SessionsSection/SessionsSection.tsx
@@ -1,44 +1,41 @@
 import { faBan } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import {
-    Button
-} from "@app/components/v2";
+import { Button } from "@app/components/v2";
 import { useRevokeMySessions } from "@app/hooks/api";
 
 import { SessionsTable } from "./SessionsTable";
 
 export const SessionsSection = () => {
-    const { mutateAsync } = useRevokeMySessions();
-    
-    const onRevokeAllSessionsClick = async () => {
-        try {
-            await mutateAsync();
-            window.location.href = "/login";
-        } catch (err) {
-            console.error(err);
-        }
+  const { mutateAsync } = useRevokeMySessions();
+
+  const onRevokeAllSessionsClick = async () => {
+    try {
+      await mutateAsync();
+      window.location.href = "/login";
+    } catch (err) {
+      console.error(err);
     }
-    
-    return (
-        <div className="p-4 mb-6 bg-mineshaft-900 rounded-lg border border-mineshaft-600">
-            <div className="flex justify-between mb-8">
-                <h2 className="text-xl font-semibold flex-1 text-mineshaft-100">
-                    Sessions
-                </h2>
-               <Button
-                    colorSchema="secondary"
-                    type="submit"
-                    leftIcon={<FontAwesomeIcon icon={faBan} />}
-                    onClick={onRevokeAllSessionsClick}
-                >
-                    Revoke all
-                </Button> 
-            </div>
-            <p className="text-gray-400 mb-8">
-                Logging into Infisical via browser or CLI creates a session. Revoking all sessions logs your account out all active sessions across all browsers and CLIs.
-            </p>
-            <SessionsTable />
-        </div>
-    );
-}
\ No newline at end of file
+  };
+
+  return (
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="mb-8 flex justify-between">
+        <h2 className="flex-1 text-xl font-semibold text-mineshaft-100">Sessions</h2>
+        <Button
+          colorSchema="secondary"
+          type="submit"
+          leftIcon={<FontAwesomeIcon icon={faBan} />}
+          onClick={onRevokeAllSessionsClick}
+        >
+          Revoke all
+        </Button>
+      </div>
+      <p className="mb-8 text-gray-400">
+        Logging into Infisical via browser or CLI creates a session. Revoking all sessions logs your
+        account out all active sessions across all browsers and CLIs.
+      </p>
+      <SessionsTable />
+    </div>
+  );
+};
diff --git a/frontend/src/views/Settings/PersonalSettingsPage/SessionsSection/index.tsx b/frontend/src/views/Settings/PersonalSettingsPage/SessionsSection/index.tsx
index 653cbb804..cc0fe376b 100644
--- a/frontend/src/views/Settings/PersonalSettingsPage/SessionsSection/index.tsx
+++ b/frontend/src/views/Settings/PersonalSettingsPage/SessionsSection/index.tsx
@@ -1 +1 @@
-export { SessionsSection } from "./SessionsSection";
\ No newline at end of file
+export { SessionsSection } from "./SessionsSection";
diff --git a/frontend/src/views/Settings/PersonalSettingsPage/UserNameSection/index.tsx b/frontend/src/views/Settings/PersonalSettingsPage/UserNameSection/index.tsx
index bbd771d3e..a81ecba8f 100644
--- a/frontend/src/views/Settings/PersonalSettingsPage/UserNameSection/index.tsx
+++ b/frontend/src/views/Settings/PersonalSettingsPage/UserNameSection/index.tsx
@@ -1 +1 @@
-export { UserNameSection } from "./UserNameSection";
\ No newline at end of file
+export { UserNameSection } from "./UserNameSection";
diff --git a/frontend/src/views/Settings/PersonalSettingsPage/index.tsx b/frontend/src/views/Settings/PersonalSettingsPage/index.tsx
index 6181d7fb6..630aac8bc 100644
--- a/frontend/src/views/Settings/PersonalSettingsPage/index.tsx
+++ b/frontend/src/views/Settings/PersonalSettingsPage/index.tsx
@@ -1 +1 @@
-export { PersonalSettingsPage } from "./PersonalSettingsPage";
\ No newline at end of file
+export { PersonalSettingsPage } from "./PersonalSettingsPage";
diff --git a/frontend/src/views/Settings/ProjectSettingsPage/ProjectSettingsPage.tsx b/frontend/src/views/Settings/ProjectSettingsPage/ProjectSettingsPage.tsx
index e5d62fe65..da87da755 100644
--- a/frontend/src/views/Settings/ProjectSettingsPage/ProjectSettingsPage.tsx
+++ b/frontend/src/views/Settings/ProjectSettingsPage/ProjectSettingsPage.tsx
@@ -13,8 +13,8 @@ const tabs = [
 export const ProjectSettingsPage = () => {
   const { t } = useTranslation();
   return (
-    <div className="flex justify-center w-full h-full bg-bunker-800 text-white">
-      <div className="max-w-7xl px-6 w-full">
+    <div className="flex h-full w-full justify-center bg-bunker-800 text-white">
+      <div className="w-full max-w-7xl px-6">
         <div className="my-6">
           <p className="text-3xl font-semibold text-gray-200">{t("settings.project.title")}</p>
         </div>
@@ -25,7 +25,7 @@ export const ProjectSettingsPage = () => {
                 {({ selected }) => (
                   <button
                     type="button"
-                    className={`w-30 py-2 mx-2 mr-4 font-medium text-sm outline-none ${
+                    className={`w-30 mx-2 mr-4 py-2 text-sm font-medium outline-none ${
                       selected ? "border-b border-white text-white" : "text-mineshaft-400"
                     }`}
                   >
diff --git a/frontend/src/views/Settings/ProjectSettingsPage/components/AutoCapitalizationSection/index.tsx b/frontend/src/views/Settings/ProjectSettingsPage/components/AutoCapitalizationSection/index.tsx
index 8fbbce1e4..38a591701 100644
--- a/frontend/src/views/Settings/ProjectSettingsPage/components/AutoCapitalizationSection/index.tsx
+++ b/frontend/src/views/Settings/ProjectSettingsPage/components/AutoCapitalizationSection/index.tsx
@@ -1 +1 @@
-export { AutoCapitalizationSection } from "./AutoCapitalizationSection";
\ No newline at end of file
+export { AutoCapitalizationSection } from "./AutoCapitalizationSection";
diff --git a/frontend/src/views/Settings/ProjectSettingsPage/components/DeleteProjectSection/index.tsx b/frontend/src/views/Settings/ProjectSettingsPage/components/DeleteProjectSection/index.tsx
index e69f029ab..04a624ec2 100644
--- a/frontend/src/views/Settings/ProjectSettingsPage/components/DeleteProjectSection/index.tsx
+++ b/frontend/src/views/Settings/ProjectSettingsPage/components/DeleteProjectSection/index.tsx
@@ -1 +1 @@
-export { DeleteProjectSection } from "./DeleteProjectSection";
\ No newline at end of file
+export { DeleteProjectSection } from "./DeleteProjectSection";
diff --git a/frontend/src/views/Settings/ProjectSettingsPage/components/E2EESection/index.tsx b/frontend/src/views/Settings/ProjectSettingsPage/components/E2EESection/index.tsx
index 90f7a3fa1..448f86841 100644
--- a/frontend/src/views/Settings/ProjectSettingsPage/components/E2EESection/index.tsx
+++ b/frontend/src/views/Settings/ProjectSettingsPage/components/E2EESection/index.tsx
@@ -1,3 +1 @@
-export {
-    E2EESection
-} from "./E2EESection";
\ No newline at end of file
+export { E2EESection } from "./E2EESection";
diff --git a/frontend/src/views/Settings/ProjectSettingsPage/components/ProjectGeneralTab/index.tsx b/frontend/src/views/Settings/ProjectSettingsPage/components/ProjectGeneralTab/index.tsx
index b78677b96..c6e611e0f 100644
--- a/frontend/src/views/Settings/ProjectSettingsPage/components/ProjectGeneralTab/index.tsx
+++ b/frontend/src/views/Settings/ProjectSettingsPage/components/ProjectGeneralTab/index.tsx
@@ -1 +1 @@
-export { ProjectGeneralTab } from "./ProjectGeneralTab";
\ No newline at end of file
+export { ProjectGeneralTab } from "./ProjectGeneralTab";
diff --git a/frontend/src/views/Settings/ProjectSettingsPage/components/ProjectNameChangeSection/ProjectNameChangeSection.tsx b/frontend/src/views/Settings/ProjectSettingsPage/components/ProjectNameChangeSection/ProjectNameChangeSection.tsx
index f9ff5761f..5857acc0f 100644
--- a/frontend/src/views/Settings/ProjectSettingsPage/components/ProjectNameChangeSection/ProjectNameChangeSection.tsx
+++ b/frontend/src/views/Settings/ProjectSettingsPage/components/ProjectNameChangeSection/ProjectNameChangeSection.tsx
@@ -12,7 +12,11 @@ import { useRenameWorkspace } from "@app/hooks/api";
 import { CopyButton } from "./CopyButton";
 
 const formSchema = yup.object({
-  name: yup.string().required().label("Project Name").max(64, "Too long, maximum length is 64 characters"),
+  name: yup
+    .string()
+    .required()
+    .label("Project Name")
+    .max(64, "Too long, maximum length is 64 characters")
 });
 
 type FormData = yup.InferType<typeof formSchema>;
diff --git a/frontend/src/views/Settings/ProjectSettingsPage/components/SecretTagsSection/index.tsx b/frontend/src/views/Settings/ProjectSettingsPage/components/SecretTagsSection/index.tsx
index ed93047b2..0147e5e77 100644
--- a/frontend/src/views/Settings/ProjectSettingsPage/components/SecretTagsSection/index.tsx
+++ b/frontend/src/views/Settings/ProjectSettingsPage/components/SecretTagsSection/index.tsx
@@ -1 +1 @@
-export {SecretTagsSection} from "./SecretTagsSection"
\ No newline at end of file
+export { SecretTagsSection } from "./SecretTagsSection";
diff --git a/frontend/src/views/Settings/ProjectSettingsPage/components/index.tsx b/frontend/src/views/Settings/ProjectSettingsPage/components/index.tsx
index 4a5bc4982..72ac106a3 100644
--- a/frontend/src/views/Settings/ProjectSettingsPage/components/index.tsx
+++ b/frontend/src/views/Settings/ProjectSettingsPage/components/index.tsx
@@ -3,4 +3,4 @@ export { DeleteProjectSection } from "./DeleteProjectSection";
 export { E2EESection } from "./E2EESection";
 export { EnvironmentSection } from "./EnvironmentSection";
 export { ProjectNameChangeSection } from "./ProjectNameChangeSection";
-export { SecretTagsSection } from "./SecretTagsSection";
\ No newline at end of file
+export { SecretTagsSection } from "./SecretTagsSection";
diff --git a/frontend/src/views/Signup/SignupSSO.tsx b/frontend/src/views/Signup/SignupSSO.tsx
index 30b81f8d9..141865026 100644
--- a/frontend/src/views/Signup/SignupSSO.tsx
+++ b/frontend/src/views/Signup/SignupSSO.tsx
@@ -1,57 +1,40 @@
 import { useState } from "react";
 import jwt_decode from "jwt-decode";
 
-import {
-    BackupPDFStep,
-    UserInfoSSOStep} from "./components";
+import { BackupPDFStep, UserInfoSSOStep } from "./components";
 
-type Props = { 
-    providerAuthToken: string;
-}
+type Props = {
+  providerAuthToken: string;
+};
 
-export const SignupSSO = ({
-    providerAuthToken
-}: Props) => {
-    const [step, setStep] = useState(0);
-    const [password, setPassword] = useState("");
+export const SignupSSO = ({ providerAuthToken }: Props) => {
+  const [step, setStep] = useState(0);
+  const [password, setPassword] = useState("");
 
-    const {
-        username,
-        organizationName,
-        firstName,
-        lastName,
-    } = jwt_decode(providerAuthToken) as any;
+  const { username, organizationName, firstName, lastName } = jwt_decode(providerAuthToken) as any;
 
-    const renderView = () => {
-        switch (step) {
-            case 0:
-                return (
-                    <UserInfoSSOStep 
-                        username={username}
-                        name={`${firstName} ${lastName}`}
-                        providerOrganizationName={organizationName}
-                        password={password}
-                        setPassword={setPassword}
-                        setStep={setStep}
-                        providerAuthToken={providerAuthToken}
-                    />
-                );
-            case 1:
-                return (
-                    <BackupPDFStep 
-                        email={username}
-                        password={password}
-                        name={`${firstName} ${lastName}`}
-                    />
-                );
-            default:
-                return <div />
-        }
+  const renderView = () => {
+    switch (step) {
+      case 0:
+        return (
+          <UserInfoSSOStep
+            username={username}
+            name={`${firstName} ${lastName}`}
+            providerOrganizationName={organizationName}
+            password={password}
+            setPassword={setPassword}
+            setStep={setStep}
+            providerAuthToken={providerAuthToken}
+          />
+        );
+      case 1:
+        return (
+          <BackupPDFStep email={username} password={password} name={`${firstName} ${lastName}`} />
+        );
+      default:
+        return <div />;
     }
-    
-    return (
-        <div>
-            {renderView()}
-        </div>
-    );
-}
\ No newline at end of file
+  };
+
+  return <div>{renderView()}</div>;
+};
diff --git a/frontend/src/views/Signup/components/BackupPDFStep/BackupPDFStep.tsx b/frontend/src/views/Signup/components/BackupPDFStep/BackupPDFStep.tsx
index 8e8b582c1..b43018d47 100644
--- a/frontend/src/views/Signup/components/BackupPDFStep/BackupPDFStep.tsx
+++ b/frontend/src/views/Signup/components/BackupPDFStep/BackupPDFStep.tsx
@@ -1,5 +1,5 @@
 import { useTranslation } from "react-i18next";
-import { useRouter } from "next/router"
+import { useRouter } from "next/router";
 import { faWarning } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
@@ -7,9 +7,9 @@ import issueBackupKey from "@app/components/utilities/cryptography/issueBackupKe
 import { Button } from "@app/components/v2";
 
 interface DownloadBackupPDFStepProps {
-    email: string;
-    password: string;
-    name: string;
+  email: string;
+  password: string;
+  name: string;
 }
 
 /**
@@ -21,46 +21,48 @@ interface DownloadBackupPDFStepProps {
  * @param {string} obj.name - user's name
  * @returns
  */
-export const BackupPDFStep = ({
-    email,
-    password,
-    name
-}: DownloadBackupPDFStepProps) => {
-    const { t } = useTranslation();
-    const router = useRouter();
+export const BackupPDFStep = ({ email, password, name }: DownloadBackupPDFStepProps) => {
+  const { t } = useTranslation();
+  const router = useRouter();
 
   return (
-    <div className="flex flex-col items-center w-full h-full md:px-6 mx-auto mb-36 md:mb-16">
-      <p className="text-xl text-center font-medium flex justify-center text-transparent bg-clip-text bg-gradient-to-b from-white to-bunker-200">
-        <FontAwesomeIcon icon={faWarning} className="ml-2 mr-3 pt-1 text-2xl text-bunker-200" />{t("signup.step4-message")}
+    <div className="mx-auto mb-36 flex h-full w-full flex-col items-center md:mb-16 md:px-6">
+      <p className="flex justify-center bg-gradient-to-b from-white to-bunker-200 bg-clip-text text-center text-xl font-medium text-transparent">
+        <FontAwesomeIcon icon={faWarning} className="ml-2 mr-3 pt-1 text-2xl text-bunker-200" />
+        {t("signup.step4-message")}
       </p>
-      <div className="flex flex-col pb-2 bg-mineshaft-800 border border-mineshaft-600 items-center justify-center text-center lg:w-1/6 w-full md:min-w-[24rem] mt-8 max-w-md text-bunker-300 text-md rounded-md">
-        <div className="w-full mt-4 md:mt-8 flex flex-row text-center items-center m-2 text-bunker-300 rounded-md lg:w-1/6 lg:w-1/6 w-full md:min-w-[23rem] px-3 mx-auto">
-          <span className='mb-2'>{t("signup.step4-description1")} {t("signup.step4-description3")}</span>
+      <div className="text-md mt-8 flex w-full max-w-md flex-col items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-800 pb-2 text-center text-bunker-300 md:min-w-[24rem] lg:w-1/6">
+        <div className="m-2 mx-auto mt-4 flex w-full w-full flex-row items-center rounded-md px-3 text-center text-bunker-300 md:mt-8 md:min-w-[23rem] lg:w-1/6 lg:w-1/6">
+          <span className="mb-2">
+            {t("signup.step4-description1")} {t("signup.step4-description3")}
+          </span>
         </div>
-        <div className="flex flex-col items-center px-3 justify-center mt-0 md:mt-4 mb-2 md:mb-4 lg:w-1/6 w-full md:min-w-[20rem] mt-2 md:max-w-md mx-auto text-sm text-center md:text-left">
-          <div className="text-l py-1 text-lg w-full">
+        <div className="mx-auto mt-0 mb-2 mt-2 flex w-full flex-col items-center justify-center px-3 text-center text-sm md:mt-4 md:mb-4 md:min-w-[20rem] md:max-w-md md:text-left lg:w-1/6">
+          <div className="text-l w-full py-1 text-lg">
             <Button
               onClick={async () => {
                 await issueBackupKey({
                   email,
                   password,
                   personalName: name,
-                  setBackupKeyError: () => { },
-                  setBackupKeyIssued: () => { }
+                  setBackupKeyError: () => {},
+                  setBackupKeyIssued: () => {}
                 });
 
                 router.push(`/org/${localStorage.getItem("orgData.id")}/overview`);
               }}
               size="sm"
               isFullWidth
-              className='h-12'
+              className="h-12"
               colorSchema="primary"
               variant="outline_bg"
-            > Download PDF </Button>
+            >
+              {" "}
+              Download PDF{" "}
+            </Button>
           </div>
         </div>
       </div>
     </div>
   );
-}
+};
diff --git a/frontend/src/views/Signup/components/BackupPDFStep/index.tsx b/frontend/src/views/Signup/components/BackupPDFStep/index.tsx
index 244296d15..01f7745cd 100644
--- a/frontend/src/views/Signup/components/BackupPDFStep/index.tsx
+++ b/frontend/src/views/Signup/components/BackupPDFStep/index.tsx
@@ -1 +1 @@
-export { BackupPDFStep } from "./BackupPDFStep";
\ No newline at end of file
+export { BackupPDFStep } from "./BackupPDFStep";
diff --git a/frontend/src/views/Signup/components/UserInfoSSOStep/index.tsx b/frontend/src/views/Signup/components/UserInfoSSOStep/index.tsx
index f1278a2cd..d62267cd3 100644
--- a/frontend/src/views/Signup/components/UserInfoSSOStep/index.tsx
+++ b/frontend/src/views/Signup/components/UserInfoSSOStep/index.tsx
@@ -1 +1 @@
-export { UserInfoSSOStep } from "./UserInfoSSOStep";
\ No newline at end of file
+export { UserInfoSSOStep } from "./UserInfoSSOStep";
diff --git a/frontend/src/views/Signup/components/index.tsx b/frontend/src/views/Signup/components/index.tsx
index 4ae3ec526..a4628de35 100644
--- a/frontend/src/views/Signup/components/index.tsx
+++ b/frontend/src/views/Signup/components/index.tsx
@@ -1,2 +1,2 @@
 export { BackupPDFStep } from "./BackupPDFStep";
-export { UserInfoSSOStep } from "./UserInfoSSOStep";
\ No newline at end of file
+export { UserInfoSSOStep } from "./UserInfoSSOStep";
diff --git a/frontend/src/views/Signup/index.tsx b/frontend/src/views/Signup/index.tsx
index b5cb660ac..e4feee778 100644
--- a/frontend/src/views/Signup/index.tsx
+++ b/frontend/src/views/Signup/index.tsx
@@ -1 +1 @@
-export { SignupSSO } from "./SignupSSO";
\ No newline at end of file
+export { SignupSSO } from "./SignupSSO";
diff --git a/frontend/src/views/admin/SignUpPage/components/DownloadBackupKeys/DownloadBackupKeys.tsx b/frontend/src/views/admin/SignUpPage/components/DownloadBackupKeys/DownloadBackupKeys.tsx
index 2ed56c930..3aa400830 100644
--- a/frontend/src/views/admin/SignUpPage/components/DownloadBackupKeys/DownloadBackupKeys.tsx
+++ b/frontend/src/views/admin/SignUpPage/components/DownloadBackupKeys/DownloadBackupKeys.tsx
@@ -14,19 +14,22 @@ export const DownloadBackupKeys = ({ onGenerate }: Props): JSX.Element => {
   const [isLoading, setIsLoading] = useToggle();
 
   return (
-    <div className="flex flex-col items-center w-full h-full md:px-6 mx-auto mb-36 md:mb-16">
-      <p className="text-xl text-center font-medium flex flex-col justify-center items-center text-transparent bg-clip-text bg-gradient-to-b from-white to-bunker-200">
-        <FontAwesomeIcon icon={faWarning} className="ml-2 mr-3 pt-1 mb-6 text-6xl text-bunker-200" />
+    <div className="mx-auto mb-36 flex h-full w-full flex-col items-center md:mb-16 md:px-6">
+      <p className="flex flex-col items-center justify-center bg-gradient-to-b from-white to-bunker-200 bg-clip-text text-center text-xl font-medium text-transparent">
+        <FontAwesomeIcon
+          icon={faWarning}
+          className="ml-2 mr-3 mb-6 pt-1 text-6xl text-bunker-200"
+        />
         {t("signup.step4-message")}
       </p>
-      <div className="flex flex-col pb-2 bg-mineshaft-800 border border-mineshaft-600 items-center justify-center text-center lg:w-1/6 w-full md:min-w-[24rem] mt-8 max-w-md text-bunker-300 text-md rounded-md">
-        <div className="w-full mt-4 md:mt-8 flex flex-row text-center items-center m-2 text-bunker-300 rounded-md lg:w-1/6 md:min-w-[23rem] px-3 mx-auto">
+      <div className="text-md mt-8 flex w-full max-w-md flex-col items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-800 pb-2 text-center text-bunker-300 md:min-w-[24rem] lg:w-1/6">
+        <div className="m-2 mx-auto mt-4 flex w-full flex-row items-center rounded-md px-3 text-center text-bunker-300 md:mt-8 md:min-w-[23rem] lg:w-1/6">
           <span className="mb-2">
             {t("signup.step4-description1")} {t("signup.step4-description3")}
           </span>
         </div>
-        <div className="flex flex-col items-center px-3 justify-center md:mt-4 mb-2 md:mb-4 lg:w-1/6 w-full md:min-w-[20rem] mt-2 md:max-w-md mx-auto text-sm text-center md:text-left">
-          <div className="text-l py-1 text-lg w-full">
+        <div className="mx-auto mb-2 mt-2 flex w-full flex-col items-center justify-center px-3 text-center text-sm md:mt-4 md:mb-4 md:min-w-[20rem] md:max-w-md md:text-left lg:w-1/6">
+          <div className="text-l w-full py-1 text-lg">
             <Button
               onClick={async () => {
                 try {