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/background.css b/app/assets/background.css
new file mode 100644
index 00000000..4166ec54
--- /dev/null
+++ b/app/assets/background.css
@@ -0,0 +1,147 @@
+/* Background styling for the entire application */
+body.v-theme--dark {
+  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;
+}
+
+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-theme--dark .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;
+}
+
+.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%; }
+  100% { background-position: 0% 50%; }
+}
+
+/* Add subtle grid pattern overlay */
+.v-theme--dark .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;
+}
+
+.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-theme--dark .v-card {
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
+}
+
+.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 */
+.v-theme--dark ::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+.v-theme--dark ::-webkit-scrollbar-track {
+  background: #1a1a1a;
+}
+
+.v-theme--dark ::-webkit-scrollbar-thumb {
+  background: linear-gradient(to bottom, #64D8CB, #9C64D8);
+  border-radius: 5px;
+}
+
+.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/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/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/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/global.css b/app/assets/global.css
index a4ea1a92..2f08f568 100644
--- a/app/assets/global.css
+++ b/app/assets/global.css
@@ -1,78 +1,419 @@
+/* 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.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 {
+  font-family: 'Inter', sans-serif;
+  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 */
 .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: center;
+  flex-wrap: wrap;
+  gap: 24px;
+  margin-bottom: 32px;
+}
 
-  .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: var(--color-error);
+  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;
+  background-color: var(--color-card-bg) !important;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.v-card:hover {
+  transform: translateY(-2px);
+  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 */
+.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;
+  color: var(--color-text) !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(100, 216, 203, 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(255, 255, 255, 0.1);
+}
+
+.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;
+  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(100, 216, 203, 0.1) !important;
+}
+
+.v-expansion-panel-text__wrapper {
+  padding: 16px !important;
+  background-color: var(--color-card-bg) !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;
+  background: var(--gradient-primary) !important;
+  color: white !important;
+}
+
+.v-btn--elevated:hover {
+  box-shadow: var(--shadow-md) !important;
+  transform: translateY(-1px);
+}
+
+.v-btn:hover .v-btn__overlay {
+  opacity: 0.1 !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: var(--gradient-primary);
+  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 {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-md);
+  filter: brightness(1.1);
+}
+
+.github-login-button .v-icon {
+  margin-right: 8px;
+}
 
