From b8604d334b445b713049a58397862a7ffbbe612a Mon Sep 17 00:00:00 2001
From: Brian McGee <brian@bmcgee.ie>
Date: Tue, 8 Jul 2025 11:31:18 +0100
Subject: [PATCH] feat(ui): prep V2

Preparation for rebuilding the UI with V2 components.
---
 pkgs/clan-app/ui/.storybook/preview.ts        |   1 -
 .../ui/src/Form/fields/FormSection.tsx        |   8 -
 .../clan-app/ui/src/Form/fields/TextInput.tsx |  57 ----
 pkgs/clan-app/ui/src/Form/fields/index.ts     |   2 -
 pkgs/clan-app/ui/src/Form/fields/layout.tsx   |  26 --
 pkgs/clan-app/ui/src/api/index.tsx            | 195 ------------
 pkgs/clan-app/ui/src/api_test.tsx             | 188 -----------
 .../src/components/{v2 => }/Alert/Alert.css   |   0
 .../{v2 => }/Alert/Alert.stories.tsx          |   2 +-
 .../src/components/{v2 => }/Alert/Alert.tsx   |   4 +-
 .../clan-app/ui/src/components/BackButton.tsx |  16 -
 .../ui/src/components/Button/Button-Base.css  |  55 ----
 .../ui/src/components/Button/Button-Dark.css  |  31 --
 .../ui/src/components/Button/Button-Ghost.css |  11 -
 .../ui/src/components/Button/Button-Light.css |  37 ---
 .../src/components/{v2 => }/Button/Button.css |   0
 .../src/components/{v2 => }/Button/Button.mdx |   0
 .../{v2 => }/Button/Button.stories.tsx        |   0
 .../ui/src/components/Button/Button.tsx       | 133 ++++----
 .../components/{v2 => }/Divider/Divider.css   |   0
 .../{v2 => }/Divider/Divider.stories.tsx      |   2 +-
 .../components/{v2 => }/Divider/Divider.tsx   |   0
 .../src/components/{v2 => }/Form/Checkbox.css |   0
 .../{v2 => }/Form/Checkbox.stories.tsx        |   2 +-
 .../src/components/{v2 => }/Form/Checkbox.tsx |   2 +-
 .../src/components/{v2 => }/Form/Combobox.css |   0
 .../{v2 => }/Form/Combobox.stories.tsx        |   0
 .../src/components/{v2 => }/Form/Combobox.tsx |   6 +-
 .../ui/src/components/{v2 => }/Form/Field.tsx |   0
 .../src/components/{v2 => }/Form/Fieldset.css |   0
 .../{v2 => }/Form/Fieldset.stories.tsx        |   8 +-
 .../src/components/{v2 => }/Form/Fieldset.tsx |   2 +-
 .../ui/src/components/{v2 => }/Form/Label.css |   0
 .../ui/src/components/{v2 => }/Form/Label.tsx |   4 +-
 .../src/components/{v2 => }/Form/Orienter.css |   0
 .../src/components/{v2 => }/Form/Orienter.tsx |   0
 .../{v2 => }/Form/TextArea.stories.tsx        |   0
 .../src/components/{v2 => }/Form/TextArea.tsx |   0
 .../components/{v2 => }/Form/TextInput.css    |   0
 .../{v2 => }/Form/TextInput.stories.tsx       |   2 +-
 .../components/{v2 => }/Form/TextInput.tsx    |   2 +-
 .../ui/src/components/Helpers/List.tsx        |  20 --
 .../ui/src/components/Helpers/index.tsx       |   1 -
 .../components/{v2 => }/Icon/Icon.stories.tsx |   0
 .../ui/src/components/{v2 => }/Icon/Icon.tsx  |   0
 .../src/components/{v2 => }/Loader/Loader.css |   0
 .../{v2 => }/Loader/Loader.stories.tsx        |   2 +-
 .../src/components/{v2 => }/Loader/Loader.tsx |   0
 .../{v2 => }/MachineStatus/MachineStatus.css  |   0
 .../MachineStatus/MachineStatus.stories.tsx   |   2 +-
 .../{v2 => }/MachineStatus/MachineStatus.tsx  |   2 +-
 .../src/components/{v2 => }/Modal/Modal.css   |   0
 .../{v2 => }/Modal/Modal.stories.tsx          |  12 +-
 .../src/components/{v2 => }/Modal/Modal.tsx   |   0
 .../Sidebar/SidebarFlyout/index.tsx           |  14 -
 .../src/components/Sidebar/SidebarHeader.tsx  |  71 -----
 .../components/Sidebar/SidebarListItem.tsx    |  30 --
 .../{v2 => }/Sidebar/SidebarNav.css           |   0
 .../{v2 => }/Sidebar/SidebarNav.stories.tsx   |   2 +-
 .../{v2 => }/Sidebar/SidebarNav.tsx           |   6 +-
 .../{v2 => }/Sidebar/SidebarNavBody.css       |   0
 .../{v2 => }/Sidebar/SidebarNavBody.tsx       |   6 +-
 .../{v2 => }/Sidebar/SidebarNavHeader.css     |   0
 .../{v2 => }/Sidebar/SidebarNavHeader.tsx     |   4 +-
 .../{v2 => }/Sidebar/SidebarPane.css          |   0
 .../{v2 => }/Sidebar/SidebarPane.stories.tsx  |  10 +-
 .../{v2 => }/Sidebar/SidebarPane.tsx          |   2 +-
 .../{v2 => }/Sidebar/SidebarSection.css       |   0
 .../{v2 => }/Sidebar/SidebarSection.tsx       |   2 +-
 .../components/Sidebar/css/sidebar-flyout.css |  21 --
 .../components/Sidebar/css/sidebar-header.css |  30 --
 .../Sidebar/css/sidebar-list-item.css         |  52 ---
 .../Sidebar/css/sidebar-profile.css           |  19 --
 .../ui/src/components/Sidebar/css/sidebar.css |  32 --
 .../ui/src/components/Sidebar/index.tsx       |  85 -----
 .../ui/src/components/{v2 => }/Tag/Tag.css    |   0
 .../components/{v2 => }/Tag/Tag.stories.tsx   |   2 +-
 .../ui/src/components/{v2 => }/Tag/Tag.tsx    |   2 +-
 .../components/{v2 => }/TagGroup/TagGroup.css |   0
 .../{v2 => }/TagGroup/TagGroup.stories.tsx    |   2 +-
 .../components/{v2 => }/TagGroup/TagGroup.tsx |   2 +-
 .../{v2 => }/Typography/Typography.css        |   0
 .../{v2 => }/Typography/Typography.mdx        |   0
 .../Typography/Typography.stories.tsx         |   2 +-
 .../{v2 => }/Typography/Typography.tsx        |   2 +-
 .../Typography/css/typography-color.css       |  23 --
 .../css/typography-hierarchy/index.css        |   4 -
 .../typography-hierarchy/typography-body.css  |  23 --
 .../typography-headline.css                   |  17 -
 .../typography-hierarchy/typography-label.css |  14 -
 .../typography-hierarchy/typography-title.css |  17 -
 .../components/Typography/css/typography.css  |  26 --
 .../ui/src/components/Typography/index.tsx    | 109 -------
 .../ui/src/components/{v2 => }/colors.ts      |   0
 .../clan-app/ui/src/components/icon/index.tsx |  98 ------
 .../ui/src/components/inputBase/index.tsx     | 193 -----------
 .../ui/src/components/toast/index.tsx         | 301 ------------------
 .../ui/src/components/v2/Button/Button.tsx    | 115 -------
 pkgs/clan-app/ui/src/components/v2/README.md  |   7 -
 pkgs/clan-app/ui/src/components/v2/index.css  |  75 -----
 pkgs/clan-app/ui/src/contexts/clan.tsx        |  64 ----
 pkgs/clan-app/ui/src/floating/index.tsx       | 125 --------
 pkgs/clan-app/ui/src/hooks/index.ts           |  44 ---
 pkgs/clan-app/ui/src/index.css                | 146 ++-------
 pkgs/clan-app/ui/src/index.tsx                | 103 +-----
 pkgs/clan-app/ui/src/layout/header.tsx        |  29 --
 pkgs/clan-app/ui/src/layout/layout.tsx        |  29 --
 pkgs/clan-app/ui/src/queries/clan-meta.ts     |  37 ---
 pkgs/clan-app/ui/src/routes/clans/create.tsx  | 207 ------------
 pkgs/clan-app/ui/src/routes/clans/details.tsx | 151 ---------
 pkgs/clan-app/ui/src/routes/clans/index.ts    |   3 -
 pkgs/clan-app/ui/src/routes/clans/list.tsx    | 160 ----------
 .../ui/src/routes/components/index.tsx        | 118 -------
 pkgs/clan-app/ui/src/routes/hosts/view.tsx    |  76 -----
 pkgs/clan-app/ui/src/routes/welcome/index.tsx |  37 ---
 pkgs/clan-app/ui/src/stores/clan.tsx          |  88 -----
 pkgs/clan-app/ui/src/three.tsx                | 271 ----------------
 117 files changed, 158 insertions(+), 3785 deletions(-)
 delete mode 100644 pkgs/clan-app/ui/src/Form/fields/FormSection.tsx
 delete mode 100644 pkgs/clan-app/ui/src/Form/fields/TextInput.tsx
 delete mode 100644 pkgs/clan-app/ui/src/Form/fields/index.ts
 delete mode 100644 pkgs/clan-app/ui/src/Form/fields/layout.tsx
 delete mode 100644 pkgs/clan-app/ui/src/api/index.tsx
 delete mode 100644 pkgs/clan-app/ui/src/api_test.tsx
 rename pkgs/clan-app/ui/src/components/{v2 => }/Alert/Alert.css (100%)
 rename pkgs/clan-app/ui/src/components/{v2 => }/Alert/Alert.stories.tsx (97%)
 rename pkgs/clan-app/ui/src/components/{v2 => }/Alert/Alert.tsx (89%)
 delete mode 100644 pkgs/clan-app/ui/src/components/BackButton.tsx
 delete mode 100644 pkgs/clan-app/ui/src/components/Button/Button-Base.css
 delete mode 100644 pkgs/clan-app/ui/src/components/Button/Button-Dark.css
 delete mode 100644 pkgs/clan-app/ui/src/components/Button/Button-Ghost.css
 delete mode 100644 pkgs/clan-app/ui/src/components/Button/Button-Light.css
 rename pkgs/clan-app/ui/src/components/{v2 => }/Button/Button.css (100%)
 rename pkgs/clan-app/ui/src/components/{v2 => }/Button/Button.mdx (100%)
 rename pkgs/clan-app/ui/src/components/{v2 => }/Button/Button.stories.tsx (100%)
 rename pkgs/clan-app/ui/src/components/{v2 => }/Divider/Divider.css (100%)
 rename pkgs/clan-app/ui/src/components/{v2 => }/Divider/Divider.stories.tsx (90%)
 rename pkgs/clan-app/ui/src/components/{v2 => }/Divider/Divider.tsx (100%)
 rename pkgs/clan-app/ui/src/components/{v2 => }/Form/Checkbox.css (100%)
 rename pkgs/clan-app/ui/src/components/{v2 => }/Form/Checkbox.stories.tsx (96%)
 rename pkgs/clan-app/ui/src/components/{v2 => }/Form/Checkbox.tsx (97%)
 rename pkgs/clan-app/ui/src/components/{v2 => }/Form/Combobox.css (100%)
 rename pkgs/clan-app/ui/src/components/{v2 => }/Form/Combobox.stories.tsx (100%)
 rename pkgs/clan-app/ui/src/components/{v2 => }/Form/Combobox.tsx (96%)
 rename pkgs/clan-app/ui/src/components/{v2 => }/Form/Field.tsx (100%)
 rename pkgs/clan-app/ui/src/components/{v2 => }/Form/Fieldset.css (100%)
 rename pkgs/clan-app/ui/src/components/{v2 => }/Form/Fieldset.stories.tsx (91%)
 rename pkgs/clan-app/ui/src/components/{v2 => }/Form/Fieldset.tsx (95%)
 rename pkgs/clan-app/ui/src/components/{v2 => }/Form/Label.css (100%)
 rename pkgs/clan-app/ui/src/components/{v2 => }/Form/Label.tsx (95%)
 rename pkgs/clan-app/ui/src/components/{v2 => }/Form/Orienter.css (100%)
 rename pkgs/clan-app/ui/src/components/{v2 => }/Form/Orienter.tsx (100%)
 rename pkgs/clan-app/ui/src/components/{v2 => }/Form/TextArea.stories.tsx (100%)
 rename pkgs/clan-app/ui/src/components/{v2 => }/Form/TextArea.tsx (100%)
 rename pkgs/clan-app/ui/src/components/{v2 => }/Form/TextInput.css (100%)
 rename pkgs/clan-app/ui/src/components/{v2 => }/Form/TextInput.stories.tsx (96%)
 rename pkgs/clan-app/ui/src/components/{v2 => }/Form/TextInput.tsx (95%)
 delete mode 100644 pkgs/clan-app/ui/src/components/Helpers/List.tsx
 delete mode 100644 pkgs/clan-app/ui/src/components/Helpers/index.tsx
 rename pkgs/clan-app/ui/src/components/{v2 => }/Icon/Icon.stories.tsx (100%)
 rename pkgs/clan-app/ui/src/components/{v2 => }/Icon/Icon.tsx (100%)
 rename pkgs/clan-app/ui/src/components/{v2 => }/Loader/Loader.css (100%)
 rename pkgs/clan-app/ui/src/components/{v2 => }/Loader/Loader.stories.tsx (83%)
 rename pkgs/clan-app/ui/src/components/{v2 => }/Loader/Loader.tsx (100%)
 rename pkgs/clan-app/ui/src/components/{v2 => }/MachineStatus/MachineStatus.css (100%)
 rename pkgs/clan-app/ui/src/components/{v2 => }/MachineStatus/MachineStatus.stories.tsx (95%)
 rename pkgs/clan-app/ui/src/components/{v2 => }/MachineStatus/MachineStatus.tsx (93%)
 rename pkgs/clan-app/ui/src/components/{v2 => }/Modal/Modal.css (100%)
 rename pkgs/clan-app/ui/src/components/{v2 => }/Modal/Modal.stories.tsx (83%)
 rename pkgs/clan-app/ui/src/components/{v2 => }/Modal/Modal.tsx (100%)
 delete mode 100644 pkgs/clan-app/ui/src/components/Sidebar/SidebarFlyout/index.tsx
 delete mode 100644 pkgs/clan-app/ui/src/components/Sidebar/SidebarHeader.tsx
 delete mode 100644 pkgs/clan-app/ui/src/components/Sidebar/SidebarListItem.tsx
 rename pkgs/clan-app/ui/src/components/{v2 => }/Sidebar/SidebarNav.css (100%)
 rename pkgs/clan-app/ui/src/components/{v2 => }/Sidebar/SidebarNav.stories.tsx (98%)
 rename pkgs/clan-app/ui/src/components/{v2 => }/Sidebar/SidebarNav.tsx (76%)
 rename pkgs/clan-app/ui/src/components/{v2 => }/Sidebar/SidebarNavBody.css (100%)
 rename pkgs/clan-app/ui/src/components/{v2 => }/Sidebar/SidebarNavBody.tsx (95%)
 rename pkgs/clan-app/ui/src/components/{v2 => }/Sidebar/SidebarNavHeader.css (100%)
 rename pkgs/clan-app/ui/src/components/{v2 => }/Sidebar/SidebarNavHeader.tsx (96%)
 rename pkgs/clan-app/ui/src/components/{v2 => }/Sidebar/SidebarPane.css (100%)
 rename pkgs/clan-app/ui/src/components/{v2 => }/Sidebar/SidebarPane.stories.tsx (90%)
 rename pkgs/clan-app/ui/src/components/{v2 => }/Sidebar/SidebarPane.tsx (90%)
 rename pkgs/clan-app/ui/src/components/{v2 => }/Sidebar/SidebarSection.css (100%)
 rename pkgs/clan-app/ui/src/components/{v2 => }/Sidebar/SidebarSection.tsx (95%)
 delete mode 100644 pkgs/clan-app/ui/src/components/Sidebar/css/sidebar-flyout.css
 delete mode 100644 pkgs/clan-app/ui/src/components/Sidebar/css/sidebar-header.css
 delete mode 100644 pkgs/clan-app/ui/src/components/Sidebar/css/sidebar-list-item.css
 delete mode 100644 pkgs/clan-app/ui/src/components/Sidebar/css/sidebar-profile.css
 delete mode 100644 pkgs/clan-app/ui/src/components/Sidebar/css/sidebar.css
 delete mode 100644 pkgs/clan-app/ui/src/components/Sidebar/index.tsx
 rename pkgs/clan-app/ui/src/components/{v2 => }/Tag/Tag.css (100%)
 rename pkgs/clan-app/ui/src/components/{v2 => }/Tag/Tag.stories.tsx (93%)
 rename pkgs/clan-app/ui/src/components/{v2 => }/Tag/Tag.tsx (94%)
 rename pkgs/clan-app/ui/src/components/{v2 => }/TagGroup/TagGroup.css (100%)
 rename pkgs/clan-app/ui/src/components/{v2 => }/TagGroup/TagGroup.stories.tsx (89%)
 rename pkgs/clan-app/ui/src/components/{v2 => }/TagGroup/TagGroup.tsx (90%)
 rename pkgs/clan-app/ui/src/components/{v2 => }/Typography/Typography.css (100%)
 rename pkgs/clan-app/ui/src/components/{v2 => }/Typography/Typography.mdx (100%)
 rename pkgs/clan-app/ui/src/components/{v2 => }/Typography/Typography.stories.tsx (98%)
 rename pkgs/clan-app/ui/src/components/{v2 => }/Typography/Typography.tsx (97%)
 delete mode 100644 pkgs/clan-app/ui/src/components/Typography/css/typography-color.css
 delete mode 100644 pkgs/clan-app/ui/src/components/Typography/css/typography-hierarchy/index.css
 delete mode 100644 pkgs/clan-app/ui/src/components/Typography/css/typography-hierarchy/typography-body.css
 delete mode 100644 pkgs/clan-app/ui/src/components/Typography/css/typography-hierarchy/typography-headline.css
 delete mode 100644 pkgs/clan-app/ui/src/components/Typography/css/typography-hierarchy/typography-label.css
 delete mode 100644 pkgs/clan-app/ui/src/components/Typography/css/typography-hierarchy/typography-title.css
 delete mode 100644 pkgs/clan-app/ui/src/components/Typography/css/typography.css
 delete mode 100644 pkgs/clan-app/ui/src/components/Typography/index.tsx
 rename pkgs/clan-app/ui/src/components/{v2 => }/colors.ts (100%)
 delete mode 100644 pkgs/clan-app/ui/src/components/icon/index.tsx
 delete mode 100644 pkgs/clan-app/ui/src/components/inputBase/index.tsx
 delete mode 100644 pkgs/clan-app/ui/src/components/toast/index.tsx
 delete mode 100644 pkgs/clan-app/ui/src/components/v2/Button/Button.tsx
 delete mode 100644 pkgs/clan-app/ui/src/components/v2/README.md
 delete mode 100644 pkgs/clan-app/ui/src/components/v2/index.css
 delete mode 100644 pkgs/clan-app/ui/src/contexts/clan.tsx
 delete mode 100644 pkgs/clan-app/ui/src/floating/index.tsx
 delete mode 100644 pkgs/clan-app/ui/src/hooks/index.ts
 delete mode 100644 pkgs/clan-app/ui/src/layout/header.tsx
 delete mode 100644 pkgs/clan-app/ui/src/layout/layout.tsx
 delete mode 100644 pkgs/clan-app/ui/src/queries/clan-meta.ts
 delete mode 100644 pkgs/clan-app/ui/src/routes/clans/create.tsx
 delete mode 100644 pkgs/clan-app/ui/src/routes/clans/details.tsx
 delete mode 100644 pkgs/clan-app/ui/src/routes/clans/index.ts
 delete mode 100644 pkgs/clan-app/ui/src/routes/clans/list.tsx
 delete mode 100644 pkgs/clan-app/ui/src/routes/components/index.tsx
 delete mode 100644 pkgs/clan-app/ui/src/routes/hosts/view.tsx
 delete mode 100644 pkgs/clan-app/ui/src/routes/welcome/index.tsx
 delete mode 100644 pkgs/clan-app/ui/src/stores/clan.tsx
 delete mode 100644 pkgs/clan-app/ui/src/three.tsx

diff --git a/pkgs/clan-app/ui/.storybook/preview.ts b/pkgs/clan-app/ui/.storybook/preview.ts
index 33aafbfb6..b1bbb8cda 100644
--- a/pkgs/clan-app/ui/.storybook/preview.ts
+++ b/pkgs/clan-app/ui/.storybook/preview.ts
@@ -1,6 +1,5 @@
 import type { Preview } from "@kachurun/storybook-solid-vite";
 
-import "@/src/components/v2/index.css";
 import "../src/index.css";
 import "./preview.css";
 
