From 2ae614989111f3b8829f1d031c06ce25f4200434 Mon Sep 17 00:00:00 2001
From: jeremymayo <jeremydmayo@gmail.com>
Date: Wed, 17 Dec 2025 12:27:23 -0600
Subject: [PATCH 1/4] wip

---
 public/img/themes/servicedesk/espace_logo.svg |  26 ++++
 src/app/demo/servicedesk/Home.jsx             |  44 +++----
 src/app/demo/servicedesk/cases/page.jsx       |  58 ++++-----
 src/app/demo/servicedesk/config.js            |  36 +++---
 src/app/demo/servicedesk/success/page.jsx     |  20 +--
 src/app/demo/servicedesk/training/page.jsx    |  56 ++++-----
 src/components/Demo/components/Auth/Auth.jsx  |  47 +++++--
 src/global.css                                | 116 ++++++++++++++----
 8 files changed, 265 insertions(+), 138 deletions(-)
 create mode 100644 public/img/themes/servicedesk/espace_logo.svg

diff --git a/public/img/themes/servicedesk/espace_logo.svg b/public/img/themes/servicedesk/espace_logo.svg
new file mode 100644
index 00000000..9c28084d
--- /dev/null
+++ b/public/img/themes/servicedesk/espace_logo.svg
@@ -0,0 +1,26 @@
+<svg width="180" height="40" viewBox="0 0 180 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <!-- E-Space Logo -->
+  <defs>
+    <linearGradient id="spaceGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#06B6D4;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#1E3A8A;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  
+  <!-- Satellite orbit icon -->
+  <circle cx="20" cy="20" r="15" stroke="url(#spaceGradient)" stroke-width="2" fill="none"/>
+  <circle cx="20" cy="20" r="3" fill="#06B6D4"/>
+  <circle cx="32" cy="12" r="2.5" fill="#06B6D4"/>
+  <line x1="20" y1="20" x2="32" y2="12" stroke="#06B6D4" stroke-width="1.5"/>
+  
+  <!-- E-Space Text -->
+  <text x="45" y="27" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="#F1F5F9">
+    E-Space
+  </text>
+  
+  <!-- Tagline -->
+  <text x="45" y="35" font-family="Arial, sans-serif" font-size="8" fill="#06B6D4">
+    SATELLITE CONNECTIVITY
+  </text>
+</svg>
+
diff --git a/src/app/demo/servicedesk/Home.jsx b/src/app/demo/servicedesk/Home.jsx
index d5989b11..43fbddc6 100644
--- a/src/app/demo/servicedesk/Home.jsx
+++ b/src/app/demo/servicedesk/Home.jsx
@@ -21,7 +21,7 @@ import {
   MessageSquare
 } from 'lucide-react';
 
-export const description = "Service Excellence Platform - Customer service analytics with real-time metrics, case management, and training insights to drive customer satisfaction and renewals";
+export const description = "E-Space Support Hub - Satellite network support analytics with real-time metrics, ticket management, and customer onboarding insights to ensure mission-critical connectivity";
 
 export const Home = () => {
   const [showFilterPopup, setShowFilterPopup] = useState(false);
@@ -310,17 +310,17 @@ export const Home = () => {
         <div className="flex items-center justify-between">
           <div>
             <h1 className="text-3xl font-bold tracking-tight text-white mb-2">
-              Service Excellence Dashboard
+              E-Space Support Dashboard
             </h1>
             <p className="text-slate-300">
-              Real-time insights to build trust, drive renewals, and showcase premium service
+              Real-time satellite network insights to ensure mission-critical connectivity and customer success
             </p>
           </div>
           <div className="flex items-center gap-4">
             <div className="flex items-center gap-2">
-              <div className="flex items-center gap-2 px-3 py-2 bg-green-100 text-green-800 rounded-lg">
-                <div className="w-2 h-2 bg-green-500 rounded-full"></div>
-                <span className="text-sm font-medium">System Healthy</span>
+              <div className="flex items-center gap-2 px-3 py-2 bg-cyan-900/50 text-cyan-300 rounded-lg border border-cyan-500/30">
+                <div className="w-2 h-2 bg-cyan-400 rounded-full animate-pulse"></div>
+                <span className="text-sm font-medium">Satellite Network Online</span>
               </div>
             </div>
           </div>
@@ -338,10 +338,10 @@ export const Home = () => {
           <div className="flex justify-center items-center gap-4 my-4">
             <button
               onClick={() => setShowFilterPopup(true)}
-              className="flex items-center gap-2 px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors shadow-lg"
+              className="flex items-center gap-2 px-6 py-3 bg-cyan-600 hover:bg-cyan-700 text-white rounded-lg transition-colors shadow-lg"
             >
               <Filter className="h-5 w-5" />
-              <span className="font-medium">Case Priority: {casePriority.charAt(0).toUpperCase() + casePriority.slice(1)}</span>
+              <span className="font-medium">Ticket Priority: {casePriority.charAt(0).toUpperCase() + casePriority.slice(1)}</span>
             </button>
 
             {/* Action Button - Shows when marks are selected */}
@@ -349,17 +349,17 @@ export const Home = () => {
               <button
                 onClick={() => {
                   const dataOnly = selectedMarks.map((mark, index) =>
-                    `Case ${index + 1}:
+                    `Ticket ${index + 1}:
 ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n')}`
                   ).join('\n\n');
 
                   setEditableSlackMessage(dataOnly);
                   setShowSlackModal(true);
                 }}
-                className="flex items-center gap-2 px-6 py-3 bg-green-600 hover:bg-green-700 text-white rounded-lg transition-colors shadow-lg animate-pulse"
+                className="flex items-center gap-2 px-6 py-3 bg-cyan-600 hover:bg-cyan-700 text-white rounded-lg transition-colors shadow-lg animate-pulse"
               >
                 <MessageSquare className="h-5 w-5" />
-                <span className="font-medium">Share Case Update ({selectedMarks.length})</span>
+                <span className="font-medium">Share Ticket Update ({selectedMarks.length})</span>
               </button>
             )}
           </div>
@@ -369,11 +369,11 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
             <Card className="bg-slate-800 shadow-lg border-slate-700">
               <CardHeader>
                 <CardTitle className="flex items-center gap-2 text-white">
-                  <TrendingUp className="h-5 w-5 text-blue-400" />
-                  Case Management
+                  <TrendingUp className="h-5 w-5 text-cyan-400" />
+                  Support Ticket Management
                 </CardTitle>
                 <CardDescription className="text-slate-300">
-                  Track open, closed cases and response times
+                  Track open tickets, network issues, and response times
                 </CardDescription>
               </CardHeader>
               <CardContent className="flex items-center justify-center p-0 xs:p-6 xs:pt-0">
@@ -416,8 +416,8 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
           <div className="absolute top-32 left-1/2 transform -translate-x-1/2 bg-slate-800 rounded-lg shadow-xl p-6 max-w-md w-full mx-4" onClick={(e) => e.stopPropagation()}>
             <div className="flex items-center justify-between mb-6">
               <h3 className="text-xl font-semibold text-white flex items-center gap-2">
-                <Filter className="h-5 w-5 text-blue-400" />
-                Filter by Case Priority
+                <Filter className="h-5 w-5 text-cyan-400" />
+                Filter by Ticket Priority
               </h3>
               <button
                 onClick={() => setShowFilterPopup(false)}
@@ -437,7 +437,7 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
                   }}
                   className={`w-full text-left p-4 rounded-lg transition-colors border ${
                     casePriority === priority
-                      ? 'bg-blue-600 border-blue-600 text-white'
+                      ? 'bg-cyan-600 border-cyan-600 text-white'
                       : 'bg-slate-700 border-slate-600 text-slate-200 hover:bg-slate-600'
                   }`}
                 >
@@ -467,8 +467,8 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
           <div className="bg-slate-800 rounded-lg shadow-xl p-6 max-w-2xl w-full mx-4 max-h-[90vh] overflow-y-auto" onClick={(e) => e.stopPropagation()}>
             <div className="flex items-center justify-between mb-6">
               <h3 className="text-xl font-semibold text-white flex items-center gap-2">
-                <MessageSquare className="h-5 w-5 text-green-500" />
-                Share Case Update
+                <MessageSquare className="h-5 w-5 text-cyan-400" />
+                Share Ticket Update
               </h3>
               <button
                 onClick={() => setShowSlackModal(false)}
@@ -485,7 +485,7 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
                 <textarea
                   value={editableSlackMessage}
                   onChange={(e) => setEditableSlackMessage(e.target.value)}
-                  className="w-full h-48 bg-slate-800 border border-slate-600 rounded-lg p-3 text-slate-200 font-mono text-sm resize-none focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent"
+                  className="w-full h-48 bg-slate-800 border border-slate-600 rounded-lg p-3 text-slate-200 font-mono text-sm resize-none focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-transparent"
                   placeholder="Type your message here..."
                 />
               </div>
@@ -509,12 +509,12 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
                         alert('Please enter a message before sending.');
                         return;
                       }
-                      alert(`Demo: Message sent to team!\n\nMessage: ${editableSlackMessage}`);
+                      alert(`Demo: Message sent to E-Space support team!\n\nMessage: ${editableSlackMessage}`);
                       setShowSlackModal(false);
                       setSelectedMarks([]);
                       setEditableSlackMessage('');
                     }}
-                    className="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg transition-colors font-semibold flex items-center gap-2"
+                    className="px-4 py-2 bg-cyan-600 hover:bg-cyan-700 text-white rounded-lg transition-colors font-semibold flex items-center gap-2"
                   >
                     <MessageSquare className="h-4 w-4" />
                     Send to Team
diff --git a/src/app/demo/servicedesk/cases/page.jsx b/src/app/demo/servicedesk/cases/page.jsx
index f998b900..22cc573d 100644
--- a/src/app/demo/servicedesk/cases/page.jsx
+++ b/src/app/demo/servicedesk/cases/page.jsx
@@ -150,7 +150,7 @@ const CasesContent = () => {
 
     // Generate message content for each selected mark
     const dataOnly = selectedMarks.map((mark, index) =>
-      `Case ${index + 1}:
+      `Ticket ${index + 1}:
 ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n')}`
     ).join('\n\n');
 
@@ -163,15 +163,15 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
       <main className="flex flex-1 flex-col gap-6 p-4 md:gap-8 md:p-8">
         {/* Service Portal Elements Row */}
         <div className="grid gap-6 lg:grid-cols-3">
-          {/* Case Queue Status */}
+          {/* Ticket Queue Status */}
           <Card className="bg-slate-800 shadow-lg border-slate-700">
             <CardHeader>
               <CardTitle className="flex items-center gap-2 text-white">
                 <div className="h-5 w-5 bg-yellow-500 rounded-full"></div>
-                Queue Status
+                Ticket Queue Status
               </CardTitle>
               <CardDescription className="text-slate-300">
-                Current case queue metrics
+                Current support ticket queue metrics
               </CardDescription>
             </CardHeader>
             <CardContent className="p-6">
@@ -182,7 +182,7 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
                 </div>
                 <div className="flex justify-between items-center">
                   <span className="text-slate-300">In Progress</span>
-                  <span className="text-2xl font-bold text-blue-400">47</span>
+                  <span className="text-2xl font-bold text-cyan-400">47</span>
                 </div>
                 <div className="flex justify-between items-center">
                   <span className="text-slate-300">Awaiting Customer</span>
@@ -229,34 +229,34 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
             </CardContent>
           </Card>
 
-          {/* Agent Performance */}
+          {/* Support Engineer Performance */}
           <Card className="bg-slate-800 shadow-lg border-slate-700">
             <CardHeader>
               <CardTitle className="flex items-center gap-2 text-white">
-                <div className="h-5 w-5 bg-purple-500 rounded-full"></div>
-                Agent Performance
+                <div className="h-5 w-5 bg-cyan-500 rounded-full"></div>
+                Support Engineer Performance
               </CardTitle>
               <CardDescription className="text-slate-300">
-                Top performing agents this week
+                Top performing engineers this week
               </CardDescription>
             </CardHeader>
             <CardContent className="p-6">
               <div className="space-y-3">
                 <div className="flex justify-between items-center">
                   <span className="text-slate-300">Sarah Chen</span>
-                  <span className="text-sm font-bold text-green-400">47 cases</span>
+                  <span className="text-sm font-bold text-cyan-400">47 tickets</span>
                 </div>
                 <div className="flex justify-between items-center">
                   <span className="text-slate-300">Mike Rodriguez</span>
-                  <span className="text-sm font-bold text-green-400">42 cases</span>
+                  <span className="text-sm font-bold text-cyan-400">42 tickets</span>
                 </div>
                 <div className="flex justify-between items-center">
                   <span className="text-slate-300">Emily Johnson</span>
-                  <span className="text-sm font-bold text-green-400">38 cases</span>
+                  <span className="text-sm font-bold text-cyan-400">38 tickets</span>
                 </div>
                 <div className="flex justify-between items-center">
                   <span className="text-slate-300">David Kim</span>
-                  <span className="text-sm font-bold text-green-400">35 cases</span>
+                  <span className="text-sm font-bold text-cyan-400">35 tickets</span>
                 </div>
               </div>
             </CardContent>
@@ -268,25 +268,25 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
           <div className="flex justify-center">
             <button
               onClick={generateSlackMessage}
-              className="flex items-center gap-2 px-6 py-3 bg-green-600 hover:bg-green-700 text-white rounded-lg transition-colors shadow-lg animate-pulse"
+              className="flex items-center gap-2 px-6 py-3 bg-cyan-600 hover:bg-cyan-700 text-white rounded-lg transition-colors shadow-lg animate-pulse"
             >
               <MessageSquare className="h-5 w-5" />
-              <span className="font-medium">Share Case Update ({selectedMarks.length})</span>
+              <span className="font-medium">Share Ticket Update ({selectedMarks.length})</span>
             </button>
           </div>
         )}
 
         {/* Tableau Dashboards Row */}
         <div className="grid gap-6 lg:grid-cols-2">
-          {/* Open Cases Dashboard */}
+          {/* Open Tickets Dashboard */}
           <Card className="bg-slate-800 shadow-lg border-slate-700">
             <CardHeader>
               <CardTitle className="flex items-center gap-2 text-white">
-                <FileText className="h-5 w-5 text-blue-400" />
-                Open Cases
+                <FileText className="h-5 w-5 text-cyan-400" />
+                Open Support Tickets
               </CardTitle>
               <CardDescription className="text-slate-300">
-                Current open cases and their status across all service channels
+                Current open tickets and their status across satellite network support
               </CardDescription>
             </CardHeader>
             <CardContent className="flex items-center justify-center p-0 xs:p-6 xs:pt-0">
@@ -321,15 +321,15 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
             </CardContent>
           </Card>
 
-          {/* Created Cases Dashboard */}
+          {/* Created Tickets Dashboard */}
           <Card className="bg-slate-800 shadow-lg border-slate-700">
             <CardHeader>
               <CardTitle className="flex items-center gap-2 text-white">
-                <Clock className="h-5 w-5 text-green-400" />
-                Created Cases
+                <Clock className="h-5 w-5 text-cyan-400" />
+                Created Support Tickets
               </CardTitle>
               <CardDescription className="text-slate-300">
-                Case creation trends and volume analysis over time
+                Ticket creation trends and volume analysis over time
               </CardDescription>
             </CardHeader>
             <CardContent className="flex items-center justify-center p-0 xs:p-6 xs:pt-0">
@@ -370,8 +370,8 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
           <div className="bg-slate-800 rounded-lg shadow-xl p-6 max-w-2xl w-full mx-4 max-h-[90vh] overflow-y-auto" onClick={(e) => e.stopPropagation()}>
             <div className="flex items-center justify-between mb-6">
               <h3 className="text-xl font-semibold text-white flex items-center gap-2">
-                <MessageSquare className="h-5 w-5 text-green-500" />
-                Share Case Update
+                <MessageSquare className="h-5 w-5 text-cyan-400" />
+                Share Ticket Update
               </h3>
               <button
                 onClick={() => setShowSlackModal(false)}
@@ -388,7 +388,7 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
                 <textarea
                   value={editableSlackMessage}
                   onChange={(e) => setEditableSlackMessage(e.target.value)}
-                  className="w-full h-48 bg-slate-800 border border-slate-600 rounded-lg p-3 text-slate-200 font-mono text-sm resize-none focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent"
+                  className="w-full h-48 bg-slate-800 border border-slate-600 rounded-lg p-3 text-slate-200 font-mono text-sm resize-none focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-transparent"
                   placeholder="Type your message here..."
                 />
               </div>
@@ -412,12 +412,12 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
                         alert('Please enter a message before sending.');
                         return;
                       }
