From 15b472f0fc16994b795b912fd857bb024c1caf23 Mon Sep 17 00:00:00 2001
From: PseudoCoding <dphoude@gmail.com>
Date: Fri, 18 Jul 2025 15:06:19 -0400
Subject: [PATCH 01/13] Update look and feel

---
 app/assets/global.css            | 229 ++++++++++++++++++++++---------
 app/components/MainComponent.vue | 160 ++++++++++++++++-----
 app/layouts/default.vue          |  26 +++-
 vuetify.config.ts                |  57 ++++++--
 4 files changed, 354 insertions(+), 118 deletions(-)

diff --git a/app/assets/global.css b/app/assets/global.css
index a4ea1a92..feed3bcf 100644
--- a/app/assets/global.css
+++ b/app/assets/global.css
@@ -1,78 +1,173 @@
+/* Base styles */
+:root {
+  --transition-speed: 0.3s;
+}
+
+body {
+  font-family: 'Inter', sans-serif;
+  line-height: 1.6;
+}
+
+/* Layout components */
 .tiles-container {
-    display: flex;
-    justify-content: flex-start;
-    flex-wrap: wrap;
-  }
-  .tiles-text {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-  }
+  display: flex;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  gap: 16px;
+}
 
-  .error-message {
-    color: red;
-  }
+.tiles-text {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
 
-  .spacing-10 {
-    margin-bottom: 10px;
-  }
+.content-container {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 24px;
+}
 
-  .spacing-25 {
-    margin-bottom: 25px;
-  }
+/* Utility classes */
+.error-message {
+  color: #EF5350;
+  font-weight: 500;
+  padding: 8px 12px;
+  border-radius: 4px;
+  background-color: rgba(239, 83, 80, 0.1);
+  margin: 8px 0;
+}
 
-  /* Fix tab hover styles - dark blue overlay using pseudo-element */
-  .v-tab {
-    position: relative !important;
-  }
-  
-  .v-tab:hover::before {
-    content: '' !important;
-    position: absolute !important;
-    top: 0 !important;
-    left: 0 !important;
-    width: 100% !important;
-    height: 100% !important;
-    background-color: rgba(44, 32, 157, 0.557) !important;
-    pointer-events: none !important;
-    z-index: 1 !important;
-  }
+.spacing-10 {
+  margin-bottom: 10px;
+}
 
-  /* Ensure tab content is above overlay */
-  .v-tab .v-tab__content {
-    position: relative !important;
-    z-index: 2 !important;
-  }
+.spacing-25 {
+  margin-bottom: 25px;
+}
 
-  /* Fix expansion panel title overlay on hover - gray overlay */
-  .v-expansion-panel-title:hover .v-expansion-panel-title__overlay {
-    display: block !important;
-    background-color: rgba(0, 0, 0, 0.04) !important;
-    opacity: 1 !important;
-    position: absolute !important;
-    top: 0 !important;
-    left: 0 !important;
-    width: 100% !important;
-    height: 100% !important;
-    pointer-events: none !important;
-  }
+.text-capitalize {
+  text-transform: capitalize !important;
+}
+
+/* Card enhancements */
+.v-card {
+  transition: transform var(--transition-speed), box-shadow var(--transition-speed);
+  overflow: hidden;
+}
+
+.v-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1) !important;
+}
+
+/* Tab styling */
+.v-tab {
+  position: relative !important;
+  text-transform: capitalize !important;
+  font-weight: 500 !important;
+  letter-spacing: 0.5px !important;
+  transition: all var(--transition-speed) !important;
+}
 
-  /* Fix button hover styles - light gray background */
-  .v-btn:hover {
-    background-color: rgba(63, 81, 181, 0.1) !important;
+.v-tab:hover::before {
+  content: '' !important;
+  position: absolute !important;
+  top: 0 !important;
+  left: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
+  background-color: rgba(44, 32, 157, 0.2) !important;
+  pointer-events: none !important;
+  z-index: 1 !important;
+}
+
+.v-tab .v-tab__content {
+  position: relative !important;
+  z-index: 2 !important;
+}
+
+/* Expansion panel enhancements */
+.v-expansion-panel {
+  border-radius: 8px !important;
+  margin-bottom: 8px !important;
+}
+
+.v-expansion-panel-title {
+  font-weight: 500 !important;
+}
+
+.v-expansion-panel-title:hover .v-expansion-panel-title__overlay {
+  display: block !important;
+  background-color: rgba(0, 0, 0, 0.04) !important;
+  opacity: 1 !important;
+  position: absolute !important;
+  top: 0 !important;
+  left: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
+  pointer-events: none !important;
+}
+
+/* Button enhancements */
+.v-btn {
+  font-weight: 500 !important;
+  letter-spacing: 0.5px !important;
+  transition: all var(--transition-speed) !important;
+}
+
+.v-btn:hover {
+  background-color: rgba(63, 81, 181, 0.1) !important;
+  transform: translateY(-1px);
+}
+
+.v-btn:hover .v-btn__overlay {
+  display: none !important;
+}
+
+/* Override Vuetify's default overlay behavior */
+.v-tab.v-btn--variant-text .v-tab__overlay,
+.v-tab .v-btn--variant-text .v-btn__overlay {
+  background: transparent !important;
+}
+
+/* GitHub login button styling */
+.github-login-button {
+  display: flex;
+  align-items: center;
+  background-color: #24292e;
+  color: white;
+  padding: 12px 24px;
+  border-radius: 8px;
+  text-decoration: none;
+  font-weight: 600;
+  font-size: 14px;
+  transition: all var(--transition-speed);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.github-login-button:hover {
+  background-color: #2c3440;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+}
+
+/* Organization info styling */
+.organization-info {
+  background-color: #f5f7fa;
+  border-left: 4px solid #3949AB;
+  border-radius: 4px;
+  margin: 16px 0;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .content-container {
+    padding: 16px;
   }
   
-  .v-btn:hover .v-btn__overlay {
-    display: none !important;
+  .tiles-container {
+    gap: 12px;
   }
-
-  /* Override Vuetify's default overlay behavior for tabs */
-  .v-tab.v-btn--variant-text .v-tab__overlay {
-    background: transparent !important;
-  }
-
-  /* Override Vuetify's default overlay behavior for variant-text buttons in tabs */
-  .v-tab .v-btn--variant-text .v-btn__overlay {
-    background: transparent !important;
-  }
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/app/components/MainComponent.vue b/app/components/MainComponent.vue
index 5f40741c..db4d11e3 100644
--- a/app/components/MainComponent.vue
+++ b/app/components/MainComponent.vue
@@ -1,38 +1,87 @@
 <template>
   <div>
-    <v-toolbar color="indigo" elevation="4">
-      <v-btn icon>
+    <v-app-bar color="primary" elevation="2" class="app-header">
+      <v-app-bar-nav-icon @click="drawer = !drawer" class="d-md-none"></v-app-bar-nav-icon>
+      
+      <v-btn icon class="mr-2">
         <v-icon>mdi-github</v-icon>
       </v-btn>
 
-      <v-toolbar-title class="toolbar-title">{{ displayName }}</v-toolbar-title>
-      <h2 class="error-message"> {{ mockedDataMessage }} </h2>
+      <v-app-bar-title class="toolbar-title font-weight-bold">{{ displayName }}</v-app-bar-title>
+      <span v-if="mockedDataMessage" class="error-message text-caption px-2 py-1 rounded">{{ mockedDataMessage }}</span>
       <v-spacer />
 
       <!-- Conditionally render the logout button -->
       <AuthState>
         <template #default="{ loggedIn, user }">
-          <div v-show="loggedIn" class="user-info">
-            Welcome,
-            <v-avatar class="user-avatar">
+          <div v-show="loggedIn" class="user-info d-none d-sm-flex">
+            <span class="mr-2">Welcome,</span>
+            <v-avatar size="32" class="user-avatar">
               <v-img :alt="user?.name" :src="user?.avatarUrl" />
-            </v-avatar> {{ user?.name }}
+            </v-avatar> 
+            <span class="ml-2 font-weight-medium">{{ user?.name }}</span>
           </div>
-          <v-btn v-if="showLogoutButton && loggedIn" class="logout-button" @click="logout">Logout</v-btn>
+          <v-btn 
+            v-if="showLogoutButton && loggedIn" 
+            class="logout-button ml-4" 
+            @click="logout" 
+            prepend-icon="mdi-logout"
+            variant="tonal"
+            color="primary"
+          >
+            Logout
+          </v-btn>
         </template>
       </AuthState>
 
-      <template #extension>
+      <v-btn icon class="ml-2" @click="toggleTheme">
+        <v-icon>{{ isDarkTheme ? 'mdi-weather-sunny' : 'mdi-weather-night' }}</v-icon>
+      </v-btn>
 
-        <v-tabs v-model="tab" align-tabs="title">
-          <v-tab v-for="item in tabItems" :key="item" :value="item">
+      <template #extension>
+        <v-tabs 
+          v-model="tab" 
+          align-tabs="center"
+          slider-color="white"
+          bg-color="primary"
+          class="d-none d-md-flex"
+        >
+          <v-tab 
+            v-for="item in tabItems" 
+            :key="item" 
+            :value="item"
+            class="text-white text-capitalize"
+          >
             {{ item }}
           </v-tab>
         </v-tabs>
-
       </template>
-
-    </v-toolbar>
+    </v-app-bar>
+    
+    <!-- Navigation drawer for mobile -->
+    <v-navigation-drawer
+      v-model="drawer"
+      temporary
+      class="d-md-none"
+    >
+      <v-list>
+        <v-list-item
+          prepend-icon="mdi-view-dashboard"
+          title="Copilot Metrics"
+          :subtitle="displayName"
+        ></v-list-item>
+        <v-divider></v-divider>
+        <v-list-item
+          v-for="item in tabItems"
+          :key="item"
+          :value="item"
+          @click="tab = item; drawer = false"
+          :active="tab === item"
+          :title="item"
+          class="text-capitalize"
+        ></v-list-item>
+      </v-list>
+    </v-navigation-drawer>
 
     <!-- Date Range Selector - Hidden for seats tab -->
     <DateRangeSelector 
@@ -65,33 +114,65 @@
     </AuthState>
 
 
-    <div v-show="!apiError">
-      <v-progress-linear v-show="!metricsReady" indeterminate color="indigo" />
+    <div v-show="!apiError" class="content-container pa-4">
+      <v-progress-linear v-show="!metricsReady" indeterminate color="primary" />
+      
       <v-window v-show="(metricsReady && metrics.length) || (seatsReady && tab === 'seat analysis')" v-model="tab">
         <v-window-item v-for="item in tabItems" :key="item" :value="item">
-          <v-card flat>
-            <MetricsViewer v-if="item === itemName" :metrics="metrics" :date-range-description="dateRangeDescription" />
-            <BreakdownComponent
-v-if="item === 'languages'" :metrics="metrics" :breakdown-key="'language'"
-              :date-range-description="dateRangeDescription" />
-            <BreakdownComponent
-v-if="item === 'editors'" :metrics="metrics" :breakdown-key="'editor'"
-              :date-range-description="dateRangeDescription" />
-            <CopilotChatViewer
-v-if="item === 'copilot chat'" :metrics="metrics"
-              :date-range-description="dateRangeDescription" />
-            <AgentModeViewer v-if="item === 'github.com'" :original-metrics="originalMetrics" :date-range="dateRange" :date-range-description="dateRangeDescription" />
-            <SeatsAnalysisViewer v-if="item === 'seat analysis'" :seats="seats" />
-            <ApiResponse
-v-if="item === 'api response'" :metrics="metrics" :original-metrics="originalMetrics"
-              :seats="seats" />
+          <v-card class="pa-4 rounded-lg elevation-1">
+            <v-card-title class="text-h5 font-weight-bold pb-4 text-primary text-capitalize">
+              {{ item }}
+              <v-chip size="small" color="primary" class="ml-2 text-white">{{ dateRangeDescription }}</v-chip>
+            </v-card-title>
+            
+            <v-card-text>
+              <MetricsViewer v-if="item === itemName" :metrics="metrics" :date-range-description="dateRangeDescription" />
+              <BreakdownComponent
+                v-if="item === 'languages'" 
+                :metrics="metrics" 
+                :breakdown-key="'language'"
+                :date-range-description="dateRangeDescription" 
+              />
+              <BreakdownComponent
+                v-if="item === 'editors'" 
+                :metrics="metrics" 
+                :breakdown-key="'editor'"
+                :date-range-description="dateRangeDescription" 
+              />
+              <CopilotChatViewer
+                v-if="item === 'copilot chat'" 
+                :metrics="metrics"
+                :date-range-description="dateRangeDescription" 
+              />
+              <AgentModeViewer 
+                v-if="item === 'github.com'" 
+                :original-metrics="originalMetrics" 
+                :date-range="dateRange" 
+                :date-range-description="dateRangeDescription" 
+              />
+              <SeatsAnalysisViewer 
+                v-if="item === 'seat analysis'" 
+                :seats="seats" 
+              />
+              <ApiResponse
+                v-if="item === 'api response'" 
+                :metrics="metrics" 
+                :original-metrics="originalMetrics"
+                :seats="seats" 
+              />
+            </v-card-text>
           </v-card>
         </v-window-item>
+        
         <v-alert
           v-show="(metricsReady && metrics.length == 0 && tab !== 'seat analysis') || (seatsReady && seats.length == 0 && tab === 'seat analysis')"
-          density="compact" text="No data available to display" title="No data" type="warning" />
+          density="compact" 
+          text="No data available to display" 
+          title="No data" 
+          type="warning"
+          class="mt-4" 
+        />
       </v-window>
-
     </div>
 
   </div>
@@ -126,6 +207,10 @@ export default defineNuxtComponent({
     DateRangeSelector
   },
   methods: {
+    toggleTheme() {
+      this.isDarkTheme = !this.isDarkTheme;
+      this.$vuetify.theme.global.name = this.isDarkTheme ? 'dark' : 'light';
+    },
     logout() {
       const { clear } = useUserSession()
       this.metrics = [];
@@ -228,9 +313,12 @@ export default defineNuxtComponent({
       config: null as ReturnType<typeof useRuntimeConfig> | null,
       holidayOptions: {
         excludeHolidays: false,
-      }
+      },
+      drawer: false,
+      isDarkTheme: false
     }
   },
+  
   created() {
     this.tabItems.unshift(this.itemName);
     this.config = useRuntimeConfig();
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index 624672da..02c82e12 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -3,9 +3,9 @@
     <v-main>
       <slot />
     </v-main>
-    <v-footer class="bg-indigo-lighten-1 text-center d-flex flex-column fixed-footer">
-      <div class="px-4 py-2 text-center w-100">
-        {{ new Date().getFullYear() }} — <strong><a href="https://github.com/github-copilot-resources/copilot-metrics-viewer" target="_blank" rel="noopener noreferrer" style="color: inherit;">Copilot Metrics Viewer</a></strong> — {{ version }}
+    <v-footer class="bg-primary text-center d-flex flex-column fixed-footer">
+      <div class="px-4 py-2 text-center w-100 text-white">
+        {{ new Date().getFullYear() }} — <strong><a href="https://github.com/github-copilot-resources/copilot-metrics-viewer" target="_blank" rel="noopener noreferrer" class="text-white text-decoration-none">Copilot Metrics Viewer</a></strong> — {{ version }}
       </div>
     </v-footer>
   </v-app>
@@ -18,7 +18,13 @@ const githubInfo = getDisplayName(config.public)
 useHead({
   title: githubInfo,
   meta: [
-    { name: 'description', content: 'Copilot Metrics Dashboard' }
+    { name: 'description', content: 'Copilot Metrics Dashboard' },
+    { name: 'viewport', content: 'width=device-width, initial-scale=1' }
+  ],
+  link: [
+    { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
+    { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' },
+    { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap' }
   ]
 });
 </script>
@@ -28,4 +34,16 @@ useHead({
   height: 50px;
   max-height: 50px;
 }
+
+.text-white {
+  color: white !important;
+}
+
+.text-decoration-none {
+  text-decoration: none;
+}
+
+.text-decoration-none:hover {
+  text-decoration: underline;
+}
 </style>
diff --git a/vuetify.config.ts b/vuetify.config.ts
index 3249ccc8..b7ca3345 100644
--- a/vuetify.config.ts
+++ b/vuetify.config.ts
@@ -1,25 +1,60 @@
 import { defineVuetifyConfiguration } from 'vuetify-nuxt-module/custom-configuration'
 
 export default defineVuetifyConfiguration({
-  // your Vuetify options here
   theme: {
     defaultTheme: 'light',
     themes: {
       light: {
+        dark: false,
         colors: {
-          // Keep existing Vuetify colors but add custom hover states
-          primary: '#1976D2',
-          secondary: '#424242',
-          accent: '#82B1FF',
-          error: '#FF5252',
-          info: '#2196F3',
-          success: '#4CAF50',
-          warning: '#FFC107',
-          // Custom surface colors for better hover effects
+          primary: '#3949AB',
+          secondary: '#5C6BC0',
+          accent: '#536DFE',
+          error: '#EF5350',
+          info: '#42A5F5',
+          success: '#66BB6A',
+          warning: '#FFA726',
+          background: '#F5F7FA',
           surface: '#FFFFFF',
-          'surface-variant': '#F5F5F5',
+          'surface-variant': '#ECEFF1',
+          'on-surface-variant': '#424242',
+          'primary-darken-1': '#303F9F',
         },
       },
+      dark: {
+        dark: true,
+        colors: {
+          primary: '#5C6BC0',
+          secondary: '#7986CB',
+          accent: '#7C4DFF',
+          error: '#EF5350',
+          info: '#42A5F5',
+          success: '#66BB6A',
+          warning: '#FFA726',
+          background: '#121212',
+          surface: '#1E1E1E',
+          'surface-variant': '#2D2D2D',
+          'on-surface-variant': '#EEEEEE',
+          'primary-darken-1': '#3949AB',
+        },
+      },
+    },
+  },
+  defaults: {
+    VCard: {
+      elevation: 2,
+      rounded: 'lg',
+    },
+    VBtn: {
+      rounded: 'md',
+      variant: 'elevated',
+    },
+    VTextField: {
+      variant: 'outlined',
+      density: 'comfortable',
+    },
+    VToolbar: {
+      elevation: 2,
     },
   },
 })

From ff4ebf5d83f1741f6570551f423b882df69a08b1 Mon Sep 17 00:00:00 2001
From: PseudoCoding <dphoude@gmail.com>
Date: Fri, 18 Jul 2025 15:15:45 -0400
Subject: [PATCH 02/13] Revert "Update look and feel"

This reverts commit 15b472f0fc16994b795b912fd857bb024c1caf23.
---
 app/assets/global.css            | 229 +++++++++----------------------
 app/components/MainComponent.vue | 160 +++++----------------
 app/layouts/default.vue          |  26 +---
 vuetify.config.ts                |  57 ++------
 4 files changed, 118 insertions(+), 354 deletions(-)

diff --git a/app/assets/global.css b/app/assets/global.css
index feed3bcf..a4ea1a92 100644
--- a/app/assets/global.css
+++ b/app/assets/global.css
@@ -1,173 +1,78 @@
-/* Base styles */
-:root {
-  --transition-speed: 0.3s;
-}
-
-body {
-  font-family: 'Inter', sans-serif;
-  line-height: 1.6;
-}
-
-/* Layout components */
 .tiles-container {
-  display: flex;
-  justify-content: flex-start;
-  flex-wrap: wrap;
-  gap: 16px;
-}
-
-.tiles-text {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-}
-
-.content-container {
-  max-width: 1400px;
-  margin: 0 auto;
-  padding: 24px;
-}
-
-/* Utility classes */
-.error-message {
-  color: #EF5350;
-  font-weight: 500;
-  padding: 8px 12px;
-  border-radius: 4px;
-  background-color: rgba(239, 83, 80, 0.1);
-  margin: 8px 0;
-}
-
-.spacing-10 {
-  margin-bottom: 10px;
-}
-
-.spacing-25 {
-  margin-bottom: 25px;
-}
-
-.text-capitalize {
-  text-transform: capitalize !important;
-}
-
-/* Card enhancements */
-.v-card {
-  transition: transform var(--transition-speed), box-shadow var(--transition-speed);
-  overflow: hidden;
-}
-
-.v-card:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1) !important;
-}
-
-/* Tab styling */
-.v-tab {
-  position: relative !important;
-  text-transform: capitalize !important;
-  font-weight: 500 !important;
-  letter-spacing: 0.5px !important;
-  transition: all var(--transition-speed) !important;
-}
-
-.v-tab:hover::before {
-  content: '' !important;
-  position: absolute !important;
-  top: 0 !important;
-  left: 0 !important;
-  width: 100% !important;
-  height: 100% !important;
-  background-color: rgba(44, 32, 157, 0.2) !important;
-  pointer-events: none !important;
-  z-index: 1 !important;
-}
-
-.v-tab .v-tab__content {
-  position: relative !important;
-  z-index: 2 !important;
-}
-
-/* Expansion panel enhancements */
-.v-expansion-panel {
-  border-radius: 8px !important;
-  margin-bottom: 8px !important;
-}
-
-.v-expansion-panel-title {
-  font-weight: 500 !important;
-}
-
-.v-expansion-panel-title:hover .v-expansion-panel-title__overlay {
-  display: block !important;
-  background-color: rgba(0, 0, 0, 0.04) !important;
-  opacity: 1 !important;
-  position: absolute !important;
-  top: 0 !important;
-  left: 0 !important;
-  width: 100% !important;
-  height: 100% !important;
-  pointer-events: none !important;
-}
-
-/* Button enhancements */
-.v-btn {
-  font-weight: 500 !important;
-  letter-spacing: 0.5px !important;
-  transition: all var(--transition-speed) !important;
-}
+    display: flex;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+  }
+  .tiles-text {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
 
-.v-btn:hover {
-  background-color: rgba(63, 81, 181, 0.1) !important;
-  transform: translateY(-1px);
-}
+  .error-message {
+    color: red;
+  }
 
-.v-btn:hover .v-btn__overlay {
-  display: none !important;
-}
+  .spacing-10 {
+    margin-bottom: 10px;
+  }
 
-/* Override Vuetify's default overlay behavior */
-.v-tab.v-btn--variant-text .v-tab__overlay,
-.v-tab .v-btn--variant-text .v-btn__overlay {
-  background: transparent !important;
-}
+  .spacing-25 {
+    margin-bottom: 25px;
+  }
 
-/* GitHub login button styling */
-.github-login-button {
-  display: flex;
-  align-items: center;
-  background-color: #24292e;
-  color: white;
-  padding: 12px 24px;
-  border-radius: 8px;
-  text-decoration: none;
-  font-weight: 600;
-  font-size: 14px;
-  transition: all var(--transition-speed);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
+  /* Fix tab hover styles - dark blue overlay using pseudo-element */
+  .v-tab {
+    position: relative !important;
+  }
+  
+  .v-tab:hover::before {
+    content: '' !important;
+    position: absolute !important;
+    top: 0 !important;
+    left: 0 !important;
+    width: 100% !important;
+    height: 100% !important;
+    background-color: rgba(44, 32, 157, 0.557) !important;
+    pointer-events: none !important;
+    z-index: 1 !important;
+  }
 
-.github-login-button:hover {
-  background-color: #2c3440;
-  transform: translateY(-2px);
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
-}
+  /* Ensure tab content is above overlay */
+  .v-tab .v-tab__content {
+    position: relative !important;
+    z-index: 2 !important;
+  }
 
-/* Organization info styling */
-.organization-info {
-  background-color: #f5f7fa;
-  border-left: 4px solid #3949AB;
-  border-radius: 4px;
-  margin: 16px 0;
-}
+  /* Fix expansion panel title overlay on hover - gray overlay */
+  .v-expansion-panel-title:hover .v-expansion-panel-title__overlay {
+    display: block !important;
+    background-color: rgba(0, 0, 0, 0.04) !important;
+    opacity: 1 !important;
+    position: absolute !important;
+    top: 0 !important;
+    left: 0 !important;
+    width: 100% !important;
+    height: 100% !important;
+    pointer-events: none !important;
+  }
 
-/* Responsive adjustments */
-@media (max-width: 768px) {
-  .content-container {
-    padding: 16px;
+  /* Fix button hover styles - light gray background */
+  .v-btn:hover {
+    background-color: rgba(63, 81, 181, 0.1) !important;
   }
   
-  .tiles-container {
-    gap: 12px;
+  .v-btn:hover .v-btn__overlay {
+    display: none !important;
   }
-}
\ No newline at end of file
+
+  /* Override Vuetify's default overlay behavior for tabs */
+  .v-tab.v-btn--variant-text .v-tab__overlay {
+    background: transparent !important;
+  }
+
+  /* Override Vuetify's default overlay behavior for variant-text buttons in tabs */
+  .v-tab .v-btn--variant-text .v-btn__overlay {
+    background: transparent !important;
+  }
\ No newline at end of file
diff --git a/app/components/MainComponent.vue b/app/components/MainComponent.vue
index db4d11e3..5f40741c 100644
--- a/app/components/MainComponent.vue
+++ b/app/components/MainComponent.vue
@@ -1,87 +1,38 @@
 <template>
   <div>
-    <v-app-bar color="primary" elevation="2" class="app-header">
-      <v-app-bar-nav-icon @click="drawer = !drawer" class="d-md-none"></v-app-bar-nav-icon>
-      
-      <v-btn icon class="mr-2">
+    <v-toolbar color="indigo" elevation="4">
+      <v-btn icon>
         <v-icon>mdi-github</v-icon>
       </v-btn>
 
-      <v-app-bar-title class="toolbar-title font-weight-bold">{{ displayName }}</v-app-bar-title>
-      <span v-if="mockedDataMessage" class="error-message text-caption px-2 py-1 rounded">{{ mockedDataMessage }}</span>
+      <v-toolbar-title class="toolbar-title">{{ displayName }}</v-toolbar-title>
+      <h2 class="error-message"> {{ mockedDataMessage }} </h2>
       <v-spacer />
 
       <!-- Conditionally render the logout button -->
       <AuthState>
         <template #default="{ loggedIn, user }">
-          <div v-show="loggedIn" class="user-info d-none d-sm-flex">
-            <span class="mr-2">Welcome,</span>
-            <v-avatar size="32" class="user-avatar">
+          <div v-show="loggedIn" class="user-info">
+            Welcome,
+            <v-avatar class="user-avatar">
               <v-img :alt="user?.name" :src="user?.avatarUrl" />
-            </v-avatar> 
-            <span class="ml-2 font-weight-medium">{{ user?.name }}</span>
+            </v-avatar> {{ user?.name }}
           </div>
-          <v-btn 
-            v-if="showLogoutButton && loggedIn" 
-            class="logout-button ml-4" 
-            @click="logout" 
-            prepend-icon="mdi-logout"
-            variant="tonal"
-            color="primary"
-          >
-            Logout
-          </v-btn>
+          <v-btn v-if="showLogoutButton && loggedIn" class="logout-button" @click="logout">Logout</v-btn>
         </template>
       </AuthState>
 
-      <v-btn icon class="ml-2" @click="toggleTheme">
-        <v-icon>{{ isDarkTheme ? 'mdi-weather-sunny' : 'mdi-weather-night' }}</v-icon>
-      </v-btn>
-
       <template #extension>
-        <v-tabs 
-          v-model="tab" 
-          align-tabs="center"
-          slider-color="white"
-          bg-color="primary"
-          class="d-none d-md-flex"
-        >
-          <v-tab 
-            v-for="item in tabItems" 
-            :key="item" 
-            :value="item"
-            class="text-white text-capitalize"
-          >
+
+        <v-tabs v-model="tab" align-tabs="title">
+          <v-tab v-for="item in tabItems" :key="item" :value="item">
             {{ item }}
           </v-tab>
         </v-tabs>
+
       </template>
-    </v-app-bar>
-    
-    <!-- Navigation drawer for mobile -->
-    <v-navigation-drawer
-      v-model="drawer"
-      temporary
-      class="d-md-none"
-    >
-      <v-list>
-        <v-list-item
-          prepend-icon="mdi-view-dashboard"
-          title="Copilot Metrics"
-          :subtitle="displayName"
-        ></v-list-item>
-        <v-divider></v-divider>
-        <v-list-item
-          v-for="item in tabItems"
-          :key="item"
-          :value="item"
-          @click="tab = item; drawer = false"
-          :active="tab === item"
-          :title="item"
-          class="text-capitalize"
-        ></v-list-item>
-      </v-list>
-    </v-navigation-drawer>
+
+    </v-toolbar>
 
     <!-- Date Range Selector - Hidden for seats tab -->
     <DateRangeSelector 
@@ -114,65 +65,33 @@
     </AuthState>
 
 
-    <div v-show="!apiError" class="content-container pa-4">
-      <v-progress-linear v-show="!metricsReady" indeterminate color="primary" />
-      
+    <div v-show="!apiError">
+      <v-progress-linear v-show="!metricsReady" indeterminate color="indigo" />
       <v-window v-show="(metricsReady && metrics.length) || (seatsReady && tab === 'seat analysis')" v-model="tab">
         <v-window-item v-for="item in tabItems" :key="item" :value="item">
-          <v-card class="pa-4 rounded-lg elevation-1">
-            <v-card-title class="text-h5 font-weight-bold pb-4 text-primary text-capitalize">
-              {{ item }}
-              <v-chip size="small" color="primary" class="ml-2 text-white">{{ dateRangeDescription }}</v-chip>
-            </v-card-title>
-            
-            <v-card-text>
-              <MetricsViewer v-if="item === itemName" :metrics="metrics" :date-range-description="dateRangeDescription" />
-              <BreakdownComponent
-                v-if="item === 'languages'" 
-                :metrics="metrics" 
-                :breakdown-key="'language'"
-                :date-range-description="dateRangeDescription" 
-              />
-              <BreakdownComponent
-                v-if="item === 'editors'" 
-                :metrics="metrics" 
-                :breakdown-key="'editor'"
-                :date-range-description="dateRangeDescription" 
-              />
-              <CopilotChatViewer
-                v-if="item === 'copilot chat'" 
-                :metrics="metrics"
-                :date-range-description="dateRangeDescription" 
-              />
-              <AgentModeViewer 
-                v-if="item === 'github.com'" 
-                :original-metrics="originalMetrics" 
-                :date-range="dateRange" 
-                :date-range-description="dateRangeDescription" 
-              />
-              <SeatsAnalysisViewer 
-                v-if="item === 'seat analysis'" 
-                :seats="seats" 
-              />
-              <ApiResponse
-                v-if="item === 'api response'" 
-                :metrics="metrics" 
-                :original-metrics="originalMetrics"
-                :seats="seats" 
-              />
-            </v-card-text>
+          <v-card flat>
+            <MetricsViewer v-if="item === itemName" :metrics="metrics" :date-range-description="dateRangeDescription" />
+            <BreakdownComponent
+v-if="item === 'languages'" :metrics="metrics" :breakdown-key="'language'"
+              :date-range-description="dateRangeDescription" />
+            <BreakdownComponent
+v-if="item === 'editors'" :metrics="metrics" :breakdown-key="'editor'"
+              :date-range-description="dateRangeDescription" />
+            <CopilotChatViewer
+v-if="item === 'copilot chat'" :metrics="metrics"
+              :date-range-description="dateRangeDescription" />
+            <AgentModeViewer v-if="item === 'github.com'" :original-metrics="originalMetrics" :date-range="dateRange" :date-range-description="dateRangeDescription" />
+            <SeatsAnalysisViewer v-if="item === 'seat analysis'" :seats="seats" />
+            <ApiResponse
+v-if="item === 'api response'" :metrics="metrics" :original-metrics="originalMetrics"
+              :seats="seats" />
           </v-card>
         </v-window-item>
-        
         <v-alert
           v-show="(metricsReady && metrics.length == 0 && tab !== 'seat analysis') || (seatsReady && seats.length == 0 && tab === 'seat analysis')"
-          density="compact" 
-          text="No data available to display" 
-          title="No data" 
-          type="warning"
-          class="mt-4" 
-        />
+          density="compact" text="No data available to display" title="No data" type="warning" />
       </v-window>
+
     </div>
 
   </div>
@@ -207,10 +126,6 @@ export default defineNuxtComponent({
     DateRangeSelector
   },
   methods: {
-    toggleTheme() {
-      this.isDarkTheme = !this.isDarkTheme;
-      this.$vuetify.theme.global.name = this.isDarkTheme ? 'dark' : 'light';
-    },
     logout() {
       const { clear } = useUserSession()
       this.metrics = [];
@@ -313,12 +228,9 @@ export default defineNuxtComponent({
       config: null as ReturnType<typeof useRuntimeConfig> | null,
       holidayOptions: {
         excludeHolidays: false,
-      },
-      drawer: false,
-      isDarkTheme: false
+      }
     }
   },
-  
   created() {
     this.tabItems.unshift(this.itemName);
     this.config = useRuntimeConfig();
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index 02c82e12..624672da 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -3,9 +3,9 @@
     <v-main>
       <slot />
     </v-main>
-    <v-footer class="bg-primary text-center d-flex flex-column fixed-footer">
-      <div class="px-4 py-2 text-center w-100 text-white">
-        {{ new Date().getFullYear() }} — <strong><a href="https://github.com/github-copilot-resources/copilot-metrics-viewer" target="_blank" rel="noopener noreferrer" class="text-white text-decoration-none">Copilot Metrics Viewer</a></strong> — {{ version }}
+    <v-footer class="bg-indigo-lighten-1 text-center d-flex flex-column fixed-footer">
+      <div class="px-4 py-2 text-center w-100">
+        {{ new Date().getFullYear() }} — <strong><a href="https://github.com/github-copilot-resources/copilot-metrics-viewer" target="_blank" rel="noopener noreferrer" style="color: inherit;">Copilot Metrics Viewer</a></strong> — {{ version }}
       </div>
     </v-footer>
   </v-app>
@@ -18,13 +18,7 @@ const githubInfo = getDisplayName(config.public)
 useHead({
   title: githubInfo,
   meta: [
-    { name: 'description', content: 'Copilot Metrics Dashboard' },
-    { name: 'viewport', content: 'width=device-width, initial-scale=1' }
-  ],
-  link: [
-    { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
-    { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' },
-    { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap' }
+    { name: 'description', content: 'Copilot Metrics Dashboard' }
   ]
 });
 </script>
@@ -34,16 +28,4 @@ useHead({
   height: 50px;
   max-height: 50px;
 }
-
-.text-white {
-  color: white !important;
-}
-
-.text-decoration-none {
-  text-decoration: none;
-}
-
-.text-decoration-none:hover {
-  text-decoration: underline;
-}
 </style>
diff --git a/vuetify.config.ts b/vuetify.config.ts
index b7ca3345..3249ccc8 100644
--- a/vuetify.config.ts
+++ b/vuetify.config.ts
@@ -1,60 +1,25 @@
 import { defineVuetifyConfiguration } from 'vuetify-nuxt-module/custom-configuration'
 
 export default defineVuetifyConfiguration({
+  // your Vuetify options here
   theme: {
     defaultTheme: 'light',
     themes: {
       light: {
-        dark: false,
         colors: {
-          primary: '#3949AB',
-          secondary: '#5C6BC0',
-          accent: '#536DFE',
-          error: '#EF5350',
-          info: '#42A5F5',
-          success: '#66BB6A',
-          warning: '#FFA726',
-          background: '#F5F7FA',
+          // Keep existing Vuetify colors but add custom hover states
+          primary: '#1976D2',
+          secondary: '#424242',
+          accent: '#82B1FF',
+          error: '#FF5252',
+          info: '#2196F3',
+          success: '#4CAF50',
+          warning: '#FFC107',
+          // Custom surface colors for better hover effects
           surface: '#FFFFFF',
-          'surface-variant': '#ECEFF1',
-          'on-surface-variant': '#424242',
-          'primary-darken-1': '#303F9F',
+          'surface-variant': '#F5F5F5',
         },
       },
-      dark: {
-        dark: true,
-        colors: {
-          primary: '#5C6BC0',
-          secondary: '#7986CB',
-          accent: '#7C4DFF',
-          error: '#EF5350',
-          info: '#42A5F5',
-          success: '#66BB6A',
-          warning: '#FFA726',
-          background: '#121212',
-          surface: '#1E1E1E',
-          'surface-variant': '#2D2D2D',
-          'on-surface-variant': '#EEEEEE',
-          'primary-darken-1': '#3949AB',
-        },
-      },
-    },
-  },
-  defaults: {
-    VCard: {
-      elevation: 2,
-      rounded: 'lg',
-    },
-    VBtn: {
-      rounded: 'md',
-      variant: 'elevated',
-    },
-    VTextField: {
-      variant: 'outlined',
-      density: 'comfortable',
-    },
-    VToolbar: {
-      elevation: 2,
     },
   },
 })

From ddee24cbe6977d6a380640eee47d28e8c1d470cf Mon Sep 17 00:00:00 2001
From: PseudoCoding <dphoude@gmail.com>
Date: Fri, 18 Jul 2025 15:37:57 -0400
Subject: [PATCH 03/13] Second

---
 app/assets/global.css                    | 330 ++++++++++++++++----
 app/assets/settings.scss                 | 139 ++++++++-
 app/components/AppFooter.vue             | 157 ++++++++++
 app/components/DashboardLayout.vue       | 136 +++++++++
 app/components/DateRangeSelector.vue     |  90 ++++--
 app/components/LoadingAnimation.vue      |  77 +++++
 app/components/MainComponent.vue         | 373 ++++++++++++++++-------
 app/components/MetricCard.vue            | 188 ++++++++++++
 app/components/StatsSummary.vue          | 147 +++++++++
 app/components/ThemeToggle.vue           |  81 +++++
 app/components/WelcomeBanner.vue         | 143 +++++++++
 app/layouts/default.vue                  |  28 +-
 nuxt.config.ts                           |   2 +-
 package-lock.json                        |   4 +-
 public/images/dashboard-illustration.svg |  39 +++
 vuetify.config.ts                        |  53 +++-
 16 files changed, 1752 insertions(+), 235 deletions(-)
 create mode 100644 app/components/AppFooter.vue
 create mode 100644 app/components/DashboardLayout.vue
 create mode 100644 app/components/LoadingAnimation.vue
 create mode 100644 app/components/MetricCard.vue
 create mode 100644 app/components/StatsSummary.vue
 create mode 100644 app/components/ThemeToggle.vue
 create mode 100644 app/components/WelcomeBanner.vue
 create mode 100644 public/images/dashboard-illustration.svg

diff --git a/app/assets/global.css b/app/assets/global.css
index a4ea1a92..cce4c2fb 100644
--- a/app/assets/global.css
+++ b/app/assets/global.css
@@ -1,78 +1,278 @@
+/* Base styles */
+:root {
+  --transition-speed: 0.3s;
+  --border-radius-sm: 4px;
+  --border-radius-md: 8px;
+  --border-radius-lg: 12px;
+  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08);
+  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.1);
+}
+
+body {
+  font-family: 'Inter', sans-serif;
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Layout components */
 .tiles-container {
-    display: flex;
-    justify-content: flex-start;
-    flex-wrap: wrap;
-  }
-  .tiles-text {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-  }
+  display: flex;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  gap: 16px;
+}
 
-  .error-message {
-    color: red;
-  }
+.tiles-text {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
 
-  .spacing-10 {
-    margin-bottom: 10px;
-  }
+.content-container {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 24px;
+}
 
-  .spacing-25 {
-    margin-bottom: 25px;
-  }
+/* Utility classes */
+.error-message {
+  color: #FF5252;
+  font-weight: 500;
+  padding: 8px 12px;
+  border-radius: var(--border-radius-sm);
+  background-color: rgba(255, 82, 82, 0.1);
+  margin: 8px 0;
+  display: inline-block;
+}
 
-  /* Fix tab hover styles - dark blue overlay using pseudo-element */
-  .v-tab {
-    position: relative !important;
-  }
-  
-  .v-tab:hover::before {
-    content: '' !important;
-    position: absolute !important;
-    top: 0 !important;
-    left: 0 !important;
-    width: 100% !important;
-    height: 100% !important;
-    background-color: rgba(44, 32, 157, 0.557) !important;
-    pointer-events: none !important;
-    z-index: 1 !important;
-  }
+.spacing-10 {
+  margin-bottom: 10px;
+}
 
-  /* Ensure tab content is above overlay */
-  .v-tab .v-tab__content {
-    position: relative !important;
-    z-index: 2 !important;
-  }
+.spacing-25 {
+  margin-bottom: 25px;
+}
 
-  /* Fix expansion panel title overlay on hover - gray overlay */
-  .v-expansion-panel-title:hover .v-expansion-panel-title__overlay {
-    display: block !important;
-    background-color: rgba(0, 0, 0, 0.04) !important;
-    opacity: 1 !important;
-    position: absolute !important;
-    top: 0 !important;
-    left: 0 !important;
-    width: 100% !important;
-    height: 100% !important;
-    pointer-events: none !important;
-  }
+.text-capitalize {
+  text-transform: capitalize !important;
+}
+
+/* Card enhancements */
+.v-card {
+  transition: transform var(--transition-speed), box-shadow var(--transition-speed);
+  overflow: hidden;
+  border-radius: var(--border-radius-md) !important;
+}
+
+.v-card:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-md) !important;
+}
+
+.v-card__title {
+  font-weight: 600 !important;
+  letter-spacing: -0.01em !important;
+}
+
+/* Tab styling */
+.v-tab {
+  position: relative !important;
+  text-transform: capitalize !important;
+  font-weight: 500 !important;
+  letter-spacing: 0.5px !important;
+  transition: all var(--transition-speed) !important;
+  border-radius: 0 !important;
+  min-width: 100px;
+}
+
+.v-tab:hover::before {
+  content: '' !important;
+  position: absolute !important;
+  top: 0 !important;
+  left: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
+  background-color: rgba(63, 81, 181, 0.1) !important;
+  pointer-events: none !important;
+  z-index: 1 !important;
+}
+
+.v-tab .v-tab__content {
+  position: relative !important;
+  z-index: 2 !important;
+}
+
+/* App bar styling */
+.app-header {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.toolbar-title {
+  font-weight: 600 !important;
+  letter-spacing: -0.01em !important;
+}
+
+/* Expansion panel enhancements */
+.v-expansion-panel {
+  border-radius: var(--border-radius-md) !important;
+  margin-bottom: 8px !important;
+  overflow: hidden;
+  box-shadow: var(--shadow-sm) !important;
+}
+
+.v-expansion-panel-title {
+  font-weight: 500 !important;
+  padding: 16px !important;
+}
 
-  /* Fix button hover styles - light gray background */
-  .v-btn:hover {
-    background-color: rgba(63, 81, 181, 0.1) !important;
+.v-expansion-panel-title:hover .v-expansion-panel-title__overlay {
+  background-color: rgba(0, 0, 0, 0.03) !important;
+}
+
+.v-expansion-panel-text__wrapper {
+  padding: 16px !important;
+}
+
+/* Button enhancements */
+.v-btn {
+  font-weight: 500 !important;
+  letter-spacing: 0 !important;
+  transition: all var(--transition-speed) !important;
+  text-transform: none !important;
+}
+
+.v-btn--elevated {
+  box-shadow: var(--shadow-sm) !important;
+}
+
+.v-btn--elevated:hover {
+  box-shadow: var(--shadow-md) !important;
+  transform: translateY(-1px);
+}
+
+.v-btn:hover .v-btn__overlay {
+  opacity: 0.05 !important;
+}
+
+/* GitHub login button styling */
+.github-login-container {
+  display: flex;
+  justify-content: center;
+  margin-top: 32px;
+  margin-bottom: 32px;
+}
+
+.github-login-button {
+  display: flex;
+  align-items: center;
+  background-color: #24292e;
+  color: white;
+  padding: 12px 24px;
+  border-radius: var(--border-radius-md);
+  text-decoration: none;
+  font-weight: 600;
+  font-size: 14px;
+  transition: all var(--transition-speed);
+  box-shadow: var(--shadow-sm);
+}
+
+.github-login-button:hover {
+  background-color: #2c3440;
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-md);
+}
+
+.github-login-button .v-icon {
+  margin-right: 8px;
+}
+
+/* User info styling */
+.user-info {
+  display: flex;
+  align-items: center;
+  background-color: rgba(255, 255, 255, 0.1);
+  padding: 4px 12px;
+  border-radius: 24px;
+}
+
+.user-avatar {
+  margin-right: 8px;
+  margin-left: 8px;
+  border: 2px solid white;
+}
+
+/* Organization info styling */
+.organization-info {
+  background-color: rgba(63, 81, 181, 0.05);
+  border-left: 4px solid #3F51B5;
+  border-radius: var(--border-radius-sm);
+  margin: 16px 0;
+}
+
+/* Date range selector styling */
+.date-range-selector {
+  background-color: white;
+  border-radius: var(--border-radius-md);
+  box-shadow: var(--shadow-sm);
+  margin-bottom: 24px;
+}
+
+/* Chart enhancements */
+.chart-container {
+  background-color: white;
+  border-radius: var(--border-radius-md);
+  padding: 16px;
+  box-shadow: var(--shadow-sm);
+  margin-bottom: 24px;
+}
+
+/* Data table styling */
+.v-data-table {
+  border-radius: var(--border-radius-md) !important;
+  overflow: hidden;
+  box-shadow: var(--shadow-sm) !important;
+}
+
+.v-data-table__thead {
+  background-color: rgba(63, 81, 181, 0.05);
+}
+
+.v-data-table__th {
+  font-weight: 600 !important;
+  text-transform: uppercase !important;
+  font-size: 0.75rem !important;
+  letter-spacing: 0.05em !important;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .content-container {
+    padding: 16px;
   }
   
-  .v-btn:hover .v-btn__overlay {
-    display: none !important;
+  .tiles-container {
+    gap: 12px;
   }
-
-  /* Override Vuetify's default overlay behavior for tabs */
-  .v-tab.v-btn--variant-text .v-tab__overlay {
-    background: transparent !important;
+  
+  .v-card {
+    border-radius: var(--border-radius-sm) !important;
   }
+}
+
+/* Dark mode adjustments */
+.v-theme--dark .organization-info {
+  background-color: rgba(92, 107, 192, 0.1);
+  border-left-color: #5C6BC0;
+}
+
+.v-theme--dark .chart-container,
+.v-theme--dark .date-range-selector {
+  background-color: #1E1E1E;
+}
 
-  /* Override Vuetify's default overlay behavior for variant-text buttons in tabs */
-  .v-tab .v-btn--variant-text .v-btn__overlay {
-    background: transparent !important;
-  }
\ No newline at end of file
+.v-theme--dark .v-data-table__thead {
+  background-color: rgba(92, 107, 192, 0.1);
+}
\ No newline at end of file
diff --git a/app/assets/settings.scss b/app/assets/settings.scss
index 3e36a279..77f00782 100644
--- a/app/assets/settings.scss
+++ b/app/assets/settings.scss
@@ -1,10 +1,129 @@
-/**
- * src/styles/settings.scss
- *
- * Configures SASS variables and Vuetify overwrites
- */
-
-// https://vuetifyjs.com/features/sass-variables/`
-// @use 'vuetify/settings' with (
-//   $color-pack: false
-// );
+// Custom Vuetify SASS variables
+@use 'vuetify/settings' with (
+  // Global font settings
+  $body-font-family: ('Inter', sans-serif),
+  $heading-font-family: ('Inter', sans-serif),
+  
+  // Typography
+  $typography: (
+    'h1': (
+      'weight': 700,
+      'letter-spacing': -0.02em,
+    ),
+    'h2': (
+      'weight': 700,
+      'letter-spacing': -0.01em,
+    ),
+    'h3': (
+      'weight': 600,
+      'letter-spacing': -0.01em,
+    ),
+    'h4': (
+      'weight': 600,
+      'letter-spacing': -0.01em,
+    ),
+    'h5': (
+      'weight': 600,
+      'letter-spacing': -0.01em,
+    ),
+    'h6': (
+      'weight': 600,
+      'letter-spacing': -0.01em,
+    ),
+    'subtitle-1': (
+      'weight': 500,
+    ),
+    'subtitle-2': (
+      'weight': 500,
+    ),
+    'body-1': (
+      'weight': 400,
+    ),
+    'body-2': (
+      'weight': 400,
+    ),
+    'button': (
+      'weight': 500,
+      'letter-spacing': 0.01em,
+      'text-transform': none,
+    ),
+    'caption': (
+      'weight': 400,
+    ),
+    'overline': (
+      'weight': 500,
+      'letter-spacing': 0.05em,
+    ),
+  ),
+  
+  // Border radius
+  $border-radius-root: 8px,
+  
+  // Elevation (shadows)
+  $shadow-key-umbra-opacity: rgba(0, 0, 0, 0.1),
+  $shadow-key-penumbra-opacity: rgba(0, 0, 0, 0.12),
+  $shadow-key-ambient-opacity: rgba(0, 0, 0, 0.06),
+  
+  // Card specific
+  $card-border-radius: 12px,
+  $card-elevation: 2,
+  
+  // Button specific
+  $button-border-radius: 8px,
+  $button-text-transform: none,
+  
+  // Expansion panels
+  $expansion-panel-border-radius: 8px,
+  
+  // Data tables
+  $data-table-border-radius: 8px,
+  
+  // Tabs
+  $tabs-item-letter-spacing: 0,
+  $tabs-item-font-weight: 500,
+);
+
+// Custom CSS variables
+:root {
+  --primary-gradient: linear-gradient(135deg, #3F51B5 0%, #5C6BC0 100%);
+  --card-hover-transform: translateY(-2px);
+  --card-hover-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
+  --transition-speed: 0.3s;
+}
+
+// Global styles
+html {
+  scroll-behavior: smooth;
+}
+
+// Custom scrollbar
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: #f1f1f1;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
+
+// Dark mode scrollbar
+.v-theme--dark ::-webkit-scrollbar-track {
+  background: #2d2d2d;
+}
+
+.v-theme--dark ::-webkit-scrollbar-thumb {
+  background: #555;
+}
+
+.v-theme--dark ::-webkit-scrollbar-thumb:hover {
+  background: #777;
+}
\ No newline at end of file
diff --git a/app/components/AppFooter.vue b/app/components/AppFooter.vue
new file mode 100644
index 00000000..b9d5b586
--- /dev/null
+++ b/app/components/AppFooter.vue
@@ -0,0 +1,157 @@
+<template>
+  <v-footer class="app-footer">
+    <v-container>
+      <v-row>
+        <v-col cols="12" md="4" class="d-flex flex-column">
+          <div class="d-flex align-center mb-4">
+            <v-icon color="primary" size="large" class="mr-2">mdi-github</v-icon>
+            <h3 class="text-h6 font-weight-bold mb-0">Copilot Metrics Viewer</h3>
+          </div>
+          <p class="text-body-2 text-medium-emphasis mb-4">
+            Track your organization's GitHub Copilot usage, analyze trends, and optimize your development workflow.
+          </p>
+          <div class="d-flex align-center">
+            <span class="text-caption text-medium-emphasis">Version {{ version }}</span>
+          </div>
+        </v-col>
+        
+        <v-col cols="12" md="4" class="d-flex flex-column align-center">
+          <h4 class="text-subtitle-1 font-weight-bold mb-4">Quick Links</h4>
+          <div class="d-flex flex-column">
+            <a 
+              href="https://github.com/github-copilot-resources/copilot-metrics-viewer" 
+              target="_blank" 
+              rel="noopener noreferrer"
+              class="footer-link mb-2"
+            >
+              <v-icon size="small" class="mr-2">mdi-github</v-icon>
+              GitHub Repository
+            </a>
+            <a 
+              href="https://github.com/github-copilot-resources/copilot-metrics-viewer/issues" 
+              target="_blank" 
+              rel="noopener noreferrer"
+              class="footer-link mb-2"
+            >
+              <v-icon size="small" class="mr-2">mdi-bug-outline</v-icon>
+              Report an Issue
+            </a>
+            <a 
+              href="https://github.com/github-copilot-resources/copilot-metrics-viewer/blob/main/README.md" 
+              target="_blank" 
+              rel="noopener noreferrer"
+              class="footer-link"
+            >
+              <v-icon size="small" class="mr-2">mdi-file-document-outline</v-icon>
+              Documentation
+            </a>
+          </div>
+        </v-col>
+        
+        <v-col cols="12" md="4" class="d-flex flex-column align-md-end">
+          <h4 class="text-subtitle-1 font-weight-bold mb-4">GitHub Copilot Resources</h4>
+          <div class="d-flex flex-column align-md-end">
+            <a 
+              href="https://github.com/features/copilot" 
+              target="_blank" 
+              rel="noopener noreferrer"
+              class="footer-link mb-2"
+            >
+              <v-icon size="small" class="mr-2">mdi-robot-outline</v-icon>
+              GitHub Copilot
+            </a>
+            <a 
+              href="https://docs.github.com/en/copilot" 
+              target="_blank" 
+              rel="noopener noreferrer"
+              class="footer-link mb-2"
+            >
+              <v-icon size="small" class="mr-2">mdi-book-open-outline</v-icon>
+              Copilot Documentation
+            </a>
+            <a 
+              href="https://github.com/github-copilot-resources" 
+              target="_blank" 
+              rel="noopener noreferrer"
+              class="footer-link"
+            >
+              <v-icon size="small" class="mr-2">mdi-source-repository</v-icon>
+              More Resources
+            </a>
+          </div>
+        </v-col>
+      </v-row>
+      
+      <v-divider class="my-4"></v-divider>
+      
+      <div class="d-flex flex-column flex-md-row justify-space-between align-center">
+        <div class="text-caption text-medium-emphasis mb-2 mb-md-0">
+          {{ new Date().getFullYear() }} — <strong>Copilot Metrics Viewer</strong>
+        </div>
+        <div class="d-flex">
+          <v-btn
+            v-for="(icon, i) in socialIcons"
+            :key="i"
+            :href="icon.link"
+            target="_blank"
+            rel="noopener noreferrer"
+            icon
+            variant="text"
+            size="small"
+            class="mx-1"
+          >
+            <v-icon>{{ icon.icon }}</v-icon>
+          </v-btn>
+        </div>
+      </div>
+    </v-container>
+  </v-footer>
+</template>
+
+<script setup lang="ts">
+const config = useRuntimeConfig();
+const version = computed(() => config.public.version);
+
+const socialIcons = [
+  { icon: 'mdi-github', link: 'https://github.com/github-copilot-resources/copilot-metrics-viewer' },
+  { icon: 'mdi-twitter', link: 'https://twitter.com/github' },
+  { icon: 'mdi-linkedin', link: 'https://www.linkedin.com/company/github' },
+  { icon: 'mdi-youtube', link: 'https://www.youtube.com/github' }
+];
+</script>
+
+<style scoped>
+.app-footer {
+  background-color: var(--v-theme-surface);
+  border-top: 1px solid rgba(0, 0, 0, 0.05);
+  padding: 48px 0 24px;
+}
+
+.footer-link {
+  display: flex;
+  align-items: center;
+  color: var(--v-theme-on-surface-variant);
+  text-decoration: none;
+  transition: color 0.3s;
+  font-size: 0.875rem;
+}
+
+.footer-link:hover {
+  color: var(--v-theme-primary);
+  text-decoration: none;
+}
+
+.v-theme--dark .app-footer {
+  border-top: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+@media (max-width: 768px) {
+  .app-footer {
+    padding: 32px 0 16px;
+  }
+  
+  .v-col {
+    margin-bottom: 24px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/app/components/DashboardLayout.vue b/app/components/DashboardLayout.vue
new file mode 100644
index 00000000..ab633b7a
--- /dev/null
+++ b/app/components/DashboardLayout.vue
@@ -0,0 +1,136 @@
+<template>
+  <div class="dashboard-layout">
+    <v-row>
+      <v-col cols="12">
+        <h2 class="text-h5 font-weight-bold mb-4 d-flex align-center">
+          <v-icon color="primary" class="mr-2">{{ icon }}</v-icon>
+          {{ title }}
+          <v-chip v-if="dateRange" size="small" color="primary" class="ml-2 text-white">{{ dateRange }}</v-chip>
+        </h2>
+      </v-col>
+    </v-row>
+    
+    <v-row v-if="showMetricCards && metrics && metrics.length">
+      <v-col cols="12" sm="6" md="3">
+        <MetricCard
+          title="Total Suggestions"
+          :value="formatNumber(totalSuggestions)"
+          description="Total number of suggestions offered by Copilot"
+          icon="mdi-lightbulb-outline"
+          color="primary"
+          :is-dark-theme="isDarkTheme"
+        />
+      </v-col>
+      <v-col cols="12" sm="6" md="3">
+        <MetricCard
+          title="Acceptance Rate"
+          :value="`${acceptanceRate}%`"
+          description="Percentage of suggestions accepted by users"
+          icon="mdi-check-circle-outline"
+          color="success"
+          :trend="acceptanceTrend"
+          :is-dark-theme="isDarkTheme"
+        />
+      </v-col>
+      <v-col cols="12" sm="6" md="3">
+        <MetricCard
+          title="Active Users"
+          :value="formatNumber(activeUsers)"
+          description="Number of users actively using Copilot"
+          icon="mdi-account-group"
+          color="info"
+          :is-dark-theme="isDarkTheme"
+        />
+      </v-col>
+      <v-col cols="12" sm="6" md="3">
+        <MetricCard
+          title="Avg. Suggestions/User"
+          :value="formatNumber(avgSuggestionsPerUser)"
+          description="Average number of suggestions per active user"
+          icon="mdi-chart-line"
+          color="accent"
+          :is-dark-theme="isDarkTheme"
+        />
+      </v-col>
+    </v-row>
+    
+    <v-divider v-if="showMetricCards && metrics && metrics.length" class="my-6"></v-divider>
+    
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import MetricCard from './MetricCard.vue';
+import type { Metrics } from '@/model/Metrics';
+
+const props = defineProps({
+  title: {
+    type: String,
+    required: true
+  },
+  icon: {
+    type: String,
+    default: 'mdi-view-dashboard-outline'
+  },
+  dateRange: {
+    type: String,
+    default: ''
+  },
+  metrics: {
+    type: Array as () => Metrics[],
+    default: () => []
+  },
+  showMetricCards: {
+    type: Boolean,
+    default: true
+  },
+  isDarkTheme: {
+    type: Boolean,
+    default: false
+  }
+});
+
+// Calculate metrics
+const totalSuggestions = computed(() => {
+  if (!props.metrics || props.metrics.length === 0) return 0;
+  return props.metrics.reduce((sum, metric) => sum + (metric.suggestions_count || 0), 0);
+});
+
+const acceptanceRate = computed(() => {
+  if (!props.metrics || props.metrics.length === 0 || totalSuggestions.value === 0) return 0;
+  const totalAccepted = props.metrics.reduce((sum, metric) => sum + (metric.accepted_suggestions_count || 0), 0);
+  return Math.round((totalAccepted / totalSuggestions.value) * 100);
+});
+
+// Simulate a trend (in a real app, this would compare with previous period)
+const acceptanceTrend = computed(() => {
+  // This is just a placeholder - in a real app you'd compare with previous period
+  return Math.floor(Math.random() * 21) - 10; // Random number between -10 and 10
+});
+
+const activeUsers = computed(() => {
+  if (!props.metrics || props.metrics.length === 0) return 0;
+  const uniqueUsers = new Set();
+  props.metrics.forEach(metric => {
+    if (metric.user_id) uniqueUsers.add(metric.user_id);
+  });
+  return uniqueUsers.size;
+});
+
+const avgSuggestionsPerUser = computed(() => {
+  if (activeUsers.value === 0) return 0;
+  return Math.round(totalSuggestions.value / activeUsers.value);
+});
+
+// Format numbers with commas
+function formatNumber(num: number): string {
+  return num.toLocaleString();
+}
+</script>
+
+<style scoped>
+.dashboard-layout {
+  margin-bottom: 32px;
+}
+</style>
\ No newline at end of file
diff --git a/app/components/DateRangeSelector.vue b/app/components/DateRangeSelector.vue
index 9d0f86a6..00aaae1c 100644
--- a/app/components/DateRangeSelector.vue
+++ b/app/components/DateRangeSelector.vue
@@ -1,48 +1,82 @@
 <template>
-  <v-card class="pa-4 ma-4" elevation="2">
-    <v-card-title class="text-h6 pb-2">Date Range Filter</v-card-title>
+  <v-card class="date-range-selector" elevation="2">
+    <v-card-title class="d-flex align-center pb-2">
+      <v-icon color="primary" class="mr-2">mdi-calendar-range</v-icon>
+      <span class="text-h6">Date Range Filter</span>
+    </v-card-title>
+    
+    <v-divider class="mb-4"></v-divider>
+    
     <v-row align="end">
-      <v-col cols="6" sm="3">
+      <v-col cols="12" sm="6" md="3">
         <v-text-field
           v-model="fromDate"
           label="From Date"
           type="date"
           variant="outlined"
-          density="compact"
+          density="comfortable"
+          prepend-inner-icon="mdi-calendar-start"
+          color="primary"
           @update:model-value="updateDateRange"
+          hide-details
         />
       </v-col>
-      <v-col cols="6" sm="3">
+      <v-col cols="12" sm="6" md="3">
         <v-text-field
           v-model="toDate"
           label="To Date"
           type="date"
           variant="outlined"
-          density="compact"
+          density="comfortable"
+          prepend-inner-icon="mdi-calendar-end"
+          color="primary"
           @update:model-value="updateDateRange"
+          hide-details
         />
       </v-col>
-      <v-col cols="6" sm="2">
+      <v-col cols="12" sm="6" md="3">
         <v-checkbox
           v-model="excludeHolidays"
-          label="Exclude holidays from metrics"
-          density="compact"
-        />
+          label="Exclude holidays"
+          density="comfortable"
+          color="primary"
+          hide-details
+        >
+          <template v-slot:label>
+            <div class="d-flex align-center">
+              <span>Exclude holidays</span>
+              <v-tooltip location="top">
+                <template v-slot:activator="{ props }">
+                  <v-icon
+                    v-bind="props"
+                    size="small"
+                    class="ml-1"
+                  >
+                    mdi-information-outline
+                  </v-icon>
+                </template>
+                <span>Exclude weekends and holidays from metrics calculation</span>
+              </v-tooltip>
+            </div>
+          </template>
+        </v-checkbox>
       </v-col>
-      <v-col cols="6" sm="4" class="d-flex align-center justify-start" style="padding-bottom: 35px;">
+      <v-col cols="12" sm="6" md="3" class="d-flex align-center justify-end">
         <v-btn
-          color="primary"
-          variant="outlined"
-          size="default"
+          color="secondary"
+          variant="tonal"
+          size="large"
           class="mr-3"
+          prepend-icon="mdi-refresh"
           @click="resetToDefault"
         >
           Last 28 Days
         </v-btn>
         <v-btn
           color="primary"
-          size="default"
+          size="large"
           :loading="loading"
+          prepend-icon="mdi-check"
           @click="applyDateRange"
         >
           Apply
@@ -50,11 +84,16 @@
       </v-col>
     </v-row>
 
-    
-    <v-card-text class="pt-2">
-      <span class="text-caption text-medium-emphasis">
+    <v-card-text class="pt-4">
+      <v-chip
+        color="primary"
+        variant="outlined"
+        size="large"
+        class="font-weight-medium"
+      >
+        <v-icon start>mdi-information-outline</v-icon>
         {{ dateRangeText }}
-      </span>
+      </v-chip>
     </v-card-text>
   </v-card>
 </template>
@@ -173,4 +212,15 @@ function applyDateRange() {
 onMounted(() => {
   applyDateRange()
 })
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+.date-range-selector {
+  border-radius: var(--border-radius-md);
+  transition: all var(--transition-speed);
+}
+
+.date-range-selector:hover {
+  box-shadow: var(--shadow-md) !important;
+}
+</style>
\ No newline at end of file
diff --git a/app/components/LoadingAnimation.vue b/app/components/LoadingAnimation.vue
new file mode 100644
index 00000000..67d30435
--- /dev/null
+++ b/app/components/LoadingAnimation.vue
@@ -0,0 +1,77 @@
+<template>
+  <div class="loading-container">
+    <div class="loading-content">
+      <div class="loading-icon">
+        <v-icon color="primary" size="x-large" class="pulse-icon">mdi-github</v-icon>
+        <div class="loading-circle"></div>
+      </div>
+      <p class="loading-text mt-4">{{ message }}</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  message: {
+    type: String,
+    default: 'Loading data...'
+  }
+});
+</script>
+
+<style scoped>
+.loading-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 200px;
+  width: 100%;
+}
+
+.loading-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.loading-icon {
+  position: relative;
+  width: 64px;
+  height: 64px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.loading-circle {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border: 3px solid rgba(63, 81, 181, 0.2);
+  border-top: 3px solid var(--v-theme-primary);
+  border-radius: 50%;
+  animation: spin 1.5s linear infinite;
+}
+
+.pulse-icon {
+  animation: pulse 2s infinite;
+}
+
+.loading-text {
+  font-size: 1rem;
+  color: var(--v-theme-on-surface-variant);
+  font-weight: 500;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+@keyframes pulse {
+  0% { opacity: 0.6; transform: scale(0.9); }
+  50% { opacity: 1; transform: scale(1.1); }
+  100% { opacity: 0.6; transform: scale(0.9); }
+}
+</style>
\ No newline at end of file
diff --git a/app/components/MainComponent.vue b/app/components/MainComponent.vue
index 5f40741c..31671dce 100644
--- a/app/components/MainComponent.vue
+++ b/app/components/MainComponent.vue
@@ -1,101 +1,219 @@
 <template>
   <div>
-    <v-toolbar color="indigo" elevation="4">
-      <v-btn icon>
+    <!-- Modern App Bar with responsive design -->
+    <v-app-bar color="primary" elevation="2" class="app-header">
+      <v-app-bar-nav-icon @click="drawer = !drawer" class="d-md-none text-white"></v-app-bar-nav-icon>
+      
+      <v-btn icon class="mr-2 text-white">
         <v-icon>mdi-github</v-icon>
       </v-btn>
 
-      <v-toolbar-title class="toolbar-title">{{ displayName }}</v-toolbar-title>
-      <h2 class="error-message"> {{ mockedDataMessage }} </h2>
+      <v-app-bar-title class="toolbar-title text-white">{{ displayName }}</v-app-bar-title>
+      <span v-if="mockedDataMessage" class="error-message text-caption px-2 py-1 rounded">{{ mockedDataMessage }}</span>
       <v-spacer />
 
-      <!-- Conditionally render the logout button -->
+      <!-- Conditionally render the user info and logout button -->
       <AuthState>
         <template #default="{ loggedIn, user }">
-          <div v-show="loggedIn" class="user-info">
-            Welcome,
-            <v-avatar class="user-avatar">
+          <div v-show="loggedIn" class="user-info d-none d-sm-flex">
+            <span class="mr-2 text-white">Welcome,</span>
+            <v-avatar size="32" class="user-avatar">
               <v-img :alt="user?.name" :src="user?.avatarUrl" />
-            </v-avatar> {{ user?.name }}
+            </v-avatar> 
+            <span class="ml-2 font-weight-medium text-white">{{ user?.name }}</span>
           </div>
-          <v-btn v-if="showLogoutButton && loggedIn" class="logout-button" @click="logout">Logout</v-btn>
+          <v-btn 
+            v-if="showLogoutButton && loggedIn" 
+            class="logout-button ml-4" 
+            @click="logout" 
+            prepend-icon="mdi-logout"
+            variant="tonal"
+            color="white"
+          >
+            Logout
+          </v-btn>
         </template>
       </AuthState>
 
-      <template #extension>
+      <ThemeToggle 
+        class="ml-2" 
+        :is-dark-theme="isDarkTheme" 
+        @toggle="toggleTheme" 
+      />
 
-        <v-tabs v-model="tab" align-tabs="title">
-          <v-tab v-for="item in tabItems" :key="item" :value="item">
+      <template #extension>
+        <v-tabs 
+          v-model="tab" 
+          align-tabs="center"
+          slider-color="white"
+          bg-color="primary"
+          class="d-none d-md-flex"
+        >
+          <v-tab 
+            v-for="item in tabItems" 
+            :key="item" 
+            :value="item"
+            class="text-white text-capitalize"
+          >
             {{ item }}
           </v-tab>
         </v-tabs>
-
-      </template>
-
-    </v-toolbar>
-
-    <!-- Date Range Selector - Hidden for seats tab -->
-    <DateRangeSelector 
-      v-show="tab !== 'seat analysis' && !signInRequired" 
-      :loading="isLoading"
-      @date-range-changed="handleDateRangeChange" />
-
-    <!-- Organization info for seats tab -->
-    <div v-if="tab === 'seat analysis'" class="organization-info">
-      <v-card flat class="pa-3 mb-2">
-        <div class="text-body-2 text-center">
-          Displaying data for organization: <strong>{{ displayName }}</strong>
-        </div>
-      </v-card>
-    </div>
-
-    <!-- API Error Message -->
-    <div v-show="apiError && !signInRequired" class="error-message" v-text="apiError" />
-    <AuthState>
-      <template #default="{ loggedIn }">
-        <div v-show="signInRequired" class="github-login-container">
-          <NuxtLink v-if="!loggedIn && signInRequired" to="/auth/github" external class="github-login-button"> <v-icon
-              left>mdi-github</v-icon>
-            Sign in with GitHub</NuxtLink>
-        </div>
       </template>
-      <template #placeholder>
-        <button disabled>Loading...</button>
-      </template>
-    </AuthState>
-
-
-    <div v-show="!apiError">
-      <v-progress-linear v-show="!metricsReady" indeterminate color="indigo" />
-      <v-window v-show="(metricsReady && metrics.length) || (seatsReady && tab === 'seat analysis')" v-model="tab">
-        <v-window-item v-for="item in tabItems" :key="item" :value="item">
-          <v-card flat>
-            <MetricsViewer v-if="item === itemName" :metrics="metrics" :date-range-description="dateRangeDescription" />
-            <BreakdownComponent
-v-if="item === 'languages'" :metrics="metrics" :breakdown-key="'language'"
-              :date-range-description="dateRangeDescription" />
-            <BreakdownComponent
-v-if="item === 'editors'" :metrics="metrics" :breakdown-key="'editor'"
-              :date-range-description="dateRangeDescription" />
-            <CopilotChatViewer
-v-if="item === 'copilot chat'" :metrics="metrics"
-              :date-range-description="dateRangeDescription" />
-            <AgentModeViewer v-if="item === 'github.com'" :original-metrics="originalMetrics" :date-range="dateRange" :date-range-description="dateRangeDescription" />
-            <SeatsAnalysisViewer v-if="item === 'seat analysis'" :seats="seats" />
-            <ApiResponse
-v-if="item === 'api response'" :metrics="metrics" :original-metrics="originalMetrics"
-              :seats="seats" />
-          </v-card>
-        </v-window-item>
-        <v-alert
-          v-show="(metricsReady && metrics.length == 0 && tab !== 'seat analysis') || (seatsReady && seats.length == 0 && tab === 'seat analysis')"
-          density="compact" text="No data available to display" title="No data" type="warning" />
-      </v-window>
+    </v-app-bar>
+    
+    <!-- Navigation drawer for mobile -->
+    <v-navigation-drawer
+      v-model="drawer"
+      temporary
+      class="d-md-none"
+    >
+      <v-list>
+        <v-list-item
+          prepend-icon="mdi-view-dashboard"
+          title="Copilot Metrics"
+          :subtitle="displayName"
+        ></v-list-item>
+        <v-divider></v-divider>
+        <v-list-item
+          v-for="item in tabItems"
+          :key="item"
+          :value="item"
+          @click="tab = item; drawer = false"
+          :active="tab === item"
+          :title="item"
+          class="text-capitalize"
+        ></v-list-item>
+      </v-list>
+    </v-navigation-drawer>
+
+    <!-- Main Content Container -->
+    <div class="content-container">
+      <!-- Welcome Banner -->
+      <WelcomeBanner 
+        v-if="!signInRequired" 
+        :user-name="user?.name"
+        :org-name="displayName"
+        :is-dark-theme="isDarkTheme"
+      />
+      
+      <!-- Date Range Selector - Hidden for seats tab -->
+      <DateRangeSelector 
+        v-show="tab !== 'seat analysis' && !signInRequired" 
+        :loading="isLoading"
+        @date-range-changed="handleDateRangeChange"
+        class="date-range-selector pa-4 mb-6" 
+      />
+
+      <!-- Organization info for seats tab -->
+      <div v-if="tab === 'seat analysis'" class="organization-info">
+        <v-card flat class="pa-4 mb-4">
+          <div class="d-flex align-center">
+            <v-icon color="primary" class="mr-2">mdi-office-building</v-icon>
+            <div>
+              <div class="text-body-1 font-weight-medium">Organization</div>
+              <div class="text-body-2 font-weight-bold">{{ displayName }}</div>
+            </div>
+          </div>
+        </v-card>
+      </div>
+
+      <!-- API Error Message -->
+      <v-alert
+        v-show="apiError && !signInRequired"
+        type="error"
+        variant="tonal"
+        class="mb-4"
+        :text="apiError"
+        closable
+      />
+
+      <!-- GitHub Login -->
+      <AuthState>
+        <template #default="{ loggedIn }">
+          <div v-show="signInRequired" class="github-login-container">
+            <NuxtLink v-if="!loggedIn && signInRequired" to="/auth/github" external class="github-login-button">
+              <v-icon class="mr-2">mdi-github</v-icon>
+              Sign in with GitHub
+            </NuxtLink>
+          </div>
+        </template>
+        <template #placeholder>
+          <div class="d-flex justify-center my-8">
+            <v-progress-circular indeterminate color="primary"></v-progress-circular>
+          </div>
+        </template>
+      </AuthState>
 
+      <!-- Main Content Area -->
+      <div v-show="!apiError">
+        <LoadingAnimation v-if="!metricsReady" message="Loading metrics data..." />
+        
+        <v-window v-show="(metricsReady && metrics.length) || (seatsReady && tab === 'seat analysis')" v-model="tab">
+          <v-window-item v-for="item in tabItems" :key="item" :value="item">
+            <v-card class="pa-4 rounded-lg">
+              <DashboardLayout
+                :title="item"
+                :icon="getTabIcon(item)"
+                :date-range="dateRangeDescription"
+                :metrics="metrics"
+                :show-metric-cards="item === itemName || item === 'languages' || item === 'editors'"
+                :is-dark-theme="isDarkTheme"
+              >
+                <v-card-text class="pa-0">
+                <MetricsViewer v-if="item === itemName" :metrics="metrics" :date-range-description="dateRangeDescription" />
+                <BreakdownComponent
+                  v-if="item === 'languages'" 
+                  :metrics="metrics" 
+                  :breakdown-key="'language'"
+                  :date-range-description="dateRangeDescription" 
+                />
+                <BreakdownComponent
+                  v-if="item === 'editors'" 
+                  :metrics="metrics" 
+                  :breakdown-key="'editor'"
+                  :date-range-description="dateRangeDescription" 
+                />
+                <CopilotChatViewer
+                  v-if="item === 'copilot chat'" 
+                  :metrics="metrics"
+                  :date-range-description="dateRangeDescription" 
+                />
+                <AgentModeViewer 
+                  v-if="item === 'github.com'" 
+                  :original-metrics="originalMetrics" 
+                  :date-range="dateRange" 
+                  :date-range-description="dateRangeDescription" 
+                />
+                <SeatsAnalysisViewer 
+                  v-if="item === 'seat analysis'" 
+                  :seats="seats" 
+                />
+                <ApiResponse
+                  v-if="item === 'api response'" 
+                  :metrics="metrics" 
+                  :original-metrics="originalMetrics"
+                  :seats="seats" 
+                />
+              </v-card-text>
+            </v-card>
+          </v-window-item>
+          
+          <v-alert
+            v-show="(metricsReady && metrics.length == 0 && tab !== 'seat analysis') || (seatsReady && seats.length == 0 && tab === 'seat analysis')"
+            density="comfortable" 
+            text="No data available to display" 
+            title="No data" 
+            type="warning"
+            variant="tonal"
+            class="mt-4" 
+            icon="mdi-alert-circle-outline"
+          />
+        </v-window>
+      </div>
     </div>
-
   </div>
 </template>
+
 <script lang='ts'>
 import type { Metrics } from '@/model/Metrics';
 import type { CopilotMetrics } from '@/model/Copilot_Metrics';
@@ -111,6 +229,12 @@ import SeatsAnalysisViewer from './SeatsAnalysisViewer.vue'
 import ApiResponse from './ApiResponse.vue'
 import AgentModeViewer from './AgentModeViewer.vue'
 import DateRangeSelector from './DateRangeSelector.vue'
+import WelcomeBanner from './WelcomeBanner.vue'
+import StatsSummary from './StatsSummary.vue'
+import LoadingAnimation from './LoadingAnimation.vue'
+import DashboardLayout from './DashboardLayout.vue'
+import MetricCard from './MetricCard.vue'
+import ThemeToggle from './ThemeToggle.vue'
 import { Options } from '@/model/Options';
 import { useRoute } from 'vue-router';
 
@@ -123,9 +247,19 @@ export default defineNuxtComponent({
     SeatsAnalysisViewer,
     ApiResponse,
     AgentModeViewer,
-    DateRangeSelector
+    DateRangeSelector,
+    WelcomeBanner,
+    StatsSummary,
+    LoadingAnimation,
+    DashboardLayout,
+    MetricCard,
+    ThemeToggle
   },
   methods: {
+    toggleTheme() {
+      this.isDarkTheme = !this.isDarkTheme;
+      this.$vuetify.theme.global.name = this.isDarkTheme ? 'dark' : 'light';
+    },
     logout() {
       const { clear } = useUserSession()
       this.metrics = [];
@@ -210,6 +344,29 @@ export default defineNuxtComponent({
             break;
         }
       }
+    },
+    getTabIcon(tab: string) {
+      switch (tab.toLowerCase()) {
+        case 'languages':
+          return 'mdi-code-tags';
+        case 'editors':
+          return 'mdi-pencil-box-outline';
+        case 'copilot chat':
+          return 'mdi-message-text-outline';
+        case 'github.com':
+          return 'mdi-github';
+        case 'seat analysis':
+          return 'mdi-account-group-outline';
+        case 'api response':
+          return 'mdi-api';
+        case 'organization':
+        case 'enterprise':
+        case 'team-organization':
+        case 'team-enterprise':
+          return 'mdi-chart-bar';
+        default:
+          return 'mdi-view-dashboard-outline';
+      }
     }
   },
 
@@ -228,7 +385,9 @@ export default defineNuxtComponent({
       config: null as ReturnType<typeof useRuntimeConfig> | null,
       holidayOptions: {
         excludeHolidays: false,
-      }
+      },
+      drawer: false,
+      isDarkTheme: false
     }
   },
   created() {
@@ -236,9 +395,15 @@ export default defineNuxtComponent({
     this.config = useRuntimeConfig();
   },
   async mounted() {
+    // Check system preference for dark mode
+    const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+    if (prefersDark) {
+      this.isDarkTheme = true;
+      this.$vuetify.theme.global.name = 'dark';
+    }
+    
     // Load initial data
     try {
-
       await this.fetchMetrics();
 
       const { data: seatsData, error: seatsError, execute: executeSeats } = this.seatsFetch;
@@ -300,50 +465,27 @@ export default defineNuxtComponent({
 </script>
 
 <style scoped>
-.toolbar-title {
-  white-space: nowrap;
-  overflow: visible;
-  text-overflow: clip;
-
-}
-
-.error-message {
-  color: red;
-}
-
-.logout-button {
-  margin-left: auto;
-}
-
-.github-login-container {
-  display: flex;
-  justify-content: center;
-  margin-top: 20px;
-}
-
-.github-login-button {
-  display: flex;
-  align-items: center;
-  background-color: #24292e;
-  color: white;
-  padding: 10px 20px;
-  border-radius: 5px;
-  text-decoration: none;
-  font-weight: bold;
-  font-size: 14px;
+.text-white {
+  color: white !important;
 }
 
-.github-login-button:hover {
-  background-color: #444d56;
+.app-header {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }
 
-.github-login-button v-icon {
-  margin-right: 8px;
+.toolbar-title {
+  white-space: nowrap;
+  overflow: visible;
+  text-overflow: clip;
+  font-weight: 600;
 }
 
 .user-info {
   display: flex;
   align-items: center;
+  background-color: rgba(255, 255, 255, 0.1);
+  padding: 4px 12px;
+  border-radius: 24px;
 }
 
 .user-avatar {
@@ -352,8 +494,7 @@ export default defineNuxtComponent({
   border: 2px solid white;
 }
 
-.organization-info {
-  background-color: #f5f5f5;
-  border-left: 4px solid #1976d2;
+.logout-button {
+  margin-left: auto;
 }
 </style>
\ No newline at end of file
diff --git a/app/components/MetricCard.vue b/app/components/MetricCard.vue
new file mode 100644
index 00000000..e417a499
--- /dev/null
+++ b/app/components/MetricCard.vue
@@ -0,0 +1,188 @@
+<template>
+  <v-card class="metric-card h-100" :class="{ 'theme--dark': isDarkTheme }">
+    <div class="card-accent" :class="`bg-${color}`"></div>
+    <v-card-text class="d-flex flex-column h-100">
+      <div class="d-flex align-center mb-4">
+        <div class="icon-container" :class="`bg-${color}-light`">
+          <v-icon :color="color">{{ icon }}</v-icon>
+        </div>
+        <h3 class="text-subtitle-1 font-weight-medium ml-2 mb-0">{{ title }}</h3>
+      </div>
+      
+      <div class="metric-value mb-2">
+        <span class="text-h4 font-weight-bold">{{ value }}</span>
+        <span v-if="trend" class="trend-indicator ml-2" :class="trendClass">
+          <v-icon size="small" class="mr-1">{{ trendIcon }}</v-icon>
+          {{ trend }}%
+        </span>
+      </div>
+      
+      <p class="text-caption text-medium-emphasis mb-0 mt-auto">{{ description }}</p>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  title: {
+    type: String,
+    required: true
+  },
+  value: {
+    type: [String, Number],
+    required: true
+  },
+  description: {
+    type: String,
+    default: ''
+  },
+  icon: {
+    type: String,
+    default: 'mdi-chart-bar'
+  },
+  color: {
+    type: String,
+    default: 'primary'
+  },
+  trend: {
+    type: Number,
+    default: null
+  },
+  isDarkTheme: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const trendClass = computed(() => {
+  if (props.trend === null) return '';
+  return props.trend >= 0 ? 'trend-up' : 'trend-down';
+});
+
+const trendIcon = computed(() => {
+  if (props.trend === null) return '';
+  return props.trend >= 0 ? 'mdi-arrow-up' : 'mdi-arrow-down';
+});
+</script>
+
+<style scoped>
+.metric-card {
+  position: relative;
+  overflow: hidden;
+  transition: transform 0.3s, box-shadow 0.3s;
+  border-radius: 12px;
+}
+
+.metric-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1) !important;
+}
+
+.theme--dark.metric-card:hover {
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3) !important;
+}
+
+.card-accent {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+}
+
+.icon-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
+}
+
+.bg-primary {
+  background-color: var(--v-theme-primary);
+}
+
+.bg-primary-light {
+  background-color: rgba(63, 81, 181, 0.1);
+}
+
+.bg-success {
+  background-color: var(--v-theme-success);
+}
+
+.bg-success-light {
+  background-color: rgba(76, 175, 80, 0.1);
+}
+
+.bg-info {
+  background-color: var(--v-theme-info);
+}
+
+.bg-info-light {
+  background-color: rgba(33, 150, 243, 0.1);
+}
+
+.bg-warning {
+  background-color: var(--v-theme-warning);
+}
+
+.bg-warning-light {
+  background-color: rgba(255, 167, 38, 0.1);
+}
+
+.bg-error {
+  background-color: var(--v-theme-error);
+}
+
+.bg-error-light {
+  background-color: rgba(239, 83, 80, 0.1);
+}
+
+.bg-accent {
+  background-color: var(--v-theme-accent);
+}
+
+.bg-accent-light {
+  background-color: rgba(83, 109, 254, 0.1);
+}
+
+.trend-indicator {
+  font-size: 0.875rem;
+  font-weight: 600;
+  display: inline-flex;
+  align-items: center;
+}
+
+.trend-up {
+  color: var(--v-theme-success);
+}
+
+.trend-down {
+  color: var(--v-theme-error);
+}
+
+.theme--dark .bg-primary-light {
+  background-color: rgba(92, 107, 192, 0.2);
+}
+
+.theme--dark .bg-success-light {
+  background-color: rgba(102, 187, 106, 0.2);
+}
+
+.theme--dark .bg-info-light {
+  background-color: rgba(66, 165, 245, 0.2);
+}
+
+.theme--dark .bg-warning-light {
+  background-color: rgba(255, 167, 38, 0.2);
+}
+
+.theme--dark .bg-error-light {
+  background-color: rgba(239, 83, 80, 0.2);
+}
+
+.theme--dark .bg-accent-light {
+  background-color: rgba(124, 77, 255, 0.2);
+}
+</style>
\ No newline at end of file
diff --git a/app/components/StatsSummary.vue b/app/components/StatsSummary.vue
new file mode 100644
index 00000000..c963a25e
--- /dev/null
+++ b/app/components/StatsSummary.vue
@@ -0,0 +1,147 @@
+<template>
+  <v-row class="stats-summary mb-6">
+    <v-col v-for="(stat, index) in stats" :key="index" cols="12" sm="6" md="3">
+      <v-card class="stat-card h-100" :class="{ 'theme--dark': isDarkTheme }">
+        <v-card-text class="d-flex flex-column align-center justify-center text-center pa-4">
+          <div class="stat-icon mb-4" :class="`bg-${stat.color}`">
+            <v-icon size="large" :color="stat.color">{{ stat.icon }}</v-icon>
+          </div>
+          <h3 class="text-h4 font-weight-bold mb-1">{{ stat.value }}</h3>
+          <p class="text-subtitle-2 text-medium-emphasis mb-0">{{ stat.label }}</p>
+        </v-card-text>
+      </v-card>
+    </v-col>
+  </v-row>
+</template>
+
+<script setup lang="ts">
+import type { Metrics } from '@/model/Metrics';
+
+const props = defineProps({
+  metrics: {
+    type: Array as () => Metrics[],
+    required: true
+  },
+  isDarkTheme: {
+    type: Boolean,
+    default: false
+  }
+});
+
+// Calculate summary statistics from metrics
+const stats = computed(() => {
+  // Default values in case metrics are empty
+  let totalSuggestions = 0;
+  let acceptanceRate = 0;
+  let totalUsers = 0;
+  let avgSuggestionsPerUser = 0;
+
+  if (props.metrics && props.metrics.length > 0) {
+    // Calculate total suggestions
+    totalSuggestions = props.metrics.reduce((sum, metric) => sum + (metric.suggestions_count || 0), 0);
+    
+    // Calculate acceptance rate
+    const totalAccepted = props.metrics.reduce((sum, metric) => sum + (metric.accepted_suggestions_count || 0), 0);
+    acceptanceRate = totalSuggestions > 0 ? Math.round((totalAccepted / totalSuggestions) * 100) : 0;
+    
+    // Calculate unique users
+    const uniqueUsers = new Set();
+    props.metrics.forEach(metric => {
+      if (metric.user_id) uniqueUsers.add(metric.user_id);
+    });
+    totalUsers = uniqueUsers.size;
+    
+    // Calculate average suggestions per user
+    avgSuggestionsPerUser = totalUsers > 0 ? Math.round(totalSuggestions / totalUsers) : 0;
+  }
+
+  return [
+    {
+      label: 'Total Suggestions',
+      value: totalSuggestions.toLocaleString(),
+      icon: 'mdi-lightbulb-outline',
+      color: 'primary'
+    },
+    {
+      label: 'Acceptance Rate',
+      value: `${acceptanceRate}%`,
+      icon: 'mdi-check-circle-outline',
+      color: 'success'
+    },
+    {
+      label: 'Active Users',
+      value: totalUsers.toLocaleString(),
+      icon: 'mdi-account-group',
+      color: 'info'
+    },
+    {
+      label: 'Avg. Suggestions/User',
+      value: avgSuggestionsPerUser.toLocaleString(),
+      icon: 'mdi-chart-line',
+      color: 'accent'
+    }
+  ];
+});
+</script>
+
+<style scoped>
+.stats-summary {
+  margin-top: 16px;
+}
+
+.stat-card {
+  transition: transform 0.3s, box-shadow 0.3s;
+  border-radius: 12px;
+  height: 100%;
+}
+
+.stat-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1) !important;
+}
+
+.theme--dark.stat-card:hover {
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3) !important;
+}
+
+.stat-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+}
+
+.bg-primary {
+  background-color: rgba(63, 81, 181, 0.1);
+}
+
+.bg-success {
+  background-color: rgba(76, 175, 80, 0.1);
+}
+
+.bg-info {
+  background-color: rgba(33, 150, 243, 0.1);
+}
+
+.bg-accent {
+  background-color: rgba(83, 109, 254, 0.1);
+}
+
+.theme--dark .bg-primary {
+  background-color: rgba(92, 107, 192, 0.2);
+}
+
+.theme--dark .bg-success {
+  background-color: rgba(102, 187, 106, 0.2);
+}
+
+.theme--dark .bg-info {
+  background-color: rgba(66, 165, 245, 0.2);
+}
+
+.theme--dark .bg-accent {
+  background-color: rgba(124, 77, 255, 0.2);
+}
+</style>
\ No newline at end of file
diff --git a/app/components/ThemeToggle.vue b/app/components/ThemeToggle.vue
new file mode 100644
index 00000000..9acb8879
--- /dev/null
+++ b/app/components/ThemeToggle.vue
@@ -0,0 +1,81 @@
+<template>
+  <div class="theme-toggle">
+    <v-btn
+      icon
+      variant="text"
+      :color="isDarkTheme ? 'white' : 'primary'"
+      @click="toggleTheme"
+      class="theme-toggle-button"
+    >
+      <div class="toggle-icon-container">
+        <v-icon
+          class="toggle-icon sun"
+          :class="{ 'active': !isDarkTheme }"
+        >
+          mdi-weather-sunny
+        </v-icon>
+        <v-icon
+          class="toggle-icon moon"
+          :class="{ 'active': isDarkTheme }"
+        >
+          mdi-weather-night
+        </v-icon>
+      </div>
+    </v-btn>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  isDarkTheme: {
+    type: Boolean,
+    required: true
+  }
+});
+
+const emit = defineEmits(['toggle']);
+
+function toggleTheme() {
+  emit('toggle');
+}
+</script>
+
+<style scoped>
+.theme-toggle {
+  position: relative;
+}
+
+.theme-toggle-button {
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s ease;
+}
+
+.toggle-icon-container {
+  position: relative;
+  width: 24px;
+  height: 24px;
+}
+
+.toggle-icon {
+  position: absolute;
+  top: 0;
+  left: 0;
+  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  opacity: 0;
+  transform: scale(0.5) rotate(-30deg);
+}
+
+.toggle-icon.active {
+  opacity: 1;
+  transform: scale(1) rotate(0);
+}
+
+.sun {
+  color: #FFC107;
+}
+
+.moon {
+  color: #E0E0E0;
+}
+</style>
\ No newline at end of file
diff --git a/app/components/WelcomeBanner.vue b/app/components/WelcomeBanner.vue
new file mode 100644
index 00000000..0ecb2ffb
--- /dev/null
+++ b/app/components/WelcomeBanner.vue
@@ -0,0 +1,143 @@
+<template>
+  <v-card class="welcome-banner mb-6" :class="{ 'theme--dark': isDarkTheme }">
+    <div class="banner-overlay"></div>
+    <v-card-text class="position-relative">
+      <div class="d-flex flex-column flex-md-row align-md-center justify-space-between">
+        <div class="banner-content">
+          <h1 class="text-h4 font-weight-bold mb-2">{{ greeting }}, {{ userName || 'there' }}!</h1>
+          <p class="text-subtitle-1 mb-4">Welcome to the Copilot Metrics Dashboard for <strong>{{ orgName }}</strong></p>
+          <p class="text-body-2 mb-6">
+            Track your organization's GitHub Copilot usage, analyze trends, and optimize your development workflow.
+          </p>
+          <div class="d-flex flex-wrap gap-3">
+            <v-btn 
+              color="primary" 
+              variant="elevated" 
+              size="large"
+              prepend-icon="mdi-chart-timeline-variant"
+              @click="scrollToMetrics"
+            >
+              View Metrics
+            </v-btn>
+            <v-btn 
+              color="secondary" 
+              variant="tonal" 
+              size="large"
+              prepend-icon="mdi-information-outline"
+              href="https://github.com/github-copilot-resources/copilot-metrics-viewer" 
+              target="_blank"
+            >
+              Learn More
+            </v-btn>
+          </div>
+        </div>
+        <div class="banner-image d-none d-md-flex">
+          <v-img
+            src="/images/dashboard-illustration.svg"
+            alt="Dashboard Illustration"
+            width="300"
+            height="200"
+            class="ml-auto"
+          >
+            <template v-slot:placeholder>
+              <v-row class="fill-height ma-0" align="center" justify="center">
+                <v-progress-circular indeterminate color="primary"></v-progress-circular>
+              </v-row>
+            </template>
+          </v-img>
+        </div>
+      </div>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  userName: {
+    type: String,
+    default: ''
+  },
+  orgName: {
+    type: String,
+    required: true
+  },
+  isDarkTheme: {
+    type: Boolean,
+    default: false
+  }
+});
+
+// Dynamic greeting based on time of day
+const greeting = computed(() => {
+  const hour = new Date().getHours();
+  if (hour < 12) return 'Good morning';
+  if (hour < 18) return 'Good afternoon';
+  return 'Good evening';
+});
+
+// Scroll to metrics section
+function scrollToMetrics() {
+  const metricsElement = document.querySelector('.v-window');
+  if (metricsElement) {
+    metricsElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
+  }
+}
+</script>
+
+<style scoped>
+.welcome-banner {
+  position: relative;
+  overflow: hidden;
+  border-radius: 16px;
+  background: linear-gradient(135deg, #3F51B5 0%, #5C6BC0 100%);
+  color: white;
+}
+
+.theme--dark.welcome-banner {
+  background: linear-gradient(135deg, #303F9F 0%, #3F51B5 100%);
+}
+
+.banner-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='rgba(255,255,255,.1)' fill-rule='evenodd'/%3E%3C/svg%3E");
+  opacity: 0.5;
+}
+
+.position-relative {
+  position: relative;
+  z-index: 1;
+}
+
+.banner-content {
+  max-width: 600px;
+  padding: 16px 0;
+}
+
+.banner-image {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.gap-3 {
+  gap: 12px;
+}
+
+@media (max-width: 768px) {
+  .welcome-banner {
+    padding: 16px 0;
+  }
+  
+  .banner-content {
+    text-align: center;
+  }
+  
+  .d-flex.flex-wrap {
+    justify-content: center;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index 624672da..fcc04189 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -1,31 +1,35 @@
 <template>
   <v-app>
-    <v-main>
+    <v-main class="bg-background">
       <slot />
     </v-main>
-    <v-footer class="bg-indigo-lighten-1 text-center d-flex flex-column fixed-footer">
-      <div class="px-4 py-2 text-center w-100">
-        {{ new Date().getFullYear() }} — <strong><a href="https://github.com/github-copilot-resources/copilot-metrics-viewer" target="_blank" rel="noopener noreferrer" style="color: inherit;">Copilot Metrics Viewer</a></strong> — {{ version }}
-      </div>
-    </v-footer>
+    <AppFooter />
   </v-app>
 </template>
 
 <script lang="ts" setup>
+import AppFooter from '../components/AppFooter.vue';
+
 const config = useRuntimeConfig();
-const version = computed(() => config.public.version);
 const githubInfo = getDisplayName(config.public)
 useHead({
   title: githubInfo,
   meta: [
-    { name: 'description', content: 'Copilot Metrics Dashboard' }
+    { name: 'description', content: 'Copilot Metrics Dashboard - Track your organization\'s GitHub Copilot usage and optimize your development workflow' },
+    { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+    { name: 'theme-color', content: '#3F51B5' }
+  ],
+  link: [
+    { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
+    { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' },
+    { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap' }
   ]
 });
 </script>
 
 <style scoped>
-.fixed-footer {
-  height: 50px;
-  max-height: 50px;
+.bg-background {
+  background-color: var(--v-theme-background);
+  min-height: calc(100vh - 300px); /* Ensure content area is tall enough */
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 3b920c8d..6c436728 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -37,7 +37,7 @@ export default defineNuxtConfig({
     },
   },
 
-  css: [],
+  css: ['~/assets/global.css'],
   modules: ['@nuxt/fonts', 'vuetify-nuxt-module', '@nuxt/eslint', 'nuxt-auth-utils'],
 
   vuetify: {
diff --git a/package-lock.json b/package-lock.json
index 81b52637..4b6e1461 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "copilot-metrics-viewer",
-  "version": "2.0.6",
+  "version": "2.0.7",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "copilot-metrics-viewer",
-      "version": "2.0.6",
+      "version": "2.0.7",
       "hasInstallScript": true,
       "dependencies": {
         "@nuxt/eslint": "^0.7.4",
diff --git a/public/images/dashboard-illustration.svg b/public/images/dashboard-illustration.svg
new file mode 100644
index 00000000..85af3fa8
--- /dev/null
+++ b/public/images/dashboard-illustration.svg
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="600" height="400" viewBox="0 0 600 400" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="600" height="400" fill="none"/>
+  <g opacity="0.8">
+    <!-- Background shapes -->
+    <circle cx="450" cy="150" r="100" fill="#C5CAE9" fill-opacity="0.3"/>
+    <circle cx="150" cy="250" r="80" fill="#7986CB" fill-opacity="0.2"/>
+    
+    <!-- Dashboard elements -->
+    <rect x="100" y="100" width="400" height="240" rx="8" fill="white" stroke="#3F51B5" stroke-width="2"/>
+    
+    <!-- Chart 1 - Bar chart -->
+    <rect x="120" y="140" width="160" height="180" rx="4" fill="#ECEFF1"/>
+    <rect x="130" y="260" width="20" height="50" fill="#3F51B5"/>
+    <rect x="160" y="230" width="20" height="80" fill="#5C6BC0"/>
+    <rect x="190" y="200" width="20" height="110" fill="#3F51B5"/>
+    <rect x="220" y="170" width="20" height="140" fill="#5C6BC0"/>
+    <rect x="250" y="210" width="20" height="100" fill="#3F51B5"/>
+    
+    <!-- Chart 2 - Pie chart -->
+    <circle cx="400" cy="200" r="70" fill="#ECEFF1"/>
+    <path d="M400 130 L400 200 L470 200 A70 70 0 0 0 400 130" fill="#3F51B5"/>
+    <path d="M400 200 L470 200 A70 70 0 0 1 430 260 L400 200" fill="#5C6BC0"/>
+    <path d="M400 200 L430 260 A70 70 0 0 1 330 230 L400 200" fill="#7986CB"/>
+    <path d="M400 200 L330 230 A70 70 0 0 1 400 130 L400 200" fill="#9FA8DA"/>
+    
+    <!-- Header -->
+    <rect x="100" y="100" width="400" height="30" rx="8" fill="#3F51B5"/>
+    <circle cx="115" cy="115" r="5" fill="white"/>
+    <circle cx="135" cy="115" r="5" fill="white"/>
+    <circle cx="155" cy="115" r="5" fill="white"/>
+    
+    <!-- Text lines -->
+    <rect x="120" y="320" width="160" height="10" rx="2" fill="#C5CAE9"/>
+    <rect x="320" y="280" width="160" height="10" rx="2" fill="#C5CAE9"/>
+    <rect x="320" y="300" width="120" height="10" rx="2" fill="#C5CAE9"/>
+    <rect x="320" y="320" width="140" height="10" rx="2" fill="#C5CAE9"/>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/vuetify.config.ts b/vuetify.config.ts
index 3249ccc8..99a96e5f 100644
--- a/vuetify.config.ts
+++ b/vuetify.config.ts
@@ -1,25 +1,60 @@
 import { defineVuetifyConfiguration } from 'vuetify-nuxt-module/custom-configuration'
 
 export default defineVuetifyConfiguration({
-  // your Vuetify options here
   theme: {
     defaultTheme: 'light',
     themes: {
       light: {
+        dark: false,
         colors: {
-          // Keep existing Vuetify colors but add custom hover states
-          primary: '#1976D2',
-          secondary: '#424242',
-          accent: '#82B1FF',
+          primary: '#3F51B5',
+          secondary: '#7986CB',
+          accent: '#536DFE',
           error: '#FF5252',
           info: '#2196F3',
           success: '#4CAF50',
-          warning: '#FFC107',
-          // Custom surface colors for better hover effects
+          warning: '#FFA726',
+          background: '#F5F7FA',
           surface: '#FFFFFF',
-          'surface-variant': '#F5F5F5',
+          'surface-variant': '#ECEFF1',
+          'on-surface-variant': '#424242',
+          'primary-darken-1': '#303F9F',
         },
       },
+      dark: {
+        dark: true,
+        colors: {
+          primary: '#5C6BC0',
+          secondary: '#7986CB',
+          accent: '#7C4DFF',
+          error: '#EF5350',
+          info: '#42A5F5',
+          success: '#66BB6A',
+          warning: '#FFA726',
+          background: '#121212',
+          surface: '#1E1E1E',
+          'surface-variant': '#2D2D2D',
+          'on-surface-variant': '#EEEEEE',
+          'primary-darken-1': '#3949AB',
+        },
+      },
+    },
+  },
+  defaults: {
+    VCard: {
+      elevation: 2,
+      rounded: 'lg',
+    },
+    VBtn: {
+      rounded: 'md',
+      variant: 'elevated',
+    },
+    VTextField: {
+      variant: 'outlined',
+      density: 'comfortable',
+    },
+    VToolbar: {
+      elevation: 2,
     },
   },
-})
+})
\ No newline at end of file

From cc80a92b12070553b5930510de9e39993f3236ab Mon Sep 17 00:00:00 2001
From: PseudoCoding <dphoude@gmail.com>
Date: Fri, 18 Jul 2025 17:24:18 -0400
Subject: [PATCH 04/13] More

---
 app/assets/background.css             |  81 ++++++
 app/assets/global.css                 | 192 +++++++++++--
 app/assets/settings.scss              |  44 ++-
 app/components/AppFooter.vue          |  39 ++-
 app/components/BreakdownComponent.vue | 226 +++++++++++----
 app/components/CopilotLogo.vue        |  97 +++++++
 app/components/DashboardLayout.vue    |  17 +-
 app/components/DateRangeSelector.vue  |  78 ++++-
 app/components/LoadingAnimation.vue   |  33 ++-
 app/components/MainComponent.vue      | 391 +++++++++++++++++++++-----
 app/components/MetricCard.vue         | 103 +++----
 app/components/MetricsViewer.vue      | 303 ++++++++++++--------
 app/components/StatsSummary.vue       |  85 ++----
 app/components/ThemeToggle.vue        |   6 +-
 app/components/WelcomeBanner.vue      |  28 +-
 nuxt.config.ts                        |   2 +-
 vuetify.config.ts                     |  36 +--
 17 files changed, 1275 insertions(+), 486 deletions(-)
 create mode 100644 app/assets/background.css
 create mode 100644 app/components/CopilotLogo.vue

diff --git a/app/assets/background.css b/app/assets/background.css
new file mode 100644
index 00000000..db58f182
--- /dev/null
+++ b/app/assets/background.css
@@ -0,0 +1,81 @@
+/* Background styling for the entire application */
+body {
+  background-color: #121212;
+  background-image: 
+    radial-gradient(circle at 10% 20%, rgba(100, 216, 203, 0.05) 0%, transparent 30%),
+    radial-gradient(circle at 90% 80%, rgba(156, 100, 216, 0.05) 0%, transparent 30%),
+    radial-gradient(circle at 50% 50%, rgba(139, 233, 253, 0.03) 0%, transparent 50%);
+  background-attachment: fixed;
+  min-height: 100vh;
+}
+
+/* Add subtle animated gradient to the main content area */
+.v-main {
+  position: relative;
+  overflow: hidden;
+}
+
+.v-main::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(135deg, 
+    rgba(100, 216, 203, 0.02) 0%, 
+    rgba(139, 233, 253, 0.02) 50%, 
+    rgba(156, 100, 216, 0.02) 100%);
+  background-size: 400% 400%;
+  animation: gradientAnimation 15s ease infinite;
+  z-index: -1;
+}
+
+@keyframes gradientAnimation {
+  0% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+  100% { background-position: 0% 50%; }
+}
+
+/* Add subtle grid pattern overlay */
+.v-main::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-image: 
+    linear-gradient(rgba(255, 255, 255, 0.01) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.01) 1px, transparent 1px);
+  background-size: 20px 20px;
+  z-index: -1;
+}
+
+/* Add glow effects to cards and important elements */
+.v-card {
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
+}
+
+.v-card:hover {
+  box-shadow: 0 8px 30px rgba(100, 216, 203, 0.15) !important;
+}
+
+/* Custom scrollbar for the entire site */
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background: #1a1a1a;
+}
+
+::-webkit-scrollbar-thumb {
+  background: linear-gradient(to bottom, #64D8CB, #9C64D8);
+  border-radius: 5px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: linear-gradient(to bottom, #8BE9FD, #64D8CB);
+}
\ No newline at end of file
diff --git a/app/assets/global.css b/app/assets/global.css
index cce4c2fb..c29ef802 100644
--- a/app/assets/global.css
+++ b/app/assets/global.css
@@ -4,9 +4,26 @@
   --border-radius-sm: 4px;
   --border-radius-md: 8px;
   --border-radius-lg: 12px;
-  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
-  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08);
-  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.1);
+  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
+  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);
+  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.2);
+  
+  /* Color palette based on the image */
+  --color-cyan: #8BE9FD;
+  --color-teal: #64D8CB;
+  --color-purple: #9C64D8;
+  --color-dark-bg: #121212;
+  --color-card-bg: #1E1E1E;
+  --color-success: #50FA7B;
+  --color-warning: #FFB86C;
+  --color-error: #FF5252;
+  --color-text: #F8F8F2;
+  --color-text-muted: #BFBFBF;
+  
+  /* Gradients */
+  --gradient-primary: linear-gradient(135deg, var(--color-teal) 0%, var(--color-purple) 100%);
+  --gradient-secondary: linear-gradient(135deg, var(--color-cyan) 0%, var(--color-teal) 100%);
+  --gradient-accent: linear-gradient(135deg, var(--color-purple) 0%, var(--color-cyan) 100%);
 }
 
 body {
@@ -14,6 +31,8 @@ body {
   line-height: 1.6;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  background-color: var(--color-dark-bg);
+  color: var(--color-text);
 }
 
 /* Layout components */
@@ -39,7 +58,7 @@ body {
 
 /* Utility classes */
 .error-message {
-  color: #FF5252;
+  color: var(--color-error);
   font-weight: 500;
   padding: 8px 12px;
   border-radius: var(--border-radius-sm);
@@ -65,16 +84,20 @@ body {
   transition: transform var(--transition-speed), box-shadow var(--transition-speed);
   overflow: hidden;
   border-radius: var(--border-radius-md) !important;
+  background-color: var(--color-card-bg) !important;
+  border: 1px solid rgba(255, 255, 255, 0.05);
 }
 
 .v-card:hover {
   transform: translateY(-2px);
-  box-shadow: var(--shadow-md) !important;
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3) !important;
+  border: 1px solid rgba(100, 216, 203, 0.2);
 }
 
 .v-card__title {
   font-weight: 600 !important;
   letter-spacing: -0.01em !important;
+  color: var(--color-cyan) !important;
 }
 
 /* Tab styling */
@@ -86,6 +109,7 @@ body {
   transition: all var(--transition-speed) !important;
   border-radius: 0 !important;
   min-width: 100px;
+  color: var(--color-text) !important;
 }
 
 .v-tab:hover::before {
@@ -95,7 +119,7 @@ body {
   left: 0 !important;
   width: 100% !important;
   height: 100% !important;
-  background-color: rgba(63, 81, 181, 0.1) !important;
+  background-color: rgba(100, 216, 203, 0.1) !important;
   pointer-events: none !important;
   z-index: 1 !important;
 }
@@ -107,7 +131,7 @@ body {
 
 /* App bar styling */
 .app-header {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 .toolbar-title {
@@ -121,19 +145,23 @@ body {
   margin-bottom: 8px !important;
   overflow: hidden;
   box-shadow: var(--shadow-sm) !important;
+  background-color: var(--color-card-bg) !important;
+  border: 1px solid rgba(255, 255, 255, 0.05);
 }
 
 .v-expansion-panel-title {
   font-weight: 500 !important;
   padding: 16px !important;
+  color: var(--color-text) !important;
 }
 
 .v-expansion-panel-title:hover .v-expansion-panel-title__overlay {
-  background-color: rgba(0, 0, 0, 0.03) !important;
+  background-color: rgba(100, 216, 203, 0.1) !important;
 }
 
 .v-expansion-panel-text__wrapper {
   padding: 16px !important;
+  background-color: var(--color-card-bg) !important;
 }
 
 /* Button enhancements */
@@ -146,6 +174,8 @@ body {
 
 .v-btn--elevated {
   box-shadow: var(--shadow-sm) !important;
+  background: var(--gradient-primary) !important;
+  color: white !important;
 }
 
 .v-btn--elevated:hover {
@@ -154,7 +184,7 @@ body {
 }
 
 .v-btn:hover .v-btn__overlay {
-  opacity: 0.05 !important;
+  opacity: 0.1 !important;
 }
 
 /* GitHub login button styling */
@@ -168,7 +198,7 @@ body {
 .github-login-button {
   display: flex;
   align-items: center;
-  background-color: #24292e;
+  background: var(--gradient-primary);
   color: white;
   padding: 12px 24px;
   border-radius: var(--border-radius-md);
@@ -180,9 +210,9 @@ body {
 }
 
 .github-login-button:hover {
-  background-color: #2c3440;
   transform: translateY(-2px);
   box-shadow: var(--shadow-md);
+  filter: brightness(1.1);
 }
 
 .github-login-button .v-icon {
@@ -201,32 +231,34 @@ body {
 .user-avatar {
   margin-right: 8px;
   margin-left: 8px;
-  border: 2px solid white;
+  border: 2px solid var(--color-cyan);
 }
 
 /* Organization info styling */
 .organization-info {
-  background-color: rgba(63, 81, 181, 0.05);
-  border-left: 4px solid #3F51B5;
+  background-color: rgba(100, 216, 203, 0.05);
+  border-left: 4px solid var(--color-teal);
   border-radius: var(--border-radius-sm);
   margin: 16px 0;
 }
 
 /* Date range selector styling */
 .date-range-selector {
-  background-color: white;
+  background-color: var(--color-card-bg);
   border-radius: var(--border-radius-md);
   box-shadow: var(--shadow-sm);
   margin-bottom: 24px;
+  border: 1px solid rgba(255, 255, 255, 0.05);
 }
 
 /* Chart enhancements */
 .chart-container {
-  background-color: white;
+  background-color: var(--color-card-bg);
   border-radius: var(--border-radius-md);
   padding: 16px;
   box-shadow: var(--shadow-sm);
   margin-bottom: 24px;
+  border: 1px solid rgba(255, 255, 255, 0.05);
 }
 
 /* Data table styling */
@@ -234,10 +266,11 @@ body {
   border-radius: var(--border-radius-md) !important;
   overflow: hidden;
   box-shadow: var(--shadow-sm) !important;
+  background-color: var(--color-card-bg) !important;
 }
 
 .v-data-table__thead {
-  background-color: rgba(63, 81, 181, 0.05);
+  background-color: rgba(100, 216, 203, 0.05);
 }
 
 .v-data-table__th {
@@ -245,6 +278,7 @@ body {
   text-transform: uppercase !important;
   font-size: 0.75rem !important;
   letter-spacing: 0.05em !important;
+  color: var(--color-cyan) !important;
 }
 
 /* Responsive adjustments */
@@ -262,17 +296,123 @@ body {
   }
 }
 
-/* Dark mode adjustments */
-.v-theme--dark .organization-info {
-  background-color: rgba(92, 107, 192, 0.1);
-  border-left-color: #5C6BC0;
+/* Glow effects for cards */
+.metric-card {
+  position: relative;
+  overflow: hidden;
+}
+
+.metric-card::before {
+  content: '';
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  right: -2px;
+  bottom: -2px;
+  background: var(--gradient-primary);
+  z-index: -1;
+  border-radius: calc(var(--border-radius-md) + 2px);
+  opacity: 0;
+  transition: opacity var(--transition-speed);
+}
+
+.metric-card:hover::before {
+  opacity: 0.7;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: #1a1a1a;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--color-teal);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--color-cyan);
+}
+
+/* Text colors */
+.text-primary {
+  color: var(--color-teal) !important;
+}
+
+.text-secondary {
+  color: var(--color-cyan) !important;
+}
+
+.text-accent {
+  color: var(--color-purple) !important;
+}
+
+.text-success {
+  color: var(--color-success) !important;
+}
+
+.text-warning {
+  color: var(--color-warning) !important;
+}
+
+.text-error {
+  color: var(--color-error) !important;
+}
+
+/* Background colors */
+.bg-primary {
+  background-color: var(--color-teal) !important;
+}
+
+.bg-secondary {
+  background-color: var(--color-cyan) !important;
+}
+
+.bg-accent {
+  background-color: var(--color-purple) !important;
+}
+
+.bg-gradient-primary {
+  background: var(--gradient-primary) !important;
+}
+
+.bg-gradient-secondary {
+  background: var(--gradient-secondary) !important;
+}
+
+.bg-gradient-accent {
+  background: var(--gradient-accent) !important;
+}
+
+/* Chip styling */
+.v-chip {
+  background: var(--gradient-primary) !important;
+  color: white !important;
+}
+
+/* Progress indicators */
+.v-progress-circular {
+  color: var(--color-teal) !important;
+}
+
+.v-progress-linear {
+  background-color: rgba(100, 216, 203, 0.2) !important;
+}
+
+.v-progress-linear__determinate {
+  background: var(--gradient-primary) !important;
 }
 
-.v-theme--dark .chart-container,
-.v-theme--dark .date-range-selector {
-  background-color: #1E1E1E;
+/* Switch styling */
+.v-switch__track {
+  background-color: rgba(100, 216, 203, 0.2) !important;
 }
 
-.v-theme--dark .v-data-table__thead {
-  background-color: rgba(92, 107, 192, 0.1);
+.v-switch--active .v-switch__track {
+  background-color: var(--color-teal) !important;
 }
\ No newline at end of file
diff --git a/app/assets/settings.scss b/app/assets/settings.scss
index 77f00782..8804ff05 100644
--- a/app/assets/settings.scss
+++ b/app/assets/settings.scss
@@ -66,21 +66,7 @@
   
   // Card specific
   $card-border-radius: 12px,
-  $card-elevation: 2,
-  
-  // Button specific
-  $button-border-radius: 8px,
-  $button-text-transform: none,
-  
-  // Expansion panels
-  $expansion-panel-border-radius: 8px,
-  
-  // Data tables
-  $data-table-border-radius: 8px,
-  
-  // Tabs
-  $tabs-item-letter-spacing: 0,
-  $tabs-item-font-weight: 500,
+  $card-elevation: 2
 );
 
 // Custom CSS variables
@@ -89,6 +75,14 @@
   --card-hover-transform: translateY(-2px);
   --card-hover-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
   --transition-speed: 0.3s;
+  --border-radius-sm: 4px;
+  --border-radius-md: 8px;
+  --border-radius-lg: 12px;
+  --button-border-radius: 8px;
+  --expansion-panel-border-radius: 8px;
+  --data-table-border-radius: 8px;
+  --tabs-item-letter-spacing: 0;
+  --tabs-item-font-weight: 500;
 }
 
 // Global styles
@@ -96,6 +90,11 @@ html {
   scroll-behavior: smooth;
 }
 
+// Button styles
+.v-btn {
+  text-transform: none !important;
+}
+
 // Custom scrollbar
 ::-webkit-scrollbar {
   width: 8px;
@@ -126,4 +125,19 @@ html {
 
 .v-theme--dark ::-webkit-scrollbar-thumb:hover {
   background: #777;
+}
+
+// Additional component styles
+.v-data-table {
+  border-radius: var(--border-radius-md) !important;
+  overflow: hidden;
+}
+
+.v-expansion-panel {
+  border-radius: var(--border-radius-md) !important;
+}
+
+.v-tabs .v-tab {
+  letter-spacing: 0 !important;
+  font-weight: 500 !important;
 }
\ No newline at end of file
diff --git a/app/components/AppFooter.vue b/app/components/AppFooter.vue
index b9d5b586..da8c5fc6 100644
--- a/app/components/AppFooter.vue
+++ b/app/components/AppFooter.vue
@@ -122,27 +122,52 @@ const socialIcons = [
 
 <style scoped>
 .app-footer {
-  background-color: var(--v-theme-surface);
-  border-top: 1px solid rgba(0, 0, 0, 0.05);
+  background-color: rgba(18, 18, 18, 0.95);
+  border-top: 1px solid rgba(139, 233, 253, 0.1);
   padding: 48px 0 24px;
+  position: relative;
+  overflow: hidden;
+}
+
+.app-footer::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: linear-gradient(90deg, #8BE9FD, #64D8CB, #9C64D8);
+  opacity: 0.5;
 }
 
 .footer-link {
   display: flex;
   align-items: center;
-  color: var(--v-theme-on-surface-variant);
+  color: rgba(255, 255, 255, 0.7);
   text-decoration: none;
-  transition: color 0.3s;
+  transition: all 0.3s;
   font-size: 0.875rem;
 }
 
 .footer-link:hover {
-  color: var(--v-theme-primary);
+  color: #8BE9FD;
   text-decoration: none;
+  transform: translateX(5px);
+}
+
+.footer-link .v-icon {
+  color: #64D8CB;
+}
+
+.text-h6 {
+  background: linear-gradient(90deg, #8BE9FD, #64D8CB);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
 }
 
-.v-theme--dark .app-footer {
-  border-top: 1px solid rgba(255, 255, 255, 0.05);
+.text-subtitle-1 {
+  color: #8BE9FD !important;
 }
 
 @media (max-width: 768px) {
diff --git a/app/components/BreakdownComponent.vue b/app/components/BreakdownComponent.vue
index 0889a043..07fca82d 100644
--- a/app/components/BreakdownComponent.vue
+++ b/app/components/BreakdownComponent.vue
@@ -1,29 +1,24 @@
 <template>
   <div>
     <div class="tiles-container">
-      <!-- Acceptance Rate Tile -->  
-      <v-card elevation="4" color="white" variant="elevated" class="mx-auto my-3" style="width: 300px; height: 175px;">
-          <v-card-item>
-            <div class="tiles-text">
-              <div class="spacing-25"/>
-              <div class="text-h6 mb-1">Number of {{ breakdownDisplayNamePlural }}</div>
-              <div class="text-caption">
-                {{ dateRangeDescription }}
-              </div>
-              <p class="text-h4">{{ numberOfBreakdowns }}</p> 
-          </div>
-        </v-card-item>
-      </v-card>
+      <MetricCard
+        :title="`Number of ${breakdownDisplayNamePlural}`"
+        :value="numberOfBreakdowns.toString()"
+        :description="`Total unique ${breakdownDisplayNamePlural.toLowerCase()} in the data`"
+        icon="mdi-format-list-bulleted"
+        color="primary"
+        :is-dark-theme="isDarkTheme"
+      />
     </div>
 
     <v-main class="p-1" style="min-height: 300px;">
-      <v-container style="min-height: 300px;" class="px-4 elevation-2">
+      <v-container style="min-height: 300px;" class="px-4 elevation-2 chart-container">
         <v-row>
           <v-col cols="4">
-            <v-card>
-              <v-card-item class="d-flex justify-center align-center">
-                <div class="spacing-25"/>
-                <div class="text-h6 mb-1">Top 5 {{ breakdownDisplayNamePlural }} by accepted suggestions (prompts)</div>
+            <v-card class="chart-card" :class="{ 'theme--dark': isDarkTheme }">
+              <div class="card-accent"></div>
+              <v-card-item class="d-flex flex-column align-center justify-center">
+                <h3 class="text-subtitle-1 font-weight-medium mb-4">Top 5 {{ breakdownDisplayNamePlural }} by accepted suggestions</h3>
                 <div style="width: 300px; height: 300px;">
                   <Pie :data="breakdownsChartDataTop5AcceptedPrompts" :options="chartOptions" />
                 </div>
@@ -32,10 +27,10 @@
           </v-col>
 
           <v-col cols="4">
-            <v-card>
-              <v-card-item class="d-flex justify-center align-center">
-                <div class="spacing-25"/>
-                <div class="text-h6 mb-1">Acceptance Rate (by count) for Top 5 {{ breakdownDisplayNamePlural }}</div>
+            <v-card class="chart-card" :class="{ 'theme--dark': isDarkTheme }">
+              <div class="card-accent"></div>
+              <v-card-item class="d-flex flex-column align-center justify-center">
+                <h3 class="text-subtitle-1 font-weight-medium mb-4">Acceptance Rate (by count) for Top 5</h3>
                 <div style="width: 300px; height: 300px;">
                   <Pie :data="breakdownsChartDataTop5AcceptedPromptsByCounts" :options="chartOptions" />
                 </div>
@@ -44,10 +39,10 @@
           </v-col>
 
           <v-col cols="4">
-            <v-card>
-              <v-card-item class="d-flex justify-center align-center">
-                <div class="spacing-25"/>
-                <div class="text-h6 mb-1">Acceptance Rate (by code lines) for Top 5 {{ breakdownDisplayNamePlural }}</div>
+            <v-card class="chart-card" :class="{ 'theme--dark': isDarkTheme }">
+              <div class="card-accent"></div>
+              <v-card-item class="d-flex flex-column align-center justify-center">
+                <h3 class="text-subtitle-1 font-weight-medium mb-4">Acceptance Rate (by lines) for Top 5</h3>
                 <div style="width: 300px; height: 300px;">
                   <Pie :data="breakdownsChartDataTop5AcceptedPromptsByLines" :options="chartOptions" />
                 </div>
@@ -57,21 +52,25 @@
         </v-row>
 
         <br>
-        <h2>{{ breakdownDisplayNamePlural }} Breakdown </h2>
+        <h2 class="breakdown-title">{{ breakdownDisplayNamePlural }} Breakdown</h2>
         <br>
 
-        <v-data-table :headers="headers" :items="breakdownList" class="elevation-2" style="padding-left: 100px; padding-right: 100px;">
-            <template #item="{item}">
-                <tr>
-                    <td>{{ item.name }}</td>
-                    <td>{{ item.acceptedPrompts }}</td>
-                    <td>{{ item.suggestedPrompts }}</td>
-                    <td>{{ item.acceptedLinesOfCode }}</td>
-                    <td>{{ item.suggestedLinesOfCode }}</td>
-                    <td v-if="item.acceptanceRateByCount !== undefined">{{ item.acceptanceRateByCount.toFixed(2) }}%</td>
-                    <td v-if="item.acceptanceRateByLines !== undefined">{{ item.acceptanceRateByLines.toFixed(2) }}%</td>
-                </tr>
-            </template>
+        <v-data-table 
+          :headers="headers" 
+          :items="breakdownList" 
+          class="data-table elevation-2"
+        >
+          <template #item="{item}">
+            <tr class="data-table-row">
+              <td class="data-table-cell">{{ item.name }}</td>
+              <td class="data-table-cell">{{ item.acceptedPrompts }}</td>
+              <td class="data-table-cell">{{ item.suggestedPrompts }}</td>
+              <td class="data-table-cell">{{ item.acceptedLinesOfCode }}</td>
+              <td class="data-table-cell">{{ item.suggestedLinesOfCode }}</td>
+              <td v-if="item.acceptanceRateByCount !== undefined" class="data-table-cell">{{ item.acceptanceRateByCount.toFixed(2) }}%</td>
+              <td v-if="item.acceptanceRateByLines !== undefined" class="data-table-cell">{{ item.acceptanceRateByLines.toFixed(2) }}%</td>
+            </tr>
+          </template>
         </v-data-table>
       </v-container>
     </v-main>
@@ -83,6 +82,7 @@ import { defineComponent, ref, toRef, watch } from 'vue';
 import type { Metrics } from '@/model/Metrics';
 import { Breakdown } from '@/model/Breakdown';
 import { Pie } from 'vue-chartjs'
+import MetricCard from './MetricCard.vue'
 
 import {
   Chart as ChartJS,
@@ -112,7 +112,8 @@ ChartJS.register(
 export default defineComponent({
   name: 'BreakdownComponent',
   components: {
-    Pie
+    Pie,
+    MetricCard
   },
   props: {
       metrics: {
@@ -126,6 +127,10 @@ export default defineComponent({
       dateRangeDescription: {
           type: String,
           default: 'Over the last 28 days'
+      },
+      isDarkTheme: {
+          type: Boolean,
+          default: false
       }
   },
   setup(props) {
@@ -151,15 +156,34 @@ export default defineComponent({
     const chartOptions = {
       responsive: true,
       maintainAspectRatio: true,
+      plugins: {
+        legend: {
+          labels: {
+            color: '#F8F8F2',  // Light text color for better readability
+            font: {
+              size: 12
+            }
+          },
+          position: 'bottom'
+        },
+        tooltip: {
+          backgroundColor: 'rgba(30, 30, 30, 0.8)',
+          titleColor: '#8BE9FD',
+          bodyColor: '#F8F8F2',
+          borderColor: 'rgba(100, 216, 203, 0.3)',
+          borderWidth: 1
+        }
+      }
     };
 
+    // Updated color palette to match the site theme
     const pieChartColors = ref([
-    '#4B0082', // Indigo
-    '#41B883', // Vue Green
-    '#6495ED', // Cornflower Blue
-    '#87CEFA', // Light Sky Blue
-    '#7CFC00'  // Lawn Green
-]);
+      '#8BE9FD',  // Cyan
+      '#64D8CB',  // Teal
+      '#9C64D8',  // Purple
+      '#50FA7B',  // Green
+      '#FFB86C'   // Orange
+    ]);
 
     // Function to process breakdown data
     const processBreakdownData = (data: Metrics[]) => {
@@ -192,9 +216,6 @@ export default defineComponent({
         // Recalculate the acceptance rates
         breakdown.acceptanceRateByCount = breakdown.suggestedPrompts !== 0 ? (breakdown.acceptedPrompts / breakdown.suggestedPrompts) * 100 : 0;
         breakdown.acceptanceRateByLines = breakdown.suggestedLinesOfCode !== 0 ? (breakdown.acceptedLinesOfCode / breakdown.suggestedLinesOfCode) * 100 : 0;
-
-        // Log each breakdown for debugging
-       // console.log('Breakdown:', breakdown);
       }));
 
       //Sort breakdowns map by accepted prompts
@@ -209,6 +230,8 @@ export default defineComponent({
           {
             data: top5BreakdownsAcceptedPrompts.map(breakdown => breakdown.acceptedPrompts),
             backgroundColor: pieChartColors.value,
+            borderWidth: 2,
+            borderColor: 'rgba(18, 18, 18, 0.8)'
           },
         ],
       };
@@ -219,6 +242,8 @@ export default defineComponent({
           {
             data: top5BreakdownsAcceptedPrompts.map(breakdown => breakdown.acceptanceRateByLines.toFixed(2)),
             backgroundColor: pieChartColors.value,
+            borderWidth: 2,
+            borderColor: 'rgba(18, 18, 18, 0.8)'
           },
         ],
       };
@@ -229,6 +254,8 @@ export default defineComponent({
           {
             data: top5BreakdownsAcceptedPrompts.map(breakdown => breakdown.acceptanceRateByCount.toFixed(2)),
             backgroundColor: pieChartColors.value,
+            borderWidth: 2,
+            borderColor: 'rgba(18, 18, 18, 0.8)'
           },
         ],
       };
@@ -265,7 +292,104 @@ export default defineComponent({
       ];
     },
   },
-  
-
 });
 </script>
+
+<style scoped>
+.chart-card {
+  position: relative;
+  overflow: hidden;
+  transition: transform 0.3s, box-shadow 0.3s;
+  border-radius: 12px;
+  background-color: rgba(18, 18, 18, 0.8) !important;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  backdrop-filter: blur(10px);
+  height: 100%;
+}
+
+.chart-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 8px 24px rgba(100, 216, 203, 0.15) !important;
+  border: 1px solid rgba(139, 233, 253, 0.2);
+}
+
+.theme--dark.chart-card:hover {
+  box-shadow: 0 8px 24px rgba(100, 216, 203, 0.15) !important;
+}
+
+.card-accent {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+  background: linear-gradient(90deg, #8BE9FD, #64D8CB, #9C64D8) !important;
+  background-size: 200% 100%;
+  animation: shimmer 3s infinite;
+}
+
+.text-subtitle-1 {
+  color: #8BE9FD !important;
+}
+
+.breakdown-title {
+  color: #8BE9FD;
+  font-weight: 700;
+  font-size: 1.5rem;
+  margin: 16px 0;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+  position: relative;
+  z-index: 2;
+}
+
+.chart-container {
+  background-color: rgba(18, 18, 18, 0.8) !important;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  border-radius: 12px;
+  padding: 24px;
+  margin-bottom: 32px;
+}
+
+/* Data table styling for better readability */
+.data-table {
+  background-color: rgba(18, 18, 18, 0.8) !important;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+:deep(.v-data-table__thead) {
+  background-color: rgba(100, 216, 203, 0.1) !important;
+}
+
+:deep(.v-data-table__thead th) {
+  color: #8BE9FD !important;
+  font-weight: 600 !important;
+  font-size: 0.8rem !important;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.data-table-row {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.data-table-cell {
+  color: #F8F8F2 !important;
+  padding: 12px 16px;
+}
+
+:deep(.v-data-table__tbody tr:hover) {
+  background-color: rgba(100, 216, 203, 0.05) !important;
+}
+
+@keyframes shimmer {
+  0% { background-position: 0% 0; }
+  100% { background-position: 200% 0; }
+}
+
+/* Update pie chart colors to match our theme */
+:deep(.chart-js-render-monitor) {
+  filter: drop-shadow(0 0 8px rgba(100, 216, 203, 0.2));
+}
+</style>
\ No newline at end of file
diff --git a/app/components/CopilotLogo.vue b/app/components/CopilotLogo.vue
new file mode 100644
index 00000000..4fa0d897
--- /dev/null
+++ b/app/components/CopilotLogo.vue
@@ -0,0 +1,97 @@
+<template>
+  <div class="copilot-logo">
+    <div class="logo-container">
+      <div class="logo-icon">
+        <v-icon size="x-large" class="logo-face">mdi-robot</v-icon>
+        <div class="glow-effect"></div>
+      </div>
+    </div>
+    <div v-if="showText" class="logo-text">
+      <span class="text-gradient">Copilot Metrics</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  showText: {
+    type: Boolean,
+    default: true
+  }
+});
+</script>
+
+<style scoped>
+.copilot-logo {
+  display: flex;
+  align-items: center;
+}
+
+.logo-container {
+  position: relative;
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.logo-icon {
+  position: relative;
+  width: 40px;
+  height: 40px;
+  background: linear-gradient(135deg, #64D8CB 0%, #9C64D8 100%);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 0 15px rgba(139, 233, 253, 0.5);
+  animation: pulse 3s infinite;
+}
+
+.logo-face {
+  color: white;
+  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
+}
+
+.glow-effect {
+  position: absolute;
+  top: -5px;
+  left: -5px;
+  right: -5px;
+  bottom: -5px;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(139, 233, 253, 0.4) 0%, rgba(139, 233, 253, 0) 70%);
+  z-index: -1;
+  animation: glow 3s infinite alternate;
+}
+
+.logo-text {
+  margin-left: 12px;
+  font-size: 1.5rem;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+}
+
+.text-gradient {
+  background: linear-gradient(90deg, #FFFFFF, #8BE9FD, #64D8CB);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  color: transparent;
+  position: relative;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
+}
+
+@keyframes pulse {
+  0% { transform: scale(1); }
+  50% { transform: scale(1.05); }
+  100% { transform: scale(1); }
+}
+
+@keyframes glow {
+  0% { opacity: 0.5; }
+  100% { opacity: 0.8; }
+}
+</style>
\ No newline at end of file
diff --git a/app/components/DashboardLayout.vue b/app/components/DashboardLayout.vue
index ab633b7a..476108fb 100644
--- a/app/components/DashboardLayout.vue
+++ b/app/components/DashboardLayout.vue
@@ -2,9 +2,9 @@
   <div class="dashboard-layout">
     <v-row>
       <v-col cols="12">
-        <h2 class="text-h5 font-weight-bold mb-4 d-flex align-center">
+        <h2 class="text-h5 font-weight-bold mb-4 d-flex align-center section-heading">
           <v-icon color="primary" class="mr-2">{{ icon }}</v-icon>
-          {{ title }}
+          <span class="section-title">{{ title }}</span>
           <v-chip v-if="dateRange" size="small" color="primary" class="ml-2 text-white">{{ dateRange }}</v-chip>
         </h2>
       </v-col>
@@ -133,4 +133,17 @@ function formatNumber(num: number): string {
 .dashboard-layout {
   margin-bottom: 32px;
 }
+
+.section-heading {
+  position: relative;
+  z-index: 1;
+}
+
+.section-title {
+  color: white !important;
+  font-weight: 700;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+  position: relative;
+  z-index: 2;
+}
 </style>
\ No newline at end of file
diff --git a/app/components/DateRangeSelector.vue b/app/components/DateRangeSelector.vue
index 00aaae1c..253f1cd7 100644
--- a/app/components/DateRangeSelector.vue
+++ b/app/components/DateRangeSelector.vue
@@ -1,11 +1,11 @@
 <template>
   <v-card class="date-range-selector" elevation="2">
     <v-card-title class="d-flex align-center pb-2">
-      <v-icon color="primary" class="mr-2">mdi-calendar-range</v-icon>
-      <span class="text-h6">Date Range Filter</span>
+      <v-icon color="secondary" class="mr-2">mdi-calendar-range</v-icon>
+      <span class="text-h6 text-secondary">Date Range Filter</span>
     </v-card-title>
     
-    <v-divider class="mb-4"></v-divider>
+    <v-divider class="mb-4" color="rgba(139, 233, 253, 0.2)"></v-divider>
     
     <v-row align="end">
       <v-col cols="12" sm="6" md="3">
@@ -16,9 +16,11 @@
           variant="outlined"
           density="comfortable"
           prepend-inner-icon="mdi-calendar-start"
-          color="primary"
+          color="secondary"
+          bg-color="rgba(139, 233, 253, 0.05)"
           @update:model-value="updateDateRange"
           hide-details
+          class="date-field"
         />
       </v-col>
       <v-col cols="12" sm="6" md="3">
@@ -29,9 +31,11 @@
           variant="outlined"
           density="comfortable"
           prepend-inner-icon="mdi-calendar-end"
-          color="primary"
+          color="secondary"
+          bg-color="rgba(139, 233, 253, 0.05)"
           @update:model-value="updateDateRange"
           hide-details
+          class="date-field"
         />
       </v-col>
       <v-col cols="12" sm="6" md="3">
@@ -39,7 +43,7 @@
           v-model="excludeHolidays"
           label="Exclude holidays"
           density="comfortable"
-          color="primary"
+          color="accent"
           hide-details
         >
           <template v-slot:label>
@@ -63,12 +67,13 @@
       </v-col>
       <v-col cols="12" sm="6" md="3" class="d-flex align-center justify-end">
         <v-btn
-          color="secondary"
-          variant="tonal"
+          color="primary"
+          variant="flat"
           size="large"
           class="mr-3"
           prepend-icon="mdi-refresh"
           @click="resetToDefault"
+          style="background-color: #1976D2 !important; color: white !important; font-weight: 600 !important;"
         >
           Last 28 Days
         </v-btn>
@@ -78,6 +83,7 @@
           :loading="loading"
           prepend-icon="mdi-check"
           @click="applyDateRange"
+          class="apply-button"
         >
           Apply
         </v-btn>
@@ -86,12 +92,12 @@
 
     <v-card-text class="pt-4">
       <v-chip
-        color="primary"
+        color="secondary"
         variant="outlined"
         size="large"
-        class="font-weight-medium"
+        class="font-weight-medium date-chip"
       >
-        <v-icon start>mdi-information-outline</v-icon>
+        <v-icon start color="secondary">mdi-information-outline</v-icon>
         {{ dateRangeText }}
       </v-chip>
     </v-card-text>
@@ -218,9 +224,57 @@ onMounted(() => {
 .date-range-selector {
   border-radius: var(--border-radius-md);
   transition: all var(--transition-speed);
+  background-color: rgba(18, 18, 18, 0.8) !important;
+  border: 1px solid rgba(139, 233, 253, 0.1);
+  backdrop-filter: blur(10px);
 }
 
 .date-range-selector:hover {
-  box-shadow: var(--shadow-md) !important;
+  box-shadow: 0 8px 24px rgba(100, 216, 203, 0.15) !important;
+  border: 1px solid rgba(139, 233, 253, 0.2);
+}
+
+.date-field :deep(.v-field__input) {
+  color: #8BE9FD !important;
+}
+
+.date-field :deep(.v-field__outline) {
+  color: rgba(139, 233, 253, 0.2) !important;
+}
+
+.date-field :deep(.v-field__outline__start),
+.date-field :deep(.v-field__outline__end),
+.date-field :deep(.v-field__outline__notch) {
+  border-color: rgba(139, 233, 253, 0.2) !important;
+}
+
+.date-field:hover :deep(.v-field__outline__start),
+.date-field:hover :deep(.v-field__outline__end),
+.date-field:hover :deep(.v-field__outline__notch) {
+  border-color: rgba(139, 233, 253, 0.4) !important;
+}
+
+.date-chip {
+  background: transparent !important;
+  border: 1px solid rgba(139, 233, 253, 0.3) !important;
+  color: #8BE9FD !important;
+}
+
+.apply-button {
+  background-color: #1976D2 !important;
+  color: white !important;
+  font-weight: 600 !important;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
+  border: 1px solid rgba(255, 255, 255, 0.2) !important;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+}
+
+.days-28-button {
+  background-color: #0D47A1 !important;
+  color: white !important;
+  font-weight: 600 !important;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
+  border: 1px solid rgba(255, 255, 255, 0.2) !important;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
 }
 </style>
\ No newline at end of file
diff --git a/app/components/LoadingAnimation.vue b/app/components/LoadingAnimation.vue
index 67d30435..0553612f 100644
--- a/app/components/LoadingAnimation.vue
+++ b/app/components/LoadingAnimation.vue
@@ -2,8 +2,9 @@
   <div class="loading-container">
     <div class="loading-content">
       <div class="loading-icon">
-        <v-icon color="primary" size="x-large" class="pulse-icon">mdi-github</v-icon>
+        <v-icon color="secondary" size="x-large" class="pulse-icon">mdi-github</v-icon>
         <div class="loading-circle"></div>
+        <div class="loading-glow"></div>
       </div>
       <p class="loading-text mt-4">{{ message }}</p>
     </div>
@@ -48,20 +49,36 @@ defineProps({
   position: absolute;
   width: 100%;
   height: 100%;
-  border: 3px solid rgba(63, 81, 181, 0.2);
-  border-top: 3px solid var(--v-theme-primary);
+  border: 3px solid rgba(139, 233, 253, 0.1);
+  border-top: 3px solid #8BE9FD;
+  border-right: 3px solid #64D8CB;
+  border-bottom: 3px solid #9C64D8;
   border-radius: 50%;
   animation: spin 1.5s linear infinite;
+  box-shadow: 0 0 15px rgba(139, 233, 253, 0.2);
+}
+
+.loading-glow {
+  position: absolute;
+  width: 150%;
+  height: 150%;
+  background: radial-gradient(circle, rgba(139, 233, 253, 0.2) 0%, rgba(139, 233, 253, 0) 70%);
+  animation: glow 3s ease-in-out infinite;
 }
 
 .pulse-icon {
   animation: pulse 2s infinite;
+  filter: drop-shadow(0 0 8px rgba(139, 233, 253, 0.6));
 }
 
 .loading-text {
-  font-size: 1rem;
-  color: var(--v-theme-on-surface-variant);
+  font-size: 1.1rem;
+  background: linear-gradient(90deg, #8BE9FD, #64D8CB, #9C64D8);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
   font-weight: 500;
+  letter-spacing: 0.5px;
 }
 
 @keyframes spin {
@@ -74,4 +91,10 @@ defineProps({
   50% { opacity: 1; transform: scale(1.1); }
   100% { opacity: 0.6; transform: scale(0.9); }
 }
+
+@keyframes glow {
+  0% { opacity: 0.3; transform: scale(0.8); }
+  50% { opacity: 0.6; transform: scale(1.1); }
+  100% { opacity: 0.3; transform: scale(0.8); }
+}
 </style>
\ No newline at end of file
diff --git a/app/components/MainComponent.vue b/app/components/MainComponent.vue
index 31671dce..0f9119e4 100644
--- a/app/components/MainComponent.vue
+++ b/app/components/MainComponent.vue
@@ -1,14 +1,25 @@
 <template>
   <div>
-    <!-- Modern App Bar with responsive design -->
-    <v-app-bar color="primary" elevation="2" class="app-header">
-      <v-app-bar-nav-icon @click="drawer = !drawer" class="d-md-none text-white"></v-app-bar-nav-icon>
+    <!-- Modern App Bar with hamburger menu -->
+    <v-app-bar 
+      :color="isDarkTheme ? 'gradient-dark' : 'gradient-light'" 
+      elevation="3" 
+      class="app-header"
+      height="70"
+    >
+      <v-app-bar-nav-icon 
+        @click="drawer = !drawer" 
+        class="text-white hamburger-icon"
+        size="large"
+      ></v-app-bar-nav-icon>
+      
+      <div class="d-flex align-center">
+        <CopilotLogo />
+        <v-app-bar-title class="toolbar-title text-white ml-2">
+          <span class="text-subtitle-2 d-block">{{ displayName }}</span>
+        </v-app-bar-title>
+      </div>
       
-      <v-btn icon class="mr-2 text-white">
-        <v-icon>mdi-github</v-icon>
-      </v-btn>
-
-      <v-app-bar-title class="toolbar-title text-white">{{ displayName }}</v-app-bar-title>
       <span v-if="mockedDataMessage" class="error-message text-caption px-2 py-1 rounded">{{ mockedDataMessage }}</span>
       <v-spacer />
 
@@ -27,7 +38,7 @@
             class="logout-button ml-4" 
             @click="logout" 
             prepend-icon="mdi-logout"
-            variant="tonal"
+            variant="outlined"
             color="white"
           >
             Logout
@@ -40,50 +51,96 @@
         :is-dark-theme="isDarkTheme" 
         @toggle="toggleTheme" 
       />
-
-      <template #extension>
-        <v-tabs 
-          v-model="tab" 
-          align-tabs="center"
-          slider-color="white"
-          bg-color="primary"
-          class="d-none d-md-flex"
-        >
-          <v-tab 
-            v-for="item in tabItems" 
-            :key="item" 
-            :value="item"
-            class="text-white text-capitalize"
-          >
-            {{ item }}
-          </v-tab>
-        </v-tabs>
-      </template>
     </v-app-bar>
     
-    <!-- Navigation drawer for mobile -->
+    <!-- Navigation drawer with hamburger menu -->
     <v-navigation-drawer
       v-model="drawer"
       temporary
-      class="d-md-none"
+      location="left"
+      width="280"
+      class="navigation-drawer"
     >
-      <v-list>
+      <v-list class="drawer-list">
         <v-list-item
           prepend-icon="mdi-view-dashboard"
           title="Copilot Metrics"
           :subtitle="displayName"
-        ></v-list-item>
-        <v-divider></v-divider>
-        <v-list-item
+          class="py-4 drawer-header"
+        >
+          <template v-slot:append>
+            <v-btn
+              icon
+              variant="text"
+              @click="drawer = false"
+              class="close-btn"
+            >
+              <v-icon>mdi-close</v-icon>
+            </v-btn>
+          </template>
+        </v-list-item>
+        
+        <v-divider class="drawer-divider"></v-divider>
+        
+        <div 
           v-for="item in tabItems"
           :key="item"
-          :value="item"
+          class="custom-menu-item my-1"
+          :class="{'custom-menu-item-active': tab === item}"
           @click="tab = item; drawer = false"
-          :active="tab === item"
-          :title="item"
-          class="text-capitalize"
-        ></v-list-item>
+        >
+          <v-icon class="menu-icon" :icon="getTabIcon(item)"></v-icon>
+          <span class="menu-text text-capitalize">{{ item }}</span>
+        </div>
+        
+        <v-divider class="drawer-divider my-3"></v-divider>
+        
+        <v-list-item
+          prepend-icon="mdi-cog-outline"
+          title="Settings"
+          class="drawer-item my-1"
+          rounded="lg"
+        >
+          <template v-slot:append>
+            <v-switch
+              v-model="isDarkTheme"
+              color="primary"
+              hide-details
+              inset
+              :label="isDarkTheme ? 'Dark' : 'Light'"
+              density="compact"
+              @change="toggleTheme"
+            ></v-switch>
+          </template>
+        </v-list-item>
+        
+        <AuthState>
+          <template #default="{ loggedIn }">
+            <v-list-item
+              v-if="loggedIn && showLogoutButton"
+              prepend-icon="mdi-logout"
+              title="Logout"
+              class="drawer-item my-1"
+              rounded="lg"
+              @click="logout"
+            ></v-list-item>
+          </template>
+        </AuthState>
       </v-list>
+      
+      <template v-slot:append>
+        <div class="pa-4">
+          <v-btn
+            block
+            color="primary"
+            href="https://github.com/github-copilot-resources/copilot-metrics-viewer"
+            target="_blank"
+            prepend-icon="mdi-github"
+          >
+            View on GitHub
+          </v-btn>
+        </div>
+      </template>
     </v-navigation-drawer>
 
     <!-- Main Content Container -->
@@ -160,41 +217,53 @@
                 :is-dark-theme="isDarkTheme"
               >
                 <v-card-text class="pa-0">
-                <MetricsViewer v-if="item === itemName" :metrics="metrics" :date-range-description="dateRangeDescription" />
-                <BreakdownComponent
-                  v-if="item === 'languages'" 
-                  :metrics="metrics" 
-                  :breakdown-key="'language'"
-                  :date-range-description="dateRangeDescription" 
-                />
-                <BreakdownComponent
-                  v-if="item === 'editors'" 
-                  :metrics="metrics" 
-                  :breakdown-key="'editor'"
-                  :date-range-description="dateRangeDescription" 
-                />
-                <CopilotChatViewer
-                  v-if="item === 'copilot chat'" 
-                  :metrics="metrics"
-                  :date-range-description="dateRangeDescription" 
-                />
-                <AgentModeViewer 
-                  v-if="item === 'github.com'" 
-                  :original-metrics="originalMetrics" 
-                  :date-range="dateRange" 
-                  :date-range-description="dateRangeDescription" 
-                />
-                <SeatsAnalysisViewer 
-                  v-if="item === 'seat analysis'" 
-                  :seats="seats" 
-                />
-                <ApiResponse
-                  v-if="item === 'api response'" 
-                  :metrics="metrics" 
-                  :original-metrics="originalMetrics"
-                  :seats="seats" 
-                />
-              </v-card-text>
+                  <MetricsViewer 
+                    v-if="item === itemName" 
+                    :metrics="metrics" 
+                    :date-range-description="dateRangeDescription"
+                    :is-dark-theme="isDarkTheme" 
+                  />
+                  <BreakdownComponent
+                    v-if="item === 'languages'" 
+                    :metrics="metrics" 
+                    :breakdown-key="'language'"
+                    :date-range-description="dateRangeDescription"
+                    :is-dark-theme="isDarkTheme" 
+                  />
+                  <BreakdownComponent
+                    v-if="item === 'editors'" 
+                    :metrics="metrics" 
+                    :breakdown-key="'editor'"
+                    :date-range-description="dateRangeDescription"
+                    :is-dark-theme="isDarkTheme" 
+                  />
+                  <CopilotChatViewer
+                    v-if="item === 'copilot chat'" 
+                    :metrics="metrics"
+                    :date-range-description="dateRangeDescription"
+                    :is-dark-theme="isDarkTheme" 
+                  />
+                  <AgentModeViewer 
+                    v-if="item === 'github.com'" 
+                    :original-metrics="originalMetrics" 
+                    :date-range="dateRange" 
+                    :date-range-description="dateRangeDescription"
+                    :is-dark-theme="isDarkTheme" 
+                  />
+                  <SeatsAnalysisViewer 
+                    v-if="item === 'seat analysis'" 
+                    :seats="seats"
+                    :is-dark-theme="isDarkTheme" 
+                  />
+                  <ApiResponse
+                    v-if="item === 'api response'" 
+                    :metrics="metrics" 
+                    :original-metrics="originalMetrics"
+                    :seats="seats"
+                    :is-dark-theme="isDarkTheme" 
+                  />
+                </v-card-text>
+              </DashboardLayout>
             </v-card>
           </v-window-item>
           
@@ -235,6 +304,7 @@ import LoadingAnimation from './LoadingAnimation.vue'
 import DashboardLayout from './DashboardLayout.vue'
 import MetricCard from './MetricCard.vue'
 import ThemeToggle from './ThemeToggle.vue'
+import CopilotLogo from './CopilotLogo.vue'
 import { Options } from '@/model/Options';
 import { useRoute } from 'vue-router';
 
@@ -253,7 +323,8 @@ export default defineNuxtComponent({
     LoadingAnimation,
     DashboardLayout,
     MetricCard,
-    ThemeToggle
+    ThemeToggle,
+    CopilotLogo
   },
   methods: {
     toggleTheme() {
@@ -470,7 +541,39 @@ export default defineNuxtComponent({
 }
 
 .app-header {
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  border-bottom: 3px solid rgba(255, 255, 255, 0.2);
+  background: linear-gradient(135deg, #64D8CB 0%, #9C64D8 100%) !important;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
+  position: relative;
+  z-index: 10;
+}
+
+.app-header::after {
+  content: '';
+  position: absolute;
+  bottom: -3px;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: linear-gradient(90deg, #8BE9FD, #64D8CB, #9C64D8);
+  background-size: 200% 100%;
+  animation: shimmer 2s infinite;
+  z-index: 11;
+}
+
+.v-theme--dark .app-header {
+  background: linear-gradient(135deg, #64D8CB 0%, #9C64D8 100%) !important;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
+}
+
+.v-theme--dark .app-header::after {
+  background: linear-gradient(90deg, #8BE9FD, #64D8CB, #9C64D8);
+  background-size: 200% 100%;
+}
+
+@keyframes shimmer {
+  0% { background-position: 0% 0; }
+  100% { background-position: 200% 0; }
 }
 
 .toolbar-title {
@@ -480,6 +583,25 @@ export default defineNuxtComponent({
   font-weight: 600;
 }
 
+.hamburger-icon {
+  background-color: rgba(255, 255, 255, 0.1);
+  border-radius: 8px;
+  transition: all 0.3s;
+}
+
+.hamburger-icon:hover {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
+.header-logo {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  transition: all 0.3s;
+}
+
+.header-logo:hover {
+  transform: scale(1.05);
+}
+
 .user-info {
   display: flex;
   align-items: center;
@@ -497,4 +619,121 @@ export default defineNuxtComponent({
 .logout-button {
   margin-left: auto;
 }
+
+/* Navigation drawer styling */
+.navigation-drawer {
+  background-color: #1E1E1E !important; /* Solid background color, no transparency */
+  border-right: 1px solid rgba(139, 233, 253, 0.2);
+}
+
+/* Custom menu item styling */
+.custom-menu-item {
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  margin-bottom: 4px;
+  color: #F8F8F2;
+  position: relative;
+  background-color: transparent;
+}
+
+.custom-menu-item:hover {
+  background-color: rgba(100, 216, 203, 0.05);
+}
+
+.menu-icon {
+  margin-right: 12px;
+  color: rgba(139, 233, 253, 0.7);
+}
+
+.menu-text {
+  font-size: 0.95rem;
+  font-weight: 500;
+}
+
+/* Custom active item styling to ensure readability */
+.custom-menu-item-active {
+  background-color: #333333 !important;
+  border-left: 3px solid #8BE9FD;
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
+  padding-left: 13px; /* Compensate for the border */
+}
+
+.custom-menu-item-active .menu-icon {
+  color: #8BE9FD;
+}
+
+.custom-menu-item-active .menu-text {
+  color: #FFFFFF;
+  font-weight: 700;
+}
+
+.drawer-list {
+  background-color: #1E1E1E !important;
+  padding: 8px;
+}
+
+.drawer-header {
+  border-bottom: 1px solid rgba(139, 233, 253, 0.1);
+}
+
+.drawer-header :deep(.v-list-item-title) {
+  color: #8BE9FD !important;
+  font-weight: 600;
+}
+
+.drawer-header :deep(.v-list-item-subtitle) {
+  color: rgba(255, 255, 255, 0.7) !important;
+}
+
+.drawer-divider {
+  border-color: rgba(139, 233, 253, 0.1) !important;
+}
+
+.drawer-item {
+  margin-bottom: 4px;
+  transition: all 0.3s;
+}
+
+.drawer-item :deep(.v-list-item__content) {
+  color: #F8F8F2 !important;
+}
+
+.drawer-item :deep(.v-icon) {
+  color: rgba(139, 233, 253, 0.7) !important;
+}
+
+.drawer-item-active {
+  background-color: #1A1A1A !important;
+  border-left: 3px solid #8BE9FD;
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(139, 233, 253, 0.3);
+  position: relative;
+  z-index: 1;
+  color: white !important;
+}
+
+.drawer-item-active :deep(.v-list-item__content) {
+  color: #FFFFFF !important;
+  font-weight: 700;
+}
+
+.drawer-item-active :deep(.v-list-item-title) {
+  color: #FFFFFF !important;
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
+}
+
+.drawer-item-active :deep(.v-icon) {
+  color: #8BE9FD !important;
+}
+
+.drawer-item:hover {
+  background-color: rgba(100, 216, 203, 0.05) !important;
+}
+
+.close-btn:hover {
+  color: #8BE9FD !important;
+}
 </style>
\ No newline at end of file
diff --git a/app/components/MetricCard.vue b/app/components/MetricCard.vue
index e417a499..62204820 100644
--- a/app/components/MetricCard.vue
+++ b/app/components/MetricCard.vue
@@ -1,9 +1,9 @@
 <template>
   <v-card class="metric-card h-100" :class="{ 'theme--dark': isDarkTheme }">
-    <div class="card-accent" :class="`bg-${color}`"></div>
+    <div class="card-accent"></div>
     <v-card-text class="d-flex flex-column h-100">
       <div class="d-flex align-center mb-4">
-        <div class="icon-container" :class="`bg-${color}-light`">
+        <div class="icon-container" :class="`icon-${color}`">
           <v-icon :color="color">{{ icon }}</v-icon>
         </div>
         <h3 class="text-subtitle-1 font-weight-medium ml-2 mb-0">{{ title }}</h3>
@@ -71,15 +71,19 @@ const trendIcon = computed(() => {
   overflow: hidden;
   transition: transform 0.3s, box-shadow 0.3s;
   border-radius: 12px;
+  background-color: rgba(18, 18, 18, 0.8) !important;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  backdrop-filter: blur(10px);
 }
 
 .metric-card:hover {
   transform: translateY(-4px);
-  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1) !important;
+  box-shadow: 0 8px 24px rgba(100, 216, 203, 0.15) !important;
+  border: 1px solid rgba(139, 233, 253, 0.2);
 }
 
 .theme--dark.metric-card:hover {
-  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3) !important;
+  box-shadow: 0 8px 24px rgba(100, 216, 203, 0.15) !important;
 }
 
 .card-accent {
@@ -88,6 +92,9 @@ const trendIcon = computed(() => {
   left: 0;
   right: 0;
   height: 4px;
+  background: linear-gradient(90deg, #8BE9FD, #64D8CB, #9C64D8) !important;
+  background-size: 200% 100%;
+  animation: shimmer 3s infinite;
 }
 
 .icon-container {
@@ -99,52 +106,34 @@ const trendIcon = computed(() => {
   border-radius: 8px;
 }
 
-.bg-primary {
-  background-color: var(--v-theme-primary);
+.icon-primary {
+  background-color: rgba(100, 216, 203, 0.15);
+  box-shadow: 0 0 15px rgba(100, 216, 203, 0.1);
 }
 
-.bg-primary-light {
-  background-color: rgba(63, 81, 181, 0.1);
+.icon-success {
+  background-color: rgba(80, 250, 123, 0.15);
+  box-shadow: 0 0 15px rgba(80, 250, 123, 0.1);
 }
 
-.bg-success {
-  background-color: var(--v-theme-success);
+.icon-info {
+  background-color: rgba(139, 233, 253, 0.15);
+  box-shadow: 0 0 15px rgba(139, 233, 253, 0.1);
 }
 
-.bg-success-light {
-  background-color: rgba(76, 175, 80, 0.1);
+.icon-warning {
+  background-color: rgba(255, 184, 108, 0.15);
+  box-shadow: 0 0 15px rgba(255, 184, 108, 0.1);
 }
 
-.bg-info {
-  background-color: var(--v-theme-info);
+.icon-error {
+  background-color: rgba(255, 82, 82, 0.15);
+  box-shadow: 0 0 15px rgba(255, 82, 82, 0.1);
 }
 
-.bg-info-light {
-  background-color: rgba(33, 150, 243, 0.1);
-}
-
-.bg-warning {
-  background-color: var(--v-theme-warning);
-}
-
-.bg-warning-light {
-  background-color: rgba(255, 167, 38, 0.1);
-}
-
-.bg-error {
-  background-color: var(--v-theme-error);
-}
-
-.bg-error-light {
-  background-color: rgba(239, 83, 80, 0.1);
-}
-
-.bg-accent {
-  background-color: var(--v-theme-accent);
-}
-
-.bg-accent-light {
-  background-color: rgba(83, 109, 254, 0.1);
+.icon-accent {
+  background-color: rgba(156, 100, 216, 0.15);
+  box-shadow: 0 0 15px rgba(156, 100, 216, 0.1);
 }
 
 .trend-indicator {
@@ -155,34 +144,32 @@ const trendIcon = computed(() => {
 }
 
 .trend-up {
-  color: var(--v-theme-success);
+  color: #50FA7B;
 }
 
 .trend-down {
-  color: var(--v-theme-error);
-}
-
-.theme--dark .bg-primary-light {
-  background-color: rgba(92, 107, 192, 0.2);
-}
-
-.theme--dark .bg-success-light {
-  background-color: rgba(102, 187, 106, 0.2);
+  color: #FF5252;
 }
 
-.theme--dark .bg-info-light {
-  background-color: rgba(66, 165, 245, 0.2);
+@keyframes shimmer {
+  0% { background-position: 0% 0; }
+  100% { background-position: 200% 0; }
 }
 
-.theme--dark .bg-warning-light {
-  background-color: rgba(255, 167, 38, 0.2);
+.text-h4 {
+  background: linear-gradient(90deg, #8BE9FD, #64D8CB, #9C64D8);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  color: transparent;
+  font-weight: 700 !important;
 }
 
-.theme--dark .bg-error-light {
-  background-color: rgba(239, 83, 80, 0.2);
+.text-subtitle-1 {
+  color: #8BE9FD !important;
 }
 
-.theme--dark .bg-accent-light {
-  background-color: rgba(124, 77, 255, 0.2);
+.text-caption {
+  color: rgba(255, 255, 255, 0.7) !important;
 }
 </style>
\ No newline at end of file
diff --git a/app/components/MetricsViewer.vue b/app/components/MetricsViewer.vue
index 3497a02f..b4ef1001 100644
--- a/app/components/MetricsViewer.vue
+++ b/app/components/MetricsViewer.vue
@@ -1,138 +1,92 @@
 <template>
   <div>
     <div class="tiles-container">      
-      <!-- Acceptance Rate Tile -->  
-      <!--changed on 2024/11/22 to reorder cards, so the accepance rate by counts are be more focused-->
-      <v-card elevation="4" color="white" variant="elevated" class="mx-auto my-3" style="width: 300px; height: 175px;">
-        <v-card-item>
-          <div class="tiles-text">
-            <div class="spacing-25"/>
-            <v-tooltip location="bottom start" open-on-hover open-delay="200" close-delay="200">
-              <template #activator="{ props }">
-                <div v-bind="props" class="text-h6 mb-1">Acceptance Rate (by count)</div>
-              </template>
-              <v-card class="pa-2" style="background-color: #f0f0f0; max-width: 350px;">
-                  <span class="text-caption" style="font-size: 10px !important;">This metric represents the ratio of accepted suggestions to the total suggestions made by GitHub Copilot. This rate indicates the relevance and usefulness of Copilot's suggestions based on the number of prompts, but should be used with caution as developers use Copilot in various ways (research, confirm, verify, etc., not always "inject").</span>
-              </v-card>
-            </v-tooltip>
-            <div class="text-caption">
-              {{ dateRangeDescription }}
-            </div>
-            <p class="text-h4">{{ acceptanceRateAverageByCount.toFixed(2) }}%</p>
-          </div>
-        </v-card-item>
-      </v-card>
-
-      <v-card elevation="4" color="white" variant="elevated" class="mx-auto my-3" style="width: 300px; height: 175px;">
-        <v-card-item>
-          <div class="tiles-text">
-            <div class="spacing-10"/>
-            <v-tooltip location="bottom start" open-on-hover open-delay="200" close-delay="200">
-              <template #activator="{ props }">
-                <div v-bind="props" class="text-h6 mb-1">Total count of Suggestions (Prompts)</div>
-              </template>
-              <v-card class="pa-2" style="background-color: #f0f0f0; max-width: 350px;">
-                <span class="text-caption" style="font-size: 10px !important;">This chart illustrates the total number of code suggestions made by GitHub Copilot. It offers a view of the tool's activity and its engagement with users over time.</span>
-              </v-card>
-            </v-tooltip>
-              <div class="text-caption">
-              {{ dateRangeDescription }}
-            </div>
-            <p class="text-h4">{{ cumulativeNumberSuggestions }}</p>
-          </div>
-        </v-card-item>
-      </v-card>
-
-      <v-card elevation="4" color="white" variant="elevated" class="mx-auto my-3" style="width: 300px; height: 175px;">
-          <v-card-item>
-            <div class="spacing-25"/>
-            <div class="tiles-text">
-              <v-tooltip location="bottom start" open-on-hover open-delay="200" close-delay="200">
-                <template #activator="{ props }">
-                  <div v-bind="props" class="text-h6 mb-1">Acceptance Rate (by lines)</div>
-                </template>
-                <v-card class="pa-2" style="background-color: #f0f0f0; max-width: 350px;">
-                  <span class="text-caption" style="font-size: 10px !important;">This metric represents the ratio of accepted lines of code to the total lines suggested by GitHub Copilot. This rate indicates the relevance and usefulness of Copilot's suggestions based on the volume of code, but should be used with caution as developers use Copilot in various ways (research, confirm, verify, etc., not always "inject").</span>
-                </v-card>
-              </v-tooltip>
-              <div class="text-caption">
-                {{ dateRangeDescription }}
-              </div>
-              <p class="text-h4">{{ acceptanceRateAverageByLines.toFixed(2) }}%</p>
-          </div>
-        </v-card-item>
-      </v-card>
-
-      <v-card elevation="4" color="white" variant="elevated" class="mx-auto my-3" style="width: 300px; height: 175px;">
-        <v-card-item>
-          <div class="tiles-text">
-            <div class="spacing-10"/>
-            <v-tooltip location="bottom start" open-on-hover open-delay="200" close-delay="200">
-              <template #activator="{ props }">
-                <div v-bind="props" class="text-h6 mb-1">Total Lines of code Suggested</div>
-              </template>
-              <v-card class="pa-2" style="background-color: #f0f0f0; max-width: 350px;">
-                <span class="text-caption" style="font-size: 10px !important;">Showcases the total number of lines of code suggested by GitHub Copilot. This gives an idea of the volume of code generation and assistance provided.</span>
-              </v-card>
-            </v-tooltip>
-            <div class="text-caption">
-              {{ dateRangeDescription }}
-            </div>
-            <p class="text-h4">{{ totalLinesSuggested }}</p>
-          </div>
-        </v-card-item>
-      </v-card>
+      <MetricCard
+        title="Acceptance Rate (by count)"
+        :value="`${acceptanceRateAverageByCount.toFixed(2)}%`"
+        description="Ratio of accepted suggestions to total suggestions made by GitHub Copilot"
+        icon="mdi-check-circle-outline"
+        color="success"
+        :is-dark-theme="isDarkTheme"
+      />
+      
+      <MetricCard
+        title="Total Suggestions"
+        :value="cumulativeNumberSuggestions.toLocaleString()"
+        description="Total number of code suggestions made by GitHub Copilot"
+        icon="mdi-lightbulb-outline"
+        color="primary"
+        :is-dark-theme="isDarkTheme"
+      />
+      
+      <MetricCard
+        title="Acceptance Rate (by lines)"
+        :value="`${acceptanceRateAverageByLines.toFixed(2)}%`"
+        description="Ratio of accepted lines of code to total lines suggested"
+        icon="mdi-file-check-outline"
+        color="info"
+        :is-dark-theme="isDarkTheme"
+      />
+      
+      <MetricCard
+        title="Total Lines Suggested"
+        :value="totalLinesSuggested.toLocaleString()"
+        description="Total number of lines of code suggested by GitHub Copilot"
+        icon="mdi-code-braces"
+        color="accent"
+        :is-dark-theme="isDarkTheme"
+      />
     </div>
 
     <v-main class="p-1" style="min-height: 300px;">
 
-      <v-container style="min-height: 300px;" class="px-4 elevation-2">
+      <v-container style="min-height: 300px;" class="px-4 elevation-2 chart-container">
       <v-tooltip location="bottom start" open-on-hover open-delay="200" close-delay="200">
         <template #activator="{ props }">
-          <h2 v-bind="props">Acceptance rate by count (%)</h2>
+          <h2 v-bind="props" class="chart-title">Acceptance rate by count (%)</h2>
         </template>
-        <v-card class="pa-2" style="background-color: #f0f0f0; max-width: 350px;">
-          <span class="text-caption" style="font-size: 10px !important;">This metric represents the ratio of accepted suggestions to the total suggestions made by GitHub Copilot. This rate indicates the relevance and usefulness of Copilot's suggestions based on the number of prompts, but should be used with caution as developers use Copilot in various ways (research, confirm, verify, etc., not always "inject").</span>
+        <v-card class="tooltip-card pa-3">
+          <span class="tooltip-text">This metric represents the ratio of accepted suggestions to the total suggestions made by GitHub Copilot. This rate indicates the relevance and usefulness of Copilot's suggestions based on the number of prompts, but should be used with caution as developers use Copilot in various ways (research, confirm, verify, etc., not always "inject").</span>
         </v-card>
       </v-tooltip>
       <Bar :data="acceptanceRateByCountChartData" :options="chartOptions" />
 
       <v-tooltip location="bottom start" open-on-hover open-delay="200" close-delay="200">
         <template #activator="{ props }">
-          <h2 v-bind="props" class="mb-1">Total Suggestions Count | Total Acceptances Count</h2>
+          <h2 v-bind="props" class="chart-title">Total Suggestions Count | Total Acceptances Count</h2>
         </template>
-        <v-card class="pa-2" style="background-color: #f0f0f0; max-width: 350px;">
-          <span class="text-caption" style="font-size: 10px !important;">This visualization focuses on the total number of suggestions accepted by users.</span>
+        <v-card class="tooltip-card pa-3">
+          <span class="tooltip-text">This visualization focuses on the total number of suggestions accepted by users.</span>
         </v-card>
       </v-tooltip>
       <Line :data="totalSuggestionsAndAcceptanceChartData" :options="chartOptions" />
 
       <v-tooltip location="bottom start" open-on-hover open-delay="200" close-delay="200">
         <template #activator="{ props }">
-          <h2 v-bind="props">Acceptance rate by lines (%)</h2>
+          <h2 v-bind="props" class="chart-title">Acceptance rate by lines (%)</h2>
         </template>
-        <v-card class="pa-2" style="background-color: #f0f0f0; max-width: 350px;">
-          <span class="text-caption" style="font-size: 10px !important;">This metric represents the ratio of accepted lines of code to the total lines suggested by GitHub Copilot. This rate indicates the relevance and usefulness of Copilot's suggestions based on the volume of code, but should be used with caution as developers use Copilot in various ways (research, confirm, verify, etc., not always "inject").</span>
+        <v-card class="tooltip-card pa-3">
+          <span class="tooltip-text">This metric represents the ratio of accepted lines of code to the total lines suggested by GitHub Copilot. This rate indicates the relevance and usefulness of Copilot's suggestions based on the volume of code, but should be used with caution as developers use Copilot in various ways (research, confirm, verify, etc., not always "inject").</span>
         </v-card>
       </v-tooltip>
       <Bar :data="acceptanceRateByLinesChartData" :options="chartOptions" />
 
       <v-tooltip location="bottom start" open-on-hover open-delay="200" close-delay="200">
         <template #activator="{ props }">
-          <h2 v-bind="props" class="mb-1">Total Lines Suggested | Total Lines Accepted</h2>
+          <h2 v-bind="props" class="chart-title">Total Lines Suggested | Total Lines Accepted</h2>
         </template>
-        <v-card class="pa-2" style="background-color: #f0f0f0; max-width: 350px;">
-          <span class="text-caption" style="font-size: 10px !important;">As the name suggests, the total lines of code accepted by users (full acceptances) offering insights into how much of the suggested code is actually being utilized and incorporated into the codebase.</span>
+        <v-card class="tooltip-card pa-3">
+          <span class="tooltip-text">As the name suggests, the total lines of code accepted by users (full acceptances) offering insights into how much of the suggested code is actually being utilized and incorporated into the codebase.</span>
         </v-card>
       </v-tooltip>
       <Line :data="chartData" :options="chartOptions" />
 
       <v-tooltip location="bottom start" open-on-hover open-delay="200" close-delay="200">
         <template #activator="{ props }">
-          <h2 v-bind="props" class="mb-1">Total Active Users</h2>
+          <h2 v-bind="props" class="chart-title">Total Active Users</h2>
         </template>
-        <v-card class="pa-2" style="background-color: #f0f0f0; max-width: 350px;">
-          <span class="text-caption" style="font-size: 10px !important;">Represents the number of active users engaging with GitHub Copilot. This helps in understanding the user base growth and adoption rate.</span>
+        <v-card class="tooltip-card pa-3">
+          <span class="tooltip-text">Represents the number of active users engaging with GitHub Copilot. This helps in understanding the user base growth and adoption rate.</span>
         </v-card>
       </v-tooltip>
       <Bar :data="totalActiveUsersChartData" :options="totalActiveUsersChartOptions" />
@@ -159,6 +113,7 @@ import {
 } from 'chart.js'
 
 import { Line, Bar } from 'vue-chartjs'
+import MetricCard from './MetricCard.vue'
 
 ChartJS.register(
   ArcElement, 
@@ -177,9 +132,9 @@ export default defineComponent({
   name: 'MetricsViewer',
   components: {
     Line,
-    Bar
-  }
-  ,
+    Bar,
+    MetricCard
+  },
   props: {
         metrics: {
             type: Array as PropType<Metrics[]>,
@@ -188,6 +143,10 @@ export default defineComponent({
         dateRangeDescription: {
             type: String,
             default: 'Over the last 28 days'
+        },
+        isDarkTheme: {
+            type: Boolean,
+            default: false
         }
     },
   setup(props) {
@@ -228,6 +187,38 @@ export default defineComponent({
           bottom: 40
         }
       },
+      plugins: {
+        legend: {
+          labels: {
+            color: '#F8F8F2'  // Light text color for better readability
+          }
+        },
+        tooltip: {
+          backgroundColor: 'rgba(30, 30, 30, 0.8)',
+          titleColor: '#8BE9FD',
+          bodyColor: '#F8F8F2',
+          borderColor: 'rgba(100, 216, 203, 0.3)',
+          borderWidth: 1
+        }
+      },
+      scales: {
+        x: {
+          ticks: {
+            color: '#BFBFBF'  // Light gray for better readability
+          },
+          grid: {
+            color: 'rgba(255, 255, 255, 0.1)'
+          }
+        },
+        y: {
+          ticks: {
+            color: '#BFBFBF'  // Light gray for better readability
+          },
+          grid: {
+            color: 'rgba(255, 255, 255, 0.1)'
+          }
+        }
+      }
     };
 
     const totalActiveUsersChartOptions = {
@@ -237,10 +228,36 @@ export default defineComponent({
         y: {
           beginAtZero: true,
           ticks: {
-            stepSize: 1
+            stepSize: 1,
+            color: '#BFBFBF'  // Light gray for better readability
+          },
+          grid: {
+            color: 'rgba(255, 255, 255, 0.1)'
+          }
+        },
+        x: {
+          ticks: {
+            color: '#BFBFBF'  // Light gray for better readability
+          },
+          grid: {
+            color: 'rgba(255, 255, 255, 0.1)'
           }
         }
       },
+      plugins: {
+        legend: {
+          labels: {
+            color: '#F8F8F2'  // Light text color for better readability
+          }
+        },
+        tooltip: {
+          backgroundColor: 'rgba(30, 30, 30, 0.8)',
+          titleColor: '#8BE9FD',
+          bodyColor: '#F8F8F2',
+          borderColor: 'rgba(100, 216, 203, 0.3)',
+          borderWidth: 1
+        }
+      },
       layout: {
         padding: {
           left: 50,
@@ -277,17 +294,15 @@ export default defineComponent({
         {
           label: 'Total Suggestions',
           data: cumulativeSuggestionsData,
-          backgroundColor: 'rgba(75, 192, 192, 0.2)',
-          borderColor: 'rgba(75, 192, 192, 1)'
-
+          backgroundColor: 'rgba(139, 233, 253, 0.3)',  // Cyan with transparency
+          borderColor: '#8BE9FD'  // Solid cyan
         },
         {
           label: 'Total Acceptance',
           data: cumulativeAcceptancesData,
-          backgroundColor: 'rgba(153, 102, 255, 0.2)',
-          borderColor: 'rgba(153, 102, 255, 1)'
+          backgroundColor: 'rgba(156, 100, 216, 0.3)',  // Purple with transparency
+          borderColor: '#9C64D8'  // Solid purple
         },
-        
       ]
     };
 
@@ -304,15 +319,14 @@ export default defineComponent({
         {
           label: 'Total Lines Suggested',
           data: data.map((m: Metrics) => m.total_lines_suggested),
-          backgroundColor: 'rgba(75, 192, 192, 0.2)',
-          borderColor: 'rgba(75, 192, 192, 1)'
-
+          backgroundColor: 'rgba(100, 216, 203, 0.3)',  // Teal with transparency
+          borderColor: '#64D8CB'  // Solid teal
         },
         {
           label: 'Total Lines Accepted',
           data: cumulativeLOCAcceptedData,
-          backgroundColor: 'rgba(153, 102, 255, 0.2)',
-          borderColor: 'rgba(153, 102, 255, 1)'
+          backgroundColor: 'rgba(156, 100, 216, 0.3)',  // Purple with transparency
+          borderColor: '#9C64D8'  // Solid purple
         }
       ]
     };
@@ -331,12 +345,13 @@ export default defineComponent({
       labels: data.map((m: Metrics) => m.day),
       datasets: [
         {
-          type: 'line', // This makes the dataset a line in the chart
+          type: 'line',
           label: 'Acceptance Rate by Lines',
           data: acceptanceRatesByLines,
-          backgroundColor: 'rgba(173, 216, 230, 0.2)', // light blue
-          borderColor: 'rgba(173, 216, 230, 1)', // darker blue
-          fill: false // This makes the area under the line not filled
+          backgroundColor: 'rgba(139, 233, 253, 0.3)',  // Cyan with transparency
+          borderColor: '#8BE9FD',  // Solid cyan
+          fill: false,
+          tension: 0.4  // Smooth curve
         }
       ]
     };
@@ -345,12 +360,13 @@ export default defineComponent({
       labels: data.map((m: Metrics) => m.day),
       datasets: [
         {
-          type: 'line', // This makes the dataset a line in the chart
+          type: 'line',
           label: 'Acceptance Rate by Count',
           data: acceptanceRatesByCount,
-          backgroundColor: 'rgba(173, 216, 230, 0.2)', // light blue
-          borderColor: 'rgba(173, 216, 230, 1)', // darker blue
-          fill: false // This makes the area under the line not filled
+          backgroundColor: 'rgba(100, 216, 203, 0.3)',  // Teal with transparency
+          borderColor: '#64D8CB',  // Solid teal
+          fill: false,
+          tension: 0.4  // Smooth curve
         }
       ]
     };
@@ -376,8 +392,8 @@ export default defineComponent({
         {
           label: 'Total Active Users',
           data: data.map((m: Metrics) => m.total_active_users),
-          backgroundColor: 'rgba(0, 0, 139, 0.2)', // dark blue with 20% opacity
-          borderColor: 'rgba(255, 99, 132, 1)'
+          backgroundColor: 'rgba(156, 100, 216, 0.3)',  // Purple with transparency
+          borderColor: '#9C64D8'  // Solid purple
         }
       ]
     };
@@ -406,6 +422,47 @@ export default defineComponent({
       }
     }
   },
-  
 });
 </script>
+
+<style scoped>
+.chart-title {
+  color: #8BE9FD;
+  margin-bottom: 16px;
+  font-weight: 700;
+  font-size: 1.25rem;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+  position: relative;
+  z-index: 2;
+}
+
+.tooltip-card {
+  background-color: rgba(30, 30, 30, 0.95) !important;
+  border: 1px solid rgba(139, 233, 253, 0.3);
+  max-width: 350px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
+.tooltip-text {
+  color: #F8F8F2 !important;
+  font-size: 0.875rem !important;
+  line-height: 1.5;
+}
+
+.chart-container {
+  background-color: rgba(18, 18, 18, 0.8) !important;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  border-radius: 12px;
+  padding: 24px;
+  margin-bottom: 32px;
+}
+
+/* Ensure chart labels are visible */
+:deep(.chartjs-render-monitor) {
+  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
+}
+
+:deep(canvas) {
+  margin: 16px 0 32px;
+}
+</style>
\ No newline at end of file
diff --git a/app/components/StatsSummary.vue b/app/components/StatsSummary.vue
index c963a25e..ac9e5463 100644
--- a/app/components/StatsSummary.vue
+++ b/app/components/StatsSummary.vue
@@ -1,21 +1,20 @@
 <template>
   <v-row class="stats-summary mb-6">
     <v-col v-for="(stat, index) in stats" :key="index" cols="12" sm="6" md="3">
-      <v-card class="stat-card h-100" :class="{ 'theme--dark': isDarkTheme }">
-        <v-card-text class="d-flex flex-column align-center justify-center text-center pa-4">
-          <div class="stat-icon mb-4" :class="`bg-${stat.color}`">
-            <v-icon size="large" :color="stat.color">{{ stat.icon }}</v-icon>
-          </div>
-          <h3 class="text-h4 font-weight-bold mb-1">{{ stat.value }}</h3>
-          <p class="text-subtitle-2 text-medium-emphasis mb-0">{{ stat.label }}</p>
-        </v-card-text>
-      </v-card>
+      <MetricCard
+        :title="stat.label"
+        :value="stat.value"
+        :icon="stat.icon"
+        :color="stat.color"
+        :is-dark-theme="isDarkTheme"
+      />
     </v-col>
   </v-row>
 </template>
 
 <script setup lang="ts">
 import type { Metrics } from '@/model/Metrics';
+import MetricCard from './MetricCard.vue';
 
 const props = defineProps({
   metrics: {
@@ -60,25 +59,29 @@ const stats = computed(() => {
       label: 'Total Suggestions',
       value: totalSuggestions.toLocaleString(),
       icon: 'mdi-lightbulb-outline',
-      color: 'primary'
+      color: 'primary',
+      description: 'Total number of suggestions offered by Copilot'
     },
     {
       label: 'Acceptance Rate',
       value: `${acceptanceRate}%`,
       icon: 'mdi-check-circle-outline',
-      color: 'success'
+      color: 'success',
+      description: 'Percentage of suggestions accepted by users'
     },
     {
       label: 'Active Users',
       value: totalUsers.toLocaleString(),
       icon: 'mdi-account-group',
-      color: 'info'
+      color: 'info',
+      description: 'Number of users actively using Copilot'
     },
     {
       label: 'Avg. Suggestions/User',
       value: avgSuggestionsPerUser.toLocaleString(),
       icon: 'mdi-chart-line',
-      color: 'accent'
+      color: 'accent',
+      description: 'Average number of suggestions per active user'
     }
   ];
 });
@@ -88,60 +91,4 @@ const stats = computed(() => {
 .stats-summary {
   margin-top: 16px;
 }
-
-.stat-card {
-  transition: transform 0.3s, box-shadow 0.3s;
-  border-radius: 12px;
-  height: 100%;
-}
-
-.stat-card:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1) !important;
-}
-
-.theme--dark.stat-card:hover {
-  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3) !important;
-}
-
-.stat-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 64px;
-  height: 64px;
-  border-radius: 50%;
-}
-
-.bg-primary {
-  background-color: rgba(63, 81, 181, 0.1);
-}
-
-.bg-success {
-  background-color: rgba(76, 175, 80, 0.1);
-}
-
-.bg-info {
-  background-color: rgba(33, 150, 243, 0.1);
-}
-
-.bg-accent {
-  background-color: rgba(83, 109, 254, 0.1);
-}
-
-.theme--dark .bg-primary {
-  background-color: rgba(92, 107, 192, 0.2);
-}
-
-.theme--dark .bg-success {
-  background-color: rgba(102, 187, 106, 0.2);
-}
-
-.theme--dark .bg-info {
-  background-color: rgba(66, 165, 245, 0.2);
-}
-
-.theme--dark .bg-accent {
-  background-color: rgba(124, 77, 255, 0.2);
-}
 </style>
\ No newline at end of file
diff --git a/app/components/ThemeToggle.vue b/app/components/ThemeToggle.vue
index 9acb8879..821890c9 100644
--- a/app/components/ThemeToggle.vue
+++ b/app/components/ThemeToggle.vue
@@ -72,10 +72,12 @@ function toggleTheme() {
 }
 
 .sun {
-  color: #FFC107;
+  color: #8BE9FD;
+  filter: drop-shadow(0 0 5px rgba(139, 233, 253, 0.5));
 }
 
 .moon {
-  color: #E0E0E0;
+  color: #9C64D8;
+  filter: drop-shadow(0 0 5px rgba(156, 100, 216, 0.5));
 }
 </style>
\ No newline at end of file
diff --git a/app/components/WelcomeBanner.vue b/app/components/WelcomeBanner.vue
index 0ecb2ffb..de4cf21d 100644
--- a/app/components/WelcomeBanner.vue
+++ b/app/components/WelcomeBanner.vue
@@ -9,27 +9,7 @@
           <p class="text-body-2 mb-6">
             Track your organization's GitHub Copilot usage, analyze trends, and optimize your development workflow.
           </p>
-          <div class="d-flex flex-wrap gap-3">
-            <v-btn 
-              color="primary" 
-              variant="elevated" 
-              size="large"
-              prepend-icon="mdi-chart-timeline-variant"
-              @click="scrollToMetrics"
-            >
-              View Metrics
-            </v-btn>
-            <v-btn 
-              color="secondary" 
-              variant="tonal" 
-              size="large"
-              prepend-icon="mdi-information-outline"
-              href="https://github.com/github-copilot-resources/copilot-metrics-viewer" 
-              target="_blank"
-            >
-              Learn More
-            </v-btn>
-          </div>
+          <!-- Buttons removed -->
         </div>
         <div class="banner-image d-none d-md-flex">
           <v-img
@@ -89,12 +69,14 @@ function scrollToMetrics() {
   position: relative;
   overflow: hidden;
   border-radius: 16px;
-  background: linear-gradient(135deg, #3F51B5 0%, #5C6BC0 100%);
+  background: linear-gradient(135deg, #64D8CB 0%, #9C64D8 100%);
   color: white;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+  border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 .theme--dark.welcome-banner {
-  background: linear-gradient(135deg, #303F9F 0%, #3F51B5 100%);
+  background: linear-gradient(135deg, #64D8CB 0%, #9C64D8 100%);
 }
 
 .banner-overlay {
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 6c436728..6f27b537 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -37,7 +37,7 @@ export default defineNuxtConfig({
     },
   },
 
-  css: ['~/assets/global.css'],
+  css: ['~/assets/global.css', '~/assets/background.css'],
   modules: ['@nuxt/fonts', 'vuetify-nuxt-module', '@nuxt/eslint', 'nuxt-auth-utils'],
 
   vuetify: {
diff --git a/vuetify.config.ts b/vuetify.config.ts
index 99a96e5f..6be5ceb0 100644
--- a/vuetify.config.ts
+++ b/vuetify.config.ts
@@ -2,40 +2,44 @@ import { defineVuetifyConfiguration } from 'vuetify-nuxt-module/custom-configura
 
 export default defineVuetifyConfiguration({
   theme: {
-    defaultTheme: 'light',
+    defaultTheme: 'dark',
     themes: {
       light: {
         dark: false,
         colors: {
-          primary: '#3F51B5',
-          secondary: '#7986CB',
-          accent: '#536DFE',
+          primary: '#64D8CB',
+          secondary: '#8BE9FD',
+          accent: '#9C64D8',
           error: '#FF5252',
-          info: '#2196F3',
-          success: '#4CAF50',
-          warning: '#FFA726',
+          info: '#8BE9FD',
+          success: '#50FA7B',
+          warning: '#FFB86C',
           background: '#F5F7FA',
           surface: '#FFFFFF',
           'surface-variant': '#ECEFF1',
           'on-surface-variant': '#424242',
-          'primary-darken-1': '#303F9F',
+          'primary-darken-1': '#26A69A',
+          'accent-darken-1': '#7B1FA2',
+          'secondary-darken-1': '#4DD0E1',
         },
       },
       dark: {
         dark: true,
         colors: {
-          primary: '#5C6BC0',
-          secondary: '#7986CB',
-          accent: '#7C4DFF',
-          error: '#EF5350',
-          info: '#42A5F5',
-          success: '#66BB6A',
-          warning: '#FFA726',
+          primary: '#64D8CB',
+          secondary: '#8BE9FD',
+          accent: '#9C64D8',
+          error: '#FF5252',
+          info: '#8BE9FD',
+          success: '#50FA7B',
+          warning: '#FFB86C',
           background: '#121212',
           surface: '#1E1E1E',
           'surface-variant': '#2D2D2D',
           'on-surface-variant': '#EEEEEE',
-          'primary-darken-1': '#3949AB',
+          'primary-darken-1': '#26A69A',
+          'accent-darken-1': '#7B1FA2',
+          'secondary-darken-1': '#4DD0E1',
         },
       },
     },

From aa9d830aafd551a38776a86a33c5d4069f58048e Mon Sep 17 00:00:00 2001
From: PseudoCoding <dphoude@gmail.com>
Date: Sat, 19 Jul 2025 09:13:20 -0400
Subject: [PATCH 05/13] More

---
 app/assets/date-range-fix.css          |  33 +++
 app/components/AgentModeViewer.vue     | 302 +++++++++++--------------
 app/components/CopilotChatViewer.vue   | 121 +++++-----
 app/components/DashboardLayout.vue     |  32 ++-
 app/components/SeatsAnalysisViewer.vue | 213 +++++++++--------
 nuxt.config.ts                         |   2 +-
 6 files changed, 368 insertions(+), 335 deletions(-)
 create mode 100644 app/assets/date-range-fix.css

diff --git a/app/assets/date-range-fix.css b/app/assets/date-range-fix.css
new file mode 100644
index 00000000..63e1ed7b
--- /dev/null
+++ b/app/assets/date-range-fix.css
@@ -0,0 +1,33 @@
+/* Override styles for date range text */
+.section-heading .date-range-container {
+  display: inline-block !important;
+  background-color: #000000 !important;
+  border-radius: 4px !important;
+  border: 2px solid #8BE9FD !important;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.7) !important;
+  padding: 0 !important;
+  margin-left: 8px !important;
+  overflow: visible !important;
+}
+
+.section-heading .date-range-text {
+  display: inline-block !important;
+  background-color: #000000 !important;
+  color: #FFFFFF !important;
+  font-weight: 700 !important;
+  padding: 6px 12px !important;
+  border-radius: 0 !important;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
+  font-size: 0.9rem !important;
+  letter-spacing: 0.5px !important;
+  opacity: 1 !important;
+}
+
+/* Override any global chip styles */
+.v-chip.date-range-chip {
+  background-color: #000000 !important;
+  color: #FFFFFF !important;
+  font-weight: 700 !important;
+  border: 2px solid #8BE9FD !important;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.7) !important;
+}
\ No newline at end of file
diff --git a/app/components/AgentModeViewer.vue b/app/components/AgentModeViewer.vue
index 2e47979c..68476b5f 100644
--- a/app/components/AgentModeViewer.vue
+++ b/app/components/AgentModeViewer.vue
@@ -1,162 +1,68 @@
 <template>
     <div class="github-com-container">
-        <v-main class="p-1" style="min-height: 300px;">
-            <v-container style="min-height: 300px;" class="px-4 elevation-2">
-                <!-- Loading state -->
-                <div v-if="loading" class="d-flex justify-center align-center" style="min-height: 300px;">
-                    <v-progress-circular indeterminate size="64" color="primary" />
-                </div>
-
-                <!-- Error state -->
-                <div v-else-if="error" class="d-flex justify-center align-center" style="min-height: 300px;">
-                    <v-alert type="error" class="mb-4">
-                        <v-alert-title>Error Loading Statistics</v-alert-title>
-                        {{ error }}
-                    </v-alert>
-                </div>
-
-                <!-- Main content -->
-                <div v-else>
-                    <!-- Agent Mode Statistics Title -->
-                    <v-tooltip location="bottom start" open-on-hover open-delay="200" close-delay="200">
-                        <template #activator="{ props }">
-                            <h2 v-bind="props" class="mb-4">Copilot Statistics</h2>
-                        </template>
-                        <v-card class="pa-2" style="background-color: #f0f0f0; max-width: 400px;">
-                            <span class="text-caption" style="font-size: 10px !important;">
-                                This section displays statistics for different GitHub.com Copilot features and the
-                                models used by users.
-                            </span>
-                        </v-card>
-                    </v-tooltip>
-
-                    <!-- Date Range Information -->
-                    <v-card v-if="dateRangeDescription" flat class="pa-3 mb-4" color="blue-grey lighten-5">
-                        <div class="text-body-2 text-center">
-                            <v-icon left small>mdi-calendar-range</v-icon>
-                            {{ dateRangeDescription }}
-                        </div>
-                    </v-card>
-
-                    <!-- Agent Mode Overview Cards -->
-                    <v-row class="mb-4">
-                        <v-col cols="12" md="6" lg="3">
-                            <v-card elevation="4" color="blue lighten-4">
-                                <v-card-title class="text-h6">
-                                    <v-tooltip location="bottom start" open-on-hover open-delay="200" close-delay="200">
-                                        <template #activator="{ props }">
-                                            <span v-bind="props">IDE Code Completions</span>
-                                        </template>
-                                        <v-card class="pa-2" style="background-color: #f0f0f0; max-width: 350px;">
-                                            <span class="text-caption" style="font-size: 10px !important;">
-                                                Statistics for code completions in integrated development environments.
-                                            </span>
-                                        </v-card>
-                                    </v-tooltip>
-                                </v-card-title>
-                                <v-card-text>
-                                    <div class="text-h4 mb-2">{{ stats.totalIdeCodeCompletionUsers }}</div>
-                                    <div class="text-caption">Total Users with Activity</div>
-                                    <div class="text-subtitle2 mt-2">{{ stats.totalIdeCodeCompletionModels }} Models
-                                        Used</div>
-                                </v-card-text>
-                            </v-card>
-                        </v-col>
-                        <v-col cols="12" md="6" lg="3">
-                            <v-card elevation="4" color="green lighten-4">
-                                <v-card-title class="text-h6">
-                                    <v-tooltip location="bottom start" open-on-hover open-delay="200" close-delay="200">
-                                        <template #activator="{ props }">
-                                            <span v-bind="props">IDE Chat</span>
-                                        </template>
-                                        <v-card class="pa-2" style="background-color: #f0f0f0; max-width: 350px;">
-                                            <span class="text-caption" style="font-size: 10px !important;">
-                                                Statistics for chat interactions in integrated development environments.
-                                            </span>
-                                        </v-card>
-                                    </v-tooltip>
-                                </v-card-title>
-                                <v-card-text>
-                                    <div class="text-h4 mb-2">{{ stats.totalIdeChatUsers }}</div>
-                                    <div class="text-caption">Total Users with Activity</div>
-                                    <div class="text-subtitle2 mt-2">{{ stats.totalIdeChatModels }} Models Used</div>
-                                </v-card-text>
-                            </v-card>
-                        </v-col>
-                        <v-col cols="12" md="6" lg="3">
-                            <v-card elevation="4" color="purple lighten-4">
-                                <v-card-title class="text-h6">
-                                    <v-tooltip location="bottom start" open-on-hover open-delay="200" close-delay="200">
-                                        <template #activator="{ props }">
-                                            <span v-bind="props">GitHub.com Chat</span>
-                                        </template>
-                                        <v-card class="pa-2" style="background-color: #f0f0f0; max-width: 350px;">
-                                            <span class="text-caption" style="font-size: 10px !important;">
-                                                Statistics for chat interactions on GitHub.com web interface.
-                                            </span>
-                                        </v-card>
-                                    </v-tooltip>
-                                </v-card-title>
-                                <v-card-text>
-                                    <div class="text-h4 mb-2">{{ stats.totalDotcomChatUsers }}</div>
-                                    <div class="text-caption">Total Users with Activity</div>
-                                    <div class="text-subtitle2 mt-2">{{ stats.totalDotcomChatModels }} Models Used</div>
-                                </v-card-text>
-                            </v-card>
-                        </v-col>
-                        <v-col cols="12" md="6" lg="3">
-                            <v-card elevation="4" color="orange lighten-4">
-                                <v-card-title class="text-h6">
-                                    <v-tooltip location="bottom start" open-on-hover open-delay="200" close-delay="200">
-                                        <template #activator="{ props }">
-                                            <span v-bind="props">GitHub.com PR Summaries</span>
-                                        </template>
-                                        <v-card class="pa-2" style="background-color: #f0f0f0; max-width: 350px;">
-                                            <span class="text-caption" style="font-size: 10px !important;">
-                                                Statistics for pull request summaries generated by Copilot on
-                                                GitHub.com.
-                                            </span>
-                                        </v-card>
-                                    </v-tooltip>
-                                </v-card-title>
-                                <v-card-text>
-                                    <div class="text-h4 mb-2">{{ stats.totalPRSummariesCreated }}</div>
-                                    <div class="text-caption">Total PR Summaries Created</div>
-                                    <div class="text-subtitle2 mt-2">{{ stats.totalDotcomPRModels }} Models Used</div>
-                                </v-card-text>
-                            </v-card>
-                        </v-col>
-                    </v-row>
+        <div v-if="loading" class="d-flex justify-center align-center" style="min-height: 300px;">
+            <v-progress-circular indeterminate size="64" color="primary" />
+        </div>
+
+        <div v-else-if="error" class="d-flex justify-center align-center" style="min-height: 300px;">
+            <v-alert type="error" class="mb-4">
+                <v-alert-title>Error Loading Statistics</v-alert-title>
+                {{ error }}
+            </v-alert>
+        </div>
+
+        <div v-else>
+            <!-- Agent Mode Overview Cards -->
+            <div class="tiles-container">
+                <MetricCard
+                    title="IDE Code Completions"
+                    :value="stats.totalIdeCodeCompletionUsers.toString()"
+                    description="Total Users with Activity"
+                    icon="mdi-code-braces"
+                    color="primary"
+                    :is-dark-theme="isDarkTheme"
+                />
+                
+                <MetricCard
+                    title="IDE Chat"
+                    :value="stats.totalIdeChatUsers.toString()"
+                    description="Total Users with Activity"
+                    icon="mdi-chat"
+                    color="success"
+                    :is-dark-theme="isDarkTheme"
+                />
+                
+                <MetricCard
+                    title="GitHub.com Chat"
+                    :value="stats.totalDotcomChatUsers.toString()"
+                    description="Total Users with Activity"
+                    icon="mdi-web"
+                    color="info"
+                    :is-dark-theme="isDarkTheme"
+                />
+                
+                <MetricCard
+                    title="GitHub.com PR Summaries"
+                    :value="stats.totalPRSummariesCreated.toString()"
+                    description="Total PR Summaries Created"
+                    icon="mdi-source-pull"
+                    color="accent"
+                    :is-dark-theme="isDarkTheme"
+                />
+            </div>
+            
+            <v-main class="p-1" style="min-height: 300px;">
+                <v-container style="min-height: 300px;" class="px-4 elevation-2 chart-container">
 
                     <!-- Agent Mode Statistics Chart -->
-                    <v-tooltip location="bottom start" open-on-hover open-delay="200" close-delay="200">
-                        <template #activator="{ props }">
-                            <h2 v-bind="props" class="mb-1">Copilot Feature Usage Over Time</h2>
-                        </template>
-                        <v-card class="pa-2" style="background-color: #f0f0f0; max-width: 400px;">
-                            <span class="text-caption" style="font-size: 10px !important;">
-                                This chart shows the usage of different Copilot features over time.
-                            </span>
-                        </v-card>
-                    </v-tooltip>
-                    <div class="chart-container">
+                    <h2 class="chart-title">Copilot Feature Usage Over Time</h2>
+                    <div class="chart-wrapper">
                         <LineChart v-if="stats.agentModeChartData.labels.length" :data="stats.agentModeChartData"
                             :options="chartOptions" />
                     </div>
 
                     <!-- Models Used Section -->
-                    <v-tooltip location="bottom start" open-on-hover open-delay="200" close-delay="200">
-                        <template #activator="{ props }">
-                            <h2 v-bind="props" class="mb-4 mt-6">Models Used by Users</h2>
-                        </template>
-                        <v-card class="pa-2" style="background-color: #f0f0f0; max-width: 400px;">
-                            <span class="text-caption" style="font-size: 10px !important;">
-                                This section shows detailed information about the AI models used across different
-                                GitHub.com Copilot
-                                features.
-                            </span>
-                        </v-card>
-                    </v-tooltip>
+                    <h2 class="chart-title">Models Used by Users</h2>
 
                     <!-- Models by Agent Mode -->
                     <v-expansion-panels class="mb-4">
@@ -206,24 +112,14 @@
                     </v-expansion-panels>
 
                     <!-- Model Usage Summary Chart -->
-                    <v-tooltip location="bottom start" open-on-hover open-delay="200" close-delay="200">
-                        <template #activator="{ props }">
-                            <h2 v-bind="props" class="mb-1">Model Usage Distribution</h2>
-                        </template>
-                        <v-card class="pa-2" style="background-color: #f0f0f0; max-width: 400px;">
-                            <span class="text-caption" style="font-size: 10px !important;">
-                                This chart shows the distribution of model usage across different GitHub.com Copilot
-                                features.
-                            </span>
-                        </v-card>
-                    </v-tooltip>
-                    <div class="chart-container">
+                    <h2 class="chart-title">Model Usage Distribution</h2>
+                    <div class="chart-wrapper">
                         <BarChart v-if="stats.modelUsageChartData.labels.length" :data="stats.modelUsageChartData"
                             :options="barChartOptions" />
                     </div>
-                </div>
-            </v-container>
-        </v-main>
+                </v-container>
+            </v-main>
+        </div>
     </div>
 </template>
 
@@ -233,6 +129,7 @@ import type { CopilotMetrics } from '@/model/Copilot_Metrics';
 import { Options } from '@/model/Options';
 import { useRoute } from 'vue-router';
 import { Line as LineChart, Bar as BarChart } from 'vue-chartjs';
+import MetricCard from './MetricCard.vue';
 import {
     Chart as ChartJS,
     CategoryScale,
@@ -338,6 +235,10 @@ export default defineComponent({
         dateRangeDescription: {
             type: String,
             default: ''
+        },
+        isDarkTheme: {
+            type: Boolean,
+            default: false
         }
     },
     setup(props) {
@@ -512,22 +413,73 @@ export default defineComponent({
     padding: 16px;
 }
 
-.v-card {
-    margin-bottom: 16px;
+.chart-title {
+  color: #8BE9FD;
+  font-weight: 700;
+  font-size: 1.5rem;
+  margin: 16px 0;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+  position: relative;
+  z-index: 2;
+}
+
+.chart-container {
+  background-color: rgba(18, 18, 18, 0.8) !important;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  border-radius: 12px;
+  padding: 24px;
+  margin-bottom: 32px;
+}
+
+.chart-wrapper {
+  margin-bottom: 32px;
+  position: relative;
+  height: 400px;
 }
 
 .v-expansion-panel {
-    margin-bottom: 8px;
+  margin-bottom: 8px;
+  background-color: rgba(18, 18, 18, 0.8) !important;
+  border: 1px solid rgba(255, 255, 255, 0.05);
 }
 
-.v-data-table {
-    margin-top: 16px;
+:deep(.v-expansion-panel-title) {
+  color: #8BE9FD !important;
 }
 
-/* Optimize chart rendering */
-.chart-container {
-    height: 400px;
-    width: 100%;
-    position: relative;
+:deep(.v-data-table) {
+  background-color: rgba(18, 18, 18, 0.8) !important;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+:deep(.v-data-table__thead) {
+  background-color: rgba(100, 216, 203, 0.1) !important;
+}
+
+:deep(.v-data-table__thead th) {
+  color: #8BE9FD !important;
+  font-weight: 600 !important;
+  font-size: 0.8rem !important;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+:deep(.v-data-table__tbody tr) {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+:deep(.v-data-table__tbody td) {
+  color: #F8F8F2 !important;
+  padding: 12px 16px;
+}
+
+:deep(.v-data-table__tbody tr:hover) {
+  background-color: rgba(100, 216, 203, 0.05) !important;
+}
+
+:deep(.chartjs-render-monitor) {
+  filter: drop-shadow(0 0 8px rgba(100, 216, 203, 0.2));
 }
 </style>
\ No newline at end of file
diff --git a/app/components/CopilotChatViewer.vue b/app/components/CopilotChatViewer.vue
index ebe4db9b..e3663c36 100644
--- a/app/components/CopilotChatViewer.vue
+++ b/app/components/CopilotChatViewer.vue
@@ -1,65 +1,35 @@
 <template>
     <div class="tiles-container">      
-        <v-card elevation="4" color="white" variant="elevated" class="mx-auto my-3" style="width: 300px; height: 175px;">
-            <v-card-item>
-                <div class="tiles-text">
-                    <div class="spacing-25"/>
-                    <v-tooltip location="bottom start" open-on-hover open-delay="200" close-delay="200">
-                      <template #activator="{ props }">
-                        <div v-bind="props" class="text-h6 mb-1">Cumulative Number of Turns</div>
-                      </template>
-                      <v-card class="pa-2" style="background-color: #f0f0f0; max-width: 350px;">
-                        <span class="text-caption" style="font-size: 10px !important;">This metric represents the total number of turns (interactions) with the Copilot over the past 28 days. A 'turn' includes both user inputs and Copilot's responses.</span>
-                      </v-card>
-                    </v-tooltip>
-                    <div class="text-caption">{{ dateRangeDescription }}</div>
-                    <p class="text-h4">{{ cumulativeNumberTurns }}</p>
-                </div>
-            </v-card-item>
-        </v-card>
-
-        <v-card elevation="4" color="white" variant="elevated" class="mx-auto my-3" style="width: 300px; height: 175px;">
-            <v-card-item>
-                <div class="tiles-text">
-                    <div class="spacing-10"/>
-                    <v-tooltip location="bottom start" open-on-hover open-delay="200" close-delay="200">
-                      <template #activator="{ props }">
-                        <div v-bind="props" class="text-h6 mb-1">Cumulative Number of Acceptances</div>
-                      </template>
-                      <v-card class="pa-2" style="background-color: #f0f0f0; max-width: 350px;">
-                        <span class="text-caption" style="font-size: 10px !important;">This metric shows the total number of lines of code suggested by Copilot that have been accepted by users over the past 28 days.</span>
-                      </v-card>
-                    </v-tooltip>
-                    <div class="text-caption">{{ dateRangeDescription }}</div>
-                    <p class="text-h4">{{ cumulativeNumberAcceptances }}</p>
-                </div>
-            </v-card-item>
-        </v-card>
+        <MetricCard
+          title="Cumulative Number of Turns"
+          :value="cumulativeNumberTurns.toString()"
+          :description="dateRangeDescription"
+          icon="mdi-chat-processing"
+          color="primary"
+          :is-dark-theme="isDarkTheme"
+        />
+
+        <MetricCard
+          title="Cumulative Number of Acceptances"
+          :value="cumulativeNumberAcceptances.toString()"
+          :description="dateRangeDescription"
+          icon="mdi-check-circle"
+          color="success"
+          :is-dark-theme="isDarkTheme"
+        />
     </div>
 
     <v-main class="p-1" style="min-height: 300px;">
-        <v-container style="min-height: 300px;" class="px-4 elevation-2">
-
-            <v-tooltip location="bottom start" open-on-hover open-delay="200" close-delay="200">
-              <template #activator="{ props }">
-                <h2 v-bind="props" class="mb-1">Total Acceptances | Total Turns Count</h2>
-              </template>
-              <v-card class="pa-2" style="background-color: #f0f0f0; max-width: 350px;">
-                <span class="text-caption" style="font-size: 10px !important;">This is a chart that displays the total number of turns and acceptances.</span>
-              </v-card>
-            </v-tooltip>
-            <Line :data="totalNumberAcceptancesAndTurnsChartData" :options="chartOptions" />
-
-            <v-tooltip location="bottom start" open-on-hover open-delay="200" close-delay="200">
-              <template #activator="{ props }">
-                <h2 v-bind="props" class="mb-1">Total Active Copilot Chat Users</h2>
-              </template>
-              <v-card class="pa-2" style="background-color: #f0f0f0; max-width: 350px;">
-                <span class="text-caption" style="font-size: 10px !important;">A bar chart that illustrates the total number of users who have actively interacted with Copilot over the past 28 days.</span>
-              </v-card>
-            </v-tooltip>
-            <Bar :data="totalActiveCopilotChatUsersChartData" :options="totalActiveChatUsersChartOptions" />
-
+        <v-container style="min-height: 300px;" class="px-4 elevation-2 chart-container">
+            <h2 class="chart-title">Total Acceptances | Total Turns Count</h2>
+            <div class="chart-wrapper">
+              <Line :data="totalNumberAcceptancesAndTurnsChartData" :options="chartOptions" />
+            </div>
+
+            <h2 class="chart-title">Total Active Copilot Chat Users</h2>
+            <div class="chart-wrapper">
+              <Bar :data="totalActiveCopilotChatUsersChartData" :options="totalActiveChatUsersChartOptions" />
+            </div>
         </v-container>
     </v-main>
 </template>
@@ -67,7 +37,8 @@
 <script lang="ts">
   import { defineComponent, ref, toRef } from 'vue';
   import type { Metrics } from '@/model/Metrics';
-  import { Line, Bar } from 'vue-chartjs'
+  import { Line, Bar } from 'vue-chartjs';
+  import MetricCard from './MetricCard.vue';
   import {
   Chart as ChartJS,
   ArcElement,
@@ -107,6 +78,10 @@ props: {
         dateRangeDescription: {
             type: String,
             default: 'Over the last 28 days'
+        },
+        isDarkTheme: {
+            type: Boolean,
+            default: false
         }
     },
 setup(props) {
@@ -205,3 +180,33 @@ setup(props) {
 });
 
 </script>
+
+<style scoped>
+.chart-title {
+  color: #8BE9FD;
+  font-weight: 700;
+  font-size: 1.5rem;
+  margin: 16px 0;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+  position: relative;
+  z-index: 2;
+}
+
+.chart-container {
+  background-color: rgba(18, 18, 18, 0.8) !important;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  border-radius: 12px;
+  padding: 24px;
+  margin-bottom: 32px;
+}
+
+.chart-wrapper {
+  margin-bottom: 32px;
+  position: relative;
+  height: 400px;
+}
+
+:deep(.chartjs-render-monitor) {
+  filter: drop-shadow(0 0 8px rgba(100, 216, 203, 0.2));
+}
+</style>
diff --git a/app/components/DashboardLayout.vue b/app/components/DashboardLayout.vue
index 476108fb..a7ed926b 100644
--- a/app/components/DashboardLayout.vue
+++ b/app/components/DashboardLayout.vue
@@ -5,7 +5,10 @@
         <h2 class="text-h5 font-weight-bold mb-4 d-flex align-center section-heading">
           <v-icon color="primary" class="mr-2">{{ icon }}</v-icon>
           <span class="section-title">{{ title }}</span>
-          <v-chip v-if="dateRange" size="small" color="primary" class="ml-2 text-white">{{ dateRange }}</v-chip>
+          <div v-if="dateRange" class="ml-2 custom-date-badge">
+            <v-icon class="date-icon">mdi-calendar-range</v-icon>
+            <span class="date-text">{{ dateRange }}</span>
+          </div>
         </h2>
       </v-col>
     </v-row>
@@ -146,4 +149,31 @@ function formatNumber(num: number): string {
   position: relative;
   z-index: 2;
 }
+
+.custom-date-badge {
+  display: inline-flex;
+  align-items: center;
+  background-color: #000000;
+  color: #FFFFFF;
+  font-weight: 700;
+  border: 2px solid #8BE9FD;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7);
+  padding: 6px 12px;
+  border-radius: 4px;
+  margin-left: 12px;
+}
+
+.date-icon {
+  color: #8BE9FD;
+  margin-right: 6px;
+  font-size: 18px;
+}
+
+.date-text {
+  color: #FFFFFF;
+  font-weight: 700;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
+  letter-spacing: 0.5px;
+  font-size: 0.9rem;
+}
 </style>
\ No newline at end of file
diff --git a/app/components/SeatsAnalysisViewer.vue b/app/components/SeatsAnalysisViewer.vue
index 8e34943e..238d7b94 100644
--- a/app/components/SeatsAnalysisViewer.vue
+++ b/app/components/SeatsAnalysisViewer.vue
@@ -1,115 +1,71 @@
 <template>
     <div class="tiles-container">
-        <v-card
-elevation="4" color="white" variant="elevated" class="mx-auto my-4"
-            style="width: 330px; height: 175px;">
-            <v-card-item class="d-flex justify-center align-center">
-                <div class="tiles-text">
-                    <div class="text-overline mb-1" style="visibility: hidden;">filler</div>
-                    <v-tooltip location="bottom start" open-on-hover open-delay="200" close-delay="200">
-                      <template #activator="{ props }">
-                        <div v-bind="props" class="text-h6 mb-1">Total Assigned  </div>
-                      </template>
-                      <v-card class="pa-2" style="background-color: #f0f0f0; max-width: 350px;">
-                        <span class="text-caption" style="font-size: 10px !important;">This metric represents the total number of Copilot seats assigned within the current organization/enterprise.</span>
-                      </v-card>
-                    </v-tooltip>
-                    <div class="text-caption">
-                        Currently assigned seats
-                    </div>
-                    <p class="text-h4">{{ totalSeats.length }}</p>
-                </div>
-            </v-card-item>
-        </v-card>
-
-        <v-card
-elevation="4" color="white" variant="elevated" class="mx-auto my-3"
-            style="width: 300px; height: 175px;">
-            <v-card-item class="d-flex justify-center align-center">
-                <div class="tiles-text">
-                    <div class="text-overline mb-1" style="visibility: hidden;">filler</div>
-                    <v-tooltip location="bottom start" open-on-hover open-delay="200" close-delay="200">
-                      <template #activator="{ props }">
-                        <div v-bind="props" class="text-h6 mb-1">Assigned But Never Used</div>
-                      </template>
-                      <v-card class="pa-2" style="background-color: #f0f0f0; max-width: 350px;">
-                        <span class="text-caption" style="font-size: 10px !important;">This metric shows seats that were assigned but never used within the current organization/enterprise. The assigned timestamp is also displayed in the chart.</span>
-                      </v-card>
-                    </v-tooltip>
-                    <div class="text-caption">
-                        No show seats
-                    </div>
-                    <p class="text-h4">{{ noshowSeats }}</p>
-                </div>
-            </v-card-item>
-        </v-card>
-        <v-card elevation="4" color="white" variant="elevated" class="mx-auto my-4" style="width: 330px; height: 175px;">
-            <v-card-item class="d-flex justify-center align-center">
-                <div class="tiles-text">
-                    <div class="text-overline mb-1" style="visibility: hidden;">filler</div>
-                    <v-tooltip location="bottom start" open-on-hover open-delay="200" close-delay="200">
-                      <template #activator="{ props }">
-                        <div v-bind="props" class="text-h6 mb-1">No Activity in the Last 7 days </div>
-                      </template>
-                      <v-card class="pa-2" style="background-color: #f0f0f0; max-width: 350px;">
-                        <span class="text-caption" style="font-size: 10px !important;">Never used seats or seats used, but with no activity in the past 7 days.</span>
-                      </v-card>
-                    </v-tooltip>
-                    <div class="text-caption">
-                        No use in the last 7 days
-                    </div>
-                    <p class="text-h4">{{ unusedSeatsInSevenDays }}</p>
-                </div>
-            </v-card-item>
-        </v-card>
-        <v-card elevation="4" color="white" variant="elevated" class="mx-auto my-4" style="width: 330px; height: 175px;">
-            <v-card-item class="d-flex justify-center align-center">
-                <div class="tiles-text">
-                    <div class="text-overline mb-1" style="visibility: hidden;">filler</div>
-                    <v-tooltip location="bottom start" open-on-hover open-delay="200" close-delay="200">
-                      <template #activator="{ props }">
-                        <div v-bind="props" class="text-h6 mb-1">No Activity in the Last 30 days </div>
-                      </template>
-                      <v-card class="pa-2" style="background-color: #f0f0f0; max-width: 350px;">
-                        <span class="text-caption" style="font-size: 10px !important;">This metric represents seats with no activity in the last 30 days, including those never used.</span>
-                      </v-card>
-                    </v-tooltip>
-                    <div class="text-caption">
-                        No use in the last 30 days
-                    </div>
-                    <p class="text-h4">{{ unusedSeatsInThirtyDays }}</p>
-                </div>
-            </v-card-item>
-        </v-card>
+        <MetricCard
+          title="Total Assigned"
+          :value="totalSeats.length.toString()"
+          description="Currently assigned seats"
+          icon="mdi-account-multiple"
+          color="primary"
+          :is-dark-theme="isDarkTheme"
+        />
+        
+        <MetricCard
+          title="Assigned But Never Used"
+          :value="noshowSeats.toString()"
+          description="No show seats"
+          icon="mdi-account-off"
+          color="error"
+          :is-dark-theme="isDarkTheme"
+        />
+        
+        <MetricCard
+          title="No Activity in the Last 7 days"
+          :value="unusedSeatsInSevenDays.toString()"
+          description="No use in the last 7 days"
+          icon="mdi-calendar-week"
+          color="warning"
+          :is-dark-theme="isDarkTheme"
+        />
+        
+        <MetricCard
+          title="No Activity in the Last 30 days"
+          :value="unusedSeatsInThirtyDays.toString()"
+          description="No use in the last 30 days"
+          icon="mdi-calendar-month"
+          color="info"
+          :is-dark-theme="isDarkTheme"
+        />
     </div>
     
-    <div>
-        <v-main class="p-1" style="min-height: 300px;">
-            <v-container style="min-height: 300px;" class="px-4 elevation-2">
-                <br>
-                <h2>All assigned seats </h2>
-                <br>
-            <v-data-table :headers="headers" :items="totalSeats" :items-per-page="10" class="elevation-2">
+    <v-main class="p-1" style="min-height: 300px;">
+        <v-container style="min-height: 300px;" class="px-4 elevation-2 chart-container">
+            <h2 class="breakdown-title">All assigned seats</h2>
+            <v-data-table 
+              :headers="headers" 
+              :items="totalSeats" 
+              :items-per-page="10" 
+              class="data-table elevation-2"
+            >
                 <template #item="{ item, index }">
-                    <tr>
-                        <td>{{ index + 1 }}</td>
-                        <td>{{ item.login }}</td>
-                        <td>{{ item.id }}</td>
-                        <td>{{ item.team }}</td>
-                        <td>{{ item.created_at }}</td>
-                        <td>{{ item.last_activity_at }}</td>
-                        <td>{{ item.last_activity_editor }}</td>
+                    <tr class="data-table-row">
+                        <td class="data-table-cell">{{ index + 1 }}</td>
+                        <td class="data-table-cell">{{ item.login }}</td>
+                        <td class="data-table-cell">{{ item.id }}</td>
+                        <td class="data-table-cell">{{ item.team }}</td>
+                        <td class="data-table-cell">{{ item.created_at }}</td>
+                        <td class="data-table-cell">{{ item.last_activity_at }}</td>
+                        <td class="data-table-cell">{{ item.last_activity_editor }}</td>
                     </tr>
                 </template>
-                </v-data-table>
-            </v-container>
-        </v-main>
-    </div>
+            </v-data-table>
+        </v-container>
+    </v-main>
 </template>
   
 <script lang="ts">
   import { defineComponent, ref, watchEffect } from 'vue';
   import type { Seat } from '@/model/Seat';
+  import MetricCard from './MetricCard.vue';
   import {
     Chart as ChartJS,
     ArcElement,
@@ -142,6 +98,10 @@ props: {
             type: Array as () => Seat[],
             required: true,
             default: () => []  
+        },
+        isDarkTheme: {
+            type: Boolean,
+            default: false
         }
     },
 setup(props) {
@@ -220,3 +180,56 @@ data() {
   
 });
 </script>
+
+<style scoped>
+.breakdown-title {
+  color: #8BE9FD;
+  font-weight: 700;
+  font-size: 1.5rem;
+  margin: 16px 0;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+  position: relative;
+  z-index: 2;
+}
+
+.chart-container {
+  background-color: rgba(18, 18, 18, 0.8) !important;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  border-radius: 12px;
+  padding: 24px;
+  margin-bottom: 32px;
+}
+
+/* Data table styling for better readability */
+.data-table {
+  background-color: rgba(18, 18, 18, 0.8) !important;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+:deep(.v-data-table__thead) {
+  background-color: rgba(100, 216, 203, 0.1) !important;
+}
+
+:deep(.v-data-table__thead th) {
+  color: #8BE9FD !important;
+  font-weight: 600 !important;
+  font-size: 0.8rem !important;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.data-table-row {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.data-table-cell {
+  color: #F8F8F2 !important;
+  padding: 12px 16px;
+}
+
+:deep(.v-data-table__tbody tr:hover) {
+  background-color: rgba(100, 216, 203, 0.05) !important;
+}
+</style>
\ No newline at end of file
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 6f27b537..3a7f5743 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -37,7 +37,7 @@ export default defineNuxtConfig({
     },
   },
 
-  css: ['~/assets/global.css', '~/assets/background.css'],
+  css: ['~/assets/global.css', '~/assets/background.css', '~/assets/date-range-fix.css'],
   modules: ['@nuxt/fonts', 'vuetify-nuxt-module', '@nuxt/eslint', 'nuxt-auth-utils'],
 
   vuetify: {

From e5b7f2b53b2a7efb9e632dedda548c6a8b839966 Mon Sep 17 00:00:00 2001
From: PseudoCoding <dphoude@gmail.com>
Date: Sat, 19 Jul 2025 09:16:08 -0400
Subject: [PATCH 06/13] Update CopilotChatViewer.vue

---
 app/components/CopilotChatViewer.vue | 77 +++++++++++++++++-----------
 1 file changed, 47 insertions(+), 30 deletions(-)

diff --git a/app/components/CopilotChatViewer.vue b/app/components/CopilotChatViewer.vue
index e3663c36..4e0681c0 100644
--- a/app/components/CopilotChatViewer.vue
+++ b/app/components/CopilotChatViewer.vue
@@ -26,6 +26,8 @@
               <Line :data="totalNumberAcceptancesAndTurnsChartData" :options="chartOptions" />
             </div>
 
+            <v-divider class="my-6"></v-divider>
+            
             <h2 class="chart-title">Total Active Copilot Chat Users</h2>
             <div class="chart-wrapper">
               <Bar :data="totalActiveCopilotChatUsersChartData" :options="totalActiveChatUsersChartOptions" />
@@ -93,41 +95,52 @@ setup(props) {
     //Total Copilot Chat Active Users
     const totalActiveCopilotChatUsersChartData = ref<{ labels: string[]; datasets: any[] }>({ labels: [], datasets: [] });  
 
-    const totalActiveChatUsersChartOptions = {
-    responsive: true,
-    maintainAspectRatio: true,
-    scales: {
-        y: {
-        beginAtZero: true,
-        ticks: {
-            stepSize: 1
-        }
-        }
-    },
-    layout: {
-        padding: {
-        left: 50,
-        right: 50,
-        top: 50,
-        bottom: 50
-        }
-    },
-    };
-
+    // Use consistent chart options for both charts
     const chartOptions = {
         responsive: true,
-        maintainAspectRatio: true,
-        height: 300,
-        width: 300,
-        layout: {
-            padding: {
-            left: 150,
-            right: 150,
-            top: 20,
-            bottom: 40
+        maintainAspectRatio: false,
+        height: 400,
+        plugins: {
+            legend: {
+                position: 'top',
+                labels: {
+                    color: '#F8F8F2',
+                    font: {
+                        size: 12
+                    }
+                }
+            },
+            tooltip: {
+                backgroundColor: 'rgba(30, 30, 30, 0.8)',
+                titleColor: '#8BE9FD',
+                bodyColor: '#F8F8F2',
+                borderColor: 'rgba(100, 216, 203, 0.3)',
+                borderWidth: 1
             }
         },
+        scales: {
+            y: {
+                beginAtZero: true,
+                ticks: {
+                    color: '#BFBFBF'
+                },
+                grid: {
+                    color: 'rgba(255, 255, 255, 0.1)'
+                }
+            },
+            x: {
+                ticks: {
+                    color: '#BFBFBF'
+                },
+                grid: {
+                    color: 'rgba(255, 255, 255, 0.1)'
+                }
+            }
+        }
     };
+    
+    // Use the same options for both charts for consistent alignment
+    const totalActiveChatUsersChartOptions = { ...chartOptions };
 
     //Total Number Acceptances And Turns
     const totalNumberAcceptancesAndTurnsChartData = ref<{ labels: string[]; datasets: any[] }>({ labels: [], datasets: [] });
@@ -204,6 +217,10 @@ setup(props) {
   margin-bottom: 32px;
   position: relative;
   height: 400px;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 :deep(.chartjs-render-monitor) {

From d8735b1e971eac31b2c423df6fbce7df64898854 Mon Sep 17 00:00:00 2001
From: PseudoCoding <dphoude@gmail.com>
Date: Sat, 19 Jul 2025 09:39:57 -0400
Subject: [PATCH 07/13] m

---
 app/components/AgentModeViewer.vue   | 120 ++++++++++++++++++++++++++-
 app/components/CopilotChatViewer.vue |  27 ++++--
 app/components/MetricsViewer.vue     |  39 ++++++---
 3 files changed, 166 insertions(+), 20 deletions(-)

diff --git a/app/components/AgentModeViewer.vue b/app/components/AgentModeViewer.vue
index 68476b5f..5427db8a 100644
--- a/app/components/AgentModeViewer.vue
+++ b/app/components/AgentModeViewer.vue
@@ -283,6 +283,48 @@ export default defineComponent({
                     const apiUrl = queryString ? `/api/github-stats?${queryString}` : '/api/github-stats';
 
                     const response = await $fetch(apiUrl) as GitHubStats;
+                    
+                    // Process the chart data to ensure consistent styling
+                    if (response.agentModeChartData && response.agentModeChartData.datasets) {
+                        response.agentModeChartData.datasets.forEach(dataset => {
+                            // Apply curved line styling to all line datasets
+                            dataset.tension = 0.4;
+                            dataset.borderWidth = 2;
+                            dataset.fill = false;
+                            
+                            // Apply consistent colors based on the dataset label
+                            if (dataset.label.includes('IDE Code')) {
+                                dataset.borderColor = '#8BE9FD';  // Cyan
+                                dataset.backgroundColor = 'rgba(139, 233, 253, 0.3)';
+                            } else if (dataset.label.includes('IDE Chat')) {
+                                dataset.borderColor = '#64D8CB';  // Teal
+                                dataset.backgroundColor = 'rgba(100, 216, 203, 0.3)';
+                            } else if (dataset.label.includes('GitHub.com Chat')) {
+                                dataset.borderColor = '#9C64D8';  // Purple
+                                dataset.backgroundColor = 'rgba(156, 100, 216, 0.3)';
+                            } else if (dataset.label.includes('PR')) {
+                                dataset.borderColor = '#FFB86C';  // Orange
+                                dataset.backgroundColor = 'rgba(255, 184, 108, 0.3)';
+                            }
+                        });
+                    }
+                    
+                    // Process the model usage chart data for consistent bar styling
+                    if (response.modelUsageChartData && response.modelUsageChartData.datasets) {
+                        response.modelUsageChartData.datasets.forEach(dataset => {
+                            // Apply consistent bar styling
+                            dataset.borderWidth = 2;
+                            dataset.borderRadius = 4;
+                            dataset.maxBarThickness = 40;
+                            
+                            // Apply consistent colors if not already set
+                            if (!dataset.backgroundColor) {
+                                dataset.backgroundColor = 'rgba(139, 233, 253, 0.3)';  // Cyan with transparency
+                                dataset.borderColor = '#8BE9FD';  // Solid cyan
+                            }
+                        });
+                    }
+                    
                     // Use Object.assign to maintain reactivity while updating properties
                     Object.assign(stats.value, response);
                     lastMetricsHash.value = currentHash;
@@ -298,6 +340,21 @@ export default defineComponent({
 
         // Watch for changes with improved performance
         watch(() => [props.originalMetrics, props.dateRangeDescription, props.dateRange], fetchStats, { immediate: true, deep: false });
+        
+        // Watch for changes in the agentModeChartData and apply consistent line styling
+        watch(() => stats.value.agentModeChartData, (chartData) => {
+            if (chartData && chartData.datasets && chartData.datasets.length > 0) {
+                // Apply consistent styling to each dataset
+                chartData.datasets.forEach(dataset => {
+                    if (dataset.type === 'line' || !dataset.type) {
+                        // Apply curved line styling to line charts
+                        dataset.tension = 0.4;
+                        dataset.borderWidth = 2;
+                        dataset.fill = false;
+                    }
+                });
+            }
+        }, { deep: true });
 
         // Static table headers (avoid recreating on every render)
         const codeCompletionHeaders = [
@@ -345,6 +402,20 @@ export default defineComponent({
                     title: {
                         display: true,
                         text: 'Users with Activity'
+                    },
+                    ticks: {
+                        color: '#BFBFBF'
+                    },
+                    grid: {
+                        color: 'rgba(255, 255, 255, 0.1)'
+                    }
+                },
+                x: {
+                    ticks: {
+                        color: '#BFBFBF'
+                    },
+                    grid: {
+                        color: 'rgba(255, 255, 255, 0.1)'
                     }
                 }
             },
@@ -355,11 +426,29 @@ export default defineComponent({
                 },
                 legend: {
                     display: true,
-                    position: 'top' as const
+                    position: 'top' as const,
+                    labels: {
+                        color: '#F8F8F2',
+                        font: {
+                            size: 12
+                        }
+                    }
+                },
+                tooltip: {
+                    backgroundColor: 'rgba(30, 30, 30, 0.8)',
+                    titleColor: '#8BE9FD',
+                    bodyColor: '#F8F8F2',
+                    borderColor: 'rgba(100, 216, 203, 0.3)',
+                    borderWidth: 1
                 }
             },
             interaction: {
                 intersect: false
+            },
+            elements: {
+                line: {
+                    tension: 0.4 // Add curve to all line charts
+                }
             }
         };
 
@@ -375,6 +464,20 @@ export default defineComponent({
                     title: {
                         display: true,
                         text: 'Number of Models'
+                    },
+                    ticks: {
+                        color: '#BFBFBF'
+                    },
+                    grid: {
+                        color: 'rgba(255, 255, 255, 0.1)'
+                    }
+                },
+                x: {
+                    ticks: {
+                        color: '#BFBFBF'
+                    },
+                    grid: {
+                        color: 'rgba(255, 255, 255, 0.1)'
                     }
                 }
             },
@@ -385,7 +488,20 @@ export default defineComponent({
                 },
                 legend: {
                     display: true,
-                    position: 'top' as const
+                    position: 'top' as const,
+                    labels: {
+                        color: '#F8F8F2',
+                        font: {
+                            size: 12
+                        }
+                    }
+                },
+                tooltip: {
+                    backgroundColor: 'rgba(30, 30, 30, 0.8)',
+                    titleColor: '#8BE9FD',
+                    bodyColor: '#F8F8F2',
+                    borderColor: 'rgba(100, 216, 203, 0.3)',
+                    borderWidth: 1
                 }
             },
             interaction: {
diff --git a/app/components/CopilotChatViewer.vue b/app/components/CopilotChatViewer.vue
index 4e0681c0..bf651d43 100644
--- a/app/components/CopilotChatViewer.vue
+++ b/app/components/CopilotChatViewer.vue
@@ -136,6 +136,11 @@ setup(props) {
                     color: 'rgba(255, 255, 255, 0.1)'
                 }
             }
+        },
+        elements: {
+            line: {
+                tension: 0.4 // Add curve to all line charts
+            }
         }
     };
     
@@ -165,15 +170,20 @@ setup(props) {
         {
             label: 'Total Acceptances',
             data: cumulativeNumberAcceptancesData,
-            backgroundColor: 'rgba(75, 192, 192, 0.2)',
-            borderColor: 'rgba(75, 192, 192, 1)'
-
+            backgroundColor: 'rgba(100, 216, 203, 0.3)',
+            borderColor: '#64D8CB',
+            borderWidth: 2,
+            tension: 0.4,  // Add curve to the line
+            fill: false
         },
         {
             label: 'Total Turns',
             data: cumulativeNumberTurnsData,
-            backgroundColor: 'rgba(153, 102, 255, 0.2)',
-            borderColor: 'rgba(153, 102, 255, 1)'
+            backgroundColor: 'rgba(156, 100, 216, 0.3)',
+            borderColor: '#9C64D8',
+            borderWidth: 2,
+            tension: 0.4,  // Add curve to the line
+            fill: false
         }]
     };
 
@@ -183,8 +193,11 @@ setup(props) {
         {
             label: 'Total Active Copilot Chat Users',
             data: data.map((m: Metrics) => m.total_active_chat_users),
-            backgroundColor: 'rgba(0, 0, 139, 0.2)', // dark blue with 20% opacity
-            borderColor: 'rgba(255, 99, 132, 1)'
+            backgroundColor: 'rgba(139, 233, 253, 0.3)', // Cyan with transparency
+            borderColor: '#8BE9FD',
+            borderWidth: 2,
+            borderRadius: 4,
+            maxBarThickness: 40
         }]
     };
     
diff --git a/app/components/MetricsViewer.vue b/app/components/MetricsViewer.vue
index b4ef1001..f0eebfbe 100644
--- a/app/components/MetricsViewer.vue
+++ b/app/components/MetricsViewer.vue
@@ -295,13 +295,19 @@ export default defineComponent({
           label: 'Total Suggestions',
           data: cumulativeSuggestionsData,
           backgroundColor: 'rgba(139, 233, 253, 0.3)',  // Cyan with transparency
-          borderColor: '#8BE9FD'  // Solid cyan
+          borderColor: '#8BE9FD',  // Solid cyan
+          borderWidth: 2,
+          tension: 0.4,  // Add curve to the line
+          fill: false
         },
         {
           label: 'Total Acceptance',
           data: cumulativeAcceptancesData,
           backgroundColor: 'rgba(156, 100, 216, 0.3)',  // Purple with transparency
-          borderColor: '#9C64D8'  // Solid purple
+          borderColor: '#9C64D8',  // Solid purple
+          borderWidth: 2,
+          tension: 0.4,  // Add curve to the line
+          fill: false
         },
       ]
     };
@@ -320,13 +326,19 @@ export default defineComponent({
           label: 'Total Lines Suggested',
           data: data.map((m: Metrics) => m.total_lines_suggested),
           backgroundColor: 'rgba(100, 216, 203, 0.3)',  // Teal with transparency
-          borderColor: '#64D8CB'  // Solid teal
+          borderColor: '#64D8CB',  // Solid teal
+          borderWidth: 2,
+          tension: 0.4,  // Add curve to the line
+          fill: false
         },
         {
           label: 'Total Lines Accepted',
           data: cumulativeLOCAcceptedData,
           backgroundColor: 'rgba(156, 100, 216, 0.3)',  // Purple with transparency
-          borderColor: '#9C64D8'  // Solid purple
+          borderColor: '#9C64D8',  // Solid purple
+          borderWidth: 2,
+          tension: 0.4,  // Add curve to the line
+          fill: false
         }
       ]
     };
@@ -345,13 +357,14 @@ export default defineComponent({
       labels: data.map((m: Metrics) => m.day),
       datasets: [
         {
-          type: 'line',
+          type: 'bar',
           label: 'Acceptance Rate by Lines',
           data: acceptanceRatesByLines,
           backgroundColor: 'rgba(139, 233, 253, 0.3)',  // Cyan with transparency
           borderColor: '#8BE9FD',  // Solid cyan
-          fill: false,
-          tension: 0.4  // Smooth curve
+          borderWidth: 2,
+          borderRadius: 4,
+          maxBarThickness: 40
         }
       ]
     };
@@ -360,13 +373,14 @@ export default defineComponent({
       labels: data.map((m: Metrics) => m.day),
       datasets: [
         {
-          type: 'line',
+          type: 'bar',
           label: 'Acceptance Rate by Count',
           data: acceptanceRatesByCount,
           backgroundColor: 'rgba(100, 216, 203, 0.3)',  // Teal with transparency
           borderColor: '#64D8CB',  // Solid teal
-          fill: false,
-          tension: 0.4  // Smooth curve
+          borderWidth: 2,
+          borderRadius: 4,
+          maxBarThickness: 40
         }
       ]
     };
@@ -393,7 +407,10 @@ export default defineComponent({
           label: 'Total Active Users',
           data: data.map((m: Metrics) => m.total_active_users),
           backgroundColor: 'rgba(156, 100, 216, 0.3)',  // Purple with transparency
-          borderColor: '#9C64D8'  // Solid purple
+          borderColor: '#9C64D8',  // Solid purple
+          borderWidth: 2,
+          borderRadius: 4,
+          maxBarThickness: 40
         }
       ]
     };

From 1149e4dea09df3ece2461894f4be310f462475ff Mon Sep 17 00:00:00 2001
From: PseudoCoding <dphoude@gmail.com>
Date: Sat, 19 Jul 2025 09:43:15 -0400
Subject: [PATCH 08/13] Update CopilotLogo.vue

---
 app/components/CopilotLogo.vue | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/app/components/CopilotLogo.vue b/app/components/CopilotLogo.vue
index 4fa0d897..d8a529c0 100644
--- a/app/components/CopilotLogo.vue
+++ b/app/components/CopilotLogo.vue
@@ -74,14 +74,11 @@ defineProps({
 }
 
 .text-gradient {
-  background: linear-gradient(90deg, #FFFFFF, #8BE9FD, #64D8CB);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  color: transparent;
-  position: relative;
-  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
-  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
+  color: #9C64D8 !important; /* Dark purple from the site's color palette */
+  -webkit-text-fill-color: #9C64D8; /* Ensure the color is applied in webkit browsers */
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+  font-weight: 800;
+  letter-spacing: 0.5px;
 }
 
 @keyframes pulse {

From bdef5903e3a8a59f91dfa92fbc0fca7ff52a36f5 Mon Sep 17 00:00:00 2001
From: PseudoCoding <dphoude@gmail.com>
Date: Sat, 19 Jul 2025 09:46:14 -0400
Subject: [PATCH 09/13] Update MainComponent.vue

---
 app/components/MainComponent.vue | 23 -----------------------
 1 file changed, 23 deletions(-)

diff --git a/app/components/MainComponent.vue b/app/components/MainComponent.vue
index 0f9119e4..62746517 100644
--- a/app/components/MainComponent.vue
+++ b/app/components/MainComponent.vue
@@ -23,29 +23,6 @@
       <span v-if="mockedDataMessage" class="error-message text-caption px-2 py-1 rounded">{{ mockedDataMessage }}</span>
       <v-spacer />
 
-      <!-- Conditionally render the user info and logout button -->
-      <AuthState>
-        <template #default="{ loggedIn, user }">
-          <div v-show="loggedIn" class="user-info d-none d-sm-flex">
-            <span class="mr-2 text-white">Welcome,</span>
-            <v-avatar size="32" class="user-avatar">
-              <v-img :alt="user?.name" :src="user?.avatarUrl" />
-            </v-avatar> 
-            <span class="ml-2 font-weight-medium text-white">{{ user?.name }}</span>
-          </div>
-          <v-btn 
-            v-if="showLogoutButton && loggedIn" 
-            class="logout-button ml-4" 
-            @click="logout" 
-            prepend-icon="mdi-logout"
-            variant="outlined"
-            color="white"
-          >
-            Logout
-          </v-btn>
-        </template>
-      </AuthState>
-
       <ThemeToggle 
         class="ml-2" 
         :is-dark-theme="isDarkTheme" 

From 54711ec25988f8c764b847742f8a7e9688d2322c Mon Sep 17 00:00:00 2001
From: PseudoCoding <dphoude@gmail.com>
Date: Sat, 19 Jul 2025 10:38:58 -0400
Subject: [PATCH 10/13] More

---
 app/assets/data-table-fix-v2.css   |  69 ++++++++++++
 app/assets/data-table-fix-v3.css   | 164 +++++++++++++++++++++++++++++
 app/assets/data-table-fix.css      | 131 +++++++++++++++++++++++
 app/assets/direct-fix.css          |  40 +++++++
 app/assets/dropdown-direct-fix.css |  89 ++++++++++++++++
 app/assets/dropdown-fix.css        |  40 +++++++
 app/assets/final-dropdown-fix.css  |   0
 app/assets/final-fix.css           |   5 +
 app/assets/vuetify-fix.css         |  66 ++++++++++++
 app/components/MainComponent.vue   |   3 -
 nuxt.config.ts                     |   2 +-
 11 files changed, 605 insertions(+), 4 deletions(-)
 create mode 100644 app/assets/data-table-fix-v2.css
 create mode 100644 app/assets/data-table-fix-v3.css
 create mode 100644 app/assets/data-table-fix.css
 create mode 100644 app/assets/direct-fix.css
 create mode 100644 app/assets/dropdown-direct-fix.css
 create mode 100644 app/assets/dropdown-fix.css
 create mode 100644 app/assets/final-dropdown-fix.css
 create mode 100644 app/assets/final-fix.css
 create mode 100644 app/assets/vuetify-fix.css

diff --git a/app/assets/data-table-fix-v2.css b/app/assets/data-table-fix-v2.css
new file mode 100644
index 00000000..21ca50d0
--- /dev/null
+++ b/app/assets/data-table-fix-v2.css
@@ -0,0 +1,69 @@
+/* Target the specific white background in the dropdown */
+.v-list-item__underlay {
+  background-color: transparent !important;
+  display: none !important;
+}
+
+/* Target all possible elements that could have a white background */
+.v-list-item__bg {
+  background-color: transparent !important;
+  display: none !important;
+}
+
+/* Target the ripple effect which might be causing the white background */
+.v-ripple__container {
+  display: none !important;
+}
+
+/* Target any other potential elements */
+.v-list-item .v-overlay__content,
+.v-list-item .v-overlay,
+.v-list-item .v-ripple,
+.v-list-item .v-ripple__animation {
+  background-color: transparent !important;
+  display: none !important;
+}
+
+/* Force all list items to have the correct background */
+.v-list-item {
+  background-color: #1E1E1E !important;
+}
+
+/* Force selected items to have the correct background */
+.v-list-item--active {
+  background-color: #333333 !important;
+}
+
+/* Target the specific element that might be causing the white background */
+.v-list-item__overlay {
+  background-color: transparent !important;
+  display: none !important;
+}
+
+/* Target the v-select dropdown specifically */
+.v-select__content .v-list,
+.v-select__content .v-list-item,
+.v-select__content .v-list-item__overlay,
+.v-select__content .v-list-item__underlay {
+  background-color: #1E1E1E !important;
+}
+
+.v-select__content .v-list-item--active,
+.v-select__content .v-list-item--active .v-list-item__overlay,
+.v-select__content .v-list-item--active .v-list-item__underlay {
+  background-color: #333333 !important;
+}
+
+/* Target the white box specifically */
+.v-theme--light.v-list-item .v-list-item__overlay {
+  background-color: transparent !important;
+  display: none !important;
+}
+
+/* Target the white box in the data table footer */
+.v-data-table-footer .v-list-item__overlay,
+.v-data-table-footer .v-list-item__underlay,
+.v-data-table-footer .v-list-item__bg {
+  background-color: transparent !important;
+  display: none !important;
+}
\ No newline at end of file
diff --git a/app/assets/data-table-fix-v3.css b/app/assets/data-table-fix-v3.css
new file mode 100644
index 00000000..9e21871d
--- /dev/null
+++ b/app/assets/data-table-fix-v3.css
@@ -0,0 +1,164 @@
+/* Direct targeting of the white background in the dropdown */
+
+/* Target the specific element causing the white background */
+.v-list-item__underlay {
+  background-color: transparent !important;
+  opacity: 0 !important;
+}
+
+/* Target the specific element in the dropdown */
+.v-select__content .v-list-item__underlay {
+  background-color: transparent !important;
+  opacity: 0 !important;
+}
+
+/* Target the specific element in the data table footer */
+.v-data-table-footer .v-select__content .v-list-item__underlay {
+  background-color: transparent !important;
+  opacity: 0 !important;
+}
+
+/* Target the specific element in the data table footer */
+.v-data-table-footer__items-per-page .v-select__content .v-list-item__underlay {
+  background-color: transparent !important;
+  opacity: 0 !important;
+}
+
+/* Target all list items in the dropdown */
+.v-list-item {
+  --v-theme-overlay-multiplier: 0 !important;
+  --v-activated-opacity: 0 !important;
+  --v-selected-opacity: 0 !important;
+  --v-hover-opacity: 0 !important;
+  --v-focus-opacity: 0 !important;
+  --v-pressed-opacity: 0 !important;
+  --v-dragged-opacity: 0 !important;
+}
+
+/* Target the specific element causing the white background */
+.v-theme--light .v-list-item__underlay,
+.v-theme--dark .v-list-item__underlay {
+  background-color: transparent !important;
+  opacity: 0 !important;
+}
+
+/* Target the specific element causing the white background */
+.v-list-item__overlay {
+  background-color: transparent !important;
+  opacity: 0 !important;
+}
+
+/* Target the specific element causing the white background */
+.v-list-item--active .v-list-item__overlay,
+.v-list-item--selected .v-list-item__overlay {
+  background-color: transparent !important;
+  opacity: 0 !important;
+}
+
+/* Force background colors for list items */
+.v-list-item {
+  background-color: #1E1E1E !important;
+}
+
+.v-list-item--active,
+.v-list-item--selected {
+  background-color: #333333 !important;
+}
+
+/* Target the specific element causing the white background */
+.v-list-item .v-list-item__underlay::before,
+.v-list-item .v-list-item__underlay::after {
+  background-color: transparent !important;
+  opacity: 0 !important;
+  display: none !important;
+}
+
+/* Target the specific element causing the white background */
+.v-list-item .v-list-item__overlay::before,
+.v-list-item .v-list-item__overlay::after {
+  background-color: transparent !important;
+  opacity: 0 !important;
+  display: none !important;
+}
+
+/* Target the specific element causing the white background */
+.v-list-item__content {
+  background-color: transparent !important;
+}
+
+/* Target the specific element causing the white background */
+.v-list-item__prepend {
+  background-color: transparent !important;
+}
+
+/* Target the specific element causing the white background */
+.v-list-item__append {
+  background-color: transparent !important;
+}
+
+/* Target the specific element causing the white background */
+.v-list-item__spacer {
+  background-color: transparent !important;
+}
+
+/* Target the specific element causing the white background */
+.v-list-item__base {
+  background-color: transparent !important;
+}
+
+/* Target the specific element causing the white background */
+.v-list-item__bg {
+  background-color: transparent !important;
+  opacity: 0 !important;
+  display: none !important;
+}
+
+/* Target the specific element causing the white background */
+.v-list-item__bg::before,
+.v-list-item__bg::after {
+  background-color: transparent !important;
+  opacity: 0 !important;
+  display: none !important;
+}
+
+/* Target the specific element causing the white background */
+.v-list-item__bg > * {
+  background-color: transparent !important;
+  opacity: 0 !important;
+  display: none !important;
+}
+
+/* Target the specific element causing the white background */
+.v-list-item__underlay > * {
+  background-color: transparent !important;
+  opacity: 0 !important;
+  display: none !important;
+}
+
+/* Target the specific element causing the white background */
+.v-list-item__overlay > * {
+  background-color: transparent !important;
+  opacity: 0 !important;
+  display: none !important;
+}
+
+/* Target the specific element causing the white background */
+.v-list-item__bg > div {
+  background-color: transparent !important;
+  opacity: 0 !important;
+  display: none !important;
+}
+
+/* Target the specific element causing the white background */
+.v-list-item__underlay > div {
+  background-color: transparent !important;
+  opacity: 0 !important;
+  display: none !important;
+}
+
+/* Target the specific element causing the white background */
+.v-list-item__overlay > div {
+  background-color: transparent !important;
+  opacity: 0 !important;
+  display: none !important;
+}
\ No newline at end of file
diff --git a/app/assets/data-table-fix.css b/app/assets/data-table-fix.css
new file mode 100644
index 00000000..e1b01a14
--- /dev/null
+++ b/app/assets/data-table-fix.css
@@ -0,0 +1,131 @@
+/* Fix data table footer and item count selection dropdown */
+.v-data-table-footer {
+  background-color: #1E1E1E !important;
+  border-top: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.v-data-table-footer__items-per-page {
+  background-color: #1E1E1E !important;
+}
+
+/* Fix all dropdown menus and lists */
+.v-overlay__content,
+.v-menu__content,
+.v-list,
+.v-select__content,
+.v-select-list {
+  background-color: #1E1E1E !important;
+  border: 1px solid rgba(255, 255, 255, 0.1) !important;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
+}
+
+/* Fix all list items in dropdowns */
+.v-list-item {
+  background-color: #1E1E1E !important;
+  color: #FFFFFF !important;
+}
+
+/* Fix the selected and active items */
+.v-list-item--active,
+.v-list-item--selected,
+.v-list-item--highlighted,
+.v-list-item.v-list-item--active,
+.v-list-item.v-list-item--selected {
+  background-color: #333333 !important;
+  color: #FFFFFF !important;
+  font-weight: 600 !important;
+}
+
+/* Fix hover state */
+.v-list-item:hover {
+  background-color: #333333 !important;
+  color: #8BE9FD !important;
+}
+
+/* Fix the dropdown fields */
+.v-field,
+.v-field--variant-filled,
+.v-field--variant-outlined,
+.v-field--variant-plain,
+.v-field--variant-underlined,
+.v-field--variant-solo,
+.v-field--variant-solo-filled,
+.v-field--variant-solo-inverted,
+.v-field--variant-solo-outlined {
+  background-color: #1E1E1E !important;
+  border: 1px solid rgba(255, 255, 255, 0.1) !important;
+}
+
+/* Fix input text color */
+.v-field__input,
+.v-select__selection,
+.v-select__selection-text {
+  color: #FFFFFF !important;
+  font-weight: 600 !important;
+}
+
+/* Fix dropdown arrow */
+.v-field__append-inner {
+  color: #8BE9FD !important;
+}
+
+/* Fix pagination text */
+.v-data-table-footer__pagination {
+  color: #FFFFFF !important;
+}
+
+/* Fix any white backgrounds */
+.v-theme--light.v-list,
+.v-theme--light .v-list,
+.v-theme--light.v-menu__content,
+.v-theme--light .v-menu__content,
+.v-theme--light.v-overlay__content,
+.v-theme--light .v-overlay__content {
+  background-color: #1E1E1E !important;
+  color: #FFFFFF !important;
+}
+
+/* Fix any white backgrounds in the dropdown - more specific selectors */
+.v-overlay__content > div,
+.v-menu__content > div,
+.v-list-item__underlay,
+.v-list-item__content,
+.v-list-item__prepend,
+.v-list-item__append,
+.v-list-item > *,
+.v-list > *,
+.v-select__content > *,
+.v-select-list > * {
+  background-color: #1E1E1E !important;
+  color: #FFFFFF !important;
+}
+
+/* Target the specific white box in the dropdown */
+.v-list-item__overlay {
+  background-color: transparent !important;
+  opacity: 0 !important;
+}
+
+/* Fix any other potential white backgrounds */
+.v-overlay__scrim {
+  background-color: rgba(0, 0, 0, 0.5) !important;
+}
+
+/* Fix the dropdown items container */
+.v-select__content .v-list {
+  background-color: #1E1E1E !important;
+  padding: 0 !important;
+}
+
+/* Fix the dropdown items */
+.v-select__content .v-list-item {
+  background-color: #1E1E1E !important;
+  color: #FFFFFF !important;
+  min-height: 40px !important;
+}
+
+/* Fix the selected dropdown item */
+.v-select__content .v-list-item--active {
+  background-color: #333333 !important;
+  color: #8BE9FD !important;
+}
\ No newline at end of file
diff --git a/app/assets/direct-fix.css b/app/assets/direct-fix.css
new file mode 100644
index 00000000..48d59219
--- /dev/null
+++ b/app/assets/direct-fix.css
@@ -0,0 +1,40 @@
+/* Direct fix for the white background in the dropdown */
+
+/* Target the specific element causing the white background */
+.v-list-item .v-list-item__overlay,
+.v-list-item .v-list-item__underlay {
+  display: none !important;
+}
+
+/* Force dark background for list items */
+.v-list-item {
+  background-color: #1E1E1E !important;
+}
+
+/* Force dark background for active list items */
+.v-list-item--active {
+  background-color: #333333 !important;
+}
+
+/* Force white text for list items */
+.v-list-item__content {
+  color: white !important;
+}
+
+/* Target the specific element in the dropdown */
+.v-select__content .v-list-item .v-list-item__overlay,
+.v-select__content .v-list-item .v-list-item__underlay {
+  display: none !important;
+}
+
+/* Target the specific element in the data table footer */
+.v-data-table-footer .v-select__content .v-list-item .v-list-item__overlay,
+.v-data-table-footer .v-select__content .v-list-item .v-list-item__underlay {
+  display: none !important;
+}
+
+/* Target the specific element in the data table footer */
+.v-data-table-footer__items-per-page .v-select__content .v-list-item .v-list-item__overlay,
+.v-data-table-footer__items-per-page .v-select__content .v-list-item .v-list-item__underlay {
+  display: none !important;
+}
\ No newline at end of file
diff --git a/app/assets/dropdown-direct-fix.css b/app/assets/dropdown-direct-fix.css
new file mode 100644
index 00000000..b85f0864
--- /dev/null
+++ b/app/assets/dropdown-direct-fix.css
@@ -0,0 +1,89 @@
+/* Direct fix for the white background in the dropdown */
+
+/* Target the specific element causing the white background */
+.v-list-item .v-list-item__underlay {
+  background-color: transparent !important;
+  opacity: 0 !important;
+  visibility: hidden !important;
+}
+
+/* Target the specific element causing the white background */
+.v-list-item .v-list-item__overlay {
+  background-color: transparent !important;
+  opacity: 0 !important;
+  visibility: hidden !important;
+}
+
+/* Target the specific element causing the white background */
+.v-list-item__bg {
+  background-color: transparent !important;
+  opacity: 0 !important;
+  visibility: hidden !important;
+}
+
+/* Force dark background for list items */
+.v-list-item {
+  background-color: #1E1E1E !important;
+}
+
+/* Force dark background for active list items */
+.v-list-item--active {
+  background-color: #333333 !important;
+}
+
+/* Force white text for list items */
+.v-list-item__content {
+  color: white !important;
+}
+
+/* Target the specific element in the dropdown */
+.v-select__content .v-list-item .v-list-item__underlay {
+  background-color: transparent !important;
+  opacity: 0 !important;
+  visibility: hidden !important;
+}
+
+/* Target the specific element in the dropdown */
+.v-select__content .v-list-item .v-list-item__overlay {
+  background-color: transparent !important;
+  opacity: 0 !important;
+  visibility: hidden !important;
+}
+
+/* Target the specific element in the dropdown */
+.v-select__content .v-list-item__bg {
+  background-color: transparent !important;
+  opacity: 0 !important;
+  visibility: hidden !important;
+}
+
+/* Force dark background for dropdown menu */
+.v-select__content {
+  background-color: #1E1E1E !important;
+}
+
+/* Force dark background for list */
+.v-list {
+  background-color: #1E1E1E !important;
+}
+
+/* Target the specific element in the data table footer */
+.v-data-table-footer .v-select__content .v-list-item .v-list-item__underlay {
+  background-color: transparent !important;
+  opacity: 0 !important;
+  visibility: hidden !important;
+}
+
+/* Target the specific element in the data table footer */
+.v-data-table-footer .v-select__content .v-list-item .v-list-item__overlay {
+  background-color: transparent !important;
+  opacity: 0 !important;
+  visibility: hidden !important;
+}
+
+/* Target the specific element in the data table footer */
+.v-data-table-footer .v-select__content .v-list-item__bg {
+  background-color: transparent !important;
+  opacity: 0 !important;
+  visibility: hidden !important;
+}
\ No newline at end of file
diff --git a/app/assets/dropdown-fix.css b/app/assets/dropdown-fix.css
new file mode 100644
index 00000000..6835c258
--- /dev/null
+++ b/app/assets/dropdown-fix.css
@@ -0,0 +1,40 @@
+/* Direct fix for the white background in the dropdown */
+
+/* Target the specific element causing the white background */
+.v-list-item__underlay {
+  display: none !important;
+}
+
+/* Override Vuetify's theme variables for list items */
+:root {
+  --v-theme-surface: #1E1E1E !important;
+  --v-theme-surface-variant: #2D2D2D !important;
+  --v-activated-opacity: 0 !important;
+  --v-selected-opacity: 0 !important;
+  --v-hover-opacity: 0 !important;
+}
+
+/* Force background colors for all list items */
+.v-list-item {
+  background-color: #1E1E1E !important;
+}
+
+/* Force background colors for active list items */
+.v-list-item--active {
+  background-color: #333333 !important;
+}
+
+/* Force text color for all list items */
+.v-list-item__content {
+  color: white !important;
+}
+
+/* Force background color for the dropdown menu */
+.v-menu__content {
+  background-color: #1E1E1E !important;
+}
+
+/* Force background color for the list */
+.v-list {
+  background-color: #1E1E1E !important;
+}
\ No newline at end of file
diff --git a/app/assets/final-dropdown-fix.css b/app/assets/final-dropdown-fix.css
new file mode 100644
index 00000000..e69de29b
diff --git a/app/assets/final-fix.css b/app/assets/final-fix.css
new file mode 100644
index 00000000..c8084cee
--- /dev/null
+++ b/app/assets/final-fix.css
@@ -0,0 +1,5 @@
+/* Final fix for the white background in the dropdown */
+.v-list-item__underlay {
+  background-color: transparent !important;
+  display: none !important;
+}
\ No newline at end of file
diff --git a/app/assets/vuetify-fix.css b/app/assets/vuetify-fix.css
new file mode 100644
index 00000000..582ed853
--- /dev/null
+++ b/app/assets/vuetify-fix.css
@@ -0,0 +1,66 @@
+/* Fix for Vuetify list item underlay */
+.v-list-item__underlay {
+  background-color: transparent !important;
+  opacity: 0 !important;
+}
+
+/* Fix for Vuetify list item overlay */
+.v-list-item__overlay {
+  background-color: transparent !important;
+  opacity: 0 !important;
+}
+
+/* Fix for Vuetify list item background */
+.v-list-item {
+  background-color: #1E1E1E !important;
+}
+
+/* Fix for Vuetify list item active background */
+.v-list-item--active {
+  background-color: #333333 !important;
+}
+
+/* Fix for Vuetify list item selected background */
+.v-list-item--selected {
+  background-color: #333333 !important;
+}
+
+/* Fix for Vuetify list item hover background */
+.v-list-item:hover {
+  background-color: #333333 !important;
+}
+
+/* Fix for Vuetify list item text color */
+.v-list-item__content {
+  color: #FFFFFF !important;
+}
+
+/* Fix for Vuetify list background */
+.v-list {
+  background-color: #1E1E1E !important;
+}
+
+/* Fix for Vuetify menu content background */
+.v-menu__content {
+  background-color: #1E1E1E !important;
+}
+
+/* Fix for Vuetify select content background */
+.v-select__content {
+  background-color: #1E1E1E !important;
+}
+
+/* Fix for Vuetify select list background */
+.v-select-list {
+  background-color: #1E1E1E !important;
+}
+
+/* Fix for Vuetify overlay content background */
+.v-overlay__content {
+  background-color: #1E1E1E !important;
+}
+
+/* Fix for Vuetify overlay scrim background */
+.v-overlay__scrim {
+  background-color: rgba(0, 0, 0, 0.5) !important;
+}
\ No newline at end of file
diff --git a/app/components/MainComponent.vue b/app/components/MainComponent.vue
index 62746517..225d6514 100644
--- a/app/components/MainComponent.vue
+++ b/app/components/MainComponent.vue
@@ -15,9 +15,6 @@
       
       <div class="d-flex align-center">
         <CopilotLogo />
-        <v-app-bar-title class="toolbar-title text-white ml-2">
-          <span class="text-subtitle-2 d-block">{{ displayName }}</span>
-        </v-app-bar-title>
       </div>
       
       <span v-if="mockedDataMessage" class="error-message text-caption px-2 py-1 rounded">{{ mockedDataMessage }}</span>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 3a7f5743..cc3b457a 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -37,7 +37,7 @@ export default defineNuxtConfig({
     },
   },
 
-  css: ['~/assets/global.css', '~/assets/background.css', '~/assets/date-range-fix.css'],
+  css: ['~/assets/global.css', '~/assets/background.css', '~/assets/date-range-fix.css', '~/assets/data-table-fix.css', '~/assets/data-table-fix-v2.css', '~/assets/data-table-fix-v3.css', '~/assets/vuetify-fix.css', '~/assets/dropdown-fix.css', '~/assets/final-fix.css', '~/assets/direct-fix.css', '~/assets/dropdown-direct-fix.css'],
   modules: ['@nuxt/fonts', 'vuetify-nuxt-module', '@nuxt/eslint', 'nuxt-auth-utils'],
 
   vuetify: {

From 13dfa0ba7d34370b4f1a57c3e5a32c20d181ee42 Mon Sep 17 00:00:00 2001
From: PseudoCoding <dphoude@gmail.com>
Date: Sat, 19 Jul 2025 13:08:09 -0400
Subject: [PATCH 11/13] More

---
 app/assets/background.css              |  84 ++++++-
 app/assets/light-theme.css             | 310 +++++++++++++++++++++++++
 app/components/AgentModeViewer.vue     |  82 +++----
 app/components/ApiResponse.vue         |   8 +-
 app/components/BreakdownComponent.vue  |  40 ++--
 app/components/CopilotChatViewer.vue   |  32 +--
 app/components/DashboardLayout.vue     |  10 +-
 app/components/DateRangeSelector.vue   |  48 ++--
 app/components/MainComponent.vue       |  44 ++--
 app/components/MetricCard.vue          |  45 ++--
 app/components/MetricsViewer.vue       |  56 ++---
 app/components/SeatsAnalysisViewer.vue |  22 +-
 app/components/WelcomeBanner.vue       |   8 +-
 nuxt.config.ts                         |   2 +-
 vuetify.config.ts                      |  20 +-
 15 files changed, 596 insertions(+), 215 deletions(-)
 create mode 100644 app/assets/light-theme.css

diff --git a/app/assets/background.css b/app/assets/background.css
index db58f182..4166ec54 100644
--- a/app/assets/background.css
+++ b/app/assets/background.css
@@ -1,5 +1,5 @@
 /* Background styling for the entire application */
-body {
+body.v-theme--dark {
   background-color: #121212;
   background-image: 
     radial-gradient(circle at 10% 20%, rgba(100, 216, 203, 0.05) 0%, transparent 30%),
@@ -9,13 +9,23 @@ body {
   min-height: 100vh;
 }
 
+body.v-theme--light {
+  background-color: #F5F7FA;
+  background-image: 
+    radial-gradient(circle at 10% 20%, rgba(38, 166, 154, 0.05) 0%, transparent 30%),
+    radial-gradient(circle at 90% 80%, rgba(123, 31, 162, 0.05) 0%, transparent 30%),
+    radial-gradient(circle at 50% 50%, rgba(77, 208, 225, 0.03) 0%, transparent 50%);
+  background-attachment: fixed;
+  min-height: 100vh;
+}
+
 /* Add subtle animated gradient to the main content area */
 .v-main {
   position: relative;
   overflow: hidden;
 }
 
-.v-main::before {
+.v-theme--dark .v-main::before {
   content: '';
   position: absolute;
   top: 0;
@@ -31,6 +41,22 @@ body {
   z-index: -1;
 }
 
+.v-theme--light .v-main::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(135deg, 
+    rgba(38, 166, 154, 0.02) 0%, 
+    rgba(77, 208, 225, 0.02) 50%, 
+    rgba(123, 31, 162, 0.02) 100%);
+  background-size: 400% 400%;
+  animation: gradientAnimation 15s ease infinite;
+  z-index: -1;
+}
+
 @keyframes gradientAnimation {
   0% { background-position: 0% 50%; }
   50% { background-position: 100% 50%; }
@@ -38,7 +64,7 @@ body {
 }
 
 /* Add subtle grid pattern overlay */
-.v-main::after {
+.v-theme--dark .v-main::after {
   content: '';
   position: absolute;
   top: 0;
@@ -52,30 +78,70 @@ body {
   z-index: -1;
 }
 
+.v-theme--light .v-main::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-image: 
+    linear-gradient(rgba(0, 0, 0, 0.01) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(0, 0, 0, 0.01) 1px, transparent 1px);
+  background-size: 20px 20px;
+  z-index: -1;
+}
+
 /* Add glow effects to cards and important elements */
-.v-card {
+.v-theme--dark .v-card {
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
 }
 
-.v-card:hover {
+.v-theme--dark .v-card:hover {
   box-shadow: 0 8px 30px rgba(100, 216, 203, 0.15) !important;
 }
 
+.v-theme--light .v-card {
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
+}
+
+.v-theme--light .v-card:hover {
+  box-shadow: 0 8px 30px rgba(38, 166, 154, 0.15) !important;
+}
+
 /* Custom scrollbar for the entire site */
-::-webkit-scrollbar {
+.v-theme--dark ::-webkit-scrollbar {
   width: 10px;
   height: 10px;
 }
 
-::-webkit-scrollbar-track {
+.v-theme--dark ::-webkit-scrollbar-track {
   background: #1a1a1a;
 }
 
-::-webkit-scrollbar-thumb {
+.v-theme--dark ::-webkit-scrollbar-thumb {
   background: linear-gradient(to bottom, #64D8CB, #9C64D8);
   border-radius: 5px;
 }
 
-::-webkit-scrollbar-thumb:hover {
+.v-theme--dark ::-webkit-scrollbar-thumb:hover {
   background: linear-gradient(to bottom, #8BE9FD, #64D8CB);
+}
+
+.v-theme--light ::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+.v-theme--light ::-webkit-scrollbar-track {
+  background: #f1f1f1;
+}
+
+.v-theme--light ::-webkit-scrollbar-thumb {
+  background: linear-gradient(to bottom, #26A69A, #7B1FA2);
+  border-radius: 5px;
+}
+
+.v-theme--light ::-webkit-scrollbar-thumb:hover {
+  background: linear-gradient(to bottom, #4DD0E1, #26A69A);
 }
\ No newline at end of file
diff --git a/app/assets/light-theme.css b/app/assets/light-theme.css
new file mode 100644
index 00000000..efe4b89e
--- /dev/null
+++ b/app/assets/light-theme.css
@@ -0,0 +1,310 @@
+/* Light Theme CSS Variables */
+.v-theme--light {
+  /* Light mode color palette */
+  --color-cyan-light: #4DD0E1;
+  --color-teal-light: #26A69A;
+  --color-purple-light: #7B1FA2;
+  --color-light-bg: #F5F7FA;
+  --color-card-bg-light: #FFFFFF;
+  --color-success-light: #4CAF50;
+  --color-warning-light: #FF9800;
+  --color-error-light: #F44336;
+  --color-text-light: #333333;
+  --color-text-muted-light: #666666;
+  
+  /* Light mode gradients */
+  --gradient-primary-light: linear-gradient(135deg, #26A69A 0%, #7B1FA2 100%);
+  --gradient-secondary-light: linear-gradient(135deg, #4DD0E1 0%, #26A69A 100%);
+  --gradient-accent-light: linear-gradient(135deg, #7B1FA2 0%, #4DD0E1 100%);
+  
+  /* Light mode shadows */
+  --shadow-sm-light: 0 2px 4px rgba(0, 0, 0, 0.05);
+  --shadow-md-light: 0 4px 8px rgba(0, 0, 0, 0.08);
+  --shadow-lg-light: 0 8px 16px rgba(0, 0, 0, 0.1);
+}
+
+/* Light Theme Overrides */
+.v-theme--light .v-card {
+  background-color: var(--color-card-bg-light) !important;
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  box-shadow: var(--shadow-sm-light) !important;
+}
+
+.v-theme--light .v-card:hover {
+  box-shadow: var(--shadow-md-light) !important;
+  border: 1px solid rgba(38, 166, 154, 0.2);
+}
+
+.v-theme--light .v-card__title {
+  color: var(--color-teal-light) !important;
+}
+
+.v-theme--light .v-tab {
+  color: var(--color-text-light) !important;
+}
+
+.v-theme--light .v-tab:hover::before {
+  background-color: rgba(38, 166, 154, 0.1) !important;
+}
+
+.v-theme--light .v-expansion-panel {
+  background-color: var(--color-card-bg-light) !important;
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  box-shadow: var(--shadow-sm-light) !important;
+}
+
+.v-theme--light .v-expansion-panel-title {
+  color: var(--color-text-light) !important;
+}
+
+.v-theme--light .v-expansion-panel-title:hover .v-expansion-panel-title__overlay {
+  background-color: rgba(38, 166, 154, 0.1) !important;
+}
+
+.v-theme--light .v-expansion-panel-text__wrapper {
+  background-color: var(--color-card-bg-light) !important;
+}
+
+.v-theme--light .v-btn--elevated {
+  background: var(--gradient-primary-light) !important;
+}
+
+.v-theme--light .date-range-selector {
+  background-color: var(--color-card-bg-light);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  box-shadow: var(--shadow-sm-light);
+}
+
+.v-theme--light .chart-container {
+  background-color: var(--color-card-bg-light);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  box-shadow: var(--shadow-sm-light);
+}
+
+.v-theme--light .v-data-table {
+  background-color: var(--color-card-bg-light) !important;
+  box-shadow: var(--shadow-sm-light) !important;
+}
+
+.v-theme--light .v-data-table__thead {
+  background-color: rgba(38, 166, 154, 0.05);
+}
+
+.v-theme--light .v-data-table__th {
+  color: var(--color-teal-light) !important;
+}
+
+.v-theme--light .metric-card::before {
+  background: var(--gradient-primary-light);
+}
+
+.v-theme--light ::-webkit-scrollbar-track {
+  background: #f1f1f1;
+}
+
+.v-theme--light ::-webkit-scrollbar-thumb {
+  background: var(--color-teal-light);
+}
+
+.v-theme--light ::-webkit-scrollbar-thumb:hover {
+  background: var(--color-cyan-light);
+}
+
+.v-theme--light .text-primary {
+  color: var(--color-teal-light) !important;
+}
+
+.v-theme--light .text-secondary {
+  color: var(--color-cyan-light) !important;
+}
+
+.v-theme--light .text-accent {
+  color: var(--color-purple-light) !important;
+}
+
+.v-theme--light .text-success {
+  color: var(--color-success-light) !important;
+}
+
+.v-theme--light .text-warning {
+  color: var(--color-warning-light) !important;
+}
+
+.v-theme--light .text-error {
+  color: var(--color-error-light) !important;
+}
+
+.v-theme--light .bg-primary {
+  background-color: var(--color-teal-light) !important;
+}
+
+.v-theme--light .bg-secondary {
+  background-color: var(--color-cyan-light) !important;
+}
+
+.v-theme--light .bg-accent {
+  background-color: var(--color-purple-light) !important;
+}
+
+.v-theme--light .bg-gradient-primary {
+  background: var(--gradient-primary-light) !important;
+}
+
+.v-theme--light .bg-gradient-secondary {
+  background: var(--gradient-secondary-light) !important;
+}
+
+.v-theme--light .bg-gradient-accent {
+  background: var(--gradient-accent-light) !important;
+}
+
+.v-theme--light .v-chip {
+  background: var(--gradient-primary-light) !important;
+}
+
+.v-theme--light .v-progress-circular {
+  color: var(--color-teal-light) !important;
+}
+
+.v-theme--light .v-progress-linear {
+  background-color: rgba(38, 166, 154, 0.2) !important;
+}
+
+.v-theme--light .v-progress-linear__determinate {
+  background: var(--gradient-primary-light) !important;
+}
+
+.v-theme--light .v-switch__track {
+  background-color: rgba(38, 166, 154, 0.2) !important;
+}
+
+.v-theme--light .v-switch--active .v-switch__track {
+  background-color: var(--color-teal-light) !important;
+}
+
+/* Light theme specific styles for metric cards */
+.v-theme--light .metric-card {
+  background-color: white !important;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
+  border: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.v-theme--light .metric-card:hover {
+  box-shadow: 0 4px 12px rgba(38, 166, 154, 0.15) !important;
+  border: 1px solid rgba(38, 166, 154, 0.2);
+}
+
+.v-theme--light .card-accent {
+  background: linear-gradient(90deg, #4DD0E1, #26A69A, #7B1FA2) !important;
+}
+
+.v-theme--light .text-h4 {
+  background: linear-gradient(90deg, #4DD0E1, #26A69A, #7B1FA2);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  color: transparent;
+  font-weight: 700 !important;
+}
+
+/* Light theme navigation drawer */
+.v-theme--light .navigation-drawer {
+  background-color: white !important;
+  border-right: 1px solid rgba(38, 166, 154, 0.2);
+}
+
+.v-theme--light .drawer-list {
+  background-color: white !important;
+}
+
+.v-theme--light .custom-menu-item {
+  color: #333333;
+}
+
+.v-theme--light .custom-menu-item:hover {
+  background-color: rgba(38, 166, 154, 0.05);
+}
+
+.v-theme--light .custom-menu-item-active {
+  background-color: #E8F5F5 !important;
+  border-left: 3px solid #26A69A;
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
+}
+
+.v-theme--light .custom-menu-item-active .menu-icon {
+  color: #26A69A;
+}
+
+.v-theme--light .custom-menu-item-active .menu-text {
+  color: #333333;
+  font-weight: 700;
+}
+
+.v-theme--light .drawer-header :deep(.v-list-item-title) {
+  color: #26A69A !important;
+}
+
+.v-theme--light .drawer-header :deep(.v-list-item-subtitle) {
+  color: rgba(0, 0, 0, 0.7) !important;
+}
+
+.v-theme--light .drawer-divider {
+  border-color: rgba(38, 166, 154, 0.1) !important;
+}
+
+/* Light theme chart styles */
+.v-theme--light .chart-title {
+  color: #26A69A;
+  text-shadow: none;
+}
+
+.v-theme--light .breakdown-title {
+  color: #26A69A;
+  text-shadow: none;
+}
+
+.v-theme--light .tooltip-card {
+  background-color: rgba(255, 255, 255, 0.95) !important;
+  border: 1px solid rgba(38, 166, 154, 0.3);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.v-theme--light .tooltip-text {
+  color: #333333 !important;
+}
+
+/* Light theme app header */
+.v-theme--light .app-header {
+  background: linear-gradient(135deg, #26A69A 0%, #7B1FA2 100%) !important;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
+}
+
+.v-theme--light .app-header::after {
+  background: linear-gradient(90deg, #4DD0E1, #26A69A, #7B1FA2);
+}
+
+/* Light theme welcome banner */
+.v-theme--light .section-heading {
+  color: #333333;
+}
+
+.v-theme--light .section-title {
+  color: #333333 !important;
+  text-shadow: none;
+}
+
+.v-theme--light .custom-date-badge {
+  background-color: white;
+  color: #333333;
+  border: 2px solid #26A69A;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.v-theme--light .date-icon {
+  color: #26A69A;
+}
+
+.v-theme--light .date-text {
+  color: #333333;
+  text-shadow: none;
+}
\ No newline at end of file
diff --git a/app/components/AgentModeViewer.vue b/app/components/AgentModeViewer.vue
index 5427db8a..2ea12eaa 100644
--- a/app/components/AgentModeViewer.vue
+++ b/app/components/AgentModeViewer.vue
@@ -124,7 +124,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, watch, type PropType, shallowRef } from 'vue';
+import { defineComponent, ref, watch, type PropType, shallowRef, computed } from 'vue';
 import type { CopilotMetrics } from '@/model/Copilot_Metrics';
 import { Options } from '@/model/Options';
 import { useRoute } from 'vue-router';
@@ -390,7 +390,7 @@ export default defineComponent({
         ];
 
         // Optimized chart options with performance settings
-        const chartOptions = {
+        const chartOptions = computed(() => ({
             responsive: true,
             maintainAspectRatio: false,
             animation: {
@@ -401,43 +401,45 @@ export default defineComponent({
                     beginAtZero: true,
                     title: {
                         display: true,
-                        text: 'Users with Activity'
+                        text: 'Users with Activity',
+                        color: props.isDarkTheme ? '#F8F8F2' : '#333333'
                     },
                     ticks: {
-                        color: '#BFBFBF'
+                        color: props.isDarkTheme ? '#BFBFBF' : '#666666'
                     },
                     grid: {
-                        color: 'rgba(255, 255, 255, 0.1)'
+                        color: props.isDarkTheme ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'
                     }
                 },
                 x: {
                     ticks: {
-                        color: '#BFBFBF'
+                        color: props.isDarkTheme ? '#BFBFBF' : '#666666'
                     },
                     grid: {
-                        color: 'rgba(255, 255, 255, 0.1)'
+                        color: props.isDarkTheme ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'
                     }
                 }
             },
             plugins: {
                 title: {
                     display: true,
-                    text: 'Copilot Feature Usage Over Time'
+                    text: 'Copilot Feature Usage Over Time',
+                    color: props.isDarkTheme ? '#F8F8F2' : '#333333'
                 },
                 legend: {
                     display: true,
                     position: 'top' as const,
                     labels: {
-                        color: '#F8F8F2',
+                        color: props.isDarkTheme ? '#F8F8F2' : '#333333',
                         font: {
                             size: 12
                         }
                     }
                 },
                 tooltip: {
-                    backgroundColor: 'rgba(30, 30, 30, 0.8)',
-                    titleColor: '#8BE9FD',
-                    bodyColor: '#F8F8F2',
+                    backgroundColor: props.isDarkTheme ? 'rgba(30, 30, 30, 0.8)' : 'rgba(255, 255, 255, 0.9)',
+                    titleColor: props.isDarkTheme ? '#8BE9FD' : '#26A69A',
+                    bodyColor: props.isDarkTheme ? '#F8F8F2' : '#333333',
                     borderColor: 'rgba(100, 216, 203, 0.3)',
                     borderWidth: 1
                 }
@@ -450,9 +452,9 @@ export default defineComponent({
                     tension: 0.4 // Add curve to all line charts
                 }
             }
-        };
+        }));
 
-        const barChartOptions = {
+        const barChartOptions = computed(() => ({
             responsive: true,
             maintainAspectRatio: false,
             animation: {
@@ -463,43 +465,45 @@ export default defineComponent({
                     beginAtZero: true,
                     title: {
                         display: true,
-                        text: 'Number of Models'
+                        text: 'Number of Models',
+                        color: props.isDarkTheme ? '#F8F8F2' : '#333333'
                     },
                     ticks: {
-                        color: '#BFBFBF'
+                        color: props.isDarkTheme ? '#BFBFBF' : '#666666'
                     },
                     grid: {
-                        color: 'rgba(255, 255, 255, 0.1)'
+                        color: props.isDarkTheme ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'
                     }
                 },
                 x: {
                     ticks: {
-                        color: '#BFBFBF'
+                        color: props.isDarkTheme ? '#BFBFBF' : '#666666'
                     },
                     grid: {
-                        color: 'rgba(255, 255, 255, 0.1)'
+                        color: props.isDarkTheme ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'
                     }
                 }
             },
             plugins: {
                 title: {
                     display: true,
-                    text: 'Model Usage Distribution'
+                    text: 'Model Usage Distribution',
+                    color: props.isDarkTheme ? '#F8F8F2' : '#333333'
                 },
                 legend: {
                     display: true,
                     position: 'top' as const,
                     labels: {
-                        color: '#F8F8F2',
+                        color: props.isDarkTheme ? '#F8F8F2' : '#333333',
                         font: {
                             size: 12
                         }
                     }
                 },
                 tooltip: {
-                    backgroundColor: 'rgba(30, 30, 30, 0.8)',
-                    titleColor: '#8BE9FD',
-                    bodyColor: '#F8F8F2',
+                    backgroundColor: props.isDarkTheme ? 'rgba(30, 30, 30, 0.8)' : 'rgba(255, 255, 255, 0.9)',
+                    titleColor: props.isDarkTheme ? '#8BE9FD' : '#26A69A',
+                    bodyColor: props.isDarkTheme ? '#F8F8F2' : '#333333',
                     borderColor: 'rgba(100, 216, 203, 0.3)',
                     borderWidth: 1
                 }
@@ -507,7 +511,7 @@ export default defineComponent({
             interaction: {
                 intersect: false
             }
-        };
+        }));
 
         return {
             stats,
@@ -530,18 +534,18 @@ export default defineComponent({
 }
 
 .chart-title {
-  color: #8BE9FD;
+  color: v-bind('isDarkTheme ? "#8BE9FD" : "#26A69A"');
   font-weight: 700;
   font-size: 1.5rem;
   margin: 16px 0;
-  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+  text-shadow: v-bind('isDarkTheme ? "0 2px 4px rgba(0, 0, 0, 0.5)" : "none"');
   position: relative;
   z-index: 2;
 }
 
 .chart-container {
-  background-color: rgba(18, 18, 18, 0.8) !important;
-  border: 1px solid rgba(255, 255, 255, 0.05);
+  background-color: v-bind('isDarkTheme ? "rgba(18, 18, 18, 0.8)" : "rgba(255, 255, 255, 0.8)"') !important;
+  border: 1px solid v-bind('isDarkTheme ? "rgba(255, 255, 255, 0.05)" : "rgba(0, 0, 0, 0.05)"');
   border-radius: 12px;
   padding: 24px;
   margin-bottom: 32px;
@@ -555,27 +559,27 @@ export default defineComponent({
 
 .v-expansion-panel {
   margin-bottom: 8px;
-  background-color: rgba(18, 18, 18, 0.8) !important;
-  border: 1px solid rgba(255, 255, 255, 0.05);
+  background-color: v-bind('isDarkTheme ? "rgba(18, 18, 18, 0.8)" : "rgba(255, 255, 255, 0.8)"') !important;
+  border: 1px solid v-bind('isDarkTheme ? "rgba(255, 255, 255, 0.05)" : "rgba(0, 0, 0, 0.05)"');
 }
 
 :deep(.v-expansion-panel-title) {
-  color: #8BE9FD !important;
+  color: v-bind('isDarkTheme ? "#8BE9FD" : "#26A69A"') !important;
 }
 
 :deep(.v-data-table) {
-  background-color: rgba(18, 18, 18, 0.8) !important;
-  border: 1px solid rgba(255, 255, 255, 0.05);
+  background-color: v-bind('isDarkTheme ? "rgba(18, 18, 18, 0.8)" : "rgba(255, 255, 255, 0.8)"') !important;
+  border: 1px solid v-bind('isDarkTheme ? "rgba(255, 255, 255, 0.05)" : "rgba(0, 0, 0, 0.05)"');
   border-radius: 12px;
   overflow: hidden;
 }
 
 :deep(.v-data-table__thead) {
-  background-color: rgba(100, 216, 203, 0.1) !important;
+  background-color: v-bind('isDarkTheme ? "rgba(100, 216, 203, 0.1)" : "rgba(100, 216, 203, 0.05)"') !important;
 }
 
 :deep(.v-data-table__thead th) {
-  color: #8BE9FD !important;
+  color: v-bind('isDarkTheme ? "#8BE9FD" : "#26A69A"') !important;
   font-weight: 600 !important;
   font-size: 0.8rem !important;
   text-transform: uppercase;
@@ -583,16 +587,16 @@ export default defineComponent({
 }
 
 :deep(.v-data-table__tbody tr) {
-  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  border-bottom: 1px solid v-bind('isDarkTheme ? "rgba(255, 255, 255, 0.05)" : "rgba(0, 0, 0, 0.05)"');
 }
 
 :deep(.v-data-table__tbody td) {
-  color: #F8F8F2 !important;
+  color: v-bind('isDarkTheme ? "#F8F8F2" : "#333333"') !important;
   padding: 12px 16px;
 }
 
 :deep(.v-data-table__tbody tr:hover) {
-  background-color: rgba(100, 216, 203, 0.05) !important;
+  background-color: v-bind('isDarkTheme ? "rgba(100, 216, 203, 0.05)" : "rgba(100, 216, 203, 0.1)"') !important;
 }
 
 :deep(.chartjs-render-monitor) {
diff --git a/app/components/ApiResponse.vue b/app/components/ApiResponse.vue
index 1682783d..0ded0910 100644
--- a/app/components/ApiResponse.vue
+++ b/app/components/ApiResponse.vue
@@ -53,6 +53,10 @@ export default defineComponent({
     seats: {
       type: Array,
       required: true
+    },
+    isDarkTheme: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -202,10 +206,10 @@ export default defineComponent({
   font-family: Roboto, sans-serif;
 }
 .copy-message.error {
-  color: red;
+  color: v-bind('isDarkTheme ? "#FF5252" : "#FF0000"');
 }
 .copy-message:not(.error) {
-  color: darkgreen;
+  color: v-bind('isDarkTheme ? "#50FA7B" : "#006400"');
 }
 .fade-enter-active, .fade-leave-active {
   transition: opacity 0.5s;
diff --git a/app/components/BreakdownComponent.vue b/app/components/BreakdownComponent.vue
index 07fca82d..da01eddf 100644
--- a/app/components/BreakdownComponent.vue
+++ b/app/components/BreakdownComponent.vue
@@ -78,7 +78,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, toRef, watch } from 'vue';
+import { defineComponent, ref, toRef, watch, computed } from 'vue';
 import type { Metrics } from '@/model/Metrics';
 import { Breakdown } from '@/model/Breakdown';
 import { Pie } from 'vue-chartjs'
@@ -153,13 +153,13 @@ export default defineComponent({
     //Acceptance Rate by counts for top 5 by accepted prompts
     const breakdownsChartDataTop5AcceptedPromptsByCounts = ref<{ labels: string[]; datasets: any[] }>({ labels: [], datasets: [] });
 
-    const chartOptions = {
+    const chartOptions = computed(() => ({
       responsive: true,
       maintainAspectRatio: true,
       plugins: {
         legend: {
           labels: {
-            color: '#F8F8F2',  // Light text color for better readability
+            color: props.isDarkTheme ? '#F8F8F2' : '#333333',  // Text color based on theme
             font: {
               size: 12
             }
@@ -167,14 +167,14 @@ export default defineComponent({
           position: 'bottom'
         },
         tooltip: {
-          backgroundColor: 'rgba(30, 30, 30, 0.8)',
-          titleColor: '#8BE9FD',
-          bodyColor: '#F8F8F2',
+          backgroundColor: props.isDarkTheme ? 'rgba(30, 30, 30, 0.8)' : 'rgba(255, 255, 255, 0.9)',
+          titleColor: props.isDarkTheme ? '#8BE9FD' : '#26A69A',
+          bodyColor: props.isDarkTheme ? '#F8F8F2' : '#333333',
           borderColor: 'rgba(100, 216, 203, 0.3)',
           borderWidth: 1
         }
       }
-    };
+    }));
 
     // Updated color palette to match the site theme
     const pieChartColors = ref([
@@ -301,8 +301,8 @@ export default defineComponent({
   overflow: hidden;
   transition: transform 0.3s, box-shadow 0.3s;
   border-radius: 12px;
-  background-color: rgba(18, 18, 18, 0.8) !important;
-  border: 1px solid rgba(255, 255, 255, 0.05);
+  background-color: v-bind('isDarkTheme ? "rgba(18, 18, 18, 0.8)" : "rgba(255, 255, 255, 0.8)"') !important;
+  border: 1px solid v-bind('isDarkTheme ? "rgba(255, 255, 255, 0.05)" : "rgba(0, 0, 0, 0.05)"');
   backdrop-filter: blur(10px);
   height: 100%;
 }
@@ -329,22 +329,22 @@ export default defineComponent({
 }
 
 .text-subtitle-1 {
-  color: #8BE9FD !important;
+  color: v-bind('isDarkTheme ? "#8BE9FD" : "#26A69A"') !important;
 }
 
 .breakdown-title {
-  color: #8BE9FD;
+  color: v-bind('isDarkTheme ? "#8BE9FD" : "#26A69A"');
   font-weight: 700;
   font-size: 1.5rem;
   margin: 16px 0;
-  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+  text-shadow: v-bind('isDarkTheme ? "0 2px 4px rgba(0, 0, 0, 0.5)" : "none"');
   position: relative;
   z-index: 2;
 }
 
 .chart-container {
-  background-color: rgba(18, 18, 18, 0.8) !important;
-  border: 1px solid rgba(255, 255, 255, 0.05);
+  background-color: v-bind('isDarkTheme ? "rgba(18, 18, 18, 0.8)" : "rgba(255, 255, 255, 0.8)"') !important;
+  border: 1px solid v-bind('isDarkTheme ? "rgba(255, 255, 255, 0.05)" : "rgba(0, 0, 0, 0.05)"');
   border-radius: 12px;
   padding: 24px;
   margin-bottom: 32px;
@@ -352,18 +352,18 @@ export default defineComponent({
 
 /* Data table styling for better readability */
 .data-table {
-  background-color: rgba(18, 18, 18, 0.8) !important;
-  border: 1px solid rgba(255, 255, 255, 0.05);
+  background-color: v-bind('isDarkTheme ? "rgba(18, 18, 18, 0.8)" : "rgba(255, 255, 255, 0.8)"') !important;
+  border: 1px solid v-bind('isDarkTheme ? "rgba(255, 255, 255, 0.05)" : "rgba(0, 0, 0, 0.05)"');
   border-radius: 12px;
   overflow: hidden;
 }
 
 :deep(.v-data-table__thead) {
-  background-color: rgba(100, 216, 203, 0.1) !important;
+  background-color: v-bind('isDarkTheme ? "rgba(100, 216, 203, 0.1)" : "rgba(100, 216, 203, 0.05)"') !important;
 }
 
 :deep(.v-data-table__thead th) {
-  color: #8BE9FD !important;
+  color: v-bind('isDarkTheme ? "#8BE9FD" : "#26A69A"') !important;
   font-weight: 600 !important;
   font-size: 0.8rem !important;
   text-transform: uppercase;
@@ -371,11 +371,11 @@ export default defineComponent({
 }
 
 .data-table-row {
-  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  border-bottom: 1px solid v-bind('isDarkTheme ? "rgba(255, 255, 255, 0.05)" : "rgba(0, 0, 0, 0.05)"');
 }
 
 .data-table-cell {
-  color: #F8F8F2 !important;
+  color: v-bind('isDarkTheme ? "#F8F8F2" : "#333333"') !important;
   padding: 12px 16px;
 }
 
diff --git a/app/components/CopilotChatViewer.vue b/app/components/CopilotChatViewer.vue
index bf651d43..ee046c01 100644
--- a/app/components/CopilotChatViewer.vue
+++ b/app/components/CopilotChatViewer.vue
@@ -37,7 +37,7 @@
 </template>
   
 <script lang="ts">
-  import { defineComponent, ref, toRef } from 'vue';
+  import { defineComponent, ref, toRef, computed } from 'vue';
   import type { Metrics } from '@/model/Metrics';
   import { Line, Bar } from 'vue-chartjs';
   import MetricCard from './MetricCard.vue';
@@ -96,7 +96,7 @@ setup(props) {
     const totalActiveCopilotChatUsersChartData = ref<{ labels: string[]; datasets: any[] }>({ labels: [], datasets: [] });  
 
     // Use consistent chart options for both charts
-    const chartOptions = {
+    const chartOptions = computed(() => ({
         responsive: true,
         maintainAspectRatio: false,
         height: 400,
@@ -104,16 +104,16 @@ setup(props) {
             legend: {
                 position: 'top',
                 labels: {
-                    color: '#F8F8F2',
+                    color: props.isDarkTheme ? '#F8F8F2' : '#333333',
                     font: {
                         size: 12
                     }
                 }
             },
             tooltip: {
-                backgroundColor: 'rgba(30, 30, 30, 0.8)',
-                titleColor: '#8BE9FD',
-                bodyColor: '#F8F8F2',
+                backgroundColor: props.isDarkTheme ? 'rgba(30, 30, 30, 0.8)' : 'rgba(255, 255, 255, 0.9)',
+                titleColor: props.isDarkTheme ? '#8BE9FD' : '#26A69A',
+                bodyColor: props.isDarkTheme ? '#F8F8F2' : '#333333',
                 borderColor: 'rgba(100, 216, 203, 0.3)',
                 borderWidth: 1
             }
@@ -122,18 +122,18 @@ setup(props) {
             y: {
                 beginAtZero: true,
                 ticks: {
-                    color: '#BFBFBF'
+                    color: props.isDarkTheme ? '#BFBFBF' : '#666666'
                 },
                 grid: {
-                    color: 'rgba(255, 255, 255, 0.1)'
+                    color: props.isDarkTheme ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'
                 }
             },
             x: {
                 ticks: {
-                    color: '#BFBFBF'
+                    color: props.isDarkTheme ? '#BFBFBF' : '#666666'
                 },
                 grid: {
-                    color: 'rgba(255, 255, 255, 0.1)'
+                    color: props.isDarkTheme ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'
                 }
             }
         },
@@ -142,10 +142,10 @@ setup(props) {
                 tension: 0.4 // Add curve to all line charts
             }
         }
-    };
+    }));
     
     // Use the same options for both charts for consistent alignment
-    const totalActiveChatUsersChartOptions = { ...chartOptions };
+    const totalActiveChatUsersChartOptions = computed(() => chartOptions.value);
 
     //Total Number Acceptances And Turns
     const totalNumberAcceptancesAndTurnsChartData = ref<{ labels: string[]; datasets: any[] }>({ labels: [], datasets: [] });
@@ -209,18 +209,18 @@ setup(props) {
 
 <style scoped>
 .chart-title {
-  color: #8BE9FD;
+  color: v-bind('isDarkTheme ? "#8BE9FD" : "#26A69A"');
   font-weight: 700;
   font-size: 1.5rem;
   margin: 16px 0;
-  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+  text-shadow: v-bind('isDarkTheme ? "0 2px 4px rgba(0, 0, 0, 0.5)" : "none"');
   position: relative;
   z-index: 2;
 }
 
 .chart-container {
-  background-color: rgba(18, 18, 18, 0.8) !important;
-  border: 1px solid rgba(255, 255, 255, 0.05);
+  background-color: v-bind('isDarkTheme ? "rgba(18, 18, 18, 0.8)" : "rgba(255, 255, 255, 0.8)"') !important;
+  border: 1px solid v-bind('isDarkTheme ? "rgba(255, 255, 255, 0.05)" : "rgba(0, 0, 0, 0.05)"');
   border-radius: 12px;
   padding: 24px;
   margin-bottom: 32px;
diff --git a/app/components/DashboardLayout.vue b/app/components/DashboardLayout.vue
index a7ed926b..c891bf6f 100644
--- a/app/components/DashboardLayout.vue
+++ b/app/components/DashboardLayout.vue
@@ -143,18 +143,18 @@ function formatNumber(num: number): string {
 }
 
 .section-title {
-  color: white !important;
   font-weight: 700;
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
   position: relative;
   z-index: 2;
+  color: v-bind('isDarkTheme ? "#FFFFFF" : "#333333"') !important;
 }
 
 .custom-date-badge {
   display: inline-flex;
   align-items: center;
-  background-color: #000000;
-  color: #FFFFFF;
+  background-color: v-bind('isDarkTheme ? "#000000" : "#FFFFFF"');
+  color: v-bind('isDarkTheme ? "#FFFFFF" : "#333333"');
   font-weight: 700;
   border: 2px solid #8BE9FD;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7);
@@ -170,9 +170,9 @@ function formatNumber(num: number): string {
 }
 
 .date-text {
-  color: #FFFFFF;
+  color: v-bind('isDarkTheme ? "#FFFFFF" : "#333333"');
   font-weight: 700;
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
+  text-shadow: v-bind('isDarkTheme ? "0 1px 2px rgba(0, 0, 0, 0.8)" : "none"');
   letter-spacing: 0.5px;
   font-size: 0.9rem;
 }
diff --git a/app/components/DateRangeSelector.vue b/app/components/DateRangeSelector.vue
index 253f1cd7..0d7b090b 100644
--- a/app/components/DateRangeSelector.vue
+++ b/app/components/DateRangeSelector.vue
@@ -17,7 +17,7 @@
           density="comfortable"
           prepend-inner-icon="mdi-calendar-start"
           color="secondary"
-          bg-color="rgba(139, 233, 253, 0.05)"
+          :bg-color="$vuetify.theme.global.name === 'dark' ? 'rgba(139, 233, 253, 0.05)' : 'rgba(38, 166, 154, 0.05)'"
           @update:model-value="updateDateRange"
           hide-details
           class="date-field"
@@ -32,7 +32,7 @@
           density="comfortable"
           prepend-inner-icon="mdi-calendar-end"
           color="secondary"
-          bg-color="rgba(139, 233, 253, 0.05)"
+          :bg-color="$vuetify.theme.global.name === 'dark' ? 'rgba(139, 233, 253, 0.05)' : 'rgba(38, 166, 154, 0.05)'"
           @update:model-value="updateDateRange"
           hide-details
           class="date-field"
@@ -70,10 +70,9 @@
           color="primary"
           variant="flat"
           size="large"
-          class="mr-3"
+          class="mr-3 days-28-button"
           prepend-icon="mdi-refresh"
           @click="resetToDefault"
-          style="background-color: #1976D2 !important; color: white !important; font-weight: 600 !important;"
         >
           Last 28 Days
         </v-btn>
@@ -224,57 +223,66 @@ onMounted(() => {
 .date-range-selector {
   border-radius: var(--border-radius-md);
   transition: all var(--transition-speed);
-  background-color: rgba(18, 18, 18, 0.8) !important;
-  border: 1px solid rgba(139, 233, 253, 0.1);
+  background-color: v-bind('$vuetify.theme.global.name === "dark" ? "rgba(18, 18, 18, 0.8)" : "rgba(255, 255, 255, 0.8)"') !important;
+  border: 1px solid v-bind('$vuetify.theme.global.name === "dark" ? "rgba(139, 233, 253, 0.1)" : "rgba(38, 166, 154, 0.1)"');
   backdrop-filter: blur(10px);
 }
 
 .date-range-selector:hover {
-  box-shadow: 0 8px 24px rgba(100, 216, 203, 0.15) !important;
-  border: 1px solid rgba(139, 233, 253, 0.2);
+  box-shadow: v-bind('$vuetify.theme.global.name === "dark" ? "0 8px 24px rgba(100, 216, 203, 0.15)" : "0 8px 24px rgba(38, 166, 154, 0.15)"') !important;
+  border: 1px solid v-bind('$vuetify.theme.global.name === "dark" ? "rgba(139, 233, 253, 0.2)" : "rgba(38, 166, 154, 0.2)"');
 }
 
 .date-field :deep(.v-field__input) {
-  color: #8BE9FD !important;
+  color: v-bind('$vuetify.theme.global.name === "dark" ? "#8BE9FD" : "#333333"') !important;
+  font-weight: 500;
 }
 
 .date-field :deep(.v-field__outline) {
-  color: rgba(139, 233, 253, 0.2) !important;
+  color: v-bind('$vuetify.theme.global.name === "dark" ? "rgba(139, 233, 253, 0.2)" : "rgba(38, 166, 154, 0.3)"') !important;
 }
 
 .date-field :deep(.v-field__outline__start),
 .date-field :deep(.v-field__outline__end),
 .date-field :deep(.v-field__outline__notch) {
-  border-color: rgba(139, 233, 253, 0.2) !important;
+  border-color: v-bind('$vuetify.theme.global.name === "dark" ? "rgba(139, 233, 253, 0.2)" : "rgba(38, 166, 154, 0.3)"') !important;
 }
 
 .date-field:hover :deep(.v-field__outline__start),
 .date-field:hover :deep(.v-field__outline__end),
 .date-field:hover :deep(.v-field__outline__notch) {
-  border-color: rgba(139, 233, 253, 0.4) !important;
+  border-color: v-bind('$vuetify.theme.global.name === "dark" ? "rgba(139, 233, 253, 0.4)" : "rgba(38, 166, 154, 0.5)"') !important;
+}
+
+.date-field :deep(.v-field__prepend-inner) {
+  color: v-bind('$vuetify.theme.global.name === "dark" ? "#8BE9FD" : "#26A69A"') !important;
+}
+
+.date-field :deep(.v-label) {
+  color: v-bind('$vuetify.theme.global.name === "dark" ? "rgba(255, 255, 255, 0.7)" : "rgba(0, 0, 0, 0.7)"') !important;
 }
 
 .date-chip {
   background: transparent !important;
-  border: 1px solid rgba(139, 233, 253, 0.3) !important;
-  color: #8BE9FD !important;
+  border: 1px solid v-bind('$vuetify.theme.global.name === "dark" ? "rgba(139, 233, 253, 0.3)" : "rgba(38, 166, 154, 0.3)"') !important;
+  color: v-bind('$vuetify.theme.global.name === "dark" ? "#8BE9FD" : "#26A69A"') !important;
 }
 
 .apply-button {
-  background-color: #1976D2 !important;
+  background-color: v-bind('$vuetify.theme.global.name === "dark" ? "#1976D2" : "#26A69A"') !important;
   color: white !important;
   font-weight: 600 !important;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
+  box-shadow: v-bind('$vuetify.theme.global.name === "dark" ? "0 2px 8px rgba(0, 0, 0, 0.3)" : "0 2px 8px rgba(0, 0, 0, 0.15)"') !important;
   border: 1px solid rgba(255, 255, 255, 0.2) !important;
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+  text-shadow: v-bind('$vuetify.theme.global.name === "dark" ? "0 1px 2px rgba(0, 0, 0, 0.5)" : "none"');
 }
 
 .days-28-button {
-  background-color: #0D47A1 !important;
+  background-color: v-bind('$vuetify.theme.global.name === "dark" ? "#0D47A1" : "#00897B"') !important;
   color: white !important;
   font-weight: 600 !important;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
+  box-shadow: v-bind('$vuetify.theme.global.name === "dark" ? "0 2px 8px rgba(0, 0, 0, 0.3)" : "0 2px 8px rgba(0, 0, 0, 0.15)"') !important;
   border: 1px solid rgba(255, 255, 255, 0.2) !important;
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+  text-shadow: v-bind('$vuetify.theme.global.name === "dark" ? "0 1px 2px rgba(0, 0, 0, 0.5)" : "none"');
 }
 </style>
\ No newline at end of file
diff --git a/app/components/MainComponent.vue b/app/components/MainComponent.vue
index 225d6514..af4436f6 100644
--- a/app/components/MainComponent.vue
+++ b/app/components/MainComponent.vue
@@ -9,7 +9,7 @@
     >
       <v-app-bar-nav-icon 
         @click="drawer = !drawer" 
-        class="text-white hamburger-icon"
+        class="hamburger-icon"
         size="large"
       ></v-app-bar-nav-icon>
       
@@ -516,8 +516,8 @@ export default defineNuxtComponent({
 
 .app-header {
   border-bottom: 3px solid rgba(255, 255, 255, 0.2);
-  background: linear-gradient(135deg, #64D8CB 0%, #9C64D8 100%) !important;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
+  background: v-bind('isDarkTheme ? "linear-gradient(135deg, #64D8CB 0%, #9C64D8 100%)" : "linear-gradient(135deg, #26A69A 0%, #7B1FA2 100%)"') !important;
+  box-shadow: v-bind('isDarkTheme ? "0 4px 12px rgba(0, 0, 0, 0.4)" : "0 4px 12px rgba(0, 0, 0, 0.2)"') !important;
   position: relative;
   z-index: 10;
 }
@@ -529,22 +529,12 @@ export default defineNuxtComponent({
   left: 0;
   right: 0;
   height: 3px;
-  background: linear-gradient(90deg, #8BE9FD, #64D8CB, #9C64D8);
+  background: v-bind('isDarkTheme ? "linear-gradient(90deg, #8BE9FD, #64D8CB, #9C64D8)" : "linear-gradient(90deg, #4DD0E1, #26A69A, #7B1FA2)"');
   background-size: 200% 100%;
   animation: shimmer 2s infinite;
   z-index: 11;
 }
 
-.v-theme--dark .app-header {
-  background: linear-gradient(135deg, #64D8CB 0%, #9C64D8 100%) !important;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
-}
-
-.v-theme--dark .app-header::after {
-  background: linear-gradient(90deg, #8BE9FD, #64D8CB, #9C64D8);
-  background-size: 200% 100%;
-}
-
 @keyframes shimmer {
   0% { background-position: 0% 0; }
   100% { background-position: 200% 0; }
@@ -558,13 +548,15 @@ export default defineNuxtComponent({
 }
 
 .hamburger-icon {
-  background-color: rgba(255, 255, 255, 0.1);
+  background-color: rgba(255, 255, 255, 0.2);
   border-radius: 8px;
   transition: all 0.3s;
+  color: white !important;
+  font-weight: bold;
 }
 
 .hamburger-icon:hover {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(255, 255, 255, 0.3);
 }
 
 .header-logo {
@@ -596,7 +588,7 @@ export default defineNuxtComponent({
 
 /* Navigation drawer styling */
 .navigation-drawer {
-  background-color: #1E1E1E !important; /* Solid background color, no transparency */
+  background-color: v-bind('isDarkTheme ? "#1E1E1E" : "#FFFFFF"') !important; /* Solid background color, no transparency */
   border-right: 1px solid rgba(139, 233, 253, 0.2);
 }
 
@@ -609,7 +601,7 @@ export default defineNuxtComponent({
   cursor: pointer;
   transition: all 0.3s ease;
   margin-bottom: 4px;
-  color: #F8F8F2;
+  color: v-bind('isDarkTheme ? "#F8F8F2" : "#333333"');
   position: relative;
   background-color: transparent;
 }
@@ -620,7 +612,7 @@ export default defineNuxtComponent({
 
 .menu-icon {
   margin-right: 12px;
-  color: rgba(139, 233, 253, 0.7);
+  color: v-bind('isDarkTheme ? "rgba(139, 233, 253, 0.7)" : "rgba(38, 166, 154, 0.8)"');
 }
 
 .menu-text {
@@ -630,9 +622,9 @@ export default defineNuxtComponent({
 
 /* Custom active item styling to ensure readability */
 .custom-menu-item-active {
-  background-color: #333333 !important;
+  background-color: v-bind('isDarkTheme ? "#333333" : "#E8F5F5"') !important;
   border-left: 3px solid #8BE9FD;
-  box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
+  box-shadow: v-bind('isDarkTheme ? "0 0 8px rgba(0, 0, 0, 0.5)" : "0 0 8px rgba(0, 0, 0, 0.1)"');
   padding-left: 13px; /* Compensate for the border */
 }
 
@@ -641,12 +633,12 @@ export default defineNuxtComponent({
 }
 
 .custom-menu-item-active .menu-text {
-  color: #FFFFFF;
+  color: v-bind('isDarkTheme ? "#FFFFFF" : "#333333"');
   font-weight: 700;
 }
 
 .drawer-list {
-  background-color: #1E1E1E !important;
+  background-color: v-bind('isDarkTheme ? "#1E1E1E" : "#FFFFFF"') !important;
   padding: 8px;
 }
 
@@ -655,12 +647,12 @@ export default defineNuxtComponent({
 }
 
 .drawer-header :deep(.v-list-item-title) {
-  color: #8BE9FD !important;
+  color: v-bind('isDarkTheme ? "#8BE9FD" : "#26A69A"') !important;
   font-weight: 600;
 }
 
 .drawer-header :deep(.v-list-item-subtitle) {
-  color: rgba(255, 255, 255, 0.7) !important;
+  color: v-bind('isDarkTheme ? "rgba(255, 255, 255, 0.7)" : "rgba(0, 0, 0, 0.7)"') !important;
 }
 
 .drawer-divider {
@@ -673,7 +665,7 @@ export default defineNuxtComponent({
 }
 
 .drawer-item :deep(.v-list-item__content) {
-  color: #F8F8F2 !important;
+  color: v-bind('isDarkTheme ? "#F8F8F2" : "#333333"') !important;
 }
 
 .drawer-item :deep(.v-icon) {
diff --git a/app/components/MetricCard.vue b/app/components/MetricCard.vue
index 62204820..e9b1ece9 100644
--- a/app/components/MetricCard.vue
+++ b/app/components/MetricCard.vue
@@ -71,15 +71,16 @@ const trendIcon = computed(() => {
   overflow: hidden;
   transition: transform 0.3s, box-shadow 0.3s;
   border-radius: 12px;
-  background-color: rgba(18, 18, 18, 0.8) !important;
-  border: 1px solid rgba(255, 255, 255, 0.05);
+  background-color: v-bind('isDarkTheme ? "rgba(18, 18, 18, 0.8)" : "rgba(255, 255, 255, 0.8)"') !important;
+  border: 1px solid v-bind('isDarkTheme ? "rgba(255, 255, 255, 0.05)" : "rgba(0, 0, 0, 0.05)"');
   backdrop-filter: blur(10px);
 }
 
 .metric-card:hover {
   transform: translateY(-4px);
-  box-shadow: 0 8px 24px rgba(100, 216, 203, 0.15) !important;
-  border: 1px solid rgba(139, 233, 253, 0.2);
+  box-shadow: v-bind('isDarkTheme ? "0 8px 24px rgba(100, 216, 203, 0.15)" : "0 8px 24px rgba(38, 166, 154, 0.25)"') !important;
+  border: 1px solid v-bind('isDarkTheme ? "rgba(139, 233, 253, 0.2)" : "rgba(38, 166, 154, 0.3)"');
+  background: v-bind('isDarkTheme ? "rgba(18, 18, 18, 0.9)" : "linear-gradient(135deg, rgba(77, 208, 225, 0.1), rgba(38, 166, 154, 0.1), rgba(123, 31, 162, 0.1))"') !important;
 }
 
 .theme--dark.metric-card:hover {
@@ -92,7 +93,7 @@ const trendIcon = computed(() => {
   left: 0;
   right: 0;
   height: 4px;
-  background: linear-gradient(90deg, #8BE9FD, #64D8CB, #9C64D8) !important;
+  background: v-bind('isDarkTheme ? "linear-gradient(90deg, #8BE9FD, #64D8CB, #9C64D8)" : "linear-gradient(90deg, #4DD0E1, #26A69A, #7B1FA2)"') !important;
   background-size: 200% 100%;
   animation: shimmer 3s infinite;
 }
@@ -107,33 +108,33 @@ const trendIcon = computed(() => {
 }
 
 .icon-primary {
-  background-color: rgba(100, 216, 203, 0.15);
-  box-shadow: 0 0 15px rgba(100, 216, 203, 0.1);
+  background-color: v-bind('isDarkTheme ? "rgba(100, 216, 203, 0.15)" : "rgba(38, 166, 154, 0.1)"');
+  box-shadow: v-bind('isDarkTheme ? "0 0 15px rgba(100, 216, 203, 0.1)" : "0 0 15px rgba(38, 166, 154, 0.1)"');
 }
 
 .icon-success {
-  background-color: rgba(80, 250, 123, 0.15);
-  box-shadow: 0 0 15px rgba(80, 250, 123, 0.1);
+  background-color: v-bind('isDarkTheme ? "rgba(80, 250, 123, 0.15)" : "rgba(76, 175, 80, 0.1)"');
+  box-shadow: v-bind('isDarkTheme ? "0 0 15px rgba(80, 250, 123, 0.1)" : "0 0 15px rgba(76, 175, 80, 0.1)"');
 }
 
 .icon-info {
-  background-color: rgba(139, 233, 253, 0.15);
-  box-shadow: 0 0 15px rgba(139, 233, 253, 0.1);
+  background-color: v-bind('isDarkTheme ? "rgba(139, 233, 253, 0.15)" : "rgba(77, 208, 225, 0.1)"');
+  box-shadow: v-bind('isDarkTheme ? "0 0 15px rgba(139, 233, 253, 0.1)" : "0 0 15px rgba(77, 208, 225, 0.1)"');
 }
 
 .icon-warning {
-  background-color: rgba(255, 184, 108, 0.15);
-  box-shadow: 0 0 15px rgba(255, 184, 108, 0.1);
+  background-color: v-bind('isDarkTheme ? "rgba(255, 184, 108, 0.15)" : "rgba(255, 152, 0, 0.1)"');
+  box-shadow: v-bind('isDarkTheme ? "0 0 15px rgba(255, 184, 108, 0.1)" : "0 0 15px rgba(255, 152, 0, 0.1)"');
 }
 
 .icon-error {
-  background-color: rgba(255, 82, 82, 0.15);
-  box-shadow: 0 0 15px rgba(255, 82, 82, 0.1);
+  background-color: v-bind('isDarkTheme ? "rgba(255, 82, 82, 0.15)" : "rgba(244, 67, 54, 0.1)"');
+  box-shadow: v-bind('isDarkTheme ? "0 0 15px rgba(255, 82, 82, 0.1)" : "0 0 15px rgba(244, 67, 54, 0.1)"');
 }
 
 .icon-accent {
-  background-color: rgba(156, 100, 216, 0.15);
-  box-shadow: 0 0 15px rgba(156, 100, 216, 0.1);
+  background-color: v-bind('isDarkTheme ? "rgba(156, 100, 216, 0.15)" : "rgba(123, 31, 162, 0.1)"');
+  box-shadow: v-bind('isDarkTheme ? "0 0 15px rgba(156, 100, 216, 0.1)" : "0 0 15px rgba(123, 31, 162, 0.1)"');
 }
 
 .trend-indicator {
@@ -144,11 +145,11 @@ const trendIcon = computed(() => {
 }
 
 .trend-up {
-  color: #50FA7B;
+  color: v-bind('isDarkTheme ? "#50FA7B" : "#4CAF50"');
 }
 
 .trend-down {
-  color: #FF5252;
+  color: v-bind('isDarkTheme ? "#FF5252" : "#F44336"');
 }
 
 @keyframes shimmer {
@@ -157,7 +158,7 @@ const trendIcon = computed(() => {
 }
 
 .text-h4 {
-  background: linear-gradient(90deg, #8BE9FD, #64D8CB, #9C64D8);
+  background: v-bind('isDarkTheme ? "linear-gradient(90deg, #8BE9FD, #64D8CB, #9C64D8)" : "linear-gradient(90deg, #4DD0E1, #26A69A, #7B1FA2)"');
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
@@ -166,10 +167,10 @@ const trendIcon = computed(() => {
 }
 
 .text-subtitle-1 {
-  color: #8BE9FD !important;
+  color: v-bind('isDarkTheme ? "#8BE9FD" : "#26A69A"') !important;
 }
 
 .text-caption {
-  color: rgba(255, 255, 255, 0.7) !important;
+  color: v-bind('isDarkTheme ? "rgba(255, 255, 255, 0.7)" : "rgba(0, 0, 0, 0.7)"') !important;
 }
 </style>
\ No newline at end of file
diff --git a/app/components/MetricsViewer.vue b/app/components/MetricsViewer.vue
index f0eebfbe..e05aee8e 100644
--- a/app/components/MetricsViewer.vue
+++ b/app/components/MetricsViewer.vue
@@ -97,7 +97,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, toRef, watchEffect } from 'vue';
+import { defineComponent, ref, toRef, watchEffect, computed } from 'vue';
 import type { Metrics } from '@/model/Metrics';
 import {
   Chart as ChartJS,
@@ -174,7 +174,7 @@ export default defineComponent({
     //Total Active Users
     const totalActiveUsersChartData = ref<{ labels: string[]; datasets: any[] }>({ labels: [], datasets: [] });  
 
-    const chartOptions = {
+    const chartOptions = computed(() => ({
       responsive: true,
       maintainAspectRatio: true,
       height: 300,
@@ -190,13 +190,13 @@ export default defineComponent({
       plugins: {
         legend: {
           labels: {
-            color: '#F8F8F2'  // Light text color for better readability
+            color: props.isDarkTheme ? '#F8F8F2' : '#333333'  // Text color based on theme
           }
         },
         tooltip: {
-          backgroundColor: 'rgba(30, 30, 30, 0.8)',
-          titleColor: '#8BE9FD',
-          bodyColor: '#F8F8F2',
+          backgroundColor: props.isDarkTheme ? 'rgba(30, 30, 30, 0.8)' : 'rgba(255, 255, 255, 0.9)',
+          titleColor: props.isDarkTheme ? '#8BE9FD' : '#26A69A',
+          bodyColor: props.isDarkTheme ? '#F8F8F2' : '#333333',
           borderColor: 'rgba(100, 216, 203, 0.3)',
           borderWidth: 1
         }
@@ -204,24 +204,24 @@ export default defineComponent({
       scales: {
         x: {
           ticks: {
-            color: '#BFBFBF'  // Light gray for better readability
+            color: props.isDarkTheme ? '#BFBFBF' : '#666666'  // Text color based on theme
           },
           grid: {
-            color: 'rgba(255, 255, 255, 0.1)'
+            color: props.isDarkTheme ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'
           }
         },
         y: {
           ticks: {
-            color: '#BFBFBF'  // Light gray for better readability
+            color: props.isDarkTheme ? '#BFBFBF' : '#666666'  // Text color based on theme
           },
           grid: {
-            color: 'rgba(255, 255, 255, 0.1)'
+            color: props.isDarkTheme ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'
           }
         }
       }
-    };
+    }));
 
-    const totalActiveUsersChartOptions = {
+    const totalActiveUsersChartOptions = computed(() => ({
       responsive: true,
       maintainAspectRatio: true,
       scales: {
@@ -229,31 +229,31 @@ export default defineComponent({
           beginAtZero: true,
           ticks: {
             stepSize: 1,
-            color: '#BFBFBF'  // Light gray for better readability
+            color: props.isDarkTheme ? '#BFBFBF' : '#666666'  // Text color based on theme
           },
           grid: {
-            color: 'rgba(255, 255, 255, 0.1)'
+            color: props.isDarkTheme ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'
           }
         },
         x: {
           ticks: {
-            color: '#BFBFBF'  // Light gray for better readability
+            color: props.isDarkTheme ? '#BFBFBF' : '#666666'  // Text color based on theme
           },
           grid: {
-            color: 'rgba(255, 255, 255, 0.1)'
+            color: props.isDarkTheme ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'
           }
         }
       },
       plugins: {
         legend: {
           labels: {
-            color: '#F8F8F2'  // Light text color for better readability
+            color: props.isDarkTheme ? '#F8F8F2' : '#333333'  // Text color based on theme
           }
         },
         tooltip: {
-          backgroundColor: 'rgba(30, 30, 30, 0.8)',
-          titleColor: '#8BE9FD',
-          bodyColor: '#F8F8F2',
+          backgroundColor: props.isDarkTheme ? 'rgba(30, 30, 30, 0.8)' : 'rgba(255, 255, 255, 0.9)',
+          titleColor: props.isDarkTheme ? '#8BE9FD' : '#26A69A',
+          bodyColor: props.isDarkTheme ? '#F8F8F2' : '#333333',
           borderColor: 'rgba(100, 216, 203, 0.3)',
           borderWidth: 1
         }
@@ -266,7 +266,7 @@ export default defineComponent({
           bottom: 50
         }
       },
-    };
+    }));
 
     // Watch for changes in metrics prop and recalculate all data
     watchEffect(() => {
@@ -444,31 +444,31 @@ export default defineComponent({
 
 <style scoped>
 .chart-title {
-  color: #8BE9FD;
+  color: v-bind('isDarkTheme ? "#8BE9FD" : "#26A69A"');
   margin-bottom: 16px;
   font-weight: 700;
   font-size: 1.25rem;
-  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+  text-shadow: v-bind('isDarkTheme ? "0 2px 4px rgba(0, 0, 0, 0.5)" : "none"');
   position: relative;
   z-index: 2;
 }
 
 .tooltip-card {
-  background-color: rgba(30, 30, 30, 0.95) !important;
+  background-color: v-bind('isDarkTheme ? "rgba(30, 30, 30, 0.95)" : "rgba(255, 255, 255, 0.95)"') !important;
   border: 1px solid rgba(139, 233, 253, 0.3);
   max-width: 350px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  box-shadow: v-bind('isDarkTheme ? "0 4px 12px rgba(0, 0, 0, 0.3)" : "0 4px 12px rgba(0, 0, 0, 0.1)"');
 }
 
 .tooltip-text {
-  color: #F8F8F2 !important;
+  color: v-bind('isDarkTheme ? "#F8F8F2" : "#333333"') !important;
   font-size: 0.875rem !important;
   line-height: 1.5;
 }
 
 .chart-container {
-  background-color: rgba(18, 18, 18, 0.8) !important;
-  border: 1px solid rgba(255, 255, 255, 0.05);
+  background-color: v-bind('isDarkTheme ? "rgba(18, 18, 18, 0.8)" : "rgba(255, 255, 255, 0.8)"') !important;
+  border: 1px solid v-bind('isDarkTheme ? "rgba(255, 255, 255, 0.05)" : "rgba(0, 0, 0, 0.05)"');
   border-radius: 12px;
   padding: 24px;
   margin-bottom: 32px;
diff --git a/app/components/SeatsAnalysisViewer.vue b/app/components/SeatsAnalysisViewer.vue
index 238d7b94..cf61a24f 100644
--- a/app/components/SeatsAnalysisViewer.vue
+++ b/app/components/SeatsAnalysisViewer.vue
@@ -183,18 +183,18 @@ data() {
 
 <style scoped>
 .breakdown-title {
-  color: #8BE9FD;
+  color: v-bind('isDarkTheme ? "#8BE9FD" : "#26A69A"');
   font-weight: 700;
   font-size: 1.5rem;
   margin: 16px 0;
-  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+  text-shadow: v-bind('isDarkTheme ? "0 2px 4px rgba(0, 0, 0, 0.5)" : "none"');
   position: relative;
   z-index: 2;
 }
 
 .chart-container {
-  background-color: rgba(18, 18, 18, 0.8) !important;
-  border: 1px solid rgba(255, 255, 255, 0.05);
+  background-color: v-bind('isDarkTheme ? "rgba(18, 18, 18, 0.8)" : "rgba(255, 255, 255, 0.8)"') !important;
+  border: 1px solid v-bind('isDarkTheme ? "rgba(255, 255, 255, 0.05)" : "rgba(0, 0, 0, 0.05)"');
   border-radius: 12px;
   padding: 24px;
   margin-bottom: 32px;
@@ -202,18 +202,18 @@ data() {
 
 /* Data table styling for better readability */
 .data-table {
-  background-color: rgba(18, 18, 18, 0.8) !important;
-  border: 1px solid rgba(255, 255, 255, 0.05);
+  background-color: v-bind('isDarkTheme ? "rgba(18, 18, 18, 0.8)" : "rgba(255, 255, 255, 0.8)"') !important;
+  border: 1px solid v-bind('isDarkTheme ? "rgba(255, 255, 255, 0.05)" : "rgba(0, 0, 0, 0.05)"');
   border-radius: 12px;
   overflow: hidden;
 }
 
 :deep(.v-data-table__thead) {
-  background-color: rgba(100, 216, 203, 0.1) !important;
+  background-color: v-bind('isDarkTheme ? "rgba(100, 216, 203, 0.1)" : "rgba(100, 216, 203, 0.05)"') !important;
 }
 
 :deep(.v-data-table__thead th) {
-  color: #8BE9FD !important;
+  color: v-bind('isDarkTheme ? "#8BE9FD" : "#26A69A"') !important;
   font-weight: 600 !important;
   font-size: 0.8rem !important;
   text-transform: uppercase;
@@ -221,15 +221,15 @@ data() {
 }
 
 .data-table-row {
-  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  border-bottom: 1px solid v-bind('isDarkTheme ? "rgba(255, 255, 255, 0.05)" : "rgba(0, 0, 0, 0.05)"');
 }
 
 .data-table-cell {
-  color: #F8F8F2 !important;
+  color: v-bind('isDarkTheme ? "#F8F8F2" : "#333333"') !important;
   padding: 12px 16px;
 }
 
 :deep(.v-data-table__tbody tr:hover) {
-  background-color: rgba(100, 216, 203, 0.05) !important;
+  background-color: v-bind('isDarkTheme ? "rgba(100, 216, 203, 0.05)" : "rgba(100, 216, 203, 0.1)"') !important;
 }
 </style>
\ No newline at end of file
diff --git a/app/components/WelcomeBanner.vue b/app/components/WelcomeBanner.vue
index de4cf21d..173076c0 100644
--- a/app/components/WelcomeBanner.vue
+++ b/app/components/WelcomeBanner.vue
@@ -69,16 +69,12 @@ function scrollToMetrics() {
   position: relative;
   overflow: hidden;
   border-radius: 16px;
-  background: linear-gradient(135deg, #64D8CB 0%, #9C64D8 100%);
+  background: v-bind('isDarkTheme ? "linear-gradient(135deg, #64D8CB 0%, #9C64D8 100%)" : "linear-gradient(135deg, #26A69A 0%, #7B1FA2 100%)"');
   color: white;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+  box-shadow: v-bind('isDarkTheme ? "0 8px 32px rgba(0, 0, 0, 0.3)" : "0 8px 32px rgba(0, 0, 0, 0.2)"');
   border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
-.theme--dark.welcome-banner {
-  background: linear-gradient(135deg, #64D8CB 0%, #9C64D8 100%);
-}
-
 .banner-overlay {
   position: absolute;
   top: 0;
diff --git a/nuxt.config.ts b/nuxt.config.ts
index cc3b457a..90490a47 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -37,7 +37,7 @@ export default defineNuxtConfig({
     },
   },
 
-  css: ['~/assets/global.css', '~/assets/background.css', '~/assets/date-range-fix.css', '~/assets/data-table-fix.css', '~/assets/data-table-fix-v2.css', '~/assets/data-table-fix-v3.css', '~/assets/vuetify-fix.css', '~/assets/dropdown-fix.css', '~/assets/final-fix.css', '~/assets/direct-fix.css', '~/assets/dropdown-direct-fix.css'],
+  css: ['~/assets/global.css', '~/assets/light-theme.css', '~/assets/background.css', '~/assets/date-range-fix.css', '~/assets/data-table-fix.css', '~/assets/data-table-fix-v2.css', '~/assets/data-table-fix-v3.css', '~/assets/vuetify-fix.css', '~/assets/dropdown-fix.css', '~/assets/final-fix.css', '~/assets/direct-fix.css', '~/assets/dropdown-direct-fix.css'],
   modules: ['@nuxt/fonts', 'vuetify-nuxt-module', '@nuxt/eslint', 'nuxt-auth-utils'],
 
   vuetify: {
diff --git a/vuetify.config.ts b/vuetify.config.ts
index 6be5ceb0..c0c7d14b 100644
--- a/vuetify.config.ts
+++ b/vuetify.config.ts
@@ -7,20 +7,20 @@ export default defineVuetifyConfiguration({
       light: {
         dark: false,
         colors: {
-          primary: '#64D8CB',
-          secondary: '#8BE9FD',
-          accent: '#9C64D8',
-          error: '#FF5252',
-          info: '#8BE9FD',
-          success: '#50FA7B',
-          warning: '#FFB86C',
+          primary: '#26A69A',
+          secondary: '#4DD0E1',
+          accent: '#7B1FA2',
+          error: '#F44336',
+          info: '#4DD0E1',
+          success: '#4CAF50',
+          warning: '#FF9800',
           background: '#F5F7FA',
           surface: '#FFFFFF',
           'surface-variant': '#ECEFF1',
           'on-surface-variant': '#424242',
-          'primary-darken-1': '#26A69A',
-          'accent-darken-1': '#7B1FA2',
-          'secondary-darken-1': '#4DD0E1',
+          'primary-darken-1': '#00897B',
+          'accent-darken-1': '#6A1B9A',
+          'secondary-darken-1': '#00ACC1',
         },
       },
       dark: {

From e90829560a6a4d5f522da3e6b6da929d51e41627 Mon Sep 17 00:00:00 2001
From: PseudoCoding <dphoude@gmail.com>
Date: Mon, 21 Jul 2025 12:38:23 -0400
Subject: [PATCH 12/13] Remove unusable stats

---
 app/components/DashboardLayout.vue | 94 +-----------------------------
 app/components/MainComponent.vue   |  4 +-
 app/components/StatsSummary.vue    | 94 ------------------------------
 3 files changed, 3 insertions(+), 189 deletions(-)
 delete mode 100644 app/components/StatsSummary.vue

diff --git a/app/components/DashboardLayout.vue b/app/components/DashboardLayout.vue
index c891bf6f..d152e635 100644
--- a/app/components/DashboardLayout.vue
+++ b/app/components/DashboardLayout.vue
@@ -13,60 +13,13 @@
       </v-col>
     </v-row>
     
-    <v-row v-if="showMetricCards && metrics && metrics.length">
-      <v-col cols="12" sm="6" md="3">
-        <MetricCard
-          title="Total Suggestions"
-          :value="formatNumber(totalSuggestions)"
-          description="Total number of suggestions offered by Copilot"
-          icon="mdi-lightbulb-outline"
-          color="primary"
-          :is-dark-theme="isDarkTheme"
-        />
-      </v-col>
-      <v-col cols="12" sm="6" md="3">
-        <MetricCard
-          title="Acceptance Rate"
-          :value="`${acceptanceRate}%`"
-          description="Percentage of suggestions accepted by users"
-          icon="mdi-check-circle-outline"
-          color="success"
-          :trend="acceptanceTrend"
-          :is-dark-theme="isDarkTheme"
-        />
-      </v-col>
-      <v-col cols="12" sm="6" md="3">
-        <MetricCard
-          title="Active Users"
-          :value="formatNumber(activeUsers)"
-          description="Number of users actively using Copilot"
-          icon="mdi-account-group"
-          color="info"
-          :is-dark-theme="isDarkTheme"
-        />
-      </v-col>
-      <v-col cols="12" sm="6" md="3">
-        <MetricCard
-          title="Avg. Suggestions/User"
-          :value="formatNumber(avgSuggestionsPerUser)"
-          description="Average number of suggestions per active user"
-          icon="mdi-chart-line"
-          color="accent"
-          :is-dark-theme="isDarkTheme"
-        />
-      </v-col>
-    </v-row>
-    
-    <v-divider v-if="showMetricCards && metrics && metrics.length" class="my-6"></v-divider>
+    <!-- Metric cards removed as requested -->
     
     <slot></slot>
   </div>
 </template>
 
 <script setup lang="ts">
-import MetricCard from './MetricCard.vue';
-import type { Metrics } from '@/model/Metrics';
-
 const props = defineProps({
   title: {
     type: String,
@@ -80,56 +33,11 @@ const props = defineProps({
     type: String,
     default: ''
   },
-  metrics: {
-    type: Array as () => Metrics[],
-    default: () => []
-  },
-  showMetricCards: {
-    type: Boolean,
-    default: true
-  },
   isDarkTheme: {
     type: Boolean,
     default: false
   }
 });
-
-// Calculate metrics
-const totalSuggestions = computed(() => {
-  if (!props.metrics || props.metrics.length === 0) return 0;
-  return props.metrics.reduce((sum, metric) => sum + (metric.suggestions_count || 0), 0);
-});
-
-const acceptanceRate = computed(() => {
-  if (!props.metrics || props.metrics.length === 0 || totalSuggestions.value === 0) return 0;
-  const totalAccepted = props.metrics.reduce((sum, metric) => sum + (metric.accepted_suggestions_count || 0), 0);
-  return Math.round((totalAccepted / totalSuggestions.value) * 100);
-});
-
-// Simulate a trend (in a real app, this would compare with previous period)
-const acceptanceTrend = computed(() => {
-  // This is just a placeholder - in a real app you'd compare with previous period
-  return Math.floor(Math.random() * 21) - 10; // Random number between -10 and 10
-});
-
-const activeUsers = computed(() => {
-  if (!props.metrics || props.metrics.length === 0) return 0;
-  const uniqueUsers = new Set();
-  props.metrics.forEach(metric => {
-    if (metric.user_id) uniqueUsers.add(metric.user_id);
-  });
-  return uniqueUsers.size;
-});
-
-const avgSuggestionsPerUser = computed(() => {
-  if (activeUsers.value === 0) return 0;
-  return Math.round(totalSuggestions.value / activeUsers.value);
-});
-
-// Format numbers with commas
-function formatNumber(num: number): string {
-  return num.toLocaleString();
-}
 </script>
 
 <style scoped>
diff --git a/app/components/MainComponent.vue b/app/components/MainComponent.vue
index af4436f6..dd879ab4 100644
--- a/app/components/MainComponent.vue
+++ b/app/components/MainComponent.vue
@@ -273,7 +273,7 @@ import ApiResponse from './ApiResponse.vue'
 import AgentModeViewer from './AgentModeViewer.vue'
 import DateRangeSelector from './DateRangeSelector.vue'
 import WelcomeBanner from './WelcomeBanner.vue'
-import StatsSummary from './StatsSummary.vue'
+
 import LoadingAnimation from './LoadingAnimation.vue'
 import DashboardLayout from './DashboardLayout.vue'
 import MetricCard from './MetricCard.vue'
@@ -293,7 +293,7 @@ export default defineNuxtComponent({
     AgentModeViewer,
     DateRangeSelector,
     WelcomeBanner,
-    StatsSummary,
+
     LoadingAnimation,
     DashboardLayout,
     MetricCard,
diff --git a/app/components/StatsSummary.vue b/app/components/StatsSummary.vue
deleted file mode 100644
index ac9e5463..00000000
--- a/app/components/StatsSummary.vue
+++ /dev/null
@@ -1,94 +0,0 @@
-<template>
-  <v-row class="stats-summary mb-6">
-    <v-col v-for="(stat, index) in stats" :key="index" cols="12" sm="6" md="3">
-      <MetricCard
-        :title="stat.label"
-        :value="stat.value"
-        :icon="stat.icon"
-        :color="stat.color"
-        :is-dark-theme="isDarkTheme"
-      />
-    </v-col>
-  </v-row>
-</template>
-
-<script setup lang="ts">
-import type { Metrics } from '@/model/Metrics';
-import MetricCard from './MetricCard.vue';
-
-const props = defineProps({
-  metrics: {
-    type: Array as () => Metrics[],
-    required: true
-  },
-  isDarkTheme: {
-    type: Boolean,
-    default: false
-  }
-});
-
-// Calculate summary statistics from metrics
-const stats = computed(() => {
-  // Default values in case metrics are empty
-  let totalSuggestions = 0;
-  let acceptanceRate = 0;
-  let totalUsers = 0;
-  let avgSuggestionsPerUser = 0;
-
-  if (props.metrics && props.metrics.length > 0) {
-    // Calculate total suggestions
-    totalSuggestions = props.metrics.reduce((sum, metric) => sum + (metric.suggestions_count || 0), 0);
-    
-    // Calculate acceptance rate
-    const totalAccepted = props.metrics.reduce((sum, metric) => sum + (metric.accepted_suggestions_count || 0), 0);
-    acceptanceRate = totalSuggestions > 0 ? Math.round((totalAccepted / totalSuggestions) * 100) : 0;
-    
-    // Calculate unique users
-    const uniqueUsers = new Set();
-    props.metrics.forEach(metric => {
-      if (metric.user_id) uniqueUsers.add(metric.user_id);
-    });
-    totalUsers = uniqueUsers.size;
-    
-    // Calculate average suggestions per user
-    avgSuggestionsPerUser = totalUsers > 0 ? Math.round(totalSuggestions / totalUsers) : 0;
-  }
-
-  return [
-    {
-      label: 'Total Suggestions',
-      value: totalSuggestions.toLocaleString(),
-      icon: 'mdi-lightbulb-outline',
-      color: 'primary',
-      description: 'Total number of suggestions offered by Copilot'
-    },
-    {
-      label: 'Acceptance Rate',
-      value: `${acceptanceRate}%`,
-      icon: 'mdi-check-circle-outline',
-      color: 'success',
-      description: 'Percentage of suggestions accepted by users'
-    },
-    {
-      label: 'Active Users',
-      value: totalUsers.toLocaleString(),
-      icon: 'mdi-account-group',
-      color: 'info',
-      description: 'Number of users actively using Copilot'
-    },
-    {
-      label: 'Avg. Suggestions/User',
-      value: avgSuggestionsPerUser.toLocaleString(),
-      icon: 'mdi-chart-line',
-      color: 'accent',
-      description: 'Average number of suggestions per active user'
-    }
-  ];
-});
-</script>
-
-<style scoped>
-.stats-summary {
-  margin-top: 16px;
-}
-</style>
\ No newline at end of file

From 1bede462c7b050d871540a1142eae7172d536ecf Mon Sep 17 00:00:00 2001
From: PseudoCoding <dphoude@gmail.com>
Date: Thu, 24 Jul 2025 20:26:20 -0400
Subject: [PATCH 13/13] More

---
 Dockerfile                           |  84 ++++++++--
 app/assets/global.css                |   5 +-
 app/components/AppFooter.vue         |  16 +-
 app/components/DateRangeSelector.vue | 225 +++++++++++++++++++++++----
 app/components/MainComponent.vue     |  48 +++---
 app/components/MetricCard.vue        |   9 +-
 app/components/WelcomeBanner.vue     |   2 +-
 nuxt.config.ts                       |   1 +
 shared/utils/getDisplayName.ts       |   2 +-
 9 files changed, 305 insertions(+), 87 deletions(-)

diff --git a/Dockerfile b/Dockerfile
index 893f241e..98c711ed 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -8,25 +8,55 @@ ARG mode=prod
 
 FROM node:24-alpine AS build-stage
 
+# Add build dependencies and security updates
+RUN apk update && \
+    apk upgrade && \
+    apk add --no-cache dumb-init
+
+# Use non-root user for security
 USER node
 WORKDIR /app
 
+# Copy package files first for better layer caching
 COPY --chown=1000:1000 package*.json ./
-RUN npm ci
+
+# Install dependencies with npm ci for reproducible builds
+# Use --no-audit to speed up the build
+RUN npm ci --no-audit --no-fund && \
+    npm cache clean --force
+
+# Copy source code
 COPY --chown=1000:1000 . .
+
+# Build the application
 RUN npm run build
 
 # Stage 2: Prepare the Node.js API
-FROM node:23-alpine AS base-prod
+FROM node:24-alpine AS base-prod
+
+# Add security updates and dumb-init for proper process handling
+RUN apk update && \
+    apk upgrade && \
+    apk add --no-cache dumb-init curl && \
+    # Add a non-privileged user for running the application
+    addgroup -g 1001 -S appgroup && \
+    adduser -u 1001 -S appuser -G appgroup
 
+# Set working directory and copy built application
 WORKDIR /app
-COPY --chown=1000:1000 --from=build-stage /app/.output /app
+COPY --chown=1001:1001 --from=build-stage /app/.output /app
+
+# Create a health check script
+RUN echo '#!/bin/sh' > /healthcheck.sh && \
+    echo 'curl -f http://localhost:${NITRO_PORT:-80}/api/health || exit 1' >> /healthcheck.sh && \
+    chmod +x /healthcheck.sh
 
 # Expose the port your API will run on
 EXPOSE 80
 
 # Set port to 80 for backwards compatibility
-ENV NITRO_PORT=80
+ENV NITRO_PORT=80 \
+    NODE_ENV=production
 
 # Re-map the environment variables for the Vue.js app for backwards compatibility
 RUN echo '#!/bin/sh' > /entrypoint.sh && \
@@ -41,34 +71,54 @@ RUN echo '#!/bin/sh' > /entrypoint.sh && \
     echo 'export NUXT_SESSION_PASSWORD=${NUXT_SESSION_PASSWORD:-$NUXT_GITHUB_TOKEN$NUXT_GITHUB_TOKEN}' >> /entrypoint.sh && \
     echo 'export NUXT_OAUTH_GITHUB_CLIENT_ID=${NUXT_OAUTH_GITHUB_CLIENT_ID:-$GITHUB_CLIENT_ID}' >> /entrypoint.sh && \
     echo 'export NUXT_OAUTH_GITHUB_CLIENT_SECRET=${NUXT_OAUTH_GITHUB_CLIENT_SECRET:-$GITHUB_CLIENT_SECRET}' >> /entrypoint.sh && \
+    # Set default theme to ensure consistent appearance
+    echo 'export NUXT_PUBLIC_DEFAULT_THEME=${NUXT_PUBLIC_DEFAULT_THEME:-dark}' >> /entrypoint.sh && \
     # Conditionally set NUXT_PUBLIC_USING_GITHUB_AUTH if GITHUB_CLIENT_ID is provided
     echo 'if [ -n "$GITHUB_CLIENT_ID" ]; then' >> /entrypoint.sh && \
     echo 'export NUXT_PUBLIC_USING_GITHUB_AUTH=true' >> /entrypoint.sh && \
     echo 'fi' >> /entrypoint.sh && \
-    echo 'node /app/server/index.mjs' >> /entrypoint.sh && \
+    echo 'exec dumb-init -- node /app/server/index.mjs' >> /entrypoint.sh && \
     chmod +x /entrypoint.sh
 
+# Configure Docker health check
+HEALTHCHECK --interval=30s --timeout=5s --start-period=10s --retries=3 CMD ["/healthcheck.sh"]
 
-USER node
-ENTRYPOINT [ "/entrypoint.sh" ]
+# Set proper permissions and switch to non-root user
+RUN chown -R 1001:1001 /app
+USER appuser
+ENTRYPOINT ["/entrypoint.sh"]
 
 #----------------------------------- PW layer - not used in production
 FROM mcr.microsoft.com/playwright:v1.49.1 AS base-playwright
 
 WORKDIR /pw
 
+# Install only necessary packages and clean up to reduce image size
 RUN apt-get update && \
-    apt-get install -y --no-install-recommends gettext-base && \
+    apt-get install -y --no-install-recommends gettext-base curl dumb-init && \
     apt-get clean && \
-    rm -rf /var/lib/apt/lists/*
-
-COPY --chown=1000:1000 --from=base-prod /app /app
-COPY --chown=1000:1000 e2e-tests ./e2e-tests
-COPY --chown=1000:1000 playwright.config.ts playwright.docker.config.ts tsconfig.json package*.json ./
-
-RUN npm install --only=dev
-
-ENTRYPOINT [ "npx", "playwright", "test", "-c", "playwright.docker.config.ts" ]
+    rm -rf /var/lib/apt/lists/* && \
+    # Create a non-root user for running tests
+    groupadd -g 1001 pwuser && \
+    useradd -u 1001 -g pwuser -m pwuser
+
+# Copy application and test files
+COPY --chown=1001:1001 --from=base-prod /app /app
+COPY --chown=1001:1001 e2e-tests ./e2e-tests
+COPY --chown=1001:1001 playwright.config.ts playwright.docker.config.ts tsconfig.json package*.json ./
+
+# Install only dev dependencies and clean cache
+RUN npm install --only=dev && \
+    npm cache clean --force
+
+# Create a wrapper script for better process handling
+RUN echo '#!/bin/sh' > /entrypoint-pw.sh && \
+    echo 'exec dumb-init -- npx playwright test -c playwright.docker.config.ts "$@"' >> /entrypoint-pw.sh && \
+    chmod +x /entrypoint-pw.sh
+
+# Switch to non-root user for security
+USER pwuser
+ENTRYPOINT ["/entrypoint-pw.sh"]
 
 #-----------------------------------
 FROM base-${mode} AS final
diff --git a/app/assets/global.css b/app/assets/global.css
index c29ef802..2f08f568 100644
--- a/app/assets/global.css
+++ b/app/assets/global.css
@@ -38,9 +38,10 @@ body {
 /* Layout components */
 .tiles-container {
   display: flex;
-  justify-content: flex-start;
+  justify-content: center;
   flex-wrap: wrap;
-  gap: 16px;
+  gap: 24px;
+  margin-bottom: 32px;
 }
 
 .tiles-text {
diff --git a/app/components/AppFooter.vue b/app/components/AppFooter.vue
index da8c5fc6..019962bb 100644
--- a/app/components/AppFooter.vue
+++ b/app/components/AppFooter.vue
@@ -122,8 +122,8 @@ const socialIcons = [
 
 <style scoped>
 .app-footer {
-  background-color: rgba(18, 18, 18, 0.95);
-  border-top: 1px solid rgba(139, 233, 253, 0.1);
+  background-color: v-bind('$vuetify.theme.global.name === "dark" ? "rgba(18, 18, 18, 0.95)" : "rgba(255, 255, 255, 0.95)"');
+  border-top: 1px solid v-bind('$vuetify.theme.global.name === "dark" ? "rgba(139, 233, 253, 0.1)" : "rgba(38, 166, 154, 0.1)"');
   padding: 48px 0 24px;
   position: relative;
   overflow: hidden;
@@ -136,38 +136,38 @@ const socialIcons = [
   left: 0;
   right: 0;
   height: 1px;
-  background: linear-gradient(90deg, #8BE9FD, #64D8CB, #9C64D8);
+  background: v-bind('$vuetify.theme.global.name === "dark" ? "linear-gradient(90deg, #8BE9FD, #64D8CB, #9C64D8)" : "linear-gradient(90deg, #4DD0E1, #26A69A, #7B1FA2)"');
   opacity: 0.5;
 }
 
 .footer-link {
   display: flex;
   align-items: center;
-  color: rgba(255, 255, 255, 0.7);
+  color: v-bind('$vuetify.theme.global.name === "dark" ? "rgba(255, 255, 255, 0.7)" : "rgba(0, 0, 0, 0.7)"');
   text-decoration: none;
   transition: all 0.3s;
   font-size: 0.875rem;
 }
 
 .footer-link:hover {
-  color: #8BE9FD;
+  color: v-bind('$vuetify.theme.global.name === "dark" ? "#8BE9FD" : "#26A69A"');
   text-decoration: none;
   transform: translateX(5px);
 }
 
 .footer-link .v-icon {
-  color: #64D8CB;
+  color: v-bind('$vuetify.theme.global.name === "dark" ? "#64D8CB" : "#26A69A"');
 }
 
 .text-h6 {
-  background: linear-gradient(90deg, #8BE9FD, #64D8CB);
+  background: v-bind('$vuetify.theme.global.name === "dark" ? "linear-gradient(90deg, #8BE9FD, #64D8CB)" : "linear-gradient(90deg, #4DD0E1, #26A69A)"');
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
 }
 
 .text-subtitle-1 {
-  color: #8BE9FD !important;
+  color: v-bind('$vuetify.theme.global.name === "dark" ? "#8BE9FD" : "#26A69A"') !important;
 }
 
 @media (max-width: 768px) {
diff --git a/app/components/DateRangeSelector.vue b/app/components/DateRangeSelector.vue
index 0d7b090b..2fd4316e 100644
--- a/app/components/DateRangeSelector.vue
+++ b/app/components/DateRangeSelector.vue
@@ -18,10 +18,16 @@
           prepend-inner-icon="mdi-calendar-start"
           color="secondary"
           :bg-color="$vuetify.theme.global.name === 'dark' ? 'rgba(139, 233, 253, 0.05)' : 'rgba(38, 166, 154, 0.05)'"
-          @update:model-value="updateDateRange"
+          @update:model-value="updateFromDate"
+          :max="maxFromDate"
+          :min="minFromDate"
           hide-details
           class="date-field"
-        />
+        >
+          <template v-slot:message>
+            <span v-if="fromDateMessage" class="date-message">{{ fromDateMessage }}</span>
+          </template>
+        </v-text-field>
       </v-col>
       <v-col cols="12" sm="6" md="3">
         <v-text-field
@@ -33,10 +39,16 @@
           prepend-inner-icon="mdi-calendar-end"
           color="secondary"
           :bg-color="$vuetify.theme.global.name === 'dark' ? 'rgba(139, 233, 253, 0.05)' : 'rgba(38, 166, 154, 0.05)'"
-          @update:model-value="updateDateRange"
+          @update:model-value="updateToDate"
+          :max="maxToDate"
+          :min="minToDate"
           hide-details
           class="date-field"
-        />
+        >
+          <template v-slot:message>
+            <span v-if="toDateMessage" class="date-message">{{ toDateMessage }}</span>
+          </template>
+        </v-text-field>
       </v-col>
       <v-col cols="12" sm="6" md="3">
         <v-checkbox
@@ -65,27 +77,31 @@
           </template>
         </v-checkbox>
       </v-col>
-      <v-col cols="12" sm="6" md="3" class="d-flex align-center justify-end">
-        <v-btn
-          color="primary"
-          variant="flat"
-          size="large"
-          class="mr-3 days-28-button"
-          prepend-icon="mdi-refresh"
-          @click="resetToDefault"
-        >
-          Last 28 Days
-        </v-btn>
-        <v-btn
-          color="primary"
-          size="large"
-          :loading="loading"
-          prepend-icon="mdi-check"
-          @click="applyDateRange"
-          class="apply-button"
-        >
-          Apply
-        </v-btn>
+      <v-col cols="12" sm="6" md="3" class="d-flex flex-column">
+        <div class="d-flex justify-end">
+          <v-btn
+            color="primary"
+            variant="flat"
+            size="large"
+            class="mr-3 days-28-button"
+            prepend-icon="mdi-refresh"
+            @click="resetToDefault"
+          >
+            Last 28 Days
+          </v-btn>
+          <v-btn
+            color="primary"
+            size="large"
+            :loading="loading"
+            prepend-icon="mdi-check"
+            @click="applyDateRange"
+            class="apply-button"
+            :disabled="!!dateRangeError"
+          >
+            Apply
+          </v-btn>
+        </div>
+        <div v-if="dateRangeError" class="error-message text-right mt-2">{{ dateRangeError }}</div>
       </v-col>
     </v-row>
 
@@ -104,7 +120,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 
 interface Props {
   loading?: boolean
@@ -132,7 +148,8 @@ const defaultFromDate = new Date(today.getTime() - 27 * 24 * 60 * 60 * 1000) //
 const fromDate = ref(formatDate(defaultFromDate))
 const toDate = ref(formatDate(today))
 const excludeHolidays = ref(false)
-
+const fromDateMessage = ref('')
+const toDateMessage = ref('')
 
 function formatDate(date: Date): string {
   return date.toISOString().split('T')[0] || ''
@@ -142,6 +159,63 @@ function parseDate(dateString: string): Date {
   return new Date(dateString + 'T00:00:00.000Z')
 }
 
+const dateRangeError = ref('');
+
+// Calculate min/max dates to enforce 90-day limit
+const maxFromDate = computed(() => {
+  if (!toDate.value) return ''
+  
+  // From date can't be later than the to date
+  return toDate.value
+})
+
+const minFromDate = computed(() => {
+  if (!toDate.value) return ''
+  
+  // Calculate the earliest allowed "from date" based on the 90-day limit
+  const to = parseDate(toDate.value)
+  const earliestDate = new Date(to)
+  earliestDate.setDate(to.getDate() - 89) // 90 days including the to date
+  return formatDate(earliestDate)
+})
+
+const maxToDate = computed(() => {
+  if (!fromDate.value) return ''
+  
+  // Calculate the latest allowed "to date" based on the 90-day limit
+  const from = parseDate(fromDate.value)
+  const latestDate = new Date(from)
+  latestDate.setDate(from.getDate() + 89) // 90 days including the from date
+  return formatDate(latestDate)
+})
+
+const minToDate = computed(() => {
+  if (!fromDate.value) return ''
+  
+  // To date can't be earlier than the from date
+  return fromDate.value
+})
+
+// Calculate the earliest allowed "from date" based on the selected "to date" and 90-day limit
+const earliestFromDate = computed(() => {
+  if (!toDate.value) return ''
+  
+  const to = parseDate(toDate.value)
+  const earliestDate = new Date(to)
+  earliestDate.setDate(to.getDate() - 89) // 90 days including the to date
+  return formatDate(earliestDate)
+})
+
+// Calculate the latest allowed "to date" based on the selected "from date" and 90-day limit
+const latestToDate = computed(() => {
+  if (!fromDate.value) return ''
+  
+  const from = parseDate(fromDate.value)
+  const latestDate = new Date(from)
+  latestDate.setDate(from.getDate() + 89) // 90 days including the from date
+  return formatDate(latestDate)
+})
+
 const dateRangeText = computed(() => {
   if (!fromDate.value || !toDate.value) {
     return 'Select date range'
@@ -152,6 +226,14 @@ const dateRangeText = computed(() => {
   const diffDays = Math.ceil((to.getTime() - from.getTime()) / (1000 * 60 * 60 * 24)) + 1
   const withoutHolidays = excludeHolidays.value ? ' (excluding holidays/weekends)' : ''
 
+  // Check if date range exceeds 90 days
+  if (diffDays > 90) {
+    dateRangeError.value = 'Date range cannot exceed 90 days';
+    return `Date range too large: ${diffDays} days (maximum: 90 days)`;
+  } else {
+    dateRangeError.value = '';
+  }
+
   if (diffDays === 1) {
     return `For ${from.toLocaleDateString()}${withoutHolidays}`
   } else if (diffDays <= 28 && isLast28Days()) {
@@ -176,9 +258,65 @@ function isLast28Days(): boolean {
   )
 }
 
+function updateFromDate() {
+  if (fromDate.value && toDate.value) {
+    const from = parseDate(fromDate.value)
+    const to = parseDate(toDate.value)
+    
+    // Calculate the difference in days
+    const diffDays = Math.ceil((to.getTime() - from.getTime()) / (1000 * 60 * 60 * 24)) + 1
+    
+    // If the from date is after the to date, adjust the to date
+    if (from > to) {
+      toDate.value = fromDate.value
+    }
+    
+    // Show a helpful message about the date range limit
+    if (diffDays > 80) {
+      const daysLeft = 90 - diffDays
+      fromDateMessage.value = daysLeft <= 0 ? 
+        'Maximum range reached' : 
+        `${daysLeft} days left in range limit`
+    } else {
+      fromDateMessage.value = ''
+    }
+    
+    dateRangeError.value = ''
+  }
+}
+
+function updateToDate() {
+  if (fromDate.value && toDate.value) {
+    const from = parseDate(fromDate.value)
+    const to = parseDate(toDate.value)
+    
+    // Calculate the difference in days
+    const diffDays = Math.ceil((to.getTime() - from.getTime()) / (1000 * 60 * 60 * 24)) + 1
+    
+    // If the to date is before the from date, adjust the from date
+    if (to < from) {
+      fromDate.value = toDate.value
+    }
+    
+    // Show a helpful message about the date range limit
+    if (diffDays > 80) {
+      const daysLeft = 90 - diffDays
+      toDateMessage.value = daysLeft <= 0 ? 
+        'Maximum range reached' : 
+        `${daysLeft} days left in range limit`
+    } else {
+      toDateMessage.value = ''
+    }
+    
+    dateRangeError.value = ''
+  }
+}
+
 function updateDateRange() {
-  // This function is called when dates change, but we don't auto-apply
-  // User needs to click Apply button
+  if (fromDate.value && toDate.value) {
+    updateFromDate()
+    updateToDate()
+  }
 }
 
 function resetToDefault() {
@@ -204,6 +342,15 @@ function applyDateRange() {
     toDate.value = temp
   }
   
+  // Calculate the difference in days
+  const diffDays = Math.ceil((to.getTime() - from.getTime()) / (1000 * 60 * 60 * 24)) + 1
+  
+  // Check if date range exceeds 90 days
+  if (diffDays > 90) {
+    dateRangeError.value = 'Date range cannot exceed 90 days'
+    return // Don't emit the update if the range is invalid
+  }
+  
   // Emit the date range change with holiday options
   emit('date-range-changed', {
     since: fromDate.value,
@@ -285,4 +432,24 @@ onMounted(() => {
   border: 1px solid rgba(255, 255, 255, 0.2) !important;
   text-shadow: v-bind('$vuetify.theme.global.name === "dark" ? "0 1px 2px rgba(0, 0, 0, 0.5)" : "none"');
 }
+
+.error-message {
+  color: v-bind('$vuetify.theme.global.name === "dark" ? "#FF5252" : "#F44336"');
+  font-size: 0.8rem;
+  font-weight: 500;
+}
+
+.date-message {
+  color: v-bind('$vuetify.theme.global.name === "dark" ? "#FFB86C" : "#FF9800"');
+  font-size: 0.75rem;
+  font-weight: 500;
+  display: block;
+  margin-top: 4px;
+}
+
+@keyframes pulse {
+  0% { opacity: 0.8; }
+  50% { opacity: 1; }
+  100% { opacity: 0.8; }
+}
 </style>
\ No newline at end of file
diff --git a/app/components/MainComponent.vue b/app/components/MainComponent.vue
index dd879ab4..38d1789c 100644
--- a/app/components/MainComponent.vue
+++ b/app/components/MainComponent.vue
@@ -19,12 +19,13 @@
       
       <span v-if="mockedDataMessage" class="error-message text-caption px-2 py-1 rounded">{{ mockedDataMessage }}</span>
       <v-spacer />
-
-      <ThemeToggle 
+      
+      <!-- Theme toggle hidden for now -->
+      <!-- <ThemeToggle 
         class="ml-2" 
         :is-dark-theme="isDarkTheme" 
         @toggle="toggleTheme" 
-      />
+      /> -->
     </v-app-bar>
     
     <!-- Navigation drawer with hamburger menu -->
@@ -69,24 +70,8 @@
         
         <v-divider class="drawer-divider my-3"></v-divider>
         
-        <v-list-item
-          prepend-icon="mdi-cog-outline"
-          title="Settings"
-          class="drawer-item my-1"
-          rounded="lg"
-        >
-          <template v-slot:append>
-            <v-switch
-              v-model="isDarkTheme"
-              color="primary"
-              hide-details
-              inset
-              :label="isDarkTheme ? 'Dark' : 'Light'"
-              density="compact"
-              @change="toggleTheme"
-            ></v-switch>
-          </template>
-        </v-list-item>
+        <!-- Settings item removed as requested -->
+        <!-- Theme toggle functionality hidden for now -->
         
         <AuthState>
           <template #default="{ loggedIn }">
@@ -440,11 +425,22 @@ export default defineNuxtComponent({
     this.config = useRuntimeConfig();
   },
   async mounted() {
-    // Check system preference for dark mode
-    const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
-    if (prefersDark) {
-      this.isDarkTheme = true;
-      this.$vuetify.theme.global.name = 'dark';
+    // Check for default theme from environment variable first
+    const config = useRuntimeConfig();
+    const defaultTheme = config.public.defaultTheme || 'dark';
+    
+    // If default theme is specified, use it
+    if (defaultTheme) {
+      this.isDarkTheme = defaultTheme === 'dark';
+      this.$vuetify.theme.global.name = defaultTheme;
+    } 
+    // Otherwise check system preference for dark mode
+    else {
+      const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+      if (prefersDark) {
+        this.isDarkTheme = true;
+        this.$vuetify.theme.global.name = 'dark';
+      }
     }
     
     // Load initial data
diff --git a/app/components/MetricCard.vue b/app/components/MetricCard.vue
index e9b1ece9..aab5f3f2 100644
--- a/app/components/MetricCard.vue
+++ b/app/components/MetricCard.vue
@@ -1,7 +1,7 @@
 <template>
   <v-card class="metric-card h-100" :class="{ 'theme--dark': isDarkTheme }">
     <div class="card-accent"></div>
-    <v-card-text class="d-flex flex-column h-100">
+    <v-card-text class="d-flex flex-column h-100 pa-5">
       <div class="d-flex align-center mb-4">
         <div class="icon-container" :class="`icon-${color}`">
           <v-icon :color="color">{{ icon }}</v-icon>
@@ -9,7 +9,7 @@
         <h3 class="text-subtitle-1 font-weight-medium ml-2 mb-0">{{ title }}</h3>
       </div>
       
-      <div class="metric-value mb-2">
+      <div class="metric-value mb-3 text-center">
         <span class="text-h4 font-weight-bold">{{ value }}</span>
         <span v-if="trend" class="trend-indicator ml-2" :class="trendClass">
           <v-icon size="small" class="mr-1">{{ trendIcon }}</v-icon>
@@ -17,7 +17,7 @@
         </span>
       </div>
       
-      <p class="text-caption text-medium-emphasis mb-0 mt-auto">{{ description }}</p>
+      <p class="text-caption text-medium-emphasis mb-0 mt-auto text-center">{{ description }}</p>
     </v-card-text>
   </v-card>
 </template>
@@ -74,6 +74,9 @@ const trendIcon = computed(() => {
   background-color: v-bind('isDarkTheme ? "rgba(18, 18, 18, 0.8)" : "rgba(255, 255, 255, 0.8)"') !important;
   border: 1px solid v-bind('isDarkTheme ? "rgba(255, 255, 255, 0.05)" : "rgba(0, 0, 0, 0.05)"');
   backdrop-filter: blur(10px);
+  width: 280px;
+  min-height: 180px;
+  margin: 0 auto;
 }
 
 .metric-card:hover {
diff --git a/app/components/WelcomeBanner.vue b/app/components/WelcomeBanner.vue
index 173076c0..22059bfc 100644
--- a/app/components/WelcomeBanner.vue
+++ b/app/components/WelcomeBanner.vue
@@ -5,7 +5,7 @@
       <div class="d-flex flex-column flex-md-row align-md-center justify-space-between">
         <div class="banner-content">
           <h1 class="text-h4 font-weight-bold mb-2">{{ greeting }}, {{ userName || 'there' }}!</h1>
-          <p class="text-subtitle-1 mb-4">Welcome to the Copilot Metrics Dashboard for <strong>{{ orgName }}</strong></p>
+          <p class="text-subtitle-1 mb-4">Welcome to the Copilot Metrics Dashboard for {{ orgName }}</p>
           <p class="text-body-2 mb-6">
             Track your organization's GitHub Copilot usage, analyze trends, and optimize your development workflow.
           </p>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 90490a47..d808789d 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -93,6 +93,7 @@ export default defineNuxtConfig({
       githubEnt: '',
       githubTeam: '',
       usingGithubAuth: false,
+      defaultTheme: 'dark',  // can be overridden by NUXT_PUBLIC_DEFAULT_THEME environment variable
       version,
       isPublicApp: false
     }
diff --git a/shared/utils/getDisplayName.ts b/shared/utils/getDisplayName.ts
index f92cee86..1e8848ac 100644
--- a/shared/utils/getDisplayName.ts
+++ b/shared/utils/getDisplayName.ts
@@ -2,5 +2,5 @@ export default function getDisplayName(input: { githubOrg: string; githubEnt: st
     const teamName = input.githubTeam && input.githubTeam.trim() !== '' ? `| Team : ${input.githubTeam}` : '';
     const topLevelScope = input.githubEnt ? 'Enterprise' : 'Organization';
 
-    return `Copilot Metrics Viewer | ${topLevelScope} : ${input.githubOrg || input.githubEnt} ${teamName}`;
+    return `${topLevelScope} : ${input.githubOrg || input.githubEnt} ${teamName}`;
 }