From 7aefb06035cc3d0811d1fcb03dc81b3f2f27f132 Mon Sep 17 00:00:00 2001
From: Flatlogic Bot <support@flatlogic.com>
Date: Mon, 11 May 2026 13:20:54 +0000
Subject: [PATCH] 4

---
 frontend/src/colors.ts                        |  32 +-
 frontend/src/components/AsideMenuLayer.tsx    |   6 +-
 frontend/src/components/BigCalendar.tsx       |   2 +-
 frontend/src/components/FormField.tsx         |  10 +-
 frontend/src/components/LegalOpsPageIntro.tsx |  18 +-
 frontend/src/components/NavBar.tsx            |   6 +-
 frontend/src/components/Search.tsx            |   2 +-
 frontend/src/css/_calendar.css                | 311 ++++++++++++++++--
 frontend/src/css/_table.css                   |  35 +-
 frontend/src/css/_theme.css                   |  71 ++++
 frontend/src/layouts/Authenticated.tsx        |  14 +-
 .../pages/ai_use_cases/ai_use_cases-list.tsx  |  64 ++--
 .../pages/ai_use_cases/ai_use_cases-table.tsx |  92 ++++--
 frontend/src/styles.ts                        |  70 ++--
 14 files changed, 572 insertions(+), 161 deletions(-)