-  /* Fix button hover styles - light gray background */
-  .v-btn:hover {
-    background-color: rgba(63, 81, 181, 0.1) !important;
+/* 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 var(--color-cyan);
+}
+
+/* Organization info styling */
+.organization-info {
+  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: 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: 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 */
+.v-data-table {
+  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(100, 216, 203, 0.05);
+}
+
+.v-data-table__th {
+  font-weight: 600 !important;
+  text-transform: uppercase !important;
+  font-size: 0.75rem !important;
+  letter-spacing: 0.05em !important;
+  color: var(--color-cyan) !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;
   }
+}
+
+/* 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;
+}
+
+/* Switch styling */
+.v-switch__track {
+  background-color: rgba(100, 216, 203, 0.2) !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
+.v-switch--active .v-switch__track {
+  background-color: var(--color-teal) !important;
+}
\ 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/assets/settings.scss b/app/assets/settings.scss
index 3e36a279..8804ff05 100644
--- a/app/assets/settings.scss
+++ b/app/assets/settings.scss
@@ -1,10 +1,143 @@
-/**
- * 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
+);
+
+// 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;
+  --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
+html {
+  scroll-behavior: smooth;
+}
+
+// Button styles
+.v-btn {
+  text-transform: none !important;
+}
+
+// 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;
+}
+
+// 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/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/AgentModeViewer.vue b/app/components/AgentModeViewer.vue
index 2e47979c..2ea12eaa 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,33 +112,24 @@
                     </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>
 
 <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';
 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) {
@@ -382,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;
@@ -397,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 = [
@@ -432,7 +390,7 @@ export default defineComponent({
         ];
 
         // Optimized chart options with performance settings
-        const chartOptions = {
+        const chartOptions = computed(() => ({
             responsive: true,
             maintainAspectRatio: false,
             animation: {
@@ -443,26 +401,60 @@ export default defineComponent({
                     beginAtZero: true,
                     title: {
                         display: true,
-                        text: 'Users with Activity'
+                        text: 'Users with Activity',
+                        color: props.isDarkTheme ? '#F8F8F2' : '#333333'
+                    },
+                    ticks: {
+                        color: props.isDarkTheme ? '#BFBFBF' : '#666666'
+                    },
+                    grid: {
+                        color: props.isDarkTheme ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'
+                    }
+                },
+                x: {
+                    ticks: {
+                        color: props.isDarkTheme ? '#BFBFBF' : '#666666'
+                    },
+                    grid: {
+                        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
+                    position: 'top' as const,
+                    labels: {
+                        color: props.isDarkTheme ? '#F8F8F2' : '#333333',
+                        font: {
+                            size: 12
+                        }
+                    }
+                },
+                tooltip: {
+                    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
                 }
             },
             interaction: {
                 intersect: false
+            },
+            elements: {
+                line: {
+                    tension: 0.4 // Add curve to all line charts
+                }
             }
-        };
+        }));
 
-        const barChartOptions = {
+        const barChartOptions = computed(() => ({
             responsive: true,
             maintainAspectRatio: false,
             animation: {
@@ -473,24 +465,53 @@ export default defineComponent({
                     beginAtZero: true,
                     title: {
                         display: true,
-                        text: 'Number of Models'
+                        text: 'Number of Models',
+                        color: props.isDarkTheme ? '#F8F8F2' : '#333333'
+                    },
+                    ticks: {
+                        color: props.isDarkTheme ? '#BFBFBF' : '#666666'
+                    },
+                    grid: {
+                        color: props.isDarkTheme ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'
+                    }
+                },
+                x: {
+                    ticks: {
+                        color: props.isDarkTheme ? '#BFBFBF' : '#666666'
+                    },
+                    grid: {
+                        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
+                    position: 'top' as const,
+                    labels: {
+                        color: props.isDarkTheme ? '#F8F8F2' : '#333333',
+                        font: {
+                            size: 12
+                        }
+                    }
+                },
+                tooltip: {
+                    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
                 }
             },
             interaction: {
                 intersect: false
             }
-        };
+        }));
 
         return {
             stats,
@@ -512,22 +533,73 @@ export default defineComponent({
     padding: 16px;
 }
 
-.v-card {
-    margin-bottom: 16px;
+.chart-title {
+  color: v-bind('isDarkTheme ? "#8BE9FD" : "#26A69A"');
+  font-weight: 700;
+  font-size: 1.5rem;
+  margin: 16px 0;
+  text-shadow: v-bind('isDarkTheme ? "0 2px 4px rgba(0, 0, 0, 0.5)" : "none"');
+  position: relative;
+  z-index: 2;
+}
+
+.chart-container {
+  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;
+}
+
+.chart-wrapper {
+  margin-bottom: 32px;
+  position: relative;
+  height: 400px;
 }
 
 .v-expansion-panel {
-    margin-bottom: 8px;
+  margin-bottom: 8px;
+  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)"');
 }
 
-.v-data-table {
-    margin-top: 16px;
+:deep(.v-expansion-panel-title) {
+  color: v-bind('isDarkTheme ? "#8BE9FD" : "#26A69A"') !important;
 }
 
-/* Optimize chart rendering */
-.chart-container {
-    height: 400px;
-    width: 100%;
-    position: relative;
+:deep(.v-data-table) {
+  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: v-bind('isDarkTheme ? "rgba(100, 216, 203, 0.1)" : "rgba(100, 216, 203, 0.05)"') !important;
+}
+
+:deep(.v-data-table__thead th) {
+  color: v-bind('isDarkTheme ? "#8BE9FD" : "#26A69A"') !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 v-bind('isDarkTheme ? "rgba(255, 255, 255, 0.05)" : "rgba(0, 0, 0, 0.05)"');
+}
+
+:deep(.v-data-table__tbody td) {
+  color: v-bind('isDarkTheme ? "#F8F8F2" : "#333333"') !important;
+  padding: 12px 16px;
+}
+
+:deep(.v-data-table__tbody tr:hover) {
+  background-color: v-bind('isDarkTheme ? "rgba(100, 216, 203, 0.05)" : "rgba(100, 216, 203, 0.1)"') !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/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/AppFooter.vue b/app/components/AppFooter.vue
new file mode 100644
index 00000000..019962bb
--- /dev/null
+++ b/app/components/AppFooter.vue
@@ -0,0 +1,182 @@
+<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: 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;
+}
+
+.app-footer::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  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: 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: v-bind('$vuetify.theme.global.name === "dark" ? "#8BE9FD" : "#26A69A"');
+  text-decoration: none;
+  transform: translateX(5px);
+}
+
+.footer-link .v-icon {
+  color: v-bind('$vuetify.theme.global.name === "dark" ? "#64D8CB" : "#26A69A"');
+}
+
+.text-h6 {
+  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: v-bind('$vuetify.theme.global.name === "dark" ? "#8BE9FD" : "#26A69A"') !important;
+}
+
+@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/BreakdownComponent.vue b/app/components/BreakdownComponent.vue
index 0889a043..da01eddf 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>
@@ -79,10 +78,11 @@
 </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'
+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) {
@@ -148,18 +153,37 @@ 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: props.isDarkTheme ? '#F8F8F2' : '#333333',  // Text color based on theme
+            font: {
+              size: 12
+            }
+          },
+          position: 'bottom'
+        },
+        tooltip: {
+          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([
-    '#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: 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%;
+}
+
+.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: v-bind('isDarkTheme ? "#8BE9FD" : "#26A69A"') !important;
+}
+
+.breakdown-title {
+  color: v-bind('isDarkTheme ? "#8BE9FD" : "#26A69A"');
+  font-weight: 700;
+  font-size: 1.5rem;
+  margin: 16px 0;
+  text-shadow: v-bind('isDarkTheme ? "0 2px 4px rgba(0, 0, 0, 0.5)" : "none"');
+  position: relative;
+  z-index: 2;
+}
+
+.chart-container {
+  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;
+}
+
+/* Data table styling for better readability */
+.data-table {
+  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: v-bind('isDarkTheme ? "rgba(100, 216, 203, 0.1)" : "rgba(100, 216, 203, 0.05)"') !important;
+}
+
+:deep(.v-data-table__thead th) {
+  color: v-bind('isDarkTheme ? "#8BE9FD" : "#26A69A"') !important;
+  font-weight: 600 !important;
+  font-size: 0.8rem !important;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.data-table-row {
+  border-bottom: 1px solid v-bind('isDarkTheme ? "rgba(255, 255, 255, 0.05)" : "rgba(0, 0, 0, 0.05)"');
+}
+
+.data-table-cell {
+  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;
+}
+
+@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/CopilotChatViewer.vue b/app/components/CopilotChatViewer.vue
index ebe4db9b..ee046c01 100644
--- a/app/components/CopilotChatViewer.vue
+++ b/app/components/CopilotChatViewer.vue
@@ -1,73 +1,46 @@
 <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>
+
+            <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" />
+            </div>
         </v-container>
     </v-main>
 </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 { Line, Bar } from 'vue-chartjs';
+  import MetricCard from './MetricCard.vue';
   import {
   Chart as ChartJS,
   ArcElement,
@@ -107,6 +80,10 @@ props: {
         dateRangeDescription: {
             type: String,
             default: 'Over the last 28 days'
+        },
+        isDarkTheme: {
+            type: Boolean,
+            default: false
         }
     },
 setup(props) {
@@ -118,41 +95,57 @@ 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
-        }
-    },
-    };
-
-    const chartOptions = {
+    // Use consistent chart options for both charts
+    const chartOptions = computed(() => ({
         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: props.isDarkTheme ? '#F8F8F2' : '#333333',
+                    font: {
+                        size: 12
+                    }
+                }
+            },
+            tooltip: {
+                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
             }
         },
-    };
+        scales: {
+            y: {
+                beginAtZero: true,
+                ticks: {
+                    color: props.isDarkTheme ? '#BFBFBF' : '#666666'
+                },
+                grid: {
+                    color: props.isDarkTheme ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'
+                }
+            },
+            x: {
+                ticks: {
+                    color: props.isDarkTheme ? '#BFBFBF' : '#666666'
+                },
+                grid: {
+                    color: props.isDarkTheme ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'
+                }
+            }
+        },
+        elements: {
+            line: {
+                tension: 0.4 // Add curve to all line charts
+            }
+        }
+    }));
+    
+    // Use the same options for both charts for consistent alignment
+    const totalActiveChatUsersChartOptions = computed(() => chartOptions.value);
 
     //Total Number Acceptances And Turns
     const totalNumberAcceptancesAndTurnsChartData = ref<{ labels: string[]; datasets: any[] }>({ labels: [], datasets: [] });
