Initial commit

2026-04-29 10:56:24 +02:00 · 2024-07-30 16:00:11 -07:00 · 2024-07-30 16:00:11 -07:00 · 55332d1ddb
commit 55332d1ddb
168 changed files with 18456 additions and 0 deletions
--- a/apps/web/components/demo-exercise.tsx
+++ b/apps/web/components/demo-exercise.tsx
@ -0,0 +1,126 @@
+"use client";
+// Example data from ShadCN: https://github.com/shadcn-ui/ui/blob/0fae3fd93ae749aca708bdfbbbeddc5d576bfb2e/apps/www/registry/default/example/cards/stats.tsx#L61
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Line, LineChart, ResponsiveContainer, Tooltip } from "recharts";
+import { twColourConfig } from "@/lib/twConfig";
+
+const timeSeriesData = [
+  {
+    average: 400,
+    today: 240,
+  },
+  {
+    average: 300,
+    today: 139,
+  },
+  {
+    average: 200,
+    today: 980,
+  },
+  {
+    average: 278,
+    today: 390,
+  },
+  {
+    average: 189,
+    today: 480,
+  },
+  {
+    average: 239,
+    today: 380,
+  },
+  {
+    average: 349,
+    today: 430,
+  },
+];
+
+export function DemoExercise() {
+  return (
+    <Card className="w-full text-left">
+      <CardHeader>
+        <CardTitle>Exercise Minutes</CardTitle>
+        <CardDescription>
+          Your exercise minutes are ahead of where you normally are.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="pb-4">
+        {/* <div className="h-auto"> */}
+        <div className="h-[140px]">
+          <ResponsiveContainer width="100%" height="100%">
+            <LineChart
+              data={timeSeriesData}
+              margin={{
+                top: 5,
+                right: 10,
+                left: 10,
+                bottom: 0,
+              }}
+            >
+              <Tooltip
+                content={({ active, payload }) => {
+                  if (active && payload && payload.length) {
+                    return (
+                      <div className="rounded-lg border bg-background p-2 shadow-sm">
+                        <div className="grid grid-cols-2 gap-2">
+                          <div className="flex flex-col">
+                            <span className="text-[0.70rem] uppercase text-muted-foreground">
+                              Average
+                            </span>
+                            <span className="font-bold text-muted-foreground">
+                              {payload[0].value}
+                            </span>
+                          </div>
+                          <div className="flex flex-col">
+                            <span className="text-[0.70rem] uppercase text-muted-foreground">
+                              Today
+                            </span>
+                            <span className="font-bold">
+                              {payload[1].value}
+                            </span>
+                          </div>
+                        </div>
+                      </div>
+                    );
+                  }
+                  return null;
+                }}
+              />
+              <Line
+                type="monotone"
+                strokeWidth={2}
+                dataKey="average"
+                activeDot={{
+                  r: 6,
+                  style: {
+                    fill: `${twColourConfig.primary.DEFAULT}`,
+                    opacity: 0.25,
+                  },
+                }}
+                stroke={twColourConfig.primary.DEFAULT}
+                opacity={0.25}
+              />
+              <Line
+                type="monotone"
+                dataKey="today"
+                strokeWidth={2}
+                activeDot={{
+                  r: 8,
+                  style: { fill: `${twColourConfig.primary.DEFAULT}` },
+                }}
+                stroke={twColourConfig.primary.DEFAULT}
+              />
+            </LineChart>
+          </ResponsiveContainer>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
--- a/apps/web/components/demo-goal.tsx
+++ b/apps/web/components/demo-goal.tsx
@ -0,0 +1,120 @@
+"use client";
+// https://github.com/shadcn-ui/ui/blob/0fae3fd93ae749aca708bdfbbbeddc5d576bfb2e/apps/www/registry/default/example/cards/activity-goal.tsx
+import * as React from "react";
+import { Minus, Plus } from "lucide-react";
+import { Bar, BarChart, ResponsiveContainer } from "recharts";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { twColourConfig } from "@/lib/twConfig";
+
+const data = [
+  {
+    goal: 400,
+  },
+  {
+    goal: 300,
+  },
+  {
+    goal: 200,
+  },
+  {
+    goal: 300,
+  },
+  {
+    goal: 200,
+  },
+  {
+    goal: 278,
+  },
+  {
+    goal: 189,
+  },
+  {
+    goal: 239,
+  },
+  {
+    goal: 300,
+  },
+  {
+    goal: 200,
+  },
+  {
+    goal: 278,
+  },
+  {
+    goal: 189,
+  },
+  {
+    goal: 349,
+  },
+];
+
+export function DemoGoal() {
+  const [goal, setGoal] = React.useState(350);
+
+  function onClick(adjustment: number) {
+    setGoal(Math.max(200, Math.min(400, goal + adjustment)));
+  }
+
+  return (
+    <Card className="w-full">
+      <CardHeader className="pb-4">
+        <CardTitle className="text-base">Move Goal</CardTitle>
+        <CardDescription>Set your daily activity goal.</CardDescription>
+      </CardHeader>
+      <CardContent className="pb-2">
+        <div className="flex items-center justify-center space-x-2">
+          <Button
+            variant="outline"
+            size="icon"
+            className="h-8 w-8 shrink-0 rounded-full"
+            onClick={() => onClick(-10)}
+            disabled={goal <= 200}
+          >
+            <Minus className="h-4 w-4" />
+            <span className="sr-only">Decrease</span>
+          </Button>
+          <div className="flex-1 text-center">
+            <div className="text-5xl font-bold tracking-tighter">{goal}</div>
+            <div className="text-[0.70rem] uppercase text-muted-foreground">
+              Calories/day
+            </div>
+          </div>
+          <Button
+            variant="outline"
+            size="icon"
+            className="h-8 w-8 shrink-0 rounded-full"
+            onClick={() => onClick(10)}
+            disabled={goal >= 400}
+          >
+            <Plus className="h-4 w-4" />
+            <span className="sr-only">Increase</span>
+          </Button>
+        </div>
+        <div className="my-3 h-[60px]">
+          <ResponsiveContainer width="100%" height="100%">
+            <BarChart data={data}>
+              <Bar
+                dataKey="goal"
+                style={{
+                  fill: `${twColourConfig.primary.DEFAULT}`,
+                  opacity: 0.2,
+                }}
+              />
+            </BarChart>
+          </ResponsiveContainer>
+        </div>
+      </CardContent>
+      <CardFooter>
+        <Button className="w-full">Set Goal</Button>
+      </CardFooter>
+    </Card>
+  );
+}
--- a/apps/web/components/demo-revenue.tsx
+++ b/apps/web/components/demo-revenue.tsx
@ -0,0 +1,82 @@
+"use client";
+// Example data from ShadCN: https://github.com/shadcn-ui/ui/blob/0fae3fd93ae749aca708bdfbbbeddc5d576bfb2e/apps/www/registry/default/example/cards/stats.tsx#L61
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Line, LineChart, ResponsiveContainer } from "recharts";
+import { twColourConfig } from "@/lib/twConfig";
+
+const data = [
+  {
+    revenue: 10400,
+    subscription: 240,
+  },
+  {
+    revenue: 14405,
+    subscription: 300,
+  },
+  {
+    revenue: 9400,
+    subscription: 200,
+  },
+  {
+    revenue: 8200,
+    subscription: 278,
+  },
+  {
+    revenue: 7000,
+    subscription: 189,
+  },
+  {
+    revenue: 9600,
+    subscription: 239,
+  },
+  {
+    revenue: 11244,
+    subscription: 278,
+  },
+  {
+    revenue: 26475,
+    subscription: 189,
+  },
+];
+
+export function DemoRevenue() {
+  return (
+    <Card className="w-full">
+      <CardHeader className="flex flex-row justify-between space-y-0 pb-4">
+        <CardTitle className="text-base font-normal">Total Revenue</CardTitle>
+      </CardHeader>
+      <CardContent className="text-left">
+        <div className="text-2xl font-bold">$15,231.89</div>
+        <p className="text-xs text-muted-foreground">+20.1% from last month</p>
+        <div className="h-[140px]">
+          <ResponsiveContainer width="100%" height="100%">
+            <LineChart
+              data={data}
+              margin={{
+                top: 5,
+                right: 10,
+                left: 10,
+                bottom: 0,
+              }}
+            >
+              <Line
+                type="monotone"
+                strokeWidth={2}
+                dataKey="revenue"
+                activeDot={{
+                  r: 6,
+                  style: {
+                    fill: `${twColourConfig.primary.DEFAULT}`,
+                    opacity: 0.25,
+                  },
+                }}
+                stroke={twColourConfig.primary.DEFAULT}
+              />
+            </LineChart>
+          </ResponsiveContainer>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
--- a/apps/web/components/demo-subscriptions.tsx
+++ b/apps/web/components/demo-subscriptions.tsx
@ -0,0 +1,65 @@
+"use client";
+// Example data from ShadCN: https://github.com/shadcn-ui/ui/blob/0fae3fd93ae749aca708bdfbbbeddc5d576bfb2e/apps/www/registry/default/example/cards/stats.tsx#L61
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Bar, BarChart, ResponsiveContainer } from "recharts";
+import { twColourConfig } from "@/lib/twConfig";
+
+const data = [
+  {
+    revenue: 10400,
+    subscription: 240,
+  },
+  {
+    revenue: 14405,
+    subscription: 300,
+  },
+  {
+    revenue: 9400,
+    subscription: 200,
+  },
+  {
+    revenue: 8200,
+    subscription: 278,
+  },
+  {
+    revenue: 7000,
+    subscription: 189,
+  },
+  {
+    revenue: 9600,
+    subscription: 239,
+  },
+  {
+    revenue: 11244,
+    subscription: 278,
+  },
+  {
+    revenue: 26475,
+    subscription: 189,
+  },
+];
+
+export function DemoSubscriptions() {
+  return (
+    <Card className="w-full">
+      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+        <CardTitle className="text-base font-normal">Subscriptions</CardTitle>
+      </CardHeader>
+      <CardContent className="text-left">
+        <div className="text-2xl font-bold">+2350</div>
+        <p className="text-xs text-muted-foreground">+180.1% from last month</p>
+        <div className="mt-4 h-[110px]">
+          <ResponsiveContainer width="100%" height="100%">
+            <BarChart data={data}>
+              <Bar
+                dataKey="subscription"
+                fill={twColourConfig.primary.DEFAULT}
+              />
+            </BarChart>
+          </ResponsiveContainer>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
--- a/apps/web/components/flex-wrapper.tsx
+++ b/apps/web/components/flex-wrapper.tsx
@ -0,0 +1,74 @@
+import { cn } from "@/lib/utils";
+import { cva, type VariantProps } from "class-variance-authority";
+import { ReactNode, Children } from "react";
+
+const flexVariants = cva("", {
+  variants: {
+    columns: {
+      default: "",
+      "1": "flex-1 basis-full",
+      "2": "flex-1 basis-full sm:basis-[48%]",
+      "3": "flex-1 basis-full sm:basis-[48%] md:basis-[32%]",
+      "4": "flex-1 basis-full sm:basis-[48%] md:basis-[32%] lg:basis-[24%]",
+      "5": "flex-1 basis-full sm:basis-[48%] md:basis-[32%] lg:basis-[19%]",
+      "6": "flex-1 basis-full sm:basis-[48%] md:basis-[32%] lg:basis-[19%] xl:basis-[12%]",
+    },
+    horizontal_position: {
+      start: "justify-start",
+      center: "justify-center text-center",
+      end: "justify-end",
+      none: null,
+    },
+    vertical_position: {
+      start: "items-start",
+      center: "items-center text-center",
+      end: "items-end",
+      none: null,
+    },
+    borders: {
+      default: "border rounded-md p-5",
+      none: null,
+    },
+  },
+  defaultVariants: {
+    columns: "default",
+    horizontal_position: "none",
+    vertical_position: "none",
+    borders: "none",
+  },
+});
+
+export type FlexWrapperProps = VariantProps<typeof flexVariants> & {
+  children: ReactNode;
+  className?: string;
+};
+
+export function FlexWrapper({
+  children,
+  className,
+  columns,
+  horizontal_position,
+  vertical_position,
+}: FlexWrapperProps) {
+  return (
+    <div
+      id="flex-wrapper"
+      className={cn(
+        // isCentered && "place-items-stretch",
+        flexVariants({ horizontal_position, vertical_position }),
+        "w-full flex flex-wrap gap-4",
+        className,
+      )}
+    >
+      {Children.map(children, (child, index) => (
+        <div
+          key={index}
+          className={cn(flexVariants({ columns }), "flex min-h-full")}
+        >
+          {/* <div key={index} className={cn("flex min-h-full")}> */}
+          {child}
+        </div>
+      ))}
+    </div>
+  );
+}
--- a/apps/web/components/grid-wrapper.tsx
+++ b/apps/web/components/grid-wrapper.tsx
@ -0,0 +1,70 @@
+import { cn } from "@/lib/utils";
+import { cva, type VariantProps } from "class-variance-authority";
+import { ReactNode, Children } from "react";
+
+const gridVariants = cva("w-full grid gap-4 justify-between", {
+  variants: {
+    columns: {
+      default:
+        "grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 2xl:grid-cols-6",
+      "1": "grid-cols-1",
+      "2": "grid-cols-1 sm:grid-cols-2",
+      "3": "grid-cols-1 sm:grid-cols-2 md:grid-cols-3",
+      "4": "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4",
+      "5": "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5",
+      "6": "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-6",
+    },
+    horizontal_position: {
+      start: "justify-start",
+      center: "justify-center text-center",
+      end: "justify-end",
+    },
+    vertical_position: {
+      start: "items-start",
+      center: "items-center text-center",
+      end: "items-end",
+    },
+    borders: {
+      default: "border rounded-md p-5",
+      none: null,
+    },
+  },
+  defaultVariants: {
+    columns: "default",
+    horizontal_position: "center",
+    vertical_position: "center",
+    borders: "none",
+  },
+});
+
+export type GridWrapperProps = VariantProps<typeof gridVariants> & {
+  children: ReactNode;
+  className?: string;
+};
+
+export function GridWrapper({
+  children,
+  className,
+  columns,
+  horizontal_position,
+  vertical_position,
+}: GridWrapperProps) {
+  const isCentered =
+    horizontal_position === "center" && vertical_position === "center";
+
+  return (
+    <div
+      className={cn(
+        isCentered && "place-items-stretch",
+        gridVariants({ columns, horizontal_position, vertical_position }),
+        className,
+      )}
+    >
+      {Children.map(children, (child, index) => (
+        <div key={index} className={cn("flex min-h-full")}>
+          {child}
+        </div>
+      ))}
+    </div>
+  );
+}
--- a/apps/web/components/icons.tsx
+++ b/apps/web/components/icons.tsx
@ -0,0 +1,118 @@
+// https://lucide.dev/icons/
+// Country icons: https://www.svgrepo.com/collection/countrys-flags/
+// LinkedIn/Facebook/Twitter: https://icons8.com/icons/
+
+import {
+  Activity,
+  ArrowRight,
+  BadgePercent,
+  BarChart,
+  Bell,
+  Building2,
+  ChevronDown,
+  ChevronsUpDown,
+  ClipboardList,
+  Copy,
+  File,
+  Gauge,
+  Globe,
+  Home,
+  LayoutTemplate,
+  Link,
+  LucideProps,
+  Menu,
+  Moon,
+  PanelLeftClose,
+  PanelLeftOpen,
+  Plus,
+  PoundSterling,
+  Settings,
+  SlidersHorizontal,
+  SunMedium,
+  User2,
+  Users,
+  Workflow,
+  X,
+} from "lucide-react";
+
+export const Icons = {
+  activity: Activity,
+  analytics: BarChart,
+  arrowRight: ArrowRight,
+  badgePercent: BadgePercent,
+  building: Building2,
+  chevronDown: ChevronDown,
+  chevronUpDown: ChevronsUpDown,
+  collaboration: Users,
+  copy: Copy,
+  file: File,
+  globe: Globe,
+  home: Home,
+  link: Link,
+  menu: Menu,
+  menuClose: X,
+  moon: Moon,
+  notification: Bell,
+  panelLeftClose: PanelLeftClose,
+  panelLeftOpen: PanelLeftOpen,
+  performance: Gauge,
+  plus: Plus,
+  poundSterling: PoundSterling,
+  rules: ClipboardList,
+  settings: Settings,
+  slider: SlidersHorizontal,
+  sun: SunMedium,
+  template: LayoutTemplate,
+  user2: User2,
+  workflow: Workflow,
+  github: (props: LucideProps) => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 98 96" {...props}>
+      <path d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" />
+    </svg>
+  ),
+  linkedin: (props: LucideProps) => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" {...props}>
+      <path d="M41,4H9C6.24,4,4,6.24,4,9v32c0,2.76,2.24,5,5,5h32c2.76,0,5-2.24,5-5V9C46,6.24,43.76,4,41,4z M17,20v19h-6V20H17z M11,14.47c0-1.4,1.2-2.47,3-2.47s2.93,1.07,3,2.47c0,1.4-1.12,2.53-3,2.53C12.2,17,11,15.87,11,14.47z M39,39h-6c0,0,0-9.26,0-10 c0-2-1-4-3.5-4.04h-0.08C27,24.96,26,27.02,26,29c0,0.91,0,10,0,10h-6V20h6v2.56c0,0,1.93-2.56,5.81-2.56 c3.97,0,7.19,2.73,7.19,8.26V39z" />
+    </svg>
+  ),
+  doubleChevron: (props: LucideProps) => (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      {...props}
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      className="text-foreground lucide lucide-chevrons-up-down"
+    >
+      <path d="m7 15 5 5 5-5" />
+      <path d="m7 9 5-5 5 5" />
+    </svg>
+  ),
+  logo: (props: LucideProps) => (
+    <svg
+      id="Layer_1"
+      data-name="Layer 1"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 100 100"
+      {...props}
+    >
+      <defs>
+        <style>
+          {`.cls-1{fill:hsl(var(--foreground));}.cls-2{fill:none}.cls-3{stroke:hsl(var(--background));}.cls-4{stroke-width:8px;}.cls-5{stroke-linecap:round;}.cls-6{stroke-linejoin:round;}`}
+        </style>
+      </defs>
+      <circle className="cls-1" cx="50" cy="50" r="49.9" />
+      <path
+        className="cls-2 cls-3 cls-4 cls-5 cls-6"
+        d="M61.77,69.61,81.38,50,61.77,30.39"
+      />
+      <path
+        className="cls-2 cls-3 cls-4 cls-5 cls-6"
+        d="M38.23,69.61,18.62,50,38.23,30.39"
+      />
+    </svg>
+  ),
+};
--- a/apps/web/components/layouts/dashboard/DashboardLayout.module.css
+++ b/apps/web/components/layouts/dashboard/DashboardLayout.module.css
@ -0,0 +1,42 @@
+.dashboardWrapper {
+  grid-template-columns: min-content auto;
+  grid-template-areas: "sidebar main";
+  --header-height: 5rem;
+  --footer-height: 2rem;
+  --small-spacing: 1rem; /* tw class: gap-4, m-4 etc. */
+  --large-spacing: 2rem; /* tw class: gap-8, m-8 etc. */
+  --header-size: calc(var(--header-height) + var(--small-spacing));
+  --footer-size: calc(var(--footer-height) + var(--small-spacing));
+}
+
+.dashboardSidebar {
+  grid-area: sidebar;
+}
+
+.dashboardMain {
+  @apply gap-[var(--large-spacing)];
+  grid-area: main;
+  grid-template-rows: var(--header-height) calc(
+      100vh - (var(--header-height) + var(--footer-height))
+    );
+  grid-template-areas: "header" "content";
+}
+
+.dashboardHeader {
+  grid-area: header;
+}
+
+.dashboardContent {
+  grid-area: content;
+}
+
+.dashboardContentWrapper {
+  @apply gap-[var(--small-spacing)];
+  min-height: calc(
+    100vh -
+      (
+        var(--header-size) + var(--footer-size) + var(--small-spacing) +
+          var(--small-spacing)
+      )
+  );
+}
--- a/apps/web/components/layouts/dashboard/DashboardLayout.tsx
+++ b/apps/web/components/layouts/dashboard/DashboardLayout.tsx
@ -0,0 +1,35 @@
+import styles from "./DashboardLayout.module.css";
+import { Footer, Header, Sidebar } from "./layout-components";
+
+type DashboardLayoutProps = {
+  children: React.ReactNode;
+};
+
+export default function DashboardLayout({ children }: DashboardLayoutProps) {
+  return (
+    <div
+      className={`grid h-screen text-muted-foreground ${styles.dashboardWrapper}`}
+    >
+      <div className={`hidden h-screen sm:block ${styles.dashboardSidebar}`}>
+        <Sidebar />
+      </div>
+      <div className={`grid overflow-auto ${styles.dashboardMain}`}>
+        <div
+          className={`fixed w-screen z-50 top-0 flex h-20 items-center border-b border-border bg-background/30 px-8 backdrop-blur ${styles.dashboardHeader}`}
+        >
+          <Header />
+        </div>
+        <div className={styles.dashboardContent}>
+          <div
+            className={`flex flex-col px-8 ${styles.dashboardContentWrapper}`}
+          >
+            {children}
+          </div>
+          <div className="px-8">
+            <Footer />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/apps/web/components/layouts/dashboard/index.ts
+++ b/apps/web/components/layouts/dashboard/index.ts
@ -0,0 +1 @@
+export { default as DashboardLayout } from "../dashboard/DashboardLayout";
--- a/apps/web/components/layouts/dashboard/layout-components/Footer/Footer.module.css
+++ b/apps/web/components/layouts/dashboard/layout-components/Footer/Footer.module.css
@ -0,0 +1,4 @@
+/* Vars here are coming from /DashboardLayout.module.css */
+.dashboardFooter {
+  @apply mt-[var(--small-spacing)] min-h-[var(--footer-height)];
+}
--- a/apps/web/components/layouts/dashboard/layout-components/Footer/Footer.tsx
+++ b/apps/web/components/layouts/dashboard/layout-components/Footer/Footer.tsx
@ -0,0 +1,17 @@
+import styles from "./Footer.module.css";
+
+const Footer = () => {
+  return (
+    <footer className={`w-full text-sm ${styles.dashboardFooter}`}>
+      <div>
+        <div className="flex flex-col gap-4 justify-end">
+          <div className="text-xs text-muted-foreground">
+            Copyright© Next-Fast-Turbo. All rights reserved.
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;
--- a/apps/web/components/layouts/dashboard/layout-components/Footer/index.ts
+++ b/apps/web/components/layouts/dashboard/layout-components/Footer/index.ts
@ -0,0 +1 @@
+export { default } from "./Footer";
--- a/apps/web/components/layouts/dashboard/layout-components/Header/Header.tsx
+++ b/apps/web/components/layouts/dashboard/layout-components/Header/Header.tsx
@ -0,0 +1,33 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import { navConfig } from "@/lib/config";
+import { ModeToggle } from "@/components/theme/mode-toggle";
+import { SidebarMobile } from "../../layout-components";
+
+const Header = () => {
+  const pathName = usePathname();
+  const pageTitle = navConfig.navLinks.find((elem) => {
+    if (elem.href === pathName) {
+      return elem.pageTitle;
+    }
+  });
+
+  return (
+    <div className="flex h-full w-full flex-row items-center justify-between text-foreground">
+      <div className="block w-full font-medium sm:block">
+        {pageTitle?.pageTitle}
+      </div>
+      <div className="flex h-full w-full items-center justify-end gap-4">
+        <div className="block sm:hidden">
+          <SidebarMobile />
+        </div>
+        <div className="hidden sm:block">
+          <ModeToggle />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Header;
--- a/apps/web/components/layouts/dashboard/layout-components/Header/index.ts
+++ b/apps/web/components/layouts/dashboard/layout-components/Header/index.ts
@ -0,0 +1 @@
+export { default } from "./Header";
--- a/apps/web/components/layouts/dashboard/layout-components/Sidebar/NavLink.tsx
+++ b/apps/web/components/layouts/dashboard/layout-components/Sidebar/NavLink.tsx
@ -0,0 +1,82 @@
+"use client";
+
+import Link from "next/link";
+import { AnimatePresence, motion } from "framer-motion";
+
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+
+export default function LinkComponent(...props: any) {
+  const activeLink = props[0].activeLink;
+  const collapsed = props[0].collapsed;
+  const animationDuration = props[0].animationDuration;
+
+  return (
+    <Link href={props[0].href}>
+      {collapsed ? (
+        <TooltipProvider delayDuration={150}>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div
+                className={`flex flex-row gap-6 rounded-md py-3 font-normal ${
+                  collapsed ? "justify-center" : "items-center"
+                } ${activeLink ? "bg-border text-foreground" : ""}`}
+              >
+                <div className={collapsed ? "p-0" : "pl-4"}>
+                  {props[0].icon}
+                </div>
+                <AnimatePresence>
+                  <motion.div
+                    layout
+                    animate={{
+                      x: collapsed ? -20 : 0,
+                      y: collapsed ? 0 : 0,
+                      opacity: collapsed ? 0 : 1,
+                      width: collapsed ? 0 : "auto",
+                      display: collapsed ? "none" : "block",
+                    }}
+                    transition={{ duration: animationDuration }}
+                    className="text-sm"
+                  >
+                    {props[0].label}
+                  </motion.div>
+                </AnimatePresence>
+              </div>
+            </TooltipTrigger>
+            <TooltipContent side="right">
+              <p>{props[0].label}</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      ) : (
+        <div
+          className={`flex flex-row gap-6 rounded-md py-3 font-normal ${
+            collapsed ? "justify-center" : "items-center"
+          } ${activeLink ? "bg-border text-foreground" : ""}`}
+        >
+          <div className={collapsed ? "p-0" : "pl-4"}>{props[0].icon}</div>
+          <AnimatePresence>
+            <motion.div
+              layout
+              animate={{
+                x: collapsed ? -20 : 0,
+                y: collapsed ? 0 : 0,
+                opacity: collapsed ? 0 : 1,
+                width: collapsed ? 0 : "auto",
+                display: collapsed ? "none" : "block",
+              }}
+              transition={{ duration: animationDuration }}
+              className="text-sm"
+            >
+              {props[0].label}
+            </motion.div>
+          </AnimatePresence>
+        </div>
+      )}
+    </Link>
+  );
+}
--- a/apps/web/components/layouts/dashboard/layout-components/Sidebar/NavLinks.tsx
+++ b/apps/web/components/layouts/dashboard/layout-components/Sidebar/NavLinks.tsx
@ -0,0 +1,67 @@
+import { FC } from "react";
+import { usePathname } from "next/navigation";
+import LinkComponent from "./NavLink";
+import { navConfig } from "@/lib/config/";
+
+type NavLinksProps = {
+  collapsed: boolean;
+  animationDuration: number;
+};
+
+const NavLinks: FC<NavLinksProps> = ({ collapsed, animationDuration }) => {
+  const pathName = usePathname();
+
+  return (
+    <div className="flex h-full flex-col justify-between">
+      <div id="topNavLinks">
+        {navConfig.navLinks.map((link, index) => {
+          if (link.navLocation === "top") {
+            const activeLink = pathName === link.href;
+
+            return (
+              <div
+                key={index}
+                className="px-5 text-muted-foreground transition-all duration-300 hover:text-foreground"
+              >
+                <LinkComponent
+                  activeLink={activeLink}
+                  href={link.href}
+                  label={link.label}
+                  icon={link.icon}
+                  animationDuration={animationDuration}
+                  collapsed={collapsed}
+                />
+              </div>
+            );
+          }
+        })}
+      </div>
+
+      <div id="btmNavLinks">
+        {navConfig.navLinks.map((link, index) => {
+          if (link.navLocation === "bottom") {
+            const activeLink = pathName === link.href;
+
+            return (
+              <div
+                key={index}
+                className="px-5 text-muted-foreground transition-all duration-300 hover:text-foreground"
+              >
+                <LinkComponent
+                  activeLink={activeLink}
+                  href={link.href}
+                  label={link.label}
+                  icon={link.icon}
+                  animationDuration={animationDuration}
+                  collapsed={collapsed}
+                />
+              </div>
+            );
+          }
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default NavLinks;
--- a/apps/web/components/layouts/dashboard/layout-components/Sidebar/Sidebar.tsx
+++ b/apps/web/components/layouts/dashboard/layout-components/Sidebar/Sidebar.tsx
@ -0,0 +1,84 @@
+"use client";
+import { useEffect } from "react";
+import { useState } from "react";
+import Link from "next/link";
+import { Icons } from "@/components/icons";
+import { motion } from "framer-motion";
+import NavLinks from "./NavLinks";
+
+const Sidebar = () => {
+  const [collapsed, setCollapsed] = useState(false);
+  const animationDuration = 0.4;
+  const sideBarWidth = "250px";
+
+  // Load collapsed state from localStorage on component mount
+  useEffect(() => {
+    const collapsedState = localStorage.getItem("sidebarCollapsed");
+    if (collapsedState !== null) {
+      setCollapsed(collapsedState === "true" ? true : false);
+    }
+  }, []);
+
+  const handleClose = () => {
+    localStorage.setItem("sidebarCollapsed", (!collapsed).toString());
+    setCollapsed(!collapsed);
+  };
+
+  return (
+    <motion.div
+      layout
+      initial={{ width: collapsed ? "88px" : sideBarWidth }}
+      animate={{
+        minWidth: collapsed ? "88px" : sideBarWidth,
+        width: collapsed ? "88px" : sideBarWidth,
+      }}
+      transition={{ duration: animationDuration }}
+      id="sidebar"
+      className={`flex h-full flex-col justify-between gap-8 border-r border-border`}
+    >
+      <div
+        className={`flex h-20 items-center justify-between border-b border-border ${
+          collapsed ? "px-8" : "px-4"
+        } `}
+      >
+        <Link href="/">
+          <motion.div
+            layout
+            animate={{
+              x: collapsed ? -100 : 0,
+              y: collapsed ? 0 : 0,
+              opacity: collapsed ? 0 : 1,
+              width: collapsed ? 0 : "auto",
+              display: collapsed ? "none" : "block",
+            }}
+            transition={{ duration: animationDuration }}
+          >
+            <div className="flex flex-row items-center gap-1 font-semibold text-sm text-foreground">
+              <span>
+                <Icons.logo className="h-5" />
+              </span>
+              Next-Fast-Turbo
+            </div>
+          </motion.div>
+        </Link>
+
+        {collapsed ? (
+          <Icons.panelLeftOpen
+            className="h-6 w-6 cursor-pointer text-muted-foreground transition-all hover:text-foreground hover:duration-300"
+            onClick={handleClose}
+          />
+        ) : (
+          <Icons.panelLeftClose
+            className="h-6 w-6 cursor-pointer text-muted-foreground transition-all hover:text-foreground hover:duration-300"
+            onClick={handleClose}
+          />
+        )}
+      </div>
+      <div className="flex-1 border-border pb-8">
+        <NavLinks collapsed={collapsed} animationDuration={animationDuration} />
+      </div>
+    </motion.div>
+  );
+};
+
+export default Sidebar;
--- a/apps/web/components/layouts/dashboard/layout-components/Sidebar/SidebarMobile.tsx
+++ b/apps/web/components/layouts/dashboard/layout-components/Sidebar/SidebarMobile.tsx
@ -0,0 +1,58 @@
+"use client";
+import { useRef } from "react";
+import { useState } from "react";
+import { Squash as Hamburger } from "hamburger-react";
+import { useClickAway } from "react-use";
+import { navConfig } from "@/lib/config/";
+
+import { AnimatePresence, motion } from "framer-motion";
+import Link from "next/link";
+import { Separator } from "@/components/ui/separator";
+
+const SidebarMobile = () => {
+  const [isOpen, setOpen] = useState(false);
+  const ref = useRef(null);
+
+  useClickAway(ref, () => setOpen(false));
+
+  return (
+    <div ref={ref}>
+      <Hamburger toggled={isOpen} size={20} toggle={setOpen} />
+      <AnimatePresence>
+        {isOpen && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.2 }}
+            className="fixed left-0 w-[85%] py-12 h-screen px-8 bg-background"
+          >
+            <ul className="grid min-h-72 content-evenly">
+              {navConfig.navLinks.map((link, index) => {
+                return (
+                  <motion.li
+                    initial={{ scale: 0, opacity: 0 }}
+                    animate={{ scale: 1, opacity: 1 }}
+                    transition={{
+                      type: "spring",
+                      stiffness: 260,
+                      damping: 20,
+                      delay: 0.1 + index / 10,
+                    }}
+                    key={link.pageTitle}
+                    className="w-full"
+                  >
+                    <Link href={link.href}>{link.pageTitle}</Link>
+                    <Separator className="my-2" />
+                  </motion.li>
+                );
+              })}
+            </ul>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+};
+
+export default SidebarMobile;
--- a/apps/web/components/layouts/dashboard/layout-components/Sidebar/index.ts
+++ b/apps/web/components/layouts/dashboard/layout-components/Sidebar/index.ts
@ -0,0 +1,2 @@
+export { default as Sidebar } from "./Sidebar";
+export { default as SidebarMobile } from "./SidebarMobile";
--- a/apps/web/components/layouts/dashboard/layout-components/index.ts
+++ b/apps/web/components/layouts/dashboard/layout-components/index.ts
@ -0,0 +1,4 @@
+export { Sidebar } from "./Sidebar";
+export { SidebarMobile } from "./Sidebar";
+export { default as Header } from "./Header";
+export { default as Footer } from "./Footer";
--- a/apps/web/components/search-users.tsx
+++ b/apps/web/components/search-users.tsx
@ -0,0 +1,209 @@
+"use client";
+import * as React from "react";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { Button } from "@/components/ui/button";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Skeleton } from "./ui/skeleton";
+import { Input } from "@/components/ui/input";
+import { UsersService, UserSearchResults } from "@/lib/api/client";
+
+const searchOnFields = ["id", "email", "forename", "surname"];
+
+const FormSchema = z.object({
+  keyword: z.string().optional(),
+  searchOn: z.enum(["id", "email", "forename", "surname"]).optional(),
+  searchResults: z
+    .string()
+    .min(1, {
+      message: "Must return at least 1 result",
+    })
+    .optional(),
+});
+
+export default function SearchUsers() {
+  const [searchResults, setSearchResults] = React.useState<UserSearchResults>({
+    results: [],
+  });
+  const [error, setError] = React.useState(null);
+  const [loading, setLoading] = React.useState(false);
+
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: {
+      keyword: ".com",
+      searchOn: "email",
+      searchResults: "10",
+    },
+  });
+
+  const onSubmit = async (data: z.infer<typeof FormSchema>) => {
+    console.log(data);
+    try {
+      setLoading(true); // set loading state
+      setError(null); // clear error state if it exists
+      const maxResults = data.searchResults ? parseInt(data.searchResults) : 10;
+      const response = await UsersService.usersSearchUsers({
+        keyword: data.keyword,
+        searchOn: data.searchOn,
+        maxResults: maxResults,
+      });
+      setLoading(false);
+      console.log(response);
+      setSearchResults(response);
+      setError(null);
+    } catch (error) {
+      console.log("Error received", error);
+      setLoading(false);
+      setSearchResults({ results: [] });
+      setError(error);
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Form {...form}>
+        <Card>
+          <form onSubmit={form.handleSubmit(onSubmit)}>
+            <CardHeader>
+              <CardTitle>FastAPI data</CardTitle>
+              <CardDescription>
+                Data coming from FastAPI backend
+              </CardDescription>
+            </CardHeader>
+
+            <CardContent>
+              <div className="flex flex-col md:flex-row gap-8 w-full">
+                <FormField
+                  control={form.control}
+                  name="keyword"
+                  render={({ field }) => (
+                    <FormItem className="w-full md:w-1/3">
+                      <FormLabel>Keyword</FormLabel>
+                      <FormControl>
+                        <Input
+                          className="text-foreground bg-none w-full"
+                          placeholder="shadcn"
+                          {...field}
+                        />
+                      </FormControl>
+                      <FormDescription>The keyword to search.</FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="searchResults"
+                  render={({ field }) => (
+                    <FormItem className="w-full md:w-1/3">
+                      <FormLabel>Max results</FormLabel>
+                      <FormControl>
+                        <Input
+                          className="text-foreground bg-none w-full"
+                          min={1}
+                          type="number"
+                          {...field}
+                        />
+                      </FormControl>
+                      <FormDescription>
+                        Set maximum number of results to return.
+                      </FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="searchOn"
+                  render={({ field }) => (
+                    <FormItem className="w-full md:w-1/3">
+                      <FormLabel>Search field</FormLabel>
+                      <FormControl>
+                        <RadioGroup
+                          defaultValue="email"
+                          onValueChange={field.onChange}
+                          className="grid grid-cols-2 gap-x-8 w-full text-foreground"
+                        >
+                          {searchOnFields.map((item) => (
+                            <FormItem
+                              key={item}
+                              className="flex space-x-1 space-y-0 "
+                            >
+                              <FormControl>
+                                <RadioGroupItem value={item} />
+                              </FormControl>
+                              <FormLabel className="font-normal">
+                                {item.charAt(0).toUpperCase() + item.slice(1)}
+                              </FormLabel>
+                            </FormItem>
+                          ))}
+                        </RadioGroup>
+                      </FormControl>
+                      <FormDescription>The field to search on.</FormDescription>
+                    </FormItem>
+                  )}
+                />
+              </div>
+            </CardContent>
+            <CardFooter>
+              <div className="flex flex-row gap-4 w-full my-4">
+                <Button className="min-w-24" type="submit">
+                  Submit
+                </Button>
+                <Button
+                  className="min-w-24"
+                  type="button"
+                  variant="secondary"
+                  onClick={() => {
+                    form.reset();
+                    setError(null); // clear error state
+                  }}
+                >
+                  Reset form
+                </Button>
+              </div>
+            </CardFooter>
+          </form>
+        </Card>
+      </Form>
+
+      {loading ? (
+        <Skeleton className="bg-foreground/10 text-foreground p-5 rounded-lg" />
+      ) : null}
+
+      {searchResults.results.length >= 1 ? (
+        // Render the results if searchResults is set
+        <div className="bg-foreground/10 text-foreground p-5 rounded-lg max-h-80 overflow-y-auto">
+          {/* Replace this with your code to render the results */}
+          <pre>{JSON.stringify(searchResults, null, 2)}</pre>
+        </div>
+      ) : null}
+
+      {/* This can be handled better to understand what type of error is occurring rather than just a blanket handler */}
+      {error ? (
+        <div>
+          Couldn't find any results that match your criteria. Please try again.
+        </div>
+      ) : null}
+    </div>
+  );
+}
--- a/apps/web/components/tailwind-indicator.tsx
+++ b/apps/web/components/tailwind-indicator.tsx
@ -0,0 +1,18 @@
+// https://github.com/shadcn-ui/taxonomy/blob/main/components/tailwind-indicator.tsx#L1
+
+export function TailwindIndicator() {
+  if (process.env.NODE_ENV === "production") return null;
+
+  return (
+    <div className="fixed bottom-5 left-5 z-50 flex h-6 w-6 items-center justify-center rounded-full bg-red-800 p-4 font-mono text-sm font-semibold border border-white text-white">
+      <div className="block sm:hidden">xs</div>
+      <div className="hidden sm:block md:hidden lg:hidden xl:hidden 2xl:hidden">
+        sm
+      </div>
+      <div className="hidden md:block lg:hidden xl:hidden 2xl:hidden">md</div>
+      <div className="hidden lg:block xl:hidden 2xl:hidden">lg</div>
+      <div className="hidden xl:block 2xl:hidden">xl</div>
+      <div className="hidden 2xl:block">2xl</div>
+    </div>
+  );
+}
--- a/apps/web/components/theme/mode-toggle.tsx
+++ b/apps/web/components/theme/mode-toggle.tsx
@ -0,0 +1,25 @@
+"use client";
+
+import * as React from "react";
+import { MoonIcon, SunIcon } from "@radix-ui/react-icons";
+import { useTheme } from "next-themes";
+
+import { Button } from "@/components/ui/button";
+
+export function ModeToggle() {
+  const { setTheme, resolvedTheme } = useTheme();
+
+  const handleSubmit = () => {
+    setTheme(resolvedTheme === "dark" ? "light" : "dark");
+  };
+
+  return (
+    <>
+      <Button onClick={handleSubmit} variant="outline" size="icon">
+        <SunIcon className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+        <MoonIcon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+        <span className="sr-only">Toggle theme</span>
+      </Button>
+    </>
+  );
+}
--- a/apps/web/components/theme/theme-provider.tsx
+++ b/apps/web/components/theme/theme-provider.tsx
@ -0,0 +1,9 @@
+"use client";
+
+import * as React from "react";
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import { type ThemeProviderProps } from "next-themes/dist/types";
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}
--- a/apps/web/components/theme/theme.css
+++ b/apps/web/components/theme/theme.css
@ -0,0 +1,48 @@
+@tailwind base;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 224 71.4% 4.1%;
+    --card: 0 0% 100%;
+    --card-foreground: 224 71.4% 4.1%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 224 71.4% 4.1%;
+    --primary: 262.1 83.3% 57.8%;
+    --primary-foreground: 210 20% 98%;
+    --secondary: 220 14.3% 95.9%;
+    --secondary-foreground: 220.9 39.3% 11%;
+    --muted: 220 14.3% 95.9%;
+    --muted-foreground: 220 8.9% 46.1%;
+    --accent: 220 14.3% 95.9%;
+    --accent-foreground: 220.9 39.3% 11%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 20% 98%;
+    --border: 220 13% 91%;
+    --input: 220 13% 91%;
+    --ring: 262.1 83.3% 57.8%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 224 71.4% 4.1%;
+    --foreground: 210 20% 98%;
+    --card: 224 71.4% 4.1%;
+    --card-foreground: 210 20% 98%;
+    --popover: 224 71.4% 4.1%;
+    --popover-foreground: 210 20% 98%;
+    --primary: 263.4 70% 50.4%;
+    --primary-foreground: 210 20% 98%;
+    --secondary: 215 27.9% 16.9%;
+    --secondary-foreground: 210 20% 98%;
+    --muted: 215 27.9% 16.9%;
+    --muted-foreground: 217.9 10.6% 64.9%;
+    --accent: 215 27.9% 16.9%;
+    --accent-foreground: 210 20% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 20% 98%;
+    --border: 215 27.9% 16.9%;
+    --input: 215 27.9% 16.9%;
+    --ring: 263.4 70% 50.4%;
+  }
+}
--- a/apps/web/components/typography.tsx
+++ b/apps/web/components/typography.tsx
@ -0,0 +1,82 @@
+// WIP component. Will flesh out more as we develop
+
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import { cva, type VariantProps } from "class-variance-authority";
+
+const typographyVariants = cva("m-0 self-center p-0", {
+  variants: {
+    variant: {
+      h1: "scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl",
+      h2: "scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0",
+      h3: "scroll-m-20 text-2xl font-semibold tracking-tight",
+      h4: "scroll-m-20 text-xl font-semibold tracking-tight",
+      p: "leading-7 [&:not(:first-child)]:mt-6",
+      code: "relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold",
+      lead: "text-xl text-muted-foreground",
+    },
+    size: {
+      default: "text-lg",
+      sm: "text-sm",
+      lg: "text-xl",
+    },
+    colour: {
+      default: "text-foreground",
+      muted: "text-muted-foreground",
+      accent: "text-accent",
+      inverted: "text-background",
+    },
+  },
+  defaultVariants: {
+    variant: "p",
+    size: "default",
+    colour: "default",
+  },
+});
+
+export interface TypographyProps
+  extends React.HTMLAttributes<HTMLHeadingElement>,
+    VariantProps<typeof typographyVariants> {
+  children: React.ReactNode;
+}
+
+const Typography = ({
+  variant,
+  size,
+  colour,
+  className,
+  children,
+}: TypographyProps) => {
+  let HeadingComponent: React.ElementType = "div";
+
+  switch (variant) {
+    case "h1":
+      HeadingComponent = "h1";
+      break;
+    case "h2":
+      HeadingComponent = "h2";
+      break;
+    case "h3":
+      HeadingComponent = "h3";
+      break;
+    case "h4":
+      HeadingComponent = "h4";
+      break;
+    case "p":
+      HeadingComponent = "p";
+      break;
+    case "code":
+      HeadingComponent = "code";
+      break;
+  }
+
+  return (
+    <HeadingComponent
+      className={cn(typographyVariants({ variant, size, className, colour }))}
+    >
+      {children}
+    </HeadingComponent>
+  );
+};
+
+export { Typography, typographyVariants as buttonVariants };
--- a/apps/web/components/ui/button.tsx
+++ b/apps/web/components/ui/button.tsx
@ -0,0 +1,56 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };
--- a/apps/web/components/ui/card.tsx
+++ b/apps/web/components/ui/card.tsx
@ -0,0 +1,86 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className,
+    )}
+    {...props}
+  />
+));
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+));
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className,
+    )}
+    {...props}
+  />
+));
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+));
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+));
+CardFooter.displayName = "CardFooter";
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+};
--- a/apps/web/components/ui/dropdown-menu.tsx
+++ b/apps/web/components/ui/dropdown-menu.tsx
@ -0,0 +1,200 @@
+"use client";
+
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+));
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName;
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className,
+    )}
+    {...props}
+  />
+));
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName;
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className,
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  />
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className,
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+));
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName;
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  />
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  );
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+};
--- a/apps/web/components/ui/form.tsx
+++ b/apps/web/components/ui/form.tsx
@ -0,0 +1,177 @@
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { Slot } from "@radix-ui/react-slot";
+import {
+  Controller,
+  ControllerProps,
+  FieldPath,
+  FieldValues,
+  FormProvider,
+  useFormContext,
+} from "react-hook-form";
+
+import { cn } from "@/lib/utils";
+import { Label } from "@/components/ui/label";
+
+const Form = FormProvider;
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName;
+};
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue,
+);
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  );
+};
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState, formState } = useFormContext();
+
+  const fieldState = getFieldState(fieldContext.name, formState);
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>");
+  }
+
+  const { id } = itemContext;
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  };
+};
+
+type FormItemContextValue = {
+  id: string;
+};
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue,
+);
+
+const FormItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const id = React.useId();
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div ref={ref} className={cn("space-y-2", className)} {...props} />
+    </FormItemContext.Provider>
+  );
+});
+FormItem.displayName = "FormItem";
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField();
+
+  return (
+    <Label
+      ref={ref}
+      className={cn(error && "text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  );
+});
+FormLabel.displayName = "FormLabel";
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } =
+    useFormField();
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  );
+});
+FormControl.displayName = "FormControl";
+
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField();
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  );
+});
+FormDescription.displayName = "FormDescription";
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message) : children;
+
+  if (!body) {
+    return null;
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn("text-sm font-medium text-destructive", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  );
+});
+FormMessage.displayName = "FormMessage";
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+};
--- a/apps/web/components/ui/input.tsx
+++ b/apps/web/components/ui/input.tsx
@ -0,0 +1,25 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Input.displayName = "Input";
+
+export { Input };
--- a/apps/web/components/ui/label.tsx
+++ b/apps/web/components/ui/label.tsx
@ -0,0 +1,26 @@
+"use client";
+
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+);
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };
--- a/apps/web/components/ui/radio-group.tsx
+++ b/apps/web/components/ui/radio-group.tsx
@ -0,0 +1,44 @@
+"use client";
+
+import * as React from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { Circle } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Root
+      className={cn("grid gap-2", className)}
+      {...props}
+      ref={ref}
+    />
+  );
+});
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <Circle className="h-2.5 w-2.5 fill-current text-current" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  );
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+
+export { RadioGroup, RadioGroupItem };
--- a/apps/web/components/ui/separator.tsx
+++ b/apps/web/components/ui/separator.tsx
@ -0,0 +1,31 @@
+"use client";
+
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+
+import { cn } from "@/lib/utils";
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref,
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };
--- a/apps/web/components/ui/skeleton.tsx
+++ b/apps/web/components/ui/skeleton.tsx
@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils";
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  );
+}
+
+export { Skeleton };
--- a/apps/web/components/ui/tooltip.tsx
+++ b/apps/web/components/ui/tooltip.tsx
@ -0,0 +1,30 @@
+"use client";
+
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+
+import { cn } from "@/lib/utils";
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className,
+    )}
+    {...props}
+  />
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
				`@ -0,0 +1 @@`
				`export { default as DashboardLayout } from "../dashboard/DashboardLayout";`