-                      alert(`Demo: Message sent to team!\n\nMessage: ${editableSlackMessage}`);
+                      alert(`Demo: Message sent to E-Space support team!\n\nMessage: ${editableSlackMessage}`);
                       setShowSlackModal(false);
                       setSelectedMarks([]);
                       setEditableSlackMessage('');
                     }}
-                    className="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg transition-colors font-semibold flex items-center gap-2"
+                    className="px-4 py-2 bg-cyan-600 hover:bg-cyan-700 text-white rounded-lg transition-colors font-semibold flex items-center gap-2"
                   >
                     <MessageSquare className="h-4 w-4" />
                     Send to Team
@@ -434,7 +434,7 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
 
 export default function CasesPage() {
   return (
-    <Demo settings={settings} pageName="Cases">
+    <Demo settings={settings} pageName="Support Tickets">
       <CasesContent />
       <FloatingAssistant settings={settings} />
     </Demo>
diff --git a/src/app/demo/servicedesk/config.js b/src/app/demo/servicedesk/config.js
index 02f54b2e..93a5b7a8 100644
--- a/src/app/demo/servicedesk/config.js
+++ b/src/app/demo/servicedesk/config.js
@@ -14,17 +14,17 @@ import {
 
 export const settings = {
   app_id: 'servicedesk',
-  app_name: 'Service Excellence Platform',
-  app_logo: '/img/themes/servicedesk/dataicon.png',
-  auth_logo: '/img/themes/servicedesk/dataicon.png',
+  app_name: 'E-Space Support Hub',
+  app_logo: '/img/themes/servicedesk/espace_logo.svg',
+  auth_logo: '/img/themes/servicedesk/espace_logo.svg',
   base_path: '/demo/servicedesk',
-  auth_hero: 'https://images.unsplash.com/photo-1556761175-5973dc0f32e7?q=80&w=2832&auto=format&fit=crop',
+  auth_hero: 'https://player.vimeo.com/video/753626640?h=23d74e3691&&autoplay=1&loop=1&autopause=0&api=1&background=1',
   ai_chat: true,
-  ai_avatar: '/img/themes/servicedesk/dataicon.png',
+  ai_avatar: '/img/themes/servicedesk/espace_logo.svg',
   sample_questions: [
-    "What's our average response time this month?",
-    "Show me open cases by priority",
-    "What's our customer training completion rate?",
+    "What's our satellite network uptime this month?",
+    "Show me open support tickets by priority",
+    "What's our customer onboarding completion rate?",
   ],
   sections: [
     {
@@ -32,14 +32,14 @@ export const settings = {
       icon: <Home className="h-5 w-5"/>,
       path: '',
       min_role: 0,
-      description: 'Service analytics overview and key metrics'
+      description: 'E-Space support analytics overview and key metrics'
     },
     {
-      name: 'Cases',
+      name: 'Support Tickets',
       icon: <FileText className="h-5 w-5"/>,
       path: '/cases',
       min_role: 0,
-      description: 'Open cases and case creation analytics'
+      description: 'Open tickets and satellite network support analytics'
     },
     {
       name: 'Customer Success',
@@ -49,11 +49,11 @@ export const settings = {
       description: 'Strategic insights, renewals, and customer health'
     },
     {
-      name: 'Training',
+      name: 'Onboarding',
       icon: <FileText className="h-5 w-5"/>,
       path: '/training',
       min_role: 1,
-      description: 'Customer training completion and effectiveness'
+      description: 'Customer onboarding completion and effectiveness'
     },
     {
       name: 'Settings',
@@ -71,14 +71,14 @@ export const settings = {
     },
   ],
   branding: {
-    primary_color: '#2563EB', // Professional blue
-    secondary_color: '#3B82F6',
-    accent_color: '#10B981',
+    primary_color: '#0A2540', // Deep space blue
+    secondary_color: '#1E3A8A', // Rich blue
+    accent_color: '#06B6D4', // Cyan/teal
     success_color: '#10B981',
     warning_color: '#F59E0B',
     danger_color: '#EF4444',
-    background_color: '#F8FAFC',
-    text_color: '#1F2937'
+    background_color: '#0F172A', // Dark space background
+    text_color: '#F1F5F9'
   }
 }
 
diff --git a/src/app/demo/servicedesk/success/page.jsx b/src/app/demo/servicedesk/success/page.jsx
index de05da21..2995bfa5 100644
--- a/src/app/demo/servicedesk/success/page.jsx
+++ b/src/app/demo/servicedesk/success/page.jsx
@@ -143,7 +143,7 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
           <div className="flex justify-center">
             <button
               onClick={generateSlackMessage}
-              className="flex items-center gap-2 px-6 py-3 bg-green-600 hover:bg-green-700 text-white rounded-lg transition-colors shadow-lg animate-pulse"
+              className="flex items-center gap-2 px-6 py-3 bg-cyan-600 hover:bg-cyan-700 text-white rounded-lg transition-colors shadow-lg animate-pulse"
             >
               <MessageSquare className="h-5 w-5" />
               <span className="font-medium">Share Customer Update ({selectedMarks.length})</span>
@@ -155,7 +155,7 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
           <Card className="bg-slate-800 shadow-lg border-slate-700">
             <CardHeader>
               <CardTitle className="flex items-center gap-2 text-white">
-                <Users2 className="h-5 w-5 text-blue-400" />
+                <Users2 className="h-5 w-5 text-cyan-400" />
                 Customer Health Score
               </CardTitle>
               <CardDescription className="text-slate-300">
@@ -204,17 +204,17 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
                 <div className="p-4 bg-slate-700 rounded-lg">
                   <p className="text-slate-400 text-sm">Renewal Rate</p>
                   <p className="text-3xl font-bold text-white mt-1">94%</p>
-                  <p className="text-green-400 text-sm mt-1">↑ 5% from last quarter</p>
+                  <p className="text-cyan-400 text-sm mt-1">↑ 5% from last quarter</p>
                 </div>
                 <div className="p-4 bg-slate-700 rounded-lg">
                   <p className="text-slate-400 text-sm">Customer Satisfaction</p>
                   <p className="text-3xl font-bold text-white mt-1">4.8/5</p>
-                  <p className="text-green-400 text-sm mt-1">↑ 0.3 from last month</p>
+                  <p className="text-cyan-400 text-sm mt-1">↑ 0.3 from last month</p>
                 </div>
                 <div className="p-4 bg-slate-700 rounded-lg">
-                  <p className="text-slate-400 text-sm">Premium Upgrades</p>
+                  <p className="text-slate-400 text-sm">Network Expansion</p>
                   <p className="text-3xl font-bold text-white mt-1">23%</p>
-                  <p className="text-green-400 text-sm mt-1">↑ 8% this quarter</p>
+                  <p className="text-cyan-400 text-sm mt-1">↑ 8% this quarter</p>
                 </div>
               </div>
             </CardContent>
@@ -228,7 +228,7 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
           <div className="bg-slate-800 rounded-lg shadow-xl p-6 max-w-2xl w-full mx-4 max-h-[90vh] overflow-y-auto" onClick={(e) => e.stopPropagation()}>
             <div className="flex items-center justify-between mb-6">
               <h3 className="text-xl font-semibold text-white flex items-center gap-2">
-                <MessageSquare className="h-5 w-5 text-green-500" />
+                <MessageSquare className="h-5 w-5 text-cyan-400" />
                 Share Customer Update
               </h3>
               <button
@@ -246,7 +246,7 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
                 <textarea
                   value={editableSlackMessage}
                   onChange={(e) => setEditableSlackMessage(e.target.value)}
-                  className="w-full h-48 bg-slate-800 border border-slate-600 rounded-lg p-3 text-slate-200 font-mono text-sm resize-none focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent"
+                  className="w-full h-48 bg-slate-800 border border-slate-600 rounded-lg p-3 text-slate-200 font-mono text-sm resize-none focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-transparent"
                   placeholder="Type your message here..."
                 />
               </div>
@@ -270,12 +270,12 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
                         alert('Please enter a message before sending.');
                         return;
                       }
-                      alert(`Demo: Message sent to team!\n\nMessage: ${editableSlackMessage}`);
+                      alert(`Demo: Message sent to E-Space customer success team!\n\nMessage: ${editableSlackMessage}`);
                       setShowSlackModal(false);
                       setSelectedMarks([]);
                       setEditableSlackMessage('');
                     }}
-                    className="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg transition-colors font-semibold flex items-center gap-2"
+                    className="px-4 py-2 bg-cyan-600 hover:bg-cyan-700 text-white rounded-lg transition-colors font-semibold flex items-center gap-2"
                   >
                     <MessageSquare className="h-4 w-4" />
                     Send to Team
diff --git a/src/app/demo/servicedesk/training/page.jsx b/src/app/demo/servicedesk/training/page.jsx
index 7e9d131c..551aa28f 100644
--- a/src/app/demo/servicedesk/training/page.jsx
+++ b/src/app/demo/servicedesk/training/page.jsx
@@ -127,7 +127,7 @@ const TrainingContent = () => {
 
     // Generate message content for each selected mark
     const dataOnly = selectedMarks.map((mark, index) =>
-      `Training ${index + 1}:
+      `Onboarding ${index + 1}:
 ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n')}`
     ).join('\n\n');
 
@@ -144,18 +144,18 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
               <CardTitle className="text-sm font-medium text-slate-400">Overall Completion</CardTitle>
             </CardHeader>
             <CardContent>
-              <div className="text-2xl font-bold text-green-400">87%</div>
-              <p className="text-xs text-slate-500 mt-1">All training programs</p>
+              <div className="text-2xl font-bold text-cyan-400">87%</div>
+              <p className="text-xs text-slate-500 mt-1">All onboarding programs</p>
             </CardContent>
           </Card>
 
           <Card className="bg-slate-800 border-slate-700">
             <CardHeader className="pb-2">
-              <CardTitle className="text-sm font-medium text-slate-400">Active Trainees</CardTitle>
+              <CardTitle className="text-sm font-medium text-slate-400">Active Customers</CardTitle>
             </CardHeader>
             <CardContent>
               <div className="text-2xl font-bold text-white">1,247</div>
-              <p className="text-xs text-green-400 mt-1">↑ 15% from last month</p>
+              <p className="text-xs text-cyan-400 mt-1">↑ 15% from last month</p>
             </CardContent>
           </Card>
 
@@ -165,7 +165,7 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
             </CardHeader>
             <CardContent>
               <div className="text-2xl font-bold text-white">3.2 days</div>
-              <p className="text-xs text-green-400 mt-1">↓ 0.5 days faster</p>
+              <p className="text-xs text-cyan-400 mt-1">↓ 0.5 days faster</p>
             </CardContent>
           </Card>
 
@@ -174,7 +174,7 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
               <CardTitle className="text-sm font-medium text-slate-400">Satisfaction Score</CardTitle>
             </CardHeader>
             <CardContent>
-              <div className="text-2xl font-bold text-green-400">4.6/5</div>
+              <div className="text-2xl font-bold text-cyan-400">4.6/5</div>
               <p className="text-xs text-slate-500 mt-1">Customer feedback</p>
             </CardContent>
           </Card>
@@ -185,24 +185,24 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
           <div className="flex justify-center">
             <button
               onClick={generateSlackMessage}
-              className="flex items-center gap-2 px-6 py-3 bg-green-600 hover:bg-green-700 text-white rounded-lg transition-colors shadow-lg animate-pulse"
+              className="flex items-center gap-2 px-6 py-3 bg-cyan-600 hover:bg-cyan-700 text-white rounded-lg transition-colors shadow-lg animate-pulse"
             >
               <MessageSquare className="h-5 w-5" />
-              <span className="font-medium">Share Training Update ({selectedMarks.length})</span>
+              <span className="font-medium">Share Onboarding Update ({selectedMarks.length})</span>
             </button>
           </div>
         )}
 
         <Card className="bg-slate-800 shadow-lg border-slate-700">
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2 text-white">
-              <FileText className="h-5 w-5 text-blue-400" />
-              Training Analytics
-            </CardTitle>
-            <CardDescription className="text-slate-300">
-              Completion rates and effectiveness by training type
-            </CardDescription>
-          </CardHeader>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2 text-white">
+                <FileText className="h-5 w-5 text-cyan-400" />
+                Customer Onboarding Analytics
+              </CardTitle>
+              <CardDescription className="text-slate-300">
+                Completion rates and effectiveness by onboarding program
+              </CardDescription>
+            </CardHeader>
           <CardContent className="flex items-center justify-center p-0 xs:p-6 xs:pt-0">
             <div className="tableau-container w-full">
               <TableauEmbed
@@ -235,7 +235,7 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
         <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
           <Card className="bg-slate-800 border-slate-700">
             <CardHeader>
-              <CardTitle className="text-white">Onboarding Training</CardTitle>
+              <CardTitle className="text-white">Satellite Network Basics</CardTitle>
               <CardDescription className="text-slate-400">New customer orientation</CardDescription>
             </CardHeader>
             <CardContent>
@@ -251,8 +251,8 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
 
           <Card className="bg-slate-800 border-slate-700">
             <CardHeader>
-              <CardTitle className="text-white">Advanced Features</CardTitle>
-              <CardDescription className="text-slate-400">Premium tier training</CardDescription>
+              <CardTitle className="text-white">Advanced Connectivity</CardTitle>
+              <CardDescription className="text-slate-400">Enterprise features training</CardDescription>
             </CardHeader>
             <CardContent>
               <div className="flex items-center justify-between mb-2">
@@ -267,7 +267,7 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
 
           <Card className="bg-slate-800 border-slate-700">
             <CardHeader>
-              <CardTitle className="text-white">Best Practices</CardTitle>
+              <CardTitle className="text-white">Network Optimization</CardTitle>
               <CardDescription className="text-slate-400">Ongoing education</CardDescription>
             </CardHeader>
             <CardContent>
@@ -289,8 +289,8 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
           <div className="bg-slate-800 rounded-lg shadow-xl p-6 max-w-2xl w-full mx-4 max-h-[90vh] overflow-y-auto" onClick={(e) => e.stopPropagation()}>
             <div className="flex items-center justify-between mb-6">
               <h3 className="text-xl font-semibold text-white flex items-center gap-2">
-                <MessageSquare className="h-5 w-5 text-green-500" />
-                Share Training Update
+                <MessageSquare className="h-5 w-5 text-cyan-400" />
+                Share Onboarding Update
               </h3>
               <button
                 onClick={() => setShowSlackModal(false)}
@@ -307,7 +307,7 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
                 <textarea
                   value={editableSlackMessage}
                   onChange={(e) => setEditableSlackMessage(e.target.value)}
-                  className="w-full h-48 bg-slate-800 border border-slate-600 rounded-lg p-3 text-slate-200 font-mono text-sm resize-none focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent"
+                  className="w-full h-48 bg-slate-800 border border-slate-600 rounded-lg p-3 text-slate-200 font-mono text-sm resize-none focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-transparent"
                   placeholder="Type your message here..."
                 />
               </div>
@@ -331,12 +331,12 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
                         alert('Please enter a message before sending.');
                         return;
                       }
-                      alert(`Demo: Message sent to team!\n\nMessage: ${editableSlackMessage}`);
+                      alert(`Demo: Message sent to E-Space onboarding team!\n\nMessage: ${editableSlackMessage}`);
                       setShowSlackModal(false);
                       setSelectedMarks([]);
                       setEditableSlackMessage('');
                     }}
-                    className="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg transition-colors font-semibold flex items-center gap-2"
+                    className="px-4 py-2 bg-cyan-600 hover:bg-cyan-700 text-white rounded-lg transition-colors font-semibold flex items-center gap-2"
                   >
                     <MessageSquare className="h-4 w-4" />
                     Send to Team
