diff --git a/src/components/dashboard/date-range-picker.tsx b/src/components/dashboard/date-range-picker.tsx
index d8aa935..542bde6 100644
--- a/src/components/dashboard/date-range-picker.tsx
+++ b/src/components/dashboard/date-range-picker.tsx
@@ -2,7 +2,7 @@
 
 import * as React from "react";
 import { CalendarIcon } from "lucide-react";
-import { addDays, format } from "date-fns";
+import { addMonths, format } from "date-fns";
 import { DateRange } from "react-day-picker";
 
 import { cn } from "@/lib/utils";
@@ -12,8 +12,8 @@ import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover
 
 export function CalendarDateRangePicker({ className }: React.HTMLAttributes<HTMLDivElement>) {
     const [date, setDate] = React.useState<DateRange | undefined>({
-        from: new Date(2023, 0, 20),
-        to: addDays(new Date(2023, 0, 20), 20),
+        from: addMonths(new Date(), -6),
+        to: new Date(),
     });
 
     return (
diff --git a/src/components/dashboard/overview.tsx b/src/components/dashboard/overview.tsx
index 80b085f..ce0ec1a 100644
--- a/src/components/dashboard/overview.tsx
+++ b/src/components/dashboard/overview.tsx
@@ -1,83 +1,58 @@
-"use client"
+"use client";
 
-import { Bar, BarChart, ResponsiveContainer, XAxis, YAxis } from "recharts"
+import { TrendingUp } from "lucide-react";
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";
 
-const data = [
-  {
-    name: "Jan",
-    total: Math.floor(Math.random() * 5000) + 1000,
-  },
-  {
-    name: "Feb",
-    total: Math.floor(Math.random() * 5000) + 1000,
-  },
-  {
-    name: "Mar",
-    total: Math.floor(Math.random() * 5000) + 1000,
-  },
-  {
-    name: "Apr",
-    total: Math.floor(Math.random() * 5000) + 1000,
-  },
-  {
-    name: "May",
-    total: Math.floor(Math.random() * 5000) + 1000,
-  },
-  {
-    name: "Jun",
-    total: Math.floor(Math.random() * 5000) + 1000,
-  },
-  {
-    name: "Jul",
-    total: Math.floor(Math.random() * 5000) + 1000,
-  },
-  {
-    name: "Aug",
-    total: Math.floor(Math.random() * 5000) + 1000,
-  },
-  {
-    name: "Sep",
-    total: Math.floor(Math.random() * 5000) + 1000,
-  },
-  {
-    name: "Oct",
-    total: Math.floor(Math.random() * 5000) + 1000,
-  },
-  {
-    name: "Nov",
-    total: Math.floor(Math.random() * 5000) + 1000,
-  },
-  {
-    name: "Dec",
-    total: Math.floor(Math.random() * 5000) + 1000,
-  },
-]
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardFooter,
+    CardHeader,
+    CardTitle,
+} from "@/components/ui/card";
+import {
+    ChartConfig,
+    ChartContainer,
+    ChartTooltip,
+    ChartTooltipContent,
+} from "@/components/ui/chart";
+const chartData = [
+    { month: "January", desktop: 186, mobile: 80 },
+    { month: "February", desktop: 305, mobile: 200 },
+    { month: "March", desktop: 237, mobile: 120 },
+    { month: "April", desktop: 73, mobile: 190 },
+    { month: "May", desktop: 209, mobile: 130 },
+    { month: "June", desktop: 214, mobile: 140 },
+];
+
+const chartConfig = {
+    desktop: {
+        label: "Desktop",
+        color: "hsl(var(--chart-1))",
+    },
+    mobile: {
+        label: "Mobile",
+        color: "hsl(var(--chart-2))",
+    },
+} satisfies ChartConfig;
 
 export function Overview() {
-  return (
-    <ResponsiveContainer width="100%" height={350}>
-      <BarChart data={data}>
-        <XAxis
-          dataKey="name"
-          stroke="#888888"
-          fontSize={12}
-          tickLine={false}
-          axisLine={false}
-        />
-        <YAxis
-          stroke="#888888"
-          fontSize={12}
-          tickLine={false}
-          axisLine={false}
-          tickFormatter={(value) => `$${value}`}
-        />
-        <Bar
-          dataKey="total"
-          fill="currentColor"
-          radius={[4, 4, 0, 0]}
-          className="fill-primary"
-        />
-      </BarChart>
-    </ResponsiveContainer>
-  )
+    return (
+        <ChartContainer config={chartConfig}>
+            <BarChart accessibilityLayer data={chartData}>
+                <CartesianGrid vertical={false} />
+                <XAxis
+                    dataKey="month"
+                    tickLine={false}
+                    tickMargin={10}
+                    axisLine={false}
+                    tickFormatter={(value) => value.slice(0, 3)}
+                />
+                <ChartTooltip cursor={false} content={<ChartTooltipContent indicator="dashed" />} />
+                <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
+                <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
+            </BarChart>
+        </ChartContainer>
+    );
 }
diff --git a/src/components/dashboard/recent-sales.tsx b/src/components/dashboard/recent-sales.tsx
index b9a90a9..373cb46 100644
--- a/src/components/dashboard/recent-sales.tsx
+++ b/src/components/dashboard/recent-sales.tsx
@@ -58,6 +58,28 @@ export function RecentSales() {
                 </div>
                 <div className="ml-auto font-medium">+$39.00</div>
             </div>
+            <div className="flex items-center">
+                <Avatar className="flex h-9 w-9 items-center justify-center space-y-0 border">
+                    <AvatarImage src="/avatars/02.png" alt="Avatar" />
+                    <AvatarFallback>JL</AvatarFallback>
+                </Avatar>
+                <div className="ml-4 space-y-1">
+                    <p className="text-sm font-medium leading-none">Jackson Lee</p>
+                    <p className="text-sm text-muted-foreground">jackson.lee@email.com</p>
+                </div>
+                <div className="ml-auto font-medium">+$39.00</div>
+            </div>
+            <div className="flex items-center">
+                <Avatar className="h-9 w-9">
+                    <AvatarImage src="/avatars/03.png" alt="Avatar" />
+                    <AvatarFallback>IN</AvatarFallback>
+                </Avatar>
+                <div className="ml-4 space-y-1">
+                    <p className="text-sm font-medium leading-none">Isabella Nguyen</p>
+                    <p className="text-sm text-muted-foreground">isabella.nguyen@email.com</p>
+                </div>
+                <div className="ml-auto font-medium">+$299.00</div>
+            </div>
         </div>
     );
 }