diff --git a/frontend/src/colors.ts b/frontend/src/colors.ts
index d160d35..681cbe0 100644
--- a/frontend/src/colors.ts
+++ b/frontend/src/colors.ts
@@ -11,10 +11,10 @@ export const colorsBgLight = {
   white: 'bg-white text-black',
   light: ' bg-white text-black text-black dark:bg-dark-900 dark:text-white',
   contrast: 'bg-gray-800 text-white dark:bg-white dark:text-black',
-  success: 'bg-emerald-500 border-emerald-500 dark:bg-pavitra-blue dark:border-pavitra-blue text-white',
+  success: 'bg-emerald-500 border-emerald-500 dark:bg-emerald-500 dark:border-emerald-500 text-white',
   danger: 'bg-red-500 border-red-500 text-white',
   warning: 'bg-yellow-500 border-yellow-500 text-white',
-  info: 'bg-[#0E1A2B] border-[#0E1A2B] dark:bg-pavitra-blue dark:border-pavitra-blue text-white',
+  info: 'bg-[#0E1A2B] border-[#0E1A2B] dark:bg-[#D8B75E] dark:border-[#D8B75E] text-white dark:text-[#08111F]',
 }
 
 export const colorsText = {
@@ -53,30 +53,30 @@ export const getButtonColor = (
       whiteDark: 'ring-gray-200 dark:ring-dark-500',
       lightDark: 'ring-gray-200 dark:ring-gray-500',
       contrast: 'ring-gray-300 dark:ring-gray-400',
-      success: 'ring-emerald-300 dark:ring-pavitra-blue',
+      success: 'ring-emerald-300 dark:ring-emerald-500',
       danger: 'ring-red-300 dark:ring-red-700',
       warning: 'ring-yellow-300 dark:ring-yellow-700',
-      info: "ring-[#D8B75E]/35 dark:ring-pavitra-blue",
+      info: "ring-[#D8B75E]/35 dark:ring-[#D8B75E]/35",
     },
     active: {
       white: 'bg-gray-100',
       whiteDark: 'bg-gray-100 dark:bg-dark-800',
       lightDark: 'bg-gray-200 dark:bg-slate-700',
       contrast: 'bg-gray-700 dark:bg-slate-100',
-      success: 'bg-emerald-700 dark:bg-pavitra-blue',
+      success: 'bg-emerald-700 dark:bg-emerald-500',
       danger: 'bg-red-700 dark:bg-red-600',
       warning: 'bg-yellow-700 dark:bg-yellow-600',
-      info: 'bg-[#162742] dark:bg-pavitra-blue',
+      info: 'bg-[#162742] dark:bg-[#F2C95C]',
     },
     bg: {
       white: 'bg-white text-black',
       whiteDark: 'bg-white  text-black  dark:bg-dark-900 dark:text-white',
       lightDark: 'bg-gray-100 text-black dark:bg-slate-800 dark:text-white',
       contrast: 'bg-gray-800 text-white dark:bg-white dark:text-black',
-      success: 'bg-emerald-600 dark:bg-pavitra-blue text-white',
+      success: 'bg-emerald-600 dark:bg-emerald-500 text-white',
       danger: 'bg-red-600 text-white    dark:bg-red-500 ',
       warning: 'bg-yellow-600 dark:bg-yellow-500 text-white',
-      info: " bg-[#0E1A2B] dark:bg-pavitra-blue text-white ",
+      info: " bg-[#0E1A2B] dark:bg-[#D8B75E] text-white dark:text-[#08111F] ",
     },
     bgHover: {
       white: 'hover:bg-gray-100',
@@ -84,39 +84,39 @@ export const getButtonColor = (
       lightDark: 'hover:bg-gray-200 hover:dark:bg-slate-700',
       contrast: 'hover:bg-gray-700 hover:dark:bg-slate-100',
       success:
-          'hover:bg-emerald-700 hover:border-emerald-700 hover:dark:bg-pavitra-blue hover:dark:border-pavitra-blue',
+          'hover:bg-emerald-700 hover:border-emerald-700 hover:dark:bg-emerald-600 hover:dark:border-emerald-600',
       danger:
         'hover:bg-red-700 hover:border-red-700 hover:dark:bg-red-600 hover:dark:border-red-600',
       warning:
         'hover:bg-yellow-700 hover:border-yellow-700 hover:dark:bg-yellow-600 hover:dark:border-yellow-600',
-      info: "hover:bg-[#162742] hover:border-[#162742] hover:dark:bg-pavitra-blue/80 hover:dark:border-pavitra-blue/80",
+      info: "hover:bg-[#162742] hover:border-[#162742] hover:dark:bg-[#F2C95C] hover:dark:border-[#F2C95C]",
     },
     borders: {
       white: 'border-white',
       whiteDark: 'border-white  dark:border-dark-900',
       lightDark: 'border-gray-100 dark:border-slate-800',
       contrast: 'border-gray-800 dark:border-white',
-      success: 'border-emerald-600 dark:border-pavitra-blue',
+      success: 'border-emerald-600 dark:border-emerald-500',
       danger: 'border-red-600 dark:border-red-500',
       warning: 'border-yellow-600 dark:border-yellow-500',
-      info: "border-[#0E1A2B] dark:border-pavitra-blue",
+      info: "border-[#0E1A2B] dark:border-[#D8B75E]",
     },
     text: {
       contrast: 'dark:text-slate-100',
-      success: 'text-emerald-600 dark:text-pavitra-blue',
+      success: 'text-emerald-600 dark:text-emerald-400',
       danger: 'text-red-600 dark:text-red-500',
       warning: 'text-yellow-600 dark:text-yellow-500',
-      info: 'text-[#0E1A2B] dark:text-pavitra-blue',
+      info: 'text-[#0E1A2B] dark:text-[#D8B75E]',
     },
     outlineHover: {
       contrast:
         'hover:bg-gray-800 hover:text-gray-100 hover:dark:bg-slate-100 hover:dark:text-black',
-      success: 'hover:bg-emerald-600 hover:text-white hover:text-white hover:dark:text-white hover:dark:border-pavitra-blue',
+      success: 'hover:bg-emerald-600 hover:text-white hover:text-white hover:dark:text-white hover:dark:border-emerald-500',
       danger:
         'hover:bg-red-600 hover:text-white hover:text-white hover:dark:text-white hover:dark:border-red-600',
       warning:
         'hover:bg-yellow-600 hover:text-white hover:text-white hover:dark:text-white hover:dark:border-yellow-600',
-      info: "hover:bg-[#0E1A2B] hover:text-white hover:dark:text-white hover:dark:border-pavitra-blue",
+      info: "hover:bg-[#0E1A2B] hover:text-white hover:dark:bg-[#D8B75E] hover:dark:text-[#08111F] hover:dark:border-[#D8B75E]",
     },
   }
 
diff --git a/frontend/src/components/AsideMenuLayer.tsx b/frontend/src/components/AsideMenuLayer.tsx
index 0d7c11d..9988818 100644
--- a/frontend/src/components/AsideMenuLayer.tsx
+++ b/frontend/src/components/AsideMenuLayer.tsx
@@ -30,9 +30,9 @@ export default function AsideMenuLayer({ menu, className = '', ...props }: Props
     <aside
       id='asideMenu'
       className={`${className} zzz fixed top-0 z-40 flex h-screen w-80 overflow-hidden transition-position lg:py-3 lg:pl-3`}
-    >
-      <div
-          className={`flex-1 flex flex-col overflow-hidden border border-[#E5E0D6] shadow-xl shadow-[#83755E]/10 dark:bg-dark-900 ${asideStyle} ${corners}`}
+      >
+        <div
+          className={`flex-1 flex flex-col overflow-hidden border border-[#E5E0D6] shadow-xl shadow-[#83755E]/10 dark:border-[#273447] dark:bg-[#0B1120] dark:shadow-black/30 ${asideStyle} ${corners}`}
       >
         <div
           className={`flex flex-row items-center justify-between px-5 py-5 ${asideBrandStyle}`}
diff --git a/frontend/src/components/BigCalendar.tsx b/frontend/src/components/BigCalendar.tsx
index a457be6..b0b3436 100644
--- a/frontend/src/components/BigCalendar.tsx
+++ b/frontend/src/components/BigCalendar.tsx
@@ -115,7 +115,7 @@ const BigCalendar = ({
     };
 
     return (
-        <div className='h-[600px] p-4'>
+        <div className='legal-governance-calendar h-[680px] p-4 md:p-6'>
             <Calendar
                 defaultDate={defaultDate}
                 defaultView={Views.MONTH}
diff --git a/frontend/src/components/FormField.tsx b/frontend/src/components/FormField.tsx
index 988ac39..01ca1bf 100644
--- a/frontend/src/components/FormField.tsx
+++ b/frontend/src/components/FormField.tsx
@@ -34,12 +34,12 @@ const FormField = ({ icons = [], ...props }: Props) => {
   }
 
   const controlClassName = [
-    `px-3 py-2 max-w-full border-gray-300 dark:border-dark-700 ${corners} w-full dark:placeholder-gray-400`,
+    `px-3 py-2 max-w-full border-gray-300 text-[#0E1A2B] dark:border-[#334155] dark:text-slate-100 ${corners} w-full dark:placeholder-slate-500`,
     `${focusRing}`,
     props.hasTextareaHeight ? 'h-24' : 'h-12',
     props.isBorderless ? 'border-0' : 'border',
-    props.isTransparent ? 'bg-transparent' : `${props.websiteBg ? `  bg-white` : bgColor} dark:bg-dark-800`,
-    props.disabled ? 'bg-gray-200 text-gray-100 dark:bg-dark-900 disabled' : '',
+    props.isTransparent ? 'bg-transparent' : `${props.websiteBg ? `  bg-white` : bgColor} dark:bg-[#0F172A]`,
+    props.disabled ? 'bg-gray-200 text-gray-100 dark:bg-[#111827] dark:text-slate-500 disabled' : '',
     props.borderButtom ? `border-0 border-b ${props.diversity ? "border-gray-400" : " placeholder-white   border-gray-300/10 border-white "} rounded-none focus:ring-0` : '',
   ].join(' ');
 
@@ -48,7 +48,7 @@ const FormField = ({ icons = [], ...props }: Props) => {
       {props.label && (
         <label
           htmlFor={props.labelFor}
-          className={`block font-bold mb-2 ${props.labelFor ? 'cursor-pointer' : ''}`}
+          className={`block font-bold mb-2 dark:text-slate-100 ${props.labelFor ? 'cursor-pointer' : ''}`}
         >
           {props.label}
         </label>
@@ -71,7 +71,7 @@ const FormField = ({ icons = [], ...props }: Props) => {
         ))}
       </div>
       {props.help && (
-          <div className='text-xs    text-gray-500 dark:text-dark-600 mt-1'>{props.help}</div>
+          <div className='text-xs    text-gray-500 dark:text-slate-400 mt-1'>{props.help}</div>
       )}
     </div>
   )
diff --git a/frontend/src/components/LegalOpsPageIntro.tsx b/frontend/src/components/LegalOpsPageIntro.tsx
index 38bb123..0b1c3cc 100644
--- a/frontend/src/components/LegalOpsPageIntro.tsx
+++ b/frontend/src/components/LegalOpsPageIntro.tsx
@@ -22,24 +22,24 @@ export default function LegalOpsPageIntro({
   children,
 }: Props) {
   return (
-    <section className='mb-6 overflow-hidden rounded-xl border border-[#DDD5C7] bg-white shadow-sm shadow-[#83755E]/10'>
+    <section className='mb-6 overflow-hidden rounded-xl border border-[#DDD5C7] bg-white shadow-sm shadow-[#83755E]/10 dark:border-[#273447] dark:bg-[#111827] dark:shadow-none'>
       <div className='grid gap-5 p-6 lg:grid-cols-[1fr_auto] lg:items-start'>
         <div>
-          <p className='text-xs font-semibold uppercase tracking-[0.16em] text-[#7A5B13]'>{eyebrow}</p>
-          <h2 className='mt-2 text-2xl font-semibold text-[#0E1A2B]'>{title}</h2>
-          <p className='mt-3 max-w-3xl text-sm leading-6 text-[#5B6472]'>{description}</p>
+          <p className='text-xs font-semibold uppercase tracking-[0.16em] text-[#7A5B13] dark:text-[#D8B75E]'>{eyebrow}</p>
+          <h2 className='mt-2 text-2xl font-semibold text-[#0E1A2B] dark:text-slate-50'>{title}</h2>
+          <p className='mt-3 max-w-3xl text-sm leading-6 text-[#5B6472] dark:text-slate-300'>{description}</p>
         </div>
         {children && <div className='flex flex-wrap gap-2 lg:max-w-xl lg:justify-end'>{children}</div>}
       </div>
-      <div className='grid border-t border-[#E5E0D6] bg-[#FBF8F1] md:grid-cols-3'>
+      <div className='grid border-t border-[#E5E0D6] bg-[#FBF8F1] dark:border-[#273447] dark:bg-[#0F172A] md:grid-cols-3'>
         {metrics.map((metric) => (
           <div
             key={metric.label}
-            className='border-b border-[#E5E0D6] p-5 last:border-b-0 md:border-b-0 md:border-r md:last:border-r-0'
+            className='border-b border-[#E5E0D6] p-5 last:border-b-0 dark:border-[#273447] md:border-b-0 md:border-r md:last:border-r-0'
           >
-            <p className='text-xs font-semibold uppercase tracking-[0.14em] text-[#8B7A61]'>{metric.label}</p>
-            <p className='mt-2 text-xl font-semibold text-[#0E1A2B]'>{metric.value}</p>
-            <p className='mt-1 text-xs leading-5 text-[#6B7280]'>{metric.helper}</p>
+            <p className='text-xs font-semibold uppercase tracking-[0.14em] text-[#8B7A61] dark:text-[#D8B75E]'>{metric.label}</p>
+            <p className='mt-2 text-xl font-semibold text-[#0E1A2B] dark:text-slate-50'>{metric.value}</p>
+            <p className='mt-1 text-xs leading-5 text-[#6B7280] dark:text-slate-400'>{metric.helper}</p>
           </div>
         ))}
       </div>
diff --git a/frontend/src/components/NavBar.tsx b/frontend/src/components/NavBar.tsx
index ac04960..89b204e 100644
--- a/frontend/src/components/NavBar.tsx
+++ b/frontend/src/components/NavBar.tsx
@@ -33,9 +33,9 @@ export default function NavBar({ menu, className = '', children }: Props) {
 
   return (
     <nav
-      className={`${className} fixed inset-x-0 top-0 z-30 h-14 w-screen border-b border-[#DDD5C7] bg-[#F6F3EC]/95 backdrop-blur transition-position lg:w-auto dark:bg-dark-800`}
+      className={`${className} fixed inset-x-0 top-0 z-30 h-14 w-screen border-b border-[#DDD5C7] bg-[#F6F3EC]/95 backdrop-blur transition-position dark:border-[#273447] dark:bg-[#08111F]/95 lg:w-auto`}
     >
-      <div className={`flex lg:items-stretch ${containerMaxW} ${isScrolled ? 'shadow-sm shadow-[#83755E]/10 dark:border-dark-700' : ''}`}>
+      <div className={`flex lg:items-stretch ${containerMaxW} ${isScrolled ? 'shadow-sm shadow-[#83755E]/10 dark:shadow-none' : ''}`}>
         <div className="flex flex-1 items-stretch h-14">{children}</div>
         <div className="flex-none items-stretch flex h-14 lg:hidden">
           <NavBarItemPlain onClick={handleMenuNavBarToggleClick}>
@@ -45,7 +45,7 @@ export default function NavBar({ menu, className = '', children }: Props) {
         <div
           className={`${
             isMenuNavBarActive ? 'block' : 'hidden'
-          } absolute left-0 top-14 flex max-h-screen-menu w-screen items-center overflow-y-auto bg-[#F6F3EC] shadow-lg lg:static lg:flex lg:w-auto lg:overflow-visible lg:bg-transparent lg:shadow-none dark:bg-dark-800`}
+          } absolute left-0 top-14 flex max-h-screen-menu w-screen items-center overflow-y-auto bg-[#F6F3EC] shadow-lg dark:bg-[#08111F] dark:shadow-none lg:static lg:flex lg:w-auto lg:overflow-visible lg:bg-transparent lg:shadow-none`}
         >
           <NavBarMenuList menu={menu} />
         </div>
diff --git a/frontend/src/components/Search.tsx b/frontend/src/components/Search.tsx
index a65c736..aa51b55 100644
--- a/frontend/src/components/Search.tsx
+++ b/frontend/src/components/Search.tsx
@@ -36,7 +36,7 @@ const Search = () => {
             name='search'
             validate={validateSearch}
             placeholder='Search governance records'
-            className={`${corners} relative ml-2 w-full border-[#DDD5C7] bg-white/80 p-2.5 text-sm text-[#111827] placeholder-[#8A8173] shadow-none dark:bg-dark-900 dark:placeholder-dark-600 ${focusRing}`}
+            className={`${corners} relative ml-2 w-full border-[#DDD5C7] bg-white/80 p-2.5 text-sm text-[#111827] placeholder-[#8A8173] shadow-none dark:border-[#273447] dark:bg-[#111827] dark:text-slate-100 dark:placeholder-slate-500 ${focusRing}`}
           />
           {errors.search && touched.search && values.search.length < 2 ? (
             <div className='text-red-500 text-sm ml-2 absolute'>{errors.search}</div>
diff --git a/frontend/src/css/_calendar.css b/frontend/src/css/_calendar.css
index e3945b4..522af3d 100644
--- a/frontend/src/css/_calendar.css
+++ b/frontend/src/css/_calendar.css
@@ -1,39 +1,302 @@
-.rbc-event {
-  @apply bg-blue-600  !important;
+.legal-governance-calendar {
+  color: #0E1A2B;
 }
 
-.rbc-show-more {
-  @apply   dark:text-white bg-transparent !important;
+.legal-governance-calendar .rbc-calendar {
+  border: 1px solid #DDD5C7;
+  border-radius: 14px;
+  overflow: hidden;
+  background: #FFFFFF;
+  box-shadow: 0 10px 24px rgba(131, 117, 94, 0.08);
 }
 
-.rbc-btn-group button {
-  @apply  dark:text-white !important;
+.legal-governance-calendar .rbc-toolbar {
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 18px;
 }
 
-.rbc-btn-group button:hover {
-  @apply  text-white dark:bg-dark-700 !important;
+.legal-governance-calendar .rbc-toolbar-label {
+  color: #0E1A2B;
+  font-size: 1.05rem;
+  font-weight: 700;
+  letter-spacing: 0;
+  padding: 0 12px;
 }
 
-.rbc-btn-group button.rbc-active {
-  @apply  text-black dark:bg-blue-600 !important;
+.legal-governance-calendar .rbc-btn-group {
+  display: inline-flex;
+  overflow: hidden;
+  border: 1px solid #D8D0C2;
+  border-radius: 10px;
+  background: #FFFFFF;
+  box-shadow: 0 1px 2px rgba(131, 117, 94, 0.08);
 }
 
-.rbc-btn-group button:focus {
-  @apply  dark:bg-blue-600 !important;
+.legal-governance-calendar .rbc-btn-group button {
+  min-height: 38px;
+  border: 0 !important;
+  border-right: 1px solid #E5E0D6 !important;
+  background: #FFFFFF !important;
+  color: #0E1A2B !important;
+  font-weight: 600;
+  padding: 8px 16px;
+  transition: background-color 150ms ease, color 150ms ease;
 }
 
-.rbc-day-bg.rbc-off-range-bg {
-  @apply   dark:bg-dark-800 !important;
-}
-.rbc-current-time-indicator{
-  @apply h-1 !important;
-}
-.rbc-today {
-  @apply      dark:bg-dark-600/40 !important;
+.legal-governance-calendar .rbc-btn-group button:last-child {
+  border-right: 0 !important;
 }
 
-.rbc-day-bg.rbc-selected-cell {
-  @apply dark:bg-dark-500 !important;
+.legal-governance-calendar .rbc-btn-group button:hover,
+.legal-governance-calendar .rbc-btn-group button:focus {
+  background: #FBF8F1 !important;
+  color: #7A5B13 !important;
+  box-shadow: none !important;
+}
+
+.legal-governance-calendar .rbc-btn-group button.rbc-active,
+.legal-governance-calendar .rbc-btn-group button.rbc-active:hover,
+.legal-governance-calendar .rbc-btn-group button.rbc-active:focus {
+  background: #0E1A2B !important;
+  color: #FFFFFF !important;
+  box-shadow: none !important;
+}
+
+.legal-governance-calendar .rbc-month-view,
+.legal-governance-calendar .rbc-time-view,
+.legal-governance-calendar .rbc-agenda-view {
+  border-color: #DDD5C7;
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.legal-governance-calendar .rbc-header {
+  min-height: 38px;
+  border-color: #E5E0D6;
+  background: #FBF8F1;
+  color: #7A5B13;
+  font-size: 0.76rem;
+  font-weight: 800;
+  letter-spacing: 0.12em;
+  line-height: 38px;
+  text-transform: uppercase;
+}
+
+.legal-governance-calendar .rbc-month-row,
+.legal-governance-calendar .rbc-day-bg,
+.legal-governance-calendar .rbc-date-cell,
+.legal-governance-calendar .rbc-timeslot-group,
+.legal-governance-calendar .rbc-time-content,
+.legal-governance-calendar .rbc-time-header-content,
+.legal-governance-calendar .rbc-time-header.rbc-overflowing {
+  border-color: #E5E0D6;
+}
+
+.legal-governance-calendar .rbc-month-row {
+  min-height: 104px;
+}
+
+.legal-governance-calendar .rbc-date-cell {
+  padding: 6px 8px;
+  color: #0E1A2B;
+  font-size: 0.86rem;
+  font-weight: 700;
+}
+
+.legal-governance-calendar .rbc-off-range {
+  color: #A59B8B;
+}
+
+.legal-governance-calendar .rbc-off-range-bg {
+  background: #F7F5EF !important;
+}
+
+.legal-governance-calendar .rbc-today {
+  background: #FFF8DF !important;
+}
+
+.legal-governance-calendar .rbc-selected-cell {
+  background: #F1E7C7 !important;
+}
+
+.legal-governance-calendar .rbc-event {
+  min-height: 28px;
+  border: 0 !important;
+  border-left: 4px solid #D8B75E !important;
+  border-radius: 7px;
+  background: #0E1A2B !important;
+  color: #FFFFFF !important;
+  padding: 4px 8px !important;
+  box-shadow: 0 6px 14px rgba(14, 26, 43, 0.14);
+}
+
+.legal-governance-calendar .rbc-event:focus,
+.legal-governance-calendar .rbc-event.rbc-selected {
+  outline: 2px solid rgba(216, 183, 94, 0.45);
+  outline-offset: 2px;
+}
+
+.legal-governance-calendar .rbc-event-content {
+  font-size: 0.82rem;
+  font-weight: 650;
+  line-height: 1.3;
+}
+
+.legal-governance-calendar .rbc-show-more {
+  display: inline-flex;
+  align-items: center;
+  min-height: 24px;
+  border-radius: 999px;
+  background: #FFF8DF !important;
+  color: #7A5B13 !important;
+  font-size: 0.76rem;
+  font-weight: 800;
+  padding: 2px 8px;
+}
+
+.legal-governance-calendar .rbc-current-time-indicator {
+  height: 2px !important;
+  background: #D8B75E;
+}
+
+.legal-governance-calendar .rbc-agenda-table {
+  border-color: #DDD5C7;
+}
+
+.legal-governance-calendar .rbc-agenda-table th {
+  background: #FBF8F1;
+  color: #7A5B13;
+  font-size: 0.76rem;
+  font-weight: 800;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.legal-governance-calendar .rbc-agenda-table td {
+  border-color: #E5E0D6;
+  color: #374151;
+}
+
+.legal-governance-calendar .rbc-time-gutter,
+.legal-governance-calendar .rbc-label {
+  color: #6B7280;
+  font-size: 0.78rem;
+}
+
+.dark .legal-governance-calendar {
+  color: #F8FAFC;
+}
+
+.dark .legal-governance-calendar .rbc-calendar {
+  border-color: #273447;
+  background: #111827;
+  box-shadow: none;
+}
+
+.dark .legal-governance-calendar .rbc-toolbar-label {
+  color: #F8FAFC;
+}
+
+.dark .legal-governance-calendar .rbc-btn-group {
+  border-color: #273447;
+  background: #0F172A;
+  box-shadow: none;
+}
+
+.dark .legal-governance-calendar .rbc-btn-group button {
+  border-right-color: #273447 !important;
+  background: #0F172A !important;
+  color: #CBD5E1 !important;
+}
+
+.dark .legal-governance-calendar .rbc-btn-group button:hover,
+.dark .legal-governance-calendar .rbc-btn-group button:focus {
+  background: #172033 !important;
+  color: #F8FAFC !important;
+}
+
+.dark .legal-governance-calendar .rbc-btn-group button.rbc-active,
+.dark .legal-governance-calendar .rbc-btn-group button.rbc-active:hover,
+.dark .legal-governance-calendar .rbc-btn-group button.rbc-active:focus {
+  background: #D8B75E !important;
+  color: #08111F !important;
+}
+
+.dark .legal-governance-calendar .rbc-month-view,
+.dark .legal-governance-calendar .rbc-time-view,
+.dark .legal-governance-calendar .rbc-agenda-view {
+  border-color: #273447;
+}
+
+.dark .legal-governance-calendar .rbc-header {
+  border-color: #273447;
+  background: #0F172A;
+  color: #D8B75E;
+}
+
+.dark .legal-governance-calendar .rbc-month-row,
+.dark .legal-governance-calendar .rbc-day-bg,
+.dark .legal-governance-calendar .rbc-date-cell,
+.dark .legal-governance-calendar .rbc-timeslot-group,
+.dark .legal-governance-calendar .rbc-time-content,
+.dark .legal-governance-calendar .rbc-time-header-content,
+.dark .legal-governance-calendar .rbc-time-header.rbc-overflowing {
+  border-color: #273447;
+}
+
+.dark .legal-governance-calendar .rbc-date-cell {
+  color: #E2E8F0;
+}
+
+.dark .legal-governance-calendar .rbc-off-range {
+  color: #64748B;
+}
+
+.dark .legal-governance-calendar .rbc-off-range-bg {
+  background: #0B1120 !important;
+}
+
+.dark .legal-governance-calendar .rbc-today {
+  background: rgba(216, 183, 94, 0.12) !important;
+}
+
+.dark .legal-governance-calendar .rbc-selected-cell {
+  background: rgba(216, 183, 94, 0.18) !important;
+}
+
+.dark .legal-governance-calendar .rbc-event {
+  border-left-color: #F2C95C !important;
+  background: #D8B75E !important;
+  color: #08111F !important;
+  box-shadow: none;
+}
+
+.dark .legal-governance-calendar .rbc-event:focus,
+.dark .legal-governance-calendar .rbc-event.rbc-selected {
+  outline-color: rgba(248, 250, 252, 0.5);
+}
+
+.dark .legal-governance-calendar .rbc-show-more {
+  background: rgba(216, 183, 94, 0.14) !important;
+  color: #F2C95C !important;
+}
+
+.dark .legal-governance-calendar .rbc-agenda-table {
+  border-color: #273447;
+}
+
+.dark .legal-governance-calendar .rbc-agenda-table th {
+  background: #0F172A;
+  color: #D8B75E;
+}
+
+.dark .legal-governance-calendar .rbc-agenda-table td {
+  border-color: #273447;
+  color: #CBD5E1;
+}
+
+.dark .legal-governance-calendar .rbc-time-gutter,
+.dark .legal-governance-calendar .rbc-label {
+  color: #94A3B8;
 }
- 
- 
diff --git a/frontend/src/css/_table.css b/frontend/src/css/_table.css
index 3db5530..3ad89f6 100644
--- a/frontend/src/css/_table.css
+++ b/frontend/src/css/_table.css
@@ -72,6 +72,33 @@
 
   .datagrid--table {
     @apply rounded-xl border-none !important;
+    --legal-grid-accent: #7A5B13;
+    --legal-grid-bg: #FFFFFF;
+    --legal-grid-border: #DDD5C7;
+    --legal-grid-border-muted: #E5E0D6;
+    --legal-grid-cell-text: #374151;
+    --legal-grid-checkbox: #8B7A61;
+    --legal-grid-footer-bg: #FBF8F1;
+    --legal-grid-header-bg: #FBF8F1;
+    --legal-grid-header-text: #0E1A2B;
+    --legal-grid-hover-bg: #FFF8E8;
+    --legal-grid-selected-bg: #FFF3C9;
+    --legal-grid-selected-hover-bg: #FFEDB1;
+  }
+
+  .dark .datagrid--table {
+    --legal-grid-accent: #D8B75E;
+    --legal-grid-bg: #111827;
+    --legal-grid-border: #273447;
+    --legal-grid-border-muted: #1F2A3A;
+    --legal-grid-cell-text: #CBD5E1;
+    --legal-grid-checkbox: #94A3B8;
+    --legal-grid-footer-bg: #0F172A;
+    --legal-grid-header-bg: #0F172A;
+    --legal-grid-header-text: #F8FAFC;
+    --legal-grid-hover-bg: #172033;
+    --legal-grid-selected-bg: rgba(216, 183, 94, 0.18);
+    --legal-grid-selected-hover-bg: rgba(216, 183, 94, 0.24);
   }
 
   .datagrid--header {
@@ -95,7 +122,7 @@
   }
 
   .datagrid--row {
-    @apply even:bg-[#F7F5EF] odd:bg-white dark:even:bg-[#1B1D22] dark:odd:bg-dark-900 !important;
+    @apply even:bg-[#F7F5EF] odd:bg-white dark:even:bg-[#0F172A] dark:odd:bg-[#111827] !important;
   }
 
   .datagrid--table .MuiDataGrid-cell,
@@ -119,7 +146,7 @@
   }
 
   .datagrid--table .MuiDataGrid-cellContent {
-    color: #374151;
+    color: var(--legal-grid-cell-text);
   }
   
 
@@ -128,7 +155,7 @@
   }
 
   .datagrid--table .MuiTablePagination-root .MuiButtonBase-root:disabled {
-    @apply   dark:text-dark-700;
+    @apply   dark:text-slate-600;
   }
 
   .datagrid--table .MuiTablePagination-root .MuiButtonBase-root:hover {
@@ -136,6 +163,6 @@
   }
 
   .datagrid--table .MuiButton-colorInherit {
-    @apply text-blue-600  dark:text-dark-700 !important;
+    @apply text-blue-600  dark:text-slate-300 !important;
   }
 }
diff --git a/frontend/src/css/_theme.css b/frontend/src/css/_theme.css
index d07e37a..6276053 100644
--- a/frontend/src/css/_theme.css
+++ b/frontend/src/css/_theme.css
@@ -101,3 +101,74 @@
   @apply text-pavitra-800;
 }
 }
+
+@layer base {
+  .dark {
+    color-scheme: dark;
+  }
+
+  .dark .bg-white:not([class*="!bg-"]) {
+    background-color: #111827 !important;
+  }
+
+  .dark .bg-slate-50,
+  .dark .bg-gray-50,
+  .dark .bg-gray-100,
+  .dark [class*="bg-slate-50/"],
+  .dark [class*="bg-[#FBF8F1]"],
+  .dark [class*="bg-[#F6F3EC]"],
+  .dark [class*="bg-[#F7F5EF]"] {
+    background-color: #0F172A !important;
+  }
+
+  .dark [class*="bg-[#F1E7C7]"],
+  .dark [class*="bg-[#FFF8DF]"],
+  .dark [class*="bg-[#EFF6FF]"] {
+    background-color: rgba(216, 183, 94, 0.14) !important;
+  }
+
+  .dark .text-black,
+  .dark .text-slate-950,
+  .dark .text-slate-900,
+  .dark [class*="text-[#0E1A2B]"],
+  .dark [class*="text-[#111827]"] {
+    color: #F8FAFC !important;
+  }
+
+  .dark .text-slate-700,
+  .dark .text-slate-600,
+  .dark .text-slate-500,
+  .dark .text-gray-500,
+  .dark [class*="text-[#5B6472]"],
+  .dark [class*="text-[#6B7280]"] {
+    color: #CBD5E1 !important;
+  }
+
+  .dark .text-slate-400,
+  .dark [class*="text-[#8B7A61]"],
+  .dark [class*="text-[#7A5B13]"],
+  .dark [class*="text-[#1D4ED8]"] {
+    color: #D8B75E !important;
+  }
+
+  .dark [class*="border-[#DDD5C7]"],
+  .dark [class*="border-[#E5E0D6]"],
+  .dark [class*="border-[#D8D0C2]"],
+  .dark [class*="border-[#D6E0F5]"],
+  .dark [class*="border-[#DBEAFE]"],
+  .dark .border-gray-300,
+  .dark .border-stone-300,
+  .dark .border-slate-200,
+  .dark .border-slate-300 {
+    border-color: #273447 !important;
+  }
+
+  .dark .divide-stone-300 > :not([hidden]) ~ :not([hidden]) {
+    border-color: #273447 !important;
+  }
+
+  .dark [class*="shadow-[#83755E]/10"],
+  .dark [class*="shadow-slate-200/50"] {
+    box-shadow: none !important;
+  }
+}
diff --git a/frontend/src/layouts/Authenticated.tsx b/frontend/src/layouts/Authenticated.tsx
index 407878c..518391d 100644
--- a/frontend/src/layouts/Authenticated.tsx
+++ b/frontend/src/layouts/Authenticated.tsx
@@ -102,14 +102,14 @@ export default function LayoutAuthenticated({
 
   if (!isAuthReady) {
     return (
-      <div className={`${darkMode ? 'dark' : ''} min-h-screen bg-[#F6F3EC] text-[#0E1A2B]`}>
+      <div className={`${darkMode ? 'dark' : ''} min-h-screen bg-[#F6F3EC] text-[#0E1A2B] dark:bg-[#08111F] dark:text-slate-50`}>
         <div className='flex min-h-screen items-center justify-center px-5'>
-          <div className='w-full max-w-md rounded-xl border border-[#DDD5C7] bg-white p-6 text-center shadow-xl shadow-[#83755E]/10'>
-            <div className='mx-auto flex h-12 w-12 items-center justify-center rounded-md bg-[#0E1A2B] text-[#D8B75E]'>
+          <div className='w-full max-w-md rounded-xl border border-[#DDD5C7] bg-white p-6 text-center shadow-xl shadow-[#83755E]/10 dark:border-[#273447] dark:bg-[#111827] dark:shadow-none'>
+            <div className='mx-auto flex h-12 w-12 items-center justify-center rounded-md bg-[#0E1A2B] text-[#D8B75E] dark:bg-[#D8B75E] dark:text-[#08111F]'>
               <BaseIcon path={mdiShieldCheckOutline} size={26} />
             </div>
-            <h1 className='mt-5 text-xl font-semibold text-[#0E1A2B]'>Checking secure workspace access</h1>
-            <p className='mt-3 text-sm leading-6 text-[#6B7280]'>
+            <h1 className='mt-5 text-xl font-semibold text-[#0E1A2B] dark:text-slate-50'>Checking secure workspace access</h1>
+            <p className='mt-3 text-sm leading-6 text-[#6B7280] dark:text-slate-400'>
               We are verifying your session before opening the legal AI governance workspace.
             </p>
           </div>
@@ -123,7 +123,7 @@ export default function LayoutAuthenticated({
       <div
         className={`${layoutAsidePadding} ${
           isAsideMobileExpanded ? 'ml-80 lg:ml-0' : ''
-        } pt-14 min-h-screen w-screen transition-position lg:w-auto ${bgColor}  dark:bg-dark-800 dark:text-slate-100`}
+        } pt-14 min-h-screen w-screen transition-position lg:w-auto ${bgColor} dark:bg-[#08111F] dark:text-slate-100`}
       >
         <NavBar
           menu={menuNavBar}
@@ -141,7 +141,7 @@ export default function LayoutAuthenticated({
           >
             <BaseIcon path={mdiMenu} size="24" />
           </NavBarItemPlain>
-          <div className='hidden items-center gap-2 px-4 text-xs font-semibold uppercase tracking-[0.14em] text-[#7A5B13] 2xl:flex'>
+          <div className='hidden items-center gap-2 px-4 text-xs font-semibold uppercase tracking-[0.14em] text-[#7A5B13] dark:text-[#D8B75E] 2xl:flex'>
             <span className='h-2 w-2 rounded-full bg-emerald-500' />
             <span>Audit trail active</span>
           </div>
diff --git a/frontend/src/pages/ai_use_cases/ai_use_cases-list.tsx b/frontend/src/pages/ai_use_cases/ai_use_cases-list.tsx
index e3f985f..9abe40e 100644
--- a/frontend/src/pages/ai_use_cases/ai_use_cases-list.tsx
+++ b/frontend/src/pages/ai_use_cases/ai_use_cases-list.tsx
@@ -25,6 +25,7 @@ const Ai_use_casesTablesPage = () => {
   const [csvFile, setCsvFile] = useState<File | null>(null);
   const [isModalActive, setIsModalActive] = useState(false);
   const [showTableView, setShowTableView] = useState(false);
+  const actionButtonClass = 'min-h-[44px] w-full justify-center px-4 text-sm font-semibold';
 
   
   const { currentUser } = useAppSelector((state) => state.auth);
@@ -121,29 +122,54 @@ const Ai_use_casesTablesPage = () => {
             { label: 'Evidence', value: 'ROI tracked', helper: 'Hours saved, notes, and approvals become an audit trail.' },
           ]}
         >
-            {hasCreatePermission && <BaseButton href={'/ai_use_cases/ai_use_cases-new'} color='info' label='New AI intake'/>}
-          <BaseButton href={'/governance-workbench'} color='whiteDark' label='Governance workbench'/>
-          <BaseButton
-              color='info'
-              label='Add filter'
-              onClick={addFilter}
-          />
-          <BaseButton color='whiteDark' label='Export CSV' onClick={getAi_use_casesCSV} />
-          
+          <div className='grid w-full grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3'>
             {hasCreatePermission && (
               <BaseButton
-                color='whiteDark'
-                label='Upload CSV'
-                onClick={() => setIsModalActive(true)}
+                href={'/ai_use_cases/ai_use_cases-new'}
+                color='info'
+                label='New AI intake'
+                className={actionButtonClass}
               />
             )}
-          
-          <div className='md:inline-flex items-center ms-auto'>
-            <div id='delete-rows-button'></div>
-          </div>  
-          
-            <BaseButton href={'/ai_use_cases/ai_use_cases-table'} color='whiteDark' label='Table view'/>
-          
+            <BaseButton
+              href={'/governance-workbench'}
+              color='info'
+              outline
+              label='Governance workbench'
+              className={actionButtonClass}
+            />
+            <BaseButton
+                color='info'
+                outline
+                label='Add filter'
+                onClick={addFilter}
+                className={actionButtonClass}
+            />
+            <BaseButton
+              color='info'
+              outline
+              label='Export CSV'
+              onClick={getAi_use_casesCSV}
+              className={actionButtonClass}
+            />
+            {hasCreatePermission && (
+                <BaseButton
+                  color='info'
+                  outline
+                  label='Upload CSV'
+                  onClick={() => setIsModalActive(true)}
+                  className={actionButtonClass}
+                />
+            )}
+            <div id='delete-rows-button' className='contents'></div>
+            <BaseButton
+              href={'/ai_use_cases/ai_use_cases-table'}
+              color='info'
+              outline
+              label='Table view'
+              className={actionButtonClass}
+            />
+          </div>
         </LegalOpsPageIntro>
         
           <TableAi_use_cases
diff --git a/frontend/src/pages/ai_use_cases/ai_use_cases-table.tsx b/frontend/src/pages/ai_use_cases/ai_use_cases-table.tsx
index 1a2af38..539f259 100644
--- a/frontend/src/pages/ai_use_cases/ai_use_cases-table.tsx
+++ b/frontend/src/pages/ai_use_cases/ai_use_cases-table.tsx
@@ -6,11 +6,11 @@ import CardBox from '../../components/CardBox'
 import LayoutAuthenticated from '../../layouts/Authenticated'
 import SectionMain from '../../components/SectionMain'
 import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
+import LegalOpsPageIntro from '../../components/LegalOpsPageIntro'
 import { getPageTitle } from '../../config'
 import TableAi_use_cases from '../../components/Ai_use_cases/TableAi_use_cases'
 import BaseButton from '../../components/BaseButton'
 import axios from "axios";
-import Link from "next/link";
 import {useAppDispatch, useAppSelector} from "../../stores/hooks";
 import CardBoxModal from "../../components/CardBoxModal";
 import DragDropFilePicker from "../../components/DragDropFilePicker";
@@ -26,6 +26,7 @@ const Ai_use_casesTablesPage = () => {
   const [csvFile, setCsvFile] = useState<File | null>(null);
   const [isModalActive, setIsModalActive] = useState(false);
   const [showTableView, setShowTableView] = useState(false);
+  const actionButtonClass = 'min-h-[44px] w-full justify-center px-4 text-sm font-semibold';
 
   
   const { currentUser } = useAppSelector((state) => state.auth);
@@ -34,33 +35,33 @@ const Ai_use_casesTablesPage = () => {
   const dispatch = useAppDispatch();
 
 
-  const [filters] = useState([{label: 'UseCaseTitle', title: 'title'},{label: 'Description', title: 'description'},{label: 'BusinessGoal', title: 'business_goal'},{label: 'ReviewNotes', title: 'review_notes'},
+  const [filters] = useState([{label: 'Use case title', title: 'title'},{label: 'Description', title: 'description'},{label: 'Business goal', title: 'business_goal'},{label: 'Review notes', title: 'review_notes'},
           
-          {label: 'ExpectedHoursSaved', title: 'expected_hours_saved', number: 'true'},
-          {label: 'SubmittedAt', title: 'submitted_at', date: 'true'},{label: 'ApprovedAt', title: 'approved_at', date: 'true'},
+          {label: 'Expected hours saved', title: 'expected_hours_saved', number: 'true'},
+          {label: 'Submitted at', title: 'submitted_at', date: 'true'},{label: 'Approved at', title: 'approved_at', date: 'true'},
     
     
     {label: 'Owner', title: 'owner'},
     
     
     
-    {label: 'PracticeGroup', title: 'practice_group'},
+    {label: 'Practice group', title: 'practice_group'},
     
     
     
-    {label: 'MatterType', title: 'matter_type'},
+    {label: 'Matter type', title: 'matter_type'},
     
     
     
-    {label: 'DataClassification', title: 'data_classification'},
+    {label: 'Data classification', title: 'data_classification'},
     
     
     
-    {label: 'IntendedAITool', title: 'intended_tool'},
+    {label: 'Intended AI tool', title: 'intended_tool'},
     
     
               
-          {label: 'Status', title: 'status', type: 'enum', options: ['draft','submitted','risk_review','security_review','ethics_review','approved','rejected','needs_changes','retired']},{label: 'RiskLevel', title: 'risk_level', type: 'enum', options: ['low','medium','high','critical']},
+          {label: 'Status', title: 'status', type: 'enum', options: ['draft','submitted','risk_review','security_review','ethics_review','approved','rejected','needs_changes','retired']},{label: 'Risk level', title: 'risk_level', type: 'enum', options: ['low','medium','high','critical']},
   ]);
     
     const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_AI_USE_CASES');
@@ -106,41 +107,64 @@ const Ai_use_casesTablesPage = () => {
   return (
     <>
       <Head>
-        <title>{getPageTitle('Ai_use_cases')}</title>
+        <title>{getPageTitle('AI request register table')}</title>
       </Head>
       <SectionMain>
-        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Ai_use_cases" main>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="AI request register table" main>
         {''}
         </SectionTitleLineWithButton>
-        <CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
-          
-            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/ai_use_cases/ai_use_cases-new'} color='info' label='New Item'/>}
-          
-          <BaseButton
-              className={'mr-3'}
-              color='info'
-              label='Filter'
-              onClick={addFilter}
-          />
-          <BaseButton className={'mr-3'} color='info' label='Download CSV' onClick={getAi_use_casesCSV} />
-          
+        <LegalOpsPageIntro
+          eyebrow='AI governance intake'
+          title='Review proposed AI workflows in table view'
+          description='Use the table when you need dense scanning, filtering, CSV review, or quick edits across the AI request register.'
+          metrics={[
+            { label: 'View mode', value: 'Table', helper: 'Best for bulk review and governance cleanup.' },
+            { label: 'Review model', value: 'Human approval', helper: 'Partner, GC, security, and ethics review stay visible.' },
+            { label: 'Evidence', value: 'ROI tracked', helper: 'Hours saved, notes, and approvals become an audit trail.' },
+          ]}
+        >
+          <div className='grid w-full grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3'>
             {hasCreatePermission && (
               <BaseButton
+                href={'/ai_use_cases/ai_use_cases-new'}
                 color='info'
-                label='Upload CSV'
-                onClick={() => setIsModalActive(true)}
+                label='New AI intake'
+                className={actionButtonClass}
               />
             )}
-          
-          <div className='md:inline-flex items-center ms-auto'>
-            <div id='delete-rows-button'></div>
-            
-              <Link href={'/ai_use_cases/ai_use_cases-list'}>
-                Back to <span className='capitalize'>kanban</span>
-              </Link>
-            
+            <BaseButton
+                color='info'
+                outline
+                label='Add filter'
+                onClick={addFilter}
+                className={actionButtonClass}
+            />
+            <BaseButton
+              color='info'
+              outline
+              label='Export CSV'
+              onClick={getAi_use_casesCSV}
+              className={actionButtonClass}
+            />
+            {hasCreatePermission && (
+                <BaseButton
+                  color='info'
+                  outline
+                  label='Upload CSV'
+                  onClick={() => setIsModalActive(true)}
+                  className={actionButtonClass}
+                />
+            )}
+            <div id='delete-rows-button' className='contents'></div>
+            <BaseButton
+              href={'/ai_use_cases/ai_use_cases-list'}
+              color='info'
+              outline
+              label='Card view'
+              className={actionButtonClass}
+            />
           </div>
-        </CardBox>
+        </LegalOpsPageIntro>
         <CardBox className="mb-6" hasTable>
           <TableAi_use_cases
             filterItems={filterItems}
diff --git a/frontend/src/styles.ts b/frontend/src/styles.ts
index 35d5154..124f792 100644
--- a/frontend/src/styles.ts
+++ b/frontend/src/styles.ts
@@ -25,29 +25,29 @@ interface StyleObject {
 }
 
 export const white: StyleObject = {
-  aside: 'bg-[#FBF8F1] text-[#374151] dark:text-white',
+  aside: 'bg-[#FBF8F1] text-[#374151] dark:bg-[#0B1120] dark:text-slate-100',
   asideScrollbars: 'aside-scrollbars-light',
   asideBrand: '',
-  asideMenuItem: 'text-[#374151] hover:bg-[#F1E7C7]/70 hover:text-[#0E1A2B] dark:text-dark-500 dark:hover:text-white dark:hover:bg-dark-800',
-  asideMenuItemActive: 'font-semibold text-[#0E1A2B] dark:text-white',
+  asideMenuItem: 'text-[#374151] hover:bg-[#F1E7C7]/70 hover:text-[#0E1A2B] dark:text-slate-300 dark:hover:text-white dark:hover:bg-[#1E293B]',
+  asideMenuItemActive: 'font-semibold text-[#0E1A2B] dark:bg-[#172033] dark:text-white',
   asideMenuDropdown: 'bg-transparent',
-  navBarItemLabel: 'text-[#4B5563]',
-  navBarItemLabelHover: 'hover:text-[#0E1A2B]',
-  navBarItemLabelActiveColor: 'text-[#0E1A2B]',
-  overlay: 'from-[#F6F3EC] via-[#E9E1D2] to-[#F6F3EC]',
-  activeLinkColor: 'bg-[#F1E7C7]',
-  bgLayoutColor: 'bg-[#F6F3EC]',
-  iconsColor: 'text-[#7A5B13]',
-  cardsColor: 'bg-white',
-  focusRingColor: 'focus:ring focus:ring-[#D8B75E]/35 focus:border-[#D8B75E] focus:outline-none border-[#C9BFAE] dark:focus:ring-[#D8B75E] dark:focus:border-[#D8B75E]',
+  navBarItemLabel: 'text-[#4B5563] dark:text-slate-300',
+  navBarItemLabelHover: 'hover:text-[#0E1A2B] dark:hover:text-white',
+  navBarItemLabelActiveColor: 'text-[#0E1A2B] dark:text-white',
+  overlay: 'from-[#F6F3EC] via-[#E9E1D2] to-[#F6F3EC] dark:from-[#08111F] dark:via-[#0F172A] dark:to-[#08111F]',
+  activeLinkColor: 'bg-[#F1E7C7] dark:bg-[#1F2937]',
+  bgLayoutColor: 'bg-[#F6F3EC] dark:bg-[#08111F]',
+  iconsColor: 'text-[#7A5B13] dark:text-[#D8B75E]',
+  cardsColor: 'bg-white dark:bg-[#111827]',
+  focusRingColor: 'focus:ring focus:ring-[#D8B75E]/35 focus:border-[#D8B75E] focus:outline-none border-[#C9BFAE] dark:border-[#334155] dark:focus:ring-[#D8B75E]/35 dark:focus:border-[#D8B75E]',
   corners: 'rounded-lg',
-  cardsStyle: 'bg-white border border-[#DDD5C7] shadow-sm shadow-[#83755E]/10',
-  linkColor: 'text-[#7A5B13]',
-  websiteHeder: 'border-b border-[#DDD5C7]',
-  borders: 'border-[#DDD5C7]',
-  shadow: 'shadow-sm shadow-[#83755E]/10',
+  cardsStyle: 'bg-white border border-[#DDD5C7] shadow-sm shadow-[#83755E]/10 dark:bg-[#111827] dark:border-[#273447] dark:shadow-none',
+  linkColor: 'text-[#7A5B13] dark:text-[#D8B75E]',
+  websiteHeder: 'border-b border-[#DDD5C7] dark:border-[#273447]',
+  borders: 'border-[#DDD5C7] dark:border-[#273447]',
+  shadow: 'shadow-sm shadow-[#83755E]/10 dark:shadow-none',
   websiteSectionStyle: '',
-  textSecondary: 'text-[#6B7280]',
+  textSecondary: 'text-[#6B7280] dark:text-slate-400',
 }
    
 
@@ -57,8 +57,8 @@ export const white: StyleObject = {
 export const dataGridStyles = {
   '& .MuiDataGrid-cell': {
     alignItems: 'center',
-    borderColor: '#E5E0D6',
-    color: '#374151',
+    borderColor: 'var(--legal-grid-border-muted)',
+    color: 'var(--legal-grid-cell-text)',
     display: 'flex',
     fontSize: '0.9rem',
     lineHeight: 1.25,
@@ -68,7 +68,7 @@ export const dataGridStyles = {
   '& .MuiDataGrid-columnHeader': {
     minHeight: '58px !important',
     padding: '10px 18px',
-    color: '#0E1A2B',
+    color: 'var(--legal-grid-header-text)',
     fontWeight: 700,
   },
   '& .MuiDataGrid-columnHeaderCheckbox': {
@@ -79,11 +79,11 @@ export const dataGridStyles = {
     maxHeight: 'unset !important',
     borderStartStartRadius: 7,
     borderStartEndRadius: 7,
-    backgroundColor: '#FBF8F1',
-    borderColor: '#DDD5C7',
+    backgroundColor: 'var(--legal-grid-header-bg)',
+    borderColor: 'var(--legal-grid-border)',
   },
   '& .MuiDataGrid-columnHeaderTitle': {
-    color: '#0E1A2B',
+    color: 'var(--legal-grid-header-text)',
     fontSize: '0.72rem',
     fontWeight: 800,
     letterSpacing: '0.07em',
@@ -115,36 +115,36 @@ export const dataGridStyles = {
     paddingY: 0.5,
     borderEndStartRadius: 7,
     borderEndEndRadius: 7,
-    borderColor: '#DDD5C7',
-    backgroundColor: '#FBF8F1',
+    borderColor: 'var(--legal-grid-border)',
+    backgroundColor: 'var(--legal-grid-footer-bg)',
     minHeight: '60px',
   },
   '& .MuiDataGrid-root': {
-    border: '1px solid #DDD5C7',
+    border: '1px solid var(--legal-grid-border)',
     borderRadius: '12px',
     overflow: 'hidden',
-    backgroundColor: '#FFFFFF',
+    backgroundColor: 'var(--legal-grid-bg)',
   },
   '& .MuiDataGrid-row': {
-    borderColor: '#E5E0D6',
+    borderColor: 'var(--legal-grid-border-muted)',
   },
   '& .MuiDataGrid-row.Mui-selected': {
-    backgroundColor: '#FFF3C9',
+    backgroundColor: 'var(--legal-grid-selected-bg)',
   },
   '& .MuiDataGrid-row.Mui-selected:hover': {
-    backgroundColor: '#FFEDB1',
+    backgroundColor: 'var(--legal-grid-selected-hover-bg)',
   },
   '& .MuiDataGrid-row:hover': {
-    backgroundColor: '#FFF8E8',
+    backgroundColor: 'var(--legal-grid-hover-bg)',
   },
   '& .MuiDataGrid-iconButtonContainer .MuiIconButton-root': {
-    color: '#7A5B13',
+    color: 'var(--legal-grid-accent)',
   },
   '& .MuiCheckbox-root': {
-    color: '#8B7A61',
+    color: 'var(--legal-grid-checkbox)',
   },
   '& .MuiCheckbox-root.Mui-checked': {
-    color: '#7A5B13',
+    color: 'var(--legal-grid-accent)',
   },
 };