diff --git a/apps/web/app/components/Gravatar.tsx b/apps/web/app/components/Gravatar.tsx
index 7c6d8b593..c84f8a63e 100644
--- a/apps/web/app/components/Gravatar.tsx
+++ b/apps/web/app/components/Gravatar.tsx
@@ -3,19 +3,21 @@ import CryptoJS from "crypto-js";
 import { AvatarImage } from "./ui/avatar";
 
 type GravatarProps = {
-  email: string;
+  email: string | undefined;
   size?: number;
   className?: string;
 };
 
 export const Gravatar = ({ email, size = 200, className = "" }: GravatarProps) => {
-  const hash = CryptoJS.MD5(email.toLowerCase().trim()).toString();
+  const defaultGravatarHash = "27205e5c51cb03f862138b22bcb5dc20f94a342e744ff6df1b8dc8af3c865109";
+
+  const hash = email ? CryptoJS.MD5(email.toLowerCase().trim()).toString() : defaultGravatarHash;
   const gravatarUrl = `https://www.gravatar.com/avatar/${hash}?s=${size}&d=mp`;
 
   return (
     <AvatarImage
       src={gravatarUrl}
-      alt={`Avatar for ${email}`}
+      alt={`Avatar for ${email ?? "unknown"}`}
       className={className}
       width={size}
       height={size}
diff --git a/apps/web/app/components/ui/CategoryChip.tsx b/apps/web/app/components/ui/CategoryChip.tsx
index 81d16d1a6..f5089429c 100644
--- a/apps/web/app/components/ui/CategoryChip.tsx
+++ b/apps/web/app/components/ui/CategoryChip.tsx
@@ -2,8 +2,10 @@ import { Dot } from "lucide-react";
 
 import { cn } from "~/lib/utils";
 
+import type { ReactNode } from "react";
+
 type CategoryChipProps = {
-  category: string;
+  category: string | ReactNode;
   color?: string;
   className?: string;
 };
diff --git a/apps/web/app/components/ui/calendar.tsx b/apps/web/app/components/ui/calendar.tsx
new file mode 100644
index 000000000..956130ae0
--- /dev/null
+++ b/apps/web/app/components/ui/calendar.tsx
@@ -0,0 +1,68 @@
+import { DayPicker } from "react-day-picker";
+
+import { buttonVariants } from "~/components/ui/button";
+import { cn } from "~/lib/utils";
+
+import type { ComponentProps } from "react";
+
+export type CalendarProps = ComponentProps<typeof DayPicker>;
+
+function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn("w-full", className)}
+      classNames={{
+        months: "flex flex-col relative",
+        month_caption:
+          "flex justify-center h-10 w-full border-primary-500 border-b relative items-center",
+        weekdays: "flex flex-row gap-1.5 lg:gap-2",
+        weekday: "text-muted-foreground w-8 font-normal text-[0.8rem]",
+        month:
+          "gap-y-4 overflow-x-hidden w-full border border-primary-500 rounded-2xl pt-1.5 pb-4 lg:pb-6 px-2.5 lg:px-6",
+        caption: "flex justify-center pt-1 relative items-center",
+        caption_label: "truncate body-lg-md",
+        button_next: cn(
+          buttonVariants({
+            variant: "outline",
+            className: "absolute right-0 h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+          }),
+        ),
+        button_previous: cn(
+          buttonVariants({
+            variant: "outline",
+            className: "absolute left-0 h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+          }),
+        ),
+        nav: "flex items-start justify-between absolute w-full",
+        month_grid: "mt-4 w-full",
+        week: "flex w-full mt-3 gap-1.5 lg:gap-2",
+        day: "p-0 border border-neutral-300 text-neutral-950 aspect-square size-8 text-sm flex items-center justify-center has-[button]:hover:!bg-success-200 rounded-full has-[button]:hover:aria-selected:!bg-success-500 has-[button]:hover:text-accent-foreground has-[button]:hover:aria-selected:text-primary-foreground",
+        day_button: cn(
+          buttonVariants({ variant: "ghost" }),
+          "size-8 p-0 font-normal transition-none hover:bg-transparent hover:text-inherit aria-selected:opacity-100",
+        ),
+        range_start: "day-range-start rounded-s-md",
+        range_end: "day-range-end rounded-e-md",
+        selected:
+          "bg-success-500 border-success-500 text-primary-foreground hover:!bg-success-200 hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+        today: "bg-accent text-accent-foreground",
+        outside:
+          "day-outside border-success-200 text-white bg-success-200 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
+        disabled: "text-muted-foreground opacity-50",
+        range_middle:
+          "aria-selected:bg-accent hover:aria-selected:!bg-accent rounded-none aria-selected:text-accent-foreground hover:aria-selected:text-accent-foreground",
+        hidden: "invisible",
+        ...classNames,
+      }}
+      components={{
+        PreviousMonthButton: ({ ...props }) => <div className="sr-only" />,
+        NextMonthButton: ({ ...props }) => <div className="sr-only" />,
+      }}
+      {...props}
+    />
+  );
+}
+Calendar.displayName = "Calendar";
+
+export { Calendar };
diff --git a/apps/web/app/components/ui/chart.tsx b/apps/web/app/components/ui/chart.tsx
new file mode 100644
index 000000000..6a21c68de
--- /dev/null
+++ b/apps/web/app/components/ui/chart.tsx
@@ -0,0 +1,363 @@
+import * as React from "react"
+import * as RechartsPrimitive from "recharts"
+
+import { cn } from "~/lib/utils"
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: "", dark: ".dark" } as const
+
+export type ChartConfig = {
+  [k in string]: {
+    label?: React.ReactNode
+    icon?: React.ComponentType
+  } & (
+    | { color?: string; theme?: never }
+    | { color?: never; theme: Record<keyof typeof THEMES, string> }
+  )
+}
+
+type ChartContextProps = {
+  config: ChartConfig
+}
+
+const ChartContext = React.createContext<ChartContextProps | null>(null)
+
+function useChart() {
+  const context = React.useContext(ChartContext)
+
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />")
+  }
+
+  return context
+}
+
+const ChartContainer = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    config: ChartConfig
+    children: React.ComponentProps<
+      typeof RechartsPrimitive.ResponsiveContainer
+    >["children"]
+  }
+>(({ id, className, children, config, ...props }, ref) => {
+  const uniqueId = React.useId()
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-chart={chartId}
+        ref={ref}
+        className={cn(
+          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+          className
+        )}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer>
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  )
+})
+ChartContainer.displayName = "Chart"
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+  const colorConfig = Object.entries(config).filter(
+    ([_, config]) => config.theme || config.color
+  )
+
+  if (!colorConfig.length) {
+    return null
+  }
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color =
+      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
+      itemConfig.color
+    return color ? `  --color-${key}: ${color};` : null
+  })
+  .join("\n")}
+}
+`
+          )
+          .join("\n"),
+      }}
+    />
+  )
+}
+
+const ChartTooltip = RechartsPrimitive.Tooltip
+
+const ChartTooltipContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+    React.ComponentProps<"div"> & {
+      hideLabel?: boolean
+      hideIndicator?: boolean
+      indicator?: "line" | "dot" | "dashed"
+      nameKey?: string
+      labelKey?: string
+    }
+>(
+  (
+    {
+      active,
+      payload,
+      className,
+      indicator = "dot",
+      hideLabel = false,
+      hideIndicator = false,
+      label,
+      labelFormatter,
+      labelClassName,
+      formatter,
+      color,
+      nameKey,
+      labelKey,
+    },
+    ref
+  ) => {
+    const { config } = useChart()
+
+    const tooltipLabel = React.useMemo(() => {
+      if (hideLabel || !payload?.length) {
+        return null
+      }
+
+      const [item] = payload
+      const key = `${labelKey || item.dataKey || item.name || "value"}`
+      const itemConfig = getPayloadConfigFromPayload(config, item, key)
+      const value =
+        !labelKey && typeof label === "string"
+          ? config[label as keyof typeof config]?.label || label
+          : itemConfig?.label
+
+      if (labelFormatter) {
+        return (
+          <div className={cn("font-medium", labelClassName)}>
+            {labelFormatter(value, payload)}
+          </div>
+        )
+      }
+
+      if (!value) {
+        return null
+      }
+
+      return <div className={cn("font-medium", labelClassName)}>{value}</div>
+    }, [
+      label,
+      labelFormatter,
+      payload,
+      hideLabel,
+      labelClassName,
+      config,
+      labelKey,
+    ])
+
+    if (!active || !payload?.length) {
+      return null
+    }
+
+    const nestLabel = payload.length === 1 && indicator !== "dot"
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+          className
+        )}
+      >
+        {!nestLabel ? tooltipLabel : null}
+        <div className="grid gap-1.5">
+          {payload.map((item, index) => {
+            const key = `${nameKey || item.name || item.dataKey || "value"}`
+            const itemConfig = getPayloadConfigFromPayload(config, item, key)
+            const indicatorColor = color || item.payload.fill || item.color
+
+            return (
+              <div
+                key={item.dataKey}
+                className={cn(
+                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
+                  indicator === "dot" && "items-center"
+                )}
+              >
+                {formatter && item?.value !== undefined && item.name ? (
+                  formatter(item.value, item.name, item, index, item.payload)
+                ) : (
+                  <>
+                    {itemConfig?.icon ? (
+                      <itemConfig.icon />
+                    ) : (
+                      !hideIndicator && (
+                        <div
+                          className={cn(
+                            "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
+                            {
+                              "h-2.5 w-2.5": indicator === "dot",
+                              "w-1": indicator === "line",
+                              "w-0 border-[1.5px] border-dashed bg-transparent":
+                                indicator === "dashed",
+                              "my-0.5": nestLabel && indicator === "dashed",
+                            }
+                          )}
+                          style={
+                            {
+                              "--color-bg": indicatorColor,
+                              "--color-border": indicatorColor,
+                            } as React.CSSProperties
+                          }
+                        />
+                      )
+                    )}
+                    <div
+                      className={cn(
+                        "flex flex-1 justify-between leading-none",
+                        nestLabel ? "items-end" : "items-center"
+                      )}
+                    >
+                      <div className="grid gap-1.5">
+                        {nestLabel ? tooltipLabel : null}
+                        <span className="text-muted-foreground">
+                          {itemConfig?.label || item.name}
+                        </span>
+                      </div>
+                      {item.value && (
+                        <span className="font-mono font-medium tabular-nums text-foreground">
+                          {item.value.toLocaleString()}
+                        </span>
+                      )}
+                    </div>
+                  </>
+                )}
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    )
+  }
+)
+ChartTooltipContent.displayName = "ChartTooltip"
+
+const ChartLegend = RechartsPrimitive.Legend
+
+const ChartLegendContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> &
+    Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+      hideIcon?: boolean
+      nameKey?: string
+    }
+>(
+  (
+    { className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
+    ref
+  ) => {
+    const { config } = useChart()
+
+    if (!payload?.length) {
+      return null
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "flex items-center justify-center gap-4",
+          verticalAlign === "top" ? "pb-3" : "pt-3",
+          className
+        )}
+      >
+        {payload.map((item) => {
+          const key = `${nameKey || item.dataKey || "value"}`
+          const itemConfig = getPayloadConfigFromPayload(config, item, key)
+
+          return (
+            <div
+              key={item.value}
+              className={cn(
+                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
+              )}
+            >
+              {itemConfig?.icon && !hideIcon ? (
+                <itemConfig.icon />
+              ) : (
+                <div
+                  className="h-2 w-2 shrink-0 rounded-[2px]"
+                  style={{
+                    backgroundColor: item.color,
+                  }}
+                />
+              )}
+              {itemConfig?.label}
+            </div>
+          )
+        })}
+      </div>
+    )
+  }
+)
+ChartLegendContent.displayName = "ChartLegend"
+
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(
+  config: ChartConfig,
+  payload: unknown,
+  key: string
+) {
+  if (typeof payload !== "object" || payload === null) {
+    return undefined
+  }
+
+  const payloadPayload =
+    "payload" in payload &&
+    typeof payload.payload === "object" &&
+    payload.payload !== null
+      ? payload.payload
+      : undefined
+
+  let configLabelKey: string = key
+
+  if (
+    key in payload &&
+    typeof payload[key as keyof typeof payload] === "string"
+  ) {
+    configLabelKey = payload[key as keyof typeof payload] as string
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+  ) {
+    configLabelKey = payloadPayload[
+      key as keyof typeof payloadPayload
+    ] as string
+  }
+
+  return configLabelKey in config
+    ? config[configLabelKey]
+    : config[key as keyof typeof config]
+}
+
+export {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+}
diff --git a/apps/web/app/components/ui/skeleton.tsx b/apps/web/app/components/ui/skeleton.tsx
new file mode 100644
index 000000000..2a426bdf1
--- /dev/null
+++ b/apps/web/app/components/ui/skeleton.tsx
@@ -0,0 +1,9 @@
+import { cn } from "~/lib/utils";
+
+import type { HTMLAttributes } from "react";
+
+function Skeleton({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("animate-pulse rounded-md bg-neutral-100", className)} {...props} />;
+}
+
+export { Skeleton };
diff --git a/apps/web/app/config/navigationConfig.ts b/apps/web/app/config/navigationConfig.ts
index 270acba97..d301b792a 100644
--- a/apps/web/app/config/navigationConfig.ts
+++ b/apps/web/app/config/navigationConfig.ts
@@ -31,6 +31,11 @@ export const navigationConfig: NavigationItem[] = [
     path: "",
     iconName: "Dashboard",
   },
+  {
+    label: "courses",
+    path: "courses",
+    iconName: "Course",
+  },
   {
     label: "settings",
     path: "settings",
diff --git a/apps/web/app/config/routeAccessConfig.ts b/apps/web/app/config/routeAccessConfig.ts
index a71d0d9c8..8a0bf1a22 100644
--- a/apps/web/app/config/routeAccessConfig.ts
+++ b/apps/web/app/config/routeAccessConfig.ts
@@ -86,6 +86,7 @@ export const routeAccessConfig = createRouteConfig({
 
   // Client part
   "": ALL_ROLES, // Dashboard
+  courses: ALL_ROLES,
   "course/:id": ALL_ROLES,
   "course/:courseId/lesson/:lessonId": ALL_ROLES,
   settings: ALL_ROLES,
diff --git a/apps/web/app/index.css b/apps/web/app/index.css
index bd12acf0a..6ecf322d7 100644
--- a/apps/web/app/index.css
+++ b/apps/web/app/index.css
@@ -1,7 +1,12 @@
+@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
+html, body {
+  font-family: "DM Sans", sans-serif;
+}
+
 @layer base {
   :root {
     --color-black: #121521;
diff --git a/apps/web/app/modules/Statistics/Statistics.page.tsx b/apps/web/app/modules/Statistics/Statistics.page.tsx
new file mode 100644
index 000000000..beb5190a2
--- /dev/null
+++ b/apps/web/app/modules/Statistics/Statistics.page.tsx
@@ -0,0 +1,108 @@
+import { useEffect, useState } from "react";
+
+import { useCurrentUser } from "~/api/queries";
+import { Gravatar } from "~/components/Gravatar";
+import { Avatar } from "~/components/ui/avatar";
+import { AvgPercentScoreChart } from "~/modules/Statistics/components/AvgPercentScoreChart";
+import { ContinueLearningCard } from "~/modules/Statistics/components/ContinueLearningCard";
+import { ProfileWithCalendar } from "~/modules/Statistics/components/ProfileWithCalendar";
+import { RatesChart } from "~/modules/Statistics/components/RatesChart";
+
+import type { ChartConfig } from "~/components/ui/chart";
+
+const chartData1 = [
+  { state: "Correct", percentage: 72, fill: "var(--primary-700)" },
+  { state: "Wrong", percentage: 28, fill: "var(--primary-300)" },
+];
+
+const chartConfig1 = {
+  completed: {
+    label: "Correct answers",
+    color: "var(--primary-700)",
+  },
+  notCompleted: {
+    label: "Wrong answers",
+    color: "var(--primary-300)",
+  },
+} satisfies ChartConfig;
+
+const chartData2 = [
+  { state: "Completed", percentage: 92, fill: "var(--primary-700)" },
+  { state: "Started", percentage: 8, fill: "var(--primary-300)" },
+];
+
+const chartConfig2 = {
+  completed: {
+    label: "Completed Courses",
+    color: "var(--primary-700)",
+  },
+  notCompleted: {
+    label: "Started Courses",
+    color: "var(--primary-300)",
+  },
+} satisfies ChartConfig;
+
+const chartData = [
+  { month: "January", completed: 1, started: 2 },
+  { month: "February", completed: 2, started: 3 },
+  { month: "March", completed: 3, started: 5 },
+  { month: "April", completed: 4, started: 6 },
+  { month: "May", completed: 5, started: 6 },
+  { month: "June", completed: 6, started: 7 },
+  { month: "July", completed: 7, started: 8 },
+  { month: "August", completed: 8, started: 8 },
+  { month: "September", completed: 8, started: 9 },
+  { month: "October", completed: 8, started: 9 },
+  { month: "November", completed: 9, started: 9 },
+  { month: "December", completed: 9, started: 9 },
+];
+
+export default function StatisticsPage() {
+  const { data: user } = useCurrentUser();
+  const [isLoading, setIsLoading] = useState(true);
+  useEffect(() => {
+    setTimeout(() => {
+      setIsLoading(false);
+    }, 1000);
+  }, []);
+  return (
+    <div className="flex px-4 flex-col gap-y-6 lg:gap-y-6 md:px-6 lg:p-2">
+      <div className="gap-x-2 flex lg:gap-x-4 items-center">
+        <p className="h5 lg:h2 text-neutral-950">Welcome back, {user?.firstName}</p>
+        <Avatar className="size-12">
+          <Gravatar email={user?.email} />
+        </Avatar>
+      </div>
+      <div className="flex items-center flex-col-reverse lg:flex-row gap-y-4 h-full gap-x-7 lg:h-[calc(100dvh-161px)]">
+        <div className="w-full h-full gap-y-4 lg:gap-x-4 lg:gap-y-6 flex flex-col">
+          <div className="flex flex-wrap gap-4 w-full h-full">
+            <ContinueLearningCard isLoading={isLoading} />
+            <AvgPercentScoreChart
+              label="72%"
+              title="Avg. Percent Score of Quizzes"
+              chartConfig={chartConfig1}
+              chartData={chartData1}
+              isLoading={isLoading}
+            />
+            <AvgPercentScoreChart
+              label="92%"
+              title="Avg. Percent of Course Competition"
+              chartConfig={chartConfig2}
+              chartData={chartData2}
+              isLoading={isLoading}
+            />
+          </div>
+          <div className="flex flex-col lg:gap-x-4 lg:flex-row w-full h-full gap-y-4">
+            <div className="w-full h-full bg-white rounded-lg lg:max-w-[592px] drop-shadow-card">
+              <RatesChart resourceName="Courses" chartData={chartData} isLoading={isLoading} />
+            </div>
+            <div className="w-full h-full bg-white rounded-lg lg:max-w-[592px] drop-shadow-card">
+              <RatesChart resourceName="Lessons" chartData={chartData} isLoading={isLoading} />
+            </div>
+          </div>
+        </div>
+        <ProfileWithCalendar user={user} isLoading={isLoading} />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/app/modules/Statistics/components/AvgCoursePercentCompletition.tsx b/apps/web/app/modules/Statistics/components/AvgCoursePercentCompletition.tsx
new file mode 100644
index 000000000..d185e872c
--- /dev/null
+++ b/apps/web/app/modules/Statistics/components/AvgCoursePercentCompletition.tsx
@@ -0,0 +1,74 @@
+import { Label, Pie, PieChart } from "recharts";
+
+import { CategoryChip } from "~/components/ui/CategoryChip";
+import { ChartContainer, ChartTooltip, ChartTooltipContent } from "~/components/ui/chart";
+
+import type { ChartConfig } from "~/components/ui/chart";
+
+const chartData = [
+  { state: "correct", percentage: 92, fill: "var(--primary-700)" },
+  { state: "wrong", percentage: 8, fill: "var(--neutral-100)" },
+];
+
+const chartConfig = {
+  completed: {
+    label: "Correct answers",
+    color: "var(--primary-700)",
+  },
+  notCompleted: {
+    label: "Wrong answers",
+    color: "var(--neutral-300)",
+  },
+} satisfies ChartConfig;
+
+export const AvgCoursePercentCompletition = () => {
+  return (
+    <div className="w-full max-w-[436px] h-full bg-white rounded-lg gap-6 drop-shadow-card p-8 flex flex-col">
+      <h2 className="body-lg-md text-neutral-950 text-center">
+        Avg. Percent of Course Completition
+      </h2>
+      <div className="grid place-items-center h-full">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px] w-full h-full"
+        >
+          <PieChart>
+            <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
+            <Pie
+              data={chartData}
+              dataKey="percentage"
+              nameKey="state"
+              innerRadius={88}
+              strokeWidth={5}
+              startAngle={90}
+              endAngle={-270}
+            >
+              <Label
+                content={({ viewBox }) => {
+                  if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                    return (
+                      <text
+                        x={viewBox.cx}
+                        y={viewBox.cy}
+                        textAnchor="middle"
+                        dominantBaseline="middle"
+                      >
+                        <tspan x={viewBox.cx} y={viewBox.cy} className="fill-primary-950 h3">
+                          92%
+                        </tspan>
+                      </text>
+                    );
+                  }
+                }}
+              />
+            </Pie>
+          </PieChart>
+        </ChartContainer>
+      </div>
+      <div className="flex gap-2 justify-center">
+        <CategoryChip category="Completed Courses" />
+        <CategoryChip category="Started Courses" color="text-neutral-300" />
+      </div>
+    </div>
+  );
+};
diff --git a/apps/web/app/modules/Statistics/components/AvgPercentScoreChart.tsx b/apps/web/app/modules/Statistics/components/AvgPercentScoreChart.tsx
new file mode 100644
index 000000000..cdfa21b19
--- /dev/null
+++ b/apps/web/app/modules/Statistics/components/AvgPercentScoreChart.tsx
@@ -0,0 +1,96 @@
+import { useMemo } from "react";
+import { Label, Pie, PieChart } from "recharts";
+
+import { ChartContainer, ChartTooltip, ChartTooltipContent } from "~/components/ui/chart";
+import { Skeleton } from "~/components/ui/skeleton";
+import { ChartLegendBadge } from "~/modules/Statistics/components/ChartLegendBadge";
+
+import type { ChartConfig } from "~/components/ui/chart";
+
+type AvgPercentScoreChartProps = {
+  label: string;
+  title: string;
+  chartConfig: ChartConfig;
+  chartData: { state: string; percentage: number; fill: string }[];
+  isLoading?: boolean;
+};
+
+export const AvgPercentScoreChart = ({
+  label,
+  title,
+  chartConfig,
+  chartData,
+  isLoading = false,
+}: AvgPercentScoreChartProps) => {
+  const chartLegend = useMemo(() => {
+    return Object.values(chartConfig).map((config) => {
+      return (
+        <ChartLegendBadge
+          key={config.label as string}
+          label={config.label}
+          dotColor={config.color}
+        />
+      );
+    });
+  }, [chartConfig]);
+
+  if (isLoading) {
+    return (
+      <div className="w-full md:max-w-[352px] h-auto lg:max-w-[436px] bg-white items-center rounded-lg gap-6 drop-shadow-card p-8 flex flex-col">
+        <Skeleton className="max-w-[240px] w-full h-[30px] rounded-lg" />
+        <div className="grid place-items-center h-[250px]">
+          <Skeleton className="aspect-square max-h-[200px] w-full h-full rounded-full" />
+        </div>
+        <div className="flex gap-2 justify-center">
+          <Skeleton className="w-[126px] h-[27px] rounded-lg" />
+          <Skeleton className="w-[126px] h-[27px] rounded-lg" />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="w-full md:w-[calc(50%-8px)] h-auto lg:max-w-[436px] bg-white rounded-lg gap-6 drop-shadow-card p-8 flex flex-col">
+      <h2 className="body-lg-md text-neutral-950 text-center">{title}</h2>
+      <div className="grid place-items-center h-full">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px] w-full h-full"
+        >
+          <PieChart>
+            <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
+            <Pie
+              data={chartData}
+              dataKey="percentage"
+              nameKey="state"
+              innerRadius={88}
+              strokeWidth={5}
+              startAngle={90}
+              endAngle={-270}
+            >
+              <Label
+                content={({ viewBox }) => {
+                  if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                    return (
+                      <text
+                        x={viewBox.cx}
+                        y={viewBox.cy}
+                        textAnchor="middle"
+                        dominantBaseline="middle"
+                      >
+                        <tspan x={viewBox.cx} y={viewBox.cy} className="fill-primary-950 h3">
+                          {label}
+                        </tspan>
+                      </text>
+                    );
+                  }
+                }}
+              />
+            </Pie>
+          </PieChart>
+        </ChartContainer>
+      </div>
+      <div className="flex gap-2 justify-center">{chartLegend}</div>
+    </div>
+  );
+};
diff --git a/apps/web/app/modules/Statistics/components/AvgQuizzesPercentScore.tsx b/apps/web/app/modules/Statistics/components/AvgQuizzesPercentScore.tsx
new file mode 100644
index 000000000..66a9a0f16
--- /dev/null
+++ b/apps/web/app/modules/Statistics/components/AvgQuizzesPercentScore.tsx
@@ -0,0 +1,72 @@
+import { Label, Pie, PieChart } from "recharts";
+
+import { CategoryChip } from "~/components/ui/CategoryChip";
+import { ChartContainer, ChartTooltip, ChartTooltipContent } from "~/components/ui/chart";
+
+import type { ChartConfig } from "~/components/ui/chart";
+
+const chartData = [
+  { answers: "correct", percentage: 74, fill: "var(--primary-700)" },
+  { answers: "wrong", percentage: 26, fill: "var(--neutral-100)" },
+];
+
+const chartConfig = {
+  correct: {
+    label: "Correct answers",
+    color: "var(--primary-700)",
+  },
+  wrong: {
+    label: "Wrong answers",
+    color: "var(--neutral-300)",
+  },
+} satisfies ChartConfig;
+
+export const AvgQuizzesPercentScore = () => {
+  return (
+    <div className="w-full h-full bg-white rounded-lg max-w-[436px] gap-6 drop-shadow-card p-8 flex flex-col">
+      <h2 className="body-lg-md text-neutral-950 text-center">Avg. Percent Score of Quizzes</h2>
+      <div className="grid place-items-center h-full">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px] w-full h-full"
+        >
+          <PieChart>
+            <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
+            <Pie
+              data={chartData}
+              dataKey="percentage"
+              nameKey="answers"
+              innerRadius={88}
+              strokeWidth={5}
+              startAngle={90}
+              endAngle={-270}
+            >
+              <Label
+                content={({ viewBox }) => {
+                  if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                    return (
+                      <text
+                        x={viewBox.cx}
+                        y={viewBox.cy}
+                        textAnchor="middle"
+                        dominantBaseline="middle"
+                      >
+                        <tspan x={viewBox.cx} y={viewBox.cy} className="fill-primary-950 h3">
+                          74%
+                        </tspan>
+                      </text>
+                    );
+                  }
+                }}
+              />
+            </Pie>
+          </PieChart>
+        </ChartContainer>
+      </div>
+      <div className="flex gap-2 justify-center">
+        <CategoryChip category="Correct answers" />
+        <CategoryChip category="Wrong answers" color="text-neutral-300" />
+      </div>
+    </div>
+  );
+};
diff --git a/apps/web/app/modules/Statistics/components/ChartLegendBadge.tsx b/apps/web/app/modules/Statistics/components/ChartLegendBadge.tsx
new file mode 100644
index 000000000..6aa10d8e2
--- /dev/null
+++ b/apps/web/app/modules/Statistics/components/ChartLegendBadge.tsx
@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+
+type ChartLegendBadgeProps = {
+  label: ReactNode | string | undefined;
+  dotColor: string | undefined;
+};
+
+export const ChartLegendBadge = ({ label = "", dotColor = "#3F58B6" }: ChartLegendBadgeProps) => {
+  return (
+    <div className="flex gap-x-2 items-center bg-neutral-50 rounded-lg px-2 py-1">
+      <div className="rounded-full size-2 aspect-square" style={{ backgroundColor: dotColor }} />
+      <span className="details-md text-primary-950">{label}</span>
+    </div>
+  );
+};
diff --git a/apps/web/app/modules/Statistics/components/ContinueLearningCard.tsx b/apps/web/app/modules/Statistics/components/ContinueLearningCard.tsx
new file mode 100644
index 000000000..2bdad97a0
--- /dev/null
+++ b/apps/web/app/modules/Statistics/components/ContinueLearningCard.tsx
@@ -0,0 +1,42 @@
+import { Skeleton } from "~/components/ui/skeleton";
+import { LessonCard } from "~/modules/Courses/CourseView/LessonCard";
+
+type ContinueLearningCardProps = {
+  isLoading: boolean;
+};
+
+export const ContinueLearningCard = ({ isLoading = false }: ContinueLearningCardProps) => {
+  if (isLoading) {
+    return (
+      <div className="w-full h-full p-4 gap-y-4 bg-white rounded-lg drop-shadow-card lg:max-w-[296px] flex flex-col">
+        <div className="flex flex-col items-center gap-y-1">
+          <Skeleton className="h-[29px] max-w-[240px] w-full rounded-lg" />
+          <Skeleton className="h-[16px] max-w-[160px] w-full rounded-lg" />
+        </div>
+        <Skeleton className="h-full w-full rounded-lg" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="w-full h-full p-4 gap-y-4 bg-white rounded-lg drop-shadow-card lg:max-w-[296px] flex flex-col">
+      <div className="text-center">
+        <h2 className="body-lg-md text-neutral-950">Continue learning in:</h2>
+        <a href="#" className="body-sm-md text-primary-700 underline">
+          Introduction to Cloud Computing
+        </a>
+      </div>
+      <LessonCard
+        id=""
+        title="Understanding Cloud Computing Basics"
+        description="Explore the foundational concepts of cloud computing, including its definition, key features, and how it differs from traditional computing models."
+        itemsCount={10}
+        index={2}
+        isEnrolled={true}
+        isAdmin={false}
+        itemsCompletedCount={4}
+        lessonProgress="in_progress"
+      />
+    </div>
+  );
+};
diff --git a/apps/web/app/modules/Statistics/components/ProfileWithCalendar.tsx b/apps/web/app/modules/Statistics/components/ProfileWithCalendar.tsx
new file mode 100644
index 000000000..3dfadd817
--- /dev/null
+++ b/apps/web/app/modules/Statistics/components/ProfileWithCalendar.tsx
@@ -0,0 +1,114 @@
+import { useState } from "react";
+
+import { Gravatar } from "~/components/Gravatar";
+import { Avatar } from "~/components/ui/avatar";
+import { Button } from "~/components/ui/button";
+import { Calendar } from "~/components/ui/calendar";
+import { Skeleton } from "~/components/ui/skeleton";
+
+import type { CurrentUserResponse } from "~/api/generated-api";
+
+type ProfileWithCalendar = {
+  user: CurrentUserResponse["data"] | undefined;
+  isLoading: boolean;
+};
+
+export const ProfileWithCalendar = ({ user, isLoading = true }: ProfileWithCalendar) => {
+  const [date, setDate] = useState<Date | undefined>(new Date());
+
+  if (isLoading) {
+    return (
+      <div className="w-full lg:divide-neutral-100 lg:divide-y h-full lg:max-w-[384px] lg:flex-col md:flex-row lg:bg-white rounded-lg drop-shadow-card lg:p-8 flex flex-col gap-6">
+        <div className="w-full bg-white rounded-lg p-8 lg:p-0 md:max-w-[352px]">
+          <div className="flex items-center">
+            <Skeleton className="h-4 w-20 rounded-lg" />
+          </div>
+          <div className="flex flex-col items-center mt-6">
+            <Skeleton className="aspect-square size-[124px] rounded-full" />
+            <div className="flex flex-col items-center justify-center">
+              <div className="flex items-center h-[38px] w-full max-w-[240px]">
+                <Skeleton className="h-6 w-full rounded-lg" />
+              </div>
+              <div className="flex items-center">
+                <Skeleton className="w-40 h-[16px] rounded-lg" />
+              </div>
+            </div>
+            <Skeleton className="w-full mt-6 h-[38px] rounded-lg" />
+          </div>
+        </div>
+        <div className="flex bg-white rounded-lg p-8 lg:p-0 flex-col gap-y-2 w-full h-full max-w-[352px]">
+          <div className="flex items-center py-[21px]">
+            <Skeleton className="w-full h-8" />
+          </div>
+          <div className="flex justify-center w-full h-full">
+            <Skeleton className="h-[376px] md:h-full w-full" />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="w-full lg:divide-primary-200 lg:divide-y md:max-w-[352px] h-full lg:max-w-[384px] lg:flex-col md:flex-row lg:bg-white rounded-lg drop-shadow-card lg:p-8 flex flex-col lg:gap-8 gap-6">
+      <div className="bg-white rounded-lg w-full">
+        <span className="body-lg-md text-neutral-900">My Profile</span>
+        <div className="flex flex-col items-center gap-6 mt-6">
+          <Avatar className="size-[124px]">
+            <Gravatar email={user?.email} />
+          </Avatar>
+          <div className="text-center">
+            <h2 className="h5">
+              {user?.firstName} {user?.lastName}
+            </h2>
+            <a className="body-lg text-neutral-800" href={`mailto:${user?.email}`}>
+              {user?.email}
+            </a>
+          </div>
+          <Button className="w-full">Settings</Button>
+        </div>
+      </div>
+      <div className="flex flex-col lg:pt-8 gap-y-2 bg-white rounded-lg">
+        <div className="flex flex-row-reverse lg:flex-row justify-between items-center">
+          <div className="flex items-center py-2 gap-x-2">
+            <svg
+              width="48"
+              height="48"
+              viewBox="0 0 48 48"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M7.55828 31.6179C8.46036 25.4497 15.7529 18.9945 16.9289 12.842C17.7601 8.49325 17.1409 3.70398 14.5599 0C18.8265 2.22715 25.3238 5.56069 30.1885 14.3404C35.5409 24.0007 34.1354 29.5151 33.6626 31.0539C35.262 29.0894 37.7272 26.3971 37.8884 24.0002C42.9408 31.0521 41.5501 44.1999 30.1836 47.718C32.7138 44.9615 32.6582 42.3131 30.0273 39.5256C30.061 41.6567 29.8176 42.5574 28.81 44.4074C27.9452 45.9947 26.9044 47.0274 25.3624 48C26.3382 37.2509 19.9535 36.6873 19.7654 31.8985C19.5777 27.1097 21.4555 25.9831 21.4555 25.9831C21.4555 25.9831 14.2249 29.4581 13.6255 35.8135C13.0134 42.3024 18.0869 46.9646 18.5418 47.353C17.2491 47.3328 5.53947 45.4244 7.55828 31.6179Z"
+                fill="#F19800"
+              />
+              <path
+                d="M10.8896 34.4113C11.6071 29.2767 15.0762 26.575 17.8781 22.263C20.1933 18.7 22.6553 14.4433 20.6019 11.3599C23.9956 13.2134 28.092 18.2007 29.8625 23.118C32.9594 31.7208 31.3272 34.8774 30.9514 36.1593C32.2235 34.524 37.1564 30.6718 37.2844 28.6768C41.2336 35.0193 40.1972 44.2763 31.1557 47.2048C33.1682 44.9108 33.1305 40.5063 29.6582 38.8674C29.6852 40.6415 28.9775 42.8583 28.5007 44.4258C28.0647 45.86 27.344 46.4671 26.1172 47.2771C26.8936 38.329 21.2961 36.013 21.1466 32.027C20.9975 28.0406 22.5085 25.0429 22.5085 25.0429C22.5085 25.0429 14.8167 26.8246 13.4521 36.017C12.3628 43.3572 17.7201 46.8115 18.0824 47.1343C17.0537 47.1168 9.28386 45.904 10.8896 34.4113Z"
+                fill="#F6B63E"
+              />
+              <path
+                d="M32.28 46.3961C33.9585 45.5227 35.4663 44.1496 36.6095 42.6274C37.755 41.1021 38.1905 39.064 38.4146 37.1996C38.6094 35.5841 38.4065 34.0825 37.9925 32.5608C37.9974 32.9474 38.1034 33.3641 38.1254 33.7637C38.1519 34.2473 38.0446 34.7035 37.9417 35.1714C37.7141 36.2046 37.1744 37.4879 36.0128 38.65C33.764 40.8991 32.5176 40.165 32.386 40.3051C32.1979 40.5062 33.2311 41.7033 33.2311 43.2278C33.2311 45.2704 32.8256 45.7405 32.3155 46.6789L32.28 46.3961Z"
+                fill="#FDD441"
+              />
+              <path
+                d="M27.2093 44.2829C27.2093 42.0711 26.1043 40.0805 25.0616 38.192C24.3037 36.8189 23.7572 35.3254 23.451 33.7799C22.9916 31.4625 23.5731 29.3319 24.2507 27.1267C24.3603 26.772 24.4424 26.38 24.6068 26.0518C24.6184 26.7549 24.3513 27.5879 24.2431 28.2888C24.1286 29.0351 24.1793 29.8042 24.2947 30.5505C24.5376 32.1162 25.0958 33.4391 25.9139 34.7834C26.3508 35.5014 26.7558 36.1736 27.0337 36.9666C27.3256 37.7995 27.4127 38.6495 27.4482 39.5287C27.4958 40.7083 27.4289 41.865 27.3072 43.0248C27.2515 43.5573 27.1473 44.102 27.0688 44.6345"
+                fill="#FDD441"
+              />
+            </svg>
+            <span className="h1 text-neutral-950">19</span>
+          </div>
+          <span className="text-neutral-800 body-lg-md">Daily Streak</span>
+        </div>
+        <div className="flex justify-center w-full">
+          <Calendar
+            mode="single"
+            selected={date}
+            onSelect={setDate}
+            showOutsideDays
+            fixedWeeks
+            weekStartsOn={1}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/web/app/modules/Statistics/components/RatesChart.tsx b/apps/web/app/modules/Statistics/components/RatesChart.tsx
new file mode 100644
index 000000000..c8f97dc1e
--- /dev/null
+++ b/apps/web/app/modules/Statistics/components/RatesChart.tsx
@@ -0,0 +1,122 @@
+import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts";
+
+import { ChartContainer, ChartTooltip, ChartTooltipContent } from "~/components/ui/chart";
+import { Skeleton } from "~/components/ui/skeleton";
+import { ChartLegendBadge } from "~/modules/Statistics/components/ChartLegendBadge";
+
+import type { ChartConfig } from "~/components/ui/chart";
+
+const chartConfig = {
+  completed: {
+    label: "Completed",
+    color: "var(--primary-700)",
+  },
+  started: {
+    label: "Started",
+    color: "var(--primary-300)",
+  },
+} satisfies ChartConfig;
+
+interface ChartData {
+  month: string;
+  completed: number;
+  started: number;
+}
+
+type RatesChartProps = {
+  isLoading?: boolean;
+  resourceName: string;
+  chartData: ChartData[];
+};
+
+export const RatesChart = ({ isLoading = false, resourceName, chartData }: RatesChartProps) => {
+  const dataMax = Math.max(...chartData.map((d) => d.started));
+  const step = Math.ceil(dataMax / 10);
+  const yAxisMax = dataMax + step;
+  const ticks = Array.from({ length: Math.floor(yAxisMax / step) }, (_, i) => (i + 1) * step);
+
+  if (isLoading) {
+    return (
+      <div className="w-full bg-white rounded-lg gap-4 drop-shadow-card p-8 flex flex-col">
+        <hgroup className="gap-y-[5px] flex flex-col items-center py-3">
+          <Skeleton className="h-6 w-[240px] rounded-lg" />
+          <Skeleton className="w-40 h-4 rounded-lg" />
+        </hgroup>
+        {/*<div className=""></div>*/}
+        <div className="w-full h-[273px] flex gap-x-2 items-center">
+          <div className="flex flex-col gap-y-4 h-full mt-6">
+            {Array.from({ length: 10 }).map((_, index) => (
+              <Skeleton key={index} className="h-2 w-3 rounded-lg" />
+            ))}
+          </div>
+          <div className="flex flex-col gap-y-1 w-full">
+            <div className="flex flex-col w-full gap-y-[23px] relative">
+              {Array.from({ length: 10 }).map((_, index) => (
+                <Skeleton key={index} className="h-[1px] w-full" />
+              ))}
+              <div className="absolute flex bottom-0 left-2 gap-x-[14px]">
+                {Array.from({ length: 12 }).map((_, index) => (
+                  <div className="flex gap-x-1">
+                    {Array.from({ length: 2 }).map((_, index) => (
+                      <Skeleton key={index} className="w-3 h-[132px] rounded-lg" />
+                    ))}
+                  </div>
+                ))}
+              </div>
+            </div>
+            <div className="flex w-full ml-2 gap-x-[14px]">
+              {Array.from({ length: 12 }).map((_, index) => (
+                <Skeleton key={index} className="h-[19px] w-7 rounded-lg" />
+              ))}
+            </div>
+          </div>
+        </div>
+        <div className="flex gap-2 justify-center">
+          <Skeleton className="w-[126px] h-[27px] rounded-lg" />
+          <Skeleton className="w-[126px] h-[27px] rounded-lg" />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="w-full bg-white rounded-lg gap-4 drop-shadow-card p-8 flex flex-col">
+      <hgroup>
+        <h2 className="body-lg-md text-neutral-950 text-center">{resourceName} Rates</h2>
+        <p className="body-sm-md text-center text-neutral-800">Number of {resourceName} in 2024</p>
+      </hgroup>
+      <div className="grid mt-2 place-items-center h-full">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[273px] w-full h-full"
+        >
+          <BarChart accessibilityLayer data={chartData}>
+            <CartesianGrid horizontal={true} vertical={false} />
+            <YAxis ticks={ticks} tickLine={false} axisLine={false} domain={[0, dataMax]} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip cursor={false} content={<ChartTooltipContent indicator="dashed" />} />
+            <Bar dataKey="completed" fill="var(--color-completed)" />
+            <Bar dataKey="started" fill="var(--color-started)" />
+          </BarChart>
+        </ChartContainer>
+      </div>
+      <div className="flex gap-2 justify-center">
+        {Object.values(chartConfig).map((config) => {
+          return (
+            <ChartLegendBadge
+              key={config.label as string}
+              label={config.label}
+              dotColor={config.color}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+};
diff --git a/apps/web/package.json b/apps/web/package.json
index 74a6091bc..a8aa98637 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -61,10 +61,12 @@
     "lucide-react": "^0.408.0",
     "morgan": "^1.10.0",
     "react": "^18.3.1",
+    "react-day-picker": "8.10.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.52.1",
     "react-player": "^2.16.0",
     "react-use": "^17.5.1",
+    "recharts": "^2.13.3",
     "socket.io-client": "^4.8.0",
     "tailwind-merge": "^2.4.0",
     "tailwindcss-animate": "^1.0.7",
diff --git a/apps/web/routes.ts b/apps/web/routes.ts
index 5d860bc3e..a0d67532c 100644
--- a/apps/web/routes.ts
+++ b/apps/web/routes.ts
@@ -11,9 +11,10 @@ export const routes: (
       route("password-recovery", "modules/Auth/PasswordRecovery.page.tsx");
     });
     route("", "modules/Dashboard/Dashboard.layout.tsx", () => {
-      route("", "modules/Dashboard/Dashboard.page.tsx", {
+      route("", "modules/Statistics/Statistics.page.tsx", {
         index: true,
       });
+      route("courses", "modules/Dashboard/Dashboard.page.tsx");
       route("course/:id", "modules/Courses/CourseView/CourseView.page.tsx");
       route("course/:courseId/lesson/:lessonId", "modules/Courses/Lesson/Lesson.layout.tsx", () => {
         route("", "modules/Courses/Lesson/Lesson.page.tsx", {
diff --git a/apps/web/tailwind.config.ts b/apps/web/tailwind.config.ts
index 9f05e0770..736c2ef5d 100644
--- a/apps/web/tailwind.config.ts
+++ b/apps/web/tailwind.config.ts
@@ -143,6 +143,7 @@ const config = {
         sm: "calc(var(--radius) - 4px)",
       },
       dropShadow: {
+        card: "2px 4px 16px 0px rgba(34, 41, 73, 0.08)",
         primary: "2px 4px 16px rgba(34, 41, 73, 0.08)",
       },
       keyframes: {