diff --git a/app/auth/login/page.tsx b/app/auth/login/page.tsx
index e6a9ade..db2c68a 100644
--- a/app/auth/login/page.tsx
+++ b/app/auth/login/page.tsx
@@ -33,9 +33,7 @@ function LoginLoading() {
 export default function LoginPage() {
   const router = useRouter();
 
-  useEffect(() => {
-    router.prefetch("/dashboard");
-  }, [router]);
+  // Removed prefetch to avoid middleware redirects when unauthenticated
 
   return (
     <div className="relative flex items-center justify-center min-h-screen overflow-hidden">
diff --git a/app/dashboard/dashboard-content-wrapper.tsx b/app/dashboard/dashboard-content-wrapper.tsx
index 7726d3e..f1b4f47 100644
--- a/app/dashboard/dashboard-content-wrapper.tsx
+++ b/app/dashboard/dashboard-content-wrapper.tsx
@@ -6,6 +6,8 @@ import { Button } from "@/components/common/button";
 import { AlertCircle, RefreshCw } from "lucide-react";
 import { Skeleton } from "@/components/common/skeleton";
 import { Card, CardContent, CardHeader } from "@/components/common/card";
+import { useRouter } from "next/navigation";
+import { sidebarConfig } from "@/config/sidebar";
 
 // Error Boundary Component
 interface ErrorBoundaryState {
@@ -91,14 +93,14 @@ class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
 }
 
 // Suspense wrapper with timeout
-function SuspenseWithTimeout({ 
-  children, 
-  fallback, 
+function SuspenseWithTimeout({
+  children,
+  fallback,
   timeout = 5000,
-  timeoutFallback 
-}: { 
-  children: ReactNode; 
-  fallback: ReactNode; 
+  timeoutFallback
+}: {
+  children: ReactNode;
+  fallback: ReactNode;
   timeout?: number;
   timeoutFallback?: ReactNode;
 }) {
@@ -157,7 +159,7 @@ function DashboardContentSkeletonWithWarning() {
 // Import the skeleton from the page
 function DashboardContentSkeleton() {
   return (
-    <div 
+    <div
       className="space-y-6 animate-in fade-in duration-500 relative"
       role="status"
       aria-label="Loading dashboard content"
@@ -165,7 +167,7 @@ function DashboardContentSkeleton() {
     >
       {/* Subtle loading indicator */}
       <div className="absolute top-0 left-0 right-0 h-1 bg-muted overflow-hidden rounded-full">
-        <div className="h-full bg-primary w-1/3" 
+        <div className="h-full bg-primary w-1/3"
           style={{
             background: 'linear-gradient(90deg, transparent, hsl(var(--primary)), transparent)',
             backgroundSize: '200% 100%',
@@ -183,7 +185,7 @@ function DashboardContentSkeleton() {
       {/* Stats cards skeleton */}
       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 lg:gap-6">
         {[...Array(4)].map((_, i) => (
-          <Card 
+          <Card
             key={i}
             className="animate-in fade-in slide-in-from-bottom-4"
             style={{
@@ -219,8 +221,8 @@ function DashboardContentSkeleton() {
         <CardContent>
           <div className="space-y-4">
             {[...Array(5)].map((_, i) => (
-              <div 
-                key={i} 
+              <div
+                key={i}
                 className="flex items-center gap-4 animate-in fade-in"
                 style={{
                   animationDelay: `${400 + i * 50}ms`,
@@ -247,9 +249,29 @@ function DashboardContentSkeleton() {
 }
 
 export default function DashboardContentWrapper({ children }: { children: ReactNode }) {
+  const router = useRouter();
+
+  useEffect(() => {
+    // Prefetch main dashboard routes for snappier navigation
+    const prefetchRoutes = async () => {
+      // Small delay to prioritize initial page load
+      await new Promise(resolve => setTimeout(resolve, 2000));
+
+      sidebarConfig.forEach(section => {
+        section.items.forEach(item => {
+          if (item.href && item.href !== "/dashboard") {
+            router.prefetch(item.href);
+          }
+        });
+      });
+    };
+
+    prefetchRoutes();
+  }, [router]);
+
   return (
     <ErrorBoundary componentName="Dashboard Content">
-      <SuspenseWithTimeout 
+      <SuspenseWithTimeout
         fallback={<DashboardContentSkeleton />}
         timeout={5000}
         timeoutFallback={<DashboardContentSkeletonWithWarning />}
diff --git a/components/admin/AdminAnalytics.tsx b/components/admin/AdminAnalytics.tsx
index e48ba7e..89647b5 100644
--- a/components/admin/AdminAnalytics.tsx
+++ b/components/admin/AdminAnalytics.tsx
@@ -42,6 +42,8 @@ import {
   LineChart,
   Line,
   ComposedChart,
+  AreaChart,
+  Area,
 } from "recharts";
 import { formatGBP, formatNumber } from "@/lib/utils/format";
 import { PieChart, Pie, Cell, Legend } from "recharts";
@@ -376,34 +378,38 @@ export default function AdminAnalytics() {
           data.count === undefined);
 
       return (
-        <div className="bg-background border border-border p-3 rounded-lg shadow-lg">
-          <p className="text-sm font-medium mb-2">
+        <div className="bg-[#050505]/90 p-4 rounded-xl shadow-xl border border-white/10 backdrop-blur-md ring-1 ring-white/5">
+          <p className="font-bold text-[10px] uppercase tracking-wide text-muted-foreground mb-3 border-b border-white/5 pb-2">
             {data.formattedDate || label}
           </p>
           {isDualAxis ? (
-            <div className="space-y-1">
-              <p className="text-sm text-blue-600">
-                Orders: <span className="font-semibold">{data.orders}</span>
-              </p>
-              <p className="text-sm text-green-600">
-                Revenue:{" "}
-                <span className="font-semibold">{formatGBP(data.revenue)}</span>
-              </p>
+            <div className="space-y-2">
+              <div className="flex items-center justify-between gap-8">
+                <span className="text-[11px] font-semibold text-blue-400">Orders</span>
+                <span className="text-[11px] font-bold text-foreground tabular-nums">{data.orders}</span>
+              </div>
+              <div className="flex items-center justify-between gap-8">
+                <span className="text-[11px] font-semibold text-emerald-400">Revenue</span>
+                <span className="text-[11px] font-bold text-foreground tabular-nums">{formatGBP(data.revenue)}</span>
+              </div>
               {data.avgOrderValue !== undefined && data.avgOrderValue > 0 && (
-                <p className="text-sm text-purple-600">
-                  Avg Order Value:{" "}
-                  <span className="font-semibold">
-                    {formatGBP(data.avgOrderValue)}
-                  </span>
-                </p>
+                <div className="flex items-center justify-between gap-8 pt-2 border-t border-white/5">
+                  <span className="text-[10px] font-medium text-purple-400">Avg Order Value</span>
+                  <span className="text-[10px] font-bold text-foreground tabular-nums">{formatGBP(data.avgOrderValue)}</span>
+                </div>
               )}
             </div>
           ) : (
-            <p className="text-sm text-primary">
-              {isAmount
-                ? formatGBP(data.value || data.amount || 0)
-                : `${data.value || data.count || 0}`}
-            </p>
+            <div className="flex items-center justify-between gap-8">
+              <span className={`text-[11px] font-semibold ${isAmount ? "text-emerald-400" : "text-blue-400"}`}>
+                {isAmount ? "Revenue" : "Count"}
+              </span>
+              <span className="text-[11px] font-bold text-foreground tabular-nums">
+                {isAmount
+                  ? formatGBP(data.value || data.amount || 0)
+                  : `${data.value || data.count || 0}`}
+              </span>
+            </div>
           )}
         </div>
       );
@@ -449,7 +455,7 @@ export default function AdminAnalytics() {
   };
 
   // Calculate best month from daily data (for YTD, full year, or previous years)
-  const calculateBestMonth = () => {
+  const calculateBestMonth = (): { month: string; revenue: number; orders: number } | null => {
     // Show best month for YTD, full year view, or when viewing previous years
     const showBestMonth =
       dateRange === "ytd" || dateRange === "year" || !isViewingCurrentYear;
@@ -734,16 +740,30 @@ export default function AdminAnalytics() {
               analyticsData.orders.dailyOrders.length > 0 ? (
               <div className="mt-4 h-14 -mx-2">
                 <ResponsiveContainer width="100%" height="100%">
-                  <RechartsBarChart
+                  <AreaChart
                     data={transformChartData(
                       analyticsData.orders.dailyOrders,
                       "count",
                     )}
-                    margin={{ top: 0, right: 0, left: 0, bottom: 0 }}
+                    margin={{ top: 5, right: 0, left: 0, bottom: 0 }}
                   >
-                    <Bar dataKey="value" fill="#3b82f6" fillOpacity={0.8} radius={[2, 2, 0, 0]} />
-                    <Tooltip content={<CustomTooltip />} cursor={{ fill: 'transparent' }} />
-                  </RechartsBarChart>
+                    <defs>
+                      <linearGradient id="colorOrdersAdmin" x1="0" y1="0" x2="0" y2="1">
+                        <stop offset="5%" stopColor="#3b82f6" stopOpacity={0.3} />
+                        <stop offset="95%" stopColor="#3b82f6" stopOpacity={0} />
+                      </linearGradient>
+                    </defs>
+                    <Area
+                      type="monotone"
+                      dataKey="value"
+                      stroke="#3b82f6"
+                      fillOpacity={1}
+                      fill="url(#colorOrdersAdmin)"
+                      strokeWidth={2}
+                      activeDot={{ r: 4, strokeWidth: 0, fill: "#3b82f6" }}
+                    />
+                    <Tooltip content={<CustomTooltip />} cursor={{ stroke: 'rgba(255,255,255,0.1)', strokeWidth: 1 }} />
+                  </AreaChart>
                 </ResponsiveContainer>
               </div>
             ) : (
@@ -788,16 +808,30 @@ export default function AdminAnalytics() {
               analyticsData.revenue.dailyRevenue.length > 0 ? (
               <div className="mt-4 h-14 -mx-2">
                 <ResponsiveContainer width="100%" height="100%">
-                  <RechartsBarChart
+                  <AreaChart
                     data={transformChartData(
                       analyticsData.revenue.dailyRevenue,
                       "amount",
                     )}
-                    margin={{ top: 0, right: 0, left: 0, bottom: 0 }}
+                    margin={{ top: 5, right: 0, left: 0, bottom: 0 }}
                   >
-                    <Bar dataKey="value" fill="#10b981" fillOpacity={0.8} radius={[2, 2, 0, 0]} />
-                    <Tooltip content={<CustomTooltip />} cursor={{ fill: 'transparent' }} />
-                  </RechartsBarChart>
+                    <defs>
+                      <linearGradient id="colorRevenueAdmin" x1="0" y1="0" x2="0" y2="1">
+                        <stop offset="5%" stopColor="#10b981" stopOpacity={0.3} />
+                        <stop offset="95%" stopColor="#10b981" stopOpacity={0} />
+                      </linearGradient>
+                    </defs>
+                    <Area
+                      type="monotone"
+                      dataKey="value"
+                      stroke="#10b981"
+                      fillOpacity={1}
+                      fill="url(#colorRevenueAdmin)"
+                      strokeWidth={2}
+                      activeDot={{ r: 4, strokeWidth: 0, fill: "#10b981" }}
+                    />
+                    <Tooltip content={<CustomTooltip />} cursor={{ stroke: 'rgba(255,255,255,0.1)', strokeWidth: 1 }} />
+                  </AreaChart>
                 </ResponsiveContainer>
               </div>
             ) : (
@@ -844,16 +878,30 @@ export default function AdminAnalytics() {
               analyticsData.vendors.dailyGrowth.length > 0 ? (
               <div className="mt-2 h-12 -mx-2">
                 <ResponsiveContainer width="100%" height="100%">
-                  <RechartsBarChart
+                  <AreaChart
                     data={transformChartData(
                       analyticsData.vendors.dailyGrowth,
                       "count",
                     )}
-                    margin={{ top: 0, right: 0, left: 0, bottom: 0 }}
+                    margin={{ top: 5, right: 0, left: 0, bottom: 0 }}
                   >
-                    <Bar dataKey="value" fill="#8b5cf6" fillOpacity={0.8} radius={[2, 2, 0, 0]} />
-                    <Tooltip content={<CustomTooltip />} cursor={{ fill: 'transparent' }} />
-                  </RechartsBarChart>
+                    <defs>
+                      <linearGradient id="colorVendorsAdmin" x1="0" y1="0" x2="0" y2="1">
+                        <stop offset="5%" stopColor="#8b5cf6" stopOpacity={0.3} />
+                        <stop offset="95%" stopColor="#8b5cf6" stopOpacity={0} />
+                      </linearGradient>
+                    </defs>
+                    <Area
+                      type="monotone"
+                      dataKey="value"
+                      stroke="#8b5cf6"
+                      fillOpacity={1}
+                      fill="url(#colorVendorsAdmin)"
+                      strokeWidth={2}
+                      activeDot={{ r: 4, strokeWidth: 0, fill: "#8b5cf6" }}
+                    />
+                    <Tooltip content={<CustomTooltip />} cursor={{ stroke: 'rgba(255,255,255,0.1)', strokeWidth: 1 }} />
+                  </AreaChart>
                 </ResponsiveContainer>
               </div>
             ) : (
diff --git a/middleware.ts b/middleware.ts
index 77e3cff..b54dfa4 100644
--- a/middleware.ts
+++ b/middleware.ts
@@ -4,12 +4,19 @@ import type { NextRequest } from 'next/server';
 export function middleware(request: NextRequest) {
     const { pathname } = request.nextUrl;
 
-    // Protect dashboard routes
     if (pathname.startsWith('/dashboard')) {
         const authToken = request.cookies.get('Authorization')?.value;
 
+        const isPrefetch =
+            request.headers.get('Next-Router-Prefetch') === '1' ||
+            request.headers.get('purpose') === 'prefetch';
+
         if (!authToken) {
-            // Redirect to login if no token is found
+            if (isPrefetch) {
+                // Let prefetch requests through so caching works
+                return NextResponse.next();
+            }
+
             const loginUrl = new URL('/auth/login', request.url);
             loginUrl.searchParams.set('redirectUrl', pathname);
             return NextResponse.redirect(loginUrl);
@@ -19,7 +26,6 @@ export function middleware(request: NextRequest) {
     return NextResponse.next();
 }
 
-// See "Matching Paths" below to learn more
 export const config = {
     matcher: ['/dashboard/:path*'],
 };
diff --git a/public/git-info.json b/public/git-info.json
index c6ce719..408c62e 100644
--- a/public/git-info.json
+++ b/public/git-info.json
@@ -1,4 +1,4 @@
 {
-  "commitHash": "a6e6cd0",
-  "buildTime": "2026-01-13T04:57:00.870Z"
+  "commitHash": "4c15f43",
+  "buildTime": "2026-01-13T05:27:43.269Z"
 }
\ No newline at end of file