@@ -177,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
         }]
     };
 
@@ -195,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
         }]
     };
     
@@ -205,3 +206,37 @@ setup(props) {
 });
 
 </script>
+
+<style scoped>
+.chart-title {
+  color: v-bind('isDarkTheme ? "#8BE9FD" : "#26A69A"');
+  font-weight: 700;
+  font-size: 1.5rem;
+  margin: 16px 0;
+  text-shadow: v-bind('isDarkTheme ? "0 2px 4px rgba(0, 0, 0, 0.5)" : "none"');
+  position: relative;
+  z-index: 2;
+}
+
+.chart-container {
+  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;
+}
+
+.chart-wrapper {
+  margin-bottom: 32px;
+  position: relative;
+  height: 400px;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+:deep(.chartjs-render-monitor) {
+  filter: drop-shadow(0 0 8px rgba(100, 216, 203, 0.2));
+}
+</style>
diff --git a/app/components/CopilotLogo.vue b/app/components/CopilotLogo.vue
new file mode 100644
index 00000000..d8a529c0
--- /dev/null
+++ b/app/components/CopilotLogo.vue
@@ -0,0 +1,94 @@
+<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 {
+  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 {
+  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
new file mode 100644
index 00000000..d152e635
--- /dev/null
+++ b/app/components/DashboardLayout.vue
@@ -0,0 +1,87 @@
+<template>
+  <div class="dashboard-layout">
+    <v-row>
+      <v-col cols="12">
+        <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>
+          <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>
+    
+    <!-- Metric cards removed as requested -->
+    
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  title: {
+    type: String,
+    required: true
+  },
+  icon: {
+    type: String,
+    default: 'mdi-view-dashboard-outline'
+  },
+  dateRange: {
+    type: String,
+    default: ''
+  },
+  isDarkTheme: {
+    type: Boolean,
+    default: false
+  }
+});
+</script>
+
+<style scoped>
+.dashboard-layout {
+  margin-bottom: 32px;
+}
+
+.section-heading {
+  position: relative;
+  z-index: 1;
+}
+
+.section-title {
+  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: 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);
+  padding: 6px 12px;
+  border-radius: 4px;
+  margin-left: 12px;
+}
+
+.date-icon {
+  color: #8BE9FD;
+  margin-right: 6px;
+  font-size: 18px;
+}
+
+.date-text {
+  color: v-bind('isDarkTheme ? "#FFFFFF" : "#333333"');
+  font-weight: 700;
+  text-shadow: v-bind('isDarkTheme ? "0 1px 2px rgba(0, 0, 0, 0.8)" : "none"');
+  letter-spacing: 0.5px;
+  font-size: 0.9rem;
+}
+</style>
\ No newline at end of file
diff --git a/app/components/DateRangeSelector.vue b/app/components/DateRangeSelector.vue
index 9d0f86a6..2fd4316e 100644
--- a/app/components/DateRangeSelector.vue
+++ b/app/components/DateRangeSelector.vue
@@ -1,66 +1,126 @@
 <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="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" color="rgba(139, 233, 253, 0.2)"></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"
