From 325221610fa79be9430bac4cce4ee5e66718ca09 Mon Sep 17 00:00:00 2001
From: michael <michael@modernfreedom.com>
Date: Thu, 5 Feb 2026 16:53:03 -0600
Subject: [PATCH] UI overhaul: white backgrounds, flat design, teal hero,
 sidebar flush-left nav

- Add teal-brand (#01A1A2) color to Tailwind config
- Hero: white bg, teal text, remove gradient circles/noise overlay, font-semibold
- Sidebar: stacked logo, lime COMPLIANCE AI, flush-left active items, remove blue dots
- ChecksOverview: remove gradient background and decorative blurs
- Campaigns: white bg, primary-blue table text, font-semibold headings
- Analytics: white bg, borderless shadow cards, sentence case headings
- Auditing: white bg, font-semibold heading
- Settings: white bg, remove tab container styling, flat cards, sentence case Proof types
- Profile: white bg, flat layout, active-blue question button, design system colors
- All page titles changed from font-bold to font-semibold

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/components/Analytics.tsx      | 10 +++----
 frontend/components/Auditing.tsx       |  4 +--
 frontend/components/Campaigns.tsx      | 26 +++++++++---------
 frontend/components/ChecksOverview.tsx |  9 ++-----
 frontend/components/Hero.tsx           | 18 ++++---------
 frontend/components/Profile.tsx        | 36 ++++++++++++-------------
 frontend/components/Settings.tsx       | 20 +++++++-------
 frontend/components/Sidebar.tsx        | 37 +++++++++++---------------
 frontend/index.html                    |  1 +
 9 files changed, 72 insertions(+), 89 deletions(-)

diff --git a/frontend/components/Analytics.tsx b/frontend/components/Analytics.tsx
index 2493b19..614669f 100755
--- a/frontend/components/Analytics.tsx
+++ b/frontend/components/Analytics.tsx
@@ -65,9 +65,9 @@ export const Analytics: React.FC = () => {
     ];
 
     return (
-        <div className="p-4 sm:p-6 lg:p-8 h-full bg-grey-100">
+        <div className="p-4 sm:p-6 lg:p-8 h-full bg-white">
             <header className="mb-8">
-                <h1 className="text-3xl lg:text-4xl font-bold text-primary-blue">Performance Analytics</h1>
+                <h1 className="text-3xl lg:text-4xl font-semibold text-primary-blue">Performance analytics</h1>
                 <p className="text-base lg:text-lg text-primary-blue mt-1">Overall usage and performance statistics for the tool.</p>
             </header>
 
@@ -77,7 +77,7 @@ export const Analytics: React.FC = () => {
                     {stats.map((stat) => {
                         const Icon = stat.icon;
                         return (
-                            <div key={stat.name} className="bg-grey-100 rounded-[10px] p-6 flex items-start border-2 border-grey-300 transition-all hover:shadow-lg hover:border-active-blue">
+                            <div key={stat.name} className="bg-white rounded-[10px] p-6 flex items-start shadow-sm transition-all hover:shadow-lg">
                                 <div className="p-3 rounded-full bg-white text-black-title mr-4 flex-shrink-0">
                                     <Icon className="h-9 w-9" />
                                 </div>
@@ -93,7 +93,7 @@ export const Analytics: React.FC = () => {
 
             {/* AI Performance Summary */}
             <section className="mt-10">
-                <h2 className="text-2xl font-bold text-primary-blue mb-4">AI Performance Summary</h2>
+                <h2 className="text-2xl font-semibold text-primary-blue mb-4">AI performance summary</h2>
                 <div className="bg-white border-2 border-electric-violet text-black-title p-6 rounded-[10px] shadow-md flex items-start gap-4">
                     <div className="flex-shrink-0">
                         <LightbulbIcon className="h-7 w-7 text-electric-violet" />
@@ -109,7 +109,7 @@ export const Analytics: React.FC = () => {
 
             {/* Agent Performance Table */}
             <section className="mt-10">
-                <h2 className="text-2xl font-bold text-primary-blue mb-4">Agent Performance (Last 7 Days)</h2>
+                <h2 className="text-2xl font-semibold text-primary-blue mb-4">Agent performance (last 7 days)</h2>
                 <div className="bg-white rounded-[10px] shadow-md overflow-hidden border border-grey-300">
                     <div className="overflow-x-auto">
                         <table className="min-w-full">
diff --git a/frontend/components/Auditing.tsx b/frontend/components/Auditing.tsx
index 0129f54..b47a145 100755
--- a/frontend/components/Auditing.tsx
+++ b/frontend/components/Auditing.tsx
@@ -163,9 +163,9 @@ export const Auditing: React.FC<AuditingProps> = ({ flaggedItems, resolvedItems,
     const [activeTab, setActiveTab] = useState<'Flags' | 'Resolutions' | 'Errors'>('Flags');
 
     return (
-        <div className="p-4 sm:p-6 lg:p-8 h-full bg-grey-100">
+        <div className="p-4 sm:p-6 lg:p-8 h-full bg-white">
             <header className="mb-8">
-                <h1 className="text-3xl lg:text-4xl font-bold text-primary-blue">Auditing</h1>
+                <h1 className="text-3xl lg:text-4xl font-semibold text-primary-blue">Auditing</h1>
                 <p className="text-base lg:text-lg text-primary-blue mt-1">Review and investigate all user-flagged feedback.</p>
             </header>
 
diff --git a/frontend/components/Campaigns.tsx b/frontend/components/Campaigns.tsx
index d03e996..7dfa755 100755
--- a/frontend/components/Campaigns.tsx
+++ b/frontend/components/Campaigns.tsx
@@ -364,7 +364,7 @@ const CampaignList: React.FC<{
     const isIndeterminate = selectedCampaigns.size > 0 && selectedCampaigns.size < filteredCampaigns.length;
 
     return (
-        <div className="p-4 sm:p-6 lg:p-8 h-full bg-grey-100">
+        <div className="p-4 sm:p-6 lg:p-8 h-full bg-white">
             <CampaignDeleteConfirmationModal
                 isOpen={!!campaignToDelete}
                 onClose={() => setCampaignToDelete(null)}
@@ -388,7 +388,7 @@ const CampaignList: React.FC<{
             <header className="mb-8">
                 <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
                     <div>
-                        <h1 className="text-3xl lg:text-4xl font-bold text-primary-blue">Campaigns</h1>
+                        <h1 className="text-3xl lg:text-4xl font-semibold text-primary-blue">Campaigns</h1>
                         <p className="text-base lg:text-lg text-primary-blue mt-1">Manage your campaigns and proof collections.</p>
                     </div>
                      <div className="flex items-center gap-4">
@@ -478,8 +478,8 @@ const CampaignList: React.FC<{
                                                     aria-label={`Select ${campaign.name}`}
                                                 />
                                             </td>
-                                            <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-black-title">{campaign.name}</td>
-                                            <td className="px-6 py-4 whitespace-nowrap text-sm text-black-title">{campaign.proofs}</td>
+                                            <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-primary-blue">{campaign.name}</td>
+                                            <td className="px-6 py-4 whitespace-nowrap text-sm text-primary-blue">{campaign.proofs}</td>
                                             <td className="px-6 py-4 whitespace-nowrap text-sm w-40">
                                                 <div className="relative">
                                                     <select
@@ -495,9 +495,9 @@ const CampaignList: React.FC<{
                                                     <ChevronDownIcon className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2 h-full w-4 text-black-title" />
                                                 </div>
                                             </td>
-                                            <td className="px-6 py-4 whitespace-nowrap text-sm text-black-title">{campaign.agencyLead}</td>
-                                            <td className="px-6 py-4 whitespace-nowrap text-sm text-black-title">{campaign.agency}</td>
-                                            <td className="px-6 py-4 whitespace-nowrap text-sm text-black-title">{formatDate(campaign.lastModified)}</td>
+                                            <td className="px-6 py-4 whitespace-nowrap text-sm text-primary-blue">{campaign.agencyLead}</td>
+                                            <td className="px-6 py-4 whitespace-nowrap text-sm text-primary-blue">{campaign.agency}</td>
+                                            <td className="px-6 py-4 whitespace-nowrap text-sm text-primary-blue">{formatDate(campaign.lastModified)}</td>
                                             <td className="px-4 py-4 whitespace-nowrap text-sm text-right">
                                                 <button
                                                     onClick={(e) => handleSingleDelete(campaign, e)}
@@ -1061,7 +1061,7 @@ const CampaignDetail: React.FC<{
     };
 
     return (
-        <div className="p-4 sm:p-6 lg:p-8 h-full bg-grey-100">
+        <div className="p-4 sm:p-6 lg:p-8 h-full bg-white">
             <DeleteConfirmationModal
                 isOpen={!!proofToDelete}
                 onClose={() => setProofToDelete(null)}
@@ -1089,7 +1089,7 @@ const CampaignDetail: React.FC<{
                         <ArrowLeftIcon className="h-6 w-6" />
                     </button>
                     <div>
-                        <h1 className="text-3xl lg:text-4xl font-bold text-primary-blue">{campaignName}</h1>
+                        <h1 className="text-3xl lg:text-4xl font-semibold text-primary-blue">{campaignName}</h1>
                         <p className="text-base lg:text-lg text-grey-900 mt-1">Proof overview and compliance status.</p>
                     </div>
                 </div>
@@ -1450,7 +1450,7 @@ const ProofDetailView: React.FC<{
     }
 
     return (
-        <div className="p-4 sm:p-6 lg:p-8 h-full bg-grey-100">
+        <div className="p-4 sm:p-6 lg:p-8 h-full bg-white">
             <header className="mb-8">
                 <div className="flex items-center gap-4">
                     <button
@@ -1462,7 +1462,7 @@ const ProofDetailView: React.FC<{
                         <ArrowLeftIcon className="h-6 w-6" />
                     </button>
                     <div>
-                        <h1 className="text-3xl lg:text-4xl font-bold text-primary-blue">{proof.proofName}</h1>
+                        <h1 className="text-3xl lg:text-4xl font-semibold text-primary-blue">{proof.proofName}</h1>
                         <div className="flex items-center gap-2 mt-2 text-sm text-grey-700 font-medium">
                             <span>{proof.channel}</span>
                             <span className="text-grey-300">&bull;</span>
@@ -1482,7 +1482,7 @@ const ProofDetailView: React.FC<{
                 <div className="lg:col-span-1">
                     <div className="sticky top-8 flex flex-col gap-y-6">
                         <div>
-                             <h2 className="text-2xl font-bold text-primary-blue mb-4">
+                             <h2 className="text-2xl font-semibold text-primary-blue mb-4">
                                 Proof Preview
                             </h2>
                             <ProofPreview
@@ -1494,7 +1494,7 @@ const ProofDetailView: React.FC<{
 
                         <div>
                             <div className="flex items-center justify-between mb-3 gap-2">
-                                <h3 className="text-xl font-bold text-primary-blue flex items-center gap-2">
+                                <h3 className="text-xl font-semibold text-primary-blue flex items-center gap-2">
                                     <HistoryIcon className="h-6 w-6 text-active-blue"/>
                                     Version History
                                 </h3>
diff --git a/frontend/components/ChecksOverview.tsx b/frontend/components/ChecksOverview.tsx
index 3954870..a066a9a 100755
--- a/frontend/components/ChecksOverview.tsx
+++ b/frontend/components/ChecksOverview.tsx
@@ -41,12 +41,7 @@ const specialistAgents: CheckDetail[] = [
 
 export const ChecksOverview: React.FC = () => {
     return (
-        <div className="relative bg-gradient-to-br from-lime/20 via-white to-lime/10 py-12 sm:py-16 w-full">
-            {/* Decorative Background */}
-            <div className="absolute inset-0 pointer-events-none">
-                 <div className="absolute top-0 left-1/4 w-[800px] h-[800px] bg-lime/30 rounded-full blur-3xl -translate-y-1/2 mix-blend-multiply"></div>
-                 <div className="absolute bottom-0 right-0 w-[600px] h-[600px] bg-success-light rounded-full blur-3xl translate-y-1/3 mix-blend-multiply"></div>
-            </div>
+        <div className="relative bg-white py-12 sm:py-16 w-full">
 
             <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
                 {/* Header */}
@@ -55,7 +50,7 @@ export const ChecksOverview: React.FC = () => {
                         <span className="w-2 h-2 rounded-full bg-success mr-2 animate-pulse"></span>
                         Intelligent Workflow
                     </div>
-                    <h2 className="text-3xl md:text-4xl font-extrabold text-primary-blue tracking-tight mb-4">
+                    <h2 className="text-3xl md:text-4xl font-semibold text-primary-blue tracking-tight mb-4">
                         Orchestrated by AI
                     </h2>
                     <p className="text-lg text-black-title leading-relaxed">
diff --git a/frontend/components/Hero.tsx b/frontend/components/Hero.tsx
index 331b2db..84b5e1b 100755
--- a/frontend/components/Hero.tsx
+++ b/frontend/components/Hero.tsx
@@ -14,36 +14,28 @@ const ArrowRightIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
 
 export const Hero: React.FC<HeroProps> = ({ onGetStarted }) => {
   return (
-    <div className="relative overflow-hidden bg-primary-blue min-h-[350px] sm:min-h-[400px] md:min-h-[500px] flex items-center">
-        {/* Abstract background elements */}
-        <div className="absolute top-[-20%] right-[-10%] w-[600px] h-[600px] rounded-full bg-active-blue/20 blur-3xl pointer-events-none"></div>
-        <div className="absolute bottom-[-20%] left-[-10%] w-[500px] h-[500px] rounded-full bg-electric-violet/20 blur-3xl pointer-events-none"></div>
-
-        {/* Grid Pattern Overlay */}
-        <div className="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-20 pointer-events-none"></div>
-
+    <div className="relative overflow-hidden bg-white min-h-[350px] sm:min-h-[400px] md:min-h-[500px] flex items-center">
         <div className="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-24 relative z-10 w-full">
             <div className="max-w-3xl">
-                <div className="inline-flex items-center px-3 py-1 rounded-full bg-active-blue/10 border border-active-blue/20 text-cyan-brand text-xs font-bold uppercase tracking-widest mb-6">
-                    <span className="w-2 h-2 rounded-full bg-cyan-brand mr-2 animate-pulse"></span>
+                <div className="text-teal-brand text-xs font-bold uppercase tracking-widest mb-6">
                     AI-Powered Compliance
                 </div>
 
-                <h1 className="text-5xl md:text-7xl font-extrabold text-white leading-tight mb-6">
+                <h1 className="text-5xl md:text-7xl font-semibold text-teal-brand leading-tight mb-6">
                     Mod Comms <br/>
                     <span className="text-electric-violet">
                         Intelligent Review
                     </span>
                 </h1>
 
-                <p className="text-lg md:text-xl text-slate-300 mb-10 leading-relaxed max-w-2xl">
+                <p className="text-lg md:text-xl text-teal-brand mb-10 leading-relaxed max-w-2xl">
                     Streamline your creative approval process. Mod Comms analyses your proofs against guidelines and best practice in seconds, not days.
                 </p>
 
                 <div className="flex flex-col sm:flex-row gap-4">
                     <button
                         onClick={onGetStarted}
-                        className="group inline-flex items-center justify-center px-8 py-4 text-base font-bold text-white bg-active-blue rounded-full shadow-lg shadow-active-blue/30 hover:bg-active-blue/90 transition-all duration-300"
+                        className="group inline-flex items-center justify-center px-8 py-4 text-base font-bold text-white bg-active-blue rounded-full hover:bg-active-blue/90 transition-all duration-300"
                     >
                         Start Analysis
                         <ArrowRightIcon className="ml-2 h-5 w-5 transform group-hover:translate-x-1 transition-transform" />
diff --git a/frontend/components/Profile.tsx b/frontend/components/Profile.tsx
index 5edb1e5..38991bd 100755
--- a/frontend/components/Profile.tsx
+++ b/frontend/components/Profile.tsx
@@ -73,35 +73,35 @@ export const Profile: React.FC<ProfileProps> = ({ onLogout, msalInstance }) => {
     };
 
     return (
-        <div className="p-4 sm:p-6 lg:p-8 h-full bg-grey-100">
+        <div className="p-4 sm:p-6 lg:p-8 h-full bg-white">
             <header className="mb-8">
-                <h1 className="text-3xl lg:text-4xl font-bold text-primary-blue">Your Profile</h1>
-                <p className="text-base lg:text-lg text-gray-600 mt-1">View your account details and manage settings.</p>
+                <h1 className="text-3xl lg:text-4xl font-semibold text-primary-blue">Your Profile</h1>
+                <p className="text-base lg:text-lg text-grey-700 mt-1">View your account details and manage settings.</p>
             </header>
 
             <div className="max-w-3xl">
-                <section className="bg-white rounded-lg shadow-md p-6 sm:p-8 border border-gray-200">
-                    <h2 className="text-2xl font-bold text-primary-blue mb-6">Account Information</h2>
+                <section className="p-6 sm:p-8">
+                    <h2 className="text-2xl font-semibold text-primary-blue mb-6">Account Information</h2>
                     <div className="grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-5">
                         {Object.entries(userDetails).map(([key, value]) => (
                             <div key={key}>
-                                <p className="text-sm font-semibold text-gray-500 tracking-wide uppercase">{key}</p>
-                                <p className="text-lg text-gray-800 mt-1">{value}</p>
+                                <p className="text-sm font-semibold text-grey-700 tracking-wide uppercase">{key}</p>
+                                <p className="text-lg text-black-title mt-1">{value}</p>
                             </div>
                         ))}
                     </div>
 
-                    <div className="border-t border-gray-200 mt-8 pt-6 flex flex-col sm:flex-row gap-3">
-                        <button 
-                            onClick={handleLogout} 
-                            className="flex items-center justify-center gap-2 bg-red-600 text-white font-semibold py-2 px-4 rounded-md hover:bg-red-700 transition-colors duration-300"
+                    <div className="border-t border-grey-300 mt-8 pt-6 flex flex-col sm:flex-row gap-3">
+                        <button
+                            onClick={handleLogout}
+                            className="flex items-center justify-center gap-2 bg-error text-white font-semibold py-2 px-4 rounded-md hover:bg-error/90 transition-colors duration-300"
                         >
                             <LogoutIcon className="h-5 w-5" />
                             Logout
                         </button>
-                        <button 
+                        <button
                             onClick={handleToggleQuestionForm}
-                            className="flex items-center justify-center gap-2 bg-gray-200 text-gray-800 font-semibold py-2 px-4 rounded-md hover:bg-gray-300 transition-colors duration-300"
+                            className="flex items-center justify-center gap-2 text-active-blue hover:text-active-blue/80 bg-transparent font-semibold py-2 px-4 rounded-md transition-colors duration-300"
                         >
                             <QuestionMarkIcon className="h-5 w-5" />
                             Got a question?
@@ -110,10 +110,10 @@ export const Profile: React.FC<ProfileProps> = ({ onLogout, msalInstance }) => {
                 </section>
 
                 {isQuestionFormVisible && (
-                    <section className="mt-8 bg-white rounded-lg shadow-md p-6 sm:p-8 border border-gray-200">
-                        <h2 className="text-2xl font-bold text-primary-blue mb-4">Ask a Question</h2>
+                    <section className="mt-8 p-6 sm:p-8">
+                        <h2 className="text-2xl font-semibold text-primary-blue mb-4">Ask a Question</h2>
                         <form onSubmit={handleSubmitQuestion}>
-                            <p className="text-gray-600 mb-4">Your question will be sent to the OLIVER Agency support team.</p>
+                            <p className="text-grey-700 mb-4">Your question will be sent to the OLIVER Agency support team.</p>
                             {submitStatus && (
                                 <div className={`mb-4 p-3 rounded-md ${submitStatus.type === 'success' ? 'bg-green-50 text-green-700 border border-green-200' : 'bg-red-50 text-red-700 border border-red-200'}`}>
                                     {submitStatus.message}
@@ -122,7 +122,7 @@ export const Profile: React.FC<ProfileProps> = ({ onLogout, msalInstance }) => {
                             <textarea
                                 value={question}
                                 onChange={(e) => setQuestion(e.target.value)}
-                                className="w-full p-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-active-blue focus:border-active-blue transition"
+                                className="w-full p-3 border border-grey-300 rounded-md focus:ring-2 focus:ring-active-blue focus:border-active-blue transition text-black-title"
                                 placeholder="Type your question here..."
                                 rows={5}
                                 required
@@ -131,7 +131,7 @@ export const Profile: React.FC<ProfileProps> = ({ onLogout, msalInstance }) => {
                             <div className="mt-4 flex justify-end">
                                 <button
                                     type="submit"
-                                    className="bg-active-blue text-white font-semibold py-2 px-5 rounded-md hover:bg-primary-blue transition-colors duration-300 disabled:bg-gray-400 disabled:cursor-not-allowed flex items-center gap-2"
+                                    className="bg-active-blue text-white font-semibold py-2 px-5 rounded-md hover:bg-primary-blue transition-colors duration-300 disabled:bg-grey-300 disabled:cursor-not-allowed flex items-center gap-2"
                                     disabled={!question.trim() || isSubmitting}
                                 >
                                     {isSubmitting ? (
diff --git a/frontend/components/Settings.tsx b/frontend/components/Settings.tsx
index 1134dd4..b38af31 100755
--- a/frontend/components/Settings.tsx
+++ b/frontend/components/Settings.tsx
@@ -30,8 +30,8 @@ const ManagementCard: React.FC<ManagementCardProps> = ({ title, items, onAdd, on
     };
 
     return (
-        <div className="bg-white rounded-[10px] shadow-md p-6 border border-grey-300 flex flex-col h-full">
-            <h2 className="text-xl font-bold text-primary-blue mb-4">{title}</h2>
+        <div className="p-6 flex flex-col h-full">
+            <h2 className="text-xl font-semibold text-primary-blue mb-4">{title}</h2>
 
             <form onSubmit={handleSubmit} className="flex gap-2 mb-4">
                 <input
@@ -159,8 +159,8 @@ const UsersTab: React.FC = () => {
     return (
         <div className="space-y-8">
             {/* Add User Section */}
-            <div className="bg-white rounded-[10px] shadow-md p-6 border border-grey-300">
-                <h3 className="text-lg font-bold text-primary-blue mb-4 flex items-center gap-2">
+            <div className="p-6">
+                <h3 className="text-lg font-semibold text-primary-blue mb-4 flex items-center gap-2">
                     <PlusIcon className="h-5 w-5 text-active-blue" />
                     Add New User
                 </h3>
@@ -210,7 +210,7 @@ const UsersTab: React.FC = () => {
             </div>
 
             {/* User List */}
-            <div className="bg-white rounded-[10px] shadow-md overflow-hidden border border-grey-300">
+            <div className="overflow-hidden">
                 <div className="overflow-x-auto">
                     <table className="min-w-full">
                         <thead className="bg-lime">
@@ -321,9 +321,9 @@ export const Settings: React.FC<SettingsProps> = ({
 
 
     return (
-        <div className="p-4 sm:p-6 lg:p-8 h-full bg-grey-100 flex flex-col">
+        <div className="p-4 sm:p-6 lg:p-8 h-full bg-white flex flex-col">
             <header className="mb-6 flex-shrink-0">
-                <h1 className="text-3xl lg:text-4xl font-bold text-primary-blue">Settings</h1>
+                <h1 className="text-3xl lg:text-4xl font-semibold text-primary-blue">Settings</h1>
                 <p className="text-base lg:text-lg text-primary-blue mt-1">
                     Configure application defaults and user access.
                 </p>
@@ -331,13 +331,13 @@ export const Settings: React.FC<SettingsProps> = ({
 
             <div className="flex-1 flex flex-col min-h-0">
                 {/* Tabs Header */}
-                <div className="border-b border-grey-300 bg-white px-4 rounded-t-[10px] shadow-sm flex-shrink-0">
+                <div className="border-b border-grey-300 flex-shrink-0">
                     <nav className="-mb-px flex space-x-8 overflow-x-auto" aria-label="Tabs">
                         {[
                             { id: 'Campaigns', label: 'Campaigns' },
                             { id: 'Channels', label: 'Channels' },
                             { id: 'SubChannels', label: 'Sub-channels' },
-                            { id: 'ProofTypes', label: 'Proof Types' },
+                            { id: 'ProofTypes', label: 'Proof types' },
                             { id: 'Users', label: 'Users' },
                             { id: 'Beta', label: '[Beta]' },
                         ].map((tab) => (
@@ -475,7 +475,7 @@ export const Settings: React.FC<SettingsProps> = ({
                     {activeTab === 'Beta' && (
                         <div className="max-w-3xl space-y-6">
                             <div className="bg-white rounded-[10px] shadow-md p-6 border border-grey-300">
-                                <h2 className="text-xl font-bold text-primary-blue mb-2 flex items-center gap-2">
+                                <h2 className="text-xl font-semibold text-primary-blue mb-2 flex items-center gap-2">
                                     <span className="relative flex h-3 w-3">
                                       <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-electric-violet opacity-75"></span>
                                       <span className="relative inline-flex rounded-full h-3 w-3 bg-electric-violet"></span>
diff --git a/frontend/components/Sidebar.tsx b/frontend/components/Sidebar.tsx
index 7a3b6d4..14c330e 100755
--- a/frontend/components/Sidebar.tsx
+++ b/frontend/components/Sidebar.tsx
@@ -29,23 +29,21 @@ export const Sidebar: React.FC<SidebarProps> = ({ activeItem, onNavigate, userNa
     return (
         <aside className="w-72 flex-shrink-0 bg-primary-blue text-slate-200 flex flex-col border-r border-white/10 font-sans">
             {/* Brand Header */}
-            <div className="h-24 flex items-center px-8 border-b border-white/10">
-                <BarclaysLogo className="h-8 w-auto text-cyan-brand" />
-                <div className="ml-3 flex flex-col">
-                     <span className="text-lg font-bold tracking-tight text-white leading-tight">
-                        Mod Comms
-                    </span>
-                    <span className="text-xs text-electric-violet uppercase tracking-widest font-semibold">
-                        Compliance AI
-                    </span>
-                    <span className="text-xs text-grey-700 tracking-wider mt-0.5">
-                        powered by <span className="font-bold">OLIVER</span>
-                    </span>
-                </div>
+            <div className="py-6 px-8 border-b border-white/10 flex flex-col items-center text-center">
+                <BarclaysLogo className="h-10 w-auto text-cyan-brand mb-2" />
+                <span className="text-lg font-bold tracking-tight text-white leading-tight">
+                    Mod Comms
+                </span>
+                <span className="text-xs text-lime uppercase tracking-widest font-semibold">
+                    Compliance AI
+                </span>
+                <span className="text-xs text-grey-700 tracking-wider mt-0.5">
+                    powered by <span className="font-bold">OLIVER</span>
+                </span>
             </div>
 
             {/* Navigation */}
-            <nav className="flex-1 px-4 py-8 space-y-2 overflow-y-auto">
+            <nav className="flex-1 pr-4 pl-0 py-8 space-y-2 overflow-y-auto">
                 {navigation.map((item) => {
                     const Icon = item.icon;
                     const isActive = item.name === activeItem;
@@ -55,21 +53,18 @@ export const Sidebar: React.FC<SidebarProps> = ({ activeItem, onNavigate, userNa
                         <button
                             key={item.name}
                             onClick={() => !isComingSoon && onNavigate(item.name)}
-                            className={`group w-full flex items-center px-4 py-3.5 text-left text-sm font-medium rounded-[10px] transition-all duration-300 ease-in-out ${
+                            className={`group w-full flex items-center pl-8 pr-4 py-3.5 text-left text-sm font-medium transition-all duration-300 ease-in-out ${
                                 isActive
-                                ? 'bg-white text-primary-blue shadow-lg'
+                                ? 'bg-white text-primary-blue shadow-lg rounded-r-[10px] rounded-l-none'
                                 : isComingSoon
-                                ? 'text-slate-600 cursor-not-allowed'
-                                : 'text-slate-300 hover:bg-white/10 hover:text-white'
+                                ? 'text-slate-600 cursor-not-allowed rounded-[10px]'
+                                : 'text-slate-300 hover:bg-white/10 hover:text-white rounded-[10px]'
                             }`}
                             aria-current={isActive ? 'page' : undefined}
                             disabled={isComingSoon}
                         >
                             <Icon className={`h-5 w-5 mr-4 transition-transform duration-300 ${isActive ? 'scale-110' : 'group-hover:scale-110'}`} />
                             <span className="flex-1 tracking-wide">{item.name}</span>
-                            {isActive && (
-                                <div className="w-1.5 h-1.5 rounded-full bg-active-blue"></div>
-                            )}
                         </button>
                     );
                 })}
diff --git a/frontend/index.html b/frontend/index.html
index 663ed12..1ece61c 100755
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -25,6 +25,7 @@
               'electric-violet': '#7A0FF9',
               'lime': '#C3FB5A',
               'cyan-brand': '#00AEEF',
+              'teal-brand': '#01A1A2',
 
               // Functional Colors
               'grey-100': '#F6F6F6',