@@ -353,7 +353,7 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
 
 export default function TrainingPage() {
   return (
-    <Demo settings={settings} pageName="Customer Training">
+    <Demo settings={settings} pageName="Customer Onboarding">
       <TrainingContent />
       <FloatingAssistant settings={settings} />
     </Demo>
diff --git a/src/components/Demo/components/Auth/Auth.jsx b/src/components/Demo/components/Auth/Auth.jsx
index 2a310891..49955fd2 100644
--- a/src/components/Demo/components/Auth/Auth.jsx
+++ b/src/components/Demo/components/Auth/Auth.jsx
@@ -22,18 +22,49 @@ export const Auth = (props) => {
   const roles = demoManager.getAllRolesForDemo(app_id);
 
 
+  // Check if auth_hero is a video URL (Vimeo)
+  const isVideo = auth_hero && (
+    auth_hero.includes('vimeo.com') || 
+    auth_hero.includes('youtube.com') || 
+    auth_hero.includes('youtu.be') ||
+    auth_hero.includes('.mp4') ||
+    auth_hero.includes('.webm')
+  );
+
   return (
     <div className="relative w-full min-h-screen">
 
       <div className="absolute inset-0 w-full h-full">
-        <Image
-          src={auth_hero || "/placeholder.svg"}
-          alt="Background"
-          fill
-          priority
-          sizes="100vw"
-          className="object-cover dark:brightness-[0.2] dark:grayscale background"
-        />
+        {isVideo ? (
+          <>
+            <iframe
+              src={auth_hero}
+              className="absolute inset-0 w-full h-full"
+              style={{
+                width: '100%',
+                height: '100%',
+                objectFit: 'cover',
+                pointerEvents: 'none',
+                zIndex: 0,
+              }}
+              frameBorder="0"
+              allow="autoplay; fullscreen; picture-in-picture"
+              allowFullScreen
+              title="Background video"
+            />
+            {/* Dark overlay for better contrast */}
+            <div className="absolute inset-0 bg-black/40 dark:bg-black/60 z-0" />
+          </>
+        ) : (
+          <Image
+            src={auth_hero || "/placeholder.svg"}
+            alt="Background"
+            fill
+            priority
+            sizes="100vw"
+            className="object-cover dark:brightness-[0.2] dark:grayscale background"
+          />
+        )}
       </div>
 
       <div className="relative z-10 flex items-center justify-center w-full min-h-screen p-4">
diff --git a/src/global.css b/src/global.css
index 032d4de1..95987475 100644
--- a/src/global.css
+++ b/src/global.css
@@ -194,38 +194,38 @@
     --metrics-negative: 280 60% 33% ;
   }
 
-  /* Define variables for the 'servicedesk' theme (Dark mode) */
+  /* Define variables for the 'servicedesk' theme (E-Space Dark mode) */
   [data-theme="servicedesk"] {
-    --background: 222.2 84% 4.9%; /* Dark Gray */
+    --background: 222 47% 11%; /* Deep space blue background */
     --foreground: 210 40% 98%; /* Light Gray */
-    --demo-background: 222.2 84% 4.9%; /* Dark Gray */
-    --nav-background: 217.2 32.6% 17.5%; /* Darker Gray */
-    --logo-background: 217.2 32.6% 17.5%;
-    --icon-background: 217.2 32.6% 17.5%;
-    --login-card-background: 222.2 84% 4.9%;
-    --nav-icons: 210 40% 98%; /* Light Gray */
-    --card: 217.2 32.6% 17.5%; /* Dark Gray Card */
+    --demo-background: 222 47% 11%; /* Deep space blue */
+    --nav-background: 221 39% 11%; /* Darker space blue */
+    --logo-background: 221 39% 11%;
+    --icon-background: 221 39% 11%;
+    --login-card-background: 222 47% 11%;
+    --nav-icons: 0 0% 100%; /* White for icons */
+    --card: 217 33% 17%; /* Dark card background */
     --card-foreground: 210 40% 98%;
-    --popover: 217.2 32.6% 17.5%;
+    --popover: 217 33% 17%;
     --popover-foreground: 210 40% 98%;
-    --primary: 199 99% 39%; /* Blue */
+    --primary: 189 100% 42%; /* E-Space cyan/teal */
     --primary-foreground: 210 40% 98%;
-    --secondary: 217.2 32.6% 17.5%; /* Darker Gray */
+    --secondary: 221 83% 53%; /* Rich blue */
     --secondary-foreground: 210 40% 98%;
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-    --accent: 217.2 32.6% 17.5%;
+    --muted: 217 33% 17%;
+    --muted-foreground: 215 20% 65%;
+    --accent: 189 100% 42%; /* Cyan accent */
     --accent-foreground: 210 40% 98%;
-    --destructive: 0 62.8% 30.6%;
+    --destructive: 0 63% 31%;
     --destructive-foreground: 210 40% 98%;
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 199 99% 39%;
+    --border: 217 33% 25%;
+    --input: 217 33% 17%;
+    --ring: 189 100% 42%;
 
-    --metrics-positive: 199 99% 39% ;
+    --metrics-positive: 189 100% 42%; /* Cyan for positive */
     --metrics-neutral: 39 7% 54%;
     --metrics-negative: 23 93% 51%;
-    --breadcrumbs: 210 40% 98%;
+    --breadcrumbs: 0 0% 100%; /* White for breadcrumbs */
   }
 
   /* Apply dark class when servicedesk theme is active for Tailwind dark: classes */
@@ -259,9 +259,79 @@
     border-color: hsl(var(--border));
   }
 
-  /* Breadcrumbs text - light color */
+  /* Breadcrumbs text - white by default, primary color on hover */
   [data-theme="servicedesk"] .text-breadcrumbs {
-    color: hsl(var(--breadcrumbs));
+    color: hsl(0 0% 100%) !important;
+  }
+
+  /* BreadcrumbList - override default stone colors */
+  [data-theme="servicedesk"] nav[aria-label="breadcrumb"] ol {
+    color: hsl(0 0% 100%) !important;
+  }
+
+  /* Breadcrumb links - white by default */
+  [data-theme="servicedesk"] nav[aria-label="breadcrumb"] a.text-breadcrumbs,
+  [data-theme="servicedesk"] nav[aria-label="breadcrumb"] .text-breadcrumbs,
+  [data-theme="servicedesk"] nav[aria-label="breadcrumb"] a {
+    color: hsl(0 0% 100%) !important;
+  }
+
+  /* Breadcrumb links hover - primary color (cyan) */
+  [data-theme="servicedesk"] nav[aria-label="breadcrumb"] a.text-breadcrumbs:hover,
+  [data-theme="servicedesk"] nav[aria-label="breadcrumb"] .text-breadcrumbs:hover,
+  [data-theme="servicedesk"] nav[aria-label="breadcrumb"] a:hover {
+    color: hsl(189 100% 42%) !important;
+  }
+
+  /* Breadcrumb separator icons - white */
+  [data-theme="servicedesk"] nav[aria-label="breadcrumb"] li[role="presentation"] svg,
+  [data-theme="servicedesk"] nav[aria-label="breadcrumb"] .text-breadcrumbs svg {
+    color: hsl(0 0% 100%) !important;
+  }
+
+  /* Side navigation icons and text - white */
+  [data-theme="servicedesk"] .text-navIcons {
+    color: hsl(0 0% 100%) !important;
+  }
+
+  /* Side navigation icons hover - primary color (cyan) */
+  [data-theme="servicedesk"] .text-navIcons:hover,
+  [data-theme="servicedesk"] a:hover .text-navIcons,
+  [data-theme="servicedesk"] nav a:hover .text-navIcons {
+    color: hsl(189 100% 42%) !important;
+  }
+
+  /* Side navigation text in mobile menu - white */
+  [data-theme="servicedesk"] nav.text-navIcons,
+  [data-theme="servicedesk"] nav .text-navIcons {
+    color: hsl(0 0% 100%) !important;
+  }
+
+  /* Ensure navigation links text is white in mobile menu */
+  [data-theme="servicedesk"] nav.text-lg.font-medium span,
+  [data-theme="servicedesk"] nav.text-lg.font-medium a,
+  [data-theme="servicedesk"] nav a.text-muted-foreground {
+    color: hsl(0 0% 100%) !important;
+  }
+
+  /* Ensure navigation icons are white */
+  [data-theme="servicedesk"] nav svg.text-navIcons,
+  [data-theme="servicedesk"] nav .text-navIcons svg {
+    color: hsl(0 0% 100%) !important;
+  }
+
+  /* Navigation icon hover states - override hover:text-foreground */
+  [data-theme="servicedesk"] aside nav a:hover .text-navIcons,
+  [data-theme="servicedesk"] aside nav a:hover svg.text-navIcons,
+  [data-theme="servicedesk"] aside nav a.hover\:text-foreground:hover .text-navIcons,
+  [data-theme="servicedesk"] aside nav a.hover\:text-foreground:hover svg {
+    color: hsl(189 100% 42%) !important;
+  }
+
+  /* All navigation icons inside hovered links */
+  [data-theme="servicedesk"] aside nav a:hover svg,
+  [data-theme="servicedesk"] aside nav a:hover .text-navIcons svg {
+    color: hsl(189 100% 42%) !important;
   }
 
   /* TableauToolbar Menubar - dark mode - override Tailwind classes */

From f804a4cb1af8c169498ced67933a95b6c7c04605 Mon Sep 17 00:00:00 2001
From: jeremymayo <jeremydmayo@gmail.com>
Date: Wed, 17 Dec 2025 12:31:33 -0600
Subject: [PATCH 2/4] wip

---
 package-lock.json | 104 +++++++++++++++++++++++-----------------------
 package.json      |   4 +-
 2 files changed, 54 insertions(+), 54 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e99ef376..72427c7c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -57,7 +57,7 @@
         "langchain": "^0.3.15",
         "langsmith": "^0.3.7",
         "lucide-react": "^0.439.0",
-        "next": "^14.2.24",
+        "next": "^14.2.35",
         "next-auth": "^4.24.11",
         "nextra": "^3.0.6",
         "nextra-theme-docs": "^3.0.6",
@@ -86,7 +86,7 @@
         "@types/node": "^22.7.5",
         "autoprefixer": "^10.4.20",
         "eslint": "^8.57.0",
-        "eslint-config-next": "^14.2.24",
+        "eslint-config-next": "^14.2.35",
         "postcss": "^8.5.3",
         "tailwindcss": "^3.4.1",
         "typescript": "^5.6.2"
@@ -3618,15 +3618,15 @@
       }
     },
     "node_modules/@next/env": {
-      "version": "14.2.24",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.24.tgz",
-      "integrity": "sha512-LAm0Is2KHTNT6IT16lxT+suD0u+VVfYNQqM+EJTKuFRRuY2z+zj01kueWXPCxbMBDt0B5vONYzabHGUNbZYAhA==",
+      "version": "14.2.35",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.35.tgz",
+      "integrity": "sha512-DuhvCtj4t9Gwrx80dmz2F4t/zKQ4ktN8WrMwOuVzkJfBilwAwGr6v16M5eI8yCuZ63H9TTuEU09Iu2HqkzFPVQ==",
       "license": "MIT"
     },
     "node_modules/@next/eslint-plugin-next": {
-      "version": "14.2.24",
-      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-14.2.24.tgz",
-      "integrity": "sha512-FDL3qs+5DML0AJz56DCVr+KnFYivxeAX73En8QbPw9GjJZ6zbfvqDy+HrarHFzbsIASn7y8y5ySJ/lllSruNVQ==",
+      "version": "14.2.35",
+      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-14.2.35.tgz",
+      "integrity": "sha512-Jw9A3ICz2183qSsqwi7fgq4SBPiNfmOLmTPXKvlnzstUwyvBrtySiY+8RXJweNAs9KThb1+bYhZh9XWcNOr2zQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -3634,9 +3634,9 @@
       }
     },
     "node_modules/@next/swc-darwin-arm64": {
-      "version": "14.2.24",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.24.tgz",
-      "integrity": "sha512-7Tdi13aojnAZGpapVU6meVSpNzgrFwZ8joDcNS8cJVNuP3zqqrLqeory9Xec5TJZR/stsGJdfwo8KeyloT3+rQ==",
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.33.tgz",
+      "integrity": "sha512-HqYnb6pxlsshoSTubdXKu15g3iivcbsMXg4bYpjL2iS/V6aQot+iyF4BUc2qA/J/n55YtvE4PHMKWBKGCF/+wA==",
       "cpu": [
         "arm64"
       ],
@@ -3650,9 +3650,9 @@
       }
     },
     "node_modules/@next/swc-darwin-x64": {
-      "version": "14.2.24",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.24.tgz",
-      "integrity": "sha512-lXR2WQqUtu69l5JMdTwSvQUkdqAhEWOqJEYUQ21QczQsAlNOW2kWZCucA6b3EXmPbcvmHB1kSZDua/713d52xg==",
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.33.tgz",
+      "integrity": "sha512-8HGBeAE5rX3jzKvF593XTTFg3gxeU4f+UWnswa6JPhzaR6+zblO5+fjltJWIZc4aUalqTclvN2QtTC37LxvZAA==",
       "cpu": [
         "x64"
       ],
@@ -3666,9 +3666,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "14.2.24",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.24.tgz",
-      "integrity": "sha512-nxvJgWOpSNmzidYvvGDfXwxkijb6hL9+cjZx1PVG6urr2h2jUqBALkKjT7kpfurRWicK6hFOvarmaWsINT1hnA==",
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.33.tgz",
+      "integrity": "sha512-JXMBka6lNNmqbkvcTtaX8Gu5by9547bukHQvPoLe9VRBx1gHwzf5tdt4AaezW85HAB3pikcvyqBToRTDA4DeLw==",
       "cpu": [
         "arm64"
       ],
@@ -3682,9 +3682,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "14.2.24",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.24.tgz",
-      "integrity": "sha512-PaBgOPhqa4Abxa3y/P92F3kklNPsiFjcjldQGT7kFmiY5nuFn8ClBEoX8GIpqU1ODP2y8P6hio6vTomx2Vy0UQ==",
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.33.tgz",
+      "integrity": "sha512-Bm+QulsAItD/x6Ih8wGIMfRJy4G73tu1HJsrccPW6AfqdZd0Sfm5Imhgkgq2+kly065rYMnCOxTBvmvFY1BKfg==",
       "cpu": [
         "arm64"
       ],
@@ -3698,9 +3698,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "14.2.24",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.24.tgz",
-      "integrity": "sha512-vEbyadiRI7GOr94hd2AB15LFVgcJZQWu7Cdi9cWjCMeCiUsHWA0U5BkGPuoYRnTxTn0HacuMb9NeAmStfBCLoQ==",
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.33.tgz",
+      "integrity": "sha512-FnFn+ZBgsVMbGDsTqo8zsnRzydvsGV8vfiWwUo1LD8FTmPTdV+otGSWKc4LJec0oSexFnCYVO4hX8P8qQKaSlg==",
       "cpu": [
         "x64"
       ],
@@ -3714,9 +3714,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-musl": {
-      "version": "14.2.24",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.24.tgz",
-      "integrity": "sha512-df0FC9ptaYsd8nQCINCzFtDWtko8PNRTAU0/+d7hy47E0oC17tI54U/0NdGk7l/76jz1J377dvRjmt6IUdkpzQ==",
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.33.tgz",
+      "integrity": "sha512-345tsIWMzoXaQndUTDv1qypDRiebFxGYx9pYkhwY4hBRaOLt8UGfiWKr9FSSHs25dFIf8ZqIFaPdy5MljdoawA==",
       "cpu": [
         "x64"
       ],
@@ -3730,9 +3730,9 @@
       }
     },
     "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "14.2.24",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.24.tgz",
-      "integrity": "sha512-ZEntbLjeYAJ286eAqbxpZHhDFYpYjArotQ+/TW9j7UROh0DUmX7wYDGtsTPpfCV8V+UoqHBPU7q9D4nDNH014Q==",
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.33.tgz",
+      "integrity": "sha512-nscpt0G6UCTkrT2ppnJnFsYbPDQwmum4GNXYTeoTIdsmMydSKFz9Iny2jpaRupTb+Wl298+Rh82WKzt9LCcqSQ==",
       "cpu": [
         "arm64"
       ],
@@ -3746,9 +3746,9 @@
       }
     },
     "node_modules/@next/swc-win32-ia32-msvc": {
-      "version": "14.2.24",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.24.tgz",
-      "integrity": "sha512-9KuS+XUXM3T6v7leeWU0erpJ6NsFIwiTFD5nzNg8J5uo/DMIPvCp3L1Ao5HjbHX0gkWPB1VrKoo/Il4F0cGK2Q==",
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.33.tgz",
+      "integrity": "sha512-pc9LpGNKhJ0dXQhZ5QMmYxtARwwmWLpeocFmVG5Z0DzWq5Uf0izcI8tLc+qOpqxO1PWqZ5A7J1blrUIKrIFc7Q==",
       "cpu": [
         "ia32"
       ],
@@ -3762,9 +3762,9 @@
       }
     },
     "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "14.2.24",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.24.tgz",
-      "integrity": "sha512-cXcJ2+x0fXQ2CntaE00d7uUH+u1Bfp/E0HsNQH79YiLaZE5Rbm7dZzyAYccn3uICM7mw+DxoMqEfGXZtF4Fgaw==",
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.33.tgz",
+      "integrity": "sha512-nOjfZMy8B94MdisuzZo9/57xuFVLHJaDj5e/xrduJp9CV2/HrfxTRH2fbyLe+K9QT41WBLUd4iXX3R7jBp0EUg==",
       "cpu": [
         "x64"
       ],
