From dd23449cc058a32b4b7eb2bf4fe4e5138adfce8e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=89mile=20R=C3=A9?= <emile@getprobo.com>
Date: Thu, 22 Jan 2026 12:51:08 +0400
Subject: [PATCH] Fix apps/console lint issues
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Émile Ré <emile@getprobo.com>
---
 .../core/NewDomainDialogMutation.graphql.ts   |   22 +-
 apps/console/src/components/PageError.tsx     |   13 +-
 .../console/src/components/SnapshotBanner.tsx |    8 +-
 .../src/components/assets/AssetsTable.tsx     |    6 +-
 .../components/assets/ReadOnlyAssetsTable.tsx |   55 +-
 .../components/audits/LinkedAuditsCard.tsx    |    2 +-
 .../components/audits/LinkedAuditsDialog.tsx  |   12 +-
 .../controls/LinkedControlsCard.tsx           |    5 +-
 .../controls/LinkedControlsDialog.tsx         |   55 +-
 .../components/documents/BulkExportDialog.tsx |   38 +-
 .../documents/LinkedDocumentsCard.tsx         |    2 +-
 .../documents/LinkedDocumentsDialog.tsx       |   12 +-
 .../src/components/documents/PDFPreview.tsx   |   11 +-
 .../documents/PdfDownloadDialog.tsx           |   32 +-
 .../src/components/form/AuditSelectField.tsx  |   15 +-
 .../src/components/form/ControlledField.tsx   |   21 +-
 .../src/components/form/CountriesField.tsx    |   22 +-
 .../form/DocumentClassificationOptions.tsx    |    2 +-
 .../components/form/DocumentTypeOptions.tsx   |    2 +-
 .../src/components/form/EmailsField.tsx       |    4 +-
 .../components/form/MeasureSelectField.tsx    |   21 +-
 .../form/PeopleMultiSelectField.tsx           |    9 +-
 .../src/components/form/PeopleSelectField.tsx |   12 +-
 .../form/ProcessingActivityEnumOptions.tsx    |   12 +-
 .../components/form/SnapshotTypeOptions.tsx   |    2 +-
 .../StateOfApplicabilityControlsField.tsx     |  681 ---------
 .../form/VendorsMultiSelectField.tsx          |    8 +-
 .../measures/LinkedMeasuresCard.tsx           |    2 +-
 .../measures/LinkedMeasuresDialog.tsx         |   28 +-
 .../obligations/LinkedObligationsCard.tsx     |    2 +-
 .../obligations/LinkedObligationsDialog.tsx   |   14 +-
 .../DeleteOrganizationDialog.tsx              |   17 +-
 .../organizations/SlackConnection.tsx         |   60 +-
 .../src/components/risks/LinkedRisksCard.tsx  |    2 +-
 .../components/risks/LinkedRisksDialog.tsx    |   22 +-
 .../snapshots/LinkedSnapshotsCard.tsx         |    2 +-
 .../snapshots/LinkedSnapshotsDialog.tsx       |   12 +-
 .../LinkedStatesOfApplicabilityCard.tsx       |  472 +++---
 .../LinkedStatesOfApplicabilityDialog.tsx     |  424 +++---
 .../src/components/table/EditableTable.tsx    |   30 +-
 .../src/components/table/GraphQLCell.tsx      |   11 +-
 .../src/components/table/PeopleCell.tsx       |    5 +-
 .../src/components/table/VendorsCell.tsx      |    5 +-
 .../src/components/tasks/TaskFormDialog.tsx   |   37 +-
 .../src/components/tasks/TasksCard.tsx        |  110 +-
 .../DeleteTrustCenterReferenceDialog.tsx      |    4 +-
 .../trustCenter/TrustCenterAuditsCard.tsx     |   30 +-
 .../trustCenter/TrustCenterDocumentsCard.tsx  |   34 +-
 .../trustCenter/TrustCenterFilesCard.tsx      |   42 +-
 .../TrustCenterReferenceDialog.tsx            |   39 +-
 .../TrustCenterReferencesSection.tsx          |   18 +-
 .../trustCenter/TrustCenterVendorsCard.tsx    |   11 +-
 apps/console/src/hooks/graph/AssetGraph.ts    |    2 +-
 apps/console/src/hooks/graph/AuditGraph.ts    |    2 +-
 .../hooks/graph/ContinualImprovementGraph.ts  |    4 +-
 apps/console/src/hooks/graph/DatumGraph.ts    |    2 +-
 .../console/src/hooks/graph/FrameworkGraph.ts |    4 +-
 .../src/hooks/graph/NonconformityGraph.ts     |    4 +-
 apps/console/src/hooks/graph/PeopleGraph.ts   |    6 +-
 .../hooks/graph/ProcessingActivityGraph.ts    |    4 +-
 apps/console/src/hooks/graph/RiskGraph.ts     |    2 +-
 .../hooks/graph/StateOfApplicabilityGraph.ts  |    4 +-
 .../graph/TrustCenterAccessTokenGraph.ts      |    2 +-
 .../src/hooks/graph/TrustCenterFileGraph.ts   |    6 +-
 apps/console/src/hooks/graph/VendorGraph.ts   |    4 +-
 apps/console/src/hooks/useFetchQuery.ts       |    4 +-
 apps/console/src/hooks/useMutateField.tsx     |    2 +-
 .../src/hooks/useMutationWithToasts.ts        |   14 +-
 apps/console/src/hooks/useStateWithSchema.ts  |    6 +-
 apps/console/src/hooks/useVendorSearch.ts     |    4 +-
 .../src/layouts/PublicTrustCenterLayout.tsx   |   22 +-
 apps/console/src/main.tsx                     |    2 +-
 .../src/pages/DocumentSigningRequestsPage.tsx |  356 ++---
 .../pages/iam/apiKeys/APIKeysPageLoader.tsx   |    4 +-
 .../_components/PersonalAPIKeyList.tsx        |   54 +-
 .../apiKeys/_components/PersonalAPIKeyRow.tsx |   14 +-
 .../_components/PersonalAPIKeyTokenAction.tsx |    4 +-
 .../src/pages/iam/auth/ForgotPasswordPage.tsx |  153 +-
 .../src/pages/iam/auth/ResetPasswordPage.tsx  |   11 +-
 .../src/pages/iam/auth/VerifyEmailPage.tsx    |   74 +-
 .../iam/auth/sign-in/PasswordSignInPage.tsx   |   14 +-
 .../pages/iam/auth/sign-in/SSOSignInPage.tsx  |   11 +-
 .../src/pages/iam/auth/sign-in/SignInPage.tsx |    6 +-
 .../auth/sign-up/SignUpFromInvitationPage.tsx |    7 +-
 .../src/pages/iam/auth/sign-up/SignUpPage.tsx |    7 +-
 .../pages/iam/memberships/MembershipsPage.tsx |   20 +-
 .../iam/memberships/MembershipsPageLoader.tsx |    4 +-
 .../pages/iam/memberships/ViewerLayout.tsx    |    4 +-
 .../iam/memberships/ViewerLayoutLoader.tsx    |    4 +-
 .../iam/memberships/ViewerLayoutLoading.tsx   |    4 +-
 .../_components/InvitationCard.tsx            |   16 +-
 .../_components/MembershipCard.tsx            |   32 +-
 .../_components/ViewerDropdown.tsx            |    4 +-
 .../iam/organizations/NewOrganizationPage.tsx |   16 +-
 .../organizations/ViewerMembershipLayout.tsx  |   12 +-
 .../_components/MembershipsDropdown.tsx       |   12 +-
 .../MembershipsDropdownMenuItem.tsx           |   18 +-
 .../iam/organizations/_components/Sidebar.tsx |  340 ++---
 .../settings/GeneralSettingsPage.tsx          |   11 +-
 .../settings/MembersPageLoader.tsx            |    4 +-
 .../settings/SAMLSettingsPage.tsx             |   32 +-
 .../settings/SCIMSettingsPageLoader.tsx       |    2 +-
 .../settings/_components/EditMemberDialog.tsx |    6 +-
 .../_components/EditSAMLConfigurationForm.tsx |   12 +-
 .../settings/_components/InvitationList.tsx   |   40 +-
 .../_components/InvitationListItem.tsx        |   54 +-
 .../settings/_components/InviteUserDialog.tsx |   20 +-
 .../settings/_components/MemberList.tsx       |   34 +-
 .../settings/_components/MemberListItem.tsx   |   32 +-
 .../_components/NewSAMLConfigurationForm.tsx  |    8 +-
 .../settings/_components/OrganizationForm.tsx |   34 +-
 .../_components/SAMLConfigurationForm.tsx     |    7 +-
 .../_components/SAMLConfigurationList.tsx     |  115 +-
 .../_components/SAMLDomainVerifyDialog.tsx    |    3 +-
 .../_components/SCIMConfiguration.tsx         |   17 +-
 .../settings/_components/SCIMEventList.tsx    |   26 +-
 .../_components/SCIMEventListItem.tsx         |   18 +-
 .../organizations/assets/AssetDetailsPage.tsx |   14 +-
 .../pages/organizations/assets/AssetsPage.tsx |   24 +-
 .../assets/dialogs/CreateAssetDialog.tsx      |   10 +-
 .../organizations/audits/AuditDetailsPage.tsx |  151 +-
 .../pages/organizations/audits/AuditsPage.tsx |   22 +-
 .../audits/dialogs/CreateAuditDialog.tsx      |   20 +-
 .../ContinualImprovementDetailsPage.tsx       |   22 +-
 .../ContinualImprovementsPage.tsx             |  126 +-
 .../CreateContinualImprovementDialog.tsx      |   22 +-
 .../src/pages/organizations/data/DataPage.tsx |   63 +-
 .../organizations/data/DatumDetailsPage.tsx   |   10 +-
 .../data/dialogs/CreateDatumDialog.tsx        |   10 +-
 .../documents/DocumentDetailPage.tsx          |  360 ++---
 .../organizations/documents/DocumentsPage.tsx |  302 ++--
 .../dialogs/CreateDocumentDialog.tsx          |   21 +-
 .../dialogs/PublishDocumentsDialog.tsx        |   14 +-
 .../dialogs/SignatureDocumentsDialog.tsx      |   18 +-
 .../documents/dialogs/UpdateVersionDialog.tsx |   38 +-
 .../documents/tabs/DocumentControlsTab.tsx    |    2 +-
 .../documents/tabs/DocumentSignaturesTab.tsx  |   86 +-
 .../EmployeeDocumentSignaturePage.tsx         |   39 +-
 .../EmployeeDocumentSignaturePageLoader.tsx   |    4 +-
 .../employee/EmployeeDocumentsPage.tsx        |   74 +-
 .../employee/_components/VersionRow.tsx       |   24 +-
 .../frameworks/FrameworkControlPage.tsx       |  631 ++++----
 .../frameworks/FrameworkDetailPage.tsx        |  374 ++---
 .../frameworks/FrameworksPage.tsx             |   12 +-
 .../dialogs/FrameworkControlDialog.tsx        |  341 +++--
 .../dialogs/FrameworkFormDialog.tsx           |   27 +-
 .../measures/MeasureDetailPage.tsx            |   12 +-
 .../organizations/measures/MeasuresPage.tsx   |   24 +-
 .../measures/dialog/CreateEvidenceDialog.tsx  |   28 +-
 .../dialog/EvidenceDownloadDialog.tsx         |   11 +-
 .../measures/dialog/EvidencePreviewDialog.tsx |   38 +-
 .../measures/dialog/MeasureFormDialog.tsx     |   27 +-
 .../measures/tabs/MeasureControlsTab.tsx      |    2 +-
 .../measures/tabs/MeasureEvidencesTab.tsx     |   14 +-
 .../measures/tabs/MeasureRisksTab.tsx         |    2 +-
 .../meetings/MeetingDetailPage.tsx            |    6 +-
 .../organizations/meetings/MeetingsPage.tsx   |  264 ++--
 .../meetings/dialogs/CreateMeetingDialog.tsx  |   10 +-
 .../dialogs/UpdateMeetingMinutesDialog.tsx    |    8 +-
 .../meetings/tabs/MeetingMinutesTab.tsx       |   16 +-
 .../nonconformities/NonconformitiesPage.tsx   |  154 +-
 .../NonconformityDetailsPage.tsx              |   26 +-
 .../dialogs/CreateNonconformityDialog.tsx     |   14 +-
 .../obligations/ObligationDetailsPage.tsx     |  686 ++++-----
 .../obligations/ObligationsPage.tsx           |  128 +-
 .../dialogs/CreateObligationDialog.tsx        |   10 +-
 .../organizations/people/PeopleListPage.tsx   |    6 +-
 .../people/dialogs/CreatePeopleDialog.tsx     |   12 +-
 .../people/dialogs/SetEndOfContractDialog.tsx |    8 +-
 .../people/tabs/PeopleProfileTab.tsx          |   12 +-
 .../people/tabs/PeopleRoleTab.tsx             |    8 +-
 .../ProcessingActivitiesPage.tsx              | 1266 +++++++++--------
 .../ProcessingActivityDetailsPage.tsx         |  622 ++++----
 .../CreateProcessingActivityDialog.tsx        |   30 +-
 .../RightsRequestDetailsPage.tsx              |  572 ++++----
 .../rightsRequests/RightsRequestsPage.tsx     |  408 +++---
 .../dialogs/CreateRightsRequestDialog.tsx     |   22 +-
 .../organizations/risks/FormRiskDialog.tsx    |   51 +-
 .../organizations/risks/RiskDetailPage.tsx    |   22 +-
 .../pages/organizations/risks/RisksPage.tsx   |   30 +-
 .../risks/tabs/RiskControlsTab.tsx            |    7 +-
 .../risks/tabs/RiskDocumentsTab.tsx           |    2 +-
 .../risks/tabs/RiskMeasuresTab.tsx            |    2 +-
 .../risks/tabs/RiskObligationsTab.tsx         |    2 +-
 .../settings/DomainSettingsPage.tsx           |   48 +-
 .../_components/DeleteDomainDialog.tsx        |   10 +-
 .../settings/_components/DomainDialog.tsx     |  195 +--
 .../settings/_components/NewDomainDialog.tsx  |   17 +-
 .../snapshots/SnapshotDetailPage.tsx          |    2 +-
 .../organizations/snapshots/SnapshotsPage.tsx |   70 +-
 .../snapshots/dialog/SnapshotFormDialog.tsx   |    6 +-
 .../StateOfApplicabilityDetailPage.tsx        |  677 ++++-----
 .../StatesOfApplicabilityPage.tsx             |  368 ++---
 .../CreateStateOfApplicabilityDialog.tsx      |  192 +--
 .../dialogs/EditControlDialog.tsx             |  106 +-
 .../dialogs/LinkControlDialog.tsx             |  128 +-
 .../tabs/StateOfApplicabilityControlsTab.tsx  |  632 ++++----
 .../tabs/StateOfApplicabilityOverviewTab.tsx  |   86 +-
 .../TrustCenterAccessEditDialog.tsx           |   34 +-
 .../TrustCenterAccessItem.tsx                 |   16 +-
 .../TrustCenterAccessTab.tsx                  |  183 ++-
 .../TrustCenterDocumentAccessList.tsx         |  199 +--
 .../trustCenter/TrustCenterAuditsTab.tsx      |    2 +-
 .../trustCenter/TrustCenterDocumentsTab.tsx   |    8 +-
 .../trustCenter/TrustCenterFilesTab.tsx       |   25 +-
 .../trustCenter/TrustCenterOverviewTab.tsx    |  153 +-
 .../trustCenter/TrustCenterVendorsTab.tsx     |    6 +-
 .../vendors/VendorDetailPage.tsx              |   10 +-
 .../organizations/vendors/VendorsPage.tsx     |   14 +-
 .../vendors/dialogs/CreateContactDialog.tsx   |    8 +-
 .../dialogs/CreateRiskAssessmentDialog.tsx    |   22 +-
 .../vendors/dialogs/CreateServiceDialog.tsx   |   12 +-
 .../vendors/dialogs/CreateVendorDialog.tsx    |   19 +-
 ...DeleteBusinessAssociateAgreementDialog.tsx |    4 +-
 .../DeleteDataPrivacyAgreementDialog.tsx      |    4 +-
 .../EditBusinessAssociateAgreementDialog.tsx  |    6 +-
 .../vendors/dialogs/EditContactDialog.tsx     |    8 +-
 .../EditDataPrivacyAgreementDialog.tsx        |    6 +-
 .../vendors/dialogs/EditServiceDialog.tsx     |   12 +-
 .../dialogs/ImportAssessmentDialog.tsx        |   13 +-
 ...UploadBusinessAssociateAgreementDialog.tsx |  101 +-
 .../UploadDataPrivacyAgreementDialog.tsx      |  101 +-
 .../vendors/tabs/VendorCertificationsTab.tsx  |   67 +-
 .../vendors/tabs/VendorComplianceTab.tsx      |    6 +-
 .../vendors/tabs/VendorContactsTab.tsx        |   54 +-
 .../vendors/tabs/VendorOverviewTab.tsx        |  234 +--
 .../vendors/tabs/VendorRiskAssessmentTab.tsx  |   18 +-
 .../vendors/tabs/VendorServicesTab.tsx        |   10 +-
 apps/console/src/routes.tsx                   |    5 +-
 .../src/routes/continualImprovementRoutes.ts  |    4 +-
 apps/console/src/routes/documentsRoutes.ts    |    5 +-
 apps/console/src/routes/frameworkRoutes.ts    |    6 +-
 apps/console/src/routes/measureRoutes.ts      |    5 +-
 apps/console/src/routes/meetingsRoutes.ts     |    1 +
 apps/console/src/routes/peopleRoutes.ts       |    4 +-
 .../src/routes/processingActivityRoutes.ts    |    8 +-
 .../console/src/routes/rightsRequestRoutes.ts |    2 +-
 apps/console/src/routes/riskRoutes.ts         |   12 +-
 .../src/routes/statesOfApplicabilityRoutes.ts |    8 +-
 apps/console/src/routes/vendorRoutes.ts       |    8 +-
 apps/console/src/types.ts                     |    8 +-
 packages/eslint-config/src/reactConfigs.ts    |   13 +-
 .../eslint-config/src/stylisticConfigs.ts     |    9 +-
 packages/ui/src/Molecules/Field/Field.tsx     |    8 +-
 244 files changed, 7685 insertions(+), 8029 deletions(-)
 delete mode 100644 apps/console/src/components/form/StateOfApplicabilityControlsField.tsx

diff --git a/apps/console/src/__generated__/core/NewDomainDialogMutation.graphql.ts b/apps/console/src/__generated__/core/NewDomainDialogMutation.graphql.ts
index 560c63bdb..6f12b98d8 100644
--- a/apps/console/src/__generated__/core/NewDomainDialogMutation.graphql.ts
+++ b/apps/console/src/__generated__/core/NewDomainDialogMutation.graphql.ts
@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<098714fcfe212fae40bdad19b10f8a00>>
+ * @generated SignedSource<<d78dfc5b8db81e410f3f606fb91cd137>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -20,6 +20,7 @@ export type NewDomainDialogMutation$variables = {
 export type NewDomainDialogMutation$data = {
   readonly createCustomDomain: {
     readonly customDomain: {
+      readonly canDelete: boolean;
       readonly createdAt: string;
       readonly dnsRecords: ReadonlyArray<{
         readonly name: string;
@@ -159,6 +160,19 @@ v1 = [
             "kind": "ScalarField",
             "name": "sslExpiresAt",
             "storageKey": null
+          },
+          {
+            "alias": "canDelete",
+            "args": [
+              {
+                "kind": "Literal",
+                "name": "action",
+                "value": "core:custom-domain:delete"
+              }
+            ],
+            "kind": "ScalarField",
+            "name": "permission",
+            "storageKey": "permission(action:\"core:custom-domain:delete\")"
           }
         ],
         "storageKey": null
@@ -185,16 +199,16 @@ return {
     "selections": (v1/*: any*/)
   },
   "params": {
-    "cacheID": "b8aa27fe9ab3442dea9b96a70966524b",
+    "cacheID": "39d421d36a6418d0ee687d43b9d7a7ee",
     "id": null,
     "metadata": {},
     "name": "NewDomainDialogMutation",
     "operationKind": "mutation",
-    "text": "mutation NewDomainDialogMutation(\n  $input: CreateCustomDomainInput!\n) {\n  createCustomDomain(input: $input) {\n    customDomain {\n      id\n      domain\n      sslStatus\n      dnsRecords {\n        type\n        name\n        value\n        ttl\n        purpose\n      }\n      createdAt\n      updatedAt\n      sslExpiresAt\n    }\n  }\n}\n"
+    "text": "mutation NewDomainDialogMutation(\n  $input: CreateCustomDomainInput!\n) {\n  createCustomDomain(input: $input) {\n    customDomain {\n      id\n      domain\n      sslStatus\n      dnsRecords {\n        type\n        name\n        value\n        ttl\n        purpose\n      }\n      createdAt\n      updatedAt\n      sslExpiresAt\n      canDelete: permission(action: \"core:custom-domain:delete\")\n    }\n  }\n}\n"
   }
 };
 })();
 
-(node as any).hash = "f49cd22c5d6656e662fad5afab6fc344";
+(node as any).hash = "37ef764ab4f78a6898f06d00374347ee";
 
 export default node;
diff --git a/apps/console/src/components/PageError.tsx b/apps/console/src/components/PageError.tsx
index 4b64f1682..1c9ff2ac4 100644
--- a/apps/console/src/components/PageError.tsx
+++ b/apps/console/src/components/PageError.tsx
@@ -26,8 +26,8 @@ export function PageError({ resetErrorBoundary, error: propsError }: Props) {
   // Reset error boundary on page change
   useEffect(() => {
     if (
-      location.pathname !== baseLocation.current.pathname &&
-      resetErrorBoundary
+      location.pathname !== baseLocation.current.pathname
+      && resetErrorBoundary
     ) {
       resetErrorBoundary();
     }
@@ -54,7 +54,7 @@ export function PageError({ resetErrorBoundary, error: propsError }: Props) {
     );
   }
 
-  if (!error || (error && error.toString().includes("PAGE_NOT_FOUND"))) {
+  if (!error || (error instanceof Error && error.message.includes("PAGE_NOT_FOUND"))) {
     return (
       <div className={classNames.wrapper}>
         <h1 className={classNames.title}>
@@ -68,7 +68,7 @@ export function PageError({ resetErrorBoundary, error: propsError }: Props) {
     );
   }
 
-  if (error && error.toString().includes("FORBIDDEN")) {
+  if (error instanceof Error && error.message.includes("FORBIDDEN")) {
     return (
       <div className={classNames.wrapper}>
         <h1 className={classNames.title}>
@@ -82,7 +82,7 @@ export function PageError({ resetErrorBoundary, error: propsError }: Props) {
     );
   }
 
-  if (error && error.toString().includes("UNAUTHORIZED")) {
+  if (error instanceof Error && error.message.includes("UNAUTHORIZED")) {
     return (
       <div className={classNames.wrapper}>
         <h1 className={classNames.title}>
@@ -103,7 +103,8 @@ export function PageError({ resetErrorBoundary, error: propsError }: Props) {
         <summary className={classNames.description}>
           {__("Something went wrong")}
         </summary>
-        <p className={classNames.detail}>{error.toString()}</p>
+        {error instanceof Error
+          && <p className={classNames.detail}>{error.message}</p>}
       </details>
     </div>
   );
diff --git a/apps/console/src/components/SnapshotBanner.tsx b/apps/console/src/components/SnapshotBanner.tsx
index b8cbe6698..6f8b2bbc3 100644
--- a/apps/console/src/components/SnapshotBanner.tsx
+++ b/apps/console/src/components/SnapshotBanner.tsx
@@ -46,8 +46,8 @@ export function SnapshotBanner({ snapshotId }: Props) {
   }
 
   if (
-    snapshot.type &&
-    !isSnapshotTypeValidForUrl(snapshot.type, location.pathname)
+    snapshot.type
+    && !isSnapshotTypeValidForUrl(snapshot.type, location.pathname)
   ) {
     throw new Error("PAGE_NOT_FOUND");
   }
@@ -58,7 +58,9 @@ export function SnapshotBanner({ snapshotId }: Props) {
       <div className="flex-1">
         <div className="flex items-center gap-2 mb-1">
           <span className="font-medium text-warning-800">
-            {__("Snapshot")} {snapshot.name}
+            {__("Snapshot")}
+            {" "}
+            {snapshot.name}
           </span>
         </div>
         <p className="text-sm text-warning-700">
diff --git a/apps/console/src/components/assets/AssetsTable.tsx b/apps/console/src/components/assets/AssetsTable.tsx
index 27b57db28..20b24b332 100644
--- a/apps/console/src/components/assets/AssetsTable.tsx
+++ b/apps/console/src/components/assets/AssetsTable.tsx
@@ -141,7 +141,7 @@ export function AssetsTable(props: Props) {
           <VendorsCell
             name="vendorIds"
             organizationId={organizationId}
-            defaultValue={item?.vendors?.edges?.map((edge) => edge.node) ?? []}
+            defaultValue={item?.vendors?.edges?.map(edge => edge.node) ?? []}
           />
         </>
       )}
@@ -163,7 +163,7 @@ const useDeleteAsset = (connectionId: string) => {
         promisifyMutation(mutate)({
           variables: {
             input: {
-              assetId: asset.id!,
+              assetId: asset.id,
             },
             connections: [connectionId],
           },
@@ -171,7 +171,7 @@ const useDeleteAsset = (connectionId: string) => {
       {
         message: sprintf(
           __(
-            'This will permanently delete "%s". This action cannot be undone.',
+            "This will permanently delete \"%s\". This action cannot be undone.",
           ),
           asset.name,
         ),
diff --git a/apps/console/src/components/assets/ReadOnlyAssetsTable.tsx b/apps/console/src/components/assets/ReadOnlyAssetsTable.tsx
index ebae035d9..968aa1a4e 100644
--- a/apps/console/src/components/assets/ReadOnlyAssetsTable.tsx
+++ b/apps/console/src/components/assets/ReadOnlyAssetsTable.tsx
@@ -39,7 +39,7 @@ export function ReadOnlyAssetsTable(props: Props) {
         </Tr>
       </Thead>
       <Tbody>
-        {assets.map((entry) => (
+        {assets.map(entry => (
           <AssetRow key={entry.id} entry={entry} />
         ))}
       </Tbody>
@@ -51,7 +51,7 @@ function AssetRow({ entry }: { entry: AssetEntry }) {
   const organizationId = useOrganizationId();
   const { __ } = useTranslate();
   const { snapshotId } = useParams<{ snapshotId?: string }>();
-  const vendors = entry.vendors?.edges.map((edge) => edge.node) ?? [];
+  const vendors = entry.vendors?.edges.map(edge => edge.node) ?? [];
 
   return (
     <Tr
@@ -70,31 +70,34 @@ function AssetRow({ entry }: { entry: AssetEntry }) {
       <Td>{entry.amount}</Td>
       <Td>{entry.owner?.fullName ?? __("Unassigned")}</Td>
       <Td>
-        {vendors.length > 0 ? (
-          <div className="flex flex-wrap gap-1">
-            {vendors.slice(0, 3).map((vendor) => (
-              <Badge
-                key={vendor.id}
-                variant="neutral"
-                className="flex items-center gap-1"
-              >
-                <Avatar
-                  name={vendor.name}
-                  src={faviconUrl(vendor.websiteUrl)}
-                  size="s"
-                />
-                <span className="text-xs">{vendor.name}</span>
-              </Badge>
-            ))}
-            {vendors.length > 3 && (
-              <Badge variant="neutral" className="text-xs">
-                +{vendors.length - 3}
-              </Badge>
+        {vendors.length > 0
+          ? (
+              <div className="flex flex-wrap gap-1">
+                {vendors.slice(0, 3).map(vendor => (
+                  <Badge
+                    key={vendor.id}
+                    variant="neutral"
+                    className="flex items-center gap-1"
+                  >
+                    <Avatar
+                      name={vendor.name}
+                      src={faviconUrl(vendor.websiteUrl)}
+                      size="s"
+                    />
+                    <span className="text-xs">{vendor.name}</span>
+                  </Badge>
+                ))}
+                {vendors.length > 3 && (
+                  <Badge variant="neutral" className="text-xs">
+                    +
+                    {vendors.length - 3}
+                  </Badge>
+                )}
+              </div>
+            )
+          : (
+              <span className="text-txt-secondary text-sm">{__("None")}</span>
             )}
-          </div>
-        ) : (
-          <span className="text-txt-secondary text-sm">{__("None")}</span>
-        )}
       </Td>
     </Tr>
   );
diff --git a/apps/console/src/components/audits/LinkedAuditsCard.tsx b/apps/console/src/components/audits/LinkedAuditsCard.tsx
index 5621ac074..399f1bdb5 100644
--- a/apps/console/src/components/audits/LinkedAuditsCard.tsx
+++ b/apps/console/src/components/audits/LinkedAuditsCard.tsx
@@ -131,7 +131,7 @@ export function LinkedAuditsCard<Params>(props: Props<Params>) {
               </Td>
             </Tr>
           )}
-          {audits.map((audit) => (
+          {audits.map(audit => (
             <AuditRow
               key={audit.id}
               audit={audit}
diff --git a/apps/console/src/components/audits/LinkedAuditsDialog.tsx b/apps/console/src/components/audits/LinkedAuditsDialog.tsx
index c5947ea34..09fa4b00b 100644
--- a/apps/console/src/components/audits/LinkedAuditsDialog.tsx
+++ b/apps/console/src/components/audits/LinkedAuditsDialog.tsx
@@ -104,15 +104,15 @@ function LinkedAuditsDialogContent(props: Omit<Props, "children">) {
   const { __ } = useTranslate();
   const [search, setSearch] = useState("");
   const audits = useMemo(
-    () => data.audits?.edges?.map((edge) => edge.node) ?? [],
+    () => data.audits?.edges?.map(edge => edge.node) ?? [],
     [data.audits],
   );
   const linkedIds = useMemo(() => {
-    return new Set(props.linkedAudits?.map((a) => a.id) ?? []);
+    return new Set(props.linkedAudits?.map(a => a.id) ?? []);
   }, [props.linkedAudits]);
 
   const filteredAudits = useMemo(() => {
-    return audits.filter((audit) =>
+    return audits.filter(audit =>
       (audit.name || "").toLowerCase().includes(search.toLowerCase()),
     );
   }, [audits, search]);
@@ -127,7 +127,7 @@ function LinkedAuditsDialogContent(props: Omit<Props, "children">) {
         />
       </div>
       <div className="divide-y divide-border-low">
-        {filteredAudits.map((audit) => (
+        {filteredAudits.map(audit => (
           <AuditRow
             key={audit.id}
             audit={audit}
@@ -186,7 +186,9 @@ function AuditRow(props: RowProps) {
         asChild
       >
         <span>
-          <IconComponent size={16} /> {isLinked ? __("Unlink") : __("Link")}
+          <IconComponent size={16} />
+          {" "}
+          {isLinked ? __("Unlink") : __("Link")}
         </span>
       </Button>
     </button>
diff --git a/apps/console/src/components/controls/LinkedControlsCard.tsx b/apps/console/src/components/controls/LinkedControlsCard.tsx
index 9abe40266..167b82ef5 100644
--- a/apps/console/src/components/controls/LinkedControlsCard.tsx
+++ b/apps/console/src/components/controls/LinkedControlsCard.tsx
@@ -111,7 +111,7 @@ export function LinkedControlsCard<Params>(props: Props<Params>) {
             </Td>
           </Tr>
         )}
-        {controls.map((control) => (
+        {controls.map(control => (
           <ControlRow
             key={control.id}
             control={control}
@@ -152,7 +152,8 @@ function ControlRow(props: {
     >
       <Td>
         <span className="inline-flex gap-2 items-center">
-          {control.framework.name}{" "}
+          {control.framework.name}
+          {" "}
           <Badge size="md">{control.sectionTitle}</Badge>
         </span>
       </Td>
diff --git a/apps/console/src/components/controls/LinkedControlsDialog.tsx b/apps/console/src/components/controls/LinkedControlsDialog.tsx
index 4eebf15e1..a240366a8 100644
--- a/apps/console/src/components/controls/LinkedControlsDialog.tsx
+++ b/apps/console/src/components/controls/LinkedControlsDialog.tsx
@@ -12,6 +12,7 @@ import {
 } from "@probo/ui";
 import {
   Suspense,
+  useEffect,
   useMemo,
   useRef,
   useState,
@@ -104,11 +105,11 @@ export function LinkedControlsDialog(props: Props) {
         </div>
         <div ref={contentRef}>
           <Suspense
-            fallback={
+            fallback={(
               <div style={{ minHeight }}>
                 <Spinner centered />
               </div>
-            }
+            )}
           >
             <LinkedControlsDialogContent {...props} ref={searchRef} />
           </Suspense>
@@ -123,32 +124,37 @@ function LinkedControlsDialogContent(props: Props & { ref: SearchRef }) {
   const mainData = useLazyLoadQuery<LinkedControlsDialogQuery>(query, {
     organizationId,
   });
-  const { data, loadNext, hasNext, isLoadingNext, refetch } =
-    usePaginationFragment(
-      controlsFragment,
-      mainData.organization as LinkedControlsDialogFragment$key,
-    );
+  const { data, loadNext, hasNext, isLoadingNext, refetch } = usePaginationFragment(
+    controlsFragment,
+    mainData.organization as LinkedControlsDialogFragment$key,
+  );
 
-  const controls = data.controls?.edges?.map((edge) => edge.node) ?? [];
+  const controls = data.controls?.edges?.map(edge => edge.node) ?? [];
   const controlIds = useMemo(() => {
-    return new Set(props.linkedControls?.map((c) => c.id) ?? []);
+    return new Set(props.linkedControls?.map(c => c.id) ?? []);
   }, [props.linkedControls]);
 
-  props.ref.current = {
-    search: useDebounceCallback((v: string) => {
-      refetch({
-        first: 20,
-        filter: {
-          query: v,
-        },
-      });
-    }, 500),
-  };
+  const handleSearch = useDebounceCallback((v: string) => {
+    refetch({
+      first: 20,
+      filter: {
+        query: v,
+      },
+    });
+  }, 500);
+
+  useEffect(() => {
+    if (!props.ref.current) {
+      props.ref.current = {
+        search: handleSearch,
+      };
+    }
+  });
 
   return (
     <>
       <div className="divide-y divide-border-low">
-        {controls.map((control) => (
+        {controls.map(control => (
           <ControlRow
             key={control.id}
             control={control}
@@ -182,7 +188,10 @@ function ControlRow(
       className="py-4 flex items-center gap-4 hover:bg-subtle cursor-pointer px-6 w-full text-start"
       onClick={() => onClick(props.control.id)}
     >
-      {props.control.sectionTitle} : {props.control.name}
+      {props.control.sectionTitle}
+      {" "}
+      :
+      {props.control.name}
       <Badge>{props.control.framework.name}</Badge>
       <Button
         disabled={props.disabled}
@@ -191,7 +200,9 @@ function ControlRow(
         asChild
       >
         <span>
-          <IconComponent size={16} /> {isLinked ? __("Unlink") : __("Link")}
+          <IconComponent size={16} />
+          {" "}
+          {isLinked ? __("Unlink") : __("Link")}
         </span>
       </Button>
     </button>
diff --git a/apps/console/src/components/documents/BulkExportDialog.tsx b/apps/console/src/components/documents/BulkExportDialog.tsx
index 061a92bec..ee1895e89 100644
--- a/apps/console/src/components/documents/BulkExportDialog.tsx
+++ b/apps/console/src/components/documents/BulkExportDialog.tsx
@@ -35,7 +35,7 @@ type BulkExportFormData = z.infer<typeof bulkExportSchema>;
 
 type Props = {
   children: ReactNode;
-  onExport: (options: BulkExportFormData) => void;
+  onExport: (options: BulkExportFormData) => Promise<void>;
   isLoading?: boolean;
   defaultEmail: string;
   selectedCount: number;
@@ -59,7 +59,7 @@ export const BulkExportDialog = forwardRef<BulkExportDialogRef, Props>(
           watermarkEmail: defaultEmail,
           withSignatures: true,
         },
-      }
+      },
     );
 
     const watchWatermark = watch("withWatermark");
@@ -70,14 +70,14 @@ export const BulkExportDialog = forwardRef<BulkExportDialogRef, Props>(
       close: () => dialogRef.current?.close(),
     }));
 
-    const onSubmit = handleSubmit((data) => {
+    const onSubmit = async (data: BulkExportFormData) => {
       const options = {
         ...data,
         watermarkEmail: data.withWatermark ? data.watermarkEmail : undefined,
       };
-      onExport(options);
+      await onExport(options);
       dialogRef.current?.close();
-    });
+    };
 
     return (
       <>
@@ -87,13 +87,13 @@ export const BulkExportDialog = forwardRef<BulkExportDialogRef, Props>(
           ref={dialogRef}
           title={sprintf(__("Export %s Documents"), selectedCount)}
         >
-          <form onSubmit={onSubmit}>
+          <form onSubmit={e => void handleSubmit(onSubmit)(e)}>
             <DialogContent className="space-y-4" padded>
               <div className="space-y-4">
                 <div className="flex items-start gap-3">
                   <Checkbox
                     checked={watchSignatures}
-                    onChange={(checked) => setValue("withSignatures", checked)}
+                    onChange={checked => setValue("withSignatures", checked)}
                   />
                   <div className="flex-1">
                     <label className="text-sm font-medium text-txt-primary cursor-pointer">
@@ -108,7 +108,7 @@ export const BulkExportDialog = forwardRef<BulkExportDialogRef, Props>(
                 <div className="flex items-start gap-3">
                   <Checkbox
                     checked={watchWatermark}
-                    onChange={(checked) => setValue("withWatermark", checked)}
+                    onChange={checked => setValue("withWatermark", checked)}
                   />
                   <div className="flex-1">
                     <label className="text-sm font-medium text-txt-primary cursor-pointer">
@@ -146,19 +146,23 @@ export const BulkExportDialog = forwardRef<BulkExportDialogRef, Props>(
                 type="submit"
                 disabled={isLoading}
               >
-                {isLoading ? (
-                  <>
-                    <Spinner size={16} />
-                    {__("Exporting...")}
-                  </>
-                ) : (
-                  __("Export Documents")
-                )}
+                {isLoading
+                  ? (
+                      <>
+                        <Spinner size={16} />
+                        {__("Exporting...")}
+                      </>
+                    )
+                  : (
+                      __("Export Documents")
+                    )}
               </Button>
             </DialogFooter>
           </form>
         </Dialog>
       </>
     );
-  }
+  },
 );
+
+BulkExportDialog.displayName = "BulkExportDialog";
diff --git a/apps/console/src/components/documents/LinkedDocumentsCard.tsx b/apps/console/src/components/documents/LinkedDocumentsCard.tsx
index 8c2e6c25d..fe8b74cef 100644
--- a/apps/console/src/components/documents/LinkedDocumentsCard.tsx
+++ b/apps/console/src/components/documents/LinkedDocumentsCard.tsx
@@ -145,7 +145,7 @@ export function LinkedDocumentsCard<Params>(props: Props<Params>) {
               </Td>
             </Tr>
           )}
-          {documents.map((document) => (
+          {documents.map(document => (
             <DocumentRow
               key={document.id}
               document={document}
diff --git a/apps/console/src/components/documents/LinkedDocumentsDialog.tsx b/apps/console/src/components/documents/LinkedDocumentsDialog.tsx
index 2d07c7b82..223358c04 100644
--- a/apps/console/src/components/documents/LinkedDocumentsDialog.tsx
+++ b/apps/console/src/components/documents/LinkedDocumentsDialog.tsx
@@ -102,15 +102,15 @@ function LinkedDocumentsDialogContent(props: Omit<Props, "children">) {
   const { __ } = useTranslate();
   const [search, setSearch] = useState("");
   const documents = useMemo(
-    () => data.documents?.edges?.map((edge) => edge.node) ?? [],
+    () => data.documents?.edges?.map(edge => edge.node) ?? [],
     [data.documents],
   );
   const linkedIds = useMemo(() => {
-    return new Set(props.linkedDocuments?.map((m) => m.id) ?? []);
+    return new Set(props.linkedDocuments?.map(m => m.id) ?? []);
   }, [props.linkedDocuments]);
 
   const filteredDocuments = useMemo(() => {
-    return documents.filter((document) =>
+    return documents.filter(document =>
       document.title.toLowerCase().includes(search.toLowerCase()),
     );
   }, [documents, search]);
@@ -125,7 +125,7 @@ function LinkedDocumentsDialogContent(props: Omit<Props, "children">) {
         />
       </div>
       <div className="divide-y divide-border-low">
-        {filteredDocuments.map((document) => (
+        {filteredDocuments.map(document => (
           <DocumentRow
             key={document.id}
             document={document}
@@ -177,7 +177,9 @@ function DocumentRow(props: RowProps) {
         asChild
       >
         <span>
-          <IconComponent size={16} /> {isLinked ? __("Unlink") : __("Link")}
+          <IconComponent size={16} />
+          {" "}
+          {isLinked ? __("Unlink") : __("Link")}
         </span>
       </Button>
     </button>
diff --git a/apps/console/src/components/documents/PDFPreview.tsx b/apps/console/src/components/documents/PDFPreview.tsx
index 0d2d38375..98a27f5ad 100644
--- a/apps/console/src/components/documents/PDFPreview.tsx
+++ b/apps/console/src/components/documents/PDFPreview.tsx
@@ -15,8 +15,8 @@ import { IconMinusLarge } from "@probo/ui/src/Atoms/Icons/IconMinusLarge.tsx";
 // Worker for PDF.js
 pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;
 
-const btnClass =
-  "size-8 grid place-items-center hover:bg-secondary-hover cursor-pointer rounded-sm disabled:opacity-30 transition-all";
+const btnClass
+  = "size-8 grid place-items-center hover:bg-secondary-hover cursor-pointer rounded-sm disabled:opacity-30 transition-all";
 
 export function PDFPreview({ src, name }: { src: string; name?: string }) {
   const [numPages, setNumPages] = useState(0);
@@ -92,7 +92,10 @@ export function PDFPreview({ src, name }: { src: string; name?: string }) {
             <IconChevronLeft size={16} />
           </button>
           <div>
-            {currentPage} / {numPages}
+            {currentPage}
+            {" "}
+            /
+            {numPages}
           </div>
           <button onClick={movePage(1)} className={btnClass}>
             <IconChevronRight size={16} />
@@ -123,7 +126,7 @@ export function PDFPreview({ src, name }: { src: string; name?: string }) {
           ref={documentRef}
         >
           {numPages === 0 && <Spinner className="mx-auto" />}
-          {times(numPages, (index) => (
+          {times(numPages, index => (
             <Page
               className="w-max h-max mx-auto shadow-mid"
               key={index.toString()}
diff --git a/apps/console/src/components/documents/PdfDownloadDialog.tsx b/apps/console/src/components/documents/PdfDownloadDialog.tsx
index 99c4b04c9..26c97f2a7 100644
--- a/apps/console/src/components/documents/PdfDownloadDialog.tsx
+++ b/apps/console/src/components/documents/PdfDownloadDialog.tsx
@@ -42,8 +42,8 @@ export const PdfDownloadDialog = forwardRef<PdfDownloadDialogRef, Props>(
     const { __ } = useTranslate();
     const dialogRef = useDialogRef();
 
-    const { register, handleSubmit, formState, watch, setValue } =
-      useFormWithSchema(pdfDownloadSchema, {
+    const { register, handleSubmit, formState, watch, setValue }
+      = useFormWithSchema(pdfDownloadSchema, {
         defaultValues: {
           withWatermark: false,
           watermarkEmail: defaultEmail,
@@ -59,14 +59,14 @@ export const PdfDownloadDialog = forwardRef<PdfDownloadDialogRef, Props>(
       close: () => dialogRef.current?.close(),
     }));
 
-    const onSubmit = handleSubmit((data) => {
+    const onSubmit = (data: PdfDownloadFormData) => {
       const options = {
         ...data,
         watermarkEmail: data.withWatermark ? data.watermarkEmail : undefined,
       };
       onDownload(options);
       dialogRef.current?.close();
-    });
+    };
 
     return (
       <>
@@ -76,13 +76,13 @@ export const PdfDownloadDialog = forwardRef<PdfDownloadDialogRef, Props>(
           ref={dialogRef}
           title={__("Download PDF Options")}
         >
-          <form onSubmit={onSubmit}>
+          <form onSubmit={e => void handleSubmit(onSubmit)(e)}>
             <DialogContent className="space-y-4" padded>
               <div className="space-y-4">
                 <div className="flex items-start gap-3">
                   <Checkbox
                     checked={watchSignatures}
-                    onChange={(checked) => setValue("withSignatures", checked)}
+                    onChange={checked => setValue("withSignatures", checked)}
                   />
                   <div className="flex-1">
                     <label className="text-sm font-medium text-txt-primary cursor-pointer">
@@ -99,7 +99,7 @@ export const PdfDownloadDialog = forwardRef<PdfDownloadDialogRef, Props>(
                 <div className="flex items-start gap-3">
                   <Checkbox
                     checked={watchWatermark}
-                    onChange={(checked) => setValue("withWatermark", checked)}
+                    onChange={checked => setValue("withWatermark", checked)}
                   />
                   <div className="flex-1">
                     <label className="text-sm font-medium text-txt-primary cursor-pointer">
@@ -130,14 +130,16 @@ export const PdfDownloadDialog = forwardRef<PdfDownloadDialogRef, Props>(
             </DialogContent>
             <DialogFooter>
               <Button type="submit" disabled={isLoading}>
-                {isLoading ? (
-                  <>
-                    <Spinner size={16} />
-                    {__("Downloading...")}
-                  </>
-                ) : (
-                  __("Download PDF")
-                )}
+                {isLoading
+                  ? (
+                      <>
+                        <Spinner size={16} />
+                        {__("Downloading...")}
+                      </>
+                    )
+                  : (
+                      __("Download PDF")
+                    )}
               </Button>
             </DialogFooter>
           </form>
diff --git a/apps/console/src/components/form/AuditSelectField.tsx b/apps/console/src/components/form/AuditSelectField.tsx
index fa26768af..501461a6a 100644
--- a/apps/console/src/components/form/AuditSelectField.tsx
+++ b/apps/console/src/components/form/AuditSelectField.tsx
@@ -74,10 +74,10 @@ function AuditSelectWithQuery<T extends FieldValues = FieldValues>(
     { organizationId },
     { fetchPolicy: "network-only" },
   );
-  const audits =
-    data?.organization?.audits?.edges
-      ?.map((edge) => edge.node)
-      .filter((node) => node !== null) ?? [];
+  const audits
+    = data?.organization?.audits?.edges
+      ?.map(edge => edge.node)
+      .filter(node => node !== null) ?? [];
 
   const NONE_VALUE = "__NONE__";
 
@@ -91,9 +91,8 @@ function AuditSelectWithQuery<T extends FieldValues = FieldValues>(
           id={name}
           variant="editor"
           placeholder={__("Select an audit")}
-          onValueChange={(value) =>
-            field.onChange(value === NONE_VALUE ? "" : value)
-          }
+          onValueChange={value =>
+            field.onChange(value === NONE_VALUE ? "" : value)}
           key={audits?.length.toString() ?? "0"}
           {...field}
           className="w-full"
@@ -102,7 +101,7 @@ function AuditSelectWithQuery<T extends FieldValues = FieldValues>(
           <Option value={NONE_VALUE}>
             <span className="text-txt-tertiary">{__("None")}</span>
           </Option>
-          {audits?.map((audit) => (
+          {audits?.map(audit => (
             <Option key={audit.id} value={audit.id}>
               <div className="flex items-center justify-between w-full">
                 <span>
diff --git a/apps/console/src/components/form/ControlledField.tsx b/apps/console/src/components/form/ControlledField.tsx
index 36d223691..e307bc7c1 100644
--- a/apps/console/src/components/form/ControlledField.tsx
+++ b/apps/console/src/components/form/ControlledField.tsx
@@ -1,18 +1,25 @@
 import type { ComponentProps } from "react";
 import { Field } from "@probo/ui";
-import { Controller, type FieldValues } from "react-hook-form";
+import { Controller, type FieldPath, type FieldValues } from "react-hook-form";
 import { Select } from "@probo/ui";
 
-type Props<T extends typeof Field | typeof Select, TFieldValues extends FieldValues = FieldValues> =
-  ComponentProps<T> & Omit<ComponentProps<typeof Controller<TFieldValues>>, "render">;
+type Props<
+  T extends typeof Field | typeof Select,
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>
+  = ComponentProps<T> & Omit<ComponentProps<typeof Controller<TFieldValues, TName>>, "render">;
 
-export function ControlledField<TFieldValues extends FieldValues = FieldValues>({
+export function ControlledField<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
   control,
   name,
   ...props
-}: Props<typeof Field, TFieldValues>) {
+}: Props<typeof Field, TFieldValues, TName>) {
   return (
-    <Controller
+    <Controller<TFieldValues, TName>
       control={control}
       name={name}
       render={({ field }) => (
@@ -21,7 +28,7 @@ export function ControlledField<TFieldValues extends FieldValues = FieldValues>(
             {...props}
             {...field}
             // TODO : Find a better way to handle this case (comparing number and string for select create issues)
-            value={field.value ? field.value.toString() : ""}
+            value={field.value ? (field.value as readonly string[] | string | number).toString() : ""}
             onValueChange={field.onChange}
           />
         </>
diff --git a/apps/console/src/components/form/CountriesField.tsx b/apps/console/src/components/form/CountriesField.tsx
index 176ae3851..1bde80a0d 100644
--- a/apps/console/src/components/form/CountriesField.tsx
+++ b/apps/console/src/components/form/CountriesField.tsx
@@ -1,5 +1,5 @@
 import { useTranslate } from "@probo/i18n";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 import { Badge, Input, IconCrossLargeX } from "@probo/ui";
 import { type Control, Controller, type FieldPath, type FieldValues } from "react-hook-form";
 import { getCountryName, getCountryOptions, countries, type CountryCode } from "@probo/helpers";
@@ -35,16 +35,16 @@ type CountriesFieldInputProps = {
 
 function CountriesFieldInput(props: CountriesFieldInputProps) {
   const { __ } = useTranslate();
-  const animateBadge = useRef(false);
+  const [animateBadge, setAnimateBadge] = useState(false);
 
   const addCountry = (code: string) => {
-    animateBadge.current = true;
+    setAnimateBadge(true);
     props.onValueChange([...props.value, code]);
   };
 
   const removeCountry = (code: string) => {
-    animateBadge.current = true;
-    props.onValueChange(props.value.filter((v) => v !== code));
+    setAnimateBadge(true);
+    props.onValueChange(props.value.filter(v => v !== code));
   };
 
   return (
@@ -52,7 +52,7 @@ function CountriesFieldInput(props: CountriesFieldInputProps) {
       {props.value.length > 0 && (
         <div className="space-y-2">
           <div className="flex flex-wrap gap-2">
-            {props.value.map((countryCode) => (
+            {props.value.map(countryCode => (
               <Badge asChild size="md" key={countryCode}>
                 <button
                   onClick={() => removeCountry(countryCode)}
@@ -61,8 +61,8 @@ function CountriesFieldInput(props: CountriesFieldInputProps) {
                   className={clsx(
                     "hover:bg-subtle-hover cursor-pointer",
                     props.disabled && "opacity-50 cursor-not-allowed",
-                    animateBadge.current &&
-                      "starting:opacity-0 starting:w-0 w-max transition-all duration-500 starting:bg-accent"
+                    animateBadge
+                    && "starting:opacity-0 starting:w-0 w-max transition-all duration-500 starting:bg-accent",
                   )}
                 >
                   {getCountryName(__, countryCode as CountryCode)}
@@ -78,7 +78,7 @@ function CountriesFieldInput(props: CountriesFieldInputProps) {
       {!props.disabled && (
         <CountryInput
           availableCountries={countries.filter(
-            (c: CountryCode) => !props.value.includes(c)
+            (c: CountryCode) => !props.value.includes(c),
           )}
           onAdd={addCountry}
         />
@@ -108,7 +108,7 @@ function CountryInput({ availableCountries, onAdd }: CountryInputProps) {
   const filteredCountries = countryOptions
     .filter((option: { value: string; label: string }) => availableCountries.includes(option.value as CountryCode))
     .filter((option: { value: string; label: string }) =>
-      option.label.toLowerCase().includes(search.toLowerCase())
+      option.label.toLowerCase().includes(search.toLowerCase()),
     );
 
   const handleCountryClick = (value: string) => {
@@ -123,7 +123,7 @@ function CountryInput({ availableCountries, onAdd }: CountryInputProps) {
           <Input
             type="text"
             value={search}
-            onChange={(e) => setSearch(e.target.value)}
+            onChange={e => setSearch(e.target.value)}
             onFocus={() => setIsOpen(true)}
             placeholder={__("Search and add countries...")}
             className="w-full pr-8"
diff --git a/apps/console/src/components/form/DocumentClassificationOptions.tsx b/apps/console/src/components/form/DocumentClassificationOptions.tsx
index c6741b77b..91e45dd97 100644
--- a/apps/console/src/components/form/DocumentClassificationOptions.tsx
+++ b/apps/console/src/components/form/DocumentClassificationOptions.tsx
@@ -10,7 +10,7 @@ export function DocumentClassificationOptions() {
 
   return (
     <>
-      {documentClassifications.map((classification) => (
+      {documentClassifications.map(classification => (
         <Option key={classification} value={classification}>
           {getDocumentClassificationLabel(__, classification)}
         </Option>
diff --git a/apps/console/src/components/form/DocumentTypeOptions.tsx b/apps/console/src/components/form/DocumentTypeOptions.tsx
index ed357b814..a38f3d1ee 100644
--- a/apps/console/src/components/form/DocumentTypeOptions.tsx
+++ b/apps/console/src/components/form/DocumentTypeOptions.tsx
@@ -7,7 +7,7 @@ export function DocumentTypeOptions() {
 
   return (
     <>
-      {documentTypes.map((type) => (
+      {documentTypes.map(type => (
         <Option key={type} value={type}>
           {getDocumentTypeLabel(__, type)}
         </Option>
diff --git a/apps/console/src/components/form/EmailsField.tsx b/apps/console/src/components/form/EmailsField.tsx
index 2eafefcec..c0bc4cc40 100644
--- a/apps/console/src/components/form/EmailsField.tsx
+++ b/apps/console/src/components/form/EmailsField.tsx
@@ -12,7 +12,9 @@ type Props<TFieldValues extends FieldValues = FieldValues> = {
 /**
  * A field to handle multiple emails
  */
-export function EmailsField<TFieldValues extends FieldValues = FieldValues>({ control, register }: Props<TFieldValues>) {
+export function EmailsField<
+  TFieldValues extends FieldValues = FieldValues,
+>({ control, register }: Props<TFieldValues>) {
   const { __ } = useTranslate();
   const { fields, append, remove } = useFieldArray({
     name: "additionalEmailAddresses" as ArrayPath<TFieldValues>,
diff --git a/apps/console/src/components/form/MeasureSelectField.tsx b/apps/console/src/components/form/MeasureSelectField.tsx
index fcac751be..264031c0c 100644
--- a/apps/console/src/components/form/MeasureSelectField.tsx
+++ b/apps/console/src/components/form/MeasureSelectField.tsx
@@ -4,7 +4,10 @@ import { useTranslate } from "@probo/i18n";
 import { type Control, Controller, type FieldPath, type FieldValues } from "react-hook-form";
 import { usePaginatedMeasures } from "/hooks/graph/usePaginatedMeasures";
 
-type Props<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
+type Props<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
   organizationId: string;
   control: Control<TFieldValues>;
   name: TName;
@@ -39,7 +42,7 @@ export function MeasureSelectField<TFieldValues extends FieldValues = FieldValue
 }
 
 function MeasureSelectWithQuery<TFieldValues extends FieldValues = FieldValues>(
-  props: Pick<Props<TFieldValues>, "organizationId" | "control" | "name" | "disabled" | "optional">
+  props: Pick<Props<TFieldValues>, "organizationId" | "control" | "name" | "disabled" | "optional">,
 ) {
   const { __ } = useTranslate();
   const { name, organizationId, control, disabled, optional } = props;
@@ -49,16 +52,16 @@ function MeasureSelectWithQuery<TFieldValues extends FieldValues = FieldValues>(
     return (
       data?.measures.edges
         ?.filter(
-          (edge) =>
-            edge.node.name.toLowerCase().includes(search.toLowerCase()) ||
-            edge.node.description?.toLowerCase().includes(search.toLowerCase())
+          edge =>
+            edge.node.name.toLowerCase().includes(search.toLowerCase())
+            || edge.node.description?.toLowerCase().includes(search.toLowerCase()),
         )
-        .map((edge) => edge.node) ?? []
+        .map(edge => edge.node) ?? []
     );
   }, [data?.measures.edges, search]);
 
   const allMeasures = useMemo(() => {
-    return data?.measures.edges?.map((edge) => edge.node) ?? [];
+    return data?.measures.edges?.map(edge => edge.node) ?? [];
   }, [data?.measures.edges]);
 
   return (
@@ -67,7 +70,7 @@ function MeasureSelectWithQuery<TFieldValues extends FieldValues = FieldValues>(
         control={control}
         name={name}
         render={({ field }) => {
-          const selectedMeasure = field.value ? allMeasures?.find((m) => m.id === field.value) : null;
+          const selectedMeasure = field.value ? allMeasures?.find(m => m.id === field.value) : null;
 
           return (
             <Combobox
@@ -87,7 +90,7 @@ function MeasureSelectWithQuery<TFieldValues extends FieldValues = FieldValues>(
                   {__("None")}
                 </ComboboxItem>
               )}
-              {measures?.map((m) => (
+              {measures?.map(m => (
                 <ComboboxItem
                   key={m.id}
                   onClick={() => {
diff --git a/apps/console/src/components/form/PeopleMultiSelectField.tsx b/apps/console/src/components/form/PeopleMultiSelectField.tsx
index 886d9b930..6e94bf1f2 100644
--- a/apps/console/src/components/form/PeopleMultiSelectField.tsx
+++ b/apps/console/src/components/form/PeopleMultiSelectField.tsx
@@ -44,7 +44,7 @@ export function PeopleMultiSelectField<T extends FieldValues = FieldValues>({
 }
 
 function PeopleMultiSelectWithQuery<T extends FieldValues = FieldValues>(
-  props: Pick<Props<T>, "organizationId" | "control" | "name" | "disabled" | "selectedPeople">
+  props: Pick<Props<T>, "organizationId" | "control" | "name" | "disabled" | "selectedPeople">,
 ) {
   const { __ } = useTranslate();
   const { name, organizationId, control, selectedPeople = [] } = props;
@@ -52,7 +52,7 @@ function PeopleMultiSelectWithQuery<T extends FieldValues = FieldValues>(
   const [isOpen, setIsOpen] = useState(false);
 
   const allPeople = [...people];
-  selectedPeople.forEach(selectedPerson => {
+  selectedPeople.forEach((selectedPerson) => {
     if (!allPeople.find(p => p.id === selectedPerson.id)) {
       allPeople.push({
         id: selectedPerson.id,
@@ -99,7 +99,7 @@ function PeopleMultiSelectWithQuery<T extends FieldValues = FieldValues>(
                   open={isOpen}
                   onOpenChange={setIsOpen}
                 >
-                  {availablePeople.map((person) => (
+                  {availablePeople.map(person => (
                     <Option key={person.id} value={person.id} className="flex gap-2">
                       <Avatar
                         name={person.fullName}
@@ -120,7 +120,7 @@ function PeopleMultiSelectWithQuery<T extends FieldValues = FieldValues>(
 
               {selectedPeople.length > 0 && (
                 <div className="flex flex-wrap gap-2">
-                  {selectedPeople.map((person) => (
+                  {selectedPeople.map(person => (
                     <Badge key={person.id} variant="neutral" className="flex items-center gap-2">
                       <Avatar
                         name={person.fullName}
@@ -153,4 +153,3 @@ function PeopleMultiSelectWithQuery<T extends FieldValues = FieldValues>(
     </>
   );
 }
-
diff --git a/apps/console/src/components/form/PeopleSelectField.tsx b/apps/console/src/components/form/PeopleSelectField.tsx
index da3c9201b..25a067d7b 100644
--- a/apps/console/src/components/form/PeopleSelectField.tsx
+++ b/apps/console/src/components/form/PeopleSelectField.tsx
@@ -4,7 +4,10 @@ import { useTranslate } from "@probo/i18n";
 import { type Control, Controller, type FieldPath, type FieldValues } from "react-hook-form";
 import { usePeople } from "/hooks/graph/PeopleGraph.ts";
 
-type Props<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
+type Props<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
   organizationId: string;
   control: Control<TFieldValues>;
   name: TName;
@@ -55,16 +58,15 @@ function PeopleSelectWithQuery<TFieldValues extends FieldValues = FieldValues>(
           id={name}
           variant="editor"
           placeholder={__("Select an owner")}
-          onValueChange={(value) =>
-            field.onChange(value === "__NONE__" ? null : value)
-          }
+          onValueChange={value =>
+            field.onChange(value === "__NONE__" ? null : value)}
           key={people?.length.toString() ?? "0"}
           {...field}
           className="w-full"
           value={field.value ?? (props.optional ? "__NONE__" : "")}
         >
           {props.optional && <Option value="__NONE__">{__("None")}</Option>}
-          {people?.map((p) => (
+          {people?.map(p => (
             <Option key={p.id} value={p.id} className="flex gap-2">
               <Avatar name={p.fullName} />
               {p.fullName}
diff --git a/apps/console/src/components/form/ProcessingActivityEnumOptions.tsx b/apps/console/src/components/form/ProcessingActivityEnumOptions.tsx
index 70d8b11ec..3a2705213 100644
--- a/apps/console/src/components/form/ProcessingActivityEnumOptions.tsx
+++ b/apps/console/src/components/form/ProcessingActivityEnumOptions.tsx
@@ -21,7 +21,7 @@ export function SpecialOrCriminalDataOptions() {
 
   return (
     <>
-      {options.map((option) => (
+      {options.map(option => (
         <Option key={option.value} value={option.value}>
           {option.label}
         </Option>
@@ -47,7 +47,7 @@ export function LawfulBasisOptions() {
 
   return (
     <>
-      {options.map((option) => (
+      {options.map(option => (
         <Option key={option.value} value={option.value}>
           {option.label}
         </Option>
@@ -113,7 +113,7 @@ export function TransferSafeguardsOptions() {
 
   return (
     <>
-      {options.map((option) => (
+      {options.map(option => (
         <Option key={option.value} value={option.value}>
           {option.label}
         </Option>
@@ -135,7 +135,7 @@ export function DataProtectionImpactAssessmentOptions() {
 
   return (
     <>
-      {options.map((option) => (
+      {options.map(option => (
         <Option key={option.value} value={option.value}>
           {option.label}
         </Option>
@@ -157,7 +157,7 @@ export function TransferImpactAssessmentOptions() {
 
   return (
     <>
-      {options.map((option) => (
+      {options.map(option => (
         <Option key={option.value} value={option.value}>
           {option.label}
         </Option>
@@ -179,7 +179,7 @@ export function RoleOptions() {
 
   return (
     <>
-      {options.map((option) => (
+      {options.map(option => (
         <Option key={option.value} value={option.value}>
           {option.label}
         </Option>
diff --git a/apps/console/src/components/form/SnapshotTypeOptions.tsx b/apps/console/src/components/form/SnapshotTypeOptions.tsx
index 98fc7531d..f1479ccd4 100644
--- a/apps/console/src/components/form/SnapshotTypeOptions.tsx
+++ b/apps/console/src/components/form/SnapshotTypeOptions.tsx
@@ -7,7 +7,7 @@ export function SnapshotTypeOptions() {
 
   return (
     <>
-      {snapshotTypes.map((type) => (
+      {snapshotTypes.map(type => (
         <Option key={type} value={type}>
           {getSnapshotTypeLabel(__, type)}
         </Option>
diff --git a/apps/console/src/components/form/StateOfApplicabilityControlsField.tsx b/apps/console/src/components/form/StateOfApplicabilityControlsField.tsx
deleted file mode 100644
index 49f7c4e6d..000000000
--- a/apps/console/src/components/form/StateOfApplicabilityControlsField.tsx
+++ /dev/null
@@ -1,681 +0,0 @@
-import { useTranslate } from "@probo/i18n";
-import {
-    Field,
-    Select,
-    Option,
-    Checkbox,
-    Textarea,
-    Spinner,
-    Button,
-    IconChevronDown,
-    IconChevronUp,
-    IconTrashCan,
-    IconPlusLarge,
-} from "@probo/ui";
-import { Suspense, useState, useMemo, useEffect } from "react";
-import {
-    Controller,
-    type Control,
-    type UseFormSetValue,
-    type FieldValues,
-    type Path,
-    type PathValue,
-} from "react-hook-form";
-import { useLazyLoadQuery } from "react-relay";
-import { graphql } from "relay-runtime";
-import { useOrganizationId } from "/hooks/useOrganizationId";
-import type { StateOfApplicabilityControlsFieldFrameworksQuery } from "/__generated__/core/StateOfApplicabilityControlsFieldFrameworksQuery.graphql";
-import type { StateOfApplicabilityControlsFieldFrameworkControlsQuery } from "/__generated__/core/StateOfApplicabilityControlsFieldFrameworkControlsQuery.graphql";
-
-const frameworksQuery = graphql`
-    query StateOfApplicabilityControlsFieldFrameworksQuery(
-        $organizationId: ID!
-    ) {
-        organization: node(id: $organizationId) {
-            ... on Organization {
-                frameworks(first: 100) {
-                    edges {
-                        node {
-                            id
-                            name
-                        }
-                    }
-                }
-            }
-        }
-    }
-`;
-
-const frameworkControlsQuery = graphql`
-    query StateOfApplicabilityControlsFieldFrameworkControlsQuery(
-        $frameworkId: ID!
-    ) {
-        framework: node(id: $frameworkId) {
-            ... on Framework {
-                id
-                controls(
-                    first: 500
-                    orderBy: { field: SECTION_TITLE, direction: ASC }
-                ) {
-                    edges {
-                        node {
-                            id
-                            sectionTitle
-                            name
-                        }
-                    }
-                }
-            }
-        }
-    }
-`;
-
-type ControlSelection = {
-    controlId: string;
-    state: "EXCLUDED" | "IMPLEMENTED" | "NOT_IMPLEMENTED";
-    exclusionJustification?: string;
-};
-
-type FrameworkData = {
-    id: string;
-    name: string;
-    controls: Array<{
-        id: string;
-        sectionTitle: string;
-        name: string;
-    }>;
-};
-
-type Props<T extends FieldValues = FieldValues> = {
-    control: Control<T>;
-    setValue: UseFormSetValue<T>;
-    name: string;
-    initialControls?: ControlSelection[];
-    initialFrameworkIds?: Set<string>;
-};
-
-export function StateOfApplicabilityControlsField<
-    T extends FieldValues = FieldValues,
->({ control, setValue, name, initialControls, initialFrameworkIds }: Props<T>) {
-    const { __ } = useTranslate();
-    const organizationId = useOrganizationId();
-
-    // Initialize form value with initialControls
-    useEffect(() => {
-        if (initialControls && initialControls.length > 0) {
-            setValue(name as Path<T>, initialControls as PathValue<T, Path<T>>);
-        }
-    }, [initialControls, setValue, name]);
-
-    // Initialize framework selection from initialFrameworkIds
-    const [selectedFrameworkIds, setSelectedFrameworkIds] = useState<
-        Set<string>
-    >(initialFrameworkIds || new Set());
-    const [expandedFrameworks, setExpandedFrameworks] = useState<Set<string>>(
-        initialFrameworkIds || new Set(),
-    );
-    const [frameworkDataMap, setFrameworkDataMap] = useState<
-        Map<string, FrameworkData>
-    >(new Map());
-    const [newFrameworkId, setNewFrameworkId] = useState<string>("");
-
-    // Update framework selection when initialFrameworkIds changes
-    useEffect(() => {
-        if (initialFrameworkIds) {
-            setSelectedFrameworkIds(initialFrameworkIds);
-            setExpandedFrameworks(initialFrameworkIds);
-        }
-    }, [initialFrameworkIds]);
-
-    const addFramework = (frameworkId: string) => {
-        if (!frameworkId || selectedFrameworkIds.has(frameworkId)) return;
-        setSelectedFrameworkIds(
-            new Set([...selectedFrameworkIds, frameworkId]),
-        );
-        setExpandedFrameworks(new Set([...expandedFrameworks, frameworkId]));
-        setNewFrameworkId("");
-    };
-
-    const removeFramework = (frameworkId: string) => {
-        const newSet = new Set(selectedFrameworkIds);
-        newSet.delete(frameworkId);
-        setSelectedFrameworkIds(newSet);
-
-        const newExpanded = new Set(expandedFrameworks);
-        newExpanded.delete(frameworkId);
-        setExpandedFrameworks(newExpanded);
-
-        const newMap = new Map(frameworkDataMap);
-        newMap.delete(frameworkId);
-        setFrameworkDataMap(newMap);
-    };
-
-    const toggleFramework = (frameworkId: string) => {
-        const newExpanded = new Set(expandedFrameworks);
-        if (newExpanded.has(frameworkId)) {
-            newExpanded.delete(frameworkId);
-        } else {
-            newExpanded.add(frameworkId);
-        }
-        setExpandedFrameworks(newExpanded);
-    };
-
-    return (
-        <div className="space-y-4">
-            <div>
-                <h4 className="font-medium text-txt-primary mb-4">
-                    {__("Select Controls")}
-                </h4>
-
-                <div className="space-y-3">
-                    <Field label={__("Add Framework")}>
-                        <Suspense
-                            fallback={
-                                <Select
-                                    variant="editor"
-                                    disabled
-                                    placeholder={__("Loading...")}
-                                />
-                            }
-                        >
-                            <FrameworkSelect
-                                organizationId={organizationId}
-                                selectedFrameworkIds={selectedFrameworkIds}
-                                value={newFrameworkId}
-                                onValueChange={setNewFrameworkId}
-                                onAdd={addFramework}
-                            />
-                        </Suspense>
-                    </Field>
-
-                    {Array.from(selectedFrameworkIds).map((frameworkId) => (
-                        <Suspense
-                            key={frameworkId}
-                            fallback={
-                                <div className="flex items-center justify-center py-8">
-                                    <Spinner />
-                                </div>
-                            }
-                        >
-                            <FrameworkSection
-                                frameworkId={frameworkId}
-                                isExpanded={expandedFrameworks.has(frameworkId)}
-                                onToggle={() => toggleFramework(frameworkId)}
-                                onRemove={() => removeFramework(frameworkId)}
-                                control={control}
-                                name={name}
-                                frameworkDataMap={frameworkDataMap}
-                                setFrameworkDataMap={setFrameworkDataMap}
-                            />
-                        </Suspense>
-                    ))}
-                </div>
-            </div>
-        </div>
-    );
-}
-
-function FrameworkSelect({
-    organizationId,
-    selectedFrameworkIds,
-    value,
-    onValueChange,
-    onAdd,
-}: {
-    organizationId: string;
-    selectedFrameworkIds: Set<string>;
-    value: string;
-    onValueChange: (value: string) => void;
-    onAdd: (frameworkId: string) => void;
-}) {
-    const { __ } = useTranslate();
-    const data =
-        useLazyLoadQuery<StateOfApplicabilityControlsFieldFrameworksQuery>(
-            frameworksQuery,
-            { organizationId },
-            { fetchPolicy: "network-only" },
-        );
-    const frameworks: Array<{ id: string; name: string }> =
-        (data?.organization &&
-            "frameworks" in data.organization &&
-            data.organization.frameworks?.edges
-                ?.map((edge) => edge.node)
-                .filter(
-                    (node): node is NonNullable<typeof node> => node !== null,
-                )) ||
-        [];
-
-    const availableFrameworks = frameworks.filter(
-        (framework: { id: string; name: string }) =>
-            !selectedFrameworkIds.has(framework.id),
-    );
-
-    return (
-        <div className="flex gap-2">
-            <Select
-                variant="editor"
-                placeholder={__("Select a framework")}
-                onValueChange={onValueChange}
-                value={value}
-                className="flex-1"
-            >
-                {availableFrameworks.map(
-                    (framework: { id: string; name: string }) => (
-                        <Option key={framework.id} value={framework.id}>
-                            {framework.name}
-                        </Option>
-                    ),
-                )}
-            </Select>
-            <Button
-                type="button"
-                variant="secondary"
-                icon={IconPlusLarge}
-                onClick={() => onAdd(value)}
-                disabled={!value || selectedFrameworkIds.has(value)}
-            >
-                {__("Add")}
-            </Button>
-        </div>
-    );
-}
-
-function FrameworkSection<T extends FieldValues = FieldValues>({
-    frameworkId,
-    isExpanded,
-    onToggle,
-    onRemove,
-    control,
-    name,
-    frameworkDataMap,
-    setFrameworkDataMap,
-}: {
-    frameworkId: string;
-    isExpanded: boolean;
-    onToggle: () => void;
-    onRemove: () => void;
-    control: Control<T>;
-    name: string;
-    frameworkDataMap: Map<string, FrameworkData>;
-    setFrameworkDataMap: React.Dispatch<
-        React.SetStateAction<Map<string, FrameworkData>>
-    >;
-}) {
-    const { __ } = useTranslate();
-    const data =
-        useLazyLoadQuery<StateOfApplicabilityControlsFieldFrameworkControlsQuery>(
-            frameworkControlsQuery,
-            { frameworkId },
-            { fetchPolicy: "network-only" },
-        );
-
-    const framework =
-        data?.framework && "controls" in data.framework ? data.framework : null;
-    const frameworkName: string =
-        framework && "name" in framework && typeof framework.name === "string"
-            ? framework.name
-            : "";
-    const controls: Array<{ id: string; sectionTitle: string; name: string }> =
-        useMemo(
-            () =>
-                framework?.controls?.edges
-                    ?.map((edge) => edge.node)
-                    .filter(
-                        (node): node is NonNullable<typeof node> =>
-                            node !== null,
-                    ) ?? [],
-            [framework],
-        );
-
-    useEffect(() => {
-        if (framework && !frameworkDataMap.has(frameworkId)) {
-            setFrameworkDataMap((prev) => {
-                const newMap = new Map(prev);
-                newMap.set(frameworkId, {
-                    id: frameworkId,
-                    name: frameworkName,
-                    controls,
-                });
-                return newMap;
-            });
-        }
-    }, [
-        framework,
-        frameworkId,
-        frameworkName,
-        controls,
-        frameworkDataMap,
-        setFrameworkDataMap,
-    ]);
-
-    const cachedData = frameworkDataMap.get(frameworkId);
-    const displayName: string = cachedData?.name || frameworkName;
-    const displayControls: Array<{
-        id: string;
-        sectionTitle: string;
-        name: string;
-    }> = cachedData?.controls || controls;
-
-    return (
-        <div className="border border-border-low rounded-lg">
-            <div className="flex items-center justify-between p-4">
-                <button
-                    type="button"
-                    onClick={onToggle}
-                    className="flex items-center gap-2 flex-1 text-left hover:bg-subtle -m-4 p-4 rounded-lg"
-                >
-                    {isExpanded ? (
-                        <IconChevronUp
-                            size={16}
-                            className="text-txt-tertiary"
-                        />
-                    ) : (
-                        <IconChevronDown
-                            size={16}
-                            className="text-txt-tertiary"
-                        />
-                    )}
-                    <span className="font-medium text-txt-primary">
-                        {displayName}
-                    </span>
-                    <span className="text-sm text-txt-tertiary">
-                        ({displayControls.length} {__("controls")})
-                    </span>
-                </button>
-                <Button
-                    type="button"
-                    variant="secondary"
-                    icon={IconTrashCan}
-                    onClick={onRemove}
-                    className="ml-2"
-                >
-                    {__("Remove")}
-                </Button>
-            </div>
-
-            {isExpanded && (
-                <div className="border-t border-border-low">
-                    <Controller
-                        control={control}
-                        name={name as Path<T>}
-                        render={({ field }) => {
-                            const selectedControls: ControlSelection[] = (
-                                Array.isArray(field.value) ? field.value : []
-                            ) as ControlSelection[];
-                            const selectedControlIds = new Set(
-                                selectedControls.map(
-                                    (c: ControlSelection) => c.controlId,
-                                ),
-                            );
-
-                            const toggleControl = (controlId: string) => {
-                                const isSelected =
-                                    selectedControlIds.has(controlId);
-                                if (isSelected) {
-                                    field.onChange(
-                                        selectedControls.filter(
-                                            (c: ControlSelection) =>
-                                                c.controlId !== controlId,
-                                        ),
-                                    );
-                                } else {
-                                    field.onChange([
-                                        ...selectedControls,
-                                        {
-                                            controlId,
-                                            state: "IMPLEMENTED" as const,
-                                            exclusionJustification: undefined,
-                                        },
-                                    ]);
-                                }
-                            };
-
-                            const updateControlState = (
-                                controlId: string,
-                                state:
-                                    | "EXCLUDED"
-                                    | "IMPLEMENTED"
-                                    | "NOT_IMPLEMENTED",
-                            ) => {
-                                field.onChange(
-                                    selectedControls.map(
-                                        (c: ControlSelection) =>
-                                            c.controlId === controlId
-                                                ? { ...c, state }
-                                                : c,
-                                    ),
-                                );
-                            };
-
-                            const updateJustification = (
-                                controlId: string,
-                                exclusionJustification: string,
-                            ) => {
-                                field.onChange(
-                                    selectedControls.map(
-                                        (c: ControlSelection) =>
-                                            c.controlId === controlId
-                                                ? {
-                                                      ...c,
-                                                      exclusionJustification,
-                                                  }
-                                                : c,
-                                    ),
-                                );
-                            };
-
-                            const getControlState = (controlId: string) => {
-                                const selected = selectedControls.find(
-                                    (c: ControlSelection) =>
-                                        c.controlId === controlId,
-                                );
-                                return selected?.state || "IMPLEMENTED";
-                            };
-
-                            const getExclusionJustification = (
-                                controlId: string,
-                            ) => {
-                                const selected = selectedControls.find(
-                                    (c: ControlSelection) =>
-                                        c.controlId === controlId,
-                                );
-                                return selected?.exclusionJustification || "";
-                            };
-
-                            const selectAll = () => {
-                                const newSelectedControls: ControlSelection[] =
-                                    [...selectedControls];
-                                displayControls.forEach((ctrl) => {
-                                    if (!selectedControlIds.has(ctrl.id)) {
-                                        newSelectedControls.push({
-                                            controlId: ctrl.id,
-                                            state: "IMPLEMENTED" as const,
-                                            exclusionJustification: undefined,
-                                        });
-                                    }
-                                });
-                                field.onChange(newSelectedControls);
-                            };
-
-                            const deselectAll = () => {
-                                const controlIdsToRemove = new Set(
-                                    displayControls.map((ctrl) => ctrl.id),
-                                );
-                                const newSelectedControls =
-                                    selectedControls.filter(
-                                        (c: ControlSelection) =>
-                                            !controlIdsToRemove.has(
-                                                c.controlId,
-                                            ),
-                                    );
-                                field.onChange(newSelectedControls);
-                            };
-
-                            const allSelected =
-                                displayControls.length > 0 &&
-                                displayControls.every((ctrl) =>
-                                    selectedControlIds.has(ctrl.id),
-                                );
-
-                            return (
-                                <div className="p-4 space-y-4">
-                                    {displayControls.length > 0 && (
-                                        <div className="flex justify-end">
-                                            <Button
-                                                type="button"
-                                                variant="quaternary"
-                                                onClick={
-                                                    allSelected
-                                                        ? deselectAll
-                                                        : selectAll
-                                                }
-                                                className="text-xs h-7 min-h-7"
-                                            >
-                                                {allSelected
-                                                    ? __("Deselect All")
-                                                    : __("Select All")}
-                                            </Button>
-                                        </div>
-                                    )}
-                                    <div className="border border-border-low rounded-lg max-h-96 overflow-y-auto">
-                                        {displayControls.length === 0 ? (
-                                            <div className="p-4 text-center text-txt-tertiary">
-                                                {__(
-                                                    "No controls found in this framework",
-                                                )}
-                                            </div>
-                                        ) : (
-                                            <div className="divide-y divide-border-low">
-                                                {displayControls.map((ctrl) => {
-                                                    const isSelected =
-                                                        selectedControlIds.has(
-                                                            ctrl.id,
-                                                        );
-                                                    const state =
-                                                        getControlState(
-                                                            ctrl.id,
-                                                        );
-                                                    const exclusionJustification =
-                                                        getExclusionJustification(
-                                                            ctrl.id,
-                                                        );
-
-                                                    return (
-                                                        <div
-                                                            key={ctrl.id}
-                                                            className="p-4 space-y-3"
-                                                        >
-                                                            <div className="flex items-start gap-3">
-                                                                <Checkbox
-                                                                    checked={
-                                                                        isSelected
-                                                                    }
-                                                                    onChange={() =>
-                                                                        toggleControl(
-                                                                            ctrl.id,
-                                                                        )
-                                                                    }
-                                                                />
-                                                                <div className="flex-1 min-w-0">
-                                                                    <div className="font-medium">
-                                                                        {
-                                                                            ctrl.sectionTitle
-                                                                        }
-                                                                        :{" "}
-                                                                        {
-                                                                            ctrl.name
-                                                                        }
-                                                                    </div>
-                                                                </div>
-                                                            </div>
-
-                                                            {isSelected && (
-                                                                <div className="ml-7 space-y-2">
-                                                                    <Field
-                                                                        label={__(
-                                                                            "State",
-                                                                        )}
-                                                                    >
-                                                                        <Select
-                                                                            variant="editor"
-                                                                            value={
-                                                                                state
-                                                                            }
-                                                                            onValueChange={(
-                                                                                value,
-                                                                            ) =>
-                                                                                updateControlState(
-                                                                                    ctrl.id,
-                                                                                    value as
-                                                                                        | "EXCLUDED"
-                                                                                        | "IMPLEMENTED"
-                                                                                        | "NOT_IMPLEMENTED",
-                                                                                )
-                                                                            }
-                                                                            className="w-full"
-                                                                        >
-                                                                            <Option value="IMPLEMENTED">
-                                                                                {__(
-                                                                                    "Implemented",
-                                                                                )}
-                                                                            </Option>
-                                                                            <Option value="NOT_IMPLEMENTED">
-                                                                                {__(
-                                                                                    "Not Implemented",
-                                                                                )}
-                                                                            </Option>
-                                                                            <Option value="EXCLUDED">
-                                                                                {__(
-                                                                                    "Excluded",
-                                                                                )}
-                                                                            </Option>
-                                                                        </Select>
-                                                                    </Field>
-
-                                                                    {state ===
-                                                                        "EXCLUDED" ||
-                                                                        (state ===
-                                                                            "NOT_IMPLEMENTED" && (
-                                                                            <Field
-                                                                                label={__(
-                                                                                    "Justification",
-                                                                                )}
-                                                                            >
-                                                                                <Textarea
-                                                                                    value={
-                                                                                        exclusionJustification
-                                                                                    }
-                                                                                    onChange={(
-                                                                                        e,
-                                                                                    ) =>
-                                                                                        updateJustification(
-                                                                                            ctrl.id,
-                                                                                            e
-                                                                                                .target
-                                                                                                .value,
-                                                                                        )
-                                                                                    }
-                                                                                    placeholder={__(
-                                                                                        "Reason for exclusion",
-                                                                                    )}
-                                                                                    autogrow
-                                                                                />
-                                                                            </Field>
-                                                                        ))}
-                                                                </div>
-                                                            )}
-                                                        </div>
-                                                    );
-                                                })}
-                                            </div>
-                                        )}
-                                    </div>
-                                </div>
-                            );
-                        }}
-                    />
-                </div>
-            )}
-        </div>
-    );
-}
diff --git a/apps/console/src/components/form/VendorsMultiSelectField.tsx b/apps/console/src/components/form/VendorsMultiSelectField.tsx
index 993576887..1203c8d63 100644
--- a/apps/console/src/components/form/VendorsMultiSelectField.tsx
+++ b/apps/console/src/components/form/VendorsMultiSelectField.tsx
@@ -45,7 +45,7 @@ export function VendorsMultiSelectField<T extends FieldValues = FieldValues>({
 }
 
 function VendorsMultiSelectWithQuery<T extends FieldValues = FieldValues>(
-  props: Pick<Props<T>, "organizationId" | "control" | "name" | "disabled" | "selectedVendors">
+  props: Pick<Props<T>, "organizationId" | "control" | "name" | "disabled" | "selectedVendors">,
 ) {
   const { __ } = useTranslate();
   const { name, organizationId, control, selectedVendors = [] } = props;
@@ -54,7 +54,7 @@ function VendorsMultiSelectWithQuery<T extends FieldValues = FieldValues>(
 
   const allVendors = [...vendors];
   if (props.disabled) {
-    selectedVendors.forEach(selectedVendor => {
+    selectedVendors.forEach((selectedVendor) => {
       if (!allVendors.find(v => v.id === selectedVendor.id)) {
         allVendors.push(selectedVendor);
       }
@@ -98,7 +98,7 @@ function VendorsMultiSelectWithQuery<T extends FieldValues = FieldValues>(
                   open={isOpen}
                   onOpenChange={setIsOpen}
                 >
-                  {availableVendors.map((vendor) => (
+                  {availableVendors.map(vendor => (
                     <Option key={vendor.id} value={vendor.id} className="flex gap-2">
                       <Avatar
                         name={vendor.name}
@@ -120,7 +120,7 @@ function VendorsMultiSelectWithQuery<T extends FieldValues = FieldValues>(
 
               {selectedVendors.length > 0 && (
                 <div className="flex flex-wrap gap-2">
-                  {selectedVendors.map((vendor) => (
+                  {selectedVendors.map(vendor => (
                     <Badge key={vendor.id} variant="neutral" className="flex items-center gap-2">
                       <Avatar
                         name={vendor.name}
diff --git a/apps/console/src/components/measures/LinkedMeasuresCard.tsx b/apps/console/src/components/measures/LinkedMeasuresCard.tsx
index 1b2a27ed9..4545dc2e5 100644
--- a/apps/console/src/components/measures/LinkedMeasuresCard.tsx
+++ b/apps/console/src/components/measures/LinkedMeasuresCard.tsx
@@ -136,7 +136,7 @@ export function LinkedMeasuresCard<Params>(props: Props<Params>) {
               </Td>
             </Tr>
           )}
-          {measures.map((measure) => (
+          {measures.map(measure => (
             <MeasureRow
               key={measure.id}
               measure={measure}
diff --git a/apps/console/src/components/measures/LinkedMeasuresDialog.tsx b/apps/console/src/components/measures/LinkedMeasuresDialog.tsx
index 0d13ec4a0..a488202eb 100644
--- a/apps/console/src/components/measures/LinkedMeasuresDialog.tsx
+++ b/apps/console/src/components/measures/LinkedMeasuresDialog.tsx
@@ -44,28 +44,28 @@ export function LinkedMeasureDialog({ children, ...props }: Props) {
 
 function LinkedMeasuresDialogContent(props: Omit<Props, "children">) {
   const organizationId = useOrganizationId();
-  const { data, loadNext, hasNext, isLoadingNext } =
-    usePaginatedMeasures(organizationId);
+  const { data, loadNext, hasNext, isLoadingNext }
+    = usePaginatedMeasures(organizationId);
   const { __ } = useTranslate();
   const [search, setSearch] = useState("");
   const [category, setCategory] = useState<string | null>(null);
-  const measures = useMemo(() => data.measures?.edges?.map((edge) => edge.node) ?? [], [data.measures]);
+  const measures = useMemo(() => data.measures?.edges?.map(edge => edge.node) ?? [], [data.measures]);
   const linkedIds = useMemo(() => {
-    return new Set(props.linkedMeasures?.map((m) => m.id) ?? []);
+    return new Set(props.linkedMeasures?.map(m => m.id) ?? []);
   }, [props.linkedMeasures]);
 
   const filteredMeasures = useMemo(() => {
     return measures.filter(
-      (measure) =>
-        (category === null || measure.category === category) &&
-        (measure.name.toLowerCase().includes(search.toLowerCase()) ||
-          measure.description?.toLowerCase().includes(search.toLowerCase()))
+      measure =>
+        (category === null || measure.category === category)
+        && (measure.name.toLowerCase().includes(search.toLowerCase())
+          || measure.description?.toLowerCase().includes(search.toLowerCase())),
     );
   }, [measures, search, category]);
 
   const categories = useMemo(
-    () => Array.from(new Set(measures.map((m) => m.category))),
-    [measures]
+    () => Array.from(new Set(measures.map(m => m.category))),
+    [measures],
   );
 
   return (
@@ -82,7 +82,7 @@ function LinkedMeasuresDialogContent(props: Omit<Props, "children">) {
           onValueChange={setCategory}
           className="max-w-[180px]"
         >
-          {categories.map((category) => (
+          {categories.map(category => (
             <Option key={category} value={category}>
               {category}
             </Option>
@@ -90,7 +90,7 @@ function LinkedMeasuresDialogContent(props: Omit<Props, "children">) {
         </Select>
       </div>
       <div className="divide-y divide-border-low">
-        {filteredMeasures.map((measure) => (
+        {filteredMeasures.map(measure => (
           <MeasureRow
             key={measure.id}
             measure={measure}
@@ -140,7 +140,9 @@ function MeasureRow(props: RowProps) {
         asChild
       >
         <span>
-          <IconComponent size={16} /> {isLinked ? __("Unlink") : __("Link")}
+          <IconComponent size={16} />
+          {" "}
+          {isLinked ? __("Unlink") : __("Link")}
         </span>
       </Button>
     </button>
diff --git a/apps/console/src/components/obligations/LinkedObligationsCard.tsx b/apps/console/src/components/obligations/LinkedObligationsCard.tsx
index ad7badba8..bc0f32367 100644
--- a/apps/console/src/components/obligations/LinkedObligationsCard.tsx
+++ b/apps/console/src/components/obligations/LinkedObligationsCard.tsx
@@ -143,7 +143,7 @@ export function LinkedObligationsCard<Params>(props: Props<Params>) {
               </Td>
             </Tr>
           )}
-          {obligations.map((obligation) => (
+          {obligations.map(obligation => (
             <ObligationRow
               key={obligation.id}
               obligation={obligation}
diff --git a/apps/console/src/components/obligations/LinkedObligationsDialog.tsx b/apps/console/src/components/obligations/LinkedObligationsDialog.tsx
index 84588df98..dd5c1695f 100644
--- a/apps/console/src/components/obligations/LinkedObligationsDialog.tsx
+++ b/apps/console/src/components/obligations/LinkedObligationsDialog.tsx
@@ -111,19 +111,19 @@ function LinkedObligationsDialogContent(props: Omit<Props, "children">) {
   const { __ } = useTranslate();
   const [search, setSearch] = useState("");
   const obligations = useMemo(
-    () => data.obligations?.edges?.map((edge) => edge.node) ?? [],
+    () => data.obligations?.edges?.map(edge => edge.node) ?? [],
     [data.obligations],
   );
   const linkedIds = useMemo(() => {
-    return new Set(props.linkedObligations?.map((o) => o.id) ?? []);
+    return new Set(props.linkedObligations?.map(o => o.id) ?? []);
   }, [props.linkedObligations]);
 
   const filteredObligations = useMemo(() => {
     return obligations.filter(
-      (obligation) =>
-        obligation.area?.toLowerCase().includes(search.toLowerCase()) ||
-        obligation.source?.toLowerCase().includes(search.toLowerCase()) ||
-        obligation.owner?.fullName
+      obligation =>
+        obligation.area?.toLowerCase().includes(search.toLowerCase())
+        || obligation.source?.toLowerCase().includes(search.toLowerCase())
+        || obligation.owner?.fullName
           ?.toLowerCase()
           .includes(search.toLowerCase()),
     );
@@ -139,7 +139,7 @@ function LinkedObligationsDialogContent(props: Omit<Props, "children">) {
         />
       </div>
       <div className="divide-y divide-border-low">
-        {filteredObligations.map((obligation) => (
+        {filteredObligations.map(obligation => (
           <ObligationRow
             key={obligation.id}
             obligation={obligation}
diff --git a/apps/console/src/components/organizations/DeleteOrganizationDialog.tsx b/apps/console/src/components/organizations/DeleteOrganizationDialog.tsx
index 226abc96c..1fde9b7a3 100644
--- a/apps/console/src/components/organizations/DeleteOrganizationDialog.tsx
+++ b/apps/console/src/components/organizations/DeleteOrganizationDialog.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import {
   Dialog,
   DialogContent,
@@ -32,14 +32,9 @@ export function DeleteOrganizationDialog({
   const handleConfirm = () => {
     if (inputValue === organizationName) {
       onConfirm();
-    }
-  };
-
-  useEffect(() => {
-    if (!isDeleting) {
       setInputValue("");
     }
-  }, [isDeleting]);
+  };
 
   return (
     <Dialog
@@ -52,7 +47,7 @@ export function DeleteOrganizationDialog({
         <p className="text-txt-secondary text-sm">
           {sprintf(
             __("This will permanently delete the organization %s and all its data."),
-            organizationName
+            organizationName,
           )}
         </p>
 
@@ -62,12 +57,12 @@ export function DeleteOrganizationDialog({
 
         <Field
           label={sprintf(
-            __('To confirm deletion, type "%s" below:'),
-            organizationName
+            __("To confirm deletion, type \"%s\" below:"),
+            organizationName,
           )}
           type="text"
           value={inputValue}
-          onChange={(e) => setInputValue(e.target.value)}
+          onChange={e => setInputValue(e.target.value)}
           placeholder={organizationName}
           disabled={isDeleting}
           autoComplete="off"
diff --git a/apps/console/src/components/organizations/SlackConnection.tsx b/apps/console/src/components/organizations/SlackConnection.tsx
index 18f9032a6..12fc79f3a 100644
--- a/apps/console/src/components/organizations/SlackConnection.tsx
+++ b/apps/console/src/components/organizations/SlackConnection.tsx
@@ -27,7 +27,7 @@ export function SlackConnections({
   ];
 
   const slackConnections = slackConnectionDefinitions.map((def) => {
-    const connected = connectedSlackConnections.find((c) => c.id);
+    const connected = connectedSlackConnections.find(c => c.id);
     return {
       ...def,
       createdAt: connected?.createdAt,
@@ -49,7 +49,7 @@ export function SlackConnections({
 
   return (
     <div className="space-y-2">
-      {slackConnections.map((slackConnection) => (
+      {slackConnections.map(slackConnection => (
         <Card
           key={slackConnection.id}
           padded
@@ -61,37 +61,41 @@ export function SlackConnections({
           <div className="mr-auto">
             <h3 className="text-base font-semibold">{slackConnection.name}</h3>
             <p className="text-sm text-txt-tertiary">
-              {slackConnection.createdAt ? (
-                <>
-                  {sprintf(
-                    __("Connected on %s"),
-                    dateTimeFormat(slackConnection.createdAt),
-                  )}
-                  {slackConnection.channel && (
+              {slackConnection.createdAt
+                ? (
                     <>
-                      {" • "}
-                      {sprintf(__("Channel: %s"), slackConnection.channel)}
+                      {sprintf(
+                        __("Connected on %s"),
+                        dateTimeFormat(slackConnection.createdAt),
+                      )}
+                      {slackConnection.channel && (
+                        <>
+                          {" • "}
+                          {sprintf(__("Channel: %s"), slackConnection.channel)}
+                        </>
+                      )}
                     </>
+                  )
+                : (
+                    slackConnection.description
                   )}
-                </>
-              ) : (
-                slackConnection.description
-              )}
             </p>
           </div>
-          {slackConnection.createdAt ? (
-            <div>
-              <Badge variant="success" size="md">
-                {__("Connected")}
-              </Badge>
-            </div>
-          ) : (
-            canUpdate && (
-              <Button variant="secondary" asChild>
-                <a href={getUrl(slackConnection.id)}>{__("Connect")}</a>
-              </Button>
-            )
-          )}
+          {slackConnection.createdAt
+            ? (
+                <div>
+                  <Badge variant="success" size="md">
+                    {__("Connected")}
+                  </Badge>
+                </div>
+              )
+            : (
+                canUpdate && (
+                  <Button variant="secondary" asChild>
+                    <a href={getUrl(slackConnection.id)}>{__("Connect")}</a>
+                  </Button>
+                )
+              )}
         </Card>
       ))}
     </div>
diff --git a/apps/console/src/components/risks/LinkedRisksCard.tsx b/apps/console/src/components/risks/LinkedRisksCard.tsx
index a4b1dfd8f..5e1e8adae 100644
--- a/apps/console/src/components/risks/LinkedRisksCard.tsx
+++ b/apps/console/src/components/risks/LinkedRisksCard.tsx
@@ -103,7 +103,7 @@ export function LinkedRisksCard<Params>(props: Props<Params>) {
               </Td>
             </Tr>
           )}
-          {props.risks.map((risk) => (
+          {props.risks.map(risk => (
             <RiskRow
               key={risk.id}
               risk={risk}
diff --git a/apps/console/src/components/risks/LinkedRisksDialog.tsx b/apps/console/src/components/risks/LinkedRisksDialog.tsx
index a9a299a78..6aab936a8 100644
--- a/apps/console/src/components/risks/LinkedRisksDialog.tsx
+++ b/apps/console/src/components/risks/LinkedRisksDialog.tsx
@@ -74,24 +74,24 @@ function LinkedRisksDialogContent(props: Omit<Props, "children">) {
   const [search, setSearch] = useState("");
   const [category, setCategory] = useState<string | null>(null);
   const risks = useMemo(
-    () => data.organization?.risks?.edges?.map((edge) => edge.node) ?? [],
+    () => data.organization?.risks?.edges?.map(edge => edge.node) ?? [],
     [data.organization?.risks],
   );
   const linkedIds = useMemo(() => {
-    return new Set(props.linkedRisks?.map((r) => r.id) ?? []);
+    return new Set(props.linkedRisks?.map(r => r.id) ?? []);
   }, [props.linkedRisks]);
 
   const filteredRisks = useMemo(() => {
     return risks.filter(
-      (risk) =>
-        (category === null || risk.category === category) &&
-        (risk.name.toLowerCase().includes(search.toLowerCase()) ||
-          risk.description?.toLowerCase().includes(search.toLowerCase())),
+      risk =>
+        (category === null || risk.category === category)
+        && (risk.name.toLowerCase().includes(search.toLowerCase())
+          || risk.description?.toLowerCase().includes(search.toLowerCase())),
     );
   }, [risks, search, category]);
 
   const categories = useMemo(
-    () => Array.from(new Set(risks.map((r) => r.category))),
+    () => Array.from(new Set(risks.map(r => r.category))),
     [risks],
   );
 
@@ -109,7 +109,7 @@ function LinkedRisksDialogContent(props: Omit<Props, "children">) {
           onValueChange={setCategory}
           className="max-w-[180px]"
         >
-          {categories.map((category) => (
+          {categories.map(category => (
             <Option key={category} value={category}>
               {category}
             </Option>
@@ -117,7 +117,7 @@ function LinkedRisksDialogContent(props: Omit<Props, "children">) {
         </Select>
       </div>
       <div className="divide-y divide-border-low">
-        {filteredRisks.map((risk) => (
+        {filteredRisks.map(risk => (
           <RiskRow
             key={risk.id}
             risk={risk}
@@ -167,7 +167,9 @@ function RiskRow(props: RowProps) {
         asChild
       >
         <span>
-          <IconComponent size={16} /> {isLinked ? __("Unlink") : __("Link")}
+          <IconComponent size={16} />
+          {" "}
+          {isLinked ? __("Unlink") : __("Link")}
         </span>
       </Button>
     </button>
diff --git a/apps/console/src/components/snapshots/LinkedSnapshotsCard.tsx b/apps/console/src/components/snapshots/LinkedSnapshotsCard.tsx
index a795031ba..a832cdee6 100644
--- a/apps/console/src/components/snapshots/LinkedSnapshotsCard.tsx
+++ b/apps/console/src/components/snapshots/LinkedSnapshotsCard.tsx
@@ -136,7 +136,7 @@ export function LinkedSnapshotsCard<Params>(props: Props<Params>) {
               </Td>
             </Tr>
           )}
-          {snapshots.map((snapshot) => (
+          {snapshots.map(snapshot => (
             <SnapshotRow
               key={snapshot.id}
               snapshot={snapshot}
diff --git a/apps/console/src/components/snapshots/LinkedSnapshotsDialog.tsx b/apps/console/src/components/snapshots/LinkedSnapshotsDialog.tsx
index 68e266e29..c6e647922 100644
--- a/apps/console/src/components/snapshots/LinkedSnapshotsDialog.tsx
+++ b/apps/console/src/components/snapshots/LinkedSnapshotsDialog.tsx
@@ -101,15 +101,15 @@ function LinkedSnapshotsDialogContent(props: Omit<Props, "children">) {
   const { __ } = useTranslate();
   const [search, setSearch] = useState("");
   const snapshots = useMemo(
-    () => data.snapshots?.edges?.map((edge) => edge.node) ?? [],
+    () => data.snapshots?.edges?.map(edge => edge.node) ?? [],
     [data.snapshots],
   );
   const linkedIds = useMemo(() => {
-    return new Set(props.linkedSnapshots?.map((s) => s.id) ?? []);
+    return new Set(props.linkedSnapshots?.map(s => s.id) ?? []);
   }, [props.linkedSnapshots]);
 
   const filteredSnapshots = useMemo(() => {
-    return snapshots.filter((snapshot) =>
+    return snapshots.filter(snapshot =>
       snapshot.name.toLowerCase().includes(search.toLowerCase()),
     );
   }, [snapshots, search]);
@@ -124,7 +124,7 @@ function LinkedSnapshotsDialogContent(props: Omit<Props, "children">) {
         />
       </div>
       <div className="divide-y divide-border-low">
-        {filteredSnapshots.map((snapshot) => (
+        {filteredSnapshots.map(snapshot => (
           <SnapshotRow
             key={snapshot.id}
             snapshot={snapshot}
@@ -187,7 +187,9 @@ function SnapshotRow(props: RowProps) {
         asChild
       >
         <span>
-          <IconComponent size={16} /> {isLinked ? __("Unlink") : __("Link")}
+          <IconComponent size={16} />
+          {" "}
+          {isLinked ? __("Unlink") : __("Link")}
         </span>
       </Button>
     </button>
diff --git a/apps/console/src/components/states-of-applicability/LinkedStatesOfApplicabilityCard.tsx b/apps/console/src/components/states-of-applicability/LinkedStatesOfApplicabilityCard.tsx
index e40042fe9..298842b33 100644
--- a/apps/console/src/components/states-of-applicability/LinkedStatesOfApplicabilityCard.tsx
+++ b/apps/console/src/components/states-of-applicability/LinkedStatesOfApplicabilityCard.tsx
@@ -1,18 +1,18 @@
 import { graphql } from "relay-runtime";
 import {
-    Card,
-    IconPlusLarge,
-    Button,
-    Tr,
-    Td,
-    Table,
-    Thead,
-    Tbody,
-    Th,
-    IconChevronDown,
-    IconTrashCan,
-    TrButton,
-    Badge,
+  Card,
+  IconPlusLarge,
+  Button,
+  Tr,
+  Td,
+  Table,
+  Thead,
+  Tbody,
+  Th,
+  IconChevronDown,
+  IconTrashCan,
+  TrButton,
+  Badge,
 } from "@probo/ui";
 import { useTranslate } from "@probo/i18n";
 import type { LinkedStatesOfApplicabilityCardFragment$key } from "/__generated__/core/LinkedStatesOfApplicabilityCardFragment.graphql";
@@ -38,257 +38,257 @@ const linkedStateOfApplicabilityFragment = graphql`
 `;
 
 type AttachMutation<Params> = (p: {
-    variables: {
-        input: {
-            stateOfApplicabilityId: string;
-            applicability: boolean;
-            justification: string | null;
-        } & Params;
-        connections: string[];
-    };
+  variables: {
+    input: {
+      stateOfApplicabilityId: string;
+      applicability: boolean;
+      justification: string | null;
+    } & Params;
+    connections: string[];
+  };
 }) => void;
 
 type DetachMutation = (p: {
-    variables: {
-        input: {
-            stateOfApplicabilityId: string;
-            controlId: string;
-        };
-        connections: string[];
+  variables: {
+    input: {
+      stateOfApplicabilityId: string;
+      controlId: string;
     };
+    connections: string[];
+  };
 }) => void;
 
 type Props<Params> = {
-    statesOfApplicability: readonly (LinkedStatesOfApplicabilityCardFragment$key & {
-        id: string;
-    })[];
-    params: Params;
-    disabled?: boolean;
-    connectionId: string;
-    onAttach: AttachMutation<Params>;
-    onDetach: DetachMutation;
-    variant?: "card" | "table";
-    readOnly?: boolean;
+  statesOfApplicability: readonly (LinkedStatesOfApplicabilityCardFragment$key & {
+    id: string;
+  })[];
+  params: Params;
+  disabled?: boolean;
+  connectionId: string;
+  onAttach: AttachMutation<Params>;
+  onDetach: DetachMutation;
+  variant?: "card" | "table";
+  readOnly?: boolean;
 };
 
 export function LinkedStatesOfApplicabilityCard<Params>(props: Props<Params>) {
-    const { __ } = useTranslate();
+  const { __ } = useTranslate();
 
-    const [limit, setLimit] = useState<number | null>(
-        props.variant === "card" ? 4 : null,
-    );
+  const [limit, setLimit] = useState<number | null>(
+    props.variant === "card" ? 4 : null,
+  );
 
-    const [linkedInfo, setLinkedInfo] = useState<
-        { stateOfApplicabilityId: string; controlId: string }[]
-    >([]);
+  const [linkedInfo, setLinkedInfo] = useState<
+    { stateOfApplicabilityId: string; controlId: string }[]
+  >([]);
 
-    const statesOfApplicability = useMemo(() => {
-        return limit
-            ? props.statesOfApplicability.slice(0, limit)
-            : props.statesOfApplicability;
-    }, [props.statesOfApplicability, limit]);
+  const statesOfApplicability = useMemo(() => {
+    return limit
+      ? props.statesOfApplicability.slice(0, limit)
+      : props.statesOfApplicability;
+  }, [props.statesOfApplicability, limit]);
 
-    const showMoreButton =
-        limit !== null && props.statesOfApplicability.length > limit;
-    const variant = props.variant ?? "table";
+  const showMoreButton
+    = limit !== null && props.statesOfApplicability.length > limit;
+  const variant = props.variant ?? "table";
 
-    const linkedData = linkedInfo;
+  const linkedData = linkedInfo;
 
-    const onAttach = (
-        stateOfApplicabilityId: string,
-        applicability: boolean,
-        justification: string | null,
-    ) => {
-        props.onAttach({
-            variables: {
-                input: {
-                    stateOfApplicabilityId,
-                    applicability,
-                    justification,
-                    ...props.params,
-                },
-                connections: [props.connectionId],
-            },
-        });
-    };
+  const onAttach = (
+    stateOfApplicabilityId: string,
+    applicability: boolean,
+    justification: string | null,
+  ) => {
+    props.onAttach({
+      variables: {
+        input: {
+          stateOfApplicabilityId,
+          applicability,
+          justification,
+          ...props.params,
+        },
+        connections: [props.connectionId],
+      },
+    });
+  };
 
-    const onDetach = (stateOfApplicabilityId: string, controlId: string) => {
-        props.onDetach({
-            variables: {
-                input: {
-                    stateOfApplicabilityId,
-                    controlId,
-                },
-                connections: [props.connectionId],
-            },
-        });
-    };
+  const onDetach = (stateOfApplicabilityId: string, controlId: string) => {
+    props.onDetach({
+      variables: {
+        input: {
+          stateOfApplicabilityId,
+          controlId,
+        },
+        connections: [props.connectionId],
+      },
+    });
+  };
 
-    const Wrapper = variant === "card" ? Card : "div";
+  const Wrapper = variant === "card" ? Card : "div";
 
-    return (
-        <Wrapper padded className="space-y-[10px]">
-            {props.statesOfApplicability.map((soa, idx) => (
-                <LinkedInfoExtractor
-                    key={idx}
-                    fragment={soa}
-                    onExtracted={(info) => {
-                        setLinkedInfo((prev) => {
-                            const exists = prev.some(
-                                (p) =>
-                                    p.stateOfApplicabilityId ===
-                                        info.stateOfApplicabilityId &&
-                                    p.controlId === info.controlId,
-                            );
-                            return exists ? prev : [...prev, info];
-                        });
-                    }}
-                />
-            ))}
-            {variant === "card" && (
-                <div className="flex justify-between">
-                    <div className="text-lg font-semibold">
-                        {__("States of Applicability")}
-                    </div>
-                    {!props.readOnly && (
-                        <LinkedStatesOfApplicabilityDialog
-                            connectionId={props.connectionId}
-                            disabled={props.disabled}
-                            linkedStatesOfApplicability={linkedData}
-                            onLink={onAttach}
-                            onUnlink={onDetach}
-                        >
-                            <Button variant="tertiary" icon={IconPlusLarge}>
-                                {__("Link state of applicability")}
-                            </Button>
-                        </LinkedStatesOfApplicabilityDialog>
-                    )}
-                </div>
-            )}
-            <Table className={clsx(variant === "card" && "bg-invert")}>
-                <Thead>
-                    <Tr>
-                        <Th>{__("Name")}</Th>
-                        <Th>{__("Applicability")}</Th>
-                        <Th>{__("Justification")}</Th>
-                        {!props.readOnly && <Th></Th>}
-                    </Tr>
-                </Thead>
-                <Tbody>
-                    {statesOfApplicability.length === 0 && (
-                        <Tr>
-                            <Td
-                                colSpan={props.readOnly ? 3 : 4}
-                                className="text-center text-txt-secondary"
-                            >
-                                {__("No states of applicability linked")}
-                            </Td>
-                        </Tr>
-                    )}
-                    {statesOfApplicability.map((soa) => (
-                        <StateOfApplicabilityRow
-                            key={soa.id}
-                            stateOfApplicability={soa}
-                            onClick={onDetach}
-                            readOnly={props.readOnly}
-                        />
-                    ))}
-                    {variant === "table" && !props.readOnly && (
-                        <LinkedStatesOfApplicabilityDialog
-                            connectionId={props.connectionId}
-                            disabled={props.disabled}
-                            linkedStatesOfApplicability={linkedData}
-                            onLink={onAttach}
-                            onUnlink={onDetach}
-                        >
-                            <TrButton colspan={4} icon={IconPlusLarge}>
-                                {__("Link state of applicability")}
-                            </TrButton>
-                        </LinkedStatesOfApplicabilityDialog>
-                    )}
-                </Tbody>
-            </Table>
-            {showMoreButton && (
-                <Button
-                    variant="tertiary"
-                    icon={IconChevronDown}
-                    onClick={() => setLimit(null)}
-                >
-                    {sprintf(
-                        __("Show %d more"),
-                        props.statesOfApplicability.length - limit!,
-                    )}
-                </Button>
-            )}
-        </Wrapper>
-    );
+  return (
+    <Wrapper padded className="space-y-[10px]">
+      {props.statesOfApplicability.map((soa, idx) => (
+        <LinkedInfoExtractor
+          key={idx}
+          fragment={soa}
+          onExtracted={(info) => {
+            setLinkedInfo((prev) => {
+              const exists = prev.some(
+                p =>
+                  p.stateOfApplicabilityId
+                  === info.stateOfApplicabilityId
+                  && p.controlId === info.controlId,
+              );
+              return exists ? prev : [...prev, info];
+            });
+          }}
+        />
+      ))}
+      {variant === "card" && (
+        <div className="flex justify-between">
+          <div className="text-lg font-semibold">
+            {__("States of Applicability")}
+          </div>
+          {!props.readOnly && (
+            <LinkedStatesOfApplicabilityDialog
+              connectionId={props.connectionId}
+              disabled={props.disabled}
+              linkedStatesOfApplicability={linkedData}
+              onLink={onAttach}
+              onUnlink={onDetach}
+            >
+              <Button variant="tertiary" icon={IconPlusLarge}>
+                {__("Link state of applicability")}
+              </Button>
+            </LinkedStatesOfApplicabilityDialog>
+          )}
+        </div>
+      )}
+      <Table className={clsx(variant === "card" && "bg-invert")}>
+        <Thead>
+          <Tr>
+            <Th>{__("Name")}</Th>
+            <Th>{__("Applicability")}</Th>
+            <Th>{__("Justification")}</Th>
+            {!props.readOnly && <Th></Th>}
+          </Tr>
+        </Thead>
+        <Tbody>
+          {statesOfApplicability.length === 0 && (
+            <Tr>
+              <Td
+                colSpan={props.readOnly ? 3 : 4}
+                className="text-center text-txt-secondary"
+              >
+                {__("No states of applicability linked")}
+              </Td>
+            </Tr>
+          )}
+          {statesOfApplicability.map(soa => (
+            <StateOfApplicabilityRow
+              key={soa.id}
+              stateOfApplicability={soa}
+              onClick={onDetach}
+              readOnly={props.readOnly}
+            />
+          ))}
+          {variant === "table" && !props.readOnly && (
+            <LinkedStatesOfApplicabilityDialog
+              connectionId={props.connectionId}
+              disabled={props.disabled}
+              linkedStatesOfApplicability={linkedData}
+              onLink={onAttach}
+              onUnlink={onDetach}
+            >
+              <TrButton colspan={4} icon={IconPlusLarge}>
+                {__("Link state of applicability")}
+              </TrButton>
+            </LinkedStatesOfApplicabilityDialog>
+          )}
+        </Tbody>
+      </Table>
+      {showMoreButton && (
+        <Button
+          variant="tertiary"
+          icon={IconChevronDown}
+          onClick={() => setLimit(null)}
+        >
+          {sprintf(
+            __("Show %d more"),
+            props.statesOfApplicability.length - limit,
+          )}
+        </Button>
+      )}
+    </Wrapper>
+  );
 }
 
 function LinkedInfoExtractor(props: {
-    fragment: LinkedStatesOfApplicabilityCardFragment$key;
-    onExtracted: (info: {
-        stateOfApplicabilityId: string;
-        controlId: string;
-    }) => void;
+  fragment: LinkedStatesOfApplicabilityCardFragment$key;
+  onExtracted: (info: {
+    stateOfApplicabilityId: string;
+    controlId: string;
+  }) => void;
 }) {
-    const data = useFragment(
-        linkedStateOfApplicabilityFragment,
-        props.fragment,
-    );
+  const { fragment, onExtracted } = props;
+  const data = useFragment(
+    linkedStateOfApplicabilityFragment,
+    fragment,
+  );
 
-    useEffect(() => {
-        props.onExtracted({
-            stateOfApplicabilityId: data.stateOfApplicabilityId,
-            controlId: data.controlId,
-        });
-    }, [data.stateOfApplicabilityId, data.controlId, props.onExtracted]);
+  useEffect(() => {
+    onExtracted({
+      stateOfApplicabilityId: data.stateOfApplicabilityId,
+      controlId: data.controlId,
+    });
+  }, [data.stateOfApplicabilityId, data.controlId, onExtracted]);
 
-    return null;
+  return null;
 }
 
 function StateOfApplicabilityRow(props: {
-    stateOfApplicability: LinkedStatesOfApplicabilityCardFragment$key & {
-        id: string;
-    };
-    onClick: (stateOfApplicabilityId: string, controlId: string) => void;
-    readOnly?: boolean;
+  stateOfApplicability: LinkedStatesOfApplicabilityCardFragment$key & {
+    id: string;
+  };
+  onClick: (stateOfApplicabilityId: string, controlId: string) => void;
+  readOnly?: boolean;
 }) {
-    const soa = useFragment(
-        linkedStateOfApplicabilityFragment,
-        props.stateOfApplicability,
-    );
-    const organizationId = useOrganizationId();
-    const { __ } = useTranslate();
+  const soa = useFragment(
+    linkedStateOfApplicabilityFragment,
+    props.stateOfApplicability,
+  );
+  const organizationId = useOrganizationId();
+  const { __ } = useTranslate();
 
-    return (
-        <Tr
-            to={`/organizations/${organizationId}/states-of-applicability/${soa.stateOfApplicabilityId}`}
-        >
-            <Td>{soa.stateOfApplicability.name}</Td>
-            <Td>
-                <Badge variant={soa.applicability ? "success" : "danger"}>
-                    {soa.applicability
-                        ? __("Applicable")
-                        : __("Not Applicable")}
-                </Badge>
-            </Td>
-            <Td>{soa.justification || "-"}</Td>
-            {!props.readOnly && (
-                <Td noLink width={50} className="text-end">
-                    <Button
-                        variant="secondary"
-                        onClick={() =>
-                            props.onClick(
-                                soa.stateOfApplicabilityId,
-                                soa.controlId,
-                            )
-                        }
-                        icon={IconTrashCan}
-                    >
-                        {__("Unlink")}
-                    </Button>
-                </Td>
-            )}
-        </Tr>
-    );
+  return (
+    <Tr
+      to={`/organizations/${organizationId}/states-of-applicability/${soa.stateOfApplicabilityId}`}
+    >
+      <Td>{soa.stateOfApplicability.name}</Td>
+      <Td>
+        <Badge variant={soa.applicability ? "success" : "danger"}>
+          {soa.applicability
+            ? __("Applicable")
+            : __("Not Applicable")}
+        </Badge>
+      </Td>
+      <Td>{soa.justification || "-"}</Td>
+      {!props.readOnly && (
+        <Td noLink width={50} className="text-end">
+          <Button
+            variant="secondary"
+            onClick={() =>
+              props.onClick(
+                soa.stateOfApplicabilityId,
+                soa.controlId,
+              )}
+            icon={IconTrashCan}
+          >
+            {__("Unlink")}
+          </Button>
+        </Td>
+      )}
+    </Tr>
+  );
 }
diff --git a/apps/console/src/components/states-of-applicability/LinkedStatesOfApplicabilityDialog.tsx b/apps/console/src/components/states-of-applicability/LinkedStatesOfApplicabilityDialog.tsx
index 1aa12a3b4..04d8fe148 100644
--- a/apps/console/src/components/states-of-applicability/LinkedStatesOfApplicabilityDialog.tsx
+++ b/apps/console/src/components/states-of-applicability/LinkedStatesOfApplicabilityDialog.tsx
@@ -1,12 +1,12 @@
 import { useTranslate } from "@probo/i18n";
 import {
-    Dialog,
-    DialogContent,
-    DialogFooter,
-    Button,
-    Checkbox,
-    Textarea,
-    Badge,
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  Button,
+  Checkbox,
+  Textarea,
+  Badge,
 } from "@probo/ui";
 import { Suspense, useState, useRef } from "react";
 import type { ReactNode } from "react";
@@ -33,233 +33,237 @@ const query = graphql`
 `;
 
 type LinkedSOAInfo = {
-    stateOfApplicabilityId: string;
-    controlId: string;
+  stateOfApplicabilityId: string;
+  controlId: string;
 };
 
 type Props = {
-    children: ReactNode;
-    connectionId: string;
-    disabled?: boolean;
-    linkedStatesOfApplicability: readonly LinkedSOAInfo[];
-    onLink: (
-        stateOfApplicabilityId: string,
-        applicability: boolean,
-        justification: string | null,
-    ) => void;
-    onUnlink: (stateOfApplicabilityId: string, controlId: string) => void;
+  children: ReactNode;
+  connectionId: string;
+  disabled?: boolean;
+  linkedStatesOfApplicability: readonly LinkedSOAInfo[];
+  onLink: (
+    stateOfApplicabilityId: string,
+    applicability: boolean,
+    justification: string | null,
+  ) => void;
+  onUnlink: (stateOfApplicabilityId: string, controlId: string) => void;
 };
 
 export function LinkedStatesOfApplicabilityDialog({
-    children,
-    ...props
+  children,
+  ...props
 }: Props) {
-    const dialogRef = useRef<{ open: () => void; close: () => void }>(null);
+  const dialogRef = useRef<{ open: () => void; close: () => void }>(null);
 
-    return (
-        <Dialog
-            ref={dialogRef}
-            trigger={children}
-            title="Link State of Applicability"
-        >
-            <Suspense fallback={<div>Loading...</div>}>
-                <LinkedStatesOfApplicabilityDialogContent
-                    {...props}
-                    onClose={() => dialogRef.current?.close()}
-                />
-            </Suspense>
-        </Dialog>
-    );
+  return (
+    <Dialog
+      ref={dialogRef}
+      trigger={children}
+      title="Link State of Applicability"
+    >
+      <Suspense fallback={<div>Loading...</div>}>
+        <LinkedStatesOfApplicabilityDialogContent
+          {...props}
+          onClose={() => dialogRef.current?.close()}
+        />
+      </Suspense>
+    </Dialog>
+  );
 }
 
 function LinkedStatesOfApplicabilityDialogContent(
-    props: Omit<Props, "children"> & { onClose: () => void },
+  props: Omit<Props, "children"> & { onClose: () => void },
 ) {
-    const { __ } = useTranslate();
-    const organizationId = useOrganizationId();
-    const [selectedSOA, setSelectedSOA] = useState<{
-        id: string;
-        name: string;
-    } | null>(null);
-    const [applicability, setApplicability] = useState(true);
-    const [justification, setJustification] = useState("");
+  const { __ } = useTranslate();
+  const organizationId = useOrganizationId();
+  const [selectedSOA, setSelectedSOA] = useState<{
+    id: string;
+    name: string;
+  } | null>(null);
+  const [applicability, setApplicability] = useState(true);
+  const [justification, setJustification] = useState("");
 
-    const data = useLazyLoadQuery<LinkedStatesOfApplicabilityDialogQuery>(
-        query,
-        {
-            organizationId,
-        },
-        { fetchPolicy: "network-only" },
-    );
+  const data = useLazyLoadQuery<LinkedStatesOfApplicabilityDialogQuery>(
+    query,
+    {
+      organizationId,
+    },
+    { fetchPolicy: "network-only" },
+  );
 
-    const linkedSOAIds = new Set(
-        props.linkedStatesOfApplicability.map(
-            (soa) => soa.stateOfApplicabilityId,
-        ),
-    );
-    const linkedSOAMap = new Map(
-        props.linkedStatesOfApplicability.map((soa) => [
-            soa.stateOfApplicabilityId,
-            soa,
-        ]),
-    );
-    const statesOfApplicability =
-        data.organization?.statesOfApplicability?.edges.map(
-            (edge) => edge.node,
-        ) ?? [];
+  const linkedSOAIds = new Set(
+    props.linkedStatesOfApplicability.map(
+      soa => soa.stateOfApplicabilityId,
+    ),
+  );
+  const linkedSOAMap = new Map(
+    props.linkedStatesOfApplicability.map(soa => [
+      soa.stateOfApplicabilityId,
+      soa,
+    ]),
+  );
+  const statesOfApplicability
+    = data.organization?.statesOfApplicability?.edges.map(
+      edge => edge.node,
+    ) ?? [];
 
-    const handleSelectSOA = (soa: { id: string; name: string }) => {
-        setSelectedSOA(soa);
-        setApplicability(true);
-        setJustification("");
-    };
+  const handleSelectSOA = (soa: { id: string; name: string }) => {
+    setSelectedSOA(soa);
+    setApplicability(true);
+    setJustification("");
+  };
 
-    const handleLink = () => {
-        if (selectedSOA) {
-            props.onLink(
-                selectedSOA.id,
-                applicability,
-                justification.trim() || null,
-            );
-            props.onClose();
-        }
-    };
+  const handleLink = () => {
+    if (selectedSOA) {
+      props.onLink(
+        selectedSOA.id,
+        applicability,
+        justification.trim() || null,
+      );
+      props.onClose();
+    }
+  };
 
-    const handleUnlink = (stateOfApplicabilityId: string) => {
-        const linkedSOA = linkedSOAMap.get(stateOfApplicabilityId);
-        if (linkedSOA) {
-            props.onUnlink(
-                linkedSOA.stateOfApplicabilityId,
-                linkedSOA.controlId,
-            );
-        }
-    };
+  const handleUnlink = (stateOfApplicabilityId: string) => {
+    const linkedSOA = linkedSOAMap.get(stateOfApplicabilityId);
+    if (linkedSOA) {
+      props.onUnlink(
+        linkedSOA.stateOfApplicabilityId,
+        linkedSOA.controlId,
+      );
+    }
+  };
 
-    return (
-        <>
-            <DialogContent padded className="space-y-4">
-                {statesOfApplicability.length === 0 ? (
-                    <div className="flex flex-col items-center justify-center py-12 text-center">
-                        <div className="text-txt-secondary text-base mb-2">
-                            {__("No states of applicability available")}
-                        </div>
-                        <div className="text-txt-tertiary text-sm">
-                            {__(
-                                "Create a state of applicability first to link it to this control",
-                            )}
-                        </div>
+  return (
+    <>
+      <DialogContent padded className="space-y-4">
+        {statesOfApplicability.length === 0
+          ? (
+              <div className="flex flex-col items-center justify-center py-12 text-center">
+                <div className="text-txt-secondary text-base mb-2">
+                  {__("No states of applicability available")}
+                </div>
+                <div className="text-txt-tertiary text-sm">
+                  {__(
+                    "Create a state of applicability first to link it to this control",
+                  )}
+                </div>
+              </div>
+            )
+          : !selectedSOA
+              ? (
+                  <div className="space-y-2">
+                    <div className="text-sm font-medium mb-2">
+                      {__("Select a state of applicability:")}
                     </div>
-                ) : !selectedSOA ? (
-                    <div className="space-y-2">
-                        <div className="text-sm font-medium mb-2">
-                            {__("Select a state of applicability:")}
-                        </div>
-                        {statesOfApplicability.map((soa) => {
-                            const isLinked = linkedSOAIds.has(soa.id);
-                            return (
+                    {statesOfApplicability.map((soa) => {
+                      const isLinked = linkedSOAIds.has(soa.id);
+                      return (
+                        <div
+                          key={soa.id}
+                          className={`border border-border-low rounded-lg p-3 flex items-center justify-between ${!isLinked ? "hover:bg-hover cursor-pointer" : ""}`}
+                          onClick={() =>
+                            !isLinked && handleSelectSOA(soa)}
+                        >
+                          <div className="font-medium">
+                            {soa.name}
+                          </div>
+                          {isLinked
+                            ? (
                                 <div
-                                    key={soa.id}
-                                    className={`border border-border-low rounded-lg p-3 flex items-center justify-between ${!isLinked ? "hover:bg-hover cursor-pointer" : ""}`}
-                                    onClick={() =>
-                                        !isLinked && handleSelectSOA(soa)
-                                    }
+                                  className="flex items-center gap-2"
+                                  onClick={e => e.stopPropagation()}
                                 >
-                                    <div className="font-medium">
-                                        {soa.name}
-                                    </div>
-                                    {isLinked ? (
-                                        <div
-                                            className="flex items-center gap-2"
-                                            onClick={(e) => e.stopPropagation()}
-                                        >
-                                            <Badge variant="success">
-                                                {__("Linked")}
-                                            </Badge>
-                                            <Button
-                                                variant="danger"
-                                                onClick={() =>
-                                                    handleUnlink(soa.id)
-                                                }
-                                                disabled={props.disabled}
-                                            >
-                                                {__("Unlink")}
-                                            </Button>
-                                        </div>
-                                    ) : null}
+                                  <Badge variant="success">
+                                    {__("Linked")}
+                                  </Badge>
+                                  <Button
+                                    variant="danger"
+                                    onClick={() =>
+                                      handleUnlink(soa.id)}
+                                    disabled={props.disabled}
+                                  >
+                                    {__("Unlink")}
+                                  </Button>
                                 </div>
-                            );
-                        })}
-                    </div>
-                ) : (
-                    <div className="space-y-4">
-                        <div className="flex items-center justify-between">
-                            <div>
-                                <div className="text-sm text-txt-secondary mb-1">
-                                    {__("Selected:")}
-                                </div>
-                                <div className="text-lg font-medium">
-                                    {selectedSOA.name}
-                                </div>
-                            </div>
-                            <Button
-                                variant="tertiary"
-                                onClick={() => setSelectedSOA(null)}
-                            >
-                                {__("Change")}
-                            </Button>
+                              )
+                            : null}
                         </div>
-
-                        <div className="border-t border-border-low pt-4 space-y-3">
-                            <label className="flex items-center gap-2 cursor-pointer">
-                                <Checkbox
-                                    checked={applicability}
-                                    onChange={(checked) =>
-                                        setApplicability(checked)
-                                    }
-                                />
-                                <span className="font-medium">
-                                    {__("Applicable")}
-                                </span>
-                            </label>
-
-                            <div>
-                                <label className="text-sm font-medium mb-1 block">
-                                    {__("Justification (optional)")}
-                                </label>
-                                <Textarea
-                                    placeholder={__("Add a justification...")}
-                                    value={justification}
-                                    onChange={(e) =>
-                                        setJustification(e.target.value)
-                                    }
-                                    rows={3}
-                                />
-                            </div>
+                      );
+                    })}
+                  </div>
+                )
+              : (
+                  <div className="space-y-4">
+                    <div className="flex items-center justify-between">
+                      <div>
+                        <div className="text-sm text-txt-secondary mb-1">
+                          {__("Selected:")}
                         </div>
+                        <div className="text-lg font-medium">
+                          {selectedSOA.name}
+                        </div>
+                      </div>
+                      <Button
+                        variant="tertiary"
+                        onClick={() => setSelectedSOA(null)}
+                      >
+                        {__("Change")}
+                      </Button>
                     </div>
+
+                    <div className="border-t border-border-low pt-4 space-y-3">
+                      <label className="flex items-center gap-2 cursor-pointer">
+                        <Checkbox
+                          checked={applicability}
+                          onChange={checked =>
+                            setApplicability(checked)}
+                        />
+                        <span className="font-medium">
+                          {__("Applicable")}
+                        </span>
+                      </label>
+
+                      <div>
+                        <label className="text-sm font-medium mb-1 block">
+                          {__("Justification (optional)")}
+                        </label>
+                        <Textarea
+                          placeholder={__("Add a justification...")}
+                          value={justification}
+                          onChange={e =>
+                            setJustification(e.target.value)}
+                          rows={3}
+                        />
+                      </div>
+                    </div>
+                  </div>
                 )}
-            </DialogContent>
-            <DialogFooter exitLabel={__("Close")}>
-                {selectedSOA ? (
-                    <>
-                        <Button
-                            variant="secondary"
-                            onClick={() => setSelectedSOA(null)}
-                        >
-                            {__("Back")}
-                        </Button>
-                        <Button
-                            variant="primary"
-                            onClick={handleLink}
-                            disabled={props.disabled}
-                        >
-                            {__("Link")}
-                        </Button>
-                    </>
-                ) : (
-                    <></>
-                )}
-            </DialogFooter>
-        </>
-    );
+      </DialogContent>
+      <DialogFooter exitLabel={__("Close")}>
+        {selectedSOA
+          ? (
+              <>
+                <Button
+                  variant="secondary"
+                  onClick={() => setSelectedSOA(null)}
+                >
+                  {__("Back")}
+                </Button>
+                <Button
+                  variant="primary"
+                  onClick={handleLink}
+                  disabled={props.disabled}
+                >
+                  {__("Link")}
+                </Button>
+              </>
+            )
+          : (
+              <></>
+            )}
+      </DialogFooter>
+    </>
+  );
 }
diff --git a/apps/console/src/components/table/EditableTable.tsx b/apps/console/src/components/table/EditableTable.tsx
index 20fb3c0b9..b5be719ca 100644
--- a/apps/console/src/components/table/EditableTable.tsx
+++ b/apps/console/src/components/table/EditableTable.tsx
@@ -81,7 +81,7 @@ export function EditableTable<
         ))}
         <CellHead />
       </Row>
-      {props.items.map((item) => (
+      {props.items.map(item => (
         <EditableRow onUpdate={(k, v) => update(item.id, k, v)} key={item.id}>
           {props.row({
             item,
@@ -91,18 +91,20 @@ export function EditableTable<
           <Cell>{props.action({ item })}</Cell>
         </EditableRow>
       ))}
-      {showAdd ? (
-        <NewItemRow
-          schema={props.schema}
-          defaultValue={props.defaultValue}
-          connectionId={props.connectionId}
-          row={props.row}
-          mutation={props.createMutation}
-          onSuccess={toggleAdd}
-        />
-      ) : (
-        <RowButton onClick={toggleAdd} type="button">{props.addLabel}</RowButton>
-      )}
+      {showAdd
+        ? (
+            <NewItemRow
+              schema={props.schema}
+              defaultValue={props.defaultValue}
+              connectionId={props.connectionId}
+              row={props.row}
+              mutation={props.createMutation}
+              onSuccess={toggleAdd}
+            />
+          )
+        : (
+            <RowButton onClick={toggleAdd} type="button">{props.addLabel}</RowButton>
+          )}
     </SortableDataTable>
   );
 }
@@ -144,7 +146,7 @@ function NewItemRow<T extends { id: string }, S extends z.ZodSchema>(props: {
           disabled={!isOk || isMutating}
           variant="tertiary"
           className={clsx(isOk ? "text-txt-success" : "text-txt-secondary")}
-          onClick={onSubmit}
+          onClick={() => void onSubmit()}
         >
           {isMutating ? <Spinner size={16} /> : <IconCheckmark1 size={16} />}
         </Button>
diff --git a/apps/console/src/components/table/GraphQLCell.tsx b/apps/console/src/components/table/GraphQLCell.tsx
index fc700fbaf..f690d3eb5 100644
--- a/apps/console/src/components/table/GraphQLCell.tsx
+++ b/apps/console/src/components/table/GraphQLCell.tsx
@@ -79,7 +79,8 @@ export function GraphQLCell<Q extends OperationType, T extends NonNullable<unkno
             value={value}
             itemRenderer={props.itemRenderer}
           />
-        </div>{" "}
+        </div>
+        {" "}
         {props.multiple && (
           <Command.Input
             className={classNames.input()}
@@ -88,11 +89,11 @@ export function GraphQLCell<Q extends OperationType, T extends NonNullable<unkno
         )}
         <Command.List>
           <Suspense
-            fallback={
+            fallback={(
               <div className="py-2 px-3 flex items-center justify-center">
                 <Spinner />
               </div>
-            }
+            )}
           >
             <ItemList
               {...props}
@@ -121,8 +122,8 @@ function ItemList<Q extends OperationType, T>(
   return (
     <>
       {items
-        .filter((item) => !props.usedKeys.has(getKey(item) ?? ""))
-        .map((item) => (
+        .filter(item => !props.usedKeys.has(getKey(item) ?? ""))
+        .map(item => (
           <Command.Item
             key={getKey(item)}
             className={props.className}
diff --git a/apps/console/src/components/table/PeopleCell.tsx b/apps/console/src/components/table/PeopleCell.tsx
index 7de5dd55d..4724dbff8 100644
--- a/apps/console/src/components/table/PeopleCell.tsx
+++ b/apps/console/src/components/table/PeopleCell.tsx
@@ -18,9 +18,8 @@ export function PeopleCell(props: Props) {
         organizationId: props.organizationId,
         filter: { excludeContractEnded: true },
       }}
-      items={(data) =>
-        data.organization?.peoples?.edges.map((edge) => edge.node) ?? []
-      }
+      items={data =>
+        data.organization?.peoples?.edges.map(edge => edge.node) ?? []}
       itemRenderer={({ item }) => (
         <div className="flex gap-2 whitespace-nowrap items-center text-xs">
           <Avatar name={item.fullName} />
diff --git a/apps/console/src/components/table/VendorsCell.tsx b/apps/console/src/components/table/VendorsCell.tsx
index 3ead1aa03..9a388a431 100644
--- a/apps/console/src/components/table/VendorsCell.tsx
+++ b/apps/console/src/components/table/VendorsCell.tsx
@@ -26,9 +26,8 @@ export function VendorsCell(props: Props) {
       variables={{
         organizationId: props.organizationId,
       }}
-      items={(data) =>
-        data.organization?.vendors?.edges?.map((edge) => edge.node) ?? []
-      }
+      items={data =>
+        data.organization?.vendors?.edges?.map(edge => edge.node) ?? []}
       itemRenderer={({ item, onRemove }) => (
         <VendorBadge vendor={item} onRemove={onRemove} />
       )}
diff --git a/apps/console/src/components/tasks/TaskFormDialog.tsx b/apps/console/src/components/tasks/TaskFormDialog.tsx
index 33a2eda36..92a7fe381 100644
--- a/apps/console/src/components/tasks/TaskFormDialog.tsx
+++ b/apps/console/src/components/tasks/TaskFormDialog.tsx
@@ -75,7 +75,7 @@ const createTaskSchema = z.object({
   timeEstimate: z.string().optional().nullable(),
   assignedToId: z.string().optional().nullable(),
   measureId: z.preprocess(
-    (val) => (val === "" || val == null ? null : val),
+    val => (val === "" || val == null ? null : val),
     z.string().nullable().optional(),
   ),
   deadline: z.string().optional().nullable(),
@@ -86,11 +86,11 @@ const updateTaskSchema = z.object({
   description: z.string().optional().nullable(),
   timeEstimate: z.string().optional().nullable(),
   assignedToId: z.preprocess(
-    (val) => (val === "" || val == null ? null : val),
+    val => (val === "" || val == null ? null : val),
     z.string().nullable().optional(),
   ),
   measureId: z.preprocess(
-    (val) => (val === "" || val == null ? null : val),
+    val => (val === "" || val == null ? null : val),
     z.string().nullable().optional(),
   ),
   deadline: z.string().optional().nullable(),
@@ -105,11 +105,12 @@ type Props = {
 };
 
 export default function TaskFormDialog(props: Props) {
+  const { children, connection, ref, task: taskKey, measureId } = props;
   const { __ } = useTranslate();
-  const ref = useDialogRef();
-  const dialogRef = props.ref ?? ref;
+  const newRef = useDialogRef();
+  const dialogRef = ref ?? newRef;
   const organizationId = useOrganizationId();
-  const task = useFragment(taskFragment, props.task);
+  const task = useFragment(taskFragment, taskKey);
   const relayEnv = useRelayEnvironment();
   const [mutate] = useMutationWithToasts(
     task ? taskUpdateMutation : taskCreateMutation,
@@ -121,19 +122,19 @@ export default function TaskFormDialog(props: Props) {
 
   const isUpdating = !!task;
 
-  const { control, handleSubmit, register, formState, reset } =
-    useFormWithSchema(isUpdating ? updateTaskSchema : createTaskSchema, {
+  const { control, handleSubmit, register, formState, reset }
+    = useFormWithSchema(isUpdating ? updateTaskSchema : createTaskSchema, {
       defaultValues: {
         name: task?.name ?? "",
         description: task?.description ?? "",
         timeEstimate: task?.timeEstimate ?? "",
         assignedToId: task?.assignedTo?.id ?? "",
-        measureId: task?.measure?.id ?? props.measureId ?? "",
+        measureId: task?.measure?.id ?? measureId ?? "",
         deadline: task?.deadline?.split("T")[0] ?? "",
       },
     });
 
-  const onSubmit = handleSubmit(async (data) => {
+  const onSubmit = async (data: z.infer<typeof updateTaskSchema | typeof createTaskSchema>) => {
     if (task) {
       await mutate({
         variables: {
@@ -160,7 +161,7 @@ export default function TaskFormDialog(props: Props) {
             assignedToId: data.assignedToId || null,
             measureId: data.measureId || null,
           },
-          connections: [props.connection!],
+          connections: [connection!],
         },
         onCompleted: (_response, errors) => {
           if (!errors && data.measureId) {
@@ -171,20 +172,20 @@ export default function TaskFormDialog(props: Props) {
       reset();
     }
     dialogRef.current?.close();
-  });
-  const showMeasure = !props.measureId;
+  };
+  const showMeasure = !measureId;
 
   return (
     <Dialog
       ref={dialogRef}
-      trigger={props.children}
-      title={
+      trigger={children}
+      title={(
         <Breadcrumb
           items={[__("Tasks"), isUpdating ? __("Edit Task") : __("New Task")]}
         />
-      }
+      )}
     >
-      <form onSubmit={onSubmit}>
+      <form onSubmit={e => void handleSubmit(onSubmit)(e)}>
         <DialogContent className="grid grid-cols-[1fr_420px]">
           <div className="py-8 px-10 space-y-4">
             <Input
@@ -240,7 +241,7 @@ export default function TaskFormDialog(props: Props) {
                   <DurationPicker
                     {...field}
                     value={value ?? null}
-                    onValueChange={(value) => onChange(value)}
+                    onValueChange={value => onChange(value)}
                   />
                 )}
               />
diff --git a/apps/console/src/components/tasks/TasksCard.tsx b/apps/console/src/components/tasks/TasksCard.tsx
index 09a39b7ab..4ef043d28 100644
--- a/apps/console/src/components/tasks/TasksCard.tsx
+++ b/apps/console/src/components/tasks/TasksCard.tsx
@@ -39,9 +39,9 @@ type Props = {
   tasks:
     | TasksPageFragment$data["tasks"]["edges"]
     | Extract<
-        MeasureTasksTabQuery$data["node"],
-        { __typename: "Measure" }
-      >["tasks"]["edges"];
+      MeasureTasksTabQuery$data["node"],
+      { __typename: "Measure" }
+    >["tasks"]["edges"];
   connectionId: string;
 };
 
@@ -67,52 +67,54 @@ export function TasksCard({ tasks, connectionId }: Props) {
 
   return (
     <div className="space-y-6">
-      {tasks.length === 0 ? (
-        <p className="text-center py-6 text-txt-secondary">{__("No tasks")}</p>
-      ) : (
-        <Card>
-          <Tabs className="px-6">
-            {hashes.map((h) => (
-              <TabItem asChild active={hash === h.hash} key={h.hash}>
-                <Link to={`#${h.hash}`}>
-                  {h.label}
-                  <TabBadge>{tasksPerHash.get(h.hash)?.length}</TabBadge>
-                </Link>
-              </TabItem>
-            ))}
-          </Tabs>
-          <div className="divide-y divide-border-solid">
-            {hash === "all"
-              ? // All tabs group the todo using the state
-                hashes
-                  .slice(0, 2)
-                  .filter((h) => tasksPerHash.get(h.hash)?.length)
-                  .map((h) => (
-                    <Fragment key={h.label}>
-                      <h2 className="px-6 py-3 text-sm font-medium flex items-center gap-2 bg-subtle">
-                        <TaskStateIcon state={h.state!} />
-                        {h.label}
-                      </h2>
-                      {tasksPerHash.get(h.hash)?.map(({ node: task }) => (
-                        <TaskRow
-                          key={task.id}
-                          fKey={task}
-                          connectionId={connectionId}
-                        />
-                      ))}
-                    </Fragment>
-                  ))
-              : // Todo and Done tab simply list todos
-                filteredTasks?.map(({ node: task }) => (
-                  <TaskRow
-                    key={task.id}
-                    fKey={task}
-                    connectionId={connectionId}
-                  />
+      {tasks.length === 0
+        ? (
+            <p className="text-center py-6 text-txt-secondary">{__("No tasks")}</p>
+          )
+        : (
+            <Card>
+              <Tabs className="px-6">
+                {hashes.map(h => (
+                  <TabItem asChild active={hash === h.hash} key={h.hash}>
+                    <Link to={`#${h.hash}`}>
+                      {h.label}
+                      <TabBadge>{tasksPerHash.get(h.hash)?.length}</TabBadge>
+                    </Link>
+                  </TabItem>
                 ))}
-          </div>
-        </Card>
-      )}
+              </Tabs>
+              <div className="divide-y divide-border-solid">
+                {hash === "all"
+                  // All tabs group the todo using the state
+                  ? hashes
+                      .slice(0, 2)
+                      .filter(h => tasksPerHash.get(h.hash)?.length)
+                      .map(h => (
+                        <Fragment key={h.label}>
+                          <h2 className="px-6 py-3 text-sm font-medium flex items-center gap-2 bg-subtle">
+                            <TaskStateIcon state={h.state!} />
+                            {h.label}
+                          </h2>
+                          {tasksPerHash.get(h.hash)?.map(({ node: task }) => (
+                            <TaskRow
+                              key={task.id}
+                              fKey={task}
+                              connectionId={connectionId}
+                            />
+                          ))}
+                        </Fragment>
+                      ))
+                  // Todo and Done tab simply list todos
+                  : filteredTasks?.map(({ node: task }) => (
+                      <TaskRow
+                        key={task.id}
+                        fKey={task}
+                        connectionId={connectionId}
+                      />
+                    ))}
+              </div>
+            </Card>
+          )}
     </div>
   );
 }
@@ -163,15 +165,15 @@ function TaskRow(props: TaskRowProps) {
   const params = useParams<{ measureId?: string }>();
 
   const relayEnv = useRelayEnvironment();
-  const { canUpdate, canDelete, ...task } =
-    useFragment<TasksCard_TaskRowFragment$key>(
+  const { canUpdate, canDelete, ...task }
+    = useFragment<TasksCard_TaskRowFragment$key>(
       fragment,
       props.fKey as TasksCard_TaskRowFragment$key,
     );
   const [updateTask, isUpdating] = useMutation(taskUpdateMutation);
 
-  const onToggle = () => {
-    promisifyMutation(updateTask)({
+  const onToggle = async () => {
+    await promisifyMutation(updateTask)({
       variables: {
         input: {
           taskId: task.id,
@@ -217,7 +219,7 @@ function TaskRow(props: TaskRowProps) {
           <div className="flex items-center gap-2 pt-[2px]">
             <PriorityLevel level={1} />
             <button
-              onClick={onToggle}
+              onClick={() => void onToggle()}
               className="cursor-pointer -m-1 p-1 disabled:opacity-60"
               disabled={isUpdating}
             >
@@ -227,7 +229,7 @@ function TaskRow(props: TaskRowProps) {
           <div className="text-sm space-y-1 flex-1">
             <h2 className="font-medium">{task.name}</h2>
             {task.description && (
-              <p className="text-txt-secondary whitespace-pre-wrap break-words">
+              <p className="text-txt-secondary whitespace-pre-wrap wrap-break-word">
                 {task.description}
               </p>
             )}
diff --git a/apps/console/src/components/trustCenter/DeleteTrustCenterReferenceDialog.tsx b/apps/console/src/components/trustCenter/DeleteTrustCenterReferenceDialog.tsx
index 2fd399d50..c284d0dbb 100644
--- a/apps/console/src/components/trustCenter/DeleteTrustCenterReferenceDialog.tsx
+++ b/apps/console/src/components/trustCenter/DeleteTrustCenterReferenceDialog.tsx
@@ -60,7 +60,7 @@ export function DeleteTrustCenterReferenceDialog({
         <p className="text-txt-secondary">
           {sprintf(
             __("Are you sure you want to delete the reference \"%s\"?"),
-            referenceName
+            referenceName,
           )}
         </p>
         <p className="text-txt-secondary mt-2">
@@ -71,7 +71,7 @@ export function DeleteTrustCenterReferenceDialog({
       <DialogFooter>
         <Button
           variant="danger"
-          onClick={handleDelete}
+          onClick={() => void handleDelete()}
           disabled={isDeleting}
           icon={isDeleting ? Spinner : IconTrashCan}
         >
diff --git a/apps/console/src/components/trustCenter/TrustCenterAuditsCard.tsx b/apps/console/src/components/trustCenter/TrustCenterAuditsCard.tsx
index f9b418d0b..55a1fd33b 100644
--- a/apps/console/src/components/trustCenter/TrustCenterAuditsCard.tsx
+++ b/apps/console/src/components/trustCenter/TrustCenterAuditsCard.tsx
@@ -14,7 +14,7 @@ import {
 } from "@probo/ui";
 import { useTranslate } from "@probo/i18n";
 import { useFragment } from "react-relay";
-import { useMemo, useState, useCallback, useEffect } from "react";
+import { useMemo, useState, useCallback } from "react";
 import {
   sprintf,
   getAuditStateVariant,
@@ -47,7 +47,7 @@ type Mutation<Params> = (p: {
       trustCenterVisibility: "NONE" | "PRIVATE" | "PUBLIC";
     } & Params;
   };
-}) => void;
+}) => Promise<void>;
 
 type Props<Params> = {
   audits: TrustCenterAuditsCardFragment$key[];
@@ -65,11 +65,11 @@ export function TrustCenterAuditsCard<Params>(props: Props<Params>) {
   }, [props.audits, limit]);
   const showMoreButton = limit !== null && props.audits.length > limit;
 
-  const onChangeVisibility = (
+  const onChangeVisibility = async (
     auditId: string,
     trustCenterVisibility: "NONE" | "PRIVATE" | "PUBLIC",
   ) => {
-    props.onChangeVisibility({
+    await props.onChangeVisibility({
       variables: {
         input: {
           id: auditId,
@@ -130,7 +130,7 @@ function AuditRow(props: {
   onChangeVisibility: (
     auditId: string,
     trustCenterVisibility: "NONE" | "PRIVATE" | "PUBLIC",
-  ) => void;
+  ) => Promise<void>;
   disabled?: boolean;
   canUpdate: boolean;
 }) {
@@ -138,26 +138,16 @@ function AuditRow(props: {
   const audit = useFragment(trustCenterAuditFragment, auditFragmentRef);
   const organizationId = useOrganizationId();
   const { __ } = useTranslate();
-  const [optimisticValue, setOptimisticValue] = useState<string | null>(null);
 
   const handleValueChange = useCallback(
-    (value: string) => {
+    async (value: string) => {
       const stringValue = typeof value === "string" ? value : "";
       const typedValue = stringValue as "NONE" | "PRIVATE" | "PUBLIC";
-      setOptimisticValue(typedValue);
-      onChangeVisibility(audit.id, typedValue);
+      await onChangeVisibility(audit.id, typedValue);
     },
     [audit.id, onChangeVisibility],
   );
 
-  useEffect(() => {
-    if (optimisticValue && audit.trustCenterVisibility === optimisticValue) {
-      setOptimisticValue(null);
-    }
-  }, [audit.trustCenterVisibility, optimisticValue]);
-
-  const currentValue = optimisticValue || audit.trustCenterVisibility;
-
   const visibilityOptions = getTrustCenterVisibilityOptions(__);
 
   const validUntilFormatted = audit.validUntil
@@ -179,12 +169,12 @@ function AuditRow(props: {
       <Td noLink width={130} className="pr-0">
         <Field
           type="select"
-          value={currentValue}
-          onValueChange={handleValueChange}
+          value={audit.trustCenterVisibility}
+          onValueChange={value => void handleValueChange(value)}
           disabled={disabled || !canUpdate}
           className="w-[105px]"
         >
-          {visibilityOptions.map((option) => (
+          {visibilityOptions.map(option => (
             <Option key={option.value} value={option.value}>
               <div className="flex items-center justify-between w-full">
                 <Badge variant={option.variant}>{option.label}</Badge>
diff --git a/apps/console/src/components/trustCenter/TrustCenterDocumentsCard.tsx b/apps/console/src/components/trustCenter/TrustCenterDocumentsCard.tsx
index e29c38617..c2fe23f38 100644
--- a/apps/console/src/components/trustCenter/TrustCenterDocumentsCard.tsx
+++ b/apps/console/src/components/trustCenter/TrustCenterDocumentsCard.tsx
@@ -17,7 +17,7 @@ import {
 import { useTranslate } from "@probo/i18n";
 import type { TrustCenterDocumentsCardFragment$key } from "/__generated__/core/TrustCenterDocumentsCardFragment.graphql";
 import { useFragment } from "react-relay";
-import { useMemo, useState, useCallback, useEffect } from "react";
+import { useMemo, useState, useCallback } from "react";
 import { sprintf, getTrustCenterVisibilityOptions } from "@probo/helpers";
 import { useOrganizationId } from "/hooks/useOrganizationId";
 
@@ -46,7 +46,7 @@ type Mutation<Params> = (p: {
       trustCenterVisibility: "NONE" | "PRIVATE" | "PUBLIC";
     } & Params;
   };
-}) => void;
+}) => Promise<void>;
 
 type Props<Params> = {
   documents: TrustCenterDocumentsCardFragment$key[];
@@ -64,11 +64,11 @@ export function TrustCenterDocumentsCard<Params>(props: Props<Params>) {
   }, [props.documents, limit]);
   const showMoreButton = limit !== null && props.documents.length > limit;
 
-  const onChangeVisibility = (
+  const onChangeVisibility = async (
     documentId: string,
     trustCenterVisibility: "NONE" | "PRIVATE" | "PUBLIC",
   ) => {
-    props.onChangeVisibility({
+    await props.onChangeVisibility({
       variables: {
         input: {
           id: documentId,
@@ -128,38 +128,28 @@ function DocumentRow(props: {
   onChangeVisibility: (
     documentId: string,
     trustCenterVisibility: "NONE" | "PRIVATE" | "PUBLIC",
-  ) => void;
+  ) => Promise<void>;
   disabled?: boolean;
   canUpdate: boolean;
 }) {
-  const { documentFragmentRef, onChangeVisibility, disabled, canUpdate } =
-    props;
+  const { documentFragmentRef, onChangeVisibility, disabled, canUpdate }
+    = props;
   const document = useFragment(
     trustCenterDocumentFragment,
     documentFragmentRef,
   );
   const organizationId = useOrganizationId();
   const { __ } = useTranslate();
-  const [optimisticValue, setOptimisticValue] = useState<string | null>(null);
 
   const handleValueChange = useCallback(
-    (value: string) => {
+    async (value: string) => {
       const stringValue = typeof value === "string" ? value : "";
       const typedValue = stringValue as "NONE" | "PRIVATE" | "PUBLIC";
-      setOptimisticValue(typedValue);
-      onChangeVisibility(document.id, typedValue);
+      await onChangeVisibility(document.id, typedValue);
     },
     [document.id, onChangeVisibility],
   );
 
-  useEffect(() => {
-    if (optimisticValue && document.trustCenterVisibility === optimisticValue) {
-      setOptimisticValue(null);
-    }
-  }, [document.trustCenterVisibility, optimisticValue]);
-
-  const currentValue = optimisticValue || document.trustCenterVisibility;
-
   const visibilityOptions = getTrustCenterVisibilityOptions(__);
 
   return (
@@ -178,12 +168,12 @@ function DocumentRow(props: {
       <Td noLink width={130} className="pr-0">
         <Field
           type="select"
-          value={currentValue}
-          onValueChange={handleValueChange}
+          value={document.trustCenterVisibility}
+          onValueChange={value => void handleValueChange(value)}
           disabled={disabled || !canUpdate}
           className="w-[105px]"
         >
-          {visibilityOptions.map((option) => (
+          {visibilityOptions.map(option => (
             <Option key={option.value} value={option.value}>
               <div className="flex items-center justify-between w-full">
                 <Badge variant={option.variant}>{option.label}</Badge>
diff --git a/apps/console/src/components/trustCenter/TrustCenterFilesCard.tsx b/apps/console/src/components/trustCenter/TrustCenterFilesCard.tsx
index 51679cee6..46eb16a5b 100644
--- a/apps/console/src/components/trustCenter/TrustCenterFilesCard.tsx
+++ b/apps/console/src/components/trustCenter/TrustCenterFilesCard.tsx
@@ -21,7 +21,7 @@ import type {
   TrustCenterFilesCardFragment$data,
 } from "/__generated__/core/TrustCenterFilesCardFragment.graphql";
 import { useFragment } from "react-relay";
-import { useMemo, useState, useCallback, useEffect } from "react";
+import { useMemo, useState, useCallback } from "react";
 import { sprintf, getTrustCenterVisibilityOptions } from "@probo/helpers";
 import { formatDate } from "@probo/helpers";
 
@@ -46,7 +46,7 @@ type Mutation<Params> = (p: {
       trustCenterVisibility: "NONE" | "PRIVATE" | "PUBLIC";
     } & Params;
   };
-}) => void;
+}) => Promise<void>;
 
 type Props<Params> = {
   files: TrustCenterFilesCardFragment$key[];
@@ -66,11 +66,11 @@ export function TrustCenterFilesCard<Params>(props: Props<Params>) {
   }, [props.files, limit]);
   const showMoreButton = limit !== null && props.files.length > limit;
 
-  const onChangeVisibility = (
+  const onChangeVisibility = async (
     fileId: string,
     trustCenterVisibility: "NONE" | "PRIVATE" | "PUBLIC",
   ) => {
-    props.onChangeVisibility({
+    await props.onChangeVisibility({
       variables: {
         input: {
           id: fileId,
@@ -133,7 +133,7 @@ function FileRowWrapper(props: {
   onChangeVisibility: (
     fileId: string,
     trustCenterVisibility: "NONE" | "PRIVATE" | "PUBLIC",
-  ) => void;
+  ) => Promise<void>;
   onEdit: (file: { id: string; name: string; category: string }) => void;
   onDelete: (id: string) => void;
   disabled?: boolean;
@@ -157,35 +157,25 @@ function FileRow(props: {
   onChangeVisibility: (
     fileId: string,
     trustCenterVisibility: "NONE" | "PRIVATE" | "PUBLIC",
-  ) => void;
+  ) => Promise<void>;
   onEdit: (file: { id: string; name: string; category: string }) => void;
   onDelete: (id: string) => void;
   disabled?: boolean;
   canUpdate: boolean;
 }) {
-  const { file, onChangeVisibility, onEdit, onDelete, disabled, canUpdate } =
-    props;
+  const { file, onChangeVisibility, onEdit, onDelete, disabled, canUpdate }
+    = props;
   const { __ } = useTranslate();
-  const [optimisticValue, setOptimisticValue] = useState<string | null>(null);
 
   const handleValueChange = useCallback(
-    (value: string) => {
+    async (value: string) => {
       const stringValue = typeof value === "string" ? value : "";
       const typedValue = stringValue as "NONE" | "PRIVATE" | "PUBLIC";
-      setOptimisticValue(typedValue);
-      onChangeVisibility(file.id, typedValue);
+      await onChangeVisibility(file.id, typedValue);
     },
     [file.id, onChangeVisibility],
   );
 
-  useEffect(() => {
-    if (optimisticValue && file.trustCenterVisibility === optimisticValue) {
-      setOptimisticValue(null);
-    }
-  }, [file.trustCenterVisibility, optimisticValue]);
-
-  const currentValue = optimisticValue || file.trustCenterVisibility;
-
   const visibilityOptions = getTrustCenterVisibilityOptions(__);
 
   return (
@@ -198,12 +188,12 @@ function FileRow(props: {
       <Td noLink width={130} className="pr-0">
         <Field
           type="select"
-          value={currentValue}
-          onValueChange={handleValueChange}
+          value={file.trustCenterVisibility}
+          onValueChange={value => void handleValueChange(value)}
           disabled={disabled || !canUpdate}
           className="w-[105px]"
         >
-          {visibilityOptions.map((option) => (
+          {visibilityOptions.map(option => (
             <Option key={option.value} value={option.value}>
               <div className="flex items-center justify-between w-full">
                 <Badge variant={option.variant}>{option.label}</Badge>
@@ -218,8 +208,7 @@ function FileRow(props: {
             variant="secondary"
             icon={IconArrowLink}
             onClick={() =>
-              window.open(file.fileUrl, "_blank", "noopener,noreferrer")
-            }
+              window.open(file.fileUrl, "_blank", "noopener,noreferrer")}
             title={__("Download")}
           />
           {file.canUpdate && (
@@ -231,8 +220,7 @@ function FileRow(props: {
                   id: file.id,
                   name: file.name,
                   category: file.category,
-                })
-              }
+                })}
               disabled={disabled}
               title={__("Edit")}
             />
diff --git a/apps/console/src/components/trustCenter/TrustCenterReferenceDialog.tsx b/apps/console/src/components/trustCenter/TrustCenterReferenceDialog.tsx
index 3fb7e5a32..842df2538 100644
--- a/apps/console/src/components/trustCenter/TrustCenterReferenceDialog.tsx
+++ b/apps/console/src/components/trustCenter/TrustCenterReferenceDialog.tsx
@@ -15,7 +15,7 @@ import { z } from "zod";
 import { useFormWithSchema } from "/hooks/useFormWithSchema";
 import {
   useCreateTrustCenterReferenceMutation,
-  useUpdateTrustCenterReferenceMutation
+  useUpdateTrustCenterReferenceMutation,
 } from "/hooks/graph/TrustCenterReferenceGraph";
 
 const referenceSchema = z.object({
@@ -44,7 +44,7 @@ export const TrustCenterReferenceDialog = forwardRef<TrustCenterReferenceDialogR
   function TrustCenterReferenceDialog({ children }, ref) {
     const { __ } = useTranslate();
     const dialogRef = useDialogRef();
-    const [mode, setMode] = useState<'create' | 'edit'>('create');
+    const [mode, setMode] = useState<"create" | "edit">("create");
     const [trustCenterId, setTrustCenterId] = useState<string>("");
     const [connectionId, setConnectionId] = useState<string>("");
     const [editReference, setEditReference] = useState<Reference | null>(null);
@@ -61,12 +61,12 @@ export const TrustCenterReferenceDialog = forwardRef<TrustCenterReferenceDialogR
           description: "",
           websiteUrl: "",
         },
-      }
+      },
     );
 
     useImperativeHandle(ref, () => ({
       openCreate: (tId: string, cId: string) => {
-        setMode('create');
+        setMode("create");
         setTrustCenterId(tId);
         setConnectionId(cId);
         setEditReference(null);
@@ -79,7 +79,7 @@ export const TrustCenterReferenceDialog = forwardRef<TrustCenterReferenceDialogR
         dialogRef.current?.open();
       },
       openEdit: (reference: Reference) => {
-        setMode('edit');
+        setMode("edit");
         setEditReference(reference);
         setUploadedFile(null);
         reset({
@@ -99,8 +99,8 @@ export const TrustCenterReferenceDialog = forwardRef<TrustCenterReferenceDialogR
       }
     };
 
-    const onSubmit = handleSubmit(async (data: ReferenceFormData) => {
-      if (mode === 'create') {
+    const onSubmit = async (data: ReferenceFormData) => {
+      if (mode === "create") {
         if (!uploadedFile) {
           return;
         }
@@ -161,7 +161,7 @@ export const TrustCenterReferenceDialog = forwardRef<TrustCenterReferenceDialogR
           },
         });
       }
-    });
+    };
 
     const handleClose = () => {
       reset();
@@ -169,12 +169,12 @@ export const TrustCenterReferenceDialog = forwardRef<TrustCenterReferenceDialogR
     };
 
     const isSubmitting = isCreating || isUpdating;
-    const title = mode === 'create' ? __("Add Reference") : __("Edit Reference");
+    const title = mode === "create" ? __("Add Reference") : __("Edit Reference");
 
     return (
       <>
         {children && (
-          <span onClick={() => mode === 'create' && dialogRef.current?.open()}>
+          <span onClick={() => mode === "create" && dialogRef.current?.open()}>
             {children}
           </span>
         )}
@@ -185,7 +185,7 @@ export const TrustCenterReferenceDialog = forwardRef<TrustCenterReferenceDialogR
           className="max-w-2xl"
           onClose={handleClose}
         >
-          <form onSubmit={onSubmit}>
+          <form onSubmit={e => void handleSubmit(onSubmit)(e)}>
             <DialogContent padded className="space-y-6">
               <Field
                 {...register("name")}
@@ -213,7 +213,7 @@ export const TrustCenterReferenceDialog = forwardRef<TrustCenterReferenceDialogR
                 placeholder={__("https://example.com")}
               />
 
-              {mode === 'edit' && (
+              {mode === "edit" && (
                 <Field
                   {...register("rank", { valueAsNumber: true })}
                   label={__("Rank")}
@@ -239,18 +239,21 @@ export const TrustCenterReferenceDialog = forwardRef<TrustCenterReferenceDialogR
                 />
                 {uploadedFile && (
                   <div className="mt-2 p-3 bg-tertiary-subtle rounded-lg">
-                    <p className="text-sm font-medium">{__("Selected file")}:</p>
+                    <p className="text-sm font-medium">
+                      {__("Selected file")}
+                      :
+                    </p>
                     <p className="text-sm text-txt-secondary">{uploadedFile.name}</p>
                   </div>
                 )}
-                {mode === 'edit' && !uploadedFile && (
+                {mode === "edit" && !uploadedFile && (
                   <div className="mt-2 p-3 bg-tertiary-subtle rounded-lg">
                     <p className="text-sm text-txt-secondary">
                       {__("Current logo will be kept if no new file is uploaded")}
                     </p>
                   </div>
                 )}
-                {mode === 'create' && !uploadedFile && (
+                {mode === "create" && !uploadedFile && (
                   <div className="mt-2 p-3 bg-warning-subtle rounded-lg">
                     <p className="text-sm">
                       {__("Logo is required for new references")}
@@ -263,15 +266,15 @@ export const TrustCenterReferenceDialog = forwardRef<TrustCenterReferenceDialogR
             <DialogFooter>
               <Button
                 type="submit"
-                disabled={isSubmitting || (mode === 'create' && !uploadedFile)}
+                disabled={isSubmitting || (mode === "create" && !uploadedFile)}
                 icon={isSubmitting ? Spinner : undefined}
               >
-                {mode === 'create' ? __("Add Reference") : __("Update Reference")}
+                {mode === "create" ? __("Add Reference") : __("Update Reference")}
               </Button>
             </DialogFooter>
           </form>
         </Dialog>
       </>
     );
-  }
+  },
 );
diff --git a/apps/console/src/components/trustCenter/TrustCenterReferencesSection.tsx b/apps/console/src/components/trustCenter/TrustCenterReferencesSection.tsx
index ff24099e2..a1ae2938c 100644
--- a/apps/console/src/components/trustCenter/TrustCenterReferencesSection.tsx
+++ b/apps/console/src/components/trustCenter/TrustCenterReferencesSection.tsx
@@ -49,8 +49,8 @@ export function TrustCenterReferencesSection({
   const [draggedIndex, setDraggedIndex] = useState<number | null>(null);
   const [dragOverIndex, setDragOverIndex] = useState<number | null>(null);
   const [refetchKey, setRefetchKey] = useState(0);
-  const { node: trustCenterNode } =
-    useLazyLoadQuery<TrustCenterReferenceGraphQuery>(
+  const { node: trustCenterNode }
+    = useLazyLoadQuery<TrustCenterReferenceGraphQuery>(
       trustCenterReferencesQuery,
       { trustCenterId: trustCenterId || "" },
       { fetchPolicy: "network-only", fetchKey: refetchKey },
@@ -60,8 +60,8 @@ export function TrustCenterReferencesSection({
   }
   const [updateRank] = useUpdateTrustCenterReferenceRankMutation();
 
-  const references =
-    trustCenterNode?.references?.edges?.map((edge) => edge.node) || [];
+  const references
+    = trustCenterNode?.references?.edges?.map(edge => edge.node) || [];
   const referencesConnectionId = trustCenterNode?.references?.__id || "";
 
   const handleCreate = () => {
@@ -89,7 +89,7 @@ export function TrustCenterReferencesSection({
     }
   };
 
-  const handleDrop = (targetIndex: number) => {
+  const handleDrop = async (targetIndex: number) => {
     if (draggedIndex === null || draggedIndex === targetIndex) {
       setDraggedIndex(null);
       setDragOverIndex(null);
@@ -99,7 +99,7 @@ export function TrustCenterReferencesSection({
     const draggedRef = references[draggedIndex];
     const targetRank = references[targetIndex].rank;
 
-    updateRank({
+    await updateRank({
       variables: {
         input: {
           id: draggedRef.id,
@@ -107,7 +107,7 @@ export function TrustCenterReferencesSection({
         },
       },
       onCompleted: () => {
-        setRefetchKey((prev) => prev + 1);
+        setRefetchKey(prev => prev + 1);
       },
     });
 
@@ -158,8 +158,8 @@ export function TrustCenterReferencesSection({
               connectionId={referencesConnectionId}
               onVisitWebsite={() => handleVisitWebsite(reference.websiteUrl)}
               onDragStart={() => handleDragStart(index)}
-              onDragOver={(e) => handleDragOver(e, index)}
-              onDrop={() => handleDrop(index)}
+              onDragOver={e => handleDragOver(e, index)}
+              onDrop={() => void handleDrop(index)}
             />
           ))}
         </Tbody>
diff --git a/apps/console/src/components/trustCenter/TrustCenterVendorsCard.tsx b/apps/console/src/components/trustCenter/TrustCenterVendorsCard.tsx
index f88f9ca35..58e4aceea 100644
--- a/apps/console/src/components/trustCenter/TrustCenterVendorsCard.tsx
+++ b/apps/console/src/components/trustCenter/TrustCenterVendorsCard.tsx
@@ -38,7 +38,7 @@ type Mutation<Params> = (p: {
       showOnTrustCenter: boolean;
     } & Params;
   };
-}) => void;
+}) => Promise<void>;
 
 type Props<Params> = {
   vendors: TrustCenterVendorsCardFragment$key[];
@@ -55,8 +55,8 @@ export function TrustCenterVendorsCard<Params>(props: Props<Params>) {
   }, [props.vendors, limit]);
   const showMoreButton = limit !== null && props.vendors.length > limit;
 
-  const onToggleVisibility = (vendorId: string, showOnTrustCenter: boolean) => {
-    props.onToggleVisibility({
+  const onToggleVisibility = async (vendorId: string, showOnTrustCenter: boolean) => {
+    await props.onToggleVisibility({
       variables: {
         input: {
           id: vendorId,
@@ -112,7 +112,7 @@ export function TrustCenterVendorsCard<Params>(props: Props<Params>) {
 
 function VendorRow(props: {
   vendor: TrustCenterVendorsCardFragment$key;
-  onToggleVisibility: (vendorId: string, showOnTrustCenter: boolean) => void;
+  onToggleVisibility: (vendorId: string, showOnTrustCenter: boolean) => Promise<void>;
   disabled?: boolean;
 }) {
   const vendor = useFragment(trustCenterVendorFragment, props.vendor);
@@ -137,8 +137,7 @@ function VendorRow(props: {
           <Button
             variant="secondary"
             onClick={() =>
-              props.onToggleVisibility(vendor.id, !vendor.showOnTrustCenter)
-            }
+              void props.onToggleVisibility(vendor.id, !vendor.showOnTrustCenter)}
             icon={vendor.showOnTrustCenter ? IconCrossLargeX : IconCheckmark1}
             disabled={props.disabled}
           >
diff --git a/apps/console/src/hooks/graph/AssetGraph.ts b/apps/console/src/hooks/graph/AssetGraph.ts
index 5a52e2331..3a6d14fe9 100644
--- a/apps/console/src/hooks/graph/AssetGraph.ts
+++ b/apps/console/src/hooks/graph/AssetGraph.ts
@@ -150,7 +150,7 @@ export const useDeleteAsset = (
       {
         message: sprintf(
           __(
-            'This will permanently delete "%s". This action cannot be undone.',
+            "This will permanently delete \"%s\". This action cannot be undone.",
           ),
           asset.name,
         ),
diff --git a/apps/console/src/hooks/graph/AuditGraph.ts b/apps/console/src/hooks/graph/AuditGraph.ts
index 4a6135ea6..eb4e79ad6 100644
--- a/apps/console/src/hooks/graph/AuditGraph.ts
+++ b/apps/console/src/hooks/graph/AuditGraph.ts
@@ -135,7 +135,7 @@ export const useDeleteAudit = (
         await mutate({
           variables: {
             input: {
-              auditId: audit.id!,
+              auditId: audit.id,
             },
             connections: [connectionId],
           },
diff --git a/apps/console/src/hooks/graph/ContinualImprovementGraph.ts b/apps/console/src/hooks/graph/ContinualImprovementGraph.ts
index 4acbc88c4..07586045c 100644
--- a/apps/console/src/hooks/graph/ContinualImprovementGraph.ts
+++ b/apps/console/src/hooks/graph/ContinualImprovementGraph.ts
@@ -5,8 +5,8 @@ import { useTranslate } from "@probo/i18n";
 import { promisifyMutation, sprintf } from "@probo/helpers";
 import { useMutationWithToasts } from "../useMutationWithToasts";
 
-export const ContinualImprovementsConnectionKey =
-  "ContinualImprovementsPage_continualImprovements";
+export const ContinualImprovementsConnectionKey
+  = "ContinualImprovementsPage_continualImprovements";
 
 export const continualImprovementsQuery = graphql`
   query ContinualImprovementGraphListQuery(
diff --git a/apps/console/src/hooks/graph/DatumGraph.ts b/apps/console/src/hooks/graph/DatumGraph.ts
index 3a033abe6..93a267350 100644
--- a/apps/console/src/hooks/graph/DatumGraph.ts
+++ b/apps/console/src/hooks/graph/DatumGraph.ts
@@ -144,7 +144,7 @@ export const useDeleteDatum = (
       {
         message: sprintf(
           __(
-            'This will permanently delete "%s". This action cannot be undone.',
+            "This will permanently delete \"%s\". This action cannot be undone.",
           ),
           datum.name,
         ),
diff --git a/apps/console/src/hooks/graph/FrameworkGraph.ts b/apps/console/src/hooks/graph/FrameworkGraph.ts
index 13b548250..76f351f26 100644
--- a/apps/console/src/hooks/graph/FrameworkGraph.ts
+++ b/apps/console/src/hooks/graph/FrameworkGraph.ts
@@ -59,7 +59,7 @@ export const useDeleteFrameworkMutation = (
           return commitDelete({
             variables: {
               input: {
-                frameworkId: framework.id!,
+                frameworkId: framework.id,
               },
               connections: [connectionId],
             },
@@ -69,7 +69,7 @@ export const useDeleteFrameworkMutation = (
         {
           message: sprintf(
             __(
-              'This will permanently delete framework "%s". This action cannot be undone.',
+              "This will permanently delete framework \"%s\". This action cannot be undone.",
             ),
             framework.name,
           ),
diff --git a/apps/console/src/hooks/graph/NonconformityGraph.ts b/apps/console/src/hooks/graph/NonconformityGraph.ts
index badd9a90a..598f09b14 100644
--- a/apps/console/src/hooks/graph/NonconformityGraph.ts
+++ b/apps/console/src/hooks/graph/NonconformityGraph.ts
@@ -5,8 +5,8 @@ import { useTranslate } from "@probo/i18n";
 import { promisifyMutation, sprintf } from "@probo/helpers";
 import { useMutationWithToasts } from "../useMutationWithToasts";
 
-export const NonconformitiesConnectionKey =
-  "NonconformitiesPage_nonconformities";
+export const NonconformitiesConnectionKey
+  = "NonconformitiesPage_nonconformities";
 
 export const nonconformitiesQuery = graphql`
   query NonconformityGraphListQuery($organizationId: ID!, $snapshotId: ID) {
diff --git a/apps/console/src/hooks/graph/PeopleGraph.ts b/apps/console/src/hooks/graph/PeopleGraph.ts
index 3a4507cd9..547e87fa3 100644
--- a/apps/console/src/hooks/graph/PeopleGraph.ts
+++ b/apps/console/src/hooks/graph/PeopleGraph.ts
@@ -58,7 +58,7 @@ export function usePeople(
     { fetchPolicy: "network-only" },
   );
   return useMemo(() => {
-    return data.organization?.peoples?.edges.map((edge) => edge.node) ?? [];
+    return data.organization?.peoples?.edges.map(edge => edge.node) ?? [];
   }, [data]);
 }
 
@@ -123,7 +123,7 @@ export function usePeopleQuery(
     paginatedPeopleFragment,
     data.organization as PeopleGraphPaginatedFragment$key,
   );
-  const people = pagination.data.peoples?.edges.map((edge) => edge.node);
+  const people = pagination.data.peoples?.edges.map(edge => edge.node);
   return {
     ...pagination,
     people,
@@ -179,7 +179,7 @@ export const useDeletePeople = (
       {
         message: sprintf(
           __(
-            'This will permanently delete "%s". This action cannot be undone.',
+            "This will permanently delete \"%s\". This action cannot be undone.",
           ),
           people.fullName,
         ),
diff --git a/apps/console/src/hooks/graph/ProcessingActivityGraph.ts b/apps/console/src/hooks/graph/ProcessingActivityGraph.ts
index 8978864fd..8c8cbe901 100644
--- a/apps/console/src/hooks/graph/ProcessingActivityGraph.ts
+++ b/apps/console/src/hooks/graph/ProcessingActivityGraph.ts
@@ -5,8 +5,8 @@ import { useTranslate } from "@probo/i18n";
 import { promisifyMutation, sprintf } from "@probo/helpers";
 import { useMutationWithToasts } from "../useMutationWithToasts";
 
-export const ProcessingActivitiesConnectionKey =
-  "ProcessingActivitiesPage_processingActivities";
+export const ProcessingActivitiesConnectionKey
+  = "ProcessingActivitiesPage_processingActivities";
 export type ProcessingActivityDPIAResidualRisk = "LOW" | "MEDIUM" | "HIGH";
 
 export const processingActivitiesQuery = graphql`
diff --git a/apps/console/src/hooks/graph/RiskGraph.ts b/apps/console/src/hooks/graph/RiskGraph.ts
index 954d5c73b..d8d01185c 100644
--- a/apps/console/src/hooks/graph/RiskGraph.ts
+++ b/apps/console/src/hooks/graph/RiskGraph.ts
@@ -97,7 +97,7 @@ export function useRisksQuery(queryRef: PreloadedQuery<RiskGraphListQuery>) {
     risksFragment,
     data.organization as RiskGraphFragment$key,
   );
-  const risks = pagination.data?.risks?.edges.map((edge) => edge.node);
+  const risks = pagination.data?.risks?.edges.map(edge => edge.node);
 
   return {
     ...pagination,
diff --git a/apps/console/src/hooks/graph/StateOfApplicabilityGraph.ts b/apps/console/src/hooks/graph/StateOfApplicabilityGraph.ts
index 6c2ac991c..fa7834dab 100644
--- a/apps/console/src/hooks/graph/StateOfApplicabilityGraph.ts
+++ b/apps/console/src/hooks/graph/StateOfApplicabilityGraph.ts
@@ -81,7 +81,7 @@ export function useStateOfApplicabilityQuery(
     paginatedStateOfApplicabilityFragment,
     data.organization as StateOfApplicabilityGraphPaginatedFragment$key,
   );
-  const statesOfApplicability = pagination.data.statesOfApplicability?.edges.map((edge) => edge.node);
+  const statesOfApplicability = pagination.data.statesOfApplicability?.edges.map(edge => edge.node);
   return {
     ...pagination,
     statesOfApplicability,
@@ -142,7 +142,7 @@ export const useDeleteStateOfApplicability = (
       {
         message: sprintf(
           __(
-            'This will permanently delete "%s". This action cannot be undone.',
+            "This will permanently delete \"%s\". This action cannot be undone.",
           ),
           stateOfApplicability.name,
         ),
diff --git a/apps/console/src/hooks/graph/TrustCenterAccessTokenGraph.ts b/apps/console/src/hooks/graph/TrustCenterAccessTokenGraph.ts
index 161e8bd36..a821c98e9 100644
--- a/apps/console/src/hooks/graph/TrustCenterAccessTokenGraph.ts
+++ b/apps/console/src/hooks/graph/TrustCenterAccessTokenGraph.ts
@@ -1,4 +1,4 @@
-import { graphql } from 'react-relay';
+import { graphql } from "react-relay";
 
 export const trustCenterByIdQuery = graphql`
   query TrustCenterAccessTokenGraphQuery($trustCenterId: ID!) {
diff --git a/apps/console/src/hooks/graph/TrustCenterFileGraph.ts b/apps/console/src/hooks/graph/TrustCenterFileGraph.ts
index 7bdf86981..f90572255 100644
--- a/apps/console/src/hooks/graph/TrustCenterFileGraph.ts
+++ b/apps/console/src/hooks/graph/TrustCenterFileGraph.ts
@@ -28,7 +28,7 @@ export function useCreateTrustCenterFileMutation() {
     {
       successMessage: "File uploaded successfully",
       errorMessage: "Failed to upload file",
-    }
+    },
   );
 }
 
@@ -52,7 +52,7 @@ export function useUpdateTrustCenterFileMutation() {
     {
       successMessage: "File updated successfully",
       errorMessage: "Failed to update file",
-    }
+    },
   );
 }
 
@@ -73,6 +73,6 @@ export function useDeleteTrustCenterFileMutation() {
     {
       successMessage: "File deleted successfully",
       errorMessage: "Failed to delete file",
-    }
+    },
   );
 }
diff --git a/apps/console/src/hooks/graph/VendorGraph.ts b/apps/console/src/hooks/graph/VendorGraph.ts
index 43034cfa0..e6effad8b 100644
--- a/apps/console/src/hooks/graph/VendorGraph.ts
+++ b/apps/console/src/hooks/graph/VendorGraph.ts
@@ -79,7 +79,7 @@ export const useDeleteVendor = (
       {
         message: sprintf(
           __(
-            'This will permanently delete vendor "%s". This action cannot be undone.',
+            "This will permanently delete vendor \"%s\". This action cannot be undone.",
           ),
           vendor.name,
         ),
@@ -218,6 +218,6 @@ export function useVendors(organizationId: string) {
     { fetchPolicy: "network-only" },
   );
   return useMemo(() => {
-    return data.organization?.vendors?.edges.map((edge) => edge.node) ?? [];
+    return data.organization?.vendors?.edges.map(edge => edge.node) ?? [];
   }, [data]);
 }
diff --git a/apps/console/src/hooks/useFetchQuery.ts b/apps/console/src/hooks/useFetchQuery.ts
index d5d52b1c2..b51a6b6db 100644
--- a/apps/console/src/hooks/useFetchQuery.ts
+++ b/apps/console/src/hooks/useFetchQuery.ts
@@ -5,11 +5,11 @@ import { useQuery, type UseQueryOptions } from "@tanstack/react-query";
  */
 export function useFetchQuery<T>(
   url: string,
-  options?: Omit<UseQueryOptions<T>, "queryKey" | "queryFn">
+  options?: Omit<UseQueryOptions<T>, "queryKey" | "queryFn">,
 ) {
   return useQuery<T>({
     ...options,
     queryKey: [url],
-    queryFn: () => fetch(url).then((res) => res.json()),
+    queryFn: () => fetch(url).then(res => res.json()),
   });
 }
diff --git a/apps/console/src/hooks/useMutateField.tsx b/apps/console/src/hooks/useMutateField.tsx
index 93ee2a580..848dae18c 100644
--- a/apps/console/src/hooks/useMutateField.tsx
+++ b/apps/console/src/hooks/useMutateField.tsx
@@ -15,7 +15,7 @@ export function useMutateField<Input extends Record<string, unknown>>(
   const [mutate, isUpdating] = useMutation(mutation);
 
   return {
-    update<T extends keyof Input>(id: string, fieldName: T, value: Input[T]) {
+    update: <T extends keyof Input>(id: string, fieldName: T, value: Input[T]) => {
       if (!id) {
         return;
       }
diff --git a/apps/console/src/hooks/useMutationWithToasts.ts b/apps/console/src/hooks/useMutationWithToasts.ts
index 116e9bba2..636f3b08f 100644
--- a/apps/console/src/hooks/useMutationWithToasts.ts
+++ b/apps/console/src/hooks/useMutationWithToasts.ts
@@ -13,7 +13,7 @@ export function useMutationWithToasts<T extends MutationParameters>(
   baseOptions?: {
     successMessage?: string | ((response: T["response"]) => string);
     errorMessage?: string;
-  }
+  },
 ) {
   const [mutate, isLoading] = useMutation<T>(query);
   const { toast } = useToast();
@@ -24,7 +24,7 @@ export function useMutationWithToasts<T extends MutationParameters>(
         onSuccess?: () => void;
         successMessage?: string | ((response: T["response"]) => string);
         errorMessage?: string;
-      }
+      },
     ) => {
       const options = { ...baseOptions, ...queryOptions };
       return new Promise<void>((resolve, reject) =>
@@ -39,7 +39,7 @@ export function useMutationWithToasts<T extends MutationParameters>(
                 description: formatError(errorTitle, error as GraphQLError[]),
                 variant: "error",
               });
-              reject(error);
+              reject(new Error(errorTitle));
               return;
             }
             const successMessage = typeof options.successMessage === "function"
@@ -49,8 +49,8 @@ export function useMutationWithToasts<T extends MutationParameters>(
             toast({
               title: __("Success"),
               description:
-                successMessage ??
-                __("Operation completed successfully"),
+                successMessage
+                ?? __("Operation completed successfully"),
               variant: "success",
             });
             options.onSuccess?.();
@@ -65,10 +65,10 @@ export function useMutationWithToasts<T extends MutationParameters>(
             });
             reject(error);
           },
-        })
+        }),
       );
     },
-    [mutate, toast, __, baseOptions]
+    [mutate, toast, __, baseOptions],
   );
 
   return [mutateWithToast, isLoading] as const;
diff --git a/apps/console/src/hooks/useStateWithSchema.ts b/apps/console/src/hooks/useStateWithSchema.ts
index 703297de5..868c82a52 100644
--- a/apps/console/src/hooks/useStateWithSchema.ts
+++ b/apps/console/src/hooks/useStateWithSchema.ts
@@ -9,13 +9,13 @@ export function useStateWithSchema<T extends ZodTypeAny>(
   const [value, errors] = useMemo((): [z.infer<T>, Record<string, string>] => {
     try {
       schema.parse(state);
-      return [schema.parse(state), {}];
+      return [schema.parse(state) as z.TypeOf<T>, {}];
     } catch (error) {
       if (error instanceof ZodError) {
         return [
           state,
           Object.fromEntries(
-            error.issues.map((issue) => [
+            error.issues.map(issue => [
               issue.path.join("."),
               issue.message,
             ]) ?? [],
@@ -32,7 +32,7 @@ export function useStateWithSchema<T extends ZodTypeAny>(
     errors,
     update: useCallback(
       <TKey extends keyof z.infer<T>>(key: TKey, value: z.infer<T>[TKey]) => {
-        setState((prevState) => ({ ...prevState, [key]: value }));
+        setState(prevState => ({ ...prevState, [key]: value }));
       },
       [],
     ),
diff --git a/apps/console/src/hooks/useVendorSearch.ts b/apps/console/src/hooks/useVendorSearch.ts
index c01221809..40a3df3f8 100644
--- a/apps/console/src/hooks/useVendorSearch.ts
+++ b/apps/console/src/hooks/useVendorSearch.ts
@@ -7,7 +7,7 @@ export function useVendorSearch() {
   const [query, setQuery] = useState("");
   const [vendors, setVendors] = useState<Vendor[]>([]);
   useEffect(() => {
-    import("@probo/vendors").then((module) => {
+    void import("@probo/vendors").then((module) => {
       const ms = new MiniSearch({
         fields: ["name"],
         storeFields: Object.keys(module.default[0]),
@@ -16,7 +16,7 @@ export function useVendorSearch() {
           prefix: true,
         },
       });
-      ms.addAll(module.default.map((v) => ({ ...v, id: v.name })));
+      ms.addAll(module.default.map(v => ({ ...v, id: v.name })));
       // @ts-expect-error not enough types to handle this case
       searchRef.current = ms.search.bind(ms);
     });
diff --git a/apps/console/src/layouts/PublicTrustCenterLayout.tsx b/apps/console/src/layouts/PublicTrustCenterLayout.tsx
index 9c51cdbaa..35c704d53 100644
--- a/apps/console/src/layouts/PublicTrustCenterLayout.tsx
+++ b/apps/console/src/layouts/PublicTrustCenterLayout.tsx
@@ -49,15 +49,17 @@ export function PublicTrustCenterLayout({
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="flex items-center justify-between h-16">
             <div className="flex items-center space-x-4">
-              {organizationLogo ? (
-                <img
-                  src={organizationLogo}
-                  alt={organizationName}
-                  className="h-8 w-8 rounded"
-                />
-              ) : (
-                <Logo className="h-8 w-8" />
-              )}
+              {organizationLogo
+                ? (
+                    <img
+                      src={organizationLogo}
+                      alt={organizationName}
+                      className="h-8 w-8 rounded"
+                    />
+                  )
+                : (
+                    <Logo className="h-8 w-8" />
+                  )}
               <div>
                 <h1 className="text-lg font-semibold text-txt-primary">
                   {organizationName}
@@ -85,7 +87,7 @@ export function PublicTrustCenterLayout({
                 <Button
                   variant="tertiary"
                   icon={IconArrowBoxLeft}
-                  onClick={handleLogout}
+                  onClick={() => void handleLogout()}
                   title={__("Logout")}
                   className="text-sm"
                 />
diff --git a/apps/console/src/main.tsx b/apps/console/src/main.tsx
index 1a490ab75..487e6126c 100644
--- a/apps/console/src/main.tsx
+++ b/apps/console/src/main.tsx
@@ -17,5 +17,5 @@ createRoot(document.getElementById("root")!).render(
     <TranslatorProvider>
       <App />
     </TranslatorProvider>
-  </QueryClientProvider>
+  </QueryClientProvider>,
 );
diff --git a/apps/console/src/pages/DocumentSigningRequestsPage.tsx b/apps/console/src/pages/DocumentSigningRequestsPage.tsx
index 92d36821b..a0eb7e38a 100644
--- a/apps/console/src/pages/DocumentSigningRequestsPage.tsx
+++ b/apps/console/src/pages/DocumentSigningRequestsPage.tsx
@@ -34,8 +34,8 @@ export default function DocumentSigningRequestsPage() {
   const [loading, setLoading] = useState(true);
   const [signing, setSigning] = useState(false);
   const [error, setError] = useState<string | null>(null);
-  const [signingData, setSigningData] =
-    useState<DocumentSigningResponse | null>(null);
+  const [signingData, setSigningData]
+    = useState<DocumentSigningResponse | null>(null);
   const [currentDocIndex, setCurrentDocIndex] = useState(0);
   const [showAllDocuments, setShowAllDocuments] = useState(false);
 
@@ -53,7 +53,7 @@ export default function DocumentSigningRequestsPage() {
   useEffect(() => {
     if (!token) {
       setError(
-        __("Missing signing token. Please check your URL and try again.")
+        __("Missing signing token. Please check your URL and try again."),
       );
       setLoading(false);
       return;
@@ -66,26 +66,26 @@ export default function DocumentSigningRequestsPage() {
           {
             method: "GET",
             headers: {
-              Authorization: `Bearer ${token}`,
+              "Authorization": `Bearer ${token}`,
               "Content-Type": "application/json",
             },
-          }
+          },
         );
 
         if (!response.ok) {
           throw new Error(__("Failed to fetch signing documents"));
         }
 
-        const documents: Document[] = await response.json();
+        const documents = (await response.json()) as Document[];
 
-        const enhancedDocuments = documents.map((doc) => ({
+        const enhancedDocuments = documents.map(doc => ({
           ...doc,
           signed: false,
         }));
 
         // Extract organization name from the first document
-        const organizationName =
-          documents.length > 0
+        const organizationName
+          = documents.length > 0
             ? documents[0].organization_name || "Organization"
             : "Organization";
 
@@ -95,14 +95,14 @@ export default function DocumentSigningRequestsPage() {
         });
       } catch (err) {
         setError(
-          err instanceof Error ? err.message : __("An unknown error occurred")
+          err instanceof Error ? err.message : __("An unknown error occurred"),
         );
       } finally {
         setLoading(false);
       }
     }
 
-    fetchDocuments();
+    void fetchDocuments();
   }, [token, __]);
 
   const handleSignDocument = async () => {
@@ -117,10 +117,10 @@ export default function DocumentSigningRequestsPage() {
         {
           method: "POST",
           headers: {
-            Authorization: `Bearer ${token}`,
+            "Authorization": `Bearer ${token}`,
             "Content-Type": "application/json",
           },
-        }
+        },
       );
 
       if (!response.ok) {
@@ -146,7 +146,7 @@ export default function DocumentSigningRequestsPage() {
       }
     } catch (err) {
       setError(
-        err instanceof Error ? err.message : __("Failed to sign document")
+        err instanceof Error ? err.message : __("Failed to sign document"),
       );
     } finally {
       setSigning(false);
@@ -161,7 +161,7 @@ export default function DocumentSigningRequestsPage() {
 
   const getSignedCount = () => {
     if (!signingData) return 0;
-    return signingData.documents.filter((doc) => doc.signed).length;
+    return signingData.documents.filter(doc => doc.signed).length;
   };
 
   if (loading) {
@@ -217,7 +217,7 @@ export default function DocumentSigningRequestsPage() {
             </h1>
             <p className="text-txt-tertiary">
               {__(
-                "There are no documents requiring your signature at this time."
+                "There are no documents requiring your signature at this time.",
               )}
             </p>
           </Card>
@@ -247,165 +247,167 @@ export default function DocumentSigningRequestsPage() {
             <h1 className="text-2xl font-semibold mb-6">
               {sprintf(
                 __("%s requests your signature"),
-                signingData.organizationName
+                signingData.organizationName,
               )}
             </h1>
-            {allSigned ? (
-              <p className="text-txt-secondary text-base">
-                {__(
-                  "You have successfully signed all documents. You can now close this page."
+            {allSigned
+              ? (
+                  <p className="text-txt-secondary text-base">
+                    {__("You have successfully signed all documents. You can now close this page.")}
+                  </p>
+                )
+              : (
+                  <>
+                    <p className="text-txt-secondary text-base mb-4">
+                      {__("Please review and sign the following documents:")}
+                    </p>
+                    <Card className="mb-6 overflow-hidden">
+                      <div className="divide-y divide-border-solid">
+                        {(() => {
+                          const renderDocumentItem = (
+                            doc: Document,
+                            index: number,
+                          ) => (
+                            <div
+                              key={doc.document_version_id}
+                              className={clsx(
+                                "flex items-center gap-3 py-3 px-4 transition-colors",
+                                index === currentDocIndex
+                                  ? "bg-blue-50 border-l-4 border-blue-500"
+                                  : "bg-transparent hover:bg-level-1",
+                              )}
+                            >
+                              <div className="flex items-center justify-center w-8 h-8 rounded-full bg-level-2 flex-shrink-0">
+                                {doc.signed
+                                  ? (
+                                      <IconCircleCheck
+                                        size={20}
+                                        className="text-txt-success"
+                                      />
+                                    )
+                                  : (
+                                      <span className="text-sm font-semibold text-txt-tertiary">
+                                        {index + 1}
+                                      </span>
+                                    )}
+                              </div>
+                              <div className="flex-1 min-w-0">
+                                <p
+                                  className={clsx(
+                                    "text-sm font-medium truncate",
+                                    doc.signed
+                                      ? "text-txt-tertiary"
+                                      : "text-txt-primary",
+                                  )}
+                                >
+                                  {doc.title}
+                                </p>
+                              </div>
+                              <div className="flex-shrink-0">
+                                <span
+                                  className={clsx(
+                                    "inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium",
+                                    doc.signed
+                                      ? "bg-green-100 text-green-800"
+                                      : index === currentDocIndex
+                                        ? "bg-blue-100 text-blue-800"
+                                        : "bg-gray-100 text-gray-700",
+                                  )}
+                                >
+                                  {doc.signed
+                                    ? __("Signed")
+                                    : index === currentDocIndex
+                                      ? __("In review")
+                                      : __("Waiting signature")}
+                                </span>
+                              </div>
+                            </div>
+                          );
+
+                          const totalDocs = signingData.documents.length;
+
+                          if (totalDocs <= 4) {
+                            return signingData.documents.map((doc, index) =>
+                              renderDocumentItem(doc, index),
+                            );
+                          }
+
+                          if (showAllDocuments) {
+                            return (
+                              <>
+                                {signingData.documents.map((doc, index) =>
+                                  renderDocumentItem(doc, index),
+                                )}
+                                <button
+                                  onClick={() => setShowAllDocuments(false)}
+                                  className="w-full py-3 px-4 text-sm text-txt-secondary hover:bg-level-1 transition-colors text-left flex items-center gap-2"
+                                >
+                                  <span className="text-txt-tertiary">•••</span>
+                                  {__("Show less")}
+                                </button>
+                              </>
+                            );
+                          }
+
+                          // Always show current document in collapsed view with two "show more" buttons
+                          const firstDoc = signingData.documents[0];
+                          const currentIsFirst = currentDocIndex === 0;
+                          const currentIsLast = currentDocIndex === totalDocs - 1;
+
+                          // Calculate hidden docs before and after current
+                          const hiddenBeforeCurrent = currentIsFirst
+                            ? 0
+                            : currentDocIndex - 1;
+                          const hiddenAfterCurrent = currentIsLast
+                            ? 0
+                            : totalDocs - currentDocIndex - 2;
+
+                          return (
+                            <>
+                              {/* First document */}
+                              {renderDocumentItem(firstDoc, 0)}
+
+                              {/* Show more button for documents BEFORE current (signed documents) */}
+                              {hiddenBeforeCurrent > 0 && (
+                                <button
+                                  onClick={() => setShowAllDocuments(true)}
+                                  className="w-full py-3 px-4 text-sm text-txt-secondary hover:bg-level-1 transition-colors text-left flex items-center gap-2"
+                                >
+                                  <span className="text-txt-tertiary">•••</span>
+                                  {sprintf(
+                                    __("Show %s more documents"),
+                                    hiddenBeforeCurrent,
+                                  )}
+                                </button>
+                              )}
+
+                              {/* Current document (if not first) */}
+                              {!currentIsFirst
+                                && renderDocumentItem(currentDoc, currentDocIndex)}
+
+                              {/* Show more button for documents AFTER current (upcoming documents) */}
+                              {hiddenAfterCurrent > 0 && (
+                                <button
+                                  onClick={() => setShowAllDocuments(true)}
+                                  className="w-full py-3 px-4 text-sm text-txt-secondary hover:bg-level-1 transition-colors text-left flex items-center gap-2"
+                                >
+                                  <span className="text-txt-tertiary">•••</span>
+                                  {sprintf(
+                                    __("Show %s more documents"),
+                                    hiddenAfterCurrent,
+                                  )}
+                                </button>
+                              )}
+                            </>
+                          );
+                        })()}
+                      </div>
+                    </Card>
+                    <p className="text-txt-secondary text-sm mb-6">
+                      {__("Please review the document carefully before signing.")}
+                    </p>
+                  </>
                 )}
-              </p>
-            ) : (
-              <>
-                <p className="text-txt-secondary text-base mb-4">
-                  {__("Please review and sign the following documents:")}
-                </p>
-                <Card className="mb-6 overflow-hidden">
-                  <div className="divide-y divide-border-solid">
-                    {(() => {
-                      const renderDocumentItem = (
-                        doc: Document,
-                        index: number
-                      ) => (
-                        <div
-                          key={doc.document_version_id}
-                          className={clsx(
-                            "flex items-center gap-3 py-3 px-4 transition-colors",
-                            index === currentDocIndex
-                              ? "bg-blue-50 border-l-4 border-blue-500"
-                              : "bg-transparent hover:bg-level-1"
-                          )}
-                        >
-                          <div className="flex items-center justify-center w-8 h-8 rounded-full bg-level-2 flex-shrink-0">
-                            {doc.signed ? (
-                              <IconCircleCheck
-                                size={20}
-                                className="text-txt-success"
-                              />
-                            ) : (
-                              <span className="text-sm font-semibold text-txt-tertiary">
-                                {index + 1}
-                              </span>
-                            )}
-                          </div>
-                          <div className="flex-1 min-w-0">
-                            <p
-                              className={clsx(
-                                "text-sm font-medium truncate",
-                                doc.signed
-                                  ? "text-txt-tertiary"
-                                  : "text-txt-primary"
-                              )}
-                            >
-                              {doc.title}
-                            </p>
-                          </div>
-                          <div className="flex-shrink-0">
-                            <span
-                              className={clsx(
-                                "inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium",
-                                doc.signed
-                                  ? "bg-green-100 text-green-800"
-                                  : index === currentDocIndex
-                                    ? "bg-blue-100 text-blue-800"
-                                    : "bg-gray-100 text-gray-700"
-                              )}
-                            >
-                              {doc.signed
-                                ? __("Signed")
-                                : index === currentDocIndex
-                                  ? __("In review")
-                                  : __("Waiting signature")}
-                            </span>
-                          </div>
-                        </div>
-                      );
-
-                      const totalDocs = signingData.documents.length;
-
-                      if (totalDocs <= 4) {
-                        return signingData.documents.map((doc, index) =>
-                          renderDocumentItem(doc, index)
-                        );
-                      }
-
-                      if (showAllDocuments) {
-                        return (
-                          <>
-                            {signingData.documents.map((doc, index) =>
-                              renderDocumentItem(doc, index)
-                            )}
-                            <button
-                              onClick={() => setShowAllDocuments(false)}
-                              className="w-full py-3 px-4 text-sm text-txt-secondary hover:bg-level-1 transition-colors text-left flex items-center gap-2"
-                            >
-                              <span className="text-txt-tertiary">•••</span>
-                              {__("Show less")}
-                            </button>
-                          </>
-                        );
-                      }
-
-                      // Always show current document in collapsed view with two "show more" buttons
-                      const firstDoc = signingData.documents[0];
-                      const currentIsFirst = currentDocIndex === 0;
-                      const currentIsLast = currentDocIndex === totalDocs - 1;
-
-                      // Calculate hidden docs before and after current
-                      const hiddenBeforeCurrent = currentIsFirst
-                        ? 0
-                        : currentDocIndex - 1;
-                      const hiddenAfterCurrent = currentIsLast
-                        ? 0
-                        : totalDocs - currentDocIndex - 2;
-
-                      return (
-                        <>
-                          {/* First document */}
-                          {renderDocumentItem(firstDoc, 0)}
-
-                          {/* Show more button for documents BEFORE current (signed documents) */}
-                          {hiddenBeforeCurrent > 0 && (
-                            <button
-                              onClick={() => setShowAllDocuments(true)}
-                              className="w-full py-3 px-4 text-sm text-txt-secondary hover:bg-level-1 transition-colors text-left flex items-center gap-2"
-                            >
-                              <span className="text-txt-tertiary">•••</span>
-                              {sprintf(
-                                __("Show %s more documents"),
-                                hiddenBeforeCurrent
-                              )}
-                            </button>
-                          )}
-
-                          {/* Current document (if not first) */}
-                          {!currentIsFirst &&
-                            renderDocumentItem(currentDoc, currentDocIndex)}
-
-                          {/* Show more button for documents AFTER current (upcoming documents) */}
-                          {hiddenAfterCurrent > 0 && (
-                            <button
-                              onClick={() => setShowAllDocuments(true)}
-                              className="w-full py-3 px-4 text-sm text-txt-secondary hover:bg-level-1 transition-colors text-left flex items-center gap-2"
-                            >
-                              <span className="text-txt-tertiary">•••</span>
-                              {sprintf(
-                                __("Show %s more documents"),
-                                hiddenAfterCurrent
-                              )}
-                            </button>
-                          )}
-                        </>
-                      );
-                    })()}
-                  </div>
-                </Card>
-                <p className="text-txt-secondary text-sm mb-6">
-                  {__("Please review the document carefully before signing.")}
-                </p>
-              </>
-            )}
             {isMobile && pdfUrl && (
               <Button variant="secondary" asChild className="my-6 w-full">
                 <a target="_blank" rel="noopener noreferrer" href={pdfUrl}>
@@ -416,7 +418,7 @@ export default function DocumentSigningRequestsPage() {
             {!currentDoc.signed && !allSigned && (
               <>
                 <Button
-                  onClick={handleSignDocument}
+                  onClick={() => void handleSignDocument()}
                   className="h-10 w-full"
                   icon={signing ? Spinner : undefined}
                   disabled={signing}
@@ -425,7 +427,7 @@ export default function DocumentSigningRequestsPage() {
                 </Button>
                 <p className="text-xs text-txt-tertiary mt-2">
                   {__(
-                    "By clicking 'I acknowledge and agree', your digital signature will be recorded."
+                    "By clicking 'I acknowledge and agree', your digital signature will be recorded.",
                   )}
                 </p>
               </>
@@ -439,10 +441,12 @@ export default function DocumentSigningRequestsPage() {
               href="https://www.getprobo.com/"
               className={clsx(
                 "flex gap-1 text-sm font-medium text-txt-tertiary items-center w-max mx-auto",
-                isMobile ? "mt-15" : "mt-30"
+                isMobile ? "mt-15" : "mt-30",
               )}
             >
-              Powered by <Logo withPicto className="h-6" />
+              Powered by
+              {" "}
+              <Logo withPicto className="h-6" />
             </a>
           </div>
           {isDesktop && (
diff --git a/apps/console/src/pages/iam/apiKeys/APIKeysPageLoader.tsx b/apps/console/src/pages/iam/apiKeys/APIKeysPageLoader.tsx
index 48c6c476b..964fb1ba6 100644
--- a/apps/console/src/pages/iam/apiKeys/APIKeysPageLoader.tsx
+++ b/apps/console/src/pages/iam/apiKeys/APIKeysPageLoader.tsx
@@ -6,8 +6,8 @@ import type { APIKeysPageQuery } from "/__generated__/iam/APIKeysPageQuery.graph
 import { IAMRelayProvider } from "/providers/IAMRelayProvider";
 
 function APIKeysPageLoaderInner() {
-  const [queryRef, loadQuery] =
-    useQueryLoader<APIKeysPageQuery>(apiKeysPageQuery);
+  const [queryRef, loadQuery]
+    = useQueryLoader<APIKeysPageQuery>(apiKeysPageQuery);
 
   useEffect(() => {
     loadQuery({});
diff --git a/apps/console/src/pages/iam/apiKeys/_components/PersonalAPIKeyList.tsx b/apps/console/src/pages/iam/apiKeys/_components/PersonalAPIKeyList.tsx
index a7d8e871c..fbc83b66c 100644
--- a/apps/console/src/pages/iam/apiKeys/_components/PersonalAPIKeyList.tsx
+++ b/apps/console/src/pages/iam/apiKeys/_components/PersonalAPIKeyList.tsx
@@ -107,25 +107,25 @@ export function PersonalAPIKeyList(props: {
 
   const connectionID = ConnectionHandler.getConnectionID(
     viewer.id,
-    "PersonalAPIKeyListFragment_personalAPIKeys"
+    "PersonalAPIKeyListFragment_personalAPIKeys",
   );
 
-  const { formState, handleSubmit, register, control, reset } =
-    useFormWithSchema(createSchema, {
+  const { formState, handleSubmit, register, control, reset }
+    = useFormWithSchema(createSchema, {
       defaultValues: {
         name: new Date().toISOString().split("T")[0],
         expiresIn: "1month",
       },
     });
 
-  const [createCommit, isCreating] =
-    useMutation<PersonalAPIKeyListCreateMutation>(createMutation);
+  const [createCommit, isCreating]
+    = useMutation<PersonalAPIKeyListCreateMutation>(createMutation);
 
   const handleCreate = (data: CreateFormData) => {
     const expiresAt = computeExpiresAt(data.expiresIn);
     const connectionID = ConnectionHandler.getConnectionID(
       viewer.id,
-      "PersonalAPIKeyListFragment_personalAPIKeys"
+      "PersonalAPIKeyListFragment_personalAPIKeys",
     );
 
     createCommit({
@@ -170,25 +170,27 @@ export function PersonalAPIKeyList(props: {
           </Button>
         </div>
 
-        {viewer.personalAPIKeys.edges.length === 0 ? (
-          <Card padded>
-            <div className="text-center py-12">
-              <h3 className="text-lg font-medium text-gray-900 mb-2">
-                {__("No API keys")}
-              </h3>
-              <p className="text-gray-600 mb-6">
-                {__("Create an API key to authenticate programmatic access.")}
-              </p>
-            </div>
-          </Card>
-        ) : (
-          <Card padded>
-            <PersonalAPIKeysTable
-              edges={viewer.personalAPIKeys.edges}
-              connectionId={connectionID}
-            />
-          </Card>
-        )}
+        {viewer.personalAPIKeys.edges.length === 0
+          ? (
+              <Card padded>
+                <div className="text-center py-12">
+                  <h3 className="text-lg font-medium text-gray-900 mb-2">
+                    {__("No API keys")}
+                  </h3>
+                  <p className="text-gray-600 mb-6">
+                    {__("Create an API key to authenticate programmatic access.")}
+                  </p>
+                </div>
+              </Card>
+            )
+          : (
+              <Card padded>
+                <PersonalAPIKeysTable
+                  edges={viewer.personalAPIKeys.edges}
+                  connectionId={connectionID}
+                />
+              </Card>
+            )}
       </div>
 
       <Dialog
@@ -196,7 +198,7 @@ export function PersonalAPIKeyList(props: {
         title={<Breadcrumb items={[__("API Keys"), __("Create")]} />}
         onClose={() => reset()}
       >
-        <form onSubmit={handleSubmit(handleCreate)}>
+        <form onSubmit={e => void handleSubmit(handleCreate)(e)}>
           <DialogContent padded className="space-y-5">
             <Field error={formState.errors.name?.message}>
               <Label>{__("Name")}</Label>
diff --git a/apps/console/src/pages/iam/apiKeys/_components/PersonalAPIKeyRow.tsx b/apps/console/src/pages/iam/apiKeys/_components/PersonalAPIKeyRow.tsx
index cbea04d41..0aae81992 100644
--- a/apps/console/src/pages/iam/apiKeys/_components/PersonalAPIKeyRow.tsx
+++ b/apps/console/src/pages/iam/apiKeys/_components/PersonalAPIKeyRow.tsx
@@ -46,8 +46,8 @@ export function PersonalAPIKeyRow(props: {
   const key = useFragment(personalAPIKeyRowFragment, fKey);
   const expired = new Date(key.expiresAt) < now;
 
-  const [revokeCommit, isRevoking] =
-    useMutation<PersonalAPIKeyRow_revokeMutation>(revokeMutation);
+  const [revokeCommit, isRevoking]
+    = useMutation<PersonalAPIKeyRow_revokeMutation>(revokeMutation);
 
   const handleRevoke = () => {
     confirm(
@@ -64,11 +64,11 @@ export function PersonalAPIKeyRow(props: {
                   title: __("Error"),
                   description: formatError(
                     __("Failed to revoke API key."),
-                    errors as GraphQLError[]
+                    errors as GraphQLError[],
                   ),
                   variant: "error",
                 });
-                reject(errors);
+                reject(new Error(errors[0]?.message ?? __("Failed to revoke API key.")));
                 return;
               }
               toast({
@@ -83,7 +83,7 @@ export function PersonalAPIKeyRow(props: {
                 title: __("Error"),
                 description: formatError(
                   __("Failed to revoke API key."),
-                  error
+                  error,
                 ),
                 variant: "error",
               });
@@ -95,11 +95,11 @@ export function PersonalAPIKeyRow(props: {
       {
         title: __("Revoke API Key"),
         message: __(
-          `Are you sure you want to revoke the API key "${key.name}"? This action cannot be undone.`
+          `Are you sure you want to revoke the API key "${key.name}"? This action cannot be undone.`,
         ),
         label: __("Revoke"),
         variant: "danger",
-      }
+      },
     );
   };
 
diff --git a/apps/console/src/pages/iam/apiKeys/_components/PersonalAPIKeyTokenAction.tsx b/apps/console/src/pages/iam/apiKeys/_components/PersonalAPIKeyTokenAction.tsx
index 2cab48d64..234d964dc 100644
--- a/apps/console/src/pages/iam/apiKeys/_components/PersonalAPIKeyTokenAction.tsx
+++ b/apps/console/src/pages/iam/apiKeys/_components/PersonalAPIKeyTokenAction.tsx
@@ -34,14 +34,14 @@ export function PersonalAPIKeyTokenAction(props: {
               title: __("Error"),
               description: formatError(
                 __("Failed to load API key token."),
-                error
+                error,
               ),
               variant: "error",
             });
             dialogRef.current?.close();
           }
         },
-      }
+      },
     );
   };
 
diff --git a/apps/console/src/pages/iam/auth/ForgotPasswordPage.tsx b/apps/console/src/pages/iam/auth/ForgotPasswordPage.tsx
index 7603d6394..d6a909164 100644
--- a/apps/console/src/pages/iam/auth/ForgotPasswordPage.tsx
+++ b/apps/console/src/pages/iam/auth/ForgotPasswordPage.tsx
@@ -39,7 +39,7 @@ export default function ForgotPasswordPage() {
     sendInstructionsMutation,
   );
 
-  const onSubmit = handleSubmit(async ({ email }) => {
+  const onSubmit = handleSubmit(({ email }) => {
     sendInstructions({
       variables: {
         input: { email },
@@ -74,82 +74,87 @@ export default function ForgotPasswordPage() {
     });
   });
 
-  return instructionsSent ? (
-    <div className="space-y-6 w-full max-w-md mx-auto">
-      <div className="space-y-2 text-center">
-        <h1 className="text-3xl font-bold">{__("Check your email")}</h1>
-        <p className="text-txt-tertiary">
-          {__("We've sent password reset instructions to your email address")}
-        </p>
-      </div>
+  return instructionsSent
+    ? (
+        <div className="space-y-6 w-full max-w-md mx-auto">
+          <div className="space-y-2 text-center">
+            <h1 className="text-3xl font-bold">{__("Check your email")}</h1>
+            <p className="text-txt-tertiary">
+              {__("We've sent password reset instructions to your email address")}
+            </p>
+          </div>
 
-      <div className="text-center">
-        <p className="text-sm text-txt-tertiary">
-          {__("Didn't receive the email?")}{" "}
-          <button
-            onClick={() => setInstructionsSent(false)}
-            className="underline text-txt-primary hover:text-txt-secondary"
-          >
-            {__("Try again")}
-          </button>
-        </p>
-      </div>
+          <div className="text-center">
+            <p className="text-sm text-txt-tertiary">
+              {__("Didn't receive the email?")}
+              {" "}
+              <button
+                onClick={() => setInstructionsSent(false)}
+                className="underline text-txt-primary hover:text-txt-secondary"
+              >
+                {__("Try again")}
+              </button>
+            </p>
+          </div>
 
-      <div className="text-center">
-        <p className="text-sm text-txt-tertiary">
-          {__("Remember your password?")}{" "}
-          <Link
-            to="/auth/login"
-            className="underline text-txt-primary hover:text-txt-secondary"
-          >
-            {__("Back to login")}
-          </Link>
-        </p>
-      </div>
-    </div>
-  ) : (
-    <div className="space-y-6 w-full max-w-md mx-auto">
-      <div className="space-y-2 text-center">
-        <h1 className="text-3xl font-bold">{__("Forgot Password")}</h1>
-        <p className="text-txt-tertiary">
-          {__(
-            "Enter your email address and we'll send you instructions to reset your password",
-          )}
-        </p>
-      </div>
+          <div className="text-center">
+            <p className="text-sm text-txt-tertiary">
+              {__("Remember your password?")}
+              {" "}
+              <Link
+                to="/auth/login"
+                className="underline text-txt-primary hover:text-txt-secondary"
+              >
+                {__("Back to login")}
+              </Link>
+            </p>
+          </div>
+        </div>
+      )
+    : (
+        <div className="space-y-6 w-full max-w-md mx-auto">
+          <div className="space-y-2 text-center">
+            <h1 className="text-3xl font-bold">{__("Forgot Password")}</h1>
+            <p className="text-txt-tertiary">
+              {__(
+                "Enter your email address and we'll send you instructions to reset your password",
+              )}
+            </p>
+          </div>
 
-      <form onSubmit={onSubmit} className="space-y-4">
-        <Field
-          label={__("Email")}
-          type="email"
-          placeholder={__("name@example.com")}
-          {...register("email")}
-          required
-          error={formState.errors.email?.message}
-        />
+          <form onSubmit={e => void onSubmit(e)} className="space-y-4">
+            <Field
+              label={__("Email")}
+              type="email"
+              placeholder={__("name@example.com")}
+              {...register("email")}
+              required
+              error={formState.errors.email?.message}
+            />
 
-        <Button
-          type="submit"
-          className="w-full"
-          disabled={formState.isSubmitting}
-        >
-          {formState.isSubmitting
-            ? __("Sending instructions...")
-            : __("Send reset instructions")}
-        </Button>
-      </form>
+            <Button
+              type="submit"
+              className="w-full"
+              disabled={formState.isSubmitting}
+            >
+              {formState.isSubmitting
+                ? __("Sending instructions...")
+                : __("Send reset instructions")}
+            </Button>
+          </form>
 
-      <div className="text-center">
-        <p className="text-sm text-txt-tertiary">
-          {__("Remember your password?")}{" "}
-          <Link
-            to="/auth/login"
-            className="underline text-txt-primary hover:text-txt-secondary"
-          >
-            {__("Back to login")}
-          </Link>
-        </p>
-      </div>
-    </div>
-  );
+          <div className="text-center">
+            <p className="text-sm text-txt-tertiary">
+              {__("Remember your password?")}
+              {" "}
+              <Link
+                to="/auth/login"
+                className="underline text-txt-primary hover:text-txt-secondary"
+              >
+                {__("Back to login")}
+              </Link>
+            </p>
+          </div>
+        </div>
+      );
 }
diff --git a/apps/console/src/pages/iam/auth/ResetPasswordPage.tsx b/apps/console/src/pages/iam/auth/ResetPasswordPage.tsx
index 84f9ffb0c..e9bd7f951 100644
--- a/apps/console/src/pages/iam/auth/ResetPasswordPage.tsx
+++ b/apps/console/src/pages/iam/auth/ResetPasswordPage.tsx
@@ -22,7 +22,7 @@ const schema = z
     password: z.string().min(8),
     confirmPassword: z.string().min(8),
   })
-  .refine((data) => data.password === data.confirmPassword, {
+  .refine(data => data.password === data.confirmPassword, {
     message: "Passwords don't match",
     path: ["confirmPassword"],
   });
@@ -47,7 +47,7 @@ export default function ResetPasswordPage() {
     resetPasswordMutation,
   );
 
-  const onSubmit = handleSubmit(async (data) => {
+  const onSubmit = handleSubmit((data) => {
     if (!token) {
       toast({
         title: __("Reset failed"),
@@ -88,7 +88,7 @@ export default function ResetPasswordPage() {
           description: __("Password reset successfully"),
           variant: "success",
         });
-        navigate("/auth/login", { replace: true });
+        void navigate("/auth/login", { replace: true });
       },
     });
   });
@@ -102,7 +102,7 @@ export default function ResetPasswordPage() {
         </p>
       </div>
 
-      <form onSubmit={onSubmit} className="space-y-4">
+      <form onSubmit={e => void onSubmit(e)} className="space-y-4">
         <Field
           label={__("New Password")}
           type="password"
@@ -130,7 +130,8 @@ export default function ResetPasswordPage() {
 
       <div className="text-center">
         <p className="text-sm text-txt-tertiary">
-          {__("Remember your password?")}{" "}
+          {__("Remember your password?")}
+          {" "}
           <Link
             to="/auth/login"
             className="underline text-txt-primary hover:text-txt-secondary"
diff --git a/apps/console/src/pages/iam/auth/VerifyEmailPage.tsx b/apps/console/src/pages/iam/auth/VerifyEmailPage.tsx
index 1834c358d..673afd556 100644
--- a/apps/console/src/pages/iam/auth/VerifyEmailPage.tsx
+++ b/apps/console/src/pages/iam/auth/VerifyEmailPage.tsx
@@ -37,10 +37,10 @@ export default function VerifyEmailPage() {
     },
   });
 
-  const [verifyEmail] =
-    useMutation<VerifyEmailPageMutation>(verifyEmailMutation);
+  const [verifyEmail]
+    = useMutation<VerifyEmailPageMutation>(verifyEmailMutation);
 
-  const handleSubmit = form.handleSubmit(async (data) => {
+  const handleSubmit = form.handleSubmit((data) => {
     verifyEmail({
       variables: {
         input: {
@@ -83,40 +83,42 @@ export default function VerifyEmailPage() {
         </p>
       </div>
 
-      {isConfirmed ? (
-        <div className="space-y-4 text-center">
-          <p className="text-green-600 dark:text-green-400">
-            {__("Your email has been confirmed successfully!")}
-          </p>
-          <Button to="/auth/login" className="w-full">
-            {__("Proceed to Login")}
-          </Button>
-        </div>
-      ) : (
-        <form onSubmit={handleSubmit} className="space-y-4">
-          <Field
-            label={__("Confirmation Token")}
-            type="text"
-            placeholder={__("Enter your confirmation token")}
-            {...form.register("token")}
-            error={form.formState.errors.token?.message}
-            disabled={form.formState.isSubmitting}
-            help={__(
-              "The token has been automatically filled from the URL if available",
-            )}
-          />
+      {isConfirmed
+        ? (
+            <div className="space-y-4 text-center">
+              <p className="text-green-600 dark:text-green-400">
+                {__("Your email has been confirmed successfully!")}
+              </p>
+              <Button to="/auth/login" className="w-full">
+                {__("Proceed to Login")}
+              </Button>
+            </div>
+          )
+        : (
+            <form onSubmit={e => void handleSubmit(e)} className="space-y-4">
+              <Field
+                label={__("Confirmation Token")}
+                type="text"
+                placeholder={__("Enter your confirmation token")}
+                {...form.register("token")}
+                error={form.formState.errors.token?.message}
+                disabled={form.formState.isSubmitting}
+                help={__(
+                  "The token has been automatically filled from the URL if available",
+                )}
+              />
 
-          <Button
-            type="submit"
-            className="w-full"
-            disabled={form.formState.isSubmitting}
-          >
-            {form.formState.isSubmitting
-              ? __("Confirming...")
-              : __("Confirm Email")}
-          </Button>
-        </form>
-      )}
+              <Button
+                type="submit"
+                className="w-full"
+                disabled={form.formState.isSubmitting}
+              >
+                {form.formState.isSubmitting
+                  ? __("Confirming...")
+                  : __("Confirm Email")}
+              </Button>
+            </form>
+          )}
 
       <div className="text-center">
         {!isConfirmed && (
diff --git a/apps/console/src/pages/iam/auth/sign-in/PasswordSignInPage.tsx b/apps/console/src/pages/iam/auth/sign-in/PasswordSignInPage.tsx
index a67345587..fa6b6459f 100644
--- a/apps/console/src/pages/iam/auth/sign-in/PasswordSignInPage.tsx
+++ b/apps/console/src/pages/iam/auth/sign-in/PasswordSignInPage.tsx
@@ -22,14 +22,14 @@ export default function PasswordSignInPage() {
 
   const { toast } = useToast();
 
-  const [signIn, isSigningIn] =
-    useMutation<PasswordSignInPageMutation>(signInMutation);
+  const [signIn, isSigningIn]
+    = useMutation<PasswordSignInPageMutation>(signInMutation);
 
   const handlePasswordLogin: FormEventHandler<HTMLFormElement> = (e) => {
     e.preventDefault();
     const formData = new FormData(e.currentTarget);
-    const emailValue = formData.get("email")?.toString();
-    const passwordValue = formData.get("password")?.toString();
+    const emailValue = formData.get("email") ? (formData.get("email") as string).toString() : "";
+    const passwordValue = formData.get("password") ? (formData.get("password") as string).toString() : "";
 
     if (!emailValue || !passwordValue) return;
 
@@ -104,14 +104,16 @@ export default function PasswordSignInPage() {
       </Button>
 
       <div className="text-center mt-6 text-sm text-txt-secondary">
-        {__("Don't have an account ?")}{" "}
+        {__("Don't have an account ?")}
+        {" "}
         <Link to="/auth/register" className="underline hover:text-txt-primary">
           {__("Register")}
         </Link>
       </div>
 
       <div className="text-center text-sm text-txt-secondary">
-        {__("Forgot password?")}{" "}
+        {__("Forgot password?")}
+        {" "}
         <Link
           to="/auth/forgot-password"
           className="underline hover:text-txt-primary"
diff --git a/apps/console/src/pages/iam/auth/sign-in/SSOSignInPage.tsx b/apps/console/src/pages/iam/auth/sign-in/SSOSignInPage.tsx
index 67d81fb50..19ac69afe 100644
--- a/apps/console/src/pages/iam/auth/sign-in/SSOSignInPage.tsx
+++ b/apps/console/src/pages/iam/auth/sign-in/SSOSignInPage.tsx
@@ -19,15 +19,15 @@ const ssoAvailabilityQuery = graphql`
 export default function SSOSignInPage() {
   const { __ } = useTranslate();
 
-  const [queryRef, loadQuery] =
-    useQueryLoader<SSOSignInPageQuery>(ssoAvailabilityQuery);
+  const [queryRef, loadQuery]
+    = useQueryLoader<SSOSignInPageQuery>(ssoAvailabilityQuery);
   const [checking, setChecking] = useState(false);
 
   const handleSSOCheck: FormEventHandler<HTMLFormElement> = (e) => {
     e.preventDefault();
     setChecking(true);
     const formData = new FormData(e.currentTarget);
-    const email = formData.get("email")?.toString();
+    const email = formData.get("email") ? (formData.get("email") as string).toString() : "";
 
     if (!email) return;
 
@@ -66,7 +66,8 @@ export default function SSOSignInPage() {
         </Button>
 
         <div className="text-center mt-6 text-sm text-txt-secondary">
-          {__("Don't have an account ?")}{" "}
+          {__("Don't have an account ?")}
+          {" "}
           <Link
             to="/auth/register"
             className="underline hover:text-txt-primary"
@@ -112,7 +113,7 @@ function NavigateToSSOLoginURL(props: {
         variant: "error",
       });
 
-      navigate("/auth/login");
+      void navigate("/auth/login");
       return;
     }
 
diff --git a/apps/console/src/pages/iam/auth/sign-in/SignInPage.tsx b/apps/console/src/pages/iam/auth/sign-in/SignInPage.tsx
index b68c9e343..596b89042 100644
--- a/apps/console/src/pages/iam/auth/sign-in/SignInPage.tsx
+++ b/apps/console/src/pages/iam/auth/sign-in/SignInPage.tsx
@@ -37,14 +37,16 @@ export default function SignInPage() {
       </Button>
 
       <div className="text-center mt-6 text-sm text-txt-secondary">
-        {__("Don't have an account ?")}{" "}
+        {__("Don't have an account ?")}
+        {" "}
         <Link to="/auth/register" className="underline hover:text-txt-primary">
           {__("Register")}
         </Link>
       </div>
 
       <div className="text-center text-sm text-txt-secondary">
-        {__("Forgot password?")}{" "}
+        {__("Forgot password?")}
+        {" "}
         <Link
           to="/auth/forgot-password"
           className="underline hover:text-txt-primary"
diff --git a/apps/console/src/pages/iam/auth/sign-up/SignUpFromInvitationPage.tsx b/apps/console/src/pages/iam/auth/sign-up/SignUpFromInvitationPage.tsx
index a94c371b7..742d03bdc 100644
--- a/apps/console/src/pages/iam/auth/sign-up/SignUpFromInvitationPage.tsx
+++ b/apps/console/src/pages/iam/auth/sign-up/SignUpFromInvitationPage.tsx
@@ -81,7 +81,7 @@ export default function SignUpFromInvitationPage() {
           ),
           variant: "success",
         });
-        navigate("/", { replace: true });
+        void navigate("/", { replace: true });
       },
       onError: (e) => {
         toast({
@@ -102,7 +102,7 @@ export default function SignUpFromInvitationPage() {
         </p>
       </div>
 
-      <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+      <form onSubmit={e => void handleSubmit(onSubmit)(e)} className="space-y-4">
         <Field
           label={__("Full Name")}
           type="text"
@@ -130,7 +130,8 @@ export default function SignUpFromInvitationPage() {
 
       <div className="text-center">
         <p className="text-sm text-txt-tertiary">
-          {__("Already have an account?")}{" "}
+          {__("Already have an account?")}
+          {" "}
           <Link
             to="/auth/login"
             className="underline text-txt-primary hover:text-txt-secondary"
diff --git a/apps/console/src/pages/iam/auth/sign-up/SignUpPage.tsx b/apps/console/src/pages/iam/auth/sign-up/SignUpPage.tsx
index 81373ebed..f12f31a30 100644
--- a/apps/console/src/pages/iam/auth/sign-up/SignUpPage.tsx
+++ b/apps/console/src/pages/iam/auth/sign-up/SignUpPage.tsx
@@ -67,7 +67,7 @@ export default function SignUpPage() {
           description: __("Account created successfully"),
           variant: "success",
         });
-        navigate("/", { replace: true });
+        void navigate("/", { replace: true });
       },
       onError: (e) => {
         toast({
@@ -88,7 +88,7 @@ export default function SignUpPage() {
         </p>
       </div>
 
-      <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+      <form onSubmit={e => void handleSubmit(onSubmit)(e)} className="space-y-4">
         <Field
           label={__("Full Name")}
           type="text"
@@ -125,7 +125,8 @@ export default function SignUpPage() {
 
       <div className="text-center">
         <p className="text-sm text-txt-tertiary">
-          {__("Already have an account?")}{" "}
+          {__("Already have an account?")}
+          {" "}
           <Link
             to="/auth/login"
             className="underline text-txt-primary hover:text-txt-secondary"
diff --git a/apps/console/src/pages/iam/memberships/MembershipsPage.tsx b/apps/console/src/pages/iam/memberships/MembershipsPage.tsx
index f51262f81..0069107ec 100644
--- a/apps/console/src/pages/iam/memberships/MembershipsPage.tsx
+++ b/apps/console/src/pages/iam/memberships/MembershipsPage.tsx
@@ -118,15 +118,17 @@ export function MembershipsPage(props: {
                   onValueChange={setSearch}
                 />
               </div>
-              {memberships.length === 0 ? (
-                <div className="text-center text-txt-secondary py-4">
-                  {__("No organizations found")}
-                </div>
-              ) : (
-                memberships.map(({ node }) => (
-                  <MembershipCard key={node.id} fKey={node} />
-                ))
-              )}
+              {memberships.length === 0
+                ? (
+                    <div className="text-center text-txt-secondary py-4">
+                      {__("No organizations found")}
+                    </div>
+                  )
+                : (
+                    memberships.map(({ node }) => (
+                      <MembershipCard key={node.id} fKey={node} />
+                    ))
+                  )}
             </div>
           )}
           <Card padded>
diff --git a/apps/console/src/pages/iam/memberships/MembershipsPageLoader.tsx b/apps/console/src/pages/iam/memberships/MembershipsPageLoader.tsx
index 6822ef3b3..41e7432ec 100644
--- a/apps/console/src/pages/iam/memberships/MembershipsPageLoader.tsx
+++ b/apps/console/src/pages/iam/memberships/MembershipsPageLoader.tsx
@@ -6,8 +6,8 @@ import { MembershipsPage, membershipsPageQuery } from "./MembershipsPage";
 import { IAMRelayProvider } from "/providers/IAMRelayProvider";
 
 function MembershipsPageLoader() {
-  const [queryRef, loadQuery] =
-    useQueryLoader<MembershipsPageQuery>(membershipsPageQuery);
+  const [queryRef, loadQuery]
+    = useQueryLoader<MembershipsPageQuery>(membershipsPageQuery);
 
   useEffect(() => {
     loadQuery({});
diff --git a/apps/console/src/pages/iam/memberships/ViewerLayout.tsx b/apps/console/src/pages/iam/memberships/ViewerLayout.tsx
index a08ef087d..dae50383e 100644
--- a/apps/console/src/pages/iam/memberships/ViewerLayout.tsx
+++ b/apps/console/src/pages/iam/memberships/ViewerLayout.tsx
@@ -26,13 +26,13 @@ export function ViewerLayout(props: {
 
   return (
     <Layout
-      headerTrailing={
+      headerTrailing={(
         <div className="ml-auto">
           <Suspense fallback={<Skeleton className="w-32 h-8" />}>
             <ViewerDropdown fKey={viewer} />
           </Suspense>
         </div>
-      }
+      )}
     >
       <Outlet />
     </Layout>
diff --git a/apps/console/src/pages/iam/memberships/ViewerLayoutLoader.tsx b/apps/console/src/pages/iam/memberships/ViewerLayoutLoader.tsx
index e5cfcf6a9..1fd685d64 100644
--- a/apps/console/src/pages/iam/memberships/ViewerLayoutLoader.tsx
+++ b/apps/console/src/pages/iam/memberships/ViewerLayoutLoader.tsx
@@ -6,8 +6,8 @@ import { IAMRelayProvider } from "/providers/IAMRelayProvider";
 import { ViewerLayoutLoading } from "./ViewerLayoutLoading";
 
 function ViewerLayoutLoader() {
-  const [queryRef, loadQuery] =
-    useQueryLoader<ViewerLayoutQuery>(viewerLayoutQuery);
+  const [queryRef, loadQuery]
+    = useQueryLoader<ViewerLayoutQuery>(viewerLayoutQuery);
 
   useEffect(() => {
     loadQuery({});
diff --git a/apps/console/src/pages/iam/memberships/ViewerLayoutLoading.tsx b/apps/console/src/pages/iam/memberships/ViewerLayoutLoading.tsx
index e3394f3fb..d30abc563 100644
--- a/apps/console/src/pages/iam/memberships/ViewerLayoutLoading.tsx
+++ b/apps/console/src/pages/iam/memberships/ViewerLayoutLoading.tsx
@@ -4,11 +4,11 @@ import { Outlet } from "react-router";
 export function ViewerLayoutLoading() {
   return (
     <Layout
-      headerTrailing={
+      headerTrailing={(
         <div className="ml-auto">
           <Skeleton className="w-32 h-8" />
         </div>
-      }
+      )}
     >
       <Outlet />
     </Layout>
diff --git a/apps/console/src/pages/iam/memberships/_components/InvitationCard.tsx b/apps/console/src/pages/iam/memberships/_components/InvitationCard.tsx
index 81c7bd5a9..716be4301 100644
--- a/apps/console/src/pages/iam/memberships/_components/InvitationCard.tsx
+++ b/apps/console/src/pages/iam/memberships/_components/InvitationCard.tsx
@@ -48,16 +48,16 @@ interface InvitationCardProps {
 }
 
 export function InvitationCard(props: InvitationCardProps) {
-  const { pendingInvitationsConnectionId, membershipConnectionId, fKey } =
-    props;
+  const { pendingInvitationsConnectionId, membershipConnectionId, fKey }
+    = props;
 
   const { __ } = useTranslate();
   const { toast } = useToast();
 
   const invitation = useFragment<InvitationCardFragment$key>(fragment, fKey);
 
-  const [acceptInvitation, isAccepting] =
-    useMutation<InvitationCardMutation>(acceptMutation);
+  const [acceptInvitation, isAccepting]
+    = useMutation<InvitationCardMutation>(acceptMutation);
 
   const handleAccept = () => {
     acceptInvitation({
@@ -96,10 +96,14 @@ export function InvitationCard(props: InvitationCardProps) {
             {invitation.organization.name}
           </h3>
           <p className="text-sm text-txt-secondary">
-            {__("Role")}: <span className="font-medium">{invitation.role}</span>
+            {__("Role")}
+            :
+            <span className="font-medium">{invitation.role}</span>
           </p>
           <p className="text-xs text-txt-tertiary">
-            {__("Invited on")} {formatDate(invitation.createdAt)}
+            {__("Invited on")}
+            {" "}
+            {formatDate(invitation.createdAt)}
           </p>
         </div>
         <Button onClick={handleAccept} disabled={isAccepting}>
diff --git a/apps/console/src/pages/iam/memberships/_components/MembershipCard.tsx b/apps/console/src/pages/iam/memberships/_components/MembershipCard.tsx
index 57b8a117d..8054f29f6 100644
--- a/apps/console/src/pages/iam/memberships/_components/MembershipCard.tsx
+++ b/apps/console/src/pages/iam/memberships/_components/MembershipCard.tsx
@@ -72,11 +72,11 @@ export function MembershipCard(props: MembershipCardProps) {
     fKey,
   );
   const isAuthenticated = !!lastSession;
-  const isExpired =
-    lastSession && parseDate(lastSession.expiresAt) < new Date();
+  const isExpired
+    = lastSession && parseDate(lastSession.expiresAt) < new Date();
 
-  const [assumeOrganizationSession] =
-    useMutation<MembershipCard_assumeMutation>(
+  const [assumeOrganizationSession]
+    = useMutation<MembershipCard_assumeMutation>(
       assumeOrganizationSessionMutation,
     );
 
@@ -96,13 +96,13 @@ export function MembershipCard(props: MembershipCardProps) {
 
         switch (result.__typename) {
           case "PasswordRequired":
-            navigate("auth/login");
+            void navigate("auth/login");
             break;
           case "SAMLAuthenticationRequired":
             window.location.href = result.redirectUrl;
             break;
           default:
-            navigate(`/organizations/${organization.id}`);
+            void navigate(`/organizations/${organization.id}`);
         }
       },
     });
@@ -148,15 +148,17 @@ export function MembershipCard(props: MembershipCardProps) {
           </div>
         </div>
         <div className="flex items-center gap-3">
-          {isAuthenticated ? (
-            <Link to={`/organizations/${organization.id}`}>
-              <Button variant="secondary">{__("Start")}</Button>
-            </Link>
-          ) : (
-            <Button onClick={handleAssumeOrganizationSession}>
-              {__("Login")}
-            </Button>
-          )}
+          {isAuthenticated
+            ? (
+                <Link to={`/organizations/${organization.id}`}>
+                  <Button variant="secondary">{__("Start")}</Button>
+                </Link>
+              )
+            : (
+                <Button onClick={handleAssumeOrganizationSession}>
+                  {__("Login")}
+                </Button>
+              )}
         </div>
       </div>
     </Card>
diff --git a/apps/console/src/pages/iam/memberships/_components/ViewerDropdown.tsx b/apps/console/src/pages/iam/memberships/_components/ViewerDropdown.tsx
index 6bec1e5f0..3013b02ce 100644
--- a/apps/console/src/pages/iam/memberships/_components/ViewerDropdown.tsx
+++ b/apps/console/src/pages/iam/memberships/_components/ViewerDropdown.tsx
@@ -35,8 +35,8 @@ export function ViewerDropdown(props: { fKey: ViewerDropdownFragment$key }) {
   const { __ } = useTranslate();
   const { toast } = useToast();
 
-  const { canListAPIKeys, email, fullName } =
-    useFragment<ViewerDropdownFragment$key>(fragment, fKey);
+  const { canListAPIKeys, email, fullName }
+    = useFragment<ViewerDropdownFragment$key>(fragment, fKey);
   const [signOut] = useMutation(signOutMutation);
 
   const handleLogout: React.MouseEventHandler<HTMLAnchorElement> = (e) => {
diff --git a/apps/console/src/pages/iam/organizations/NewOrganizationPage.tsx b/apps/console/src/pages/iam/organizations/NewOrganizationPage.tsx
index 0ecf94a61..0f6bf0f3f 100644
--- a/apps/console/src/pages/iam/organizations/NewOrganizationPage.tsx
+++ b/apps/console/src/pages/iam/organizations/NewOrganizationPage.tsx
@@ -31,13 +31,13 @@ function NewOrganizationPage() {
   const { toast } = useToast();
   const { __ } = useTranslate();
 
-  const [createOrganization, isCreating] =
-    useMutation<NewOrganizationPageMutation>(createOrganizationMutation);
+  const [createOrganization, isCreating]
+    = useMutation<NewOrganizationPageMutation>(createOrganizationMutation);
 
-  const handleSubmit: FormEventHandler<HTMLFormElement> = async (e) => {
+  const handleSubmit: FormEventHandler<HTMLFormElement> = (e) => {
     e.preventDefault();
     const formData = new FormData(e.currentTarget);
-    const name = formData.get("name")?.toString();
+    const name = formData.get("name") ? (formData.get("name") as string).toString() : "";
     if (!name) {
       toast({
         title: __("Error"),
@@ -47,7 +47,7 @@ function NewOrganizationPage() {
       return;
     }
 
-    createOrganization({
+    void createOrganization({
       variables: {
         input: {
           name,
@@ -64,7 +64,7 @@ function NewOrganizationPage() {
         }
 
         const org = r.createOrganization!.organization;
-        navigate(`/organizations/${org!.id}`);
+        void navigate(`/organizations/${org!.id}`);
         toast({
           title: __("Success"),
           description: __("Organization has been created successfully"),
@@ -84,7 +84,7 @@ function NewOrganizationPage() {
   return (
     <div className="space-y-6">
       <Link
-        to={location.state?.from ?? "/"}
+        to={(location.state as { from: string })?.from ?? "/"}
         className="mb-4 inline-flex gap-2 items-center"
       >
         <IconChevronLeft size={16} />
@@ -97,7 +97,7 @@ function NewOrganizationPage() {
         )}
       />
       <Card padded asChild>
-        <form onSubmit={handleSubmit} className="space-y-4">
+        <form onSubmit={e => void handleSubmit(e)} className="space-y-4">
           <h2 className="text-xl font-semibold mb-1">
             {__("Organization Details")}
           </h2>
diff --git a/apps/console/src/pages/iam/organizations/ViewerMembershipLayout.tsx b/apps/console/src/pages/iam/organizations/ViewerMembershipLayout.tsx
index 19e0d00e4..4051cc8cb 100644
--- a/apps/console/src/pages/iam/organizations/ViewerMembershipLayout.tsx
+++ b/apps/console/src/pages/iam/organizations/ViewerMembershipLayout.tsx
@@ -47,8 +47,8 @@ export function ViewerMembershipLayout(props: {
 
   const { __ } = useTranslate();
 
-  const { organization, viewer } =
-    usePreloadedQuery<ViewerMembershipLayoutQuery>(
+  const { organization, viewer }
+    = usePreloadedQuery<ViewerMembershipLayoutQuery>(
       viewerMembershipLayoutQuery,
       queryRef,
     );
@@ -58,7 +58,7 @@ export function ViewerMembershipLayout(props: {
 
   return (
     <Layout
-      headerLeading={
+      headerLeading={(
         <>
           <MembershipsDropdown
             organizationFKey={organization}
@@ -77,12 +77,12 @@ export function ViewerMembershipLayout(props: {
             </Link>
           )}
         </>
-      }
-      headerTrailing={
+      )}
+      headerTrailing={(
         <Suspense fallback={<Skeleton className="w-32 h-8" />}>
           <ViewerMembershipDropdown fKey={organization} />
         </Suspense>
-      }
+      )}
       sidebar={!hideSidebar && <Sidebar fKey={organization} />}
     >
       <CoreRelayProvider>
diff --git a/apps/console/src/pages/iam/organizations/_components/MembershipsDropdown.tsx b/apps/console/src/pages/iam/organizations/_components/MembershipsDropdown.tsx
index 4eb5853e4..1b4594a81 100644
--- a/apps/console/src/pages/iam/organizations/_components/MembershipsDropdown.tsx
+++ b/apps/console/src/pages/iam/organizations/_components/MembershipsDropdown.tsx
@@ -46,8 +46,8 @@ export function MembershipsDropdown(props: {
   const { __ } = useTranslate();
   const [search, setSearch] = useState("");
 
-  const currentOrganization =
-    useFragment<MembershipsDropdown_organizationFragment$key>(
+  const currentOrganization
+    = useFragment<MembershipsDropdown_organizationFragment$key>(
       organizationFragment,
       organizationFKey,
     );
@@ -72,7 +72,7 @@ export function MembershipsDropdown(props: {
     <div className="flex items-center gap-1">
       <Dropdown
         onOpenChange={handleOpenMenu}
-        toggle={
+        toggle={(
           <Button
             className="-ml-3"
             variant="tertiary"
@@ -80,7 +80,7 @@ export function MembershipsDropdown(props: {
           >
             {currentOrganization.name}
           </Button>
-        }
+        )}
       >
         <div className="px-3 py-2">
           <Input
@@ -97,11 +97,11 @@ export function MembershipsDropdown(props: {
         <div className="max-h-150 overflow-y-auto scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-transparent hover:scrollbar-thumb-gray-400">
           {queryRef && (
             <Suspense
-              fallback={
+              fallback={(
                 <div className="px-3 py-2 text-gray-500">
                   {__("Loading organizations...")}
                 </div>
-              }
+              )}
             >
               <MembershipsDropdownMenu search={search} queryRef={queryRef} />
             </Suspense>
diff --git a/apps/console/src/pages/iam/organizations/_components/MembershipsDropdownMenuItem.tsx b/apps/console/src/pages/iam/organizations/_components/MembershipsDropdownMenuItem.tsx
index 5a3d9bf5b..0968ee365 100644
--- a/apps/console/src/pages/iam/organizations/_components/MembershipsDropdownMenuItem.tsx
+++ b/apps/console/src/pages/iam/organizations/_components/MembershipsDropdownMenuItem.tsx
@@ -63,21 +63,21 @@ export function MembershipsDropdownMenuItem(props: {
 
   const navigate = useNavigate();
 
-  const { id, lastSession, organization } =
-    useFragment<MembershipsDropdownMenuItemFragment$key>(fragment, fKey);
+  const { id, lastSession, organization }
+    = useFragment<MembershipsDropdownMenuItemFragment$key>(fragment, fKey);
 
   const isAuthenticated = !!lastSession;
-  const isExpired =
-    lastSession && parseDate(lastSession.expiresAt) < new Date();
+  const isExpired
+    = lastSession && parseDate(lastSession.expiresAt) < new Date();
 
-  const [assumeOrganizationSession] =
-    useMutation<MembershipsDropdownMenuItem_assumeMutation>(
+  const [assumeOrganizationSession]
+    = useMutation<MembershipsDropdownMenuItem_assumeMutation>(
       assumeOrganizationSessionMutation,
     );
 
   const handleAssumeOrganizationSession = useCallback(() => {
     if (isAuthenticated) {
-      navigate(`/organizations/${organization.id}`);
+      void navigate(`/organizations/${organization.id}`);
     } else {
       assumeOrganizationSession({
         variables: {
@@ -94,13 +94,13 @@ export function MembershipsDropdownMenuItem(props: {
 
           switch (result.__typename) {
             case "PasswordRequired":
-              navigate("/auth/login");
+              void navigate("/auth/login");
               break;
             case "SAMLAuthenticationRequired":
               window.location.href = result.redirectUrl;
               break;
             default:
-              navigate(`/organizations/${organization.id}`);
+              void navigate(`/organizations/${organization.id}`);
           }
         },
       });
diff --git a/apps/console/src/pages/iam/organizations/_components/Sidebar.tsx b/apps/console/src/pages/iam/organizations/_components/Sidebar.tsx
index 1278a58c2..1234276f6 100644
--- a/apps/console/src/pages/iam/organizations/_components/Sidebar.tsx
+++ b/apps/console/src/pages/iam/organizations/_components/Sidebar.tsx
@@ -1,25 +1,25 @@
 import {
-    IconBank,
-    IconBook,
-    IconBox,
-    IconCalendar1,
-    IconCircleProgress,
-    IconClock,
-    IconCrossLargeX,
-    IconFire3,
-    IconGroup1,
-    IconInboxEmpty,
-    IconListStack,
-    IconLock,
-    IconMedal,
-    IconPageCheck,
-    IconPageTextLine,
-    IconRotateCw,
-    IconSettingsGear2,
-    IconShield,
-    IconStore,
-    IconTodo,
-    SidebarItem,
+  IconBank,
+  IconBook,
+  IconBox,
+  IconCalendar1,
+  IconCircleProgress,
+  IconClock,
+  IconCrossLargeX,
+  IconFire3,
+  IconGroup1,
+  IconInboxEmpty,
+  IconListStack,
+  IconLock,
+  IconMedal,
+  IconPageCheck,
+  IconPageTextLine,
+  IconRotateCw,
+  IconSettingsGear2,
+  IconShield,
+  IconStore,
+  IconTodo,
+  SidebarItem,
 } from "@probo/ui";
 import { useTranslate } from "@probo/i18n";
 import { useOrganizationId } from "/hooks/useOrganizationId";
@@ -59,157 +59,157 @@ const fragment = graphql`
 `;
 
 export function Sidebar(props: { fKey: SidebarFragment$key }) {
-    const { fKey } = props;
+  const { fKey } = props;
 
-    const { __ } = useTranslate();
-    const organizationId = useOrganizationId();
+  const { __ } = useTranslate();
+  const organizationId = useOrganizationId();
 
-    const organization = useFragment<SidebarFragment$key>(fragment, fKey);
+  const organization = useFragment<SidebarFragment$key>(fragment, fKey);
 
-    const prefix = `/organizations/${organizationId}`;
+  const prefix = `/organizations/${organizationId}`;
 
-    return (
-        <ul className="space-y-[2px]">
-            {organization.canListMeetings && (
-                <SidebarItem
-                    label={__("Meetings")}
-                    icon={IconCalendar1}
-                    to={`${prefix}/meetings`}
-                />
-            )}
-            {organization.canListTasks && (
-                <SidebarItem
-                    label={__("Tasks")}
-                    icon={IconInboxEmpty}
-                    to={`${prefix}/tasks`}
-                />
-            )}
-            {organization.canListMeasures && (
-                <SidebarItem
-                    label={__("Measures")}
-                    icon={IconTodo}
-                    to={`${prefix}/measures`}
-                />
-            )}
-            {organization.canListRisks && (
-                <SidebarItem
-                    label={__("Risks")}
-                    icon={IconFire3}
-                    to={`${prefix}/risks`}
-                />
-            )}
-            {organization.canListFrameworks && (
-                <SidebarItem
-                    label={__("Frameworks")}
-                    icon={IconBank}
-                    to={`${prefix}/frameworks`}
-                />
-            )}
-            {organization.canListPeople && (
-                <SidebarItem
-                    label={__("People")}
-                    icon={IconGroup1}
-                    to={`${prefix}/people`}
-                />
-            )}
-            {organization.canListVendors && (
-                <SidebarItem
-                    label={__("Vendors")}
-                    icon={IconStore}
-                    to={`${prefix}/vendors`}
-                />
-            )}
-            {organization.canListDocuments && (
-                <SidebarItem
-                    label={__("Documents")}
-                    icon={IconPageTextLine}
-                    to={`${prefix}/documents`}
-                />
-            )}
-            {organization.canListAssets && (
-                <SidebarItem
-                    label={__("Assets")}
-                    icon={IconBox}
-                    to={`${prefix}/assets`}
-                />
-            )}
-            {organization.canListData && (
-                <SidebarItem
-                    label={__("Data")}
-                    icon={IconListStack}
-                    to={`${prefix}/data`}
-                />
-            )}
-            {organization.canListAudits && (
-                <SidebarItem
-                    label={__("Audits")}
-                    icon={IconMedal}
-                    to={`${prefix}/audits`}
-                />
-            )}
-            {organization.canListNonconformities && (
-                <SidebarItem
-                    label={__("Nonconformities")}
-                    icon={IconCrossLargeX}
-                    to={`${prefix}/nonconformities`}
-                />
-            )}
-            {organization.canListObligations && (
-                <SidebarItem
-                    label={__("Obligations")}
-                    icon={IconBook}
-                    to={`${prefix}/obligations`}
-                />
-            )}
-            {organization.canListContinualImprovements && (
-                <SidebarItem
-                    label={__("Continual Improvements")}
-                    icon={IconRotateCw}
-                    to={`${prefix}/continual-improvements`}
-                />
-            )}
-            {organization.canListProcessingActivities && (
-                <SidebarItem
-                    label={__("Processing Activities")}
-                    icon={IconCircleProgress}
-                    to={`${prefix}/processing-activities`}
-                />
-            )}
-            {organization.canListStatesOfApplicability && (
-                <SidebarItem
-                    label={__("States of Applicability")}
-                    icon={IconPageCheck}
-                    to={`${prefix}/states-of-applicability`}
-                />
-            )}
-            {organization.canListRightsRequests && (
-                <SidebarItem
-                    label={__("Rights Requests")}
-                    icon={IconLock}
-                    to={`${prefix}/rights-requests`}
-                />
-            )}
-            {organization.canListSnapshots && (
-                <SidebarItem
-                    label={__("Snapshots")}
-                    icon={IconClock}
-                    to={`${prefix}/snapshots`}
-                />
-            )}
-            {organization.canGetTrustCenter && (
-                <SidebarItem
-                    label={__("Trust Center")}
-                    icon={IconShield}
-                    to={`${prefix}/trust-center`}
-                />
-            )}
-            {organization.canUpdateOrganization && (
-                <SidebarItem
-                    label={__("Settings")}
-                    icon={IconSettingsGear2}
-                    to={`${prefix}/settings`}
-                />
-            )}
-        </ul>
-    );
+  return (
+    <ul className="space-y-[2px]">
+      {organization.canListMeetings && (
+        <SidebarItem
+          label={__("Meetings")}
+          icon={IconCalendar1}
+          to={`${prefix}/meetings`}
+        />
+      )}
+      {organization.canListTasks && (
+        <SidebarItem
+          label={__("Tasks")}
+          icon={IconInboxEmpty}
+          to={`${prefix}/tasks`}
+        />
+      )}
+      {organization.canListMeasures && (
+        <SidebarItem
+          label={__("Measures")}
+          icon={IconTodo}
+          to={`${prefix}/measures`}
+        />
+      )}
+      {organization.canListRisks && (
+        <SidebarItem
+          label={__("Risks")}
+          icon={IconFire3}
+          to={`${prefix}/risks`}
+        />
+      )}
+      {organization.canListFrameworks && (
+        <SidebarItem
+          label={__("Frameworks")}
+          icon={IconBank}
+          to={`${prefix}/frameworks`}
+        />
+      )}
+      {organization.canListPeople && (
+        <SidebarItem
+          label={__("People")}
+          icon={IconGroup1}
+          to={`${prefix}/people`}
+        />
+      )}
+      {organization.canListVendors && (
+        <SidebarItem
+          label={__("Vendors")}
+          icon={IconStore}
+          to={`${prefix}/vendors`}
+        />
+      )}
+      {organization.canListDocuments && (
+        <SidebarItem
+          label={__("Documents")}
+          icon={IconPageTextLine}
+          to={`${prefix}/documents`}
+        />
+      )}
+      {organization.canListAssets && (
+        <SidebarItem
+          label={__("Assets")}
+          icon={IconBox}
+          to={`${prefix}/assets`}
+        />
+      )}
+      {organization.canListData && (
+        <SidebarItem
+          label={__("Data")}
+          icon={IconListStack}
+          to={`${prefix}/data`}
+        />
+      )}
+      {organization.canListAudits && (
+        <SidebarItem
+          label={__("Audits")}
+          icon={IconMedal}
+          to={`${prefix}/audits`}
+        />
+      )}
+      {organization.canListNonconformities && (
+        <SidebarItem
+          label={__("Nonconformities")}
+          icon={IconCrossLargeX}
+          to={`${prefix}/nonconformities`}
+        />
+      )}
+      {organization.canListObligations && (
+        <SidebarItem
+          label={__("Obligations")}
+          icon={IconBook}
+          to={`${prefix}/obligations`}
+        />
+      )}
+      {organization.canListContinualImprovements && (
+        <SidebarItem
+          label={__("Continual Improvements")}
+          icon={IconRotateCw}
+          to={`${prefix}/continual-improvements`}
+        />
+      )}
+      {organization.canListProcessingActivities && (
+        <SidebarItem
+          label={__("Processing Activities")}
+          icon={IconCircleProgress}
+          to={`${prefix}/processing-activities`}
+        />
+      )}
+      {organization.canListStatesOfApplicability && (
+        <SidebarItem
+          label={__("States of Applicability")}
+          icon={IconPageCheck}
+          to={`${prefix}/states-of-applicability`}
+        />
+      )}
+      {organization.canListRightsRequests && (
+        <SidebarItem
+          label={__("Rights Requests")}
+          icon={IconLock}
+          to={`${prefix}/rights-requests`}
+        />
+      )}
+      {organization.canListSnapshots && (
+        <SidebarItem
+          label={__("Snapshots")}
+          icon={IconClock}
+          to={`${prefix}/snapshots`}
+        />
+      )}
+      {organization.canGetTrustCenter && (
+        <SidebarItem
+          label={__("Trust Center")}
+          icon={IconShield}
+          to={`${prefix}/trust-center`}
+        />
+      )}
+      {organization.canUpdateOrganization && (
+        <SidebarItem
+          label={__("Settings")}
+          icon={IconSettingsGear2}
+          to={`${prefix}/settings`}
+        />
+      )}
+    </ul>
+  );
 }
diff --git a/apps/console/src/pages/iam/organizations/settings/GeneralSettingsPage.tsx b/apps/console/src/pages/iam/organizations/settings/GeneralSettingsPage.tsx
index 283063b92..57000349c 100644
--- a/apps/console/src/pages/iam/organizations/settings/GeneralSettingsPage.tsx
+++ b/apps/console/src/pages/iam/organizations/settings/GeneralSettingsPage.tsx
@@ -49,8 +49,8 @@ export function GeneralSettingsPage(props: {
     throw new Error("Relay node is not an organization");
   }
 
-  const [deleteOrganization, isDeletingOrganization] =
-    useMutationWithToasts<GeneralSettingsPage_deleteMutation>(
+  const [deleteOrganization, isDeletingOrganization]
+    = useMutationWithToasts<GeneralSettingsPage_deleteMutation>(
       deleteOrganizationMutation,
       {
         successMessage: __("Organization deleted successfully."),
@@ -67,7 +67,7 @@ export function GeneralSettingsPage(props: {
         connections: [],
       },
       onSuccess: () => {
-        navigate("/", { replace: true });
+        void navigate("/", { replace: true });
       },
     });
   };
@@ -87,7 +87,8 @@ export function GeneralSettingsPage(props: {
                 {__("Delete Organization")}
               </h3>
               <p className="text-sm text-txt-tertiary">
-                {__("Permanently delete this organization and all its data.")}{" "}
+                {__("Permanently delete this organization and all its data.")}
+                {" "}
                 <span className="text-red-600 font-medium">
                   {__("This action cannot be undone.")}
                 </span>
@@ -95,7 +96,7 @@ export function GeneralSettingsPage(props: {
             </div>
             <DeleteOrganizationDialog
               organizationName={organization.name}
-              onConfirm={handleDeleteOrganization}
+              onConfirm={() => void handleDeleteOrganization()}
               isDeleting={isDeletingOrganization}
             >
               <Button
diff --git a/apps/console/src/pages/iam/organizations/settings/MembersPageLoader.tsx b/apps/console/src/pages/iam/organizations/settings/MembersPageLoader.tsx
index f8be175f6..c90d2615a 100644
--- a/apps/console/src/pages/iam/organizations/settings/MembersPageLoader.tsx
+++ b/apps/console/src/pages/iam/organizations/settings/MembersPageLoader.tsx
@@ -7,8 +7,8 @@ import type { MembersPageQuery } from "/__generated__/iam/MembersPageQuery.graph
 
 function MembersPageLoader() {
   const organizationId = useOrganizationId();
-  const [queryRef, loadQuery] =
-    useQueryLoader<MembersPageQuery>(membersPageQuery);
+  const [queryRef, loadQuery]
+    = useQueryLoader<MembersPageQuery>(membersPageQuery);
 
   useEffect(() => {
     loadQuery({
diff --git a/apps/console/src/pages/iam/organizations/settings/SAMLSettingsPage.tsx b/apps/console/src/pages/iam/organizations/settings/SAMLSettingsPage.tsx
index 85485fd45..60f561c57 100644
--- a/apps/console/src/pages/iam/organizations/settings/SAMLSettingsPage.tsx
+++ b/apps/console/src/pages/iam/organizations/settings/SAMLSettingsPage.tsx
@@ -39,8 +39,8 @@ export function SAMLSettingsPage(props: {
   const formDialogRef = useDialogRef();
   const domainDialogRef = useDialogRef();
   const [isEditing, setIsEditing] = useState<boolean>();
-  const [domainVerificationToken, setDomainVerificationToken] =
-    useState<string>();
+  const [domainVerificationToken, setDomainVerificationToken]
+    = useState<string>();
 
   const { __ } = useTranslate();
 
@@ -48,8 +48,8 @@ export function SAMLSettingsPage(props: {
   if (organization.__typename !== "Organization") {
     throw new Error("invalid node type");
   }
-  const [formQueryRef, loadFormQuery] =
-    useQueryLoader<EditSAMLConfigurationFormQuery>(samlConfigurationFormQuery);
+  const [formQueryRef, loadFormQuery]
+    = useQueryLoader<EditSAMLConfigurationFormQuery>(samlConfigurationFormQuery);
 
   const handleOpenFormDialog = (samlConfigurationId?: string) => {
     setIsEditing(!!samlConfigurationId);
@@ -96,18 +96,20 @@ export function SAMLSettingsPage(props: {
         onClose={handleCloseFormDialog}
         title={<Breadcrumb items={[__("SAML Settings"), __("Configure")]} />}
       >
-        {isEditing ? (
-          <Suspense>
-            {formQueryRef && (
-              <EditSAMLConfigurationForm
-                queryRef={formQueryRef}
-                onUpdate={handleCloseFormDialog}
-              />
+        {isEditing
+          ? (
+              <Suspense>
+                {formQueryRef && (
+                  <EditSAMLConfigurationForm
+                    queryRef={formQueryRef}
+                    onUpdate={handleCloseFormDialog}
+                  />
+                )}
+              </Suspense>
+            )
+          : (
+              <NewSAMLConfigurationForm onCreate={handleCloseFormDialog} />
             )}
-          </Suspense>
-        ) : (
-          <NewSAMLConfigurationForm onCreate={handleCloseFormDialog} />
-        )}
       </Dialog>
 
       <Dialog
diff --git a/apps/console/src/pages/iam/organizations/settings/SCIMSettingsPageLoader.tsx b/apps/console/src/pages/iam/organizations/settings/SCIMSettingsPageLoader.tsx
index 47b3b94e0..156df8a00 100644
--- a/apps/console/src/pages/iam/organizations/settings/SCIMSettingsPageLoader.tsx
+++ b/apps/console/src/pages/iam/organizations/settings/SCIMSettingsPageLoader.tsx
@@ -8,7 +8,7 @@ import type { SCIMSettingsPageQuery } from "/__generated__/iam/SCIMSettingsPageQ
 function SCIMSettingsPageLoader() {
   const organizationId = useOrganizationId();
   const [queryRef, loadQuery] = useQueryLoader<SCIMSettingsPageQuery>(
-    scimSettingsPageQuery
+    scimSettingsPageQuery,
   );
 
   useEffect(() => {
diff --git a/apps/console/src/pages/iam/organizations/settings/_components/EditMemberDialog.tsx b/apps/console/src/pages/iam/organizations/settings/_components/EditMemberDialog.tsx
index 60c3a39c0..5f7a3b448 100644
--- a/apps/console/src/pages/iam/organizations/settings/_components/EditMemberDialog.tsx
+++ b/apps/console/src/pages/iam/organizations/settings/_components/EditMemberDialog.tsx
@@ -50,9 +50,9 @@ export function EditMemberDialog(props: {
     },
   );
 
-  const handleUpdateRole = (e: React.FormEvent) => {
+  const handleUpdateRole = async (e: React.FormEvent) => {
     e.preventDefault();
-    updateMembership({
+    await updateMembership({
       variables: {
         input: {
           membershipId: membership.id,
@@ -66,7 +66,7 @@ export function EditMemberDialog(props: {
 
   return (
     <Dialog defaultOpen={true} onClose={onClose} title={__("Edit Member Role")}>
-      <form onSubmit={handleUpdateRole}>
+      <form onSubmit={e => void handleUpdateRole(e)}>
         <DialogContent padded className="space-y-6">
           <div>
             <p className="text-txt-secondary text-sm mb-4">
diff --git a/apps/console/src/pages/iam/organizations/settings/_components/EditSAMLConfigurationForm.tsx b/apps/console/src/pages/iam/organizations/settings/_components/EditSAMLConfigurationForm.tsx
index 85d7af539..afa4e3c87 100644
--- a/apps/console/src/pages/iam/organizations/settings/_components/EditSAMLConfigurationForm.tsx
+++ b/apps/console/src/pages/iam/organizations/settings/_components/EditSAMLConfigurationForm.tsx
@@ -66,8 +66,8 @@ export function EditSAMLConfigurationForm(props: {
   const { __ } = useTranslate();
   const { toast } = useToast();
 
-  const { samlConfiguration } =
-    usePreloadedQuery<EditSAMLConfigurationFormQuery>(
+  const { samlConfiguration }
+    = usePreloadedQuery<EditSAMLConfigurationFormQuery>(
       samlConfigurationFormQuery,
       queryRef,
     );
@@ -75,8 +75,8 @@ export function EditSAMLConfigurationForm(props: {
     throw new Error("node is not a SAML configuration");
   }
 
-  const [update, isUpdating] =
-    useMutationWithToasts<EditSAMLConfigurationForm_updateMutation>(
+  const [update, isUpdating]
+    = useMutationWithToasts<EditSAMLConfigurationForm_updateMutation>(
       updateSAMLConfigurationMutation,
       {
         successMessage: "SAML configuration updated successfully.",
@@ -85,8 +85,8 @@ export function EditSAMLConfigurationForm(props: {
     );
 
   const handleUpdate = useCallback(
-    (data: SAMLConfigurationFormData) => {
-      update({
+    async (data: SAMLConfigurationFormData) => {
+      await update({
         variables: {
           input: {
             samlConfigurationId: samlConfiguration.id,
diff --git a/apps/console/src/pages/iam/organizations/settings/_components/InvitationList.tsx b/apps/console/src/pages/iam/organizations/settings/_components/InvitationList.tsx
index 00b3a268c..de3c66277 100644
--- a/apps/console/src/pages/iam/organizations/settings/_components/InvitationList.tsx
+++ b/apps/console/src/pages/iam/organizations/settings/_components/InvitationList.tsx
@@ -111,25 +111,27 @@ export function InvitationList(props: {
         </Tr>
       </Thead>
       <Tbody>
-        {totalCount === 0 ? (
-          <Tr>
-            <Td colSpan={7} className="text-center text-txt-secondary">
-              {__("No invitations")}
-            </Td>
-          </Tr>
-        ) : (
-          invitationsPagination.data.invitations.edges.map(
-            ({ node: invitation }) => (
-              <InvitationListItem
-                connectionId={invitationsPagination.data.invitations.__id}
-                key={invitation.id}
-                fKey={invitation}
-                onRefetch={refetchInvitations}
-                totalCountFKey={totalCountFKey}
-              />
-            ),
-          )
-        )}
+        {totalCount === 0
+          ? (
+              <Tr>
+                <Td colSpan={7} className="text-center text-txt-secondary">
+                  {__("No invitations")}
+                </Td>
+              </Tr>
+            )
+          : (
+              invitationsPagination.data.invitations.edges.map(
+                ({ node: invitation }) => (
+                  <InvitationListItem
+                    connectionId={invitationsPagination.data.invitations.__id}
+                    key={invitation.id}
+                    fKey={invitation}
+                    onRefetch={refetchInvitations}
+                    totalCountFKey={totalCountFKey}
+                  />
+                ),
+              )
+            )}
       </Tbody>
     </SortableTable>
   );
diff --git a/apps/console/src/pages/iam/organizations/settings/_components/InvitationListItem.tsx b/apps/console/src/pages/iam/organizations/settings/_components/InvitationListItem.tsx
index 2437d8227..b6f48238b 100644
--- a/apps/console/src/pages/iam/organizations/settings/_components/InvitationListItem.tsx
+++ b/apps/console/src/pages/iam/organizations/settings/_components/InvitationListItem.tsx
@@ -80,8 +80,8 @@ export function InvitationListItem(props: {
             connections: [connectionId],
           },
           updater: (store) => {
-            const { updatableData } =
-              store.readUpdatableFragment<MembersPage_invitationsTotalCountFragment$key>(
+            const { updatableData }
+              = store.readUpdatableFragment<MembersPage_invitationsTotalCountFragment$key>(
                 invitationCountFragment,
                 totalCountFKey,
               );
@@ -112,13 +112,17 @@ export function InvitationListItem(props: {
       </Td>
       <Td>{new Date(invitation.createdAt).toLocaleDateString()}</Td>
       <Td>
-        {invitation.status === "ACCEPTED" ? (
-          <Badge variant="success">{__("Accepted")}</Badge>
-        ) : invitation.status === "EXPIRED" ? (
-          <Badge variant="danger">{__("Expired")}</Badge>
-        ) : (
-          <Badge variant="warning">{__("Pending")}</Badge>
-        )}
+        {invitation.status === "ACCEPTED"
+          ? (
+              <Badge variant="success">{__("Accepted")}</Badge>
+            )
+          : invitation.status === "EXPIRED"
+            ? (
+                <Badge variant="danger">{__("Expired")}</Badge>
+              )
+            : (
+                <Badge variant="warning">{__("Pending")}</Badge>
+              )}
       </Td>
       <Td>
         {invitation.acceptedAt
@@ -128,22 +132,24 @@ export function InvitationListItem(props: {
       <Td noLink width={80} className="text-end">
         <div
           className="flex gap-2 justify-end"
-          onClick={(e) => e.stopPropagation()}
+          onClick={e => e.stopPropagation()}
         >
-          {isDeleting ? (
-            <Spinner size={16} />
-          ) : (
-            invitation.canDelete &&
-            invitation.status !== "ACCEPTED" && (
-              <Button
-                variant="danger"
-                onClick={handleDelete}
-                disabled={isDeleting}
-                icon={IconTrashCan}
-                aria-label={__("Delete invitation")}
-              />
-            )
-          )}
+          {isDeleting
+            ? (
+                <Spinner size={16} />
+              )
+            : (
+                invitation.canDelete
+                && invitation.status !== "ACCEPTED" && (
+                  <Button
+                    variant="danger"
+                    onClick={handleDelete}
+                    disabled={isDeleting}
+                    icon={IconTrashCan}
+                    aria-label={__("Delete invitation")}
+                  />
+                )
+              )}
         </div>
       </Td>
     </Tr>
diff --git a/apps/console/src/pages/iam/organizations/settings/_components/InviteUserDialog.tsx b/apps/console/src/pages/iam/organizations/settings/_components/InviteUserDialog.tsx
index fe38a3801..ea80986f4 100644
--- a/apps/console/src/pages/iam/organizations/settings/_components/InviteUserDialog.tsx
+++ b/apps/console/src/pages/iam/organizations/settings/_components/InviteUserDialog.tsx
@@ -72,21 +72,21 @@ export function InviteUserDialog(props: InviteUserDialogProps) {
   const dialogRef = useDialogRef();
 
   const { role } = use(CurrentUser);
-  const [inviteUser, isInviting] =
-    useMutationWithToasts<InviteUserDialogMutation>(inviteMutation, {
+  const [inviteUser, isInviting]
+    = useMutationWithToasts<InviteUserDialogMutation>(inviteMutation, {
       successMessage: __("Invitation sent successfully"),
       errorMessage: __("Failed to send invitation"),
     });
 
   const assignableRoles = getAssignableRoles(role);
 
-  const { register, handleSubmit, formState, reset, control } =
-    useFormWithSchema(schema, {
+  const { register, handleSubmit, formState, reset, control }
+    = useFormWithSchema(schema, {
       defaultValues: { role: "VIEWER" },
     });
 
-  const onSubmit = handleSubmit((data) => {
-    inviteUser({
+  const onSubmit = async (data: z.infer<typeof schema>) => {
+    await inviteUser({
       variables: {
         input: {
           organizationId,
@@ -101,8 +101,8 @@ export function InviteUserDialog(props: InviteUserDialogProps) {
         dialogRef.current?.close();
       },
       updater: (store) => {
-        const { updatableData } =
-          store.readUpdatableFragment<MembersPage_invitationsTotalCountFragment$key>(
+        const { updatableData }
+          = store.readUpdatableFragment<MembersPage_invitationsTotalCountFragment$key>(
             invitationCountFragment,
             fKey,
           );
@@ -112,7 +112,7 @@ export function InviteUserDialog(props: InviteUserDialogProps) {
         }
       },
     });
-  });
+  };
 
   return (
     <Dialog
@@ -121,7 +121,7 @@ export function InviteUserDialog(props: InviteUserDialogProps) {
       className="max-w-lg"
       ref={dialogRef}
     >
-      <form onSubmit={onSubmit}>
+      <form onSubmit={e => void handleSubmit(onSubmit)(e)}>
         <DialogContent padded className="space-y-4">
           <p className="text-txt-secondary text-sm">
             Send an invitation to join your workspace.
diff --git a/apps/console/src/pages/iam/organizations/settings/_components/MemberList.tsx b/apps/console/src/pages/iam/organizations/settings/_components/MemberList.tsx
index 621909eda..7dfa418eb 100644
--- a/apps/console/src/pages/iam/organizations/settings/_components/MemberList.tsx
+++ b/apps/console/src/pages/iam/organizations/settings/_components/MemberList.tsx
@@ -73,22 +73,24 @@ export function MemberList(props: { fKey: MemberListFragment$key }) {
         </Tr>
       </Thead>
       <Tbody>
-        {membersPagination.data.members.totalCount === 0 ? (
-          <Tr>
-            <Td colSpan={5} className="text-center text-txt-secondary">
-              {__("No members")}
-            </Td>
-          </Tr>
-        ) : (
-          membersPagination.data.members.edges.map(({ node: membership }) => (
-            <MemberListItem
-              connectionId={membersPagination.data.members.__id}
-              key={membership.id}
-              fKey={membership}
-              onRefetch={refetchMemberships}
-            />
-          ))
-        )}
+        {membersPagination.data.members.totalCount === 0
+          ? (
+              <Tr>
+                <Td colSpan={5} className="text-center text-txt-secondary">
+                  {__("No members")}
+                </Td>
+              </Tr>
+            )
+          : (
+              membersPagination.data.members.edges.map(({ node: membership }) => (
+                <MemberListItem
+                  connectionId={membersPagination.data.members.__id}
+                  key={membership.id}
+                  fKey={membership}
+                  onRefetch={refetchMemberships}
+                />
+              ))
+            )}
       </Tbody>
     </SortableTable>
   );
diff --git a/apps/console/src/pages/iam/organizations/settings/_components/MemberListItem.tsx b/apps/console/src/pages/iam/organizations/settings/_components/MemberListItem.tsx
index 1dc2b4568..f228fca26 100644
--- a/apps/console/src/pages/iam/organizations/settings/_components/MemberListItem.tsx
+++ b/apps/console/src/pages/iam/organizations/settings/_components/MemberListItem.tsx
@@ -72,7 +72,7 @@ export function MemberListItem(props: {
     },
   );
 
-  const handleRemove = async () => {
+  const handleRemove = () => {
     confirm(
       () => {
         return removeMembership({
@@ -122,7 +122,7 @@ export function MemberListItem(props: {
           {!isInactive && (
             <div
               className="flex gap-2 justify-end"
-              onClick={(e) => e.stopPropagation()}
+              onClick={e => e.stopPropagation()}
             >
               {membership.canUpdate && (
                 <Button
@@ -133,19 +133,21 @@ export function MemberListItem(props: {
                   aria-label={__("Edit role")}
                 />
               )}
-              {isRemoving ? (
-                <Spinner size={16} />
-              ) : (
-                membership.canDelete && (
-                  <Button
-                    variant="danger"
-                    onClick={handleRemove}
-                    disabled={isRemoving}
-                    icon={IconTrashCan}
-                    aria-label={__("Remove member")}
-                  />
-                )
-              )}
+              {isRemoving
+                ? (
+                    <Spinner size={16} />
+                  )
+                : (
+                    membership.canDelete && (
+                      <Button
+                        variant="danger"
+                        onClick={handleRemove}
+                        disabled={isRemoving}
+                        icon={IconTrashCan}
+                        aria-label={__("Remove member")}
+                      />
+                    )
+                  )}
             </div>
           )}
         </Td>
diff --git a/apps/console/src/pages/iam/organizations/settings/_components/NewSAMLConfigurationForm.tsx b/apps/console/src/pages/iam/organizations/settings/_components/NewSAMLConfigurationForm.tsx
index a2e6e414a..5e6aff9c1 100644
--- a/apps/console/src/pages/iam/organizations/settings/_components/NewSAMLConfigurationForm.tsx
+++ b/apps/console/src/pages/iam/organizations/settings/_components/NewSAMLConfigurationForm.tsx
@@ -40,8 +40,8 @@ export function NewSAMLConfigurationForm(props: { onCreate: () => void }) {
   const { __ } = useTranslate();
   const { toast } = useToast();
 
-  const [create, isCreating] =
-    useMutationWithToasts<NewSAMLConfigurationForm_createMutation>(
+  const [create, isCreating]
+    = useMutationWithToasts<NewSAMLConfigurationForm_createMutation>(
       createSAMLConfigurationMutation,
       {
         successMessage: "SAML configuration created successfully.",
@@ -50,13 +50,13 @@ export function NewSAMLConfigurationForm(props: { onCreate: () => void }) {
     );
 
   const handleCreate = useCallback(
-    (data: SAMLConfigurationFormData) => {
+    async (data: SAMLConfigurationFormData) => {
       const connectionID = ConnectionHandler.getConnectionID(
         organizationId,
         "SAMLConfigurationListFragment_samlConfigurations",
       );
 
-      create({
+      await create({
         variables: {
           input: {
             organizationId,
diff --git a/apps/console/src/pages/iam/organizations/settings/_components/OrganizationForm.tsx b/apps/console/src/pages/iam/organizations/settings/_components/OrganizationForm.tsx
index b533db120..40d349606 100644
--- a/apps/console/src/pages/iam/organizations/settings/_components/OrganizationForm.tsx
+++ b/apps/console/src/pages/iam/organizations/settings/_components/OrganizationForm.tsx
@@ -88,8 +88,8 @@ export function OrganizationForm(props: {
     string | null
   >(null);
 
-  const { canUpdate, ...organization } =
-    useFragment<OrganizationFormFragment$key>(fragment, fKey);
+  const { canUpdate, ...organization }
+    = useFragment<OrganizationFormFragment$key>(fragment, fKey);
 
   const [updateOrganization, isUpdatingOrganization] = useMutationWithToasts(
     updateOrganizationMutation,
@@ -98,8 +98,8 @@ export function OrganizationForm(props: {
       errorMessage: __("Failed to update organization"),
     },
   );
-  const [deleteHorizontalLogo, isDeletingHorizontalLogo] =
-    useMutationWithToasts(deleteHorizontalLogoMutation, {
+  const [deleteHorizontalLogo, isDeletingHorizontalLogo]
+    = useMutationWithToasts(deleteHorizontalLogoMutation, {
       successMessage: __("Horizontal logo deleted successfully"),
       errorMessage: __("Failed to delete horizontal logo"),
     });
@@ -127,7 +127,7 @@ export function OrganizationForm(props: {
     };
     reader.readAsDataURL(file);
 
-    updateOrganization({
+    void updateOrganization({
       variables: {
         input: {
           organizationId: organization.id,
@@ -155,7 +155,7 @@ export function OrganizationForm(props: {
     };
     reader.readAsDataURL(file);
 
-    updateOrganization({
+    void updateOrganization({
       variables: {
         input: {
           organizationId: organization.id,
@@ -171,8 +171,8 @@ export function OrganizationForm(props: {
     });
   };
 
-  const handleDeleteHorizontalLogo = () => {
-    deleteHorizontalLogo({
+  const handleDeleteHorizontalLogo = async () => {
+    await deleteHorizontalLogo({
       variables: {
         input: {
           organizationId: organization.id,
@@ -184,8 +184,8 @@ export function OrganizationForm(props: {
     });
   };
 
-  const onSubmit = handleSubmit((data: OrganizationFormData) => {
-    updateOrganization({
+  const onSubmit = handleSubmit(async (data: OrganizationFormData) => {
+    await updateOrganization({
       variables: {
         input: {
           organizationId: organization.id,
@@ -200,7 +200,7 @@ export function OrganizationForm(props: {
   });
 
   return (
-    <form onSubmit={onSubmit} className="space-y-4">
+    <form onSubmit={e => void onSubmit(e)} className="space-y-4">
       <div className="flex items-center justify-between">
         <h2 className="text-base font-medium">{__("Organization details")}</h2>
         {formState.isSubmitting && <Spinner />}
@@ -241,9 +241,9 @@ export function OrganizationForm(props: {
               <div className="border border-border-solid rounded-md p-4 bg-surface-secondary">
                 <img
                   src={
-                    horizontalLogoPreview ||
-                    organization.horizontalLogoUrl ||
-                    undefined
+                    horizontalLogoPreview
+                    || organization.horizontalLogoUrl
+                    || undefined
                   }
                   alt={__("Horizontal logo")}
                   className="h-12 max-w-xs object-contain"
@@ -267,7 +267,7 @@ export function OrganizationForm(props: {
             {canUpdate && organization.horizontalLogoUrl && (
               <Dialog
                 ref={deleteDialogRef}
-                trigger={
+                trigger={(
                   <Button
                     type="button"
                     variant="quaternary"
@@ -275,7 +275,7 @@ export function OrganizationForm(props: {
                     aria-label={__("Delete horizontal logo")}
                     className="text-red-600 hover:text-red-700"
                   />
-                }
+                )}
                 title={__("Delete Horizontal Logo")}
                 className="max-w-md"
               >
@@ -291,7 +291,7 @@ export function OrganizationForm(props: {
                 <DialogFooter>
                   <Button
                     variant="danger"
-                    onClick={handleDeleteHorizontalLogo}
+                    onClick={() => void handleDeleteHorizontalLogo()}
                     disabled={isDeletingHorizontalLogo}
                     icon={isDeletingHorizontalLogo ? Spinner : IconTrashCan}
                   >
diff --git a/apps/console/src/pages/iam/organizations/settings/_components/SAMLConfigurationForm.tsx b/apps/console/src/pages/iam/organizations/settings/_components/SAMLConfigurationForm.tsx
index 8d8e79c6c..446fc344b 100644
--- a/apps/console/src/pages/iam/organizations/settings/_components/SAMLConfigurationForm.tsx
+++ b/apps/console/src/pages/iam/organizations/settings/_components/SAMLConfigurationForm.tsx
@@ -78,7 +78,7 @@ export function SAMLConfigurationForm(props: {
   isEditing?: boolean;
   disabled: boolean;
   initialValues?: SAMLConfigurationFormData;
-  onSubmit: (data: SAMLConfigurationFormData) => void;
+  onSubmit: (data: SAMLConfigurationFormData) => Promise<void>;
 }) {
   const {
     disabled,
@@ -94,9 +94,8 @@ export function SAMLConfigurationForm(props: {
 
   return (
     <form
-      onSubmit={async (e) => {
-        e.preventDefault();
-        await form.handleSubmit(onSubmit)();
+      onSubmit={(e) => {
+        void form.handleSubmit(onSubmit)(e);
         form.reset(form.getValues());
       }}
     >
diff --git a/apps/console/src/pages/iam/organizations/settings/_components/SAMLConfigurationList.tsx b/apps/console/src/pages/iam/organizations/settings/_components/SAMLConfigurationList.tsx
index 8f3442056..ca88bfc62 100644
--- a/apps/console/src/pages/iam/organizations/settings/_components/SAMLConfigurationList.tsx
+++ b/apps/console/src/pages/iam/organizations/settings/_components/SAMLConfigurationList.tsx
@@ -71,8 +71,8 @@ export function SAMLConfigurationList(props: {
     samlConfigurations: { edges: samlConfigurations },
   } = useFragment<SAMLConfigurationListFragment$key>(fragment, fKey);
 
-  const [deleteSAMLConfiguration] =
-    useMutationWithToasts<SAMLConfigurationList_deleteMutation>(
+  const [deleteSAMLConfiguration]
+    = useMutationWithToasts<SAMLConfigurationList_deleteMutation>(
       deleteMutation,
       {
         successMessage: "SAML configuration deleted successfully.",
@@ -85,7 +85,7 @@ export function SAMLConfigurationList(props: {
   ) => {
     confirm(
       async () => {
-        deleteSAMLConfiguration({
+        await deleteSAMLConfiguration({
           variables: {
             input: {
               organizationId,
@@ -103,9 +103,9 @@ export function SAMLConfigurationList(props: {
       {
         title: __("Delete SAML Configuration"),
         message: __(
-          "Are you sure you want to delete the SAML configuration for " +
-            config.emailDomain +
-            "? This action cannot be undone.",
+          "Are you sure you want to delete the SAML configuration for "
+          + config.emailDomain
+          + "? This action cannot be undone.",
         ),
         label: __("Delete"),
         variant: "danger",
@@ -181,60 +181,63 @@ export function SAMLConfigurationList(props: {
             </Td>
             <Td>{config.enforcementPolicy}</Td>
             <Td>
-              {config.domainVerifiedAt && config.enforcementPolicy !== "OFF" ? (
-                <button
-                  onClick={() => copy(config.testLoginUrl)}
-                  className="text-blue-600 hover:text-blue-800"
-                >
-                  {isCopied ? __("Copied!") : __("Copy URL")}
-                </button>
-              ) : (
-                <span className="text-gray-400">—</span>
-              )}
+              {config.domainVerifiedAt && config.enforcementPolicy !== "OFF"
+                ? (
+                    <button
+                      onClick={() => copy(config.testLoginUrl)}
+                      className="text-blue-600 hover:text-blue-800"
+                    >
+                      {isCopied ? __("Copied!") : __("Copy URL")}
+                    </button>
+                  )
+                : (
+                    <span className="text-gray-400">—</span>
+                  )}
             </Td>
             <Td width={180} className="text-end">
               <div className="flex gap-2 justify-end">
-                {config.domainVerifiedAt ? (
-                  <>
-                    {config.canUpdate && (
-                      <Button
-                        variant="secondary"
-                        onClick={() => onEdit(config.id)}
-                      >
-                        {__("Edit")}
-                      </Button>
+                {config.domainVerifiedAt
+                  ? (
+                      <>
+                        {config.canUpdate && (
+                          <Button
+                            variant="secondary"
+                            onClick={() => onEdit(config.id)}
+                          >
+                            {__("Edit")}
+                          </Button>
+                        )}
+                        {config.canDelete && (
+                          <Button
+                            variant="danger"
+                            onClick={() => handleDelete(config)}
+                          >
+                            {__("Delete")}
+                          </Button>
+                        )}
+                      </>
+                    )
+                  : (
+                      <>
+                        {config.canUpdate && !!config.domainVerificationToken && (
+                          <Button
+                            variant="primary"
+                            onClick={() =>
+                              onVerifyDomain(config.domainVerificationToken!)}
+                          >
+                            {__("Verify Domain")}
+                          </Button>
+                        )}
+                        {config.canDelete && (
+                          <Button
+                            variant="danger"
+                            onClick={() => handleDelete(config)}
+                          >
+                            {__("Delete")}
+                          </Button>
+                        )}
+                      </>
                     )}
-                    {config.canDelete && (
-                      <Button
-                        variant="danger"
-                        onClick={() => handleDelete(config)}
-                      >
-                        {__("Delete")}
-                      </Button>
-                    )}
-                  </>
-                ) : (
-                  <>
-                    {config.canUpdate && !!config.domainVerificationToken && (
-                      <Button
-                        variant="primary"
-                        onClick={() =>
-                          onVerifyDomain(config.domainVerificationToken!)
-                        }
-                      >
-                        {__("Verify Domain")}
-                      </Button>
-                    )}
-                    {config.canDelete && (
-                      <Button
-                        variant="danger"
-                        onClick={() => handleDelete(config)}
-                      >
-                        {__("Delete")}
-                      </Button>
-                    )}
-                  </>
-                )}
               </div>
             </Td>
           </Tr>
diff --git a/apps/console/src/pages/iam/organizations/settings/_components/SAMLDomainVerifyDialog.tsx b/apps/console/src/pages/iam/organizations/settings/_components/SAMLDomainVerifyDialog.tsx
index 65aa427b0..9ee6c33a4 100644
--- a/apps/console/src/pages/iam/organizations/settings/_components/SAMLDomainVerifyDialog.tsx
+++ b/apps/console/src/pages/iam/organizations/settings/_components/SAMLDomainVerifyDialog.tsx
@@ -62,7 +62,8 @@ export function SAMLDomainVerifyDialog(props: {
           </div>
           <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
             <p className="text-sm text-blue-800">
-              <strong>{__("Note:")}</strong>{" "}
+              <strong>{__("Note:")}</strong>
+              {" "}
               {__(
                 "DNS changes may take up to 48 hours to propagate, but typically complete within a few minutes.",
               )}
diff --git a/apps/console/src/pages/iam/organizations/settings/_components/SCIMConfiguration.tsx b/apps/console/src/pages/iam/organizations/settings/_components/SCIMConfiguration.tsx
index 8e48199fb..bf2d4f67a 100644
--- a/apps/console/src/pages/iam/organizations/settings/_components/SCIMConfiguration.tsx
+++ b/apps/console/src/pages/iam/organizations/settings/_components/SCIMConfiguration.tsx
@@ -90,16 +90,16 @@ export function SCIMConfiguration(props: {
 
   const deleteDialogRef = useDialogRef();
 
-  const [createSCIMConfiguration, isCreatingSAMLConfiguration] =
-    useMutation<SCIMConfigurationCreateMutation>(
+  const [createSCIMConfiguration, isCreatingSAMLConfiguration]
+    = useMutation<SCIMConfigurationCreateMutation>(
       createSCIMConfigurationMutation,
     );
-  const [deleteSCIMConfiguration, isDeletingSCIMConfiguration] =
-    useMutation<SCIMConfigurationDeleteMutation>(
+  const [deleteSCIMConfiguration, isDeletingSCIMConfiguration]
+    = useMutation<SCIMConfigurationDeleteMutation>(
       deleteSCIMConfigurationMutation,
     );
-  const [regenerateSCIMToken, isRegeneratingSCIMToken] =
-    useMutation<SCIMConfigurationRegenerateTokenMutation>(
+  const [regenerateSCIMToken, isRegeneratingSCIMToken]
+    = useMutation<SCIMConfigurationRegenerateTokenMutation>(
       regenerateSCIMTokenMutation,
     );
 
@@ -208,7 +208,7 @@ export function SCIMConfiguration(props: {
   };
 
   const copyToClipboard = (text: string, label: string) => {
-    navigator.clipboard.writeText(text);
+    void navigator.clipboard.writeText(text);
     toast({
       title: __("Copied to clipboard"),
       description: label,
@@ -273,8 +273,7 @@ export function SCIMConfiguration(props: {
                     copyToClipboard(
                       scimConfiguration.endpointUrl,
                       __("SCIM Endpoint URL"),
-                    )
-                  }
+                    )}
                   icon={IconSquareBehindSquare2}
                 />
               </div>
diff --git a/apps/console/src/pages/iam/organizations/settings/_components/SCIMEventList.tsx b/apps/console/src/pages/iam/organizations/settings/_components/SCIMEventList.tsx
index 18e0d1f3f..b42a6ad7e 100644
--- a/apps/console/src/pages/iam/organizations/settings/_components/SCIMEventList.tsx
+++ b/apps/console/src/pages/iam/organizations/settings/_components/SCIMEventList.tsx
@@ -53,18 +53,20 @@ export function SCIMEventList(props: { fKey: SCIMEventListFragment$key }) {
         </Tr>
       </Thead>
       <Tbody>
-        {!eventsPagination.data.events?.edges ||
-        eventsPagination.data.events.edges.length === 0 ? (
-          <Tr>
-            <Td colSpan={4} className="text-center text-txt-secondary">
-              {__("No SCIM events recorded yet.")}
-            </Td>
-          </Tr>
-        ) : (
-          eventsPagination.data.events.edges.map(({ node: event }) => (
-            <SCIMEventListItem key={event.id} fKey={event} />
-          ))
-        )}
+        {!eventsPagination.data.events?.edges
+          || eventsPagination.data.events.edges.length === 0
+          ? (
+              <Tr>
+                <Td colSpan={4} className="text-center text-txt-secondary">
+                  {__("No SCIM events recorded yet.")}
+                </Td>
+              </Tr>
+            )
+          : (
+              eventsPagination.data.events.edges.map(({ node: event }) => (
+                <SCIMEventListItem key={event.id} fKey={event} />
+              ))
+            )}
       </Tbody>
     </SortableTable>
   );
diff --git a/apps/console/src/pages/iam/organizations/settings/_components/SCIMEventListItem.tsx b/apps/console/src/pages/iam/organizations/settings/_components/SCIMEventListItem.tsx
index 38fcc883d..a0a65ea06 100644
--- a/apps/console/src/pages/iam/organizations/settings/_components/SCIMEventListItem.tsx
+++ b/apps/console/src/pages/iam/organizations/settings/_components/SCIMEventListItem.tsx
@@ -31,8 +31,8 @@ const getResultBadge = (statusCode: number) => {
 };
 
 const getMethodBadge = (method: string) => {
-  const variants: Record<string, "neutral" | "info" | "danger" | "highlight"> =
-    {
+  const variants: Record<string, "neutral" | "info" | "danger" | "highlight">
+    = {
       GET: "info",
       POST: "highlight",
       PUT: "highlight",
@@ -58,7 +58,7 @@ export function SCIMEventListItem(props: {
 
   const event = useFragment<SCIMEventListItemFragment$key>(
     SCIMEventListItemFragment,
-    fKey
+    fKey,
   );
 
   const hasError = !!event.errorMessage;
@@ -71,11 +71,13 @@ export function SCIMEventListItem(props: {
       >
         <Td className="whitespace-nowrap">
           <div className="flex items-center gap-2">
-            {isExpanded ? (
-              <IconChevronDown size={16} className="text-txt-secondary" />
-            ) : (
-              <IconChevronRight size={16} className="text-txt-secondary" />
-            )}
+            {isExpanded
+              ? (
+                  <IconChevronDown size={16} className="text-txt-secondary" />
+                )
+              : (
+                  <IconChevronRight size={16} className="text-txt-secondary" />
+                )}
             {formatDate(event.createdAt)}
           </div>
         </Td>
diff --git a/apps/console/src/pages/organizations/assets/AssetDetailsPage.tsx b/apps/console/src/pages/organizations/assets/AssetDetailsPage.tsx
index 545345352..6eec8d24b 100644
--- a/apps/console/src/pages/organizations/assets/AssetDetailsPage.tsx
+++ b/apps/console/src/pages/organizations/assets/AssetDetailsPage.tsx
@@ -66,11 +66,11 @@ export default function AssetDetailsPage(props: Props) {
   );
   const deleteAsset = useDeleteAsset(assetEntry, connectionId);
 
-  const vendors = assetEntry.vendors?.edges.map((edge) => edge.node) ?? [];
-  const vendorIds = vendors.map((vendor) => vendor.id);
+  const vendors = assetEntry.vendors?.edges.map(edge => edge.node) ?? [];
+  const vendorIds = vendors.map(vendor => vendor.id);
 
-  const { control, formState, handleSubmit, register, reset } =
-    useFormWithSchema(updateAssetSchema, {
+  const { control, formState, handleSubmit, register, reset }
+    = useFormWithSchema(updateAssetSchema, {
       defaultValues: {
         name: assetEntry.name || "",
         amount: assetEntry.amount || 0,
@@ -91,8 +91,8 @@ export default function AssetDetailsPage(props: Props) {
     reset(formData);
   });
 
-  const breadcrumbAssetsUrl =
-    isSnapshotMode && snapshotId
+  const breadcrumbAssetsUrl
+    = isSnapshotMode && snapshotId
       ? `/organizations/${organizationId}/snapshots/${snapshotId}/assets`
       : `/organizations/${organizationId}/assets`;
 
@@ -135,7 +135,7 @@ export default function AssetDetailsPage(props: Props) {
         )}
       </div>
 
-      <form onSubmit={onSubmit} className="space-y-6 max-w-2xl">
+      <form onSubmit={e => void onSubmit(e)} className="space-y-6 max-w-2xl">
         <Field
           label={__("Name")}
           {...register("name")}
diff --git a/apps/console/src/pages/organizations/assets/AssetsPage.tsx b/apps/console/src/pages/organizations/assets/AssetsPage.tsx
index 172363c34..aa16670be 100644
--- a/apps/console/src/pages/organizations/assets/AssetsPage.tsx
+++ b/apps/console/src/pages/organizations/assets/AssetsPage.tsx
@@ -85,10 +85,10 @@ export default function AssetsPage(props: Props) {
     paginatedAssetsFragment,
     data.node as AssetsPageFragment$key,
   );
-  const assets = pagination.data.assets?.edges.map((edge) => edge.node);
+  const assets = pagination.data.assets?.edges.map(edge => edge.node);
   const connectionId = pagination.data.assets.__id;
 
-  const canWrite = assets.some((asset) => asset.canDelete || asset.canUpdate);
+  const canWrite = assets.some(asset => asset.canDelete || asset.canUpdate);
   usePageTitle(__("Assets"));
 
   return (
@@ -109,15 +109,17 @@ export default function AssetsPage(props: Props) {
           </CreateAssetDialog>
         )}
       </PageHeader>
-      {isSnapshotMode || !canWrite ? (
-        <ReadOnlyAssetsTable pagination={pagination} assets={assets} />
-      ) : (
-        <AssetsTable
-          connectionId={connectionId}
-          pagination={pagination}
-          assets={assets}
-        />
-      )}
+      {isSnapshotMode || !canWrite
+        ? (
+            <ReadOnlyAssetsTable pagination={pagination} assets={assets} />
+          )
+        : (
+            <AssetsTable
+              connectionId={connectionId}
+              pagination={pagination}
+              assets={assets}
+            />
+          )}
     </div>
   );
 }
diff --git a/apps/console/src/pages/organizations/assets/dialogs/CreateAssetDialog.tsx b/apps/console/src/pages/organizations/assets/dialogs/CreateAssetDialog.tsx
index 660552f5a..b4b2decc9 100644
--- a/apps/console/src/pages/organizations/assets/dialogs/CreateAssetDialog.tsx
+++ b/apps/console/src/pages/organizations/assets/dialogs/CreateAssetDialog.tsx
@@ -37,8 +37,8 @@ export function CreateAssetDialog({
   organizationId,
 }: Props) {
   const { __ } = useTranslate();
-  const { control, handleSubmit, register, formState, reset } =
-    useFormWithSchema(schema, {
+  const { control, handleSubmit, register, formState, reset }
+    = useFormWithSchema(schema, {
       defaultValues: {
         name: "",
         amount: 0,
@@ -50,7 +50,7 @@ export function CreateAssetDialog({
   const ref = useDialogRef();
   const [createAsset] = useCreateAsset(connection);
 
-  const onSubmit = handleSubmit(async (data) => {
+  const onSubmit = async (data: z.infer<typeof schema>) => {
     try {
       await createAsset({
         ...data,
@@ -61,7 +61,7 @@ export function CreateAssetDialog({
     } catch (error) {
       console.error("Failed to create asset:", error);
     }
-  });
+  };
 
   return (
     <Dialog
@@ -69,7 +69,7 @@ export function CreateAssetDialog({
       trigger={children}
       title={<Breadcrumb items={[__("Assets"), __("New Asset")]} />}
     >
-      <form onSubmit={onSubmit} className="space-y-4">
+      <form onSubmit={e => void handleSubmit(onSubmit)(e)} className="space-y-4">
         <DialogContent padded className="space-y-4">
           <Field label={__("Name")} {...register("name")} type="text" />
           <Field
diff --git a/apps/console/src/pages/organizations/audits/AuditDetailsPage.tsx b/apps/console/src/pages/organizations/audits/AuditDetailsPage.tsx
index 5901de0fe..6badda453 100644
--- a/apps/console/src/pages/organizations/audits/AuditDetailsPage.tsx
+++ b/apps/console/src/pages/organizations/audits/AuditDetailsPage.tsx
@@ -76,11 +76,11 @@ export default function AuditDetailsPage(props: Props) {
   const deleteAudit = useDeleteAudit(
     { id: auditEntry.id!, framework: { name: auditEntry.framework!.name } },
     ConnectionHandler.getConnectionID(organizationId, "AuditsPage_audits"),
-    () => navigate(`/organizations/${organizationId}/audits`),
+    () => void navigate(`/organizations/${organizationId}/audits`),
   );
 
-  const { control, formState, handleSubmit, register, reset } =
-    useFormWithSchema(updateAuditSchema, {
+  const { control, formState, handleSubmit, register, reset }
+    = useFormWithSchema(updateAuditSchema, {
       defaultValues: {
         name: auditEntry.name || null,
         validFrom: auditEntry.validFrom?.split("T")[0] || "",
@@ -134,7 +134,7 @@ export default function AuditDetailsPage(props: Props) {
       {
         message: sprintf(
           __(
-            'This will permanently delete the audit report "%s". This action cannot be undone.',
+            "This will permanently delete the audit report \"%s\". This action cannot be undone.",
           ),
           auditEntry.report.filename,
         ),
@@ -142,6 +142,16 @@ export default function AuditDetailsPage(props: Props) {
     );
   };
 
+  const handleUploadFile = async (files: File[]) => {
+    if (files.length > 0 && auditEntry.id) {
+      await uploadAuditReport({
+        auditId: auditEntry.id,
+        file: files[0],
+      });
+      window.location.reload();
+    }
+  };
+
   return (
     <div className="space-y-6">
       <Breadcrumb
@@ -152,8 +162,8 @@ export default function AuditDetailsPage(props: Props) {
           },
           {
             label:
-              (auditEntry.name || auditEntry.framework?.name) ??
-              __("Unknown Audit"),
+              (auditEntry.name || auditEntry.framework?.name)
+              ?? __("Unknown Audit"),
           },
         ]}
       />
@@ -188,7 +198,7 @@ export default function AuditDetailsPage(props: Props) {
       </div>
 
       <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-        <form onSubmit={onSubmit} className="space-y-6">
+        <form onSubmit={e => void onSubmit(e)} className="space-y-6">
           <Field label={__("Name")}>
             <Input {...register("name")} placeholder={__("Audit name")} />
           </Field>
@@ -199,7 +209,7 @@ export default function AuditDetailsPage(props: Props) {
             type="select"
             label={__("State")}
           >
-            {auditStates.map((state) => (
+            {auditStates.map(state => (
               <Option key={state} value={state}>
                 {getAuditStateLabel(__, state)}
               </Option>
@@ -227,75 +237,70 @@ export default function AuditDetailsPage(props: Props) {
           <div className="space-y-4">
             <h3 className="text-lg font-medium">{__("Audit Report")}</h3>
 
-            {auditEntry.report ? (
-              <div className="space-y-4">
-                <div className="flex items-center justify-between p-4 bg-success-50 border border-success-200 rounded-lg">
-                  <div className="flex items-center gap-3">
-                    <IconArrowInbox className="text-success-600" size={20} />
-                    <div className="flex-1">
-                      <p className="font-medium text-success-900">
-                        {auditEntry.report.filename}
-                      </p>
-                      <div className="flex items-center gap-4 text-sm text-success-700">
-                        <span>{fileSize(__, auditEntry.report.size)}</span>
-                        <span>
-                          {__("Uploaded")}{" "}
-                          {formatDate(auditEntry.report.createdAt)}
-                        </span>
+            {auditEntry.report
+              ? (
+                  <div className="space-y-4">
+                    <div className="flex items-center justify-between p-4 bg-success-50 border border-success-200 rounded-lg">
+                      <div className="flex items-center gap-3">
+                        <IconArrowInbox className="text-success-600" size={20} />
+                        <div className="flex-1">
+                          <p className="font-medium text-success-900">
+                            {auditEntry.report.filename}
+                          </p>
+                          <div className="flex items-center gap-4 text-sm text-success-700">
+                            <span>{fileSize(__, auditEntry.report.size)}</span>
+                            <span>
+                              {__("Uploaded")}
+                              {" "}
+                              {formatDate(auditEntry.report.createdAt)}
+                            </span>
+                          </div>
+                        </div>
                       </div>
+                      <ActionDropdown>
+                        <DropdownItem
+                          onClick={() => {
+                            if (auditEntry.report?.downloadUrl) {
+                              window.open(auditEntry.report.downloadUrl, "_blank");
+                            }
+                          }}
+                          icon={IconArrowInbox}
+                        >
+                          {__("Download")}
+                        </DropdownItem>
+                        <DropdownItem
+                          variant="danger"
+                          icon={IconTrashCan}
+                          onClick={handleDeleteReport}
+                        >
+                          {__("Delete")}
+                        </DropdownItem>
+                      </ActionDropdown>
                     </div>
                   </div>
-                  <ActionDropdown>
-                    <DropdownItem
-                      onClick={() => {
-                        if (auditEntry.report?.downloadUrl) {
-                          window.open(auditEntry.report.downloadUrl, "_blank");
-                        }
-                      }}
-                      icon={IconArrowInbox}
-                    >
-                      {__("Download")}
-                    </DropdownItem>
-                    <DropdownItem
-                      variant="danger"
-                      icon={IconTrashCan}
-                      onClick={handleDeleteReport}
-                    >
-                      {__("Delete")}
-                    </DropdownItem>
-                  </ActionDropdown>
-                </div>
-              </div>
-            ) : (
-              <div className="space-y-4">
-                <p className="text-neutral-600">
-                  {__(
-                    "Upload the final audit report document (PDF recommended)",
-                  )}
-                </p>
-                <Dropzone
-                  description={__(
-                    "Only PDF, DOCX files up to 25MB are allowed",
-                  )}
-                  isUploading={isUploading}
-                  onDrop={async (files) => {
-                    if (files.length > 0 && auditEntry.id) {
-                      await uploadAuditReport({
-                        auditId: auditEntry.id,
-                        file: files[0],
-                      });
-                      window.location.reload();
-                    }
-                  }}
-                  accept={{
-                    "application/pdf": [".pdf"],
-                    "application/vnd.openxmlformats-officedocument.wordprocessingml.document":
+                )
+              : (
+                  <div className="space-y-4">
+                    <p className="text-neutral-600">
+                      {__(
+                        "Upload the final audit report document (PDF recommended)",
+                      )}
+                    </p>
+                    <Dropzone
+                      description={__(
+                        "Only PDF, DOCX files up to 25MB are allowed",
+                      )}
+                      isUploading={isUploading}
+                      onDrop={files => void handleUploadFile(files)}
+                      accept={{
+                        "application/pdf": [".pdf"],
+                        "application/vnd.openxmlformats-officedocument.wordprocessingml.document":
                       [".docx"],
-                  }}
-                  maxSize={25}
-                />
-              </div>
-            )}
+                      }}
+                      maxSize={25}
+                    />
+                  </div>
+                )}
           </div>
         </Card>
       </div>
diff --git a/apps/console/src/pages/organizations/audits/AuditsPage.tsx b/apps/console/src/pages/organizations/audits/AuditsPage.tsx
index 6e99172ea..5e5860b02 100644
--- a/apps/console/src/pages/organizations/audits/AuditsPage.tsx
+++ b/apps/console/src/pages/organizations/audits/AuditsPage.tsx
@@ -93,13 +93,13 @@ export default function AuditsPage(props: Props) {
     paginatedAuditsFragment,
     data.node as AuditsPageFragment$key,
   );
-  const audits = pagination.data.audits?.edges?.map((edge) => edge.node) ?? [];
+  const audits = pagination.data.audits?.edges?.map(edge => edge.node) ?? [];
   const connectionId = pagination.data.audits.__id;
 
   usePageTitle(__("Audits"));
 
   const hasAnyAction = audits.some(
-    (audit) => audit.canDelete || audit.canUpdate,
+    audit => audit.canDelete || audit.canUpdate,
   );
 
   return (
@@ -132,7 +132,7 @@ export default function AuditsPage(props: Props) {
           </Tr>
         </Thead>
         <Tbody>
-          {audits.map((entry) => (
+          {audits.map(entry => (
             <AuditRow
               key={entry.id}
               entry={entry}
@@ -171,13 +171,15 @@ function AuditRow({
       <Td>{formatDate(entry.validFrom) || __("Not set")}</Td>
       <Td>{formatDate(entry.validUntil) || __("Not set")}</Td>
       <Td>
-        {entry.report ? (
-          <div className="flex flex-col">
-            <Badge variant="success">{__("Uploaded")}</Badge>
-          </div>
-        ) : (
-          <Badge variant="neutral">{__("Not uploaded")}</Badge>
-        )}
+        {entry.report
+          ? (
+              <div className="flex flex-col">
+                <Badge variant="success">{__("Uploaded")}</Badge>
+              </div>
+            )
+          : (
+              <Badge variant="neutral">{__("Not uploaded")}</Badge>
+            )}
       </Td>
       {hasAnyAction && (
         <Td noLink width={50} className="text-end">
diff --git a/apps/console/src/pages/organizations/audits/dialogs/CreateAuditDialog.tsx b/apps/console/src/pages/organizations/audits/dialogs/CreateAuditDialog.tsx
index 26dd72feb..c062e11ff 100644
--- a/apps/console/src/pages/organizations/audits/dialogs/CreateAuditDialog.tsx
+++ b/apps/console/src/pages/organizations/audits/dialogs/CreateAuditDialog.tsx
@@ -73,8 +73,8 @@ export function CreateAuditDialog({
 }: Props) {
   const { __ } = useTranslate();
   const { toast } = useToast();
-  const { control, handleSubmit, register, formState, reset } =
-    useFormWithSchema(schema, {
+  const { control, handleSubmit, register, formState, reset }
+    = useFormWithSchema(schema, {
       defaultValues: {
         frameworkId: "",
         name: "",
@@ -86,7 +86,7 @@ export function CreateAuditDialog({
   const ref = useDialogRef();
   const createAudit = useCreateAudit(connection);
 
-  const onSubmit = handleSubmit(async (data) => {
+  const onSubmit = async (data: z.infer<typeof schema>) => {
     try {
       await createAudit({
         organizationId,
@@ -113,7 +113,7 @@ export function CreateAuditDialog({
         variant: "error",
       });
     }
-  });
+  };
 
   return (
     <Dialog
@@ -121,7 +121,7 @@ export function CreateAuditDialog({
       trigger={children}
       title={<Breadcrumb items={[__("Audits"), __("New Audit")]} />}
     >
-      <form onSubmit={onSubmit} className="space-y-4">
+      <form onSubmit={e => void handleSubmit(onSubmit)(e)} className="space-y-4">
         <DialogContent padded className="space-y-4">
           <Field label={__("Framework")}>
             <Suspense
@@ -147,7 +147,7 @@ export function CreateAuditDialog({
             type="select"
             label={__("State")}
           >
-            {auditStates.map((state) => (
+            {auditStates.map(state => (
               <Option key={state} value={state}>
                 {getAuditStateLabel(__, state)}
               </Option>
@@ -188,9 +188,9 @@ function FrameworkSelect({
     { organizationId },
     { fetchPolicy: "network-only" },
   );
-  const frameworks =
-    data?.organization?.frameworks?.edges
-      ?.map((edge) => edge.node)
+  const frameworks
+    = data?.organization?.frameworks?.edges
+      ?.map(edge => edge.node)
       .filter((node): node is NonNullable<typeof node> => node !== null) ?? [];
 
   return (
@@ -207,7 +207,7 @@ function FrameworkSelect({
           className="w-full"
           value={field.value ?? ""}
         >
-          {frameworks.map((framework) => (
+          {frameworks.map(framework => (
             <Option key={framework.id} value={framework.id}>
               {framework.name}
             </Option>
diff --git a/apps/console/src/pages/organizations/continualImprovements/ContinualImprovementDetailsPage.tsx b/apps/console/src/pages/organizations/continualImprovements/ContinualImprovementDetailsPage.tsx
index d4fcb4d88..84ce5f6d4 100644
--- a/apps/console/src/pages/organizations/continualImprovements/ContinualImprovementDetailsPage.tsx
+++ b/apps/console/src/pages/organizations/continualImprovements/ContinualImprovementDetailsPage.tsx
@@ -56,8 +56,8 @@ type Props = {
 };
 
 export default function ContinualImprovementDetailsPage(props: Props) {
-  const { node: improvement } =
-    usePreloadedQuery<ContinualImprovementGraphNodeQuery>(
+  const { node: improvement }
+    = usePreloadedQuery<ContinualImprovementGraphNodeQuery>(
       continualImprovementNodeQuery,
       props.queryRef,
     );
@@ -195,7 +195,7 @@ export default function ContinualImprovementDetailsPage(props: Props) {
             </div>
           </div>
 
-          <form onSubmit={onSubmit} className="space-y-4">
+          <form onSubmit={e => void onSubmit(e)} className="space-y-4">
             <Field
               label={__("Reference ID")}
               {...register("referenceId")}
@@ -258,13 +258,17 @@ export default function ContinualImprovementDetailsPage(props: Props) {
                 name="status"
                 render={({ field }) => (
                   <div>
-                    <Label>{__("Status")} *</Label>
+                    <Label>
+                      {__("Status")}
+                      {" "}
+                      *
+                    </Label>
                     <Select
                       value={field.value}
                       onValueChange={field.onChange}
                       disabled={isSnapshotMode}
                     >
-                      {statusOptions.map((option) => (
+                      {statusOptions.map(option => (
                         <Option key={option.value} value={option.value}>
                           {option.label}
                         </Option>
@@ -284,13 +288,17 @@ export default function ContinualImprovementDetailsPage(props: Props) {
                 name="priority"
                 render={({ field }) => (
                   <div>
-                    <Label>{__("Priority")} *</Label>
+                    <Label>
+                      {__("Priority")}
+                      {" "}
+                      *
+                    </Label>
                     <Select
                       value={field.value}
                       onValueChange={field.onChange}
                       disabled={isSnapshotMode}
                     >
-                      {priorityOptions.map((option) => (
+                      {priorityOptions.map(option => (
                         <Option key={option.value} value={option.value}>
                           {option.label}
                         </Option>
diff --git a/apps/console/src/pages/organizations/continualImprovements/ContinualImprovementsPage.tsx b/apps/console/src/pages/organizations/continualImprovements/ContinualImprovementsPage.tsx
index d53764e7b..d79dd8e37 100644
--- a/apps/console/src/pages/organizations/continualImprovements/ContinualImprovementsPage.tsx
+++ b/apps/console/src/pages/organizations/continualImprovements/ContinualImprovementsPage.tsx
@@ -123,12 +123,12 @@ export default function ContinualImprovementsPage({
     ContinualImprovementsConnectionKey,
     { filter: { snapshotId: snapshotId || null } },
   );
-  const improvements =
-    data?.continualImprovements?.edges?.map((edge) => edge.node) ?? [];
+  const improvements
+    = data?.continualImprovements?.edges?.map(edge => edge.node) ?? [];
 
-  const hasAnyAction =
-    !isSnapshotMode &&
-    improvements.some(({ canUpdate, canDelete }) => canUpdate || canDelete);
+  const hasAnyAction
+    = !isSnapshotMode
+      && improvements.some(({ canUpdate, canDelete }) => canUpdate || canDelete);
 
   return (
     <div className="space-y-6">
@@ -151,57 +151,59 @@ export default function ContinualImprovementsPage({
         )}
       </PageHeader>
 
-      {improvements.length > 0 ? (
-        <Card>
-          <Table>
-            <Thead>
-              <Tr>
-                <Th>{__("Reference ID")}</Th>
-                <Th>{__("Description")}</Th>
-                <Th>{__("Status")}</Th>
-                <Th>{__("Priority")}</Th>
-                <Th>{__("Owner")}</Th>
-                <Th>{__("Target Date")}</Th>
-                {hasAnyAction && <Th>{__("Actions")}</Th>}
-              </Tr>
-            </Thead>
-            <Tbody>
-              {improvements.map((improvement) => (
-                <ImprovementRow
-                  key={improvement.id}
-                  improvement={improvement}
-                  connectionId={connectionId}
-                  snapshotId={snapshotId}
-                  hasAnyAction={hasAnyAction}
-                />
-              ))}
-            </Tbody>
-          </Table>
+      {improvements.length > 0
+        ? (
+            <Card>
+              <Table>
+                <Thead>
+                  <Tr>
+                    <Th>{__("Reference ID")}</Th>
+                    <Th>{__("Description")}</Th>
+                    <Th>{__("Status")}</Th>
+                    <Th>{__("Priority")}</Th>
+                    <Th>{__("Owner")}</Th>
+                    <Th>{__("Target Date")}</Th>
+                    {hasAnyAction && <Th>{__("Actions")}</Th>}
+                  </Tr>
+                </Thead>
+                <Tbody>
+                  {improvements.map(improvement => (
+                    <ImprovementRow
+                      key={improvement.id}
+                      improvement={improvement}
+                      connectionId={connectionId}
+                      snapshotId={snapshotId}
+                      hasAnyAction={hasAnyAction}
+                    />
+                  ))}
+                </Tbody>
+              </Table>
 
-          {hasNext && (
-            <div className="p-4 border-t">
-              <Button
-                variant="secondary"
-                onClick={() => loadNext(10)}
-                disabled={isLoadingNext}
-              >
-                {isLoadingNext ? __("Loading...") : __("Load more")}
-              </Button>
-            </div>
+              {hasNext && (
+                <div className="p-4 border-t">
+                  <Button
+                    variant="secondary"
+                    onClick={() => loadNext(10)}
+                    disabled={isLoadingNext}
+                  >
+                    {isLoadingNext ? __("Loading...") : __("Load more")}
+                  </Button>
+                </div>
+              )}
+            </Card>
+          )
+        : (
+            <Card padded>
+              <div className="text-center py-12">
+                <h3 className="text-lg font-semibold mb-2">
+                  {__("No continual improvements yet")}
+                </h3>
+                <p className="text-txt-tertiary mb-4">
+                  {__("Create your first continual improvement to get started.")}
+                </p>
+              </div>
+            </Card>
           )}
-        </Card>
-      ) : (
-        <Card padded>
-          <div className="text-center py-12">
-            <h3 className="text-lg font-semibold mb-2">
-              {__("No continual improvements yet")}
-            </h3>
-            <p className="text-txt-tertiary mb-4">
-              {__("Create your first continual improvement to get started.")}
-            </p>
-          </div>
-        </Card>
-      )}
     </div>
   );
 }
@@ -281,13 +283,15 @@ function ImprovementRow({
       </Td>
       <Td>{improvement.owner?.fullName || "-"}</Td>
       <Td>
-        {improvement.targetDate ? (
-          <time dateTime={improvement.targetDate}>
-            {formatDate(improvement.targetDate)}
-          </time>
-        ) : (
-          <span className="text-txt-tertiary">{__("No target date")}</span>
-        )}
+        {improvement.targetDate
+          ? (
+              <time dateTime={improvement.targetDate}>
+                {formatDate(improvement.targetDate)}
+              </time>
+            )
+          : (
+              <span className="text-txt-tertiary">{__("No target date")}</span>
+            )}
       </Td>
       {hasAnyAction && (
         <Td noLink width={50} className="text-end">
diff --git a/apps/console/src/pages/organizations/continualImprovements/dialogs/CreateContinualImprovementDialog.tsx b/apps/console/src/pages/organizations/continualImprovements/dialogs/CreateContinualImprovementDialog.tsx
index a5a6b5af3..3db37da33 100644
--- a/apps/console/src/pages/organizations/continualImprovements/dialogs/CreateContinualImprovementDialog.tsx
+++ b/apps/console/src/pages/organizations/continualImprovements/dialogs/CreateContinualImprovementDialog.tsx
@@ -64,7 +64,7 @@ export function CreateContinualImprovementDialog({
     },
   });
 
-  const onSubmit = handleSubmit(async (formData: FormData) => {
+  const onSubmit = async (formData: FormData) => {
     try {
       await createImprovement({
         organizationId,
@@ -92,7 +92,7 @@ export function CreateContinualImprovementDialog({
         variant: "error",
       });
     }
-  });
+  };
 
   const statusOptions = [
     { value: "OPEN", label: __("Open") },
@@ -113,7 +113,7 @@ export function CreateContinualImprovementDialog({
       title={<Breadcrumb items={[__("Continual Improvements"), __("Create Entry")]} />}
       className="max-w-2xl"
     >
-      <form onSubmit={onSubmit}>
+      <form onSubmit={e => void handleSubmit(onSubmit)(e)}>
         <DialogContent padded className="space-y-4">
           <Field
             label={__("Reference ID")}
@@ -174,12 +174,16 @@ export function CreateContinualImprovementDialog({
               name="status"
               render={({ field }) => (
                 <div>
-                  <Label>{__("Status")} *</Label>
+                  <Label>
+                    {__("Status")}
+                    {" "}
+                    *
+                  </Label>
                   <Select
                     value={field.value}
                     onValueChange={field.onChange}
                   >
-                    {statusOptions.map((option) => (
+                    {statusOptions.map(option => (
                       <Option key={option.value} value={option.value}>
                         {option.label}
                       </Option>
@@ -199,12 +203,16 @@ export function CreateContinualImprovementDialog({
               name="priority"
               render={({ field }) => (
                 <div>
-                  <Label>{__("Priority")} *</Label>
+                  <Label>
+                    {__("Priority")}
+                    {" "}
+                    *
+                  </Label>
                   <Select
                     value={field.value}
                     onValueChange={field.onChange}
                   >
-                    {priorityOptions.map((option) => (
+                    {priorityOptions.map(option => (
                       <Option key={option.value} value={option.value}>
                         {option.label}
                       </Option>
diff --git a/apps/console/src/pages/organizations/data/DataPage.tsx b/apps/console/src/pages/organizations/data/DataPage.tsx
index 05b16c248..0b4a0d3a4 100644
--- a/apps/console/src/pages/organizations/data/DataPage.tsx
+++ b/apps/console/src/pages/organizations/data/DataPage.tsx
@@ -104,7 +104,7 @@ export default function DataPage(props: Props) {
     data,
   );
 
-  const dataEntries = pagination.data.data.edges.map((edge) => edge.node);
+  const dataEntries = pagination.data.data.edges.map(edge => edge.node);
   const connectionId = pagination.data.data.__id;
 
   const refetch = ({
@@ -123,9 +123,9 @@ export default function DataPage(props: Props) {
 
   usePageTitle(__("Data"));
 
-  const hasAnyAction =
-    !isSnapshotMode &&
-    dataEntries.some(({ canDelete, canUpdate }) => canUpdate || canDelete);
+  const hasAnyAction
+    = !isSnapshotMode
+      && dataEntries.some(({ canDelete, canUpdate }) => canUpdate || canDelete);
 
   return (
     <div className="space-y-6">
@@ -159,7 +159,7 @@ export default function DataPage(props: Props) {
           </Tr>
         </Thead>
         <Tbody>
-          {dataEntries.map((entry) => (
+          {dataEntries.map(entry => (
             <DataRow
               key={entry.id}
               entry={entry}
@@ -188,7 +188,7 @@ function DataRow({
   const organizationId = useOrganizationId();
   const { __ } = useTranslate();
   const deleteDatum = useDeleteDatum(entry, connectionId);
-  const vendors = entry.vendors?.edges.map((edge) => edge.node) ?? [];
+  const vendors = entry.vendors?.edges.map(edge => edge.node) ?? [];
   const detailUrl = snapshotId
     ? `/organizations/${organizationId}/snapshots/${snapshotId}/data/${entry.id}`
     : `/organizations/${organizationId}/data/${entry.id}`;
@@ -201,31 +201,34 @@ function DataRow({
       </Td>
       <Td>{entry.owner?.fullName ?? __("Unassigned")}</Td>
       <Td>
-        {vendors.length > 0 ? (
-          <div className="flex flex-wrap gap-1">
-            {vendors.slice(0, 3).map((vendor) => (
-              <Badge
-                key={vendor.id}
-                variant="neutral"
-                className="flex items-center gap-1"
-              >
-                <Avatar
-                  name={vendor.name}
-                  src={faviconUrl(vendor.websiteUrl)}
-                  size="s"
-                />
-                <span className="text-xs">{vendor.name}</span>
-              </Badge>
-            ))}
-            {vendors.length > 3 && (
-              <Badge variant="neutral" className="text-xs">
-                +{vendors.length - 3}
-              </Badge>
+        {vendors.length > 0
+          ? (
+              <div className="flex flex-wrap gap-1">
+                {vendors.slice(0, 3).map(vendor => (
+                  <Badge
+                    key={vendor.id}
+                    variant="neutral"
+                    className="flex items-center gap-1"
+                  >
+                    <Avatar
+                      name={vendor.name}
+                      src={faviconUrl(vendor.websiteUrl)}
+                      size="s"
+                    />
+                    <span className="text-xs">{vendor.name}</span>
+                  </Badge>
+                ))}
+                {vendors.length > 3 && (
+                  <Badge variant="neutral" className="text-xs">
+                    +
+                    {vendors.length - 3}
+                  </Badge>
+                )}
+              </div>
+            )
+          : (
+              <span className="text-txt-secondary text-sm">{__("None")}</span>
             )}
-          </div>
-        ) : (
-          <span className="text-txt-secondary text-sm">{__("None")}</span>
-        )}
       </Td>
       {hasAnyAction && (
         <Td noLink width={50} className="text-end">
diff --git a/apps/console/src/pages/organizations/data/DatumDetailsPage.tsx b/apps/console/src/pages/organizations/data/DatumDetailsPage.tsx
index 5d6e8236f..f371ad031 100644
--- a/apps/console/src/pages/organizations/data/DatumDetailsPage.tsx
+++ b/apps/console/src/pages/organizations/data/DatumDetailsPage.tsx
@@ -64,11 +64,11 @@ export default function DatumDetailsPage(props: Props) {
     }),
   );
 
-  const vendors = datumEntry?.vendors?.edges.map((edge) => edge.node) ?? [];
-  const vendorIds = vendors.map((vendor) => vendor.id);
+  const vendors = datumEntry?.vendors?.edges.map(edge => edge.node) ?? [];
+  const vendorIds = vendors.map(vendor => vendor.id);
 
-  const { control, formState, handleSubmit, register, reset } =
-    useFormWithSchema(updateDatumSchema, {
+  const { control, formState, handleSubmit, register, reset }
+    = useFormWithSchema(updateDatumSchema, {
       defaultValues: {
         name: datumEntry?.name || "",
         dataClassification: datumEntry?.dataClassification || "PUBLIC",
@@ -136,7 +136,7 @@ export default function DatumDetailsPage(props: Props) {
         )}
       </div>
 
-      <form onSubmit={onSubmit} className="space-y-6 max-w-2xl">
+      <form onSubmit={e => void onSubmit(e)} className="space-y-6 max-w-2xl">
         <Field
           label={__("Name")}
           {...register("name")}
diff --git a/apps/console/src/pages/organizations/data/dialogs/CreateDatumDialog.tsx b/apps/console/src/pages/organizations/data/dialogs/CreateDatumDialog.tsx
index 41d663681..85ea21ae1 100644
--- a/apps/console/src/pages/organizations/data/dialogs/CreateDatumDialog.tsx
+++ b/apps/console/src/pages/organizations/data/dialogs/CreateDatumDialog.tsx
@@ -37,8 +37,8 @@ export function CreateDatumDialog({
   onCreated,
 }: Props) {
   const { __ } = useTranslate();
-  const { control, handleSubmit, register, formState, reset } =
-    useFormWithSchema(schema, {
+  const { control, handleSubmit, register, formState, reset }
+    = useFormWithSchema(schema, {
       defaultValues: {
         name: "",
         dataClassification: "PUBLIC",
@@ -49,7 +49,7 @@ export function CreateDatumDialog({
   const ref = useDialogRef();
   const createDatum = useCreateDatum(connection);
 
-  const onSubmit = handleSubmit(async (data) => {
+  const onSubmit = async (data: z.infer<typeof schema>) => {
     try {
       await createDatum({
         ...data,
@@ -61,7 +61,7 @@ export function CreateDatumDialog({
     } catch (error) {
       console.error("Failed to create datum:", error);
     }
-  });
+  };
 
   return (
     <Dialog
@@ -69,7 +69,7 @@ export function CreateDatumDialog({
       trigger={children}
       title={<Breadcrumb items={[__("Data"), __("New Data")]} />}
     >
-      <form onSubmit={onSubmit} className="space-y-4">
+      <form onSubmit={e => void handleSubmit(onSubmit)(e)} className="space-y-4">
         <DialogContent padded className="space-y-4">
           <Field label={__("Name")} {...register("name")} type="text" />
           <ControlledField
diff --git a/apps/console/src/pages/organizations/documents/DocumentDetailPage.tsx b/apps/console/src/pages/organizations/documents/DocumentDetailPage.tsx
index 801d724c0..d05438275 100644
--- a/apps/console/src/pages/organizations/documents/DocumentDetailPage.tsx
+++ b/apps/console/src/pages/organizations/documents/DocumentDetailPage.tsx
@@ -197,12 +197,12 @@ export default function DocumentDetailPage(props: Props) {
   const [isEditingOwner, setIsEditingOwner] = useState(false);
   const [isEditingType, setIsEditingType] = useState(false);
   const [isEditingClassification, setIsEditingClassification] = useState(false);
-  const versions = document.versions.edges.map((edge) => edge.node);
-  const currentVersion =
-    document.versions.edges.find((v) => v.node.id === versionId)?.node ??
-    document.versions.edges[0].node;
-  const signatures = currentVersion.signatures?.edges?.map((s) => s.node) ?? [];
-  const signedSignatures = signatures.filter((s) => s.state === "SIGNED");
+  const versions = document.versions.edges.map(edge => edge.node);
+  const currentVersion
+    = document.versions.edges.find(v => v.node.id === versionId)?.node
+      ?? document.versions.edges[0].node;
+  const signatures = currentVersion.signatures?.edges?.map(s => s.node) ?? [];
+  const signedSignatures = signatures.filter(s => s.state === "SIGNED");
   const isDraft = currentVersion.status === "DRAFT";
   const [publishDocumentVersion, isPublishing] = useMutationWithToasts(
     publishDocumentVersionMutation,
@@ -212,10 +212,10 @@ export default function DocumentDetailPage(props: Props) {
     },
   );
   const [deleteDocument, isDeleting] = useDeleteDocumentMutation();
-  const [deleteDraftDocumentVersion, isDeletingDraft] =
-    useDeleteDraftDocumentVersionMutation();
-  const [exportDocumentVersionPDF, isExporting] =
-    useMutationWithToasts<DocumentDetailPageExportPDFMutation>(
+  const [deleteDraftDocumentVersion, isDeletingDraft]
+    = useDeleteDraftDocumentVersionMutation();
+  const [exportDocumentVersionPDF, isExporting]
+    = useMutationWithToasts<DocumentDetailPageExportPDFMutation>(
       exportDocumentVersionPDFMutation,
       {
         successMessage: __("PDF download started."),
@@ -224,8 +224,8 @@ export default function DocumentDetailPage(props: Props) {
     );
 
   const { email: defaultEmail } = use(CurrentUser);
-  const [updateDocument, isUpdatingDocument] =
-    useMutationWithToasts<DocumentDetailPageUpdateMutation>(
+  const [updateDocument, isUpdatingDocument]
+    = useMutationWithToasts<DocumentDetailPageUpdateMutation>(
       updateDocumentMutation,
       {
         successMessage: __("Document updated successfully."),
@@ -248,8 +248,8 @@ export default function DocumentDetailPage(props: Props) {
 
   usePageTitle(document.title);
 
-  const handleUpdateTitle = (data: { title: string }) => {
-    updateDocument({
+  const handleUpdateTitle = async (data: { title: string }) => {
+    await updateDocument({
       variables: {
         input: {
           id: document.id,
@@ -262,8 +262,8 @@ export default function DocumentDetailPage(props: Props) {
     });
   };
 
-  const handleUpdateOwner = (data: { ownerId: string }) => {
-    updateDocument({
+  const handleUpdateOwner = async (data: { ownerId: string }) => {
+    await updateDocument({
       variables: {
         input: {
           id: document.id,
@@ -276,10 +276,10 @@ export default function DocumentDetailPage(props: Props) {
     });
   };
 
-  const handleUpdateDocumentType = (data: {
+  const handleUpdateDocumentType = async (data: {
     documentType: (typeof documentTypes)[number];
   }) => {
-    updateDocument({
+    await updateDocument({
       variables: {
         input: {
           id: document.id,
@@ -298,10 +298,10 @@ export default function DocumentDetailPage(props: Props) {
     });
   };
 
-  const handleUpdateClassification = (data: {
+  const handleUpdateClassification = async (data: {
     classification: (typeof documentClassifications)[number];
   }) => {
-    updateDocument({
+    await updateDocument({
       variables: {
         input: {
           id: document.id,
@@ -320,8 +320,8 @@ export default function DocumentDetailPage(props: Props) {
     });
   };
 
-  const handlePublish = () => {
-    publishDocumentVersion({
+  const handlePublish = async () => {
+    await publishDocumentVersion({
       variables: {
         input: { documentId: document.id },
       },
@@ -334,12 +334,12 @@ export default function DocumentDetailPage(props: Props) {
     confirm(
       () =>
         new Promise<void>((resolve) => {
-          deleteDocument({
+          void deleteDocument({
             variables: {
               input: { documentId: document.id },
             },
             onSuccess() {
-              navigate(`/organizations/${organizationId}/documents`);
+              void navigate(`/organizations/${organizationId}/documents`);
               resolve();
             },
             onError: () => resolve(),
@@ -348,7 +348,7 @@ export default function DocumentDetailPage(props: Props) {
       {
         message: sprintf(
           __(
-            'This will permanently delete the document "%s". This action cannot be undone.',
+            "This will permanently delete the document \"%s\". This action cannot be undone.",
           ),
           document.title,
         ),
@@ -360,7 +360,7 @@ export default function DocumentDetailPage(props: Props) {
     confirm(
       () =>
         new Promise<void>((resolve) => {
-          deleteDraftDocumentVersion({
+          void deleteDraftDocumentVersion({
             variables: {
               input: { documentVersionId: currentVersion.id },
               connections: [versionConnectionId],
@@ -381,7 +381,7 @@ export default function DocumentDetailPage(props: Props) {
       {
         message: sprintf(
           __(
-            'This will permanently delete the draft version %s of "%s". This action cannot be undone.',
+            "This will permanently delete the draft version %s of \"%s\". This action cannot be undone.",
           ),
           currentVersion.version,
           document.title,
@@ -390,7 +390,7 @@ export default function DocumentDetailPage(props: Props) {
     );
   };
 
-  const handleDownloadPdf = (options: {
+  const handleDownloadPdf = async (options: {
     withWatermark: boolean;
     withSignatures: boolean;
     watermarkEmail?: string;
@@ -399,11 +399,11 @@ export default function DocumentDetailPage(props: Props) {
       documentVersionId: currentVersion.id,
       withWatermark: options.withWatermark,
       withSignatures: options.withSignatures,
-      ...(options.withWatermark &&
-        options.watermarkEmail && { watermarkEmail: options.watermarkEmail }),
+      ...(options.withWatermark
+        && options.watermarkEmail && { watermarkEmail: options.watermarkEmail }),
     };
 
-    exportDocumentVersionPDF({
+    await exportDocumentVersionPDF({
       variables: { input },
       onCompleted: (data) => {
         if (data.exportDocumentVersionPDF?.data) {
@@ -434,7 +434,7 @@ export default function DocumentDetailPage(props: Props) {
       />
       <PdfDownloadDialog
         ref={pdfDownloadDialogRef}
-        onDownload={handleDownloadPdf}
+        onDownload={options => void handleDownloadPdf(options)}
         isLoading={isExporting}
         defaultEmail={defaultEmail}
       >
@@ -456,7 +456,7 @@ export default function DocumentDetailPage(props: Props) {
           <div className="flex gap-2">
             {isDraft && document.canPublish && (
               <Button
-                onClick={handlePublish}
+                onClick={() => void handlePublish()}
                 icon={IconCheckmark1}
                 disabled={isPublishing}
               >
@@ -464,14 +464,14 @@ export default function DocumentDetailPage(props: Props) {
               </Button>
             )}
             <Dropdown
-              toggle={
+              toggle={(
                 <Button icon={IconClock} variant="secondary">
                   {__("Version history")}
                   <IconChevronDown size={12} />
                 </Button>
-              }
+              )}
             >
-              {versions.map((version) => (
+              {versions.map(version => (
                 <DropdownItem asChild key={version.id}>
                   <VersionItem
                     document={document}
@@ -492,17 +492,17 @@ export default function DocumentDetailPage(props: Props) {
                   {isDraft ? __("Edit draft document") : __("Create new draft")}
                 </DropdownItem>
               )}
-              {isDraft &&
-                versions.length > 1 &&
-                currentVersion.canDeleteDraft && (
-                  <DropdownItem
-                    onClick={handleDeleteDraft}
-                    icon={IconTrashCan}
-                    disabled={isDeletingDraft}
-                  >
-                    {__("Delete draft document")}
-                  </DropdownItem>
-                )}
+              {isDraft
+                && versions.length > 1
+                && currentVersion.canDeleteDraft && (
+                <DropdownItem
+                  onClick={handleDeleteDraft}
+                  icon={IconTrashCan}
+                  disabled={isDeletingDraft}
+                >
+                  {__("Delete draft document")}
+                </DropdownItem>
+              )}
               <DropdownItem
                 onClick={() => pdfDownloadDialogRef.current?.open()}
                 icon={IconArrowDown}
@@ -525,50 +525,52 @@ export default function DocumentDetailPage(props: Props) {
         </div>
         <PageHeader
           title={
-            isEditingTitle ? (
-              <div className="flex items-center gap-2">
-                <Input
-                  {...register("title")}
-                  variant="title"
-                  className="flex-1"
-                  autoFocus
-                  onKeyDown={(e) => {
-                    if (e.key === "Escape") {
-                      setIsEditingTitle(false);
-                      reset();
-                    }
-                    if (e.key === "Enter") {
-                      handleSubmit(handleUpdateTitle)();
-                    }
-                  }}
-                />
-                <Button
-                  variant="quaternary"
-                  icon={IconCheckmark1}
-                  onClick={handleSubmit(handleUpdateTitle)}
-                  disabled={isUpdatingDocument}
-                />
-                <Button
-                  variant="quaternary"
-                  icon={IconCrossLargeX}
-                  onClick={() => {
-                    setIsEditingTitle(false);
-                    reset();
-                  }}
-                />
-              </div>
-            ) : (
-              <div className="flex items-center gap-2">
-                <span>{document.title}</span>
-                {document.canUpdate && (
-                  <Button
-                    variant="quaternary"
-                    icon={IconPencil}
-                    onClick={() => setIsEditingTitle(true)}
-                  />
-                )}
-              </div>
-            )
+            isEditingTitle
+              ? (
+                  <div className="flex items-center gap-2">
+                    <Input
+                      {...register("title")}
+                      variant="title"
+                      className="flex-1"
+                      autoFocus
+                      onKeyDown={(e) => {
+                        if (e.key === "Escape") {
+                          setIsEditingTitle(false);
+                          reset();
+                        }
+                        if (e.key === "Enter") {
+                          void handleSubmit(handleUpdateTitle)();
+                        }
+                      }}
+                    />
+                    <Button
+                      variant="quaternary"
+                      icon={IconCheckmark1}
+                      onClick={() => void handleSubmit(handleUpdateTitle)()}
+                      disabled={isUpdatingDocument}
+                    />
+                    <Button
+                      variant="quaternary"
+                      icon={IconCrossLargeX}
+                      onClick={() => {
+                        setIsEditingTitle(false);
+                        reset();
+                      }}
+                    />
+                  </div>
+                )
+              : (
+                  <div className="flex items-center gap-2">
+                    <span>{document.title}</span>
+                    {document.canUpdate && (
+                      <Button
+                        variant="quaternary"
+                        icon={IconPencil}
+                        onClick={() => setIsEditingTitle(true)}
+                      />
+                    )}
+                  </div>
+                )
           }
         />
 
@@ -582,7 +584,9 @@ export default function DocumentDetailPage(props: Props) {
             <TabLink to={`${urlPrefix}/signatures`}>
               {__("Signatures")}
               <TabBadge>
-                {signedSignatures.length}/{signatures.length}
+                {signedSignatures.length}
+                /
+                {signatures.length}
               </TabBadge>
             </TabLink>
           )}
@@ -595,93 +599,99 @@ export default function DocumentDetailPage(props: Props) {
           {__("Properties")}
         </div>
         <PropertyRow label={__("Owner")}>
-          {isEditingOwner ? (
-            <EditablePropertyContent
-              onSave={handleSubmit(handleUpdateOwner)}
-              onCancel={() => {
-                setIsEditingOwner(false);
-                reset();
-              }}
-              disabled={isUpdatingDocument}
-            >
-              <PeopleSelectField
-                name="ownerId"
-                control={control}
-                organizationId={organizationId}
-              />
-            </EditablePropertyContent>
-          ) : (
-            <ReadOnlyPropertyContent
-              onEdit={() => setIsEditingOwner(true)}
-              canEdit={document.canUpdate}
-            >
-              <Badge variant="highlight" size="md" className="gap-2">
-                <Avatar name={currentVersion.owner?.fullName ?? ""} />
-                {currentVersion.owner?.fullName}
-              </Badge>
-            </ReadOnlyPropertyContent>
-          )}
+          {isEditingOwner
+            ? (
+                <EditablePropertyContent
+                  onSave={() => void handleSubmit(handleUpdateOwner)()}
+                  onCancel={() => {
+                    setIsEditingOwner(false);
+                    reset();
+                  }}
+                  disabled={isUpdatingDocument}
+                >
+                  <PeopleSelectField
+                    name="ownerId"
+                    control={control}
+                    organizationId={organizationId}
+                  />
+                </EditablePropertyContent>
+              )
+            : (
+                <ReadOnlyPropertyContent
+                  onEdit={() => setIsEditingOwner(true)}
+                  canEdit={document.canUpdate}
+                >
+                  <Badge variant="highlight" size="md" className="gap-2">
+                    <Avatar name={currentVersion.owner?.fullName ?? ""} />
+                    {currentVersion.owner?.fullName}
+                  </Badge>
+                </ReadOnlyPropertyContent>
+              )}
         </PropertyRow>
         <PropertyRow label={__("Type")}>
-          {isEditingType ? (
-            <EditablePropertyContent
-              onSave={handleSubmit(handleUpdateDocumentType)}
-              onCancel={() => {
-                setIsEditingType(false);
-                reset();
-              }}
-              disabled={isUpdatingDocument}
-            >
-              <ControlledField
-                name="documentType"
-                control={control}
-                type="select"
-              >
-                <DocumentTypeOptions />
-              </ControlledField>
-            </EditablePropertyContent>
-          ) : (
-            <ReadOnlyPropertyContent
-              onEdit={() => setIsEditingType(true)}
-              canEdit={document.canUpdate}
-            >
-              <div className="text-sm text-txt-secondary">
-                {getDocumentTypeLabel(__, document.documentType)}
-              </div>
-            </ReadOnlyPropertyContent>
-          )}
+          {isEditingType
+            ? (
+                <EditablePropertyContent
+                  onSave={() => void handleSubmit(handleUpdateDocumentType)()}
+                  onCancel={() => {
+                    setIsEditingType(false);
+                    reset();
+                  }}
+                  disabled={isUpdatingDocument}
+                >
+                  <ControlledField
+                    name="documentType"
+                    control={control}
+                    type="select"
+                  >
+                    <DocumentTypeOptions />
+                  </ControlledField>
+                </EditablePropertyContent>
+              )
+            : (
+                <ReadOnlyPropertyContent
+                  onEdit={() => setIsEditingType(true)}
+                  canEdit={document.canUpdate}
+                >
+                  <div className="text-sm text-txt-secondary">
+                    {getDocumentTypeLabel(__, document.documentType)}
+                  </div>
+                </ReadOnlyPropertyContent>
+              )}
         </PropertyRow>
         <PropertyRow label={__("Classification")}>
-          {isEditingClassification ? (
-            <EditablePropertyContent
-              onSave={handleSubmit(handleUpdateClassification)}
-              onCancel={() => {
-                setIsEditingClassification(false);
-                reset();
-              }}
-              disabled={isUpdatingDocument}
-            >
-              <ControlledField
-                name="classification"
-                control={control}
-                type="select"
-              >
-                <DocumentClassificationOptions />
-              </ControlledField>
-            </EditablePropertyContent>
-          ) : (
-            <ReadOnlyPropertyContent
-              onEdit={() => setIsEditingClassification(true)}
-              canEdit={document.canUpdate}
-            >
-              <div className="text-sm text-txt-secondary">
-                {getDocumentClassificationLabel(
-                  __,
-                  currentVersion.classification,
-                )}
-              </div>
-            </ReadOnlyPropertyContent>
-          )}
+          {isEditingClassification
+            ? (
+                <EditablePropertyContent
+                  onSave={() => void handleSubmit(handleUpdateClassification)()}
+                  onCancel={() => {
+                    setIsEditingClassification(false);
+                    reset();
+                  }}
+                  disabled={isUpdatingDocument}
+                >
+                  <ControlledField
+                    name="classification"
+                    control={control}
+                    type="select"
+                  >
+                    <DocumentClassificationOptions />
+                  </ControlledField>
+                </EditablePropertyContent>
+              )
+            : (
+                <ReadOnlyPropertyContent
+                  onEdit={() => setIsEditingClassification(true)}
+                  canEdit={document.canUpdate}
+                >
+                  <div className="text-sm text-txt-secondary">
+                    {getDocumentClassificationLabel(
+                      __,
+                      currentVersion.classification,
+                    )}
+                  </div>
+                </ReadOnlyPropertyContent>
+              )}
         </PropertyRow>
         <PropertyRow label={__("Status")}>
           <Badge
diff --git a/apps/console/src/pages/organizations/documents/DocumentsPage.tsx b/apps/console/src/pages/organizations/documents/DocumentsPage.tsx
index bca617beb..346d63b05 100644
--- a/apps/console/src/pages/organizations/documents/DocumentsPage.tsx
+++ b/apps/console/src/pages/organizations/documents/DocumentsPage.tsx
@@ -108,20 +108,20 @@ export default function DocumentsPage(props: Props) {
     props.queryRef,
   ).organization;
 
-  const { email: defaultEmail } = use(CurrentUser)
+  const { email: defaultEmail } = use(CurrentUser);
   const pagination = usePaginationFragment(
     documentsFragment,
     organization as DocumentsPageListFragment$key,
   );
 
   const documents = pagination.data.documents.edges
-    .map((edge) => edge.node)
+    .map(edge => edge.node)
     .filter(Boolean);
   const connectionId = pagination.data.documents.__id;
   const [sendSigningNotifications] = useSendSigningNotificationsMutation();
   const [bulkDeleteDocuments] = useBulkDeleteDocumentsMutation();
-  const [bulkExportDocuments, isBulkExporting] =
-    useBulkExportDocumentsMutation();
+  const [bulkExportDocuments, isBulkExporting]
+    = useBulkExportDocumentsMutation();
   const { list: selection, toggle, clear, reset } = useList<string>([]);
   const confirm = useConfirm();
   const bulkExportDialogRef = useRef<BulkExportDialogRef>(null);
@@ -138,8 +138,8 @@ export default function DocumentsPage(props: Props) {
   );
   const hasAnyAction = canDeleteAny || canUpdateAny;
 
-  const handleSendSigningNotifications = () => {
-    sendSigningNotifications({
+  const handleSendSigningNotifications = async () => {
+    await sendSigningNotifications({
       variables: {
         input: { organizationId: organization.id },
       },
@@ -169,7 +169,7 @@ export default function DocumentsPage(props: Props) {
     );
   };
 
-  const handleBulkExport = (options: {
+  const handleBulkExport = async (options: {
     withWatermark: boolean;
     withSignatures: boolean;
     watermarkEmail?: string;
@@ -178,15 +178,14 @@ export default function DocumentsPage(props: Props) {
       documentIds: selection,
       withWatermark: options.withWatermark,
       withSignatures: options.withSignatures,
-      ...(options.withWatermark &&
-        options.watermarkEmail && { watermarkEmail: options.watermarkEmail }),
+      ...(options.withWatermark
+        && options.watermarkEmail && { watermarkEmail: options.watermarkEmail }),
     };
 
-    bulkExportDocuments({
+    await bulkExportDocuments({
       variables: { input },
-    }).then(() => {
-      clear();
     });
+    clear();
   };
 
   return (
@@ -200,7 +199,7 @@ export default function DocumentsPage(props: Props) {
             <Button
               icon={IconBell2}
               variant="secondary"
-              onClick={handleSendSigningNotifications}
+              onClick={void handleSendSigningNotifications}
             >
               {__("Send signing notifications")}
             </Button>
@@ -215,133 +214,139 @@ export default function DocumentsPage(props: Props) {
           )}
         </div>
       </PageHeader>
-      {documents.length > 0 ? (
-        <SortableTable {...pagination}>
-          <Thead>
-            {selection.length === 0 ? (
-              <Tr>
-                <Th className="w-18">
-                  <Checkbox
-                    checked={
-                      selection.length === documents.length &&
-                      documents.length > 0
-                    }
-                    onChange={() => reset(documents.map((d) => d.id))}
+      {documents.length > 0
+        ? (
+            <SortableTable {...pagination}>
+              <Thead>
+                {selection.length === 0
+                  ? (
+                      <Tr>
+                        <Th className="w-18">
+                          <Checkbox
+                            checked={
+                              selection.length === documents.length
+                              && documents.length > 0
+                            }
+                            onChange={() => reset(documents.map(d => d.id))}
+                          />
+                        </Th>
+                        <SortableTh field="TITLE" className="min-w-0">
+                          {__("Name")}
+                        </SortableTh>
+                        <Th className="w-24">{__("Status")}</Th>
+                        <Th className="w-20">{__("Version")}</Th>
+                        <SortableTh field="DOCUMENT_TYPE" className="w-28">
+                          {__("Type")}
+                        </SortableTh>
+                        <Th className="w-32">{__("Classification")}</Th>
+                        <Th className="w-60">{__("Owner")}</Th>
+                        <Th className="w-60">{__("Last update")}</Th>
+                        <Th className="w-20">{__("Signatures")}</Th>
+                        {hasAnyAction && <Th className="w-18"></Th>}
+                      </Tr>
+                    )
+                  : (
+                      <Tr>
+                        <Th colspan={10} compact>
+                          <div className="flex justify-between items-center h-8">
+                            <div className="flex gap-2 items-center">
+                              {sprintf(__("%s documents selected"), selection.length)}
+                              {" "}
+                              -
+                              <button
+                                onClick={clear}
+                                className="flex gap-1 items-center hover:text-txt-primary"
+                              >
+                                <IconCrossLargeX size={12} />
+                                {__("Clear selection")}
+                              </button>
+                            </div>
+                            <div className="flex gap-2 items-center">
+                              {canUpdateAny && (
+                                <PublishDocumentsDialog
+                                  documentIds={selection}
+                                  onSave={clear}
+                                >
+                                  <Button
+                                    icon={IconCheckmark1}
+                                    className="py-0.5 px-2 text-xs h-6 min-h-6"
+                                  >
+                                    {__("Publish")}
+                                  </Button>
+                                </PublishDocumentsDialog>
+                              )}
+                              {canRequestAnySignatures && (
+                                <SignatureDocumentsDialog
+                                  documentIds={selection}
+                                  onSave={clear}
+                                >
+                                  <Button
+                                    variant="secondary"
+                                    icon={IconSignature}
+                                    className="py-0.5 px-2 text-xs h-6 min-h-6"
+                                  >
+                                    {__("Request signature")}
+                                  </Button>
+                                </SignatureDocumentsDialog>
+                              )}
+                              <BulkExportDialog
+                                ref={bulkExportDialogRef}
+                                onExport={handleBulkExport}
+                                isLoading={isBulkExporting}
+                                defaultEmail={defaultEmail}
+                                selectedCount={selection.length}
+                              >
+                                <Button
+                                  variant="secondary"
+                                  icon={IconArrowDown}
+                                  className="py-0.5 px-2 text-xs h-6 min-h-6"
+                                >
+                                  {__("Export")}
+                                </Button>
+                              </BulkExportDialog>
+                              {canDeleteAny && (
+                                <Button
+                                  variant="danger"
+                                  icon={IconTrashCan}
+                                  onClick={handleBulkDelete}
+                                  className="py-0.5 px-2 text-xs h-6 min-h-6"
+                                >
+                                  {__("Delete")}
+                                </Button>
+                              )}
+                            </div>
+                          </div>
+                        </Th>
+                      </Tr>
+                    )}
+              </Thead>
+              <Tbody>
+                {documents.map(document => (
+                  <DocumentRow
+                    checked={selection.includes(document.id)}
+                    onCheck={() => toggle(document.id)}
+                    key={document.id}
+                    document={document}
+                    organizationId={organization.id}
+                    connectionId={connectionId}
+                    hasAnyAction={hasAnyAction}
                   />
-                </Th>
-                <SortableTh field="TITLE" className="min-w-0">
-                  {__("Name")}
-                </SortableTh>
-                <Th className="w-24">{__("Status")}</Th>
-                <Th className="w-20">{__("Version")}</Th>
-                <SortableTh field="DOCUMENT_TYPE" className="w-28">
-                  {__("Type")}
-                </SortableTh>
-                <Th className="w-32">{__("Classification")}</Th>
-                <Th className="w-60">{__("Owner")}</Th>
-                <Th className="w-60">{__("Last update")}</Th>
-                <Th className="w-20">{__("Signatures")}</Th>
-                {hasAnyAction && <Th className="w-18"></Th>}
-              </Tr>
-            ) : (
-              <Tr>
-                <Th colspan={10} compact>
-                  <div className="flex justify-between items-center h-8">
-                    <div className="flex gap-2 items-center">
-                      {sprintf(__("%s documents selected"), selection.length)} -
-                      <button
-                        onClick={clear}
-                        className="flex gap-1 items-center hover:text-txt-primary"
-                      >
-                        <IconCrossLargeX size={12} />
-                        {__("Clear selection")}
-                      </button>
-                    </div>
-                    <div className="flex gap-2 items-center">
-                      {canUpdateAny && (
-                        <PublishDocumentsDialog
-                          documentIds={selection}
-                          onSave={clear}
-                        >
-                          <Button
-                            icon={IconCheckmark1}
-                            className="py-0.5 px-2 text-xs h-6 min-h-6"
-                          >
-                            {__("Publish")}
-                          </Button>
-                        </PublishDocumentsDialog>
-                      )}
-                      {canRequestAnySignatures && (
-                        <SignatureDocumentsDialog
-                          documentIds={selection}
-                          onSave={clear}
-                        >
-                          <Button
-                            variant="secondary"
-                            icon={IconSignature}
-                            className="py-0.5 px-2 text-xs h-6 min-h-6"
-                          >
-                            {__("Request signature")}
-                          </Button>
-                        </SignatureDocumentsDialog>
-                      )}
-                      <BulkExportDialog
-                        ref={bulkExportDialogRef}
-                        onExport={handleBulkExport}
-                        isLoading={isBulkExporting}
-                        defaultEmail={defaultEmail}
-                        selectedCount={selection.length}
-                      >
-                        <Button
-                          variant="secondary"
-                          icon={IconArrowDown}
-                          className="py-0.5 px-2 text-xs h-6 min-h-6"
-                        >
-                          {__("Export")}
-                        </Button>
-                      </BulkExportDialog>
-                      {canDeleteAny && (
-                        <Button
-                          variant="danger"
-                          icon={IconTrashCan}
-                          onClick={handleBulkDelete}
-                          className="py-0.5 px-2 text-xs h-6 min-h-6"
-                        >
-                          {__("Delete")}
-                        </Button>
-                      )}
-                    </div>
-                  </div>
-                </Th>
-              </Tr>
-            )}
-          </Thead>
-          <Tbody>
-            {documents.map((document) => (
-              <DocumentRow
-                checked={selection.includes(document.id)}
-                onCheck={() => toggle(document.id)}
-                key={document.id}
-                document={document}
-                organizationId={organization.id}
-                connectionId={connectionId}
-                hasAnyAction={hasAnyAction}
-              />
-            ))}
-          </Tbody>
-        </SortableTable>
-      ) : (
-        <Card padded>
-          <div className="text-center py-12">
-            <h3 className="text-lg font-semibold mb-2">
-              {__("No documents yet")}
-            </h3>
-            <p className="text-txt-tertiary mb-4">
-              {__("Create your first document to get started.")}
-            </p>
-          </div>
-        </Card>
-      )}
+                ))}
+              </Tbody>
+            </SortableTable>
+          )
+        : (
+            <Card padded>
+              <div className="text-center py-12">
+                <h3 className="text-lg font-semibold mb-2">
+                  {__("No documents yet")}
+                </h3>
+                <p className="text-txt-tertiary mb-4">
+                  {__("Create your first document to get started.")}
+                </p>
+              </div>
+            </Card>
+          )}
     </div>
   );
 }
@@ -409,11 +414,11 @@ function DocumentRow({
     return null;
   }
 
-  const signatures =
-    lastVersion.signatures?.edges?.map((edge) => edge?.node)?.filter(Boolean) ??
-    [];
+  const signatures
+    = lastVersion.signatures?.edges?.map(edge => edge?.node)?.filter(Boolean)
+      ?? [];
   const signedCount = signatures.filter(
-    (signature) => signature.state === "SIGNED",
+    signature => signature.state === "SIGNED",
   ).length;
 
   const handleDelete = () => {
@@ -427,7 +432,7 @@ function DocumentRow({
       {
         message: sprintf(
           __(
-            'This will permanently delete the document "%s". This action cannot be undone.',
+            "This will permanently delete the document \"%s\". This action cannot be undone.",
           ),
           document.title,
         ),
@@ -448,7 +453,10 @@ function DocumentRow({
           {isDraft ? __("Draft") : __("Published")}
         </Badge>
       </Td>
-      <Td className="w-20">v{lastVersion.version}</Td>
+      <Td className="w-20">
+        v
+        {lastVersion.version}
+      </Td>
       <Td className="w-28">
         {getDocumentTypeLabel(__, document.documentType)}
       </Td>
@@ -463,7 +471,9 @@ function DocumentRow({
       </Td>
       <Td className="w-60">{formatDate(document.updatedAt)}</Td>
       <Td className="w-20">
-        {signedCount}/{signatures.length}
+        {signedCount}
+        /
+        {signatures.length}
       </Td>
       {hasAnyAction && (
         <Td noLink width={50} className="text-end w-18">
diff --git a/apps/console/src/pages/organizations/documents/dialogs/CreateDocumentDialog.tsx b/apps/console/src/pages/organizations/documents/dialogs/CreateDocumentDialog.tsx
index c54d7bfd6..b45ef2161 100644
--- a/apps/console/src/pages/organizations/documents/dialogs/CreateDocumentDialog.tsx
+++ b/apps/console/src/pages/organizations/documents/dialogs/CreateDocumentDialog.tsx
@@ -15,13 +15,14 @@ import {
 import { type ReactNode } from "react";
 import { graphql } from "relay-runtime";
 import { useOrganizationId } from "/hooks/useOrganizationId";
-import { useDocumentForm } from "/hooks/forms/useDocumentForm";
+import { documentSchema, useDocumentForm } from "/hooks/forms/useDocumentForm";
 import { useMutationWithToasts } from "/hooks/useMutationWithToasts";
 import { PeopleSelectField } from "/components/form/PeopleSelectField";
 import type { CreateDocumentDialogMutation } from "/__generated__/core/CreateDocumentDialogMutation.graphql";
 import { ControlledField } from "/components/form/ControlledField";
 import { DocumentTypeOptions } from "/components/form/DocumentTypeOptions";
 import { DocumentClassificationOptions } from "/components/form/DocumentClassificationOptions";
+import type z from "zod";
 
 type Props = {
   trigger?: ReactNode;
@@ -51,20 +52,20 @@ export function CreateDocumentDialog({ trigger, connection }: Props) {
   const { __ } = useTranslate();
   const organizationId = useOrganizationId();
 
-  const { control, handleSubmit, register, formState, reset } =
-    useDocumentForm();
+  const { control, handleSubmit, register, formState, reset }
+    = useDocumentForm();
   const errors = formState.errors ?? {};
-  const [createDocument, isLoading] =
-    useMutationWithToasts<CreateDocumentDialogMutation>(createDocumentMutation);
+  const [createDocument, isLoading]
+    = useMutationWithToasts<CreateDocumentDialogMutation>(createDocumentMutation);
 
-  const onSubmit = handleSubmit((data) => {
-    createDocument({
+  const onSubmit = async (data: z.infer<typeof documentSchema>) => {
+    await createDocument({
       variables: {
         input: {
           ...data,
           organizationId,
         },
-        connections: [connection!],
+        connections: [connection],
       },
       successMessage: __("Document created successfully."),
       errorMessage: __("Failed to create document"),
@@ -73,7 +74,7 @@ export function CreateDocumentDialog({ trigger, connection }: Props) {
         reset();
       },
     });
-  });
+  };
 
   const dialogRef = useDialogRef();
 
@@ -83,7 +84,7 @@ export function CreateDocumentDialog({ trigger, connection }: Props) {
       trigger={trigger}
       title={<Breadcrumb items={[__("Documents"), __("New Document")]} />}
     >
-      <form onSubmit={onSubmit}>
+      <form onSubmit={e => void handleSubmit(onSubmit)(e)}>
         <DialogContent className="grid grid-cols-[1fr_420px]">
           <div className="py-8 px-10 space-y-4">
             <Input
diff --git a/apps/console/src/pages/organizations/documents/dialogs/PublishDocumentsDialog.tsx b/apps/console/src/pages/organizations/documents/dialogs/PublishDocumentsDialog.tsx
index e24f3ea44..54d1c2f31 100644
--- a/apps/console/src/pages/organizations/documents/dialogs/PublishDocumentsDialog.tsx
+++ b/apps/console/src/pages/organizations/documents/dialogs/PublishDocumentsDialog.tsx
@@ -49,13 +49,13 @@ export function PublishDocumentsDialog({
     changelog: z.string().min(1, __("Changelog is required")),
   });
 
-  const [publishMutation] =
-    useMutationWithToasts<PublishDocumentsDialogMutation>(
+  const [publishMutation]
+    = useMutationWithToasts<PublishDocumentsDialogMutation>(
       documentsPublishMutation,
       {
         successMessage: (response) => {
-          const actualPublishedCount =
-            response.bulkPublishDocumentVersions.documentEdges.length;
+          const actualPublishedCount
+            = response.bulkPublishDocumentVersions.documentEdges.length;
           return sprintf(__("%s documents published"), actualPublishedCount);
         },
         errorMessage: sprintf(
@@ -75,7 +75,7 @@ export function PublishDocumentsDialog({
     },
   });
 
-  const onSubmit = handleSubmit(async (data) => {
+  const onSubmit = async (data: z.infer<typeof schema>) => {
     await publishMutation({
       variables: {
         input: {
@@ -88,7 +88,7 @@ export function PublishDocumentsDialog({
         onSave();
       },
     });
-  });
+  };
 
   return (
     <Dialog
@@ -97,7 +97,7 @@ export function PublishDocumentsDialog({
       trigger={children}
       title={<Breadcrumb items={[__("Documents"), __("Publish documents")]} />}
     >
-      <form onSubmit={onSubmit}>
+      <form onSubmit={e => void handleSubmit(onSubmit)(e)}>
         <DialogContent padded>
           <Field
             id="changelog"
diff --git a/apps/console/src/pages/organizations/documents/dialogs/SignatureDocumentsDialog.tsx b/apps/console/src/pages/organizations/documents/dialogs/SignatureDocumentsDialog.tsx
index f321c7999..029dad4f4 100644
--- a/apps/console/src/pages/organizations/documents/dialogs/SignatureDocumentsDialog.tsx
+++ b/apps/console/src/pages/organizations/documents/dialogs/SignatureDocumentsDialog.tsx
@@ -64,13 +64,13 @@ export function SignatureDocumentsDialog({
 
   const schema = z.object({});
 
-  const [publishMutation] =
-    useMutationWithToasts<SignatureDocumentsDialogMutation>(
+  const [publishMutation]
+    = useMutationWithToasts<SignatureDocumentsDialogMutation>(
       documentsSignatureMutation,
       {
         successMessage: (response) => {
-          const actualRequestsCount =
-            response.bulkRequestSignatures.documentVersionSignatureEdges.length;
+          const actualRequestsCount
+            = response.bulkRequestSignatures.documentVersionSignatureEdges.length;
           return sprintf(__("%s signature requests sent"), actualRequestsCount);
         },
         errorMessage: __("Failed to send signature requests"),
@@ -82,7 +82,7 @@ export function SignatureDocumentsDialog({
     formState: { isSubmitting },
   } = useFormWithSchema(schema, {});
 
-  const onSubmit = handleSubmit(async () => {
+  const onSubmit = async () => {
     await publishMutation({
       variables: {
         input: {
@@ -95,7 +95,7 @@ export function SignatureDocumentsDialog({
         onSave();
       },
     });
-  });
+  };
 
   return (
     <Dialog
@@ -104,7 +104,7 @@ export function SignatureDocumentsDialog({
       trigger={children}
       title={<Breadcrumb items={[__("Documents"), __("Signature requests")]} />}
     >
-      <form onSubmit={onSubmit}>
+      <form onSubmit={e => void handleSubmit(onSubmit)(e)}>
         <DialogContent>
           <Suspense fallback={<Spinner />}>
             <PeopleList onChange={toggle} selectedPeople={selectedPeople} />
@@ -147,12 +147,12 @@ function PeopleList({
     paginatedPeopleFragment,
     data.organization as PeopleGraphPaginatedFragment$key,
   );
-  const people = page.peoples.edges.map((edge) => edge.node);
+  const people = page.peoples.edges.map(edge => edge.node);
   return (
     <>
       <Table className="border-none rounded-none">
         <Tbody>
-          {people.map((person) => (
+          {people.map(person => (
             <Tr key={person.id}>
               <Td width={75}>
                 <Checkbox
diff --git a/apps/console/src/pages/organizations/documents/dialogs/UpdateVersionDialog.tsx b/apps/console/src/pages/organizations/documents/dialogs/UpdateVersionDialog.tsx
index 01b777ecc..c6d95c198 100644
--- a/apps/console/src/pages/organizations/documents/dialogs/UpdateVersionDialog.tsx
+++ b/apps/console/src/pages/organizations/documents/dialogs/UpdateVersionDialog.tsx
@@ -10,7 +10,7 @@ import {
   useDialogRef,
   useToast,
 } from "@probo/ui";
-import { type RefObject } from "react";
+import { useEffect, type RefObject } from "react";
 import { graphql } from "relay-runtime";
 import { useMutation } from "react-relay";
 import type { UpdateVersionDialogCreateMutation } from "/__generated__/core/UpdateVersionDialogCreateMutation.graphql";
@@ -82,10 +82,10 @@ export default function UpdateVersionDialog({
 
   const version = document.versions.edges[0].node;
   const isDraft = version?.status === "DRAFT";
-  const [createDraftDocumentVersion, isCreatingDraft] =
-    useMutation<UpdateVersionDialogCreateMutation>(createDraftDocument);
-  const [updateDocumentVersion, isUpdating] =
-    useMutationWithToasts<UpdateVersionDialogUpdateMutation>(
+  const [createDraftDocumentVersion, isCreatingDraft]
+    = useMutation<UpdateVersionDialogCreateMutation>(createDraftDocument);
+  const [updateDocumentVersion, isUpdating]
+    = useMutationWithToasts<UpdateVersionDialogUpdateMutation>(
       UpdateDocumentMutation,
       {
         successMessage: __("Document updated successfully."),
@@ -98,19 +98,23 @@ export default function UpdateVersionDialog({
     },
   });
 
-  ref.current = {
-    open: () => {
-      dialogRef.current?.open();
-    },
-  };
+  useEffect(() => {
+    if (!ref.current) {
+      ref.current = {
+        open: () => {
+          dialogRef.current?.open();
+        },
+      };
+    }
+  });
 
   if (!version) {
     return;
   }
 
-  const onSubmit = handleSubmit((data) => {
+  const onSubmit = async (data: z.infer<typeof versionSchema>) => {
     if (isDraft) {
-      updateDocumentVersion({
+      await updateDocumentVersion({
         variables: {
           input: {
             documentVersionId: version.id,
@@ -140,11 +144,11 @@ export default function UpdateVersionDialog({
             return;
           }
 
-          const newVersionId =
-            createResponse?.createDraftDocumentVersion?.documentVersionEdge
+          const newVersionId
+            = createResponse?.createDraftDocumentVersion?.documentVersionEdge
               ?.node?.id;
           if (newVersionId && data.content !== version.content) {
-            updateDocumentVersion({
+            void updateDocumentVersion({
               variables: {
                 input: {
                   documentVersionId: newVersionId,
@@ -161,7 +165,7 @@ export default function UpdateVersionDialog({
         },
       });
     }
-  });
+  };
 
   const isLoading = isCreatingDraft || isUpdating;
 
@@ -170,7 +174,7 @@ export default function UpdateVersionDialog({
       ref={dialogRef}
       title={<Breadcrumb items={[__("Documents"), __("Edit document")]} />}
     >
-      <form onSubmit={onSubmit}>
+      <form onSubmit={e => void handleSubmit(onSubmit)(e)}>
         <DialogContent>
           <Textarea
             id="content"
diff --git a/apps/console/src/pages/organizations/documents/tabs/DocumentControlsTab.tsx b/apps/console/src/pages/organizations/documents/tabs/DocumentControlsTab.tsx
index 18c0400ed..5057987ca 100644
--- a/apps/console/src/pages/organizations/documents/tabs/DocumentControlsTab.tsx
+++ b/apps/console/src/pages/organizations/documents/tabs/DocumentControlsTab.tsx
@@ -68,7 +68,7 @@ export default function DocumentControlsTab() {
     document: DocumentControlsTabFragment$key;
   }>();
   const [data, refetch] = useRefetchableFragment(controlsFragment, document);
-  const controls = data.controls.edges.map((edge) => edge.node);
+  const controls = data.controls.edges.map(edge => edge.node);
   const incrementOptions = {
     id: data.id,
     node: "controls(first:0)",
diff --git a/apps/console/src/pages/organizations/documents/tabs/DocumentSignaturesTab.tsx b/apps/console/src/pages/organizations/documents/tabs/DocumentSignaturesTab.tsx
index 1b6babd9b..94ac41fce 100644
--- a/apps/console/src/pages/organizations/documents/tabs/DocumentSignaturesTab.tsx
+++ b/apps/console/src/pages/organizations/documents/tabs/DocumentSignaturesTab.tsx
@@ -72,8 +72,8 @@ export default function DocumentSignaturesTab() {
   }
 
   const toggleState = (state: SignatureState) => {
-    setSelectedStates((prev) =>
-      prev.includes(state) ? prev.filter((s) => s !== state) : [...prev, state],
+    setSelectedStates(prev =>
+      prev.includes(state) ? prev.filter(s => s !== state) : [...prev, state],
     );
   };
 
@@ -127,9 +127,9 @@ function SignatureList(props: {
     DocumentSignaturesTabRefetchQuery,
     DocumentSignaturesTab_version$key
   >(versionFragment, propVersion);
-  const signatures = version.signatures?.edges?.map((edge) => edge.node) ?? [];
+  const signatures = version.signatures?.edges?.map(edge => edge.node) ?? [];
   const { __ } = useTranslate();
-  const signatureMap = new Map(signatures.map((s) => [s.signedBy.id, s]));
+  const signatureMap = new Map(signatures.map(s => [s.signedBy.id, s]));
   const organizationId = useOrganizationId();
   const people = usePeople(organizationId, { excludeContractEnded: true });
   const signable = version.status === "PUBLISHED";
@@ -142,8 +142,8 @@ function SignatureList(props: {
       return;
     }
 
-    const filter =
-      selectedStates.length > 0 ? { states: selectedStates } : null;
+    const filter
+      = selectedStates.length > 0 ? { states: selectedStates } : null;
 
     refetch({ signatureFilter: filter });
   }, [selectedStates, refetch]);
@@ -165,9 +165,9 @@ function SignatureList(props: {
   }
 
   // When a filter is active, only show people who have signatures in the filtered results
-  const filteredPeople =
-    selectedStates.length > 0
-      ? people.filter((p) => signatureMap.has(p.id))
+  const filteredPeople
+    = selectedStates.length > 0
+      ? people.filter(p => signatureMap.has(p.id))
       : people;
 
   if (filteredPeople.length === 0 && selectedStates.length > 0) {
@@ -180,7 +180,7 @@ function SignatureList(props: {
 
   return (
     <div className="space-y-2 divide-y divide-border-solid">
-      {filteredPeople.map((p) => (
+      {filteredPeople.map(p => (
         <SignatureItem
           key={p.id}
           versionId={version.id}
@@ -286,7 +286,7 @@ function SignatureItem(props: {
             className="ml-auto"
             disabled={isSendingRequest}
             onClick={() => {
-              requestSignature({
+              void requestSignature({
                 variables: {
                   input: {
                     documentVersionId: props.versionId,
@@ -315,11 +315,13 @@ function SignatureItem(props: {
           {signature.signedBy.fullName}
         </div>
         <div className="text-xs text-txt-secondary flex items-center gap-1">
-          {isSigned ? (
-            <IconCircleCheck size={16} className="text-txt-accent" />
-          ) : (
-            <IconClock size={16} />
-          )}
+          {isSigned
+            ? (
+                <IconCircleCheck size={16} className="text-txt-accent" />
+              )
+            : (
+                <IconClock size={16} />
+              )}
           <span>
             {sprintf(
               label,
@@ -330,31 +332,33 @@ function SignatureItem(props: {
           </span>
         </div>
       </div>
-      {isSigned ? (
-        <Badge variant="success" className="ml-auto">
-          {__("Signed")}
-        </Badge>
-      ) : (
-        signature.canCancel && (
-          <Button
-            variant="danger"
-            className="ml-auto"
-            disabled={isCancellingSignature}
-            onClick={() => {
-              cancelSignature({
-                variables: {
-                  input: {
-                    documentVersionSignatureId: signature.id,
-                  },
-                  connections: [props.connectionId],
-                },
-              });
-            }}
-          >
-            {__("Cancel request")}
-          </Button>
-        )
-      )}
+      {isSigned
+        ? (
+            <Badge variant="success" className="ml-auto">
+              {__("Signed")}
+            </Badge>
+          )
+        : (
+            signature.canCancel && (
+              <Button
+                variant="danger"
+                className="ml-auto"
+                disabled={isCancellingSignature}
+                onClick={() => {
+                  void cancelSignature({
+                    variables: {
+                      input: {
+                        documentVersionSignatureId: signature.id,
+                      },
+                      connections: [props.connectionId],
+                    },
+                  });
+                }}
+              >
+                {__("Cancel request")}
+              </Button>
+            )
+          )}
     </div>
   );
 }
diff --git a/apps/console/src/pages/organizations/employee/EmployeeDocumentSignaturePage.tsx b/apps/console/src/pages/organizations/employee/EmployeeDocumentSignaturePage.tsx
index 1a2bdb6cd..a2a3b624e 100644
--- a/apps/console/src/pages/organizations/employee/EmployeeDocumentSignaturePage.tsx
+++ b/apps/console/src/pages/organizations/employee/EmployeeDocumentSignaturePage.tsx
@@ -107,8 +107,8 @@ function DocumentSignatureContent({
   const isDesktop = !isMobile;
   const organizationId = useOrganizationId();
 
-  const documentData =
-    useFragment<EmployeeDocumentSignaturePageDocumentFragment$key>(
+  const documentData
+    = useFragment<EmployeeDocumentSignaturePageDocumentFragment$key>(
       documentFragment,
       fKey,
     );
@@ -119,25 +119,25 @@ function DocumentSignatureContent({
     string | undefined
   >(() => versions[0]?.id);
 
-  const selectedVersion = versions.find((v) => v?.id === selectedVersionId);
+  const selectedVersion = versions.find(v => v?.id === selectedVersionId);
 
   usePageTitle(__("Sign Document"));
   const { toast } = useToast();
 
-  const [signDocument, isSigning] =
-    useMutation<EmployeeDocumentSignaturePageSignMutation>(
+  const [signDocument, isSigning]
+    = useMutation<EmployeeDocumentSignaturePageSignMutation>(
       signDocumentMutation,
     );
 
-  const [exportSignableVersionDocumentPDF] =
-    useMutation<EmployeeDocumentSignaturePageExportSignablePDFMutation>(
+  const [exportSignableVersionDocumentPDF]
+    = useMutation<EmployeeDocumentSignaturePageExportSignablePDFMutation>(
       exportSignableVersionDocumentPDFMutation,
     );
 
   const [pdfUrl, setPdfUrl] = useState<string | null>(null);
   const pdfUrlRef = useRef<string | null>(null);
 
-  const handleSign = async (versionId: string) => {
+  const handleSign = (versionId: string) => {
     signDocument({
       variables: {
         input: {
@@ -157,7 +157,7 @@ function DocumentSignatureContent({
           description: __("Document signed successfully"),
           variant: "success",
         });
-        navigate(`/organizations/${organizationId}/employee`);
+        void navigate(`/organizations/${organizationId}/employee`);
       },
       onError: (error) => {
         toast({
@@ -247,16 +247,17 @@ function DocumentSignatureContent({
           </p>
 
           <div className="min-h-[60px]">
-            {selectedVersion ? (
-              <VersionActions
-                fKey={selectedVersion}
-                isSigning={isSigning}
-                onSign={handleSign}
-                onBack={() =>
-                  navigate(`/organizations/${organizationId}/employee`)
-                }
-              />
-            ) : null}
+            {selectedVersion
+              ? (
+                  <VersionActions
+                    fKey={selectedVersion}
+                    isSigning={isSigning}
+                    onSign={handleSign}
+                    onBack={() =>
+                      void navigate(`/organizations/${organizationId}/employee`)}
+                  />
+                )
+              : null}
           </div>
         </div>
 
diff --git a/apps/console/src/pages/organizations/employee/EmployeeDocumentSignaturePageLoader.tsx b/apps/console/src/pages/organizations/employee/EmployeeDocumentSignaturePageLoader.tsx
index 081ef431d..013dcda9f 100644
--- a/apps/console/src/pages/organizations/employee/EmployeeDocumentSignaturePageLoader.tsx
+++ b/apps/console/src/pages/organizations/employee/EmployeeDocumentSignaturePageLoader.tsx
@@ -11,8 +11,8 @@ import { CoreRelayProvider } from "/providers/CoreRelayProvider";
 
 function EmployeeDocumentSignaturePageLoader() {
   const { documentId } = useParams();
-  const [queryRef, loadQuery] =
-    useQueryLoader<EmployeeDocumentSignaturePageQuery>(
+  const [queryRef, loadQuery]
+    = useQueryLoader<EmployeeDocumentSignaturePageQuery>(
       employeeDocumentSignaturePageQuery,
     );
 
diff --git a/apps/console/src/pages/organizations/employee/EmployeeDocumentsPage.tsx b/apps/console/src/pages/organizations/employee/EmployeeDocumentsPage.tsx
index 78ede0a9f..4e2d91893 100644
--- a/apps/console/src/pages/organizations/employee/EmployeeDocumentsPage.tsx
+++ b/apps/console/src/pages/organizations/employee/EmployeeDocumentsPage.tsx
@@ -39,48 +39,50 @@ export function EmployeeDocumentsPage(props: {
     queryRef,
   );
 
-  const documents = signableDocuments.edges.map((edge) => edge.node);
+  const documents = signableDocuments.edges.map(edge => edge.node);
 
   usePageTitle(__("Documents"));
 
   return (
     <div className="space-y-6">
       <PageHeader title={__("Documents")} />
-      {documents.length > 0 ? (
-        <Card>
-          <table className="w-full">
-            <Thead>
-              <Tr>
-                <Th className="min-w-0 pr-12">{__("Name")}</Th>
-                <Th className="w-48">{__("Type")}</Th>
-                <Th className="w-36">{__("Classification")}</Th>
-                <Th className="w-40">{__("Last update")}</Th>
-                <Th className="w-32">{__("Signed")}</Th>
-              </Tr>
-            </Thead>
-            <Tbody>
-              {documents.map((document) => (
-                <DocumentRow
-                  key={document.id}
-                  fKey={document}
-                  organizationId={organizationId}
-                />
-              ))}
-            </Tbody>
-          </table>
-        </Card>
-      ) : (
-        <Card padded>
-          <div className="text-center py-12">
-            <h3 className="text-lg font-semibold mb-2">
-              {__("No documents yet")}
-            </h3>
-            <p className="text-txt-tertiary mb-4">
-              {__("No documents have been requested for your signature.")}
-            </p>
-          </div>
-        </Card>
-      )}
+      {documents.length > 0
+        ? (
+            <Card>
+              <table className="w-full">
+                <Thead>
+                  <Tr>
+                    <Th className="min-w-0 pr-12">{__("Name")}</Th>
+                    <Th className="w-48">{__("Type")}</Th>
+                    <Th className="w-36">{__("Classification")}</Th>
+                    <Th className="w-40">{__("Last update")}</Th>
+                    <Th className="w-32">{__("Signed")}</Th>
+                  </Tr>
+                </Thead>
+                <Tbody>
+                  {documents.map(document => (
+                    <DocumentRow
+                      key={document.id}
+                      fKey={document}
+                      organizationId={organizationId}
+                    />
+                  ))}
+                </Tbody>
+              </table>
+            </Card>
+          )
+        : (
+            <Card padded>
+              <div className="text-center py-12">
+                <h3 className="text-lg font-semibold mb-2">
+                  {__("No documents yet")}
+                </h3>
+                <p className="text-txt-tertiary mb-4">
+                  {__("No documents have been requested for your signature.")}
+                </p>
+              </div>
+            </Card>
+          )}
     </div>
   );
 }
diff --git a/apps/console/src/pages/organizations/employee/_components/VersionRow.tsx b/apps/console/src/pages/organizations/employee/_components/VersionRow.tsx
index 2f3df5173..086f1d823 100644
--- a/apps/console/src/pages/organizations/employee/_components/VersionRow.tsx
+++ b/apps/console/src/pages/organizations/employee/_components/VersionRow.tsx
@@ -38,11 +38,13 @@ export function VersionRow({
       )}
     >
       <div className="flex items-center justify-center w-8 h-8 rounded-full bg-level-2 flex-shrink-0">
-        {isVersionSigned ? (
-          <IconCircleCheck size={20} className="text-txt-success" />
-        ) : (
-          <IconRadioUnchecked size={20} className="text-txt-tertiary" />
-        )}
+        {isVersionSigned
+          ? (
+              <IconCircleCheck size={20} className="text-txt-success" />
+            )
+          : (
+              <IconRadioUnchecked size={20} className="text-txt-tertiary" />
+            )}
       </div>
       <div className="flex-1 min-w-0">
         <p
@@ -53,12 +55,12 @@ export function VersionRow({
         >
           {versionData.publishedAt
             ? `v${versionData.version} - ${(() => {
-                const date = new Date(versionData.publishedAt);
-                const day = String(date.getDate()).padStart(2, "0");
-                const month = String(date.getMonth() + 1).padStart(2, "0");
-                const year = date.getFullYear();
-                return `${day}/${month}/${year}`;
-              })()}`
+              const date = new Date(versionData.publishedAt);
+              const day = String(date.getDate()).padStart(2, "0");
+              const month = String(date.getMonth() + 1).padStart(2, "0");
+              const year = date.getFullYear();
+              return `${day}/${month}/${year}`;
+            })()}`
             : `v${versionData.version}`}
         </p>
       </div>
diff --git a/apps/console/src/pages/organizations/frameworks/FrameworkControlPage.tsx b/apps/console/src/pages/organizations/frameworks/FrameworkControlPage.tsx
index 5f82875c6..daa8cdba5 100644
--- a/apps/console/src/pages/organizations/frameworks/FrameworkControlPage.tsx
+++ b/apps/console/src/pages/organizations/frameworks/FrameworkControlPage.tsx
@@ -1,18 +1,18 @@
 import {
-    useMutation,
-    usePreloadedQuery,
-    type PreloadedQuery,
-    type UseMutationConfig,
+  useMutation,
+  usePreloadedQuery,
+  type PreloadedQuery,
+  type UseMutationConfig,
 } from "react-relay";
 import { graphql, type MutationParameters } from "relay-runtime";
 import {
-    ActionDropdown,
-    Button,
-    DropdownItem,
-    IconPencil,
-    IconTrashCan,
-    useConfirm,
-    useToast,
+  ActionDropdown,
+  Button,
+  DropdownItem,
+  IconPencil,
+  IconTrashCan,
+  useConfirm,
+  useToast,
 } from "@probo/ui";
 import { useTranslate } from "@probo/i18n";
 import { formatError, type GraphQLError } from "@probo/helpers";
@@ -208,326 +208,327 @@ const deleteControlMutation = graphql`
 `;
 
 type Props = {
-    queryRef: PreloadedQuery<FrameworkGraphControlNodeQuery>;
+  queryRef: PreloadedQuery<FrameworkGraphControlNodeQuery>;
 };
 
 /**
  * Display the control detail on the right panel
  */
 export default function FrameworkControlPage({ queryRef }: Props) {
-    const { __ } = useTranslate();
-    const { toast } = useToast();
-    const { framework } = useOutletContext<{
-        framework: FrameworkDetailPageFragment$data;
-    }>();
-    const connectionId = framework.controls.__id;
-    const control = usePreloadedQuery(frameworkControlNodeQuery, queryRef).node;
-    const organizationId = useOrganizationId();
-    const confirm = useConfirm();
-    const navigate = useNavigate();
-    const [detachMeasure, isDetachingMeasure] = useMutation(
-        detachMeasureMutation,
-    );
-    const [attachMeasure, isAttachingMeasure] = useMutation(
-        attachMeasureMutation,
-    );
-    const [detachDocument, isDetachingDocument] = useMutation(
-        detachDocumentMutation,
-    );
-    const [attachDocument, isAttachingDocument] = useMutation(
-        attachDocumentMutation,
-    );
-    const [detachAudit, isDetachingAudit] = useMutation(detachAuditMutation);
-    const [attachAudit, isAttachingAudit] = useMutation(attachAuditMutation);
-    const [detachSnapshot, isDetachingSnapshot] = useMutation(
-        detachSnapshotMutation,
-    );
-    const [attachSnapshot, isAttachingSnapshot] = useMutation(
-        attachSnapshotMutation,
-    );
-    const [deleteControl] = useMutation(deleteControlMutation);
+  const { __ } = useTranslate();
+  const { toast } = useToast();
+  const { framework } = useOutletContext<{
+    framework: FrameworkDetailPageFragment$data;
+  }>();
+  const connectionId = framework.controls.__id;
+  const control = usePreloadedQuery(frameworkControlNodeQuery, queryRef).node;
+  const organizationId = useOrganizationId();
+  const confirm = useConfirm();
+  const navigate = useNavigate();
+  const [detachMeasure, isDetachingMeasure] = useMutation(
+    detachMeasureMutation,
+  );
+  const [attachMeasure, isAttachingMeasure] = useMutation(
+    attachMeasureMutation,
+  );
+  const [detachDocument, isDetachingDocument] = useMutation(
+    detachDocumentMutation,
+  );
+  const [attachDocument, isAttachingDocument] = useMutation(
+    attachDocumentMutation,
+  );
+  const [detachAudit, isDetachingAudit] = useMutation(detachAuditMutation);
+  const [attachAudit, isAttachingAudit] = useMutation(attachAuditMutation);
+  const [detachSnapshot, isDetachingSnapshot] = useMutation(
+    detachSnapshotMutation,
+  );
+  const [attachSnapshot, isAttachingSnapshot] = useMutation(
+    attachSnapshotMutation,
+  );
+  const [deleteControl] = useMutation(deleteControlMutation);
 
-    const [attachStateOfApplicability, isAttachingStateOfApplicability] =
-        useMutation(attachStateOfApplicabilityMutation);
-    const [detachStateOfApplicability, isDetachingStateOfApplicability] =
-        useMutation(detachStateOfApplicabilityMutation);
-    const [attachObligation, isAttachingObligation] = useMutation(
-        attachObligationMutation,
-    );
-    const [detachObligation, isDetachingObligation] = useMutation(
-        detachObligationMutation,
-    );
+  const [attachStateOfApplicability, isAttachingStateOfApplicability]
+    = useMutation(attachStateOfApplicabilityMutation);
+  const [detachStateOfApplicability, isDetachingStateOfApplicability]
+    = useMutation(detachStateOfApplicabilityMutation);
+  const [attachObligation, isAttachingObligation] = useMutation(
+    attachObligationMutation,
+  );
+  const [detachObligation, isDetachingObligation] = useMutation(
+    detachObligationMutation,
+  );
 
-    const canLinkStateOfApplicability =
-        control.canCreateStateOfApplicabilityMapping;
-    const canUnlinkStateOfApplicability =
-        control.canDeleteStateOfApplicabilityMapping;
-    const statesOfApplicabilityReadOnly =
-        !canLinkStateOfApplicability && !canUnlinkStateOfApplicability;
+  const canLinkStateOfApplicability
+    = control.canCreateStateOfApplicabilityMapping;
+  const canUnlinkStateOfApplicability
+    = control.canDeleteStateOfApplicabilityMapping;
+  const statesOfApplicabilityReadOnly
+    = !canLinkStateOfApplicability && !canUnlinkStateOfApplicability;
 
-    const canLinkMeasure = control.canCreateMeasureMapping;
-    const canUnlinkMeasure = control.canDeleteMeasureMapping;
-    const measuresReadOnly = !canLinkMeasure && !canUnlinkMeasure;
+  const canLinkMeasure = control.canCreateMeasureMapping;
+  const canUnlinkMeasure = control.canDeleteMeasureMapping;
+  const measuresReadOnly = !canLinkMeasure && !canUnlinkMeasure;
 
-    const canLinkDocument = control.canCreateDocumentMapping;
-    const canUnlinkDocument = control.canDeleteDocumentMapping;
-    const documentsReadOnly = !canLinkDocument && !canUnlinkDocument;
+  const canLinkDocument = control.canCreateDocumentMapping;
+  const canUnlinkDocument = control.canDeleteDocumentMapping;
+  const documentsReadOnly = !canLinkDocument && !canUnlinkDocument;
 
-    const canLinkAudit = control.canCreateAuditMapping;
-    const canUnlinkAudit = control.canDeleteAuditMapping;
-    const auditsReadOnly = !canLinkAudit && !canUnlinkAudit;
+  const canLinkAudit = control.canCreateAuditMapping;
+  const canUnlinkAudit = control.canDeleteAuditMapping;
+  const auditsReadOnly = !canLinkAudit && !canUnlinkAudit;
 
-    const canLinkSnapshot = control.canCreateSnapshotMapping;
-    const canUnlinkSnapshot = control.canDeleteSnapshotMapping;
-    const snapshotsReadOnly = !canLinkSnapshot && !canUnlinkSnapshot;
+  const canLinkSnapshot = control.canCreateSnapshotMapping;
+  const canUnlinkSnapshot = control.canDeleteSnapshotMapping;
+  const snapshotsReadOnly = !canLinkSnapshot && !canUnlinkSnapshot;
 
-    const canLinkObligation = control.canCreateObligationMapping;
-    const canUnlinkObligation = control.canDeleteObligationMapping;
-    const obligationsReadOnly = !canLinkObligation && !canUnlinkObligation;
+  const canLinkObligation = control.canCreateObligationMapping;
+  const canUnlinkObligation = control.canDeleteObligationMapping;
+  const obligationsReadOnly = !canLinkObligation && !canUnlinkObligation;
 
-    const withErrorHandling =
-        <T extends MutationParameters>(
-            mutationFn: (config: UseMutationConfig<T>) => void,
-            errorMessage: string,
-        ) =>
-        (options: UseMutationConfig<T>) => {
-            mutationFn({
-                ...options,
-                onCompleted: (response, error) => {
-                    if (error) {
-                        toast({
-                            title: __("Error"),
-                            description: formatError(
-                                errorMessage,
-                                error as GraphQLError,
-                            ),
-                            variant: "error",
-                        });
-                    }
-                    options.onCompleted?.(response, error);
-                },
-                onError: (error) => {
-                    toast({
-                        title: __("Error"),
-                        description: formatError(
-                            errorMessage,
-                            error as GraphQLError,
-                        ),
-                        variant: "error",
-                    });
-                    options.onError?.(error);
-                },
+  const withErrorHandling
+    = <T extends MutationParameters>(
+      mutationFn: (config: UseMutationConfig<T>) => void,
+      errorMessage: string,
+    ) =>
+      (options: UseMutationConfig<T>) => {
+        mutationFn({
+          ...options,
+          onCompleted: (response, error) => {
+            if (error) {
+              toast({
+                title: __("Error"),
+                description: formatError(
+                  errorMessage,
+                  error as GraphQLError,
+                ),
+                variant: "error",
+              });
+            }
+            options.onCompleted?.(response, error);
+          },
+          onError: (error) => {
+            toast({
+              title: __("Error"),
+              description: formatError(
+                errorMessage,
+                error as GraphQLError,
+              ),
+              variant: "error",
             });
-        };
+            options.onError?.(error);
+          },
+        });
+      };
 
-    const onDelete = () => {
-        confirm(
-            () => {
-                return promisifyMutation(deleteControl)({
-                    variables: {
-                        input: {
-                            controlId: control.id,
-                        },
-                        connections: [connectionId],
-                    },
-                    onCompleted: () => {
-                        navigate(
-                            `/organizations/${organizationId}/frameworks/${framework.id}`,
-                        );
-                    },
-                });
+  const onDelete = () => {
+    confirm(
+      () => {
+        return promisifyMutation(deleteControl)({
+          variables: {
+            input: {
+              controlId: control.id,
             },
-            {
-                message: __("Are you sure you want to delete this control?"),
-            },
-        );
-    };
-
-    return (
-        <div className="space-y-6">
-            <div className="flex justify-between">
-                <div className="flex items-center gap-3">
-                    <div className="text-xl font-medium px-[6px] py-[2px] border border-border-low rounded-lg w-max bg-active mb-3">
-                        {control.sectionTitle}
-                    </div>
-                </div>
-                <div className="flex gap-2">
-                    {control.canUpdate && (
-                        <FrameworkControlDialog
-                            frameworkId={framework.id}
-                            connectionId={connectionId}
-                            control={control}
-                        >
-                            <Button icon={IconPencil} variant="secondary">
-                                {__("Edit control")}
-                            </Button>
-                        </FrameworkControlDialog>
-                    )}
-                    {control.canDelete && (
-                        <ActionDropdown variant="secondary">
-                            <DropdownItem
-                                icon={IconTrashCan}
-                                variant="danger"
-                                onClick={onDelete}
-                            >
-                                {__("Delete")}
-                            </DropdownItem>
-                        </ActionDropdown>
-                    )}
-                </div>
-            </div>
-
-            {control.status === "EXCLUDED" && (
-                <div className="bg-danger border border-border-danger rounded-lg p-4">
-                    <div className="flex items-center gap-2 mb-2">
-                        <div className="font-medium text-txt-danger">
-                            {__("This control is excluded")}
-                        </div>
-                    </div>
-                    <div className="text-sm">
-                        <strong>{__("Justification:")}</strong>{" "}
-                        {control.exclusionJustification ||
-                            __("No justification provided")}
-                    </div>
-                </div>
-            )}
-            <div className={control.status === "EXCLUDED" ? "opacity-60" : ""}>
-                <div className="text-base mb-4">{control.name}</div>
-                <div className="mb-4">
-                    <LinkedStatesOfApplicabilityCard
-                        variant="card"
-                        statesOfApplicability={
-                            control.stateOfApplicabilityControls?.edges.map(
-                                (edge) => edge.node,
-                            ) ?? []
-                        }
-                        params={{ controlId: control.id }}
-                        connectionId={
-                            control.stateOfApplicabilityControls?.__id ?? ""
-                        }
-                        onAttach={withErrorHandling(
-                            attachStateOfApplicability,
-                            __("Failed to link state of applicability"),
-                        )}
-                        onDetach={withErrorHandling(
-                            detachStateOfApplicability,
-                            __("Failed to unlink state of applicability"),
-                        )}
-                        disabled={
-                            isAttachingStateOfApplicability ||
-                            isDetachingStateOfApplicability
-                        }
-                        readOnly={statesOfApplicabilityReadOnly}
-                    />
-                </div>
-                <div className="mb-4">
-                    <LinkedMeasuresCard
-                        variant="card"
-                        measures={
-                            control.measures?.edges.map((edge) => edge.node) ??
-                            []
-                        }
-                        params={{ controlId: control.id }}
-                        connectionId={control.measures?.__id ?? ""}
-                        onAttach={withErrorHandling(
-                            attachMeasure,
-                            __("Failed to link measure"),
-                        )}
-                        onDetach={withErrorHandling(
-                            detachMeasure,
-                            __("Failed to unlink measure"),
-                        )}
-                        disabled={isAttachingMeasure || isDetachingMeasure}
-                        readOnly={measuresReadOnly}
-                    />
-                </div>
-                <div className="mb-4">
-                    <LinkedDocumentsCard
-                        variant="card"
-                        documents={
-                            control.documents?.edges.map((edge) => edge.node) ??
-                            []
-                        }
-                        params={{ controlId: control.id }}
-                        connectionId={control.documents?.__id ?? ""}
-                        onAttach={withErrorHandling(
-                            attachDocument,
-                            __("Failed to link document"),
-                        )}
-                        onDetach={withErrorHandling(
-                            detachDocument,
-                            __("Failed to unlink document"),
-                        )}
-                        disabled={isAttachingDocument || isDetachingDocument}
-                        readOnly={documentsReadOnly}
-                    />
-                </div>
-                <div className="mb-4">
-                    <LinkedAuditsCard
-                        variant="card"
-                        audits={
-                            control.audits?.edges.map((edge) => edge.node) ?? []
-                        }
-                        params={{ controlId: control.id }}
-                        connectionId={control.audits?.__id ?? ""}
-                        onAttach={withErrorHandling(
-                            attachAudit,
-                            __("Failed to link audit"),
-                        )}
-                        onDetach={withErrorHandling(
-                            detachAudit,
-                            __("Failed to unlink audit"),
-                        )}
-                        disabled={isAttachingAudit || isDetachingAudit}
-                        readOnly={auditsReadOnly}
-                    />
-                </div>
-                <div className="mb-4">
-                    <LinkedObligationsCard
-                        variant="card"
-                        obligations={
-                            control.obligations?.edges.map(
-                                (edge) => edge.node,
-                            ) ?? []
-                        }
-                        params={{ controlId: control.id }}
-                        connectionId={control.obligations?.__id ?? ""}
-                        onAttach={withErrorHandling(
-                            attachObligation,
-                            __("Failed to link obligation"),
-                        )}
-                        onDetach={withErrorHandling(
-                            detachObligation,
-                            __("Failed to unlink obligation"),
-                        )}
-                        disabled={
-                            isAttachingObligation || isDetachingObligation
-                        }
-                        readOnly={obligationsReadOnly}
-                    />
-                </div>
-                <div className="mb-4">
-                    <LinkedSnapshotsCard
-                        variant="card"
-                        snapshots={
-                            control.snapshots?.edges.map((edge) => edge.node) ??
-                            []
-                        }
-                        params={{ controlId: control.id }}
-                        connectionId={control.snapshots?.__id ?? ""}
-                        onAttach={withErrorHandling(
-                            attachSnapshot,
-                            __("Failed to link snapshot"),
-                        )}
-                        onDetach={withErrorHandling(
-                            detachSnapshot,
-                            __("Failed to unlink snapshot"),
-                        )}
-                        disabled={isAttachingSnapshot || isDetachingSnapshot}
-                        readOnly={snapshotsReadOnly}
-                    />
-                </div>
-            </div>
-        </div>
+            connections: [connectionId],
+          },
+          onCompleted: () => {
+            void navigate(
+              `/organizations/${organizationId}/frameworks/${framework.id}`,
+            );
+          },
+        });
+      },
+      {
+        message: __("Are you sure you want to delete this control?"),
+      },
     );
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="flex justify-between">
+        <div className="flex items-center gap-3">
+          <div className="text-xl font-medium px-[6px] py-[2px] border border-border-low rounded-lg w-max bg-active mb-3">
+            {control.sectionTitle}
+          </div>
+        </div>
+        <div className="flex gap-2">
+          {control.canUpdate && (
+            <FrameworkControlDialog
+              frameworkId={framework.id}
+              connectionId={connectionId}
+              control={control}
+            >
+              <Button icon={IconPencil} variant="secondary">
+                {__("Edit control")}
+              </Button>
+            </FrameworkControlDialog>
+          )}
+          {control.canDelete && (
+            <ActionDropdown variant="secondary">
+              <DropdownItem
+                icon={IconTrashCan}
+                variant="danger"
+                onClick={onDelete}
+              >
+                {__("Delete")}
+              </DropdownItem>
+            </ActionDropdown>
+          )}
+        </div>
+      </div>
+
+      {control.status === "EXCLUDED" && (
+        <div className="bg-danger border border-border-danger rounded-lg p-4">
+          <div className="flex items-center gap-2 mb-2">
+            <div className="font-medium text-txt-danger">
+              {__("This control is excluded")}
+            </div>
+          </div>
+          <div className="text-sm">
+            <strong>{__("Justification:")}</strong>
+            {" "}
+            {control.exclusionJustification
+              || __("No justification provided")}
+          </div>
+        </div>
+      )}
+      <div className={control.status === "EXCLUDED" ? "opacity-60" : ""}>
+        <div className="text-base mb-4">{control.name}</div>
+        <div className="mb-4">
+          <LinkedStatesOfApplicabilityCard
+            variant="card"
+            statesOfApplicability={
+              control.stateOfApplicabilityControls?.edges.map(
+                edge => edge.node,
+              ) ?? []
+            }
+            params={{ controlId: control.id }}
+            connectionId={
+              control.stateOfApplicabilityControls?.__id ?? ""
+            }
+            onAttach={withErrorHandling(
+              attachStateOfApplicability,
+              __("Failed to link state of applicability"),
+            )}
+            onDetach={withErrorHandling(
+              detachStateOfApplicability,
+              __("Failed to unlink state of applicability"),
+            )}
+            disabled={
+              isAttachingStateOfApplicability
+              || isDetachingStateOfApplicability
+            }
+            readOnly={statesOfApplicabilityReadOnly}
+          />
+        </div>
+        <div className="mb-4">
+          <LinkedMeasuresCard
+            variant="card"
+            measures={
+              control.measures?.edges.map(edge => edge.node)
+              ?? []
+            }
+            params={{ controlId: control.id }}
+            connectionId={control.measures?.__id ?? ""}
+            onAttach={withErrorHandling(
+              attachMeasure,
+              __("Failed to link measure"),
+            )}
+            onDetach={withErrorHandling(
+              detachMeasure,
+              __("Failed to unlink measure"),
+            )}
+            disabled={isAttachingMeasure || isDetachingMeasure}
+            readOnly={measuresReadOnly}
+          />
+        </div>
+        <div className="mb-4">
+          <LinkedDocumentsCard
+            variant="card"
+            documents={
+              control.documents?.edges.map(edge => edge.node)
+              ?? []
+            }
+            params={{ controlId: control.id }}
+            connectionId={control.documents?.__id ?? ""}
+            onAttach={withErrorHandling(
+              attachDocument,
+              __("Failed to link document"),
+            )}
+            onDetach={withErrorHandling(
+              detachDocument,
+              __("Failed to unlink document"),
+            )}
+            disabled={isAttachingDocument || isDetachingDocument}
+            readOnly={documentsReadOnly}
+          />
+        </div>
+        <div className="mb-4">
+          <LinkedAuditsCard
+            variant="card"
+            audits={
+              control.audits?.edges.map(edge => edge.node) ?? []
+            }
+            params={{ controlId: control.id }}
+            connectionId={control.audits?.__id ?? ""}
+            onAttach={withErrorHandling(
+              attachAudit,
+              __("Failed to link audit"),
+            )}
+            onDetach={withErrorHandling(
+              detachAudit,
+              __("Failed to unlink audit"),
+            )}
+            disabled={isAttachingAudit || isDetachingAudit}
+            readOnly={auditsReadOnly}
+          />
+        </div>
+        <div className="mb-4">
+          <LinkedObligationsCard
+            variant="card"
+            obligations={
+              control.obligations?.edges.map(
+                edge => edge.node,
+              ) ?? []
+            }
+            params={{ controlId: control.id }}
+            connectionId={control.obligations?.__id ?? ""}
+            onAttach={withErrorHandling(
+              attachObligation,
+              __("Failed to link obligation"),
+            )}
+            onDetach={withErrorHandling(
+              detachObligation,
+              __("Failed to unlink obligation"),
+            )}
+            disabled={
+              isAttachingObligation || isDetachingObligation
+            }
+            readOnly={obligationsReadOnly}
+          />
+        </div>
+        <div className="mb-4">
+          <LinkedSnapshotsCard
+            variant="card"
+            snapshots={
+              control.snapshots?.edges.map(edge => edge.node)
+              ?? []
+            }
+            params={{ controlId: control.id }}
+            connectionId={control.snapshots?.__id ?? ""}
+            onAttach={withErrorHandling(
+              attachSnapshot,
+              __("Failed to link snapshot"),
+            )}
+            onDetach={withErrorHandling(
+              detachSnapshot,
+              __("Failed to unlink snapshot"),
+            )}
+            disabled={isAttachingSnapshot || isDetachingSnapshot}
+            readOnly={snapshotsReadOnly}
+          />
+        </div>
+      </div>
+    </div>
+  );
 }
diff --git a/apps/console/src/pages/organizations/frameworks/FrameworkDetailPage.tsx b/apps/console/src/pages/organizations/frameworks/FrameworkDetailPage.tsx
index 3e418238d..ddd9e15bd 100644
--- a/apps/console/src/pages/organizations/frameworks/FrameworkDetailPage.tsx
+++ b/apps/console/src/pages/organizations/frameworks/FrameworkDetailPage.tsx
@@ -1,25 +1,25 @@
 import {
-    useFragment,
-    usePreloadedQuery,
-    type PreloadedQuery,
+  useFragment,
+  usePreloadedQuery,
+  type PreloadedQuery,
 } from "react-relay";
 import { usePageTitle } from "@probo/hooks";
 import { ConnectionHandler, graphql } from "relay-runtime";
 import {
-    ActionDropdown,
-    Button,
-    ControlItem,
-    DropdownItem,
-    FrameworkLogo,
-    IconPencil,
-    IconPlusLarge,
-    IconTrashCan,
-    PageHeader,
+  ActionDropdown,
+  Button,
+  ControlItem,
+  DropdownItem,
+  FrameworkLogo,
+  IconPencil,
+  IconPlusLarge,
+  IconTrashCan,
+  PageHeader,
 } from "@probo/ui";
 import {
-    connectionListKey,
-    frameworkNodeQuery,
-    useDeleteFrameworkMutation,
+  connectionListKey,
+  frameworkNodeQuery,
+  useDeleteFrameworkMutation,
 } from "/hooks/graph/FrameworkGraph";
 import { useTranslate } from "@probo/i18n";
 import { Navigate, Outlet, useNavigate, useParams } from "react-router";
@@ -87,182 +87,184 @@ const exportFrameworkMutation = graphql`
 `;
 
 type Props = {
-    queryRef: PreloadedQuery<FrameworkGraphNodeQuery>;
+  queryRef: PreloadedQuery<FrameworkGraphNodeQuery>;
 };
 
 export default function FrameworkDetailPage(props: Props) {
-    const { queryRef } = props;
+  const { queryRef } = props;
 
-    const { __ } = useTranslate();
-    const { controlId } = useParams<{ controlId?: string }>();
-    const organizationId = useOrganizationId();
-    const data = usePreloadedQuery<FrameworkGraphNodeQuery>(
-        frameworkNodeQuery,
-        queryRef,
-    );
-    const framework = useFragment<FrameworkDetailPageFragment$key>(
-        frameworkDetailFragment,
-        data.node,
-    );
-    const navigate = useNavigate();
-    const controls = framework.controls.edges.map((edge) => edge.node);
-    const selectedControl = controlId
-        ? controls.find((control) => control.id === controlId)
-        : controls[0] || null;
-    const connectionId = framework.controls.__id;
-    const deleteFramework = useDeleteFrameworkMutation(
-        framework,
-        ConnectionHandler.getConnectionID(organizationId, connectionListKey)!,
-    );
-    const [generateFrameworkStateOfApplicability] =
-        useMutationWithToasts<FrameworkDetailPageGenerateFrameworkStateOfApplicabilityMutation>(
-            generateFrameworkStateOfApplicabilityMutation,
-            {
-                errorMessage:
+  const { __ } = useTranslate();
+  const { controlId } = useParams<{ controlId?: string }>();
+  const organizationId = useOrganizationId();
+  const data = usePreloadedQuery<FrameworkGraphNodeQuery>(
+    frameworkNodeQuery,
+    queryRef,
+  );
+  const framework = useFragment<FrameworkDetailPageFragment$key>(
+    frameworkDetailFragment,
+    data.node,
+  );
+  const navigate = useNavigate();
+  const controls = framework.controls.edges.map(edge => edge.node);
+  const selectedControl = controlId
+    ? controls.find(control => control.id === controlId)
+    : controls[0] || null;
+  const connectionId = framework.controls.__id;
+  const deleteFramework = useDeleteFrameworkMutation(
+    framework,
+    ConnectionHandler.getConnectionID(organizationId, connectionListKey),
+  );
+  const [generateFrameworkStateOfApplicability]
+    = useMutationWithToasts<FrameworkDetailPageGenerateFrameworkStateOfApplicabilityMutation>(
+      generateFrameworkStateOfApplicabilityMutation,
+      {
+        errorMessage:
                     "Failed to generate framework state of applicability",
-                successMessage:
+        successMessage:
                     "Framework state of applicability generated successfully",
-            },
-        );
-
-    const [exportFramework] =
-        useMutationWithToasts<FrameworkDetailPageExportFrameworkMutation>(
-            exportFrameworkMutation,
-            {
-                errorMessage: "Failed to export framework",
-                successMessage:
-                    "Framework export started successfully. You will receive an email when the export is ready.",
-            },
-        );
-
-    usePageTitle(`${framework.name} | ${selectedControl?.sectionTitle}`);
-    const onDelete = () => {
-        deleteFramework({
-            onSuccess: () => {
-                navigate(`/organizations/${organizationId}/frameworks`);
-            },
-        });
-    };
-
-    if (!controlId && controls.length > 0) {
-        return (
-            <Navigate
-                to={`/organizations/${organizationId}/frameworks/${framework.id}/controls/${controls[0].id}`}
-            />
-        );
-    }
-
-    const hasAnyAction = framework.canExport || framework.canDelete || framework.canGenerateSOA
-
-    return (
-        <div className="space-y-6">
-            <PageHeader
-                title={
-                    <>
-                        <FrameworkLogo {...framework} />
-                        {framework.name}
-                    </>
-                }
-            >
-                {framework.canUpdate && (
-                    <FrameworkFormDialog
-                        organizationId={organizationId}
-                        framework={framework}
-                    >
-                        <Button icon={IconPencil} variant="secondary">
-                            {__("Edit")}
-                        </Button>
-                    </FrameworkFormDialog>
-                )}
-                {hasAnyAction && (
-                    <ActionDropdown variant="secondary">
-                        {framework.canGenerateSOA &&
-                            <DropdownItem
-                                variant="primary"
-                                onClick={() => {
-                                    generateFrameworkStateOfApplicability({
-                                        variables: { frameworkId: framework.id },
-                                        onCompleted: (data) => {
-                                            if (
-                                                data
-                                                    .generateFrameworkStateOfApplicability
-                                                    ?.data
-                                            ) {
-                                                const link =
-                                                    window.document.createElement("a");
-                                                link.href =
-                                                    data.generateFrameworkStateOfApplicability.data;
-                                                link.download = `${framework.organization.name}-${framework.name}-SOA.xlsx`;
-                                                window.document.body.appendChild(link);
-                                                link.click();
-                                                window.document.body.removeChild(link);
-                                            }
-                                        },
-                                    });
-                                }}
-                            >
-                                {__("Download SOA")}
-                            </DropdownItem>
-                        }
-                        {framework.canExport &&
-                            <DropdownItem
-                                variant="primary"
-                                onClick={() => {
-                                    exportFramework({
-                                        variables: { frameworkId: framework.id },
-                                    });
-                                }}
-                            >
-                                {__("Export Framework")}
-                            </DropdownItem>
-                        }
-                        {framework.canDelete && (
-                            <DropdownItem
-                                icon={IconTrashCan}
-                                variant="danger"
-                                onClick={onDelete}
-                            >
-                                {__("Delete")}
-                            </DropdownItem>
-                        )}
-                    </ActionDropdown>
-                )}
-            </PageHeader>
-            <div className="text-lg font-semibold">
-                {__("Requirement categories")}
-            </div>
-            <div className="divide-x divide-border-low grid grid-cols-[264px_1fr]">
-                <div
-                    className="space-y-1 overflow-y-auto pr-6 mr-6 sticky top-0"
-                    style={{ maxHeight: "calc(100vh - 48px)" }}
-                >
-                    {controls.map((control) => (
-                        <ControlItem
-                            key={control.id}
-                            id={control.sectionTitle}
-                            description={control.name}
-                            excluded={control.status === "EXCLUDED"}
-                            to={`/organizations/${organizationId}/frameworks/${framework.id}/controls/${control.id}`}
-                            active={selectedControl?.id === control.id}
-                        />
-                    ))}
-                    {framework.canCreateControl && (
-                        <FrameworkControlDialog
-                            frameworkId={framework.id}
-                            connectionId={connectionId}
-                        >
-                            <button className="flex gap-[6px] flex-col w-full p-4 space-y-[6px] rounded-xl cursor-pointer text-start text-sm text-txt-tertiary hover:bg-tertiary-hover">
-                                <IconPlusLarge
-                                    size={20}
-                                    className="text-txt-primary"
-                                />
-                                {__("Add new control")}
-                            </button>
-                        </FrameworkControlDialog>
-                    )}
-                </div>
-                <Outlet context={{ framework }} />
-            </div>
-        </div>
+      },
     );
+
+  const [exportFramework]
+    = useMutationWithToasts<FrameworkDetailPageExportFrameworkMutation>(
+      exportFrameworkMutation,
+      {
+        errorMessage: "Failed to export framework",
+        successMessage:
+                    "Framework export started successfully. You will receive an email when the export is ready.",
+      },
+    );
+
+  usePageTitle(`${framework.name} | ${selectedControl?.sectionTitle}`);
+  const onDelete = () => {
+    deleteFramework({
+      onSuccess: () => {
+        void navigate(`/organizations/${organizationId}/frameworks`);
+      },
+    });
+  };
+
+  if (!controlId && controls.length > 0) {
+    return (
+      <Navigate
+        to={`/organizations/${organizationId}/frameworks/${framework.id}/controls/${controls[0].id}`}
+      />
+    );
+  }
+
+  const hasAnyAction = framework.canExport || framework.canDelete || framework.canGenerateSOA;
+
+  return (
+    <div className="space-y-6">
+      <PageHeader
+        title={(
+          <>
+            <FrameworkLogo {...framework} />
+            {framework.name}
+          </>
+        )}
+      >
+        {framework.canUpdate && (
+          <FrameworkFormDialog
+            organizationId={organizationId}
+            framework={framework}
+          >
+            <Button icon={IconPencil} variant="secondary">
+              {__("Edit")}
+            </Button>
+          </FrameworkFormDialog>
+        )}
+        {hasAnyAction && (
+          <ActionDropdown variant="secondary">
+            {framework.canGenerateSOA
+              && (
+                <DropdownItem
+                  variant="primary"
+                  onClick={() => {
+                    void generateFrameworkStateOfApplicability({
+                      variables: { frameworkId: framework.id },
+                      onCompleted: (data) => {
+                        if (
+                          data
+                            .generateFrameworkStateOfApplicability
+                            ?.data
+                        ) {
+                          const link
+                            = window.document.createElement("a");
+                          link.href
+                            = data.generateFrameworkStateOfApplicability.data;
+                          link.download = `${framework.organization.name}-${framework.name}-SOA.xlsx`;
+                          window.document.body.appendChild(link);
+                          link.click();
+                          window.document.body.removeChild(link);
+                        }
+                      },
+                    });
+                  }}
+                >
+                  {__("Download SOA")}
+                </DropdownItem>
+              )}
+            {framework.canExport
+              && (
+                <DropdownItem
+                  variant="primary"
+                  onClick={() => {
+                    void exportFramework({
+                      variables: { frameworkId: framework.id },
+                    });
+                  }}
+                >
+                  {__("Export Framework")}
+                </DropdownItem>
+              )}
+            {framework.canDelete && (
+              <DropdownItem
+                icon={IconTrashCan}
+                variant="danger"
+                onClick={onDelete}
+              >
+                {__("Delete")}
+              </DropdownItem>
+            )}
+          </ActionDropdown>
+        )}
+      </PageHeader>
+      <div className="text-lg font-semibold">
+        {__("Requirement categories")}
+      </div>
+      <div className="divide-x divide-border-low grid grid-cols-[264px_1fr]">
+        <div
+          className="space-y-1 overflow-y-auto pr-6 mr-6 sticky top-0"
+          style={{ maxHeight: "calc(100vh - 48px)" }}
+        >
+          {controls.map(control => (
+            <ControlItem
+              key={control.id}
+              id={control.sectionTitle}
+              description={control.name}
+              excluded={control.status === "EXCLUDED"}
+              to={`/organizations/${organizationId}/frameworks/${framework.id}/controls/${control.id}`}
+              active={selectedControl?.id === control.id}
+            />
+          ))}
+          {framework.canCreateControl && (
+            <FrameworkControlDialog
+              frameworkId={framework.id}
+              connectionId={connectionId}
+            >
+              <button className="flex gap-[6px] flex-col w-full p-4 space-y-[6px] rounded-xl cursor-pointer text-start text-sm text-txt-tertiary hover:bg-tertiary-hover">
+                <IconPlusLarge
+                  size={20}
+                  className="text-txt-primary"
+                />
+                {__("Add new control")}
+              </button>
+            </FrameworkControlDialog>
+          )}
+        </div>
+        <Outlet context={{ framework }} />
+      </div>
+    </div>
+  );
 }
diff --git a/apps/console/src/pages/organizations/frameworks/FrameworksPage.tsx b/apps/console/src/pages/organizations/frameworks/FrameworksPage.tsx
index cecff5d50..50851dd78 100644
--- a/apps/console/src/pages/organizations/frameworks/FrameworksPage.tsx
+++ b/apps/console/src/pages/organizations/frameworks/FrameworksPage.tsx
@@ -55,8 +55,8 @@ export default function FrameworksPage(props: Props) {
   usePageTitle(__("Frameworks"));
   const data = usePreloadedQuery(frameworksQuery, props.queryRef);
   const connectionId = data.organization.frameworks!.__id;
-  const frameworks =
-    data.organization.frameworks?.edges.map((edge) => edge.node) ?? [];
+  const frameworks
+    = data.organization.frameworks?.edges.map(edge => edge.node) ?? [];
   const [commitImport, isImporting] = useMutationWithToasts(
     importFrameworkMutation,
     {
@@ -78,7 +78,7 @@ export default function FrameworksPage(props: Props) {
     try {
       setUploading(true);
       const fileName = `${name}.json`;
-      const json = await fetch(`/data/frameworks/${fileName}`).then((res) =>
+      const json = await fetch(`/data/frameworks/${fileName}`).then(res =>
         res.text(),
       );
       const file = new File([json], fileName, {
@@ -111,7 +111,7 @@ export default function FrameworksPage(props: Props) {
     if (!file) {
       return;
     }
-    importFile(file).finally(() => {
+    void importFile(file).finally(() => {
       input.value = "";
     });
   };
@@ -144,7 +144,7 @@ export default function FrameworksPage(props: Props) {
               {__("Import")}
             </FileButton>
             <FrameworkSelector
-              onSelect={importNamedFramework}
+              onSelect={name => void importNamedFramework(name)}
               disabled={isLoading}
             />
           </>
@@ -152,7 +152,7 @@ export default function FrameworksPage(props: Props) {
       </PageHeader>
 
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-        {frameworks.map((framework) => (
+        {frameworks.map(framework => (
           <FrameworkCard
             organizationId={data.organization.id!}
             connectionId={connectionId}
diff --git a/apps/console/src/pages/organizations/frameworks/dialogs/FrameworkControlDialog.tsx b/apps/console/src/pages/organizations/frameworks/dialogs/FrameworkControlDialog.tsx
index 9a01ee82e..3643b19ed 100644
--- a/apps/console/src/pages/organizations/frameworks/dialogs/FrameworkControlDialog.tsx
+++ b/apps/console/src/pages/organizations/frameworks/dialogs/FrameworkControlDialog.tsx
@@ -1,13 +1,13 @@
 import {
-    Breadcrumb,
-    Button,
-    Dialog,
-    DialogContent,
-    DialogFooter,
-    Input,
-    Textarea,
-    useDialogRef,
-    Checkbox,
+  Breadcrumb,
+  Button,
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  Input,
+  Textarea,
+  useDialogRef,
+  Checkbox,
 } from "@probo/ui";
 import type { ReactNode } from "react";
 import { useTranslate } from "@probo/i18n";
@@ -20,10 +20,10 @@ import { useMutationWithToasts } from "/hooks/useMutationWithToasts";
 import { useEffect, useMemo } from "react";
 
 type Props = {
-    children: ReactNode;
-    control?: FrameworkControlDialogFragment$key;
-    frameworkId: string;
-    connectionId?: string;
+  children: ReactNode;
+  control?: FrameworkControlDialogFragment$key;
+  frameworkId: string;
+  connectionId?: string;
 };
 
 const controlFragment = graphql`
@@ -64,170 +64,169 @@ const updateMutation = graphql`
 `;
 
 const schema = z
-    .object({
-        name: z.string(),
-        description: z.string().optional().nullable(),
-        sectionTitle: z.string(),
-        status: z.enum(["INCLUDED", "EXCLUDED"]),
-        exclusionJustification: z.string().optional(),
-        bestPractice: z.boolean(),
-    })
-    .refine(
-        (data) => {
-            if (data.status === "EXCLUDED") {
-                return (
-                    data.exclusionJustification &&
-                    data.exclusionJustification.trim().length > 0
-                );
-            }
-            return true;
-        },
-        {
-            message:
+  .object({
+    name: z.string(),
+    description: z.string().optional().nullable(),
+    sectionTitle: z.string(),
+    status: z.enum(["INCLUDED", "EXCLUDED"]),
+    exclusionJustification: z.string().optional(),
+    bestPractice: z.boolean(),
+  })
+  .refine(
+    (data) => {
+      if (data.status === "EXCLUDED") {
+        return (
+          data.exclusionJustification
+          && data.exclusionJustification.trim().length > 0
+        );
+      }
+      return true;
+    },
+    {
+      message:
                 "Exclusion justification is required when status is excluded",
-            path: ["exclusionJustification"],
-        },
-    );
+      path: ["exclusionJustification"],
+    },
+  );
 
 export function FrameworkControlDialog(props: Props) {
-    const { __ } = useTranslate();
-    const frameworkControl = useFragment(controlFragment, props.control);
-    const dialogRef = useDialogRef();
-    const [mutate, isMutating] = useMutationWithToasts(
-        props.control ? updateMutation : createMutation,
-        {
-            successMessage: __(
-                `Control ${props.control ? "updated" : "created"} successfully.`,
-            ),
-            errorMessage: __(
-                `Failed to ${props.control ? "update" : "create"} control`,
-            ),
-        },
-    );
+  const { __ } = useTranslate();
+  const frameworkControl = useFragment(controlFragment, props.control);
+  const dialogRef = useDialogRef();
+  const [mutate, isMutating] = useMutationWithToasts(
+    props.control ? updateMutation : createMutation,
+    {
+      successMessage: __(
+        `Control ${props.control ? "updated" : "created"} successfully.`,
+      ),
+      errorMessage: __(
+        `Failed to ${props.control ? "update" : "create"} control`,
+      ),
+    },
+  );
 
-    const defaultValues = useMemo(
-        () => ({
-            name: frameworkControl?.name ?? "",
-            description: frameworkControl?.description ?? "",
-            sectionTitle: frameworkControl?.sectionTitle ?? "",
-            status: frameworkControl?.status ?? "INCLUDED",
-            exclusionJustification:
+  const defaultValues = useMemo(
+    () => ({
+      name: frameworkControl?.name ?? "",
+      description: frameworkControl?.description ?? "",
+      sectionTitle: frameworkControl?.sectionTitle ?? "",
+      status: frameworkControl?.status ?? "INCLUDED",
+      exclusionJustification:
                 frameworkControl?.exclusionJustification ?? "",
-            bestPractice: frameworkControl?.bestPractice ?? true,
-        }),
-        [frameworkControl],
-    );
+      bestPractice: frameworkControl?.bestPractice ?? true,
+    }),
+    [frameworkControl],
+  );
 
-    const { handleSubmit, register, reset, watch, setValue } =
-        useFormWithSchema(schema, {
-            defaultValues,
-        });
-
-    useEffect(() => {
-        reset(defaultValues);
-    }, [defaultValues, reset]);
-
-    const bestPracticeValue = watch("bestPractice");
-
-    const onSubmit = handleSubmit(async (data) => {
-        if (frameworkControl) {
-            // Update the control
-            await mutate({
-                variables: {
-                    input: {
-                        id: frameworkControl.id,
-                        name: data.name,
-                        description: data.description || null,
-                        sectionTitle: data.sectionTitle,
-                        bestPractice: data.bestPractice,
-                        status: data.status,
-                        exclusionJustification:
-                            data.status === "EXCLUDED"
-                                ? data.exclusionJustification
-                                : null,
-                    },
-                },
-            });
-        } else {
-            // Create a new control
-            await mutate({
-                variables: {
-                    input: {
-                        frameworkId: props.frameworkId,
-                        name: data.name,
-                        description: data.description || null,
-                        sectionTitle: data.sectionTitle,
-                        bestPractice: data.bestPractice ?? true,
-                        status: data.status,
-                        exclusionJustification:
-                            data.status === "EXCLUDED"
-                                ? data.exclusionJustification
-                                : null,
-                    },
-                    connections: [props.connectionId!],
-                },
-            });
-            reset();
-        }
-        dialogRef.current?.close();
+  const { handleSubmit, register, reset, watch, setValue }
+    = useFormWithSchema(schema, {
+      defaultValues,
     });
 
-    return (
-        <Dialog
-            trigger={props.children}
-            ref={dialogRef}
-            title={
-                <Breadcrumb
-                    items={[
-                        __("Controls"),
-                        frameworkControl
-                            ? __("Edit Control")
-                            : __("New Control"),
-                    ]}
-                />
-            }
-        >
-            <form onSubmit={onSubmit}>
-                <DialogContent padded className="space-y-2">
-                    <Input
-                        id="sectionTitle"
-                        required
-                        variant="ghost"
-                        placeholder={__("Section title")}
-                        {...register("sectionTitle")}
-                    />
-                    <Input
-                        id="title"
-                        required
-                        variant="title"
-                        placeholder={__("Document title")}
-                        {...register("name")}
-                    />
-                    <Textarea
-                        id="content"
-                        variant="ghost"
-                        autogrow
-                        placeholder={__("Add description")}
-                        {...register("description")}
-                    />
-                    <label className="flex items-center gap-2 cursor-pointer">
-                        <Checkbox
-                            checked={bestPracticeValue}
-                            onChange={(checked) =>
-                                setValue("bestPractice", checked)
-                            }
-                        />
-                        <span className="text-sm">{__("Best Practice")}</span>
-                    </label>
-                </DialogContent>
-                <DialogFooter>
-                    <Button type="submit" disabled={isMutating}>
-                        {props.control
-                            ? __("Update control")
-                            : __("Create control")}
-                    </Button>
-                </DialogFooter>
-            </form>
-        </Dialog>
-    );
+  useEffect(() => {
+    reset(defaultValues);
+  }, [defaultValues, reset]);
+
+  const bestPracticeValue = watch("bestPractice");
+
+  const onSubmit = async (data: z.infer<typeof schema>) => {
+    if (frameworkControl) {
+      // Update the control
+      await mutate({
+        variables: {
+          input: {
+            id: frameworkControl.id,
+            name: data.name,
+            description: data.description || null,
+            sectionTitle: data.sectionTitle,
+            bestPractice: data.bestPractice,
+            status: data.status,
+            exclusionJustification:
+                            data.status === "EXCLUDED"
+                              ? data.exclusionJustification
+                              : null,
+          },
+        },
+      });
+    } else {
+      // Create a new control
+      await mutate({
+        variables: {
+          input: {
+            frameworkId: props.frameworkId,
+            name: data.name,
+            description: data.description || null,
+            sectionTitle: data.sectionTitle,
+            bestPractice: data.bestPractice ?? true,
+            status: data.status,
+            exclusionJustification:
+                            data.status === "EXCLUDED"
+                              ? data.exclusionJustification
+                              : null,
+          },
+          connections: [props.connectionId!],
+        },
+      });
+      reset();
+    }
+    dialogRef.current?.close();
+  };
+
+  return (
+    <Dialog
+      trigger={props.children}
+      ref={dialogRef}
+      title={(
+        <Breadcrumb
+          items={[
+            __("Controls"),
+            frameworkControl
+              ? __("Edit Control")
+              : __("New Control"),
+          ]}
+        />
+      )}
+    >
+      <form onSubmit={e => void handleSubmit(onSubmit)(e)}>
+        <DialogContent padded className="space-y-2">
+          <Input
+            id="sectionTitle"
+            required
+            variant="ghost"
+            placeholder={__("Section title")}
+            {...register("sectionTitle")}
+          />
+          <Input
+            id="title"
+            required
+            variant="title"
+            placeholder={__("Document title")}
+            {...register("name")}
+          />
+          <Textarea
+            id="content"
+            variant="ghost"
+            autogrow
+            placeholder={__("Add description")}
+            {...register("description")}
+          />
+          <label className="flex items-center gap-2 cursor-pointer">
+            <Checkbox
+              checked={bestPracticeValue}
+              onChange={checked =>
+                setValue("bestPractice", checked)}
+            />
+            <span className="text-sm">{__("Best Practice")}</span>
+          </label>
+        </DialogContent>
+        <DialogFooter>
+          <Button type="submit" disabled={isMutating}>
+            {props.control
+              ? __("Update control")
+              : __("Create control")}
+          </Button>
+        </DialogFooter>
+      </form>
+    </Dialog>
+  );
 }
diff --git a/apps/console/src/pages/organizations/frameworks/dialogs/FrameworkFormDialog.tsx b/apps/console/src/pages/organizations/frameworks/dialogs/FrameworkFormDialog.tsx
index c9d002380..2f4de97bf 100644
--- a/apps/console/src/pages/organizations/frameworks/dialogs/FrameworkFormDialog.tsx
+++ b/apps/console/src/pages/organizations/frameworks/dialogs/FrameworkFormDialog.tsx
@@ -64,13 +64,14 @@ const schema = z.object({
  * Form to update or create a new framework
  */
 export function FrameworkFormDialog(props: Props) {
+  const { children, connectionId, ref, framework, organizationId } = props;
   const { __ } = useTranslate();
-  const ref = useDialogRef();
-  const dialogRef = props.ref ?? ref;
+  const newRef = useDialogRef();
+  const dialogRef = ref ?? newRef;
   const { register, handleSubmit, reset } = useFormWithSchema(schema, {
     defaultValues: {
-      name: props.framework?.name ?? "",
-      description: props.framework?.description ?? "",
+      name: framework?.name ?? "",
+      description: framework?.description ?? "",
     },
   });
   const [create, isCreating] = useMutationWithToasts(createFrameworkMutation, {
@@ -81,12 +82,12 @@ export function FrameworkFormDialog(props: Props) {
     successMessage: __("Framework updated successfully"),
     errorMessage: __("Failed to update framework"),
   });
-  const onSubmit = handleSubmit(async (data) => {
-    if (props.framework) {
+  const onSubmit = async (data: z.infer<typeof schema>) => {
+    if (framework) {
       await update({
         variables: {
           input: {
-            id: props.framework.id,
+            id: framework.id,
             ...data,
             description: data.description || null,
           },
@@ -101,22 +102,22 @@ export function FrameworkFormDialog(props: Props) {
         input: {
           ...data,
           description: data.description || null,
-          organizationId: props.organizationId,
+          organizationId: organizationId,
         },
-        connections: [props.connectionId],
+        connections: [connectionId],
       },
     });
     reset();
     dialogRef.current?.close();
-  });
+  };
 
   return (
     <Dialog
-      trigger={props.children}
+      trigger={children}
       ref={dialogRef}
       title={<Breadcrumb items={[__("Framework"), __("New Framework")]} />}
     >
-      <form onSubmit={onSubmit}>
+      <form onSubmit={e => void handleSubmit(onSubmit)(e)}>
         <DialogContent padded className="space-y-4">
           <Input
             {...register("name")}
@@ -133,7 +134,7 @@ export function FrameworkFormDialog(props: Props) {
         </DialogContent>
         <DialogFooter>
           <Button type="submit" disabled={isCreating || isUpdating}>
-            {props.framework ? __("Update framework") : __("Create framework")}
+            {framework ? __("Update framework") : __("Create framework")}
           </Button>
         </DialogFooter>
       </form>
diff --git a/apps/console/src/pages/organizations/measures/MeasureDetailPage.tsx b/apps/console/src/pages/organizations/measures/MeasureDetailPage.tsx
index 47f28bb38..8fe81d379 100644
--- a/apps/console/src/pages/organizations/measures/MeasureDetailPage.tsx
+++ b/apps/console/src/pages/organizations/measures/MeasureDetailPage.tsx
@@ -100,13 +100,13 @@ export default function MeasureDetailPage(props: Props) {
     confirm(
       () =>
         new Promise<void>((resolve) => {
-          deleteMeasure({
+          void deleteMeasure({
             variables: {
               input: { measureId },
               connections: [connectionId],
             },
             onSuccess() {
-              navigate(`/organizations/${organizationId}/measures`);
+              void navigate(`/organizations/${organizationId}/measures`);
               resolve();
             },
           });
@@ -114,7 +114,7 @@ export default function MeasureDetailPage(props: Props) {
       {
         message: sprintf(
           __(
-            'This will permanently delete the measure "%s". This action cannot be undone.',
+            "This will permanently delete the measure \"%s\". This action cannot be undone.",
           ),
           measure.name,
         ),
@@ -123,7 +123,7 @@ export default function MeasureDetailPage(props: Props) {
   };
 
   const onStateChange = (state: string) => {
-    updateMeasure({
+    void updateMeasure({
       variables: {
         input: {
           id: measureId,
@@ -166,13 +166,13 @@ export default function MeasureDetailPage(props: Props) {
             </MeasureFormDialog>
             <Select
               disabled={isUpdating}
-              onValueChange={onStateChange}
+              onValueChange={state => void onStateChange(state)}
               name="state"
               placeholder={__("Select state")}
               className="rounded-full"
               value={measure.state}
             >
-              {measureStates.map((state) => (
+              {measureStates.map(state => (
                 <Option key={state} value={state}>
                   {getMeasureStateLabel(__, state)}
                 </Option>
diff --git a/apps/console/src/pages/organizations/measures/MeasuresPage.tsx b/apps/console/src/pages/organizations/measures/MeasuresPage.tsx
index 1b6fce3c8..2df280a5f 100644
--- a/apps/console/src/pages/organizations/measures/MeasuresPage.tsx
+++ b/apps/console/src/pages/organizations/measures/MeasuresPage.tsx
@@ -103,9 +103,9 @@ export default function MeasuresPage(props: Props) {
     organization,
   );
   const connectionId = data.measures.__id;
-  const measures = data.measures.edges.map((edge) => edge.node);
+  const measures = data.measures.edges.map(edge => edge.node);
   const measuresPerCategory = useMemo(() => {
-    return groupBy(measures, (measure) => measure.category);
+    return groupBy(measures, measure => measure.category);
   }, [measures]);
   const [importMeasures] = useMutationWithToasts<MeasuresPageImportMutation>(
     importMeasuresMutation,
@@ -122,7 +122,7 @@ export default function MeasuresPage(props: Props) {
     if (!file) {
       return;
     }
-    importMeasures({
+    void importMeasures({
       variables: {
         input: {
           organizationId: organization.id,
@@ -168,7 +168,7 @@ export default function MeasuresPage(props: Props) {
       <MeasureImplementation measures={measures} className="my-10" />
       {objectKeys(measuresPerCategory)
         .sort((a, b) => a.localeCompare(b))
-        .map((category) => (
+        .map(category => (
           <Category
             key={category}
             category={category}
@@ -199,7 +199,7 @@ function Category(props: CategoryProps) {
   const isExpanded = categoryId === params.categoryId;
   const ExpandComponent = isExpanded ? IconChevronUp : IconChevronDown;
   const completedMeasures = props.measures.filter(
-    (m) => m.state === "IMPLEMENTED",
+    m => m.state === "IMPLEMENTED",
   );
 
   return (
@@ -211,9 +211,13 @@ function Category(props: CategoryProps) {
         <h2 className="text-base font-medium">{props.category}</h2>
         <div className="flex items-center gap-3 text-sm text-txt-secondary">
           <span>
-            {__("Completion")}:{" "}
+            {__("Completion")}
+            :
+            {" "}
             <span className="text-txt-primary font-medium">
-              {completedMeasures.length}/{props.measures.length}
+              {completedMeasures.length}
+              /
+              {props.measures.length}
             </span>
           </span>
           <span className="text-border-low">|</span>
@@ -233,7 +237,7 @@ function Category(props: CategoryProps) {
               </Tr>
             </Thead>
             <Tbody>
-              {measures.map((measure) => (
+              {measures.map(measure => (
                 <MeasureRow
                   key={measure.id}
                   measure={measure}
@@ -275,7 +279,7 @@ function MeasureRow(props: MeasureRowProps) {
     confirm(
       () =>
         new Promise<void>((resolve) => {
-          deleteMeasure({
+          void deleteMeasure({
             variables: {
               input: { measureId: props.measure.id },
               connections: [props.connectionId],
@@ -286,7 +290,7 @@ function MeasureRow(props: MeasureRowProps) {
       {
         message: sprintf(
           __(
-            'This will permanently delete the measure "%s". This action cannot be undone.',
+            "This will permanently delete the measure \"%s\". This action cannot be undone.",
           ),
           props.measure.name,
         ),
diff --git a/apps/console/src/pages/organizations/measures/dialog/CreateEvidenceDialog.tsx b/apps/console/src/pages/organizations/measures/dialog/CreateEvidenceDialog.tsx
index ca44d3ed4..84b96cbf5 100644
--- a/apps/console/src/pages/organizations/measures/dialog/CreateEvidenceDialog.tsx
+++ b/apps/console/src/pages/organizations/measures/dialog/CreateEvidenceDialog.tsx
@@ -42,19 +42,20 @@ type Props = {
 };
 
 export function CreateEvidenceDialog(props: Props) {
+  const { ref, ...rest } = props;
   const { __ } = useTranslate();
   const [tab, setTab] = useState("upload");
   return (
     <Dialog
-      title={
+      title={(
         <Breadcrumb
           items={[
             { label: __("Measures detail") },
             { label: __("Create Evidence") },
           ]}
         />
-      }
-      ref={props.ref}
+      )}
+      ref={ref}
       className="max-w-lg"
     >
       <Tabs className="px-6">
@@ -65,8 +66,8 @@ export function CreateEvidenceDialog(props: Props) {
           {__("Link")}
         </TabItem>
       </Tabs>
-      {tab === "upload" && <EvidenceUpload {...props} />}
-      {tab === "link" && <EvidenceLink {...props} />}
+      {tab === "upload" && <EvidenceUpload {...rest} />}
+      {tab === "link" && <EvidenceLink ref={ref} {...rest} />}
     </Dialog>
   );
 }
@@ -79,9 +80,9 @@ function EvidenceUpload({ measureId, connectionId }: Omit<Props, "ref">) {
     successMessage: __("Evidence uploaded successfully"),
     errorMessage: __("Failed to create evidence"),
   });
-  const handleDrop = (files: File[]) => {
+  const handleDrop = async (files: File[]) => {
     for (const file of files) {
-      mutate({
+      await mutate({
         variables: {
           connections: [connectionId],
           input: {
@@ -103,10 +104,10 @@ function EvidenceUpload({ measureId, connectionId }: Omit<Props, "ref">) {
       <DialogContent padded>
         <Dropzone
           description={__(
-            "Only PDF, DOCX, XLSX, PPTX, CSV, JPG, PNG, WEBP, URI files up to 10MB are allowed"
+            "Only PDF, DOCX, XLSX, PPTX, CSV, JPG, PNG, WEBP, URI files up to 10MB are allowed",
           )}
           isUploading={isUpdating}
-          onDrop={handleDrop}
+          onDrop={files => void handleDrop(files)}
           accept={{
             "text/plain": [".uri"],
             "text/csv": [".csv"],
@@ -142,14 +143,14 @@ function EvidenceLink({ measureId, connectionId, ref }: Props) {
         name: "",
         url: "",
       },
-    }
+    },
   );
 
   const [mutate] = useMutationWithToasts(uploadEvidenceMutation, {
     successMessage: __("Evidence created successfully"),
     errorMessage: __("Failed to create evidence"),
   });
-  const onSubmit = handleSubmit(async (data) => {
+  const onSubmit = async (data: z.infer<typeof linkSchema>) => {
     const fileName = `${data.name.trim()}.uri`;
     const file = new File([data.url.trim()], fileName, {
       type: "text/uri-list",
@@ -168,9 +169,10 @@ function EvidenceLink({ measureId, connectionId, ref }: Props) {
     });
     ref.current?.close();
     reset();
-  });
+  };
+
   return (
-    <form onSubmit={onSubmit}>
+    <form onSubmit={e => void handleSubmit(onSubmit)(e)}>
       <DialogContent padded className="space-y-4">
         <Field
           required
diff --git a/apps/console/src/pages/organizations/measures/dialog/EvidenceDownloadDialog.tsx b/apps/console/src/pages/organizations/measures/dialog/EvidenceDownloadDialog.tsx
index b17ec8a11..0b22f4865 100644
--- a/apps/console/src/pages/organizations/measures/dialog/EvidenceDownloadDialog.tsx
+++ b/apps/console/src/pages/organizations/measures/dialog/EvidenceDownloadDialog.tsx
@@ -18,20 +18,21 @@ export function EvidenceDownloadDialog({ evidenceId, onClose }: Props) {
       className="max-w-sm"
       onClose={onClose}
       defaultOpen
-      title={
+      title={(
         <Breadcrumb
           items={[{ label: __("Evidences") }, { label: __("Download") }]}
         />
-      }
+      )}
     >
       <DialogContent padded>
         <Suspense
-          fallback={
+          fallback={(
             <div className="flex gap-2 justify-center">
               <Spinner />
-              {__("Generating download link")}...
+              {__("Generating download link")}
+              ...
             </div>
-          }
+          )}
         >
           <DownloadLink evidenceId={evidenceId} onClose={onClose} />
         </Suspense>
diff --git a/apps/console/src/pages/organizations/measures/dialog/EvidencePreviewDialog.tsx b/apps/console/src/pages/organizations/measures/dialog/EvidencePreviewDialog.tsx
index d45fd46a0..6bb08b1a6 100644
--- a/apps/console/src/pages/organizations/measures/dialog/EvidencePreviewDialog.tsx
+++ b/apps/console/src/pages/organizations/measures/dialog/EvidencePreviewDialog.tsx
@@ -23,8 +23,8 @@ type Props = {
 
 export function EvidencePreviewDialog({
   evidenceId,
-  onClose,
   filename,
+  onClose,
 }: Props) {
   const { __ } = useTranslate();
   const ref = useDialogRef();
@@ -74,9 +74,9 @@ function EvidencePreviewContent({
   ).node;
   const { __ } = useTranslate();
   const { toast } = useToast();
-  const isUriFile =
-    evidence.file?.mimeType === "text/uri-list" ||
-    evidence.file?.mimeType === "text/uri";
+  const isUriFile
+    = evidence.file?.mimeType === "text/uri-list"
+      || evidence.file?.mimeType === "text/uri";
   useEffect(() => {
     if (!isUriFile) {
       return;
@@ -89,14 +89,22 @@ function EvidencePreviewContent({
         window.open(url, "_blank");
       })
       .catch((e) => {
-        if (e.name === "AbortError") {
-          return;
+        if (e instanceof Error) {
+          if (e.name === "AbortError") {
+            return;
+          }
+          toast({
+            title: __("Error"),
+            description: e.message ?? __("Failed to extract URL from URI file"),
+            variant: "error",
+          });
+        } else {
+          toast({
+            title: __("Error"),
+            description: __("Failed to extract URL from URI file"),
+            variant: "error",
+          });
         }
-        toast({
-          title: __("Error"),
-          description: e.message ?? __("Failed to extract URL from URI file"),
-          variant: "error",
-        });
       })
       .finally(onClose);
     return () => {
@@ -140,12 +148,12 @@ function EvidencePreviewContent({
     <div className="flex flex-col items-center gap-2 justify-center">
       <IconWarning size={20} />
       <p className="text-txt-secondary text-center">
-        {__("Preview not available for this file type") +
-          " " +
-          evidence.file.mimeType}
+        {__("Preview not available for this file type")
+          + " "
+          + evidence.file.mimeType}
       </p>
       <Button asChild variant="secondary" icon={IconArrowInbox}>
-        <a href={evidence.file.downloadUrl} target="_blank">
+        <a href={evidence.file.downloadUrl} target="_blank" rel="noreferrer">
           {__("Download File")}
         </a>
       </Button>
diff --git a/apps/console/src/pages/organizations/measures/dialog/MeasureFormDialog.tsx b/apps/console/src/pages/organizations/measures/dialog/MeasureFormDialog.tsx
index c14bb329f..02f352ae1 100644
--- a/apps/console/src/pages/organizations/measures/dialog/MeasureFormDialog.tsx
+++ b/apps/console/src/pages/organizations/measures/dialog/MeasureFormDialog.tsx
@@ -65,20 +65,21 @@ type Props = {
 };
 
 export default function MeasureFormDialog(props: Props) {
+  const { children, measure: measureKey, connection, ...rest } = props;
   const { __ } = useTranslate();
   const ref = useDialogRef();
-  const dialogRef = props.ref ?? ref;
-  const measure = useFragment(measureFragment, props.measure);
+  const dialogRef = rest.ref ?? ref;
+  const measure = useFragment(measureFragment, measureKey);
   const organizationId = useOrganizationId();
   const [updateMeasure] = useUpdateMeasure();
   const [createMeasure] = useMutationWithToasts(measureCreateMutation, {
     successMessage: __("Measure created successfully."),
     errorMessage: __("Failed to create measure"),
   });
-  const mutate = props.measure ? updateMeasure : createMeasure;
+  const mutate = measureKey ? updateMeasure : createMeasure;
 
-  const { control, handleSubmit, register, formState, reset } =
-    useFormWithSchema(measureSchema, {
+  const { control, handleSubmit, register, formState, reset }
+    = useFormWithSchema(measureSchema, {
       values: {
         name: measure?.name ?? "",
         description: measure?.description ?? "",
@@ -87,7 +88,7 @@ export default function MeasureFormDialog(props: Props) {
       },
     });
 
-  const onSubmit = handleSubmit(async (data) => {
+  const onSubmit = async (data: z.infer<typeof measureSchema>) => {
     if (measure) {
       await mutate({
         variables: {
@@ -109,28 +110,28 @@ export default function MeasureFormDialog(props: Props) {
             description: data.description || null,
             category: data.category,
           },
-          connections: [props.connection!],
+          connections: [connection!],
         },
       });
       reset();
     }
     dialogRef.current?.close();
-  });
+  };
 
   return (
     <Dialog
       ref={dialogRef}
-      trigger={props.children}
-      title={
+      trigger={children}
+      title={(
         <Breadcrumb
           items={[
             __("Measures"),
             measure ? __("Edit Measure") : __("New Measure"),
           ]}
         />
-      }
+      )}
     >
-      <form onSubmit={onSubmit}>
+      <form onSubmit={e => void handleSubmit(onSubmit)(e)}>
         <DialogContent className="grid grid-cols-[1fr_420px]">
           <div className="py-8 px-10 space-y-6">
             <Field
@@ -171,7 +172,7 @@ export default function MeasureFormDialog(props: Props) {
                   name="state"
                   placeholder={__("Select state")}
                 >
-                  {measureStates.map((state) => (
+                  {measureStates.map(state => (
                     <Option key={state} value={state}>
                       {getMeasureStateLabel(__, state)}
                     </Option>
diff --git a/apps/console/src/pages/organizations/measures/tabs/MeasureControlsTab.tsx b/apps/console/src/pages/organizations/measures/tabs/MeasureControlsTab.tsx
index 3dc0af3fe..366ec52e6 100644
--- a/apps/console/src/pages/organizations/measures/tabs/MeasureControlsTab.tsx
+++ b/apps/console/src/pages/organizations/measures/tabs/MeasureControlsTab.tsx
@@ -74,7 +74,7 @@ export default function MeasureControlsTab() {
   }>();
   const [data, refetch] = useRefetchableFragment(controlsFragment, measure);
   const connectionId = data.controls.__id;
-  const controls = data.controls?.edges?.map((edge) => edge.node) ?? [];
+  const controls = data.controls?.edges?.map(edge => edge.node) ?? [];
 
   const canLinkControl = controls.some(
     ({ canCreateMeasureMapping }) => canCreateMeasureMapping,
diff --git a/apps/console/src/pages/organizations/measures/tabs/MeasureEvidencesTab.tsx b/apps/console/src/pages/organizations/measures/tabs/MeasureEvidencesTab.tsx
index cba578298..5a6f2eef0 100644
--- a/apps/console/src/pages/organizations/measures/tabs/MeasureEvidencesTab.tsx
+++ b/apps/console/src/pages/organizations/measures/tabs/MeasureEvidencesTab.tsx
@@ -104,11 +104,11 @@ export default function MeasureEvidencesTab() {
   }>();
   const pagination = usePaginationFragment(evidencesFragment, measure);
   const connectionId = pagination.data.evidences.__id;
-  const evidences =
-    pagination.data.evidences?.edges?.map((edge) => edge.node) ?? [];
+  const evidences
+    = pagination.data.evidences?.edges?.map(edge => edge.node) ?? [];
   const navigate = useNavigate();
   const { __ } = useTranslate();
-  const evidence = evidences.find((e) => e.id === evidenceId);
+  const evidence = evidences.find(e => e.id === evidenceId);
   const organizationId = useOrganizationId();
   const dialogRef = useDialogRef();
   const isSnapshotMode = Boolean(snapshotId);
@@ -128,7 +128,7 @@ export default function MeasureEvidencesTab() {
           </Tr>
         </Thead>
         <Tbody>
-          {evidences.map((evidence) => (
+          {evidences.map(evidence => (
             <EvidenceRow
               key={evidence.id}
               evidenceKey={evidence}
@@ -157,7 +157,7 @@ export default function MeasureEvidencesTab() {
             const baseUrl = isSnapshotMode
               ? `/organizations/${organizationId}/snapshots/${snapshotId}/risks/measures/${measure.id}/evidences`
               : `/organizations/${organizationId}/measures/${measure.id}/evidences`;
-            navigate(baseUrl);
+            void navigate(baseUrl);
           }}
           evidenceId={evidence.id}
           filename={evidence.file?.fileName || ""}
@@ -189,7 +189,7 @@ function EvidenceRow(props: {
     deleteEvidenceMutation,
     {
       successMessage: sprintf(
-        __('Evidence "%s" has been deleted successfully'),
+        __("Evidence \"%s\" has been deleted successfully"),
         evidence.file?.fileName || __("Link evidence"),
       ),
       errorMessage: __("Failed to delete evidence"),
@@ -224,7 +224,7 @@ function EvidenceRow(props: {
       {
         message: sprintf(
           __(
-            'This will permanently delete the evidence "%s". This action cannot be undone.',
+            "This will permanently delete the evidence \"%s\". This action cannot be undone.",
           ),
           evidence.file?.fileName || __("Link evidence"),
         ),
diff --git a/apps/console/src/pages/organizations/measures/tabs/MeasureRisksTab.tsx b/apps/console/src/pages/organizations/measures/tabs/MeasureRisksTab.tsx
index 3db656a5e..9144b6d56 100644
--- a/apps/console/src/pages/organizations/measures/tabs/MeasureRisksTab.tsx
+++ b/apps/console/src/pages/organizations/measures/tabs/MeasureRisksTab.tsx
@@ -58,7 +58,7 @@ export default function MeasureRisksTab() {
   }>();
   const data = useFragment(risksFragment, measure);
   const connectionId = data.risks.__id;
-  const risks = data.risks?.edges?.map((edge) => edge.node) ?? [];
+  const risks = data.risks?.edges?.map(edge => edge.node) ?? [];
 
   const canLinkRisk = risks.some(
     ({ canCreateMeasureMapping }) => canCreateMeasureMapping,
diff --git a/apps/console/src/pages/organizations/meetings/MeetingDetailPage.tsx b/apps/console/src/pages/organizations/meetings/MeetingDetailPage.tsx
index 156f8bc54..38b9c5144 100644
--- a/apps/console/src/pages/organizations/meetings/MeetingDetailPage.tsx
+++ b/apps/console/src/pages/organizations/meetings/MeetingDetailPage.tsx
@@ -72,13 +72,13 @@ export default function MeetingDetailPage(props: Props) {
             input: { meetingId: meeting.id },
           },
           onSuccess: () => {
-            navigate(`/organizations/${organizationId}/meetings`);
+            void navigate(`/organizations/${organizationId}/meetings`);
           },
         }),
       {
         message: sprintf(
           __(
-            'This will permanently delete the meeting "%s". This action cannot be undone.',
+            "This will permanently delete the meeting \"%s\". This action cannot be undone.",
           ),
           meeting.name,
         ),
@@ -134,7 +134,7 @@ export default function MeetingDetailPage(props: Props) {
         />
         {meeting.attendees && meeting.attendees.length > 0 && (
           <div className="flex gap-2 items-center flex-wrap">
-            {meeting.attendees.map((attendee) => (
+            {meeting.attendees.map(attendee => (
               <div key={attendee.id} className="flex gap-2 items-center">
                 <Avatar name={attendee.fullName ?? ""} />
                 <Link
diff --git a/apps/console/src/pages/organizations/meetings/MeetingsPage.tsx b/apps/console/src/pages/organizations/meetings/MeetingsPage.tsx
index 85e919ac9..5f1f5bf76 100644
--- a/apps/console/src/pages/organizations/meetings/MeetingsPage.tsx
+++ b/apps/console/src/pages/organizations/meetings/MeetingsPage.tsx
@@ -39,7 +39,7 @@ import { CreateMeetingDialog } from "./dialogs/CreateMeetingDialog";
 import type { MeetingsPageRowFragment$key } from "/__generated__/core/MeetingsPageRowFragment.graphql";
 import { SortableTable, SortableTh } from "/components/SortableTable";
 import { Link } from "react-router";
-import { useState, useEffect, useRef } from "react";
+import { useState, useRef } from "react";
 import { useMutationWithToasts } from "/hooks/useMutationWithToasts";
 import type { MeetingsPage_UpdateSummaryMutation } from "/__generated__/core/MeetingsPage_UpdateSummaryMutation.graphql";
 
@@ -95,7 +95,7 @@ export default function MeetingsPage(props: Props) {
   );
 
   const meetingNodes = pagination.data.meetings.edges
-    .map((edge) => edge.node)
+    .map(edge => edge.node)
     .filter(Boolean);
   const connectionId = pagination.data.meetings.__id;
 
@@ -109,19 +109,6 @@ export default function MeetingsPage(props: Props) {
   // Track if we just saved to prevent useEffect from overwriting our update
   const justSavedRef = useRef(false);
 
-  // Update summary text when context.summary changes (but not while editing)
-  useEffect(() => {
-    if (!isEditing && !justSavedRef.current) {
-      const newSummary = pagination.data.context?.summary || "";
-      setSummaryText(newSummary);
-      setDisplayedSummary(newSummary);
-    }
-    // Reset the flag after the effect runs
-    if (justSavedRef.current) {
-      justSavedRef.current = false;
-    }
-  }, [pagination.data.context?.summary, isEditing]);
-
   const updateSummaryMutation = graphql`
     mutation MeetingsPage_UpdateSummaryMutation(
       $input: UpdateOrganizationContextInput!
@@ -135,8 +122,8 @@ export default function MeetingsPage(props: Props) {
     }
   `;
 
-  const [updateSummary, isUpdating] =
-    useMutationWithToasts<MeetingsPage_UpdateSummaryMutation>(
+  const [updateSummary, isUpdating]
+    = useMutationWithToasts<MeetingsPage_UpdateSummaryMutation>(
       updateSummaryMutation,
       {
         successMessage: __("Summary updated successfully"),
@@ -144,16 +131,15 @@ export default function MeetingsPage(props: Props) {
       },
     );
 
-  const handleSave = () => {
+  const handleSave = async () => {
     const valueToSave = summaryText.trim();
     const previousValue = pagination.data.context?.summary || "";
     setDisplayedSummary(valueToSave);
     justSavedRef.current = true;
-    setIsEditing(false);
 
     const valueToSend = valueToSave.length > 0 ? valueToSave : "";
 
-    updateSummary({
+    await updateSummary({
       variables: {
         input: {
           organizationId: organization.id,
@@ -165,12 +151,14 @@ export default function MeetingsPage(props: Props) {
         setDisplayedSummary(previousValue);
         justSavedRef.current = false;
       },
-      onCompleted: (_response, error) => {
-        if (error) {
+      onCompleted: (_, errors) => {
+        if (errors?.length) {
           // Roll back optimistic update on GraphQL error
           setDisplayedSummary(previousValue);
           justSavedRef.current = false;
         }
+
+        setIsEditing(false);
       },
     });
   };
@@ -183,62 +171,66 @@ export default function MeetingsPage(props: Props) {
   return (
     <div className="space-y-6">
       <Card padded>
-        {isEditing ? (
-          <div className="space-y-4">
-            <Textarea
-              value={summaryText}
-              onChange={(e) => setSummaryText(e.target.value)}
-              autogrow
-              className="min-h-32 font-mono text-sm"
-              placeholder={__("Enter meetings summary in markdown format")}
-            />
-            <div className="flex gap-2 justify-end">
-              <Button
-                variant="secondary"
-                icon={IconCrossLargeX}
-                onClick={handleCancel}
-                disabled={isUpdating}
-              >
-                {__("Cancel")}
-              </Button>
-              <Button
-                icon={IconCheckmark1}
-                onClick={handleSave}
-                disabled={isUpdating}
-              >
-                {__("Save")}
-              </Button>
-            </div>
-          </div>
-        ) : (
-          <div className="space-y-2">
-            <div className="flex items-center justify-between">
-              <h3 className="text-sm font-semibold text-txt-secondary">
-                {__("Summary")}
-              </h3>
-              {organization.canCreateMeeting && (
-                <Button
-                  variant="quaternary"
-                  icon={IconPencil}
-                  onClick={() => setIsEditing(true)}
-                >
-                  {__("Edit")}
-                </Button>
-              )}
-            </div>
-            <div className="w-full">
-              {displayedSummary ? (
-                <div className="prose prose-sm max-w-none w-full [&_.prose]:max-w-none">
-                  <Markdown content={displayedSummary} />
+        {isEditing
+          ? (
+              <div className="space-y-4">
+                <Textarea
+                  value={summaryText}
+                  onChange={e => setSummaryText(e.target.value)}
+                  autogrow
+                  className="min-h-32 font-mono text-sm"
+                  placeholder={__("Enter meetings summary in markdown format")}
+                />
+                <div className="flex gap-2 justify-end">
+                  <Button
+                    variant="secondary"
+                    icon={IconCrossLargeX}
+                    onClick={handleCancel}
+                    disabled={isUpdating}
+                  >
+                    {__("Cancel")}
+                  </Button>
+                  <Button
+                    icon={IconCheckmark1}
+                    onClick={() => void handleSave()}
+                    disabled={isUpdating}
+                  >
+                    {__("Save")}
+                  </Button>
                 </div>
-              ) : (
-                <div className="text-txt-tertiary text-sm italic">
-                  {__("No summary yet. Click Edit to add one.")}
+              </div>
+            )
+          : (
+              <div className="space-y-2">
+                <div className="flex items-center justify-between">
+                  <h3 className="text-sm font-semibold text-txt-secondary">
+                    {__("Summary")}
+                  </h3>
+                  {organization.canCreateMeeting && (
+                    <Button
+                      variant="quaternary"
+                      icon={IconPencil}
+                      onClick={() => setIsEditing(true)}
+                    >
+                      {__("Edit")}
+                    </Button>
+                  )}
                 </div>
-              )}
-            </div>
-          </div>
-        )}
+                <div className="w-full">
+                  {displayedSummary
+                    ? (
+                        <div className="prose prose-sm max-w-none w-full [&_.prose]:max-w-none">
+                          <Markdown content={displayedSummary} />
+                        </div>
+                      )
+                    : (
+                        <div className="text-txt-tertiary text-sm italic">
+                          {__("No summary yet. Click Edit to add one.")}
+                        </div>
+                      )}
+                </div>
+              </div>
+            )}
       </Card>
       <PageHeader
         title={__("Meetings")}
@@ -252,42 +244,44 @@ export default function MeetingsPage(props: Props) {
           </CreateMeetingDialog>
         )}
       </PageHeader>
-      {meetingNodes.length > 0 ? (
-        <SortableTable {...pagination}>
-          <Thead>
-            <Tr>
-              <SortableTh field="DATE" className="w-40">
-                {__("Date")}
-              </SortableTh>
-              <SortableTh field="NAME" className="min-w-0">
-                {__("Meeting name")}
-              </SortableTh>
-              <Th className="w-60">{__("Attendees")}</Th>
-              <Th className="w-18"></Th>
-            </Tr>
-          </Thead>
-          <Tbody>
-            {meetingNodes.map((meeting) => (
-              <MeetingRow
-                key={meeting.id}
-                meeting={meeting}
-                organizationId={organization.id}
-              />
-            ))}
-          </Tbody>
-        </SortableTable>
-      ) : (
-        <Card padded>
-          <div className="text-center py-12">
-            <h3 className="text-lg font-semibold mb-2">
-              {__("No meetings yet")}
-            </h3>
-            <p className="text-txt-tertiary mb-4">
-              {__("Create your first meeting to get started.")}
-            </p>
-          </div>
-        </Card>
-      )}
+      {meetingNodes.length > 0
+        ? (
+            <SortableTable {...pagination}>
+              <Thead>
+                <Tr>
+                  <SortableTh field="DATE" className="w-40">
+                    {__("Date")}
+                  </SortableTh>
+                  <SortableTh field="NAME" className="min-w-0">
+                    {__("Meeting name")}
+                  </SortableTh>
+                  <Th className="w-60">{__("Attendees")}</Th>
+                  <Th className="w-18"></Th>
+                </Tr>
+              </Thead>
+              <Tbody>
+                {meetingNodes.map(meeting => (
+                  <MeetingRow
+                    key={meeting.id}
+                    meeting={meeting}
+                    organizationId={organization.id}
+                  />
+                ))}
+              </Tbody>
+            </SortableTable>
+          )
+        : (
+            <Card padded>
+              <div className="text-center py-12">
+                <h3 className="text-lg font-semibold mb-2">
+                  {__("No meetings yet")}
+                </h3>
+                <p className="text-txt-tertiary mb-4">
+                  {__("Create your first meeting to get started.")}
+                </p>
+              </div>
+            </Card>
+          )}
     </div>
   );
 }
@@ -330,7 +324,7 @@ function MeetingRow({
       {
         message: sprintf(
           __(
-            'This will permanently delete the meeting "%s". This action cannot be undone.',
+            "This will permanently delete the meeting \"%s\". This action cannot be undone.",
           ),
           meeting.name,
         ),
@@ -345,28 +339,30 @@ function MeetingRow({
         <div className="flex gap-4 items-center">{meeting.name}</div>
       </Td>
       <Td className="w-60">
-        {meeting.attendees && meeting.attendees.length > 0 ? (
-          <div className="flex gap-2 items-center flex-wrap">
-            {meeting.attendees.map((attendee) => (
-              <div key={attendee.id} className="flex gap-2 items-center">
-                <Avatar name={attendee.fullName ?? ""} />
-                <Link
-                  to={`/organizations/${organizationId}/people/${attendee.id}`}
-                  onClick={(e) => {
-                    e.stopPropagation();
-                  }}
-                  className="text-sm hover:underline"
-                >
-                  {attendee.fullName}
-                </Link>
+        {meeting.attendees && meeting.attendees.length > 0
+          ? (
+              <div className="flex gap-2 items-center flex-wrap">
+                {meeting.attendees.map(attendee => (
+                  <div key={attendee.id} className="flex gap-2 items-center">
+                    <Avatar name={attendee.fullName ?? ""} />
+                    <Link
+                      to={`/organizations/${organizationId}/people/${attendee.id}`}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                      }}
+                      className="text-sm hover:underline"
+                    >
+                      {attendee.fullName}
+                    </Link>
+                  </div>
+                ))}
               </div>
-            ))}
-          </div>
-        ) : (
-          <span className="text-txt-tertiary text-sm">
-            {__("No attendees")}
-          </span>
-        )}
+            )
+          : (
+              <span className="text-txt-tertiary text-sm">
+                {__("No attendees")}
+              </span>
+            )}
       </Td>
       {meeting.canDelete && (
         <Td noLink width={50} className="text-end w-18">
diff --git a/apps/console/src/pages/organizations/meetings/dialogs/CreateMeetingDialog.tsx b/apps/console/src/pages/organizations/meetings/dialogs/CreateMeetingDialog.tsx
index c580d3185..b19eb6119 100644
--- a/apps/console/src/pages/organizations/meetings/dialogs/CreateMeetingDialog.tsx
+++ b/apps/console/src/pages/organizations/meetings/dialogs/CreateMeetingDialog.tsx
@@ -56,14 +56,14 @@ export function CreateMeetingDialog({ children, connectionId }: Props) {
   const { __ } = useTranslate();
   const dialogRef = useDialogRef();
   const organizationId = useOrganizationId();
-  const [createMeeting, isCreating] =
-    useMutation<CreateMeetingDialogCreateMutation>(createMeetingMutation);
+  const [createMeeting, isCreating]
+    = useMutation<CreateMeetingDialogCreateMutation>(createMeetingMutation);
   const { handleSubmit, register, control } = useFormWithSchema(
     meetingSchema,
     {},
   );
 
-  const onSubmit = handleSubmit((data) => {
+  const onSubmit = (data: z.infer<typeof meetingSchema>) => {
     createMeeting({
       variables: {
         input: {
@@ -78,11 +78,11 @@ export function CreateMeetingDialog({ children, connectionId }: Props) {
         dialogRef.current?.close();
       },
     });
-  });
+  };
 
   return (
     <Dialog ref={dialogRef} trigger={children} title={__("Create meeting")}>
-      <form onSubmit={onSubmit}>
+      <form onSubmit={e => void handleSubmit(onSubmit)(e)}>
         <DialogContent padded className="space-y-4">
           <Field label={__("Meeting name")} required>
             <Input
diff --git a/apps/console/src/pages/organizations/meetings/dialogs/UpdateMeetingMinutesDialog.tsx b/apps/console/src/pages/organizations/meetings/dialogs/UpdateMeetingMinutesDialog.tsx
index df12634c4..56d6b36f5 100644
--- a/apps/console/src/pages/organizations/meetings/dialogs/UpdateMeetingMinutesDialog.tsx
+++ b/apps/console/src/pages/organizations/meetings/dialogs/UpdateMeetingMinutesDialog.tsx
@@ -49,8 +49,8 @@ export const UpdateMeetingMinutesDialog = forwardRef<
     },
   }));
 
-  const onSubmit = handleSubmit((data) => {
-    updateMeeting({
+  const onSubmit = async (data: z.infer<typeof minutesSchema>) => {
+    await updateMeeting({
       variables: {
         input: {
           meetingId: meeting.id,
@@ -61,14 +61,14 @@ export const UpdateMeetingMinutesDialog = forwardRef<
         dialogRef.current?.close();
       },
     });
-  });
+  };
 
   return (
     <Dialog
       ref={dialogRef}
       title={<Breadcrumb items={[__("Meetings"), __("Edit minutes")]} />}
     >
-      <form onSubmit={onSubmit}>
+      <form onSubmit={e => void handleSubmit(onSubmit)(e)}>
         <DialogContent>
           <Textarea
             id="minutes"
diff --git a/apps/console/src/pages/organizations/meetings/tabs/MeetingMinutesTab.tsx b/apps/console/src/pages/organizations/meetings/tabs/MeetingMinutesTab.tsx
index e1cdaa9be..f3d15ef26 100644
--- a/apps/console/src/pages/organizations/meetings/tabs/MeetingMinutesTab.tsx
+++ b/apps/console/src/pages/organizations/meetings/tabs/MeetingMinutesTab.tsx
@@ -9,13 +9,15 @@ export default function MeetingMinutesTab() {
 
   return (
     <div>
-      {meeting.minutes ? (
-        <Markdown content={meeting.minutes} />
-      ) : (
-        <div className="text-txt-tertiary text-sm">
-          No minutes recorded yet. Click "Edit minutes" to add meeting minutes.
-        </div>
-      )}
+      {meeting.minutes
+        ? (
+            <Markdown content={meeting.minutes} />
+          )
+        : (
+            <div className="text-txt-tertiary text-sm">
+              No minutes recorded yet. Click "Edit minutes" to add meeting minutes.
+            </div>
+          )}
     </div>
   );
 }
diff --git a/apps/console/src/pages/organizations/nonconformities/NonconformitiesPage.tsx b/apps/console/src/pages/organizations/nonconformities/NonconformitiesPage.tsx
index e8ad2a817..3a5d6e86d 100644
--- a/apps/console/src/pages/organizations/nonconformities/NonconformitiesPage.tsx
+++ b/apps/console/src/pages/organizations/nonconformities/NonconformitiesPage.tsx
@@ -47,8 +47,8 @@ import type {
 } from "/__generated__/core/NonconformitiesPageFragment.graphql";
 import type { NonconformityGraphListQuery } from "/__generated__/core/NonconformityGraphListQuery.graphql";
 
-type Nonconformity =
-  NonconformitiesPageFragment$data["nonconformities"]["edges"][number]["node"];
+type Nonconformity
+  = NonconformitiesPageFragment$data["nonconformities"]["edges"][number]["node"];
 
 interface NonconformitiesPageProps {
   queryRef: PreloadedQuery<NonconformityGraphListQuery>;
@@ -138,12 +138,12 @@ export default function NonconformitiesPage({
     NonconformitiesConnectionKey,
     { filter: { snapshotId: snapshotId || null } },
   );
-  const nonconformities: Nonconformity[] =
-    nonconformitiesData?.nonconformities?.edges?.map((edge) => edge.node) ?? [];
+  const nonconformities: Nonconformity[]
+    = nonconformitiesData?.nonconformities?.edges?.map(edge => edge.node) ?? [];
 
-  const hasAnyAction =
-    !isSnapshotMode &&
-    nonconformities.some(({ canDelete, canUpdate }) => canDelete || canUpdate);
+  const hasAnyAction
+    = !isSnapshotMode
+      && nonconformities.some(({ canDelete, canUpdate }) => canDelete || canUpdate);
 
   return (
     <div className="space-y-6">
@@ -162,58 +162,60 @@ export default function NonconformitiesPage({
         )}
       </PageHeader>
 
-      {nonconformities.length === 0 ? (
-        <Card padded>
-          <div className="text-center py-12">
-            <h3 className="text-lg font-semibold mb-2">
-              {__("No nonconformities yet")}
-            </h3>
-            <p className="text-txt-tertiary mb-4">
-              {__("Create your first nonconformity to get started.")}
-            </p>
-          </div>
-        </Card>
-      ) : (
-        <Card>
-          <Table>
-            <Thead>
-              <Tr>
-                <Th>{__("Reference ID")}</Th>
-                <Th>{__("Description")}</Th>
-                <Th>{__("Status")}</Th>
-                <Th>{__("Audit")}</Th>
-                <Th>{__("Owner")}</Th>
-                <Th>{__("Due Date")}</Th>
-                {hasAnyAction && <Th>{__("Actions")}</Th>}
-              </Tr>
-            </Thead>
-            <Tbody>
-              {nonconformities.map((nonconformity) => (
-                <NonconformityRow
-                  key={nonconformity.id}
-                  nonconformity={nonconformity}
-                  connectionId={connectionId}
-                  isSnapshotMode={isSnapshotMode}
-                  snapshotId={snapshotId}
-                  hasAnyAction={hasAnyAction}
-                />
-              ))}
-            </Tbody>
-          </Table>
+      {nonconformities.length === 0
+        ? (
+            <Card padded>
+              <div className="text-center py-12">
+                <h3 className="text-lg font-semibold mb-2">
+                  {__("No nonconformities yet")}
+                </h3>
+                <p className="text-txt-tertiary mb-4">
+                  {__("Create your first nonconformity to get started.")}
+                </p>
+              </div>
+            </Card>
+          )
+        : (
+            <Card>
+              <Table>
+                <Thead>
+                  <Tr>
+                    <Th>{__("Reference ID")}</Th>
+                    <Th>{__("Description")}</Th>
+                    <Th>{__("Status")}</Th>
+                    <Th>{__("Audit")}</Th>
+                    <Th>{__("Owner")}</Th>
+                    <Th>{__("Due Date")}</Th>
+                    {hasAnyAction && <Th>{__("Actions")}</Th>}
+                  </Tr>
+                </Thead>
+                <Tbody>
+                  {nonconformities.map(nonconformity => (
+                    <NonconformityRow
+                      key={nonconformity.id}
+                      nonconformity={nonconformity}
+                      connectionId={connectionId}
+                      isSnapshotMode={isSnapshotMode}
+                      snapshotId={snapshotId}
+                      hasAnyAction={hasAnyAction}
+                    />
+                  ))}
+                </Tbody>
+              </Table>
 
-          {hasNext && (
-            <div className="p-4 border-t">
-              <Button
-                variant="secondary"
-                onClick={() => loadNext(10)}
-                disabled={!hasNext}
-              >
-                {__("Load more")}
-              </Button>
-            </div>
+              {hasNext && (
+                <div className="p-4 border-t">
+                  <Button
+                    variant="secondary"
+                    onClick={() => loadNext(10)}
+                    disabled={!hasNext}
+                  >
+                    {__("Load more")}
+                  </Button>
+                </div>
+              )}
+            </Card>
           )}
-        </Card>
-      )}
     </div>
   );
 }
@@ -283,25 +285,31 @@ function NonconformityRow({
         </Badge>
       </Td>
       <Td>
-        {nonconformity.audit ? (
-          nonconformity.audit.name ? (
-            `${nonconformity.audit.framework?.name} - ${nonconformity.audit.name}`
-          ) : (
-            nonconformity.audit.framework?.name
-          )
-        ) : (
-          <span className="text-txt-tertiary">{__("No audit")}</span>
-        )}
+        {nonconformity.audit
+          ? (
+              nonconformity.audit.name
+                ? (
+                    `${nonconformity.audit.framework?.name} - ${nonconformity.audit.name}`
+                  )
+                : (
+                    nonconformity.audit.framework?.name
+                  )
+            )
+          : (
+              <span className="text-txt-tertiary">{__("No audit")}</span>
+            )}
       </Td>
       <Td>{nonconformity.owner.fullName}</Td>
       <Td>
-        {nonconformity.dueDate ? (
-          <time dateTime={nonconformity.dueDate}>
-            {formatDate(nonconformity.dueDate)}
-          </time>
-        ) : (
-          <span className="text-txt-tertiary">{__("No due date")}</span>
-        )}
+        {nonconformity.dueDate
+          ? (
+              <time dateTime={nonconformity.dueDate}>
+                {formatDate(nonconformity.dueDate)}
+              </time>
+            )
+          : (
+              <span className="text-txt-tertiary">{__("No due date")}</span>
+            )}
       </Td>
       {hasAnyAction && (
         <Td noLink width={50} className="text-end">
diff --git a/apps/console/src/pages/organizations/nonconformities/NonconformityDetailsPage.tsx b/apps/console/src/pages/organizations/nonconformities/NonconformityDetailsPage.tsx
index dc2a1d2df..b0859ba5c 100644
--- a/apps/console/src/pages/organizations/nonconformities/NonconformityDetailsPage.tsx
+++ b/apps/console/src/pages/organizations/nonconformities/NonconformityDetailsPage.tsx
@@ -61,8 +61,8 @@ type Props = {
 };
 
 export default function NonconformityDetailsPage(props: Props) {
-  const { node: nonconformity } =
-    usePreloadedQuery<NonconformityGraphNodeQuery>(
+  const { node: nonconformity }
+    = usePreloadedQuery<NonconformityGraphNodeQuery>(
       nonconformityNodeQuery,
       props.queryRef,
     );
@@ -82,8 +82,8 @@ export default function NonconformityDetailsPage(props: Props) {
     ),
   );
 
-  const { control, formState, handleSubmit, register, reset } =
-    useFormWithSchema(updateNonconformitySchema, {
+  const { control, formState, handleSubmit, register, reset }
+    = useFormWithSchema(updateNonconformitySchema, {
       defaultValues: {
         referenceId: nonconformity.referenceId || "",
         description: nonconformity.description || "",
@@ -183,7 +183,7 @@ export default function NonconformityDetailsPage(props: Props) {
 
       <div className="max-w-4xl">
         <Card padded>
-          <form onSubmit={onSubmit} className="space-y-6">
+          <form onSubmit={e => void onSubmit(e)} className="space-y-6">
             <Field
               label={__("Reference ID")}
               required
@@ -223,7 +223,7 @@ export default function NonconformityDetailsPage(props: Props) {
                 required
                 disabled={isSnapshotMode}
               >
-                {statusOptions.map((option) => (
+                {statusOptions.map(option => (
                   <Option key={option.value} value={option.value}>
                     {option.label}
                   </Option>
@@ -291,13 +291,13 @@ export default function NonconformityDetailsPage(props: Props) {
             </Field>
 
             <div className="flex justify-end">
-              {formState.isDirty &&
-                !isSnapshotMode &&
-                nonconformity.canUpdate && (
-                  <Button type="submit" disabled={formState.isSubmitting}>
-                    {formState.isSubmitting ? __("Updating...") : __("Update")}
-                  </Button>
-                )}
+              {formState.isDirty
+                && !isSnapshotMode
+                && nonconformity.canUpdate && (
+                <Button type="submit" disabled={formState.isSubmitting}>
+                  {formState.isSubmitting ? __("Updating...") : __("Update")}
+                </Button>
+              )}
             </div>
           </form>
         </Card>
diff --git a/apps/console/src/pages/organizations/nonconformities/dialogs/CreateNonconformityDialog.tsx b/apps/console/src/pages/organizations/nonconformities/dialogs/CreateNonconformityDialog.tsx
index dfb5d9437..e40398b95 100644
--- a/apps/console/src/pages/organizations/nonconformities/dialogs/CreateNonconformityDialog.tsx
+++ b/apps/console/src/pages/organizations/nonconformities/dialogs/CreateNonconformityDialog.tsx
@@ -72,7 +72,7 @@ export function CreateNonconformityDialog({
     },
   });
 
-  const onSubmit = handleSubmit(async (formData: FormData) => {
+  const onSubmit = async (formData: FormData) => {
     try {
       await createNonconformity({
         organizationId,
@@ -103,7 +103,7 @@ export function CreateNonconformityDialog({
         variant: "error",
       });
     }
-  });
+  };
 
   return (
     <Dialog
@@ -112,7 +112,7 @@ export function CreateNonconformityDialog({
       title={<Breadcrumb items={[__("Nonconformities"), __("Create")]} />}
       className="max-w-2xl"
     >
-      <form onSubmit={onSubmit}>
+      <form onSubmit={e => void handleSubmit(onSubmit)(e)}>
         <DialogContent padded className="space-y-4">
           <Field
             label={__("Reference ID")}
@@ -153,7 +153,7 @@ export function CreateNonconformityDialog({
                     value={field.value}
                     className="w-full"
                   >
-                    {statusOptions.map((option) => (
+                    {statusOptions.map(option => (
                       <Option key={option.value} value={option.value}>
                         {option.label}
                       </Option>
@@ -203,7 +203,11 @@ export function CreateNonconformityDialog({
           </div>
 
           <div className="space-y-2">
-            <Label htmlFor="rootCause">{__("Root Cause")} *</Label>
+            <Label htmlFor="rootCause">
+              {__("Root Cause")}
+              {" "}
+              *
+            </Label>
             <Textarea
               id="rootCause"
               {...register("rootCause")}
diff --git a/apps/console/src/pages/organizations/obligations/ObligationDetailsPage.tsx b/apps/console/src/pages/organizations/obligations/ObligationDetailsPage.tsx
index fcadbf812..8a88bc612 100644
--- a/apps/console/src/pages/organizations/obligations/ObligationDetailsPage.tsx
+++ b/apps/console/src/pages/organizations/obligations/ObligationDetailsPage.tsx
@@ -1,28 +1,28 @@
 import {
-    ConnectionHandler,
-    usePreloadedQuery,
-    type PreloadedQuery,
+  ConnectionHandler,
+  usePreloadedQuery,
+  type PreloadedQuery,
 } from "react-relay";
 import {
-    obligationNodeQuery,
-    useDeleteObligation,
-    useUpdateObligation,
-    ObligationsConnectionKey,
+  obligationNodeQuery,
+  useDeleteObligation,
+  useUpdateObligation,
+  ObligationsConnectionKey,
 } from "../../../hooks/graph/ObligationGraph";
 import {
-    ActionDropdown,
-    Badge,
-    Breadcrumb,
-    Button,
-    DropdownItem,
-    Field,
-    IconTrashCan,
-    Option,
-    Input,
-    Card,
-    Textarea,
-    useToast,
-    Select,
+  ActionDropdown,
+  Badge,
+  Breadcrumb,
+  Button,
+  DropdownItem,
+  Field,
+  IconTrashCan,
+  Option,
+  Input,
+  Card,
+  Textarea,
+  useToast,
+  Select,
 } from "@probo/ui";
 import { useTranslate } from "@probo/i18n";
 import { useParams } from "react-router";
@@ -33,351 +33,351 @@ import { Controller } from "react-hook-form";
 import { formatError, type GraphQLError } from "@probo/helpers";
 import z from "zod";
 import {
-    getObligationStatusVariant,
-    getObligationStatusLabel,
-    formatDatetime,
-    getObligationStatusOptions,
-    validateSnapshotConsistency,
-    getObligationTypeOptions,
+  getObligationStatusVariant,
+  getObligationStatusLabel,
+  formatDatetime,
+  getObligationStatusOptions,
+  validateSnapshotConsistency,
+  getObligationTypeOptions,
 } from "@probo/helpers";
 import { SnapshotBanner } from "/components/SnapshotBanner";
 import type { ObligationGraphNodeQuery } from "/__generated__/core/ObligationGraphNodeQuery.graphql";
 
 const updateObligationSchema = z.object({
-    area: z.string().optional(),
-    source: z.string().optional(),
-    requirement: z.string().optional(),
-    actionsToBeImplemented: z.string().optional(),
-    regulator: z.string().optional(),
-    type: z.enum(["LEGAL", "CONTRACTUAL"]),
-    lastReviewDate: z.string().optional(),
-    dueDate: z.string().optional(),
-    status: z.enum(["NON_COMPLIANT", "PARTIALLY_COMPLIANT", "COMPLIANT"]),
-    ownerId: z.string().min(1, "Owner is required"),
+  area: z.string().optional(),
+  source: z.string().optional(),
+  requirement: z.string().optional(),
+  actionsToBeImplemented: z.string().optional(),
+  regulator: z.string().optional(),
+  type: z.enum(["LEGAL", "CONTRACTUAL"]),
+  lastReviewDate: z.string().optional(),
+  dueDate: z.string().optional(),
+  status: z.enum(["NON_COMPLIANT", "PARTIALLY_COMPLIANT", "COMPLIANT"]),
+  ownerId: z.string().min(1, "Owner is required"),
 });
 
 type Props = {
-    queryRef: PreloadedQuery<ObligationGraphNodeQuery>;
+  queryRef: PreloadedQuery<ObligationGraphNodeQuery>;
 };
 
 export default function ObligationDetailsPage(props: Props) {
-    const { queryRef } = props;
-    const { node: obligation } = usePreloadedQuery<ObligationGraphNodeQuery>(
-        obligationNodeQuery,
-        queryRef,
-    );
-    const { __ } = useTranslate();
-    const { toast } = useToast();
-    const organizationId = useOrganizationId();
-    const { snapshotId } = useParams<{ snapshotId?: string }>();
-    const isSnapshotMode = Boolean(snapshotId);
+  const { queryRef } = props;
+  const { node: obligation } = usePreloadedQuery<ObligationGraphNodeQuery>(
+    obligationNodeQuery,
+    queryRef,
+  );
+  const { __ } = useTranslate();
+  const { toast } = useToast();
+  const organizationId = useOrganizationId();
+  const { snapshotId } = useParams<{ snapshotId?: string }>();
+  const isSnapshotMode = Boolean(snapshotId);
 
-    const disabled = isSnapshotMode || !obligation.canUpdate;
+  const disabled = isSnapshotMode || !obligation.canUpdate;
 
-    validateSnapshotConsistency(obligation, snapshotId);
+  validateSnapshotConsistency(obligation, snapshotId);
 
-    const updateObligation = useUpdateObligation();
-    const statusOptions = getObligationStatusOptions(__);
-    const typeOptions = getObligationTypeOptions(__);
+  const updateObligation = useUpdateObligation();
+  const statusOptions = getObligationStatusOptions(__);
+  const typeOptions = getObligationTypeOptions(__);
 
-    const connectionId = ConnectionHandler.getConnectionID(
-        organizationId,
-        ObligationsConnectionKey,
-    );
+  const connectionId = ConnectionHandler.getConnectionID(
+    organizationId,
+    ObligationsConnectionKey,
+  );
 
-    const deleteObligation = useDeleteObligation(
-        { id: obligation?.id ?? "" },
-        connectionId,
-    );
+  const deleteObligation = useDeleteObligation(
+    { id: obligation?.id ?? "" },
+    connectionId,
+  );
 
-    const { register, handleSubmit, formState, control } = useFormWithSchema(
-        updateObligationSchema,
-        {
-            defaultValues: {
-                area: obligation?.area || "",
-                source: obligation?.source || "",
-                requirement: obligation?.requirement || "",
-                actionsToBeImplemented:
+  const { register, handleSubmit, formState, control } = useFormWithSchema(
+    updateObligationSchema,
+    {
+      defaultValues: {
+        area: obligation?.area || "",
+        source: obligation?.source || "",
+        requirement: obligation?.requirement || "",
+        actionsToBeImplemented:
                     obligation?.actionsToBeImplemented || "",
-                regulator: obligation?.regulator || "",
-                type: obligation?.type ?? "LEGAL",
-                lastReviewDate: obligation?.lastReviewDate
-                    ? new Date(obligation.lastReviewDate)
-                          .toISOString()
-                          .split("T")[0]
-                    : "",
-                dueDate: obligation?.dueDate
-                    ? new Date(obligation.dueDate).toISOString().split("T")[0]
-                    : "",
-                status: obligation?.status ?? "NON_COMPLIANT",
-                ownerId: obligation?.owner?.id || "",
-            },
-        },
-    );
+        regulator: obligation?.regulator || "",
+        type: obligation?.type ?? "LEGAL",
+        lastReviewDate: obligation?.lastReviewDate
+          ? new Date(obligation.lastReviewDate)
+            .toISOString()
+            .split("T")[0]
+          : "",
+        dueDate: obligation?.dueDate
+          ? new Date(obligation.dueDate).toISOString().split("T")[0]
+          : "",
+        status: obligation?.status ?? "NON_COMPLIANT",
+        ownerId: obligation?.owner?.id || "",
+      },
+    },
+  );
 
-    const onSubmit = handleSubmit(async (formData) => {
-        try {
-            await updateObligation({
-                id: obligation.id!,
-                area: formData.area || undefined,
-                source: formData.source || undefined,
-                requirement: formData.requirement || undefined,
-                actionsToBeImplemented:
+  const onSubmit = handleSubmit(async (formData) => {
+    try {
+      await updateObligation({
+        id: obligation.id!,
+        area: formData.area || undefined,
+        source: formData.source || undefined,
+        requirement: formData.requirement || undefined,
+        actionsToBeImplemented:
                     formData.actionsToBeImplemented || undefined,
-                regulator: formData.regulator || undefined,
-                type: formData.type,
-                lastReviewDate: formatDatetime(formData.lastReviewDate) ?? null,
-                dueDate: formatDatetime(formData.dueDate) ?? null,
-                status: formData.status,
-                ownerId: formData.ownerId,
-            });
+        regulator: formData.regulator || undefined,
+        type: formData.type,
+        lastReviewDate: formatDatetime(formData.lastReviewDate) ?? null,
+        dueDate: formatDatetime(formData.dueDate) ?? null,
+        status: formData.status,
+        ownerId: formData.ownerId,
+      });
 
-            toast({
-                title: __("Success"),
-                description: __("Obligation updated successfully"),
-                variant: "success",
-            });
-        } catch (error) {
-            toast({
-                title: __("Error"),
-                description: formatError(
-                    __("Failed to update obligation"),
-                    error as GraphQLError,
-                ),
-                variant: "error",
-            });
-        }
-    });
+      toast({
+        title: __("Success"),
+        description: __("Obligation updated successfully"),
+        variant: "success",
+      });
+    } catch (error) {
+      toast({
+        title: __("Error"),
+        description: formatError(
+          __("Failed to update obligation"),
+          error as GraphQLError,
+        ),
+        variant: "error",
+      });
+    }
+  });
 
-    const breadcrumbObligationsUrl = isSnapshotMode
-        ? `/organizations/${organizationId}/snapshots/${snapshotId}/obligations`
-        : `/organizations/${organizationId}/obligations`;
+  const breadcrumbObligationsUrl = isSnapshotMode
+    ? `/organizations/${organizationId}/snapshots/${snapshotId}/obligations`
+    : `/organizations/${organizationId}/obligations`;
 
-    return (
-        <div className="space-y-6">
-            {isSnapshotMode && snapshotId && (
-                <SnapshotBanner snapshotId={snapshotId} />
-            )}
-            <div className="flex justify-between items-start">
-                <div>
-                    <Breadcrumb
-                        items={[
-                            {
-                                label: __("Obligations"),
-                                to: breadcrumbObligationsUrl,
-                            },
-                            { label: __("Obligation Details") },
-                        ]}
-                    />
-                    <div className="flex items-center gap-3 mt-2">
-                        <h1 className="text-2xl font-bold">
-                            {__("Obligation")}
-                        </h1>
-                        <Badge
-                            variant={getObligationStatusVariant(
-                                obligation.status ?? "NON_COMPLIANT",
-                            )}
-                        >
-                            {getObligationStatusLabel(
-                                obligation.status ?? "NON_COMPLIANT",
-                            )}
-                        </Badge>
-                    </div>
-                </div>
-
-                {!isSnapshotMode && obligation.canDelete && (
-                    <ActionDropdown>
-                        <DropdownItem
-                            icon={IconTrashCan}
-                            onClick={deleteObligation}
-                        >
-                            {__("Delete")}
-                        </DropdownItem>
-                    </ActionDropdown>
-                )}
-            </div>
-
-            <Card padded>
-                <form onSubmit={onSubmit} className="space-y-6">
-                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                        <Field
-                            label={__("Area")}
-                            error={formState.errors.area?.message}
-                        >
-                            <Input
-                                {...register("area")}
-                                placeholder={__("Enter area")}
-                                disabled={disabled}
-                            />
-                        </Field>
-
-                        <Field
-                            label={__("Source")}
-                            error={formState.errors.source?.message}
-                        >
-                            <Input
-                                {...register("source")}
-                                placeholder={__("Enter source")}
-                                disabled={disabled}
-                            />
-                        </Field>
-                    </div>
-
-                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                        <Field label={__("Status")}>
-                            <Controller
-                                control={control}
-                                name="status"
-                                render={({ field }) => (
-                                    <Select
-                                        variant="editor"
-                                        placeholder={__("Select status")}
-                                        onValueChange={field.onChange}
-                                        value={field.value}
-                                        className="w-full"
-                                        disabled={disabled}
-                                    >
-                                        {statusOptions.map((option) => (
-                                            <Option
-                                                key={option.value}
-                                                value={option.value}
-                                            >
-                                                {option.label}
-                                            </Option>
-                                        ))}
-                                    </Select>
-                                )}
-                            />
-                            {formState.errors.status && (
-                                <p className="text-sm text-red-500 mt-1">
-                                    {formState.errors.status.message}
-                                </p>
-                            )}
-                        </Field>
-
-                        <Controller
-                            name="ownerId"
-                            control={control}
-                            render={() => (
-                                <PeopleSelectField
-                                    organizationId={organizationId}
-                                    control={control}
-                                    name="ownerId"
-                                    label={__("Owner")}
-                                    error={formState.errors.ownerId?.message}
-                                    required
-                                    disabled={disabled}
-                                />
-                            )}
-                        />
-                    </div>
-
-                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                        <Field
-                            label={__("Regulator")}
-                            error={formState.errors.regulator?.message}
-                        >
-                            <Input
-                                {...register("regulator")}
-                                placeholder={__("Enter regulator")}
-                                disabled={disabled}
-                            />
-                        </Field>
-
-                        <Field
-                            label={__("Type")}
-                            error={formState.errors.type?.message}
-                        >
-                            <Controller
-                                control={control}
-                                name="type"
-                                render={({ field }) => (
-                                    <Select
-                                        variant="editor"
-                                        placeholder={__("Select type")}
-                                        onValueChange={field.onChange}
-                                        value={field.value}
-                                        className="w-full"
-                                        disabled={disabled}
-                                    >
-                                        {typeOptions.map((option) => (
-                                            <Option
-                                                key={option.value}
-                                                value={option.value}
-                                            >
-                                                {option.label}
-                                            </Option>
-                                        ))}
-                                    </Select>
-                                )}
-                            />
-                        </Field>
-                    </div>
-
-                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                        <Field
-                            label={__("Last Review Date")}
-                            error={formState.errors.lastReviewDate?.message}
-                        >
-                            <Input
-                                {...register("lastReviewDate")}
-                                type="date"
-                                disabled={disabled}
-                            />
-                        </Field>
-
-                        <Field
-                            label={__("Due Date")}
-                            error={formState.errors.dueDate?.message}
-                        >
-                            <Input
-                                {...register("dueDate")}
-                                type="date"
-                                disabled={disabled}
-                            />
-                        </Field>
-                    </div>
-
-                    <Field
-                        label={__("Requirement")}
-                        error={formState.errors.requirement?.message}
-                    >
-                        <Textarea
-                            {...register("requirement")}
-                            placeholder={__("Enter requirement")}
-                            rows={4}
-                            disabled={disabled}
-                        />
-                    </Field>
-
-                    <Field
-                        label={__("Actions to be Implemented")}
-                        error={formState.errors.actionsToBeImplemented?.message}
-                    >
-                        <Textarea
-                            {...register("actionsToBeImplemented")}
-                            placeholder={__("Enter actions to be implemented")}
-                            rows={4}
-                            disabled={disabled}
-                        />
-                    </Field>
-
-                    {!isSnapshotMode && (
-                        <div className="flex justify-end">
-                            {obligation.canUpdate && (
-                                <Button
-                                    type="submit"
-                                    disabled={formState.isSubmitting}
-                                >
-                                    {formState.isSubmitting
-                                        ? __("Saving...")
-                                        : __("Save Changes")}
-                                </Button>
-                            )}
-                        </div>
-                    )}
-                </form>
-            </Card>
+  return (
+    <div className="space-y-6">
+      {isSnapshotMode && snapshotId && (
+        <SnapshotBanner snapshotId={snapshotId} />
+      )}
+      <div className="flex justify-between items-start">
+        <div>
+          <Breadcrumb
+            items={[
+              {
+                label: __("Obligations"),
+                to: breadcrumbObligationsUrl,
+              },
+              { label: __("Obligation Details") },
+            ]}
+          />
+          <div className="flex items-center gap-3 mt-2">
+            <h1 className="text-2xl font-bold">
+              {__("Obligation")}
+            </h1>
+            <Badge
+              variant={getObligationStatusVariant(
+                obligation.status ?? "NON_COMPLIANT",
+              )}
+            >
+              {getObligationStatusLabel(
+                obligation.status ?? "NON_COMPLIANT",
+              )}
+            </Badge>
+          </div>
         </div>
-    );
+
+        {!isSnapshotMode && obligation.canDelete && (
+          <ActionDropdown>
+            <DropdownItem
+              icon={IconTrashCan}
+              onClick={deleteObligation}
+            >
+              {__("Delete")}
+            </DropdownItem>
+          </ActionDropdown>
+        )}
+      </div>
+
+      <Card padded>
+        <form onSubmit={e => void onSubmit(e)} className="space-y-6">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <Field
+              label={__("Area")}
+              error={formState.errors.area?.message}
+            >
+              <Input
+                {...register("area")}
+                placeholder={__("Enter area")}
+                disabled={disabled}
+              />
+            </Field>
+
+            <Field
+              label={__("Source")}
+              error={formState.errors.source?.message}
+            >
+              <Input
+                {...register("source")}
+                placeholder={__("Enter source")}
+                disabled={disabled}
+              />
+            </Field>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <Field label={__("Status")}>
+              <Controller
+                control={control}
+                name="status"
+                render={({ field }) => (
+                  <Select
+                    variant="editor"
+                    placeholder={__("Select status")}
+                    onValueChange={field.onChange}
+                    value={field.value}
+                    className="w-full"
+                    disabled={disabled}
+                  >
+                    {statusOptions.map(option => (
+                      <Option
+                        key={option.value}
+                        value={option.value}
+                      >
+                        {option.label}
+                      </Option>
+                    ))}
+                  </Select>
+                )}
+              />
+              {formState.errors.status && (
+                <p className="text-sm text-red-500 mt-1">
+                  {formState.errors.status.message}
+                </p>
+              )}
+            </Field>
+
+            <Controller
+              name="ownerId"
+              control={control}
+              render={() => (
+                <PeopleSelectField
+                  organizationId={organizationId}
+                  control={control}
+                  name="ownerId"
+                  label={__("Owner")}
+                  error={formState.errors.ownerId?.message}
+                  required
+                  disabled={disabled}
+                />
+              )}
+            />
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <Field
+              label={__("Regulator")}
+              error={formState.errors.regulator?.message}
+            >
+              <Input
+                {...register("regulator")}
+                placeholder={__("Enter regulator")}
+                disabled={disabled}
+              />
+            </Field>
+
+            <Field
+              label={__("Type")}
+              error={formState.errors.type?.message}
+            >
+              <Controller
+                control={control}
+                name="type"
+                render={({ field }) => (
+                  <Select
+                    variant="editor"
+                    placeholder={__("Select type")}
+                    onValueChange={field.onChange}
+                    value={field.value}
+                    className="w-full"
+                    disabled={disabled}
+                  >
+                    {typeOptions.map(option => (
+                      <Option
+                        key={option.value}
+                        value={option.value}
+                      >
+                        {option.label}
+                      </Option>
+                    ))}
+                  </Select>
+                )}
+              />
+            </Field>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <Field
+              label={__("Last Review Date")}
+              error={formState.errors.lastReviewDate?.message}
+            >
+              <Input
+                {...register("lastReviewDate")}
+                type="date"
+                disabled={disabled}
+              />
+            </Field>
+
+            <Field
+              label={__("Due Date")}
+              error={formState.errors.dueDate?.message}
+            >
+              <Input
+                {...register("dueDate")}
+                type="date"
+                disabled={disabled}
+              />
+            </Field>
+          </div>
+
+          <Field
+            label={__("Requirement")}
+            error={formState.errors.requirement?.message}
+          >
+            <Textarea
+              {...register("requirement")}
+              placeholder={__("Enter requirement")}
+              rows={4}
+              disabled={disabled}
+            />
+          </Field>
+
+          <Field
+            label={__("Actions to be Implemented")}
+            error={formState.errors.actionsToBeImplemented?.message}
+          >
+            <Textarea
+              {...register("actionsToBeImplemented")}
+              placeholder={__("Enter actions to be implemented")}
+              rows={4}
+              disabled={disabled}
+            />
+          </Field>
+
+          {!isSnapshotMode && (
+            <div className="flex justify-end">
+              {obligation.canUpdate && (
+                <Button
+                  type="submit"
+                  disabled={formState.isSubmitting}
+                >
+                  {formState.isSubmitting
+                    ? __("Saving...")
+                    : __("Save Changes")}
+                </Button>
+              )}
+            </div>
+          )}
+        </form>
+      </Card>
+    </div>
+  );
 }
diff --git a/apps/console/src/pages/organizations/obligations/ObligationsPage.tsx b/apps/console/src/pages/organizations/obligations/ObligationsPage.tsx
index d4a1ba5d4..6b3b488d0 100644
--- a/apps/console/src/pages/organizations/obligations/ObligationsPage.tsx
+++ b/apps/console/src/pages/organizations/obligations/ObligationsPage.tsx
@@ -44,8 +44,8 @@ import type {
 } from "/__generated__/core/ObligationsPageFragment.graphql";
 import type { ObligationGraphListQuery } from "/__generated__/core/ObligationGraphListQuery.graphql";
 
-type Obligation =
-  ObligationsPageFragment$data["obligations"]["edges"][number]["node"];
+type Obligation
+  = ObligationsPageFragment$data["obligations"]["edges"][number]["node"];
 
 interface ObligationsPageProps {
   queryRef: PreloadedQuery<ObligationGraphListQuery>;
@@ -118,12 +118,12 @@ export default function ObligationsPage({ queryRef }: ObligationsPageProps) {
   );
 
   const connectionId = obligationsData?.obligations?.__id || "";
-  const obligations: Obligation[] =
-    obligationsData?.obligations?.edges?.map((edge) => edge.node) ?? [];
+  const obligations: Obligation[]
+    = obligationsData?.obligations?.edges?.map(edge => edge.node) ?? [];
 
-  const hasAnyAction =
-    !isSnapshotMode &&
-    obligations.some(({ canUpdate, canDelete }) => canDelete || canUpdate);
+  const hasAnyAction
+    = !isSnapshotMode
+      && obligations.some(({ canUpdate, canDelete }) => canDelete || canUpdate);
 
   return (
     <div className="space-y-6">
@@ -144,56 +144,58 @@ export default function ObligationsPage({ queryRef }: ObligationsPageProps) {
         )}
       </PageHeader>
 
-      {obligations.length === 0 ? (
-        <Card padded>
-          <div className="text-center py-12">
-            <h3 className="text-lg font-semibold mb-2">
-              {__("No obligations yet")}
-            </h3>
-            <p className="text-txt-tertiary mb-4">
-              {__("Create your first obligation to get started.")}
-            </p>
-          </div>
-        </Card>
-      ) : (
-        <Card>
-          <Table>
-            <Thead>
-              <Tr>
-                <Th>{__("Area")}</Th>
-                <Th>{__("Source")}</Th>
-                <Th>{__("Status")}</Th>
-                <Th>{__("Owner")}</Th>
-                <Th>{__("Due Date")}</Th>
-                {hasAnyAction && <Th>{__("Actions")}</Th>}
-              </Tr>
-            </Thead>
-            <Tbody>
-              {obligations.map((obligation) => (
-                <ObligationRow
-                  key={obligation.id}
-                  obligation={obligation}
-                  connectionId={connectionId}
-                  snapshotId={snapshotId}
-                  hasAnyAction={hasAnyAction}
-                />
-              ))}
-            </Tbody>
-          </Table>
+      {obligations.length === 0
+        ? (
+            <Card padded>
+              <div className="text-center py-12">
+                <h3 className="text-lg font-semibold mb-2">
+                  {__("No obligations yet")}
+                </h3>
+                <p className="text-txt-tertiary mb-4">
+                  {__("Create your first obligation to get started.")}
+                </p>
+              </div>
+            </Card>
+          )
+        : (
+            <Card>
+              <Table>
+                <Thead>
+                  <Tr>
+                    <Th>{__("Area")}</Th>
+                    <Th>{__("Source")}</Th>
+                    <Th>{__("Status")}</Th>
+                    <Th>{__("Owner")}</Th>
+                    <Th>{__("Due Date")}</Th>
+                    {hasAnyAction && <Th>{__("Actions")}</Th>}
+                  </Tr>
+                </Thead>
+                <Tbody>
+                  {obligations.map(obligation => (
+                    <ObligationRow
+                      key={obligation.id}
+                      obligation={obligation}
+                      connectionId={connectionId}
+                      snapshotId={snapshotId}
+                      hasAnyAction={hasAnyAction}
+                    />
+                  ))}
+                </Tbody>
+              </Table>
 
-          {hasNext && (
-            <div className="p-4 border-t">
-              <Button
-                variant="secondary"
-                onClick={() => loadNext(10)}
-                disabled={!hasNext}
-              >
-                {__("Load more")}
-              </Button>
-            </div>
+              {hasNext && (
+                <div className="p-4 border-t">
+                  <Button
+                    variant="secondary"
+                    onClick={() => loadNext(10)}
+                    disabled={!hasNext}
+                  >
+                    {__("Load more")}
+                  </Button>
+                </div>
+              )}
+            </Card>
           )}
-        </Card>
-      )}
     </div>
   );
 }
@@ -253,13 +255,15 @@ function ObligationRow({
       </Td>
       <Td>{obligation.owner?.fullName || "-"}</Td>
       <Td>
-        {obligation.dueDate ? (
-          <time dateTime={obligation.dueDate}>
-            {formatDate(obligation.dueDate)}
-          </time>
-        ) : (
-          <span className="text-txt-tertiary">{__("No due date")}</span>
-        )}
+        {obligation.dueDate
+          ? (
+              <time dateTime={obligation.dueDate}>
+                {formatDate(obligation.dueDate)}
+              </time>
+            )
+          : (
+              <span className="text-txt-tertiary">{__("No due date")}</span>
+            )}
       </Td>
       {hasAnyAction && (
         <Td noLink width={50} className="text-end">
diff --git a/apps/console/src/pages/organizations/obligations/dialogs/CreateObligationDialog.tsx b/apps/console/src/pages/organizations/obligations/dialogs/CreateObligationDialog.tsx
index 4e871e96d..72bd1ebed 100644
--- a/apps/console/src/pages/organizations/obligations/dialogs/CreateObligationDialog.tsx
+++ b/apps/console/src/pages/organizations/obligations/dialogs/CreateObligationDialog.tsx
@@ -72,7 +72,7 @@ export function CreateObligationDialog({
     },
   });
 
-  const onSubmit = handleSubmit(async (formData: FormData) => {
+  const onSubmit = async (formData: FormData) => {
     try {
       await createObligation({
         organizationId,
@@ -103,7 +103,7 @@ export function CreateObligationDialog({
         variant: "error",
       });
     }
-  });
+  };
 
   return (
     <Dialog
@@ -112,7 +112,7 @@ export function CreateObligationDialog({
       title={<Breadcrumb items={[__("Obligations"), __("Create Obligation")]} />}
       className="max-w-2xl"
     >
-      <form onSubmit={onSubmit}>
+      <form onSubmit={e => void handleSubmit(onSubmit)(e)}>
         <DialogContent padded className="space-y-4">
           <div className="grid grid-cols-2 gap-4">
             <Field
@@ -143,7 +143,7 @@ export function CreateObligationDialog({
                     value={field.value}
                     className="w-full"
                   >
-                    {statusOptions.map((option) => (
+                    {statusOptions.map(option => (
                       <Option key={option.value} value={option.value}>
                         {option.label}
                       </Option>
@@ -186,7 +186,7 @@ export function CreateObligationDialog({
                     value={field.value}
                     className="w-full"
                   >
-                    {typeOptions.map((option) => (
+                    {typeOptions.map(option => (
                       <Option key={option.value} value={option.value}>
                         {option.label}
                       </Option>
diff --git a/apps/console/src/pages/organizations/people/PeopleListPage.tsx b/apps/console/src/pages/organizations/people/PeopleListPage.tsx
index 19acee62c..bb5ce6c15 100644
--- a/apps/console/src/pages/organizations/people/PeopleListPage.tsx
+++ b/apps/console/src/pages/organizations/people/PeopleListPage.tsx
@@ -59,7 +59,7 @@ export default function PeopleListPage({
   usePageTitle(__("Members"));
 
   const hasAnyAction = people.some(
-    ({ canDelete, canUpdate }) => canDelete || canUpdate
+    ({ canDelete, canUpdate }) => canDelete || canUpdate,
   );
 
   return (
@@ -67,7 +67,7 @@ export default function PeopleListPage({
       <PageHeader
         title={__("Members")}
         description={__(
-          "Keep track of your company's workforce and their progress towards completing tasks assigned to them."
+          "Keep track of your company's workforce and their progress towards completing tasks assigned to them.",
         )}
       >
         {data.canCreatePeople && (
@@ -91,7 +91,7 @@ export default function PeopleListPage({
           </Tr>
         </Thead>
         <Tbody>
-          {people.map((person) => (
+          {people.map(person => (
             <PeopleRow
               key={person.id}
               people={person}
diff --git a/apps/console/src/pages/organizations/people/dialogs/CreatePeopleDialog.tsx b/apps/console/src/pages/organizations/people/dialogs/CreatePeopleDialog.tsx
index 21462d85b..58805b5d3 100644
--- a/apps/console/src/pages/organizations/people/dialogs/CreatePeopleDialog.tsx
+++ b/apps/console/src/pages/organizations/people/dialogs/CreatePeopleDialog.tsx
@@ -30,7 +30,7 @@ const schema = z.object({
   primaryEmailAddress: z.string().email(),
   additionalEmailAddresses: z.preprocess(
     // Empty additional emails are skipped
-    (v) => (v as string[]).filter((v) => !!v),
+    v => (v as string[]).filter(v => !!v),
     z.array(z.string().email()),
   ),
   kind: z.enum(peopleRoles),
@@ -73,8 +73,8 @@ export function CreatePeopleDialog({ children, connectionId }: Props) {
     errorMessage: __("Failed to create person"),
   });
 
-  const onSubmit = handleSubmit((data) => {
-    mutate({
+  const onSubmit = async (data: z.infer<typeof schema>) => {
+    await mutate({
       variables: {
         input: {
           ...data,
@@ -88,7 +88,7 @@ export function CreatePeopleDialog({ children, connectionId }: Props) {
         ref.current?.close();
       },
     });
-  });
+  };
 
   return (
     <Dialog
@@ -96,7 +96,7 @@ export function CreatePeopleDialog({ children, connectionId }: Props) {
       trigger={children}
       title={<Breadcrumb items={[__("People"), __("New Person")]} />}
     >
-      <form onSubmit={onSubmit}>
+      <form onSubmit={e => void handleSubmit(onSubmit)(e)}>
         <DialogContent padded className="space-y-4">
           <Field
             label={__("Full name")}
@@ -120,7 +120,7 @@ export function CreatePeopleDialog({ children, connectionId }: Props) {
             type="select"
             label={__("Role")}
           >
-            {getRoles(__).map((role) => (
+            {getRoles(__).map(role => (
               <Option key={role.value} value={role.value}>
                 {role.label}
               </Option>
diff --git a/apps/console/src/pages/organizations/people/dialogs/SetEndOfContractDialog.tsx b/apps/console/src/pages/organizations/people/dialogs/SetEndOfContractDialog.tsx
index af0cb4e47..38a57c1c0 100644
--- a/apps/console/src/pages/organizations/people/dialogs/SetEndOfContractDialog.tsx
+++ b/apps/console/src/pages/organizations/people/dialogs/SetEndOfContractDialog.tsx
@@ -35,7 +35,7 @@ export const SetEndOfContractDialog = forwardRef<SetEndOfContractDialogRef, Prop
     peopleId,
     currentContractEndDate,
   },
-  ref
+  ref,
 ) {
   const { __ } = useTranslate();
   const dialogRef = useDialogRef();
@@ -61,7 +61,7 @@ export const SetEndOfContractDialog = forwardRef<SetEndOfContractDialogRef, Prop
     errorMessage: __("Failed to update end of contract"),
   });
 
-  const onSubmit = handleSubmit(async (data) => {
+  const onSubmit = async (data: z.infer<typeof schema>) => {
     await mutate({
       variables: {
         input: {
@@ -72,7 +72,7 @@ export const SetEndOfContractDialog = forwardRef<SetEndOfContractDialogRef, Prop
     });
 
     dialogRef.current?.close();
-  });
+  };
 
   const handleClose = () => {
     reset();
@@ -85,7 +85,7 @@ export const SetEndOfContractDialog = forwardRef<SetEndOfContractDialogRef, Prop
       className="max-w-lg"
       onClose={handleClose}
     >
-      <form onSubmit={onSubmit}>
+      <form onSubmit={e => void handleSubmit(onSubmit)(e)}>
         <DialogContent padded className="space-y-4">
           <Field label={__("End of contract")}>
             <Input {...register("contractEndDate")} type="date" />
diff --git a/apps/console/src/pages/organizations/people/tabs/PeopleProfileTab.tsx b/apps/console/src/pages/organizations/people/tabs/PeopleProfileTab.tsx
index 3e6f3fc35..52d53a344 100644
--- a/apps/console/src/pages/organizations/people/tabs/PeopleProfileTab.tsx
+++ b/apps/console/src/pages/organizations/people/tabs/PeopleProfileTab.tsx
@@ -16,7 +16,7 @@ const schema = z.object({
   position: z.string().min(1).nullable(),
   additionalEmailAddresses: z.preprocess(
     // Empty additional emails are skipped
-    (v) => (v as string[]).filter((v) => !!v),
+    v => (v as string[]).filter(v => !!v),
     z.array(z.string().email()),
   ),
   kind: z.enum(peopleRoles),
@@ -29,8 +29,8 @@ export default function PeopleProfileTab() {
     people: PeopleGraphNodeQuery$data["node"];
   }>();
   const { __ } = useTranslate();
-  const { control, formState, handleSubmit, register, reset } =
-    useFormWithSchema(schema, {
+  const { control, formState, handleSubmit, register, reset }
+    = useFormWithSchema(schema, {
       defaultValues: {
         kind: people.kind,
         fullName: people.fullName,
@@ -48,7 +48,7 @@ export default function PeopleProfileTab() {
       errorMessage: __("Failed to update member"),
     },
   );
-  const onSubmit = handleSubmit((data) => {
+  const onSubmit = handleSubmit(async (data: z.infer<typeof schema>) => {
     const input = {
       id: people.id!,
       fullName: data.fullName,
@@ -60,7 +60,7 @@ export default function PeopleProfileTab() {
       contractEndDate: formatDatetime(data.contractEndDate) ?? null,
     };
 
-    mutate({
+    await mutate({
       variables: { input },
       onCompleted: () => {
         reset(data);
@@ -69,7 +69,7 @@ export default function PeopleProfileTab() {
   });
 
   return (
-    <form onSubmit={onSubmit} className="space-y-4">
+    <form onSubmit={e => void onSubmit(e)} className="space-y-4">
       <Card padded className="space-y-4">
         <Field label={__("Full name")} {...register("fullName")} type="text" />
         <Field
diff --git a/apps/console/src/pages/organizations/people/tabs/PeopleRoleTab.tsx b/apps/console/src/pages/organizations/people/tabs/PeopleRoleTab.tsx
index bea2fef20..946abb455 100644
--- a/apps/console/src/pages/organizations/people/tabs/PeopleRoleTab.tsx
+++ b/apps/console/src/pages/organizations/people/tabs/PeopleRoleTab.tsx
@@ -37,8 +37,8 @@ export default function PeopleRoleTab() {
     },
   );
 
-  const onSubmit = handleSubmit((data) => {
-    mutate({
+  const onSubmit = handleSubmit(async (data) => {
+    await mutate({
       variables: {
         input: {
           id: people.id!,
@@ -58,7 +58,7 @@ export default function PeopleRoleTab() {
   });
 
   return (
-    <form onSubmit={onSubmit} className="space-y-4">
+    <form onSubmit={e => void onSubmit(e)} className="space-y-4">
       <Card padded className="space-y-4">
         <ControlledField
           control={control}
@@ -67,7 +67,7 @@ export default function PeopleRoleTab() {
           label={__("Role")}
           disabled={!people.canUpdate}
         >
-          {getRoles(__).map((role) => (
+          {getRoles(__).map(role => (
             <Option key={role.value} value={role.value}>
               {role.label}
             </Option>
diff --git a/apps/console/src/pages/organizations/processingActivities/ProcessingActivitiesPage.tsx b/apps/console/src/pages/organizations/processingActivities/ProcessingActivitiesPage.tsx
index ba109bd1d..fe38df9d2 100644
--- a/apps/console/src/pages/organizations/processingActivities/ProcessingActivitiesPage.tsx
+++ b/apps/console/src/pages/organizations/processingActivities/ProcessingActivitiesPage.tsx
@@ -1,74 +1,74 @@
 import {
-    Button,
-    IconPlusLarge,
-    PageHeader,
-    Card,
-    Thead,
-    Tbody,
-    Tr,
-    Th,
-    Td,
-    Badge,
-    ActionDropdown,
-    DropdownItem,
-    IconTrashCan,
-    Table,
-    useConfirm,
-    Tabs,
-    TabItem,
-    IconArrowDown,
-    IconChevronDown,
-    Spinner,
-    Dropdown,
+  Button,
+  IconPlusLarge,
+  PageHeader,
+  Card,
+  Thead,
+  Tbody,
+  Tr,
+  Th,
+  Td,
+  Badge,
+  ActionDropdown,
+  DropdownItem,
+  IconTrashCan,
+  Table,
+  useConfirm,
+  Tabs,
+  TabItem,
+  IconArrowDown,
+  IconChevronDown,
+  Spinner,
+  Dropdown,
 } from "@probo/ui";
 import { useTranslate } from "@probo/i18n";
 import { usePageTitle } from "@probo/hooks";
 import {
-    getLawfulBasisLabel,
-    getResidualRiskLabel,
+  getLawfulBasisLabel,
+  getResidualRiskLabel,
 } from "../../../components/form/ProcessingActivityEnumOptions";
 import {
-    ConnectionHandler,
-    graphql,
-    usePaginationFragment,
-    usePreloadedQuery,
-    useMutation,
-    type PreloadedQuery,
+  ConnectionHandler,
+  graphql,
+  usePaginationFragment,
+  usePreloadedQuery,
+  useMutation,
+  type PreloadedQuery,
 } from "react-relay";
 import { useOrganizationId } from "/hooks/useOrganizationId";
 import { useParams } from "react-router";
 import { CreateProcessingActivityDialog } from "./dialogs/CreateProcessingActivityDialog";
 import {
-    deleteProcessingActivityMutation,
-    ProcessingActivitiesConnectionKey,
-    processingActivitiesQuery,
+  deleteProcessingActivityMutation,
+  ProcessingActivitiesConnectionKey,
+  processingActivitiesQuery,
 } from "../../../hooks/graph/ProcessingActivityGraph";
 import {
-    sprintf,
-    promisifyMutation,
-    downloadFile,
-    toDateInput,
+  sprintf,
+  promisifyMutation,
+  downloadFile,
+  toDateInput,
 } from "@probo/helpers";
 import { useMutationWithToasts } from "/hooks/useMutationWithToasts";
 import { SnapshotBanner } from "/components/SnapshotBanner";
 import type { NodeOf } from "/types";
 import type {
-    ProcessingActivitiesPageFragment$key,
-    ProcessingActivitiesPageFragment$data,
+  ProcessingActivitiesPageFragment$key,
+  ProcessingActivitiesPageFragment$data,
 } from "/__generated__/core/ProcessingActivitiesPageFragment.graphql";
 import type {
-    ProcessingActivitiesPageDPIAFragment$key,
-    ProcessingActivitiesPageDPIAFragment$data,
+  ProcessingActivitiesPageDPIAFragment$key,
+  ProcessingActivitiesPageDPIAFragment$data,
 } from "/__generated__/core/ProcessingActivitiesPageDPIAFragment.graphql";
 import type {
-    ProcessingActivitiesPageTIAFragment$key,
-    ProcessingActivitiesPageTIAFragment$data,
+  ProcessingActivitiesPageTIAFragment$key,
+  ProcessingActivitiesPageTIAFragment$data,
 } from "/__generated__/core/ProcessingActivitiesPageTIAFragment.graphql";
 import { useState } from "react";
 import type { ProcessingActivityGraphListQuery } from "/__generated__/core/ProcessingActivityGraphListQuery.graphql";
 
 interface ProcessingActivitiesPageProps {
-    queryRef: PreloadedQuery<ProcessingActivityGraphListQuery>;
+  queryRef: PreloadedQuery<ProcessingActivityGraphListQuery>;
 }
 
 const processingActivitiesPageFragment = graphql`
@@ -236,636 +236,644 @@ const exportTransferImpactAssessmentsPDFMutation = graphql`
 `;
 
 export default function ProcessingActivitiesPage({
-    queryRef,
+  queryRef,
 }: ProcessingActivitiesPageProps) {
-    const { __ } = useTranslate();
-    const organizationId = useOrganizationId();
-    const { snapshotId } = useParams<{ snapshotId?: string }>();
-    const isSnapshotMode = Boolean(snapshotId);
-    const [activeTab, setActiveTab] = useState<"activities" | "dpia" | "tia">(
-        "activities",
-    );
+  const { __ } = useTranslate();
+  const organizationId = useOrganizationId();
+  const { snapshotId } = useParams<{ snapshotId?: string }>();
+  const isSnapshotMode = Boolean(snapshotId);
+  const [activeTab, setActiveTab] = useState<"activities" | "dpia" | "tia">(
+    "activities",
+  );
 
-    usePageTitle(__("Processing Activities"));
+  usePageTitle(__("Processing Activities"));
 
-    const organization = usePreloadedQuery(processingActivitiesQuery, queryRef);
+  const organization = usePreloadedQuery(processingActivitiesQuery, queryRef);
 
-    const {
-        data: activitiesData,
-        loadNext: loadNextActivities,
-        hasNext: hasNextActivities,
-        isLoadingNext: isLoadingNextActivities,
-    } = usePaginationFragment<
-        ProcessingActivityGraphListQuery,
-        ProcessingActivitiesPageFragment$key
-    >(processingActivitiesPageFragment, organization.node);
+  const {
+    data: activitiesData,
+    loadNext: loadNextActivities,
+    hasNext: hasNextActivities,
+    isLoadingNext: isLoadingNextActivities,
+  } = usePaginationFragment<
+    ProcessingActivityGraphListQuery,
+    ProcessingActivitiesPageFragment$key
+  >(processingActivitiesPageFragment, organization.node);
 
-    const {
-        data: dpiaData,
-        loadNext: loadNextDPIAs,
-        hasNext: hasNextDPIAs,
-        isLoadingNext: isLoadingNextDPIAs,
-    } = usePaginationFragment<
-        ProcessingActivityGraphListQuery,
-        ProcessingActivitiesPageDPIAFragment$key
-    >(dpiaListPageFragment, organization.node);
+  const {
+    data: dpiaData,
+    loadNext: loadNextDPIAs,
+    hasNext: hasNextDPIAs,
+    isLoadingNext: isLoadingNextDPIAs,
+  } = usePaginationFragment<
+    ProcessingActivityGraphListQuery,
+    ProcessingActivitiesPageDPIAFragment$key
+  >(dpiaListPageFragment, organization.node);
 
-    const {
-        data: tiaData,
-        loadNext: loadNextTIAs,
-        hasNext: hasNextTIAs,
-        isLoadingNext: isLoadingNextTIAs,
-    } = usePaginationFragment<
-        ProcessingActivityGraphListQuery,
-        ProcessingActivitiesPageTIAFragment$key
-    >(tiaListPageFragment, organization.node);
+  const {
+    data: tiaData,
+    loadNext: loadNextTIAs,
+    hasNext: hasNextTIAs,
+    isLoadingNext: isLoadingNextTIAs,
+  } = usePaginationFragment<
+    ProcessingActivityGraphListQuery,
+    ProcessingActivitiesPageTIAFragment$key
+  >(tiaListPageFragment, organization.node);
 
-    const connectionId = ConnectionHandler.getConnectionID(
-        organizationId,
-        ProcessingActivitiesConnectionKey,
-        { filter: { snapshotId: snapshotId || null } },
-    );
-    const activities =
-        activitiesData?.processingActivities?.edges?.map((edge) => edge.node) ??
-        [];
-    const dpias =
-        dpiaData?.dataProtectionImpactAssessments?.edges?.map(
-            (edge) => edge.node,
-        ) ?? [];
-    const tias =
-        tiaData?.transferImpactAssessments?.edges?.map((edge) => edge.node) ??
-        [];
+  const connectionId = ConnectionHandler.getConnectionID(
+    organizationId,
+    ProcessingActivitiesConnectionKey,
+    { filter: { snapshotId: snapshotId || null } },
+  );
+  const activities
+    = activitiesData?.processingActivities?.edges?.map(edge => edge.node)
+      ?? [];
+  const dpias
+    = dpiaData?.dataProtectionImpactAssessments?.edges?.map(
+      edge => edge.node,
+    ) ?? [];
+  const tias
+    = tiaData?.transferImpactAssessments?.edges?.map(edge => edge.node)
+      ?? [];
 
-    const hasAnyAction =
-        !isSnapshotMode &&
-        activities.some(({ canUpdate, canDelete }) => canUpdate || canDelete);
+  const hasAnyAction
+    = !isSnapshotMode
+      && activities.some(({ canUpdate, canDelete }) => canUpdate || canDelete);
 
-    const canExportPDF = organization.node.canExportProcessingActivities;
+  const canExportPDF = organization.node.canExportProcessingActivities;
 
-    const [exportPDF, isExportingPDF] = useMutationWithToasts<{
-        response: {
-            exportProcessingActivitiesPDF?: {
-                data: string;
-            };
-        };
-        variables: {
-            input: {
-                organizationId: string;
-                filter: { snapshotId: string } | null;
-            };
-        };
-    }>(exportProcessingActivitiesPDFMutation, {
-        successMessage: __("PDF download started."),
-        errorMessage: __("Failed to generate PDF"),
-    });
-
-    const handleExportPDF = () => {
-        exportPDF({
-            variables: {
-                input: {
-                    organizationId: organizationId,
-                    filter: snapshotId ? { snapshotId } : null,
-                },
-            },
-            onCompleted: (data) => {
-                if (data.exportProcessingActivitiesPDF?.data) {
-                    downloadFile(
-                        data.exportProcessingActivitiesPDF.data,
-                        `processing-activities-${toDateInput(new Date().toISOString())}.pdf`,
-                    );
-                }
-            },
-        });
+  const [exportPDF, isExportingPDF] = useMutationWithToasts<{
+    response: {
+      exportProcessingActivitiesPDF?: {
+        data: string;
+      };
     };
-
-    const canExportDPIAPDF =
-        organization.node.canExportDataProtectionImpactAssessments;
-
-    const [exportDPIAPDF, isExportingDPIAPDF] = useMutationWithToasts<{
-        response: {
-            exportDataProtectionImpactAssessmentsPDF?: {
-                data: string;
-            };
-        };
-        variables: {
-            input: {
-                organizationId: string;
-                filter: { snapshotId: string } | null;
-            };
-        };
-    }>(exportDataProtectionImpactAssessmentsPDFMutation, {
-        successMessage: __("PDF download started."),
-        errorMessage: __("Failed to generate PDF"),
-    });
-
-    const handleExportDPIAPDF = () => {
-        exportDPIAPDF({
-            variables: {
-                input: {
-                    organizationId: organizationId,
-                    filter: snapshotId ? { snapshotId } : null,
-                },
-            },
-            onCompleted: (data) => {
-                if (data.exportDataProtectionImpactAssessmentsPDF?.data) {
-                    downloadFile(
-                        data.exportDataProtectionImpactAssessmentsPDF.data,
-                        `data-protection-impact-assessments-${toDateInput(new Date().toISOString())}.pdf`,
-                    );
-                }
-            },
-        });
+    variables: {
+      input: {
+        organizationId: string;
+        filter: { snapshotId: string } | null;
+      };
     };
+  }>(exportProcessingActivitiesPDFMutation, {
+    successMessage: __("PDF download started."),
+    errorMessage: __("Failed to generate PDF"),
+  });
 
-    const canExportTIAPDF =
-        organization.node.canExportTransferImpactAssessments;
-
-    const [exportTIAPDF, isExportingTIAPDF] = useMutationWithToasts<{
-        response: {
-            exportTransferImpactAssessmentsPDF?: {
-                data: string;
-            };
-        };
-        variables: {
-            input: {
-                organizationId: string;
-                filter: { snapshotId: string } | null;
-            };
-        };
-    }>(exportTransferImpactAssessmentsPDFMutation, {
-        successMessage: __("PDF download started."),
-        errorMessage: __("Failed to generate PDF"),
+  const handleExportPDF = async () => {
+    await exportPDF({
+      variables: {
+        input: {
+          organizationId: organizationId,
+          filter: snapshotId ? { snapshotId } : null,
+        },
+      },
+      onCompleted: (data) => {
+        if (data.exportProcessingActivitiesPDF?.data) {
+          downloadFile(
+            data.exportProcessingActivitiesPDF.data,
+            `processing-activities-${toDateInput(new Date().toISOString())}.pdf`,
+          );
+        }
+      },
     });
+  };
 
-    const handleExportTIAPDF = () => {
-        exportTIAPDF({
-            variables: {
-                input: {
-                    organizationId: organizationId,
-                    filter: snapshotId ? { snapshotId } : null,
-                },
-            },
-            onCompleted: (data) => {
-                if (data.exportTransferImpactAssessmentsPDF?.data) {
-                    downloadFile(
-                        data.exportTransferImpactAssessmentsPDF.data,
-                        `transfer-impact-assessments-${toDateInput(new Date().toISOString())}.pdf`,
-                    );
-                }
-            },
-        });
+  const canExportDPIAPDF
+    = organization.node.canExportDataProtectionImpactAssessments;
+
+  const [exportDPIAPDF, isExportingDPIAPDF] = useMutationWithToasts<{
+    response: {
+      exportDataProtectionImpactAssessmentsPDF?: {
+        data: string;
+      };
     };
+    variables: {
+      input: {
+        organizationId: string;
+        filter: { snapshotId: string } | null;
+      };
+    };
+  }>(exportDataProtectionImpactAssessmentsPDFMutation, {
+    successMessage: __("PDF download started."),
+    errorMessage: __("Failed to generate PDF"),
+  });
 
-    return (
-        <div className="space-y-6">
-            {isSnapshotMode && snapshotId && (
-                <SnapshotBanner snapshotId={snapshotId} />
+  const handleExportDPIAPDF = async () => {
+    await exportDPIAPDF({
+      variables: {
+        input: {
+          organizationId: organizationId,
+          filter: snapshotId ? { snapshotId } : null,
+        },
+      },
+      onCompleted: (data) => {
+        if (data.exportDataProtectionImpactAssessmentsPDF?.data) {
+          downloadFile(
+            data.exportDataProtectionImpactAssessmentsPDF.data,
+            `data-protection-impact-assessments-${toDateInput(new Date().toISOString())}.pdf`,
+          );
+        }
+      },
+    });
+  };
+
+  const canExportTIAPDF
+    = organization.node.canExportTransferImpactAssessments;
+
+  const [exportTIAPDF, isExportingTIAPDF] = useMutationWithToasts<{
+    response: {
+      exportTransferImpactAssessmentsPDF?: {
+        data: string;
+      };
+    };
+    variables: {
+      input: {
+        organizationId: string;
+        filter: { snapshotId: string } | null;
+      };
+    };
+  }>(exportTransferImpactAssessmentsPDFMutation, {
+    successMessage: __("PDF download started."),
+    errorMessage: __("Failed to generate PDF"),
+  });
+
+  const handleExportTIAPDF = async () => {
+    await exportTIAPDF({
+      variables: {
+        input: {
+          organizationId: organizationId,
+          filter: snapshotId ? { snapshotId } : null,
+        },
+      },
+      onCompleted: (data) => {
+        if (data.exportTransferImpactAssessmentsPDF?.data) {
+          downloadFile(
+            data.exportTransferImpactAssessmentsPDF.data,
+            `transfer-impact-assessments-${toDateInput(new Date().toISOString())}.pdf`,
+          );
+        }
+      },
+    });
+  };
+
+  return (
+    <div className="space-y-6">
+      {isSnapshotMode && snapshotId && (
+        <SnapshotBanner snapshotId={snapshotId} />
+      )}
+      <PageHeader
+        title={__("Processing Activities")}
+        description={__("Manage your processing activities under GDPR")}
+      >
+        {(canExportPDF || canExportDPIAPDF || canExportTIAPDF) && (
+          <Dropdown
+            toggle={(
+              <Button
+                variant="secondary"
+                icon={IconArrowDown}
+                iconAfter={IconChevronDown}
+              >
+                {__("Export")}
+              </Button>
             )}
-            <PageHeader
-                title={__("Processing Activities")}
-                description={__("Manage your processing activities under GDPR")}
-            >
-                {(canExportPDF || canExportDPIAPDF || canExportTIAPDF) && (
-                    <Dropdown
-                        toggle={
-                            <Button
-                                variant="secondary"
-                                icon={IconArrowDown}
-                                iconAfter={IconChevronDown}
-                            >
-                                {__("Export")}
-                            </Button>
-                        }
-                    >
-                        {canExportPDF && (
-                            <DropdownItem
-                                onClick={handleExportPDF}
-                                disabled={isExportingPDF}
-                                icon={isExportingPDF ? Spinner : undefined}
-                            >
-                                {__("Processing Activities")}
-                            </DropdownItem>
+          >
+            {canExportPDF && (
+              <DropdownItem
+                onClick={() => void handleExportPDF()}
+                disabled={isExportingPDF}
+                icon={isExportingPDF ? Spinner : undefined}
+              >
+                {__("Processing Activities")}
+              </DropdownItem>
+            )}
+            {canExportDPIAPDF && (
+              <DropdownItem
+                onClick={() => void handleExportDPIAPDF()}
+                disabled={isExportingDPIAPDF}
+                icon={isExportingDPIAPDF ? Spinner : undefined}
+              >
+                {__("Data Protection Impact Assessments")}
+              </DropdownItem>
+            )}
+            {canExportTIAPDF && (
+              <DropdownItem
+                onClick={() => void handleExportTIAPDF()}
+                disabled={isExportingTIAPDF}
+                icon={isExportingTIAPDF ? Spinner : undefined}
+              >
+                {__("Transfer Impact Assessments")}
+              </DropdownItem>
+            )}
+          </Dropdown>
+        )}
+        {!isSnapshotMode
+          && activeTab === "activities"
+          && organization.node.canCreateProcessingActivity && (
+          <CreateProcessingActivityDialog
+            organizationId={organizationId}
+            connectionId={connectionId}
+          >
+            <Button icon={IconPlusLarge}>
+              {__("Add processing activity")}
+            </Button>
+          </CreateProcessingActivityDialog>
+        )}
+      </PageHeader>
+
+      <Tabs>
+        <TabItem
+          active={activeTab === "activities"}
+          onClick={() => setActiveTab("activities")}
+        >
+          {__("Processing Activities")}
+        </TabItem>
+        <TabItem
+          active={activeTab === "dpia"}
+          onClick={() => setActiveTab("dpia")}
+        >
+          {__("Data Protection Impact Assessments")}
+        </TabItem>
+        <TabItem
+          active={activeTab === "tia"}
+          onClick={() => setActiveTab("tia")}
+        >
+          {__("Transfer Impact Assessments")}
+        </TabItem>
+      </Tabs>
+
+      {activeTab === "activities" && (
+        <>
+          {activities.length > 0
+            ? (
+                <Card>
+                  <Table>
+                    <Thead>
+                      <Tr>
+                        <Th className="px-3">{__("Name")}</Th>
+                        <Th className="px-3">
+                          {__("Purpose")}
+                        </Th>
+                        <Th className="px-3">
+                          {__("Data Subject")}
+                        </Th>
+                        <Th className="px-3">
+                          {__("Lawful Basis")}
+                        </Th>
+                        <Th className="px-3">
+                          {__("Location")}
+                        </Th>
+                        <Th className="px-3">
+                          {__("International Transfers")}
+                        </Th>
+                        {hasAnyAction && (
+                          <Th className="px-3">
+                            {__("Actions")}
+                          </Th>
                         )}
-                        {canExportDPIAPDF && (
-                            <DropdownItem
-                                onClick={handleExportDPIAPDF}
-                                disabled={isExportingDPIAPDF}
-                                icon={isExportingDPIAPDF ? Spinner : undefined}
-                            >
-                                {__("Data Protection Impact Assessments")}
-                            </DropdownItem>
-                        )}
-                        {canExportTIAPDF && (
-                            <DropdownItem
-                                onClick={handleExportTIAPDF}
-                                disabled={isExportingTIAPDF}
-                                icon={isExportingTIAPDF ? Spinner : undefined}
-                            >
-                                {__("Transfer Impact Assessments")}
-                            </DropdownItem>
-                        )}
-                    </Dropdown>
-                )}
-                {!isSnapshotMode &&
-                    activeTab === "activities" &&
-                    organization.node.canCreateProcessingActivity && (
-                        <CreateProcessingActivityDialog
-                            organizationId={organizationId}
-                            connectionId={connectionId}
-                        >
-                            <Button icon={IconPlusLarge}>
-                                {__("Add processing activity")}
-                            </Button>
-                        </CreateProcessingActivityDialog>
-                    )}
-            </PageHeader>
+                      </Tr>
+                    </Thead>
+                    <Tbody>
+                      {activities.map(activity => (
+                        <ActivityRow
+                          key={activity.id}
+                          activity={activity}
+                          connectionId={connectionId}
+                          hasAnyAction={hasAnyAction}
+                        />
+                      ))}
+                    </Tbody>
+                  </Table>
 
-            <Tabs>
-                <TabItem
-                    active={activeTab === "activities"}
-                    onClick={() => setActiveTab("activities")}
-                >
-                    {__("Processing Activities")}
-                </TabItem>
-                <TabItem
-                    active={activeTab === "dpia"}
-                    onClick={() => setActiveTab("dpia")}
-                >
-                    {__("Data Protection Impact Assessments")}
-                </TabItem>
-                <TabItem
-                    active={activeTab === "tia"}
-                    onClick={() => setActiveTab("tia")}
-                >
-                    {__("Transfer Impact Assessments")}
-                </TabItem>
-            </Tabs>
+                  {hasNextActivities && (
+                    <div className="p-4 border-t">
+                      <Button
+                        variant="secondary"
+                        onClick={() => loadNextActivities(10)}
+                        disabled={isLoadingNextActivities}
+                      >
+                        {isLoadingNextActivities
+                          ? __("Loading...")
+                          : __("Load more")}
+                      </Button>
+                    </div>
+                  )}
+                </Card>
+              )
+            : (
+                <Card padded>
+                  <div className="text-center py-12">
+                    <h3 className="text-lg font-semibold mb-2">
+                      {__("No processing activities yet")}
+                    </h3>
+                    <p className="text-txt-tertiary mb-4">
+                      {__(
+                        "Create your first processing activity to get started with GDPR compliance.",
+                      )}
+                    </p>
+                  </div>
+                </Card>
+              )}
+        </>
+      )}
 
-            {activeTab === "activities" && (
-                <>
-                    {activities.length > 0 ? (
-                        <Card>
-                            <Table>
-                                <Thead>
-                                    <Tr>
-                                        <Th className="px-3">{__("Name")}</Th>
-                                        <Th className="px-3">
-                                            {__("Purpose")}
-                                        </Th>
-                                        <Th className="px-3">
-                                            {__("Data Subject")}
-                                        </Th>
-                                        <Th className="px-3">
-                                            {__("Lawful Basis")}
-                                        </Th>
-                                        <Th className="px-3">
-                                            {__("Location")}
-                                        </Th>
-                                        <Th className="px-3">
-                                            {__("International Transfers")}
-                                        </Th>
-                                        {hasAnyAction && (
-                                            <Th className="px-3">
-                                                {__("Actions")}
-                                            </Th>
-                                        )}
-                                    </Tr>
-                                </Thead>
-                                <Tbody>
-                                    {activities.map((activity) => (
-                                        <ActivityRow
-                                            key={activity.id}
-                                            activity={activity}
-                                            connectionId={connectionId}
-                                            hasAnyAction={hasAnyAction}
-                                        />
-                                    ))}
-                                </Tbody>
-                            </Table>
+      {activeTab === "dpia" && (
+        <>
+          {dpias.length > 0
+            ? (
+                <Card>
+                  <Table>
+                    <Thead>
+                      <Tr>
+                        <Th>{__("Processing Activity")}</Th>
+                        <Th>{__("Description")}</Th>
+                        <Th>{__("Potential Risk")}</Th>
+                        <Th>{__("Residual Risk")}</Th>
+                      </Tr>
+                    </Thead>
+                    <Tbody>
+                      {dpias.map(dpia => (
+                        <DPIARow key={dpia.id} dpia={dpia} />
+                      ))}
+                    </Tbody>
+                  </Table>
 
-                            {hasNextActivities && (
-                                <div className="p-4 border-t">
-                                    <Button
-                                        variant="secondary"
-                                        onClick={() => loadNextActivities(10)}
-                                        disabled={isLoadingNextActivities}
-                                    >
-                                        {isLoadingNextActivities
-                                            ? __("Loading...")
-                                            : __("Load more")}
-                                    </Button>
-                                </div>
-                            )}
-                        </Card>
-                    ) : (
-                        <Card padded>
-                            <div className="text-center py-12">
-                                <h3 className="text-lg font-semibold mb-2">
-                                    {__("No processing activities yet")}
-                                </h3>
-                                <p className="text-txt-tertiary mb-4">
-                                    {__(
-                                        "Create your first processing activity to get started with GDPR compliance.",
-                                    )}
-                                </p>
-                            </div>
-                        </Card>
-                    )}
-                </>
-            )}
+                  {hasNextDPIAs && (
+                    <div className="p-4 border-t">
+                      <Button
+                        variant="secondary"
+                        onClick={() => loadNextDPIAs(10)}
+                        disabled={isLoadingNextDPIAs}
+                      >
+                        {isLoadingNextDPIAs
+                          ? __("Loading...")
+                          : __("Load more")}
+                      </Button>
+                    </div>
+                  )}
+                </Card>
+              )
+            : (
+                <Card padded>
+                  <div className="text-center py-12">
+                    <h3 className="text-lg font-semibold mb-2">
+                      {__(
+                        "No Data Protection Impact Assessments yet",
+                      )}
+                    </h3>
+                    <p className="text-txt-tertiary mb-4">
+                      {__(
+                        "DPIAs are created from within individual processing activities.",
+                      )}
+                    </p>
+                  </div>
+                </Card>
+              )}
+        </>
+      )}
 
-            {activeTab === "dpia" && (
-                <>
-                    {dpias.length > 0 ? (
-                        <Card>
-                            <Table>
-                                <Thead>
-                                    <Tr>
-                                        <Th>{__("Processing Activity")}</Th>
-                                        <Th>{__("Description")}</Th>
-                                        <Th>{__("Potential Risk")}</Th>
-                                        <Th>{__("Residual Risk")}</Th>
-                                    </Tr>
-                                </Thead>
-                                <Tbody>
-                                    {dpias.map((dpia) => (
-                                        <DPIARow key={dpia.id} dpia={dpia} />
-                                    ))}
-                                </Tbody>
-                            </Table>
+      {activeTab === "tia" && (
+        <>
+          {tias.length > 0
+            ? (
+                <Card>
+                  <Table>
+                    <Thead>
+                      <Tr>
+                        <Th>{__("Processing Activity")}</Th>
+                        <Th>{__("Data Subjects")}</Th>
+                        <Th>{__("Transfer")}</Th>
+                        <Th>{__("Local Law Risk")}</Th>
+                      </Tr>
+                    </Thead>
+                    <Tbody>
+                      {tias.map(tia => (
+                        <TIARow key={tia.id} tia={tia} />
+                      ))}
+                    </Tbody>
+                  </Table>
 
-                            {hasNextDPIAs && (
-                                <div className="p-4 border-t">
-                                    <Button
-                                        variant="secondary"
-                                        onClick={() => loadNextDPIAs(10)}
-                                        disabled={isLoadingNextDPIAs}
-                                    >
-                                        {isLoadingNextDPIAs
-                                            ? __("Loading...")
-                                            : __("Load more")}
-                                    </Button>
-                                </div>
-                            )}
-                        </Card>
-                    ) : (
-                        <Card padded>
-                            <div className="text-center py-12">
-                                <h3 className="text-lg font-semibold mb-2">
-                                    {__(
-                                        "No Data Protection Impact Assessments yet",
-                                    )}
-                                </h3>
-                                <p className="text-txt-tertiary mb-4">
-                                    {__(
-                                        "DPIAs are created from within individual processing activities.",
-                                    )}
-                                </p>
-                            </div>
-                        </Card>
-                    )}
-                </>
-            )}
-
-            {activeTab === "tia" && (
-                <>
-                    {tias.length > 0 ? (
-                        <Card>
-                            <Table>
-                                <Thead>
-                                    <Tr>
-                                        <Th>{__("Processing Activity")}</Th>
-                                        <Th>{__("Data Subjects")}</Th>
-                                        <Th>{__("Transfer")}</Th>
-                                        <Th>{__("Local Law Risk")}</Th>
-                                    </Tr>
-                                </Thead>
-                                <Tbody>
-                                    {tias.map((tia) => (
-                                        <TIARow key={tia.id} tia={tia} />
-                                    ))}
-                                </Tbody>
-                            </Table>
-
-                            {hasNextTIAs && (
-                                <div className="p-4 border-t">
-                                    <Button
-                                        variant="secondary"
-                                        onClick={() => loadNextTIAs(10)}
-                                        disabled={isLoadingNextTIAs}
-                                    >
-                                        {isLoadingNextTIAs
-                                            ? __("Loading...")
-                                            : __("Load more")}
-                                    </Button>
-                                </div>
-                            )}
-                        </Card>
-                    ) : (
-                        <Card padded>
-                            <div className="text-center py-12">
-                                <h3 className="text-lg font-semibold mb-2">
-                                    {__("No Transfer Impact Assessments yet")}
-                                </h3>
-                                <p className="text-txt-tertiary mb-4">
-                                    {__(
-                                        "TIAs are created from within individual processing activities.",
-                                    )}
-                                </p>
-                            </div>
-                        </Card>
-                    )}
-                </>
-            )}
-        </div>
-    );
+                  {hasNextTIAs && (
+                    <div className="p-4 border-t">
+                      <Button
+                        variant="secondary"
+                        onClick={() => loadNextTIAs(10)}
+                        disabled={isLoadingNextTIAs}
+                      >
+                        {isLoadingNextTIAs
+                          ? __("Loading...")
+                          : __("Load more")}
+                      </Button>
+                    </div>
+                  )}
+                </Card>
+              )
+            : (
+                <Card padded>
+                  <div className="text-center py-12">
+                    <h3 className="text-lg font-semibold mb-2">
+                      {__("No Transfer Impact Assessments yet")}
+                    </h3>
+                    <p className="text-txt-tertiary mb-4">
+                      {__(
+                        "TIAs are created from within individual processing activities.",
+                      )}
+                    </p>
+                  </div>
+                </Card>
+              )}
+        </>
+      )}
+    </div>
+  );
 }
 
 function ActivityRow({
-    activity,
-    connectionId,
-    hasAnyAction,
+  activity,
+  connectionId,
+  hasAnyAction,
 }: {
-    activity: NodeOf<
-        NonNullable<
-            ProcessingActivitiesPageFragment$data["processingActivities"]
-        >
-    >;
-    connectionId: string;
-    hasAnyAction: boolean;
+  activity: NodeOf<
+    NonNullable<
+      ProcessingActivitiesPageFragment$data["processingActivities"]
+    >
+  >;
+  connectionId: string;
+  hasAnyAction: boolean;
 }) {
-    const organizationId = useOrganizationId();
-    const { __ } = useTranslate();
-    const { snapshotId } = useParams<{ snapshotId?: string }>();
-    const isSnapshotMode = Boolean(snapshotId);
-    const [deleteActivity] = useMutation(deleteProcessingActivityMutation);
-    const confirm = useConfirm();
+  const organizationId = useOrganizationId();
+  const { __ } = useTranslate();
+  const { snapshotId } = useParams<{ snapshotId?: string }>();
+  const isSnapshotMode = Boolean(snapshotId);
+  const [deleteActivity] = useMutation(deleteProcessingActivityMutation);
+  const confirm = useConfirm();
 
-    const handleDelete = () => {
-        confirm(
-            () =>
-                promisifyMutation(deleteActivity)({
-                    variables: {
-                        input: {
-                            processingActivityId: activity.id,
-                        },
-                        connections: [connectionId],
-                    },
-                }),
-            {
-                message: sprintf(
-                    __(
-                        "This will permanently delete the processing activity %s. This action cannot be undone.",
-                    ),
-                    activity.name,
-                ),
+  const handleDelete = () => {
+    confirm(
+      () =>
+        promisifyMutation(deleteActivity)({
+          variables: {
+            input: {
+              processingActivityId: activity.id,
             },
-        );
-    };
-
-    const activityUrl =
-        isSnapshotMode && snapshotId
-            ? `/organizations/${organizationId}/snapshots/${snapshotId}/processing-activities/${activity.id}`
-            : `/organizations/${organizationId}/processing-activities/${activity.id}`;
-
-    return (
-        <Tr to={activityUrl}>
-            <Td>
-                <span className="font-semibold">{activity.name}</span>
-            </Td>
-            <Td>
-                <span className="text-sm text-txt-secondary">
-                    {activity.purpose || "-"}
-                </span>
-            </Td>
-            <Td>{activity.dataSubjectCategory || "-"}</Td>
-            <Td>{getLawfulBasisLabel(activity.lawfulBasis, __)}</Td>
-            <Td>{activity.location || "-"}</Td>
-            <Td>
-                <Badge
-                    variant={
-                        activity.internationalTransfers ? "warning" : "success"
-                    }
-                >
-                    {activity.internationalTransfers ? __("Yes") : __("No")}
-                </Badge>
-            </Td>
-            {hasAnyAction && (
-                <Td noLink width={50} className="text-end">
-                    <ActionDropdown>
-                        {activity.canDelete && (
-                            <DropdownItem
-                                icon={IconTrashCan}
-                                variant="danger"
-                                onSelect={handleDelete}
-                            >
-                                {__("Delete")}
-                            </DropdownItem>
-                        )}
-                    </ActionDropdown>
-                </Td>
-            )}
-        </Tr>
+            connections: [connectionId],
+          },
+        }),
+      {
+        message: sprintf(
+          __(
+            "This will permanently delete the processing activity %s. This action cannot be undone.",
+          ),
+          activity.name,
+        ),
+      },
     );
+  };
+
+  const activityUrl
+    = isSnapshotMode && snapshotId
+      ? `/organizations/${organizationId}/snapshots/${snapshotId}/processing-activities/${activity.id}`
+      : `/organizations/${organizationId}/processing-activities/${activity.id}`;
+
+  return (
+    <Tr to={activityUrl}>
+      <Td>
+        <span className="font-semibold">{activity.name}</span>
+      </Td>
+      <Td>
+        <span className="text-sm text-txt-secondary">
+          {activity.purpose || "-"}
+        </span>
+      </Td>
+      <Td>{activity.dataSubjectCategory || "-"}</Td>
+      <Td>{getLawfulBasisLabel(activity.lawfulBasis, __)}</Td>
+      <Td>{activity.location || "-"}</Td>
+      <Td>
+        <Badge
+          variant={
+            activity.internationalTransfers ? "warning" : "success"
+          }
+        >
+          {activity.internationalTransfers ? __("Yes") : __("No")}
+        </Badge>
+      </Td>
+      {hasAnyAction && (
+        <Td noLink width={50} className="text-end">
+          <ActionDropdown>
+            {activity.canDelete && (
+              <DropdownItem
+                icon={IconTrashCan}
+                variant="danger"
+                onSelect={handleDelete}
+              >
+                {__("Delete")}
+              </DropdownItem>
+            )}
+          </ActionDropdown>
+        </Td>
+      )}
+    </Tr>
+  );
 }
 
 function DPIARow({
-    dpia,
+  dpia,
 }: {
-    dpia: NodeOf<
-        NonNullable<
-            ProcessingActivitiesPageDPIAFragment$data["dataProtectionImpactAssessments"]
-        >
-    >;
+  dpia: NodeOf<
+    NonNullable<
+      ProcessingActivitiesPageDPIAFragment$data["dataProtectionImpactAssessments"]
+    >
+  >;
 }) {
-    const organizationId = useOrganizationId();
-    const { __ } = useTranslate();
-    const { snapshotId } = useParams<{ snapshotId?: string }>();
-    const isSnapshotMode = Boolean(snapshotId);
+  const organizationId = useOrganizationId();
+  const { __ } = useTranslate();
+  const { snapshotId } = useParams<{ snapshotId?: string }>();
+  const isSnapshotMode = Boolean(snapshotId);
 
-    const activityUrl =
-        isSnapshotMode && snapshotId
-            ? `/organizations/${organizationId}/snapshots/${snapshotId}/processing-activities/${dpia.processingActivity.id}#dpia`
-            : `/organizations/${organizationId}/processing-activities/${dpia.processingActivity.id}#dpia`;
+  const activityUrl
+    = isSnapshotMode && snapshotId
+      ? `/organizations/${organizationId}/snapshots/${snapshotId}/processing-activities/${dpia.processingActivity.id}#dpia`
+      : `/organizations/${organizationId}/processing-activities/${dpia.processingActivity.id}#dpia`;
 
-    return (
-        <Tr to={activityUrl}>
-            <Td>
-                <span className="font-semibold">
-                    {dpia.processingActivity.name}
-                </span>
-            </Td>
-            <Td>
-                <span className="text-sm text-txt-secondary line-clamp-2">
-                    {dpia.description || "-"}
-                </span>
-            </Td>
-            <Td>
-                <span className="text-sm text-txt-secondary line-clamp-2">
-                    {dpia.potentialRisk || "-"}
-                </span>
-            </Td>
-            <Td>
-                {dpia.residualRisk ? (
-                    <Badge
-                        variant={
-                            dpia.residualRisk === "LOW"
-                                ? "success"
-                                : dpia.residualRisk === "MEDIUM"
-                                  ? "warning"
-                                  : "danger"
-                        }
-                    >
-                        {getResidualRiskLabel(dpia.residualRisk, __)}
-                    </Badge>
-                ) : (
-                    "-"
-                )}
-            </Td>
-        </Tr>
-    );
+  return (
+    <Tr to={activityUrl}>
+      <Td>
+        <span className="font-semibold">
+          {dpia.processingActivity.name}
+        </span>
+      </Td>
+      <Td>
+        <span className="text-sm text-txt-secondary line-clamp-2">
+          {dpia.description || "-"}
+        </span>
+      </Td>
+      <Td>
+        <span className="text-sm text-txt-secondary line-clamp-2">
+          {dpia.potentialRisk || "-"}
+        </span>
+      </Td>
+      <Td>
+        {dpia.residualRisk
+          ? (
+              <Badge
+                variant={
+                  dpia.residualRisk === "LOW"
+                    ? "success"
+                    : dpia.residualRisk === "MEDIUM"
+                      ? "warning"
+                      : "danger"
+                }
+              >
+                {getResidualRiskLabel(dpia.residualRisk, __)}
+              </Badge>
+            )
+          : (
+              "-"
+            )}
+      </Td>
+    </Tr>
+  );
 }
 
 function TIARow({
-    tia,
+  tia,
 }: {
-    tia: NodeOf<
-        NonNullable<
-            ProcessingActivitiesPageTIAFragment$data["transferImpactAssessments"]
-        >
-    >;
+  tia: NodeOf<
+    NonNullable<
+      ProcessingActivitiesPageTIAFragment$data["transferImpactAssessments"]
+    >
+  >;
 }) {
-    const organizationId = useOrganizationId();
-    const { snapshotId } = useParams<{ snapshotId?: string }>();
-    const isSnapshotMode = Boolean(snapshotId);
+  const organizationId = useOrganizationId();
+  const { snapshotId } = useParams<{ snapshotId?: string }>();
+  const isSnapshotMode = Boolean(snapshotId);
 
-    const activityUrl =
-        isSnapshotMode && snapshotId
-            ? `/organizations/${organizationId}/snapshots/${snapshotId}/processing-activities/${tia.processingActivity.id}#tia`
-            : `/organizations/${organizationId}/processing-activities/${tia.processingActivity.id}#tia`;
+  const activityUrl
+    = isSnapshotMode && snapshotId
+      ? `/organizations/${organizationId}/snapshots/${snapshotId}/processing-activities/${tia.processingActivity.id}#tia`
+      : `/organizations/${organizationId}/processing-activities/${tia.processingActivity.id}#tia`;
 
-    return (
-        <Tr to={activityUrl}>
-            <Td>
-                <span className="font-semibold">
-                    {tia.processingActivity.name}
-                </span>
-            </Td>
-            <Td>
-                <span className="text-sm text-txt-secondary line-clamp-2">
-                    {tia.dataSubjects || "-"}
-                </span>
-            </Td>
-            <Td>
-                <span className="text-sm text-txt-secondary line-clamp-2">
-                    {tia.transfer || "-"}
-                </span>
-            </Td>
-            <Td>
-                <span className="text-sm text-txt-secondary line-clamp-2">
-                    {tia.localLawRisk || "-"}
-                </span>
-            </Td>
-        </Tr>
-    );
+  return (
+    <Tr to={activityUrl}>
+      <Td>
+        <span className="font-semibold">
+          {tia.processingActivity.name}
+        </span>
+      </Td>
+      <Td>
+        <span className="text-sm text-txt-secondary line-clamp-2">
+          {tia.dataSubjects || "-"}
+        </span>
+      </Td>
+      <Td>
+        <span className="text-sm text-txt-secondary line-clamp-2">
+          {tia.transfer || "-"}
+        </span>
+      </Td>
+      <Td>
+        <span className="text-sm text-txt-secondary line-clamp-2">
+          {tia.localLawRisk || "-"}
+        </span>
+      </Td>
+    </Tr>
+  );
 }
diff --git a/apps/console/src/pages/organizations/processingActivities/ProcessingActivityDetailsPage.tsx b/apps/console/src/pages/organizations/processingActivities/ProcessingActivityDetailsPage.tsx
index 250a618cd..81eb69b6e 100644
--- a/apps/console/src/pages/organizations/processingActivities/ProcessingActivityDetailsPage.tsx
+++ b/apps/console/src/pages/organizations/processingActivities/ProcessingActivityDetailsPage.tsx
@@ -98,8 +98,8 @@ type Props = {
 };
 
 export default function ProcessingActivityDetailsPage(props: Props) {
-  const { node: activity } =
-    usePreloadedQuery<ProcessingActivityGraphNodeQuery>(
+  const { node: activity }
+    = usePreloadedQuery<ProcessingActivityGraphNodeQuery>(
       processingActivityNodeQuery,
       props.queryRef,
     );
@@ -192,8 +192,8 @@ export default function ProcessingActivityDetailsPage(props: Props) {
     connectionId,
   );
 
-  const vendors = activity?.vendors?.edges.map((edge) => edge.node) ?? [];
-  const vendorIds = vendors.map((vendor) => vendor.id);
+  const vendors = activity?.vendors?.edges.map(edge => edge.node) ?? [];
+  const vendorIds = vendors.map(vendor => vendor.id);
 
   const { register, handleSubmit, formState, control } = useFormWithSchema(
     updateProcessingActivitySchema,
@@ -214,8 +214,8 @@ export default function ProcessingActivityDetailsPage(props: Props) {
         retentionPeriod: activity.retentionPeriod || "",
         securityMeasures: activity.securityMeasures || "",
         dataProtectionImpactAssessmentNeeded:
-          activity.dataProtectionImpactAssessmentNeeded ||
-          ("NOT_NEEDED" as const),
+          activity.dataProtectionImpactAssessmentNeeded
+          || ("NOT_NEEDED" as const),
         transferImpactAssessmentNeeded:
           activity.transferImpactAssessmentNeeded || ("NOT_NEEDED" as const),
         lastReviewDate: toDateInput(activity.lastReviewDate),
@@ -231,13 +231,13 @@ export default function ProcessingActivityDetailsPage(props: Props) {
     defaultValues: {
       description: activity?.dataProtectionImpactAssessment?.description || "",
       necessityAndProportionality:
-        activity?.dataProtectionImpactAssessment?.necessityAndProportionality ||
-        "",
+        activity?.dataProtectionImpactAssessment?.necessityAndProportionality
+        || "",
       potentialRisk:
         activity?.dataProtectionImpactAssessment?.potentialRisk || "",
       mitigations: activity?.dataProtectionImpactAssessment?.mitigations || "",
-      residualRisk: (activity?.dataProtectionImpactAssessment?.residualRisk ||
-        "") as ProcessingActivityDPIAResidualRisk | "",
+      residualRisk: (activity?.dataProtectionImpactAssessment?.residualRisk
+        || "") as ProcessingActivityDPIAResidualRisk | "",
     },
   });
 
@@ -303,20 +303,20 @@ export default function ProcessingActivityDetailsPage(props: Props) {
   const onDPIASubmit = dpiaForm.handleSubmit(async (formData) => {
     setDpiaSubmitting(true);
     try {
-      const isCreating =
-        !activity?.dataProtectionImpactAssessment?.id || dpiaDeleted;
+      const isCreating
+        = !activity?.dataProtectionImpactAssessment?.id || dpiaDeleted;
       if (!isCreating) {
         // Update existing DPIA
         await updateDPIA({
-          id: activity.dataProtectionImpactAssessment!.id,
+          id: activity.dataProtectionImpactAssessment.id,
           description: formData.description || undefined,
           necessityAndProportionality:
             formData.necessityAndProportionality || undefined,
           potentialRisk: formData.potentialRisk || undefined,
           mitigations: formData.mitigations || undefined,
           residualRisk:
-            (formData.residualRisk as ProcessingActivityDPIAResidualRisk) ||
-            undefined,
+            (formData.residualRisk as ProcessingActivityDPIAResidualRisk)
+            || undefined,
         });
         toast({
           title: __("Success"),
@@ -333,8 +333,8 @@ export default function ProcessingActivityDetailsPage(props: Props) {
           potentialRisk: formData.potentialRisk || undefined,
           mitigations: formData.mitigations || undefined,
           residualRisk:
-            (formData.residualRisk as ProcessingActivityDPIAResidualRisk) ||
-            undefined,
+            (formData.residualRisk as ProcessingActivityDPIAResidualRisk)
+            || undefined,
         });
         setDpiaDeleted(false);
         toast({
@@ -364,7 +364,7 @@ export default function ProcessingActivityDetailsPage(props: Props) {
       if (!isCreating) {
         // Update existing TIA
         await updateTIA({
-          id: activity.transferImpactAssessment!.id,
+          id: activity.transferImpactAssessment.id,
           dataSubjects: formData.dataSubjects || undefined,
           legalMechanism: formData.legalMechanism || undefined,
           transfer: formData.transfer || undefined,
@@ -407,8 +407,8 @@ export default function ProcessingActivityDetailsPage(props: Props) {
     }
   });
 
-  const breadcrumbProcessingActivitiesUrl =
-    isSnapshotMode && snapshotId
+  const breadcrumbProcessingActivitiesUrl
+    = isSnapshotMode && snapshotId
       ? `/organizations/${organizationId}/snapshots/${snapshotId}/processing-activities`
       : `/organizations/${organizationId}/processing-activities`;
 
@@ -464,7 +464,7 @@ export default function ProcessingActivityDetailsPage(props: Props) {
       {activeTab === "overview" && (
         <Card>
           <div className="p-6">
-            <form onSubmit={onSubmit} className="space-y-6">
+            <form onSubmit={e => void onSubmit(e)} className="space-y-6">
               <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                 <div className="space-y-4">
                   <Field
@@ -476,7 +476,11 @@ export default function ProcessingActivityDetailsPage(props: Props) {
                   />
 
                   <div>
-                    <Label htmlFor="role">{__("Role")} *</Label>
+                    <Label htmlFor="role">
+                      {__("Role")}
+                      {" "}
+                      *
+                    </Label>
                     <Controller
                       control={control}
                       name="role"
@@ -526,7 +530,9 @@ export default function ProcessingActivityDetailsPage(props: Props) {
 
                   <div>
                     <Label htmlFor="specialOrCriminalData">
-                      {__("Special or Criminal Data")} *
+                      {__("Special or Criminal Data")}
+                      {" "}
+                      *
                     </Label>
                     <Controller
                       control={control}
@@ -561,7 +567,11 @@ export default function ProcessingActivityDetailsPage(props: Props) {
                   />
 
                   <div>
-                    <Label htmlFor="lawfulBasis">{__("Lawful Basis")} *</Label>
+                    <Label htmlFor="lawfulBasis">
+                      {__("Lawful Basis")}
+                      {" "}
+                      *
+                    </Label>
                     <Controller
                       control={control}
                       name="lawfulBasis"
@@ -699,7 +709,9 @@ export default function ProcessingActivityDetailsPage(props: Props) {
 
                   <div>
                     <Label htmlFor="dataProtectionImpactAssessmentNeeded">
-                      {__("Data Protection Impact Assessment")} *
+                      {__("Data Protection Impact Assessment")}
+                      {" "}
+                      *
                     </Label>
                     <Controller
                       control={control}
@@ -729,7 +741,9 @@ export default function ProcessingActivityDetailsPage(props: Props) {
 
                   <div>
                     <Label htmlFor="transferImpactAssessmentNeeded">
-                      {__("Transfer Impact Assessment")} *
+                      {__("Transfer Impact Assessment")}
+                      {" "}
+                      *
                     </Label>
                     <Controller
                       control={control}
@@ -791,156 +805,158 @@ export default function ProcessingActivityDetailsPage(props: Props) {
       {activeTab === "dpia" && (
         <Card>
           <div className="p-6">
-            {!showDpiaForm &&
-            (!activity?.dataProtectionImpactAssessment?.id || dpiaDeleted) ? (
-              <div className="flex flex-col items-center justify-center py-16 w-full">
-                <h2 className="text-xl font-semibold mb-6 text-center">
-                  {__("Data Protection Impact Assessment")}
-                </h2>
-                {!isSnapshotMode && activity.canCreateDPIA && (
-                  <Button
-                    variant="primary"
-                    onClick={() => setShowDpiaForm(true)}
-                  >
-                    {__("Create DPIA")}
-                  </Button>
-                )}
-              </div>
-            ) : (
-              <>
-                <div className="flex items-center justify-between mb-6">
-                  <h2 className="text-xl font-semibold">
-                    {__("Data Protection Impact Assessment")}
-                  </h2>
-                  {!isSnapshotMode &&
-                    activity?.dataProtectionImpactAssessment?.id &&
-                    !dpiaDeleted &&
-                    activity.dataProtectionImpactAssessment.canDelete && (
-                      <Button variant="danger" onClick={deleteDPIA}>
-                        {__("Delete DPIA")}
+            {!showDpiaForm
+              && (!activity?.dataProtectionImpactAssessment?.id || dpiaDeleted)
+              ? (
+                  <div className="flex flex-col items-center justify-center py-16 w-full">
+                    <h2 className="text-xl font-semibold mb-6 text-center">
+                      {__("Data Protection Impact Assessment")}
+                    </h2>
+                    {!isSnapshotMode && activity.canCreateDPIA && (
+                      <Button
+                        variant="primary"
+                        onClick={() => setShowDpiaForm(true)}
+                      >
+                        {__("Create DPIA")}
                       </Button>
                     )}
-                </div>
-
-                <form onSubmit={onDPIASubmit} className="space-y-6">
-                  <div>
-                    <Label htmlFor="dpia-description">
-                      {__("Description")}
-                    </Label>
-                    <Textarea
-                      id="dpia-description"
-                      {...dpiaForm.register("description")}
-                      placeholder={__(
-                        "Describe the processing activity and its purpose",
-                      )}
-                      rows={4}
-                      disabled={isSnapshotMode || !canCreateOrUpdateDPIA}
-                    />
                   </div>
-
-                  <div>
-                    <Label htmlFor="dpia-necessity">
-                      {__("Necessity and Proportionality")}
-                    </Label>
-                    <Textarea
-                      id="dpia-necessity"
-                      {...dpiaForm.register("necessityAndProportionality")}
-                      placeholder={__(
-                        "Explain why the processing is necessary and proportionate",
-                      )}
-                      rows={4}
-                      disabled={isSnapshotMode || !canCreateOrUpdateDPIA}
-                    />
-                  </div>
-
-                  <div>
-                    <Label htmlFor="dpia-potential-risk">
-                      {__("Potential Risk")}
-                    </Label>
-                    <Textarea
-                      id="dpia-potential-risk"
-                      {...dpiaForm.register("potentialRisk")}
-                      placeholder={__(
-                        "Describe the potential risks to data subjects",
-                      )}
-                      rows={4}
-                      disabled={isSnapshotMode || !canCreateOrUpdateDPIA}
-                    />
-                  </div>
-
-                  <div>
-                    <Label htmlFor="dpia-mitigations">
-                      {__("Mitigations")}
-                    </Label>
-                    <Textarea
-                      id="dpia-mitigations"
-                      {...dpiaForm.register("mitigations")}
-                      placeholder={__(
-                        "Describe measures to mitigate the identified risks",
-                      )}
-                      rows={4}
-                      disabled={isSnapshotMode || !canCreateOrUpdateDPIA}
-                    />
-                  </div>
-
-                  <div>
-                    <Label htmlFor="dpia-residual-risk">
-                      {__("Residual Risk")}
-                    </Label>
-                    <Controller
-                      control={dpiaForm.control}
-                      name="residualRisk"
-                      render={({ field }) => (
-                        <Select
-                          id="dpia-residual-risk"
-                          placeholder={__("Select residual risk level")}
-                          onValueChange={field.onChange}
-                          value={field.value}
-                          className="w-full"
-                          disabled={isSnapshotMode || !canCreateOrUpdateDPIA}
-                        >
-                          <Option value="LOW">{__("Low")}</Option>
-                          <Option value="MEDIUM">{__("Medium")}</Option>
-                          <Option value="HIGH">{__("High")}</Option>
-                        </Select>
-                      )}
-                    />
-                  </div>
-
-                  {!isSnapshotMode && (
-                    <div className="flex justify-end gap-3 pt-4">
-                      {(!activity?.dataProtectionImpactAssessment?.id ||
-                        dpiaDeleted) && (
-                        <Button
-                          type="button"
-                          variant="secondary"
-                          onClick={() => setShowDpiaForm(false)}
-                        >
-                          {__("Cancel")}
-                        </Button>
-                      )}
-                      {(activity?.dataProtectionImpactAssessment?.id &&
-                      !dpiaDeleted
-                        ? activity.dataProtectionImpactAssessment.canUpdate
-                        : activity.canCreateDPIA) && (
-                        <Button
-                          type="submit"
-                          variant="primary"
-                          disabled={dpiaSubmitting}
-                        >
-                          {dpiaSubmitting
-                            ? __("Saving...")
-                            : activity?.dataProtectionImpactAssessment?.id &&
-                                !dpiaDeleted
-                              ? __("Update DPIA")
-                              : __("Create DPIA")}
+                )
+              : (
+                  <>
+                    <div className="flex items-center justify-between mb-6">
+                      <h2 className="text-xl font-semibold">
+                        {__("Data Protection Impact Assessment")}
+                      </h2>
+                      {!isSnapshotMode
+                        && activity?.dataProtectionImpactAssessment?.id
+                        && !dpiaDeleted
+                        && activity.dataProtectionImpactAssessment.canDelete && (
+                        <Button variant="danger" onClick={deleteDPIA}>
+                          {__("Delete DPIA")}
                         </Button>
                       )}
                     </div>
-                  )}
-                </form>
-              </>
-            )}
+
+                    <form onSubmit={e => void onDPIASubmit(e)} className="space-y-6">
+                      <div>
+                        <Label htmlFor="dpia-description">
+                          {__("Description")}
+                        </Label>
+                        <Textarea
+                          id="dpia-description"
+                          {...dpiaForm.register("description")}
+                          placeholder={__(
+                            "Describe the processing activity and its purpose",
+                          )}
+                          rows={4}
+                          disabled={isSnapshotMode || !canCreateOrUpdateDPIA}
+                        />
+                      </div>
+
+                      <div>
+                        <Label htmlFor="dpia-necessity">
+                          {__("Necessity and Proportionality")}
+                        </Label>
+                        <Textarea
+                          id="dpia-necessity"
+                          {...dpiaForm.register("necessityAndProportionality")}
+                          placeholder={__(
+                            "Explain why the processing is necessary and proportionate",
+                          )}
+                          rows={4}
+                          disabled={isSnapshotMode || !canCreateOrUpdateDPIA}
+                        />
+                      </div>
+
+                      <div>
+                        <Label htmlFor="dpia-potential-risk">
+                          {__("Potential Risk")}
+                        </Label>
+                        <Textarea
+                          id="dpia-potential-risk"
+                          {...dpiaForm.register("potentialRisk")}
+                          placeholder={__(
+                            "Describe the potential risks to data subjects",
+                          )}
+                          rows={4}
+                          disabled={isSnapshotMode || !canCreateOrUpdateDPIA}
+                        />
+                      </div>
+
+                      <div>
+                        <Label htmlFor="dpia-mitigations">
+                          {__("Mitigations")}
+                        </Label>
+                        <Textarea
+                          id="dpia-mitigations"
+                          {...dpiaForm.register("mitigations")}
+                          placeholder={__(
+                            "Describe measures to mitigate the identified risks",
+                          )}
+                          rows={4}
+                          disabled={isSnapshotMode || !canCreateOrUpdateDPIA}
+                        />
+                      </div>
+
+                      <div>
+                        <Label htmlFor="dpia-residual-risk">
+                          {__("Residual Risk")}
+                        </Label>
+                        <Controller
+                          control={dpiaForm.control}
+                          name="residualRisk"
+                          render={({ field }) => (
+                            <Select
+                              id="dpia-residual-risk"
+                              placeholder={__("Select residual risk level")}
+                              onValueChange={field.onChange}
+                              value={field.value}
+                              className="w-full"
+                              disabled={isSnapshotMode || !canCreateOrUpdateDPIA}
+                            >
+                              <Option value="LOW">{__("Low")}</Option>
+                              <Option value="MEDIUM">{__("Medium")}</Option>
+                              <Option value="HIGH">{__("High")}</Option>
+                            </Select>
+                          )}
+                        />
+                      </div>
+
+                      {!isSnapshotMode && (
+                        <div className="flex justify-end gap-3 pt-4">
+                          {(!activity?.dataProtectionImpactAssessment?.id
+                            || dpiaDeleted) && (
+                            <Button
+                              type="button"
+                              variant="secondary"
+                              onClick={() => setShowDpiaForm(false)}
+                            >
+                              {__("Cancel")}
+                            </Button>
+                          )}
+                          {(activity?.dataProtectionImpactAssessment?.id
+                            && !dpiaDeleted
+                            ? activity.dataProtectionImpactAssessment.canUpdate
+                            : activity.canCreateDPIA) && (
+                            <Button
+                              type="submit"
+                              variant="primary"
+                              disabled={dpiaSubmitting}
+                            >
+                              {dpiaSubmitting
+                                ? __("Saving...")
+                                : activity?.dataProtectionImpactAssessment?.id
+                                  && !dpiaDeleted
+                                  ? __("Update DPIA")
+                                  : __("Create DPIA")}
+                            </Button>
+                          )}
+                        </div>
+                      )}
+                    </form>
+                  </>
+                )}
           </div>
         </Card>
       )}
@@ -948,144 +964,146 @@ export default function ProcessingActivityDetailsPage(props: Props) {
       {activeTab === "tia" && (
         <Card>
           <div className="p-6">
-            {!showTiaForm &&
-            (!activity?.transferImpactAssessment?.id || tiaDeleted) ? (
-              <div className="flex flex-col items-center justify-center py-16 w-full">
-                <h2 className="text-xl font-semibold mb-6 text-center">
-                  {__("Transfer Impact Assessment")}
-                </h2>
-                {!isSnapshotMode && activity.canCreateTIA && (
-                  <Button
-                    variant="primary"
-                    onClick={() => setShowTiaForm(true)}
-                  >
-                    {__("Create TIA")}
-                  </Button>
-                )}
-              </div>
-            ) : (
-              <>
-                <div className="flex items-center justify-between mb-6">
-                  <h2 className="text-xl font-semibold">
-                    {__("Transfer Impact Assessment")}
-                  </h2>
-                  {!isSnapshotMode &&
-                    activity?.transferImpactAssessment?.id &&
-                    !tiaDeleted &&
-                    activity.transferImpactAssessment.canDelete && (
-                      <Button variant="danger" onClick={deleteTIA}>
-                        {__("Delete TIA")}
+            {!showTiaForm
+              && (!activity?.transferImpactAssessment?.id || tiaDeleted)
+              ? (
+                  <div className="flex flex-col items-center justify-center py-16 w-full">
+                    <h2 className="text-xl font-semibold mb-6 text-center">
+                      {__("Transfer Impact Assessment")}
+                    </h2>
+                    {!isSnapshotMode && activity.canCreateTIA && (
+                      <Button
+                        variant="primary"
+                        onClick={() => setShowTiaForm(true)}
+                      >
+                        {__("Create TIA")}
                       </Button>
                     )}
-                </div>
-
-                <form onSubmit={onTIASubmit} className="space-y-6">
-                  <div>
-                    <Label htmlFor="tia-data-subjects">
-                      {__("Data Subjects")}
-                    </Label>
-                    <Textarea
-                      id="tia-data-subjects"
-                      {...tiaForm.register("dataSubjects")}
-                      placeholder={__(
-                        "Describe the data subjects involved in the transfer",
-                      )}
-                      rows={4}
-                      disabled={isSnapshotMode || !canCreateOrUpdateTIA}
-                    />
                   </div>
-
-                  <div>
-                    <Label htmlFor="tia-legal-mechanism">
-                      {__("Legal Mechanism")}
-                    </Label>
-                    <Textarea
-                      id="tia-legal-mechanism"
-                      {...tiaForm.register("legalMechanism")}
-                      placeholder={__(
-                        "Describe the legal mechanism for the transfer (e.g., SCCs, BCRs, adequacy decision)",
-                      )}
-                      rows={4}
-                      disabled={isSnapshotMode || !canCreateOrUpdateTIA}
-                    />
-                  </div>
-
-                  <div>
-                    <Label htmlFor="tia-transfer">{__("Transfer")}</Label>
-                    <Textarea
-                      id="tia-transfer"
-                      {...tiaForm.register("transfer")}
-                      placeholder={__(
-                        "Describe the nature and details of the data transfer",
-                      )}
-                      rows={4}
-                      disabled={isSnapshotMode || !canCreateOrUpdateTIA}
-                    />
-                  </div>
-
-                  <div>
-                    <Label htmlFor="tia-local-law-risk">
-                      {__("Local Law Risk")}
-                    </Label>
-                    <Textarea
-                      id="tia-local-law-risk"
-                      {...tiaForm.register("localLawRisk")}
-                      placeholder={__(
-                        "Assess the risks related to the local laws of the destination country",
-                      )}
-                      rows={4}
-                      disabled={isSnapshotMode || !canCreateOrUpdateTIA}
-                    />
-                  </div>
-
-                  <div>
-                    <Label htmlFor="tia-supplementary-measures">
-                      {__("Supplementary Measures")}
-                    </Label>
-                    <Textarea
-                      id="tia-supplementary-measures"
-                      {...tiaForm.register("supplementaryMeasures")}
-                      placeholder={__(
-                        "Describe any supplementary measures taken to ensure adequate protection",
-                      )}
-                      rows={4}
-                      disabled={isSnapshotMode || !canCreateOrUpdateTIA}
-                    />
-                  </div>
-
-                  {!isSnapshotMode && (
-                    <div className="flex justify-end gap-3 pt-4">
-                      {(!activity?.transferImpactAssessment?.id ||
-                        tiaDeleted) && (
-                        <Button
-                          type="button"
-                          variant="secondary"
-                          onClick={() => setShowTiaForm(false)}
-                        >
-                          {__("Cancel")}
-                        </Button>
-                      )}
-                      {(activity?.transferImpactAssessment?.id && !tiaDeleted
-                        ? activity.transferImpactAssessment.canUpdate
-                        : activity.canCreateTIA) && (
-                        <Button
-                          type="submit"
-                          variant="primary"
-                          disabled={tiaSubmitting}
-                        >
-                          {tiaSubmitting
-                            ? __("Saving...")
-                            : activity?.transferImpactAssessment?.id &&
-                                !tiaDeleted
-                              ? __("Update TIA")
-                              : __("Create TIA")}
+                )
+              : (
+                  <>
+                    <div className="flex items-center justify-between mb-6">
+                      <h2 className="text-xl font-semibold">
+                        {__("Transfer Impact Assessment")}
+                      </h2>
+                      {!isSnapshotMode
+                        && activity?.transferImpactAssessment?.id
+                        && !tiaDeleted
+                        && activity.transferImpactAssessment.canDelete && (
+                        <Button variant="danger" onClick={deleteTIA}>
+                          {__("Delete TIA")}
                         </Button>
                       )}
                     </div>
-                  )}
-                </form>
-              </>
-            )}
+
+                    <form onSubmit={e => void onTIASubmit(e)} className="space-y-6">
+                      <div>
+                        <Label htmlFor="tia-data-subjects">
+                          {__("Data Subjects")}
+                        </Label>
+                        <Textarea
+                          id="tia-data-subjects"
+                          {...tiaForm.register("dataSubjects")}
+                          placeholder={__(
+                            "Describe the data subjects involved in the transfer",
+                          )}
+                          rows={4}
+                          disabled={isSnapshotMode || !canCreateOrUpdateTIA}
+                        />
+                      </div>
+
+                      <div>
+                        <Label htmlFor="tia-legal-mechanism">
+                          {__("Legal Mechanism")}
+                        </Label>
+                        <Textarea
+                          id="tia-legal-mechanism"
+                          {...tiaForm.register("legalMechanism")}
+                          placeholder={__(
+                            "Describe the legal mechanism for the transfer (e.g., SCCs, BCRs, adequacy decision)",
+                          )}
+                          rows={4}
+                          disabled={isSnapshotMode || !canCreateOrUpdateTIA}
+                        />
+                      </div>
+
+                      <div>
+                        <Label htmlFor="tia-transfer">{__("Transfer")}</Label>
+                        <Textarea
+                          id="tia-transfer"
+                          {...tiaForm.register("transfer")}
+                          placeholder={__(
+                            "Describe the nature and details of the data transfer",
+                          )}
+                          rows={4}
+                          disabled={isSnapshotMode || !canCreateOrUpdateTIA}
+                        />
+                      </div>
+
+                      <div>
+                        <Label htmlFor="tia-local-law-risk">
+                          {__("Local Law Risk")}
+                        </Label>
+                        <Textarea
+                          id="tia-local-law-risk"
+                          {...tiaForm.register("localLawRisk")}
+                          placeholder={__(
+                            "Assess the risks related to the local laws of the destination country",
+                          )}
+                          rows={4}
+                          disabled={isSnapshotMode || !canCreateOrUpdateTIA}
+                        />
+                      </div>
+
+                      <div>
+                        <Label htmlFor="tia-supplementary-measures">
+                          {__("Supplementary Measures")}
+                        </Label>
+                        <Textarea
+                          id="tia-supplementary-measures"
+                          {...tiaForm.register("supplementaryMeasures")}
+                          placeholder={__(
+                            "Describe any supplementary measures taken to ensure adequate protection",
+                          )}
+                          rows={4}
+                          disabled={isSnapshotMode || !canCreateOrUpdateTIA}
+                        />
+                      </div>
+
+                      {!isSnapshotMode && (
+                        <div className="flex justify-end gap-3 pt-4">
+                          {(!activity?.transferImpactAssessment?.id
+                            || tiaDeleted) && (
+                            <Button
+                              type="button"
+                              variant="secondary"
+                              onClick={() => setShowTiaForm(false)}
+                            >
+                              {__("Cancel")}
+                            </Button>
+                          )}
+                          {(activity?.transferImpactAssessment?.id && !tiaDeleted
+                            ? activity.transferImpactAssessment.canUpdate
+                            : activity.canCreateTIA) && (
+                            <Button
+                              type="submit"
+                              variant="primary"
+                              disabled={tiaSubmitting}
+                            >
+                              {tiaSubmitting
+                                ? __("Saving...")
+                                : activity?.transferImpactAssessment?.id
+                                  && !tiaDeleted
+                                  ? __("Update TIA")
+                                  : __("Create TIA")}
+                            </Button>
+                          )}
+                        </div>
+                      )}
+                    </form>
+                  </>
+                )}
           </div>
         </Card>
       )}
diff --git a/apps/console/src/pages/organizations/processingActivities/dialogs/CreateProcessingActivityDialog.tsx b/apps/console/src/pages/organizations/processingActivities/dialogs/CreateProcessingActivityDialog.tsx
index ffa95d0d4..3d8f2f8a8 100644
--- a/apps/console/src/pages/organizations/processingActivities/dialogs/CreateProcessingActivityDialog.tsx
+++ b/apps/console/src/pages/organizations/processingActivities/dialogs/CreateProcessingActivityDialog.tsx
@@ -98,7 +98,7 @@ export function CreateProcessingActivityDialog({
     },
   });
 
-  const onSubmit = handleSubmit(async (formData: FormData) => {
+  const onSubmit = async (formData: FormData) => {
     try {
       await createProcessingActivity({
         organizationId,
@@ -139,7 +139,7 @@ export function CreateProcessingActivityDialog({
         variant: "error",
       });
     }
-  });
+  };
 
   return (
     <Dialog
@@ -148,7 +148,7 @@ export function CreateProcessingActivityDialog({
       title={<Breadcrumb items={[__("Processing Activities"), __("Create Processing Activity")]} />}
       className="max-w-4xl"
     >
-      <form onSubmit={onSubmit}>
+      <form onSubmit={e => void handleSubmit(onSubmit)(e)}>
         <DialogContent padded className="space-y-6">
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
             <div className="space-y-4">
@@ -206,7 +206,11 @@ export function CreateProcessingActivityDialog({
               />
 
               <div>
-                <Label htmlFor="specialOrCriminalData">{__("Special or Criminal Data")} *</Label>
+                <Label htmlFor="specialOrCriminalData">
+                  {__("Special or Criminal Data")}
+                  {" "}
+                  *
+                </Label>
                 <Controller
                   control={control}
                   name="specialOrCriminalData"
@@ -235,7 +239,11 @@ export function CreateProcessingActivityDialog({
               />
 
               <div>
-                <Label htmlFor="lawfulBasis">{__("Lawful Basis")} *</Label>
+                <Label htmlFor="lawfulBasis">
+                  {__("Lawful Basis")}
+                  {" "}
+                  *
+                </Label>
                 <Controller
                   control={control}
                   name="lawfulBasis"
@@ -353,7 +361,11 @@ export function CreateProcessingActivityDialog({
               </div>
 
               <div>
-                <Label htmlFor="dataProtectionImpactAssessmentNeeded">{__("Data Protection Impact Assessment")} *</Label>
+                <Label htmlFor="dataProtectionImpactAssessmentNeeded">
+                  {__("Data Protection Impact Assessment")}
+                  {" "}
+                  *
+                </Label>
                 <Controller
                   control={control}
                   name="dataProtectionImpactAssessmentNeeded"
@@ -375,7 +387,11 @@ export function CreateProcessingActivityDialog({
               </div>
 
               <div>
-                <Label htmlFor="transferImpactAssessmentNeeded">{__("Transfer Impact Assessment")} *</Label>
+                <Label htmlFor="transferImpactAssessmentNeeded">
+                  {__("Transfer Impact Assessment")}
+                  {" "}
+                  *
+                </Label>
                 <Controller
                   control={control}
                   name="transferImpactAssessmentNeeded"
diff --git a/apps/console/src/pages/organizations/rightsRequests/RightsRequestDetailsPage.tsx b/apps/console/src/pages/organizations/rightsRequests/RightsRequestDetailsPage.tsx
index de106050d..5c6b3ef84 100644
--- a/apps/console/src/pages/organizations/rightsRequests/RightsRequestDetailsPage.tsx
+++ b/apps/console/src/pages/organizations/rightsRequests/RightsRequestDetailsPage.tsx
@@ -1,318 +1,326 @@
 import {
-    ConnectionHandler,
-    usePreloadedQuery,
-    type PreloadedQuery,
+  ConnectionHandler,
+  usePreloadedQuery,
+  type PreloadedQuery,
 } from "react-relay";
 import {
-    rightsRequestNodeQuery,
-    useDeleteRightsRequest,
-    useUpdateRightsRequest,
-    RightsRequestsConnectionKey,
+  rightsRequestNodeQuery,
+  useDeleteRightsRequest,
+  useUpdateRightsRequest,
+  RightsRequestsConnectionKey,
 } from "../../../hooks/graph/RightsRequestGraph";
 import {
-    ActionDropdown,
-    Badge,
-    Breadcrumb,
-    Button,
-    DropdownItem,
-    Field,
-    Option,
-    Input,
-    Card,
-    Textarea,
-    useToast,
-    Select,
-    Label,
+  ActionDropdown,
+  Badge,
+  Breadcrumb,
+  Button,
+  DropdownItem,
+  Field,
+  Option,
+  Input,
+  Card,
+  Textarea,
+  useToast,
+  Select,
+  Label,
 } from "@probo/ui";
 import { useTranslate } from "@probo/i18n";
 import { useOrganizationId } from "/hooks/useOrganizationId";
 import { useFormWithSchema } from "/hooks/useFormWithSchema";
 import { Controller } from "react-hook-form";
 import {
-    formatError,
-    type GraphQLError,
-    formatDatetime,
-    toDateInput,
-    getRightsRequestTypeLabel,
-    getRightsRequestTypeOptions,
-    getRightsRequestStateVariant,
-    getRightsRequestStateLabel,
-    getRightsRequestStateOptions,
+  formatError,
+  type GraphQLError,
+  formatDatetime,
+  toDateInput,
+  getRightsRequestTypeLabel,
+  getRightsRequestTypeOptions,
+  getRightsRequestStateVariant,
+  getRightsRequestStateLabel,
+  getRightsRequestStateOptions,
 } from "@probo/helpers";
 import z from "zod";
 import type { RightsRequestGraphNodeQuery } from "/__generated__/core/RightsRequestGraphNodeQuery.graphql";
 
 const updateRequestSchema = z.object({
-    requestType: z.enum(["ACCESS", "DELETION", "PORTABILITY"]),
-    requestState: z.enum(["TODO", "IN_PROGRESS", "DONE"]),
-    dataSubject: z.string().optional(),
-    contact: z.string().optional(),
-    details: z.string().optional(),
-    deadline: z.string().optional(),
-    actionTaken: z.string().optional(),
+  requestType: z.enum(["ACCESS", "DELETION", "PORTABILITY"]),
+  requestState: z.enum(["TODO", "IN_PROGRESS", "DONE"]),
+  dataSubject: z.string().optional(),
+  contact: z.string().optional(),
+  details: z.string().optional(),
+  deadline: z.string().optional(),
+  actionTaken: z.string().optional(),
 });
 
 type Props = {
-    queryRef: PreloadedQuery<RightsRequestGraphNodeQuery>;
+  queryRef: PreloadedQuery<RightsRequestGraphNodeQuery>;
 };
 
 export default function RightsRequestDetailsPage(props: Props) {
-    const data = usePreloadedQuery<RightsRequestGraphNodeQuery>(
-        rightsRequestNodeQuery,
-        props.queryRef,
-    );
-    const request = data.node;
-    const { __ } = useTranslate();
-    const { toast } = useToast();
-    const organizationId = useOrganizationId();
+  const data = usePreloadedQuery<RightsRequestGraphNodeQuery>(
+    rightsRequestNodeQuery,
+    props.queryRef,
+  );
+  const request = data.node;
+  const { __ } = useTranslate();
+  const { toast } = useToast();
+  const organizationId = useOrganizationId();
 
-    const updateRequest = useUpdateRightsRequest();
+  const updateRequest = useUpdateRightsRequest();
 
-    const connectionId = ConnectionHandler.getConnectionID(
-        organizationId,
-        RightsRequestsConnectionKey,
-    );
+  const connectionId = ConnectionHandler.getConnectionID(
+    organizationId,
+    RightsRequestsConnectionKey,
+  );
 
-    const deleteRequest = useDeleteRightsRequest(
-        { id: request.id! },
-        connectionId,
-    );
+  const deleteRequest = useDeleteRightsRequest(
+    { id: request.id! },
+    connectionId,
+  );
 
-    const { register, handleSubmit, formState, control } = useFormWithSchema(
-        updateRequestSchema,
-        {
-            defaultValues: {
-                requestType: request.requestType || "ACCESS",
-                requestState: request.requestState || "TODO",
-                dataSubject: request.dataSubject || "",
-                contact: request.contact || "",
-                details: request.details || "",
-                deadline: toDateInput(request.deadline),
-                actionTaken: request.actionTaken || "",
+  const { register, handleSubmit, formState, control } = useFormWithSchema(
+    updateRequestSchema,
+    {
+      defaultValues: {
+        requestType: request.requestType || "ACCESS",
+        requestState: request.requestState || "TODO",
+        dataSubject: request.dataSubject || "",
+        contact: request.contact || "",
+        details: request.details || "",
+        deadline: toDateInput(request.deadline),
+        actionTaken: request.actionTaken || "",
+      },
+    },
+  );
+
+  const onSubmit = handleSubmit(async (formData: z.infer<typeof updateRequestSchema>) => {
+    try {
+      await updateRequest({
+        id: request.id!,
+        requestType: formData.requestType,
+        requestState: formData.requestState,
+        dataSubject: formData.dataSubject || undefined,
+        contact: formData.contact || undefined,
+        details: formData.details || undefined,
+        deadline: formatDatetime(formData.deadline) ?? null,
+        actionTaken: formData.actionTaken || undefined,
+      });
+
+      toast({
+        title: __("Success"),
+        description: __("Rights request updated successfully"),
+        variant: "success",
+      });
+    } catch (error) {
+      toast({
+        title: __("Error"),
+        description: formatError(
+          __("Failed to update rights request"),
+          error as GraphQLError,
+        ),
+        variant: "error",
+      });
+    }
+  });
+
+  const typeOptions = getRightsRequestTypeOptions(__);
+  const stateOptions = getRightsRequestStateOptions(__);
+
+  const breadcrumbRequestsUrl = `/organizations/${organizationId}/rights-requests`;
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <Breadcrumb
+          items={[
+            {
+              label: __("Rights Requests"),
+              to: breadcrumbRequestsUrl,
             },
-        },
-    );
+            { label: request.dataSubject || request.id! },
+          ]}
+        />
+        {request.canDelete && (
+          <ActionDropdown>
+            <DropdownItem onClick={deleteRequest} variant="danger">
+              {__("Delete")}
+            </DropdownItem>
+          </ActionDropdown>
+        )}
+      </div>
 
-    const onSubmit = handleSubmit(async (formData) => {
-        try {
-            await updateRequest({
-                id: request.id!,
-                requestType: formData.requestType,
-                requestState: formData.requestState,
-                dataSubject: formData.dataSubject || undefined,
-                contact: formData.contact || undefined,
-                details: formData.details || undefined,
-                deadline: formatDatetime(formData.deadline) ?? null,
-                actionTaken: formData.actionTaken || undefined,
-            });
-
-            toast({
-                title: __("Success"),
-                description: __("Rights request updated successfully"),
-                variant: "success",
-            });
-        } catch (error) {
-            toast({
-                title: __("Error"),
-                description: formatError(
-                    __("Failed to update rights request"),
-                    error as GraphQLError,
-                ),
-                variant: "error",
-            });
-        }
-    });
-
-    const typeOptions = getRightsRequestTypeOptions(__);
-    const stateOptions = getRightsRequestStateOptions(__);
-
-    const breadcrumbRequestsUrl = `/organizations/${organizationId}/rights-requests`;
-
-    return (
-        <div className="space-y-6">
-            <div className="flex items-center justify-between">
-                <Breadcrumb
-                    items={[
-                        {
-                            label: __("Rights Requests"),
-                            to: breadcrumbRequestsUrl,
-                        },
-                        { label: request.dataSubject || request.id! },
-                    ]}
-                />
-                {request.canDelete && (
-                    <ActionDropdown>
-                        <DropdownItem onClick={deleteRequest} variant="danger">
-                            {__("Delete")}
-                        </DropdownItem>
-                    </ActionDropdown>
+      <Card>
+        <div className="p-6">
+          <div className="mb-6">
+            <div className="flex items-center gap-4">
+              <h1 className="text-2xl font-bold">
+                {getRightsRequestTypeLabel(
+                  __,
+                  request.requestType || "ACCESS",
                 )}
+              </h1>
+              <Badge variant="neutral">
+                {getRightsRequestTypeLabel(
+                  __,
+                  request.requestType || "ACCESS",
+                )}
+              </Badge>
+              <Badge
+                variant={getRightsRequestStateVariant(
+                  request.requestState || "TODO",
+                )}
+              >
+                {getRightsRequestStateLabel(
+                  __,
+                  request.requestState || "TODO",
+                )}
+              </Badge>
+            </div>
+          </div>
+
+          <form onSubmit={e => void onSubmit(e)} className="space-y-4">
+            <div className="grid grid-cols-2 gap-4">
+              <Controller
+                control={control}
+                name="requestType"
+                render={({ field }) => (
+                  <div>
+                    <Label>
+                      {__("Request Type")}
+                      {" "}
+                      *
+                    </Label>
+                    <Select
+                      value={field.value}
+                      onValueChange={field.onChange}
+                    >
+                      {typeOptions.map(option => (
+                        <Option
+                          key={option.value}
+                          value={option.value}
+                        >
+                          {option.label}
+                        </Option>
+                      ))}
+                    </Select>
+                    {formState.errors.requestType
+                      ?.message && (
+                      <div className="text-red-500 text-sm mt-1">
+                        {
+                          formState.errors.requestType
+                            .message
+                        }
+                      </div>
+                    )}
+                  </div>
+                )}
+              />
+
+              <Controller
+                control={control}
+                name="requestState"
+                render={({ field }) => (
+                  <div>
+                    <Label>
+                      {__("State")}
+                      {" "}
+                      *
+                    </Label>
+                    <Select
+                      value={field.value}
+                      onValueChange={field.onChange}
+                    >
+                      {stateOptions.map(option => (
+                        <Option
+                          key={option.value}
+                          value={option.value}
+                        >
+                          {option.label}
+                        </Option>
+                      ))}
+                    </Select>
+                    {formState.errors.requestState
+                      ?.message && (
+                      <div className="text-red-500 text-sm mt-1">
+                        {
+                          formState.errors
+                            .requestState.message
+                        }
+                      </div>
+                    )}
+                  </div>
+                )}
+              />
             </div>
 
-            <Card>
-                <div className="p-6">
-                    <div className="mb-6">
-                        <div className="flex items-center gap-4">
-                            <h1 className="text-2xl font-bold">
-                                {getRightsRequestTypeLabel(
-                                    __,
-                                    request.requestType || "ACCESS",
-                                )}
-                            </h1>
-                            <Badge variant="neutral">
-                                {getRightsRequestTypeLabel(
-                                    __,
-                                    request.requestType || "ACCESS",
-                                )}
-                            </Badge>
-                            <Badge
-                                variant={getRightsRequestStateVariant(
-                                    request.requestState || "TODO",
-                                )}
-                            >
-                                {getRightsRequestStateLabel(
-                                    __,
-                                    request.requestState || "TODO",
-                                )}
-                            </Badge>
-                        </div>
-                    </div>
+            <Field
+              label={__("Data Subject")}
+              {...register("dataSubject")}
+              error={formState.errors.dataSubject?.message}
+            />
 
-                    <form onSubmit={onSubmit} className="space-y-4">
-                        <div className="grid grid-cols-2 gap-4">
-                            <Controller
-                                control={control}
-                                name="requestType"
-                                render={({ field }) => (
-                                    <div>
-                                        <Label>{__("Request Type")} *</Label>
-                                        <Select
-                                            value={field.value}
-                                            onValueChange={field.onChange}
-                                        >
-                                            {typeOptions.map((option) => (
-                                                <Option
-                                                    key={option.value}
-                                                    value={option.value}
-                                                >
-                                                    {option.label}
-                                                </Option>
-                                            ))}
-                                        </Select>
-                                        {formState.errors.requestType
-                                            ?.message && (
-                                            <div className="text-red-500 text-sm mt-1">
-                                                {
-                                                    formState.errors.requestType
-                                                        .message
-                                                }
-                                            </div>
-                                        )}
-                                    </div>
-                                )}
-                            />
+            <Field
+              label={__("Contact")}
+              {...register("contact")}
+              error={formState.errors.contact?.message}
+            />
 
-                            <Controller
-                                control={control}
-                                name="requestState"
-                                render={({ field }) => (
-                                    <div>
-                                        <Label>{__("State")} *</Label>
-                                        <Select
-                                            value={field.value}
-                                            onValueChange={field.onChange}
-                                        >
-                                            {stateOptions.map((option) => (
-                                                <Option
-                                                    key={option.value}
-                                                    value={option.value}
-                                                >
-                                                    {option.label}
-                                                </Option>
-                                            ))}
-                                        </Select>
-                                        {formState.errors.requestState
-                                            ?.message && (
-                                            <div className="text-red-500 text-sm mt-1">
-                                                {
-                                                    formState.errors
-                                                        .requestState.message
-                                                }
-                                            </div>
-                                        )}
-                                    </div>
-                                )}
-                            />
-                        </div>
-
-                        <Field
-                            label={__("Data Subject")}
-                            {...register("dataSubject")}
-                            error={formState.errors.dataSubject?.message}
-                        />
-
-                        <Field
-                            label={__("Contact")}
-                            {...register("contact")}
-                            error={formState.errors.contact?.message}
-                        />
-
-                        <div>
-                            <Label>{__("Details")}</Label>
-                            <Textarea
-                                {...register("details")}
-                                placeholder={__("Enter request details")}
-                                rows={3}
-                            />
-                            {formState.errors.details?.message && (
-                                <div className="text-red-500 text-sm mt-1">
-                                    {formState.errors.details.message}
-                                </div>
-                            )}
-                        </div>
-
-                        <div className="grid grid-cols-2 gap-4">
-                            <div>
-                                <Label>{__("Deadline")}</Label>
-                                <Input type="date" {...register("deadline")} />
-                                {formState.errors.deadline?.message && (
-                                    <div className="text-red-500 text-sm mt-1">
-                                        {formState.errors.deadline.message}
-                                    </div>
-                                )}
-                            </div>
-                        </div>
-
-                        <div>
-                            <Label>{__("Action Taken")}</Label>
-                            <Textarea
-                                {...register("actionTaken")}
-                                placeholder={__("Enter action taken")}
-                                rows={3}
-                            />
-                            {formState.errors.actionTaken?.message && (
-                                <div className="text-red-500 text-sm mt-1">
-                                    {formState.errors.actionTaken.message}
-                                </div>
-                            )}
-                        </div>
-
-                        <div className="flex justify-end pt-4">
-                            {request.canUpdate && (
-                                <Button
-                                    type="submit"
-                                    variant="primary"
-                                    disabled={formState.isSubmitting}
-                                >
-                                    {formState.isSubmitting
-                                        ? __("Saving...")
-                                        : __("Save Changes")}
-                                </Button>
-                            )}
-                        </div>
-                    </form>
+            <div>
+              <Label>{__("Details")}</Label>
+              <Textarea
+                {...register("details")}
+                placeholder={__("Enter request details")}
+                rows={3}
+              />
+              {formState.errors.details?.message && (
+                <div className="text-red-500 text-sm mt-1">
+                  {formState.errors.details.message}
                 </div>
-            </Card>
+              )}
+            </div>
+
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <Label>{__("Deadline")}</Label>
+                <Input type="date" {...register("deadline")} />
+                {formState.errors.deadline?.message && (
+                  <div className="text-red-500 text-sm mt-1">
+                    {formState.errors.deadline.message}
+                  </div>
+                )}
+              </div>
+            </div>
+
+            <div>
+              <Label>{__("Action Taken")}</Label>
+              <Textarea
+                {...register("actionTaken")}
+                placeholder={__("Enter action taken")}
+                rows={3}
+              />
+              {formState.errors.actionTaken?.message && (
+                <div className="text-red-500 text-sm mt-1">
+                  {formState.errors.actionTaken.message}
+                </div>
+              )}
+            </div>
+
+            <div className="flex justify-end pt-4">
+              {request.canUpdate && (
+                <Button
+                  type="submit"
+                  variant="primary"
+                  disabled={formState.isSubmitting}
+                >
+                  {formState.isSubmitting
+                    ? __("Saving...")
+                    : __("Save Changes")}
+                </Button>
+              )}
+            </div>
+          </form>
         </div>
-    );
+      </Card>
+    </div>
+  );
 }
diff --git a/apps/console/src/pages/organizations/rightsRequests/RightsRequestsPage.tsx b/apps/console/src/pages/organizations/rightsRequests/RightsRequestsPage.tsx
index 4b2621f04..43f47f8ba 100644
--- a/apps/console/src/pages/organizations/rightsRequests/RightsRequestsPage.tsx
+++ b/apps/console/src/pages/organizations/rightsRequests/RightsRequestsPage.tsx
@@ -1,54 +1,54 @@
 import {
-    Button,
-    IconPlusLarge,
-    PageHeader,
-    Card,
-    Thead,
-    Tbody,
-    Tr,
-    Th,
-    Td,
-    Badge,
-    ActionDropdown,
-    DropdownItem,
-    IconTrashCan,
-    Table,
-    useConfirm,
+  Button,
+  IconPlusLarge,
+  PageHeader,
+  Card,
+  Thead,
+  Tbody,
+  Tr,
+  Th,
+  Td,
+  Badge,
+  ActionDropdown,
+  DropdownItem,
+  IconTrashCan,
+  Table,
+  useConfirm,
 } from "@probo/ui";
 import { useTranslate } from "@probo/i18n";
 import { usePageTitle } from "@probo/hooks";
 import {
-    ConnectionHandler,
-    graphql,
-    usePaginationFragment,
-    usePreloadedQuery,
-    useMutation,
-    type PreloadedQuery,
+  ConnectionHandler,
+  graphql,
+  usePaginationFragment,
+  usePreloadedQuery,
+  useMutation,
+  type PreloadedQuery,
 } from "react-relay";
 import { useOrganizationId } from "/hooks/useOrganizationId";
 import { CreateRightsRequestDialog } from "./dialogs/CreateRightsRequestDialog";
 import {
-    deleteRightsRequestMutation,
-    RightsRequestsConnectionKey,
-    rightsRequestsQuery,
+  deleteRightsRequestMutation,
+  RightsRequestsConnectionKey,
+  rightsRequestsQuery,
 } from "../../../hooks/graph/RightsRequestGraph";
 import {
-    sprintf,
-    promisifyMutation,
-    formatDate,
-    getRightsRequestTypeLabel,
-    getRightsRequestStateVariant,
-    getRightsRequestStateLabel,
+  sprintf,
+  promisifyMutation,
+  formatDate,
+  getRightsRequestTypeLabel,
+  getRightsRequestStateVariant,
+  getRightsRequestStateLabel,
 } from "@probo/helpers";
 import type { NodeOf } from "/types";
 import type {
-    RightsRequestsPageFragment$key,
-    RightsRequestsPageFragment$data,
+  RightsRequestsPageFragment$key,
+  RightsRequestsPageFragment$data,
 } from "/__generated__/core/RightsRequestsPageFragment.graphql";
 import type { RightsRequestGraphListQuery } from "/__generated__/core/RightsRequestGraphListQuery.graphql";
 
 interface RightsRequestsPageProps {
-    queryRef: PreloadedQuery<RightsRequestGraphListQuery>;
+  queryRef: PreloadedQuery<RightsRequestGraphListQuery>;
 }
 
 const rightsRequestsPageFragment = graphql`
@@ -89,190 +89,194 @@ const rightsRequestsPageFragment = graphql`
 `;
 
 export default function RightsRequestsPage({
-    queryRef,
+  queryRef,
 }: RightsRequestsPageProps) {
-    const { __ } = useTranslate();
-    const organizationId = useOrganizationId();
+  const { __ } = useTranslate();
+  const organizationId = useOrganizationId();
 
-    usePageTitle(__("Rights Requests"));
+  usePageTitle(__("Rights Requests"));
 
-    const organization = usePreloadedQuery<RightsRequestGraphListQuery>(
-        rightsRequestsQuery,
-        queryRef,
-    );
+  const organization = usePreloadedQuery<RightsRequestGraphListQuery>(
+    rightsRequestsQuery,
+    queryRef,
+  );
 
-    const { data, loadNext, hasNext, isLoadingNext } = usePaginationFragment<
-        RightsRequestGraphListQuery,
-        RightsRequestsPageFragment$key
-    >(rightsRequestsPageFragment, organization.node);
+  const { data, loadNext, hasNext, isLoadingNext } = usePaginationFragment<
+    RightsRequestGraphListQuery,
+    RightsRequestsPageFragment$key
+  >(rightsRequestsPageFragment, organization.node);
 
-    const connectionId = ConnectionHandler.getConnectionID(
-        organizationId,
-        RightsRequestsConnectionKey,
-    );
-    const requests =
-        data?.rightsRequests?.edges?.map((edge) => edge.node) ?? [];
+  const connectionId = ConnectionHandler.getConnectionID(
+    organizationId,
+    RightsRequestsConnectionKey,
+  );
+  const requests
+    = data?.rightsRequests?.edges?.map(edge => edge.node) ?? [];
 
-    const hasAnyAction = requests.some(
-        ({ canUpdate, canDelete }) => canUpdate || canDelete,
-    );
+  const hasAnyAction = requests.some(
+    ({ canUpdate, canDelete }) => canUpdate || canDelete,
+  );
 
-    return (
-        <div className="space-y-6">
-            <PageHeader
-                title={__("Rights Requests")}
-                description={__("Manage data subject rights requests.")}
-            >
-                {organization.node.canCreateRightsRequest && (
-                    <CreateRightsRequestDialog
-                        organizationId={organizationId}
-                        connectionId={connectionId}
-                    >
-                        <Button icon={IconPlusLarge}>
-                            {__("Add rights request")}
-                        </Button>
-                    </CreateRightsRequestDialog>
-                )}
-            </PageHeader>
+  return (
+    <div className="space-y-6">
+      <PageHeader
+        title={__("Rights Requests")}
+        description={__("Manage data subject rights requests.")}
+      >
+        {organization.node.canCreateRightsRequest && (
+          <CreateRightsRequestDialog
+            organizationId={organizationId}
+            connectionId={connectionId}
+          >
+            <Button icon={IconPlusLarge}>
+              {__("Add rights request")}
+            </Button>
+          </CreateRightsRequestDialog>
+        )}
+      </PageHeader>
 
-            {requests.length > 0 ? (
-                <Card>
-                    <Table>
-                        <Thead>
-                            <Tr>
-                                <Th>{__("Type")}</Th>
-                                <Th>{__("State")}</Th>
-                                <Th>{__("Data Subject")}</Th>
-                                <Th>{__("Contact")}</Th>
-                                <Th>{__("Deadline")}</Th>
-                                {hasAnyAction && <Th>{__("Actions")}</Th>}
-                            </Tr>
-                        </Thead>
-                        <Tbody>
-                            {requests.map((request) => (
-                                <RequestRow
-                                    key={request.id}
-                                    request={request}
-                                    connectionId={connectionId}
-                                    hasAnyAction={hasAnyAction}
-                                />
-                            ))}
-                        </Tbody>
-                    </Table>
+      {requests.length > 0
+        ? (
+            <Card>
+              <Table>
+                <Thead>
+                  <Tr>
+                    <Th>{__("Type")}</Th>
+                    <Th>{__("State")}</Th>
+                    <Th>{__("Data Subject")}</Th>
+                    <Th>{__("Contact")}</Th>
+                    <Th>{__("Deadline")}</Th>
+                    {hasAnyAction && <Th>{__("Actions")}</Th>}
+                  </Tr>
+                </Thead>
+                <Tbody>
+                  {requests.map(request => (
+                    <RequestRow
+                      key={request.id}
+                      request={request}
+                      connectionId={connectionId}
+                      hasAnyAction={hasAnyAction}
+                    />
+                  ))}
+                </Tbody>
+              </Table>
 
-                    {hasNext && (
-                        <div className="p-4 border-t">
-                            <Button
-                                variant="secondary"
-                                onClick={() => loadNext(10)}
-                                disabled={isLoadingNext}
-                            >
-                                {isLoadingNext
-                                    ? __("Loading...")
-                                    : __("Load more")}
-                            </Button>
-                        </div>
-                    )}
-                </Card>
-            ) : (
-                <Card padded>
-                    <div className="text-center py-12">
-                        <h3 className="text-lg font-semibold mb-2">
-                            {__("No rights requests yet")}
-                        </h3>
-                        <p className="text-txt-tertiary mb-4">
-                            {__(
-                                "Create your first rights request to get started.",
-                            )}
-                        </p>
-                    </div>
-                </Card>
-            )}
-        </div>
-    );
+              {hasNext && (
+                <div className="p-4 border-t">
+                  <Button
+                    variant="secondary"
+                    onClick={() => loadNext(10)}
+                    disabled={isLoadingNext}
+                  >
+                    {isLoadingNext
+                      ? __("Loading...")
+                      : __("Load more")}
+                  </Button>
+                </div>
+              )}
+            </Card>
+          )
+        : (
+            <Card padded>
+              <div className="text-center py-12">
+                <h3 className="text-lg font-semibold mb-2">
+                  {__("No rights requests yet")}
+                </h3>
+                <p className="text-txt-tertiary mb-4">
+                  {__(
+                    "Create your first rights request to get started.",
+                  )}
+                </p>
+              </div>
+            </Card>
+          )}
+    </div>
+  );
 }
 
 function RequestRow({
-    request,
-    connectionId,
-    hasAnyAction,
+  request,
+  connectionId,
+  hasAnyAction,
 }: {
-    request: NodeOf<
-        NonNullable<RightsRequestsPageFragment$data["rightsRequests"]>
-    >;
-    connectionId: string;
-    hasAnyAction: boolean;
+  request: NodeOf<
+    NonNullable<RightsRequestsPageFragment$data["rightsRequests"]>
+  >;
+  connectionId: string;
+  hasAnyAction: boolean;
 }) {
-    const organizationId = useOrganizationId();
-    const { __ } = useTranslate();
-    const [deleteRequest] = useMutation(deleteRightsRequestMutation);
-    const confirm = useConfirm();
+  const organizationId = useOrganizationId();
+  const { __ } = useTranslate();
+  const [deleteRequest] = useMutation(deleteRightsRequestMutation);
+  const confirm = useConfirm();
 
-    const handleDelete = () => {
-        confirm(
-            () =>
-                promisifyMutation(deleteRequest)({
-                    variables: {
-                        input: {
-                            rightsRequestId: request.id,
-                        },
-                        connections: [connectionId],
-                    },
-                }),
-            {
-                message: sprintf(
-                    __(
-                        "This will permanently delete the rights request. This action cannot be undone.",
-                    ),
-                ),
+  const handleDelete = () => {
+    confirm(
+      () =>
+        promisifyMutation(deleteRequest)({
+          variables: {
+            input: {
+              rightsRequestId: request.id,
             },
-        );
-    };
-
-    const detailsUrl = `/organizations/${organizationId}/rights-requests/${request.id}`;
-
-    return (
-        <Tr to={detailsUrl}>
-            <Td>
-                <Badge variant="neutral">
-                    {getRightsRequestTypeLabel(__, request.requestType)}
-                </Badge>
-            </Td>
-            <Td>
-                <Badge
-                    variant={getRightsRequestStateVariant(request.requestState)}
-                >
-                    {getRightsRequestStateLabel(__, request.requestState)}
-                </Badge>
-            </Td>
-            <Td>{request.dataSubject || "-"}</Td>
-            <Td>{request.contact || "-"}</Td>
-            <Td>
-                {request.deadline ? (
-                    <time dateTime={request.deadline}>
-                        {formatDate(request.deadline)}
-                    </time>
-                ) : (
-                    <span className="text-txt-tertiary">
-                        {__("No deadline")}
-                    </span>
-                )}
-            </Td>
-            {hasAnyAction && (
-                <Td noLink width={50} className="text-end">
-                    <ActionDropdown>
-                        {request.canDelete && (
-                            <DropdownItem
-                                icon={IconTrashCan}
-                                variant="danger"
-                                onSelect={handleDelete}
-                            >
-                                {__("Delete")}
-                            </DropdownItem>
-                        )}
-                    </ActionDropdown>
-                </Td>
-            )}
-        </Tr>
+            connections: [connectionId],
+          },
+        }),
+      {
+        message: sprintf(
+          __(
+            "This will permanently delete the rights request. This action cannot be undone.",
+          ),
+        ),
+      },
     );
+  };
+
+  const detailsUrl = `/organizations/${organizationId}/rights-requests/${request.id}`;
+
+  return (
+    <Tr to={detailsUrl}>
+      <Td>
+        <Badge variant="neutral">
+          {getRightsRequestTypeLabel(__, request.requestType)}
+        </Badge>
+      </Td>
+      <Td>
+        <Badge
+          variant={getRightsRequestStateVariant(request.requestState)}
+        >
+          {getRightsRequestStateLabel(__, request.requestState)}
+        </Badge>
+      </Td>
+      <Td>{request.dataSubject || "-"}</Td>
+      <Td>{request.contact || "-"}</Td>
+      <Td>
+        {request.deadline
+          ? (
+              <time dateTime={request.deadline}>
+                {formatDate(request.deadline)}
+              </time>
+            )
+          : (
+              <span className="text-txt-tertiary">
+                {__("No deadline")}
+              </span>
+            )}
+      </Td>
+      {hasAnyAction && (
+        <Td noLink width={50} className="text-end">
+          <ActionDropdown>
+            {request.canDelete && (
+              <DropdownItem
+                icon={IconTrashCan}
+                variant="danger"
+                onSelect={handleDelete}
+              >
+                {__("Delete")}
+              </DropdownItem>
+            )}
+          </ActionDropdown>
+        </Td>
+      )}
+    </Tr>
+  );
 }
diff --git a/apps/console/src/pages/organizations/rightsRequests/dialogs/CreateRightsRequestDialog.tsx b/apps/console/src/pages/organizations/rightsRequests/dialogs/CreateRightsRequestDialog.tsx
index 099e84286..ccd2bcd57 100644
--- a/apps/console/src/pages/organizations/rightsRequests/dialogs/CreateRightsRequestDialog.tsx
+++ b/apps/console/src/pages/organizations/rightsRequests/dialogs/CreateRightsRequestDialog.tsx
@@ -68,7 +68,7 @@ export function CreateRightsRequestDialog({
     },
   });
 
-  const onSubmit = handleSubmit(async (formData: FormData) => {
+  const onSubmit = async (formData: FormData) => {
     try {
       await createRequest({
         organizationId,
@@ -96,7 +96,7 @@ export function CreateRightsRequestDialog({
         variant: "error",
       });
     }
-  });
+  };
 
   const typeOptions = getRightsRequestTypeOptions(__);
   const stateOptions = getRightsRequestStateOptions(__);
@@ -108,7 +108,7 @@ export function CreateRightsRequestDialog({
       title={<Breadcrumb items={[__("Rights Requests"), __("Create Request")]} />}
       className="max-w-2xl"
     >
-      <form onSubmit={onSubmit}>
+      <form onSubmit={e => void handleSubmit(onSubmit)(e)}>
         <DialogContent padded className="space-y-4">
           <div className="grid grid-cols-2 gap-4">
             <Controller
@@ -116,12 +116,16 @@ export function CreateRightsRequestDialog({
               name="requestType"
               render={({ field }) => (
                 <div>
-                  <Label>{__("Request Type")} *</Label>
+                  <Label>
+                    {__("Request Type")}
+                    {" "}
+                    *
+                  </Label>
                   <Select
                     value={field.value}
                     onValueChange={field.onChange}
                   >
-                    {typeOptions.map((option) => (
+                    {typeOptions.map(option => (
                       <Option key={option.value} value={option.value}>
                         {option.label}
                       </Option>
@@ -141,12 +145,16 @@ export function CreateRightsRequestDialog({
               name="requestState"
               render={({ field }) => (
                 <div>
-                  <Label>{__("State")} *</Label>
+                  <Label>
+                    {__("State")}
+                    {" "}
+                    *
+                  </Label>
                   <Select
                     value={field.value}
                     onValueChange={field.onChange}
                   >
-                    {stateOptions.map((option) => (
+                    {stateOptions.map(option => (
                       <Option key={option.value} value={option.value}>
                         {option.label}
                       </Option>
diff --git a/apps/console/src/pages/organizations/risks/FormRiskDialog.tsx b/apps/console/src/pages/organizations/risks/FormRiskDialog.tsx
index bd94a03dc..c63cd5085 100644
--- a/apps/console/src/pages/organizations/risks/FormRiskDialog.tsx
+++ b/apps/console/src/pages/organizations/risks/FormRiskDialog.tsx
@@ -27,6 +27,7 @@ import {
 } from "/components/form/ControlledField";
 import {
   useRiskForm,
+  type RiskData,
   type RiskForm,
   type RiskKey,
 } from "/hooks/forms/useRiskForm";
@@ -90,13 +91,13 @@ export default function FormRiskDialog({
   const dialogRef = useDialogRef();
   const ref = refProps ?? dialogRef;
 
-  const { control, handleSubmit, setValue, register, watch, formState, reset } =
-    useRiskForm(risk);
+  const { control, handleSubmit, setValue, register, watch, formState, reset }
+    = useRiskForm(risk);
   const errors = formState.errors ?? {};
-  const [createRisk, isLoadingCreate] =
-    useMutationWithToasts<FormRiskDialogMutation>(createRiskMutation);
-  const [updateRisk, isLoadingUpdate] =
-    useMutationWithToasts<FormRiskDialogUpdateRiskMutation>(updateRiskMutation);
+  const [createRisk, isLoadingCreate]
+    = useMutationWithToasts<FormRiskDialogMutation>(createRiskMutation);
+  const [updateRisk, isLoadingUpdate]
+    = useMutationWithToasts<FormRiskDialogUpdateRiskMutation>(updateRiskMutation);
   const isLoading = isLoadingCreate || isLoadingUpdate;
 
   const onTemplateChange = (risk: RiskTemplate) => {
@@ -104,9 +105,9 @@ export default function FormRiskDialog({
     setValue("description", risk.description);
   };
 
-  const onSubmit = handleSubmit((data) => {
+  const onSubmit = async (data: RiskData) => {
     if (risk) {
-      updateRisk({
+      await updateRisk({
         variables: {
           input: {
             id: risk.id,
@@ -122,7 +123,7 @@ export default function FormRiskDialog({
       });
       return;
     }
-    createRisk({
+    await createRisk({
       variables: {
         input: {
           ...data,
@@ -139,7 +140,7 @@ export default function FormRiskDialog({
         onSuccess?.();
       },
     });
-  });
+  };
 
   const [showNote, toggleNote] = useToggle(false);
 
@@ -147,13 +148,13 @@ export default function FormRiskDialog({
     <Dialog
       ref={ref}
       trigger={trigger}
-      title={
+      title={(
         <Breadcrumb
           items={[__("Risks"), risk ? __("Edit Risk") : __("New Risk")]}
         />
-      }
+      )}
     >
-      <form onSubmit={onSubmit}>
+      <form onSubmit={e => void handleSubmit(onSubmit)(e)}>
         <DialogContent className="grid grid-cols-[1fr_420px]">
           {/* Main form */}
           <div className="py-8 px-12 space-y-6">
@@ -287,9 +288,12 @@ function ImpactAndLikelihood({
           placeholder={__("Select impact level")}
           error={errors?.[`${prefix}Impact`]?.message}
         >
-          {getRiskImpacts(__).map((i) => (
+          {getRiskImpacts(__).map(i => (
             <Option key={i.value} value={i.value.toString()}>
-              {i.value} - {i.label}
+              {i.value}
+              {" "}
+              -
+              {i.label}
             </Option>
           ))}
         </ControlledField>
@@ -301,9 +305,12 @@ function ImpactAndLikelihood({
           placeholder={__("Select likelihood level")}
           error={errors?.[`${prefix}Likelihood`]?.message}
         >
-          {getRiskLikelihoods(__).map((l) => (
+          {getRiskLikelihoods(__).map(l => (
             <Option key={l.value} value={l.value.toString()}>
-              {l.value} - {l.label}
+              {l.value}
+              {" "}
+              -
+              {l.label}
             </Option>
           ))}
         </ControlledField>
@@ -330,19 +337,19 @@ function TemplateSelector({
   );
 
   const categories = useMemo(
-    () => Array.from(new Set(risks?.map((t) => t.category))),
+    () => Array.from(new Set(risks?.map(t => t.category))),
     [risks],
   );
 
   const selectedCategory = watch("category");
 
   const templates = useMemo(
-    () => risks?.filter((r) => r.category === selectedCategory) ?? [],
+    () => risks?.filter(r => r.category === selectedCategory) ?? [],
     [risks, selectedCategory],
   );
 
   const onTemplateChange = (template: string) => {
-    const risk = risks?.find((r) => r.name === template);
+    const risk = risks?.find(r => r.name === template);
     if (!risk) {
       throw new Error("Risk not found");
     }
@@ -357,7 +364,7 @@ function TemplateSelector({
           name="category"
           placeholder={__("Select a category")}
         >
-          {categories.map((category) => (
+          {categories.map(category => (
             <Option key={category} value={category}>
               {category}
             </Option>
@@ -369,7 +376,7 @@ function TemplateSelector({
           placeholder={__("Select template")}
           onValueChange={onTemplateChange}
         >
-          {templates?.map((template) => (
+          {templates?.map(template => (
             <Option key={template.name} value={template.name}>
               {template.name}
             </Option>
diff --git a/apps/console/src/pages/organizations/risks/RiskDetailPage.tsx b/apps/console/src/pages/organizations/risks/RiskDetailPage.tsx
index a3b093f2c..b29d44cd5 100644
--- a/apps/console/src/pages/organizations/risks/RiskDetailPage.tsx
+++ b/apps/console/src/pages/organizations/risks/RiskDetailPage.tsx
@@ -73,17 +73,17 @@ export default function RiskDetailPage(props: Props) {
     confirm(
       () =>
         new Promise<void>((resolve) => {
-          deleteRisk({
+          void deleteRisk({
             variables: {
               input: { riskId },
               connections: [connectionId],
             },
             onSuccess() {
-              const risksUrl =
-                isSnapshotMode && snapshotId
+              const risksUrl
+                = isSnapshotMode && snapshotId
                   ? `/organizations/${organizationId}/snapshots/${snapshotId}/risks`
                   : `/organizations/${organizationId}/risks`;
-              navigate(risksUrl);
+              void navigate(risksUrl);
               resolve();
             },
           });
@@ -91,7 +91,7 @@ export default function RiskDetailPage(props: Props) {
       {
         message: sprintf(
           __(
-            'This will permanently delete the risk "%s". This action cannot be undone.',
+            "This will permanently delete the risk \"%s\". This action cannot be undone.",
           ),
           risk.name,
         ),
@@ -104,13 +104,13 @@ export default function RiskDetailPage(props: Props) {
   const controlsCount = risk.controlsInfo?.totalCount ?? 0;
   const obligationsCount = risk.obligationsInfo?.totalCount ?? 0;
 
-  const risksUrl =
-    isSnapshotMode && snapshotId
+  const risksUrl
+    = isSnapshotMode && snapshotId
       ? `/organizations/${organizationId}/snapshots/${snapshotId}/risks`
       : `/organizations/${organizationId}/risks`;
 
-  const baseTabUrl =
-    isSnapshotMode && snapshotId
+  const baseTabUrl
+    = isSnapshotMode && snapshotId
       ? `/organizations/${organizationId}/snapshots/${snapshotId}/risks/${riskId}`
       : `/organizations/${organizationId}/risks/${riskId}`;
 
@@ -134,11 +134,11 @@ export default function RiskDetailPage(props: Props) {
           <div className="flex gap-2">
             {risk.canUpdate && (
               <FormRiskDialog
-                trigger={
+                trigger={(
                   <Button icon={IconPencil} variant="secondary">
                     {__("Edit")}
                   </Button>
-                }
+                )}
                 risk={{ id: riskId, ...risk }}
               />
             )}
diff --git a/apps/console/src/pages/organizations/risks/RisksPage.tsx b/apps/console/src/pages/organizations/risks/RisksPage.tsx
index 585c73532..8bec0d8d1 100644
--- a/apps/console/src/pages/organizations/risks/RisksPage.tsx
+++ b/apps/console/src/pages/organizations/risks/RisksPage.tsx
@@ -58,13 +58,13 @@ export default function RisksPage(props: Props) {
         order: {
           direction: order.direction as "ASC" | "DESC",
           field: order.field as
-            | "NAME"
-            | "CATEGORY"
-            | "TREATMENT"
-            | "INHERENT_RISK_SCORE"
-            | "RESIDUAL_RISK_SCORE"
-            | "OWNER_FULL_NAME"
-            | "CREATED_AT",
+          | "NAME"
+          | "CATEGORY"
+          | "TREATMENT"
+          | "INHERENT_RISK_SCORE"
+          | "RESIDUAL_RISK_SCORE"
+          | "OWNER_FULL_NAME"
+          | "CREATED_AT",
         },
       },
       { fetchPolicy: "network-only" },
@@ -73,9 +73,9 @@ export default function RisksPage(props: Props) {
 
   usePageTitle(__("Risks"));
 
-  const hasAnyAction =
-    !isSnapshotMode &&
-    risks.some(({ canDelete, canUpdate }) => canUpdate || canDelete);
+  const hasAnyAction
+    = !isSnapshotMode
+      && risks.some(({ canDelete, canUpdate }) => canUpdate || canDelete);
 
   return (
     <div className="space-y-6">
@@ -126,7 +126,7 @@ export default function RisksPage(props: Props) {
           </Tr>
         </Thead>
         <Tbody>
-          {risks?.map((risk) => (
+          {risks?.map(risk => (
             <RiskRow
               risk={risk}
               key={risk.id}
@@ -159,7 +159,7 @@ function RiskRow(props: RowProps) {
     confirm(
       () =>
         new Promise<void>((resolve) => {
-          deleteRisk({
+          void deleteRisk({
             variables: {
               input: { riskId: risk.id },
               connections: [connectionId],
@@ -170,7 +170,7 @@ function RiskRow(props: RowProps) {
       {
         message: sprintf(
           __(
-            'This will permanently delete the risk "%s". This action cannot be undone.',
+            "This will permanently delete the risk \"%s\". This action cannot be undone.",
           ),
           risk.name,
         ),
@@ -179,8 +179,8 @@ function RiskRow(props: RowProps) {
   };
   const formDialogRef = useDialogRef();
 
-  const riskUrl =
-    isSnapshotMode && snapshotId
+  const riskUrl
+    = isSnapshotMode && snapshotId
       ? `/organizations/${organizationId}/snapshots/${snapshotId}/risks/${risk.id}/overview`
       : `/organizations/${organizationId}/risks/${risk.id}/overview`;
 
diff --git a/apps/console/src/pages/organizations/risks/tabs/RiskControlsTab.tsx b/apps/console/src/pages/organizations/risks/tabs/RiskControlsTab.tsx
index d448cf168..4fe0210e4 100644
--- a/apps/console/src/pages/organizations/risks/tabs/RiskControlsTab.tsx
+++ b/apps/console/src/pages/organizations/risks/tabs/RiskControlsTab.tsx
@@ -46,7 +46,7 @@ export default function RiskControlsTab() {
   }>();
   const { __ } = useTranslate();
   const [data, refetch] = useRefetchableFragment(controlsFragment, risk);
-  const controls = data.controls.edges.map((edge) => edge.node);
+  const controls = data.controls.edges.map(edge => edge.node);
   const organizationId = useOrganizationId();
 
   return (
@@ -65,14 +65,15 @@ export default function RiskControlsTab() {
             </Td>
           </Tr>
         )}
-        {controls.map((control) => (
+        {controls.map(control => (
           <Tr
             key={control.id}
             to={`/organizations/${organizationId}/frameworks/${control.framework.id}/controls/${control.id}`}
           >
             <Td>
               <span className="inline-flex gap-2 items-center">
-                {control.framework.name}{" "}
+                {control.framework.name}
+                {" "}
                 <Badge size="md">{control.sectionTitle}</Badge>
               </span>
             </Td>
diff --git a/apps/console/src/pages/organizations/risks/tabs/RiskDocumentsTab.tsx b/apps/console/src/pages/organizations/risks/tabs/RiskDocumentsTab.tsx
index 20caa569f..09e9b3333 100644
--- a/apps/console/src/pages/organizations/risks/tabs/RiskDocumentsTab.tsx
+++ b/apps/console/src/pages/organizations/risks/tabs/RiskDocumentsTab.tsx
@@ -56,7 +56,7 @@ export default function RiskDocumentsTab() {
     risk,
   );
   const connectionId = data.documents.__id;
-  const documents = data.documents?.edges?.map((edge) => edge.node) ?? [];
+  const documents = data.documents?.edges?.map(edge => edge.node) ?? [];
 
   const canLinkDocument = risk.canCreateDocumentMapping;
   const canUnlinkDocument = risk.canDeleteDocumentMapping;
diff --git a/apps/console/src/pages/organizations/risks/tabs/RiskMeasuresTab.tsx b/apps/console/src/pages/organizations/risks/tabs/RiskMeasuresTab.tsx
index b491f879a..f08fdbad5 100644
--- a/apps/console/src/pages/organizations/risks/tabs/RiskMeasuresTab.tsx
+++ b/apps/console/src/pages/organizations/risks/tabs/RiskMeasuresTab.tsx
@@ -53,7 +53,7 @@ export default function RiskMeasuresTab() {
   }>();
   const data = useFragment<RiskMeasuresTabFragment$key>(measuresFragment, risk);
   const connectionId = data.measures.__id;
-  const measures = data.measures?.edges?.map((edge) => edge.node) ?? [];
+  const measures = data.measures?.edges?.map(edge => edge.node) ?? [];
 
   const canLinkMeasure = risk.canCreateMeasureMapping;
   const canUnlinkMeasure = risk.canDeleteMeasureMapping;
diff --git a/apps/console/src/pages/organizations/risks/tabs/RiskObligationsTab.tsx b/apps/console/src/pages/organizations/risks/tabs/RiskObligationsTab.tsx
index 98d3d63f6..7724ee8bf 100644
--- a/apps/console/src/pages/organizations/risks/tabs/RiskObligationsTab.tsx
+++ b/apps/console/src/pages/organizations/risks/tabs/RiskObligationsTab.tsx
@@ -56,7 +56,7 @@ export default function RiskObligationsTab() {
     risk,
   );
   const connectionId = data.obligations.__id;
-  const obligations = data.obligations?.edges?.map((edge) => edge.node) ?? [];
+  const obligations = data.obligations?.edges?.map(edge => edge.node) ?? [];
 
   const canLinkObligation = risk.canCreateObligationMapping;
   const canUnlinkObligation = risk.canDeleteObligationMapping;
diff --git a/apps/console/src/pages/organizations/settings/DomainSettingsPage.tsx b/apps/console/src/pages/organizations/settings/DomainSettingsPage.tsx
index dcf28b3d7..585fe360a 100644
--- a/apps/console/src/pages/organizations/settings/DomainSettingsPage.tsx
+++ b/apps/console/src/pages/organizations/settings/DomainSettingsPage.tsx
@@ -40,29 +40,31 @@ export function DomainSettingsPage(props: {
   return (
     <div className="space-y-4">
       <h2 className="text-base font-medium">{__("Custom Domain")}</h2>
-      {organization.customDomain ? (
-        <DomainCard fKey={organization.customDomain} />
-      ) : (
-        <Card padded>
-          <div className="text-center py-8">
-            <h3 className="text-lg font-semibold mb-2">
-              {__("No custom domain configured")}
-            </h3>
-            <p className="text-txt-tertiary mb-4">
-              {__(
-                "Add your own domain to make your trust center more professional",
-              )}
-            </p>
-            <div className="flex justify-center">
-              {organization.canCreateCustomDomain && (
-                <NewDomainDialog>
-                  <Button icon={IconPlusLarge}>{__("Add Domain")}</Button>
-                </NewDomainDialog>
-              )}
-            </div>
-          </div>
-        </Card>
-      )}
+      {organization.customDomain
+        ? (
+            <DomainCard fKey={organization.customDomain} />
+          )
+        : (
+            <Card padded>
+              <div className="text-center py-8">
+                <h3 className="text-lg font-semibold mb-2">
+                  {__("No custom domain configured")}
+                </h3>
+                <p className="text-txt-tertiary mb-4">
+                  {__(
+                    "Add your own domain to make your trust center more professional",
+                  )}
+                </p>
+                <div className="flex justify-center">
+                  {organization.canCreateCustomDomain && (
+                    <NewDomainDialog>
+                      <Button icon={IconPlusLarge}>{__("Add Domain")}</Button>
+                    </NewDomainDialog>
+                  )}
+                </div>
+              </div>
+            </Card>
+          )}
     </div>
   );
 }
diff --git a/apps/console/src/pages/organizations/settings/_components/DeleteDomainDialog.tsx b/apps/console/src/pages/organizations/settings/_components/DeleteDomainDialog.tsx
index 844c4bd13..3dd3f310d 100644
--- a/apps/console/src/pages/organizations/settings/_components/DeleteDomainDialog.tsx
+++ b/apps/console/src/pages/organizations/settings/_components/DeleteDomainDialog.tsx
@@ -35,8 +35,8 @@ export function DeleteDomainDialog(props: DeleteDomainDialogProps) {
   const dialogRef = useDialogRef();
   const [inputValue, setInputValue] = useState("");
 
-  const [deleteCustomDomain, isDeleting] =
-    useMutationWithToasts<DeleteDomainDialogMutation>(
+  const [deleteCustomDomain, isDeleting]
+    = useMutationWithToasts<DeleteDomainDialogMutation>(
       deleteCustomDomainMutation,
       {
         successMessage: __("Domain deleted successfully"),
@@ -84,10 +84,10 @@ export function DeleteDomainDialog(props: DeleteDomainDialogProps) {
         </p>
 
         <Field
-          label={sprintf(__('To confirm deletion, type "%s" below:'), domain)}
+          label={sprintf(__("To confirm deletion, type \"%s\" below:"), domain)}
           type="text"
           value={inputValue}
-          onChange={(e) => setInputValue(e.target.value)}
+          onChange={e => setInputValue(e.target.value)}
           placeholder={domain}
           disabled={isDeleting}
           autoComplete="off"
@@ -98,7 +98,7 @@ export function DeleteDomainDialog(props: DeleteDomainDialogProps) {
         <Button
           variant="danger"
           icon={IconTrashCan}
-          onClick={handleDeleteDomain}
+          onClick={() => void handleDeleteDomain()}
           disabled={isDeleting}
         >
           {isDeleting ? __("Deleting...") : __("Delete Domain")}
diff --git a/apps/console/src/pages/organizations/settings/_components/DomainDialog.tsx b/apps/console/src/pages/organizations/settings/_components/DomainDialog.tsx
index 69cd33545..78789d53a 100644
--- a/apps/console/src/pages/organizations/settings/_components/DomainDialog.tsx
+++ b/apps/console/src/pages/organizations/settings/_components/DomainDialog.tsx
@@ -43,7 +43,7 @@ export function DomainDialog(props: DomainDialogProps) {
   const { toast } = useToast();
 
   const copyToClipboard = (text: string) => {
-    navigator.clipboard.writeText(text);
+    void navigator.clipboard.writeText(text);
     toast({
       title: __("Copied"),
       description: __("Value copied to clipboard"),
@@ -57,116 +57,121 @@ export function DomainDialog(props: DomainDialogProps) {
     <Dialog
       ref={dialogRef}
       trigger={children}
-      title={
+      title={(
         <div className="flex items-center gap-3">
           <span>{domain.domain}</span>
           <Badge variant={getCustomDomainStatusBadgeVariant(domain.sslStatus)}>
             {getCustomDomainStatusBadgeLabel(domain.sslStatus, __)}
           </Badge>
         </div>
-      }
+      )}
     >
       <DialogContent padded className="space-y-6">
-        {domain.sslStatus === "ACTIVE" ? (
-          <div className="bg-subtle rounded-lg p-4">
-            <div className="flex items-start">
-              <svg
-                className="w-5 h-5 text-green-500 mt-0.5 mr-3 shrink-0"
-                fill="none"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-              </svg>
-              <div>
-                <p className="font-medium mb-1">{__("Domain is active")}</p>
-                <p className="text-sm text-txt-secondary">
-                  {__(
-                    "Your custom domain is verified and SSL certificate is active",
-                  )}
-                </p>
-                {domain.sslExpiresAt && (
-                  <p className="text-xs text-txt-tertiary mt-2">
-                    {__("SSL expires")}{" "}
-                    {new Date(domain.sslExpiresAt).toLocaleDateString()}
-                  </p>
-                )}
-              </div>
-            </div>
-          </div>
-        ) : (
-          <div>
-            <h4 className="font-medium mb-3">{__("DNS Configuration")}</h4>
-            <p className="text-sm text-txt-secondary mb-4">
-              {__(
-                "Add these DNS records to your domain to complete verification",
-              )}
-            </p>
-
-            <div className="space-y-3">
-              {domain.dnsRecords?.map((record, index) => (
-                <div key={index} className="bg-subtle rounded-lg p-4">
-                  <div className="flex items-center justify-between mb-2">
-                    <span className="text-sm font-medium">{record.type}</span>
-                    <Badge variant="neutral">{record.purpose}</Badge>
-                  </div>
-                  <div className="space-y-2">
-                    <div>
-                      <label className="text-xs text-txt-tertiary">
-                        {__("Name")}
-                      </label>
-                      <div className="flex items-center gap-2 mt-1">
-                        <code className="flex-1 text-sm bg-subtle px-2 py-1 rounded">
-                          {record.name}
-                        </code>
-                        <Button
-                          variant="secondary"
-                          onClick={() => copyToClipboard(record.name)}
-                        >
-                          {__("Copy")}
-                        </Button>
-                      </div>
-                    </div>
-                    <div>
-                      <label className="text-xs text-txt-tertiary">
-                        {__("Value")}
-                      </label>
-                      <div className="flex items-center gap-2 mt-1">
-                        <code className="flex-1 text-sm bg-subtle px-2 py-1 rounded break-all">
-                          {record.value}
-                        </code>
-                        <Button
-                          variant="secondary"
-                          onClick={() => copyToClipboard(record.value)}
-                        >
-                          {__("Copy")}
-                        </Button>
-                      </div>
-                    </div>
-                    {record.ttl && (
-                      <div className="text-xs text-txt-tertiary">
-                        TTL: {record.ttl}
-                      </div>
+        {domain.sslStatus === "ACTIVE"
+          ? (
+              <div className="bg-subtle rounded-lg p-4">
+                <div className="flex items-start">
+                  <svg
+                    className="w-5 h-5 text-green-500 mt-0.5 mr-3 shrink-0"
+                    fill="none"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                  >
+                    <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                  </svg>
+                  <div>
+                    <p className="font-medium mb-1">{__("Domain is active")}</p>
+                    <p className="text-sm text-txt-secondary">
+                      {__(
+                        "Your custom domain is verified and SSL certificate is active",
+                      )}
+                    </p>
+                    {domain.sslExpiresAt && (
+                      <p className="text-xs text-txt-tertiary mt-2">
+                        {__("SSL expires")}
+                        {" "}
+                        {new Date(domain.sslExpiresAt).toLocaleDateString()}
+                      </p>
                     )}
                   </div>
                 </div>
-              ))}
-            </div>
-
-            {domain.sslStatus === "PENDING" && (
-              <div className="bg-subtle rounded-lg p-4 mt-4">
-                <p className="text-sm">
+              </div>
+            )
+          : (
+              <div>
+                <h4 className="font-medium mb-3">{__("DNS Configuration")}</h4>
+                <p className="text-sm text-txt-secondary mb-4">
                   {__(
-                    "After adding the DNS records, verification will happen automatically. This may take a few minutes to propagate.",
+                    "Add these DNS records to your domain to complete verification",
                   )}
                 </p>
+
+                <div className="space-y-3">
+                  {domain.dnsRecords?.map((record, index) => (
+                    <div key={index} className="bg-subtle rounded-lg p-4">
+                      <div className="flex items-center justify-between mb-2">
+                        <span className="text-sm font-medium">{record.type}</span>
+                        <Badge variant="neutral">{record.purpose}</Badge>
+                      </div>
+                      <div className="space-y-2">
+                        <div>
+                          <label className="text-xs text-txt-tertiary">
+                            {__("Name")}
+                          </label>
+                          <div className="flex items-center gap-2 mt-1">
+                            <code className="flex-1 text-sm bg-subtle px-2 py-1 rounded">
+                              {record.name}
+                            </code>
+                            <Button
+                              variant="secondary"
+                              onClick={() => copyToClipboard(record.name)}
+                            >
+                              {__("Copy")}
+                            </Button>
+                          </div>
+                        </div>
+                        <div>
+                          <label className="text-xs text-txt-tertiary">
+                            {__("Value")}
+                          </label>
+                          <div className="flex items-center gap-2 mt-1">
+                            <code className="flex-1 text-sm bg-subtle px-2 py-1 rounded break-all">
+                              {record.value}
+                            </code>
+                            <Button
+                              variant="secondary"
+                              onClick={() => copyToClipboard(record.value)}
+                            >
+                              {__("Copy")}
+                            </Button>
+                          </div>
+                        </div>
+                        {record.ttl && (
+                          <div className="text-xs text-txt-tertiary">
+                            TTL:
+                            {" "}
+                            {record.ttl}
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+
+                {domain.sslStatus === "PENDING" && (
+                  <div className="bg-subtle rounded-lg p-4 mt-4">
+                    <p className="text-sm">
+                      {__(
+                        "After adding the DNS records, verification will happen automatically. This may take a few minutes to propagate.",
+                      )}
+                    </p>
+                  </div>
+                )}
               </div>
             )}
-          </div>
-        )}
       </DialogContent>
     </Dialog>
   );
diff --git a/apps/console/src/pages/organizations/settings/_components/NewDomainDialog.tsx b/apps/console/src/pages/organizations/settings/_components/NewDomainDialog.tsx
index bc93d67e6..050392e18 100644
--- a/apps/console/src/pages/organizations/settings/_components/NewDomainDialog.tsx
+++ b/apps/console/src/pages/organizations/settings/_components/NewDomainDialog.tsx
@@ -33,6 +33,7 @@ const createCustomDomainMutation = graphql`
         createdAt
         updatedAt
         sslExpiresAt
+        canDelete: permission(action: "core:custom-domain:delete")
       }
     }
   }
@@ -48,8 +49,6 @@ const schema = z.object({
     ),
 });
 
-type CustomDomainFormData = z.infer<typeof schema>;
-
 export function NewDomainDialog(props: PropsWithChildren) {
   const { children } = props;
 
@@ -66,15 +65,15 @@ export function NewDomainDialog(props: PropsWithChildren) {
     },
   );
 
-  const [createCustomDomain, isCreating] =
-    useMutationWithToasts<NewDomainDialogMutation>(createCustomDomainMutation, {
+  const [createCustomDomain, isCreating]
+    = useMutationWithToasts<NewDomainDialogMutation>(createCustomDomainMutation, {
       successMessage: __(
         "Domain added successfully. Configure the DNS records to verify and activate your domain.",
       ),
       errorMessage: __("Failed to add domain"),
     });
 
-  const onSubmit = handleSubmit(async (data: CustomDomainFormData) => {
+  const onSubmit = async (data: z.infer<typeof schema>) => {
     const normalizedDomain = data.domain
       .trim()
       .toLowerCase()
@@ -108,7 +107,7 @@ export function NewDomainDialog(props: PropsWithChildren) {
         dialogRef.current?.close();
       },
     });
-  });
+  };
 
   return (
     <Dialog
@@ -116,7 +115,7 @@ export function NewDomainDialog(props: PropsWithChildren) {
       trigger={children}
       title={<Breadcrumb items={[__("Custom Domain"), __("Add Domain")]} />}
     >
-      <form onSubmit={onSubmit}>
+      <form onSubmit={e => void handleSubmit(onSubmit)(e)}>
         <DialogContent padded className="space-y-4">
           <div>
             <p className="text-sm text-txt-secondary mb-4">
@@ -137,7 +136,9 @@ export function NewDomainDialog(props: PropsWithChildren) {
 
           <div className="bg-subtle rounded-lg p-4">
             <p className="text-xs text-txt-secondary">
-              <strong>{__("Examples:")}</strong> compliance.example.com,
+              <strong>{__("Examples:")}</strong>
+              {" "}
+              compliance.example.com,
               trust.example.com
             </p>
           </div>
diff --git a/apps/console/src/pages/organizations/snapshots/SnapshotDetailPage.tsx b/apps/console/src/pages/organizations/snapshots/SnapshotDetailPage.tsx
index 94e703ae1..6b4d74cd9 100644
--- a/apps/console/src/pages/organizations/snapshots/SnapshotDetailPage.tsx
+++ b/apps/console/src/pages/organizations/snapshots/SnapshotDetailPage.tsx
@@ -26,7 +26,7 @@ export default function SnapshotDetailPage({ queryRef }: Props) {
     const snapshotType = snapshot.type;
     const urlPath = getSnapshotTypeUrlPath(snapshotType);
 
-    navigate(
+    void navigate(
       `/organizations/${organizationId}/snapshots/${snapshotId}${urlPath}`,
       {
         replace: true,
diff --git a/apps/console/src/pages/organizations/snapshots/SnapshotsPage.tsx b/apps/console/src/pages/organizations/snapshots/SnapshotsPage.tsx
index 9a1a90c54..1b47558be 100644
--- a/apps/console/src/pages/organizations/snapshots/SnapshotsPage.tsx
+++ b/apps/console/src/pages/organizations/snapshots/SnapshotsPage.tsx
@@ -71,7 +71,7 @@ export default function SnapshotsPage(props: Props) {
     organization,
   );
   const connectionId = data.snapshots.__id;
-  const snapshots = data.snapshots.edges.map((edge) => edge.node);
+  const snapshots = data.snapshots.edges.map(edge => edge.node);
   usePageTitle(__("Snapshots"));
 
   const hasAnyAction = snapshots.some(({ canDelete }) => canDelete);
@@ -93,39 +93,41 @@ export default function SnapshotsPage(props: Props) {
         )}
       </PageHeader>
 
-      {snapshots.length > 0 ? (
-        <Table>
-          <Thead>
-            <Tr>
-              <Th>{__("Name")}</Th>
-              <Th>{__("Type")}</Th>
-              <Th>{__("Description")}</Th>
-              <Th>{__("Created")}</Th>
-              {hasAnyAction && <Th></Th>}
-            </Tr>
-          </Thead>
-          <Tbody>
-            {snapshots.map((snapshot) => (
-              <SnapshotRow
-                key={snapshot.id}
-                snapshot={snapshot}
-                connectionId={connectionId}
-                organizationId={organizationId}
-                hasAnyAction={hasAnyAction}
-              />
-            ))}
-          </Tbody>
-        </Table>
-      ) : (
-        <div className="text-center py-12">
-          <h3 className="text-lg font-medium text-txt-secondary mb-2">
-            {__("No snapshots yet")}
-          </h3>
-          <p className="text-txt-tertiary mb-6">
-            {__("Create your first snapshot to get started")}
-          </p>
-        </div>
-      )}
+      {snapshots.length > 0
+        ? (
+            <Table>
+              <Thead>
+                <Tr>
+                  <Th>{__("Name")}</Th>
+                  <Th>{__("Type")}</Th>
+                  <Th>{__("Description")}</Th>
+                  <Th>{__("Created")}</Th>
+                  {hasAnyAction && <Th></Th>}
+                </Tr>
+              </Thead>
+              <Tbody>
+                {snapshots.map(snapshot => (
+                  <SnapshotRow
+                    key={snapshot.id}
+                    snapshot={snapshot}
+                    connectionId={connectionId}
+                    organizationId={organizationId}
+                    hasAnyAction={hasAnyAction}
+                  />
+                ))}
+              </Tbody>
+            </Table>
+          )
+        : (
+            <div className="text-center py-12">
+              <h3 className="text-lg font-medium text-txt-secondary mb-2">
+                {__("No snapshots yet")}
+              </h3>
+              <p className="text-txt-tertiary mb-6">
+                {__("Create your first snapshot to get started")}
+              </p>
+            </div>
+          )}
     </div>
   );
 }
diff --git a/apps/console/src/pages/organizations/snapshots/dialog/SnapshotFormDialog.tsx b/apps/console/src/pages/organizations/snapshots/dialog/SnapshotFormDialog.tsx
index df63da53e..f97b14367 100644
--- a/apps/console/src/pages/organizations/snapshots/dialog/SnapshotFormDialog.tsx
+++ b/apps/console/src/pages/organizations/snapshots/dialog/SnapshotFormDialog.tsx
@@ -75,7 +75,7 @@ export default function SnapshotFormDialog(props: Props) {
     },
   });
 
-  const onSubmit = handleSubmit(async (data) => {
+  const onSubmit = async (data: z.infer<typeof snapshotSchema>) => {
     await mutate({
       variables: {
         input: {
@@ -89,7 +89,7 @@ export default function SnapshotFormDialog(props: Props) {
     });
     reset();
     dialogRef.current?.close();
-  });
+  };
 
   return (
     <Dialog
@@ -97,7 +97,7 @@ export default function SnapshotFormDialog(props: Props) {
       trigger={props.children}
       title={<Breadcrumb items={[__("Snapshots"), __("New Snapshot")]} />}
     >
-      <form onSubmit={onSubmit}>
+      <form onSubmit={e => void handleSubmit(onSubmit)(e)}>
         <DialogContent className="grid grid-cols-[1fr_420px]">
           <div className="py-8 px-10 space-y-4">
             <Input
diff --git a/apps/console/src/pages/organizations/states-of-applicability/StateOfApplicabilityDetailPage.tsx b/apps/console/src/pages/organizations/states-of-applicability/StateOfApplicabilityDetailPage.tsx
index 0509fa108..8e6231bdd 100644
--- a/apps/console/src/pages/organizations/states-of-applicability/StateOfApplicabilityDetailPage.tsx
+++ b/apps/console/src/pages/organizations/states-of-applicability/StateOfApplicabilityDetailPage.tsx
@@ -1,33 +1,33 @@
 import { useNavigate, useParams } from "react-router";
 import { useOrganizationId } from "/hooks/useOrganizationId";
 import {
-    ActionDropdown,
-    Breadcrumb,
-    DropdownItem,
-    IconTrashCan,
-    IconArrowDown,
-    PageHeader,
-    Card,
-    Button,
-    IconPencil,
-    IconCheckmark1,
-    IconCrossLargeX,
-    Input,
+  ActionDropdown,
+  Breadcrumb,
+  DropdownItem,
+  IconTrashCan,
+  IconArrowDown,
+  PageHeader,
+  Card,
+  Button,
+  IconPencil,
+  IconCheckmark1,
+  IconCrossLargeX,
+  Input,
 } from "@probo/ui";
 import { useTranslate } from "@probo/i18n";
 import {
-    ConnectionHandler,
-    graphql,
-    type PreloadedQuery,
-    usePreloadedQuery,
+  ConnectionHandler,
+  graphql,
+  type PreloadedQuery,
+  usePreloadedQuery,
 } from "react-relay";
 import type { StateOfApplicabilityGraphNodeQuery } from "/__generated__/core/StateOfApplicabilityGraphNodeQuery.graphql";
 import type { StateOfApplicabilityDetailPageExportMutation } from "/__generated__/core/StateOfApplicabilityDetailPageExportMutation.graphql";
 import {
-    StateOfApplicabilityConnectionKey,
-    stateOfApplicabilityNodeQuery,
-    useDeleteStateOfApplicability,
-    updateStateOfApplicabilityMutation,
+  StateOfApplicabilityConnectionKey,
+  stateOfApplicabilityNodeQuery,
+  useDeleteStateOfApplicability,
+  updateStateOfApplicabilityMutation,
 } from "/hooks/graph/StateOfApplicabilityGraph";
 import { useState, Suspense } from "react";
 import { usePageTitle } from "@probo/hooks";
@@ -50,348 +50,351 @@ const exportStateOfApplicabilityPDFMutation = graphql`
 `;
 
 type Props = {
-    queryRef: PreloadedQuery<StateOfApplicabilityGraphNodeQuery>;
+  queryRef: PreloadedQuery<StateOfApplicabilityGraphNodeQuery>;
 };
 
 export default function StateOfApplicabilityDetailPage(props: Props) {
-    const { stateOfApplicabilityId, snapshotId } = useParams<{
-        stateOfApplicabilityId: string;
-        snapshotId?: string;
-    }>();
-    const organizationId = useOrganizationId();
-    const data = usePreloadedQuery(
-        stateOfApplicabilityNodeQuery,
-        props.queryRef,
+  const { stateOfApplicabilityId, snapshotId } = useParams<{
+    stateOfApplicabilityId: string;
+    snapshotId?: string;
+  }>();
+  const organizationId = useOrganizationId();
+  const data = usePreloadedQuery(
+    stateOfApplicabilityNodeQuery,
+    props.queryRef,
+  );
+  const stateOfApplicability = data.node;
+  const { __ } = useTranslate();
+  const navigate = useNavigate();
+  const isSnapshotMode = Boolean(snapshotId);
+
+  if (!stateOfApplicabilityId || !stateOfApplicability) {
+    throw new Error(
+      "Cannot load state of applicability detail page without stateOfApplicabilityId parameter",
     );
-    const stateOfApplicability = data.node;
-    const { __ } = useTranslate();
-    const navigate = useNavigate();
-    const isSnapshotMode = Boolean(snapshotId);
+  }
 
-    if (!stateOfApplicabilityId || !stateOfApplicability) {
-        throw new Error(
-            "Cannot load state of applicability detail page without stateOfApplicabilityId parameter",
-        );
-    }
+  validateSnapshotConsistency(stateOfApplicability, snapshotId);
 
-    validateSnapshotConsistency(stateOfApplicability, snapshotId);
+  const connectionId = ConnectionHandler.getConnectionID(
+    organizationId,
+    StateOfApplicabilityConnectionKey,
+  );
 
-    const connectionId = ConnectionHandler.getConnectionID(
-        organizationId,
-        StateOfApplicabilityConnectionKey,
+  const deleteStateOfApplicability = useDeleteStateOfApplicability(
+    stateOfApplicability,
+    connectionId,
+    () =>
+      void navigate(
+        `/organizations/${organizationId}/states-of-applicability`,
+      ),
+  );
+
+  usePageTitle(stateOfApplicability.name || __("State of Applicability"));
+
+  const [isEditingName, setIsEditingName] = useState(false);
+  const [isEditingOwner, setIsEditingOwner] = useState(false);
+  const [updateStateOfApplicability, isUpdating] = useMutationWithToasts(
+    updateStateOfApplicabilityMutation,
+    {
+      successMessage: __("State of Applicability updated successfully."),
+      errorMessage: __("Failed to update State of Applicability"),
+    },
+  );
+
+  const canUpdate = !isSnapshotMode && stateOfApplicability.canUpdate;
+  const canDelete = !isSnapshotMode && stateOfApplicability.canDelete;
+
+  const [exportStateOfApplicabilityPDF, isExporting]
+    = useMutationWithToasts<StateOfApplicabilityDetailPageExportMutation>(
+      exportStateOfApplicabilityPDFMutation,
+      {
+        successMessage: __(
+          "State of Applicability exported successfully.",
+        ),
+        errorMessage: __("Failed to export State of Applicability"),
+      },
     );
 
-    const deleteStateOfApplicability = useDeleteStateOfApplicability(
-        stateOfApplicability,
-        connectionId,
-        () =>
-            navigate(
-                `/organizations/${organizationId}/states-of-applicability`,
-            ),
-    );
+  const handleExport = async () => {
+    if (!stateOfApplicability.id) return;
 
-    usePageTitle(stateOfApplicability.name || __("State of Applicability"));
-
-    const [isEditingName, setIsEditingName] = useState(false);
-    const [isEditingOwner, setIsEditingOwner] = useState(false);
-    const [updateStateOfApplicability, isUpdating] = useMutationWithToasts(
-        updateStateOfApplicabilityMutation,
-        {
-            successMessage: __("State of Applicability updated successfully."),
-            errorMessage: __("Failed to update State of Applicability"),
+    await exportStateOfApplicabilityPDF({
+      variables: {
+        input: {
+          stateOfApplicabilityId: stateOfApplicability.id,
         },
-    );
-
-    const canUpdate = !isSnapshotMode && stateOfApplicability.canUpdate;
-    const canDelete = !isSnapshotMode && stateOfApplicability.canDelete;
-
-    const [exportStateOfApplicabilityPDF, isExporting] =
-        useMutationWithToasts<StateOfApplicabilityDetailPageExportMutation>(
-            exportStateOfApplicabilityPDFMutation,
-            {
-                successMessage: __(
-                    "State of Applicability exported successfully.",
-                ),
-                errorMessage: __("Failed to export State of Applicability"),
-            },
-        );
-
-    const handleExport = () => {
-        if (!stateOfApplicability.id) return;
-
-        exportStateOfApplicabilityPDF({
-            variables: {
-                input: {
-                    stateOfApplicabilityId: stateOfApplicability.id,
-                },
-            },
-            onCompleted: (data) => {
-                if (data.exportStateOfApplicabilityPDF?.data) {
-                    const link = window.document.createElement("a");
-                    link.href = data.exportStateOfApplicabilityPDF.data;
-                    link.download = `${stateOfApplicability.name || "state-of-applicability"}.pdf`;
-                    window.document.body.appendChild(link);
-                    link.click();
-                    window.document.body.removeChild(link);
-                }
-            },
-        });
-    };
-
-    const nameSchema = z.object({
-        name: z.string().min(1, __("Name is required")),
+      },
+      onCompleted: (data) => {
+        if (data.exportStateOfApplicabilityPDF?.data) {
+          const link = window.document.createElement("a");
+          link.href = data.exportStateOfApplicabilityPDF.data;
+          link.download = `${stateOfApplicability.name || "state-of-applicability"}.pdf`;
+          window.document.body.appendChild(link);
+          link.click();
+          window.document.body.removeChild(link);
+        }
+      },
     });
+  };
 
-    const ownerSchema = z.object({
-        ownerId: z.string().min(1, __("Owner is required")),
-    });
+  const nameSchema = z.object({
+    name: z.string().min(1, __("Name is required")),
+  });
 
-    const {
-        register: registerName,
-        handleSubmit: handleSubmitName,
-        reset: resetName,
-    } = useFormWithSchema(nameSchema, {
-        defaultValues: {
-            name: stateOfApplicability.name || "",
+  const ownerSchema = z.object({
+    ownerId: z.string().min(1, __("Owner is required")),
+  });
+
+  const {
+    register: registerName,
+    handleSubmit: handleSubmitName,
+    reset: resetName,
+  } = useFormWithSchema(nameSchema, {
+    defaultValues: {
+      name: stateOfApplicability.name || "",
+    },
+  });
+
+  const {
+    control: controlOwner,
+    handleSubmit: handleSubmitOwner,
+    reset: resetOwner,
+  } = useFormWithSchema(ownerSchema, {
+    defaultValues: {
+      ownerId: stateOfApplicability.owner?.id || "",
+    },
+  });
+
+  const handleUpdateName = handleSubmitName(async (data) => {
+    if (!stateOfApplicability.id) return;
+
+    await updateStateOfApplicability({
+      variables: {
+        input: {
+          id: stateOfApplicability.id,
+          name: data.name,
         },
-    });
-
-    const {
-        control: controlOwner,
-        handleSubmit: handleSubmitOwner,
-        reset: resetOwner,
-    } = useFormWithSchema(ownerSchema, {
-        defaultValues: {
-            ownerId: stateOfApplicability.owner?.id || "",
-        },
-    });
-
-    const handleUpdateName = handleSubmitName((data) => {
-        if (!stateOfApplicability.id) return;
-
-        updateStateOfApplicability({
-            variables: {
-                input: {
-                    id: stateOfApplicability.id,
-                    name: data.name,
-                },
-            },
-            onSuccess: () => {
-                setIsEditingName(false);
-                resetName({ name: data.name });
-            },
-        });
-    });
-
-    const handleUpdateOwner = handleSubmitOwner((data) => {
-        if (!stateOfApplicability.id) return;
-
-        updateStateOfApplicability({
-            variables: {
-                input: {
-                    id: stateOfApplicability.id,
-                    ownerId: data.ownerId,
-                },
-            },
-            onSuccess: () => {
-                setIsEditingOwner(false);
-                resetOwner({ ownerId: data.ownerId });
-            },
-        });
-    });
-
-    const handleCancelNameEdit = () => {
+      },
+      onSuccess: () => {
         setIsEditingName(false);
-        resetName({
-            name: stateOfApplicability.name || "",
-        });
-    };
+        resetName({ name: data.name });
+      },
+    });
+  });
 
-    const handleCancelOwnerEdit = () => {
+  const handleUpdateOwner = handleSubmitOwner(async (data) => {
+    if (!stateOfApplicability.id) return;
+
+    await updateStateOfApplicability({
+      variables: {
+        input: {
+          id: stateOfApplicability.id,
+          ownerId: data.ownerId,
+        },
+      },
+      onSuccess: () => {
         setIsEditingOwner(false);
-        resetOwner({
-            ownerId: stateOfApplicability.owner?.id || "",
-        });
-    };
+        resetOwner({ ownerId: data.ownerId });
+      },
+    });
+  });
 
-    const listUrl = snapshotId
-        ? `/organizations/${organizationId}/snapshots/${snapshotId}/states-of-applicability`
-        : `/organizations/${organizationId}/states-of-applicability`;
+  const handleCancelNameEdit = () => {
+    setIsEditingName(false);
+    resetName({
+      name: stateOfApplicability.name || "",
+    });
+  };
 
-    return (
-        <div className="space-y-6">
-            {snapshotId && <SnapshotBanner snapshotId={snapshotId} />}
-            <Breadcrumb
-                items={[
-                    {
-                        label: __("States of Applicability"),
-                        to: listUrl,
-                    },
-                    {
-                        label:
-                            stateOfApplicability.name ||
-                            __("State of Applicability detail"),
-                    },
-                ]}
-            />
+  const handleCancelOwnerEdit = () => {
+    setIsEditingOwner(false);
+    resetOwner({
+      ownerId: stateOfApplicability.owner?.id || "",
+    });
+  };
 
-            <PageHeader
-                title={
-                    isEditingName && canUpdate ? (
-                        <div className="flex items-center gap-2">
-                            <Input
-                                {...registerName("name")}
-                                variant="title"
-                                className="flex-1"
-                                autoFocus
-                                onKeyDown={(e) => {
-                                    if (e.key === "Escape") {
-                                        handleCancelNameEdit();
-                                    }
-                                    if (e.key === "Enter" && e.ctrlKey) {
-                                        handleUpdateName();
-                                    }
-                                }}
-                            />
-                            <Button
-                                variant="quaternary"
-                                icon={IconCheckmark1}
-                                onClick={handleUpdateName}
-                                disabled={isUpdating}
-                            />
-                            <Button
-                                variant="quaternary"
-                                icon={IconCrossLargeX}
-                                onClick={handleCancelNameEdit}
-                            />
-                        </div>
-                    ) : (
-                        <div className="flex items-center gap-2">
-                            <span>{stateOfApplicability.name || ""}</span>
-                            {canUpdate && (
-                                <Button
-                                    variant="quaternary"
-                                    icon={IconPencil}
-                                    onClick={() => setIsEditingName(true)}
-                                />
-                            )}
-                        </div>
-                    )
-                }
-            >
-                {stateOfApplicability.canExport && (
-                    <Button
-                        variant="secondary"
-                        icon={IconArrowDown}
-                        onClick={handleExport}
-                        disabled={isExporting}
-                    >
-                        {__("Export")}
-                    </Button>
-                )}
-                {canDelete && (
-                    <ActionDropdown variant="secondary">
-                        <DropdownItem
-                            variant="danger"
-                            icon={IconTrashCan}
-                            onClick={deleteStateOfApplicability}
-                        >
-                            {__("Delete")}
-                        </DropdownItem>
-                    </ActionDropdown>
-                )}
-            </PageHeader>
+  const listUrl = snapshotId
+    ? `/organizations/${organizationId}/snapshots/${snapshotId}/states-of-applicability`
+    : `/organizations/${organizationId}/states-of-applicability`;
 
-            <div className="space-y-6">
-                <div className="space-y-4">
-                    <h2 className="text-base font-medium">{__("Details")}</h2>
-                    <Card className="space-y-4" padded>
-                        <div className="grid grid-cols-2 gap-4">
-                            <div>
-                                <div className="text-xs text-txt-tertiary font-semibold mb-1">
-                                    {__("Owner")}
-                                </div>
-                                {isEditingOwner && canUpdate ? (
-                                    <div className="flex items-center gap-2">
-                                        <Suspense
-                                            fallback={
-                                                <div>{__("Loading...")}</div>
-                                            }
-                                        >
-                                            <PeopleSelectField
-                                                organizationId={organizationId}
-                                                control={controlOwner}
-                                                name="ownerId"
-                                            />
-                                        </Suspense>
-                                        <Button
-                                            variant="quaternary"
-                                            icon={IconCheckmark1}
-                                            onClick={handleUpdateOwner}
-                                            disabled={isUpdating}
-                                        />
-                                        <Button
-                                            variant="quaternary"
-                                            icon={IconCrossLargeX}
-                                            onClick={handleCancelOwnerEdit}
-                                        />
-                                    </div>
-                                ) : (
-                                    <div className="flex items-center gap-2">
-                                        <div className="text-sm text-txt-primary">
-                                            {stateOfApplicability.owner
-                                                ?.fullName || "-"}
-                                        </div>
-                                        {canUpdate && (
-                                            <Button
-                                                variant="quaternary"
-                                                icon={IconPencil}
-                                                onClick={() =>
-                                                    setIsEditingOwner(true)
-                                                }
-                                            />
-                                        )}
-                                    </div>
-                                )}
-                            </div>
-                        </div>
-                        <div className="grid grid-cols-2 gap-4">
-                            <div>
-                                <div className="text-xs text-txt-tertiary font-semibold mb-1">
-                                    {__("Created at")}
-                                </div>
-                                <div className="text-sm text-txt-primary">
-                                    {formatDate(stateOfApplicability.createdAt)}
-                                </div>
-                            </div>
-                            <div>
-                                <div className="text-xs text-txt-tertiary font-semibold mb-1">
-                                    {__("Updated at")}
-                                </div>
-                                <div className="text-sm text-txt-primary">
-                                    {formatDate(stateOfApplicability.updatedAt)}
-                                </div>
-                            </div>
-                        </div>
-                    </Card>
+  return (
+    <div className="space-y-6">
+      {snapshotId && <SnapshotBanner snapshotId={snapshotId} />}
+      <Breadcrumb
+        items={[
+          {
+            label: __("States of Applicability"),
+            to: listUrl,
+          },
+          {
+            label:
+                            stateOfApplicability.name
+                            || __("State of Applicability detail"),
+          },
+        ]}
+      />
+
+      <PageHeader
+        title={
+          isEditingName && canUpdate
+            ? (
+                <div className="flex items-center gap-2">
+                  <Input
+                    {...registerName("name")}
+                    variant="title"
+                    className="flex-1"
+                    autoFocus
+                    onKeyDown={(e) => {
+                      if (e.key === "Escape") {
+                        handleCancelNameEdit();
+                      }
+                      if (e.key === "Enter" && e.ctrlKey) {
+                        void handleUpdateName();
+                      }
+                    }}
+                  />
+                  <Button
+                    variant="quaternary"
+                    icon={IconCheckmark1}
+                    onClick={() => void handleUpdateName()}
+                    disabled={isUpdating}
+                  />
+                  <Button
+                    variant="quaternary"
+                    icon={IconCrossLargeX}
+                    onClick={handleCancelNameEdit}
+                  />
                 </div>
+              )
+            : (
+                <div className="flex items-center gap-2">
+                  <span>{stateOfApplicability.name || ""}</span>
+                  {canUpdate && (
+                    <Button
+                      variant="quaternary"
+                      icon={IconPencil}
+                      onClick={() => setIsEditingName(true)}
+                    />
+                  )}
+                </div>
+              )
+        }
+      >
+        {stateOfApplicability.canExport && (
+          <Button
+            variant="secondary"
+            icon={IconArrowDown}
+            onClick={() => void handleExport()}
+            disabled={isExporting}
+          >
+            {__("Export")}
+          </Button>
+        )}
+        {canDelete && (
+          <ActionDropdown variant="secondary">
+            <DropdownItem
+              variant="danger"
+              icon={IconTrashCan}
+              onClick={() => void deleteStateOfApplicability()}
+            >
+              {__("Delete")}
+            </DropdownItem>
+          </ActionDropdown>
+        )}
+      </PageHeader>
 
-                {stateOfApplicability.id && (
-                    <div className="space-y-4">
-                        <h2 className="text-base font-medium">
-                            {__("Controls")}
-                        </h2>
-                        <StateOfApplicabilityControlsTab
-                            stateOfApplicability={
-                                stateOfApplicability as typeof stateOfApplicability & {
-                                    id: string;
-                                }
-                            }
-                            isSnapshotMode={isSnapshotMode}
+      <div className="space-y-6">
+        <div className="space-y-4">
+          <h2 className="text-base font-medium">{__("Details")}</h2>
+          <Card className="space-y-4" padded>
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <div className="text-xs text-txt-tertiary font-semibold mb-1">
+                  {__("Owner")}
+                </div>
+                {isEditingOwner && canUpdate
+                  ? (
+                      <div className="flex items-center gap-2">
+                        <Suspense
+                          fallback={
+                            <div>{__("Loading...")}</div>
+                          }
+                        >
+                          <PeopleSelectField
+                            organizationId={organizationId}
+                            control={controlOwner}
+                            name="ownerId"
+                          />
+                        </Suspense>
+                        <Button
+                          variant="quaternary"
+                          icon={IconCheckmark1}
+                          onClick={() => void handleUpdateOwner()}
+                          disabled={isUpdating}
                         />
-                    </div>
-                )}
+                        <Button
+                          variant="quaternary"
+                          icon={IconCrossLargeX}
+                          onClick={handleCancelOwnerEdit}
+                        />
+                      </div>
+                    )
+                  : (
+                      <div className="flex items-center gap-2">
+                        <div className="text-sm text-txt-primary">
+                          {stateOfApplicability.owner
+                            ?.fullName || "-"}
+                        </div>
+                        {canUpdate && (
+                          <Button
+                            variant="quaternary"
+                            icon={IconPencil}
+                            onClick={() =>
+                              setIsEditingOwner(true)}
+                          />
+                        )}
+                      </div>
+                    )}
+              </div>
             </div>
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <div className="text-xs text-txt-tertiary font-semibold mb-1">
+                  {__("Created at")}
+                </div>
+                <div className="text-sm text-txt-primary">
+                  {formatDate(stateOfApplicability.createdAt)}
+                </div>
+              </div>
+              <div>
+                <div className="text-xs text-txt-tertiary font-semibold mb-1">
+                  {__("Updated at")}
+                </div>
+                <div className="text-sm text-txt-primary">
+                  {formatDate(stateOfApplicability.updatedAt)}
+                </div>
+              </div>
+            </div>
+          </Card>
         </div>
-    );
+
+        {stateOfApplicability.id && (
+          <div className="space-y-4">
+            <h2 className="text-base font-medium">
+              {__("Controls")}
+            </h2>
+            <StateOfApplicabilityControlsTab
+              stateOfApplicability={
+                stateOfApplicability as typeof stateOfApplicability & {
+                  id: string;
+                }
+              }
+              isSnapshotMode={isSnapshotMode}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
 }
diff --git a/apps/console/src/pages/organizations/states-of-applicability/StatesOfApplicabilityPage.tsx b/apps/console/src/pages/organizations/states-of-applicability/StatesOfApplicabilityPage.tsx
index 81f8d2c90..416c4f8ac 100644
--- a/apps/console/src/pages/organizations/states-of-applicability/StatesOfApplicabilityPage.tsx
+++ b/apps/console/src/pages/organizations/states-of-applicability/StatesOfApplicabilityPage.tsx
@@ -1,33 +1,33 @@
 import {
-    Button,
-    IconPlusLarge,
-    PageHeader,
-    Card,
-    Thead,
-    Tbody,
-    Tr,
-    Th,
-    Td,
-    ActionDropdown,
-    DropdownItem,
-    IconTrashCan,
-    Table,
+  Button,
+  IconPlusLarge,
+  PageHeader,
+  Card,
+  Thead,
+  Tbody,
+  Tr,
+  Th,
+  Td,
+  ActionDropdown,
+  DropdownItem,
+  IconTrashCan,
+  Table,
 } from "@probo/ui";
 import { useTranslate } from "@probo/i18n";
 import type { StateOfApplicabilityGraphPaginatedQuery } from "/__generated__/core/StateOfApplicabilityGraphPaginatedQuery.graphql";
 import {
-    usePreloadedQuery,
-    type PreloadedQuery,
-    usePaginationFragment,
+  usePreloadedQuery,
+  type PreloadedQuery,
+  usePaginationFragment,
 } from "react-relay";
 import {
-    useDeleteStateOfApplicability,
-    paginatedStateOfApplicabilityFragment,
-    paginatedStateOfApplicabilityQuery,
+  useDeleteStateOfApplicability,
+  paginatedStateOfApplicabilityFragment,
+  paginatedStateOfApplicabilityQuery,
 } from "/hooks/graph/StateOfApplicabilityGraph";
 import type {
-    StateOfApplicabilityGraphPaginatedFragment$data,
-    StateOfApplicabilityGraphPaginatedFragment$key,
+  StateOfApplicabilityGraphPaginatedFragment$data,
+  StateOfApplicabilityGraphPaginatedFragment$key,
 } from "/__generated__/core/StateOfApplicabilityGraphPaginatedFragment.graphql";
 import type { NodeOf } from "/types";
 import { usePageTitle } from "@probo/hooks";
@@ -40,182 +40,184 @@ import { SnapshotBanner } from "/components/SnapshotBanner";
 import type { StateOfApplicabilityListQuery } from "/__generated__/core/StateOfApplicabilityListQuery.graphql";
 
 type StateOfApplicability = NodeOf<
-    StateOfApplicabilityGraphPaginatedFragment$data["statesOfApplicability"]
+  StateOfApplicabilityGraphPaginatedFragment$data["statesOfApplicability"]
 >;
 
 export default function StatesOfApplicabilityPage({
-    queryRef,
+  queryRef,
 }: {
-    queryRef: PreloadedQuery<StateOfApplicabilityGraphPaginatedQuery>;
+  queryRef: PreloadedQuery<StateOfApplicabilityGraphPaginatedQuery>;
 }) {
-    const { __ } = useTranslate();
-    const { snapshotId } = useParams<{ snapshotId?: string }>();
-    const isSnapshotMode = Boolean(snapshotId);
+  const { __ } = useTranslate();
+  const { snapshotId } = useParams<{ snapshotId?: string }>();
+  const isSnapshotMode = Boolean(snapshotId);
 
-    usePageTitle(__("States of Applicability"));
+  usePageTitle(__("States of Applicability"));
 
-    const { organization } =
-        usePreloadedQuery<StateOfApplicabilityGraphPaginatedQuery>(
-            paginatedStateOfApplicabilityQuery,
-            queryRef,
-        );
-
-    if (organization.__typename !== "Organization") {
-        throw new Error("Organization not found");
-    }
-
-    const {
-        data: { statesOfApplicability },
-        loadNext,
-        hasNext,
-        refetch,
-        isLoadingNext,
-    } = usePaginationFragment<
-        StateOfApplicabilityListQuery,
-        StateOfApplicabilityGraphPaginatedFragment$key
-    >(paginatedStateOfApplicabilityFragment, organization);
-
-    // Refetch with snapshot filter when in snapshot mode
-    useEffect(() => {
-        if (snapshotId) {
-            refetch(
-                { filter: { snapshotId } },
-                { fetchPolicy: "store-or-network" },
-            );
-        }
-    }, [snapshotId, refetch]);
-
-    const hasAnyAction =
-        !isSnapshotMode &&
-        statesOfApplicability.edges
-            .map((edge) => edge.node)
-            .some(({ canDelete }) => canDelete);
-
-    return (
-        <div className="space-y-6">
-            {snapshotId && <SnapshotBanner snapshotId={snapshotId} />}
-            <PageHeader
-                title={__("States of Applicability")}
-                description={__(
-                    "Manage states of applicability for your organization's frameworks.",
-                )}
-            >
-                {!isSnapshotMode &&
-                    organization.canCreateStateOfApplicability && (
-                        <CreateStateOfApplicabilityDialog
-                            connectionId={statesOfApplicability.__id}
-                        >
-                            <Button icon={IconPlusLarge}>
-                                {__("Add state of applicability")}
-                            </Button>
-                        </CreateStateOfApplicabilityDialog>
-                    )}
-            </PageHeader>
-
-            {statesOfApplicability && statesOfApplicability.edges.length > 0 ? (
-                <Card>
-                    <Table>
-                        <Thead>
-                            <Tr>
-                                <Th>{__("Name")}</Th>
-                                <Th>{__("Created at")}</Th>
-                                <Th>{__("Controls")}</Th>
-                                {hasAnyAction && <Th>{__("Actions")}</Th>}
-                            </Tr>
-                        </Thead>
-                        <Tbody>
-                            {statesOfApplicability.edges.map((edge) => (
-                                <StateOfApplicabilityRow
-                                    key={edge.node.id}
-                                    stateOfApplicability={edge.node}
-                                    connectionId={statesOfApplicability.__id}
-                                    hasAnyAction={hasAnyAction}
-                                />
-                            ))}
-                        </Tbody>
-                    </Table>
-
-                    {hasNext && (
-                        <div className="p-4 border-t">
-                            <Button
-                                variant="secondary"
-                                onClick={() => loadNext(50)}
-                                disabled={isLoadingNext}
-                            >
-                                {isLoadingNext
-                                    ? __("Loading...")
-                                    : __("Load more")}
-                            </Button>
-                        </div>
-                    )}
-                </Card>
-            ) : (
-                <Card padded>
-                    <div className="text-center py-12">
-                        <h3 className="text-lg font-semibold mb-2">
-                            {__("No states of applicability yet")}
-                        </h3>
-                        <p className="text-txt-tertiary mb-4">
-                            {__(
-                                "Create your first state of applicability to get started.",
-                            )}
-                        </p>
-                    </div>
-                </Card>
-            )}
-        </div>
+  const { organization }
+    = usePreloadedQuery<StateOfApplicabilityGraphPaginatedQuery>(
+      paginatedStateOfApplicabilityQuery,
+      queryRef,
     );
+
+  if (organization.__typename !== "Organization") {
+    throw new Error("Organization not found");
+  }
+
+  const {
+    data: { statesOfApplicability },
+    loadNext,
+    hasNext,
+    refetch,
+    isLoadingNext,
+  } = usePaginationFragment<
+    StateOfApplicabilityListQuery,
+    StateOfApplicabilityGraphPaginatedFragment$key
+  >(paginatedStateOfApplicabilityFragment, organization);
+
+  // Refetch with snapshot filter when in snapshot mode
+  useEffect(() => {
+    if (snapshotId) {
+      refetch(
+        { filter: { snapshotId } },
+        { fetchPolicy: "store-or-network" },
+      );
+    }
+  }, [snapshotId, refetch]);
+
+  const hasAnyAction
+    = !isSnapshotMode
+      && statesOfApplicability.edges
+        .map(edge => edge.node)
+        .some(({ canDelete }) => canDelete);
+
+  return (
+    <div className="space-y-6">
+      {snapshotId && <SnapshotBanner snapshotId={snapshotId} />}
+      <PageHeader
+        title={__("States of Applicability")}
+        description={__(
+          "Manage states of applicability for your organization's frameworks.",
+        )}
+      >
+        {!isSnapshotMode
+          && organization.canCreateStateOfApplicability && (
+          <CreateStateOfApplicabilityDialog
+            connectionId={statesOfApplicability.__id}
+          >
+            <Button icon={IconPlusLarge}>
+              {__("Add state of applicability")}
+            </Button>
+          </CreateStateOfApplicabilityDialog>
+        )}
+      </PageHeader>
+
+      {statesOfApplicability && statesOfApplicability.edges.length > 0
+        ? (
+            <Card>
+              <Table>
+                <Thead>
+                  <Tr>
+                    <Th>{__("Name")}</Th>
+                    <Th>{__("Created at")}</Th>
+                    <Th>{__("Controls")}</Th>
+                    {hasAnyAction && <Th>{__("Actions")}</Th>}
+                  </Tr>
+                </Thead>
+                <Tbody>
+                  {statesOfApplicability.edges.map(edge => (
+                    <StateOfApplicabilityRow
+                      key={edge.node.id}
+                      stateOfApplicability={edge.node}
+                      connectionId={statesOfApplicability.__id}
+                      hasAnyAction={hasAnyAction}
+                    />
+                  ))}
+                </Tbody>
+              </Table>
+
+              {hasNext && (
+                <div className="p-4 border-t">
+                  <Button
+                    variant="secondary"
+                    onClick={() => loadNext(50)}
+                    disabled={isLoadingNext}
+                  >
+                    {isLoadingNext
+                      ? __("Loading...")
+                      : __("Load more")}
+                  </Button>
+                </div>
+              )}
+            </Card>
+          )
+        : (
+            <Card padded>
+              <div className="text-center py-12">
+                <h3 className="text-lg font-semibold mb-2">
+                  {__("No states of applicability yet")}
+                </h3>
+                <p className="text-txt-tertiary mb-4">
+                  {__(
+                    "Create your first state of applicability to get started.",
+                  )}
+                </p>
+              </div>
+            </Card>
+          )}
+    </div>
+  );
 }
 
 function StateOfApplicabilityRow({
+  stateOfApplicability,
+  connectionId,
+  hasAnyAction,
+}: {
+  stateOfApplicability: StateOfApplicability;
+  connectionId: string;
+  hasAnyAction: boolean;
+}) {
+  const { __ } = useTranslate();
+  const organizationId = useOrganizationId();
+  const { snapshotId } = useParams<{ snapshotId?: string }>();
+  const deleteStateOfApplicability = useDeleteStateOfApplicability(
     stateOfApplicability,
     connectionId,
-    hasAnyAction,
-}: {
-    stateOfApplicability: StateOfApplicability;
-    connectionId: string;
-    hasAnyAction: boolean;
-}) {
-    const { __ } = useTranslate();
-    const organizationId = useOrganizationId();
-    const { snapshotId } = useParams<{ snapshotId?: string }>();
-    const deleteStateOfApplicability = useDeleteStateOfApplicability(
-        stateOfApplicability,
-        connectionId,
-    );
+  );
 
-    const detailUrl = snapshotId
-        ? `/organizations/${organizationId}/snapshots/${snapshotId}/states-of-applicability/${stateOfApplicability.id}`
-        : `/organizations/${organizationId}/states-of-applicability/${stateOfApplicability.id}`;
+  const detailUrl = snapshotId
+    ? `/organizations/${organizationId}/snapshots/${snapshotId}/states-of-applicability/${stateOfApplicability.id}`
+    : `/organizations/${organizationId}/states-of-applicability/${stateOfApplicability.id}`;
 
-    return (
-        <Tr to={detailUrl}>
-            <Td>{stateOfApplicability.name}</Td>
-            <Td>
-                <time dateTime={stateOfApplicability.createdAt}>
-                    {formatDate(stateOfApplicability.createdAt)}
-                </time>
-            </Td>
-            <Td>{stateOfApplicability.controlsInfo?.totalCount ?? 0}</Td>
-            {hasAnyAction && (
-                <Td noLink width={50} className="text-end">
-                    <ActionDropdown>
-                        {stateOfApplicability.canDelete && (
-                            <DropdownItem
-                                icon={IconTrashCan}
-                                variant="danger"
-                                onSelect={(e) => {
-                                    e.preventDefault();
-                                    e.stopPropagation();
-                                    deleteStateOfApplicability();
-                                }}
-                            >
-                                {__("Delete")}
-                            </DropdownItem>
-                        )}
-                    </ActionDropdown>
-                </Td>
+  return (
+    <Tr to={detailUrl}>
+      <Td>{stateOfApplicability.name}</Td>
+      <Td>
+        <time dateTime={stateOfApplicability.createdAt}>
+          {formatDate(stateOfApplicability.createdAt)}
+        </time>
+      </Td>
+      <Td>{stateOfApplicability.controlsInfo?.totalCount ?? 0}</Td>
+      {hasAnyAction && (
+        <Td noLink width={50} className="text-end">
+          <ActionDropdown>
+            {stateOfApplicability.canDelete && (
+              <DropdownItem
+                icon={IconTrashCan}
+                variant="danger"
+                onSelect={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  deleteStateOfApplicability();
+                }}
+              >
+                {__("Delete")}
+              </DropdownItem>
             )}
-        </Tr>
-    );
+          </ActionDropdown>
+        </Td>
+      )}
+    </Tr>
+  );
 }
diff --git a/apps/console/src/pages/organizations/states-of-applicability/dialogs/CreateStateOfApplicabilityDialog.tsx b/apps/console/src/pages/organizations/states-of-applicability/dialogs/CreateStateOfApplicabilityDialog.tsx
index cefc19d37..3ea3c078f 100644
--- a/apps/console/src/pages/organizations/states-of-applicability/dialogs/CreateStateOfApplicabilityDialog.tsx
+++ b/apps/console/src/pages/organizations/states-of-applicability/dialogs/CreateStateOfApplicabilityDialog.tsx
@@ -1,12 +1,12 @@
 import { useTranslate } from "@probo/i18n";
 import {
-    Breadcrumb,
-    Button,
-    Dialog,
-    DialogContent,
-    DialogFooter,
-    Field,
-    useDialogRef,
+  Breadcrumb,
+  Button,
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  Field,
+  useDialogRef,
 } from "@probo/ui";
 import type { ReactNode } from "react";
 import { useNavigate } from "react-router";
@@ -20,104 +20,104 @@ import { PeopleSelectField } from "/components/form/PeopleSelectField";
 import { Suspense } from "react";
 
 type Props = {
-    children: ReactNode;
-    connectionId: string;
+  children: ReactNode;
+  connectionId: string;
 };
 
 const schema = z.object({
-    name: z.string().min(1),
-    ownerId: z.string().min(1),
+  name: z.string().min(1),
+  ownerId: z.string().min(1),
 });
 
 export function CreateStateOfApplicabilityDialog({
-    children,
-    connectionId,
+  children,
+  connectionId,
 }: Props) {
-    const { __ } = useTranslate();
-    const organizationId = useOrganizationId();
-    const navigate = useNavigate();
-    const { control, register, handleSubmit, reset } = useFormWithSchema(
-        schema,
-        {
-            defaultValues: {
-                name: "",
-                ownerId: "",
-            },
+  const { __ } = useTranslate();
+  const organizationId = useOrganizationId();
+  const navigate = useNavigate();
+  const { control, register, handleSubmit, reset } = useFormWithSchema(
+    schema,
+    {
+      defaultValues: {
+        name: "",
+        ownerId: "",
+      },
+    },
+  );
+  const ref = useDialogRef();
+
+  const [mutate, isMutating]
+    = useMutationWithToasts<StateOfApplicabilityGraphCreateMutation>(
+      createStateOfApplicabilityMutation,
+      {
+        successMessage: __(
+          "State of applicability created successfully.",
+        ),
+        errorMessage: __("Failed to create state of applicability"),
+      },
+    );
+
+  const onSubmit = async (data: z.infer<typeof schema>) => {
+    await mutate({
+      variables: {
+        input: {
+          name: data.name,
+          organizationId,
+          ownerId: data.ownerId,
         },
-    );
-    const ref = useDialogRef();
-
-    const [mutate, isMutating] =
-        useMutationWithToasts<StateOfApplicabilityGraphCreateMutation>(
-            createStateOfApplicabilityMutation,
-            {
-                successMessage: __(
-                    "State of applicability created successfully.",
-                ),
-                errorMessage: __("Failed to create state of applicability"),
-            },
+        connections: [connectionId],
+      },
+      onCompleted: (response) => {
+        reset();
+        ref.current?.close();
+        const stateOfApplicabilityId
+          = response.createStateOfApplicability.stateOfApplicabilityEdge
+            .node.id;
+        void navigate(
+          `/organizations/${organizationId}/states-of-applicability/${stateOfApplicabilityId}`,
         );
-
-    const onSubmit = handleSubmit((data) => {
-        mutate({
-            variables: {
-                input: {
-                    name: data.name,
-                    organizationId,
-                    ownerId: data.ownerId,
-                },
-                connections: [connectionId],
-            },
-            onCompleted: (response) => {
-                reset();
-                ref.current?.close();
-                const stateOfApplicabilityId =
-                    response.createStateOfApplicability.stateOfApplicabilityEdge
-                        .node.id;
-                navigate(
-                    `/organizations/${organizationId}/states-of-applicability/${stateOfApplicabilityId}`,
-                );
-            },
-        });
+      },
     });
+  };
 
-    return (
-        <Dialog
-            ref={ref}
-            trigger={children}
-            title={
-                <Breadcrumb
-                    items={[
-                        __("States of Applicability"),
-                        __("New State of Applicability"),
-                    ]}
-                />
-            }
-        >
-            <form onSubmit={onSubmit}>
-                <DialogContent padded className="space-y-4">
-                    <Field
-                        label={__("Name")}
-                        {...register("name")}
-                        type="text"
-                        required
-                    />
-                    <Field label={__("Owner")}>
-                        <Suspense fallback={<div>{__("Loading...")}</div>}>
-                            <PeopleSelectField
-                                organizationId={organizationId}
-                                control={control}
-                                name="ownerId"
-                            />
-                        </Suspense>
-                    </Field>
-                </DialogContent>
-                <DialogFooter>
-                    <Button disabled={isMutating} type="submit">
-                        {__("Create")}
-                    </Button>
-                </DialogFooter>
-            </form>
-        </Dialog>
-    );
+  return (
+    <Dialog
+      ref={ref}
+      trigger={children}
+      title={(
+        <Breadcrumb
+          items={[
+            __("States of Applicability"),
+            __("New State of Applicability"),
+          ]}
+        />
+      )}
+    >
+      <form onSubmit={e => void handleSubmit(onSubmit)(e)}>
+        <DialogContent padded className="space-y-4">
+          <Field
+            label={__("Name")}
+            {...register("name")}
+            type="text"
+            required
+          />
+          <Field label={__("Owner")}>
+            <Suspense fallback={<div>{__("Loading...")}</div>}>
+              <PeopleSelectField
+                organizationId={organizationId}
+                control={control}
+                name="ownerId"
+              />
+            </Suspense>
+          </Field>
+        </DialogContent>
+        <DialogFooter>
+          <Button disabled={isMutating} type="submit">
+            {__("Create")}
+          </Button>
+        </DialogFooter>
+      </form>
+    </Dialog>
+  );
 }
diff --git a/apps/console/src/pages/organizations/states-of-applicability/dialogs/EditControlDialog.tsx b/apps/console/src/pages/organizations/states-of-applicability/dialogs/EditControlDialog.tsx
index f77adbeed..49dd6bc43 100644
--- a/apps/console/src/pages/organizations/states-of-applicability/dialogs/EditControlDialog.tsx
+++ b/apps/console/src/pages/organizations/states-of-applicability/dialogs/EditControlDialog.tsx
@@ -86,10 +86,10 @@ export const EditControlDialog = forwardRef<EditControlDialogRef, { onSuccess?:
       },
     }));
 
-    const onSubmit = handleSubmit((data) => {
+    const onSubmit = async (data: z.infer<typeof schema>) => {
       if (!control) return;
 
-      linkMutate({
+      await linkMutate({
         variables: {
           input: {
             stateOfApplicabilityId: control.stateOfApplicabilityId,
@@ -110,67 +110,69 @@ export const EditControlDialog = forwardRef<EditControlDialogRef, { onSuccess?:
           }
         },
       });
-    });
+    };
 
     return (
       <Dialog
         ref={dialogRef}
         className="max-w-lg"
-        title={
+        title={(
           <Breadcrumb
             items={[__("States of Applicability"), __("Edit Control")]}
           />
-        }
+        )}
       >
-        {control ? (
-          <form onSubmit={onSubmit}>
-            <DialogContent padded className="space-y-4">
-              <div className="space-y-2">
-                <div className="text-sm font-medium text-txt-secondary">
-                  {control.frameworkName}
-                </div>
-                <div className="flex items-center gap-2">
-                  <Badge size="md">{control.sectionTitle}</Badge>
-                  <span className="text-base font-medium text-txt-primary">{control.name}</span>
-                </div>
-              </div>
+        {control
+          ? (
+              <form onSubmit={e => void handleSubmit(onSubmit)(e)}>
+                <DialogContent padded className="space-y-4">
+                  <div className="space-y-2">
+                    <div className="text-sm font-medium text-txt-secondary">
+                      {control.frameworkName}
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <Badge size="md">{control.sectionTitle}</Badge>
+                      <span className="text-base font-medium text-txt-primary">{control.name}</span>
+                    </div>
+                  </div>
 
-              <Field label={__("Applicability")}>
-                <Select
-                  variant="editor"
-                  value={applicability ? "yes" : "no"}
-                  onValueChange={(value) => setValue("applicability", value === "yes")}
-                >
-                  <Option value="yes">{__("Yes")}</Option>
-                  <Option value="no">{__("No")}</Option>
-                </Select>
-              </Field>
+                  <Field label={__("Applicability")}>
+                    <Select
+                      variant="editor"
+                      value={applicability ? "yes" : "no"}
+                      onValueChange={value => setValue("applicability", value === "yes")}
+                    >
+                      <Option value="yes">{__("Yes")}</Option>
+                      <Option value="no">{__("No")}</Option>
+                    </Select>
+                  </Field>
 
-              {!applicability && (
-                <Field label={__("Justification")}>
-                  <Textarea
-                    {...register("justification")}
-                    placeholder={__("Reason for non-applicability")}
-                    autogrow
-                  />
-                </Field>
-              )}
-            </DialogContent>
-            <DialogFooter>
-              <Button
-                type="button"
-                variant="secondary"
-                onClick={() => dialogRef.current?.close()}
-              >
-                {__("Cancel")}
-              </Button>
-              <Button type="submit" disabled={isLinking}>
-                {__("Save")}
-              </Button>
-            </DialogFooter>
-          </form>
-        ) : null}
+                  {!applicability && (
+                    <Field label={__("Justification")}>
+                      <Textarea
+                        {...register("justification")}
+                        placeholder={__("Reason for non-applicability")}
+                        autogrow
+                      />
+                    </Field>
+                  )}
+                </DialogContent>
+                <DialogFooter>
+                  <Button
+                    type="button"
+                    variant="secondary"
+                    onClick={() => dialogRef.current?.close()}
+                  >
+                    {__("Cancel")}
+                  </Button>
+                  <Button type="submit" disabled={isLinking}>
+                    {__("Save")}
+                  </Button>
+                </DialogFooter>
+              </form>
+            )
+          : null}
       </Dialog>
     );
-  }
+  },
 );
diff --git a/apps/console/src/pages/organizations/states-of-applicability/dialogs/LinkControlDialog.tsx b/apps/console/src/pages/organizations/states-of-applicability/dialogs/LinkControlDialog.tsx
index f9496d565..07e8741e7 100644
--- a/apps/console/src/pages/organizations/states-of-applicability/dialogs/LinkControlDialog.tsx
+++ b/apps/console/src/pages/organizations/states-of-applicability/dialogs/LinkControlDialog.tsx
@@ -101,7 +101,7 @@ function ControlRow({
     return control.applicability ? "applicable" : "not-applicable";
   });
   const [justification, setJustification] = useState(
-    control.justification || ""
+    control.justification || "",
   );
   const [showJustification, setShowJustification] = useState(false);
 
@@ -115,11 +115,11 @@ function ControlRow({
     errorMessage: __("Failed to remove control"),
   });
 
-  const handleStateChange = (newState: string) => {
+  const handleStateChange = async (newState: string) => {
     setSelectedState(newState);
 
     if (newState === "not-linked") {
-      unlinkMutate({
+      await unlinkMutate({
         variables: {
           input: {
             stateOfApplicabilityId,
@@ -133,7 +133,7 @@ function ControlRow({
       });
     } else if (newState === "applicable") {
       setShowJustification(false);
-      linkMutate({
+      await linkMutate({
         variables: {
           input: {
             stateOfApplicabilityId,
@@ -152,8 +152,8 @@ function ControlRow({
     }
   };
 
-  const handleSaveJustification = () => {
-    linkMutate({
+  const handleSaveJustification = async () => {
+    await linkMutate({
       variables: {
         input: {
           stateOfApplicabilityId,
@@ -187,7 +187,7 @@ function ControlRow({
           <Select
             variant="editor"
             value={selectedState}
-            onValueChange={handleStateChange}
+            onValueChange={value => void handleStateChange(value)}
             disabled={isLinking || isUnlinking}
             className="w-48"
           >
@@ -207,7 +207,7 @@ function ControlRow({
         <div className="mt-3 flex items-start gap-2">
           <Textarea
             value={justification}
-            onChange={(e) => setJustification(e.target.value)}
+            onChange={e => setJustification(e.target.value)}
             placeholder={__("Reason for non-applicability")}
             className="flex-1"
             autogrow
@@ -215,7 +215,7 @@ function ControlRow({
           <Button
             variant="primary"
             icon={IconCheckmark1}
-            onClick={handleSaveJustification}
+            onClick={() => void handleSaveJustification()}
             disabled={isLinking}
             aria-label={__("Save")}
           />
@@ -238,7 +238,7 @@ function LinkControlDialogContent({
   const data = useLazyLoadQuery(
     linkControlQuery,
     { stateOfApplicabilityId },
-    { fetchPolicy: "store-or-network" }
+    { fetchPolicy: "store-or-network" },
   ) as {
     node: {
       availableControls?: Control[];
@@ -250,10 +250,10 @@ function LinkControlDialogContent({
     if (!search) return controls;
     const lowerSearch = search.toLowerCase();
     return controls.filter(
-      (c) =>
-        c.name.toLowerCase().includes(lowerSearch) ||
-        c.sectionTitle.toLowerCase().includes(lowerSearch) ||
-        c.frameworkName.toLowerCase().includes(lowerSearch)
+      c =>
+        c.name.toLowerCase().includes(lowerSearch)
+        || c.sectionTitle.toLowerCase().includes(lowerSearch)
+        || c.frameworkName.toLowerCase().includes(lowerSearch),
     );
   }, [data.node?.availableControls, search]);
 
@@ -294,41 +294,43 @@ function LinkControlDialogContent({
           />
         </div>
         <div className="max-h-[60vh] overflow-y-auto">
-          {filteredControls.length === 0 ? (
-            <div className="p-8 text-center text-txt-secondary">
-              {__("No controls found")}
-            </div>
-          ) : (
-            Object.entries(groupedControls).map(([frameworkName, sections]) => {
-              const isCollapsed = collapsedFrameworks.has(frameworkName);
-              return (
-                <div key={frameworkName}>
-                  <div className="sticky top-0 bg-level-1 px-4 py-2 border-b border-border-low z-10 flex items-center justify-between">
-                    <h3 className="text-sm font-semibold text-txt-primary">{frameworkName}</h3>
-                    <Button
-                      variant="tertiary"
-                      icon={isCollapsed ? IconChevronDown : IconChevronUp}
-                      onClick={() => toggleFramework(frameworkName)}
-                      aria-label={isCollapsed ? __("Expand") : __("Collapse")}
-                    />
-                  </div>
-                  {!isCollapsed && Object.entries(sections).map(([sectionTitle, sectionControls]) => (
-                    <div key={`${frameworkName}-${sectionTitle}`}>
-                      {sectionControls.map((control) => (
-                        <ControlRow
-                          key={control.controlId}
-                          control={control}
-                          stateOfApplicabilityId={stateOfApplicabilityId}
-                          isLinked={control.stateOfApplicabilityId !== null}
-                          onUpdate={onUpdate}
+          {filteredControls.length === 0
+            ? (
+                <div className="p-8 text-center text-txt-secondary">
+                  {__("No controls found")}
+                </div>
+              )
+            : (
+                Object.entries(groupedControls).map(([frameworkName, sections]) => {
+                  const isCollapsed = collapsedFrameworks.has(frameworkName);
+                  return (
+                    <div key={frameworkName}>
+                      <div className="sticky top-0 bg-level-1 px-4 py-2 border-b border-border-low z-10 flex items-center justify-between">
+                        <h3 className="text-sm font-semibold text-txt-primary">{frameworkName}</h3>
+                        <Button
+                          variant="tertiary"
+                          icon={isCollapsed ? IconChevronDown : IconChevronUp}
+                          onClick={() => toggleFramework(frameworkName)}
+                          aria-label={isCollapsed ? __("Expand") : __("Collapse")}
                         />
+                      </div>
+                      {!isCollapsed && Object.entries(sections).map(([sectionTitle, sectionControls]) => (
+                        <div key={`${frameworkName}-${sectionTitle}`}>
+                          {sectionControls.map(control => (
+                            <ControlRow
+                              key={control.controlId}
+                              control={control}
+                              stateOfApplicabilityId={stateOfApplicabilityId}
+                              isLinked={control.stateOfApplicabilityId !== null}
+                              onUpdate={onUpdate}
+                            />
+                          ))}
+                        </div>
                       ))}
                     </div>
-                  ))}
-                </div>
-              );
-            })
-          )}
+                  );
+                })
+              )}
         </div>
       </DialogContent>
       <DialogFooter exitLabel={__("Close")}></DialogFooter>
@@ -359,27 +361,29 @@ export const LinkControlDialog = forwardRef<LinkControlDialogRef>((_props, ref)
     <Dialog
       ref={dialogRef}
       className="max-w-3xl"
-      title={
+      title={(
         <Breadcrumb
           items={[__("States of Applicability"), __("Add Controls")]}
         />
-      }
+      )}
       onClose={handleClose}
     >
-      {stateOfApplicabilityId ? (
-        <Suspense
-          fallback={
-            <DialogContent padded className="flex items-center justify-center py-8">
-              <Spinner />
-            </DialogContent>
-          }
-        >
-          <LinkControlDialogContent
-            stateOfApplicabilityId={stateOfApplicabilityId}
-            onUpdate={onUpdateCallback}
-          />
-        </Suspense>
-      ) : null}
+      {stateOfApplicabilityId
+        ? (
+            <Suspense
+              fallback={(
+                <DialogContent padded className="flex items-center justify-center py-8">
+                  <Spinner />
+                </DialogContent>
+              )}
+            >
+              <LinkControlDialogContent
+                stateOfApplicabilityId={stateOfApplicabilityId}
+                onUpdate={onUpdateCallback}
+              />
+            </Suspense>
+          )
+        : null}
     </Dialog>
   );
 });
diff --git a/apps/console/src/pages/organizations/states-of-applicability/tabs/StateOfApplicabilityControlsTab.tsx b/apps/console/src/pages/organizations/states-of-applicability/tabs/StateOfApplicabilityControlsTab.tsx
index 2d928429b..75ca48496 100644
--- a/apps/console/src/pages/organizations/states-of-applicability/tabs/StateOfApplicabilityControlsTab.tsx
+++ b/apps/console/src/pages/organizations/states-of-applicability/tabs/StateOfApplicabilityControlsTab.tsx
@@ -1,30 +1,30 @@
 import { graphql, useRefetchableFragment } from "react-relay";
 import {
-    Badge,
-    Table,
-    Tbody,
-    Td,
-    Th,
-    Thead,
-    Tr,
-    Button,
-    IconPlusLarge,
-    IconPencil,
-    IconTrashCan,
-    ActionDropdown,
-    DropdownItem,
+  Badge,
+  Table,
+  Tbody,
+  Td,
+  Th,
+  Thead,
+  Tr,
+  Button,
+  IconPlusLarge,
+  IconPencil,
+  IconTrashCan,
+  ActionDropdown,
+  DropdownItem,
 } from "@probo/ui";
 import { useTranslate } from "@probo/i18n";
 import { useOrganizationId } from "/hooks/useOrganizationId";
 import type { StateOfApplicabilityControlsTabFragment$key } from "/__generated__/core/StateOfApplicabilityControlsTabFragment.graphql";
 import { Suspense, useMemo, useRef } from "react";
 import {
-    LinkControlDialog,
-    type LinkControlDialogRef,
+  LinkControlDialog,
+  type LinkControlDialogRef,
 } from "../dialogs/LinkControlDialog";
 import {
-    EditControlDialog,
-    type EditControlDialogRef,
+  EditControlDialog,
+  type EditControlDialogRef,
 } from "../dialogs/EditControlDialog";
 import { useMutationWithToasts } from "/hooks/useMutationWithToasts";
 
@@ -74,316 +74,310 @@ const unlinkControlMutation = graphql`
 `;
 
 export default function StateOfApplicabilityControlsTab({
-    stateOfApplicability,
-    isSnapshotMode = false,
+  stateOfApplicability,
+  isSnapshotMode = false,
 }: {
-    stateOfApplicability: StateOfApplicabilityControlsTabFragment$key & {
-        id: string;
-    };
-    isSnapshotMode?: boolean;
+  stateOfApplicability: StateOfApplicabilityControlsTabFragment$key & {
+    id: string;
+  };
+  isSnapshotMode?: boolean;
 }) {
-    const { __ } = useTranslate();
-    const [data, refetch] = useRefetchableFragment(
-        controlsFragment,
-        stateOfApplicability,
-    );
-    const organizationId = useOrganizationId();
-    const manageDialogRef = useRef<LinkControlDialogRef>(null);
-    const editDialogRef = useRef<EditControlDialogRef>(null);
+  const { __ } = useTranslate();
+  const [data, refetch] = useRefetchableFragment(
+    controlsFragment,
+    stateOfApplicability,
+  );
+  const organizationId = useOrganizationId();
+  const manageDialogRef = useRef<LinkControlDialogRef>(null);
+  const editDialogRef = useRef<EditControlDialogRef>(null);
 
-    const linkedControls = useMemo(
-        () =>
-            (data.availableControls || []).filter(
-                (c) => c.stateOfApplicabilityId !== null,
-            ),
-        [data.availableControls],
-    );
+  const linkedControls = useMemo(
+    () =>
+      (data.availableControls || []).filter(
+        c => c.stateOfApplicabilityId !== null,
+      ),
+    [data.availableControls],
+  );
 
-    const [unlinkControl, isUnlinking] = useMutationWithToasts(
-        unlinkControlMutation,
-        {
-            successMessage: __("Control removed successfully."),
-            errorMessage: __("Failed to remove control"),
+  const [unlinkControl, isUnlinking] = useMutationWithToasts(
+    unlinkControlMutation,
+    {
+      successMessage: __("Control removed successfully."),
+      errorMessage: __("Failed to remove control"),
+    },
+  );
+
+  const canLink
+    = !isSnapshotMode && data.canCreateStateOfApplicabilityControlMapping;
+  const canUnlink
+    = !isSnapshotMode && data.canDeleteStateOfApplicabilityControlMapping;
+
+  const handleOpenManageDialog = () => {
+    manageDialogRef.current?.open(data.id, () => {
+      refetch({}, { fetchPolicy: "store-and-network" });
+    });
+  };
+
+  const handleOpenEditDialog = (control: {
+    controlId: string;
+    sectionTitle: string;
+    name: string;
+    frameworkName: string;
+    applicability: boolean;
+    justification: string | null;
+  }) => {
+    editDialogRef.current?.open({
+      stateOfApplicabilityId: data.id,
+      controlId: control.controlId,
+      sectionTitle: control.sectionTitle,
+      name: control.name,
+      frameworkName: control.frameworkName,
+      applicability: control.applicability,
+      justification: control.justification,
+    });
+  };
+
+  const handleUnlink = async (controlId: string) => {
+    await unlinkControl({
+      variables: {
+        input: {
+          stateOfApplicabilityId: data.id,
+          controlId,
         },
-    );
+      },
+      onSuccess: () => {
+        refetch({}, { fetchPolicy: "network-only" });
+      },
+    });
+  };
 
-    const canLink =
-        !isSnapshotMode && data.canCreateStateOfApplicabilityControlMapping;
-    const canUnlink =
-        !isSnapshotMode && data.canDeleteStateOfApplicabilityControlMapping;
+  return (
+    <>
+      <div className="space-y-4">
+        {canLink && (
+          <div className="flex justify-end">
+            <Button
+              icon={IconPlusLarge}
+              onClick={handleOpenManageDialog}
+            >
+              {__("Add Controls")}
+            </Button>
+          </div>
+        )}
 
-    const handleOpenManageDialog = () => {
-        manageDialogRef.current?.open(data.id, () => {
-            refetch({}, { fetchPolicy: "store-and-network" });
-        });
-    };
-
-    const handleOpenEditDialog = (control: {
-        controlId: string;
-        sectionTitle: string;
-        name: string;
-        frameworkName: string;
-        applicability: boolean;
-        justification: string | null;
-    }) => {
-        editDialogRef.current?.open({
-            stateOfApplicabilityId: data.id,
-            controlId: control.controlId,
-            sectionTitle: control.sectionTitle,
-            name: control.name,
-            frameworkName: control.frameworkName,
-            applicability: control.applicability,
-            justification: control.justification,
-        });
-    };
-
-    const handleUnlink = (controlId: string) => {
-        unlinkControl({
-            variables: {
-                input: {
-                    stateOfApplicabilityId: data.id,
-                    controlId,
-                },
-            },
-            onSuccess: () => {
-                refetch({}, { fetchPolicy: "network-only" });
-            },
-        });
-    };
-
-    return (
-        <>
-            <div className="space-y-4">
-                {canLink && (
-                    <div className="flex justify-end">
-                        <Button
-                            icon={IconPlusLarge}
-                            onClick={handleOpenManageDialog}
-                        >
-                            {__("Add Controls")}
-                        </Button>
+        <Table>
+          <Thead>
+            <Tr>
+              <Th className="w-32">{__("Framework")}</Th>
+              <Th>{__("Control")}</Th>
+              <Th className="w-28 text-center">
+                {__("Applicability")}
+              </Th>
+              <Th className="min-w-48">{__("Justification")}</Th>
+              <Th className="w-24 text-center">
+                {__("Regulatory")}
+              </Th>
+              <Th className="w-24 text-center">
+                {__("Contractual")}
+              </Th>
+              <Th className="w-32 text-center">
+                {__("Best Practice")}
+              </Th>
+              <Th className="w-36 text-center">
+                {__("Risk Assessment")}
+              </Th>
+              {(canLink || canUnlink) && (
+                <Th className="w-12"></Th>
+              )}
+            </Tr>
+          </Thead>
+          <Tbody>
+            {linkedControls.length === 0 && (
+              <Tr>
+                <Td
+                  colSpan={canLink || canUnlink ? 9 : 8}
+                  className="text-center text-txt-secondary py-12"
+                >
+                  {__("No controls linked")}
+                </Td>
+              </Tr>
+            )}
+            {linkedControls.map(control => (
+              <Tr
+                key={control.controlId}
+                to={`/organizations/${organizationId}/frameworks/${control.frameworkId}/controls/${control.controlId}`}
+              >
+                <Td className="font-medium text-txt-secondary">
+                  {control.frameworkName}
+                </Td>
+                <Td>
+                  <div className="space-y-1">
+                    <div className="text-xs font-medium text-txt-tertiary">
+                      {control.sectionTitle}
                     </div>
-                )}
-
-                <Table>
-                    <Thead>
-                        <Tr>
-                            <Th className="w-32">{__("Framework")}</Th>
-                            <Th>{__("Control")}</Th>
-                            <Th className="w-28 text-center">
-                                {__("Applicability")}
-                            </Th>
-                            <Th className="min-w-48">{__("Justification")}</Th>
-                            <Th className="w-24 text-center">
-                                {__("Regulatory")}
-                            </Th>
-                            <Th className="w-24 text-center">
-                                {__("Contractual")}
-                            </Th>
-                            <Th className="w-32 text-center">
-                                {__("Best Practice")}
-                            </Th>
-                            <Th className="w-36 text-center">
-                                {__("Risk Assessment")}
-                            </Th>
-                            {(canLink || canUnlink) && (
-                                <Th className="w-12"></Th>
-                            )}
-                        </Tr>
-                    </Thead>
-                    <Tbody>
-                        {linkedControls.length === 0 && (
-                            <Tr>
-                                <Td
-                                    colSpan={canLink || canUnlink ? 9 : 8}
-                                    className="text-center text-txt-secondary py-12"
-                                >
-                                    {__("No controls linked")}
-                                </Td>
-                            </Tr>
+                    <div className="text-sm">
+                      {control.name}
+                    </div>
+                  </div>
+                </Td>
+                <Td>
+                  <div className="flex justify-center">
+                    {control.applicability !== null
+                      ? (
+                          <Badge
+                            variant={
+                              control.applicability
+                                ? "success"
+                                : "danger"
+                            }
+                            size="sm"
+                          >
+                            {control.applicability
+                              ? __("Yes")
+                              : __("No")}
+                          </Badge>
+                        )
+                      : (
+                          <span className="text-txt-tertiary">
+                            -
+                          </span>
                         )}
-                        {linkedControls.map((control) => (
-                            <Tr
-                                key={control.controlId}
-                                to={`/organizations/${organizationId}/frameworks/${control.frameworkId}/controls/${control.controlId}`}
-                            >
-                                <Td className="font-medium text-txt-secondary">
-                                    {control.frameworkName}
-                                </Td>
-                                <Td>
-                                    <div className="space-y-1">
-                                        <div className="text-xs font-medium text-txt-tertiary">
-                                            {control.sectionTitle}
-                                        </div>
-                                        <div className="text-sm">
-                                            {control.name}
-                                        </div>
-                                    </div>
-                                </Td>
-                                <Td>
-                                    <div className="flex justify-center">
-                                        {control.applicability !== null ? (
-                                            <Badge
-                                                variant={
-                                                    control.applicability
-                                                        ? "success"
-                                                        : "danger"
-                                                }
-                                                size="sm"
-                                            >
-                                                {control.applicability
-                                                    ? __("Yes")
-                                                    : __("No")}
-                                            </Badge>
-                                        ) : (
-                                            <span className="text-txt-tertiary">
-                                                -
-                                            </span>
-                                        )}
-                                    </div>
-                                </Td>
-                                <Td>
-                                    <div className="text-sm text-txt-secondary line-clamp-2">
-                                        {control.justification || (
-                                            <span className="text-txt-tertiary italic">
-                                                -
-                                            </span>
-                                        )}
-                                    </div>
-                                </Td>
-                                <Td>
-                                    <div className="flex justify-center">
-                                        <Badge
-                                            variant={
-                                                control.regulatory
-                                                    ? "success"
-                                                    : "danger"
-                                            }
-                                            size="sm"
-                                        >
-                                            {control.regulatory
-                                                ? __("Yes")
-                                                : __("No")}
-                                        </Badge>
-                                    </div>
-                                </Td>
-                                <Td>
-                                    <div className="flex justify-center">
-                                        <Badge
-                                            variant={
-                                                control.contractual
-                                                    ? "success"
-                                                    : "danger"
-                                            }
-                                            size="sm"
-                                        >
-                                            {control.contractual
-                                                ? __("Yes")
-                                                : __("No")}
-                                        </Badge>
-                                    </div>
-                                </Td>
-                                <Td>
-                                    <div className="flex justify-center">
-                                        <Badge
-                                            variant={
-                                                control.bestPractice
-                                                    ? "success"
-                                                    : "danger"
-                                            }
-                                            size="sm"
-                                        >
-                                            {control.bestPractice
-                                                ? __("Yes")
-                                                : __("No")}
-                                        </Badge>
-                                    </div>
-                                </Td>
-                                <Td>
-                                    <div className="flex justify-center">
-                                        <Badge
-                                            variant={
-                                                control.riskAssessment
-                                                    ? "success"
-                                                    : "danger"
-                                            }
-                                            size="sm"
-                                        >
-                                            {control.riskAssessment
-                                                ? __("Yes")
-                                                : __("No")}
-                                        </Badge>
-                                    </div>
-                                </Td>
-                                {(canLink || canUnlink) && (
-                                    <Td noLink className="text-end">
-                                        <ActionDropdown>
-                                            {canLink && (
-                                                <DropdownItem
-                                                    icon={IconPencil}
-                                                    onClick={(e) => {
-                                                        e.preventDefault();
-                                                        e.stopPropagation();
-                                                        if (
-                                                            typeof control.applicability ===
-                                                            "boolean"
-                                                        ) {
-                                                            handleOpenEditDialog(
-                                                                {
-                                                                    controlId:
-                                                                        control.controlId,
-                                                                    sectionTitle:
-                                                                        control.sectionTitle,
-                                                                    name: control.name,
-                                                                    frameworkName:
-                                                                        control.frameworkName,
-                                                                    applicability:
-                                                                        control.applicability,
-                                                                    justification:
-                                                                        control.justification ??
-                                                                        null,
-                                                                },
-                                                            );
-                                                        }
-                                                    }}
-                                                >
-                                                    {__("Edit")}
-                                                </DropdownItem>
-                                            )}
-                                            {canUnlink && (
-                                                <DropdownItem
-                                                    icon={IconTrashCan}
-                                                    variant="danger"
-                                                    onClick={(e) => {
-                                                        e.preventDefault();
-                                                        e.stopPropagation();
-                                                        handleUnlink(
-                                                            control.controlId,
-                                                        );
-                                                    }}
-                                                    disabled={isUnlinking}
-                                                >
-                                                    {__("Remove")}
-                                                </DropdownItem>
-                                            )}
-                                        </ActionDropdown>
-                                    </Td>
-                                )}
-                            </Tr>
-                        ))}
-                    </Tbody>
-                </Table>
-            </div>
+                  </div>
+                </Td>
+                <Td>
+                  <div className="text-sm text-txt-secondary line-clamp-2">
+                    {control.justification || (
+                      <span className="text-txt-tertiary italic">
+                        -
+                      </span>
+                    )}
+                  </div>
+                </Td>
+                <Td>
+                  <div className="flex justify-center">
+                    <Badge
+                      variant={
+                        control.regulatory
+                          ? "success"
+                          : "danger"
+                      }
+                      size="sm"
+                    >
+                      {control.regulatory
+                        ? __("Yes")
+                        : __("No")}
+                    </Badge>
+                  </div>
+                </Td>
+                <Td>
+                  <div className="flex justify-center">
+                    <Badge
+                      variant={
+                        control.contractual
+                          ? "success"
+                          : "danger"
+                      }
+                      size="sm"
+                    >
+                      {control.contractual
+                        ? __("Yes")
+                        : __("No")}
+                    </Badge>
+                  </div>
+                </Td>
+                <Td>
+                  <div className="flex justify-center">
+                    <Badge
+                      variant={
+                        control.bestPractice
+                          ? "success"
+                          : "danger"
+                      }
+                      size="sm"
+                    >
+                      {control.bestPractice
+                        ? __("Yes")
+                        : __("No")}
+                    </Badge>
+                  </div>
+                </Td>
+                <Td>
+                  <div className="flex justify-center">
+                    <Badge
+                      variant={
+                        control.riskAssessment
+                          ? "success"
+                          : "danger"
+                      }
+                      size="sm"
+                    >
+                      {control.riskAssessment
+                        ? __("Yes")
+                        : __("No")}
+                    </Badge>
+                  </div>
+                </Td>
+                {(canLink || canUnlink) && (
+                  <Td noLink className="text-end">
+                    <ActionDropdown>
+                      {canLink && (
+                        <DropdownItem
+                          icon={IconPencil}
+                          onClick={(e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            if (
+                              typeof control.applicability
+                              === "boolean"
+                            ) {
+                              handleOpenEditDialog(
+                                {
+                                  controlId: control.controlId,
+                                  sectionTitle: control.sectionTitle,
+                                  name: control.name,
+                                  frameworkName: control.frameworkName,
+                                  applicability: control.applicability,
+                                  justification: control.justification ?? null,
+                                },
+                              );
+                            }
+                          }}
+                        >
+                          {__("Edit")}
+                        </DropdownItem>
+                      )}
+                      {canUnlink && (
+                        <DropdownItem
+                          icon={IconTrashCan}
+                          variant="danger"
+                          onClick={(e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            void handleUnlink(control.controlId);
+                          }}
+                          disabled={isUnlinking}
+                        >
+                          {__("Remove")}
+                        </DropdownItem>
+                      )}
+                    </ActionDropdown>
+                  </Td>
+                )}
+              </Tr>
+            ))}
+          </Tbody>
+        </Table>
+      </div>
 
-            <Suspense fallback={null}>
-                <LinkControlDialog ref={manageDialogRef} />
-                <EditControlDialog
-                    ref={editDialogRef}
-                    onSuccess={() => {
-                        refetch({}, { fetchPolicy: "network-only" });
-                    }}
-                />
-            </Suspense>
-        </>
-    );
+      <Suspense fallback={null}>
+        <LinkControlDialog ref={manageDialogRef} />
+        <EditControlDialog
+          ref={editDialogRef}
+          onSuccess={() => {
+            refetch({}, { fetchPolicy: "network-only" });
+          }}
+        />
+      </Suspense>
+    </>
+  );
 }
diff --git a/apps/console/src/pages/organizations/states-of-applicability/tabs/StateOfApplicabilityOverviewTab.tsx b/apps/console/src/pages/organizations/states-of-applicability/tabs/StateOfApplicabilityOverviewTab.tsx
index 7c8e90210..b7dbb3d55 100644
--- a/apps/console/src/pages/organizations/states-of-applicability/tabs/StateOfApplicabilityOverviewTab.tsx
+++ b/apps/console/src/pages/organizations/states-of-applicability/tabs/StateOfApplicabilityOverviewTab.tsx
@@ -5,51 +5,51 @@ import { formatDate } from "@probo/helpers";
 import type { StateOfApplicabilityGraphNodeQuery$data } from "/__generated__/core/StateOfApplicabilityGraphNodeQuery.graphql";
 
 type StateOfApplicabilityNode = NonNullable<
-    StateOfApplicabilityGraphNodeQuery$data["node"]
+  StateOfApplicabilityGraphNodeQuery$data["node"]
 >;
 
 export default function StateOfApplicabilityOverviewTab() {
-    const { stateOfApplicability } = useOutletContext<{
-        stateOfApplicability: StateOfApplicabilityNode;
-    }>();
-    const { __ } = useTranslate();
+  const { stateOfApplicability } = useOutletContext<{
+    stateOfApplicability: StateOfApplicabilityNode;
+  }>();
+  const { __ } = useTranslate();
 
-    return (
-        <div className="space-y-4">
-            <h2 className="text-base font-medium">
-                {__("State of Applicability details")}
-            </h2>
-            <Card className="space-y-4" padded>
-                <Field
-                    label={__("Name")}
-                    value={stateOfApplicability.name}
-                    disabled
-                />
-                {stateOfApplicability.sourceId && (
-                    <Field
-                        label={__("Source")}
-                        value={stateOfApplicability.sourceId}
-                        disabled
-                    />
-                )}
-                {stateOfApplicability.snapshotId && (
-                    <Field
-                        label={__("Snapshot")}
-                        value={stateOfApplicability.snapshotId}
-                        disabled
-                    />
-                )}
-                <Field
-                    label={__("Created at")}
-                    value={formatDate(stateOfApplicability.createdAt)}
-                    disabled
-                />
-                <Field
-                    label={__("Updated at")}
-                    value={formatDate(stateOfApplicability.updatedAt)}
-                    disabled
-                />
-            </Card>
-        </div>
-    );
+  return (
+    <div className="space-y-4">
+      <h2 className="text-base font-medium">
+        {__("State of Applicability details")}
+      </h2>
+      <Card className="space-y-4" padded>
+        <Field
+          label={__("Name")}
+          value={stateOfApplicability.name}
+          disabled
+        />
+        {stateOfApplicability.sourceId && (
+          <Field
+            label={__("Source")}
+            value={stateOfApplicability.sourceId}
+            disabled
+          />
+        )}
+        {stateOfApplicability.snapshotId && (
+          <Field
+            label={__("Snapshot")}
+            value={stateOfApplicability.snapshotId}
+            disabled
+          />
+        )}
+        <Field
+          label={__("Created at")}
+          value={formatDate(stateOfApplicability.createdAt)}
+          disabled
+        />
+        <Field
+          label={__("Updated at")}
+          value={formatDate(stateOfApplicability.updatedAt)}
+          disabled
+        />
+      </Card>
+    </div>
+  );
 }
diff --git a/apps/console/src/pages/organizations/trustCenter/TrustCenterAccessTab/TrustCenterAccessEditDialog.tsx b/apps/console/src/pages/organizations/trustCenter/TrustCenterAccessTab/TrustCenterAccessEditDialog.tsx
index 8bf3a8801..6d43b9ecf 100644
--- a/apps/console/src/pages/organizations/trustCenter/TrustCenterAccessTab/TrustCenterAccessEditDialog.tsx
+++ b/apps/console/src/pages/organizations/trustCenter/TrustCenterAccessTab/TrustCenterAccessEditDialog.tsx
@@ -43,8 +43,8 @@ export function TrustCenterAccessEditDialog(
 
   const { __ } = useTranslate();
 
-  const [queryRef, loadDocumentAccessesQuery] =
-    useQueryLoader<TrustCenterAccessGraphLoadDocumentAccessesQuery>(
+  const [queryRef, loadDocumentAccessesQuery]
+    = useQueryLoader<TrustCenterAccessGraphLoadDocumentAccessesQuery>(
       loadTrustCenterAccessDocumentAccessesQuery,
     );
 
@@ -86,14 +86,14 @@ export function TrustCenterAccessEditForm(
   const { access, onSubmit, queryRef } = props;
 
   const { __ } = useTranslate();
-  const data =
-    usePreloadedQuery<TrustCenterAccessGraphLoadDocumentAccessesQuery>(
+  const data
+    = usePreloadedQuery<TrustCenterAccessGraphLoadDocumentAccessesQuery>(
       loadTrustCenterAccessDocumentAccessesQuery,
       queryRef,
     );
 
-  const initialDocumentAccesses =
-    data.node.availableDocumentAccesses?.edges.map((edge) =>
+  const initialDocumentAccesses
+    = data.node.availableDocumentAccesses?.edges.map(edge =>
       getTrustCenterDocumentAccessInfo(edge.node, __),
     ) ?? [];
   const initialStatusByID = initialDocumentAccesses.reduce<
@@ -114,7 +114,7 @@ export function TrustCenterAccessEditForm(
       setDocumentAccesses((prev) => {
         const nextDocumentAccesses = [...prev];
         const docAccessIndex = nextDocumentAccesses.findIndex(
-          (element) => element.id === documentAccess.id,
+          element => element.id === documentAccess.id,
         );
         const previousDocAccess = nextDocumentAccesses[docAccessIndex];
         nextDocumentAccesses.splice(docAccessIndex, 1, {
@@ -128,13 +128,13 @@ export function TrustCenterAccessEditForm(
     [],
   );
   const handleGrantAllDocumentAccess = useCallback(() => {
-    setDocumentAccesses((prev) =>
-      prev.map((element) => ({ ...element, status: "GRANTED" })),
+    setDocumentAccesses(prev =>
+      prev.map(element => ({ ...element, status: "GRANTED" })),
     );
   }, []);
   const handleRejectOrRevokeAllDocumentAccess = useCallback(() => {
-    setDocumentAccesses((prev) =>
-      prev.map((element) => ({
+    setDocumentAccesses(prev =>
+      prev.map(element => ({
         ...element,
         status:
           initialStatusByID[element.id] === "GRANTED" ? "REVOKED" : "REJECTED",
@@ -162,10 +162,10 @@ export function TrustCenterAccessEditForm(
   );
 
   const handleSubmit = editForm.handleSubmit(async (data) => {
-    const documents: { id: string; status: TrustCenterDocumentAccessStatus }[] =
-      [];
-    const reports: { id: string; status: TrustCenterDocumentAccessStatus }[] =
-      [];
+    const documents: { id: string; status: TrustCenterDocumentAccessStatus }[]
+      = [];
+    const reports: { id: string; status: TrustCenterDocumentAccessStatus }[]
+      = [];
     const trustCenterFiles: {
       id: string;
       status: TrustCenterDocumentAccessStatus;
@@ -206,7 +206,7 @@ export function TrustCenterAccessEditForm(
   });
 
   return (
-    <form onSubmit={handleSubmit}>
+    <form onSubmit={e => void handleSubmit(e)}>
       <DialogContent padded className="space-y-6">
         <div>
           <p className="text-txt-secondary text-sm mb-4">
@@ -232,7 +232,7 @@ export function TrustCenterAccessEditForm(
             </div>
             <Checkbox
               checked={editForm.watch("active")}
-              onChange={(checked) => editForm.setValue("active", checked)}
+              onChange={checked => editForm.setValue("active", checked)}
             />
           </div>
         </div>
diff --git a/apps/console/src/pages/organizations/trustCenter/TrustCenterAccessTab/TrustCenterAccessItem.tsx b/apps/console/src/pages/organizations/trustCenter/TrustCenterAccessTab/TrustCenterAccessItem.tsx
index a91e12fec..09fda7c61 100644
--- a/apps/console/src/pages/organizations/trustCenter/TrustCenterAccessTab/TrustCenterAccessItem.tsx
+++ b/apps/console/src/pages/organizations/trustCenter/TrustCenterAccessTab/TrustCenterAccessItem.tsx
@@ -60,11 +60,13 @@ export function TrustCenterAccessItem(props: TrustCenterAccessItemProps) {
         <Td>{formatDate(access.createdAt)}</Td>
         <Td>
           <div className="flex justify-center">
-            {access.active ? (
-              <IconCheckmark1 size={16} className="text-txt-success" />
-            ) : (
-              <IconCrossLargeX size={16} className="text-txt-danger" />
-            )}
+            {access.active
+              ? (
+                  <IconCheckmark1 size={16} className="text-txt-success" />
+                )
+              : (
+                  <IconCrossLargeX size={16} className="text-txt-danger" />
+                )}
           </div>
         </Td>
         <Td className="text-center">{access.activeCount}</Td>
@@ -81,7 +83,7 @@ export function TrustCenterAccessItem(props: TrustCenterAccessItemProps) {
         <Td noLink width={160} className="text-end">
           <div
             className="flex gap-2 justify-end"
-            onClick={(e) => e.stopPropagation()}
+            onClick={e => e.stopPropagation()}
           >
             {access.canUpdate && (
               <Button
@@ -93,7 +95,7 @@ export function TrustCenterAccessItem(props: TrustCenterAccessItemProps) {
             {access.canDelete && (
               <Button
                 variant="danger"
-                onClick={() => handleDelete(access.id)}
+                onClick={() => void handleDelete(access.id)}
                 disabled={isDeleting}
                 icon={IconTrashCan}
               />
diff --git a/apps/console/src/pages/organizations/trustCenter/TrustCenterAccessTab/TrustCenterAccessTab.tsx b/apps/console/src/pages/organizations/trustCenter/TrustCenterAccessTab/TrustCenterAccessTab.tsx
index 71d3d3d1c..e608a9c0b 100644
--- a/apps/console/src/pages/organizations/trustCenter/TrustCenterAccessTab/TrustCenterAccessTab.tsx
+++ b/apps/console/src/pages/organizations/trustCenter/TrustCenterAccessTab/TrustCenterAccessTab.tsx
@@ -17,7 +17,7 @@ import {
 } from "@probo/ui";
 import { useTranslate } from "@probo/i18n";
 import { useOutletContext } from "react-router";
-import { useState, useEffect, useMemo } from "react";
+import { useState, useMemo } from "react";
 import z from "zod";
 import {
   useTrustCenterAccesses,
@@ -29,6 +29,7 @@ import { TrustCenterAccessItem } from "./TrustCenterAccessItem";
 import type { TrustCenterGraphQuery$data } from "/__generated__/core/TrustCenterGraphQuery.graphql";
 import type { NodeOf } from "/types";
 import type { TrustCenterAccessGraph_accesses$data } from "/__generated__/core/TrustCenterAccessGraph_accesses.graphql";
+import type { TrustCenterAccessGraphCreateMutation } from "/__generated__/core/TrustCenterAccessGraphCreateMutation.graphql";
 
 export default function TrustCenterAccessTab() {
   const { __ } = useTranslate();
@@ -44,7 +45,7 @@ export default function TrustCenterAccessTab() {
       .email(__("Please enter a valid email address")),
   });
 
-  const [createInvitation, isCreating] = useMutationWithToasts(
+  const [createInvitation, isCreating] = useMutationWithToasts<TrustCenterAccessGraphCreateMutation>(
     createTrustCenterAccessMutation,
     {
       successMessage: __("Access created successfully"),
@@ -56,7 +57,6 @@ export default function TrustCenterAccessTab() {
   const [editingAccess, setEditingAccess] = useState<NodeOf<
     TrustCenterAccessGraph_accesses$data["accesses"]
   > | null>(null);
-  const [pendingEditEmail, setPendingEditEmail] = useState<string | null>(null);
 
   const inviteForm = useFormWithSchema(inviteSchema, {
     defaultValues: { name: "", email: "" },
@@ -70,11 +70,11 @@ export default function TrustCenterAccessTab() {
   } = useTrustCenterAccesses(organization.trustCenter?.id || "");
 
   const accesses = useMemo(
-    () => trustCenterData?.accesses?.edges.map((edge) => edge.node) ?? [],
+    () => trustCenterData?.accesses?.edges.map(edge => edge.node) ?? [],
     [trustCenterData?.accesses?.edges],
   );
 
-  const handleInvite = inviteForm.handleSubmit(async (data) => {
+  const handleInvite = async (data: z.infer<typeof inviteSchema>) => {
     if (!organization.trustCenter?.id) {
       return;
     }
@@ -92,19 +92,12 @@ export default function TrustCenterAccessTab() {
         },
         connections: connectionId ? [connectionId] : [],
       },
-      onSuccess: () => {
-        setPendingEditEmail(email);
-      },
-    });
-  });
+      onCompleted: (response, errors) => {
+        if (errors?.length) {
+          return;
+        }
 
-  useEffect(() => {
-    if (pendingEditEmail && accesses.length > 0) {
-      const newAccess = accesses.find(
-        (access) => access.email === pendingEditEmail,
-      );
-      if (newAccess) {
-        setPendingEditEmail(null);
+        const newAccess = response.createTrustCenterAccess.trustCenterAccessEdge.node;
         setEditingAccess(newAccess);
         setTimeout(() => {
           dialogRef.current?.close();
@@ -112,9 +105,9 @@ export default function TrustCenterAccessTab() {
         setTimeout(() => {
           inviteForm.reset();
         }, 300);
-      }
-    }
-  }, [accesses, pendingEditEmail, dialogRef, inviteForm]);
+      },
+    });
+  };
 
   return (
     <div className="space-y-4">
@@ -127,83 +120,87 @@ export default function TrustCenterAccessTab() {
             )}
           </p>
         </div>
-        {organization.trustCenter?.id &&
-          organization.trustCenter.canCreateAccess && (
-            <Button
-              icon={IconPlusLarge}
-              onClick={() => {
-                inviteForm.reset();
-                dialogRef.current?.open();
-              }}
-            >
-              {__("Add Access")}
-            </Button>
-          )}
+        {organization.trustCenter?.id
+          && organization.trustCenter.canCreateAccess && (
+          <Button
+            icon={IconPlusLarge}
+            onClick={() => {
+              inviteForm.reset();
+              dialogRef.current?.open();
+            }}
+          >
+            {__("Add Access")}
+          </Button>
+        )}
       </div>
 
-      {!organization.trustCenter?.id ? (
-        <Table>
-          <Tbody>
-            <Tr>
-              <Td className="text-center text-txt-tertiary py-8">
-                <Spinner />
-              </Td>
-            </Tr>
-          </Tbody>
-        </Table>
-      ) : accesses.length === 0 ? (
-        <Table>
-          <Tbody>
-            <Tr>
-              <Td className="text-center text-txt-tertiary py-8">
-                {__("No external access granted yet")}
-              </Td>
-            </Tr>
-          </Tbody>
-        </Table>
-      ) : (
-        <>
-          <Table>
-            <Thead>
-              <Tr>
-                <Th>{__("Name")}</Th>
-                <Th>{__("Email")}</Th>
-                <Th>{__("Date")}</Th>
-                <Th className="text-center">{__("Active")}</Th>
-                <Th className="text-center">{__("Access")}</Th>
-                <Th className="text-center">{__("Requests")}</Th>
-                <Th className="text-center">{__("NDA")}</Th>
-                <Th></Th>
-              </Tr>
-            </Thead>
-            <Tbody>
-              {accesses.map((access) => (
-                <TrustCenterAccessItem
-                  key={`${access.id}-${editingAccess?.id === access.id}`}
-                  access={access}
-                  connectionId={trustCenterData?.accesses?.__id}
-                  dialogOpen={editingAccess?.id === access.id}
-                />
-              ))}
-            </Tbody>
-          </Table>
-          {hasNext && (
-            <Button
-              variant="tertiary"
-              onClick={loadMore}
-              disabled={isLoadingNext}
-              className="mt-3 mx-auto"
-              icon={IconChevronDown}
-            >
-              {isLoadingNext && <Spinner />}
-              {__("Show More")}
-            </Button>
-          )}
-        </>
-      )}
+      {!organization.trustCenter?.id
+        ? (
+            <Table>
+              <Tbody>
+                <Tr>
+                  <Td className="text-center text-txt-tertiary py-8">
+                    <Spinner />
+                  </Td>
+                </Tr>
+              </Tbody>
+            </Table>
+          )
+        : accesses.length === 0
+          ? (
+              <Table>
+                <Tbody>
+                  <Tr>
+                    <Td className="text-center text-txt-tertiary py-8">
+                      {__("No external access granted yet")}
+                    </Td>
+                  </Tr>
+                </Tbody>
+              </Table>
+            )
+          : (
+              <>
+                <Table>
+                  <Thead>
+                    <Tr>
+                      <Th>{__("Name")}</Th>
+                      <Th>{__("Email")}</Th>
+                      <Th>{__("Date")}</Th>
+                      <Th className="text-center">{__("Active")}</Th>
+                      <Th className="text-center">{__("Access")}</Th>
+                      <Th className="text-center">{__("Requests")}</Th>
+                      <Th className="text-center">{__("NDA")}</Th>
+                      <Th></Th>
+                    </Tr>
+                  </Thead>
+                  <Tbody>
+                    {accesses.map(access => (
+                      <TrustCenterAccessItem
+                        key={`${access.id}-${editingAccess?.id === access.id}`}
+                        access={access}
+                        connectionId={trustCenterData?.accesses?.__id}
+                        dialogOpen={editingAccess?.id === access.id}
+                      />
+                    ))}
+                  </Tbody>
+                </Table>
+                {hasNext && (
+                  <Button
+                    variant="tertiary"
+                    onClick={loadMore}
+                    disabled={isLoadingNext}
+                    className="mt-3 mx-auto"
+                    icon={IconChevronDown}
+                  >
+                    {isLoadingNext && <Spinner />}
+                    {__("Show More")}
+                  </Button>
+                )}
+              </>
+            )}
 
       <Dialog ref={dialogRef} title={__("Invite External Access")}>
-        <form onSubmit={handleInvite}>
+        <form onSubmit={e => void inviteForm.handleSubmit(handleInvite)(e)}>
           <DialogContent padded className="space-y-6">
             <div>
               <p className="text-txt-secondary text-sm mb-4">
diff --git a/apps/console/src/pages/organizations/trustCenter/TrustCenterAccessTab/TrustCenterDocumentAccessList.tsx b/apps/console/src/pages/organizations/trustCenter/TrustCenterAccessTab/TrustCenterDocumentAccessList.tsx
index f383fc237..861f378cf 100644
--- a/apps/console/src/pages/organizations/trustCenter/TrustCenterAccessTab/TrustCenterDocumentAccessList.tsx
+++ b/apps/console/src/pages/organizations/trustCenter/TrustCenterAccessTab/TrustCenterDocumentAccessList.tsx
@@ -26,105 +26,112 @@ export function TrustCenterDocumentAccessList(props: TrustCenterDocumentAccessLi
           {__("Document Access Permissions")}
         </h4>
         <div className="ml-auto flex items-center gap-2">
-          {showGrantCTA &&
-            <Button
-              type="button"
-              variant="quaternary"
-              onClick={onGrantAll}
-              className="text-xs h-7 min-h-7"
-            >
-              {__("Grant All")}
-            </Button>
-          }
-          {showRejectCTA &&
-            <Button
-              type="button"
-              variant="danger"
-              onClick={onRejectOrRevokeAll}
-              className="text-xs h-7 min-h-7"
-            >
-              {__("Reject/Revoke All")}
-            </Button>
-          }
+          {showGrantCTA
+            && (
+              <Button
+                type="button"
+                variant="quaternary"
+                onClick={onGrantAll}
+                className="text-xs h-7 min-h-7"
+              >
+                {__("Grant All")}
+              </Button>
+            )}
+          {showRejectCTA
+            && (
+              <Button
+                type="button"
+                variant="danger"
+                onClick={onRejectOrRevokeAll}
+                className="text-xs h-7 min-h-7"
+              >
+                {__("Reject/Revoke All")}
+              </Button>
+            )}
         </div>
       </div>
 
-      {documentAccesses.length > 0 ? (
-        <div className="bg-bg-secondary rounded-lg overflow-hidden">
-          <Table>
-            <Thead>
-              <Tr>
-                <Th>{__("Name")}</Th>
-                <Th>{__("Type")}</Th>
-                <Th>{__("Category")}</Th>
-                <Th>
-                  {__("Access")}
-                </Th>
-                <Th></Th>
-              </Tr>
-            </Thead>
-            <Tbody>
-              {documentAccesses.map((docAccess) => {
-                return (
-                  <Tr key={docAccess.id}>
-                    <Td>
-                      <div className="font-medium text-txt-primary">
-                        {docAccess.name}
-                      </div>
-                    </Td>
-                    <Td>
-                      <Badge variant={docAccess.variant}>
-                        {docAccess.type}
-                      </Badge>
-                    </Td>
-                    <Td>
-                      <div className="text-txt-secondary">
-                        {docAccess.category || "-"}
-                      </div>
-                    </Td>
-                    <Td>
-                      {(docAccess.persisted || docAccess.status !== "REQUESTED") &&
-                        <Badge variant={getTrustCenterDocumentAccessStatusBadgeVariant(docAccess.status)}>
-                          {getTrustCenterDocumentAccessStatusLabel(docAccess.status, __)}
-                        </Badge>
-                      }
-                    </Td>
-                    <Td className="flex justify-end gap-2">
-                      {docAccess.status !== "GRANTED" &&
-                        <Button
-                          type="button"
-                          variant="quaternary"
-                          onClick={() => onUpdateStatus(docAccess, "GRANTED")}
-                          className="text-xs h-7 min-h-7"
-                        >
-                          {__("Grant")}
-                        </Button>
-                      }
-                      {docAccess.status !== "REJECTED" && docAccess.status !== "REVOKED" &&
-                        <Button
-                          type="button"
-                          variant="danger"
-                          onClick={() => onUpdateStatus(
-                            docAccess,
-                            docAccess.id && initialStatusByID[docAccess.id] === "GRANTED" ? "REVOKED" : "REJECTED"
-                          )}
-                          className="text-xs h-7 min-h-7"
-                        >
-                          {docAccess.id && initialStatusByID[docAccess.id] === "GRANTED" ? __("Revoke") : __("Reject")}
-                        </Button>
-                      }
-                    </Td>
+      {documentAccesses.length > 0
+        ? (
+            <div className="bg-bg-secondary rounded-lg overflow-hidden">
+              <Table>
+                <Thead>
+                  <Tr>
+                    <Th>{__("Name")}</Th>
+                    <Th>{__("Type")}</Th>
+                    <Th>{__("Category")}</Th>
+                    <Th>
+                      {__("Access")}
+                    </Th>
+                    <Th></Th>
                   </Tr>
-                );
-              })}
-            </Tbody>
-          </Table>
-        </div>
-      ) : (
-        <div className="text-center text-txt-tertiary py-8">
-          {__("No documents available")}
-        </div>
-      )}
+                </Thead>
+                <Tbody>
+                  {documentAccesses.map((docAccess) => {
+                    return (
+                      <Tr key={docAccess.id}>
+                        <Td>
+                          <div className="font-medium text-txt-primary">
+                            {docAccess.name}
+                          </div>
+                        </Td>
+                        <Td>
+                          <Badge variant={docAccess.variant}>
+                            {docAccess.type}
+                          </Badge>
+                        </Td>
+                        <Td>
+                          <div className="text-txt-secondary">
+                            {docAccess.category || "-"}
+                          </div>
+                        </Td>
+                        <Td>
+                          {(docAccess.persisted || docAccess.status !== "REQUESTED")
+                            && (
+                              <Badge variant={getTrustCenterDocumentAccessStatusBadgeVariant(docAccess.status)}>
+                                {getTrustCenterDocumentAccessStatusLabel(docAccess.status, __)}
+                              </Badge>
+                            )}
+                        </Td>
+                        <Td className="flex justify-end gap-2">
+                          {docAccess.status !== "GRANTED"
+                            && (
+                              <Button
+                                type="button"
+                                variant="quaternary"
+                                onClick={() => onUpdateStatus(docAccess, "GRANTED")}
+                                className="text-xs h-7 min-h-7"
+                              >
+                                {__("Grant")}
+                              </Button>
+                            )}
+                          {docAccess.status !== "REJECTED" && docAccess.status !== "REVOKED"
+                            && (
+                              <Button
+                                type="button"
+                                variant="danger"
+                                onClick={() => onUpdateStatus(
+                                  docAccess,
+                                  docAccess.id && initialStatusByID[docAccess.id] === "GRANTED" ? "REVOKED" : "REJECTED",
+                                )}
+                                className="text-xs h-7 min-h-7"
+                              >
+                                {docAccess.id && initialStatusByID[docAccess.id] === "GRANTED" ? __("Revoke") : __("Reject")}
+                              </Button>
+                            )}
+                        </Td>
+                      </Tr>
+                    );
+                  })}
+                </Tbody>
+              </Table>
+            </div>
+          )
+        : (
+            <div className="text-center text-txt-tertiary py-8">
+              {__("No documents available")}
+            </div>
+          )}
     </div>
-  )
+  );
 }
diff --git a/apps/console/src/pages/organizations/trustCenter/TrustCenterAuditsTab.tsx b/apps/console/src/pages/organizations/trustCenter/TrustCenterAuditsTab.tsx
index 8f7f547f9..9cd1dcbf6 100644
--- a/apps/console/src/pages/organizations/trustCenter/TrustCenterAuditsTab.tsx
+++ b/apps/console/src/pages/organizations/trustCenter/TrustCenterAuditsTab.tsx
@@ -10,7 +10,7 @@ export default function TrustCenterAuditsTab() {
   const { organization } = useOutletContext<TrustCenterGraphQuery$data>();
   const [updateAuditVisibility, isUpdatingAudits] = useTrustCenterAuditUpdate();
 
-  const audits = (organization.audits?.edges ?? []).map((edge) => edge.node);
+  const audits = (organization.audits?.edges ?? []).map(edge => edge.node);
 
   return (
     <div className="space-y-4">
diff --git a/apps/console/src/pages/organizations/trustCenter/TrustCenterDocumentsTab.tsx b/apps/console/src/pages/organizations/trustCenter/TrustCenterDocumentsTab.tsx
index 845026ad8..dab09421b 100644
--- a/apps/console/src/pages/organizations/trustCenter/TrustCenterDocumentsTab.tsx
+++ b/apps/console/src/pages/organizations/trustCenter/TrustCenterDocumentsTab.tsx
@@ -8,11 +8,11 @@ import type { TrustCenterGraphQuery$data } from "/__generated__/core/TrustCenter
 export default function TrustCenterDocumentsTab() {
   const { __ } = useTranslate();
   const { organization } = useOutletContext<TrustCenterGraphQuery$data>();
-  const [updateDocumentVisibility, isUpdatingDocuments] =
-    useUpdateDocumentVisibilityMutation();
+  const [updateDocumentVisibility, isUpdatingDocuments]
+    = useUpdateDocumentVisibilityMutation();
 
-  const documents =
-    organization.documents?.edges?.map((edge) => edge.node) || [];
+  const documents
+    = organization.documents?.edges?.map(edge => edge.node) || [];
 
   return (
     <div className="space-y-4">
diff --git a/apps/console/src/pages/organizations/trustCenter/TrustCenterFilesTab.tsx b/apps/console/src/pages/organizations/trustCenter/TrustCenterFilesTab.tsx
index a79fb2173..78e94adc6 100644
--- a/apps/console/src/pages/organizations/trustCenter/TrustCenterFilesTab.tsx
+++ b/apps/console/src/pages/organizations/trustCenter/TrustCenterFilesTab.tsx
@@ -99,8 +99,8 @@ export default function TrustCenterFilesTab() {
     defaultValues: { name: "", category: "" },
   });
 
-  const files =
-    organization.trustCenterFiles?.edges?.map((edge) => edge.node) || [];
+  const files
+    = organization.trustCenterFiles?.edges?.map(edge => edge.node) || [];
 
   const handleFileUpload = useCallback(
     (acceptedFiles: File[]) => {
@@ -222,7 +222,7 @@ export default function TrustCenterFilesTab() {
   ]);
 
   const handleChangeVisibility = useCallback(
-    (params: {
+    async (params: {
       variables: {
         input: {
           id: string;
@@ -230,7 +230,7 @@ export default function TrustCenterFilesTab() {
         };
       };
     }) => {
-      updateFile(params);
+      await updateFile(params);
     },
     [updateFile],
   );
@@ -269,7 +269,7 @@ export default function TrustCenterFilesTab() {
       />
 
       <Dialog ref={createDialogRef} title={__("Add File")}>
-        <form onSubmit={handleCreate}>
+        <form onSubmit={e => void handleCreate(e)}>
           <DialogContent padded className="space-y-4">
             <Dropzone
               description={__("Upload file (max 10MB)")}
@@ -280,7 +280,9 @@ export default function TrustCenterFilesTab() {
             />
             {uploadedFile && (
               <div className="text-sm text-txt-secondary">
-                {__("Selected file")}: {uploadedFile.name}
+                {__("Selected file")}
+                :
+                {uploadedFile.name}
               </div>
             )}
             {createForm.formState.errors.root && (
@@ -304,15 +306,14 @@ export default function TrustCenterFilesTab() {
               label={__("Visibility")}
               type="select"
               value={createForm.watch("trustCenterVisibility")}
-              onValueChange={(value) =>
+              onValueChange={value =>
                 createForm.setValue(
                   "trustCenterVisibility",
                   value as "NONE" | "PRIVATE" | "PUBLIC",
-                )
-              }
+                )}
               error={createForm.formState.errors.trustCenterVisibility?.message}
             >
-              {getTrustCenterVisibilityOptions(__).map((option) => (
+              {getTrustCenterVisibilityOptions(__).map(option => (
                 <Option key={option.value} value={option.value}>
                   <div className="flex items-center justify-between w-full">
                     <Badge variant={option.variant}>{option.label}</Badge>
@@ -334,7 +335,7 @@ export default function TrustCenterFilesTab() {
       </Dialog>
 
       <Dialog ref={editDialogRef} title={__("Edit File")}>
-        <form onSubmit={handleUpdate}>
+        <form onSubmit={e => void handleUpdate(e)}>
           <DialogContent padded className="space-y-4">
             <Field
               label={__("Name")}
@@ -369,7 +370,7 @@ export default function TrustCenterFilesTab() {
         <DialogFooter>
           <Button
             variant="danger"
-            onClick={handleDeleteConfirm}
+            onClick={() => void handleDeleteConfirm()}
             disabled={isDeleting}
           >
             {isDeleting && <Spinner />}
diff --git a/apps/console/src/pages/organizations/trustCenter/TrustCenterOverviewTab.tsx b/apps/console/src/pages/organizations/trustCenter/TrustCenterOverviewTab.tsx
index a189e2608..0b2fc2526 100644
--- a/apps/console/src/pages/organizations/trustCenter/TrustCenterOverviewTab.tsx
+++ b/apps/console/src/pages/organizations/trustCenter/TrustCenterOverviewTab.tsx
@@ -44,7 +44,7 @@ export default function TrustCenterOverviewTab() {
 
     setIsActive(active);
 
-    updateTrustCenter({
+    await updateTrustCenter({
       variables: {
         input: {
           trustCenterId: organization.trustCenter.id,
@@ -133,7 +133,7 @@ export default function TrustCenterOverviewTab() {
             </div>
             <Checkbox
               checked={isActive}
-              onChange={handleToggleActive}
+              onChange={checked => void handleToggleActive(checked)}
               disabled={!canUpdateTrustCenter}
             />
           </div>
@@ -160,8 +160,7 @@ export default function TrustCenterOverviewTab() {
                 <Button
                   variant="secondary"
                   onClick={() =>
-                    window.open(trustCenterUrl, "_blank", "noopener,noreferrer")
-                  }
+                    window.open(trustCenterUrl, "_blank", "noopener,noreferrer")}
                 >
                   {__("View")}
                 </Button>
@@ -193,77 +192,83 @@ export default function TrustCenterOverviewTab() {
           </div>
           <Card padded className="space-y-4">
             <div className="space-y-2">
-              {!organization.trustCenter?.ndaFileName &&
-              organization.trustCenter.canUploadNDA ? (
-                <p className="text-sm text-txt-tertiary">
-                  {__(
-                    "Upload a Non-Disclosure Agreement that visitors must accept before accessing your trust center",
-                  )}
-                </p>
-              ) : (
-                <></>
-              )}
-              {organization.trustCenter?.ndaFileName ? (
-                <div className="space-y-3">
-                  <div className="flex items-center justify-between">
-                    <div className="space-y-1">
-                      <div className="flex items-center gap-2">
-                        <p className="text-sm font-medium">
-                          {organization.trustCenter.ndaFileName ||
-                            __("Non-Disclosure Agreement")}
-                        </p>
-                      </div>
-                      <p className="text-xs text-txt-tertiary">
-                        {__(
-                          "Visitors will need to accept this NDA before accessing your trust center",
-                        )}
-                      </p>
-                    </div>
-                    <div className="flex items-center gap-2">
-                      <Button
-                        type="button"
-                        variant="secondary"
-                        onClick={() => {
-                          if (organization.trustCenter?.ndaFileUrl) {
-                            window.open(
-                              organization.trustCenter.ndaFileUrl,
-                              "_blank",
-                            );
-                          }
-                        }}
-                      >
-                        {__("Download PDF")}
-                      </Button>
-                      {organization.trustCenter?.canDeleteNDA && (
-                        <Button
-                          variant="quaternary"
-                          icon={IconTrashCan}
-                          onClick={handleNDADelete}
-                          disabled={isDeletingNDA}
-                        />
-                      )}
-                    </div>
-                  </div>
-                </div>
-              ) : (
-                <>
-                  {canUpdateTrustCenter ? (
-                    <Dropzone
-                      description={__("Upload PDF files up to 10MB")}
-                      isUploading={isUploadingNDA}
-                      onDrop={handleNDAUpload}
-                      accept={{
-                        "application/pdf": [".pdf"],
-                      }}
-                      maxSize={10}
-                    />
-                  ) : (
+              {!organization.trustCenter?.ndaFileName
+                && organization.trustCenter.canUploadNDA
+                ? (
                     <p className="text-sm text-txt-tertiary">
-                      {__("No NDA file uploaded")}
+                      {__(
+                        "Upload a Non-Disclosure Agreement that visitors must accept before accessing your trust center",
+                      )}
                     </p>
+                  )
+                : (
+                    <></>
+                  )}
+              {organization.trustCenter?.ndaFileName
+                ? (
+                    <div className="space-y-3">
+                      <div className="flex items-center justify-between">
+                        <div className="space-y-1">
+                          <div className="flex items-center gap-2">
+                            <p className="text-sm font-medium">
+                              {organization.trustCenter.ndaFileName
+                                || __("Non-Disclosure Agreement")}
+                            </p>
+                          </div>
+                          <p className="text-xs text-txt-tertiary">
+                            {__(
+                              "Visitors will need to accept this NDA before accessing your trust center",
+                            )}
+                          </p>
+                        </div>
+                        <div className="flex items-center gap-2">
+                          <Button
+                            type="button"
+                            variant="secondary"
+                            onClick={() => {
+                              if (organization.trustCenter?.ndaFileUrl) {
+                                window.open(
+                                  organization.trustCenter.ndaFileUrl,
+                                  "_blank",
+                                );
+                              }
+                            }}
+                          >
+                            {__("Download PDF")}
+                          </Button>
+                          {organization.trustCenter?.canDeleteNDA && (
+                            <Button
+                              variant="quaternary"
+                              icon={IconTrashCan}
+                              onClick={() => void handleNDADelete()}
+                              disabled={isDeletingNDA}
+                            />
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                  )
+                : (
+                    <>
+                      {canUpdateTrustCenter
+                        ? (
+                            <Dropzone
+                              description={__("Upload PDF files up to 10MB")}
+                              isUploading={isUploadingNDA}
+                              onDrop={files => void handleNDAUpload(files)}
+                              accept={{
+                                "application/pdf": [".pdf"],
+                              }}
+                              maxSize={10}
+                            />
+                          )
+                        : (
+                            <p className="text-sm text-txt-tertiary">
+                              {__("No NDA file uploaded")}
+                            </p>
+                          )}
+                    </>
                   )}
-                </>
-              )}
             </div>
           </Card>
         </div>
@@ -276,8 +281,8 @@ export default function TrustCenterOverviewTab() {
             canUpdate={!!organization.trustCenter?.canUpdate}
             organizationId={organization.id!}
             slackConnections={
-              organization.slackConnections?.edges?.map((edge) => edge.node) ??
-              []
+              organization.slackConnections?.edges?.map(edge => edge.node)
+              ?? []
             }
           />
         </Card>
diff --git a/apps/console/src/pages/organizations/trustCenter/TrustCenterVendorsTab.tsx b/apps/console/src/pages/organizations/trustCenter/TrustCenterVendorsTab.tsx
index 2853d5485..761f62fa9 100644
--- a/apps/console/src/pages/organizations/trustCenter/TrustCenterVendorsTab.tsx
+++ b/apps/console/src/pages/organizations/trustCenter/TrustCenterVendorsTab.tsx
@@ -18,10 +18,10 @@ type ContextType = {
 export default function TrustCenterVendorsTab() {
   const { __ } = useTranslate();
   const { organization } = useOutletContext<ContextType>();
-  const [updateVendorVisibility, isUpdatingVendors] =
-    useTrustCenterVendorUpdate();
+  const [updateVendorVisibility, isUpdatingVendors]
+    = useTrustCenterVendorUpdate();
 
-  const vendors = organization.vendors?.edges?.map((edge) => edge.node) || [];
+  const vendors = organization.vendors?.edges?.map(edge => edge.node) || [];
 
   return (
     <div className="space-y-4">
diff --git a/apps/console/src/pages/organizations/vendors/VendorDetailPage.tsx b/apps/console/src/pages/organizations/vendors/VendorDetailPage.tsx
index 3e8d3bf43..bfa6d26d0 100644
--- a/apps/console/src/pages/organizations/vendors/VendorDetailPage.tsx
+++ b/apps/console/src/pages/organizations/vendors/VendorDetailPage.tsx
@@ -52,13 +52,13 @@ export default function VendorDetailPage(props: Props) {
     vendor as VendorComplianceTabFragment$key,
   ).complianceReports.edges.length;
 
-  const vendorsUrl =
-    isSnapshotMode && snapshotId
+  const vendorsUrl
+    = isSnapshotMode && snapshotId
       ? `/organizations/${organizationId}/snapshots/${snapshotId}/vendors`
       : `/organizations/${organizationId}/vendors`;
 
-  const baseVendorUrl =
-    isSnapshotMode && snapshotId
+  const baseVendorUrl
+    = isSnapshotMode && snapshotId
       ? `/organizations/${organizationId}/snapshots/${snapshotId}/vendors/${vendor.id}`
       : `/organizations/${organizationId}/vendors/${vendor.id}`;
 
@@ -90,7 +90,7 @@ export default function VendorDetailPage(props: Props) {
         {!isSnapshotMode && (
           <div className="flex gap-2 items-center">
             {vendor.canAssess && (
-              <ImportAssessmentDialog vendorId={vendor.id!}>
+              <ImportAssessmentDialog vendorId={vendor.id}>
                 <Button icon={IconPageTextLine} variant="secondary">
                   {__("Assessment From Website")}
                 </Button>
diff --git a/apps/console/src/pages/organizations/vendors/VendorsPage.tsx b/apps/console/src/pages/organizations/vendors/VendorsPage.tsx
index d131345c1..572d81ba4 100644
--- a/apps/console/src/pages/organizations/vendors/VendorsPage.tsx
+++ b/apps/console/src/pages/organizations/vendors/VendorsPage.tsx
@@ -56,14 +56,14 @@ export default function VendorsPage(props: Props) {
     data.node as VendorGraphPaginatedFragment$key,
   );
 
-  const vendors = pagination.data.vendors?.edges.map((edge) => edge.node);
+  const vendors = pagination.data.vendors?.edges.map(edge => edge.node);
   const connectionId = pagination.data.vendors.__id;
 
   usePageTitle(__("Vendors"));
 
-  const hasAnyAction =
-    !isSnapshotMode &&
-    vendors.some(({ canUpdate, canDelete }) => canUpdate || canDelete);
+  const hasAnyAction
+    = !isSnapshotMode
+      && vendors.some(({ canUpdate, canDelete }) => canUpdate || canDelete);
 
   return (
     <div className="space-y-6">
@@ -94,7 +94,7 @@ export default function VendorsPage(props: Props) {
           </Tr>
         </Thead>
         <Tbody>
-          {vendors?.map((vendor) => (
+          {vendors?.map(vendor => (
             <VendorRow
               key={vendor.id}
               vendor={vendor}
@@ -126,8 +126,8 @@ function VendorRow({
   const latestAssessment = vendor.riskAssessments?.edges[0]?.node;
   const deleteVendor = useDeleteVendor(vendor, connectionId);
 
-  const vendorUrl =
-    isSnapshotMode && snapshotId
+  const vendorUrl
+    = isSnapshotMode && snapshotId
       ? `/organizations/${organizationId}/snapshots/${snapshotId}/vendors/${vendor.id}/overview`
       : `/organizations/${organizationId}/vendors/${vendor.id}/overview`;
 
diff --git a/apps/console/src/pages/organizations/vendors/dialogs/CreateContactDialog.tsx b/apps/console/src/pages/organizations/vendors/dialogs/CreateContactDialog.tsx
index cf34c4675..a03f302cd 100644
--- a/apps/console/src/pages/organizations/vendors/dialogs/CreateContactDialog.tsx
+++ b/apps/console/src/pages/organizations/vendors/dialogs/CreateContactDialog.tsx
@@ -86,10 +86,10 @@ export function CreateContactDialog({
     },
   );
 
-  const onSubmit = handleSubmit((data) => {
+  const onSubmit = async (data: z.infer<typeof schema>) => {
     const cleanData = cleanFormData(data);
 
-    createContact({
+    await createContact({
       variables: {
         input: {
           vendorId,
@@ -102,7 +102,7 @@ export function CreateContactDialog({
         reset();
       },
     });
-  });
+  };
 
   const dialogRef = useDialogRef();
 
@@ -113,7 +113,7 @@ export function CreateContactDialog({
       trigger={children}
       title={<Breadcrumb items={[__("Contacts"), __("New Contact")]} />}
     >
-      <form onSubmit={onSubmit}>
+      <form onSubmit={e => void handleSubmit(onSubmit)(e)}>
         <DialogContent padded className="space-y-4">
           <Field
             label={__("Name")}
diff --git a/apps/console/src/pages/organizations/vendors/dialogs/CreateRiskAssessmentDialog.tsx b/apps/console/src/pages/organizations/vendors/dialogs/CreateRiskAssessmentDialog.tsx
index 99d3f5271..49397e678 100644
--- a/apps/console/src/pages/organizations/vendors/dialogs/CreateRiskAssessmentDialog.tsx
+++ b/apps/console/src/pages/organizations/vendors/dialogs/CreateRiskAssessmentDialog.tsx
@@ -54,8 +54,8 @@ export function CreateRiskAssessmentDialog({
 }: Props) {
   const { __ } = useTranslate();
 
-  const { register, handleSubmit, formState, reset, control } =
-    useFormWithSchema(schema, {
+  const { register, handleSubmit, formState, reset, control }
+    = useFormWithSchema(schema, {
       defaultValues: {
         dataSensitivity: "LOW",
         businessImpact: "LOW",
@@ -66,13 +66,13 @@ export function CreateRiskAssessmentDialog({
     {
       successMessage: __("Risk Assessment created successfully."),
       errorMessage: __("Failed to create Risk Assessment"),
-    }
+    },
   );
 
-  const onSubmit = handleSubmit((data) => {
+  const onSubmit = async (data: z.infer<typeof schema>) => {
     const nextYear = new Date();
     nextYear.setFullYear(nextYear.getFullYear() + 1);
-    createRiskAssessment({
+    await createRiskAssessment({
       variables: {
         input: {
           ...data,
@@ -80,14 +80,14 @@ export function CreateRiskAssessmentDialog({
           vendorId,
           expiresAt: nextYear.toISOString(),
         },
-        connections: [connection!],
+        connections: [connection],
       },
       onSuccess: () => {
         dialogRef.current?.close();
         reset();
       },
     });
-  });
+  };
 
   const dialogRef = useDialogRef();
 
@@ -96,13 +96,13 @@ export function CreateRiskAssessmentDialog({
       className="max-w-lg"
       ref={dialogRef}
       trigger={children}
-      title={
+      title={(
         <Breadcrumb
           items={[__("Risk Assessments"), __("New Risk Assessment")]}
         />
-      }
+      )}
     >
-      <form onSubmit={onSubmit}>
+      <form onSubmit={e => void handleSubmit(onSubmit)(e)}>
         <DialogContent padded className="space-y-4">
           <ControlledField
             label={__("Data Sensitivity")}
@@ -126,7 +126,7 @@ export function CreateRiskAssessmentDialog({
             type="textarea"
             error={formState.errors.notes?.message}
             help={__(
-              "Add any context or details about this risk assessment that might be helpful for future reference."
+              "Add any context or details about this risk assessment that might be helpful for future reference.",
             )}
           />
         </DialogContent>
diff --git a/apps/console/src/pages/organizations/vendors/dialogs/CreateServiceDialog.tsx b/apps/console/src/pages/organizations/vendors/dialogs/CreateServiceDialog.tsx
index 4d94e2e89..f178b117e 100644
--- a/apps/console/src/pages/organizations/vendors/dialogs/CreateServiceDialog.tsx
+++ b/apps/console/src/pages/organizations/vendors/dialogs/CreateServiceDialog.tsx
@@ -55,20 +55,20 @@ export function CreateServiceDialog({
         name: "",
         description: "",
       },
-    }
+    },
   );
   const [createService, isLoading] = useMutationWithToasts(
     createServiceMutation,
     {
       successMessage: __("Service created successfully."),
       errorMessage: __("Failed to create service"),
-    }
+    },
   );
 
-  const onSubmit = handleSubmit((data) => {
+  const onSubmit = async (data: z.infer<typeof schema>) => {
     const cleanData = cleanFormData(data);
 
-    createService({
+    await createService({
       variables: {
         input: {
           vendorId,
@@ -81,7 +81,7 @@ export function CreateServiceDialog({
         reset();
       },
     });
-  });
+  };
 
   const dialogRef = useDialogRef();
 
@@ -94,7 +94,7 @@ export function CreateServiceDialog({
         <Breadcrumb items={[__("Services"), __("New Service")]} />
       }
     >
-      <form onSubmit={onSubmit}>
+      <form onSubmit={e => void handleSubmit(onSubmit)(e)}>
         <DialogContent padded className="space-y-4">
           <Field
             label={__("Name")}
diff --git a/apps/console/src/pages/organizations/vendors/dialogs/CreateVendorDialog.tsx b/apps/console/src/pages/organizations/vendors/dialogs/CreateVendorDialog.tsx
index 4c75defb7..53c9b2743 100644
--- a/apps/console/src/pages/organizations/vendors/dialogs/CreateVendorDialog.tsx
+++ b/apps/console/src/pages/organizations/vendors/dialogs/CreateVendorDialog.tsx
@@ -30,9 +30,9 @@ export function CreateVendorDialog({
   const { search, vendors, query } = useVendorSearch();
   const [createVendor] = useCreateVendorMutation();
 
-  const onSelect = (vendor: Vendor | string) => {
-    const input =
-      typeof vendor === "string"
+  const onSelect = async (vendor: Vendor | string) => {
+    const input
+      = typeof vendor === "string"
         ? {
             organizationId,
             name: vendor,
@@ -56,7 +56,7 @@ export function CreateVendorDialog({
             statusPageUrl: vendor.statusPageUrl || null,
             termsOfServiceUrl: vendor.termsOfServiceUrl || null,
           };
-    createVendor({
+    await createVendor({
       variables: {
         input,
         connections: [connection],
@@ -73,16 +73,19 @@ export function CreateVendorDialog({
     <Dialog ref={dialogRef} trigger={children} title={__("Add a vendor")}>
       <DialogContent className="p-6">
         <Combobox onSearch={search} placeholder={__("Type vendor's name")}>
-          {vendors.map((vendor) => (
-            <ComboboxItem key={vendor.name} onClick={() => onSelect(vendor)}>
+          {vendors.map(vendor => (
+            <ComboboxItem key={vendor.name} onClick={() => void onSelect(vendor)}>
               <Avatar name={vendor.name} src={faviconUrl(vendor.websiteUrl)} />
               {vendor.name}
             </ComboboxItem>
           ))}
           {query.trim().length >= 2 && (
-            <ComboboxItem onClick={() => onSelect(query.trim())}>
+            <ComboboxItem onClick={() => void onSelect(query.trim())}>
               <IconPlusLarge size={20} />
-              {__("Create a new vendor")} : {query}
+              {__("Create a new vendor")}
+              {" "}
+              :
+              {query}
             </ComboboxItem>
           )}
         </Combobox>
diff --git a/apps/console/src/pages/organizations/vendors/dialogs/DeleteBusinessAssociateAgreementDialog.tsx b/apps/console/src/pages/organizations/vendors/dialogs/DeleteBusinessAssociateAgreementDialog.tsx
index 6c5910bae..faae7b655 100644
--- a/apps/console/src/pages/organizations/vendors/dialogs/DeleteBusinessAssociateAgreementDialog.tsx
+++ b/apps/console/src/pages/organizations/vendors/dialogs/DeleteBusinessAssociateAgreementDialog.tsx
@@ -66,7 +66,7 @@ export function DeleteBusinessAssociateAgreementDialog({
         <p className="text-txt-secondary">
           {sprintf(
             __("Are you sure you want to delete the Business Associate Agreement \"%s\"?"),
-            fileName
+            fileName,
           )}
         </p>
         <p className="text-txt-secondary mt-2">
@@ -77,7 +77,7 @@ export function DeleteBusinessAssociateAgreementDialog({
       <DialogFooter>
         <Button
           variant="danger"
-          onClick={handleDelete}
+          onClick={() => void handleDelete()}
           disabled={isDeleting}
           icon={isDeleting ? Spinner : undefined}
         >
diff --git a/apps/console/src/pages/organizations/vendors/dialogs/DeleteDataPrivacyAgreementDialog.tsx b/apps/console/src/pages/organizations/vendors/dialogs/DeleteDataPrivacyAgreementDialog.tsx
index c03caee2c..11a9f3eb0 100644
--- a/apps/console/src/pages/organizations/vendors/dialogs/DeleteDataPrivacyAgreementDialog.tsx
+++ b/apps/console/src/pages/organizations/vendors/dialogs/DeleteDataPrivacyAgreementDialog.tsx
@@ -66,7 +66,7 @@ export function DeleteDataPrivacyAgreementDialog({
         <p className="text-txt-secondary">
           {sprintf(
             __("Are you sure you want to delete the Data Privacy Agreement \"%s\"?"),
-            fileName
+            fileName,
           )}
         </p>
         <p className="text-txt-secondary mt-2">
@@ -77,7 +77,7 @@ export function DeleteDataPrivacyAgreementDialog({
       <DialogFooter>
         <Button
           variant="danger"
-          onClick={handleDelete}
+          onClick={() => void handleDelete()}
           disabled={isDeleting}
           icon={isDeleting ? Spinner : undefined}
         >
diff --git a/apps/console/src/pages/organizations/vendors/dialogs/EditBusinessAssociateAgreementDialog.tsx b/apps/console/src/pages/organizations/vendors/dialogs/EditBusinessAssociateAgreementDialog.tsx
index 238c2f7ab..74e0038ec 100644
--- a/apps/console/src/pages/organizations/vendors/dialogs/EditBusinessAssociateAgreementDialog.tsx
+++ b/apps/console/src/pages/organizations/vendors/dialogs/EditBusinessAssociateAgreementDialog.tsx
@@ -76,7 +76,7 @@ export function EditBusinessAssociateAgreementDialog({
     errorMessage: __("Failed to update Business Associate Agreement"),
   });
 
-  const onSubmit = handleSubmit(async (data) => {
+  const onSubmit = async (data: z.infer<typeof schema>) => {
     const formatDatetime = (dateString?: string) => {
       if (!dateString) return null;
       return `${dateString}T00:00:00Z`;
@@ -94,7 +94,7 @@ export function EditBusinessAssociateAgreementDialog({
 
     onSuccess?.();
     ref.current?.close();
-  });
+  };
 
   const handleClose = () => {
     reset();
@@ -108,7 +108,7 @@ export function EditBusinessAssociateAgreementDialog({
       className="max-w-lg"
       onClose={handleClose}
     >
-      <form onSubmit={onSubmit}>
+      <form onSubmit={e => void handleSubmit(onSubmit)(e)}>
         <DialogContent padded className="space-y-4">
           <div className="grid grid-cols-2 gap-4">
             <Field label={__("Valid from")}>
diff --git a/apps/console/src/pages/organizations/vendors/dialogs/EditContactDialog.tsx b/apps/console/src/pages/organizations/vendors/dialogs/EditContactDialog.tsx
index be87e6396..ffffd3957 100644
--- a/apps/console/src/pages/organizations/vendors/dialogs/EditContactDialog.tsx
+++ b/apps/console/src/pages/organizations/vendors/dialogs/EditContactDialog.tsx
@@ -74,10 +74,10 @@ export function EditContactDialog({ contactId, contact, onClose }: Props) {
     },
   );
 
-  const onSubmit = handleSubmit((data) => {
+  const onSubmit = async (data: z.infer<typeof schema>) => {
     const cleanData = cleanFormData(data);
 
-    updateContact({
+    await updateContact({
       variables: {
         input: {
           id: contactId,
@@ -88,7 +88,7 @@ export function EditContactDialog({ contactId, contact, onClose }: Props) {
         onClose();
       },
     });
-  });
+  };
 
   const dialogRef = useDialogRef();
 
@@ -103,7 +103,7 @@ export function EditContactDialog({ contactId, contact, onClose }: Props) {
       onClose={onClose}
       title={<Breadcrumb items={[__("Contacts"), __("Edit Contact")]} />}
     >
-      <form onSubmit={onSubmit}>
+      <form onSubmit={e => void handleSubmit(onSubmit)(e)}>
         <DialogContent padded className="space-y-4">
           <Field
             label={__("Name")}
diff --git a/apps/console/src/pages/organizations/vendors/dialogs/EditDataPrivacyAgreementDialog.tsx b/apps/console/src/pages/organizations/vendors/dialogs/EditDataPrivacyAgreementDialog.tsx
index defcab661..4442a061c 100644
--- a/apps/console/src/pages/organizations/vendors/dialogs/EditDataPrivacyAgreementDialog.tsx
+++ b/apps/console/src/pages/organizations/vendors/dialogs/EditDataPrivacyAgreementDialog.tsx
@@ -76,7 +76,7 @@ export function EditDataPrivacyAgreementDialog({
     errorMessage: __("Failed to update Data Privacy Agreement"),
   });
 
-  const onSubmit = handleSubmit(async (data) => {
+  const onSubmit = async (data: z.infer<typeof schema>) => {
     const formatDatetime = (dateString?: string) => {
       if (!dateString) return null;
       return `${dateString}T00:00:00Z`;
@@ -94,7 +94,7 @@ export function EditDataPrivacyAgreementDialog({
 
     onSuccess?.();
     ref.current?.close();
-  });
+  };
 
   const handleClose = () => {
     reset();
@@ -108,7 +108,7 @@ export function EditDataPrivacyAgreementDialog({
       className="max-w-lg"
       onClose={handleClose}
     >
-      <form onSubmit={onSubmit}>
+      <form onSubmit={e => void handleSubmit(onSubmit)(e)}>
         <DialogContent padded className="space-y-4">
           <div className="grid grid-cols-2 gap-4">
             <Field label={__("Valid from")}>
diff --git a/apps/console/src/pages/organizations/vendors/dialogs/EditServiceDialog.tsx b/apps/console/src/pages/organizations/vendors/dialogs/EditServiceDialog.tsx
index 20257c7a0..fa26aac2d 100644
--- a/apps/console/src/pages/organizations/vendors/dialogs/EditServiceDialog.tsx
+++ b/apps/console/src/pages/organizations/vendors/dialogs/EditServiceDialog.tsx
@@ -49,7 +49,7 @@ export function EditServiceDialog({ serviceId, service, onClose }: Props) {
         name: service.name || "",
         description: service.description || "",
       },
-    }
+    },
   );
 
   const [updateService, isLoading] = useMutationWithToasts(
@@ -57,13 +57,13 @@ export function EditServiceDialog({ serviceId, service, onClose }: Props) {
     {
       successMessage: __("Service updated successfully."),
       errorMessage: __("Failed to update service"),
-    }
+    },
   );
 
-  const onSubmit = handleSubmit((data) => {
+  const onSubmit = async (data: z.infer<typeof schema>) => {
     const cleanData = cleanFormData(data);
 
-    updateService({
+    await updateService({
       variables: {
         input: {
           id: serviceId,
@@ -74,7 +74,7 @@ export function EditServiceDialog({ serviceId, service, onClose }: Props) {
         onClose();
       },
     });
-  });
+  };
 
   const dialogRef = useDialogRef();
 
@@ -91,7 +91,7 @@ export function EditServiceDialog({ serviceId, service, onClose }: Props) {
         <Breadcrumb items={[__("Services"), __("Edit Service")]} />
       }
     >
-      <form onSubmit={onSubmit}>
+      <form onSubmit={e => void handleSubmit(onSubmit)(e)}>
         <DialogContent padded className="space-y-4">
           <Field
             label={__("Name")}
diff --git a/apps/console/src/pages/organizations/vendors/dialogs/ImportAssessmentDialog.tsx b/apps/console/src/pages/organizations/vendors/dialogs/ImportAssessmentDialog.tsx
index b6bb8ff0b..c6de30374 100644
--- a/apps/console/src/pages/organizations/vendors/dialogs/ImportAssessmentDialog.tsx
+++ b/apps/console/src/pages/organizations/vendors/dialogs/ImportAssessmentDialog.tsx
@@ -46,18 +46,18 @@ export function ImportAssessmentDialog({ vendorId, children }: Props) {
       defaultValues: {
         url: "",
       },
-    }
+    },
   );
   const [assess, isAssessing] = useMutationWithToasts(
     importAssessmentMutation,
     {
       successMessage: __("Vendor assessed successfully."),
       errorMessage: __("Failed to assess vendor"),
-    }
+    },
   );
 
-  const onSubmit = handleSubmit((data) => {
-    assess({
+  const onSubmit = async (data: z.infer<typeof schema>) => {
+    await assess({
       variables: {
         input: {
           id: vendorId,
@@ -69,7 +69,8 @@ export function ImportAssessmentDialog({ vendorId, children }: Props) {
         reset();
       },
     });
-  });
+  };
+
   return (
     <Dialog
       ref={dialogRef}
@@ -77,7 +78,7 @@ export function ImportAssessmentDialog({ vendorId, children }: Props) {
       title={__("Assessment from website")}
       className="max-w-lg"
     >
-      <form onSubmit={onSubmit}>
+      <form onSubmit={e => void handleSubmit(onSubmit)(e)}>
         <DialogContent padded>
           <Field
             required
diff --git a/apps/console/src/pages/organizations/vendors/dialogs/UploadBusinessAssociateAgreementDialog.tsx b/apps/console/src/pages/organizations/vendors/dialogs/UploadBusinessAssociateAgreementDialog.tsx
index 894e7807a..764a4e7d0 100644
--- a/apps/console/src/pages/organizations/vendors/dialogs/UploadBusinessAssociateAgreementDialog.tsx
+++ b/apps/console/src/pages/organizations/vendors/dialogs/UploadBusinessAssociateAgreementDialog.tsx
@@ -81,7 +81,7 @@ export function UploadBusinessAssociateAgreementDialog({
     }
   };
 
-  const onSubmit = handleSubmit(async (data) => {
+  const onSubmit = async (data: z.infer<typeof schema>) => {
     if (!uploadedFile) {
       return;
     }
@@ -110,7 +110,7 @@ export function UploadBusinessAssociateAgreementDialog({
     setUploadedFile(null);
     onSuccess?.();
     ref.current?.close();
-  });
+  };
 
   const handleClose = () => {
     reset();
@@ -125,54 +125,57 @@ export function UploadBusinessAssociateAgreementDialog({
       className="max-w-lg"
       onClose={handleClose}
     >
-        <form onSubmit={onSubmit}>
-          <DialogContent padded className="space-y-4">
-            <Dropzone
-              description={__("Only PDF files up to 10MB are allowed")}
-              isUploading={isSubmitting}
-              onDrop={handleDrop}
-              accept={{
-                "application/pdf": [".pdf"],
-              }}
-              maxSize={10}
-            />
+      <form onSubmit={e => void handleSubmit(onSubmit)(e)}>
+        <DialogContent padded className="space-y-4">
+          <Dropzone
+            description={__("Only PDF files up to 10MB are allowed")}
+            isUploading={isSubmitting}
+            onDrop={handleDrop}
+            accept={{
+              "application/pdf": [".pdf"],
+            }}
+            maxSize={10}
+          />
 
-            {uploadedFile && (
-              <div className="p-3 bg-tertiary-subtle rounded-lg">
-                <p className="text-sm font-medium">{__("Selected file")}:</p>
-                <p className="text-sm text-txt-secondary">{uploadedFile.name}</p>
-              </div>
-            )}
-
-            <Field
-              {...register("fileName")}
-              label={__("File name")}
-              type="text"
-              required
-              error={errors.fileName?.message}
-              placeholder={__("Business Associate Agreement")}
-            />
-
-            <div className="grid grid-cols-2 gap-4">
-              <Field label={__("Valid from")}>
-                <Input {...register("validFrom")} type="date" />
-              </Field>
-              <Field label={__("Valid until")}>
-                <Input {...register("validUntil")} type="date" />
-              </Field>
+          {uploadedFile && (
+            <div className="p-3 bg-tertiary-subtle rounded-lg">
+              <p className="text-sm font-medium">
+                {__("Selected file")}
+                :
+              </p>
+              <p className="text-sm text-txt-secondary">{uploadedFile.name}</p>
             </div>
-          </DialogContent>
+          )}
 
-          <DialogFooter>
-            <Button
-              type="submit"
-              disabled={isSubmitting || !uploadedFile}
-              icon={isSubmitting ? Spinner : undefined}
-            >
-              {__("Upload")}
-            </Button>
-          </DialogFooter>
-        </form>
-      </Dialog>
-    );
+          <Field
+            {...register("fileName")}
+            label={__("File name")}
+            type="text"
+            required
+            error={errors.fileName?.message}
+            placeholder={__("Business Associate Agreement")}
+          />
+
+          <div className="grid grid-cols-2 gap-4">
+            <Field label={__("Valid from")}>
+              <Input {...register("validFrom")} type="date" />
+            </Field>
+            <Field label={__("Valid until")}>
+              <Input {...register("validUntil")} type="date" />
+            </Field>
+          </div>
+        </DialogContent>
+
+        <DialogFooter>
+          <Button
+            type="submit"
+            disabled={isSubmitting || !uploadedFile}
+            icon={isSubmitting ? Spinner : undefined}
+          >
+            {__("Upload")}
+          </Button>
+        </DialogFooter>
+      </form>
+    </Dialog>
+  );
 }
diff --git a/apps/console/src/pages/organizations/vendors/dialogs/UploadDataPrivacyAgreementDialog.tsx b/apps/console/src/pages/organizations/vendors/dialogs/UploadDataPrivacyAgreementDialog.tsx
index c613d0ae0..6b04b03dd 100644
--- a/apps/console/src/pages/organizations/vendors/dialogs/UploadDataPrivacyAgreementDialog.tsx
+++ b/apps/console/src/pages/organizations/vendors/dialogs/UploadDataPrivacyAgreementDialog.tsx
@@ -81,7 +81,7 @@ export function UploadDataPrivacyAgreementDialog({
     }
   };
 
-  const onSubmit = handleSubmit(async (data) => {
+  const onSubmit = async (data: z.infer<typeof schema>) => {
     if (!uploadedFile) {
       return;
     }
@@ -110,7 +110,7 @@ export function UploadDataPrivacyAgreementDialog({
     setUploadedFile(null);
     onSuccess?.();
     ref.current?.close();
-  });
+  };
 
   const handleClose = () => {
     reset();
@@ -125,54 +125,57 @@ export function UploadDataPrivacyAgreementDialog({
       className="max-w-lg"
       onClose={handleClose}
     >
-        <form onSubmit={onSubmit}>
-          <DialogContent padded className="space-y-4">
-            <Dropzone
-              description={__("Only PDF files up to 10MB are allowed")}
-              isUploading={isSubmitting}
-              onDrop={handleDrop}
-              accept={{
-                "application/pdf": [".pdf"],
-              }}
-              maxSize={10}
-            />
+      <form onSubmit={e => void handleSubmit(onSubmit)(e)}>
+        <DialogContent padded className="space-y-4">
+          <Dropzone
+            description={__("Only PDF files up to 10MB are allowed")}
+            isUploading={isSubmitting}
+            onDrop={handleDrop}
+            accept={{
+              "application/pdf": [".pdf"],
+            }}
+            maxSize={10}
+          />
 
-            {uploadedFile && (
-              <div className="p-3 bg-tertiary-subtle rounded-lg">
-                <p className="text-sm font-medium">{__("Selected file")}:</p>
-                <p className="text-sm text-txt-secondary">{uploadedFile.name}</p>
-              </div>
-            )}
-
-            <Field
-              {...register("fileName")}
-              label={__("File name")}
-              type="text"
-              required
-              error={errors.fileName?.message}
-              placeholder={__("Data Privacy Agreement")}
-            />
-
-            <div className="grid grid-cols-2 gap-4">
-              <Field label={__("Valid from")}>
-                <Input {...register("validFrom")} type="date" />
-              </Field>
-              <Field label={__("Valid until")}>
-                <Input {...register("validUntil")} type="date" />
-              </Field>
+          {uploadedFile && (
+            <div className="p-3 bg-tertiary-subtle rounded-lg">
+              <p className="text-sm font-medium">
+                {__("Selected file")}
+                :
+              </p>
+              <p className="text-sm text-txt-secondary">{uploadedFile.name}</p>
             </div>
-          </DialogContent>
+          )}
 
-          <DialogFooter>
-            <Button
-              type="submit"
-              disabled={isSubmitting || !uploadedFile}
-              icon={isSubmitting ? Spinner : undefined}
-            >
-              {__("Upload")}
-            </Button>
-          </DialogFooter>
-        </form>
-      </Dialog>
-    );
+          <Field
+            {...register("fileName")}
+            label={__("File name")}
+            type="text"
+            required
+            error={errors.fileName?.message}
+            placeholder={__("Data Privacy Agreement")}
+          />
+
+          <div className="grid grid-cols-2 gap-4">
+            <Field label={__("Valid from")}>
+              <Input {...register("validFrom")} type="date" />
+            </Field>
+            <Field label={__("Valid until")}>
+              <Input {...register("validUntil")} type="date" />
+            </Field>
+          </div>
+        </DialogContent>
+
+        <DialogFooter>
+          <Button
+            type="submit"
+            disabled={isSubmitting || !uploadedFile}
+            icon={isSubmitting ? Spinner : undefined}
+          >
+            {__("Upload")}
+          </Button>
+        </DialogFooter>
+      </form>
+    </Dialog>
+  );
 }
diff --git a/apps/console/src/pages/organizations/vendors/tabs/VendorCertificationsTab.tsx b/apps/console/src/pages/organizations/vendors/tabs/VendorCertificationsTab.tsx
index 5fc39ceaa..ff05cd9ca 100644
--- a/apps/console/src/pages/organizations/vendors/tabs/VendorCertificationsTab.tsx
+++ b/apps/console/src/pages/organizations/vendors/tabs/VendorCertificationsTab.tsx
@@ -16,7 +16,7 @@ import {
   certifications,
   objectEntries,
 } from "@probo/helpers";
-import { useRef, useState } from "react";
+import { useState } from "react";
 import clsx from "clsx";
 import type { VendorGraphNodeQuery$data } from "/__generated__/core/VendorGraphNodeQuery.graphql";
 
@@ -35,7 +35,9 @@ export default function VendorCertificationsTab() {
   return (
     <form
       className="space-y-4"
-      onSubmit={!isSnapshotMode && vendor.canUpdate ? handleSubmit : undefined}
+      onSubmit={!isSnapshotMode && vendor.canUpdate
+        ? e => void handleSubmit(e)
+        : undefined}
     >
       <Card padded>
         <Controller
@@ -71,26 +73,26 @@ type CertificationsProps = {
 function Certifications(props: CertificationsProps) {
   const categorizedCertifications = Object.values(certifications).flat();
   const { __ } = useTranslate();
-  const animateBadge = useRef(false);
+  const [animateBadge, setAnimateBadge] = useState(false);
   const categories = objectEntries(certifications)
     .map(
       ([key, value]) =>
-        [key, value.filter((c) => props.value.includes(c))] as const,
+        [key, value.filter(c => props.value.includes(c))] as const,
     )
     .filter(([, certifications]) => certifications.length > 0);
   categories.push([
     "custom",
-    props.value.filter((c) => !categorizedCertifications.includes(c)),
+    props.value.filter(c => !categorizedCertifications.includes(c)),
   ]);
 
   const addCertificate = (name: string) => {
-    animateBadge.current = true;
+    setAnimateBadge(true);
     props.onValueChange([...props.value, name]);
   };
 
   const removeCertificate = (name: string) => {
-    animateBadge.current = true;
-    props.onValueChange(props.value.filter((v) => v !== name));
+    setAnimateBadge(true);
+    props.onValueChange(props.value.filter(v => v !== name));
   };
 
   return (
@@ -101,26 +103,28 @@ function Certifications(props: CertificationsProps) {
             {certificationCategoryLabel(__, key)}
           </div>
           <div className="flex flex-wrap gap-2">
-            {certifications.map((certification) => (
+            {certifications.map(certification => (
               <Badge asChild size="md" key={certification}>
-                {props.readOnly ? (
-                  <span>{certification}</span>
-                ) : (
-                  <button
-                    onClick={() => removeCertificate(certification)}
-                    type="button"
-                    className={clsx(
-                      "hover:bg-subtle-hover cursor-pointer",
-                      animateBadge.current &&
-                        "starting:opacity-0 starting:w-0 w-max transition-all duration-500 starting:bg-accent",
+                {props.readOnly
+                  ? (
+                      <span>{certification}</span>
+                    )
+                  : (
+                      <button
+                        onClick={() => removeCertificate(certification)}
+                        type="button"
+                        className={clsx(
+                          "hover:bg-subtle-hover cursor-pointer",
+                          animateBadge
+                          && "starting:opacity-0 starting:w-0 w-max transition-all duration-500 starting:bg-accent",
+                        )}
+                      >
+                        {certification}
+                        <div className="w-0 overflow-hidden group-hover:w-4 duration-200">
+                          <IconCrossLargeX size={12} />
+                        </div>
+                      </button>
                     )}
-                  >
-                    {certification}
-                    <div className="w-0 overflow-hidden group-hover:w-4 duration-200">
-                      <IconCrossLargeX size={12} />
-                    </div>
-                  </button>
-                )}
               </Badge>
             ))}
           </div>
@@ -129,7 +133,7 @@ function Certifications(props: CertificationsProps) {
       {!props.readOnly && (
         <CertificationInput
           certifications={categorizedCertifications.filter(
-            (c) => !props.value.includes(c),
+            c => !props.value.includes(c),
           )}
           onAdd={addCertificate}
         />
@@ -151,7 +155,7 @@ function CertificationInput({
   const { __ } = useTranslate();
   const [search, setSearch] = useState("");
   const isCustom = !certifications.includes(search.trim());
-  const filteredCertifications = certifications.filter((c) =>
+  const filteredCertifications = certifications.filter(c =>
     c.toLowerCase().includes(search.toLowerCase()),
   );
 
@@ -164,7 +168,7 @@ function CertificationInput({
         onSearch={setSearch}
         placeholder={__("Add a new certification")}
       >
-        {filteredCertifications.map((certification) => (
+        {filteredCertifications.map(certification => (
           <ComboboxItem key={certification} value={certification}>
             {certification}
           </ComboboxItem>
@@ -172,7 +176,10 @@ function CertificationInput({
         {isCustom && search.trim().length >= 2 && (
           <ComboboxItem value={search.trim()}>
             <IconPlusLarge size={20} />
-            {__("Add a custom certification")} : {search}
+            {__("Add a custom certification")}
+            {" "}
+            :
+            {search}
           </ComboboxItem>
         )}
       </Combobox>
diff --git a/apps/console/src/pages/organizations/vendors/tabs/VendorComplianceTab.tsx b/apps/console/src/pages/organizations/vendors/tabs/VendorComplianceTab.tsx
index 97d1d7a26..53bb80664 100644
--- a/apps/console/src/pages/organizations/vendors/tabs/VendorComplianceTab.tsx
+++ b/apps/console/src/pages/organizations/vendors/tabs/VendorComplianceTab.tsx
@@ -104,7 +104,7 @@ export default function VendorComplianceTab() {
     VendorComplianceTabFragment$key
   >(complianceReportsFragment, vendor);
   const connectionId = data.complianceReports.__id;
-  const reports = data.complianceReports.edges.map((edge) => edge.node);
+  const reports = data.complianceReports.edges.map(edge => edge.node);
   const { __ } = useTranslate();
   const { snapshotId } = useParams<{ snapshotId?: string }>();
   const isSnapshotMode = Boolean(snapshotId);
@@ -160,7 +160,7 @@ export default function VendorComplianceTab() {
           </Tr>
         </Thead>
         <Tbody>
-          {reports.map((report) => (
+          {reports.map(report => (
             <ReportRow
               key={report.id}
               reportKey={report}
@@ -206,7 +206,7 @@ function ReportRow(props: ReportRowProps) {
       {
         message: sprintf(
           __(
-            'This will permanently delete the report "%s". This action cannot be undone.',
+            "This will permanently delete the report \"%s\". This action cannot be undone.",
           ),
           report.reportName,
         ),
diff --git a/apps/console/src/pages/organizations/vendors/tabs/VendorContactsTab.tsx b/apps/console/src/pages/organizations/vendors/tabs/VendorContactsTab.tsx
index 9706965a9..c40be1809 100644
--- a/apps/console/src/pages/organizations/vendors/tabs/VendorContactsTab.tsx
+++ b/apps/console/src/pages/organizations/vendors/tabs/VendorContactsTab.tsx
@@ -96,12 +96,12 @@ export default function VendorContactsTab() {
     VendorContactsTabFragment$key
   >(vendorContactsFragment, vendor);
   const connectionId = data.contacts.__id;
-  const contacts = data.contacts.edges.map((edge) => edge.node);
+  const contacts = data.contacts.edges.map(edge => edge.node);
   const { __ } = useTranslate();
   const { snapshotId } = useParams<{ snapshotId?: string }>();
   const isSnapshotMode = Boolean(snapshotId);
-  const [editingContact, setEditingContact] =
-    useState<VendorContactsTabFragment_contact$data | null>(null);
+  const [editingContact, setEditingContact]
+    = useState<VendorContactsTabFragment_contact$data | null>(null);
   const hasAnyAction = contacts.some(
     ({ canUpdate, canDelete }) => canUpdate || canDelete,
   );
@@ -134,7 +134,7 @@ export default function VendorContactsTab() {
           </Tr>
         </Thead>
         <Tbody>
-          {contacts.map((contact) => (
+          {contacts.map(contact => (
             <ContactRow
               key={contact.id}
               contactKey={contact}
@@ -191,7 +191,7 @@ function ContactRow(props: ContactRowProps) {
       {
         message: sprintf(
           __(
-            'This will permanently delete the contact "%s". This action cannot be undone.',
+            "This will permanently delete the contact \"%s\". This action cannot be undone.",
           ),
           contact.fullName || contact.email || __("Unnamed contact"),
         ),
@@ -203,28 +203,32 @@ function ContactRow(props: ContactRowProps) {
     <Tr>
       <Td>{contact.fullName || __("—")}</Td>
       <Td>
-        {contact.email ? (
-          <a
-            href={`mailto:${contact.email}`}
-            className="text-primary-600 hover:text-primary-800"
-          >
-            {contact.email}
-          </a>
-        ) : (
-          __("—")
-        )}
+        {contact.email
+          ? (
+              <a
+                href={`mailto:${contact.email}`}
+                className="text-primary-600 hover:text-primary-800"
+              >
+                {contact.email}
+              </a>
+            )
+          : (
+              __("—")
+            )}
       </Td>
       <Td>
-        {contact.phone ? (
-          <a
-            href={`tel:${contact.phone}`}
-            className="text-primary-600 hover:text-primary-800"
-          >
-            {contact.phone}
-          </a>
-        ) : (
-          __("—")
-        )}
+        {contact.phone
+          ? (
+              <a
+                href={`tel:${contact.phone}`}
+                className="text-primary-600 hover:text-primary-800"
+              >
+                {contact.phone}
+              </a>
+            )
+          : (
+              __("—")
+            )}
       </Td>
       <Td>{contact.role || __("—")}</Td>
       {!props.isSnapshotMode && hasAnyAction && (
diff --git a/apps/console/src/pages/organizations/vendors/tabs/VendorOverviewTab.tsx b/apps/console/src/pages/organizations/vendors/tabs/VendorOverviewTab.tsx
index 0024cb2f9..9d95403d5 100644
--- a/apps/console/src/pages/organizations/vendors/tabs/VendorOverviewTab.tsx
+++ b/apps/console/src/pages/organizations/vendors/tabs/VendorOverviewTab.tsx
@@ -108,15 +108,15 @@ export default function VendorOverviewTab() {
     formState: { errors, isSubmitting },
   } = useVendorForm(vendor);
 
-  const vendorWithBAA =
-    useFragment<VendorOverviewTabBusinessAssociateAgreementFragment$key>(
+  const vendorWithBAA
+    = useFragment<VendorOverviewTabBusinessAssociateAgreementFragment$key>(
       vendorBusinessAssociateAgreementFragment,
       vendor,
     );
   const businessAssociateAgreement = vendorWithBAA.businessAssociateAgreement;
 
-  const vendorWithDPA =
-    useFragment<VendorOverviewTabDataPrivacyAgreementFragment$key>(
+  const vendorWithDPA
+    = useFragment<VendorOverviewTabDataPrivacyAgreementFragment$key>(
       vendorDataPrivacyAgreementFragment,
       vendor,
     );
@@ -148,7 +148,9 @@ export default function VendorOverviewTab() {
 
   return (
     <form
-      onSubmit={isSnapshotMode || !vendor.canUpdate ? undefined : handleSubmit}
+      onSubmit={isSnapshotMode || !vendor.canUpdate
+        ? undefined
+        : e => void handleSubmit(e)}
       className="space-y-12"
     >
       {/* Vendor Details */}
@@ -178,7 +180,7 @@ export default function VendorOverviewTab() {
             error={errors.category?.message}
             disabled={isFormDisabled}
           >
-            {vendorCategories.map((category) => (
+            {vendorCategories.map(category => (
               <Option key={category.value} value={category.value}>
                 {category.label}
               </Option>
@@ -248,7 +250,7 @@ export default function VendorOverviewTab() {
       <div className="space-y-4 mb-4">
         <h2 className="text-base font-medium">{__("Links")}</h2>
         <Card className="divide-y divide-border-low">
-          {urls.map((url) => (
+          {urls.map(url => (
             <div
               key={url.name}
               className="grid grid-cols-2 items-center divide-x divide-border-low"
@@ -288,67 +290,68 @@ export default function VendorOverviewTab() {
                   ? businessAssociateAgreement.fileName
                   : __("No business associate agreement available")}
               </p>
-              {(businessAssociateAgreement?.validFrom ||
-                businessAssociateAgreement?.validUntil) && (
+              {(businessAssociateAgreement?.validFrom
+                || businessAssociateAgreement?.validUntil) && (
                 <p className="text-xs text-txt-secondary mt-1">
                   {__("Valid")}
-                  {businessAssociateAgreement.validFrom &&
-                    ` ${__("from")} ${formatDate(businessAssociateAgreement.validFrom)}`}
-                  {businessAssociateAgreement.validUntil &&
-                    ` ${__("until")} ${formatDate(businessAssociateAgreement.validUntil)}`}
+                  {businessAssociateAgreement.validFrom
+                    && ` ${__("from")} ${formatDate(businessAssociateAgreement.validFrom)}`}
+                  {businessAssociateAgreement.validUntil
+                    && ` ${__("until")} ${formatDate(businessAssociateAgreement.validUntil)}`}
                 </p>
               )}
             </div>
             <div className="flex items-center gap-2">
-              {businessAssociateAgreement ? (
-                <>
-                  <Button
-                    type="button"
-                    variant="secondary"
-                    onClick={() =>
-                      downloadFile(
-                        businessAssociateAgreement.fileUrl,
-                        businessAssociateAgreement.fileName,
-                      )
-                    }
-                  >
-                    {__("Download PDF")}
-                  </Button>
-                  {!isSnapshotMode && businessAssociateAgreement.canUpdate && (
-                    <EditBusinessAssociateAgreementDialog
-                      vendorId={vendor.id}
-                      agreement={{
-                        validFrom: businessAssociateAgreement.validFrom,
-                        validUntil: businessAssociateAgreement.validUntil,
-                      }}
-                      onSuccess={() => window.location.reload()}
-                    >
-                      <Button variant="quaternary" icon={IconPencil} />
-                    </EditBusinessAssociateAgreementDialog>
+              {businessAssociateAgreement
+                ? (
+                    <>
+                      <Button
+                        type="button"
+                        variant="secondary"
+                        onClick={() =>
+                          downloadFile(
+                            businessAssociateAgreement.fileUrl,
+                            businessAssociateAgreement.fileName,
+                          )}
+                      >
+                        {__("Download PDF")}
+                      </Button>
+                      {!isSnapshotMode && businessAssociateAgreement.canUpdate && (
+                        <EditBusinessAssociateAgreementDialog
+                          vendorId={vendor.id}
+                          agreement={{
+                            validFrom: businessAssociateAgreement.validFrom,
+                            validUntil: businessAssociateAgreement.validUntil,
+                          }}
+                          onSuccess={() => window.location.reload()}
+                        >
+                          <Button variant="quaternary" icon={IconPencil} />
+                        </EditBusinessAssociateAgreementDialog>
+                      )}
+                      {!isSnapshotMode && businessAssociateAgreement.canDelete && (
+                        <DeleteBusinessAssociateAgreementDialog
+                          vendorId={vendor.id}
+                          fileName={businessAssociateAgreement.fileName}
+                          onSuccess={() => window.location.reload()}
+                        >
+                          <Button variant="quaternary" icon={IconTrashCan} />
+                        </DeleteBusinessAssociateAgreementDialog>
+                      )}
+                    </>
+                  )
+                : (
+                    !isSnapshotMode
+                    && vendor.canUploadBAA && (
+                      <UploadBusinessAssociateAgreementDialog
+                        vendorId={vendor.id}
+                        onSuccess={() => window.location.reload()}
+                      >
+                        <Button variant="secondary" icon={IconPlusLarge}>
+                          {__("Upload")}
+                        </Button>
+                      </UploadBusinessAssociateAgreementDialog>
+                    )
                   )}
-                  {!isSnapshotMode && businessAssociateAgreement.canDelete && (
-                    <DeleteBusinessAssociateAgreementDialog
-                      vendorId={vendor.id}
-                      fileName={businessAssociateAgreement.fileName}
-                      onSuccess={() => window.location.reload()}
-                    >
-                      <Button variant="quaternary" icon={IconTrashCan} />
-                    </DeleteBusinessAssociateAgreementDialog>
-                  )}
-                </>
-              ) : (
-                !isSnapshotMode &&
-                vendor.canUploadBAA && (
-                  <UploadBusinessAssociateAgreementDialog
-                    vendorId={vendor.id}
-                    onSuccess={() => window.location.reload()}
-                  >
-                    <Button variant="secondary" icon={IconPlusLarge}>
-                      {__("Upload")}
-                    </Button>
-                  </UploadBusinessAssociateAgreementDialog>
-                )
-              )}
             </div>
           </div>
 
@@ -362,67 +365,68 @@ export default function VendorOverviewTab() {
                   ? dataPrivacyAgreement.fileName
                   : __("No data privacy agreement available")}
               </p>
-              {(dataPrivacyAgreement?.validFrom ||
-                dataPrivacyAgreement?.validUntil) && (
+              {(dataPrivacyAgreement?.validFrom
+                || dataPrivacyAgreement?.validUntil) && (
                 <p className="text-xs text-txt-secondary mt-1">
                   {__("Valid")}
-                  {dataPrivacyAgreement.validFrom &&
-                    ` ${__("from")} ${formatDate(dataPrivacyAgreement.validFrom)}`}
-                  {dataPrivacyAgreement.validUntil &&
-                    ` ${__("until")} ${formatDate(dataPrivacyAgreement.validUntil)}`}
+                  {dataPrivacyAgreement.validFrom
+                    && ` ${__("from")} ${formatDate(dataPrivacyAgreement.validFrom)}`}
+                  {dataPrivacyAgreement.validUntil
+                    && ` ${__("until")} ${formatDate(dataPrivacyAgreement.validUntil)}`}
                 </p>
               )}
             </div>
             <div className="flex items-center gap-2">
-              {dataPrivacyAgreement ? (
-                <>
-                  <Button
-                    type="button"
-                    variant="secondary"
-                    onClick={() =>
-                      downloadFile(
-                        dataPrivacyAgreement.fileUrl,
-                        dataPrivacyAgreement.fileName,
-                      )
-                    }
-                  >
-                    {__("Download PDF")}
-                  </Button>
-                  {!isSnapshotMode && dataPrivacyAgreement.canUpdate && (
-                    <EditDataPrivacyAgreementDialog
-                      vendorId={vendor.id}
-                      agreement={{
-                        validFrom: dataPrivacyAgreement.validFrom,
-                        validUntil: dataPrivacyAgreement.validUntil,
-                      }}
-                      onSuccess={() => window.location.reload()}
-                    >
-                      <Button variant="quaternary" icon={IconPencil} />
-                    </EditDataPrivacyAgreementDialog>
+              {dataPrivacyAgreement
+                ? (
+                    <>
+                      <Button
+                        type="button"
+                        variant="secondary"
+                        onClick={() =>
+                          downloadFile(
+                            dataPrivacyAgreement.fileUrl,
+                            dataPrivacyAgreement.fileName,
+                          )}
+                      >
+                        {__("Download PDF")}
+                      </Button>
+                      {!isSnapshotMode && dataPrivacyAgreement.canUpdate && (
+                        <EditDataPrivacyAgreementDialog
+                          vendorId={vendor.id}
+                          agreement={{
+                            validFrom: dataPrivacyAgreement.validFrom,
+                            validUntil: dataPrivacyAgreement.validUntil,
+                          }}
+                          onSuccess={() => window.location.reload()}
+                        >
+                          <Button variant="quaternary" icon={IconPencil} />
+                        </EditDataPrivacyAgreementDialog>
+                      )}
+                      {!isSnapshotMode && dataPrivacyAgreement.canDelete && (
+                        <DeleteDataPrivacyAgreementDialog
+                          vendorId={vendor.id}
+                          fileName={dataPrivacyAgreement.fileName}
+                          onSuccess={() => window.location.reload()}
+                        >
+                          <Button variant="quaternary" icon={IconTrashCan} />
+                        </DeleteDataPrivacyAgreementDialog>
+                      )}
+                    </>
+                  )
+                : (
+                    !isSnapshotMode
+                    && vendor.canUploadDPA && (
+                      <UploadDataPrivacyAgreementDialog
+                        vendorId={vendor.id}
+                        onSuccess={() => window.location.reload()}
+                      >
+                        <Button variant="secondary" icon={IconPlusLarge}>
+                          {__("Upload")}
+                        </Button>
+                      </UploadDataPrivacyAgreementDialog>
+                    )
                   )}
-                  {!isSnapshotMode && dataPrivacyAgreement.canDelete && (
-                    <DeleteDataPrivacyAgreementDialog
-                      vendorId={vendor.id}
-                      fileName={dataPrivacyAgreement.fileName}
-                      onSuccess={() => window.location.reload()}
-                    >
-                      <Button variant="quaternary" icon={IconTrashCan} />
-                    </DeleteDataPrivacyAgreementDialog>
-                  )}
-                </>
-              ) : (
-                !isSnapshotMode &&
-                vendor.canUploadDPA && (
-                  <UploadDataPrivacyAgreementDialog
-                    vendorId={vendor.id}
-                    onSuccess={() => window.location.reload()}
-                  >
-                    <Button variant="secondary" icon={IconPlusLarge}>
-                      {__("Upload")}
-                    </Button>
-                  </UploadDataPrivacyAgreementDialog>
-                )
-              )}
             </div>
           </div>
         </Card>
diff --git a/apps/console/src/pages/organizations/vendors/tabs/VendorRiskAssessmentTab.tsx b/apps/console/src/pages/organizations/vendors/tabs/VendorRiskAssessmentTab.tsx
index 334b2acd8..7c6037bea 100644
--- a/apps/console/src/pages/organizations/vendors/tabs/VendorRiskAssessmentTab.tsx
+++ b/apps/console/src/pages/organizations/vendors/tabs/VendorRiskAssessmentTab.tsx
@@ -78,7 +78,7 @@ export default function VendorRiskAssessmentTab() {
     VendorRiskAssessmentTabQuery,
     VendorRiskAssessmentTabFragment$key
   >(riskAssessmentsFragment, vendor);
-  const assessments = data.riskAssessments.edges.map((edge) => edge.node);
+  const assessments = data.riskAssessments.edges.map(edge => edge.node);
   const { __ } = useTranslate();
   const { snapshotId } = useParams<{ snapshotId?: string }>();
   const isSnapshotMode = Boolean(snapshotId);
@@ -130,16 +130,15 @@ export default function VendorRiskAssessmentTab() {
                 </TrButton>
               </CreateRiskAssessmentDialog>
             )}
-            {assessments.map((assessment) => (
+            {assessments.map(assessment => (
               <AssessmentRow
                 key={assessment.id}
                 assessmentKey={assessment}
                 isExpanded={expanded === assessment.id}
                 onClick={() =>
-                  setExpanded((prev) =>
+                  setExpanded(prev =>
                     prev === assessment.id ? null : assessment.id,
-                  )
-                }
+                  )}
               />
             ))}
           </Tbody>
@@ -157,8 +156,8 @@ type AssessmentRowProps = {
 
 function AssessmentRow(props: AssessmentRowProps) {
   const { __ } = useTranslate();
-  const assessment =
-    useFragment<VendorRiskAssessmentTabFragment_assessment$key>(
+  const assessment
+    = useFragment<VendorRiskAssessmentTabFragment_assessment$key>(
       riskAssessmentFragment,
       props.assessmentKey,
     );
@@ -197,7 +196,10 @@ function AssessmentRow(props: AssessmentRowProps) {
         <Tr className={clsx("border-none", isExpired && "opacity-50")}>
           <Td colSpan={4}>
             <div className="space-y-2">
-              <div>{__("Notes")}:</div>
+              <div>
+                {__("Notes")}
+                :
+              </div>
               <p className="text-txt-secondary">{assessment.notes}</p>
             </div>
           </Td>
diff --git a/apps/console/src/pages/organizations/vendors/tabs/VendorServicesTab.tsx b/apps/console/src/pages/organizations/vendors/tabs/VendorServicesTab.tsx
index 5c0cef93b..adb483bf3 100644
--- a/apps/console/src/pages/organizations/vendors/tabs/VendorServicesTab.tsx
+++ b/apps/console/src/pages/organizations/vendors/tabs/VendorServicesTab.tsx
@@ -94,12 +94,12 @@ export default function VendorServicesTab() {
     VendorServicesTabFragment$key
   >(vendorServicesFragment, vendor);
   const connectionId = data.services.__id;
-  const services = data.services.edges.map((edge) => edge.node);
+  const services = data.services.edges.map(edge => edge.node);
   const { __ } = useTranslate();
   const { snapshotId } = useParams<{ snapshotId?: string }>();
   const isSnapshotMode = Boolean(snapshotId);
-  const [editingService, setEditingService] =
-    useState<VendorServicesTabFragment_service$data | null>(null);
+  const [editingService, setEditingService]
+    = useState<VendorServicesTabFragment_service$data | null>(null);
   const hasAnyAction = services.some(
     ({ canUpdate, canDelete }) => canUpdate || canDelete,
   );
@@ -130,7 +130,7 @@ export default function VendorServicesTab() {
           </Tr>
         </Thead>
         <Tbody>
-          {services.map((service) => (
+          {services.map(service => (
             <ServiceRow
               key={service.id}
               serviceKey={service}
@@ -187,7 +187,7 @@ function ServiceRow(props: ServiceRowProps) {
       {
         message: sprintf(
           __(
-            'This will permanently delete the service "%s". This action cannot be undone.',
+            "This will permanently delete the service \"%s\". This action cannot be undone.",
           ),
           service.name,
         ),
diff --git a/apps/console/src/routes.tsx b/apps/console/src/routes.tsx
index 7f57cfff6..24e505402 100644
--- a/apps/console/src/routes.tsx
+++ b/apps/console/src/routes.tsx
@@ -56,7 +56,7 @@ function ErrorBoundary({ error: propsError }: { error?: string }) {
     return <PageError error="FORBIDDEN" />;
   }
 
-  return <PageError error={error?.toString()} />;
+  return <PageError error={error instanceof Error ? error.message : ""} />;
 }
 
 const routes = [
@@ -133,7 +133,7 @@ const routes = [
               },
             ],
           },
-        ]
+        ],
       },
     ],
   },
@@ -200,6 +200,7 @@ const routes = [
           {
             index: true,
             loader: () => {
+              // eslint-disable-next-line
               throw redirect("general");
             },
           },
diff --git a/apps/console/src/routes/continualImprovementRoutes.ts b/apps/console/src/routes/continualImprovementRoutes.ts
index 6764dc0ff..779d0f6bd 100644
--- a/apps/console/src/routes/continualImprovementRoutes.ts
+++ b/apps/console/src/routes/continualImprovementRoutes.ts
@@ -63,7 +63,7 @@ export const continualImprovementRoutes = [
         coreEnvironment,
         continualImprovementNodeQuery,
         {
-          continualImprovementId: improvementId!,
+          continualImprovementId: improvementId,
         },
       ),
     ),
@@ -82,7 +82,7 @@ export const continualImprovementRoutes = [
         coreEnvironment,
         continualImprovementNodeQuery,
         {
-          continualImprovementId: improvementId!,
+          continualImprovementId: improvementId,
         },
       ),
     ),
diff --git a/apps/console/src/routes/documentsRoutes.ts b/apps/console/src/routes/documentsRoutes.ts
index 77bcee5b6..1bc8e818b 100644
--- a/apps/console/src/routes/documentsRoutes.ts
+++ b/apps/console/src/routes/documentsRoutes.ts
@@ -26,6 +26,7 @@ const documentTabs = (prefix: string) => {
         const redirectPath = versionId
           ? `${basePath}/versions/${versionId}/description`
           : `${basePath}/description`;
+        // eslint-disable-next-line
         throw redirect(redirectPath);
       },
       Component: Fragment,
@@ -63,7 +64,7 @@ export const documentsRoutes = [
     Fallback: PageSkeleton,
     loader: loaderFromQueryLoader(({ organizationId }) =>
       loadQuery<DocumentGraphListQuery>(coreEnvironment, documentsQuery, {
-        organizationId: organizationId!,
+        organizationId: organizationId,
       }),
     ),
     Component: withQueryRef(
@@ -75,7 +76,7 @@ export const documentsRoutes = [
     Fallback: PageSkeleton,
     loader: loaderFromQueryLoader(({ documentId }) =>
       loadQuery<DocumentGraphNodeQuery>(coreEnvironment, documentNodeQuery, {
-        documentId: documentId!,
+        documentId: documentId,
       }),
     ),
     Component: withQueryRef(
diff --git a/apps/console/src/routes/frameworkRoutes.ts b/apps/console/src/routes/frameworkRoutes.ts
index fc479aa93..8a9a80541 100644
--- a/apps/console/src/routes/frameworkRoutes.ts
+++ b/apps/console/src/routes/frameworkRoutes.ts
@@ -24,7 +24,7 @@ export const frameworkRoutes = [
     Fallback: PageSkeleton,
     loader: loaderFromQueryLoader(({ organizationId }) =>
       loadQuery<FrameworkGraphListQuery>(coreEnvironment, frameworksQuery, {
-        organizationId: organizationId!,
+        organizationId: organizationId,
       }),
     ),
     Component: withQueryRef(
@@ -36,7 +36,7 @@ export const frameworkRoutes = [
     Fallback: PageSkeleton,
     loader: loaderFromQueryLoader(({ frameworkId }) =>
       loadQuery<FrameworkGraphNodeQuery>(coreEnvironment, frameworkNodeQuery, {
-        frameworkId: frameworkId!,
+        frameworkId: frameworkId,
       }),
     ),
     Component: withQueryRef(
@@ -54,7 +54,7 @@ export const frameworkRoutes = [
           loadQuery<FrameworkGraphControlNodeQuery>(
             coreEnvironment,
             frameworkControlNodeQuery,
-            { controlId: controlId! },
+            { controlId: controlId },
           ),
         ),
         Component: withQueryRef(
diff --git a/apps/console/src/routes/measureRoutes.ts b/apps/console/src/routes/measureRoutes.ts
index 283ede5eb..98965a515 100644
--- a/apps/console/src/routes/measureRoutes.ts
+++ b/apps/console/src/routes/measureRoutes.ts
@@ -20,7 +20,7 @@ export const measureRoutes = [
     Fallback: PageSkeleton,
     loader: loaderFromQueryLoader(({ organizationId }) =>
       loadQuery<MeasureGraphListQuery>(coreEnvironment, measuresQuery, {
-        organizationId: organizationId!,
+        organizationId: organizationId,
       }),
     ),
     Component: withQueryRef(
@@ -38,7 +38,7 @@ export const measureRoutes = [
     Fallback: PageSkeleton,
     loader: loaderFromQueryLoader(({ measureId }) =>
       loadQuery<MeasureGraphNodeQuery>(coreEnvironment, measureNodeQuery, {
-        measureId: measureId!,
+        measureId: measureId,
       }),
     ),
     Component: withQueryRef(
@@ -48,6 +48,7 @@ export const measureRoutes = [
       {
         path: "",
         loader: () => {
+          // eslint-disable-next-line
           throw redirect("evidences");
         },
         Component: Fragment,
diff --git a/apps/console/src/routes/meetingsRoutes.ts b/apps/console/src/routes/meetingsRoutes.ts
index 4f25b978c..91df52386 100644
--- a/apps/console/src/routes/meetingsRoutes.ts
+++ b/apps/console/src/routes/meetingsRoutes.ts
@@ -24,6 +24,7 @@ const meetingTabs = (prefix: string) => {
       }: LoaderFunctionArgs) => {
         const basePath = `/organizations/${organizationId}/meetings/${meetingId}`;
         const redirectPath = `${basePath}/minutes`;
+        // eslint-disable-next-line
         throw redirect(redirectPath);
       },
       Component: Fragment,
diff --git a/apps/console/src/routes/peopleRoutes.ts b/apps/console/src/routes/peopleRoutes.ts
index eaf2456ef..9cb8d23a4 100644
--- a/apps/console/src/routes/peopleRoutes.ts
+++ b/apps/console/src/routes/peopleRoutes.ts
@@ -23,7 +23,7 @@ export const peopleRoutes = [
       loadQuery<PeopleGraphPaginatedQuery>(
         coreEnvironment,
         paginatedPeopleQuery,
-        { organizationId: organizationId! },
+        { organizationId: organizationId },
       ),
     ),
     Component: withQueryRef(
@@ -35,7 +35,7 @@ export const peopleRoutes = [
     Fallback: PageSkeleton,
     loader: loaderFromQueryLoader(({ peopleId }) =>
       loadQuery<PeopleGraphNodeQuery>(coreEnvironment, peopleNodeQuery, {
-        peopleId: peopleId!,
+        peopleId: peopleId,
       }),
     ),
     Component: withQueryRef(
diff --git a/apps/console/src/routes/processingActivityRoutes.ts b/apps/console/src/routes/processingActivityRoutes.ts
index 045aa4c1e..3f0cad802 100644
--- a/apps/console/src/routes/processingActivityRoutes.ts
+++ b/apps/console/src/routes/processingActivityRoutes.ts
@@ -23,7 +23,7 @@ export const processingActivityRoutes = [
         coreEnvironment,
         processingActivitiesQuery,
         {
-          organizationId: organizationId!,
+          organizationId: organizationId,
           snapshotId: null,
         },
       ),
@@ -43,7 +43,7 @@ export const processingActivityRoutes = [
         coreEnvironment,
         processingActivitiesQuery,
         {
-          organizationId: organizationId!,
+          organizationId: organizationId,
           snapshotId,
         },
       ),
@@ -63,7 +63,7 @@ export const processingActivityRoutes = [
         coreEnvironment,
         processingActivityNodeQuery,
         {
-          processingActivityId: activityId!,
+          processingActivityId: activityId,
         },
       ),
     ),
@@ -82,7 +82,7 @@ export const processingActivityRoutes = [
         coreEnvironment,
         processingActivityNodeQuery,
         {
-          processingActivityId: activityId!,
+          processingActivityId: activityId,
         },
       ),
     ),
diff --git a/apps/console/src/routes/rightsRequestRoutes.ts b/apps/console/src/routes/rightsRequestRoutes.ts
index f801da0f7..683a7ce35 100644
--- a/apps/console/src/routes/rightsRequestRoutes.ts
+++ b/apps/console/src/routes/rightsRequestRoutes.ts
@@ -41,7 +41,7 @@ export const rightsRequestRoutes = [
         coreEnvironment,
         rightsRequestNodeQuery,
         {
-          rightsRequestId: requestId!,
+          rightsRequestId: requestId,
         },
       ),
     ),
diff --git a/apps/console/src/routes/riskRoutes.ts b/apps/console/src/routes/riskRoutes.ts
index 12b4f1613..436a765d0 100644
--- a/apps/console/src/routes/riskRoutes.ts
+++ b/apps/console/src/routes/riskRoutes.ts
@@ -21,7 +21,7 @@ export const riskRoutes = [
     Fallback: RisksPageSkeleton,
     loader: loaderFromQueryLoader(({ organizationId }) =>
       loadQuery<RiskGraphListQuery>(coreEnvironment, risksQuery, {
-        organizationId: organizationId!,
+        organizationId: organizationId,
         snapshotId: null,
       }),
     ),
@@ -34,8 +34,8 @@ export const riskRoutes = [
     Fallback: RisksPageSkeleton,
     loader: loaderFromQueryLoader(({ organizationId, snapshotId }) =>
       loadQuery<RiskGraphListQuery>(coreEnvironment, risksQuery, {
-        organizationId: organizationId!,
-        snapshotId: snapshotId!,
+        organizationId: organizationId,
+        snapshotId: snapshotId,
       }),
     ),
     Component: withQueryRef(
@@ -47,7 +47,7 @@ export const riskRoutes = [
     Fallback: PageSkeleton,
     loader: loaderFromQueryLoader(({ riskId }) =>
       loadQuery<RiskGraphNodeQuery>(coreEnvironment, riskNodeQuery, {
-        riskId: riskId!,
+        riskId: riskId,
       }),
     ),
     Component: withQueryRef(
@@ -57,6 +57,7 @@ export const riskRoutes = [
       {
         path: "",
         loader: () => {
+          // eslint-disable-next-line
           throw redirect("overview");
         },
         Component: Fragment,
@@ -104,7 +105,7 @@ export const riskRoutes = [
     Fallback: PageSkeleton,
     loader: loaderFromQueryLoader(({ riskId }) =>
       loadQuery<RiskGraphNodeQuery>(coreEnvironment, riskNodeQuery, {
-        riskId: riskId!,
+        riskId: riskId,
       }),
     ),
     Component: withQueryRef(
@@ -114,6 +115,7 @@ export const riskRoutes = [
       {
         path: "",
         loader: () => {
+          // eslint-disable-next-line
           throw redirect("overview");
         },
         Component: Fragment,
diff --git a/apps/console/src/routes/statesOfApplicabilityRoutes.ts b/apps/console/src/routes/statesOfApplicabilityRoutes.ts
index 333ed5b09..a9a0df1b7 100644
--- a/apps/console/src/routes/statesOfApplicabilityRoutes.ts
+++ b/apps/console/src/routes/statesOfApplicabilityRoutes.ts
@@ -18,7 +18,7 @@ export const statesOfApplicabilityRoutes = [
       loadQuery<StateOfApplicabilityGraphPaginatedQuery>(
         coreEnvironment,
         paginatedStateOfApplicabilityQuery,
-        { organizationId: organizationId! },
+        { organizationId: organizationId },
       ),
     ),
     Component: withQueryRef(
@@ -32,7 +32,7 @@ export const statesOfApplicabilityRoutes = [
       loadQuery<StateOfApplicabilityGraphPaginatedQuery>(
         coreEnvironment,
         paginatedStateOfApplicabilityQuery,
-        { organizationId: organizationId! },
+        { organizationId: organizationId },
       ),
     ),
     Component: withQueryRef(
@@ -46,7 +46,7 @@ export const statesOfApplicabilityRoutes = [
       loadQuery<StateOfApplicabilityGraphNodeQuery>(
         coreEnvironment,
         stateOfApplicabilityNodeQuery,
-        { stateOfApplicabilityId: stateOfApplicabilityId! },
+        { stateOfApplicabilityId: stateOfApplicabilityId },
       ),
     ),
     Component: withQueryRef(
@@ -60,7 +60,7 @@ export const statesOfApplicabilityRoutes = [
       loadQuery<StateOfApplicabilityGraphNodeQuery>(
         coreEnvironment,
         stateOfApplicabilityNodeQuery,
-        { stateOfApplicabilityId: stateOfApplicabilityId! },
+        { stateOfApplicabilityId: stateOfApplicabilityId },
       ),
     ),
     Component: withQueryRef(
diff --git a/apps/console/src/routes/vendorRoutes.ts b/apps/console/src/routes/vendorRoutes.ts
index 606ec7d62..e1738ad11 100644
--- a/apps/console/src/routes/vendorRoutes.ts
+++ b/apps/console/src/routes/vendorRoutes.ts
@@ -18,7 +18,7 @@ export const vendorRoutes = [
     Fallback: PageSkeleton,
     loader: loaderFromQueryLoader(({ organizationId }) =>
       loadQuery<VendorGraphListQuery>(coreEnvironment, vendorsQuery, {
-        organizationId: organizationId!,
+        organizationId: organizationId,
         snapshotId: null,
       }),
     ),
@@ -31,7 +31,7 @@ export const vendorRoutes = [
     Fallback: PageSkeleton,
     loader: loaderFromQueryLoader(({ organizationId, snapshotId }) =>
       loadQuery<VendorGraphListQuery>(coreEnvironment, vendorsQuery, {
-        organizationId: organizationId!,
+        organizationId: organizationId,
         snapshotId,
       }),
     ),
@@ -44,7 +44,7 @@ export const vendorRoutes = [
     Fallback: PageSkeleton,
     loader: loaderFromQueryLoader(({ vendorId }) =>
       loadQuery<VendorGraphNodeQuery>(coreEnvironment, vendorNodeQuery, {
-        vendorId: vendorId!,
+        vendorId: vendorId,
       }),
     ),
     Component: withQueryRef(
@@ -103,7 +103,7 @@ export const vendorRoutes = [
     Fallback: PageSkeleton,
     loader: loaderFromQueryLoader(({ vendorId }) =>
       loadQuery<VendorGraphNodeQuery>(coreEnvironment, vendorNodeQuery, {
-        vendorId: vendorId!,
+        vendorId: vendorId,
       }),
     ),
     Component: withQueryRef(
diff --git a/apps/console/src/types.ts b/apps/console/src/types.ts
index 583413b93..a6ff58670 100644
--- a/apps/console/src/types.ts
+++ b/apps/console/src/types.ts
@@ -1,7 +1,7 @@
-export type NodeOf<T> =
-  NonNullable<T> extends
-    | { readonly edges: ReadonlyArray<{ readonly node: infer U }> }
-    | undefined
+export type NodeOf<T>
+  = NonNullable<T> extends
+  | { readonly edges: ReadonlyArray<{ readonly node: infer U }> }
+  | undefined
     ? U
     : never;
 
diff --git a/packages/eslint-config/src/reactConfigs.ts b/packages/eslint-config/src/reactConfigs.ts
index fcb10cfff..27eaf4ff7 100644
--- a/packages/eslint-config/src/reactConfigs.ts
+++ b/packages/eslint-config/src/reactConfigs.ts
@@ -2,7 +2,14 @@ import react from "eslint-plugin-react";
 import * as reactHooks from "eslint-plugin-react-hooks";
 
 export const reactConfigs = [
-  react.configs.flat.recommended,
-  react.configs.flat["jsx-runtime"],
-  reactHooks.configs.flat.recommended,
+  {
+    ...react.configs.flat.recommended,
+    ...react.configs.flat["jsx-runtime"],
+    ...reactHooks.configs.flat.recommended,
+    settings: {
+      react: {
+        version: "detect",
+      },
+    },
+  },
 ];
diff --git a/packages/eslint-config/src/stylisticConfigs.ts b/packages/eslint-config/src/stylisticConfigs.ts
index a48027fad..9f5a775df 100644
--- a/packages/eslint-config/src/stylisticConfigs.ts
+++ b/packages/eslint-config/src/stylisticConfigs.ts
@@ -18,7 +18,14 @@ export const stylisticConfigs = [
     rules: {
       "@stylistic/max-len": [
         "warn",
-        { code: 120, ignoreUrls: true, ignoreStrings: true },
+        {
+          code: 120,
+          tabWidth: 2,
+          ignoreStrings: true,
+          ignoreTemplateLiterals: true,
+          ignoreTrailingComments: true,
+          ignoreUrls: true,
+        },
       ],
     },
   } satisfies Linter.Config,
diff --git a/packages/ui/src/Molecules/Field/Field.tsx b/packages/ui/src/Molecules/Field/Field.tsx
index 6d9195ecd..34959088d 100644
--- a/packages/ui/src/Molecules/Field/Field.tsx
+++ b/packages/ui/src/Molecules/Field/Field.tsx
@@ -14,7 +14,9 @@ type BaseProps<T extends string, P> = {
     children?: ReactNode;
 } & P;
 
-type Props<T extends string | readonly string[] | number = string> =
+type FieldValue = string | readonly string[] | number
+
+type Props<T extends FieldValue = string> =
     | BaseProps<never, ComponentProps<typeof Input>>
     | BaseProps<"text", ComponentProps<typeof Input>>
     | BaseProps<"email", ComponentProps<typeof Input>>
@@ -34,7 +36,7 @@ const field = tv({
 
 const { base: baseClass, label: labelClass, help: helpClass } = field();
 
-export function Field<T extends string | readonly string[] | number = string>(props: Props<T>) {
+export function Field<T extends FieldValue = string>(props: Props<T>) {
     const showHelp = props.help && !props.error;
     const childrenAsInput = !props.type && props.children;
     return (
@@ -55,7 +57,7 @@ export function Field<T extends string | readonly string[] | number = string>(pr
     );
 }
 
-function getInput<T extends string | readonly string[] | number = string>(props: Props<T>) {
+function getInput<T extends FieldValue = string>(props: Props<T>) {
     const { error, onValueChange, type, ...restProps } = props;
     const baseProps = {
         ["aria-invalid"]: !!error,