diff --git a/pkgs/clan-app/ui/src/Form/fields/FormSection.tsx b/pkgs/clan-app/ui/src/Form/fields/FormSection.tsx
deleted file mode 100644
index 66a17717d..000000000
--- a/pkgs/clan-app/ui/src/Form/fields/FormSection.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { JSX } from "solid-js";
-
-interface FormSectionProps {
-  children: JSX.Element;
-}
-const FormSection = (props: FormSectionProps) => {
-  return <div class="p-2">{props.children}</div>;
-};
diff --git a/pkgs/clan-app/ui/src/Form/fields/TextInput.tsx b/pkgs/clan-app/ui/src/Form/fields/TextInput.tsx
deleted file mode 100644
index 7487fabb9..000000000
--- a/pkgs/clan-app/ui/src/Form/fields/TextInput.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { splitProps, type JSX } from "solid-js";
-import {
-  InputBase,
-  InputError,
-  InputLabel,
-  InputVariant,
-} from "@/src/components/inputBase";
-import { FieldLayout } from "./layout";
-
-interface TextInputProps {
-  // Common
-  error?: string;
-  required?: boolean;
-  disabled?: boolean;
-  // Passed to input
-  value: string;
-  inputProps?: JSX.InputHTMLAttributes<HTMLInputElement>;
-  placeholder?: string;
-  variant?: InputVariant;
-  // Passed to label
-  label: JSX.Element;
-  help?: string;
-  // Passed to layout
-  class?: string;
-}
-
-export function TextInput(props: TextInputProps) {
-  const [layoutProps, rest] = splitProps(props, ["class"]);
-  return (
-    <FieldLayout
-      label={
-        <InputLabel
-          class="col-span-2"
-          required={props.required}
-          error={!!props.error}
-          help={props.help}
-        >
-          {props.label}
-        </InputLabel>
-      }
-      field={
-        <InputBase
-          variant={props.variant}
-          error={!!props.error}
-          required={props.required}
-          disabled={props.disabled}
-          placeholder={props.placeholder}
-          class="col-span-10"
-          {...props.inputProps}
-          value={props.value}
-        />
-      }
-      error={props.error && <InputError error={props.error} />}
-      {...layoutProps}
-    />
-  );
-}
diff --git a/pkgs/clan-app/ui/src/Form/fields/index.ts b/pkgs/clan-app/ui/src/Form/fields/index.ts
deleted file mode 100644
index 46efa5eec..000000000
--- a/pkgs/clan-app/ui/src/Form/fields/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./FormSection";
-export * from "./TextInput";
diff --git a/pkgs/clan-app/ui/src/Form/fields/layout.tsx b/pkgs/clan-app/ui/src/Form/fields/layout.tsx
deleted file mode 100644
index 32d4a8888..000000000
--- a/pkgs/clan-app/ui/src/Form/fields/layout.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { JSX, splitProps } from "solid-js";
-import cx from "classnames";
-
-interface LayoutProps extends JSX.HTMLAttributes<HTMLDivElement> {
-  field?: JSX.Element;
-  label?: JSX.Element;
-  error?: JSX.Element;
-}
-export const FieldLayout = (props: LayoutProps) => {
-  const [intern, divProps] = splitProps(props, [
-    "field",
-    "label",
-    "error",
-    "class",
-  ]);
-  return (
-    <div
-      class={cx("grid grid-cols-10 items-center", intern.class)}
-      {...divProps}
-    >
-      <div class="col-span-5 flex items-center">{props.label}</div>
-      <div class="col-span-5">{props.field}</div>
-      {props.error && <span class="col-span-full">{props.error}</span>}
-    </div>
-  );
-};
diff --git a/pkgs/clan-app/ui/src/api/index.tsx b/pkgs/clan-app/ui/src/api/index.tsx
deleted file mode 100644
index 519062817..000000000
--- a/pkgs/clan-app/ui/src/api/index.tsx
+++ /dev/null
@@ -1,195 +0,0 @@
-import { API } from "@/api/API";
-import { Schema as Inventory } from "@/api/Inventory";
-import { toast } from "solid-toast";
-import {
-  ErrorToastComponent,
-  CancelToastComponent,
-} from "@/src/components/toast";
-
-type OperationNames = keyof API;
-type Services = NonNullable<Inventory["services"]>;
-type ServiceNames = keyof Services;
-
-export type OperationArgs<T extends OperationNames> = API[T]["arguments"];
-export type OperationResponse<T extends OperationNames> = API[T]["return"];
-
-export type ClanServiceInstance<T extends ServiceNames> = NonNullable<
-  Services[T]
->[string];
-
-export type SuccessQuery<T extends OperationNames> = Extract<
-  OperationResponse<T>,
-  { status: "success" }
->;
-export type SuccessData<T extends OperationNames> = SuccessQuery<T>["data"];
-
-interface SendHeaderType {
-  logging?: { group_path: string[] };
-}
-interface BackendSendType<K extends OperationNames> {
-  body: OperationArgs<K>;
-  header?: SendHeaderType;
-}
-
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
-interface ReceiveHeaderType {}
-interface BackendReturnType<K extends OperationNames> {
-  body: OperationResponse<K>;
-  header: ReceiveHeaderType;
-}
-
-const _callApi = <K extends OperationNames>(
-  method: K,
-  args: OperationArgs<K>,
-  backendOpts?: SendHeaderType,
-): { promise: Promise<BackendReturnType<K>>; op_key: string } => {
-  // if window[method] does not exist, throw an error
-  if (!(method in window)) {
-    console.error(`Method ${method} not found on window object`);
-    // return a rejected promise
-    return {
-      promise: Promise.resolve({
-        body: {
-          status: "error",
-          errors: [
-            {
-              message: `Method ${method} not found on window object`,
-              code: "method_not_found",
-            },
-          ],
-          op_key: "noop",
-        },
-        header: {},
-      }),
-      op_key: "noop",
-    };
-  }
-
-  const message: BackendSendType<OperationNames> = {
-    body: args,
-    header: backendOpts,
-  };
-
-  const promise = (
-    window as unknown as Record<
-      OperationNames,
-      (
-        args: BackendSendType<OperationNames>,
-      ) => Promise<BackendReturnType<OperationNames>>
-    >
-  )[method](message) as Promise<BackendReturnType<K>>;
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const op_key = (promise as any)._webviewMessageId as string;
-
-  return { promise, op_key };
-};
-
-const handleCancel = async <K extends OperationNames>(
-  ops_key: string,
-  orig_task: Promise<BackendReturnType<K>>,
-) => {
-  console.log("Canceling operation: ", ops_key);
-  const { promise, op_key } = _callApi("delete_task", { task_id: ops_key });
-  promise.catch((error) => {
-    toast.custom(
-      (t) => (
-        <ErrorToastComponent
-          t={t}
-          message={"Unexpected error: " + (error?.message || String(error))}
-        />
-      ),
-      {
-        duration: 5000,
-      },
-    );
-    console.error("Unhandled promise rejection in callApi:", error);
-  });
-  const resp = await promise;
-
-  if (resp.body.status === "error") {
-    toast.custom(
-      (t) => (
-        <ErrorToastComponent
-          t={t}
-          message={"Failed to cancel operation: " + ops_key}
-        />
-      ),
-      {
-        duration: 5000,
-      },
-    );
-  } else {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (orig_task as any).cancelled = true;
-  }
-  console.log("Cancel response: ", resp);
-};
-
-export const callApi = <K extends OperationNames>(
-  method: K,
-  args: OperationArgs<K>,
-  backendOpts?: SendHeaderType,
-): { promise: Promise<OperationResponse<K>>; op_key: string } => {
-  console.log("Calling API", method, args, backendOpts);
-
-  const { promise, op_key } = _callApi(method, args, backendOpts);
-  promise.catch((error) => {
-    toast.custom(
-      (t) => (
-        <ErrorToastComponent
-          t={t}
-          message={"Unexpected error: " + (error?.message || String(error))}
-        />
-      ),
-      {
-        duration: 5000,
-      },
-    );
-    console.error("Unhandled promise rejection in callApi:", error);
-  });
-
-  const toastId = toast.custom(
-    (
-      t, // t is the Toast object, t.id is the id of THIS toast instance
-    ) => (
-      <CancelToastComponent
-        t={t}
-        message={"Executing " + method}
-        onCancel={handleCancel.bind(null, op_key, promise)}
-      />
-    ),
-    {
-      duration: Infinity,
-    },
-  );
-
-  const new_promise = promise.then((response) => {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const cancelled = (promise as any).cancelled;
-    if (cancelled) {
-      console.log("Not printing toast because operation was cancelled");
-    }
-
-    const body = response.body;
-    if (body.status === "error" && !cancelled) {
-      toast.remove(toastId);
-      toast.custom(
-        (t) => (
-          <ErrorToastComponent
-            t={t}
-            message={"Error: " + body.errors[0].message}
-          />
-        ),
-        {
-          duration: Infinity,
-        },
-      );
-    } else {
-      toast.remove(toastId);
-    }
-    return body;
-  });
-
-  return { promise: new_promise, op_key: op_key };
-};
diff --git a/pkgs/clan-app/ui/src/api_test.tsx b/pkgs/clan-app/ui/src/api_test.tsx
deleted file mode 100644
index 76ab8ac65..000000000
--- a/pkgs/clan-app/ui/src/api_test.tsx
+++ /dev/null
@@ -1,188 +0,0 @@
-import {
-  createForm,
-  FieldValues,
-  getValues,
-  setValue,
-  SubmitHandler,
-} from "@modular-forms/solid";
-import { TextInput } from "@/src/Form/fields/TextInput";
-import { Button } from "./components/Button/Button";
-import { callApi } from "./api";
-import { API } from "@/api/API";
-import { createSignal, Match, Switch, For, Show } from "solid-js";
-import { Typography } from "./components/Typography";
-import { useQuery } from "@tanstack/solid-query";
-import { makePersisted } from "@solid-primitives/storage";
-import jsonSchema from "@/api/API.json";
-
-interface APITesterForm extends FieldValues {
-  endpoint: string;
-  payload: string;
-}
-
-const ACTUAL_API_ENDPOINT_NAMES: (keyof API)[] = jsonSchema.required.map(
-  (key) => key as keyof API,
-);
-
-export const ApiTester = () => {
-  const [persistedTestData, setPersistedTestData] = makePersisted(
-    createSignal<APITesterForm>(),
-    {
-      name: "_test_data",
-      storage: localStorage,
-    },
-  );
-
-  const [formStore, { Form, Field }] = createForm<APITesterForm>({
-    initialValues: persistedTestData() || { endpoint: "", payload: "" },
-  });
-
-  const [endpointSearchTerm, setEndpointSearchTerm] = createSignal(
-    getValues(formStore).endpoint || "",
-  );
-  const [showSuggestions, setShowSuggestions] = createSignal(false);
-
-  const filteredEndpoints = () => {
-    const term = endpointSearchTerm().toLowerCase();
-    if (!term) return ACTUAL_API_ENDPOINT_NAMES;
-    return ACTUAL_API_ENDPOINT_NAMES.filter((ep) =>
-      ep.toLowerCase().includes(term),
-    );
-  };
-
-  const query = useQuery(() => {
-    const currentEndpoint = getValues(formStore).endpoint;
-    const currentPayload = getValues(formStore).payload;
-    const values = getValues(formStore);
-
-    return {
-      queryKey: ["api-tester", currentEndpoint, currentPayload],
-      queryFn: async () => {
-        return await callApi(
-          values.endpoint as keyof API,
-          JSON.parse(values.payload || "{}"),
-        ).promise;
-      },
-      staleTime: Infinity,
-      enabled: false,
-    };
-  });
-
-  const handleSubmit: SubmitHandler<APITesterForm> = (values) => {
-    console.log(values);
-    setPersistedTestData(values);
-    setEndpointSearchTerm(values.endpoint);
-    query.refetch();
-
-    const v = getValues(formStore);
-    console.log(v);
-  };
-  return (
-    <div class="p-2">
-      <h1>API Tester</h1>
-      <Form onSubmit={handleSubmit}>
-        <div class="flex flex-col">
-          <Field name="endpoint">
-            {(field, fieldProps) => (
-              <div class="relative">
-                <TextInput
-                  label={"endpoint"}
-                  value={field.value || ""}
-                  inputProps={{
-                    ...fieldProps,
-                    onInput: (e: Event) => {
-                      if (fieldProps.onInput) {
-                        (fieldProps.onInput as (ev: Event) => void)(e);
-                      }
-                      setEndpointSearchTerm(
-                        (e.currentTarget as HTMLInputElement).value,
-                      );
-                      setShowSuggestions(true);
-                    },
-                    onBlur: (e: FocusEvent) => {
-                      if (fieldProps.onBlur) {
-                        (fieldProps.onBlur as (ev: FocusEvent) => void)(e);
-                      }
-                      setTimeout(() => setShowSuggestions(false), 150);
-                    },
-                    onFocus: (e: FocusEvent) => {
-                      setEndpointSearchTerm(field.value || "");
-                      setShowSuggestions(true);
-                    },
-                    onKeyDown: (e: KeyboardEvent) => {
-                      if (e.key === "Escape") {
-                        setShowSuggestions(false);
-                      }
-                    },
-                  }}
-                />
-                <Show
-                  when={showSuggestions() && filteredEndpoints().length > 0}
-                >
-                  <ul class="absolute z-10 mt-1 max-h-60 w-full overflow-y-auto rounded border border-gray-300 bg-white shadow-lg">
-                    <For each={filteredEndpoints()}>
-                      {(ep) => (
-                        <li
-                          class="cursor-pointer p-2 hover:bg-gray-100"
-                          onMouseDown={(e) => {
-                            e.preventDefault();
-                            setValue(formStore, "endpoint", ep);
-                            setEndpointSearchTerm(ep);
-                            setShowSuggestions(false);
-                          }}
-                        >
-                          {ep}
-                        </li>
-                      )}
-                    </For>
-                  </ul>
-                </Show>
-              </div>
-            )}
-          </Field>
-          <Field name="payload">
-            {(field, fieldProps) => (
-              <div class="my-2 flex flex-col">
-                <label class="mb-1 font-medium" for="payload-textarea">
-                  payload
-                </label>
-                <textarea
-                  id="payload-textarea"
-                  class="min-h-[120px] resize-y rounded border p-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400"
-                  placeholder={`{\n  "key": "value"\n}`}
-                  value={field.value || ""}
-                  {...fieldProps}
-                  onInput={(e) => {
-                    fieldProps.onInput?.(e);
-                  }}
-                  spellcheck={false}
-                  autocomplete="off"
-                  autocorrect="off"
-                  autocapitalize="off"
-                />
-              </div>
-            )}
-          </Field>
-          <Button class="m-2" disabled={query.isFetching}>
-            Send
-          </Button>
-        </div>
-      </Form>
-      <div>
-        <Typography hierarchy="title" size="default">
-          Result
-        </Typography>
-        <Switch>
-          <Match when={query.isFetching}>
-            <span>loading ...</span>
-          </Match>
-          <Match when={query.isFetched}>
-            <pre>
-              <code>{JSON.stringify(query.data, null, 2)}</code>
-            </pre>
-          </Match>
-        </Switch>
-      </div>
-    </div>
-  );
-};
diff --git a/pkgs/clan-app/ui/src/components/v2/Alert/Alert.css b/pkgs/clan-app/ui/src/components/Alert/Alert.css
similarity index 100%
rename from pkgs/clan-app/ui/src/components/v2/Alert/Alert.css
rename to pkgs/clan-app/ui/src/components/Alert/Alert.css
diff --git a/pkgs/clan-app/ui/src/components/v2/Alert/Alert.stories.tsx b/pkgs/clan-app/ui/src/components/Alert/Alert.stories.tsx
similarity index 97%
rename from pkgs/clan-app/ui/src/components/v2/Alert/Alert.stories.tsx
rename to pkgs/clan-app/ui/src/components/Alert/Alert.stories.tsx
index 5434becd7..cc50bb952 100644
--- a/pkgs/clan-app/ui/src/components/v2/Alert/Alert.stories.tsx
+++ b/pkgs/clan-app/ui/src/components/Alert/Alert.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@kachurun/storybook-solid";
-import { Alert, AlertProps } from "@/src/components/v2/Alert/Alert";
+import { Alert, AlertProps } from "@/src/components/Alert/Alert";
 import { expect, fn } from "storybook/test";
 import { StoryContext } from "@kachurun/storybook-solid-vite";
 
diff --git a/pkgs/clan-app/ui/src/components/v2/Alert/Alert.tsx b/pkgs/clan-app/ui/src/components/Alert/Alert.tsx
similarity index 89%
rename from pkgs/clan-app/ui/src/components/v2/Alert/Alert.tsx
rename to pkgs/clan-app/ui/src/components/Alert/Alert.tsx
index 7dc156a2f..5fb0e8be9 100644
--- a/pkgs/clan-app/ui/src/components/v2/Alert/Alert.tsx
+++ b/pkgs/clan-app/ui/src/components/Alert/Alert.tsx
@@ -1,7 +1,7 @@
 import "./Alert.css";
 import cx from "classnames";
-import Icon, { IconVariant } from "@/src/components/v2/Icon/Icon";
-import { Typography } from "@/src/components/v2/Typography/Typography";
+import Icon, { IconVariant } from "@/src/components/Icon/Icon";
+import { Typography } from "@/src/components/Typography/Typography";
 import { Button } from "@kobalte/core/button";
 import { Alert as KAlert } from "@kobalte/core/alert";
 