@@ -11759,13 +11759,13 @@
       }
     },
     "node_modules/eslint-config-next": {
-      "version": "14.2.24",
-      "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-14.2.24.tgz",
-      "integrity": "sha512-9r1ujK++Pgpfixr5+DQ6rXDIQmSzuDbBlAQYMkJRMz9KWqovX7ESUTC0EAyBfOCl3ubkoeplw+aoXDuih3A8fw==",
+      "version": "14.2.35",
+      "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-14.2.35.tgz",
+      "integrity": "sha512-BpLsv01UisH193WyT/1lpHqq5iJ/Orfz9h/NOOlAmTUq4GY349PextQ62K4XpnaM9supeiEn3TaOTeQO07gURg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@next/eslint-plugin-next": "14.2.24",
+        "@next/eslint-plugin-next": "14.2.35",
         "@rushstack/eslint-patch": "^1.3.3",
         "@typescript-eslint/eslint-plugin": "^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0",
         "@typescript-eslint/parser": "^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0",
@@ -16404,12 +16404,12 @@
       "dev": true
     },
     "node_modules/next": {
-      "version": "14.2.24",
-      "resolved": "https://registry.npmjs.org/next/-/next-14.2.24.tgz",
-      "integrity": "sha512-En8VEexSJ0Py2FfVnRRh8gtERwDRaJGNvsvad47ShkC2Yi8AXQPXEA2vKoDJlGFSj5WE5SyF21zNi4M5gyi+SQ==",
+      "version": "14.2.35",
+      "resolved": "https://registry.npmjs.org/next/-/next-14.2.35.tgz",
+      "integrity": "sha512-KhYd2Hjt/O1/1aZVX3dCwGXM1QmOV4eNM2UTacK5gipDdPN/oHHK/4oVGy7X8GMfPMsUTUEmGlsy0EY1YGAkig==",
       "license": "MIT",
       "dependencies": {
-        "@next/env": "14.2.24",
+        "@next/env": "14.2.35",
         "@swc/helpers": "0.5.5",
         "busboy": "1.6.0",
         "caniuse-lite": "^1.0.30001579",
@@ -16424,15 +16424,15 @@
         "node": ">=18.17.0"
       },
       "optionalDependencies": {
-        "@next/swc-darwin-arm64": "14.2.24",
-        "@next/swc-darwin-x64": "14.2.24",
-        "@next/swc-linux-arm64-gnu": "14.2.24",
-        "@next/swc-linux-arm64-musl": "14.2.24",
-        "@next/swc-linux-x64-gnu": "14.2.24",
-        "@next/swc-linux-x64-musl": "14.2.24",
-        "@next/swc-win32-arm64-msvc": "14.2.24",
-        "@next/swc-win32-ia32-msvc": "14.2.24",
-        "@next/swc-win32-x64-msvc": "14.2.24"
+        "@next/swc-darwin-arm64": "14.2.33",
+        "@next/swc-darwin-x64": "14.2.33",
+        "@next/swc-linux-arm64-gnu": "14.2.33",
+        "@next/swc-linux-arm64-musl": "14.2.33",
+        "@next/swc-linux-x64-gnu": "14.2.33",
+        "@next/swc-linux-x64-musl": "14.2.33",
+        "@next/swc-win32-arm64-msvc": "14.2.33",
+        "@next/swc-win32-ia32-msvc": "14.2.33",
+        "@next/swc-win32-x64-msvc": "14.2.33"
       },
       "peerDependencies": {
         "@opentelemetry/api": "^1.1.0",
diff --git a/package.json b/package.json
index 81398822..3c0acf6b 100644
--- a/package.json
+++ b/package.json
@@ -75,7 +75,7 @@
     "langchain": "^0.3.15",
     "langsmith": "^0.3.7",
     "lucide-react": "^0.439.0",
-    "next": "^14.2.24",
+    "next": "^14.2.35",
     "next-auth": "^4.24.11",
     "nextra": "^3.0.6",
     "nextra-theme-docs": "^3.0.6",
@@ -104,7 +104,7 @@
     "@types/node": "^22.7.5",
     "autoprefixer": "^10.4.20",
     "eslint": "^8.57.0",
-    "eslint-config-next": "^14.2.24",
+    "eslint-config-next": "^14.2.35",
     "postcss": "^8.5.3",
     "tailwindcss": "^3.4.1",
     "typescript": "^5.6.2"

From af5ddb72dec1571534b32a9fd08b4f56cf238b70 Mon Sep 17 00:00:00 2001
From: jeremymayo <jeremydmayo@gmail.com>
Date: Wed, 17 Dec 2025 15:18:06 -0600
Subject: [PATCH 3/4] wip

---
 next.config.mjs                               |  12 ++
 .../img/themes/servicedesk/e-space_small.png  | Bin 0 -> 2751 bytes
 src/app/demo/servicedesk/Home.jsx             |  30 ++--
 src/app/demo/servicedesk/cases/page.jsx       | 150 +++++-------------
 src/app/demo/servicedesk/config.js            |  14 +-
 src/app/demo/servicedesk/success/page.jsx     |  16 +-
 src/app/demo/servicedesk/training/page.jsx    |  18 +--
 src/components/Demo/components/Auth/Auth.jsx  |   2 +-
 src/components/Demo/components/Demo.jsx       |   2 +-
 .../components/Navigation/NavigationMd.jsx    |  20 +--
 .../TableauToolbar/TableauToolbar.jsx         |   2 +-
 src/global.css                                |  48 +++---
 tailwind.config.js                            |   9 ++
 13 files changed, 146 insertions(+), 177 deletions(-)
 create mode 100644 public/img/themes/servicedesk/e-space_small.png

diff --git a/next.config.mjs b/next.config.mjs
index e814877c..f1940020 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -21,6 +21,18 @@ export default withNextra({
         hostname: 'plus.unsplash.com',
         port: '',
         pathname: '/**',
+      },
+      {
+        protocol: 'https',
+        hostname: 'cdn.brandfetch.io',
+        port: '',
+        pathname: '/**',
+      },
+      {
+        protocol: 'https',
+        hostname: 'cdn.prod.website-files.com',
+        port: '',
+        pathname: '/**',
       }
     ],
   },
diff --git a/public/img/themes/servicedesk/e-space_small.png b/public/img/themes/servicedesk/e-space_small.png
new file mode 100644
index 0000000000000000000000000000000000000000..f0202e6d0f1eeef80ff69b77a8f3ba845fb5c296
GIT binary patch
literal 2751
zcmV;w3PAOVP)<h;3K|Lk000e1NJLTq005Q%005Q<1^@s6JOOdy00001b5ch_0olnc
ze*gdg1ZP1_K>z@;j|==^1poj5AY({UO#lFTCIA3{ga82g0001h=l}q9FaQARU;qF*
zm;eA5aGbhPJOBUy24YJ`L;wH)0002_L%V+f000SaNLh0L04^f{04^f|c%?sf00007
zbV*G`2k8tE6FLc!-$vyC015+1L_t(|+U=cts8v-S$3H)nWK6x?K`T)bH7Y61Fo~d?
zw3r@7G*XUQGGUTBW}q?U)M#d-SmOhWh$5xNG_A0R9yX-C970rjqe&`;7t3VqrU~NX
zH-DU^ZSOtzp4UF-p1sfa1NWcHIcM+v{e4(#owL_o%cx=8y$5gs&==?p^a6SS-GO?b
zD{v;z5$F)!b__TI{0jU68~}a-_5yo=-M~&@yP55+)oiVXB<cfP0SpEP0Rw<@%6!-#
zfv<qifi1vBGutJxlHVF#3tR(S9a^SpU_0;$@FB1+t*x4+Os0!~n}HjF;R!kI^}xHp
zTV}RRVpWe!X9KqbBNHT3Ym%)2UNy6Q602>58V-yFMu!1*n)nr11*|l)^%AQxLfr}6
z6~<4sz&hXsGkZy5#V?Zq_W%=s%WL!-{AS>J;5jpMiB-B(<AKRFEL1kZo-wm!6010&
zZULqO*U6=<ybnBOW^YQY{Dis$m<EiOJ9)7TSZrorORScqng-kt^pr0J(Euzov&9nY
zbfK;U9sq8YBPH<$@PwItTJvJL`+dL+GB<xk>FfpOo7s~!DVDqU1s($KmJ4NJDKO8>
zcGiqo?tTOCFmRRXUsg5%bIojR>cw*RiNH(^&?`Eyf6UCDO{G}w-X540{zT=O1I#hA
z<EarV%s`k0Oi_K?l&6DS`w}mfyY~Yg0miAWRl#!LQ8U|-Sh3vwVqi9Ko9bCryavoR
zvu_e7mb(uOQvFGFtV&)Fa($T?vE02s@J}+cIz{!e2Ka}WZLNB-+`TvOIPhoHEfK5+
z9yGJvRV$Xe*8z*r%!H(|447_ajd6WoyO>XKmZVA~<B9qA#n{Ah_XmOLs!?K@9%@)U
zU7@?*0XzqEQhgH5Vc;G!ThZn%R+vjQQ&OdZPQc7i)3y`K-RsHBQn*kxNeveQ4~N>e
zS&Q`$FhaFR9V0?*D?i3^_p!hV)gaZ}VP-2U)?$Sl%QKXF>X{L0U9qn4Z)Db&66t0@
zsCD_fLU$hxysXS?iZN!ks%$NmyPt)A1g%A;huW8|E1U)lQO-5TkWl;hyFz!r6!-|J
z1Gx9zd)dE#zamdDmkt`l-)Efqj@AhL!OXtM=e->YIL_3QQUPq+wvCTAY*6|srbmy{
zo*}La4orxxD|Gi^=)qC}cLx_@8)HpUrlJrRa*E~d*8-!IrwEJ+PL$kYO;DDiP$$~u
zXsxawvnsI=QAP(hif*y~q6|ebZnSHqwd#qUUKTAgE;v$fi!}!5to%d^bPkRbESAPr
zBIj7EAhE)BB7<A|#G}WKDb|#8{KSb|FBu$MX+}%8baFl#|L+%H<V5ZRiv)AV8E544
zvXNvqmpTn=p~c#RR@@W$(O_o1a(0F8K0;E70_Yi>$vMWlNm+>kxhWs9u2)W?K(239
zEO);g=%<`Sf%FURwAf+|Q%0glhP5WvP~{_v<TQ7zNmuwkpk5h?A~;}Xzi-xJx%*&A
zB}$+^IMl2w)MH(uREA^|>oVmcO60O^VhvO-qC^HZ8@#*wK{WqLl*S=5>vF2a3Y$_&
zDp4w(gG;Bn!t<4hh>7!~V)aoTA}0Do#X3)Uh?qDJew#sB@cgT_Yu9r0=uyR(V(RMZ
z7&^4zyL>&PVx3#)yB922pw(tl&Xh@$iV^GFXjj-xF^Z;`6}6~#x2RaUM=0W=J}Ooh
z<so9COH?fFgCpXiQ&g;u%0t9N$Ea8xl!u6k4pFg$h?SFKX(0v?7ssMv9Z?=4CXPhK
zI;=cIOdO65+7ANV%XzfN=gp(OUcbX8iEiDCQsQ7#tOMmf$uVQbG~MYyq>}^DuCVNz
z;<&pauMPG`#ri>ch?w{xDprH?5HZmZ73+KDA!6eDs93v{hlq(?QL(;L9wH{bJ0+Hx
z?F0@f6Hy|Ef=j2}g#KE&h!Q#FP*kihm5V5mFSCjDnQ{>&@>w>qHYpcTBAc3tWoBEb
zz&%5eS`Gw<nzdK}|5ZMsNKSL7saPK?A5kP9w<gvH%10E*2Q7+aW}AT>%19K*j^NHI
zvOV_o9`M(=kKEYU$nQGox!5GpzFj-IcI}$aOW$kyk8EPSQx35PUZzEvlg8wU6M1sU
zl6+qJPSbxhd#=#T-bVAYL};<{pdmQZx>$iX6syRStgf^q)*9s{@?=fkVwu@`V2d&n
zIoJ|h$-Bh@Sf$)V4q9}iHL+eslmA4^914yUCYG5s0Lzu1Xo2Oyk%C(+fESgYD8`Le
z#WJ&v8f%GcW2@jsabg9YSB|1kCvq+kX=dx({S{zT^#65rbzI!PzamaC9Xn=Sn)Vel
zTbI+Dd=B95!+`aQS^&e%Ea&v9ylw`C4_c~BYo4X~NR_u(fv12*Wm~f}1_y{$EHnE8
zSfYGumL<V~{Cp|olimF+;6K0+<y=#20{&=bKgZr;g;wilV3BgJITjTnRl#BfxmE$s
zD(jlz*-&%JDpufMz*ovV^?Vg-O+~~qvmL;E<(_)xhgw%gtRUA)V1cqvEek@8i}RzD
zBfEP&nW;4+REJdYHZac2ieAg3q}{*5f#(9>suro?TVQS}Qk5)Lkn2<6F|;2~8aNC*
z7HUeHiWTHq0nAZd63?7a%hH{Q^Q_!`AuwI_NhFKR?EbhuEbbjv=K#x8qr|Z+?j9#r
zvCOP7oZxEJDlx1MU0`F?iWTJA4LpjTrcMHDfJZ~ksA{o-Tw8-&ud8-d%j-d^tz~hb
zoM-Ot7X!0_+f>J@;x%BlnSE2P16aAQz}@=+j{xIT&#GW~XsOD&a-&t^O5FWyU=}b%
zb!}6g4g>Xl<vx&A>WbXGeUNLG>f0vF2~r)e#KEl6SLf~%ftf&0)w&`ykhx7$(aD+C
z7FX)-HvkU<SE=r0WdoTT%4;iqU~8)@cK5!(L%`jte_2=x%saV%V9kgX5$rx-2GBz;
z#KK-OGe4hf%agEbNW$H(1Relxl@}%P2Jl22(_T^`Rz$FA!2KH77d1d%Xl9G6<%F!-
z5_0!TfN8*Z`H~mQfW>B3Ra-AxwWj6nw*XUt>*P*W-UpsCvp1{p<gD7$bNBJUWZ-hS
z1i)tC88fTud2g14B;DPBdw>ZwEZAl;E9pIFW?t<lYe`Gj-R}hM0<NtQq1FK}nAuB7
zI%!L4+U`Ca7z>OB&P<t1zmi#0cx6jFKS-?d3wAbeJ1`O$p76_APi9u<tCg66AhGh7
z>>}W1;Kl?=wjOvFc+1STrKJ|B603=1J;FHb8sKW+f+{(+?Z79%hrl{B+ndJxQ!7>$
z(fR;a0E2-+zyRQ!G9UIwGD`t{PG&c?jb^s17V@qcv07=>E&%!hy@6h2ZiaUU>VdA|
zi$O<zTND2na3l<{e*q2vKasily9d|}>;$%_wKd9z{{xKok)|rs?5F?$002ovPDHLk
FV1iJO0_^|*

literal 0
HcmV?d00001

diff --git a/src/app/demo/servicedesk/Home.jsx b/src/app/demo/servicedesk/Home.jsx
index 43fbddc6..5c21f0d7 100644
--- a/src/app/demo/servicedesk/Home.jsx
+++ b/src/app/demo/servicedesk/Home.jsx
@@ -310,7 +310,7 @@ export const Home = () => {
         <div className="flex items-center justify-between">
           <div>
             <h1 className="text-3xl font-bold tracking-tight text-white mb-2">
-              E-Space Support Dashboard
+              E-Space Supply Dashboard
             </h1>
             <p className="text-slate-300">
               Real-time satellite network insights to ensure mission-critical connectivity and customer success
@@ -318,8 +318,8 @@ export const Home = () => {
           </div>
           <div className="flex items-center gap-4">
             <div className="flex items-center gap-2">
-              <div className="flex items-center gap-2 px-3 py-2 bg-cyan-900/50 text-cyan-300 rounded-lg border border-cyan-500/30">
-                <div className="w-2 h-2 bg-cyan-400 rounded-full animate-pulse"></div>
+              <div className="flex items-center gap-2 px-3 py-2 bg-espace-700/50 text-espace-300 rounded-lg border border-espace-500/30">
+                <div className="w-2 h-2 bg-espace-400 rounded-full animate-pulse"></div>
                 <span className="text-sm font-medium">Satellite Network Online</span>
               </div>
             </div>
@@ -338,7 +338,7 @@ export const Home = () => {
           <div className="flex justify-center items-center gap-4 my-4">
             <button
               onClick={() => setShowFilterPopup(true)}
-              className="flex items-center gap-2 px-6 py-3 bg-cyan-600 hover:bg-cyan-700 text-white rounded-lg transition-colors shadow-lg"
+              className="flex items-center gap-2 px-6 py-3 bg-espace-500 hover:bg-espace-600 text-white rounded-lg transition-colors shadow-lg"
             >
               <Filter className="h-5 w-5" />
               <span className="font-medium">Ticket Priority: {casePriority.charAt(0).toUpperCase() + casePriority.slice(1)}</span>
@@ -364,26 +364,26 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
             )}
           </div>
 
-          {/* Case Management Dashboard */}
+          {/* Supply Chain Management Dashboard */}
           <div>
             <Card className="bg-slate-800 shadow-lg border-slate-700">
               <CardHeader>
                 <CardTitle className="flex items-center gap-2 text-white">
-                  <TrendingUp className="h-5 w-5 text-cyan-400" />
-                  Support Ticket Management
+                  <TrendingUp className="h-5 w-5 text-espace-400" />
+                  Supply Chain Management
                 </CardTitle>
                 <CardDescription className="text-slate-300">
-                  Track open tickets, network issues, and response times
+                  Track inventory, manufacturing, and supply chain operations
                 </CardDescription>
               </CardHeader>
               <CardContent className="flex items-center justify-center p-0 xs:p-6 xs:pt-0">
                 <div className="tableau-container w-full">
                   <TableauEmbed
                     id='caseManagementViz'
-                    src='https://public.tableau.com/views/SalesforceDataCloudServiceDesk/Users?:language=en-US&:sid=&:redirect=auth&:display_count=n&:origin=viz_share_link'
+                    src='https://prod-useast-b.online.tableau.com/t/embeddingplaybook/views/VehicleSupplyChain/Manufacturingdemo1-Inventory'
                     hideTabs={true}
                     toolbar='hidden'
-                    isPublic={true}
+                    isPublic={false}
 
                     demo="servicedesk"
                     className='
@@ -416,7 +416,7 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
           <div className="absolute top-32 left-1/2 transform -translate-x-1/2 bg-slate-800 rounded-lg shadow-xl p-6 max-w-md w-full mx-4" onClick={(e) => e.stopPropagation()}>
             <div className="flex items-center justify-between mb-6">
               <h3 className="text-xl font-semibold text-white flex items-center gap-2">
-                <Filter className="h-5 w-5 text-cyan-400" />
+                <Filter className="h-5 w-5 text-espace-400" />
                 Filter by Ticket Priority
               </h3>
               <button
@@ -437,7 +437,7 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
                   }}
                   className={`w-full text-left p-4 rounded-lg transition-colors border ${
                     casePriority === priority
-                      ? 'bg-cyan-600 border-cyan-600 text-white'
+                      ? 'bg-espace-500 border-espace-500 text-white'
                       : 'bg-slate-700 border-slate-600 text-slate-200 hover:bg-slate-600'
                   }`}
                 >
@@ -467,7 +467,7 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
           <div className="bg-slate-800 rounded-lg shadow-xl p-6 max-w-2xl w-full mx-4 max-h-[90vh] overflow-y-auto" onClick={(e) => e.stopPropagation()}>
             <div className="flex items-center justify-between mb-6">
               <h3 className="text-xl font-semibold text-white flex items-center gap-2">
-                <MessageSquare className="h-5 w-5 text-cyan-400" />
+                <MessageSquare className="h-5 w-5 text-espace-400" />
                 Share Ticket Update
               </h3>
               <button
@@ -485,7 +485,7 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
                 <textarea
                   value={editableSlackMessage}
                   onChange={(e) => setEditableSlackMessage(e.target.value)}
-                  className="w-full h-48 bg-slate-800 border border-slate-600 rounded-lg p-3 text-slate-200 font-mono text-sm resize-none focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-transparent"
+                  className="w-full h-48 bg-slate-800 border border-slate-600 rounded-lg p-3 text-slate-200 font-mono text-sm resize-none focus:outline-none focus:ring-2 focus:ring-espace-500 focus:border-transparent"
                   placeholder="Type your message here..."
                 />
               </div>
@@ -514,7 +514,7 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
                       setSelectedMarks([]);
                       setEditableSlackMessage('');
                     }}
-                    className="px-4 py-2 bg-cyan-600 hover:bg-cyan-700 text-white rounded-lg transition-colors font-semibold flex items-center gap-2"
+                    className="px-4 py-2 bg-espace-500 hover:bg-espace-600 text-white rounded-lg transition-colors font-semibold flex items-center gap-2"
                   >
                     <MessageSquare className="h-4 w-4" />
                     Send to Team
diff --git a/src/app/demo/servicedesk/cases/page.jsx b/src/app/demo/servicedesk/cases/page.jsx
index 22cc573d..7685a6d8 100644
--- a/src/app/demo/servicedesk/cases/page.jsx
+++ b/src/app/demo/servicedesk/cases/page.jsx
@@ -64,24 +64,16 @@ const CasesContent = () => {
     };
 
     const setupListeners = () => {
-      // Try multiple ways to find the viz elements
-      let openCasesViz = document.getElementById('openCasesViz');
-      let createdCasesViz = document.getElementById('createdCasesViz');
+      // Try multiple ways to find the viz element
+      let trackingViz = document.getElementById('trackingViz');
 
       // If not found by ID, try querySelector
-      if (!openCasesViz || !createdCasesViz) {
+      if (!trackingViz) {
         const tableauVizElements = document.querySelectorAll('tableau-viz');
         if (tableauVizElements.length > 0) {
-          if (!openCasesViz) {
-            openCasesViz = Array.from(tableauVizElements).find(
-              viz => viz.id === 'openCasesViz' || viz.getAttribute('id') === 'openCasesViz'
-            ) || tableauVizElements[0];
-          }
-          if (!createdCasesViz && tableauVizElements.length > 1) {
-            createdCasesViz = Array.from(tableauVizElements).find(
-              viz => viz.id === 'createdCasesViz' || viz.getAttribute('id') === 'createdCasesViz'
-            ) || tableauVizElements[1];
-          }
+          trackingViz = Array.from(tableauVizElements).find(
+            viz => viz.id === 'trackingViz' || viz.getAttribute('id') === 'trackingViz'
+          ) || tableauVizElements[0];
         }
       }
 
@@ -89,53 +81,37 @@ const CasesContent = () => {
         viz.addEventListener('markselectionchanged', handleMarkSelectionChanged);
       };
 
-      if (openCasesViz) {
-        // Check if already interactive
-        const isAlreadyInteractive = openCasesViz.getIsInteractive?.() || openCasesViz.isInteractive || false;
-
-        if (isAlreadyInteractive) {
-          addMarkSelectionListener(openCasesViz);
-        } else {
-          openCasesViz.addEventListener('firstinteractive', () => {
-            addMarkSelectionListener(openCasesViz);
-          });
-        }
-      }
-
-      if (createdCasesViz) {
+      if (trackingViz) {
         // Check if already interactive
-        const isAlreadyInteractive = createdCasesViz.getIsInteractive?.() || createdCasesViz.isInteractive || false;
+        const isAlreadyInteractive = trackingViz.getIsInteractive?.() || trackingViz.isInteractive || false;
 
         if (isAlreadyInteractive) {
-          addMarkSelectionListener(createdCasesViz);
+          addMarkSelectionListener(trackingViz);
         } else {
-          createdCasesViz.addEventListener('firstinteractive', () => {
-            addMarkSelectionListener(createdCasesViz);
+          trackingViz.addEventListener('firstinteractive', () => {
+            addMarkSelectionListener(trackingViz);
           });
         }
       }
 
-      return { openCasesViz, createdCasesViz };
+      return { trackingViz };
     };
 
     // Delay setup to ensure DOM elements are available
     const timer = setTimeout(() => {
-      const { openCasesViz, createdCasesViz } = setupListeners();
+      const { trackingViz } = setupListeners();
 
       // Store refs for cleanup
-      window._vizRefs = { openCasesViz, createdCasesViz, handleMarkSelectionChanged };
+      window._vizRefs = { trackingViz, handleMarkSelectionChanged };
     }, 1000);
 
     // Cleanup
     return () => {
       clearTimeout(timer);
       if (window._vizRefs) {
-        const { openCasesViz, createdCasesViz, handleMarkSelectionChanged } = window._vizRefs;
-        if (openCasesViz) {
-          openCasesViz.removeEventListener('markselectionchanged', handleMarkSelectionChanged);
-        }
-        if (createdCasesViz) {
-          createdCasesViz.removeEventListener('markselectionchanged', handleMarkSelectionChanged);
+        const { trackingViz, handleMarkSelectionChanged } = window._vizRefs;
+        if (trackingViz) {
+          trackingViz.removeEventListener('markselectionchanged', handleMarkSelectionChanged);
         }
         delete window._vizRefs;
       }
@@ -150,7 +126,7 @@ const CasesContent = () => {
 
     // Generate message content for each selected mark
     const dataOnly = selectedMarks.map((mark, index) =>
-      `Ticket ${index + 1}:
+      `Shipment ${index + 1}:
 ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n')}`
     ).join('\n\n');
 
@@ -182,7 +158,7 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
                 </div>
                 <div className="flex justify-between items-center">
                   <span className="text-slate-300">In Progress</span>
-                  <span className="text-2xl font-bold text-cyan-400">47</span>
+                  <span className="text-2xl font-bold text-espace-400">47</span>
                 </div>
                 <div className="flex justify-between items-center">
                   <span className="text-slate-300">Awaiting Customer</span>
@@ -233,7 +209,7 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
           <Card className="bg-slate-800 shadow-lg border-slate-700">
             <CardHeader>
               <CardTitle className="flex items-center gap-2 text-white">
-                <div className="h-5 w-5 bg-cyan-500 rounded-full"></div>
+                <div className="h-5 w-5 bg-espace-500 rounded-full"></div>
                 Support Engineer Performance
               </CardTitle>
               <CardDescription className="text-slate-300">
@@ -244,19 +220,19 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
               <div className="space-y-3">
                 <div className="flex justify-between items-center">
                   <span className="text-slate-300">Sarah Chen</span>
-                  <span className="text-sm font-bold text-cyan-400">47 tickets</span>
+                  <span className="text-sm font-bold text-espace-400">47 tickets</span>
                 </div>
                 <div className="flex justify-between items-center">
                   <span className="text-slate-300">Mike Rodriguez</span>
-                  <span className="text-sm font-bold text-cyan-400">42 tickets</span>
+                  <span className="text-sm font-bold text-espace-400">42 tickets</span>
                 </div>
                 <div className="flex justify-between items-center">
                   <span className="text-slate-300">Emily Johnson</span>
-                  <span className="text-sm font-bold text-cyan-400">38 tickets</span>
+                  <span className="text-sm font-bold text-espace-400">38 tickets</span>
                 </div>
                 <div className="flex justify-between items-center">
                   <span className="text-slate-300">David Kim</span>
-                  <span className="text-sm font-bold text-cyan-400">35 tickets</span>
+                  <span className="text-sm font-bold text-espace-400">35 tickets</span>
                 </div>
               </div>
             </CardContent>
@@ -268,35 +244,34 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
           <div className="flex justify-center">
             <button
               onClick={generateSlackMessage}
-              className="flex items-center gap-2 px-6 py-3 bg-cyan-600 hover:bg-cyan-700 text-white rounded-lg transition-colors shadow-lg animate-pulse"
+              className="flex items-center gap-2 px-6 py-3 bg-espace-500 hover:bg-espace-600 text-white rounded-lg transition-colors shadow-lg animate-pulse"
             >
               <MessageSquare className="h-5 w-5" />
-              <span className="font-medium">Share Ticket Update ({selectedMarks.length})</span>
+              <span className="font-medium">Share Shipment Update ({selectedMarks.length})</span>
             </button>
           </div>
         )}
 
-        {/* Tableau Dashboards Row */}
-        <div className="grid gap-6 lg:grid-cols-2">
-          {/* Open Tickets Dashboard */}
+        {/* Tableau Dashboard */}
+        <div>
           <Card className="bg-slate-800 shadow-lg border-slate-700">
             <CardHeader>
               <CardTitle className="flex items-center gap-2 text-white">
-                <FileText className="h-5 w-5 text-cyan-400" />
-                Open Support Tickets
+                <FileText className="h-5 w-5 text-espace-400" />
+                E-Space Tracking
               </CardTitle>
               <CardDescription className="text-slate-300">
-                Current open tickets and their status across satellite network support
+                Track shipments and delivery status
               </CardDescription>
             </CardHeader>
             <CardContent className="flex items-center justify-center p-0 xs:p-6 xs:pt-0">
               <div className="tableau-container w-full">
                 <TableauEmbed
-                  id='openCasesViz'
-                  src='https://public.tableau.com/views/SalesforceDataCloudServiceDesk/OpenCases?:language=en-US&:sid=&:redirect=auth&:display_count=n&:origin=viz_share_link'
+                  id='trackingViz'
+                  src='https://prod-useast-b.online.tableau.com/t/embeddingplaybook/views/ShippingDashboard/PersonalTracker'
                   hideTabs={true}
                   toolbar='hidden'
-                  isPublic={true}
+                  isPublic={false}
                   width='100%'
                   height='100%'
                   demo="servicedesk"
@@ -304,9 +279,9 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
                     min-w-[300px] min-h-[1430px]
                     sm:min-w-[510px] sm:min-h-[1430px]
                     md:min-w-[600px] md:min-h-[950px]
-                    lg:min-w-[750px] lg:min-h-[950px]
-                    xl:min-w-[750px] xl:min-h-[950px]
-                    2xl:min-w-[750px] 2xl:min-h-[950px]
+                    lg:min-w-[1200px] lg:min-h-[950px]
+                    xl:min-w-[1600px] xl:min-h-[1180px]
+                    2xl:min-w-[1600px] 2xl:min-h-[1180px]
                     '
                     layouts = {{
                       'xs': { 'device': 'desktop' },
@@ -320,47 +295,6 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
               </div>
             </CardContent>
           </Card>
-
-          {/* Created Tickets Dashboard */}
-          <Card className="bg-slate-800 shadow-lg border-slate-700">
-            <CardHeader>
-              <CardTitle className="flex items-center gap-2 text-white">
-                <Clock className="h-5 w-5 text-cyan-400" />
-                Created Support Tickets
-              </CardTitle>
-              <CardDescription className="text-slate-300">
-                Ticket creation trends and volume analysis over time
-              </CardDescription>
-            </CardHeader>
-            <CardContent className="flex items-center justify-center p-0 xs:p-6 xs:pt-0">
-              <div className="tableau-container w-full">
-                <TableauEmbed
-                  id='createdCasesViz'
-                  src='https://public.tableau.com/views/SalesforceDataCloudServiceDesk/CreatedCases?:language=en-US&:sid=&:redirect=auth&:display_count=n&:origin=viz_share_link'
-                  hideTabs={true}
-                  toolbar='hidden'
-                  isPublic={true}
-                  demo="servicedesk"
-                  className='
-                  min-w-[300px] min-h-[1430px]
-                  sm:min-w-[510px] sm:min-h-[1430px]
-                   md:min-w-[600px] md:min-h-[950px]
-                    lg:min-w-[750px] lg:min-h-[950px]
-                    xl:min-w-[750px] xl:min-h-[950px]
-                    2xl:min-w-[750px] 2xl:min-h-[950px]
-                  '
-                  layouts = {{
-                    'xs': { 'device': 'desktop' },
-                    'sm': { 'device': 'desktop' },
-                    'md': { 'device': 'desktop' },
-                    'lg': { 'device': 'desktop' },
-                    'xl': { 'device': 'desktop' },
-                    'xl2': { 'device': 'desktop' },
-                  }}
-                />
-              </div>
-            </CardContent>
-          </Card>
         </div>
       </main>
 
@@ -370,8 +304,8 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
           <div className="bg-slate-800 rounded-lg shadow-xl p-6 max-w-2xl w-full mx-4 max-h-[90vh] overflow-y-auto" onClick={(e) => e.stopPropagation()}>
             <div className="flex items-center justify-between mb-6">
               <h3 className="text-xl font-semibold text-white flex items-center gap-2">
-                <MessageSquare className="h-5 w-5 text-cyan-400" />
-                Share Ticket Update
+                <MessageSquare className="h-5 w-5 text-espace-400" />
+                Share Shipment Update
               </h3>
               <button
                 onClick={() => setShowSlackModal(false)}
@@ -388,7 +322,7 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
                 <textarea
                   value={editableSlackMessage}
                   onChange={(e) => setEditableSlackMessage(e.target.value)}
-                  className="w-full h-48 bg-slate-800 border border-slate-600 rounded-lg p-3 text-slate-200 font-mono text-sm resize-none focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-transparent"
+                  className="w-full h-48 bg-slate-800 border border-slate-600 rounded-lg p-3 text-slate-200 font-mono text-sm resize-none focus:outline-none focus:ring-2 focus:ring-espace-500 focus:border-transparent"
                   placeholder="Type your message here..."
                 />
               </div>
@@ -417,7 +351,7 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
                       setSelectedMarks([]);
                       setEditableSlackMessage('');
                     }}
-                    className="px-4 py-2 bg-cyan-600 hover:bg-cyan-700 text-white rounded-lg transition-colors font-semibold flex items-center gap-2"
+                    className="px-4 py-2 bg-espace-500 hover:bg-espace-600 text-white rounded-lg transition-colors font-semibold flex items-center gap-2"
                   >
                     <MessageSquare className="h-4 w-4" />
                     Send to Team
@@ -434,7 +368,7 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
 
 export default function CasesPage() {
   return (
-    <Demo settings={settings} pageName="Support Tickets">
+    <Demo settings={settings} pageName="Shipping Tracker">
       <CasesContent />
       <FloatingAssistant settings={settings} />
     </Demo>
diff --git a/src/app/demo/servicedesk/config.js b/src/app/demo/servicedesk/config.js
index 93a5b7a8..51c5d1c0 100644
--- a/src/app/demo/servicedesk/config.js
+++ b/src/app/demo/servicedesk/config.js
@@ -15,12 +15,12 @@ import {
 export const settings = {
   app_id: 'servicedesk',
   app_name: 'E-Space Support Hub',
-  app_logo: '/img/themes/servicedesk/espace_logo.svg',
-  auth_logo: '/img/themes/servicedesk/espace_logo.svg',
+  app_logo: '/img/themes/servicedesk/e-space_small.png',
+  auth_logo: 'https://cdn.brandfetch.io/idypK-MB6o/w/200/h/200/theme/dark/icon.jpeg?c=1bxid64Mup7aczewSAYMX&t=1762890670211',
   base_path: '/demo/servicedesk',
   auth_hero: 'https://player.vimeo.com/video/753626640?h=23d74e3691&&autoplay=1&loop=1&autopause=0&api=1&background=1',
   ai_chat: true,
-  ai_avatar: '/img/themes/servicedesk/espace_logo.svg',
+  ai_avatar: 'https://cdn.brandfetch.io/idypK-MB6o/w/200/h/200/theme/dark/icon.jpeg?c=1bxid64Mup7aczewSAYMX&t=1762890670211',
   sample_questions: [
     "What's our satellite network uptime this month?",
     "Show me open support tickets by priority",
@@ -35,11 +35,11 @@ export const settings = {
       description: 'E-Space support analytics overview and key metrics'
     },
     {
-      name: 'Support Tickets',
+      name: 'Shipping Tracker',
       icon: <FileText className="h-5 w-5"/>,
       path: '/cases',
       min_role: 0,
-      description: 'Open tickets and satellite network support analytics'
+      description: 'Track shipments and delivery status'
     },
     {
       name: 'Customer Success',
@@ -71,9 +71,9 @@ export const settings = {
     },
   ],
   branding: {
-    primary_color: '#0A2540', // Deep space blue
+    primary_color: '#046C93', // E-Space primary blue
     secondary_color: '#1E3A8A', // Rich blue
-    accent_color: '#06B6D4', // Cyan/teal
+    accent_color: '#046C93', // Primary blue
     success_color: '#10B981',
     warning_color: '#F59E0B',
     danger_color: '#EF4444',
diff --git a/src/app/demo/servicedesk/success/page.jsx b/src/app/demo/servicedesk/success/page.jsx
index 2995bfa5..5396072f 100644
--- a/src/app/demo/servicedesk/success/page.jsx
+++ b/src/app/demo/servicedesk/success/page.jsx
@@ -143,7 +143,7 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
           <div className="flex justify-center">
             <button
               onClick={generateSlackMessage}
-              className="flex items-center gap-2 px-6 py-3 bg-cyan-600 hover:bg-cyan-700 text-white rounded-lg transition-colors shadow-lg animate-pulse"
+              className="flex items-center gap-2 px-6 py-3 bg-espace-500 hover:bg-espace-600 text-white rounded-lg transition-colors shadow-lg animate-pulse"
             >
               <MessageSquare className="h-5 w-5" />
               <span className="font-medium">Share Customer Update ({selectedMarks.length})</span>
@@ -155,7 +155,7 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
           <Card className="bg-slate-800 shadow-lg border-slate-700">
             <CardHeader>
               <CardTitle className="flex items-center gap-2 text-white">
-                <Users2 className="h-5 w-5 text-cyan-400" />
+                <Users2 className="h-5 w-5 text-espace-400" />
                 Customer Health Score
               </CardTitle>
               <CardDescription className="text-slate-300">
@@ -204,17 +204,17 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
                 <div className="p-4 bg-slate-700 rounded-lg">
                   <p className="text-slate-400 text-sm">Renewal Rate</p>
                   <p className="text-3xl font-bold text-white mt-1">94%</p>
-                  <p className="text-cyan-400 text-sm mt-1">↑ 5% from last quarter</p>
+                  <p className="text-espace-400 text-sm mt-1">↑ 5% from last quarter</p>
                 </div>
                 <div className="p-4 bg-slate-700 rounded-lg">
                   <p className="text-slate-400 text-sm">Customer Satisfaction</p>
                   <p className="text-3xl font-bold text-white mt-1">4.8/5</p>
-                  <p className="text-cyan-400 text-sm mt-1">↑ 0.3 from last month</p>
+                  <p className="text-espace-400 text-sm mt-1">↑ 0.3 from last month</p>
                 </div>
                 <div className="p-4 bg-slate-700 rounded-lg">
                   <p className="text-slate-400 text-sm">Network Expansion</p>
                   <p className="text-3xl font-bold text-white mt-1">23%</p>
-                  <p className="text-cyan-400 text-sm mt-1">↑ 8% this quarter</p>
+                  <p className="text-espace-400 text-sm mt-1">↑ 8% this quarter</p>
                 </div>
               </div>
             </CardContent>
@@ -228,7 +228,7 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
           <div className="bg-slate-800 rounded-lg shadow-xl p-6 max-w-2xl w-full mx-4 max-h-[90vh] overflow-y-auto" onClick={(e) => e.stopPropagation()}>
             <div className="flex items-center justify-between mb-6">
               <h3 className="text-xl font-semibold text-white flex items-center gap-2">
-                <MessageSquare className="h-5 w-5 text-cyan-400" />
+                <MessageSquare className="h-5 w-5 text-espace-400" />
                 Share Customer Update
               </h3>
               <button
@@ -246,7 +246,7 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
                 <textarea
                   value={editableSlackMessage}
                   onChange={(e) => setEditableSlackMessage(e.target.value)}
-                  className="w-full h-48 bg-slate-800 border border-slate-600 rounded-lg p-3 text-slate-200 font-mono text-sm resize-none focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-transparent"
+                  className="w-full h-48 bg-slate-800 border border-slate-600 rounded-lg p-3 text-slate-200 font-mono text-sm resize-none focus:outline-none focus:ring-2 focus:ring-espace-500 focus:border-transparent"
                   placeholder="Type your message here..."
                 />
               </div>
@@ -275,7 +275,7 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
                       setSelectedMarks([]);
                       setEditableSlackMessage('');
                     }}
-                    className="px-4 py-2 bg-cyan-600 hover:bg-cyan-700 text-white rounded-lg transition-colors font-semibold flex items-center gap-2"
+                    className="px-4 py-2 bg-espace-500 hover:bg-espace-600 text-white rounded-lg transition-colors font-semibold flex items-center gap-2"
                   >
                     <MessageSquare className="h-4 w-4" />
                     Send to Team
diff --git a/src/app/demo/servicedesk/training/page.jsx b/src/app/demo/servicedesk/training/page.jsx
index 551aa28f..5b60440f 100644
--- a/src/app/demo/servicedesk/training/page.jsx
+++ b/src/app/demo/servicedesk/training/page.jsx
@@ -144,7 +144,7 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
               <CardTitle className="text-sm font-medium text-slate-400">Overall Completion</CardTitle>
             </CardHeader>
             <CardContent>
-              <div className="text-2xl font-bold text-cyan-400">87%</div>
+              <div className="text-2xl font-bold text-espace-400">87%</div>
               <p className="text-xs text-slate-500 mt-1">All onboarding programs</p>
             </CardContent>
           </Card>
@@ -155,7 +155,7 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
             </CardHeader>
             <CardContent>
               <div className="text-2xl font-bold text-white">1,247</div>
-              <p className="text-xs text-cyan-400 mt-1">↑ 15% from last month</p>
+              <p className="text-xs text-espace-400 mt-1">↑ 15% from last month</p>
             </CardContent>
           </Card>
 
@@ -165,7 +165,7 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
             </CardHeader>
             <CardContent>
               <div className="text-2xl font-bold text-white">3.2 days</div>
-              <p className="text-xs text-cyan-400 mt-1">↓ 0.5 days faster</p>
+              <p className="text-xs text-espace-400 mt-1">↓ 0.5 days faster</p>
             </CardContent>
           </Card>
 
@@ -174,7 +174,7 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
               <CardTitle className="text-sm font-medium text-slate-400">Satisfaction Score</CardTitle>
             </CardHeader>
             <CardContent>
-              <div className="text-2xl font-bold text-cyan-400">4.6/5</div>
+              <div className="text-2xl font-bold text-espace-400">4.6/5</div>
               <p className="text-xs text-slate-500 mt-1">Customer feedback</p>
             </CardContent>
           </Card>
@@ -185,7 +185,7 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
           <div className="flex justify-center">
             <button
               onClick={generateSlackMessage}
-              className="flex items-center gap-2 px-6 py-3 bg-cyan-600 hover:bg-cyan-700 text-white rounded-lg transition-colors shadow-lg animate-pulse"
+              className="flex items-center gap-2 px-6 py-3 bg-espace-500 hover:bg-espace-600 text-white rounded-lg transition-colors shadow-lg animate-pulse"
             >
               <MessageSquare className="h-5 w-5" />
               <span className="font-medium">Share Onboarding Update ({selectedMarks.length})</span>
@@ -196,7 +196,7 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
         <Card className="bg-slate-800 shadow-lg border-slate-700">
             <CardHeader>
               <CardTitle className="flex items-center gap-2 text-white">
-                <FileText className="h-5 w-5 text-cyan-400" />
+                <FileText className="h-5 w-5 text-espace-400" />
                 Customer Onboarding Analytics
               </CardTitle>
               <CardDescription className="text-slate-300">
@@ -289,7 +289,7 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
           <div className="bg-slate-800 rounded-lg shadow-xl p-6 max-w-2xl w-full mx-4 max-h-[90vh] overflow-y-auto" onClick={(e) => e.stopPropagation()}>
             <div className="flex items-center justify-between mb-6">
               <h3 className="text-xl font-semibold text-white flex items-center gap-2">
-                <MessageSquare className="h-5 w-5 text-cyan-400" />
+                <MessageSquare className="h-5 w-5 text-espace-400" />
                 Share Onboarding Update
               </h3>
               <button
@@ -307,7 +307,7 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
                 <textarea
                   value={editableSlackMessage}
                   onChange={(e) => setEditableSlackMessage(e.target.value)}
-                  className="w-full h-48 bg-slate-800 border border-slate-600 rounded-lg p-3 text-slate-200 font-mono text-sm resize-none focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-transparent"
+                  className="w-full h-48 bg-slate-800 border border-slate-600 rounded-lg p-3 text-slate-200 font-mono text-sm resize-none focus:outline-none focus:ring-2 focus:ring-espace-500 focus:border-transparent"
                   placeholder="Type your message here..."
                 />
               </div>
@@ -336,7 +336,7 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
                       setSelectedMarks([]);
                       setEditableSlackMessage('');
                     }}
-                    className="px-4 py-2 bg-cyan-600 hover:bg-cyan-700 text-white rounded-lg transition-colors font-semibold flex items-center gap-2"
+                    className="px-4 py-2 bg-espace-500 hover:bg-espace-600 text-white rounded-lg transition-colors font-semibold flex items-center gap-2"
                   >
                     <MessageSquare className="h-4 w-4" />
                     Send to Team
diff --git a/src/components/Demo/components/Auth/Auth.jsx b/src/components/Demo/components/Auth/Auth.jsx
index 49955fd2..17762366 100644
--- a/src/components/Demo/components/Auth/Auth.jsx
+++ b/src/components/Demo/components/Auth/Auth.jsx
@@ -71,7 +71,7 @@ export const Auth = (props) => {
         <Card className="mx-auto w-[480px] max-w-full shadow-lg backdrop-blur-sm loginBackground/95">
           <CardHeader className="text-center">
             <div className="flex justify-center mb-4">
-              <Avatar className="flex items-center justify-center h-16 w-16 bg-logoBackground">
+              <Avatar className="flex items-center justify-center h-32 w-32 bg-logoBackground">
                 <AvatarImage src={logoToUse} className="object-cover rounded-full" />
                 <AvatarFallback>APP</AvatarFallback>
               </Avatar>
diff --git a/src/components/Demo/components/Demo.jsx b/src/components/Demo/components/Demo.jsx
index 22dbc474..3391367e 100644
--- a/src/components/Demo/components/Demo.jsx
+++ b/src/components/Demo/components/Demo.jsx
@@ -36,7 +36,7 @@ export const Demo = (props) => {
         ai_avatar={ai_avatar}
         sections={sections}
       />
-      <main className="flex flex-col sm:pl-14 bg-demoBackground flex-grow">
+      <main className="flex flex-col sm:pl-20 bg-demoBackground flex-grow">
         <Navigation
           base_path={base_path}
           crumbs={crumbs}
diff --git a/src/components/Demo/components/Navigation/NavigationMd.jsx b/src/components/Demo/components/Navigation/NavigationMd.jsx
index a089b7ee..ef357b4d 100644
--- a/src/components/Demo/components/Navigation/NavigationMd.jsx
+++ b/src/components/Demo/components/Navigation/NavigationMd.jsx
@@ -28,13 +28,13 @@ export const NavigationMd = (props) => {
   } = props;
 
   return (
-    <aside className="fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-navBackground sm:flex">
-      <nav className="flex flex-col items-center gap-4 px-2 sm:py-5 bg-navBackground">
+    <aside className="fixed inset-y-0 left-0 z-10 hidden w-20 flex-col border-r bg-navBackground sm:flex">
+      <nav className="flex flex-col items-center gap-5 px-3 sm:py-6 bg-navBackground">
         <Link
           href='/demos'
-          className="group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-logoBackground text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base"
+          className="group flex h-14 w-14 shrink-0 items-center justify-center gap-2 rounded-full bg-logoBackground text-lg font-semibold text-primary-foreground"
         >
-          <Avatar className="h-8 w-8 p-1 transition-all group-hover:scale-110 bg-logoBackground">
+          <Avatar className="h-12 w-12 p-1.5 transition-all group-hover:scale-110 bg-logoBackground">
             <AvatarImage src={app_logo} alt="demo brand logo" />
             <AvatarFallback>APP</AvatarFallback>
           </Avatar>
@@ -44,15 +44,15 @@ export const NavigationMd = (props) => {
           return <NavBarItem key={section.name} section={section} base_path={base_path} />
         }): null}
       </nav>
-      <nav className="mt-auto flex flex-col items-center gap-4 px-2 sm:py-5">
+      <nav className="mt-auto flex flex-col items-center gap-5 px-3 sm:py-6">
         <TooltipProvider>
           <Tooltip>
             <TooltipTrigger asChild>
               <Link
                 href={base_path + '/settings'}
-                className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
+                className="flex h-12 w-12 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground"
               >
-                <Settings className="h-5 w-5 text-navIcons"/>
+                <Settings className="h-6 w-6 text-navIcons"/>
                 <span className="sr-only">Settings</span>
               </Link>
             </TooltipTrigger>
@@ -74,9 +74,11 @@ const NavBarItem = (props) => {
         <TooltipTrigger asChild>
           <Link
             href={base_path + path}
-            className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8 text-navIcons bg-iconBackground hover:scale-110"
+            className="flex h-12 w-12 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground text-navIcons bg-iconBackground hover:scale-110"
           >
-            {icon}
+            <div className="scale-125">
+              {icon}
+            </div>
             <span className="sr-only">{name}</span>
           </Link>
         </TooltipTrigger>
diff --git a/src/components/TableauEmbed/TableauToolbar/TableauToolbar.jsx b/src/components/TableauEmbed/TableauToolbar/TableauToolbar.jsx
index 29e1568a..7c2351c3 100644
--- a/src/components/TableauEmbed/TableauToolbar/TableauToolbar.jsx
+++ b/src/components/TableauEmbed/TableauToolbar/TableauToolbar.jsx
@@ -83,7 +83,7 @@ export const TableauToolbar = forwardRef(function TableauToolbar(props, ref) {
   }, [ref]);
 
   return (
-    <Menubar className='mt-1 mb-3 inline-flex' >
+    <Menubar className='mt-1 mb-3 inline-flex px-6' >
       <MenubarMenu >
         <MenubarTrigger className='cursor-pointer px-1'>
           <IconFile stroke={1} size={18} className='mr-1'/> File
diff --git a/src/global.css b/src/global.css
index 95987475..914203fa 100644
--- a/src/global.css
+++ b/src/global.css
@@ -208,24 +208,25 @@
     --card-foreground: 210 40% 98%;
     --popover: 217 33% 17%;
     --popover-foreground: 210 40% 98%;
-    --primary: 189 100% 42%; /* E-Space cyan/teal */
+    --primary: 196 95% 30%; /* E-Space primary blue #046C93 */
     --primary-foreground: 210 40% 98%;
     --secondary: 221 83% 53%; /* Rich blue */
     --secondary-foreground: 210 40% 98%;
     --muted: 217 33% 17%;
     --muted-foreground: 215 20% 65%;
-    --accent: 189 100% 42%; /* Cyan accent */
+    --accent: 196 95% 30%; /* Primary blue accent */
     --accent-foreground: 210 40% 98%;
     --destructive: 0 63% 31%;
     --destructive-foreground: 210 40% 98%;
     --border: 217 33% 25%;
     --input: 217 33% 17%;
-    --ring: 189 100% 42%;
+    --ring: 196 95% 30%;
 
-    --metrics-positive: 189 100% 42%; /* Cyan for positive */
+    --metrics-positive: 196 95% 30%; /* Primary blue for positive */
     --metrics-neutral: 39 7% 54%;
     --metrics-negative: 23 93% 51%;
     --breadcrumbs: 0 0% 100%; /* White for breadcrumbs */
+    --nav-icons: 0 0% 100%; /* White for icons */
   }
 
   /* Apply dark class when servicedesk theme is active for Tailwind dark: classes */
@@ -276,11 +277,11 @@
     color: hsl(0 0% 100%) !important;
   }
 
-  /* Breadcrumb links hover - primary color (cyan) */
+  /* Breadcrumb links hover - primary color */
   [data-theme="servicedesk"] nav[aria-label="breadcrumb"] a.text-breadcrumbs:hover,
   [data-theme="servicedesk"] nav[aria-label="breadcrumb"] .text-breadcrumbs:hover,
   [data-theme="servicedesk"] nav[aria-label="breadcrumb"] a:hover {
-    color: hsl(189 100% 42%) !important;
+    color: hsl(196 95% 30%) !important;
   }
 
   /* Breadcrumb separator icons - white */
@@ -294,11 +295,11 @@
     color: hsl(0 0% 100%) !important;
   }
 
-  /* Side navigation icons hover - primary color (cyan) */
+  /* Side navigation icons hover - primary color */
   [data-theme="servicedesk"] .text-navIcons:hover,
   [data-theme="servicedesk"] a:hover .text-navIcons,
   [data-theme="servicedesk"] nav a:hover .text-navIcons {
-    color: hsl(189 100% 42%) !important;
+    color: hsl(196 95% 30%) !important;
   }
 
   /* Side navigation text in mobile menu - white */
@@ -325,32 +326,33 @@
   [data-theme="servicedesk"] aside nav a:hover svg.text-navIcons,
   [data-theme="servicedesk"] aside nav a.hover\:text-foreground:hover .text-navIcons,
   [data-theme="servicedesk"] aside nav a.hover\:text-foreground:hover svg {
-    color: hsl(189 100% 42%) !important;
+    color: hsl(196 95% 30%) !important;
   }
 
   /* All navigation icons inside hovered links */
   [data-theme="servicedesk"] aside nav a:hover svg,
   [data-theme="servicedesk"] aside nav a:hover .text-navIcons svg {
-    color: hsl(189 100% 42%) !important;
+    color: hsl(196 95% 30%) !important;
   }
 
-  /* TableauToolbar Menubar - dark mode - override Tailwind classes */
+  /* TableauToolbar Menubar - primary background with white text/icons */
   [data-theme="servicedesk"] .dark [role="menubar"],
   [data-theme="servicedesk"] [role="menubar"] {
-    background-color: hsl(var(--secondary)) !important;
-    border: 1px solid hsl(217.2 32.6% 30%) !important;
-    color: hsl(var(--foreground));
+    background-color: hsl(196 95% 30%) !important; /* Primary blue background */
+    border: 1px solid hsl(196 95% 30%) !important; /* Primary blue border */
+    color: hsl(0 0% 100%) !important; /* White text */
   }
 
   /* Override Tailwind classes more specifically */
   [data-theme="servicedesk"] .dark .mt-1.mb-3.inline-flex[role="menubar"],
   [data-theme="servicedesk"] .mt-1.mb-3.inline-flex[role="menubar"] {
-    border: 1px solid hsl(217.2 32.6% 30%) !important;
+    border: 1px solid hsl(196 95% 30%) !important; /* Primary blue border */
+    background-color: hsl(196 95% 30%) !important; /* Primary blue background */
   }
 
   [data-theme="servicedesk"] .dark [data-radix-menubar-trigger],
   [data-theme="servicedesk"] [data-radix-menubar-trigger] {
-    color: hsl(var(--foreground));
+    color: hsl(0 0% 100%) !important; /* White text */
   }
 
   [data-theme="servicedesk"] .dark [data-radix-menubar-trigger]:hover,
@@ -359,8 +361,13 @@
   [data-theme="servicedesk"] [data-radix-menubar-trigger]:hover,
   [data-theme="servicedesk"] [data-radix-menubar-trigger]:focus,
   [data-theme="servicedesk"] [data-radix-menubar-trigger][data-state="open"] {
-    background-color: hsl(var(--secondary) / 0.8);
-    color: hsl(var(--foreground));
+    background-color: hsl(196 95% 25%) !important; /* Darker blue on hover */
+    color: hsl(0 0% 100%) !important; /* White text */
+  }
+
+  /* Menubar icons - white */
+  [data-theme="servicedesk"] [role="menubar"] svg {
+    color: hsl(0 0% 100%) !important; /* White icons */
   }
 
   /* Menubar content dropdowns */
@@ -383,4 +390,9 @@
     background-color: hsl(var(--accent));
     color: hsl(var(--accent-foreground));
   }
+
+  /* Menubar shortcuts - white */
+  [data-theme="servicedesk"] [role="menubar"] [class*="MenubarShortcut"] {
+    color: hsl(0 0% 100%) !important; /* White shortcuts */
+  }
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index dadb771e..4be9bfc1 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -64,6 +64,15 @@ module.exports = {
         metricsNeutral: 'hsl(var(--metrics-neutral))',
         metricsNegative: 'hsl(var(--metrics-negative))',
 
+        // E-Space primary color variants (#046C93)
+        espace: {
+          300: '#5BA3C0',
+          400: '#3D8BA8',
+          500: '#046C93',
+          600: '#035A7A',
+          700: '#024862',
+        },
+
         // Add any other semantic colors you need
       },
       borderRadius: { // Often useful alongside color theming

From fd866a0d780df8afc143f1692698e103e652ac24 Mon Sep 17 00:00:00 2001
From: jeremymayo <jeremydmayo@gmail.com>
Date: Wed, 17 Dec 2025 17:52:46 -0600
Subject: [PATCH 4/4] espace final

---
 src/app/demo/servicedesk/Home.jsx          |  13 ++-
 src/app/demo/servicedesk/cases/page.jsx    |  86 +++++++-------
 src/app/demo/servicedesk/config.js         |  12 +-
 src/app/demo/servicedesk/success/page.jsx  | 128 +++++++++++----------
 src/app/demo/servicedesk/training/page.jsx |   2 +-
 src/components/TableauEmbed/TableauViz.jsx |  36 +++++-
 6 files changed, 157 insertions(+), 120 deletions(-)

diff --git a/src/app/demo/servicedesk/Home.jsx b/src/app/demo/servicedesk/Home.jsx
index 5c21f0d7..090dfe6d 100644
--- a/src/app/demo/servicedesk/Home.jsx
+++ b/src/app/demo/servicedesk/Home.jsx
@@ -277,12 +277,21 @@ export const Home = () => {
           overflow: hidden;
           contain: layout style paint;
           isolation: isolate;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 100%;
+          margin: 0;
+          padding: 0;
         }
         .tableau-container tableau-viz {
           position: relative !important;
           z-index: 1 !important;
           contain: layout style paint !important;
           isolation: isolate !important;
+          width: 100% !important;
+          height: 100% !important;
+          display: block;
         }
         /* Prevent Tableau from stealing focus and scrolling */
         tableau-viz:focus {
@@ -376,11 +385,11 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
                   Track inventory, manufacturing, and supply chain operations
                 </CardDescription>
               </CardHeader>
-              <CardContent className="flex items-center justify-center p-0 xs:p-6 xs:pt-0">
+              <CardContent className="p-0">
                 <div className="tableau-container w-full">
                   <TableauEmbed
                     id='caseManagementViz'
-                    src='https://prod-useast-b.online.tableau.com/t/embeddingplaybook/views/VehicleSupplyChain/Manufacturingdemo1-Inventory'
+                    src='https://prod-useast-b.online.tableau.com/t/embeddingplaybook/views/VehicleSupplyChain/Manufacturingdemo3-Suppliers'
                     hideTabs={true}
                     toolbar='hidden'
                     isPublic={false}
diff --git a/src/app/demo/servicedesk/cases/page.jsx b/src/app/demo/servicedesk/cases/page.jsx
index 7685a6d8..e5fe0eb6 100644
--- a/src/app/demo/servicedesk/cases/page.jsx
+++ b/src/app/demo/servicedesk/cases/page.jsx
@@ -3,7 +3,7 @@
 import { Demo, FloatingAssistant } from '@/components';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui";
 import { TableauEmbed } from '@/components';
-import { FileText, Clock, MessageSquare, X } from 'lucide-react';
+import { Truck, Package, MapPin, MessageSquare, X } from 'lucide-react';
 import { settings } from '../config';
 import { useState, useEffect } from 'react';
 
@@ -137,102 +137,102 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
   return (
     <div className="flex min-h-screen w-full flex-col">
       <main className="flex flex-1 flex-col gap-6 p-4 md:gap-8 md:p-8">
-        {/* Service Portal Elements Row */}
+        {/* Shipping Metrics Row */}
         <div className="grid gap-6 lg:grid-cols-3">
-          {/* Ticket Queue Status */}
+          {/* Shipment Status */}
           <Card className="bg-slate-800 shadow-lg border-slate-700">
             <CardHeader>
               <CardTitle className="flex items-center gap-2 text-white">
-                <div className="h-5 w-5 bg-yellow-500 rounded-full"></div>
-                Ticket Queue Status
+                <Package className="h-5 w-5 text-espace-400" />
+                Shipment Status
               </CardTitle>
               <CardDescription className="text-slate-300">
-                Current support ticket queue metrics
+                Current shipment tracking metrics
               </CardDescription>
             </CardHeader>
             <CardContent className="p-6">
               <div className="space-y-4">
                 <div className="flex justify-between items-center">
-                  <span className="text-slate-300">Pending Review</span>
-                  <span className="text-2xl font-bold text-yellow-400">23</span>
+                  <span className="text-slate-300">In Transit</span>
+                  <span className="text-2xl font-bold text-espace-400">247</span>
                 </div>
                 <div className="flex justify-between items-center">
-                  <span className="text-slate-300">In Progress</span>
-                  <span className="text-2xl font-bold text-espace-400">47</span>
+                  <span className="text-slate-300">Out for Delivery</span>
+                  <span className="text-2xl font-bold text-green-400">89</span>
                 </div>
                 <div className="flex justify-between items-center">
-                  <span className="text-slate-300">Awaiting Customer</span>
-                  <span className="text-2xl font-bold text-orange-400">12</span>
+                  <span className="text-slate-300">Delivered Today</span>
+                  <span className="text-2xl font-bold text-green-500">156</span>
                 </div>
                 <div className="flex justify-between items-center">
-                  <span className="text-slate-300">Escalated</span>
-                  <span className="text-2xl font-bold text-red-400">5</span>
+                  <span className="text-slate-300">Delayed</span>
+                  <span className="text-2xl font-bold text-orange-400">12</span>
                 </div>
               </div>
             </CardContent>
           </Card>
 
-          {/* SLA Performance */}
+          {/* Delivery Performance */}
           <Card className="bg-slate-800 shadow-lg border-slate-700">
             <CardHeader>
               <CardTitle className="flex items-center gap-2 text-white">
-                <div className="h-5 w-5 bg-green-500 rounded-full"></div>
-                SLA Performance
+                <Truck className="h-5 w-5 text-espace-400" />
+                Delivery Performance
               </CardTitle>
               <CardDescription className="text-slate-300">
-                Service level agreement metrics
+                On-time delivery and logistics metrics
               </CardDescription>
             </CardHeader>
             <CardContent className="p-6">
               <div className="space-y-4">
                 <div className="flex justify-between items-center">
-                  <span className="text-slate-300">Response Time</span>
-                  <span className="text-2xl font-bold text-green-400">2.3h</span>
+                  <span className="text-slate-300">On-Time Delivery</span>
+                  <span className="text-2xl font-bold text-green-400">94.8%</span>
                 </div>
                 <div className="flex justify-between items-center">
-                  <span className="text-slate-300">Resolution Time</span>
-                  <span className="text-2xl font-bold text-green-400">18.5h</span>
+                  <span className="text-slate-300">Avg Transit Time</span>
+                  <span className="text-2xl font-bold text-espace-400">2.4 days</span>
                 </div>
                 <div className="flex justify-between items-center">
-                  <span className="text-slate-300">SLA Compliance</span>
-                  <span className="text-2xl font-bold text-green-400">94.2%</span>
+                  <span className="text-slate-300">Delivery Success Rate</span>
+                  <span className="text-2xl font-bold text-green-400">98.2%</span>
                 </div>
                 <div className="flex justify-between items-center">
-                  <span className="text-slate-300">First Call Resolution</span>
-                  <span className="text-2xl font-bold text-green-400">78.1%</span>
+                  <span className="text-slate-300">Same-Day Delivery</span>
+                  <span className="text-2xl font-bold text-green-400">23.5%</span>
                 </div>
               </div>
             </CardContent>
           </Card>
 
-          {/* Support Engineer Performance */}
+          {/* Top Shipping Routes */}
           <Card className="bg-slate-800 shadow-lg border-slate-700">
             <CardHeader>
               <CardTitle className="flex items-center gap-2 text-white">
-                <div className="h-5 w-5 bg-espace-500 rounded-full"></div>
-                Support Engineer Performance
+                <MapPin className="h-5 w-5 text-espace-400" />
+                Top Shipping Routes
               </CardTitle>
               <CardDescription className="text-slate-300">
-                Top performing engineers this week
+                Most active shipping corridors this week
               </CardDescription>
             </CardHeader>
             <CardContent className="p-6">
               <div className="space-y-3">
                 <div className="flex justify-between items-center">
-                  <span className="text-slate-300">Sarah Chen</span>
-                  <span className="text-sm font-bold text-espace-400">47 tickets</span>
+                  <span className="text-slate-300">NYC → LA</span>
+                  <span className="text-sm font-bold text-espace-400">342 shipments</span>
                 </div>
                 <div className="flex justify-between items-center">
-                  <span className="text-slate-300">Mike Rodriguez</span>
-                  <span className="text-sm font-bold text-espace-400">42 tickets</span>
+                  <span className="text-slate-300">Chicago → Miami</span>
+                  <span className="text-sm font-bold text-espace-400">287 shipments</span>
                 </div>
                 <div className="flex justify-between items-center">
-                  <span className="text-slate-300">Emily Johnson</span>
-                  <span className="text-sm font-bold text-espace-400">38 tickets</span>
+                  <span className="text-slate-300">Seattle → Boston</span>
+                  <span className="text-sm font-bold text-espace-400">198 shipments</span>
                 </div>
                 <div className="flex justify-between items-center">
-                  <span className="text-slate-300">David Kim</span>
-                  <span className="text-sm font-bold text-espace-400">35 tickets</span>
+                  <span className="text-slate-300">Atlanta → Denver</span>
+                  <span className="text-sm font-bold text-espace-400">156 shipments</span>
                 </div>
               </div>
             </CardContent>
@@ -257,18 +257,18 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
           <Card className="bg-slate-800 shadow-lg border-slate-700">
             <CardHeader>
               <CardTitle className="flex items-center gap-2 text-white">
-                <FileText className="h-5 w-5 text-espace-400" />
+                <Truck className="h-5 w-5 text-espace-400" />
                 E-Space Tracking
               </CardTitle>
               <CardDescription className="text-slate-300">
-                Track shipments and delivery status
+                Real-time shipment tracking and logistics analytics
               </CardDescription>
             </CardHeader>
-            <CardContent className="flex items-center justify-center p-0 xs:p-6 xs:pt-0">
+            <CardContent className="p-0">
               <div className="tableau-container w-full">
                 <TableauEmbed
                   id='trackingViz'
-                  src='https://prod-useast-b.online.tableau.com/t/embeddingplaybook/views/ShippingDashboard/PersonalTracker'
+                  src='https://prod-useast-b.online.tableau.com/t/embeddingplaybook/views/ShippingDashboard/BusinessTracker'
                   hideTabs={true}
                   toolbar='hidden'
                   isPublic={false}
@@ -346,7 +346,7 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
                         alert('Please enter a message before sending.');
                         return;
                       }
-                      alert(`Demo: Message sent to E-Space support team!\n\nMessage: ${editableSlackMessage}`);
+                      alert(`Demo: Message sent to E-Space logistics team!\n\nMessage: ${editableSlackMessage}`);
                       setShowSlackModal(false);
                       setSelectedMarks([]);
                       setEditableSlackMessage('');
diff --git a/src/app/demo/servicedesk/config.js b/src/app/demo/servicedesk/config.js
index 51c5d1c0..8c6bec81 100644
--- a/src/app/demo/servicedesk/config.js
+++ b/src/app/demo/servicedesk/config.js
@@ -9,7 +9,9 @@ import {
   Settings,
   BarChart3,
   Clock,
-  Languages
+  Languages,
+  Truck,
+  Leaf
 } from "lucide-react";
 
 export const settings = {
@@ -36,17 +38,17 @@ export const settings = {
     },
     {
       name: 'Shipping Tracker',
-      icon: <FileText className="h-5 w-5"/>,
+      icon: <Truck className="h-5 w-5"/>,
       path: '/cases',
       min_role: 0,
       description: 'Track shipments and delivery status'
     },
     {
-      name: 'Customer Success',
-      icon: <Users2 className="h-5 w-5"/>,
+      name: 'ESG Impact',
+      icon: <Leaf className="h-5 w-5"/>,
       path: '/success',
       min_role: 2,
-      description: 'Strategic insights, renewals, and customer health'
+      description: 'Track environmental, social, and governance impact metrics'
     },
     {
       name: 'Onboarding',
diff --git a/src/app/demo/servicedesk/success/page.jsx b/src/app/demo/servicedesk/success/page.jsx
index 5396072f..5cbb4873 100644
--- a/src/app/demo/servicedesk/success/page.jsx
+++ b/src/app/demo/servicedesk/success/page.jsx
@@ -3,11 +3,11 @@
 import { Demo, FloatingAssistant } from '@/components';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui";
 import { TableauEmbed } from '@/components';
-import { Users2, MessageSquare, X } from 'lucide-react';
+import { Leaf, MessageSquare, X } from 'lucide-react';
 import { settings } from '../config';
 import { useState, useEffect } from 'react';
 
-const CustomerSuccessContent = () => {
+const ESGImpactContent = () => {
   // State for mark selection and Slack functionality
   const [selectedMarks, setSelectedMarks] = useState([]);
   const [showSlackModal, setShowSlackModal] = useState(false);
@@ -65,54 +65,54 @@ const CustomerSuccessContent = () => {
 
     const setupListeners = () => {
       // Try multiple ways to find the viz element
-      let customerHealthViz = document.getElementById('customerHealthViz');
+      let esgImpactViz = document.getElementById('esgImpactViz');
 
       // If not found by ID, try shadow root or querySelector
-      if (!customerHealthViz) {
+      if (!esgImpactViz) {
         const tableauVizElements = document.querySelectorAll('tableau-viz');
         if (tableauVizElements.length > 0) {
           // Find the one with matching id attribute
-          customerHealthViz = Array.from(tableauVizElements).find(
-            viz => viz.id === 'customerHealthViz' || viz.getAttribute('id') === 'customerHealthViz'
+          esgImpactViz = Array.from(tableauVizElements).find(
+            viz => viz.id === 'esgImpactViz' || viz.getAttribute('id') === 'esgImpactViz'
           ) || tableauVizElements[0];
         }
       }
 
-      if (customerHealthViz) {
+      if (esgImpactViz) {
         const addMarkSelectionListener = () => {
-          customerHealthViz.addEventListener('markselectionchanged', handleMarkSelectionChanged);
+          esgImpactViz.addEventListener('markselectionchanged', handleMarkSelectionChanged);
         };
 
         // Check if already interactive
-        const isAlreadyInteractive = customerHealthViz.getIsInteractive?.() || customerHealthViz.isInteractive || false;
+        const isAlreadyInteractive = esgImpactViz.getIsInteractive?.() || esgImpactViz.isInteractive || false;
 
         if (isAlreadyInteractive) {
           addMarkSelectionListener();
         } else {
-          customerHealthViz.addEventListener('firstinteractive', () => {
+          esgImpactViz.addEventListener('firstinteractive', () => {
             addMarkSelectionListener();
           });
         }
       }
 
-      return { customerHealthViz };
+      return { esgImpactViz };
     };
 
     // Delay setup to ensure DOM elements are available
     const timer = setTimeout(() => {
-      const { customerHealthViz } = setupListeners();
+      const { esgImpactViz } = setupListeners();
 
       // Store refs for cleanup
-      window._vizRefs = { customerHealthViz, handleMarkSelectionChanged };
+      window._vizRefs = { esgImpactViz, handleMarkSelectionChanged };
     }, 1000);
 
     // Cleanup
     return () => {
       clearTimeout(timer);
       if (window._vizRefs) {
-        const { customerHealthViz, handleMarkSelectionChanged } = window._vizRefs;
-        if (customerHealthViz) {
-          customerHealthViz.removeEventListener('markselectionchanged', handleMarkSelectionChanged);
+        const { esgImpactViz, handleMarkSelectionChanged } = window._vizRefs;
+        if (esgImpactViz) {
+          esgImpactViz.removeEventListener('markselectionchanged', handleMarkSelectionChanged);
         }
         delete window._vizRefs;
       }
@@ -127,7 +127,7 @@ const CustomerSuccessContent = () => {
 
     // Generate message content for each selected mark
     const dataOnly = selectedMarks.map((mark, index) =>
-      `Customer ${index + 1}:
+      `ESG Impact ${index + 1}:
 ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n')}`
     ).join('\n\n');
 
@@ -146,38 +146,68 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
               className="flex items-center gap-2 px-6 py-3 bg-espace-500 hover:bg-espace-600 text-white rounded-lg transition-colors shadow-lg animate-pulse"
             >
               <MessageSquare className="h-5 w-5" />
-              <span className="font-medium">Share Customer Update ({selectedMarks.length})</span>
+              <span className="font-medium">Share ESG Impact Update ({selectedMarks.length})</span>
             </button>
           </div>
         )}
 
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <div className="flex flex-col gap-6">
+          {/* Key ESG Metrics - Stacked on top */}
+          <Card className="bg-slate-800 shadow-lg border-slate-700">
+            <CardHeader className="pb-3">
+              <CardTitle className="text-white text-lg">Key ESG Metrics</CardTitle>
+              <CardDescription className="text-slate-300 text-xs">
+                Performance indicators
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="pt-0">
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div className="p-3 bg-slate-700 rounded-lg">
+                  <p className="text-slate-400 text-xs">Carbon Reduction</p>
+                  <p className="text-2xl font-bold text-white mt-1">32%</p>
+                  <p className="text-espace-400 text-xs mt-1">↓ 8% from last quarter</p>
+                </div>
+                <div className="p-3 bg-slate-700 rounded-lg">
+                  <p className="text-slate-400 text-xs">Waste Diversion Rate</p>
+                  <p className="text-2xl font-bold text-white mt-1">87%</p>
+                  <p className="text-espace-400 text-xs mt-1">↑ 5% from last month</p>
+                </div>
+                <div className="p-3 bg-slate-700 rounded-lg">
+                  <p className="text-slate-400 text-xs">Renewable Energy</p>
+                  <p className="text-2xl font-bold text-white mt-1">94%</p>
+                  <p className="text-espace-400 text-xs mt-1">↑ 12% this quarter</p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Tableau Viz - Full width below */}
           <Card className="bg-slate-800 shadow-lg border-slate-700">
             <CardHeader>
               <CardTitle className="flex items-center gap-2 text-white">
-                <Users2 className="h-5 w-5 text-espace-400" />
-                Customer Health Score
+                <Leaf className="h-5 w-5 text-espace-400" />
+                Environmental Impact Tracking
               </CardTitle>
               <CardDescription className="text-slate-300">
-                Track customer satisfaction and renewal likelihood
+                Monitor carbon emissions, waste reduction, and environmental sustainability metrics
               </CardDescription>
             </CardHeader>
-            <CardContent className="flex items-center justify-center p-0 xs:p-6 xs:pt-0">
+            <CardContent className="p-0">
               <div className="tableau-container w-full">
                 <TableauEmbed
-                  id='customerHealthViz'
-                  src='https://prod-useast-b.online.tableau.com/t/embeddingplaybook/views/superstore/overview_800x800'
+                  id='esgImpactViz'
+                  src='https://prod-useast-b.online.tableau.com/t/embeddingplaybook/views/ESGImpact/EnvironmentalImpactTracking'
                   hideTabs={true}
                   toolbar='hidden'
-
+                  isPublic={false}
                   demo="servicedesk"
                   className='
                   min-w-[300px] min-h-[1430px]
                   sm:min-w-[510px] sm:min-h-[1430px]
-                   md:min-w-[600px] md:min-h-[950px]
-                    lg:min-w-[750px] lg:min-h-[950px]
-                    xl:min-w-[750px] xl:min-h-[950px]
-                    2xl:min-w-[750px] 2xl:min-h-[950px]
+                  md:min-w-[800px] md:min-h-[1200px]
+                  lg:min-w-[1000px] lg:min-h-[1200px]
+                  xl:min-w-[1700px] xl:min-h-[1200px]
+                  2xl:min-w-[1700px] 2xl:min-h-[1200px]
                   '
                   layouts = {{
                     'xs': { 'device': 'desktop' },
@@ -191,34 +221,6 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
               </div>
             </CardContent>
           </Card>
-
-          <Card className="bg-slate-800 shadow-lg border-slate-700">
-            <CardHeader>
-              <CardTitle className="text-white">Key Success Metrics</CardTitle>
-              <CardDescription className="text-slate-300">
-                Renewal rates and customer engagement
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <div className="space-y-4">
-                <div className="p-4 bg-slate-700 rounded-lg">
-                  <p className="text-slate-400 text-sm">Renewal Rate</p>
-                  <p className="text-3xl font-bold text-white mt-1">94%</p>
-                  <p className="text-espace-400 text-sm mt-1">↑ 5% from last quarter</p>
-                </div>
-                <div className="p-4 bg-slate-700 rounded-lg">
-                  <p className="text-slate-400 text-sm">Customer Satisfaction</p>
-                  <p className="text-3xl font-bold text-white mt-1">4.8/5</p>
-                  <p className="text-espace-400 text-sm mt-1">↑ 0.3 from last month</p>
-                </div>
-                <div className="p-4 bg-slate-700 rounded-lg">
-                  <p className="text-slate-400 text-sm">Network Expansion</p>
-                  <p className="text-3xl font-bold text-white mt-1">23%</p>
-                  <p className="text-espace-400 text-sm mt-1">↑ 8% this quarter</p>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
         </div>
       </main>
 
@@ -229,7 +231,7 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
             <div className="flex items-center justify-between mb-6">
               <h3 className="text-xl font-semibold text-white flex items-center gap-2">
                 <MessageSquare className="h-5 w-5 text-espace-400" />
-                Share Customer Update
+                Share ESG Impact Update
               </h3>
               <button
                 onClick={() => setShowSlackModal(false)}
@@ -270,7 +272,7 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
                         alert('Please enter a message before sending.');
                         return;
                       }
-                      alert(`Demo: Message sent to E-Space customer success team!\n\nMessage: ${editableSlackMessage}`);
+                      alert(`Demo: Message sent to E-Space ESG team!\n\nMessage: ${editableSlackMessage}`);
                       setShowSlackModal(false);
                       setSelectedMarks([]);
                       setEditableSlackMessage('');
@@ -290,10 +292,10 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
   );
 }
 
-export default function CustomerSuccessPage() {
+export default function ESGImpactPage() {
   return (
-    <Demo settings={settings} pageName="Customer Success">
-      <CustomerSuccessContent />
+    <Demo settings={settings} pageName="ESG Impact">
+      <ESGImpactContent />
       <FloatingAssistant settings={settings} />
     </Demo>
   );
diff --git a/src/app/demo/servicedesk/training/page.jsx b/src/app/demo/servicedesk/training/page.jsx
index 5b60440f..756678f8 100644
--- a/src/app/demo/servicedesk/training/page.jsx
+++ b/src/app/demo/servicedesk/training/page.jsx
@@ -203,7 +203,7 @@ ${Object.entries(mark).map(([key, value]) => `  • ${key}: ${value}`).join('\n'
                 Completion rates and effectiveness by onboarding program
               </CardDescription>
             </CardHeader>
-          <CardContent className="flex items-center justify-center p-0 xs:p-6 xs:pt-0">
+          <CardContent className="p-0">
             <div className="tableau-container w-full">
               <TableauEmbed
                 id='trainingViz'
diff --git a/src/components/TableauEmbed/TableauViz.jsx b/src/components/TableauEmbed/TableauViz.jsx
index 33a49bd0..fe6cf13f 100644
--- a/src/components/TableauEmbed/TableauViz.jsx
+++ b/src/components/TableauEmbed/TableauViz.jsx
@@ -74,7 +74,11 @@ export const TableauViz = forwardRef(function Viz(props, ref) {
   return (
     <div>
       <XSLayout>
-        {customToolbar ? <TableauToolbar src={src} ref={innerRef} /> : null}
+        {customToolbar ? (
+          <div className="flex justify-end mx-auto" style={{ width: `${getLayoutProps(layoutSpec, 'xs').width}px`, maxWidth: `${getLayoutProps(layoutSpec, 'xs').width}px` }}>
+            <TableauToolbar src={src} ref={innerRef} />
+          </div>
+        ) : null}
         <tableau-viz
           ref={innerRef}
           id={vizId}
@@ -91,7 +95,11 @@ export const TableauViz = forwardRef(function Viz(props, ref) {
       </XSLayout>
 
       <SMLayout>
-        {customToolbar ? <TableauToolbar src={src} ref={innerRef} /> : null}
+        {customToolbar ? (
+          <div className="flex justify-end mx-auto" style={{ width: `${getLayoutProps(layoutSpec, 'sm').width}px`, maxWidth: `${getLayoutProps(layoutSpec, 'sm').width}px` }}>
+            <TableauToolbar src={src} ref={innerRef} />
+          </div>
+        ) : null}
         <tableau-viz
           ref={innerRef}
           id="tableauViz"
@@ -108,7 +116,11 @@ export const TableauViz = forwardRef(function Viz(props, ref) {
       </SMLayout>
 
       <MDLayout>
-        {customToolbar ? <TableauToolbar src={src} ref={innerRef} /> : null}
+        {customToolbar ? (
+          <div className="flex justify-end mx-auto" style={{ width: `${getLayoutProps(layoutSpec, 'md').width}px`, maxWidth: `${getLayoutProps(layoutSpec, 'md').width}px` }}>
+            <TableauToolbar src={src} ref={innerRef} />
+          </div>
+        ) : null}
         <tableau-viz
           ref={innerRef}
           id="tableauViz"
@@ -125,7 +137,11 @@ export const TableauViz = forwardRef(function Viz(props, ref) {
       </MDLayout>
 
       <LGLayout>
-        {customToolbar ? <TableauToolbar src={src} ref={innerRef} /> : null}
+        {customToolbar ? (
+          <div className="flex justify-end mx-auto" style={{ width: `${getLayoutProps(layoutSpec, 'lg').width}px`, maxWidth: `${getLayoutProps(layoutSpec, 'lg').width}px` }}>
+            <TableauToolbar src={src} ref={innerRef} />
+          </div>
+        ) : null}
         <tableau-viz
           ref={innerRef}
           id="tableauViz"
@@ -142,7 +158,11 @@ export const TableauViz = forwardRef(function Viz(props, ref) {
       </LGLayout>
 
       <XLLayout>
-        {customToolbar ? <TableauToolbar src={src} ref={innerRef} /> : null}
+        {customToolbar ? (
+          <div className="flex justify-end mx-auto" style={{ width: `${getLayoutProps(layoutSpec, 'xl').width}px`, maxWidth: `${getLayoutProps(layoutSpec, 'xl').width}px` }}>
+            <TableauToolbar src={src} ref={innerRef} />
+          </div>
+        ) : null}
         <tableau-viz
           ref={innerRef}
           id="tableauViz"
@@ -159,7 +179,11 @@ export const TableauViz = forwardRef(function Viz(props, ref) {
       </XLLayout>
 
       <XL2Layout>
-        {customToolbar ? <TableauToolbar src={src} ref={innerRef} /> : null}
+        {customToolbar ? (
+          <div className="flex justify-end mx-auto" style={{ width: `${getLayoutProps(layoutSpec, 'xl2').width}px`, maxWidth: `${getLayoutProps(layoutSpec, 'xl2').width}px` }}>
+            <TableauToolbar src={src} ref={innerRef} />
+          </div>
+        ) : null}
         <tableau-viz
             ref={innerRef}
             id="tableauViz"