-          @update:model-value="updateDateRange"
-        />
+          density="comfortable"
+          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="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="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"
-          @update:model-value="updateDateRange"
-        />
+          density="comfortable"
+          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="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="6" sm="2">
+      <v-col cols="12" sm="6" md="3">
         <v-checkbox
           v-model="excludeHolidays"
-          label="Exclude holidays from metrics"
-          density="compact"
-        />
-      </v-col>
-      <v-col cols="6" sm="4" class="d-flex align-center justify-start" style="padding-bottom: 35px;">
-        <v-btn
-          color="primary"
-          variant="outlined"
-          size="default"
-          class="mr-3"
-          @click="resetToDefault"
+          label="Exclude holidays"
+          density="comfortable"
+          color="accent"
+          hide-details
         >
-          Last 28 Days
-        </v-btn>
-        <v-btn
-          color="primary"
-          size="default"
-          :loading="loading"
-          @click="applyDateRange"
-        >
-          Apply
-        </v-btn>
+          <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="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>
 
-    
-    <v-card-text class="pt-2">
-      <span class="text-caption text-medium-emphasis">
+    <v-card-text class="pt-4">
+      <v-chip
+        color="secondary"
+        variant="outlined"
+        size="large"
+        class="font-weight-medium date-chip"
+      >
+        <v-icon start color="secondary">mdi-information-outline</v-icon>
         {{ dateRangeText }}
-      </span>
+      </v-chip>
     </v-card-text>
   </v-card>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 
 interface Props {
   loading?: boolean
@@ -88,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] || ''
@@ -98,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'
@@ -108,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()) {
@@ -132,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() {
@@ -160,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,
@@ -173,4 +364,92 @@ 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);
+  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: 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: v-bind('$vuetify.theme.global.name === "dark" ? "#8BE9FD" : "#333333"') !important;
+  font-weight: 500;
+}
+
+.date-field :deep(.v-field__outline) {
+  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: 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: 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 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: v-bind('$vuetify.theme.global.name === "dark" ? "#1976D2" : "#26A69A"') !important;
+  color: white !important;
+  font-weight: 600 !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: v-bind('$vuetify.theme.global.name === "dark" ? "0 1px 2px rgba(0, 0, 0, 0.5)" : "none"');
+}
+
+.days-28-button {
+  background-color: v-bind('$vuetify.theme.global.name === "dark" ? "#0D47A1" : "#00897B"') !important;
+  color: white !important;
+  font-weight: 600 !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: 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/LoadingAnimation.vue b/app/components/LoadingAnimation.vue
new file mode 100644
index 00000000..0553612f
--- /dev/null
+++ b/app/components/LoadingAnimation.vue
@@ -0,0 +1,100 @@
+<template>
+  <div class="loading-container">
+    <div class="loading-content">
+      <div class="loading-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>
+  </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(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: 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 {
+  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); }
+}
+
+@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 5f40741c..38d1789c 100644
--- a/app/components/MainComponent.vue
+++ b/app/components/MainComponent.vue
@@ -1,101 +1,247 @@
 <template>
   <div>