diff --git a/pkgs/clan-app/ui/src/components/BackButton.tsx b/pkgs/clan-app/ui/src/components/BackButton.tsx
deleted file mode 100644
index 818d170a2..000000000
--- a/pkgs/clan-app/ui/src/components/BackButton.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { useNavigate } from "@solidjs/router";
-import { Button } from "./Button/Button";
-import Icon from "./icon";
-
-export const BackButton = () => {
-  const navigate = useNavigate();
-  return (
-    <Button
-      variant="ghost"
-      size="s"
-      class="mr-2"
-      onClick={() => navigate(-1)}
-      startIcon={<Icon icon="CaretLeft" />}
-    ></Button>
-  );
-};
diff --git a/pkgs/clan-app/ui/src/components/Button/Button-Base.css b/pkgs/clan-app/ui/src/components/Button/Button-Base.css
deleted file mode 100644
index d2503704e..000000000
--- a/pkgs/clan-app/ui/src/components/Button/Button-Base.css
+++ /dev/null
@@ -1,55 +0,0 @@
-@import "Button-Light.css";
-@import "Button-Dark.css";
-@import "Button-Ghost.css";
-
-.button {
-  @apply inline-flex items-center flex-shrink gap-1 justify-center p-4 font-semibold;
-  letter-spacing: 0.0275rem;
-}
-
-/* button SIZES */
-
-.button--default {
-  padding: theme(padding.2) theme(padding.4);
-  height: theme(height.9);
-  border-radius: theme(borderRadius.DEFAULT);
-
-  &:has(> .button__icon--start):has(> .button__label) {
-    padding-left: theme(padding[2.5]);
-  }
-
-  &:has(> .button__icon--end):has(> .button__label) {
-    padding-right: theme(padding[2.5]);
-  }
-}
-
-.button--small {
-  padding: theme(padding[1.5]) theme(padding[3]);
-  height: theme(height.8);
-  border-radius: 3px;
-
-  &:has(> .button__icon--start):has(> .button__label) {
-    padding-left: theme(padding.2);
-  }
-
-  &:has(> .button__label):has(> .button__icon--end) {
-    padding-right: theme(padding.2);
-  }
-}
-
-/* button group */
-
-.button-group .button:first-child {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.button-group .button:first-child {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.button-group .button:last-child {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
diff --git a/pkgs/clan-app/ui/src/components/Button/Button-Dark.css b/pkgs/clan-app/ui/src/components/Button/Button-Dark.css
deleted file mode 100644
index 914fc74b9..000000000
--- a/pkgs/clan-app/ui/src/components/Button/Button-Dark.css
+++ /dev/null
@@ -1,31 +0,0 @@
-/* button DARK and states */
-
-.button--dark {
-  @apply border border-solid border-secondary-950 bg-primary-800 text-white;
-
-  box-shadow: inset 1px 1px theme(backgroundColor.secondary.700);
-
-  &:disabled {
-    @apply disabled:bg-secondary-200 disabled:text-secondary-700 disabled:border-secondary-300;
-  }
-
-  & .button__icon {
-    color: theme(textColor.secondary.200);
-  }
-}
-
-.button--dark-hover:hover {
-  @apply hover:bg-secondary-900;
-}
-
-.button--dark-focus:focus {
-  @apply focus:border-secondary-900;
-}
-
-.button--dark-active:active {
-  @apply focus:border-secondary-900;
-}
-
-.button--dark-active:active {
-  @apply active:border-secondary-900;
-}
diff --git a/pkgs/clan-app/ui/src/components/Button/Button-Ghost.css b/pkgs/clan-app/ui/src/components/Button/Button-Ghost.css
deleted file mode 100644
index ad9881bb7..000000000
--- a/pkgs/clan-app/ui/src/components/Button/Button-Ghost.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.button--ghost-hover:hover {
-  @apply hover:bg-secondary-100 hover:text-secondary-900;
-}
-
-.button--ghost-focus:focus {
-  @apply focus:bg-secondary-200 focus:text-secondary-900;
-}
-
-.button--ghost-active:active {
-  @apply active:bg-secondary-200 active:text-secondary-900;
-}
diff --git a/pkgs/clan-app/ui/src/components/Button/Button-Light.css b/pkgs/clan-app/ui/src/components/Button/Button-Light.css
deleted file mode 100644
index 1ec847ac7..000000000
--- a/pkgs/clan-app/ui/src/components/Button/Button-Light.css
+++ /dev/null
@@ -1,37 +0,0 @@
-/* button LIGHT and states */
-
-.button--light {
-  @apply border border-solid border-secondary-400 bg-secondary-100 text-secondary-950;
-
-  box-shadow: inset 1px 1px theme(backgroundColor.white);
-
-  &:disabled {
-    @apply disabled:bg-secondary-50 disabled:text-secondary-200 disabled:border-secondary-700;
-  }
-
-  & .button__icon {
-    color: theme(textColor.secondary.900);
-  }
-}
-
-.button--light-hover:hover {
-  @apply hover:bg-secondary-200;
-}
-
-.button--light-focus:focus {
-  @apply focus:bg-secondary-200;
-
-  & .button__label {
-    color: theme(textColor.secondary.900) !important;
-  }
-}
-
-.button--light-active:active {
-  @apply active:bg-secondary-200 border-secondary-600 active:text-secondary-900;
-
-  box-shadow: inset 2px 2px theme(backgroundColor.secondary.300);
-
-  & .button__label {
-    color: theme(textColor.secondary.900) !important;
-  }
-}
diff --git a/pkgs/clan-app/ui/src/components/v2/Button/Button.css b/pkgs/clan-app/ui/src/components/Button/Button.css
similarity index 100%
rename from pkgs/clan-app/ui/src/components/v2/Button/Button.css
rename to pkgs/clan-app/ui/src/components/Button/Button.css
diff --git a/pkgs/clan-app/ui/src/components/v2/Button/Button.mdx b/pkgs/clan-app/ui/src/components/Button/Button.mdx
similarity index 100%
rename from pkgs/clan-app/ui/src/components/v2/Button/Button.mdx
rename to pkgs/clan-app/ui/src/components/Button/Button.mdx
diff --git a/pkgs/clan-app/ui/src/components/v2/Button/Button.stories.tsx b/pkgs/clan-app/ui/src/components/Button/Button.stories.tsx
similarity index 100%
rename from pkgs/clan-app/ui/src/components/v2/Button/Button.stories.tsx
rename to pkgs/clan-app/ui/src/components/Button/Button.stories.tsx
diff --git a/pkgs/clan-app/ui/src/components/Button/Button.tsx b/pkgs/clan-app/ui/src/components/Button/Button.tsx
index df48a2527..5fbb81c38 100644
--- a/pkgs/clan-app/ui/src/components/Button/Button.tsx
+++ b/pkgs/clan-app/ui/src/components/Button/Button.tsx
@@ -1,96 +1,115 @@
-import { splitProps, type JSX } from "solid-js";
+import { splitProps, type JSX, createSignal } from "solid-js";
 import cx from "classnames";
-import { Typography } from "../Typography";
+import { Typography } from "../Typography/Typography";
+import { Button as KobalteButton } from "@kobalte/core/button";
 
-import "./Button-Base.css";
+import "./Button.css";
+import Icon, { IconVariant } from "@/src/components/Icon/Icon";
+import { Loader } from "@/src/components/Loader/Loader";
 
-type Variants = "dark" | "light" | "ghost";
-type Size = "default" | "s";
+export type Size = "default" | "s";
+export type Hierarchy = "primary" | "secondary";
 
-const variantColors: (
-  disabled: boolean | undefined,
-) => Record<Variants, string> = (disabled) => ({
-  dark: cx(
-    "button--dark",
-    !disabled && "button--dark-hover", // Hover state
-    !disabled && "button--dark-focus", // Focus state
-    !disabled && "button--dark-active", // Active state
-    // Disabled
-    "disabled:bg-secondary-200 disabled:text-secondary-700 disabled:border-secondary-300",
-  ),
-  light: cx(
-    "button--light",
+export type Action = () => Promise<void>;
 
-    !disabled && "button--light-hover", // Hover state
-    !disabled && "button--light-focus", // Focus state
-    !disabled && "button--light-active", // Active state
-  ),
-  ghost: cx(
-    !disabled && "button--ghost-hover", // Hover state
-    !disabled && "button--ghost-focus", // Focus state
-    !disabled && "button--ghost-active", // Active state
-  ),
-});
-
-const sizePaddings: Record<Size, string> = {
-  default: cx("button--default"),
-  s: cx("button button--small"), //cx("rounded-sm py-[0.375rem] px-3"),
-};
-
-const sizeFont: Record<Size, string> = {
-  default: cx("text-[0.8125rem]"),
-  s: cx("text-[0.75rem]"),
-};
-
-interface ButtonProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: Variants;
+export interface ButtonProps
+  extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
+  hierarchy?: Hierarchy;
   size?: Size;
+  ghost?: boolean;
   children?: JSX.Element;
-  startIcon?: JSX.Element;
-  endIcon?: JSX.Element;
+  icon?: IconVariant;
+  startIcon?: IconVariant;
+  endIcon?: IconVariant;
   class?: string;
+  onAction?: Action;
 }
+
+const iconSizes: Record<Size, string> = {
+  default: "1rem",
+  s: "0.8125rem",
+};
+
 export const Button = (props: ButtonProps) => {
   const [local, other] = splitProps(props, [
     "children",
-    "variant",
+    "hierarchy",
     "size",
+    "ghost",
+    "icon",
     "startIcon",
     "endIcon",
     "class",
+    "onAction",
   ]);
 
-  const buttonInvertion = (variant: Variants) => {
-    return !(!variant || variant === "ghost" || variant === "light");
+  const size = local.size || "default";
+  const hierarchy = local.hierarchy || "primary";
+
+  const [loading, setLoading] = createSignal(false);
+
+  const onClick = async () => {
+    if (!local.onAction) {
+      console.error("this should not be possible");
+      return;
+    }
+
+    setLoading(true);
+
+    try {
+      await local.onAction();
+    } catch (error) {
+      console.error("Error while executing action", error);
+    }
+
+    setLoading(false);
   };
 
+  const iconSize = iconSizes[local.size || "default"];
+
   return (
-    <button
+    <KobalteButton
       class={cx(
         local.class,
         "button", // default button class
-        variantColors(props.disabled)[local.variant || "dark"], // button appereance
-        sizePaddings[local.size || "default"], // button size
+        size,
+        hierarchy,
+        {
+          icon: local.icon,
+          loading: loading(),
+          ghost: local.ghost,
+        },
       )}
+      onClick={local.onAction ? onClick : undefined}
       {...other}
     >
+      <Loader hierarchy={hierarchy} />
+
       {local.startIcon && (
-        <span class="button__icon--start">{local.startIcon}</span>
+        <Icon icon={local.startIcon} class="icon-start" size={iconSize} />
       )}
-      {local.children && (
+
+      {local.icon && !local.children && (
+        <Icon icon={local.icon} class="icon" size={iconSize} />
+      )}
+
+      {local.children && !local.icon && (
         <Typography
-          class="button__label"
+          class="label"
           hierarchy="label"
+          family="mono"
           size={local.size || "default"}
-          color="inherit"
-          inverted={buttonInvertion(local.variant || "dark")}
-          weight="medium"
+          inverted={local.hierarchy === "primary"}
+          weight="bold"
           tag="span"
         >
           {local.children}
         </Typography>
       )}
-      {local.endIcon && <span class="button__icon--end">{local.endIcon}</span>}
-    </button>
+
+      {local.endIcon && (
+        <Icon icon={local.endIcon} class="icon-end" size={iconSize} />
+      )}
+    </KobalteButton>
   );
 };
diff --git a/pkgs/clan-app/ui/src/components/v2/Divider/Divider.css b/pkgs/clan-app/ui/src/components/Divider/Divider.css
similarity index 100%
rename from pkgs/clan-app/ui/src/components/v2/Divider/Divider.css
rename to pkgs/clan-app/ui/src/components/Divider/Divider.css
diff --git a/pkgs/clan-app/ui/src/components/v2/Divider/Divider.stories.tsx b/pkgs/clan-app/ui/src/components/Divider/Divider.stories.tsx
similarity index 90%
rename from pkgs/clan-app/ui/src/components/v2/Divider/Divider.stories.tsx
rename to pkgs/clan-app/ui/src/components/Divider/Divider.stories.tsx
index 24cac1525..5657727f6 100644
--- a/pkgs/clan-app/ui/src/components/v2/Divider/Divider.stories.tsx
+++ b/pkgs/clan-app/ui/src/components/Divider/Divider.stories.tsx
@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from "@kachurun/storybook-solid";
-import { Divider, DividerProps } from "@/src/components/v2/Divider/Divider";
+import { Divider, DividerProps } from "@/src/components/Divider/Divider";
 
 const meta: Meta<DividerProps> = {
   title: "Components/Divider",
diff --git a/pkgs/clan-app/ui/src/components/v2/Divider/Divider.tsx b/pkgs/clan-app/ui/src/components/Divider/Divider.tsx
similarity index 100%
rename from pkgs/clan-app/ui/src/components/v2/Divider/Divider.tsx
rename to pkgs/clan-app/ui/src/components/Divider/Divider.tsx
diff --git a/pkgs/clan-app/ui/src/components/v2/Form/Checkbox.css b/pkgs/clan-app/ui/src/components/Form/Checkbox.css
similarity index 100%
rename from pkgs/clan-app/ui/src/components/v2/Form/Checkbox.css
rename to pkgs/clan-app/ui/src/components/Form/Checkbox.css
diff --git a/pkgs/clan-app/ui/src/components/v2/Form/Checkbox.stories.tsx b/pkgs/clan-app/ui/src/components/Form/Checkbox.stories.tsx
similarity index 96%
rename from pkgs/clan-app/ui/src/components/v2/Form/Checkbox.stories.tsx
rename to pkgs/clan-app/ui/src/components/Form/Checkbox.stories.tsx
index ed53e4eba..dd7256a72 100644
--- a/pkgs/clan-app/ui/src/components/v2/Form/Checkbox.stories.tsx
+++ b/pkgs/clan-app/ui/src/components/Form/Checkbox.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryContext, StoryObj } from "@kachurun/storybook-solid";
 import cx from "classnames";
-import { Checkbox, CheckboxProps } from "@/src/components/v2/Form/Checkbox";
+import { Checkbox, CheckboxProps } from "@/src/components/Form/Checkbox";
 
 const Examples = (props: CheckboxProps) => (
   <div class="flex flex-col gap-8">
diff --git a/pkgs/clan-app/ui/src/components/v2/Form/Checkbox.tsx b/pkgs/clan-app/ui/src/components/Form/Checkbox.tsx
similarity index 97%
rename from pkgs/clan-app/ui/src/components/v2/Form/Checkbox.tsx
rename to pkgs/clan-app/ui/src/components/Form/Checkbox.tsx
index 16bf1d889..2f92f0eeb 100644
--- a/pkgs/clan-app/ui/src/components/v2/Form/Checkbox.tsx
+++ b/pkgs/clan-app/ui/src/components/Form/Checkbox.tsx
@@ -3,7 +3,7 @@ import {
   CheckboxInputProps as KCheckboxInputProps,
   CheckboxRootProps as KCheckboxRootProps,
 } from "@kobalte/core/checkbox";
-import Icon from "@/src/components/v2/Icon/Icon";
+import Icon from "@/src/components/Icon/Icon";
 
 import cx from "classnames";
 import { Label } from "./Label";
diff --git a/pkgs/clan-app/ui/src/components/v2/Form/Combobox.css b/pkgs/clan-app/ui/src/components/Form/Combobox.css
similarity index 100%
rename from pkgs/clan-app/ui/src/components/v2/Form/Combobox.css
rename to pkgs/clan-app/ui/src/components/Form/Combobox.css
diff --git a/pkgs/clan-app/ui/src/components/v2/Form/Combobox.stories.tsx b/pkgs/clan-app/ui/src/components/Form/Combobox.stories.tsx
similarity index 100%
rename from pkgs/clan-app/ui/src/components/v2/Form/Combobox.stories.tsx
rename to pkgs/clan-app/ui/src/components/Form/Combobox.stories.tsx
diff --git a/pkgs/clan-app/ui/src/components/v2/Form/Combobox.tsx b/pkgs/clan-app/ui/src/components/Form/Combobox.tsx
similarity index 96%
rename from pkgs/clan-app/ui/src/components/v2/Form/Combobox.tsx
rename to pkgs/clan-app/ui/src/components/Form/Combobox.tsx
index af3426756..ce0f08923 100644
--- a/pkgs/clan-app/ui/src/components/v2/Form/Combobox.tsx
+++ b/pkgs/clan-app/ui/src/components/Form/Combobox.tsx
@@ -1,4 +1,4 @@
-import Icon from "@/src/components/v2/Icon/Icon";
+import Icon from "@/src/components/Icon/Icon";
 import {
   Combobox as KCombobox,
   ComboboxRootOptions as KComboboxRootOptions,
@@ -11,9 +11,9 @@ import { Label } from "./Label";
 import cx from "classnames";
 import { FieldProps } from "./Field";
 import { Orienter } from "./Orienter";
-import { Typography } from "@/src/components/v2/Typography/Typography";
+import { Typography } from "@/src/components/Typography/Typography";
 import { Accessor, Component, For, Show, splitProps } from "solid-js";
-import { Tag } from "@/src/components/v2/Tag/Tag";
+import { Tag } from "@/src/components/Tag/Tag";
 
 export type ComboboxProps<Option, OptGroup = never> = FieldProps &
   KComboboxRootOptions<Option, OptGroup> & {
diff --git a/pkgs/clan-app/ui/src/components/v2/Form/Field.tsx b/pkgs/clan-app/ui/src/components/Form/Field.tsx
similarity index 100%
rename from pkgs/clan-app/ui/src/components/v2/Form/Field.tsx
rename to pkgs/clan-app/ui/src/components/Form/Field.tsx
diff --git a/pkgs/clan-app/ui/src/components/v2/Form/Fieldset.css b/pkgs/clan-app/ui/src/components/Form/Fieldset.css
similarity index 100%
rename from pkgs/clan-app/ui/src/components/v2/Form/Fieldset.css
rename to pkgs/clan-app/ui/src/components/Form/Fieldset.css
diff --git a/pkgs/clan-app/ui/src/components/v2/Form/Fieldset.stories.tsx b/pkgs/clan-app/ui/src/components/Form/Fieldset.stories.tsx
similarity index 91%
rename from pkgs/clan-app/ui/src/components/v2/Form/Fieldset.stories.tsx
rename to pkgs/clan-app/ui/src/components/Form/Fieldset.stories.tsx
index c157c041f..7a5b5df5c 100644
--- a/pkgs/clan-app/ui/src/components/v2/Form/Fieldset.stories.tsx
+++ b/pkgs/clan-app/ui/src/components/Form/Fieldset.stories.tsx
@@ -1,9 +1,9 @@
 import type { Meta, StoryContext, StoryObj } from "@kachurun/storybook-solid";
-import { Fieldset, FieldsetProps } from "@/src/components/v2/Form/Fieldset";
+import { Fieldset, FieldsetProps } from "@/src/components/Form/Fieldset";
 import cx from "classnames";
-import { TextInput } from "@/src/components/v2/Form/TextInput";
-import { TextArea } from "@/src/components/v2/Form/TextArea";
-import { Checkbox } from "@/src/components/v2/Form/Checkbox";
+import { TextInput } from "@/src/components/Form/TextInput";
+import { TextArea } from "@/src/components/Form/TextArea";
+import { Checkbox } from "@/src/components/Form/Checkbox";
 import { FieldProps } from "./Field";
 
 const FieldsetExamples = (props: FieldsetProps) => (
diff --git a/pkgs/clan-app/ui/src/components/v2/Form/Fieldset.tsx b/pkgs/clan-app/ui/src/components/Form/Fieldset.tsx
similarity index 95%
rename from pkgs/clan-app/ui/src/components/v2/Form/Fieldset.tsx
rename to pkgs/clan-app/ui/src/components/Form/Fieldset.tsx
index b1d599f7a..8df0440dc 100644
--- a/pkgs/clan-app/ui/src/components/v2/Form/Fieldset.tsx
+++ b/pkgs/clan-app/ui/src/components/Form/Fieldset.tsx
@@ -1,7 +1,7 @@
 import "./Fieldset.css";
 import { JSX, splitProps } from "solid-js";
 import cx from "classnames";
-import { Typography } from "@/src/components/v2/Typography/Typography";
+import { Typography } from "@/src/components/Typography/Typography";
 import { FieldProps } from "./Field";
 
 export type FieldsetFieldProps = Pick<
diff --git a/pkgs/clan-app/ui/src/components/v2/Form/Label.css b/pkgs/clan-app/ui/src/components/Form/Label.css
similarity index 100%
rename from pkgs/clan-app/ui/src/components/v2/Form/Label.css
rename to pkgs/clan-app/ui/src/components/Form/Label.css
diff --git a/pkgs/clan-app/ui/src/components/v2/Form/Label.tsx b/pkgs/clan-app/ui/src/components/Form/Label.tsx
similarity index 95%
rename from pkgs/clan-app/ui/src/components/v2/Form/Label.tsx
rename to pkgs/clan-app/ui/src/components/Form/Label.tsx
index e0ab91de7..0188df271 100644
--- a/pkgs/clan-app/ui/src/components/v2/Form/Label.tsx
+++ b/pkgs/clan-app/ui/src/components/Form/Label.tsx
@@ -1,7 +1,7 @@
 import { Show } from "solid-js";
-import { Typography } from "@/src/components/v2/Typography/Typography";
+import { Typography } from "@/src/components/Typography/Typography";
 import { Tooltip as KTooltip } from "@kobalte/core/tooltip";
-import Icon from "@/src/components/v2/Icon/Icon";
+import Icon from "@/src/components/Icon/Icon";
 import { TextField } from "@kobalte/core/text-field";
 import { Checkbox } from "@kobalte/core/checkbox";
 import { Combobox } from "@kobalte/core/combobox";
diff --git a/pkgs/clan-app/ui/src/components/v2/Form/Orienter.css b/pkgs/clan-app/ui/src/components/Form/Orienter.css
similarity index 100%
rename from pkgs/clan-app/ui/src/components/v2/Form/Orienter.css
rename to pkgs/clan-app/ui/src/components/Form/Orienter.css
diff --git a/pkgs/clan-app/ui/src/components/v2/Form/Orienter.tsx b/pkgs/clan-app/ui/src/components/Form/Orienter.tsx
similarity index 100%
rename from pkgs/clan-app/ui/src/components/v2/Form/Orienter.tsx
rename to pkgs/clan-app/ui/src/components/Form/Orienter.tsx
diff --git a/pkgs/clan-app/ui/src/components/v2/Form/TextArea.stories.tsx b/pkgs/clan-app/ui/src/components/Form/TextArea.stories.tsx
similarity index 100%
rename from pkgs/clan-app/ui/src/components/v2/Form/TextArea.stories.tsx
rename to pkgs/clan-app/ui/src/components/Form/TextArea.stories.tsx
diff --git a/pkgs/clan-app/ui/src/components/v2/Form/TextArea.tsx b/pkgs/clan-app/ui/src/components/Form/TextArea.tsx
similarity index 100%
rename from pkgs/clan-app/ui/src/components/v2/Form/TextArea.tsx
rename to pkgs/clan-app/ui/src/components/Form/TextArea.tsx
diff --git a/pkgs/clan-app/ui/src/components/v2/Form/TextInput.css b/pkgs/clan-app/ui/src/components/Form/TextInput.css
similarity index 100%
rename from pkgs/clan-app/ui/src/components/v2/Form/TextInput.css
rename to pkgs/clan-app/ui/src/components/Form/TextInput.css
diff --git a/pkgs/clan-app/ui/src/components/v2/Form/TextInput.stories.tsx b/pkgs/clan-app/ui/src/components/Form/TextInput.stories.tsx
similarity index 96%
rename from pkgs/clan-app/ui/src/components/v2/Form/TextInput.stories.tsx
rename to pkgs/clan-app/ui/src/components/Form/TextInput.stories.tsx
index f5866d55a..b51411b63 100644
--- a/pkgs/clan-app/ui/src/components/v2/Form/TextInput.stories.tsx
+++ b/pkgs/clan-app/ui/src/components/Form/TextInput.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryContext, StoryObj } from "@kachurun/storybook-solid";
 import cx from "classnames";
-import { TextInput, TextInputProps } from "@/src/components/v2/Form/TextInput";
+import { TextInput, TextInputProps } from "@/src/components/Form/TextInput";
 
 const Examples = (props: TextInputProps) => (
   <div class="flex flex-col gap-8">
diff --git a/pkgs/clan-app/ui/src/components/v2/Form/TextInput.tsx b/pkgs/clan-app/ui/src/components/Form/TextInput.tsx
similarity index 95%
rename from pkgs/clan-app/ui/src/components/v2/Form/TextInput.tsx
rename to pkgs/clan-app/ui/src/components/Form/TextInput.tsx
index fa403f3e7..4692e9bda 100644
--- a/pkgs/clan-app/ui/src/components/v2/Form/TextInput.tsx
+++ b/pkgs/clan-app/ui/src/components/Form/TextInput.tsx
@@ -3,7 +3,7 @@ import {
   TextFieldInputProps,
   TextFieldRootProps,
 } from "@kobalte/core/text-field";
-import Icon, { IconVariant } from "@/src/components/v2/Icon/Icon";
+import Icon, { IconVariant } from "@/src/components/Icon/Icon";
 
 import cx from "classnames";
 import { Label } from "./Label";
diff --git a/pkgs/clan-app/ui/src/components/Helpers/List.tsx b/pkgs/clan-app/ui/src/components/Helpers/List.tsx
deleted file mode 100644
index c652dd4a9..000000000
--- a/pkgs/clan-app/ui/src/components/Helpers/List.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { type JSX } from "solid-js";
-
-type sizes = "small" | "medium" | "large";
-
-const gapSizes: Record<sizes, string> = {
-  small: "gap-2",
-  medium: "gap-4",
-  large: "gap-6",
-};
-
-interface List {
-  children: JSX.Element;
-  gapSize: sizes;
-}
-
-export const List = (props: List) => {
-  const { children, gapSize } = props;
-
-  return <ul class={`flex flex-col ${gapSizes[gapSize]}`}> {children}</ul>;
-};
diff --git a/pkgs/clan-app/ui/src/components/Helpers/index.tsx b/pkgs/clan-app/ui/src/components/Helpers/index.tsx
deleted file mode 100644
index 637efc065..000000000
--- a/pkgs/clan-app/ui/src/components/Helpers/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { List } from "./List";
diff --git a/pkgs/clan-app/ui/src/components/v2/Icon/Icon.stories.tsx b/pkgs/clan-app/ui/src/components/Icon/Icon.stories.tsx
similarity index 100%
rename from pkgs/clan-app/ui/src/components/v2/Icon/Icon.stories.tsx
rename to pkgs/clan-app/ui/src/components/Icon/Icon.stories.tsx
diff --git a/pkgs/clan-app/ui/src/components/v2/Icon/Icon.tsx b/pkgs/clan-app/ui/src/components/Icon/Icon.tsx
similarity index 100%
rename from pkgs/clan-app/ui/src/components/v2/Icon/Icon.tsx
rename to pkgs/clan-app/ui/src/components/Icon/Icon.tsx
diff --git a/pkgs/clan-app/ui/src/components/v2/Loader/Loader.css b/pkgs/clan-app/ui/src/components/Loader/Loader.css
similarity index 100%
rename from pkgs/clan-app/ui/src/components/v2/Loader/Loader.css
rename to pkgs/clan-app/ui/src/components/Loader/Loader.css
diff --git a/pkgs/clan-app/ui/src/components/v2/Loader/Loader.stories.tsx b/pkgs/clan-app/ui/src/components/Loader/Loader.stories.tsx
similarity index 83%
rename from pkgs/clan-app/ui/src/components/v2/Loader/Loader.stories.tsx
rename to pkgs/clan-app/ui/src/components/Loader/Loader.stories.tsx
index 10f9218f1..92256e43c 100644
--- a/pkgs/clan-app/ui/src/components/v2/Loader/Loader.stories.tsx
+++ b/pkgs/clan-app/ui/src/components/Loader/Loader.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@kachurun/storybook-solid";
-import { Loader, LoaderProps } from "@/src/components/v2/Loader/Loader";
+import { Loader, LoaderProps } from "@/src/components/Loader/Loader";
 
 const meta: Meta<LoaderProps> = {
   title: "Components/Loader",
diff --git a/pkgs/clan-app/ui/src/components/v2/Loader/Loader.tsx b/pkgs/clan-app/ui/src/components/Loader/Loader.tsx
similarity index 100%
rename from pkgs/clan-app/ui/src/components/v2/Loader/Loader.tsx
rename to pkgs/clan-app/ui/src/components/Loader/Loader.tsx
diff --git a/pkgs/clan-app/ui/src/components/v2/MachineStatus/MachineStatus.css b/pkgs/clan-app/ui/src/components/MachineStatus/MachineStatus.css
similarity index 100%
rename from pkgs/clan-app/ui/src/components/v2/MachineStatus/MachineStatus.css
rename to pkgs/clan-app/ui/src/components/MachineStatus/MachineStatus.css
diff --git a/pkgs/clan-app/ui/src/components/v2/MachineStatus/MachineStatus.stories.tsx b/pkgs/clan-app/ui/src/components/MachineStatus/MachineStatus.stories.tsx
similarity index 95%
rename from pkgs/clan-app/ui/src/components/v2/MachineStatus/MachineStatus.stories.tsx
rename to pkgs/clan-app/ui/src/components/MachineStatus/MachineStatus.stories.tsx
index d9adc857d..298533100 100644
--- a/pkgs/clan-app/ui/src/components/v2/MachineStatus/MachineStatus.stories.tsx
+++ b/pkgs/clan-app/ui/src/components/MachineStatus/MachineStatus.stories.tsx
@@ -1,7 +1,7 @@
 import {
   MachineStatus,
   MachineStatusProps,
-} from "@/src/components/v2/MachineStatus/MachineStatus";
+} from "@/src/components/MachineStatus/MachineStatus";
 import { Meta, StoryObj } from "@kachurun/storybook-solid";
 
 const meta: Meta<MachineStatusProps> = {
diff --git a/pkgs/clan-app/ui/src/components/v2/MachineStatus/MachineStatus.tsx b/pkgs/clan-app/ui/src/components/MachineStatus/MachineStatus.tsx
similarity index 93%
rename from pkgs/clan-app/ui/src/components/v2/MachineStatus/MachineStatus.tsx
rename to pkgs/clan-app/ui/src/components/MachineStatus/MachineStatus.tsx
index 95ffa2e2d..82e57b88e 100644
--- a/pkgs/clan-app/ui/src/components/v2/MachineStatus/MachineStatus.tsx
+++ b/pkgs/clan-app/ui/src/components/MachineStatus/MachineStatus.tsx
@@ -4,7 +4,7 @@ import { Badge } from "@kobalte/core/badge";
 import cx from "classnames";
 import { Show } from "solid-js";
 import Icon from "../Icon/Icon";
-import { Typography } from "@/src/components/v2/Typography/Typography";
+import { Typography } from "@/src/components/Typography/Typography";
 
 export type MachineStatus =
   | "Online"
diff --git a/pkgs/clan-app/ui/src/components/v2/Modal/Modal.css b/pkgs/clan-app/ui/src/components/Modal/Modal.css
similarity index 100%
rename from pkgs/clan-app/ui/src/components/v2/Modal/Modal.css
rename to pkgs/clan-app/ui/src/components/Modal/Modal.css
diff --git a/pkgs/clan-app/ui/src/components/v2/Modal/Modal.stories.tsx b/pkgs/clan-app/ui/src/components/Modal/Modal.stories.tsx
similarity index 83%
rename from pkgs/clan-app/ui/src/components/v2/Modal/Modal.stories.tsx
rename to pkgs/clan-app/ui/src/components/Modal/Modal.stories.tsx
index 56e7bf764..1e755bc5f 100644
--- a/pkgs/clan-app/ui/src/components/v2/Modal/Modal.stories.tsx
+++ b/pkgs/clan-app/ui/src/components/Modal/Modal.stories.tsx
@@ -1,15 +1,15 @@
-import { TagProps } from "@/src/components/v2/Tag/Tag";
+import { TagProps } from "@/src/components/Tag/Tag";
 import { Meta, StoryObj } from "@kachurun/storybook-solid";
 import { fn } from "storybook/test";
 import {
   Modal,
   ModalContext,
   ModalProps,
-} from "@/src/components/v2/Modal/Modal";
-import { Fieldset } from "@/src/components/v2/Form/Fieldset";
-import { TextInput } from "@/src/components/v2/Form/TextInput";
-import { TextArea } from "@/src/components/v2/Form/TextArea";
-import { Checkbox } from "@/src/components/v2/Form/Checkbox";
+} from "@/src/components/Modal/Modal";
+import { Fieldset } from "@/src/components/Form/Fieldset";
+import { TextInput } from "@/src/components/Form/TextInput";
+import { TextArea } from "@/src/components/Form/TextArea";
+import { Checkbox } from "@/src/components/Form/Checkbox";
 import { Button } from "../Button/Button";
 
 const meta: Meta<ModalProps> = {
diff --git a/pkgs/clan-app/ui/src/components/v2/Modal/Modal.tsx b/pkgs/clan-app/ui/src/components/Modal/Modal.tsx
similarity index 100%
rename from pkgs/clan-app/ui/src/components/v2/Modal/Modal.tsx
rename to pkgs/clan-app/ui/src/components/Modal/Modal.tsx
diff --git a/pkgs/clan-app/ui/src/components/Sidebar/SidebarFlyout/index.tsx b/pkgs/clan-app/ui/src/components/Sidebar/SidebarFlyout/index.tsx
deleted file mode 100644
index 0f1a67a80..000000000
--- a/pkgs/clan-app/ui/src/components/Sidebar/SidebarFlyout/index.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { List } from "@/src/components/Helpers";
-import { SidebarListItem } from "../SidebarListItem";
-
-export const SidebarFlyout = () => {
-  return (
-    <div class="sidebar__flyout">
-      <div class="sidebar__flyout__inner">
-        <List gapSize="small">
-          <SidebarListItem href="/clans" title="Settings" />
-        </List>
-      </div>
-    </div>
-  );
-};
diff --git a/pkgs/clan-app/ui/src/components/Sidebar/SidebarHeader.tsx b/pkgs/clan-app/ui/src/components/Sidebar/SidebarHeader.tsx
deleted file mode 100644
index d055a31c5..000000000
--- a/pkgs/clan-app/ui/src/components/Sidebar/SidebarHeader.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import { createSignal, Show } from "solid-js";
-import { Typography } from "@/src/components/Typography";
-import { SidebarFlyout } from "./SidebarFlyout";
-import "./css/sidebar.css";
-import Icon from "../icon";
-
-interface SidebarProps {
-  clanName: string;
-  showFlyout?: () => boolean;
-}
-
-const ClanProfile = (props: SidebarProps) => {
-  return (
-    <div
-      class={`sidebar__profile ${props.showFlyout?.() ? "sidebar__profile--flyout" : ""}`}
-    >
-      <Typography
-        class="sidebar__profile__character"
-        tag="span"
-        hierarchy="title"
-        size="m"
-        weight="bold"
-        color="primary"
-        inverted={true}
-      >
-        {props.clanName.slice(0, 1).toUpperCase()}
-      </Typography>
-    </div>
-  );
-};
-
-const ClanTitle = (props: SidebarProps) => {
-  return (
-    <Typography
-      tag="h3"
-      hierarchy="body"
-      size="default"
-      weight="medium"
-      color="primary"
-      inverted={true}
-    >
-      {props.clanName}
-    </Typography>
-  );
-};
-
-export const SidebarHeader = (props: SidebarProps) => {
-  const [showFlyout, toggleFlyout] = createSignal(false);
-
-  function handleClick() {
-    toggleFlyout(!showFlyout());
-  }
-
-  return (
-    <header class="sidebar__header">
-      <div onClick={handleClick} class="sidebar__header__inner">
-        {/* <ClanProfile clanName={props.clanName} showFlyout={showFlyout} /> */}
-        <div class="w-full pl-1 text-white">
-          <ClanTitle clanName={props.clanName} />
-        </div>
-        <Show
-          when={showFlyout}
-          fallback={<Icon size={12} class="text-white" icon="CaretDown" />}
-        >
-          <Icon size={12} class="text-white" icon="CaretDown" />
-        </Show>
-      </div>
-      {showFlyout() && <SidebarFlyout />}
-    </header>
-  );
-};
diff --git a/pkgs/clan-app/ui/src/components/Sidebar/SidebarListItem.tsx b/pkgs/clan-app/ui/src/components/Sidebar/SidebarListItem.tsx
deleted file mode 100644
index d355af032..000000000
--- a/pkgs/clan-app/ui/src/components/Sidebar/SidebarListItem.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { A } from "@solidjs/router";
-import { Typography } from "@/src/components/Typography";
-import "./css/sidebar.css";
-
-interface SidebarListItem {
-  title: string;
-  href: string;
-}
-
-export const SidebarListItem = (props: SidebarListItem) => {
-  const { title, href } = props;
-
-  return (
-    <li class="">
-      <A class="sidebar__list__link" href={href}>
-        <Typography
-          class="sidebar__list__content"
-          tag="span"
-          hierarchy="body"
-          size="xs"
-          weight="normal"
-          color="primary"
-          inverted={true}
-        >
-          {title}
-        </Typography>
-      </A>
-    </li>
-  );
-};
diff --git a/pkgs/clan-app/ui/src/components/v2/Sidebar/SidebarNav.css b/pkgs/clan-app/ui/src/components/Sidebar/SidebarNav.css
similarity index 100%
rename from pkgs/clan-app/ui/src/components/v2/Sidebar/SidebarNav.css
rename to pkgs/clan-app/ui/src/components/Sidebar/SidebarNav.css
diff --git a/pkgs/clan-app/ui/src/components/v2/Sidebar/SidebarNav.stories.tsx b/pkgs/clan-app/ui/src/components/Sidebar/SidebarNav.stories.tsx
similarity index 98%
rename from pkgs/clan-app/ui/src/components/v2/Sidebar/SidebarNav.stories.tsx
rename to pkgs/clan-app/ui/src/components/Sidebar/SidebarNav.stories.tsx
index 2f775745f..e67d966c8 100644
--- a/pkgs/clan-app/ui/src/components/v2/Sidebar/SidebarNav.stories.tsx
+++ b/pkgs/clan-app/ui/src/components/Sidebar/SidebarNav.stories.tsx
@@ -8,7 +8,7 @@ import {
 import {
   SidebarNav,
   SidebarNavProps,
-} from "@/src/components/v2/Sidebar/SidebarNav";
+} from "@/src/components/Sidebar/SidebarNav";
 import { Suspense } from "solid-js";
 import { StoryContext } from "@kachurun/storybook-solid-vite";
 
diff --git a/pkgs/clan-app/ui/src/components/v2/Sidebar/SidebarNav.tsx b/pkgs/clan-app/ui/src/components/Sidebar/SidebarNav.tsx
similarity index 76%
rename from pkgs/clan-app/ui/src/components/v2/Sidebar/SidebarNav.tsx
rename to pkgs/clan-app/ui/src/components/Sidebar/SidebarNav.tsx
index f5d4ab1dc..78281dab6 100644
--- a/pkgs/clan-app/ui/src/components/v2/Sidebar/SidebarNav.tsx
+++ b/pkgs/clan-app/ui/src/components/Sidebar/SidebarNav.tsx
@@ -1,7 +1,7 @@
 import "./SidebarNav.css";
-import { SidebarNavHeader } from "@/src/components/v2/Sidebar/SidebarNavHeader";
-import { SidebarNavBody } from "@/src/components/v2/Sidebar/SidebarNavBody";
-import { MachineStatus } from "@/src/components/v2/MachineStatus/MachineStatus";
+import { SidebarNavHeader } from "@/src/components/Sidebar/SidebarNavHeader";
+import { SidebarNavBody } from "@/src/components/Sidebar/SidebarNavBody";
+import { MachineStatus } from "@/src/components/MachineStatus/MachineStatus";
 
 export interface LinkProps {
   path: string;
diff --git a/pkgs/clan-app/ui/src/components/v2/Sidebar/SidebarNavBody.css b/pkgs/clan-app/ui/src/components/Sidebar/SidebarNavBody.css
similarity index 100%
rename from pkgs/clan-app/ui/src/components/v2/Sidebar/SidebarNavBody.css
rename to pkgs/clan-app/ui/src/components/Sidebar/SidebarNavBody.css
diff --git a/pkgs/clan-app/ui/src/components/v2/Sidebar/SidebarNavBody.tsx b/pkgs/clan-app/ui/src/components/Sidebar/SidebarNavBody.tsx
similarity index 95%
rename from pkgs/clan-app/ui/src/components/v2/Sidebar/SidebarNavBody.tsx
rename to pkgs/clan-app/ui/src/components/Sidebar/SidebarNavBody.tsx
index 73d7e8503..debbed175 100644
--- a/pkgs/clan-app/ui/src/components/v2/Sidebar/SidebarNavBody.tsx
+++ b/pkgs/clan-app/ui/src/components/Sidebar/SidebarNavBody.tsx
@@ -2,13 +2,13 @@ import "./SidebarNavBody.css";
 import { A } from "@solidjs/router";
 import { Accordion } from "@kobalte/core/accordion";
 import Icon from "../Icon/Icon";
-import { Typography } from "@/src/components/v2/Typography/Typography";
+import { Typography } from "@/src/components/Typography/Typography";
 import {
   MachineProps,
   SidebarNavProps,
-} from "@/src/components/v2/Sidebar/SidebarNav";
+} from "@/src/components/Sidebar/SidebarNav";
 import { For } from "solid-js";
-import { MachineStatus } from "@/src/components/v2/MachineStatus/MachineStatus";
+import { MachineStatus } from "@/src/components/MachineStatus/MachineStatus";
 
 const MachineRoute = (props: MachineProps) => (
   <div class="flex w-full flex-col gap-2">
diff --git a/pkgs/clan-app/ui/src/components/v2/Sidebar/SidebarNavHeader.css b/pkgs/clan-app/ui/src/components/Sidebar/SidebarNavHeader.css
similarity index 100%
rename from pkgs/clan-app/ui/src/components/v2/Sidebar/SidebarNavHeader.css
rename to pkgs/clan-app/ui/src/components/Sidebar/SidebarNavHeader.css
diff --git a/pkgs/clan-app/ui/src/components/v2/Sidebar/SidebarNavHeader.tsx b/pkgs/clan-app/ui/src/components/Sidebar/SidebarNavHeader.tsx
similarity index 96%
rename from pkgs/clan-app/ui/src/components/v2/Sidebar/SidebarNavHeader.tsx
rename to pkgs/clan-app/ui/src/components/Sidebar/SidebarNavHeader.tsx
index 278a67195..4c3ba97cd 100644
--- a/pkgs/clan-app/ui/src/components/v2/Sidebar/SidebarNavHeader.tsx
+++ b/pkgs/clan-app/ui/src/components/Sidebar/SidebarNavHeader.tsx
@@ -1,5 +1,5 @@
 import "./SidebarNavHeader.css";
-import Icon from "@/src/components/v2/Icon/Icon";
+import Icon from "@/src/components/Icon/Icon";
 import { DropdownMenu } from "@kobalte/core/dropdown-menu";
 import { useNavigate } from "@solidjs/router";
 import { Typography } from "../Typography/Typography";
@@ -7,7 +7,7 @@ import { createSignal, For } from "solid-js";
 import {
   ClanLinkProps,
   ClanProps,
-} from "@/src/components/v2/Sidebar/SidebarNav";
+} from "@/src/components/Sidebar/SidebarNav";
 
 export interface SidebarHeaderProps {
   clanDetail: ClanProps;
diff --git a/pkgs/clan-app/ui/src/components/v2/Sidebar/SidebarPane.css b/pkgs/clan-app/ui/src/components/Sidebar/SidebarPane.css
similarity index 100%
rename from pkgs/clan-app/ui/src/components/v2/Sidebar/SidebarPane.css
rename to pkgs/clan-app/ui/src/components/Sidebar/SidebarPane.css
diff --git a/pkgs/clan-app/ui/src/components/v2/Sidebar/SidebarPane.stories.tsx b/pkgs/clan-app/ui/src/components/Sidebar/SidebarPane.stories.tsx
similarity index 90%
rename from pkgs/clan-app/ui/src/components/v2/Sidebar/SidebarPane.stories.tsx
rename to pkgs/clan-app/ui/src/components/Sidebar/SidebarPane.stories.tsx
index 2ef9cc024..ec3ade505 100644
--- a/pkgs/clan-app/ui/src/components/v2/Sidebar/SidebarPane.stories.tsx
+++ b/pkgs/clan-app/ui/src/components/Sidebar/SidebarPane.stories.tsx
@@ -2,12 +2,12 @@ import type { Meta, StoryObj } from "@kachurun/storybook-solid";
 import {
   SidebarPane,
   SidebarPaneProps,
-} from "@/src/components/v2/Sidebar/SidebarPane";
+} from "@/src/components/Sidebar/SidebarPane";
 import { SidebarSection } from "./SidebarSection";
-import { Divider } from "@/src/components/v2/Divider/Divider";
-import { TextInput } from "@/src/components/v2/Form/TextInput";
-import { TextArea } from "@/src/components/v2/Form/TextArea";
-import { Checkbox } from "@/src/components/v2/Form/Checkbox";
+import { Divider } from "@/src/components/Divider/Divider";
+import { TextInput } from "@/src/components/Form/TextInput";
+import { TextArea } from "@/src/components/Form/TextArea";
+import { Checkbox } from "@/src/components/Form/Checkbox";
 import { Combobox } from "../Form/Combobox";
 
 const meta: Meta<SidebarPaneProps> = {
diff --git a/pkgs/clan-app/ui/src/components/v2/Sidebar/SidebarPane.tsx b/pkgs/clan-app/ui/src/components/Sidebar/SidebarPane.tsx
similarity index 90%
rename from pkgs/clan-app/ui/src/components/v2/Sidebar/SidebarPane.tsx
rename to pkgs/clan-app/ui/src/components/Sidebar/SidebarPane.tsx
index 44ecb8db9..53bba06bb 100644
--- a/pkgs/clan-app/ui/src/components/v2/Sidebar/SidebarPane.tsx
+++ b/pkgs/clan-app/ui/src/components/Sidebar/SidebarPane.tsx
@@ -1,6 +1,6 @@
 import { JSX } from "solid-js";
 import "./SidebarPane.css";
-import { Typography } from "@/src/components/v2/Typography/Typography";
+import { Typography } from "@/src/components/Typography/Typography";
 import Icon from "../Icon/Icon";
 import { Button as KButton } from "@kobalte/core/button";
 
diff --git a/pkgs/clan-app/ui/src/components/v2/Sidebar/SidebarSection.css b/pkgs/clan-app/ui/src/components/Sidebar/SidebarSection.css
similarity index 100%
rename from pkgs/clan-app/ui/src/components/v2/Sidebar/SidebarSection.css
rename to pkgs/clan-app/ui/src/components/Sidebar/SidebarSection.css
diff --git a/pkgs/clan-app/ui/src/components/v2/Sidebar/SidebarSection.tsx b/pkgs/clan-app/ui/src/components/Sidebar/SidebarSection.tsx
similarity index 95%
rename from pkgs/clan-app/ui/src/components/v2/Sidebar/SidebarSection.tsx
rename to pkgs/clan-app/ui/src/components/Sidebar/SidebarSection.tsx
index a8b4bb4a5..29d26a330 100644
--- a/pkgs/clan-app/ui/src/components/v2/Sidebar/SidebarSection.tsx
+++ b/pkgs/clan-app/ui/src/components/Sidebar/SidebarSection.tsx
@@ -1,6 +1,6 @@
 import { createSignal, JSX } from "solid-js";
 import "./SidebarSection.css";
-import { Typography } from "@/src/components/v2/Typography/Typography";
+import { Typography } from "@/src/components/Typography/Typography";
 import { Button as KButton } from "@kobalte/core/button";
 import Icon from "../Icon/Icon";
 
diff --git a/pkgs/clan-app/ui/src/components/Sidebar/css/sidebar-flyout.css b/pkgs/clan-app/ui/src/components/Sidebar/css/sidebar-flyout.css
deleted file mode 100644
index 56401367e..000000000
--- a/pkgs/clan-app/ui/src/components/Sidebar/css/sidebar-flyout.css
+++ /dev/null
@@ -1,21 +0,0 @@
-.sidebar__flyout {
-  top: 0;
-  position: absolute;
-  z-index: theme(zIndex.30);
-
-  padding: theme(padding[1]);
-  width: 100%;
-  height: auto;
-}
-
-.sidebar__flyout__inner {
-  position: relative;
-  width: inherit;
-  height: inherit;
-
-  padding: theme(padding.12) theme(padding.3) theme(padding.3);
-  background-color: var(--clr-bg-inv-4);
-  /* / 0.95); */
-  border: 1px solid var(--clr-border-inv-4);
-  border-radius: theme(borderRadius.lg);
-}
diff --git a/pkgs/clan-app/ui/src/components/Sidebar/css/sidebar-header.css b/pkgs/clan-app/ui/src/components/Sidebar/css/sidebar-header.css
deleted file mode 100644
index 80d6d5bf9..000000000
--- a/pkgs/clan-app/ui/src/components/Sidebar/css/sidebar-header.css
+++ /dev/null
@@ -1,30 +0,0 @@
-.sidebar__header {
-  position: relative;
-  padding: 1px 1px 0;
-  cursor: pointer;
-
-  &:after {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-
-    width: 100%;
-    height: 100%;
-    background: var(--clr-bg-inv-3);
-
-    border-bottom: 1px solid var(--clr-border-inv-3);
-    border-top-left-radius: theme(borderRadius.xl);
-    border-top-right-radius: theme(borderRadius.xl);
-  }
-}
-
-.sidebar__header__inner {
-  position: relative;
-  z-index: theme(zIndex.40);
-  display: flex;
-  align-items: center;
-  gap: 0 theme(gap.3);
-
-  padding: theme(padding.3) theme(padding.3);
-}
diff --git a/pkgs/clan-app/ui/src/components/Sidebar/css/sidebar-list-item.css b/pkgs/clan-app/ui/src/components/Sidebar/css/sidebar-list-item.css
deleted file mode 100644
index 9c33b0be8..000000000
--- a/pkgs/clan-app/ui/src/components/Sidebar/css/sidebar-list-item.css
+++ /dev/null
@@ -1,52 +0,0 @@
-.sidebar__list__link {
-  position: relative;
-  cursor: theme(cursor.pointer);
-
-  &:after {
-    content: "";
-    position: absolute;
-    z-index: theme(zIndex.10);
-    top: 0;
-    left: 0;
-
-    width: 100%;
-    height: 100%;
-    border-radius: theme(borderRadius.md);
-    transform: scale(0.98);
-    transition: transform 0.24s ease-in-out;
-  }
-
-  &:hover:after {
-    background: var(--clr-bg-inv-acc-2);
-    transform: scale(theme(scale.100));
-    transition: transform 0.32s ease-in-out;
-  }
-
-  &:active {
-    transform: scale(0.99);
-    transition: transform 0.12s ease-in-out;
-  }
-
-  &:active:after {
-    background: var(--clr-bg-inv-acc-3);
-    transform: scale(theme(scale.100));
-  }
-}
-
-.sidebar__list__link {
-  position: relative;
-  z-index: 20;
-  display: block;
-  padding: theme(padding.2) theme(padding.3);
-}
-
-.sidebar__list__link.active {
-  &:after {
-    background: var(--clr-bg-inv-acc-3);
-  }
-}
-
-.sidebar__list__content {
-  position: relative;
-  z-index: 20;
-}
diff --git a/pkgs/clan-app/ui/src/components/Sidebar/css/sidebar-profile.css b/pkgs/clan-app/ui/src/components/Sidebar/css/sidebar-profile.css
deleted file mode 100644
index 2ddfc79b3..000000000
--- a/pkgs/clan-app/ui/src/components/Sidebar/css/sidebar-profile.css
+++ /dev/null
@@ -1,19 +0,0 @@
-.sidebar__profile {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  width: theme(width.8);
-  height: theme(height.8);
-
-  background: var(--clr-bg-inv-4);
-  border-radius: 50%;
-}
-
-.sidebar__profile--flyout {
-  background: var(--clr-bg-def-2);
-}
-
-.sidebar__profile--flyout > .sidebar__profile__character {
-  color: var(--clr-fg-def-1) !important;
-}
diff --git a/pkgs/clan-app/ui/src/components/Sidebar/css/sidebar.css b/pkgs/clan-app/ui/src/components/Sidebar/css/sidebar.css
deleted file mode 100644
index 2b4f7a498..000000000
--- a/pkgs/clan-app/ui/src/components/Sidebar/css/sidebar.css
+++ /dev/null
@@ -1,32 +0,0 @@
-/* Sidebar Elements */
-
-@import "./sidebar-header";
-@import "./sidebar-flyout";
-@import "./sidebar-list-item";
-@import "./sidebar-profile";
-
-/* Sidebar Structure */
-
-.sidebar {
-  @apply bg-inv-2 h-full border border-solid border-inv-2 min-w-72 rounded-xl;
-  display: flex;
-  flex-direction: column;
-}
-
-.sidebar__body {
-  display: flex;
-  flex-direction: column;
-  gap: theme(padding.2);
-  padding: theme(padding.4) theme(padding.2);
-}
-
-.sidebar__section {
-  @apply bg-primary-800/90;
-
-  padding: theme(padding.2);
-  border-radius: theme(borderRadius.md);
-
-  ::marker {
-    content: "";
-  }
-}
diff --git a/pkgs/clan-app/ui/src/components/Sidebar/index.tsx b/pkgs/clan-app/ui/src/components/Sidebar/index.tsx
deleted file mode 100644
index 8d062cf73..000000000
--- a/pkgs/clan-app/ui/src/components/Sidebar/index.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import { For, type JSX, Show } from "solid-js";
-import { RouteSectionProps } from "@solidjs/router";
-import { AppRoute, routes } from "@/src";
-import { SidebarHeader } from "./SidebarHeader";
-import { SidebarListItem } from "./SidebarListItem";
-import { Typography } from "../Typography";
-import "./css/sidebar.css";
-import Icon, { IconVariant } from "../icon";
-import { clanMetaQuery } from "@/src/queries/clan-meta";
-
-const SidebarSection = (props: {
-  title: string;
-  icon: IconVariant;
-  children: JSX.Element;
-}) => {
-  const { title, children } = props;
-
-  return (
-    <details class="sidebar__section accordeon" open>
-      <summary style="display: contents;">
-        <div class="accordeon__header">
-          <Typography
-            class="inline-flex w-full gap-2 uppercase !tracking-wider"
-            tag="p"
-            hierarchy="body"
-            size="xxs"
-            weight="normal"
-            color="tertiary"
-            inverted={true}
-          >
-            <Icon class="opacity-90" icon={props.icon} size={13} />
-            {title}
-            <Icon icon="CaretDown" class="ml-auto" size={10} />
-          </Typography>
-        </div>
-      </summary>
-      <div class="accordeon__body">{children}</div>
-    </details>
-  );
-};
-
-export const Sidebar = (props: RouteSectionProps) => {
-  const query = clanMetaQuery();
-
-  return (
-    <div class="sidebar">
-      <Show
-        when={query.data}
-        fallback={<SidebarHeader clanName={"Untitled"} />}
-      >
-        {(meta) => <SidebarHeader clanName={meta().name} />}
-      </Show>
-      <div class="sidebar__body max-h-[calc(100vh-4rem)] overflow-scroll">
-        <For each={routes.filter((r) => !r.hidden)}>
-          {(route: AppRoute) => (
-            <Show
-              when={route.children}
-              fallback={
-                <SidebarListItem href={route.path} title={route.label} />
-              }
-            >
-              {(children) => (
-                <SidebarSection
-                  title={route.label}
-                  icon={route.icon || "Paperclip"}
-                >
-                  <ul class="flex flex-col gap-y-0.5">
-                    <For each={children().filter((r) => !r.hidden)}>
-                      {(child) => (
-                        <SidebarListItem
-                          href={`${route.path}${child.path}`}
-                          title={child.label}
-                        />
-                      )}
-                    </For>
-                  </ul>
-                </SidebarSection>
-              )}
-            </Show>
-          )}
-        </For>
-      </div>
-    </div>
-  );
-};
diff --git a/pkgs/clan-app/ui/src/components/v2/Tag/Tag.css b/pkgs/clan-app/ui/src/components/Tag/Tag.css
similarity index 100%
rename from pkgs/clan-app/ui/src/components/v2/Tag/Tag.css
rename to pkgs/clan-app/ui/src/components/Tag/Tag.css
diff --git a/pkgs/clan-app/ui/src/components/v2/Tag/Tag.stories.tsx b/pkgs/clan-app/ui/src/components/Tag/Tag.stories.tsx
similarity index 93%
rename from pkgs/clan-app/ui/src/components/v2/Tag/Tag.stories.tsx
rename to pkgs/clan-app/ui/src/components/Tag/Tag.stories.tsx
index 29665e402..328bf1618 100644
--- a/pkgs/clan-app/ui/src/components/v2/Tag/Tag.stories.tsx
+++ b/pkgs/clan-app/ui/src/components/Tag/Tag.stories.tsx
@@ -1,4 +1,4 @@
-import { Tag, TagProps } from "@/src/components/v2/Tag/Tag";
+import { Tag, TagProps } from "@/src/components/Tag/Tag";
 import { Meta, type StoryContext, StoryObj } from "@kachurun/storybook-solid";
 import { expect, fn } from "storybook/test";
 
diff --git a/pkgs/clan-app/ui/src/components/v2/Tag/Tag.tsx b/pkgs/clan-app/ui/src/components/Tag/Tag.tsx
similarity index 94%
rename from pkgs/clan-app/ui/src/components/v2/Tag/Tag.tsx
rename to pkgs/clan-app/ui/src/components/Tag/Tag.tsx
index fe8657480..c82ba8e08 100644
--- a/pkgs/clan-app/ui/src/components/v2/Tag/Tag.tsx
+++ b/pkgs/clan-app/ui/src/components/Tag/Tag.tsx
@@ -1,7 +1,7 @@
 import "./Tag.css";
 
 import cx from "classnames";
-import { Typography } from "@/src/components/v2/Typography/Typography";
+import { Typography } from "@/src/components/Typography/Typography";
 import { createSignal, Show } from "solid-js";
 import Icon, { IconVariant } from "../Icon/Icon";
 
diff --git a/pkgs/clan-app/ui/src/components/v2/TagGroup/TagGroup.css b/pkgs/clan-app/ui/src/components/TagGroup/TagGroup.css
similarity index 100%
rename from pkgs/clan-app/ui/src/components/v2/TagGroup/TagGroup.css
rename to pkgs/clan-app/ui/src/components/TagGroup/TagGroup.css
diff --git a/pkgs/clan-app/ui/src/components/v2/TagGroup/TagGroup.stories.tsx b/pkgs/clan-app/ui/src/components/TagGroup/TagGroup.stories.tsx
similarity index 89%
rename from pkgs/clan-app/ui/src/components/v2/TagGroup/TagGroup.stories.tsx
rename to pkgs/clan-app/ui/src/components/TagGroup/TagGroup.stories.tsx
index c0d660609..3f4a4c750 100644
--- a/pkgs/clan-app/ui/src/components/v2/TagGroup/TagGroup.stories.tsx
+++ b/pkgs/clan-app/ui/src/components/TagGroup/TagGroup.stories.tsx
@@ -1,4 +1,4 @@
-import { TagGroup, TagGroupProps } from "@/src/components/v2/TagGroup/TagGroup";
+import { TagGroup, TagGroupProps } from "@/src/components/TagGroup/TagGroup";
 import { Meta, StoryObj } from "@kachurun/storybook-solid";
 
 const meta: Meta<TagGroupProps> = {
diff --git a/pkgs/clan-app/ui/src/components/v2/TagGroup/TagGroup.tsx b/pkgs/clan-app/ui/src/components/TagGroup/TagGroup.tsx
similarity index 90%
rename from pkgs/clan-app/ui/src/components/v2/TagGroup/TagGroup.tsx
rename to pkgs/clan-app/ui/src/components/TagGroup/TagGroup.tsx
index 1f8f9ae75..455665cc6 100644
--- a/pkgs/clan-app/ui/src/components/v2/TagGroup/TagGroup.tsx
+++ b/pkgs/clan-app/ui/src/components/TagGroup/TagGroup.tsx
@@ -1,7 +1,7 @@
 import "./TagGroup.css";
 import cx from "classnames";
 import { For } from "solid-js";
-import { Tag } from "@/src/components/v2/Tag/Tag";
+import { Tag } from "@/src/components/Tag/Tag";
 
 export interface TagGroupProps {
   class?: string;
diff --git a/pkgs/clan-app/ui/src/components/v2/Typography/Typography.css b/pkgs/clan-app/ui/src/components/Typography/Typography.css
similarity index 100%
rename from pkgs/clan-app/ui/src/components/v2/Typography/Typography.css
rename to pkgs/clan-app/ui/src/components/Typography/Typography.css
diff --git a/pkgs/clan-app/ui/src/components/v2/Typography/Typography.mdx b/pkgs/clan-app/ui/src/components/Typography/Typography.mdx
similarity index 100%
rename from pkgs/clan-app/ui/src/components/v2/Typography/Typography.mdx
rename to pkgs/clan-app/ui/src/components/Typography/Typography.mdx
diff --git a/pkgs/clan-app/ui/src/components/v2/Typography/Typography.stories.tsx b/pkgs/clan-app/ui/src/components/Typography/Typography.stories.tsx
similarity index 98%
rename from pkgs/clan-app/ui/src/components/v2/Typography/Typography.stories.tsx
rename to pkgs/clan-app/ui/src/components/Typography/Typography.stories.tsx
index 99b67fe1c..401b78bcf 100644
--- a/pkgs/clan-app/ui/src/components/v2/Typography/Typography.stories.tsx
+++ b/pkgs/clan-app/ui/src/components/Typography/Typography.stories.tsx
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@kachurun/storybook-solid";
 
 import { Family, Hierarchy, Typography, Weight } from "./Typography";
 import { Component, For, Show } from "solid-js";
-import { AllColors } from "@/src/components/v2/colors";
+import { AllColors } from "@/src/components/colors";
 
 interface TypographyExamplesProps {
   weights: Weight[];
diff --git a/pkgs/clan-app/ui/src/components/v2/Typography/Typography.tsx b/pkgs/clan-app/ui/src/components/Typography/Typography.tsx
similarity index 97%
rename from pkgs/clan-app/ui/src/components/v2/Typography/Typography.tsx
rename to pkgs/clan-app/ui/src/components/Typography/Typography.tsx
index a7a58bc41..f663d9f19 100644
--- a/pkgs/clan-app/ui/src/components/v2/Typography/Typography.tsx
+++ b/pkgs/clan-app/ui/src/components/Typography/Typography.tsx
@@ -2,7 +2,7 @@ import { type JSX } from "solid-js";
 import { Dynamic } from "solid-js/web";
 import cx from "classnames";
 import "./Typography.css";
-import { Color, fgClass } from "@/src/components/v2/colors";
+import { Color, fgClass } from "@/src/components/colors";
 
 export type Tag = "span" | "p" | "h1" | "h2" | "h3" | "h4" | "div";
 export type Hierarchy = "body" | "title" | "headline" | "label" | "teaser";
diff --git a/pkgs/clan-app/ui/src/components/Typography/css/typography-color.css b/pkgs/clan-app/ui/src/components/Typography/css/typography-color.css
deleted file mode 100644
index 0a8d29913..000000000
--- a/pkgs/clan-app/ui/src/components/Typography/css/typography-color.css
+++ /dev/null
@@ -1,23 +0,0 @@
-.fnt-clr-primary {
-  color: var(--clr-fg-def-1);
-}
-
-.fnt-clr-secondary {
-  color: var(--clr-fg-def-2);
-}
-
-.fnt-clr-tertiary {
-  color: var(--clr-fg-def-3);
-}
-
-.fnt-clr-primary.fnt-clr--inverted {
-  color: var(--clr-fg-inv-1);
-}
-
-.fnt-clr-secondary.fnt-clr--inverted {
-  color: var(--clr-fg-inv-2);
-}
-
-.fnt-clr-tertiary.fnt-clr--inverted {
-  color: var(--clr-fg-inv-3);
-}
diff --git a/pkgs/clan-app/ui/src/components/Typography/css/typography-hierarchy/index.css b/pkgs/clan-app/ui/src/components/Typography/css/typography-hierarchy/index.css
deleted file mode 100644
index ba3e11c0a..000000000
--- a/pkgs/clan-app/ui/src/components/Typography/css/typography-hierarchy/index.css
+++ /dev/null
@@ -1,4 +0,0 @@
-@import "./typography-label.css";
-@import "./typography-body.css";
-@import "./typography-title.css";
-@import "./typography-headline.css";
diff --git a/pkgs/clan-app/ui/src/components/Typography/css/typography-hierarchy/typography-body.css b/pkgs/clan-app/ui/src/components/Typography/css/typography-hierarchy/typography-body.css
deleted file mode 100644
index eb41ef462..000000000
--- a/pkgs/clan-app/ui/src/components/Typography/css/typography-hierarchy/typography-body.css
+++ /dev/null
@@ -1,23 +0,0 @@
-.fnt-body-default {
-  font-size: 1rem;
-  line-height: 132%;
-  letter-spacing: 3%;
-}
-
-.fnt-body-s {
-  font-size: 0.925rem;
-  line-height: 132%;
-  letter-spacing: 3%;
-}
-
-.fnt-body-xs {
-  font-size: 0.875rem;
-  line-height: 132%;
-  letter-spacing: 3%;
-}
-
-.fnt-body-xxs {
-  font-size: 0.75rem;
-  line-height: 132%;
-  letter-spacing: 0.00688rem;
-}
diff --git a/pkgs/clan-app/ui/src/components/Typography/css/typography-hierarchy/typography-headline.css b/pkgs/clan-app/ui/src/components/Typography/css/typography-hierarchy/typography-headline.css
deleted file mode 100644
index 7527f335f..000000000
--- a/pkgs/clan-app/ui/src/components/Typography/css/typography-hierarchy/typography-headline.css
+++ /dev/null
@@ -1,17 +0,0 @@
-.fnt-headline-default {
-  font-size: 1.5rem;
-  line-height: 116%;
-  letter-spacing: 1%;
-}
-
-.fnt-headline-m {
-  font-size: 1.75rem;
-  line-height: 116%;
-  letter-spacing: 1%;
-}
-
-.fnt-headline-l {
-  font-size: 2rem;
-  line-height: 116%;
-  letter-spacing: 1%;
-}
diff --git a/pkgs/clan-app/ui/src/components/Typography/css/typography-hierarchy/typography-label.css b/pkgs/clan-app/ui/src/components/Typography/css/typography-hierarchy/typography-label.css
deleted file mode 100644
index 0ebab7685..000000000
--- a/pkgs/clan-app/ui/src/components/Typography/css/typography-hierarchy/typography-label.css
+++ /dev/null
@@ -1,14 +0,0 @@
-.fnt-label-default {
-  font-size: 0.8125rem;
-  line-height: 100%;
-}
-
-.fnt-label-s {
-  font-size: 0.75rem;
-  line-height: 100%;
-}
-
-.fnt-label-xs {
-  font-size: 0.6875rem;
-  line-height: 100%;
-}
diff --git a/pkgs/clan-app/ui/src/components/Typography/css/typography-hierarchy/typography-title.css b/pkgs/clan-app/ui/src/components/Typography/css/typography-hierarchy/typography-title.css
deleted file mode 100644
index 65a7d820b..000000000
--- a/pkgs/clan-app/ui/src/components/Typography/css/typography-hierarchy/typography-title.css
+++ /dev/null
@@ -1,17 +0,0 @@
-.fnt-title-default {
-  font-size: 1.125rem;
-  line-height: 124%;
-  letter-spacing: 3%;
-}
-
-.fnt-title-m {
-  font-size: 1.25rem;
-  line-height: 124%;
-  letter-spacing: 3%;
-}
-
-.fnt-title-l {
-  font-size: 1.375rem;
-  line-height: 124%;
-  letter-spacing: 3%;
-}
diff --git a/pkgs/clan-app/ui/src/components/Typography/css/typography.css b/pkgs/clan-app/ui/src/components/Typography/css/typography.css
deleted file mode 100644
index 735507f74..000000000
--- a/pkgs/clan-app/ui/src/components/Typography/css/typography.css
+++ /dev/null
@@ -1,26 +0,0 @@
-@import "./typography-hierarchy/";
-@import "./typography-color.css";
-
-.fnt-weight-normal {
-  font-weight: 300;
-}
-
-.fnt-weight-medium {
-  font-weight: 500;
-}
-
-.fnt-weight-bold {
-  font-weight: 700;
-}
-
-.fnt-weight-normal.fnt-clr--inverted {
-  font-weight: 300;
-}
-
-.fnt-weight-medium.fnt-clr--inverted {
-  font-weight: 400;
-}
-
-.fnt-weight-bold.fnt-clr--inverted {
-  font-weight: 700;
-}
diff --git a/pkgs/clan-app/ui/src/components/Typography/index.tsx b/pkgs/clan-app/ui/src/components/Typography/index.tsx
deleted file mode 100644
index 63c2f9e04..000000000
--- a/pkgs/clan-app/ui/src/components/Typography/index.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-import { type JSX } from "solid-js";
-import { Dynamic } from "solid-js/web";
-import cx from "classnames";
-import "./css/typography.css";
-
-type Hierarchy = "body" | "title" | "headline" | "label";
-type Color = "primary" | "secondary" | "tertiary";
-type Weight = "normal" | "medium" | "bold";
-type Tag = "span" | "p" | "h1" | "h2" | "h3" | "h4" | "div";
-
-const colorMap: Record<Color, string> = {
-  primary: cx("fnt-clr-primary"),
-  secondary: cx("fnt-clr-secondary"),
-  tertiary: cx("fnt-clr-tertiary"),
-};
-
-// type Size = "default" | "xs" | "s" | "m" | "l";
-interface SizeForHierarchy {
-  label: {
-    default: string;
-    xs: string;
-    s: string;
-  };
-  body: {
-    default: string;
-    xs: string;
-    xxs: string;
-    s: string;
-  };
-  headline: {
-    default: string;
-    m: string;
-    l: string;
-  };
-  title: {
-    default: string;
-    m: string;
-    l: string;
-  };
-}
-
-type AllowedSizes<H extends Hierarchy> = keyof SizeForHierarchy[H];
-
-const sizeHierarchyMap: SizeForHierarchy = {
-  body: {
-    default: cx("fnt-body-default"),
-    s: cx("fnt-body-s"),
-    xs: cx("fnt-body-xs"),
-    xxs: cx("fnt-body-xxs"),
-  },
-  headline: {
-    default: cx("fnt-headline-default"),
-    // xs: cx("fnt-headline-xs"),
-    // s: cx("fnt-headline-s"),
-    m: cx("fnt-headline-m"),
-    l: cx("fnt-headline-l"),
-  },
-  title: {
-    default: cx("fnt-title-default"),
-    // xs: cx("fnt-title-xs"),
-    // s: cx("fnt-title-s"),
-    m: cx("fnt-title-m"),
-    l: cx("fnt-title-l"),
-  },
-  label: {
-    default: cx("fnt-label-default"),
-    s: cx("fnt-label-s"),
-    xs: cx("fnt-label-xs"),
-  },
-};
-
-const weightMap: Record<Weight, string> = {
-  normal: cx("fnt-weight-normal"),
-  medium: cx("fnt-weight-medium"),
-  bold: cx("fnt-weight-bold"),
-};
-
-interface _TypographyProps<H extends Hierarchy> {
-  hierarchy: H;
-  size: AllowedSizes<H>;
-  children: JSX.Element;
-  weight?: Weight;
-  color?: Color | "inherit";
-  inverted?: boolean;
-  tag?: Tag;
-  class?: string;
-  classList?: Record<string, boolean>;
-}
-
-export const Typography = <H extends Hierarchy>(props: _TypographyProps<H>) => {
-  return (
-    <Dynamic
-      component={props.tag || "span"}
-      class={cx(
-        props.color === "inherit" && "text-inherit",
-        props.color !== "inherit" && colorMap[props.color || "primary"],
-        props.inverted && "fnt-clr--inverted",
-        sizeHierarchyMap[props.hierarchy][props.size] as string,
-        weightMap[props.weight || "normal"],
-        props.class,
-      )}
-      classList={props.classList}
-    >
-      {props.children}
-    </Dynamic>
-  );
-};
-
-export type TypographyProps = _TypographyProps<Hierarchy>;
diff --git a/pkgs/clan-app/ui/src/components/v2/colors.ts b/pkgs/clan-app/ui/src/components/colors.ts
similarity index 100%
rename from pkgs/clan-app/ui/src/components/v2/colors.ts
rename to pkgs/clan-app/ui/src/components/colors.ts
diff --git a/pkgs/clan-app/ui/src/components/icon/index.tsx b/pkgs/clan-app/ui/src/components/icon/index.tsx
deleted file mode 100644
index 36aee57fe..000000000
--- a/pkgs/clan-app/ui/src/components/icon/index.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import { Component, JSX, splitProps } from "solid-js";
-import ArrowBottom from "@/icons/arrow-bottom.svg";
-import ArrowLeft from "@/icons/arrow-left.svg";
-import ArrowRight from "@/icons/arrow-right.svg";
-import ArrowTop from "@/icons/arrow-top.svg";
-import Attention from "@/icons/attention.svg";
-import CaretDown from "@/icons/caret-down.svg";
-import CaretLeft from "@/icons/caret-left.svg";
-import CaretRight from "@/icons/caret-right.svg";
-import CaretUp from "@/icons/caret-up.svg";
-import Checkmark from "@/icons/checkmark.svg";
-import ClanIcon from "@/icons/clan-icon.svg";
-import ClanLogo from "@/icons/clan-logo.svg";
-import Close from "@/icons/close.svg";
-import Download from "@/icons/download.svg";
-import Edit from "@/icons/edit.svg";
-import Expand from "@/icons/expand.svg";
-import EyeClose from "@/icons/eye-close.svg";
-import EyeOpen from "@/icons/eye-open.svg";
-import Filter from "@/icons/filter.svg";
-import Flash from "@/icons/flash.svg";
-import Folder from "@/icons/folder.svg";
-import Grid from "@/icons/grid.svg";
-import Info from "@/icons/info.svg";
-import List from "@/icons/list.svg";
-import Load from "@/icons/load.svg";
-import More from "@/icons/more.svg";
-import Paperclip from "@/icons/paperclip.svg";
-import Plus from "@/icons/plus.svg";
-import Reload from "@/icons/reload.svg";
-import Report from "@/icons/report.svg";
-import Search from "@/icons/search.svg";
-import Settings from "@/icons/settings.svg";
-import Trash from "@/icons/trash.svg";
-import Update from "@/icons/update.svg";
-import Warning from "@/icons/warning-filled.svg";
-
-const icons = {
-  ArrowBottom,
-  ArrowLeft,
-  ArrowRight,
-  ArrowTop,
-  Attention,
-  CaretDown,
-  CaretLeft,
-  CaretRight,
-  CaretUp,
-  Checkmark,
-  ClanIcon,
-  ClanLogo,
-  Close,
-  Download,
-  Edit,
-  Expand,
-  EyeClose,
-  EyeOpen,
-  Filter,
-  Flash,
-  Folder,
-  Grid,
-  Info,
-  List,
-  Load,
-  More,
-  Paperclip,
-  Plus,
-  Reload,
-  Report,
-  Search,
-  Settings,
-  Trash,
-  Update,
-  Warning,
-};
-
-export type IconVariant = keyof typeof icons;
-
-interface IconProps extends JSX.SvgSVGAttributes<SVGElement> {
-  icon: IconVariant;
-  size?: number;
-}
-
-const Icon: Component<IconProps> = (props) => {
-  const [local, iconProps] = splitProps(props, ["icon"]);
-
-  const IconComponent = icons[local.icon];
-  return IconComponent ? (
-    <IconComponent
-      width={iconProps.size || 16}
-      height={iconProps.size || 16}
-      viewBox="0 0 48 48"
-      ref={iconProps.ref}
-      {...iconProps}
-    />
-  ) : null;
-};
-
-export default Icon;
diff --git a/pkgs/clan-app/ui/src/components/inputBase/index.tsx b/pkgs/clan-app/ui/src/components/inputBase/index.tsx
deleted file mode 100644
index c906fede5..000000000
--- a/pkgs/clan-app/ui/src/components/inputBase/index.tsx
+++ /dev/null
@@ -1,193 +0,0 @@
-import cx from "classnames";
-import { JSX, Ref, Show, splitProps } from "solid-js";
-import Icon, { IconVariant } from "../icon";
-import { Typography, TypographyProps } from "../Typography";
-
-export type InputVariant = "outlined" | "ghost";
-interface InputBaseProps {
-  variant?: InputVariant;
-  value?: string;
-  inputProps?: JSX.InputHTMLAttributes<HTMLInputElement>;
-  required?: boolean;
-  type?: string;
-  inlineLabel?: JSX.Element;
-  class?: string;
-  placeholder?: string;
-  disabled?: boolean;
-  readonly?: boolean;
-  error?: boolean;
-  icon?: IconVariant;
-  /** Overrides the input element */
-  inputElem?: JSX.Element;
-  divRef?: Ref<HTMLDivElement>;
-}
-
-const variantBorder: Record<InputVariant, string> = {
-  outlined: "border border-inv-3",
-  ghost: "",
-};
-
-const fgStateClasses = cx("aria-disabled:fg-def-4 aria-readonly:fg-def-3");
-
-export const InputBase = (props: InputBaseProps) => {
-  const [internal, inputProps] = splitProps(props, ["class", "divRef"]);
-  return (
-    <div
-      // eslint-disable-next-line tailwindcss/no-custom-classname
-      class={cx(
-        // Layout
-        "flex px-2 py-[0.375rem] flex-shrink-0 items-center justify-center gap-2 text-sm leading-6",
-
-        // Background
-        "bg-def-1 hover:bg-def-acc-1",
-
-        // Text
-        "fg-def-1",
-        fgStateClasses,
-        // Border
-        variantBorder[props.variant || "outlined"],
-        "rounded-sm",
-        "hover:border-inv-4",
-        "aria-disabled:border-def-2 aria-disabled:border",
-        // Outline
-        "outline-offset-1 outline-1",
-        "active:outline active:outline-inv-3",
-        "focus-visible:outline-double  focus-visible:outline-int-1",
-
-        // Cursor
-        "aria-readonly:cursor-no-drop",
-        props.class,
-      )}
-      classList={{
-        // eslint-disable-next-line tailwindcss/no-custom-classname
-        [cx("!border !border-semantic-1 !outline-semantic-1")]: !!props.error,
-      }}
-      aria-invalid={props.error}
-      aria-disabled={props.disabled}
-      aria-readonly={props.readonly}
-      tabIndex={0}
-      role="textbox"
-      ref={internal.divRef}
-    >
-      {props.icon && (
-        <i
-          class={cx("inline-flex fg-def-2", fgStateClasses)}
-          aria-invalid={props.error}
-          aria-disabled={props.disabled}
-          aria-readonly={props.readonly}
-        >
-          <Icon icon={props.icon} font-size="inherit" color="inherit" />
-        </i>
-      )}
-      <Show when={!props.inputElem} fallback={props.inputElem}>
-        <input
-          tabIndex={-1}
-          class="w-full bg-transparent outline-none"
-          value={props.value}
-          type={props.type ? props.type : "text"}
-          readOnly={props.readonly}
-          placeholder={`${props.placeholder || ""}`}
-          required={props.required}
-          disabled={props.disabled}
-          aria-invalid={props.error}
-          aria-disabled={props.disabled}
-          aria-readonly={props.readonly}
-          {...inputProps}
-        />
-      </Show>
-    </div>
-  );
-};
-
-interface InputLabelProps extends JSX.LabelHTMLAttributes<HTMLLabelElement> {
-  description?: string;
-  required?: boolean;
-  error?: boolean;
-  help?: string;
-  labelAction?: JSX.Element;
-}
-export const InputLabel = (props: InputLabelProps) => {
-  const [labelProps, forwardProps] = splitProps(props, [
-    "class",
-    "labelAction",
-  ]);
-  return (
-    <label
-      class={cx("flex items-center gap-1", labelProps.class)}
-      {...forwardProps}
-    >
-      <span class="flex flex-col justify-center">
-        <span>
-          <Typography
-            hierarchy="label"
-            size="default"
-            weight="bold"
-            class="inline-flex gap-1 align-middle !fg-def-1"
-            classList={{
-              [cx("!fg-semantic-info-1")]: !!props.error,
-            }}
-            aria-invalid={props.error}
-          >
-            {props.children}
-          </Typography>
-          {props.required && (
-            <Typography
-              class="inline-flex px-1 align-text-top leading-[0.5] fg-def-4"
-              color="inherit"
-              hierarchy="label"
-              weight="bold"
-              size="xs"
-            >
-              <>&#42;</>
-            </Typography>
-          )}
-          {props.help && (
-            <span
-              class=" inline px-2"
-              data-tip={props.help}
-              style={{
-                "--tooltip-color": "#EFFFFF",
-                "--tooltip-text-color": "#0D1416",
-                "--tooltip-tail": "0.8125rem",
-              }}
-            >
-              <Icon class="inline fg-def-3" icon={"Info"} width={"0.8125rem"} />
-            </span>
-          )}
-        </span>
-        <Typography
-          hierarchy="body"
-          size="xs"
-          weight="normal"
-          color="secondary"
-        >
-          {props.description}
-        </Typography>
-      </span>
-      {props.labelAction}
-    </label>
-  );
-};
-
-interface InputErrorProps {
-  error: string;
-  typographyProps?: TypographyProps;
-}
-export const InputError = (props: InputErrorProps) => {
-  const [typoClasses, rest] = splitProps(
-    props.typographyProps || { class: "" },
-    ["class"],
-  );
-  return (
-    <Typography
-      hierarchy="body"
-      // @ts-expect-error: Dependent type is to complex to check how it is coupled to the override for now
-      size="xxs"
-      weight="medium"
-      class={cx("col-span-full px-1 !fg-semantic-info-4", typoClasses)}
-      {...rest}
-    >
-      {props.error}
-    </Typography>
-  );
-};
diff --git a/pkgs/clan-app/ui/src/components/toast/index.tsx b/pkgs/clan-app/ui/src/components/toast/index.tsx
deleted file mode 100644
index ef1729f9f..000000000
--- a/pkgs/clan-app/ui/src/components/toast/index.tsx
+++ /dev/null
@@ -1,301 +0,0 @@
-import { toast, Toast } from "solid-toast"; // Make sure to import Toast type
-import { Component, JSX, createSignal, onCleanup } from "solid-js";
-
-// --- Icon Components ---
-
-const ErrorIcon: Component = () => (
-  <svg
-    width="20"
-    height="20"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    style={{ "margin-right": "10px", "flex-shrink": "0" }}
-  >
-    <circle cx="12" cy="12" r="10" fill="#FF4D4F" />
-    <path
-      d="M12 7V13"
-      stroke="white"
-      stroke-width="2.5"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    />
-    <circle cx="12" cy="16.5" r="1.5" fill="white" />
-  </svg>
-);
-
-const InfoIcon: Component = () => (
-  <svg
-    width="20"
-    height="20"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    style={{ "margin-right": "10px", "flex-shrink": "0" }}
-  >
-    <circle cx="12" cy="12" r="10" fill="#2196F3" />
-    <path
-      d="M12 11V17"
-      stroke="white"
-      stroke-width="2.5"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    />
-    <circle cx="12" cy="8.5" r="1.5" fill="white" />
-  </svg>
-);
-
-const WarningIcon: Component = () => (
-  <svg
-    width="20"
-    height="20"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    style={{ "margin-right": "10px", "flex-shrink": "0" }}
-  >
-    <path d="M12 2L22 21H2L12 2Z" fill="#FFC107" />
-    <path
-      d="M12 9V14"
-      stroke="#424242"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    />
-    <circle cx="12" cy="16.5" r="1" fill="#424242" />
-  </svg>
-);
-
-// --- Base Props and Styles ---
-
-interface BaseToastProps {
-  t: Toast;
-  message: string;
-  onCancel?: () => void; // Optional custom function on X click
-}
-
-const baseToastStyle: JSX.CSSProperties = {
-  display: "flex",
-  "align-items": "center",
-  "justify-content": "space-between", // To push X to the right
-  gap: "10px", // Space between content and close button
-  background: "#FFFFFF",
-  color: "#333333",
-  padding: "12px 16px",
-  "border-radius": "6px",
-  "box-shadow": "0 2px 8px rgba(0, 0, 0, 0.12)",
-  "font-family":
-    'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
-  "font-size": "14px",
-  "line-height": "1.4",
-  "min-width": "280px",
-  "max-width": "450px",
-};
-
-const closeButtonStyle: JSX.CSSProperties = {
-  background: "none",
-  border: "none",
-  color: "red", // As per original example's X button
-  "font-size": "1.5em",
-  "font-weight": "bold",
-  cursor: "pointer",
-  padding: "0 0 0 10px", // Space to its left
-  "line-height": "1",
-  "align-self": "center", // Ensure vertical alignment
-};
-
-// --- Toast Component Definitions ---
-
-// Error Toast
-export const ErrorToastComponent: Component<BaseToastProps> = (props) => {
-  // Local state for click feedback and exit animation
-  let timeoutId: number | undefined;
-  const [clicked, setClicked] = createSignal(false);
-  const [exiting, setExiting] = createSignal(false);
-
-  const handleToastClick = () => {
-    setClicked(true);
-    setTimeout(() => {
-      setExiting(true);
-      timeoutId = window.setTimeout(() => {
-        toast.dismiss(props.t.id);
-      }, 300); // Match exit animation duration
-    }, 100); // Brief color feedback before animating out
-  };
-
-  // Cleanup timeout if unmounted early
-  onCleanup(() => {
-    if (timeoutId) clearTimeout(timeoutId);
-  });
-
-  return (
-    <div
-      style={{
-        ...baseToastStyle,
-        cursor: "pointer",
-        transition: "background 0.15s, opacity 0.3s, transform 0.3s",
-        background: clicked()
-          ? "#ffeaea"
-          : exiting()
-            ? "#fff"
-            : baseToastStyle.background,
-        opacity: exiting() ? 0 : 1,
-        transform: exiting() ? "translateY(-20px)" : "none",
-      }}
-      onClick={handleToastClick}
-    >
-      <div
-        style={{ display: "flex", "align-items": "center", "flex-grow": "1" }}
-      >
-        <ErrorIcon />
-        <span>{props.message}</span>
-      </div>
-    </div>
-  );
-};
-// Info Toast
-export const CancelToastComponent: Component<BaseToastProps> = (props) => {
-  let timeoutId: number | undefined;
-  const [clicked, setClicked] = createSignal(false);
-  const [exiting, setExiting] = createSignal(false);
-
-  // Cleanup timeout if unmounted early
-  onCleanup(() => {
-    if (timeoutId) clearTimeout(timeoutId);
-  });
-
-  const handleButtonClick = (e: MouseEvent) => {
-    e.stopPropagation();
-    if (props.onCancel) props.onCancel();
-    toast.dismiss(props.t.id);
-  };
-
-  return (
-    <div
-      style={{
-        ...baseToastStyle,
-        cursor: "pointer",
-        transition: "background 0.15s, opacity 0.3s, transform 0.3s",
-        background: clicked()
-          ? "#eaf4ff"
-          : exiting()
-            ? "#fff"
-            : baseToastStyle.background,
-        opacity: exiting() ? 0 : 1,
-        transform: exiting() ? "translateY(-20px)" : "none",
-      }}
-    >
-      <div
-        style={{ display: "flex", "align-items": "center", "flex-grow": "1" }}
-      >
-        <InfoIcon />
-        <span>{props.message}</span>
-      </div>
-      <button
-        onClick={(e) => {
-          setClicked(true);
-          handleButtonClick(e);
-        }}
-        style={{
-          ...closeButtonStyle,
-          color: "#2196F3",
-          "font-size": "1em",
-          "font-weight": "normal",
-          padding: "4px 12px",
-          border: "1px solid #2196F3",
-          "border-radius": "4px",
-          background: clicked() ? "#bbdefb" : "#eaf4ff",
-          cursor: "pointer",
-          transition: "background 0.15s",
-          display: "flex",
-          "align-items": "center",
-          "justify-content": "center",
-          width: "70px",
-          height: "32px",
-        }}
-        aria-label="Cancel"
-        disabled={clicked()}
-      >
-        {clicked() ? (
-          // Simple spinner SVG
-          <svg
-            width="18"
-            height="18"
-            viewBox="0 0 50 50"
-            style={{ display: "block" }}
-          >
-            <circle
-              cx="25"
-              cy="25"
-              r="20"
-              fill="none"
-              stroke="#2196F3"
-              stroke-width="4"
-              stroke-linecap="round"
-              stroke-dasharray="31.415, 31.415"
-              transform="rotate(72 25 25)"
-            >
-              <animateTransform
-                attributeName="transform"
-                type="rotate"
-                from="0 25 25"
-                to="360 25 25"
-                dur="0.8s"
-                repeatCount="indefinite"
-              />
-            </circle>
-          </svg>
-        ) : (
-          "Cancel"
-        )}
-      </button>
-    </div>
-  );
-};
-
-// Warning Toast
-const WarningToastComponent: Component<BaseToastProps> = (props) => {
-  let timeoutId: number | undefined;
-  const [clicked, setClicked] = createSignal(false);
-  const [exiting, setExiting] = createSignal(false);
-
-  const handleToastClick = () => {
-    setClicked(true);
-    setTimeout(() => {
-      setExiting(true);
-      timeoutId = window.setTimeout(() => {
-        toast.dismiss(props.t.id);
-      }, 300);
-    }, 100);
-  };
-
-  // Cleanup timeout if unmounted early
-  onCleanup(() => {
-    if (timeoutId) clearTimeout(timeoutId);
-  });
-
-  return (
-    <div
-      style={{
-        ...baseToastStyle,
-        cursor: "pointer",
-        transition: "background 0.15s, opacity 0.3s, transform 0.3s",
-        background: clicked()
-          ? "#fff8e1"
-          : exiting()
-            ? "#fff"
-            : baseToastStyle.background,
-        opacity: exiting() ? 0 : 1,
-        transform: exiting() ? "translateY(-20px)" : "none",
-      }}
-      onClick={handleToastClick}
-    >
-      <div
-        style={{ display: "flex", "align-items": "center", "flex-grow": "1" }}
-      >
-        <WarningIcon />
-        <span>{props.message}</span>
-      </div>
-    </div>
-  );
-};
diff --git a/pkgs/clan-app/ui/src/components/v2/Button/Button.tsx b/pkgs/clan-app/ui/src/components/v2/Button/Button.tsx
deleted file mode 100644
index 96f5d39d9..000000000
--- a/pkgs/clan-app/ui/src/components/v2/Button/Button.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import { splitProps, type JSX, createSignal } from "solid-js";
-import cx from "classnames";
-import { Typography } from "../Typography/Typography";
-import { Button as KobalteButton } from "@kobalte/core/button";
-
-import "./Button.css";
-import Icon, { IconVariant } from "@/src/components/v2/Icon/Icon";
-import { Loader } from "@/src/components/v2/Loader/Loader";
-
-export type Size = "default" | "s";
-export type Hierarchy = "primary" | "secondary";
-
-export type Action = () => Promise<void>;
-
-export interface ButtonProps
-  extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
-  hierarchy?: Hierarchy;
-  size?: Size;
-  ghost?: boolean;
-  children?: JSX.Element;
-  icon?: IconVariant;
-  startIcon?: IconVariant;
-  endIcon?: IconVariant;
-  class?: string;
-  onAction?: Action;
-}
-
-const iconSizes: Record<Size, string> = {
-  default: "1rem",
-  s: "0.8125rem",
-};
-
-export const Button = (props: ButtonProps) => {
-  const [local, other] = splitProps(props, [
-    "children",
-    "hierarchy",
-    "size",
-    "ghost",
-    "icon",
-    "startIcon",
-    "endIcon",
-    "class",
-    "onAction",
-  ]);
-
-  const size = local.size || "default";
-  const hierarchy = local.hierarchy || "primary";
-
-  const [loading, setLoading] = createSignal(false);
-
-  const onClick = async () => {
-    if (!local.onAction) {
-      console.error("this should not be possible");
-      return;
-    }
-
-    setLoading(true);
-
-    try {
-      await local.onAction();
-    } catch (error) {
-      console.error("Error while executing action", error);
-    }
-
-    setLoading(false);
-  };
-
-  const iconSize = iconSizes[local.size || "default"];
-
-  return (
-    <KobalteButton
-      class={cx(
-        local.class,
-        "button", // default button class
-        size,
-        hierarchy,
-        {
-          icon: local.icon,
-          loading: loading(),
-          ghost: local.ghost,
-        },
-      )}
-      onClick={local.onAction ? onClick : undefined}
-      {...other}
-    >
-      <Loader hierarchy={hierarchy} />
-
-      {local.startIcon && (
-        <Icon icon={local.startIcon} class="icon-start" size={iconSize} />
-      )}
-
-      {local.icon && !local.children && (
-        <Icon icon={local.icon} class="icon" size={iconSize} />
-      )}
-
-      {local.children && !local.icon && (
-        <Typography
-          class="label"
-          hierarchy="label"
-          family="mono"
-          size={local.size || "default"}
-          inverted={local.hierarchy === "primary"}
-          weight="bold"
-          tag="span"
-        >
-          {local.children}
-        </Typography>
-      )}
-
-      {local.endIcon && (
-        <Icon icon={local.endIcon} class="icon-end" size={iconSize} />
-      )}
-    </KobalteButton>
-  );
-};
diff --git a/pkgs/clan-app/ui/src/components/v2/README.md b/pkgs/clan-app/ui/src/components/v2/README.md
deleted file mode 100644
index 9dc27627f..000000000
--- a/pkgs/clan-app/ui/src/components/v2/README.md
+++ /dev/null
@@ -1,7 +0,0 @@
-## Overview
-
-We will be updating existing components and developing new components in line with the latest designs inside this
-folder. As they become ready, they can be copied into the root `components` folder, replacing any existing components as
-necessary.
-
-This is to avoid merge hell and allow us to rapidly match the latest designs without the burden of integration.
\ No newline at end of file
diff --git a/pkgs/clan-app/ui/src/components/v2/index.css b/pkgs/clan-app/ui/src/components/v2/index.css
deleted file mode 100644
index c964c6bc4..000000000
--- a/pkgs/clan-app/ui/src/components/v2/index.css
+++ /dev/null
@@ -1,75 +0,0 @@
-/* Material icons removed - using custom icons */
-/* @import url(./components/Typography/css/typography.css); */
-
-@config "../../../tailwind.config.ts";
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@font-face {
-  font-family: "Archivo";
-  font-weight: 400;
-  src: url(../../../.fonts/Archivo-Regular.woff2) format("woff2");
-}
-
-@font-face {
-  font-family: "Archivo";
-  font-weight: 500;
-  src: url(../../../.fonts/Archivo-Medium.woff2) format("woff2");
-}
-
-@font-face {
-  font-family: "Archivo";
-  font-weight: 600;
-  src: url(../../../.fonts/Archivo-SemiBold.woff2) format("woff2");
-}
-
-@font-face {
-  font-family: "Archivo SemiCondensed";
-  font-weight: 400;
-  src: url(../../../.fonts/ArchivoSemiCondensed-Regular.woff2) format("woff2");
-}
-
-@font-face {
-  font-family: "Archivo SemiCondensed";
-  font-weight: 500;
-  src: url(../../../.fonts/ArchivoSemiCondensed-Medium.woff2) format("woff2");
-}
-
-@font-face {
-  font-family: "Archivo SemiCondensed";
-  font-weight: 600;
-  src: url(../../../.fonts/ArchivoSemiCondensed-SemiBold.woff2) format("woff2");
-}
-
-@font-face {
-  font-family: "Commit Mono";
-  font-weight: 400;
-  src: url(../../../.fonts/CommitMono-400-Regular.otf) format("otf");
-}
-
-html {
-  @apply font-sans;
-  overflow-x: hidden;
-  overflow-y: hidden;
-
-  -webkit-user-select: none;
-  /* Safari */
-  -moz-user-select: none;
-  /* Firefox */
-  -ms-user-select: none;
-  /* Internet Explorer/Edge */
-  user-select: none;
-  /* Standard */
-}
-
-@layer utilities {
-  .no-scrollbar::-webkit-scrollbar {
-    display: none;
-  }
-  .no-scrollbar {
-    -ms-overflow-style: none;
-    scrollbar-width: none;
-  }
-}
diff --git a/pkgs/clan-app/ui/src/contexts/clan.tsx b/pkgs/clan-app/ui/src/contexts/clan.tsx
deleted file mode 100644
index 1ce982976..000000000
--- a/pkgs/clan-app/ui/src/contexts/clan.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { createContext, createEffect, JSX, useContext } from "solid-js";
-import {
-  activeClanURI,
-  addClanURI,
-  clanURIs,
-  removeClanURI,
-  setActiveClanURI,
-  store,
-} from "@/src/stores/clan";
-import { redirect } from "@solidjs/router";
-
-// Create the context
-interface ClanContextType {
-  activeClanURI: typeof activeClanURI;
-  setActiveClanURI: typeof setActiveClanURI;
-  clanURIs: typeof clanURIs;
-  addClanURI: typeof addClanURI;
-  removeClanURI: typeof removeClanURI;
-}
-
-const ClanContext = createContext<ClanContextType>({
-  activeClanURI,
-  setActiveClanURI,
-  clanURIs,
-  addClanURI,
-  removeClanURI,
-});
-
-interface ClanProviderProps {
-  children: JSX.Element;
-}
-
-export function ClanProvider(props: ClanProviderProps) {
-  // redirect to welcome if there's no active clan and no clan URIs
-  createEffect(async () => {
-    if (!store.activeClanURI && store.clanURIs.length == 0) {
-      redirect("/welcome");
-      return;
-    }
-  });
-
-  return (
-    <ClanContext.Provider
-      value={{
-        activeClanURI,
-        setActiveClanURI,
-        clanURIs,
-        addClanURI,
-        removeClanURI,
-      }}
-    >
-      {props.children}
-    </ClanContext.Provider>
-  );
-}
-
-// Export a hook that provides access to the context
-export function useClanContext() {
-  const context = useContext(ClanContext);
-  if (!context) {
-    throw new Error("useClanContext must be used within a ClanProvider");
-  }
-  return context;
-}
diff --git a/pkgs/clan-app/ui/src/floating/index.tsx b/pkgs/clan-app/ui/src/floating/index.tsx
deleted file mode 100644
index ab5869358..000000000
--- a/pkgs/clan-app/ui/src/floating/index.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-import { createEffect, createMemo, createSignal, onCleanup } from "solid-js";
-import type {
-  ComputePositionConfig,
-  ComputePositionReturn,
-  ReferenceElement,
-} from "@floating-ui/dom";
-import { computePosition } from "@floating-ui/dom";
-
-interface UseFloatingOptions<R extends ReferenceElement, F extends HTMLElement>
-  extends Partial<ComputePositionConfig> {
-  whileElementsMounted?: (
-    reference: R,
-    floating: F,
-    update: () => void,
-  ) => // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
-  void | (() => void);
-}
-
-interface UseFloatingState extends Omit<ComputePositionReturn, "x" | "y"> {
-  x?: number | null;
-  y?: number | null;
-}
-
-interface UseFloatingResult extends UseFloatingState {
-  update(): void;
-}
-
-export function useFloating<R extends ReferenceElement, F extends HTMLElement>(
-  reference: () => R | undefined | null,
-  floating: () => F | undefined | null,
-  options?: UseFloatingOptions<R, F>,
-): UseFloatingResult {
-  const placement = () => options?.placement ?? "bottom";
-  const strategy = () => options?.strategy ?? "absolute";
-
-  const [data, setData] = createSignal<UseFloatingState>({
-    x: null,
-    y: null,
-    placement: placement(),
-    strategy: strategy(),
-    middlewareData: {},
-  });
-
-  const [error, setError] = createSignal<{ value: unknown } | undefined>();
-
-  createEffect(() => {
-    const currentError = error();
-    if (currentError) {
-      throw currentError.value;
-    }
-  });
-
-  const version = createMemo(() => {
-    reference();
-    floating();
-    return {};
-  });
-
-  function update() {
-    const currentReference = reference();
-    const currentFloating = floating();
-
-    if (currentReference && currentFloating) {
-      const capturedVersion = version();
-      computePosition(currentReference, currentFloating, {
-        middleware: options?.middleware,
-        placement: placement(),
-        strategy: strategy(),
-      }).then(
-        (currentData) => {
-          // Check if it's still valid
-          if (capturedVersion === version()) {
-            setData(currentData);
-          }
-        },
-        (err) => {
-          setError(err);
-        },
-      );
-    }
-  }
-
-  createEffect(() => {
-    const currentReference = reference();
-    const currentFloating = floating();
-
-    placement();
-    strategy();
-
-    if (currentReference && currentFloating) {
-      if (options?.whileElementsMounted) {
-        const cleanup = options.whileElementsMounted(
-          currentReference,
-          currentFloating,
-          update,
-        );
-
-        if (cleanup) {
-          onCleanup(cleanup);
-        }
-      } else {
-        update();
-      }
-    }
-  });
-
-  return {
-    get x() {
-      return data().x;
-    },
-    get y() {
-      return data().y;
-    },
-    get placement() {
-      return data().placement;
-    },
-    get strategy() {
-      return data().strategy;
-    },
-    get middlewareData() {
-      return data().middlewareData;
-    },
-    update,
-  };
-}
diff --git a/pkgs/clan-app/ui/src/hooks/index.ts b/pkgs/clan-app/ui/src/hooks/index.ts
deleted file mode 100644
index b197821fd..000000000
--- a/pkgs/clan-app/ui/src/hooks/index.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { callApi } from "../api";
-import { useClanContext } from "@/src/contexts/clan";
-
-export const registerClan = async () => {
-  const { setActiveClanURI, addClanURI } = useClanContext();
-
-  try {
-    const loc = await callApi("open_file", {
-      file_request: { mode: "select_folder" },
-    }).promise;
-    if (loc.status === "success" && loc.data) {
-      const data = loc.data[0];
-      addClanURI(data);
-      setActiveClanURI(data);
-      return data;
-    }
-  } catch (e) {
-    //
-  }
-};
-
-/**
- * Opens the custom file dialog
- * Returns a native FileList to allow interaction with the native input type="file"
- */
-const selectSshKeys = async (): Promise<FileList> => {
-  const dataTransfer = new DataTransfer();
-
-  const response = await callApi("open_file", {
-    file_request: {
-      title: "Select SSH Key",
-      mode: "open_file",
-      initial_folder: "~/.ssh",
-    },
-  }).promise;
-  if (response.status === "success" && response.data) {
-    // Add synthetic files to the DataTransfer object
-    // FileList cannot be instantiated directly.
-    response.data.forEach((filename) => {
-      dataTransfer.items.add(new File([], filename));
-    });
-  }
-  return dataTransfer.files;
-};
diff --git a/pkgs/clan-app/ui/src/index.css b/pkgs/clan-app/ui/src/index.css
index 2ee1115ed..00d98f451 100644
--- a/pkgs/clan-app/ui/src/index.css
+++ b/pkgs/clan-app/ui/src/index.css
@@ -1,6 +1,3 @@
-/* Material icons removed - using custom icons */
-/* @import url(./components/Typography/css/typography.css); */
-
 @config "../tailwind.config.ts";
 
 @tailwind base;
@@ -10,25 +7,43 @@
 @font-face {
   font-family: "Archivo";
   font-weight: 400;
-  src: url(../.fonts/ArchivoSemiCondensed-Regular.woff2) format("woff2");
+  src: url(../.fonts/Archivo-Regular.woff2) format("woff2");
 }
 
 @font-face {
   font-family: "Archivo";
   font-weight: 500;
-  src: url(../.fonts/ArchivoSemiCondensed-Medium.woff2) format("woff2");
+  src: url(../.fonts/Archivo-Medium.woff2) format("woff2");
 }
 
 @font-face {
   font-family: "Archivo";
   font-weight: 600;
+  src: url(../.fonts/Archivo-SemiBold.woff2) format("woff2");
+}
+
+@font-face {
+  font-family: "Archivo SemiCondensed";
+  font-weight: 400;
+  src: url(../.fonts/ArchivoSemiCondensed-Regular.woff2) format("woff2");
+}
+
+@font-face {
+  font-family: "Archivo SemiCondensed";
+  font-weight: 500;
+  src: url(../.fonts/ArchivoSemiCondensed-Medium.woff2) format("woff2");
+}
+
+@font-face {
+  font-family: "Archivo SemiCondensed";
+  font-weight: 600;
   src: url(../.fonts/ArchivoSemiCondensed-SemiBold.woff2) format("woff2");
 }
 
-@keyframes slide {
-  to {
-    background-position: 200% 0;
-  }
+@font-face {
+  font-family: "Commit Mono";
+  font-weight: 400;
+  src: url(../.fonts/CommitMono-400-Regular.otf) format("otf");
 }
 
 html {
@@ -46,113 +61,12 @@ html {
   /* Standard */
 }
 
-.accordeon {
-  display: flex;
-  flex-direction: column;
-  gap: theme(gap.3);
-}
-
-.accordeon__header {
-  padding: theme(padding.2) theme(padding[1.5]) theme(padding.1);
-  cursor: pointer;
-}
-
-summary {
-  list-style: none;
-}
-
-summary::-webkit-details-marker {
-  display: none;
-}
-
-summary::marker {
-  display: none;
-}
-
-.accordeon__body {
-}
-
-.machine-item-loader {
-  @apply col-span-1 flex flex-col items-center;
-
-  display: flex;
-  justify-content: center;
-  position: relative;
-  padding: theme(padding.2);
-  border-radius: theme(borderRadius.md);
-
-  overflow: hidden;
-  cursor: pointer;
-}
-
-.machine-item-loader__thumb-wrapper {
-  position: relative;
-  z-index: 20;
-  padding: theme(padding.4);
-
-  border-radius: theme(borderRadius.md);
-  overflow: hidden;
-}
-
-.machine-item-loader__thumb {
-  position: relative;
-  width: 100px;
-  height: 100px;
-  background: theme(backgroundColor.secondary.100);
-  border-radius: theme(borderRadius.md);
-  overflow: hidden;
-}
-
-.machine-item-loader__headline {
-  position: relative;
-  z-index: 20;
-  width: 90%;
-  height: 20px;
-
-  background: theme(backgroundColor.secondary.100);
-  border-radius: theme(borderRadius.sm);
-  overflow: hidden;
-}
-
-.machine-item-loader__cover {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-}
-
-.machine-item-loader__loader {
-  position: absolute;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(
-    to right,
-    transparent 20%,
-    theme(backgroundColor.secondary.200) 50%,
-    transparent 80%
-  );
-  background-size: 400px 100%;
-
-  animation: loader 4s linear infinite;
-  transition: all 0.56s ease;
-}
-
-.machine-item-loader__cover .machine-item-loader__loader {
-  background: linear-gradient(
-    to right,
-    transparent 20%,
-    theme(backgroundColor.secondary.50) 50%,
-    transparent 80%
-  );
-}
-
-@keyframes loader {
-  0% {
-    background-position: -1000px 0;
+@layer utilities {
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
   }
-  100% {
-    background-position: 1000px 0;
+  .no-scrollbar {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
   }
 }
diff --git a/pkgs/clan-app/ui/src/index.tsx b/pkgs/clan-app/ui/src/index.tsx
index 3fddc88e4..a2a04fbfe 100644
--- a/pkgs/clan-app/ui/src/index.tsx
+++ b/pkgs/clan-app/ui/src/index.tsx
@@ -1,20 +1,8 @@
 /* @refresh reload */
-import { Portal, render } from "solid-js/web";
-import { Navigate, RouteDefinition, Router } from "@solidjs/router";
+import { render } from "solid-js/web";
 
 import "./index.css";
-import { QueryClient, QueryClientProvider } from "@tanstack/solid-query";
-
-import { Layout } from "./layout/layout";
-import { ClanDetails, ClanList, CreateClan } from "./routes/clans";
-import { HostList } from "./routes/hosts/view";
-import { Welcome } from "./routes/welcome";
-import { Toaster } from "solid-toast";
-import { ApiTester } from "./api_test";
-import { IconVariant } from "./components/icon";
-import { Components } from "./routes/components";
-import { ThreePlayground } from "./three";
-import { ClanProvider } from "./contexts/clan";
+import { QueryClient } from "@tanstack/solid-query";
 
 export const client = new QueryClient();
 
@@ -31,94 +19,9 @@ if (import.meta.env.DEV) {
   await import("solid-devtools");
 }
 
-export type AppRoute = Omit<RouteDefinition, "children"> & {
-  label: string;
-  icon?: IconVariant;
-  children?: AppRoute[];
-  hidden?: boolean;
-};
-
-export const routes: AppRoute[] = [
-  {
-    path: "/",
-    label: "",
-    hidden: true,
-    component: () => <Navigate href="/machines" />,
-  },
-
-  {
-    path: "/clans",
-    label: "Clans",
-    hidden: true,
-    icon: "List",
-    children: [
-      {
-        path: "/",
-        label: "Overview",
-        component: () => <ClanList />,
-      },
-      {
-        path: "/create",
-        label: "Create",
-        component: () => <CreateClan />,
-      },
-      {
-        path: "/:id",
-        label: "Details",
-        hidden: true,
-        component: () => <ClanDetails />,
-      },
-    ],
-  },
-
-  {
-    path: "/welcome",
-    label: "",
-    hidden: true,
-    component: () => <Welcome />,
-  },
-  {
-    path: "/internal-dev",
-    label: "Internal (Only visible in dev mode)",
-    children: [
-      {
-        path: "/hosts",
-        label: "Local Hosts",
-        component: () => <HostList />,
-      },
-      {
-        path: "/3d",
-        label: "3D-Playground",
-        component: () => <ThreePlayground />,
-      },
-      {
-        path: "/api_testing",
-        label: "api_testing",
-        hidden: false,
-        component: () => <ApiTester />,
-      },
-      {
-        path: "/components",
-        label: "Components",
-        hidden: false,
-        component: () => <Components />,
-      },
-    ],
-  },
-];
-
 render(
   () => (
-    <>
-      <Portal mount={document.body}>
-        <Toaster position="top-right" containerClassName="z-[9999]" />
-      </Portal>
-      <QueryClientProvider client={client}>
-        <ClanProvider>
-          <Router root={Layout}>{routes}</Router>
-        </ClanProvider>
-      </QueryClientProvider>
-    </>
+    <h1>Hello World</h1>
   ),
   root!,
 );
diff --git a/pkgs/clan-app/ui/src/layout/header.tsx b/pkgs/clan-app/ui/src/layout/header.tsx
deleted file mode 100644
index 61b903a69..000000000
--- a/pkgs/clan-app/ui/src/layout/header.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { JSX } from "solid-js";
-import { Typography } from "../components/Typography";
-import { BackButton } from "../components/BackButton";
-
-interface HeaderProps {
-  title: string;
-  toolbar?: JSX.Element;
-  showBack?: boolean;
-}
-export const Header = (props: HeaderProps) => {
-  return (
-    <div class="sticky top-0 z-50 flex items-center border-b bg-white/80 px-6 py-4 backdrop-blur-md border-def-3">
-      <div class="flex-none">
-        {props.showBack && <BackButton />}
-        <span class=" lg:hidden" data-tip="Menu">
-          <label class=" " for="toplevel-drawer">
-            <span class="material-icons">menu</span>
-          </label>
-        </span>
-      </div>
-      <div class="flex-1">
-        <Typography hierarchy="title" size="m" weight="medium" class="">
-          {props.title}
-        </Typography>
-      </div>
-      <div class="flex items-center justify-center gap-3">{props.toolbar}</div>
-    </div>
-  );
-};
diff --git a/pkgs/clan-app/ui/src/layout/layout.tsx b/pkgs/clan-app/ui/src/layout/layout.tsx
deleted file mode 100644
index 61cc32918..000000000
--- a/pkgs/clan-app/ui/src/layout/layout.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Component, createEffect } from "solid-js";
-import { Sidebar } from "@/src/components/Sidebar";
-import { RouteSectionProps, useNavigate } from "@solidjs/router";
-import { useClanContext } from "@/src/contexts/clan";
-
-export const Layout: Component<RouteSectionProps> = (props) => {
-  const navigate = useNavigate();
-  const { clanURIs } = useClanContext();
-  createEffect(() => {
-    console.log(
-      "empty ClanList, redirect to welcome page",
-      clanURIs().length === 0,
-    );
-    if (clanURIs().length === 0) {
-      navigate("/welcome");
-    }
-  });
-
-  return (
-    <div class="h-screen w-full p-4 bg-def-2">
-      <div class="flex size-full flex-row-reverse">
-        <div class="my-2 ml-8 flex-1 overflow-x-hidden overflow-y-scroll rounded-lg border bg-def-1 border-def-3">
-          {props.children}
-        </div>
-        <Sidebar {...props} />
-      </div>
-    </div>
-  );
-};
diff --git a/pkgs/clan-app/ui/src/queries/clan-meta.ts b/pkgs/clan-app/ui/src/queries/clan-meta.ts
deleted file mode 100644
index 1562bd997..000000000
--- a/pkgs/clan-app/ui/src/queries/clan-meta.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { useQuery } from "@tanstack/solid-query";
-import { callApi } from "@/src/api";
-import { activeClanURI, removeClanURI } from "@/src/stores/clan";
-
-export const clanMetaQuery = (uri: string | undefined = undefined) =>
-  useQuery(() => {
-    const clanURI = uri || activeClanURI();
-    const enabled = !!clanURI;
-
-    return {
-      enabled,
-      queryKey: [clanURI, "meta"],
-      queryFn: async () => {
-        console.log("fetching clan meta", clanURI);
-
-        const result = await callApi("get_clan_details", {
-          flake: { identifier: clanURI! },
-        }).promise;
-
-        console.log("result", result);
-
-        if (result.status === "error") {
-          // check if the clan directory no longer exists
-          // remove from the clan list if not
-          result.errors.forEach((error) => {
-            if (error.description === "clan directory does not exist") {
-              removeClanURI(clanURI!);
-            }
-          });
-
-          throw new Error("Failed to fetch data");
-        }
-
-        return result.data;
-      },
-    };
-  });
diff --git a/pkgs/clan-app/ui/src/routes/clans/create.tsx b/pkgs/clan-app/ui/src/routes/clans/create.tsx
deleted file mode 100644
index 1071f7084..000000000
--- a/pkgs/clan-app/ui/src/routes/clans/create.tsx
+++ /dev/null
@@ -1,207 +0,0 @@
-import { callApi, OperationResponse } from "@/src/api";
-import { Show } from "solid-js";
-import {
-  createForm,
-  required,
-  reset,
-  SubmitHandler,
-} from "@modular-forms/solid";
-import toast from "solid-toast";
-import { TextInput } from "@/src/Form/fields/TextInput";
-import { useNavigate } from "@solidjs/router";
-import { Button } from "../../components/Button/Button";
-import Icon from "@/src/components/icon";
-import { useClanContext } from "@/src/contexts/clan";
-
-type CreateForm = Meta & {
-  template: string;
-};
-
-export const CreateClan = () => {
-  const [formStore, { Form, Field }] = createForm<CreateForm>({
-    initialValues: {
-      name: "",
-      description: "",
-      template: "minimal",
-    },
-  });
-  const navigate = useNavigate();
-
-  const { setActiveClanURI, addClanURI } = useClanContext();
-
-  const handleSubmit: SubmitHandler<CreateForm> = async (values, event) => {
-    const { template, ...meta } = values;
-    const response = await callApi("open_file", {
-      file_request: { mode: "save" },
-    }).promise;
-
-    if (response.status !== "success") {
-      toast.error("Cannot select clan directory");
-      return;
-    }
-    const target_dir = response?.data;
-    if (!target_dir) {
-      toast.error("Cannot select clan directory");
-      return;
-    }
-
-    const loading_toast = toast.loading("Creating Clan....");
-    const r = await callApi("create_clan", {
-      opts: {
-        dest: target_dir[0],
-        template: template,
-        initial: {
-          meta,
-          services: {},
-          machines: {},
-        },
-      },
-    }).promise;
-    toast.dismiss(loading_toast);
-
-    if (r.status === "error") {
-      toast.error("Failed to create clan");
-      return;
-    }
-
-    // Will generate a key if it doesn't exist, and add a user to the clan
-    const k = await callApi("create_secrets_user", {
-      flake_dir: target_dir[0],
-    }).promise;
-
-    if (k.status === "error") {
-      toast.error("Failed to generate key");
-      return;
-    }
-
-    if (r.status === "success") {
-      toast.success("Clan Successfully Created");
-
-      addClanURI(target_dir[0]);
-      setActiveClanURI(target_dir[0]);
-
-      navigate("/machines");
-      reset(formStore);
-    }
-  };
-
-  return (
-    <div class="">
-      <Form onSubmit={handleSubmit} shouldActive>
-        <Field name="icon">
-          {(field, props) => (
-            <>
-              <figure>
-                <Show
-                  when={field.value}
-                  fallback={
-                    <span class="material-icons aspect-square size-60 rounded-lg text-[18rem]">
-                      group
-                    </span>
-                  }
-                >
-                  {(icon) => (
-                    <img
-                      class="aspect-square size-60 rounded-lg"
-                      src={icon()}
-                      alt="Clan Logo"
-                    />
-                  )}
-                </Show>
-              </figure>
-            </>
-          )}
-        </Field>
-        <div class="">
-          <Field
-            name="name"
-            validate={[required("Please enter a unique name for the clan.")]}
-          >
-            {(field, props) => (
-              <label class=" w-full">
-                <div class="">
-                  <span class=" block after:ml-0.5 after:text-primary-800 after:content-['*']">
-                    Name
-                  </span>
-                </div>
-
-                <input
-                  {...props}
-                  disabled={formStore.submitting}
-                  required
-                  placeholder="Give your Clan a legendary name"
-                  classList={{ "": !!field.error }}
-                  value={field.value}
-                />
-                <div class="">
-                  {field.error && <span class="">{field.error}</span>}
-                </div>
-              </label>
-            )}
-          </Field>
-          <Field name="description">
-            {(field, props) => (
-              <label class=" w-full">
-                <div class="">
-                  <span class="">Description</span>
-                </div>
-
-                <input
-                  {...props}
-                  disabled={formStore.submitting}
-                  required
-                  type="text"
-                  placeholder="Tell us what makes your Clan legendary"
-                  classList={{ "": !!field.error }}
-                  value={field.value || ""}
-                />
-                <div class="">
-                  {field.error && <span class="">{field.error}</span>}
-                </div>
-              </label>
-            )}
-          </Field>
-          <Field name="template" validate={[required("This is required")]}>
-            {(field, props) => (
-              <div class=" " tabindex="0">
-                <input type="checkbox" />
-                <div class="  font-medium ">Advanced</div>
-                <div>
-                  <TextInput
-                    // adornment={{
-                    //   content: (
-                    //     <span class="-mr-1 text-neutral-500">clan-core #</span>
-                    //   ),
-                    //   position: "start",
-                    // }}
-                    inputProps={props}
-                    label="Template to use"
-                    value={field.value ?? ""}
-                    error={field.error}
-                    required
-                  />
-                </div>
-              </div>
-            )}
-          </Field>
-          {
-            <div class=" justify-end">
-              <Button
-                type="submit"
-                disabled={formStore.submitting}
-                endIcon={<Icon icon="Plus" />}
-              >
-                Create
-              </Button>
-            </div>
-          }
-        </div>
-      </Form>
-    </div>
-  );
-};
-
-type Meta = Extract<
-  OperationResponse<"get_clan_details">,
-  { status: "success" }
->["data"];
diff --git a/pkgs/clan-app/ui/src/routes/clans/details.tsx b/pkgs/clan-app/ui/src/routes/clans/details.tsx
deleted file mode 100644
index 94e444e48..000000000
--- a/pkgs/clan-app/ui/src/routes/clans/details.tsx
+++ /dev/null
@@ -1,151 +0,0 @@
-import { callApi, SuccessQuery } from "@/src/api";
-import { useParams } from "@solidjs/router";
-import { useQueryClient } from "@tanstack/solid-query";
-import { Match, Switch } from "solid-js";
-import { createForm, required, SubmitHandler } from "@modular-forms/solid";
-import toast from "solid-toast";
-import { Button } from "../../components/Button/Button";
-import Icon from "@/src/components/icon";
-import { Header } from "@/src/layout/header";
-import { clanMetaQuery } from "@/src/queries/clan-meta";
-
-interface EditClanFormProps {
-  initial: GeneralData;
-  directory: string;
-}
-
-const EditClanForm = (props: EditClanFormProps) => {
-  const [formStore, { Form, Field }] = createForm<GeneralData>({
-    initialValues: props.initial,
-  });
-  const queryClient = useQueryClient();
-
-  const handleSubmit: SubmitHandler<GeneralData> = async (values, event) => {
-    await toast.promise(
-      (async () => {
-        await callApi("set_clan_details", {
-          options: {
-            flake: { identifier: props.directory },
-            meta: values,
-          },
-        }).promise;
-      })(),
-      {
-        loading: "Updating clan...",
-        success: "Clan Successfully updated",
-        error: "Failed to update clan",
-      },
-    );
-    await queryClient.invalidateQueries({
-      queryKey: [props.directory, "meta"],
-    });
-  };
-  const curr_name = () => props.initial.name;
-
-  return (
-    <Form onSubmit={handleSubmit} shouldActive>
-      <Field name="icon">
-        {(field) => (
-          <>
-            <div class="flex flex-col items-center">
-              <div class="text-3xl text-primary-800">{curr_name()}</div>
-              <div class="text-secondary-800">Wide settings</div>
-              <Icon
-                class="mt-4"
-                icon="ClanIcon"
-                viewBox="0 0 72 89"
-                width={96}
-                height={96}
-              />
-            </div>
-          </>
-        )}
-      </Field>
-      <div class="">
-        <span class="text-xl text-primary-800">General</span>
-        <Field
-          name="name"
-          validate={[required("Please enter a unique name for the clan.")]}
-        >
-          {(field, props) => (
-            <label class="w-full">
-              <div class="">
-                <span class=" block after:ml-0.5 after:text-primary-800 after:content-['*']">
-                  Name
-                </span>
-              </div>
-
-              <input
-                {...props}
-                disabled={formStore.submitting}
-                required
-                placeholder="Clan Name"
-                class=""
-                classList={{ "": !!field.error }}
-                value={field.value}
-              />
-              <div class="">
-                {field.error && <span class="">{field.error}</span>}
-              </div>
-            </label>
-          )}
-        </Field>
-        <Field name="description">
-          {(field, props) => (
-            <label class="w-full">
-              <div class="">
-                <span class="">Description</span>
-              </div>
-
-              <input
-                {...props}
-                disabled={formStore.submitting}
-                required
-                type="text"
-                placeholder="Some words about your clan"
-                class=""
-                classList={{ "": !!field.error }}
-                value={field.value || ""}
-              />
-              <div class="">
-                {field.error && <span class="">{field.error}</span>}
-              </div>
-            </label>
-          )}
-        </Field>
-        {
-          <div class="justify-end">
-            <Button
-              type="submit"
-              disabled={formStore.submitting || !formStore.dirty}
-            >
-              Save
-            </Button>
-          </div>
-        }
-      </div>
-    </Form>
-  );
-};
-
-type GeneralData = SuccessQuery<"get_clan_details">["data"];
-
-export const ClanDetails = () => {
-  const params = useParams();
-  const clan_dir = window.atob(params.id);
-  // Fetch general meta data
-  const clanQuery = clanMetaQuery(clan_dir);
-
-  return (
-    <>
-      <Header title={clan_dir} showBack />
-      <div class="flex flex-col justify-center">
-        <Switch fallback={<>General data not available</>}>
-          <Match when={clanQuery.data}>
-            {(d) => <EditClanForm initial={d()} directory={clan_dir} />}
-          </Match>
-        </Switch>
-      </div>
-    </>
-  );
-};
diff --git a/pkgs/clan-app/ui/src/routes/clans/index.ts b/pkgs/clan-app/ui/src/routes/clans/index.ts
deleted file mode 100644
index 7c0e879c8..000000000
--- a/pkgs/clan-app/ui/src/routes/clans/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from "./list";
-export * from "./create";
-export * from "./details";
diff --git a/pkgs/clan-app/ui/src/routes/clans/list.tsx b/pkgs/clan-app/ui/src/routes/clans/list.tsx
deleted file mode 100644
index 286d36e36..000000000
--- a/pkgs/clan-app/ui/src/routes/clans/list.tsx
+++ /dev/null
@@ -1,160 +0,0 @@
-import { createSignal, For, Show } from "solid-js";
-import { useFloating } from "@/src/floating";
-import { autoUpdate, flip, hide, offset, shift } from "@floating-ui/dom";
-import { A, useNavigate } from "@solidjs/router";
-import { registerClan } from "@/src/hooks";
-import { Button } from "../../components/Button/Button";
-import Icon from "@/src/components/icon";
-import { useClanContext } from "@/src/contexts/clan";
-import { clanURIs, setActiveClanURI } from "@/src/stores/clan";
-import { clanMetaQuery } from "@/src/queries/clan-meta";
-
-interface ClanItemProps {
-  clan_dir: string;
-}
-const ClanItem = (props: ClanItemProps) => {
-  const { clan_dir } = props;
-
-  const details = clanMetaQuery(clan_dir);
-
-  const navigate = useNavigate();
-  const [reference, setReference] = createSignal<HTMLElement>();
-  const [floating, setFloating] = createSignal<HTMLElement>();
-
-  const { activeClanURI, removeClanURI } = useClanContext();
-
-  // `position` is a reactive object.
-  const position = useFloating(reference, floating, {
-    placement: "top",
-
-    // pass options. Ensure the cleanup function is returned.
-    whileElementsMounted: (reference, floating, update) =>
-      autoUpdate(reference, floating, update, {
-        animationFrame: true,
-      }),
-    middleware: [
-      offset(5),
-      shift(),
-      flip(),
-
-      hide({
-        strategy: "referenceHidden",
-      }),
-    ],
-  });
-
-  const handleRemove = () => {
-    removeClanURI(clan_dir);
-  };
-
-  return (
-    <div class="">
-      <div class=" text-primary-800">
-        <div class="">
-          <Button
-            size="s"
-            variant="light"
-            class=""
-            onClick={() => navigate(`/clans/${window.btoa(clan_dir)}`)}
-            endIcon={<Icon icon="Settings" />}
-          ></Button>
-          <Button
-            size="s"
-            variant="light"
-            class=" "
-            onClick={() => {
-              setActiveClanURI(clan_dir);
-            }}
-          >
-            {activeClanURI() === clan_dir ? "active" : "select"}
-          </Button>
-          <Button
-            size="s"
-            variant="light"
-            popovertarget={`clan-delete-popover-${clan_dir}`}
-            popovertargetaction="toggle"
-            ref={setReference}
-            class=" "
-            endIcon={<Icon icon="Trash" />}
-          ></Button>
-          <div
-            popover="auto"
-            role="tooltip"
-            id={`clan-delete-popover-${clan_dir}`}
-            ref={setFloating}
-            style={{
-              position: position.strategy,
-              top: `${position.y ?? 0}px`,
-              left: `${position.x ?? 0}px`,
-            }}
-            class="m-0 bg-transparent"
-          >
-            <Button
-              size="s"
-              onClick={handleRemove}
-              variant="dark"
-              endIcon={<Icon icon="Trash" />}
-            >
-              Remove from App
-            </Button>
-          </div>
-        </div>
-      </div>
-      <div
-        class=""
-        classList={{
-          "": activeClanURI() === clan_dir,
-        }}
-      >
-        {clan_dir}
-      </div>
-
-      <Show when={details.isLoading}>
-        <div class=" h-12 w-80" />
-      </Show>
-      <Show when={details.isSuccess}>
-        <A href={`/clans/${window.btoa(clan_dir)}`}>
-          <div class=" underline">{details.data?.name}</div>
-        </A>
-      </Show>
-      <Show when={details.isSuccess && details.data?.description}>
-        <div class=" text-lg">{details.data?.description}</div>
-      </Show>
-    </div>
-  );
-};
-
-export const ClanList = () => {
-  const navigate = useNavigate();
-  return (
-    <div class="">
-      <div class="">
-        <div class="">
-          <div class=" text-2xl">Registered Clans</div>
-          <div class="flex gap-2">
-            <span class="" data-tip="Register clan">
-              <Button
-                variant="light"
-                onClick={registerClan}
-                startIcon={<Icon icon="List" />}
-              ></Button>
-            </span>
-            <span class="" data-tip="Create new clan">
-              <Button
-                onClick={() => {
-                  navigate("create");
-                }}
-                startIcon={<Icon icon="Plus" />}
-              ></Button>
-            </span>
-          </div>
-        </div>
-        <div class=" shadow">
-          <For each={clanURIs()}>
-            {(value) => <ClanItem clan_dir={value} />}
-          </For>
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/pkgs/clan-app/ui/src/routes/components/index.tsx b/pkgs/clan-app/ui/src/routes/components/index.tsx
deleted file mode 100644
index 7a9d61693..000000000
--- a/pkgs/clan-app/ui/src/routes/components/index.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import { Button } from "../../components/Button/Button";
-import { InputBase, InputLabel } from "@/src/components/inputBase";
-import { TextInput } from "@/src/Form/fields";
-import { Header } from "@/src/layout/header";
-import { createForm, required } from "@modular-forms/solid";
-
-const disabled = [false, true];
-const readOnly = [false, true];
-const error = [false, true];
-
-export const Components = () => {
-  const [formStore, { Form, Field }] = createForm<{ ef: string }>({});
-  return (
-    <>
-      <Header title="Components" />
-
-      <div class="grid grid-cols-2 gap-4 p-4">
-        <span class="col-span-2">Input </span>
-
-        <span>Default</span>
-        <span>Size S</span>
-
-        {disabled.map((disabled) =>
-          readOnly.map((readOnly) =>
-            error.map((hasError) => (
-              <>
-                <span>
-                  {[
-                    disabled ? "Disabled" : "(default)",
-                    readOnly ? "ReadOnly" : "",
-                    hasError ? "Error" : "",
-                  ]
-                    .filter(Boolean)
-                    .join(" + ")}
-                </span>
-                <InputBase
-                  variant="outlined"
-                  value="The Fox jumps!"
-                  disabled={disabled}
-                  error={hasError}
-                  readonly={readOnly}
-                />
-              </>
-            )),
-          ),
-        )}
-        <span class="col-span-2">Input Ghost</span>
-        {disabled.map((disabled) =>
-          readOnly.map((readOnly) =>
-            error.map((hasError) => (
-              <>
-                <span>
-                  {[
-                    disabled ? "Disabled" : "(default)",
-                    readOnly ? "ReadOnly" : "",
-                    hasError ? "Error" : "",
-                  ]
-                    .filter(Boolean)
-                    .join(" + ")}
-                </span>
-                <InputBase
-                  variant="ghost"
-                  value="The Fox jumps!"
-                  disabled={disabled}
-                  error={hasError}
-                  readonly={readOnly}
-                />
-              </>
-            )),
-          ),
-        )}
-        <span class="col-span-2">Input Label</span>
-        <span>Default</span>
-        <InputLabel>Labeltext</InputLabel>
-        <span>Required</span>
-        <InputLabel required>Labeltext</InputLabel>
-        <span>Error</span>
-        <InputLabel error>Labeltext</InputLabel>
-        <span>Error + Reuired</span>
-        <InputLabel error required>
-          Labeltext
-        </InputLabel>
-        <span>Icon</span>
-        <InputLabel help="Some Info">Labeltext</InputLabel>
-        <span>Description</span>
-        <InputLabel description="Some more words">Labeltext</InputLabel>
-      </div>
-      <div class="flex flex-col gap-2">
-        <span class="col-span-full gap-4">Form Layout</span>
-        <TextInput label="Label" value="Value" />
-        <Form
-          onSubmit={() => {
-            console.log("Nothing");
-          }}
-        >
-          <Field
-            name="ef"
-            validate={required(
-              "This field is required very long descriptive error message",
-            )}
-          >
-            {(field, inputProps) => (
-              <TextInput
-                label="Write something"
-                error={field.error}
-                required
-                value={field.value || ""}
-                inputProps={inputProps}
-              />
-            )}
-          </Field>
-          <Button>Submit</Button>
-        </Form>
-        <TextInput label="Label" required value="Value" />
-      </div>
-    </>
-  );
-};
diff --git a/pkgs/clan-app/ui/src/routes/hosts/view.tsx b/pkgs/clan-app/ui/src/routes/hosts/view.tsx
deleted file mode 100644
index 737e7e6fb..000000000
--- a/pkgs/clan-app/ui/src/routes/hosts/view.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import { type Component, createSignal, For, Show } from "solid-js";
-import { OperationResponse, callApi } from "@/src/api";
-import { Button } from "../../components/Button/Button";
-import Icon from "@/src/components/icon";
-
-type ServiceModel = Extract<
-  OperationResponse<"list_mdns_services">,
-  { status: "success" }
->["data"]["services"];
-
-export const HostList: Component = () => {
-  const [services, setServices] = createSignal<ServiceModel>();
-
-  return (
-    <div>
-      <div class="" data-tip="Refresh install targets">
-        <Button
-          variant="light"
-          onClick={() => callApi("list_mdns_services", {})}
-          startIcon={<Icon icon="Update" />}
-        ></Button>
-      </div>
-      <div class="flex flex-wrap gap-2">
-        <Show when={services()}>
-          {(services) => (
-            <For each={Object.values(services())}>
-              {(service) => (
-                <div class="w-[30rem] rounded-lg bg-white p-5 shadow-lg">
-                  <div class=" flex flex-col shadow">
-                    <div class="">
-                      <div class="">Host</div>
-                      <div class="">{service.host}</div>
-                      <div class=""></div>
-                    </div>
-
-                    <div class="">
-                      <div class="">IP</div>
-                      <div class="">{service.ip}</div>
-                      <div class=""></div>
-                    </div>
-                  </div>
-
-                  <div class=" w-full px-0">
-                    <div class="  ">
-                      <input type="radio" name="my-accordion-4" />
-                      <div class=" text-xl font-medium">Details</div>
-                      <div class="">
-                        <p>
-                          <span class="font-bold">Interface</span>
-                          {service.interface}
-                        </p>
-                        <p>
-                          <span class="font-bold">Protocol</span>
-                          {service.protocol}
-                        </p>
-
-                        <p>
-                          <span class="font-bold">Type</span>
-                          {service.type_}
-                        </p>
-                        <p>
-                          <span class="font-bold">Domain</span>
-                          {service.domain}
-                        </p>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              )}
-            </For>
-          )}
-        </Show>
-      </div>
-    </div>
-  );
-};
diff --git a/pkgs/clan-app/ui/src/routes/welcome/index.tsx b/pkgs/clan-app/ui/src/routes/welcome/index.tsx
deleted file mode 100644
index 8de9672f5..000000000
--- a/pkgs/clan-app/ui/src/routes/welcome/index.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { Button } from "../../components/Button/Button";
-import { registerClan } from "@/src/hooks";
-import { useNavigate } from "@solidjs/router";
-import { useClanContext } from "@/src/contexts/clan";
-
-export const Welcome = () => {
-  const navigate = useNavigate();
-  const { setActiveClanURI } = useClanContext();
-  return (
-    <div class="min-h-[calc(100vh-10rem)]">
-      <div class="mb-32 text-center">
-        <div class="max-w-md">
-          <h1 class="text-5xl font-bold">Welcome to Clan</h1>
-          <p class="py-6">Own the services you use.</p>
-          <div class="flex flex-col items-start gap-2">
-            <Button class="w-full" onClick={() => navigate("/clans/create")}>
-              Build your own
-            </Button>
-            <Button
-              variant="light"
-              class="w-full text-right !text-primary-800"
-              onClick={async () => {
-                const uri = await registerClan();
-                if (uri) {
-                  setActiveClanURI(uri);
-                  navigate("/machines");
-                }
-              }}
-            >
-              Or select folder
-            </Button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/pkgs/clan-app/ui/src/stores/clan.tsx b/pkgs/clan-app/ui/src/stores/clan.tsx
deleted file mode 100644
index 0cb0747df..000000000
--- a/pkgs/clan-app/ui/src/stores/clan.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import { createStore, produce } from "solid-js/store";
-import { makePersisted } from "@solid-primitives/storage";
-
-interface ClanStoreType {
-  clanURIs: string[];
-  activeClanURI?: string;
-}
-
-const [store, setStore] = makePersisted(
-  createStore<ClanStoreType>({
-    clanURIs: [],
-  }),
-  {
-    name: "clanStore",
-    storage: localStorage,
-  },
-);
-
-/**
- * Retrieves the active clan URI from the store.
- *
- * @function
- * @returns {string} The URI of the active clan.
- */
-const activeClanURI = (): string | undefined => store.activeClanURI;
-
-/**
- * Updates the active Clan URI in the store.
- *
- * @param {string} uri - The URI to be set as the active Clan URI.
- */
-const setActiveClanURI = (uri: string) => setStore("activeClanURI", uri);
-
-/**
- * Retrieves the current list of clan URIs from the store.
- *
- * @function clanURIs
- * @returns {*} The clan URIs from the store.
- */
-const clanURIs = (): string[] => store.clanURIs;
-
-/**
- * Adds a new clan URI to the list of clan URIs in the store.
- *
- * @param {string} uri - The URI of the clan to be added.
- *
- */
-const addClanURI = (uri: string) =>
-  setStore("clanURIs", store.clanURIs.length, uri);
-
-/**
- * Removes a specified URI from the clan URI list and updates the active clan URI.
- *
- * This function modifies the store in the following ways:
- * - Removes the specified URI from the `clanURIs` array.
- * - Clears the `activeClanURI` if the removed URI matches the currently active URI.
- * - Sets a new active clan URI to the last URI in the `clanURIs` array if the active clan URI is undefined
- *   and there are remaining clan URIs in the list.
- *
- * @param {string} uri - The URI to be removed from the clan list.
- */
-const removeClanURI = (uri: string) => {
-  setStore(
-    produce((state) => {
-      // remove from the clan list
-      state.clanURIs = state.clanURIs.filter((el) => el !== uri);
-
-      // clear active clan uri if it's the one being removed
-      if (state.activeClanURI === uri) {
-        state.activeClanURI = undefined;
-      }
-
-      // select a new active URI if at least one remains
-      if (!state.activeClanURI && state.clanURIs.length > 0) {
-        state.activeClanURI = state.clanURIs[state.clanURIs.length - 1];
-      }
-    }),
-  );
-};
-
-export {
-  store,
-  activeClanURI,
-  setActiveClanURI,
-  clanURIs,
-  addClanURI,
-  removeClanURI,
-};
diff --git a/pkgs/clan-app/ui/src/three.tsx b/pkgs/clan-app/ui/src/three.tsx
deleted file mode 100644
index 30f4101fb..000000000
--- a/pkgs/clan-app/ui/src/three.tsx
+++ /dev/null
@@ -1,271 +0,0 @@
-import { createSignal, onCleanup, onMount, Show } from "solid-js";
-import * as THREE from "three";
-import { Button } from "./components/Button/Button";
-import Icon from "./components/icon";
-
-function addCubesSpiral({
-  scene,
-  count,
-  gap,
-  selected,
-}: {
-  scene: THREE.Scene;
-  count: number;
-  gap: number;
-  selected?: string;
-}) {
-  const cubeSize = 1;
-  const baseSize = 1.4;
-
-  const cubeGeometry = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize);
-  const baseGeometry = new THREE.BoxGeometry(baseSize, 0.05, baseSize);
-
-  const cubeMaterial = new THREE.MeshStandardMaterial({
-    color: 0xe0e0e0,
-    roughness: 0.6,
-    metalness: 0.1,
-  });
-
-  const baseMaterial = new THREE.MeshStandardMaterial({
-    color: 0xffffff,
-    roughness: 0.8,
-    metalness: 0,
-  });
-
-  let placed = 0;
-  const visited = new Set<string>();
-
-  let x = 0;
-  let z = 0;
-
-  let dx = 1;
-  let dz = 0;
-
-  let segmentLength = 1;
-  let segmentPassed = 0;
-  let stepsTaken = 0;
-  let turnCounter = 0;
-
-  while (placed < count) {
-    const key = `${x},${z}`;
-    if (!visited.has(key)) {
-      if ((x + z) % 2 === 0) {
-        // Place base
-        const base = new THREE.Mesh(baseGeometry, baseMaterial);
-        base.position.set(x * gap, 0, z * gap);
-        base.receiveShadow = true;
-        base.castShadow = true;
-        scene.add(base);
-
-        // Place cube
-        const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
-        if (selected && +selected === placed) {
-          console.log("Selected", placed);
-          cube.material = new THREE.MeshStandardMaterial({
-            color: 0x99e0ff,
-            roughness: 0.6,
-            metalness: 0.1,
-          });
-          base.material = new THREE.MeshStandardMaterial({
-            color: 0x99e0ff,
-            roughness: 0.6,
-            metalness: 0.1,
-          });
-        }
-        // Store
-        cube.userData = { id: placed };
-
-        cube.position.set(x * gap, 0.55, z * gap);
-        cube.castShadow = true;
-        scene.add(cube);
-
-        placed++;
-      }
-      visited.add(key);
-    }
-
-    x += dx;
-    z += dz;
-    segmentPassed++;
-    stepsTaken++;
-
-    if (segmentPassed === segmentLength) {
-      segmentPassed = 0;
-
-      // Turn right: [1,0] → [0,1] → [-1,0] → [0,-1]
-      const temp = dx;
-      dx = -dz;
-      dz = temp;
-
-      turnCounter++;
-      if (turnCounter % 2 === 0) {
-        segmentLength++;
-      }
-    }
-
-    // Fail-safe to prevent infinite loops
-    if (stepsTaken > count * 20) break;
-  }
-
-  // Clean up geometry
-  cubeGeometry.dispose();
-  baseGeometry.dispose();
-}
-
-interface ViewProps {
-  count: number;
-  onCubeClick: (id: number) => void;
-  selected?: string;
-}
-const View = (props: ViewProps) => {
-  let container: HTMLDivElement | undefined;
-
-  onMount(() => {
-    const scene = new THREE.Scene();
-
-    const camera = new THREE.PerspectiveCamera(
-      75,
-      container!.clientWidth / container!.clientHeight,
-      0.1,
-      1000,
-    );
-
-    // Transparent renderer
-    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
-    renderer.setSize(container!.clientWidth, container!.clientHeight);
-    renderer.setClearColor(0x000000, 0); // Transparent background
-    renderer.shadowMap.enabled = true;
-    renderer.shadowMap.type = THREE.PCFSoftShadowMap;
-    container!.appendChild(renderer.domElement);
-
-    // Cube (casts shadow)
-    const cubeGeometry = new THREE.BoxGeometry();
-    const cubeMaterial = new THREE.MeshStandardMaterial({
-      color: 0xb0c0c2,
-      roughness: 0.4,
-      metalness: 0.1,
-    });
-
-    const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
-    cube.castShadow = true;
-    cube.position.y = 1;
-    // scene.add(cube);
-    addCubesSpiral({
-      scene,
-      count: props.count,
-      gap: 1.5,
-      selected: props.selected,
-    });
-
-    const factor = Math.log10(props.count) / 10 + 1;
-    camera.position.set(5 * factor, 6 * factor, 5 * factor); // from above and to the side
-    camera.lookAt(0, 0, 0);
-
-    // Floor (receives shadow)
-    const floorGeometry = new THREE.PlaneGeometry(100, 100);
-    const floorMaterial = new THREE.ShadowMaterial({ opacity: 0.1 });
-    const floor = new THREE.Mesh(floorGeometry, floorMaterial);
-    floor.rotation.x = -Math.PI / 2;
-    floor.position.y = -0.1;
-    floor.receiveShadow = true;
-    scene.add(floor);
-
-    // Light (casts shadow)
-    const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
-    directionalLight.position.set(-20, 30, 20); // above & behind the cube
-    directionalLight.castShadow = true;
-    directionalLight.shadow.mapSize.width = 2048; // higher res = smoother shadow
-    directionalLight.shadow.mapSize.height = 2048;
-    directionalLight.shadow.radius = 6;
-    // directionalLight.shadow.radius
-
-    scene.add(directionalLight);
-    // Optional ambient light for slight scene illumination
-    scene.add(new THREE.AmbientLight(0xffffff, 0.2));
-
-    // Animate
-    // const animate = () => {
-    //   animationId = requestAnimationFrame(animate);
-    // };
-
-    const raycaster = new THREE.Raycaster();
-    const mouse = new THREE.Vector2();
-
-    const handleClick = (event: MouseEvent) => {
-      const rect = renderer.domElement.getBoundingClientRect();
-      mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
-      mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
-
-      raycaster.setFromCamera(mouse, camera);
-      const intersects = raycaster.intersectObjects(scene.children, true);
-      const cube = intersects.find((i) => i.object.userData?.id !== undefined);
-
-      if (cube) {
-        props.onCubeClick(cube.object.userData.id);
-      }
-    };
-
-    renderer.domElement.addEventListener("click", handleClick);
-
-    renderer.render(scene, camera);
-    // let animationId = requestAnimationFrame(animate);
-
-    onCleanup(() => {
-      //   cancelAnimationFrame(animationId);
-      renderer.dispose();
-      cubeGeometry.dispose();
-      cubeMaterial.dispose();
-      floorGeometry.dispose();
-      floorMaterial.dispose();
-      container?.removeChild(renderer.domElement);
-      renderer.domElement.removeEventListener("click", handleClick);
-    });
-  });
-
-  return (
-    <div
-      ref={container}
-      style={{ width: "100%", height: "100%", overflow: "hidden" }}
-    />
-  );
-};
-
-export const ThreePlayground = () => {
-  const [count, setCount] = createSignal(1);
-  const [selected, setSelected] = createSignal<string>("");
-
-  const onCubeClick = (id: number) => {
-    console.log(`Cube ${id} clicked`);
-    setSelected(`${id}`);
-  };
-
-  return (
-    <div class="relative size-full">
-      <Show when={selected() || !selected()} keyed>
-        <Show when={count()} keyed>
-          {(c) => (
-            <View count={c} onCubeClick={onCubeClick} selected={selected()} />
-          )}
-        </Show>
-      </Show>
-      <div class="absolute bottom-4 right-0 z-10 flex w-full items-center justify-center">
-        <div class="flex w-fit items-center justify-between gap-4 rounded-xl border px-8 py-2 text-white shadow-2xl bg-inv-1 border-inv-1">
-          <Button startIcon={<Icon icon="Edit" />}></Button>
-          <Button startIcon={<Icon icon="Grid" />}></Button>
-          <Button
-            startIcon={<Icon icon="Plus" />}
-            onClick={() => {
-              setCount((c) => c + 1);
-            }}
-          ></Button>
-          <Button
-            startIcon={<Icon icon="Trash" />}
-            onClick={() => {
-              setCount((c) => c - 1);
-            }}
-          ></Button>
-        </div>
-      </div>
-    </div>
-  );
-};