init frontend

2026-04-28 11:49:39 -05:00 · 2023-07-20 14:36:01 -07:00
parent 09defb60a5
commit eef1c3f41d
45 changed files with 6744 additions and 0 deletions
--- a/frontend/.dockerignore
+++ b/frontend/.dockerignore
@@ -0,0 +1,2 @@
+node_modules
+dist
--- a/frontend/.eslintrc.cjs
+++ b/frontend/.eslintrc.cjs
@@ -0,0 +1,14 @@
+module.exports = {
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': 'warn',
+  },
+}
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/frontend/Dockerfile
+++ b/frontend/Dockerfile
@@ -0,0 +1,6 @@
+FROM node:alpine
+
+COPY . .
+RUN yarn && yarn build
+
+CMD yarn preview --host
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Monitor</title>
+  </head>
+  <body class="min-h-screen bg-background font-sans antialiased">
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -0,0 +1,58 @@
+{
+  "name": "@monitor/frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@monitor/client": "link:../client/ts",
+    "@radix-ui/react-dialog": "^1.0.4",
+    "@radix-ui/react-dropdown-menu": "^2.0.5",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-popover": "^1.0.6",
+    "@radix-ui/react-select": "^1.2.2",
+    "@radix-ui/react-slot": "^1.0.1",
+    "@radix-ui/react-switch": "^1.0.3",
+    "@radix-ui/react-tabs": "^1.0.3",
+    "@radix-ui/react-toast": "^1.1.4",
+    "@tanstack/react-query": "^4.29.7",
+    "autoprefixer": "^10.4.14",
+    "axios": "^1.4.0",
+    "class-variance-authority": "^0.6.0",
+    "clsx": "^1.2.1",
+    "cmdk": "^0.2.0",
+    "jotai": "^2.1.0",
+    "js-file-download": "^0.4.12",
+    "lightweight-charts": "^4.0.1",
+    "lucide-react": "^0.221.0",
+    "postcss": "^8.4.23",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-minimal-pie-chart": "^8.4.0",
+    "react-router-dom": "^6.11.2",
+    "reconnecting-websocket": "^4.4.0",
+    "sanitize-html": "^2.10.0",
+    "tailwind-merge": "^1.12.0",
+    "tailwindcss": "^3.3.2",
+    "tailwindcss-animate": "^1.0.5",
+    "vite-tsconfig-paths": "^4.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "@types/sanitize-html": "^2.9.0",
+    "@typescript-eslint/eslint-plugin": "^5.57.1",
+    "@typescript-eslint/parser": "^5.57.1",
+    "@vitejs/plugin-react": "^4.0.0",
+    "eslint": "^8.38.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.3.4",
+    "typescript": "^5.0.2",
+    "vite": "^4.3.2"
+  }
+}
--- a/frontend/postcss.config.js
+++ b/frontend/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
--- a/frontend/public/vite.svg
+++ b/frontend/public/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/frontend/src/components/header/index.tsx
+++ b/frontend/src/components/header/index.tsx
@@ -0,0 +1,62 @@
+import { ThemeToggle } from "@components/util";
+
+import { Button } from "@ui/button";
+import { ChevronRight, Circle, LogOut } from "lucide-react";
+import { Link, useLocation } from "react-router-dom";
+
+import { useUser } from "@hooks";
+
+export const Paths = () => {
+  const location = useLocation();
+  const path = location.pathname.split("/")[1];
+
+  return (
+    <div className="hidden md:flex items-center gap-2">
+      {path && (
+        <>
+          <ChevronRight className="w-4 h-4" />
+          <Link to={`/${path}`}>
+            <div
+              className="capitalize"
+              onClick={() => (location.pathname = path)}
+            >
+              {path}
+            </div>
+          </Link>
+        </>
+      )}
+    </div>
+  );
+};
+
+export const Header = () => {
+  const user = useUser().data;
+
+  return (
+    <header className="sticky top-0 z-40 w-full border-b bg-background">
+      <div className="container flex h-16 items-center space-x-4 justify-between sm:space-x-0">
+        <div className="flex gap-4">
+          <Link to="/">
+            <div className="flex gap-8 font-bold text-xl cursor-pointer">
+              Monitor
+            </div>
+          </Link>
+          <Paths />
+        </div>
+        <div className="flex">
+          {user && (
+            <Button disabled variant="ghost">
+              <Circle className="w-4 h-4 fill-green-500 stroke-none" />
+            </Button>
+          )}
+          <ThemeToggle />
+          {user && (
+            <Button variant="ghost">
+              <LogOut className="w-4 h-4" />
+            </Button>
+          )}
+        </div>
+      </div>
+    </header>
+  );
+};
--- a/frontend/src/components/util.tsx
+++ b/frontend/src/components/util.tsx
@@ -0,0 +1,81 @@
+import { ReactNode, forwardRef, useEffect, useState } from "react";
+import { Button, ButtonProps } from "../ui/button";
+import { Moon, SunMedium } from "lucide-react";
+import { Input } from "../ui/input";
+
+export const WithLoading = ({
+  children,
+  isLoading,
+  loading,
+  isError,
+  error,
+}: {
+  children: ReactNode;
+  isLoading: boolean;
+  loading?: ReactNode;
+  isError: boolean;
+  error?: ReactNode;
+}) => {
+  if (isLoading) return <>{loading ?? "loading"}</>;
+  if (isError) return <>{error ?? null}</>;
+  return <>{children}</>;
+};
+
+export const ConfigInput = ({
+  placeholder,
+  value,
+  onChange,
+}: {
+  placeholder: string;
+  value: string | undefined;
+  onChange: (s: string) => void;
+}) => (
+  <Input
+    placeholder={placeholder}
+    className="max-w-[500px]"
+    value={value}
+    onChange={({ target }) => onChange(target.value)}
+  />
+);
+
+export const ThemeToggle = () => {
+  const [theme, set] = useState(localStorage.getItem("theme"));
+
+  useEffect(() => {
+    localStorage.setItem("theme", theme ?? "dark");
+    if (theme === "dark") document.body.classList.remove("dark");
+    else document.body.classList.add("dark");
+  }, [theme]);
+
+  return (
+    <Button
+      variant="ghost"
+      onClick={() => set(theme === "dark" ? "light" : "dark")}
+    >
+      <SunMedium className="w-4 h-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+      <Moon className="w-4 h-4 absolute rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+    </Button>
+  );
+};
+
+export const ActionButton = forwardRef<
+  HTMLButtonElement,
+  {
+    title: string;
+    icon: ReactNode;
+    intent?: ButtonProps["intent"];
+    disabled?: boolean;
+    onClick?: () => void;
+  }
+>(({ title, icon, intent, disabled, onClick }, ref) => (
+  <Button
+    variant="outline"
+    className="flex gap-4 items-center"
+    intent={intent}
+    onClick={onClick}
+    disabled={disabled}
+    ref={ref}
+  >
+    {title} {icon}
+  </Button>
+));
--- a/frontend/src/globals.css
+++ b/frontend/src/globals.css
@@ -0,0 +1,113 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 47.4% 11.2%;
+
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 47.4% 11.2%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 47.4% 11.2%;
+
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+
+    --destructive: 0 100% 50%;
+    --destructive-foreground: 210 40% 98%;
+
+    --ring: 215 20.2% 65.1%;
+
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 224 71% 4%;
+    --foreground: 213 31% 91%;
+
+    --muted: 223 47% 11%;
+    --muted-foreground: 215.4 16.3% 56.9%;
+
+    --popover: 224 71% 4%;
+    --popover-foreground: 215 20.2% 65.1%;
+
+    --card: 224 71% 4%;
+    --card-foreground: 213 31% 91%;
+
+    --border: 216 34% 17%;
+    --input: 216 34% 17%;
+
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 1.2%;
+
+    --secondary: 222.2 47.4% 11.2%;
+    --secondary-foreground: 210 40% 98%;
+
+    --accent: 216 34% 17%;
+    --accent-foreground: 210 40% 98%;
+
+    --destructive: 0 63% 31%;
+    --destructive-foreground: 210 40% 98%;
+
+    --ring: 216 34% 17%;
+
+    --radius: 0.5rem;
+  }
+}
+
+pre {
+  border-radius: var(--radius);
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+    font-feature-settings: "rlig" 1, "calt" 1;
+  }
+
+  pre {
+    @apply bg-accent/50 min-h-full text-xs p-4 whitespace-pre-wrap scroll-m-4 break-all;
+  }
+}
+
+@layer utilities {
+  .scrollbar::-webkit-scrollbar {
+    width: 20px;
+    height: 20px;
+  }
+
+  .scrollbar::-webkit-scrollbar-track {
+    border-radius: 100vh;
+    background: transparent;
+  }
+
+  .scrollbar::-webkit-scrollbar-thumb {
+    background: #e0cbcb;
+    border-radius: 100vh;
+    border: 3px solid #f6f7ed;
+  }
+
+  .scrollbar::-webkit-scrollbar-thumb:hover {
+    background: #c0a0b9;
+  }
+}
--- a/frontend/src/hooks.ts
+++ b/frontend/src/hooks.ts
@@ -0,0 +1,13 @@
+import { ReadRequest } from "@monitor/client/dist/types";
+import { client } from "./main";
+import { useQuery, useMutation } from "@tanstack/react-query";
+
+export const useRead = <T extends ReadRequest>(req: T) =>
+  useQuery([req], () => client.read(req));
+
+export const useUser = () => useRead({ type: "GetUser", params: {} });
+
+export const useLogin = () =>
+  useMutation(client.login, {
+    onSuccess: (jwt) => localStorage.setItem("monitor-auth-token", jwt ?? ""),
+  });
--- a/frontend/src/layouts/config.tsx
+++ b/frontend/src/layouts/config.tsx
@@ -0,0 +1,46 @@
+import { Button } from "@ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@ui/card";
+import { RefreshCcw, Save } from "lucide-react";
+import { ReactNode } from "react";
+
+export const Config = ({
+  children,
+  loading,
+  save,
+  reset,
+}: {
+  children: ReactNode;
+  loading: boolean;
+  save: { disabled?: boolean; onClick: () => void };
+  reset: { disabled?: boolean; onClick: () => void };
+}) => (
+  <Card>
+    <CardHeader className="flex-row justify-between">
+      <CardTitle className="text-xl"> Config </CardTitle>
+      <div className="flex gap-4">
+        <Button
+          variant="outline"
+          disabled={loading || reset.disabled}
+          intent="warning"
+          className="flex gap-2"
+          onClick={reset.onClick}
+        >
+          Reset <RefreshCcw className="h-4 w-4" />
+        </Button>
+        <Button
+          variant="outline"
+          disabled={loading || save.disabled}
+          intent="success"
+          className="flex gap-2"
+          onClick={save.onClick}
+        >
+          {loading ? "Saving..." : "Save"}
+          <Save className="h-4 w-4" />
+        </Button>
+      </div>
+    </CardHeader>
+    <CardContent className="flex flex-col gap-4 max-h-[50vh] overflow-y-auto">
+      {children}
+    </CardContent>
+  </Card>
+);
--- a/frontend/src/layouts/layout.tsx
+++ b/frontend/src/layouts/layout.tsx
@@ -0,0 +1,26 @@
+import { Header } from "@components/header";
+import { useUser } from "@hooks";
+import { Toaster } from "@ui/toast";
+import { useLocation } from "react-router-dom";
+import { Outlet, useNavigate } from "react-router-dom";
+
+export const Layout = () => {
+  const { data, isError } = useUser();
+  const navigate = useNavigate();
+  const path = useLocation().pathname;
+  // if (isError && !path.includes("login")) navigate("/login");
+
+  console.log(data);
+
+  return (
+    <>
+      <div className="relative flex min-h-screen flex-col">
+        <Header />
+        <div className="container px-2 md:px-8 grid gap-6 pb-8 pt-6 md:py-10">
+          <Outlet />
+        </div>
+      </div>
+      <Toaster />
+    </>
+  );
+};
--- a/frontend/src/layouts/resource.tsx
+++ b/frontend/src/layouts/resource.tsx
@@ -0,0 +1,44 @@
+import { Card, CardHeader, CardTitle } from "@ui/card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@ui/tabs";
+import { ReactNode } from "react";
+
+interface ResourceProps {
+  title: ReactNode;
+  info: ReactNode;
+  actions: ReactNode;
+  tabs: { title: string; component: ReactNode }[];
+}
+
+export const Resource = ({ title, info, actions, tabs }: ResourceProps) => (
+  <Tabs defaultValue={tabs[0].title}>
+    <div className="flex flex-col w-full gap-4">
+      <Card>
+        <CardHeader className="gap-4">
+          <div className="flex flex-col">
+            <div className="flex flex-col gap-2 md:flex-row md:justify-between">
+              <CardTitle className="text-3xl">{title}</CardTitle>
+              {info}
+            </div>
+          </div>
+          <div className="flex gap-4 flex-col md:flex-row md:justify-between">
+            <TabsList>
+              {tabs.map(({ title }) => (
+                <TabsTrigger key={title} value={title}>
+                  {title}
+                </TabsTrigger>
+              ))}
+            </TabsList>
+            <div className="flex gap-4 place-self-end md:place-self-auto">
+              {actions}
+            </div>
+          </div>
+        </CardHeader>
+      </Card>
+      {tabs.map((t, i) => (
+        <TabsContent key={i} value={t.title}>
+          {t.component}
+        </TabsContent>
+      ))}
+    </div>
+  </Tabs>
+);
--- a/frontend/src/layouts/resources.tsx
+++ b/frontend/src/layouts/resources.tsx
@@ -0,0 +1,24 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@ui/card";
+import { ReactNode } from "react";
+
+export const Resources = ({
+  title,
+  newButton,
+  children,
+}: {
+  title: string;
+  newButton: ReactNode;
+  children: ReactNode;
+}) => {
+  return (
+    <Card>
+      <CardHeader className="flex flex-row justify-between">
+        <CardTitle className="text-3xl">{title}</CardTitle>
+        {newButton}
+      </CardHeader>
+      <CardContent className="h-fit min-h-[50vh] max-h-[70vh] overflow-auto">
+        <div className="grid gap-4 md:grid-cols-2">{children}</div>
+      </CardContent>
+    </Card>
+  );
+};
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./globals.css";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { MonitorClient } from "@monitor/client";
+// import { monitor_client } from "@util/client.ts";
+
+export const MONITOR_BASE_URL =
+  import.meta.env.VITE_MONITOR_HOST ?? "monitor.v1.api.mogh.tech";
+
+export const UPDATE_WS_URL =
+  MONITOR_BASE_URL.replace("http", "ws") + "/ws/update";
+
+// const token =
+//   (import.meta.env.VITE_ACCESS_TOKEN as string) ||
+//   localStorage.getItem("access_token") ||
+//   null;
+
+// export const client = monitor_client(MONITOR_BASE_URL, token);
+const token = localStorage.getItem("monitor-auth-token");
+export const client = MonitorClient(MONITOR_BASE_URL, token ?? undefined);
+const queryClient = new QueryClient({
+  defaultOptions: { queries: { retry: false } },
+});
+
+// eslint-disable-next-line react-refresh/only-export-components
+const Router = React.lazy(() => import("./router"));
+
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+  <React.StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <Router />
+    </QueryClientProvider>
+  </React.StrictMode>
+);
--- a/frontend/src/pages/auth/login.tsx
+++ b/frontend/src/pages/auth/login.tsx
@@ -0,0 +1,50 @@
+import { Button } from "@ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@ui/card";
+import { Input } from "@ui/input";
+import { Label } from "@ui/label";
+import { useLogin } from "@hooks";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+export const Login = () => {
+  const { mutateAsync } = useLogin();
+  const nav = useNavigate();
+  const [creds, set] = useState({ username: "", password: "" });
+  const login = async () => !!(await mutateAsync(creds)) && nav("/");
+
+  return (
+    <Card className="w-full max-w-[500px] place-self-center">
+      <CardHeader>
+        <CardTitle>Log In</CardTitle>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-4">
+        <div>
+          <Label htmlFor="username">Username</Label>
+          <Input
+            id="username"
+            value={creds.username}
+            onChange={({ target }) =>
+              set((c) => ({ ...c, username: target.value }))
+            }
+          />
+        </div>
+        <div>
+          <Label htmlFor="password">Password</Label>
+          <Input
+            id="password"
+            type="password"
+            value={creds.password}
+            onChange={({ target }) =>
+              set((c) => ({ ...c, password: target.value }))
+            }
+          />
+        </div>
+        <div className="flex w-full justify-end">
+          <Button variant="outline" onClick={login}>
+            Login
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
--- a/frontend/src/pages/auth/signup.tsx
+++ b/frontend/src/pages/auth/signup.tsx
@@ -0,0 +1,57 @@
+import { client } from "@main";
+import { Button } from "@ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@ui/card";
+import { Input } from "@ui/input";
+import { Label } from "@ui/label";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+export const Signup = () => {
+  const nav = useNavigate();
+  const [creds, set] = useState({ username: "", password: "" });
+
+  const signup = async () => {
+    const { jwt } = await client.auth({
+      type: "CreateLocalUser",
+      params: creds,
+    });
+    localStorage.setItem("auth-token", jwt);
+    nav("/");
+  };
+
+  return (
+    <Card className="w-full max-w-[500px] place-self-center">
+      <CardHeader>
+        <CardTitle>Sign Up</CardTitle>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-4">
+        <div>
+          <Label htmlFor="username">Username</Label>
+          <Input
+            id="username"
+            value={creds.username}
+            onChange={({ target }) =>
+              set((c) => ({ ...c, username: target.value }))
+            }
+          />
+        </div>
+        <div>
+          <Label htmlFor="password">Password</Label>
+          <Input
+            id="password"
+            type="password"
+            value={creds.password}
+            onChange={({ target }) =>
+              set((c) => ({ ...c, password: target.value }))
+            }
+          />
+        </div>
+        <div className="flex w-full justify-end">
+          <Button variant="outline" onClick={signup}>
+            Sign Up
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
--- a/frontend/src/router.tsx
+++ b/frontend/src/router.tsx
@@ -0,0 +1,45 @@
+// import { Build } from "@pages/resource/build";
+// import { Server } from "@pages/resource/server";
+import { RouterProvider, createBrowserRouter } from "react-router-dom";
+// import { Deployment } from "@pages/resource/deployment";
+// import { Builds, Dashboard, Deployments, Servers } from "@pages/resources";
+import { Layout } from "@layouts/layout";
+import { Login } from "@pages/auth/login";
+import { Signup } from "@pages/auth/signup";
+
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <Layout />,
+    children: [
+      { path: "", element: <>hello</> },
+      { path: "login", element: <Login /> },
+      { path: "signup", element: <Signup /> },
+
+      // {
+      //   path: "deployments",
+      //   children: [
+      //     { path: "", element: <Deployments /> },
+      //     { path: ":deploymentId", element: <Deployment /> },
+      //   ],
+      // },
+      // {
+      //   path: "builds",
+      //   children: [
+      //     { path: "", element: <Builds /> },
+      //     { path: ":buildId", element: <Build /> },
+      //   ],
+      // },
+      // {
+      //   path: "servers",
+      //   children: [
+      //     { path: "", element: <Servers /> },
+      //     { path: ":serverId", element: <Server /> },
+      //   ],
+      // },
+    ],
+  },
+]);
+
+const Router = () => <RouterProvider router={router} />;
+export default Router;
--- a/frontend/src/types.ts
+++ b/frontend/src/types.ts
--- a/frontend/src/ui/button.tsx
+++ b/frontend/src/ui/button.tsx
@@ -0,0 +1,62 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { VariantProps, cva } from "class-variance-authority";
+
+import { cn } from "../util/helpers";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background",
+  {
+    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 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: "underline-offset-4 hover:underline text-primary",
+      },
+      size: {
+        default: "h-10 py-2 px-4",
+        sm: "h-9 px-3 rounded-md",
+        lg: "h-11 px-8 rounded-md",
+      },
+      intent: {
+        success: "border-green-200 dark:border-green-800 hover:bg-green-800/30",
+        warning:
+          "border-orange-200 dark:border-orange-800 hover:bg-orange-800/30",
+        danger: "border-red-200 dark:border-red-800 hover:bg-red-800/30",
+      },
+    },
+    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, intent, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, intent, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = "Button";
+
+// eslint-disable-next-line react-refresh/only-export-components
+export { Button, buttonVariants };
--- a/frontend/src/ui/card.tsx
+++ b/frontend/src/ui/card.tsx
@@ -0,0 +1,81 @@
+import { cn } from "../util/helpers";
+import * as React from "react";
+
+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 p-6", className)} {...props} />
+));
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      "text-lg 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/frontend/src/ui/command.tsx
+++ b/frontend/src/ui/command.tsx
@@ -0,0 +1,157 @@
+import * as React from "react";
+import { DialogProps } from "@radix-ui/react-dialog";
+import { Command as CommandPrimitive } from "cmdk";
+import { Search } from "lucide-react";
+
+import { Dialog, DialogContent } from "@ui/dialog";
+import { cn } from "@util/helpers";
+
+const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+      className
+    )}
+    {...props}
+  />
+));
+Command.displayName = CommandPrimitive.displayName;
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+interface CommandDialogProps extends DialogProps {}
+
+const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0 shadow-2xl">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        "placeholder:text-foreground-muted flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  </div>
+));
+
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn(
+      "h-[500px] max-h-[500px] overflow-y-auto overflow-x-hidden",
+      className
+    )}
+    {...props}
+  />
+));
+
+CommandList.displayName = CommandPrimitive.List.displayName;
+
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+  <CommandPrimitive.Empty
+    ref={ref}
+    className="py-6 text-center text-sm"
+    {...props}
+  />
+));
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+));
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+
+const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 h-px bg-border", className)}
+    {...props}
+  />
+));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  />
+));
+
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+
+const CommandShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  );
+};
+CommandShortcut.displayName = "CommandShortcut";
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+};
--- a/frontend/src/ui/dialog.tsx
+++ b/frontend/src/ui/dialog.tsx
@@ -0,0 +1,125 @@
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import { cn } from "@util/helpers";
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = ({
+  className,
+  children,
+  ...props
+}: DialogPrimitive.DialogPortalProps) => (
+  <DialogPrimitive.Portal className={cn(className)} {...props}>
+    <div className="fixed inset-0 z-50 flex items-start justify-center sm:items-center">
+      {children}
+    </div>
+  </DialogPrimitive.Portal>
+);
+DialogPortal.displayName = DialogPrimitive.Portal.displayName;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm transition-all duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in",
+      className
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed z-50 grid w-full gap-4 rounded-b-lg border bg-background p-6 shadow-lg animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:max-w-lg sm:rounded-lg sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+);
+DialogHeader.displayName = "DialogHeader";
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+);
+DialogFooter.displayName = "DialogFooter";
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};
--- a/frontend/src/ui/dropdown.tsx
+++ b/frontend/src/ui/dropdown.tsx
@@ -0,0 +1,199 @@
+"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 "@util/helpers";
+
+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-md animate-in data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
+      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 animate-in 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/frontend/src/ui/input.tsx
+++ b/frontend/src/ui/input.tsx
@@ -0,0 +1,26 @@
+import * as React from "react";
+
+import { cn } from "../util/helpers";
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+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-transparent 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/frontend/src/ui/label.tsx
+++ b/frontend/src/ui/label.tsx
@@ -0,0 +1,25 @@
+"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 "@util/helpers";
+
+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/frontend/src/ui/popover.tsx
+++ b/frontend/src/ui/popover.tsx
@@ -0,0 +1,28 @@
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { cn } from "@util/helpers";
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none animate-in 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}
+    />
+  </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent };
--- a/frontend/src/ui/select.tsx
+++ b/frontend/src/ui/select.tsx
@@ -0,0 +1,117 @@
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown } from "lucide-react";
+import { cn } from "@util/helpers";
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md animate-in fade-in-80",
+        position === "popper" && "translate-y-1",
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+    {...props}
+  />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none 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">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+};
--- a/frontend/src/ui/sheet.tsx
+++ b/frontend/src/ui/sheet.tsx
@@ -0,0 +1,232 @@
+"use client";
+
+import * as React from "react";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { cva, type VariantProps } from "class-variance-authority";
+import { X } from "lucide-react";
+import { cn } from "@util/helpers";
+
+const Sheet = SheetPrimitive.Root;
+
+const SheetTrigger = SheetPrimitive.Trigger;
+
+const SheetClose = SheetPrimitive.Close;
+
+const portalVariants = cva("fixed inset-0 z-50 flex", {
+  variants: {
+    position: {
+      top: "items-start",
+      bottom: "items-end",
+      left: "justify-start",
+      right: "justify-end",
+    },
+  },
+  defaultVariants: { position: "right" },
+});
+
+interface SheetPortalProps
+  extends SheetPrimitive.DialogPortalProps,
+    VariantProps<typeof portalVariants> {}
+
+const SheetPortal = ({
+  position,
+  className,
+  children,
+  ...props
+}: SheetPortalProps) => (
+  <SheetPrimitive.Portal className={cn(className)} {...props}>
+    <div className={portalVariants({ position })}>{children}</div>
+  </SheetPrimitive.Portal>
+);
+SheetPortal.displayName = SheetPrimitive.Portal.displayName;
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm transition-all duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+
+const sheetVariants = cva(
+  "fixed z-50 scale-100 gap-4 bg-background p-6 opacity-100 shadow-lg border",
+  {
+    variants: {
+      position: {
+        top: "animate-in slide-in-from-top w-full duration-300",
+        bottom: "animate-in slide-in-from-bottom w-full duration-300",
+        left: "animate-in slide-in-from-left h-full duration-300",
+        right: "animate-in slide-in-from-right h-full duration-300",
+      },
+      size: {
+        content: "",
+        default: "",
+        sm: "",
+        lg: "",
+        xl: "",
+        full: "",
+      },
+    },
+    compoundVariants: [
+      {
+        position: ["top", "bottom"],
+        size: "content",
+        class: "max-h-screen",
+      },
+      {
+        position: ["top", "bottom"],
+        size: "default",
+        class: "h-1/3",
+      },
+      {
+        position: ["top", "bottom"],
+        size: "sm",
+        class: "h-1/4",
+      },
+      {
+        position: ["top", "bottom"],
+        size: "lg",
+        class: "h-1/2",
+      },
+      {
+        position: ["top", "bottom"],
+        size: "xl",
+        class: "h-5/6",
+      },
+      {
+        position: ["top", "bottom"],
+        size: "full",
+        class: "h-screen",
+      },
+      {
+        position: ["right", "left"],
+        size: "content",
+        class: "max-w-screen",
+      },
+      {
+        position: ["right", "left"],
+        size: "default",
+        class: "w-1/3",
+      },
+      {
+        position: ["right", "left"],
+        size: "sm",
+        class: "w-1/4",
+      },
+      {
+        position: ["right", "left"],
+        size: "lg",
+        class: "w-screen lg:w-1/2",
+      },
+      {
+        position: ["right", "left"],
+        size: "xl",
+        class: "w-5/6",
+      },
+      {
+        position: ["right", "left"],
+        size: "full",
+        class: "w-screen",
+      },
+    ],
+    defaultVariants: {
+      position: "right",
+      size: "default",
+    },
+  }
+);
+
+export interface DialogContentProps
+  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {}
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  DialogContentProps
+>(({ position, size, className, children, ...props }, ref) => (
+  <SheetPortal position={position}>
+    <SheetOverlay />
+    <SheetPrimitive.Content
+      ref={ref}
+      className={cn(sheetVariants({ position, size }), className)}
+      {...props}
+    >
+      {children}
+      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </SheetPrimitive.Close>
+    </SheetPrimitive.Content>
+  </SheetPortal>
+));
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+
+const SheetHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+);
+SheetHeader.displayName = "SheetHeader";
+
+const SheetFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+);
+SheetFooter.displayName = "SheetFooter";
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold text-foreground", className)}
+    {...props}
+  />
+));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+};
--- a/frontend/src/ui/switch.tsx
+++ b/frontend/src/ui/switch.tsx
@@ -0,0 +1,26 @@
+import * as React from "react";
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+import { cn } from "@util/helpers";
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+      )}
+    />
+  </SwitchPrimitives.Root>
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+export { Switch };
--- a/frontend/src/ui/tabs.tsx
+++ b/frontend/src/ui/tabs.tsx
@@ -0,0 +1,52 @@
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { cn } from "../util/helpers";
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+      className
+    )}
+    {...props}
+  />
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    )}
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };
--- a/frontend/src/ui/textarea.tsx
+++ b/frontend/src/ui/textarea.tsx
@@ -0,0 +1,25 @@
+import * as React from "react";
+
+import { cn } from "@util/helpers";
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[80px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background 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}
+      />
+    );
+  }
+);
+Textarea.displayName = "Textarea";
+
+export { Textarea };
--- a/frontend/src/ui/toast/index.tsx
+++ b/frontend/src/ui/toast/index.tsx
@@ -0,0 +1,33 @@
+import {
+  Toast,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+} from "@ui/toast/toasts";
+import { useToast } from "@ui/toast/use-toast";
+
+export function Toaster() {
+  const { toasts } = useToast();
+
+  return (
+    <ToastProvider>
+      {toasts.map(function ({ id, title, description, action, ...props }) {
+        return (
+          <Toast key={id} {...props}>
+            <div className="grid gap-1">
+              {title && <ToastTitle>{title}</ToastTitle>}
+              {description && (
+                <ToastDescription>{description}</ToastDescription>
+              )}
+            </div>
+            {action}
+            <ToastClose />
+          </Toast>
+        );
+      })}
+      <ToastViewport />
+    </ToastProvider>
+  );
+}
--- a/frontend/src/ui/toast/toasts.tsx
+++ b/frontend/src/ui/toast/toasts.tsx
@@ -0,0 +1,133 @@
+import * as React from "react";
+import * as ToastPrimitives from "@radix-ui/react-toast";
+import { cva, type VariantProps } from "class-variance-authority";
+import { X } from "lucide-react";
+import { cn } from "@util/helpers";
+
+const ToastProvider = ToastPrimitives.Provider;
+
+const ToastViewport = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Viewport
+    ref={ref}
+    className={cn(
+      "fixed top-0 sm:right-0 z-[100] gap-2 flex max-h-screen w-full flex-col-reverse p-4 sm:flex-col md:max-w-[420px]",
+      className
+    )}
+    {...props}
+  />
+));
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
+
+const toastVariants = cva(
+  "data-[swipe=move]:transition-none group relative pointer-events-auto flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full data-[state=closed]:slide-out-to-right-full",
+  {
+    variants: {
+      variant: {
+        default: "bg-background border",
+        destructive:
+          "group destructive border-destructive bg-destructive text-destructive-foreground",
+      },
+      intent: {
+        default: "",
+        success: "border-green-200 dark:border-green-800",
+        warning: "border-orange-200 dark:border-orange-800",
+        danger: "border-red-200 dark:border-red-800",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      intent: "default",
+    },
+  }
+);
+
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
+    VariantProps<typeof toastVariants>
+>(({ className, variant, intent, ...props }, ref) => {
+  return (
+    <ToastPrimitives.Root
+      ref={ref}
+      className={cn(toastVariants({ variant, intent }), className)}
+      {...props}
+    />
+  );
+});
+Toast.displayName = ToastPrimitives.Root.displayName;
+
+const ToastAction = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Action>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Action
+    ref={ref}
+    className={cn(
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-destructive/30 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+      className
+    )}
+    {...props}
+  />
+));
+ToastAction.displayName = ToastPrimitives.Action.displayName;
+
+const ToastClose = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Close>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Close
+    ref={ref}
+    className={cn(
+      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      className
+    )}
+    toast-close=""
+    {...props}
+  >
+    <X className="h-4 w-4" />
+  </ToastPrimitives.Close>
+));
+ToastClose.displayName = ToastPrimitives.Close.displayName;
+
+const ToastTitle = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Title>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Title
+    ref={ref}
+    className={cn("text-sm font-semibold", className)}
+    {...props}
+  />
+));
+ToastTitle.displayName = ToastPrimitives.Title.displayName;
+
+const ToastDescription = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Description>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Description
+    ref={ref}
+    className={cn("text-sm opacity-90", className)}
+    {...props}
+  />
+));
+ToastDescription.displayName = ToastPrimitives.Description.displayName;
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>;
+
+export {
+  type ToastProps,
+  type ToastActionElement,
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction,
+};
--- a/frontend/src/ui/toast/use-toast.tsx
+++ b/frontend/src/ui/toast/use-toast.tsx
@@ -0,0 +1,190 @@
+// Inspired by react-hot-toast library
+import * as React from "react";
+
+import type { ToastActionElement, ToastProps } from "@ui/toast/toasts";
+
+const TOAST_LIMIT = 3;
+const TOAST_REMOVE_DELAY = 30000;
+
+type ToasterToast = ToastProps & {
+  id: string;
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  action?: ToastActionElement;
+  intent?: ToastProps["intent"];
+};
+
+const actionTypes = {
+  ADD_TOAST: "ADD_TOAST",
+  UPDATE_TOAST: "UPDATE_TOAST",
+  DISMISS_TOAST: "DISMISS_TOAST",
+  REMOVE_TOAST: "REMOVE_TOAST",
+} as const;
+
+let count = 0;
+
+function genId() {
+  count = (count + 1) % Number.MAX_VALUE;
+  return count.toString();
+}
+
+type ActionType = typeof actionTypes;
+
+type Action =
+  | {
+      type: ActionType["ADD_TOAST"];
+      toast: ToasterToast;
+    }
+  | {
+      type: ActionType["UPDATE_TOAST"];
+      toast: Partial<ToasterToast>;
+    }
+  | {
+      type: ActionType["DISMISS_TOAST"];
+      toastId?: ToasterToast["id"];
+    }
+  | {
+      type: ActionType["REMOVE_TOAST"];
+      toastId?: ToasterToast["id"];
+    };
+
+interface State {
+  toasts: ToasterToast[];
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
+
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return;
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId);
+    dispatch({
+      type: "REMOVE_TOAST",
+      toastId: toastId,
+    });
+  }, TOAST_REMOVE_DELAY);
+
+  toastTimeouts.set(toastId, timeout);
+};
+
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case "ADD_TOAST":
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      };
+
+    case "UPDATE_TOAST":
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t
+        ),
+      };
+
+    case "DISMISS_TOAST": {
+      const { toastId } = action;
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId);
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id);
+        });
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t
+        ),
+      };
+    }
+    case "REMOVE_TOAST":
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        };
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      };
+  }
+};
+
+const listeners: Array<(state: State) => void> = [];
+
+let memoryState: State = { toasts: [] };
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action);
+  listeners.forEach((listener) => {
+    listener(memoryState);
+  });
+}
+
+type Toast = Omit<ToasterToast, "id">;
+
+function toast({ ...props }: Toast) {
+  const id = genId();
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: "UPDATE_TOAST",
+      toast: { ...props, id },
+    });
+  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
+
+  dispatch({
+    type: "ADD_TOAST",
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss();
+      },
+    },
+  });
+
+  return {
+    id: id,
+    dismiss,
+    update,
+  };
+}
+
+function useToast() {
+  const [state, setState] = React.useState<State>(memoryState);
+
+  React.useEffect(() => {
+    listeners.push(setState);
+    return () => {
+      const index = listeners.indexOf(setState);
+      if (index > -1) {
+        listeners.splice(index, 1);
+      }
+    };
+  }, [state]);
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
+  };
+}
+
+export { useToast, toast };
--- a/frontend/src/util/helpers.ts
+++ b/frontend/src/util/helpers.ts
@@ -0,0 +1,301 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import {
+  DockerContainerState,
+  EnvironmentVar,
+  ServerStatus,
+  Timelength,
+  User,
+  Version,
+} from "@types";
+import sanitizeHtml from "sanitize-html";
+
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+export function combineClasses(...classes: (string | false | undefined)[]) {
+  return classes.filter((c) => (c ? true : false)).join(" ");
+}
+
+export function inPx(num: number) {
+  return `${num}px`;
+}
+
+export type QueryObject = Record<string, string | number | boolean | undefined>;
+
+export function sanitizeLog(log: string) {
+  return sanitizeHtml(log, {
+    allowedTags: sanitizeHtml.defaults.allowedTags.filter(
+      (tag) => tag !== "script"
+    ),
+    allowedAttributes: sanitizeHtml.defaults.allowedAttributes,
+  });
+}
+
+export function generateQuery(query?: QueryObject) {
+  if (query) {
+    const q = Object.keys(query)
+      .filter((key) => query[key] !== undefined)
+      .map((key) => key + "=" + query[key])
+      .join("&");
+    return q && `?${q}`;
+  } else return "";
+}
+
+export function readableTimestamp(unix_time_ms: number) {
+  const date = new Date(unix_time_ms);
+  const hours24 = date.getHours();
+  let hours = hours24 % 12;
+  if (hours === 0) hours = 12;
+  const pm = hours24 > 11;
+  const minutes = date.getMinutes();
+  return `${date.getMonth() + 1}/${date.getDate()} ${hours}:${
+    minutes > 9 ? minutes : "0" + minutes
+  } ${pm ? "PM" : "AM"}`;
+}
+
+export function readableMonitorTimestamp(rfc3339_ts: string) {
+  const date = new Date(rfc3339_ts);
+  const hours24 = date.getHours();
+  let hours = hours24 % 12;
+  if (hours === 0) hours = 12;
+  const pm = hours24 > 11;
+  const minutes = date.getMinutes();
+  return `${date.getMonth() + 1}/${date.getDate()} ${hours}:${
+    minutes > 9 ? minutes : "0" + minutes
+  } ${pm ? "PM" : "AM"}`;
+}
+
+export function readableDuration(start_ts: string, end_ts: string) {
+  const start = new Date(start_ts);
+  const end = new Date(end_ts);
+  const durr = end.getTime() - start.getTime();
+  const seconds = durr / 1000;
+  const minutes = Math.floor(seconds / 60);
+  const remaining_seconds = seconds % 60;
+  return `${
+    minutes > 0 ? `${minutes} minute${minutes > 1 ? "s" : ""} ` : ""
+  }${remaining_seconds.toFixed(minutes > 0 ? 0 : 1)} seconds`;
+}
+
+const tzOffset = new Date().getTimezoneOffset() * 60;
+
+export function convertTsMsToLocalUnixTsInSecs(ts: number) {
+  return ts / 1000 - tzOffset;
+}
+
+export function validatePercentage(perc: string) {
+  // validates that a string represents a percentage
+  const percNum = Number(perc);
+  return !isNaN(percNum) && percNum > 0 && percNum < 100;
+}
+
+export function filterOutFromObj<T>(obj: T, idsToFilterOut: string[]) {
+  return Object.fromEntries(
+    Object.entries(obj as any).filter((entry) => {
+      return !idsToFilterOut.includes(entry[0]);
+    })
+  ) as T;
+}
+
+export function keepOnlyInObj<T>(obj: T, idsToKeep: string[]) {
+  return Object.fromEntries(
+    Object.entries(obj as any).filter((entry) => {
+      return idsToKeep.includes(entry[0]);
+    })
+  ) as T;
+}
+
+export function getNestedEntry(obj: any, idPath: string[]): any {
+  if (idPath.length === 0) {
+    return obj;
+  } else {
+    return getNestedEntry(obj[idPath[0]], idPath.slice(1));
+  }
+}
+
+export function intoCollection<T>(
+  arr: T[],
+  idPath: string[]
+): Record<string, T> {
+  return Object.fromEntries(
+    arr.map((item) => [getNestedEntry(item, idPath), item])
+  );
+}
+
+export function getId(entity: any): string {
+  return entity._id.$oid;
+}
+
+export function deploymentStateClass(state: DockerContainerState) {
+  switch (state) {
+    case DockerContainerState.Running:
+      return "green";
+    case DockerContainerState.Exited:
+      return "red";
+    default:
+      return "blue";
+  }
+}
+
+export function serverStatusClass(status: ServerStatus) {
+  if (status === ServerStatus.Ok) {
+    return "running";
+  } else if (status === ServerStatus.NotOk) {
+    return "exited";
+  }
+}
+
+export function copyToClipboard(text: string) {
+  navigator.clipboard.writeText(text);
+}
+
+export function parseEnvVarseToDotEnv(envVars: EnvironmentVar[] | undefined) {
+  return envVars?.reduce(
+    (prev, { variable, value }) =>
+      prev + (prev ? "\n" : "") + `${variable}=${value}`,
+    ""
+  );
+}
+
+function shouldKeepLine(line: string) {
+  if (line.length === 0) {
+    return false;
+  }
+  let firstIndex = -1;
+  for (let i = 0; i < line.length; i++) {
+    if (line[i] !== " ") {
+      firstIndex = i;
+      break;
+    }
+  }
+  if (firstIndex === -1) {
+    return false;
+  }
+  if (line[firstIndex] === "#") {
+    return false;
+  }
+  return true;
+}
+
+export function parseDotEnvToEnvVars(env: string): EnvironmentVar[] {
+  return env
+    .split("\n")
+    .filter((line) => shouldKeepLine(line))
+    .map((entry) => {
+      const [first, ...rest] = entry.replaceAll('"', "").split("=");
+      return [first, rest.join("=")];
+    })
+    .map(([variable, value]) => ({ variable, value }));
+}
+
+export function deploymentHeaderStateClass(state: DockerContainerState) {
+  switch (state) {
+    case DockerContainerState.Running:
+      return "running";
+    case DockerContainerState.Exited:
+      return "exited";
+  }
+}
+
+export function version_to_string(version: Version | undefined) {
+  if (!version) return;
+  return `v${version.major}.${version.minor}.${version.patch}`;
+}
+
+export function string_to_version(version: string): Version {
+  const [major, minor, patch] = version.split(".");
+  return {
+    major: Number(major),
+    minor: Number(minor),
+    patch: Number(patch),
+  };
+}
+
+export function get_to_one_sec_divisor(timelength: Timelength) {
+  // returns what the timelength needs to be divided to convert to per second values
+  if (timelength === Timelength.OneSecond) {
+    return 1;
+  } else if (timelength === Timelength.FiveSeconds) {
+    return 5;
+  } else if (timelength === Timelength.ThirtySeconds) {
+    return 30;
+  } else if (timelength === Timelength.OneMinute) {
+    return 60;
+  }
+}
+
+export function convert_timelength_to_ms(timelength: Timelength) {
+  // returns what the timelength needs to be divided to convert to per second values
+  if (timelength === Timelength.OneSecond) {
+    return 1000;
+  } else if (timelength === Timelength.FiveSeconds) {
+    return 5000;
+  } else if (timelength === Timelength.ThirtySeconds) {
+    return 30000;
+  } else if (timelength === Timelength.OneMinute) {
+    return 60000;
+  }
+}
+
+export function readableStorageAmount(gb: number) {
+  if (gb > 512) {
+    return `${(gb / 1024).toFixed(1)} TB`;
+  } else if (gb < 1) {
+    return `${(gb * 1024).toFixed()} MiB`;
+  } else {
+    return `${gb.toFixed()} GiB`;
+  }
+}
+
+export function readableVersion(version: Version) {
+  if (version.major === 0 && version.minor === 0 && version.patch === 0)
+    return "latest";
+  return `v${version.major}.${version.minor}.${version.patch}`;
+}
+
+export function readableUserType(user: User) {
+  if (user.github_id) {
+    return "github";
+  } else if (user.google_id) {
+    return "google";
+  } else {
+    return "local";
+  }
+}
+
+const KB = 1024;
+const MB = 1024 ** 2;
+const GB = 1024 ** 3;
+
+export function readableBytes(bytes: number) {
+  if (bytes > GB) {
+    return `${(bytes / GB).toFixed(1)} GiB`;
+  } else if (bytes > MB) {
+    return `${(bytes / MB).toFixed(1)} MiB`;
+  } else {
+    return `${(bytes / KB).toFixed(1)} KiB`;
+  }
+}
+
+export function readableImageId(id: string) {
+  return id.replaceAll("sha256:", "").slice(0, 12);
+}
+
+export function readableImageNameTag(
+  repoTags?: string[],
+  repoDigests?: string[]
+): [string, string] {
+  if (repoTags && repoTags.length > 0) {
+    const [name, tag] = repoTags[0].split(":");
+    return [name, tag];
+  } else if (repoDigests && repoDigests.length > 0) {
+    const [name] = repoDigests[0].split("@");
+    return [name, "none"];
+  } else {
+    return ["none", "none"];
+  }
+}
--- a/frontend/src/util/socket.tsx
+++ b/frontend/src/util/socket.tsx
@@ -0,0 +1,24 @@
+import { Update } from "@types";
+import { toast } from "@ui/toast/use-toast";
+import { useState } from "react";
+import rws from "reconnecting-websocket";
+
+export const WebsocketProvider = () => {
+  const ws = new rws("ws-url");
+  const [open, set] = useState(false);
+
+  ws.addEventListener("open", () => {
+    const token = localStorage.getItem("token");
+    if (token) ws.send(token);
+    set(true);
+  });
+
+  ws.addEventListener("message", ({ data }) => {
+    if (data == "LOGGED_IN") return console.log("logged in to ws");
+    const update = JSON.parse(data) as Update;
+    toast({
+      title: `${update.target} ${update.operation}`,
+      description: update.operator,
+    });
+  });
+};
--- a/frontend/src/vite-env.d.ts
+++ b/frontend/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -0,0 +1,76 @@
+import animate from "tailwindcss-animate";
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  darkMode: ["class"],
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+  theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: `var(--radius)`,
+        md: `calc(var(--radius) - 2px)`,
+        sm: "calc(var(--radius) - 4px)",
+      },
+      fontFamily: {
+        sans: ["Inter"],
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: 0 },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: 0 },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
+  },
+  plugins: [animate],
+};
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+
+    /* Paths */
+    "baseUrl": "./src",
+    "paths": { "@*": ["./*"] },
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
--- a/frontend/tsconfig.node.json
+++ b/frontend/tsconfig.node.json
@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -0,0 +1,8 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react(), tsconfigPaths()],
+});
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>