-    <v-toolbar color="indigo" elevation="4">
-      <v-btn icon>
-        <v-icon>mdi-github</v-icon>
-      </v-btn>
-
-      <v-toolbar-title class="toolbar-title">{{ displayName }}</v-toolbar-title>
-      <h2 class="error-message"> {{ mockedDataMessage }} </h2>
+    <!-- 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="hamburger-icon"
+        size="large"
+      ></v-app-bar-nav-icon>
+      
+      <div class="d-flex align-center">
+        <CopilotLogo />
+      </div>
+      
+      <span v-if="mockedDataMessage" class="error-message text-caption px-2 py-1 rounded">{{ mockedDataMessage }}</span>
       <v-spacer />
-
-      <!-- Conditionally render the logout button -->
+      
+      <!-- Theme toggle hidden for now -->
+      <!-- <ThemeToggle 
+        class="ml-2" 
+        :is-dark-theme="isDarkTheme" 
+        @toggle="toggleTheme" 
+      /> -->
+    </v-app-bar>
+    
+    <!-- Navigation drawer with hamburger menu -->
+    <v-navigation-drawer
+      v-model="drawer"
+      temporary
+      location="left"
+      width="280"
+      class="navigation-drawer"
+    >
+      <v-list class="drawer-list">
+        <v-list-item
+          prepend-icon="mdi-view-dashboard"
+          title="Copilot Metrics"
+          :subtitle="displayName"
+          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"
+          class="custom-menu-item my-1"
+          :class="{'custom-menu-item-active': tab === item}"
+          @click="tab = item; drawer = false"
+        >
+          <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>
+        
+        <!-- Settings item removed as requested -->
+        <!-- Theme toggle functionality hidden for now -->
+        
+        <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 -->
+    <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, user }">
-          <div v-show="loggedIn" class="user-info">
-            Welcome,
-            <v-avatar class="user-avatar">
-              <v-img :alt="user?.name" :src="user?.avatarUrl" />
-            </v-avatar> {{ user?.name }}
+        <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>
-          <v-btn v-if="showLogoutButton && loggedIn" class="logout-button" @click="logout">Logout</v-btn>
         </template>
       </AuthState>
 
-      <template #extension>
-
-        <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-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>
-
+      <!-- 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"
+                    :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>
+          
+          <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 +257,13 @@ 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 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';
 