diff --git a/src/components/themes/theme-switcher.tsx b/src/components/themes/theme-switcher.tsx
index 6dd50ce..90ebc45 100644
--- a/src/components/themes/theme-switcher.tsx
+++ b/src/components/themes/theme-switcher.tsx
@@ -12,6 +12,8 @@ import {
     DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { ThemeDiamond } from "./theme-diamond";
+import { useUser } from "../UserContext";
+import { saveData } from "@/utils/save";
 
 // Utility function to set the theme
 function setTheme(theme: any) {
@@ -41,18 +43,28 @@ function getCurrentTheme() {
 }
 
 export default function ThemeSwitcher() {
+    const { user } = useUser();
     const [currentTheme, setCurrentTheme] = React.useState("default");
 
+    // Load and set the initial theme on mount
     React.useEffect(() => {
-        // Load the current theme on mount
-        const theme = getCurrentTheme();
-        setCurrentTheme(theme);
-    }, []);
+        const initialTheme = user?.theme || getCurrentTheme();
+        setTheme(initialTheme);
+        setCurrentTheme(initialTheme);
+    }, [user]);
 
-    const handleThemeChange = (theme: any) => {
-        setTheme(theme);
-        setCurrentTheme(theme);
-    };
+    const handleThemeChange = React.useCallback(
+        (theme: any) => {
+            setTheme(theme);
+            setCurrentTheme(theme);
+
+            if (user) {
+                user.theme = theme;
+                saveData(user);
+            }
+        },
+        [user]
+    );
 
     return (
         <DropdownMenu>
@@ -62,44 +74,44 @@ export default function ThemeSwitcher() {
                 </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end">
-                <DropdownMenuItem onClick={() => handleThemeChange("default")}>
-                    <div className="flex items-center space-x-2 group">
+                <DropdownMenuItem onClick={() => handleThemeChange("default")} className="group">
+                    <div className="flex items-center space-x-2">
                         <ThemeDiamond title={"Default"} color={"default"} />
                         <div>Default</div>
                     </div>
                 </DropdownMenuItem>
-                <DropdownMenuItem onClick={() => handleThemeChange("palette")}>
-                    <div className="flex items-center space-x-2 group">
+                <DropdownMenuItem onClick={() => handleThemeChange("palette")} className="group">
+                    <div className="flex items-center space-x-2">
                         <ThemeDiamond title={"Palette"} color={"palette"} />
                         <div>Palette</div>
                     </div>
                 </DropdownMenuItem>
-                <DropdownMenuItem onClick={() => handleThemeChange("sapphire")}>
-                    <div className="flex items-center space-x-2 group">
+                <DropdownMenuItem onClick={() => handleThemeChange("sapphire")} className="group">
+                    <div className="flex items-center space-x-2">
                         <ThemeDiamond title={"Sapphire"} color={"sapphire"} />
                         <div>Sapphire</div>
                     </div>
                 </DropdownMenuItem>
-                <DropdownMenuItem onClick={() => handleThemeChange("ruby")}>
-                    <div className="flex items-center space-x-2 group">
+                <DropdownMenuItem onClick={() => handleThemeChange("ruby")} className="group">
+                    <div className="flex items-center space-x-2">
                         <ThemeDiamond title={"Ruby"} color={"ruby"} />
                         <div>Ruby</div>
                     </div>
                 </DropdownMenuItem>
-                <DropdownMenuItem onClick={() => handleThemeChange("emerald")}>
-                    <div className="flex items-center space-x-2 group">
+                <DropdownMenuItem onClick={() => handleThemeChange("emerald")} className="group">
+                    <div className="flex items-center space-x-2">
                         <ThemeDiamond title={"Emerald"} color={"emerald"} />
                         <div>Emerald</div>
                     </div>
                 </DropdownMenuItem>
-                <DropdownMenuItem onClick={() => handleThemeChange("daylight")}>
-                    <div className="flex items-center space-x-2 group">
+                <DropdownMenuItem onClick={() => handleThemeChange("daylight")} className="group">
+                    <div className="flex items-center space-x-2">
                         <ThemeDiamond title={"Daylight"} color={"daylight"} />
                         <div>Daylight</div>
                     </div>
                 </DropdownMenuItem>
-                <DropdownMenuItem onClick={() => handleThemeChange("midnight")}>
-                    <div className="flex items-center space-x-2 group">
+                <DropdownMenuItem onClick={() => handleThemeChange("midnight")} className="group">
+                    <div className="flex items-center space-x-2">
                         <ThemeDiamond title={"Midnight"} color={"midnight"} />
                         <div>Midnight</div>
                     </div>
diff --git a/src/models/user.ts b/src/models/user.ts
index a10b454..0036aac 100644
--- a/src/models/user.ts
+++ b/src/models/user.ts
@@ -8,4 +8,6 @@ export default interface User {
 
     lastExported: Date;
     exportReminder: "daily" | "weekly" | "monthly";
+
+    theme?: "default" | "palette" | "sapphire" | "ruby" | "emerald" | "daylight" | "midnight";
 }
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index a41e88e..ea4179e 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,85 +1,46 @@
 import "../styles/globals.css";
 import { Inter } from "next/font/google";
 import Layout from "../components/layout";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo } from "react";
 import { loadData } from "@/utils/load";
-import { saveData } from "@/utils/save";
-import { User } from "@/models";
-import { SignUp } from "@/components/sign-up";
 import { ThemeProvider } from "next-themes";
 import { Toaster } from "@/components/ui/toaster";
 import { UserProvider, useUser } from "@/components/UserContext";
 import { CHART_THEMES, getChartThemes } from "@/lib/chart-themes";
 
 const inter = Inter({ subsets: ["latin"] });
-const chartThemes = getChartThemes();
 
 interface MyAppProps {
     Component: React.ElementType;
     pageProps: any;
 }
 
-export default function MyApp({ Component, pageProps }: MyAppProps) {
+function MyApp({ Component, pageProps }: MyAppProps) {
     const { user, setUser } = useUser();
 
-    function generateCssVariables(themes: any) {
-        let cssVariables = `:root {\n`;
-
-        themes.forEach((theme: any) => {
-            // Object.entries(theme.colors).forEach(([key, value]) => {
-            //     const variableName = `--${key}`;
-            //     cssVariables += `    ${variableName}: ${value};\n`;
-            // });
-
-            // Object.entries(theme.colorsDark).forEach(([key, value]) => {
-            //     const variableName = `--${key}-dark`;
-            //     cssVariables += `    ${variableName}: ${value};\n`;
-            // });
-            Object.entries(theme.colors).forEach(([key, value]) => {
-                if (key.includes("chart")) {
-                    const variableName = `--${key.replace(
-                        "chart",
-                        "color"
-                    )}-${theme.name.toLowerCase()}`;
-                    cssVariables += `    ${variableName}: hsl(${value});\n`;
-                }
-            });
-            Object.entries(theme.colorsDark).forEach(([key, value]) => {
-                if (key.includes("chart")) {
-                    const variableName = `--${key.replace(
-                        "chart",
-                        "color"
-                    )}-${theme.name.toLowerCase()}`;
-                    cssVariables += `    ${variableName}-dark: hsl(${value});\n`;
-                }
-            });
-        });
-
-        cssVariables += `}`;
-
-        return cssVariables;
-    }
-
-    const cssSelectors = generateCssVariables(CHART_THEMES);
-    console.log(cssSelectors);
-
     useEffect(() => {
         const data = loadData();
         if (data) {
             setUser(data);
         }
-    }, []);
+    }, [setUser]);
 
     return (
         <div className={inter.className}>
             <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-                <UserProvider>
-                    <Layout>
-                        <Component {...pageProps} />
-                    </Layout>
-                    <Toaster />
-                </UserProvider>
+                <Layout>
+                    <Component {...pageProps} />
+                </Layout>
+                <Toaster />
             </ThemeProvider>
         </div>
     );
 }
+
+export default function AppWrapper(props: MyAppProps) {
+    return (
+        <UserProvider>
+            <MyApp {...props} />
+        </UserProvider>
+    );
+}
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 0c469a9..d5f6484 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -34,11 +34,11 @@
 
         --radius: 0.5rem;
 
-        --chart-1: 222.2 84% 4.9%;
-        --chart-2: 222.2 47.4% 11.2%;
-        --chart-3: 217.2 32.6% 17.5%;
-        --chart-4: 217.2 26.8% 23.5%;
-        --chart-5: 206.2 13.8% 32.5%;
+        --chart-1: 217.2 32.6% 17.5%;
+        --chart-2: 217.2 26.8% 23.5%;
+        --chart-3: 224.8 22.5% 49.3%;
+        --chart-4: 215 20.2% 65.1%;
+        --chart-5: 212.7 26.8% 83.9%;
 
         --color-1: hsl(var(--chart-1));
         --color-2: hsl(var(--chart-2));
@@ -46,11 +46,11 @@
         --color-4: hsl(var(--chart-4));
         --color-5: hsl(var(--chart-5));
 
-        --color-1-default: hsl(222.2 84% 4.9%);
-        --color-2-default: hsl(222.2 47.4% 11.2%);
-        --color-3-default: hsl(217.2 32.6% 17.5%);
-        --color-4-default: hsl(217.2 26.8% 23.5%);
-        --color-5-default: hsl(206.2 13.8% 32.5%);
+        --color-1-default: hsl(217.2 32.6% 17.5%);
+        --color-2-default: hsl(217.2 26.8% 23.5%);
+        --color-3-default: hsl(224.8 22.5% 49.3%);
+        --color-4-default: hsl(215 20.2% 65.1%);
+        --color-5-default: hsl(212.7 26.8% 83.9%);
         --color-1-palette: hsl(12 76% 61%);
         --color-2-palette: hsl(173 58% 39%);
         --color-3-palette: hsl(197 37% 24%);
@@ -431,7 +431,7 @@
         --accent-foreground: 60 0% 0%;
         --destructive: 0 60% 80%;
         --destructive-foreground: 0 0% 20%;
-        --muted: 240 5% 75%;
+        --muted: 240 5% 85%;
         --muted-foreground: 60 5% 15%;
         --card: 240 4% 85%;
         --card-foreground: 60 5% 10%;