diff --git a/apps/console2/src/components/controls/LinkedControlsCard.tsx b/apps/console2/src/components/controls/LinkedControlsCard.tsx
index 03df58547..3e9f28c7c 100644
--- a/apps/console2/src/components/controls/LinkedControlsCard.tsx
+++ b/apps/console2/src/components/controls/LinkedControlsCard.tsx
@@ -19,7 +19,7 @@ const linkedControlFragment = graphql`
   fragment LinkedControlsCardFragment on Control {
     id
     name
-    referenceId
+    sectionTitle
     framework {
       name
     }
@@ -105,7 +105,7 @@ function ControlRow(props: {
       <Td>
         <span className="inline-flex gap-2 items-center">
           {control.framework.name}{" "}
-          <Badge size="md">{control.referenceId}</Badge>
+          <Badge size="md">{control.sectionTitle}</Badge>
         </span>
       </Td>
       <Td>{control.name}</Td>
diff --git a/apps/console2/src/components/controls/__generated__/LinkedControlsCardFragment.graphql.ts b/apps/console2/src/components/controls/__generated__/LinkedControlsCardFragment.graphql.ts
index e542ca6f1..f278821ee 100644
--- a/apps/console2/src/components/controls/__generated__/LinkedControlsCardFragment.graphql.ts
+++ b/apps/console2/src/components/controls/__generated__/LinkedControlsCardFragment.graphql.ts
@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<c922ab2420ac172a8d9c18948fc4f006>>
+ * @generated SignedSource<<bdbc3097fad5d998519bb991b3a664c2>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -16,7 +16,7 @@ export type LinkedControlsCardFragment$data = {
   };
   readonly id: string;
   readonly name: string;
-  readonly referenceId: string;
+  readonly sectionTitle: string;
   readonly " $fragmentType": "LinkedControlsCardFragment";
 };
 export type LinkedControlsCardFragment$key = {
@@ -50,7 +50,7 @@ return {
       "alias": null,
       "args": null,
       "kind": "ScalarField",
-      "name": "referenceId",
+      "name": "sectionTitle",
       "storageKey": null
     },
     {
@@ -71,6 +71,6 @@ return {
 };
 })();
 
-(node as any).hash = "1b72ca232511c698e0cbdc84cbc81c02";
+(node as any).hash = "20d4049be0cad5dc766f22d9a0535625";
 
 export default node;
diff --git a/apps/console2/src/hooks/graph/__generated__/DocumentGraphNodeQuery.graphql.ts b/apps/console2/src/hooks/graph/__generated__/DocumentGraphNodeQuery.graphql.ts
index 2bf3242e2..b40eb2712 100644
--- a/apps/console2/src/hooks/graph/__generated__/DocumentGraphNodeQuery.graphql.ts
+++ b/apps/console2/src/hooks/graph/__generated__/DocumentGraphNodeQuery.graphql.ts
@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<1c8d31af825eefa7bfb5d58a2534f190>>
+ * @generated SignedSource<<660dce2bed93af9863423c7d15ce41a9>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -227,7 +227,7 @@ return {
                             "alias": null,
                             "args": null,
                             "kind": "ScalarField",
-                            "name": "referenceId",
+                            "name": "sectionTitle",
                             "storageKey": null
                           },
                           {
@@ -465,12 +465,12 @@ return {
     ]
   },
   "params": {
-    "cacheID": "cc52945231b42fbaf4c86eba5c3ee433",
+    "cacheID": "9660b8b2cc438fd732fcf0eb8265996b",
     "id": null,
     "metadata": {},
     "name": "DocumentGraphNodeQuery",
     "operationKind": "query",
-    "text": "query DocumentGraphNodeQuery(\n  $documentId: ID!\n) {\n  node(id: $documentId) {\n    __typename\n    ... on Document {\n      ...DocumentDetailPageDocumentFragment\n    }\n    id\n  }\n}\n\nfragment DocumentDetailPageDocumentFragment on Document {\n  id\n  title\n  owner {\n    id\n    fullName\n  }\n  controls(first: 100) {\n    edges {\n      node {\n        id\n        ...LinkedControlsCardFragment\n        __typename\n      }\n      cursor\n    }\n    pageInfo {\n      endCursor\n      hasNextPage\n    }\n  }\n  versions(first: 20) {\n    edges {\n      node {\n        id\n        content\n        status\n        publishedAt\n        version\n        updatedAt\n        signatures(first: 100) {\n          edges {\n            node {\n              id\n              state\n              signedBy {\n                id\n              }\n              ...DocumentSignaturesDialog_signature\n              __typename\n            }\n            cursor\n          }\n          pageInfo {\n            endCursor\n            hasNextPage\n          }\n        }\n        ...DocumentVersionHistoryDialogFragment\n        ...DocumentSignaturesDialog_version\n        __typename\n      }\n      cursor\n    }\n    pageInfo {\n      endCursor\n      hasNextPage\n    }\n  }\n}\n\nfragment DocumentSignaturesDialog_signature on DocumentVersionSignature {\n  id\n  state\n  signedAt\n  requestedAt\n  signedBy {\n    fullName\n    primaryEmailAddress\n    id\n  }\n}\n\nfragment DocumentSignaturesDialog_version on DocumentVersion {\n  version\n  status\n  publishedAt\n  updatedAt\n}\n\nfragment DocumentVersionHistoryDialogFragment on DocumentVersion {\n  id\n  version\n  status\n  content\n  changelog\n  publishedAt\n  updatedAt\n  publishedBy {\n    fullName\n    id\n  }\n}\n\nfragment LinkedControlsCardFragment on Control {\n  id\n  name\n  referenceId\n  framework {\n    name\n    id\n  }\n}\n"
+    "text": "query DocumentGraphNodeQuery(\n  $documentId: ID!\n) {\n  node(id: $documentId) {\n    __typename\n    ... on Document {\n      ...DocumentDetailPageDocumentFragment\n    }\n    id\n  }\n}\n\nfragment DocumentDetailPageDocumentFragment on Document {\n  id\n  title\n  owner {\n    id\n    fullName\n  }\n  controls(first: 100) {\n    edges {\n      node {\n        id\n        ...LinkedControlsCardFragment\n        __typename\n      }\n      cursor\n    }\n    pageInfo {\n      endCursor\n      hasNextPage\n    }\n  }\n  versions(first: 20) {\n    edges {\n      node {\n        id\n        content\n        status\n        publishedAt\n        version\n        updatedAt\n        signatures(first: 100) {\n          edges {\n            node {\n              id\n              state\n              signedBy {\n                id\n              }\n              ...DocumentSignaturesDialog_signature\n              __typename\n            }\n            cursor\n          }\n          pageInfo {\n            endCursor\n            hasNextPage\n          }\n        }\n        ...DocumentVersionHistoryDialogFragment\n        ...DocumentSignaturesDialog_version\n        __typename\n      }\n      cursor\n    }\n    pageInfo {\n      endCursor\n      hasNextPage\n    }\n  }\n}\n\nfragment DocumentSignaturesDialog_signature on DocumentVersionSignature {\n  id\n  state\n  signedAt\n  requestedAt\n  signedBy {\n    fullName\n    primaryEmailAddress\n    id\n  }\n}\n\nfragment DocumentSignaturesDialog_version on DocumentVersion {\n  version\n  status\n  publishedAt\n  updatedAt\n}\n\nfragment DocumentVersionHistoryDialogFragment on DocumentVersion {\n  id\n  version\n  status\n  content\n  changelog\n  publishedAt\n  updatedAt\n  publishedBy {\n    fullName\n    id\n  }\n}\n\nfragment LinkedControlsCardFragment on Control {\n  id\n  name\n  sectionTitle\n  framework {\n    name\n    id\n  }\n}\n"
   }
 };
 })();
diff --git a/apps/console2/src/hooks/graph/__generated__/FrameworkGraphNodeQuery.graphql.ts b/apps/console2/src/hooks/graph/__generated__/FrameworkGraphNodeQuery.graphql.ts
index 393aa787a..137141f8a 100644
--- a/apps/console2/src/hooks/graph/__generated__/FrameworkGraphNodeQuery.graphql.ts
+++ b/apps/console2/src/hooks/graph/__generated__/FrameworkGraphNodeQuery.graphql.ts
@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<9d5d654dbc062e8a2a82adeed4c0839e>>
+ * @generated SignedSource<<7258ea81187f177613d9ef146df494ff>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -205,7 +205,7 @@ return {
                             "alias": null,
                             "args": null,
                             "kind": "ScalarField",
-                            "name": "referenceId",
+                            "name": "sectionTitle",
                             "storageKey": null
                           },
                           (v3/*: any*/),
@@ -399,12 +399,12 @@ return {
     ]
   },
   "params": {
-    "cacheID": "9af171f23ae160b6725af13fdebaa07a",
+    "cacheID": "8071a760c42f4c3537bbc25d7b866419",
     "id": null,
     "metadata": {},
     "name": "FrameworkGraphNodeQuery",
     "operationKind": "query",
-    "text": "query FrameworkGraphNodeQuery(\n  $frameworkId: ID!\n) {\n  node(id: $frameworkId) {\n    __typename\n    ... on Framework {\n      id\n      name\n      ...FrameworkDetailPageFragment\n    }\n    id\n  }\n}\n\nfragment FrameworkDetailPageFragment on Framework {\n  id\n  name\n  description\n  controls(first: 100) {\n    edges {\n      node {\n        id\n        referenceId\n        name\n        description\n        measures(first: 100) {\n          edges {\n            node {\n              id\n              ...LinkedMeasuresCardFragment\n              __typename\n            }\n            cursor\n          }\n          pageInfo {\n            endCursor\n            hasNextPage\n          }\n        }\n        documents(first: 100) {\n          edges {\n            node {\n              id\n              ...LinkedDocumentsCardFragment\n              __typename\n            }\n            cursor\n          }\n          pageInfo {\n            endCursor\n            hasNextPage\n          }\n        }\n      }\n    }\n  }\n}\n\nfragment LinkedDocumentsCardFragment on Document {\n  id\n  title\n  createdAt\n  documentType\n  versions(first: 1) {\n    edges {\n      node {\n        id\n        status\n      }\n    }\n  }\n}\n\nfragment LinkedMeasuresCardFragment on Measure {\n  id\n  name\n  state\n}\n"
+    "text": "query FrameworkGraphNodeQuery(\n  $frameworkId: ID!\n) {\n  node(id: $frameworkId) {\n    __typename\n    ... on Framework {\n      id\n      name\n      ...FrameworkDetailPageFragment\n    }\n    id\n  }\n}\n\nfragment FrameworkDetailPageFragment on Framework {\n  id\n  name\n  description\n  controls(first: 100) {\n    edges {\n      node {\n        id\n        sectionTitle\n        name\n        description\n        measures(first: 100) {\n          edges {\n            node {\n              id\n              ...LinkedMeasuresCardFragment\n              __typename\n            }\n            cursor\n          }\n          pageInfo {\n            endCursor\n            hasNextPage\n          }\n        }\n        documents(first: 100) {\n          edges {\n            node {\n              id\n              ...LinkedDocumentsCardFragment\n              __typename\n            }\n            cursor\n          }\n          pageInfo {\n            endCursor\n            hasNextPage\n          }\n        }\n      }\n    }\n  }\n}\n\nfragment LinkedDocumentsCardFragment on Document {\n  id\n  title\n  createdAt\n  documentType\n  versions(first: 1) {\n    edges {\n      node {\n        id\n        status\n      }\n    }\n  }\n}\n\nfragment LinkedMeasuresCardFragment on Measure {\n  id\n  name\n  state\n}\n"
   }
 };
 })();
diff --git a/apps/console2/src/hooks/graph/__generated__/MeasureGraphNodeQuery.graphql.ts b/apps/console2/src/hooks/graph/__generated__/MeasureGraphNodeQuery.graphql.ts
index c402ddc6a..76bf713e8 100644
--- a/apps/console2/src/hooks/graph/__generated__/MeasureGraphNodeQuery.graphql.ts
+++ b/apps/console2/src/hooks/graph/__generated__/MeasureGraphNodeQuery.graphql.ts
@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<3f0bf5e0e474802b13df43d692ee926d>>
+ * @generated SignedSource<<705084da2fb7faefcfb2f4346e16565e>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -315,7 +315,7 @@ return {
                             "alias": null,
                             "args": null,
                             "kind": "ScalarField",
-                            "name": "referenceId",
+                            "name": "sectionTitle",
                             "storageKey": null
                           },
                           {
@@ -480,12 +480,12 @@ return {
     ]
   },
   "params": {
-    "cacheID": "a4e9a325cbe97ad3b4846200c7e88a22",
+    "cacheID": "3c47df3d8325927791f007435186cf65",
     "id": null,
     "metadata": {},
     "name": "MeasureGraphNodeQuery",
     "operationKind": "query",
-    "text": "query MeasureGraphNodeQuery(\n  $measureId: ID!\n) {\n  node(id: $measureId) {\n    __typename\n    ... on Measure {\n      id\n      name\n      description\n      state\n      category\n      ...MeasureRisksTabFragment\n      ...MeasureControlsTabFragment\n      ...MeasureFormDialogMeasureFragment\n      ...MeasureEvidencesTabFragment\n    }\n    id\n  }\n}\n\nfragment LinkedControlsCardFragment on Control {\n  id\n  name\n  referenceId\n  framework {\n    name\n    id\n  }\n}\n\nfragment LinkedRisksCardFragment on Risk {\n  id\n  name\n  inherentRiskScore\n  residualRiskScore\n}\n\nfragment MeasureControlsTabFragment on Measure {\n  id\n  controls(first: 100) {\n    edges {\n      node {\n        id\n        ...LinkedControlsCardFragment\n        __typename\n      }\n      cursor\n    }\n    pageInfo {\n      endCursor\n      hasNextPage\n    }\n  }\n}\n\nfragment MeasureEvidencesTabFragment on Measure {\n  id\n  evidences(first: 50) {\n    edges {\n      node {\n        id\n        ...MeasureEvidencesTabFragment_evidence\n        __typename\n      }\n      cursor\n    }\n    pageInfo {\n      endCursor\n      hasNextPage\n      hasPreviousPage\n      startCursor\n    }\n  }\n}\n\nfragment MeasureEvidencesTabFragment_evidence on Evidence {\n  id\n  filename\n  size\n  type\n  createdAt\n  fileUrl\n  mimeType\n}\n\nfragment MeasureFormDialogMeasureFragment on Measure {\n  id\n  description\n  name\n  category\n  state\n}\n\nfragment MeasureRisksTabFragment on Measure {\n  id\n  risks(first: 100) {\n    edges {\n      node {\n        id\n        ...LinkedRisksCardFragment\n        __typename\n      }\n      cursor\n    }\n    pageInfo {\n      endCursor\n      hasNextPage\n    }\n  }\n}\n"
+    "text": "query MeasureGraphNodeQuery(\n  $measureId: ID!\n) {\n  node(id: $measureId) {\n    __typename\n    ... on Measure {\n      id\n      name\n      description\n      state\n      category\n      ...MeasureRisksTabFragment\n      ...MeasureControlsTabFragment\n      ...MeasureFormDialogMeasureFragment\n      ...MeasureEvidencesTabFragment\n    }\n    id\n  }\n}\n\nfragment LinkedControlsCardFragment on Control {\n  id\n  name\n  sectionTitle\n  framework {\n    name\n    id\n  }\n}\n\nfragment LinkedRisksCardFragment on Risk {\n  id\n  name\n  inherentRiskScore\n  residualRiskScore\n}\n\nfragment MeasureControlsTabFragment on Measure {\n  id\n  controls(first: 100) {\n    edges {\n      node {\n        id\n        ...LinkedControlsCardFragment\n        __typename\n      }\n      cursor\n    }\n    pageInfo {\n      endCursor\n      hasNextPage\n    }\n  }\n}\n\nfragment MeasureEvidencesTabFragment on Measure {\n  id\n  evidences(first: 50) {\n    edges {\n      node {\n        id\n        ...MeasureEvidencesTabFragment_evidence\n        __typename\n      }\n      cursor\n    }\n    pageInfo {\n      endCursor\n      hasNextPage\n      hasPreviousPage\n      startCursor\n    }\n  }\n}\n\nfragment MeasureEvidencesTabFragment_evidence on Evidence {\n  id\n  filename\n  size\n  type\n  createdAt\n  fileUrl\n  mimeType\n}\n\nfragment MeasureFormDialogMeasureFragment on Measure {\n  id\n  description\n  name\n  category\n  state\n}\n\nfragment MeasureRisksTabFragment on Measure {\n  id\n  risks(first: 100) {\n    edges {\n      node {\n        id\n        ...LinkedRisksCardFragment\n        __typename\n      }\n      cursor\n    }\n    pageInfo {\n      endCursor\n      hasNextPage\n    }\n  }\n}\n"
   }
 };
 })();
diff --git a/apps/console2/src/pages/organizations/frameworks/FrameworkDetailPage.tsx b/apps/console2/src/pages/organizations/frameworks/FrameworkDetailPage.tsx
index 0a2b3a908..309d26735 100644
--- a/apps/console2/src/pages/organizations/frameworks/FrameworkDetailPage.tsx
+++ b/apps/console2/src/pages/organizations/frameworks/FrameworkDetailPage.tsx
@@ -39,7 +39,7 @@ const frameworkDetailFragment = graphql`
       edges {
         node {
           id
-          referenceId
+          sectionTitle
           name
           description
           measures(first: 100)
@@ -140,7 +140,7 @@ export default function FrameworkDetailPage(props: Props) {
   const selectedControl = controlId
     ? controls.find((control) => control.id === controlId)
     : controls[0];
-  usePageTitle(`${framework.name} | ${selectedControl?.referenceId}`);
+  usePageTitle(`${framework.name} | ${selectedControl?.sectionTitle}`);
 
   // Mutations
   const [detachMeasure, isDetachingMeasure] = useMutation(
@@ -203,7 +203,7 @@ export default function FrameworkDetailPage(props: Props) {
           {controls.map((control) => (
             <ControlItem
               key={control.id}
-              id={control.referenceId}
+              id={control.sectionTitle}
               description={control.name ?? control.description}
               to={`/organizations/${organizationId}/frameworks/${framework.id}/controls/${control.id}`}
               active={selectedControl?.id === control.id}
@@ -213,7 +213,7 @@ export default function FrameworkDetailPage(props: Props) {
         {selectedControl ? (
           <div className="space-y-6">
             <div className="text-xl font-medium px-[6px] py-[2px] border border-border-low rounded-lg w-max bg-active mb-3">
-              {selectedControl.referenceId}
+              {selectedControl.sectionTitle}
             </div>
             <div className="text-base">{selectedControl.name}</div>
             <LinkedMeasuresCard
diff --git a/apps/console2/src/pages/organizations/frameworks/__generated__/FrameworkDetailPageFragment.graphql.ts b/apps/console2/src/pages/organizations/frameworks/__generated__/FrameworkDetailPageFragment.graphql.ts
index d2a2dc76a..8acb5687b 100644
--- a/apps/console2/src/pages/organizations/frameworks/__generated__/FrameworkDetailPageFragment.graphql.ts
+++ b/apps/console2/src/pages/organizations/frameworks/__generated__/FrameworkDetailPageFragment.graphql.ts
@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<15cc2290d512a0cdde5241edd045d3f5>>
+ * @generated SignedSource<<3e2b13f2b9a543d8393fdb7a1d7c680d>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -35,7 +35,7 @@ export type FrameworkDetailPageFragment$data = {
           }>;
         };
         readonly name: string;
-        readonly referenceId: string;
+        readonly sectionTitle: string;
       };
     }>;
   };
@@ -177,7 +177,7 @@ return {
                   "alias": null,
                   "args": null,
                   "kind": "ScalarField",
-                  "name": "referenceId",
+                  "name": "sectionTitle",
                   "storageKey": null
                 },
                 (v2/*: any*/),
@@ -283,6 +283,6 @@ return {
 };
 })();
 
-(node as any).hash = "15b523ca06d1a1e1a80379f6d51b92e2";
+(node as any).hash = "f0fe30240833b2da754f040f0c35aaaa";
 
 export default node;
diff --git a/packages/ui/src/Layouts/CenteredLayout.tsx b/packages/ui/src/Layouts/CenteredLayout.tsx
index 912bd514a..b04274bf2 100644
--- a/packages/ui/src/Layouts/CenteredLayout.tsx
+++ b/packages/ui/src/Layouts/CenteredLayout.tsx
@@ -4,7 +4,7 @@ import { Skeleton } from "../Atoms/Skeleton/Skeleton";
 
 export function CenteredLayout({ children }: PropsWithChildren) {
     return (
-        <div className="grid place-items-center h-screen">
+        <div className="grid place-items-center h-screen text-txt-primary bg-level-0">
             <div className="w-full max-w-2xl flex flex-col items-center">
                 {children ?? <Outlet />}
             </div>