@@ -123,9 +276,20 @@ export default defineNuxtComponent({
     SeatsAnalysisViewer,
     ApiResponse,
     AgentModeViewer,
-    DateRangeSelector
+    DateRangeSelector,
+    WelcomeBanner,
+
+    LoadingAnimation,
+    DashboardLayout,
+    MetricCard,
+    ThemeToggle,
+    CopilotLogo
   },
   methods: {
+    toggleTheme() {
+      this.isDarkTheme = !this.isDarkTheme;
+      this.$vuetify.theme.global.name = this.isDarkTheme ? 'dark' : 'light';
+    },
     logout() {
       const { clear } = useUserSession()
       this.metrics = [];
@@ -210,6 +374,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 +415,9 @@ export default defineNuxtComponent({
       config: null as ReturnType<typeof useRuntimeConfig> | null,
       holidayOptions: {
         excludeHolidays: false,
-      }
+      },
+      drawer: false,
+      isDarkTheme: false
     }
   },
   created() {
@@ -236,9 +425,26 @@ export default defineNuxtComponent({
     this.config = useRuntimeConfig();
   },
   async mounted() {
+    // 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
     try {
-
       await this.fetchMetrics();
 
       const { data: seatsData, error: seatsError, execute: executeSeats } = this.seatsFetch;
@@ -300,50 +506,70 @@ export default defineNuxtComponent({
 </script>
 
 <style scoped>
-.toolbar-title {
-  white-space: nowrap;
-  overflow: visible;
-  text-overflow: clip;
+.text-white {
+  color: white !important;
+}
 
+.app-header {
+  border-bottom: 3px solid rgba(255, 255, 255, 0.2);
+  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;
 }
 
-.error-message {
-  color: red;
+.app-header::after {
+  content: '';
+  position: absolute;
+  bottom: -3px;
+  left: 0;
+  right: 0;
+  height: 3px;
+  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;
 }
 
-.logout-button {
-  margin-left: auto;
+@keyframes shimmer {
+  0% { background-position: 0% 0; }
+  100% { background-position: 200% 0; }
 }
 
-.github-login-container {
-  display: flex;
-  justify-content: center;
-  margin-top: 20px;
+.toolbar-title {
+  white-space: nowrap;
+  overflow: visible;
+  text-overflow: clip;
+  font-weight: 600;
 }
 
-.github-login-button {
-  display: flex;
-  align-items: center;
-  background-color: #24292e;
-  color: white;
-  padding: 10px 20px;
-  border-radius: 5px;
-  text-decoration: none;
+.hamburger-icon {
+  background-color: rgba(255, 255, 255, 0.2);
+  border-radius: 8px;
+  transition: all 0.3s;
+  color: white !important;
   font-weight: bold;
-  font-size: 14px;
 }
 
-.github-login-button:hover {
-  background-color: #444d56;
+.hamburger-icon:hover {
+  background-color: rgba(255, 255, 255, 0.3);
 }
 
-.github-login-button v-icon {
-  margin-right: 8px;
+.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;
+  background-color: rgba(255, 255, 255, 0.1);
+  padding: 4px 12px;
+  border-radius: 24px;
 }
 
 .user-avatar {
@@ -352,8 +578,124 @@ export default defineNuxtComponent({
   border: 2px solid white;
 }
 
-.organization-info {
-  background-color: #f5f5f5;
-  border-left: 4px solid #1976d2;
+.logout-button {
+  margin-left: auto;
+}
+
+/* Navigation drawer styling */
+.navigation-drawer {
+  background-color: v-bind('isDarkTheme ? "#1E1E1E" : "#FFFFFF"') !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: v-bind('isDarkTheme ? "#F8F8F2" : "#333333"');
+  position: relative;
+  background-color: transparent;
+}
+
+.custom-menu-item:hover {
+  background-color: rgba(100, 216, 203, 0.05);
+}
+
+.menu-icon {
+  margin-right: 12px;
+  color: v-bind('isDarkTheme ? "rgba(139, 233, 253, 0.7)" : "rgba(38, 166, 154, 0.8)"');
+}
+
+.menu-text {
+  font-size: 0.95rem;
+  font-weight: 500;
+}
+
+/* Custom active item styling to ensure readability */
+.custom-menu-item-active {
+  background-color: v-bind('isDarkTheme ? "#333333" : "#E8F5F5"') !important;
+  border-left: 3px solid #8BE9FD;
+  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 */
+}
+
+.custom-menu-item-active .menu-icon {
+  color: #8BE9FD;
+}
+
+.custom-menu-item-active .menu-text {
+  color: v-bind('isDarkTheme ? "#FFFFFF" : "#333333"');
+  font-weight: 700;
+}
+
+.drawer-list {
+  background-color: v-bind('isDarkTheme ? "#1E1E1E" : "#FFFFFF"') !important;
+  padding: 8px;
+}
+
+.drawer-header {
+  border-bottom: 1px solid rgba(139, 233, 253, 0.1);
+}
+
+.drawer-header :deep(.v-list-item-title) {
+  color: v-bind('isDarkTheme ? "#8BE9FD" : "#26A69A"') !important;
+  font-weight: 600;
+}
+
+.drawer-header :deep(.v-list-item-subtitle) {
+  color: v-bind('isDarkTheme ? "rgba(255, 255, 255, 0.7)" : "rgba(0, 0, 0, 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: v-bind('isDarkTheme ? "#F8F8F2" : "#333333"') !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
new file mode 100644
index 00000000..aab5f3f2
--- /dev/null
+++ b/app/components/MetricCard.vue
@@ -0,0 +1,179 @@
+<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 pa-5">
+      <div class="d-flex align-center mb-4">
+        <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>
+      </div>
+      
+      <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>
+          {{ trend }}%
+        </span>
+      </div>
+      
+      <p class="text-caption text-medium-emphasis mb-0 mt-auto text-center">{{ 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;
+  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 {
+  transform: translateY(-4px);
+  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 {
+  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: v-bind('isDarkTheme ? "linear-gradient(90deg, #8BE9FD, #64D8CB, #9C64D8)" : "linear-gradient(90deg, #4DD0E1, #26A69A, #7B1FA2)"') !important;
+  background-size: 200% 100%;
+  animation: shimmer 3s infinite;
+}
+
+.icon-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
+}
+
+.icon-primary {
+  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: 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: 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: 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: 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: 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 {
+  font-size: 0.875rem;
+  font-weight: 600;
+  display: inline-flex;
+  align-items: center;
+}
+
+.trend-up {
+  color: v-bind('isDarkTheme ? "#50FA7B" : "#4CAF50"');
+}
+
+.trend-down {
+  color: v-bind('isDarkTheme ? "#FF5252" : "#F44336"');
+}
+
+@keyframes shimmer {
+  0% { background-position: 0% 0; }
+  100% { background-position: 200% 0; }
+}
+
+.text-h4 {
+  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;
+  color: transparent;
+  font-weight: 700 !important;
+}
+
+.text-subtitle-1 {
+  color: v-bind('isDarkTheme ? "#8BE9FD" : "#26A69A"') !important;
+}
+
+.text-caption {
+  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 3497a02f..e05aee8e 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" />
@@ -143,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,
@@ -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) {
@@ -215,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,
@@ -228,19 +187,77 @@ export default defineComponent({
           bottom: 40
         }
       },
-    };
+      plugins: {
+        legend: {
+          labels: {
+            color: props.isDarkTheme ? '#F8F8F2' : '#333333'  // Text color based on theme
+          }
+        },
+        tooltip: {
+          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
+        }
+      },
+      scales: {
+        x: {
+          ticks: {
+            color: props.isDarkTheme ? '#BFBFBF' : '#666666'  // Text color based on theme
+          },
+          grid: {
+            color: props.isDarkTheme ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'
+          }
+        },
+        y: {
+          ticks: {
+            color: props.isDarkTheme ? '#BFBFBF' : '#666666'  // Text color based on theme
+          },
+          grid: {
+            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: {
         y: {
           beginAtZero: true,
           ticks: {
-            stepSize: 1
+            stepSize: 1,
+            color: props.isDarkTheme ? '#BFBFBF' : '#666666'  // Text color based on theme
+          },
+          grid: {
+            color: props.isDarkTheme ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'
+          }
+        },
+        x: {
+          ticks: {
+            color: props.isDarkTheme ? '#BFBFBF' : '#666666'  // Text color based on theme
+          },
+          grid: {
+            color: props.isDarkTheme ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'
           }
         }
       },
+      plugins: {
+        legend: {
+          labels: {
+            color: props.isDarkTheme ? '#F8F8F2' : '#333333'  // Text color based on theme
+          }
+        },
+        tooltip: {
+          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
+        }
+      },
       layout: {
         padding: {
           left: 50,
@@ -249,7 +266,7 @@ export default defineComponent({
           bottom: 50
         }
       },
-    };
+    }));
 
     // Watch for changes in metrics prop and recalculate all data
     watchEffect(() => {
@@ -277,17 +294,21 @@ 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
+          borderWidth: 2,
+          tension: 0.4,  // Add curve to the line
+          fill: false
         },
         {
           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
+          borderWidth: 2,
+          tension: 0.4,  // Add curve to the line
+          fill: false
         },
-        
       ]
     };
 
@@ -304,15 +325,20 @@ 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
+          borderWidth: 2,
+          tension: 0.4,  // Add curve to the line
+          fill: false
         },
         {
           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
+          borderWidth: 2,
+          tension: 0.4,  // Add curve to the line
+          fill: false
         }
       ]
     };
@@ -331,12 +357,14 @@ export default defineComponent({
       labels: data.map((m: Metrics) => m.day),
       datasets: [
         {
-          type: 'line', // This makes the dataset a line in the chart
+          type: 'bar',
           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
+          borderWidth: 2,
+          borderRadius: 4,
+          maxBarThickness: 40
         }
       ]
     };
@@ -345,12 +373,14 @@ export default defineComponent({
       labels: data.map((m: Metrics) => m.day),
       datasets: [
         {
-          type: 'line', // This makes the dataset a line in the chart
+          type: 'bar',
           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
+          borderWidth: 2,
+          borderRadius: 4,
+          maxBarThickness: 40
         }
       ]
     };
@@ -376,8 +406,11 @@ 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
+          borderWidth: 2,
+          borderRadius: 4,
+          maxBarThickness: 40
         }
       ]
     };
@@ -406,6 +439,47 @@ export default defineComponent({
       }
     }
   },
-  
 });
 </script>
+
+<style scoped>
+.chart-title {
+  color: v-bind('isDarkTheme ? "#8BE9FD" : "#26A69A"');
+  margin-bottom: 16px;
+  font-weight: 700;
+  font-size: 1.25rem;
+  text-shadow: v-bind('isDarkTheme ? "0 2px 4px rgba(0, 0, 0, 0.5)" : "none"');
+  position: relative;
+  z-index: 2;
+}
+
+.tooltip-card {
+  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: v-bind('isDarkTheme ? "0 4px 12px rgba(0, 0, 0, 0.3)" : "0 4px 12px rgba(0, 0, 0, 0.1)"');
+}
+
+.tooltip-text {
+  color: v-bind('isDarkTheme ? "#F8F8F2" : "#333333"') !important;
+  font-size: 0.875rem !important;
+  line-height: 1.5;
+}
+
+.chart-container {
+  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;
+}
+
+/* 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/SeatsAnalysisViewer.vue b/app/components/SeatsAnalysisViewer.vue
index 8e34943e..cf61a24f 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: v-bind('isDarkTheme ? "#8BE9FD" : "#26A69A"');
+  font-weight: 700;
+  font-size: 1.5rem;
+  margin: 16px 0;
+  text-shadow: v-bind('isDarkTheme ? "0 2px 4px rgba(0, 0, 0, 0.5)" : "none"');
+  position: relative;
+  z-index: 2;
+}
+
+.chart-container {
+  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;
+}
+
+/* Data table styling for better readability */
+.data-table {
+  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: v-bind('isDarkTheme ? "rgba(100, 216, 203, 0.1)" : "rgba(100, 216, 203, 0.05)"') !important;
+}
+
+:deep(.v-data-table__thead th) {
+  color: v-bind('isDarkTheme ? "#8BE9FD" : "#26A69A"') !important;
+  font-weight: 600 !important;
+  font-size: 0.8rem !important;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.data-table-row {
+  border-bottom: 1px solid v-bind('isDarkTheme ? "rgba(255, 255, 255, 0.05)" : "rgba(0, 0, 0, 0.05)"');
+}
+
+.data-table-cell {
+  color: v-bind('isDarkTheme ? "#F8F8F2" : "#333333"') !important;
+  padding: 12px 16px;
+}
+
+:deep(.v-data-table__tbody tr:hover) {
+  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/ThemeToggle.vue b/app/components/ThemeToggle.vue
new file mode 100644
index 00000000..821890c9
--- /dev/null
+++ b/app/components/ThemeToggle.vue
@@ -0,0 +1,83 @@
+<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: #8BE9FD;
+  filter: drop-shadow(0 0 5px rgba(139, 233, 253, 0.5));
+}
+
+.moon {
+  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
new file mode 100644
index 00000000..22059bfc
--- /dev/null
+++ b/app/components/WelcomeBanner.vue
@@ -0,0 +1,121 @@
+<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 {{ orgName }}</p>
+          <p class="text-body-2 mb-6">
+            Track your organization's GitHub Copilot usage, analyze trends, and optimize your development workflow.
+          </p>
+          <!-- Buttons removed -->
+        </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: v-bind('isDarkTheme ? "linear-gradient(135deg, #64D8CB 0%, #9C64D8 100%)" : "linear-gradient(135deg, #26A69A 0%, #7B1FA2 100%)"');
+  color: white;
+  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);
+}
+
+.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..d808789d 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -37,7 +37,7 @@ export default defineNuxtConfig({
     },
   },
 
-  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: {
@@ -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/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/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}`;
 }
diff --git a/vuetify.config.ts b/vuetify.config.ts
index 3249ccc8..c0c7d14b 100644
--- a/vuetify.config.ts
+++ b/vuetify.config.ts
@@ -1,25 +1,64 @@
 import { defineVuetifyConfiguration } from 'vuetify-nuxt-module/custom-configuration'
 
 export default defineVuetifyConfiguration({
-  // your Vuetify options here
   theme: {
-    defaultTheme: 'light',
+    defaultTheme: 'dark',
     themes: {
       light: {
+        dark: false,
         colors: {
-          // Keep existing Vuetify colors but add custom hover states
-          primary: '#1976D2',
-          secondary: '#424242',
-          accent: '#82B1FF',
-          error: '#FF5252',
-          info: '#2196F3',
+          primary: '#26A69A',
+          secondary: '#4DD0E1',
+          accent: '#7B1FA2',
+          error: '#F44336',
+          info: '#4DD0E1',
           success: '#4CAF50',
-          warning: '#FFC107',
-          // Custom surface colors for better hover effects
+          warning: '#FF9800',
+          background: '#F5F7FA',
           surface: '#FFFFFF',
-          'surface-variant': '#F5F5F5',
+          'surface-variant': '#ECEFF1',
+          'on-surface-variant': '#424242',
+          'primary-darken-1': '#00897B',
+          'accent-darken-1': '#6A1B9A',
+          'secondary-darken-1': '#00ACC1',
+        },
+      },
+      dark: {
+        dark: true,
+        colors: {
+          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': '#26A69A',
+          'accent-darken-1': '#7B1FA2',
+          'secondary-darken-1': '#4DD0E1',
         },
       },
     },
   },
-})
+  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