From cd2cdbe25406b1cd9e1765db9c0128407077de99 Mon Sep 17 00:00:00 2001
From: melvinchia3636 <melvinchia623600@gmail.com>
Date: Fri, 29 May 2026 21:05:25 +0800
Subject: [PATCH] feat: refactor client codebase in progress

---
 .gitignore                                    |   2 +-
 apps/lifeforge--achievements                  |   1 +
 apps/package.json                             |   9 +
 bun.lock                                      |  11 -
 client/index.html                             |  14 +-
 client/package.json                           |   5 -
 client/src/App.tsx                            |  13 +-
 client/src/bootstrap.tsx                      |   5 +
 .../components/AvatarColumn.tsx               |  42 +++-
 .../components/OrdinaryColumn.tsx             |  10 +-
 .../components/PasswordColumn.tsx             |   4 +-
 .../components/TwoFAColumn.tsx                |  10 +-
 client/src/core/accountSettings/index.tsx     |   6 +-
 .../modals/DisableTwoFAModal.tsx              |  42 +---
 .../components/OTPConfirmScreen.tsx           |  14 +-
 .../components/QRCodeDisplay.tsx              |  43 ++--
 .../components/TwoFAEnableProcedure.tsx       |  13 +-
 .../modals/EnableTwoFAModal/index.tsx         |   8 +-
 .../accountSettings/modals/ModifyModal.tsx    |   2 +-
 .../components/ConfirmScreen.tsx              |  49 +++--
 .../components/ErrorScreen.tsx                |  39 +++-
 .../components/SuccessScreen.tsx              |  46 +++-
 .../hooks/useQRLoginApproval.ts               |   2 +-
 .../modals/QRLoginScannerModal/index.tsx      |   6 +-
 .../src/core/apiKeys/components/EntryItem.tsx |  55 ++---
 client/src/core/apiKeys/index.tsx             |  16 +-
 .../core/apiKeys/modals/ModifyAPIKeyModal.tsx |   8 +-
 .../modals/ModulesRequiredListModal.tsx       |  61 ++++--
 .../src/core/auth/components/AuthFooter.tsx   |  19 +-
 client/src/core/auth/components/AuthForm.tsx  |  12 +-
 .../src/core/auth/components/AuthHeader.tsx   |   6 +-
 .../core/auth/components/AuthSideImage.tsx    |   2 +-
 .../components/SigninWithProviderButton.tsx   |   2 +-
 .../components/AuthSignInButtons/index.tsx    |  24 +-
 .../auth/components/OrAuthWithDivider.tsx     |  29 +++
 client/src/core/auth/index.tsx                |   2 +-
 .../QRLoginModal/components/QRByStatus.tsx    |  62 ++++++
 .../QRLoginModal/components/QRContent.tsx     | 132 +++++------
 .../QRLoginModal/hooks/useQRLoginSession.ts   |  14 +-
 .../core/auth/modals/QRLoginModal/index.tsx   |   6 +-
 .../TwoFAModal/components/ResendOTPButton.tsx |   2 +-
 .../TwoFAModal/components/UsingAuthApp.tsx    |  22 +-
 .../TwoFAModal/components/UsingEmail.tsx      | 111 +++++-----
 .../src/core/auth/modals/TwoFAModal/index.tsx |  16 +-
 client/src/core/auth/pages/LoginPage.tsx      |  13 +-
 .../src/core/auth/pages/UserCreationPage.tsx  |  52 +++--
 .../core/backups/components/BackupItem.tsx    |  67 +++---
 .../backups/components/CreateBackupModal.tsx  |   2 +-
 client/src/core/backups/index.tsx             |  55 ++---
 .../dashboard/components/DashboardGrid.tsx    |  37 ++--
 client/src/core/dashboard/index.tsx           |   5 +-
 .../components/ComponentItem.tsx              |   5 +-
 client/src/core/dashboard/widgets/Quotes.tsx  |   3 +-
 client/src/core/documentation/index.tsx       |   8 -
 .../Categories/components/CategoryItem.tsx    |  75 +++++--
 .../components/ModifyCategoryModal.tsx        | 175 ++++++++-------
 .../moduleManager/pages/Categories/index.tsx  |  37 ++--
 .../pages/Modules/components/ModuleItem.tsx   | 112 ++++++----
 .../moduleManager/pages/Modules/index.tsx     |  36 +--
 .../components/BgImageSelector/index.tsx      |   4 +-
 .../components/AdjustmentColumn.tsx           |   2 +-
 .../components/BgTempSelector/index.tsx       |  90 +++++---
 .../components/BorderRadiusSelector/index.tsx |   6 +-
 .../components/CustomFontUploadModal.tsx      |   3 +-
 .../components/FontListItem.tsx               |   2 +-
 .../tabs/CustomFontSelector.tsx               |   4 +-
 .../tabs/GoogleFontSelector.tsx               |  10 +-
 .../components/FontFamilySelector/index.tsx   |  24 +-
 .../utils/detectFontMetadata.ts               |   2 +-
 .../components/FontScaleSelector.tsx          |  37 ++--
 .../components/LanguageSelector.tsx           |  44 ++--
 .../components/DefaultThemeColorSelector.tsx  |  68 ++++--
 .../components/ThemeColorSelector/index.tsx   |  34 +--
 .../components/ThemeSelector.tsx              |  94 ++++----
 client/src/core/personalization/index.tsx     |   6 +-
 .../federation/loaders/loadModuleConfig.ts    |   2 +-
 .../providers/CoreFederationProvider.tsx      |   1 +
 client/src/federation/utils/sortRoutes.ts     |   2 +-
 client/src/forgeAPI.tsx                       |   4 +-
 client/src/i18n.ts                            |  10 +-
 client/src/index.css                          |  24 +-
 client/src/index.tsx                          |   7 +-
 .../features/APIKeyStatusProvider.tsx         |  38 +++-
 .../features/UserPersonalizationProvider.tsx  |   2 +-
 client/src/providers/index.tsx                |   2 +-
 client/src/routes/components/RootLayout.tsx   |  19 +-
 .../src/routes/components/Sidebar/Sidebar.tsx |  75 ++++---
 .../components/Sidebar/SidebarBottomBar.tsx   | 133 ++++++-----
 .../components/Sidebar/SidebarEventBanner.tsx |  63 +++---
 .../components/Sidebar/SidebarHeader.tsx      |  60 ++---
 .../components/Sidebar/SidebarItems.tsx       | 106 ++++-----
 client/src/routes/hooks/useAppRouter.ts       |  14 +-
 .../routes/providers/AppRoutesProvider.tsx    |   4 +-
 client/tsconfig.json                          |  33 ++-
 client/vite.config.ts                         | 178 ++++++++-------
 docs/src/main.tsx                             |   2 +-
 .../src/components/auth/OTPInputBox/index.tsx |   4 +-
 .../auth/sso/UnauthorizedScreen/index.tsx     |   2 +-
 .../data-display/OptionsColumn/index.tsx      |   6 +-
 .../components/data-display/TagChip/index.tsx |  15 +-
 .../data-display/ViewModeSelector/index.tsx   |   4 +-
 .../VirtualGrid/VirtualGrid.stories.tsx       |   5 +-
 .../Widget/components/WidgetIcon.tsx          |   4 +-
 .../components/data-display/Widget/index.tsx  |   2 +-
 .../feedback/LoadingScreen/index.tsx          |   9 +-
 .../ui/src/components/inputs/Button/index.tsx |   2 +-
 .../src/components/inputs/Checkbox/index.tsx  |   2 +-
 .../modals/FlatUIColorsModal/index.tsx        |   2 +-
 .../modals/ModandiColorPaletteModal/index.tsx |   8 +-
 .../components/ColorItem.tsx                  |   2 +-
 .../components/inputs/ColorInput/index.tsx    |   2 +-
 .../components/ComboboxOption.tsx             |   4 +-
 .../components/ComboboxOptions.tsx            |   2 +-
 .../DateInput/components/CalendarHeader.tsx   |   7 +-
 .../src/components/inputs/DateInput/index.tsx |  20 +-
 .../ui/src/components/inputs/FAB/index.tsx    |  10 +-
 .../components/AIImageGenerator.tsx           |   5 +-
 .../FilePickerModal/components/ImageURL.tsx   |   2 +-
 .../LocalUpload/components/DnDContainer.tsx   |  10 +-
 .../components/PreviewContainer.tsx           |   8 +-
 .../components/ColorFilter.tsx                |   2 +-
 .../src/components/inputs/FileInput/index.tsx |  38 ++--
 .../components/ChipSelector.tsx               |   2 +-
 .../IconPickerModal/components/IconEntry.tsx  |   2 +-
 .../IconInput/IconPickerModal/index.tsx       |   8 +-
 .../IconSetList/components/CategoryEntry.tsx  |   2 +-
 .../inputs/Listbox/Listbox.stories.tsx        |  31 ++-
 .../src/components/inputs/Listbox/index.tsx   |   4 +-
 .../components/ListboxNullOption.tsx          |  10 +-
 .../ListboxInput/components/ListboxOption.tsx |   4 +-
 .../components/ListboxOptions.tsx             |   2 +-
 .../components/inputs/QRCodeScanner/index.tsx |   2 +-
 .../components/SelectableFormWrapper.tsx      |   2 +-
 .../SearchInput/SearchInput.stories.tsx       |   2 +-
 .../components/inputs/SearchInput/index.tsx   |  16 +-
 .../SliderInput/components/SliderTicks.tsx    |   2 +-
 .../ui/src/components/inputs/Switch/index.tsx |   5 +-
 .../components/inputs/TextAreaInput/index.tsx |   3 +-
 .../shared/components/InputActionButton.tsx   |   2 +-
 .../components/layout/Card/Card.stories.tsx   |   2 +-
 .../ui/src/components/layout/Card/index.tsx   |   2 +-
 .../components/layout/ModuleHeader/index.tsx  |   7 +-
 .../ModuleWrapper/ModuleWrapper.stories.tsx   |   4 +-
 .../src/components/navigation/Tabs/index.tsx  |   2 +-
 .../components/SidebarActionButton.tsx        |   2 +-
 .../components/SidebarCancelButton.tsx        |   2 +-
 .../components/SidebarItemIcon.tsx            |   2 +-
 .../components/SidebarItemSubsection.tsx      |   2 +-
 .../SidebarItemSubsectionExpandIcon.tsx       |   2 +-
 .../components/SidebarItemWrapper.tsx         |   2 +-
 .../components/SidebarSubsectionItemLink.tsx  |   2 +-
 .../SidebarSubsectionItemWithOnClick.tsx      |   2 +-
 .../navigation/sidebar/SidebarItem/index.tsx  |   2 +-
 .../sidebar/SidebarWrapper/index.tsx          |   2 +-
 .../ContextMenu/ContextMenu.stories.tsx       |   4 +-
 .../components/ContextMenuGroup.tsx           |   2 +-
 .../components/overlays/ContextMenu/index.tsx |   2 +-
 .../core/components/ModalHeader.stories.tsx   |   2 +-
 .../modals/core/components/ModalHeader.tsx    |  11 +-
 .../modals/core/components/ModalWrapper.tsx   |   2 +-
 .../features/ConfirmationModal/index.tsx      |  15 +-
 .../primitives/Bordered/Bordered.css.ts       |  10 +-
 .../primitives/Bordered/Bordered.stories.tsx  |  39 ++--
 .../components/primitives/Bordered/index.tsx  |  19 +-
 .../src/components/primitives/Box/Box.css.ts  |  10 +-
 .../components/primitives/Box/Box.stories.tsx |  59 +++--
 .../src/components/primitives/Box/index.tsx   |  20 +-
 .../components/primitives/Flex/Flex.css.ts    |   7 +-
 .../primitives/Flex/Flex.stories.tsx          |  38 ++--
 .../src/components/primitives/Flex/index.tsx  |  13 +-
 .../components/primitives/Grid/Grid.css.ts    |   7 +-
 .../primitives/Grid/Grid.stories.tsx          |  30 +--
 .../src/components/primitives/Grid/index.tsx  |  17 +-
 .../src/components/primitives/Icon/index.tsx  |  25 ++-
 .../components/primitives/Ring/Ring.css.ts    |  63 ++++++
 .../primitives/Ring/Ring.stories.tsx          | 206 ++++++++++++++++++
 .../src/components/primitives/Ring/index.tsx  | 176 +++++++++++++++
 .../primitives/Slot/Slot.stories.tsx          |   6 +-
 .../primitives/Stack/Stack.stories.tsx        |  65 ++++++
 .../src/components/primitives/Stack/index.tsx |   9 +
 .../primitives/Text/Text.stories.tsx          |  11 +-
 .../src/components/primitives/Text/index.tsx  |   1 +
 .../Transition/Transition.stories.tsx         |  20 +-
 .../primitives/WithDivide/WithDivide.css.ts   |  22 +-
 .../WithDivide/WithDivide.stories.tsx         |  25 ++-
 .../primitives/WithDivide/index.tsx           |  50 +----
 .../ui/src/components/primitives/index.ts     |   4 +
 .../components/utilities/Scrollbar/index.tsx  |   2 +-
 .../components/utilities/Tooltip/index.tsx    |   4 +-
 packages/ui/src/index.ts                      |   5 +-
 .../ui}/src/providers/BackgroundProvider.tsx  |  37 ++--
 packages/ui/src/providers/index.ts            |   2 +
 packages/ui/src/system/props-resolver.ts      |  21 --
 packages/ui/src/system/responsive/constant.ts |   8 +
 .../ui/src/system/responsive/index.css.ts     |   4 +-
 packages/ui/src/system/tokens/index.ts        |   6 +-
 packages/ui/src/system/tokens/props/index.ts  |   7 +
 .../tokens/{ => props}/layout-props.css.ts    |   6 +-
 .../system/tokens/props/rounded-props.css.ts  |  28 +++
 .../tokens/{ => props}/spacing-props.css.ts   |   2 +-
 .../tokens/{ => props}/theme-props.css.ts     |   2 +-
 .../tokens/resolvers/common-props-resolver.ts |  22 +-
 .../ui/src/system/tokens/resolvers/index.ts   |   2 +
 .../resolvers/layout-props-resolvers.ts       |   2 +-
 .../resolvers/rounded-props-resolvers.ts      |  21 ++
 .../resolvers/spacing-props-resolvers.ts      |   2 +-
 packages/ui/src/system/vars.css.ts            |   2 +
 .../routes/functions/controllerLogic.ts       |   1 +
 .../functions/routes/utils/parsePayload.ts    |   3 +-
 .../routes/constants/corsAllowedOrigins.ts    |   3 +-
 server/src/core/routes/core-routes.types.ts   |   3 +
 server/src/core/routes/core.routes.ts         |   4 +-
 server/src/lib/apiKeys/routes/entries.ts      |   7 +-
 server/src/lib/modules/routes/categories.ts   |   2 +-
 server/src/lib/modules/routes/modules.ts      |   2 +-
 server/src/lib/user/routes/twoFA.ts           |  66 +++---
 shared/src/api/core/forgeEndpoint.ts          |   2 +
 shared/src/index.ts                           |   2 +-
 shared/src/providers/ModalStoreProvider.tsx   |  77 -------
 .../with-crud/client/utils/forgeAPI.ts        |   2 +-
 220 files changed, 2715 insertions(+), 1835 deletions(-)
 create mode 160000 apps/lifeforge--achievements
 create mode 100644 apps/package.json
 create mode 100644 client/src/bootstrap.tsx
 create mode 100644 client/src/core/auth/components/OrAuthWithDivider.tsx
 create mode 100644 client/src/core/auth/modals/QRLoginModal/components/QRByStatus.tsx
 create mode 100644 packages/ui/src/components/primitives/Ring/Ring.css.ts
 create mode 100644 packages/ui/src/components/primitives/Ring/Ring.stories.tsx
 create mode 100644 packages/ui/src/components/primitives/Ring/index.tsx
 create mode 100644 packages/ui/src/components/primitives/Stack/Stack.stories.tsx
 create mode 100644 packages/ui/src/components/primitives/Stack/index.tsx
 rename {shared => packages/ui}/src/providers/BackgroundProvider.tsx (55%)
 create mode 100644 packages/ui/src/system/tokens/props/index.ts
 rename packages/ui/src/system/tokens/{ => props}/layout-props.css.ts (89%)
 create mode 100644 packages/ui/src/system/tokens/props/rounded-props.css.ts
 rename packages/ui/src/system/tokens/{ => props}/spacing-props.css.ts (98%)
 rename packages/ui/src/system/tokens/{ => props}/theme-props.css.ts (94%)
 create mode 100644 packages/ui/src/system/tokens/resolvers/rounded-props-resolvers.ts
 create mode 100644 server/src/core/routes/core-routes.types.ts
 delete mode 100644 shared/src/providers/ModalStoreProvider.tsx

diff --git a/.gitignore b/.gitignore
index 79ce260dc..7a3c37870 100644
--- a/.gitignore
+++ b/.gitignore
@@ -55,7 +55,7 @@ env/*
 keys
 
 # user-generated files
-apps
+# apps
 locales/*
 !apps/**/locales/*
 !locales/lifeforge--lang-en
\ No newline at end of file
diff --git a/apps/lifeforge--achievements b/apps/lifeforge--achievements
new file mode 160000
index 000000000..20fca918f
--- /dev/null
+++ b/apps/lifeforge--achievements
@@ -0,0 +1 @@
+Subproject commit 20fca918f44c41f77edafa277fbae5acdaef9ba1
diff --git a/apps/package.json b/apps/package.json
new file mode 100644
index 000000000..50213a2a0
--- /dev/null
+++ b/apps/package.json
@@ -0,0 +1,9 @@
+{
+    "name": "@lifeforge/apps",
+    "private": true,
+    "description": "LifeForge modules",
+    "dependencies": {
+        "@lifeforge/TedMeadow--lang-ru": "workspace:*",
+        "@lifeforge/lifeforge--achievements": "workspace:*"
+    }
+}
diff --git a/bun.lock b/bun.lock
index 9c23aefae..7641f5198 100644
--- a/bun.lock
+++ b/bun.lock
@@ -74,9 +74,6 @@
         "@iconify/react": "^6.0.2",
         "@lifeforge/shared": "workspace:*",
         "@lifeforge/ui": "workspace:*",
-        "@tailwindcss/postcss": "^4.1.5",
-        "@tailwindcss/typography": "^0.5.19",
-        "@tailwindcss/vite": "^4.1.5",
         "@tanstack/react-query": "^5.90.11",
         "@types/node": "^24.7.2",
         "@types/react-virtualized": "^9.22.3",
@@ -990,10 +987,6 @@
 
     "@tailwindcss/oxide-win32-x64-msvc": ["@tailwindcss/oxide-win32-x64-msvc@4.3.0", "", { "os": "win32", "cpu": "x64" }, "sha512-Mvrf2kXW/yeW/OTezZlCGOirXRcUuLIBx/5Y12BaPM7wJoryG6dfS/NJL8aBPqtTEx/Vm4T4vKzFUcKDT+TKUA=="],
 
-    "@tailwindcss/postcss": ["@tailwindcss/postcss@4.3.0", "", { "dependencies": { "@alloc/quick-lru": "^5.2.0", "@tailwindcss/node": "4.3.0", "@tailwindcss/oxide": "4.3.0", "postcss": "^8.5.10", "tailwindcss": "4.3.0" } }, "sha512-Jm05Tjx+9yCLGv5qw1c+84Psds8MnyrEQYCB+FFk2lgGiUjlRqdxke4mVTuYrj2xnVZqKim2Apr5ySuQRYAw/w=="],
-
-    "@tailwindcss/typography": ["@tailwindcss/typography@0.5.19", "", { "dependencies": { "postcss-selector-parser": "6.0.10" }, "peerDependencies": { "tailwindcss": ">=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1" } }, "sha512-w31dd8HOx3k9vPtcQh5QHP9GwKcgbMp87j58qi6xgiBnFFtKEAgCWnDw4qUT8aHwkCp8bKvb/KGKWWHedP0AAg=="],
-
     "@tailwindcss/vite": ["@tailwindcss/vite@4.3.0", "", { "dependencies": { "@tailwindcss/node": "4.3.0", "@tailwindcss/oxide": "4.3.0", "tailwindcss": "4.3.0" }, "peerDependencies": { "vite": "^5.2.0 || ^6 || ^7 || ^8" } }, "sha512-t6J3OrB5Fc0ExuhohouH0fWUGMYL6PTLhW+E7zIk/pdbnJARZDCwjBznFnkh5ynRnIRSI4YjtTH0t6USjJISrw=="],
 
     "@tanstack/query-core": ["@tanstack/query-core@5.100.14", "", {}, "sha512-5X41dGpxgeaHISCRW2oYwcSycZeULZzAunaudXT9ov1KOTj9xwt0CH6hbwqP1/z74ZWF7rYFnDpyYH07XFcZew=="],
@@ -1686,8 +1679,6 @@
 
     "css.escape": ["css.escape@1.5.1", "", {}, "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg=="],
 
-    "cssesc": ["cssesc@3.0.0", "", { "bin": { "cssesc": "bin/cssesc" } }, "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="],
-
     "csso": ["csso@5.0.5", "", { "dependencies": { "css-tree": "~2.2.0" } }, "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ=="],
 
     "csstype": ["csstype@3.2.3", "", {}, "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ=="],
@@ -2952,8 +2943,6 @@
 
     "postcss-load-config": ["postcss-load-config@6.0.1", "", { "dependencies": { "lilconfig": "^3.1.1" }, "peerDependencies": { "jiti": ">=1.21.0", "postcss": ">=8.0.9", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["jiti", "postcss", "tsx", "yaml"] }, "sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g=="],
 
-    "postcss-selector-parser": ["postcss-selector-parser@6.0.10", "", { "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" } }, "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w=="],
-
     "postcss-value-parser": ["postcss-value-parser@4.2.0", "", {}, "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="],
 
     "prefix-style": ["prefix-style@2.0.1", "", {}, "sha512-gdr1MBNVT0drzTq95CbSNdsrBDoHGlb2aDJP/FoY+1e+jSDPOb1Cv554gH2MGiSr2WTcXi/zu+NaFzfcHQkfBQ=="],
diff --git a/client/index.html b/client/index.html
index 7050f5947..dc0c42c8e 100644
--- a/client/index.html
+++ b/client/index.html
@@ -16,6 +16,10 @@
       sizes="512x512"
     />
     <style>
+      body {
+        margin: 0;
+      }
+
       .preloader {
         position: fixed;
         top: 0;
@@ -43,8 +47,12 @@
       }
 
       @keyframes rotation {
-        0% { transform: rotate(0deg); }
-        100% { transform: rotate(360deg); }
+        0% {
+          transform: rotate(0deg);
+        }
+        100% {
+          transform: rotate(360deg);
+        }
       }
 
       .forging-text {
@@ -58,8 +66,6 @@
       }
 
       #root {
-        height: 100vh;
-        width: 100%;
         background-color: white;
         color: black;
       }
diff --git a/client/package.json b/client/package.json
index 9942aff84..8cf8fc035 100644
--- a/client/package.json
+++ b/client/package.json
@@ -22,9 +22,6 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@iconify/react": "^6.0.2",
-    "@tailwindcss/postcss": "^4.1.5",
-    "@tailwindcss/typography": "^0.5.19",
-    "@tailwindcss/vite": "^4.1.5",
     "@tanstack/react-query": "^5.90.11",
     "@types/node": "^24.7.2",
     "@types/react-virtualized": "^9.22.3",
@@ -59,8 +56,6 @@
     "recharts": "^2.15.0",
     "@lifeforge/shared": "workspace:*",
     "socket.io-client": "^4.8.1",
-    "tailwindcss": "^4.1.14",
-    "tailwindcss-animate": "^1.0.7",
     "tinycolor2": "^1.6.0",
     "typescript": "^5.9.3",
     "uuid": "^13.0.0",
diff --git a/client/src/App.tsx b/client/src/App.tsx
index ee4941b14..97a8fe97b 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -4,7 +4,6 @@ import { ErrorBoundary } from 'react-error-boundary'
 import { ErrorScreen, Flex, ModalProvider, Text } from '@lifeforge/ui'
 
 import './i18n'
-import './index.css'
 import Providers from './providers'
 
 // @ts-expect-error - VITE_API_HOST is injected at build time
@@ -30,17 +29,7 @@ function App() {
           dark: 'bg-100'
         }}
       >
-        <Flex
-          as="main"
-          bg={{
-            base: 'bg-100'
-          }}
-          className="bg-bg-200/50 dark:bg-bg-900/50"
-          height="100dvh"
-          id="app"
-          overflow="hidden"
-          width="100%"
-        >
+        <Flex as="main" height="100dvh" id="app" overflow="hidden" width="100%">
           <ModalProvider>
             <Providers />
           </ModalProvider>
diff --git a/client/src/bootstrap.tsx b/client/src/bootstrap.tsx
new file mode 100644
index 000000000..77a246c57
--- /dev/null
+++ b/client/src/bootstrap.tsx
@@ -0,0 +1,5 @@
+import ReactDOM from 'react-dom/client'
+
+import App from './App'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(<App />)
diff --git a/client/src/core/accountSettings/components/AvatarColumn.tsx b/client/src/core/accountSettings/components/AvatarColumn.tsx
index 7c88ae58b..8b736b3b3 100644
--- a/client/src/core/accountSettings/components/AvatarColumn.tsx
+++ b/client/src/core/accountSettings/components/AvatarColumn.tsx
@@ -1,4 +1,3 @@
-import { Icon } from '@iconify/react'
 import { useMutation } from '@tanstack/react-query'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -6,9 +5,12 @@ import { toast } from 'react-toastify'
 
 import { useAuth } from '@lifeforge/shared'
 import {
+  Box,
   Button,
   ConfirmationModal,
   FilePickerModal,
+  Flex,
+  Icon,
   OptionsColumn,
   useModalStore
 } from '@lifeforge/ui'
@@ -30,7 +32,7 @@ function AvatarColumn() {
     }
 
     try {
-      const data = await forgeAPI.untyped('user/settings/updateAvatar').mutate({
+      const data = await forgeAPI.user.settings.updateAvatar.mutate({
         file
       })
 
@@ -43,7 +45,7 @@ function AvatarColumn() {
   }
 
   const deleteAvatarMutation = useMutation(
-    forgeAPI.untyped('user/settings/deleteAvatar').mutationOptions({
+    forgeAPI.user.settings.deleteAvatar.mutationOptions({
       onSuccess: () => {
         setUserData(userData => (userData ? { ...userData, avatar: '' } : null))
         toast.success('Avatar removed successfully')
@@ -74,17 +76,37 @@ function AvatarColumn() {
       icon="tabler:camera"
       title={t('settings.title.profilePicture')}
     >
-      <div className="bg-bg-100 shadow-custom dark:bg-bg-800 mr-4 flex size-12 items-center justify-center overflow-hidden rounded-full">
+      <Flex
+        centered
+        shadow
+        bg={{ base: 'bg-100', dark: 'bg-800' }}
+        flexShrink="0"
+        height="3em"
+        mr="md"
+        overflow="hidden"
+        r="full"
+        width="3em"
+      >
         {userData.avatar !== '' ? (
-          <img alt="" className="size-full object-cover" src={getAvatarURL()} />
+          <Box
+            asChild
+            height="100%"
+            style={{
+              objectFit: 'cover'
+            }}
+            width="100%"
+          >
+            <img alt="" src={getAvatarURL()} />
+          </Box>
         ) : (
-          <Icon className="text-bg-500 text-2xl" icon="tabler:user" />
+          <Icon color="muted" icon="tabler:user" size="1.5em" />
         )}
-      </div>
-      <div className="flex items-center">
+      </Flex>
+      <Flex align="center" gap="sm" width="100%">
         <Button
+          flex="1"
           icon="tabler:photo-hexagon"
-          variant={userData.avatar !== '' ? 'plain' : 'primary'}
+          variant={userData.avatar !== '' ? 'secondary' : 'primary'}
           onClick={() =>
             open(FilePickerModal, {
               acceptedMimeTypes: {
@@ -109,7 +131,7 @@ function AvatarColumn() {
             remove
           </Button>
         )}
-      </div>
+      </Flex>
     </OptionsColumn>
   )
 }
diff --git a/client/src/core/accountSettings/components/OrdinaryColumn.tsx b/client/src/core/accountSettings/components/OrdinaryColumn.tsx
index 814f61a23..00f26fdf2 100644
--- a/client/src/core/accountSettings/components/OrdinaryColumn.tsx
+++ b/client/src/core/accountSettings/components/OrdinaryColumn.tsx
@@ -4,7 +4,7 @@ import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { useAuth } from '@lifeforge/shared'
-import { Button, OptionsColumn, useModalStore } from '@lifeforge/ui'
+import { Button, Flex, OptionsColumn, Text, useModalStore } from '@lifeforge/ui'
 
 import ModifyModal from '../modals/ModifyModal'
 
@@ -41,8 +41,8 @@ function OrdinaryColumn({
         icon={icon}
         title={t(`settings.title.${_.camelCase(title)}`)}
       >
-        <div className="flex-between w-full gap-3">
-          <span className="text-bg-500 whitespace-nowrap">
+        <Flex align="center" gap="md" justify="between" width="100%">
+          <Text color="bg-500" whiteSpace="nowrap">
             {(() => {
               if (!userData) return null
 
@@ -58,13 +58,13 @@ function OrdinaryColumn({
 
               return userData[id as keyof typeof userData]
             })()}
-          </span>
+          </Text>
           <Button
             icon="tabler:pencil"
             variant="plain"
             onClick={handleOpenModifyModal}
           />
-        </div>
+        </Flex>
       </OptionsColumn>
     </>
   )
diff --git a/client/src/core/accountSettings/components/PasswordColumn.tsx b/client/src/core/accountSettings/components/PasswordColumn.tsx
index 83617b101..502f606de 100644
--- a/client/src/core/accountSettings/components/PasswordColumn.tsx
+++ b/client/src/core/accountSettings/components/PasswordColumn.tsx
@@ -11,7 +11,7 @@ function PasswordColumn() {
 
   async function handlePasswordChange() {
     try {
-      await forgeAPI.untyped('user/settings/requestPasswordReset').mutate({})
+      await forgeAPI.user.settings.requestPasswordReset.mutate({})
 
       toast.info('A password reset link has been sent to your email.')
     } catch {
@@ -28,11 +28,11 @@ function PasswordColumn() {
       title={t('settings.title.password')}
     >
       <Button
-        className="w-full whitespace-nowrap md:w-auto"
         icon="tabler:key"
         loading={loading}
         namespace="common.accountSettings"
         variant="secondary"
+        width={{ base: '100%', md: 'auto' }}
         onClick={onSubmit}
       >
         change password
diff --git a/client/src/core/accountSettings/components/TwoFAColumn.tsx b/client/src/core/accountSettings/components/TwoFAColumn.tsx
index 37ee653e8..903451d1e 100644
--- a/client/src/core/accountSettings/components/TwoFAColumn.tsx
+++ b/client/src/core/accountSettings/components/TwoFAColumn.tsx
@@ -2,7 +2,7 @@ import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { useAuth } from '@lifeforge/shared'
-import { OptionsColumn, Switch, useModalStore } from '@lifeforge/ui'
+import { Flex, OptionsColumn, Switch, Text, useModalStore } from '@lifeforge/ui'
 
 import DisableTwoFAModal from '../modals/DisableTwoFAModal'
 import EnableTwoFAModal from '../modals/EnableTwoFAModal'
@@ -31,15 +31,15 @@ function TwoFAColumn() {
         icon="tabler:lock-access"
         title={t('settings.title.twoFA')}
       >
-        <div className="flex w-full items-center justify-between gap-3">
-          <span className="text-bg-500">
+        <Flex align="center" gap="md" justify="between" width="100%">
+          <Text color="muted">
             {t(userData.twoFAEnabled ? 'misc.enabled' : 'misc.disabled')}
-          </span>
+          </Text>
           <Switch
             value={userData.twoFAEnabled}
             onChange={handleToggle2FAModal}
           />
-        </div>
+        </Flex>
       </OptionsColumn>
     </>
   )
diff --git a/client/src/core/accountSettings/index.tsx b/client/src/core/accountSettings/index.tsx
index 2753ffa20..7e57f9abd 100644
--- a/client/src/core/accountSettings/index.tsx
+++ b/client/src/core/accountSettings/index.tsx
@@ -1,4 +1,4 @@
-import { ModuleHeader } from '@lifeforge/ui'
+import { ModuleHeader, Stack } from '@lifeforge/ui'
 
 import AvatarColumn from './components/AvatarColumn'
 import OrdinaryColumn from './components/OrdinaryColumn'
@@ -10,7 +10,7 @@ function AccountSettings() {
   return (
     <>
       <ModuleHeader />
-      <div className="mb-8 space-y-3">
+      <Stack mb="xl">
         <AvatarColumn />
         <OrdinaryColumn
           icon="tabler:user"
@@ -39,7 +39,7 @@ function AccountSettings() {
         <PasswordColumn />
         <TwoFAColumn />
         <QRLoginColumn />
-      </div>
+      </Stack>
     </>
   )
 }
diff --git a/client/src/core/accountSettings/modals/DisableTwoFAModal.tsx b/client/src/core/accountSettings/modals/DisableTwoFAModal.tsx
index af0a62a96..2d21f1c62 100644
--- a/client/src/core/accountSettings/modals/DisableTwoFAModal.tsx
+++ b/client/src/core/accountSettings/modals/DisableTwoFAModal.tsx
@@ -1,8 +1,8 @@
 import { useTranslation } from 'react-i18next'
 import { toast } from 'react-toastify'
 
-import { useAuth, usePromiseLoading } from '@lifeforge/shared'
-import { Button, ModalHeader } from '@lifeforge/ui'
+import { useAuth } from '@lifeforge/shared'
+import { ConfirmationModal } from '@lifeforge/ui'
 
 import forgeAPI from '@/forgeAPI'
 
@@ -13,7 +13,7 @@ function DisableTwoFAModal({ onClose }: { onClose: () => void }) {
 
   async function handleConfirm() {
     try {
-      await forgeAPI.untyped('user/2fa/disable').mutate({})
+      await forgeAPI.user['2fa'].disable.mutate({})
 
       setUserData(userData =>
         userData ? { ...userData, twoFAEnabled: false } : null
@@ -25,34 +25,16 @@ function DisableTwoFAModal({ onClose }: { onClose: () => void }) {
     }
   }
 
-  const [loading, onConfirm] = usePromiseLoading(handleConfirm)
-
   return (
-    <div>
-      <ModalHeader
-        icon="tabler:lock-access-off"
-        namespace="common.accountSettings"
-        title="disable2FA"
-        onClose={onClose}
-      />
-
-      <p className="text-bg-500">{t('modals.disable2FA.description')}</p>
-      <div className="mt-6 flex w-full flex-col-reverse gap-2 sm:flex-row">
-        <Button className="sm:w-1/2" icon="" onClick={onClose}>
-          Cancel
-        </Button>
-        <Button
-          dangerous
-          className="sm:w-1/2"
-          icon="tabler:check"
-          loading={loading}
-          variant="secondary"
-          onClick={onConfirm}
-        >
-          Confirm
-        </Button>
-      </div>
-    </div>
+    <ConfirmationModal
+      data={{
+        title: t('modals.disable2FA.title'),
+        description: t('modals.disable2FA.description'),
+        confirmationButton: 'confirm',
+        onConfirm: handleConfirm
+      }}
+      onClose={onClose}
+    />
   )
 }
 
diff --git a/client/src/core/accountSettings/modals/EnableTwoFAModal/components/OTPConfirmScreen.tsx b/client/src/core/accountSettings/modals/EnableTwoFAModal/components/OTPConfirmScreen.tsx
index aedbea5ea..961649da3 100644
--- a/client/src/core/accountSettings/modals/EnableTwoFAModal/components/OTPConfirmScreen.tsx
+++ b/client/src/core/accountSettings/modals/EnableTwoFAModal/components/OTPConfirmScreen.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next'
 import { toast } from 'react-toastify'
 
 import { encrypt } from '@lifeforge/shared'
-import { OTPInputBox } from '@lifeforge/ui'
+import { Flex, OTPInputBox, Text } from '@lifeforge/ui'
 
 import forgeAPI from '@/forgeAPI'
 
@@ -24,9 +24,9 @@ function OTPConfirmScreen({ onSuccess }: { onSuccess: () => void }) {
     setVerifyOtpLoading(true)
 
     try {
-      const challenge = await forgeAPI.untyped('user/2fa/getChallenge').query()
+      const challenge = await forgeAPI.user['2fa'].getChallenge.query()
 
-      await forgeAPI.untyped('user/2fa/verifyAndEnable').mutate({
+      await forgeAPI.user['2fa'].verifyAndEnable.mutate({
         otp: encrypt(encrypt(otp, challenge), localStorage.getItem('session')!)
       })
 
@@ -39,10 +39,10 @@ function OTPConfirmScreen({ onSuccess }: { onSuccess: () => void }) {
   }
 
   return (
-    <div className="flex-center flex-col">
-      <p className="text-bg-500 mb-6">
+    <Flex centered direction="column">
+      <Text color="muted" mb="lg">
         {t('modals.enable2FA.confirmationDescription')}
-      </p>
+      </Text>
       <OTPInputBox
         lighter
         otp={otp}
@@ -50,7 +50,7 @@ function OTPConfirmScreen({ onSuccess }: { onSuccess: () => void }) {
         verifyOTP={verifyOTP}
         verifyOtpLoading={verifyOtpLoading}
       />
-    </div>
+    </Flex>
   )
 }
 
diff --git a/client/src/core/accountSettings/modals/EnableTwoFAModal/components/QRCodeDisplay.tsx b/client/src/core/accountSettings/modals/EnableTwoFAModal/components/QRCodeDisplay.tsx
index 85e81f155..13aa2946c 100644
--- a/client/src/core/accountSettings/modals/EnableTwoFAModal/components/QRCodeDisplay.tsx
+++ b/client/src/core/accountSettings/modals/EnableTwoFAModal/components/QRCodeDisplay.tsx
@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react'
 import { toast } from 'react-toastify'
 
 import { decrypt, usePersonalization } from '@lifeforge/shared'
-import { LoadingScreen } from '@lifeforge/ui'
+import { Box, Flex, LoadingScreen } from '@lifeforge/ui'
 
 import forgeAPI from '@/forgeAPI'
 
@@ -14,11 +14,9 @@ function QRCodeDisplay() {
 
   async function fetchLink() {
     try {
-      const challenge = await forgeAPI.untyped('user/2fa/getChallenge').query()
+      const challenge = await forgeAPI.user['2fa'].getChallenge.query()
 
-      const link = await forgeAPI
-        .untyped('user/2fa/generateAuthenticatorLink')
-        .query()
+      const link = await forgeAPI.user['2fa'].generateAuthenticatorLink.query()
 
       const decrypted1 = decrypt(link, localStorage.getItem('session')!)
 
@@ -36,20 +34,35 @@ function QRCodeDisplay() {
 
   return (
     <>
-      <div className="flex-center component-bg-lighter mt-6 aspect-square w-full rounded-lg p-12">
+      <Flex
+        centered
+        shadow
+        bg={{
+          base: 'bg-100',
+          dark: 'bg-800'
+        }}
+        p={{ base: 'lg', sm: '2xl' }}
+        r="lg"
+        style={{
+          aspectRatio: '1/1'
+        }}
+      >
         {link ? (
-          <QRCodeSVG
-            bgColor="transparent"
-            className="size-full"
-            fgColor={
-              derivedTheme === 'dark' ? bgTempPalette[100] : bgTempPalette[800]
-            }
-            value={link}
-          />
+          <Box asChild height="100%" width="100%">
+            <QRCodeSVG
+              bgColor="transparent"
+              fgColor={
+                derivedTheme === 'dark'
+                  ? bgTempPalette[100]
+                  : bgTempPalette[800]
+              }
+              value={link}
+            />
+          </Box>
         ) : (
           <LoadingScreen />
         )}
-      </div>
+      </Flex>
     </>
   )
 }
diff --git a/client/src/core/accountSettings/modals/EnableTwoFAModal/components/TwoFAEnableProcedure.tsx b/client/src/core/accountSettings/modals/EnableTwoFAModal/components/TwoFAEnableProcedure.tsx
index 2416a6b66..5424f1b4b 100644
--- a/client/src/core/accountSettings/modals/EnableTwoFAModal/components/TwoFAEnableProcedure.tsx
+++ b/client/src/core/accountSettings/modals/EnableTwoFAModal/components/TwoFAEnableProcedure.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import { Button } from '@lifeforge/ui'
+import { Button, Stack, Text } from '@lifeforge/ui'
 
 import OTPConfirmScreen from './OTPConfirmScreen'
 import QRCodeDisplay from './QRCodeDisplay'
@@ -14,22 +14,23 @@ function TwoFAEnableProcedure({ onSuccess }: { onSuccess: () => void }) {
   return proceeded ? (
     <OTPConfirmScreen onSuccess={onSuccess} />
   ) : (
-    <div>
-      <p className="text-bg-500 max-w-[30rem]">
+    <Stack gap="lg">
+      <Text as="p" color="muted">
         {t('modals.enable2FA.description')}
-      </p>
+      </Text>
       <QRCodeDisplay />
       <Button
-        className="mt-6 w-full"
         icon="tabler:arrow-right"
         iconPosition="end"
+        mt="lg"
+        width="100%"
         onClick={() => {
           setProceeded(true)
         }}
       >
         Proceed
       </Button>
-    </div>
+    </Stack>
   )
 }
 
diff --git a/client/src/core/accountSettings/modals/EnableTwoFAModal/index.tsx b/client/src/core/accountSettings/modals/EnableTwoFAModal/index.tsx
index 2738542d1..f153c24b8 100644
--- a/client/src/core/accountSettings/modals/EnableTwoFAModal/index.tsx
+++ b/client/src/core/accountSettings/modals/EnableTwoFAModal/index.tsx
@@ -3,14 +3,14 @@ import { useTranslation } from 'react-i18next'
 import { toast } from 'react-toastify'
 
 import { useAuth } from '@lifeforge/shared'
-import { ModalHeader } from '@lifeforge/ui'
+import { Box, ModalHeader } from '@lifeforge/ui'
 
 import TwoFAEnableProcedure from './components/TwoFAEnableProcedure'
 
 function EnableTwoFAModal({ onClose }: { onClose: () => void }) {
   const { t } = useTranslation('common.accountSettings')
 
-  const { setUserData } = useAuth()
+  const { userData, setUserData } = useAuth()
 
   const handleSuccess = useCallback(() => {
     setUserData(userData =>
@@ -21,7 +21,7 @@ function EnableTwoFAModal({ onClose }: { onClose: () => void }) {
   }, [])
 
   return (
-    <div>
+    <Box maxWidth={{ lg: '30em' }}>
       <ModalHeader
         icon="tabler:lock-access"
         namespace="common.accountSettings"
@@ -29,7 +29,7 @@ function EnableTwoFAModal({ onClose }: { onClose: () => void }) {
         onClose={onClose}
       />
       <TwoFAEnableProcedure onSuccess={handleSuccess} />
-    </div>
+    </Box>
   )
 }
 
diff --git a/client/src/core/accountSettings/modals/ModifyModal.tsx b/client/src/core/accountSettings/modals/ModifyModal.tsx
index a9aa8a22d..28519f2bc 100644
--- a/client/src/core/accountSettings/modals/ModifyModal.tsx
+++ b/client/src/core/accountSettings/modals/ModifyModal.tsx
@@ -17,7 +17,7 @@ function ModifyModal<TType extends 'datetime' | 'text'>({
   const { userData, setUserData } = useAuth()
 
   const mutation = useMutation(
-    forgeAPI.untyped('/user/settings/updateProfile').mutationOptions({
+    forgeAPI.user.settings.updateProfile.mutationOptions({
       onSuccess: (_, newData) => {
         if (!userData) return
 
diff --git a/client/src/core/accountSettings/modals/QRLoginScannerModal/components/ConfirmScreen.tsx b/client/src/core/accountSettings/modals/QRLoginScannerModal/components/ConfirmScreen.tsx
index 66fef0357..00acdcdbe 100644
--- a/client/src/core/accountSettings/modals/QRLoginScannerModal/components/ConfirmScreen.tsx
+++ b/client/src/core/accountSettings/modals/QRLoginScannerModal/components/ConfirmScreen.tsx
@@ -1,7 +1,14 @@
-import { Icon } from '@iconify/react'
 import { useTranslation } from 'react-i18next'
 
-import { Button } from '@lifeforge/ui'
+import {
+  Button,
+  COLORS,
+  Flex,
+  Icon,
+  Stack,
+  Text,
+  withOpacity
+} from '@lifeforge/ui'
 
 function ConfirmScreen({
   onClose,
@@ -15,32 +22,46 @@ function ConfirmScreen({
   const { t } = useTranslation('common.auth')
 
   return (
-    <div className="mt-4 flex flex-col items-center gap-4">
-      <div className="bg-custom-500/20 flex-center size-20 rounded-lg">
-        <Icon className="text-custom-500 size-10" icon="tabler:device-laptop" />
-      </div>
-      <p className="text-bg-500 mt-2 text-center">
+    <Stack align="center" gap="lg">
+      <Flex
+        centered
+        height="5em"
+        r="lg"
+        style={{
+          backgroundColor: withOpacity(COLORS['custom-500'], 0.2)
+        }}
+        width="5em"
+      >
+        <Icon color="primary" icon="tabler:device-laptop" size="2.25em" />
+      </Flex>
+      <Text align="center" mt="sm" size="xl" weight="medium">
         {t('qrLogin.approvalDescription')}
-      </p>
-      <div className="mt-4 flex w-full flex-col-reverse gap-2 sm:flex-row">
+      </Text>
+      <Flex
+        direction={{ base: 'column-reverse', sm: 'row' }}
+        gap="sm"
+        mt="md"
+        width="100%"
+      >
         <Button
-          className="sm:w-1/2"
-          icon=""
+          dangerous
+          icon="tabler:ban"
           variant="secondary"
+          width={{ base: '100%', sm: '50%' }}
           onClick={onClose}
         >
           {t('qrLogin.deny')}
         </Button>
         <Button
-          className="sm:w-1/2"
           icon="tabler:check"
           loading={loading}
+          width={{ base: '100%', sm: '50%' }}
           onClick={onApprove}
         >
           {t('qrLogin.approve')}
         </Button>
-      </div>
-    </div>
+      </Flex>
+    </Stack>
   )
 }
 
diff --git a/client/src/core/accountSettings/modals/QRLoginScannerModal/components/ErrorScreen.tsx b/client/src/core/accountSettings/modals/QRLoginScannerModal/components/ErrorScreen.tsx
index 1e9681f01..25f4b97bd 100644
--- a/client/src/core/accountSettings/modals/QRLoginScannerModal/components/ErrorScreen.tsx
+++ b/client/src/core/accountSettings/modals/QRLoginScannerModal/components/ErrorScreen.tsx
@@ -1,6 +1,12 @@
-import { Icon } from '@iconify/react'
-
-import { Button } from '@lifeforge/ui'
+import {
+  Button,
+  COLORS,
+  Flex,
+  Icon,
+  Stack,
+  Text,
+  withOpacity
+} from '@lifeforge/ui'
 
 function ErrorScreen({
   onClose,
@@ -10,22 +16,31 @@ function ErrorScreen({
   errorMessage: string
 }) {
   return (
-    <div className="mt-4 flex flex-col items-center gap-4">
-      <div className="flex-center size-20 rounded-lg bg-red-500/20">
-        <Icon className="size-10 text-red-500" icon="tabler:alert-triangle" />
-      </div>
-      <div className="text-center">
-        <h3 className="text-xl font-medium">{errorMessage}</h3>
-      </div>
+    <Stack align="center" gap="lg">
+      <Flex
+        centered
+        height="5em"
+        r="lg"
+        style={{
+          backgroundColor: withOpacity(COLORS['dangerous'], 0.2)
+        }}
+        width="5em"
+      >
+        <Icon color="dangerous" icon="tabler:alert-triangle" size="2.25em" />
+      </Flex>
+      <Text size="xl" weight="medium">
+        {errorMessage}
+      </Text>
       <Button
-        className="mt-4 w-full"
         icon="tabler:x"
+        mt="md"
         variant="secondary"
+        width="100%"
         onClick={onClose}
       >
         Close
       </Button>
-    </div>
+    </Stack>
   )
 }
 
diff --git a/client/src/core/accountSettings/modals/QRLoginScannerModal/components/SuccessScreen.tsx b/client/src/core/accountSettings/modals/QRLoginScannerModal/components/SuccessScreen.tsx
index 4c145dcee..1732be057 100644
--- a/client/src/core/accountSettings/modals/QRLoginScannerModal/components/SuccessScreen.tsx
+++ b/client/src/core/accountSettings/modals/QRLoginScannerModal/components/SuccessScreen.tsx
@@ -1,7 +1,14 @@
-import { Icon } from '@iconify/react'
 import { useTranslation } from 'react-i18next'
 
-import { Button } from '@lifeforge/ui'
+import {
+  Button,
+  Flex,
+  Icon,
+  Stack,
+  TAILWIND_PALETTE,
+  Text,
+  withOpacity
+} from '@lifeforge/ui'
 
 function SuccessScreen({
   onClose,
@@ -13,27 +20,44 @@ function SuccessScreen({
   const { t } = useTranslation('common.auth')
 
   return (
-    <div className="mt-4 flex flex-col items-center gap-4">
-      <div className="flex-center size-20 rounded-lg bg-green-500/20">
-        <Icon className="size-10 text-green-500" icon="tabler:check" />
-      </div>
+    <Stack align="center">
+      <Flex
+        centered
+        height="5em"
+        r="lg"
+        style={{
+          backgroundColor: withOpacity(TAILWIND_PALETTE.green[500], 0.2)
+        }}
+        width="5em"
+      >
+        <Icon
+          icon="tabler:check"
+          size="2.25em"
+          style={{
+            color: TAILWIND_PALETTE.green[500]
+          }}
+        />
+      </Flex>
 
-      <h3 className="text-xl font-medium">{t('qrLogin.success')}</h3>
+      <Text size="xl" weight="medium">
+        {t('qrLogin.success')}
+      </Text>
       {browserInfo && (
-        <p className="text-bg-500 mt-2">
+        <Text color="muted">
           {t('qrLogin.browserInfo')}: {browserInfo}
-        </p>
+        </Text>
       )}
 
       <Button
-        className="mt-4 w-full"
         icon="tabler:x"
+        mt="lg"
         variant="secondary"
+        width="100%"
         onClick={onClose}
       >
         Close
       </Button>
-    </div>
+    </Stack>
   )
 }
 
diff --git a/client/src/core/accountSettings/modals/QRLoginScannerModal/hooks/useQRLoginApproval.ts b/client/src/core/accountSettings/modals/QRLoginScannerModal/hooks/useQRLoginApproval.ts
index f5849d290..ac9585938 100644
--- a/client/src/core/accountSettings/modals/QRLoginScannerModal/hooks/useQRLoginApproval.ts
+++ b/client/src/core/accountSettings/modals/QRLoginScannerModal/hooks/useQRLoginApproval.ts
@@ -55,7 +55,7 @@ function useQRLoginApproval(scannedData: string) {
 
     try {
       const response = await forgeAPI
-        .untyped<{ browserInfo: string }>('/user/qrLogin/approveQRLogin')
+        .user.qrLogin.approveQRLogin
         .mutate({
           sessionId: sessionData.sessionId
         } as never)
diff --git a/client/src/core/accountSettings/modals/QRLoginScannerModal/index.tsx b/client/src/core/accountSettings/modals/QRLoginScannerModal/index.tsx
index 102db7a0d..4b9f06d63 100644
--- a/client/src/core/accountSettings/modals/QRLoginScannerModal/index.tsx
+++ b/client/src/core/accountSettings/modals/QRLoginScannerModal/index.tsx
@@ -1,4 +1,4 @@
-import { ModalHeader } from '@lifeforge/ui'
+import { Box, ModalHeader } from '@lifeforge/ui'
 
 import InnerContent from './components/InnerContent'
 
@@ -12,7 +12,7 @@ function QRLoginApprovalModal({
   }
 }) {
   return (
-    <div className="min-w-[40vw]">
+    <Box minWidth="40vw">
       <ModalHeader
         icon="tabler:qrcode"
         namespace="common.auth"
@@ -20,7 +20,7 @@ function QRLoginApprovalModal({
         onClose={onClose}
       />
       <InnerContent scannedData={scannedData} onClose={onClose} />
-    </div>
+    </Box>
   )
 }
 
diff --git a/client/src/core/apiKeys/components/EntryItem.tsx b/client/src/core/apiKeys/components/EntryItem.tsx
index d08df63ff..6a0bbb438 100644
--- a/client/src/core/apiKeys/components/EntryItem.tsx
+++ b/client/src/core/apiKeys/components/EntryItem.tsx
@@ -1,4 +1,3 @@
-import { Icon } from '@iconify/react'
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 import copy from 'copy-to-clipboard'
 import dayjs from 'dayjs'
@@ -6,7 +5,6 @@ import relativeTime from 'dayjs/plugin/relativeTime.js'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { toast } from 'react-toastify'
-import COLORS from 'tailwindcss/colors'
 
 import { useFederation } from '@lifeforge/shared'
 import {
@@ -16,7 +14,9 @@ import {
   ContextMenu,
   ContextMenuItem,
   Flex,
+  Icon,
   OptionsColumn,
+  TAILWIND_PALETTE,
   TagChip,
   Text,
   useModalStore
@@ -24,12 +24,13 @@ import {
 
 import forgeAPI from '@/forgeAPI'
 
+import type { APIKeyEntry } from '..'
 import ModifyAPIKeyModal from '../modals/ModifyAPIKeyModal'
 import ModulesRequiredListModal from '../modals/ModulesRequiredListModal'
 
 dayjs.extend(relativeTime)
 
-function EntryItem({ entry }: { entry: any }) {
+function EntryItem({ entry }: { entry: APIKeyEntry }) {
   const { t } = useTranslation('common.apiKeys')
 
   const { modules } = useFederation()
@@ -41,8 +42,7 @@ function EntryItem({ entry }: { entry: any }) {
   const [isCopying, setIsCopying] = useState(false)
 
   const deleteMutation = useMutation(
-    forgeAPI
-      .untyped('apiKeys/entries/remove')
+    forgeAPI.apiKeys.entries.remove
       .input({
         id: entry.id
       })
@@ -67,8 +67,7 @@ function EntryItem({ entry }: { entry: any }) {
     setIsCopying(true)
 
     try {
-      const key = await forgeAPI
-        .untyped('apiKeys/entries/get')
+      const key = await forgeAPI.apiKeys.entries.get
         .input({
           keyId: entry.id
         })
@@ -118,8 +117,8 @@ function EntryItem({ entry }: { entry: any }) {
                 {t('misc.requiredBy', { count: modulesRequiredCount })}
               </Text>
               <Button
-                className="p-1!"
                 icon="tabler:info-circle"
+                p="xs"
                 variant="plain"
                 onClick={() =>
                   open(ModulesRequiredListModal, {
@@ -142,38 +141,30 @@ function EntryItem({ entry }: { entry: any }) {
               </Text>
             </Box>
           </Text>
-          <Box asChild ml="sm">
-            <TagChip
-              color={entry.exposable ? COLORS.green['500'] : COLORS.red['500']}
-              icon={entry.exposable ? 'tabler:world' : 'tabler:lock'}
-              label={
-                entry.exposable ? t('misc.exposable') : t('misc.internalOnly')
-              }
-            />
-          </Box>
+          <TagChip
+            color={
+              entry.exposable
+                ? TAILWIND_PALETTE.green['500']
+                : TAILWIND_PALETTE.red['500']
+            }
+            icon={entry.exposable ? 'tabler:world' : 'tabler:lock'}
+            label={
+              entry.exposable ? t('misc.exposable') : t('misc.internalOnly')
+            }
+            ml="sm"
+            size="sm"
+          />
         </>
       }
     >
       <Box mr="sm">
-        <Flex
-          align="center"
-          className="text-lg"
-          gap="sm"
-          justify={{ base: 'start', md: 'end' }}
-        >
+        <Flex align="center" gap="sm" justify={{ base: 'start', md: 'end' }}>
           {Array(12)
             .fill(0)
             .map((_, i) => (
-              <Icon
-                key={i}
-                icon="tabler:circle-filled"
-                style={{
-                  width: '4px',
-                  height: '4px'
-                }}
-              />
+              <Icon key={i} icon="tabler:circle-filled" size="4px" />
             ))}
-          <Text>{entry.key}</Text>
+          <Text size="lg">{entry.key}</Text>
         </Flex>
         <Text as="code" color="muted">
           {t('misc.lastUpdated', { time: dayjs(entry.updated).fromNow() })}
diff --git a/client/src/core/apiKeys/index.tsx b/client/src/core/apiKeys/index.tsx
index 03fa60124..ea34620cc 100644
--- a/client/src/core/apiKeys/index.tsx
+++ b/client/src/core/apiKeys/index.tsx
@@ -1,11 +1,13 @@
 import { useQuery } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
 
+import type { InferOutput } from '@lifeforge/shared'
 import {
   Button,
   EmptyStateScreen,
   FAB,
   ModuleHeader,
+  Stack,
   WithQuery,
   useModalStore
 } from '@lifeforge/ui'
@@ -15,14 +17,16 @@ import forgeAPI from '@/forgeAPI'
 import EntryItem from './components/EntryItem'
 import ModifyAPIKeyModal from './modals/ModifyAPIKeyModal'
 
+export type APIKeyEntry = InferOutput<
+  typeof forgeAPI.apiKeys.entries.list
+>[number]
+
 function APIKeys() {
   const { open } = useModalStore()
 
   const { t } = useTranslation('common.apiKeys')
 
-  const entriesQuery = useQuery<any[]>(
-    forgeAPI.untyped('apiKeys/entries/list').queryOptions()
-  )
+  const entriesQuery = useQuery(forgeAPI.apiKeys.entries.list.queryOptions())
 
   const handleCreateAPIKey = () => {
     open(ModifyAPIKeyModal, {
@@ -35,7 +39,7 @@ function APIKeys() {
       <ModuleHeader
         actionButton={
           <Button
-            className="hidden lg:flex"
+            display={{ base: 'none', lg: 'flex' }}
             icon="tabler:plus"
             tProps={{
               item: t('common.apiKeys:items.apiKey')
@@ -48,7 +52,7 @@ function APIKeys() {
       />
       <WithQuery query={entriesQuery}>
         {entries => (
-          <div className="mb-24 h-full flex-1 space-y-3 lg:mb-12">
+          <Stack flex="1" mb={{ base: '3xl', lg: '2xl' }}>
             {entries.length > 0 ? (
               entries.map(entry => <EntryItem key={entry.id} entry={entry} />)
             ) : (
@@ -60,7 +64,7 @@ function APIKeys() {
                 }}
               />
             )}
-          </div>
+          </Stack>
         )}
       </WithQuery>
       <FAB onClick={handleCreateAPIKey} />
diff --git a/client/src/core/apiKeys/modals/ModifyAPIKeyModal.tsx b/client/src/core/apiKeys/modals/ModifyAPIKeyModal.tsx
index b9dedb9aa..a275ad96c 100644
--- a/client/src/core/apiKeys/modals/ModifyAPIKeyModal.tsx
+++ b/client/src/core/apiKeys/modals/ModifyAPIKeyModal.tsx
@@ -5,13 +5,15 @@ import { FormModal, defineForm } from '@lifeforge/ui'
 
 import forgeAPI from '@/forgeAPI'
 
+import type { APIKeyEntry } from '..'
+
 function ModifyAPIKeyModal({
   data: { type, initialData },
   onClose
 }: {
   data: {
     type: 'create' | 'update'
-    initialData?: any
+    initialData?: APIKeyEntry
   }
   onClose: () => void
 }) {
@@ -19,8 +21,8 @@ function ModifyAPIKeyModal({
 
   const mutation = useMutation(
     (type === 'create'
-      ? forgeAPI.untyped('apiKeys/entries/create')
-      : forgeAPI.untyped('apiKeys/entries/update').input({
+      ? forgeAPI.apiKeys.entries.create
+      : forgeAPI.apiKeys.entries.update.input({
           id: initialData?.id || ''
         })
     ).mutationOptions({
diff --git a/client/src/core/apiKeys/modals/ModulesRequiredListModal.tsx b/client/src/core/apiKeys/modals/ModulesRequiredListModal.tsx
index 8448f3772..e375e1f6d 100644
--- a/client/src/core/apiKeys/modals/ModulesRequiredListModal.tsx
+++ b/client/src/core/apiKeys/modals/ModulesRequiredListModal.tsx
@@ -1,9 +1,17 @@
-import { Icon } from '@iconify/react'
 import { useTranslation } from 'react-i18next'
-import COLORS from 'tailwindcss/colors'
 
 import { useFederation } from '@lifeforge/shared'
-import { Card, ModalHeader, TagChip } from '@lifeforge/ui'
+import {
+  Box,
+  Card,
+  Flex,
+  Icon,
+  ModalHeader,
+  Stack,
+  TAILWIND_PALETTE,
+  TagChip,
+  Text
+} from '@lifeforge/ui'
 
 function ModulesRequiredListModal({
   onClose,
@@ -23,49 +31,58 @@ function ModulesRequiredListModal({
     .filter(item => item.APIKeyAccess?.[keyId])
 
   return (
-    <div className="min-w-[40vw] space-y-6">
+    <Box minWidth="40vw">
       <ModalHeader
         icon="tabler:cube"
         namespace="common.apiKeys"
         title="modulesRequired.title"
         onClose={onClose}
       />
-      <p className="text-bg-500">
+      <Text as="p" color="muted">
         {t('modals.modulesRequired.totalModulesRequire', {
           count: modulesRequired.length
         })}
-      </p>
-      <div className="space-y-3">
+      </Text>
+      <Stack mt="lg">
         {modulesRequired.map(module => (
-          <Card key={module.name} className="component-bg-lighter flex-between">
-            <div>
-              <h3 className="flex items-center gap-2 text-lg font-medium">
-                <Icon className="size-6" icon={module.icon} />
-                {module.name}
-              </h3>
-              <p className="text-bg-500 mt-1">
+          <Card
+            key={module.name}
+            align="center"
+            bg={{
+              base: 'bg-50',
+              dark: 'bg-800'
+            }}
+            direction="row"
+            justify="between"
+          >
+            <Box>
+              <Flex asChild centered gap="sm">
+                <Text as="h3" size="lg" weight="medium">
+                  <Icon icon={module.icon} />
+                  {module.name}
+                </Text>
+              </Flex>
+              <Text as="p" color="muted" mt="xs">
                 {module.APIKeyAccess?.[keyId].usage}
-              </p>
-            </div>
+              </Text>
+            </Box>
             {module.APIKeyAccess?.[keyId].required ? (
               <TagChip
-                color={COLORS.red['500']}
+                color={TAILWIND_PALETTE.red['500']}
                 icon="tabler:alert-circle"
-                iconClassName="size-3.5!"
                 label="Required"
               />
             ) : (
               <TagChip
-                color={COLORS.green['500']}
+                color={TAILWIND_PALETTE.green['500']}
                 icon="tabler:circle-check"
-                iconClassName="size-3.5!"
                 label="Optional"
               />
             )}
           </Card>
         ))}
-      </div>
-    </div>
+      </Stack>
+    </Box>
   )
 }
 
diff --git a/client/src/core/auth/components/AuthFooter.tsx b/client/src/core/auth/components/AuthFooter.tsx
index 5f6b25f24..aeca89f1b 100644
--- a/client/src/core/auth/components/AuthFooter.tsx
+++ b/client/src/core/auth/components/AuthFooter.tsx
@@ -1,8 +1,8 @@
-import { Flex, Icon, Text } from '@lifeforge/ui'
+import { Flex, Icon, Stack, Text } from '@lifeforge/ui'
 
 function AuthFooter() {
   return (
-    <Flex centered as="footer" direction="column" gap="sm" mt="xl">
+    <Stack centered as="footer" mt="xl">
       <Flex centered gap="sm">
         {[
           'creative-commons',
@@ -10,19 +10,14 @@ function AuthFooter() {
           'creative-commons-nc',
           'creative-commons-sa'
         ].map(icon => (
-          <Icon
-            key={icon}
-            color="bg-500"
-            icon={`tabler:${icon}`}
-            size="1.5em"
-          />
+          <Icon key={icon} color="muted" icon={`tabler:${icon}`} size="1.5em" />
         ))}
       </Flex>
-      <Text align="center" color="bg-500" size="sm">
+      <Text align="center" color="muted" size="sm">
         A project by{' '}
         <Text
           as="a"
-          color="custom-500"
+          color="primary"
           href="https://melvinchia.dev"
           rel="noreferrer"
           style={{
@@ -35,7 +30,7 @@ function AuthFooter() {
         licensed under{' '}
         <Text
           as="a"
-          color="custom-500"
+          color="primary"
           href="https://creativecommons.org/licenses/by-nc-sa/4.0/"
           rel="noreferrer"
           style={{
@@ -47,7 +42,7 @@ function AuthFooter() {
         </Text>
         .
       </Text>
-    </Flex>
+    </Stack>
   )
 }
 
diff --git a/client/src/core/auth/components/AuthForm.tsx b/client/src/core/auth/components/AuthForm.tsx
index 35c9bb376..392f47842 100644
--- a/client/src/core/auth/components/AuthForm.tsx
+++ b/client/src/core/auth/components/AuthForm.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'
 import { toast } from 'react-toastify'
 
 import { useAuth, usePromiseLoading, useSearchParams } from '@lifeforge/shared'
-import { Flex, TextInput } from '@lifeforge/ui'
+import { Stack, TextInput } from '@lifeforge/ui'
 
 import AuthSignInButton from './AuthSignInButtons'
 
@@ -106,13 +106,7 @@ function AuthForm({ providers }: { providers: string[] }) {
   }, [password])
 
   return (
-    <Flex
-      direction="column"
-      gap="lg"
-      maxWidth="70%"
-      mt={{ base: 'lg', sm: '2xl' }}
-      width="100%"
-    >
+    <Stack maxWidth={{ sm: '70%' }} mt={{ base: 'lg', sm: '2xl' }}>
       {INPUT_FIELDS.map((input, index) => (
         <TextInput
           key={index}
@@ -131,7 +125,7 @@ function AuthForm({ providers }: { providers: string[] }) {
         providers={providers}
         signIn={onSubmit}
       />
-    </Flex>
+    </Stack>
   )
 }
 
diff --git a/client/src/core/auth/components/AuthHeader.tsx b/client/src/core/auth/components/AuthHeader.tsx
index 8ade61a8d..a42fb3332 100644
--- a/client/src/core/auth/components/AuthHeader.tsx
+++ b/client/src/core/auth/components/AuthHeader.tsx
@@ -9,10 +9,10 @@ function AuthHeader() {
     <>
       <Flex asChild align="center" gap="sm" mb="lg">
         <Text as="h1" size="3xl" weight="semibold" whiteSpace="nowrap">
-          <Icon color="custom-500" icon="tabler:hammer" size="5xl" />
+          <Icon color="primary" icon="tabler:hammer" />
           <Box>
             LifeForge
-            <Text color="custom-500" size="4xl">
+            <Text color="primary" size="4xl">
               .
             </Text>
           </Box>
@@ -30,7 +30,7 @@ function AuthHeader() {
       <Text
         align="center"
         as="p"
-        color="bg-500"
+        color="muted"
         mt={{ base: 'sm', sm: 'md' }}
         size={{ base: 'base', sm: 'xl' }}
       >
diff --git a/client/src/core/auth/components/AuthSideImage.tsx b/client/src/core/auth/components/AuthSideImage.tsx
index 23a1f20cd..6db4decc5 100644
--- a/client/src/core/auth/components/AuthSideImage.tsx
+++ b/client/src/core/auth/components/AuthSideImage.tsx
@@ -44,7 +44,7 @@ function AuthSideImage() {
         style={{ inset: 0 }}
         width="100%"
       >
-        <Text color="custom-500" mb="lg" size="2xl" tracking="wider">
+        <Text color="primary" mb="lg" size="2xl" tracking="wider">
           {t('sideImageDesc.part1')}
         </Text>
         <Text color="bg-50" size="5xl" tracking="wide" weight="semibold">
diff --git a/client/src/core/auth/components/AuthSignInButtons/components/SigninWithProviderButton.tsx b/client/src/core/auth/components/AuthSignInButtons/components/SigninWithProviderButton.tsx
index a4ed2dc93..b9d228e01 100644
--- a/client/src/core/auth/components/AuthSignInButtons/components/SigninWithProviderButton.tsx
+++ b/client/src/core/auth/components/AuthSignInButtons/components/SigninWithProviderButton.tsx
@@ -20,7 +20,7 @@ function SigninWithProviderButton({
 
   const signInWithProvider = useCallback(async () => {
     const providerInstance = await fetch(
-      forgeAPI.untyped('user/oauth/getEndpoint').input({
+      forgeAPI.user.oauth.getEndpoint.input({
         provider
       }).endpoint
     )
diff --git a/client/src/core/auth/components/AuthSignInButtons/index.tsx b/client/src/core/auth/components/AuthSignInButtons/index.tsx
index 7044eea3b..689be8c7d 100644
--- a/client/src/core/auth/components/AuthSignInButtons/index.tsx
+++ b/client/src/core/auth/components/AuthSignInButtons/index.tsx
@@ -1,10 +1,10 @@
 import { memo } from 'react'
-import { useTranslation } from 'react-i18next'
 
-import { Box, Button, Flex, Grid, Text, useModalStore } from '@lifeforge/ui'
+import { Box, Button, Grid, useModalStore } from '@lifeforge/ui'
 
 import QRLoginModal from '@/core/auth/modals/QRLoginModal'
 
+import OrAuthWithDivider from '../OrAuthWithDivider'
 import SignInButton from './components/SignInButton'
 import SigninWithProviderButton from './components/SigninWithProviderButton'
 
@@ -17,30 +17,12 @@ function AuthSignInButton({
   signIn: () => void
   providers: string[]
 }) {
-  const { t } = useTranslation('common.auth')
-
   const { open } = useModalStore()
 
   return (
     <Box mt="lg">
       <SignInButton loading={loading} signIn={signIn} />
-      <Flex centered gap="md" my="lg">
-        <Box
-          bg={{ base: 'bg-400', dark: 'bg-700' }}
-          height="1.5px"
-          width="100%"
-        />
-        <Box asChild flexShrink="0">
-          <Text color={{ base: 'bg-400', dark: 'bg-700' }} weight="medium">
-            {t('orAuthenticateWith')}
-          </Text>
-        </Box>
-        <Box
-          bg={{ base: 'bg-400', dark: 'bg-700' }}
-          height="1.5px"
-          width="100%"
-        />
-      </Flex>
+      <OrAuthWithDivider />
       {providers.length > 0 && (
         <Grid
           gap="md"
diff --git a/client/src/core/auth/components/OrAuthWithDivider.tsx b/client/src/core/auth/components/OrAuthWithDivider.tsx
new file mode 100644
index 000000000..35b1713d4
--- /dev/null
+++ b/client/src/core/auth/components/OrAuthWithDivider.tsx
@@ -0,0 +1,29 @@
+import { useTranslation } from 'react-i18next'
+
+import { Box, Flex, Text } from '@lifeforge/ui'
+
+function OrAuthWithDivider() {
+  const { t } = useTranslation('common.auth')
+
+  return (
+    <Flex centered gap="md" my="lg">
+      <Box
+        bg={{ base: 'bg-400', dark: 'bg-700' }}
+        height="1.5px"
+        width="100%"
+      />
+      <Box asChild flexShrink="0">
+        <Text color={{ base: 'bg-400', dark: 'bg-700' }} weight="medium">
+          {t('orAuthenticateWith')}
+        </Text>
+      </Box>
+      <Box
+        bg={{ base: 'bg-400', dark: 'bg-700' }}
+        height="1.5px"
+        width="100%"
+      />
+    </Flex>
+  )
+}
+
+export default OrAuthWithDivider
diff --git a/client/src/core/auth/index.tsx b/client/src/core/auth/index.tsx
index 6f134ea0f..a770a8b71 100644
--- a/client/src/core/auth/index.tsx
+++ b/client/src/core/auth/index.tsx
@@ -7,7 +7,7 @@ import UserCreationPage from './pages/UserCreationPage'
 
 function Auth() {
   return (
-    <WithQueryData controller={forgeAPI.untyped('user/exists')}>
+    <WithQueryData controller={forgeAPI.user.exists}>
       {exists => (exists ? <LoginPage /> : <UserCreationPage />)}
     </WithQueryData>
   )
diff --git a/client/src/core/auth/modals/QRLoginModal/components/QRByStatus.tsx b/client/src/core/auth/modals/QRLoginModal/components/QRByStatus.tsx
new file mode 100644
index 000000000..e4dbdda95
--- /dev/null
+++ b/client/src/core/auth/modals/QRLoginModal/components/QRByStatus.tsx
@@ -0,0 +1,62 @@
+import { QRCodeSVG } from 'qrcode.react'
+import { useTranslation } from 'react-i18next'
+
+import {
+  Box,
+  Button,
+  Icon,
+  LoadingScreen,
+  TAILWIND_PALETTE
+} from '@lifeforge/ui'
+
+export default function QRByStatus({
+  status,
+  qrData,
+  refreshSession
+}: {
+  status: 'loading' | 'ready' | 'waiting' | 'approved' | 'expired' | 'error'
+  qrData: string
+  refreshSession: () => void
+}) {
+  const { t } = useTranslation('common.auth')
+
+  switch (status) {
+    case 'loading':
+      return <LoadingScreen />
+    case 'ready':
+    case 'waiting':
+      return qrData ? (
+        <Box asChild height="100%" width="100%">
+          <QRCodeSVG
+            bgColor="transparent"
+            fgColor="currentColor"
+            level="M"
+            value={qrData}
+          />
+        </Box>
+      ) : null
+    case 'approved':
+      return (
+        <Icon
+          icon="tabler:check"
+          size="2.5em"
+          style={{ color: TAILWIND_PALETTE.green[500] }}
+        />
+      )
+    case 'expired':
+    case 'error':
+      return (
+        <Button
+          dangerous
+          icon="tabler:refresh"
+          variant="secondary"
+          width="100%"
+          onClick={refreshSession}
+        >
+          {t('refresh')}
+        </Button>
+      )
+    default:
+      return null
+  }
+}
diff --git a/client/src/core/auth/modals/QRLoginModal/components/QRContent.tsx b/client/src/core/auth/modals/QRLoginModal/components/QRContent.tsx
index 3651fdffc..40f4e2be3 100644
--- a/client/src/core/auth/modals/QRLoginModal/components/QRContent.tsx
+++ b/client/src/core/auth/modals/QRLoginModal/components/QRContent.tsx
@@ -1,68 +1,23 @@
-import { Icon } from '@iconify/react'
 import dayjs from 'dayjs'
 import duration from 'dayjs/plugin/duration'
-import { QRCodeSVG } from 'qrcode.react'
 import { useTranslation } from 'react-i18next'
 
-import { Button, LoadingScreen } from '@lifeforge/ui'
+import {
+  Bordered,
+  COLORS,
+  Flex,
+  Icon,
+  TAILWIND_PALETTE,
+  Text,
+  Transition,
+  withOpacity
+} from '@lifeforge/ui'
 
 import useQRLoginSession from '../hooks/useQRLoginSession'
+import QRByStatus from './QRByStatus'
 
 dayjs.extend(duration)
 
-function QRByStatus({
-  status,
-  qrData,
-  refreshSession
-}: {
-  status: 'loading' | 'ready' | 'waiting' | 'approved' | 'expired' | 'error'
-  qrData: string
-  refreshSession: () => void
-}) {
-  const { t } = useTranslation('common.auth')
-
-  switch (status) {
-    case 'loading':
-      return (
-        <div className="flex-center size-full">
-          <LoadingScreen />
-        </div>
-      )
-    case 'ready':
-    case 'waiting':
-      return qrData ? (
-        <QRCodeSVG
-          bgColor="transparent"
-          className="size-full"
-          fgColor="currentColor"
-          level="M"
-          value={qrData}
-        />
-      ) : null
-    case 'approved':
-      return (
-        <div className="flex-center size-full">
-          <Icon className="size-10 text-green-500" icon="tabler:check" />
-        </div>
-      )
-    case 'expired':
-    case 'error':
-      return (
-        <Button
-          dangerous
-          width="100%"
-          icon="tabler:refresh"
-          variant="secondary"
-          onClick={refreshSession}
-        >
-          {t('refresh')}
-        </Button>
-      )
-    default:
-      return null
-  }
-}
-
 function QRContent({ onClose }: { onClose: () => void }) {
   const { t } = useTranslation('common.auth')
 
@@ -72,33 +27,56 @@ function QRContent({ onClose }: { onClose: () => void }) {
 
   return (
     <>
-      <div
-        className={`flex-center relative aspect-square w-full rounded-lg border-2 p-6 transition-all ${
-          status === 'expired'
-            ? 'border-red-300 bg-red-50 dark:border-red-800 dark:bg-red-950'
-            : status === 'approved'
-              ? 'border-green-300 bg-green-50 dark:border-green-800 dark:bg-green-950'
-              : 'border-bg-200 bg-bg-50 dark:border-bg-700 dark:bg-bg-800'
-        }`}
-      >
-        <QRByStatus
-          qrData={qrData}
-          refreshSession={refreshSession}
-          status={status}
-        />
-      </div>
+      <Transition>
+        <Bordered
+          asChild
+          borderWidth="2px"
+          style={{
+            borderColor:
+              status === 'expired'
+                ? withOpacity(TAILWIND_PALETTE.red['500'], 0.7)
+                : status === 'approved'
+                  ? withOpacity(TAILWIND_PALETTE.green['500'], 0.7)
+                  : withOpacity(COLORS['bg-500'], 0.7)
+          }}
+        >
+          <Flex
+            centered
+            p="lg"
+            r="lg"
+            style={{
+              backgroundColor:
+                status === 'expired'
+                  ? withOpacity(TAILWIND_PALETTE.red['500'], 0.2)
+                  : status === 'approved'
+                    ? withOpacity(TAILWIND_PALETTE.green['500'], 0.2)
+                    : withOpacity(COLORS['bg-500'], 0.2),
+              aspectRatio: '1/1'
+            }}
+            width="100%"
+          >
+            <QRByStatus
+              qrData={qrData}
+              refreshSession={refreshSession}
+              status={status}
+            />
+          </Flex>
+        </Bordered>
+      </Transition>
       {(status === 'ready' || status === 'waiting') &&
         (() => (
           <>
             {timeLeft > 0 && (
-              <p className="text-bg-400 mt-4 text-center text-sm">
+              <Text align="center" color="muted" mt="md" size="sm">
                 {dayjs.duration(timeLeft, 'second').format('mm:ss')}
-              </p>
+              </Text>
             )}
-            <p className="text-bg-400 flex-center mt-4 gap-2 text-sm">
-              <Icon className="size-4" icon="svg-spinners:ring-resize" />
-              {t('qrLogin.waiting')}
-            </p>
+            <Flex asChild centered gap="sm" mt="md">
+              <Text color="muted" size="sm">
+                <Icon icon="svg-spinners:ring-resize" />
+                {t('qrLogin.waiting')}
+              </Text>
+            </Flex>
           </>
         ))()}
     </>
diff --git a/client/src/core/auth/modals/QRLoginModal/hooks/useQRLoginSession.ts b/client/src/core/auth/modals/QRLoginModal/hooks/useQRLoginSession.ts
index e07f52b71..fcf92135d 100644
--- a/client/src/core/auth/modals/QRLoginModal/hooks/useQRLoginSession.ts
+++ b/client/src/core/auth/modals/QRLoginModal/hooks/useQRLoginSession.ts
@@ -58,8 +58,7 @@ export default function useQRLoginSession({
 
       pollingIntervalRef.current = setInterval(async () => {
         try {
-          const response = await forgeAPI
-            .untyped('user/qrLogin/checkQRSessionStatus')
+          const response = await forgeAPI.user.qrLogin.checkQRSessionStatus
             .input({
               sessionId
             })
@@ -211,13 +210,10 @@ export default function useQRLoginSession({
         sessionIdRef.current = sessionId
 
         // Register the QR session with the server
-        const response = await forgeAPI
-          .untyped('user/qrLogin/registerQRSession')
-          .input({
-            sessionId,
-            browserInfo: getBrowserInfo()
-          })
-          .mutate({})
+        const response = await forgeAPI.user.qrLogin.registerQRSession.mutate({
+          sessionId,
+          browserInfo: getBrowserInfo()
+        })
 
         const newExpiresAt = response.expiresAt
 
diff --git a/client/src/core/auth/modals/QRLoginModal/index.tsx b/client/src/core/auth/modals/QRLoginModal/index.tsx
index f4a5aebc8..5667acb56 100644
--- a/client/src/core/auth/modals/QRLoginModal/index.tsx
+++ b/client/src/core/auth/modals/QRLoginModal/index.tsx
@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next'
 
-import { ModalHeader } from '@lifeforge/ui'
+import { ModalHeader, Text } from '@lifeforge/ui'
 
 import QRContent from './components/QRContent'
 
@@ -15,7 +15,9 @@ function QRLoginModal({ onClose }: { onClose: () => void }) {
         title="qrLogin.title"
         onClose={onClose}
       />
-      <p className="text-bg-500 mb-6">{t('qrLogin.description')}</p>
+      <Text color="muted" mb="lg">
+        {t('qrLogin.description')}
+      </Text>
 
       <QRContent onClose={onClose} />
     </>
diff --git a/client/src/core/auth/modals/TwoFAModal/components/ResendOTPButton.tsx b/client/src/core/auth/modals/TwoFAModal/components/ResendOTPButton.tsx
index a6d64b66d..a725648e6 100644
--- a/client/src/core/auth/modals/TwoFAModal/components/ResendOTPButton.tsx
+++ b/client/src/core/auth/modals/TwoFAModal/components/ResendOTPButton.tsx
@@ -15,11 +15,11 @@ function ResendOTPButton({
 
   return (
     <Button
-      width="100%"
       disabled={otpCooldown > 0}
       icon="tabler:refresh"
       loading={sendOtpLoading}
       variant="secondary"
+      width="100%"
       onClick={requestOTP}
     >
       {t('otp.buttons.resend')} {otpCooldown > 0 && `(${otpCooldown}s)`}
diff --git a/client/src/core/auth/modals/TwoFAModal/components/UsingAuthApp.tsx b/client/src/core/auth/modals/TwoFAModal/components/UsingAuthApp.tsx
index d09f839fe..085f6ed10 100644
--- a/client/src/core/auth/modals/TwoFAModal/components/UsingAuthApp.tsx
+++ b/client/src/core/auth/modals/TwoFAModal/components/UsingAuthApp.tsx
@@ -2,7 +2,7 @@ import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { usePromiseLoading } from '@lifeforge/shared'
-import { OTPInputBox } from '@lifeforge/ui'
+import { OTPInputBox, Text } from '@lifeforge/ui'
 
 function UsingAuthApp({
   callback
@@ -17,16 +17,16 @@ function UsingAuthApp({
 
   return (
     <>
-      <p className="mb-6">{t('modals.twoFA.description')}</p>
-      <div className="flex-center w-full flex-col">
-        <OTPInputBox
-          lighter
-          otp={otp}
-          setOtp={setOTP}
-          verifyOTP={onCallback}
-          verifyOtpLoading={loading}
-        />
-      </div>
+      <Text color="muted" mb="lg">
+        {t('modals.twoFA.description')}
+      </Text>
+      <OTPInputBox
+        lighter
+        otp={otp}
+        setOtp={setOTP}
+        verifyOTP={onCallback}
+        verifyOtpLoading={loading}
+      />
     </>
   )
 }
diff --git a/client/src/core/auth/modals/TwoFAModal/components/UsingEmail.tsx b/client/src/core/auth/modals/TwoFAModal/components/UsingEmail.tsx
index 01b832e3d..183e224f0 100644
--- a/client/src/core/auth/modals/TwoFAModal/components/UsingEmail.tsx
+++ b/client/src/core/auth/modals/TwoFAModal/components/UsingEmail.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next'
 import { toast } from 'react-toastify'
 
 import { useAuth } from '@lifeforge/shared'
-import { Button, OTPInputBox, TextInput } from '@lifeforge/ui'
+import { Button, OTPInputBox, Stack, Text, TextInput } from '@lifeforge/ui'
 
 import forgeAPI from '@/forgeAPI'
 
@@ -49,10 +49,7 @@ function UsingEmail({
     setSendOtpLoading(true)
 
     try {
-      const res = await forgeAPI
-        .untyped('user/2fa/requestOTP')
-        .input({ email })
-        .query()
+      const res = await forgeAPI.user['2fa'].requestOTP.input({ email }).query()
 
       tid.current = res
       setOtpSent(true)
@@ -97,58 +94,58 @@ function UsingEmail({
 
   return (
     <>
-      <p className="mb-6">{t('modals.twoFA.emailDescription')}</p>
-      <div className="flex-center w-full flex-col">
-        {otpSent ? (
-          <div className="space-y-3">
-            <OTPInputBox
-              lighter
-              otp={otp}
-              setOtp={setOTP}
-              verifyOTP={async otp => {
-                setVerifyOtpLoading(true)
-                callback(otp).finally(() => {
-                  setVerifyOtpLoading(false)
-                })
-              }}
-              verifyOtpLoading={verifyOtpLoading}
-            />
-            <ResendOTPButton
-              otpCooldown={otpCooldown}
-              sendOtpLoading={sendOtpLoading}
-              onClick={() => {
-                setEmail('')
-                setOtpSent(false)
-                setOtpCooldown(0)
-                localStorage.removeItem(`otpId:2fa`)
-                localStorage.removeItem(`otpCooldown:2fa`)
-              }}
-            />
-          </div>
-        ) : (
-          <>
-            <TextInput
-              className="mb-4 w-full"
-              icon="tabler:mail"
-              inputMode="email"
-              label="modals.twoFA.inputs.email"
-              namespace="common.auth"
-              placeholder="johndoe@gmail.com"
-              value={email}
-              onChange={setEmail}
-            />
-            <Button
-              icon="tabler:mail"
-              loading={sendOtpLoading}
-              namespace="common.vault"
-              width="100%"
-              onClick={requestOTP}
-            >
-              otp.buttons.request
-            </Button>
-          </>
-        )}
-      </div>
+      <Text color="muted" mb="lg">
+        {t('modals.twoFA.emailDescription')}
+      </Text>
+      {otpSent ? (
+        <Stack>
+          <OTPInputBox
+            lighter
+            otp={otp}
+            setOtp={setOTP}
+            verifyOTP={async otp => {
+              setVerifyOtpLoading(true)
+              callback(otp).finally(() => {
+                setVerifyOtpLoading(false)
+              })
+            }}
+            verifyOtpLoading={verifyOtpLoading}
+          />
+          <ResendOTPButton
+            otpCooldown={otpCooldown}
+            sendOtpLoading={sendOtpLoading}
+            onClick={() => {
+              setEmail('')
+              setOtpSent(false)
+              setOtpCooldown(0)
+              localStorage.removeItem(`otpId:2fa`)
+              localStorage.removeItem(`otpCooldown:2fa`)
+            }}
+          />
+        </Stack>
+      ) : (
+        <>
+          <TextInput
+            icon="tabler:mail"
+            inputMode="email"
+            label="modals.twoFA.inputs.email"
+            namespace="common.auth"
+            placeholder="johndoe@gmail.com"
+            value={email}
+            onChange={setEmail}
+          />
+          <Button
+            icon="tabler:mail"
+            loading={sendOtpLoading}
+            mt="lg"
+            namespace="common.vault"
+            width="100%"
+            onClick={requestOTP}
+          >
+            otp.buttons.request
+          </Button>
+        </>
+      )}
     </>
   )
 }
diff --git a/client/src/core/auth/modals/TwoFAModal/index.tsx b/client/src/core/auth/modals/TwoFAModal/index.tsx
index 5a0e0d577..1c79727af 100644
--- a/client/src/core/auth/modals/TwoFAModal/index.tsx
+++ b/client/src/core/auth/modals/TwoFAModal/index.tsx
@@ -3,8 +3,9 @@ import { useTranslation } from 'react-i18next'
 import { toast } from 'react-toastify'
 
 import { useAuth } from '@lifeforge/shared'
-import { Button, ModalHeader } from '@lifeforge/ui'
+import { Button, Flex, ModalHeader } from '@lifeforge/ui'
 
+import OrAuthWithDivider from '../../components/OrAuthWithDivider'
 import UsingAuthApp from './components/UsingAuthApp'
 import UsingEmail from './components/UsingEmail'
 
@@ -36,7 +37,7 @@ function TwoFAModal({ onClose }: { onClose: () => void }) {
   }
 
   return (
-    <div>
+    <Flex direction="column" minWidth="40vw">
       <ModalHeader
         icon="tabler:lock-access"
         namespace="common.auth"
@@ -50,15 +51,8 @@ function TwoFAModal({ onClose }: { onClose: () => void }) {
       ) : (
         <UsingEmail callback={otp => verifyOTP(otp)} />
       )}
-      <div className="mt-6 flex items-center gap-3">
-        <div className="bg-bg-500 h-[2px] w-full"></div>
-        <div className="text-bg-500 shrink-0 font-medium">
-          {t('orAuthenticateWith')}
-        </div>
-        <div className="bg-bg-500 h-[2px] w-full"></div>
-      </div>
+      <OrAuthWithDivider />
       <Button
-        className="mt-6 w-full"
         icon={authMethod === 'app' ? 'tabler:mail' : 'tabler:device-mobile'}
         namespace="common.auth"
         variant="secondary"
@@ -70,7 +64,7 @@ function TwoFAModal({ onClose }: { onClose: () => void }) {
           ? 'modals.twoFA.buttons.useEmailOtp'
           : 'modals.twoFA.buttons.useAuthApp'}
       </Button>
-    </div>
+    </Flex>
   )
 }
 
diff --git a/client/src/core/auth/pages/LoginPage.tsx b/client/src/core/auth/pages/LoginPage.tsx
index a96af3335..bdae00ce9 100644
--- a/client/src/core/auth/pages/LoginPage.tsx
+++ b/client/src/core/auth/pages/LoginPage.tsx
@@ -2,7 +2,7 @@ import { useEffect } from 'react'
 import { useSearchParams } from 'react-router'
 
 import { useAuth } from '@lifeforge/shared'
-import { Flex, ModalManager, WithQueryData } from '@lifeforge/ui'
+import { ModalManager, Stack, WithQueryData } from '@lifeforge/ui'
 
 import forgeAPI from '@/forgeAPI'
 
@@ -31,24 +31,23 @@ function LoginPage() {
   }, [searchParams])
 
   return (
-    <WithQueryData controller={forgeAPI.untyped('user/oauth/listProviders')}>
+    <WithQueryData controller={forgeAPI.user.oauth.listProviders}>
       {providers => (
         <>
-          <Flex
+          <Stack
             as="section"
-            direction="column"
             overflowY="auto"
             pb="lg"
             pt="2xl"
             px={{ base: 'xl', sm: '2xl' }}
             width={{ base: '100%', lg: '50%' }}
           >
-            <Flex centered direction="column" height="100%">
+            <Stack centered height="100%">
               <AuthHeader />
               <AuthForm providers={providers} />
-            </Flex>
+            </Stack>
             <AuthFooter />
-          </Flex>
+          </Stack>
           <AuthSideImage />
           <ModalManager />
         </>
diff --git a/client/src/core/auth/pages/UserCreationPage.tsx b/client/src/core/auth/pages/UserCreationPage.tsx
index c7621d845..75b8307f9 100644
--- a/client/src/core/auth/pages/UserCreationPage.tsx
+++ b/client/src/core/auth/pages/UserCreationPage.tsx
@@ -1,10 +1,9 @@
-import { Icon } from '@iconify/react'
 import { useMutation } from '@tanstack/react-query'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { toast } from 'react-toastify'
 
-import { Button, TextInput } from '@lifeforge/ui'
+import { Button, Flex, Icon, Stack, Text, TextInput } from '@lifeforge/ui'
 
 import forgeAPI from '@/forgeAPI'
 
@@ -22,7 +21,7 @@ function UserCreationPage() {
   const [errors, setErrors] = useState<Record<string, string>>({})
 
   const createUserMutation = useMutation(
-    forgeAPI.untyped('user/auth/createFirstUser').mutationOptions({
+    forgeAPI.user.auth.createFirstUser.mutationOptions({
       onSuccess: () => {
         toast.success(t('messages.userCreated'))
         window.location.reload()
@@ -87,20 +86,37 @@ function UserCreationPage() {
   }
 
   return (
-    <div className="flex-center flex size-full flex-col px-8">
-      <h1 className="mb-8 flex items-center gap-2 text-3xl font-semibold whitespace-nowrap">
-        <Icon className="text-custom-500 text-5xl" icon="tabler:hammer" />
-        <div>
-          LifeForge<span className="text-custom-500 text-4xl">.</span>
-        </div>
-      </h1>
-      <h2 className="text-center text-4xl font-semibold tracking-wide sm:text-5xl">
+    <Flex centered direction="column" px="xl" width="100%">
+      <Flex asChild centered gap="sm" mb="xl">
+        <Text as="h1" size="3xl" weight="semibold" whiteSpace="nowrap">
+          <Icon color="primary" icon="tabler:hammer" />
+          <div>
+            LifeForge
+            <Text color="primary" size="4xl">
+              .
+            </Text>
+          </div>
+        </Text>
+      </Flex>
+      <Text
+        align="center"
+        as="h2"
+        size={{ base: '4xl', sm: '5xl' }}
+        tracking="wide"
+        weight="semibold"
+      >
         {t('welcome.header')}
-      </h2>
-      <p className="text-bg-500 mt-2 text-center text-base sm:mt-4 sm:text-xl">
+      </Text>
+      <Text
+        align="center"
+        as="p"
+        color="muted"
+        mt={{ base: 'sm', sm: 'md' }}
+        size={{ base: 'base', sm: 'xl' }}
+      >
         {t('welcome.desc')}
-      </p>
-      <div className="mt-12 flex w-full max-w-md flex-col gap-4">
+      </Text>
+      <Stack maxWidth="40rem" mt="2xl" width="100%">
         <TextInput
           errorMsg={errors.email}
           icon="tabler:mail"
@@ -145,16 +161,16 @@ function UserCreationPage() {
           onChange={updateField('confirmPassword')}
         />
         <Button
-          className="mt-4"
           icon="tabler:arrow-right"
           iconPosition="end"
           loading={createUserMutation.isPending}
+          mt="md"
           onClick={handleSubmit}
         >
           {t('buttons.proceed')}
         </Button>
-      </div>
-    </div>
+      </Stack>
+    </Flex>
   )
 }
 
diff --git a/client/src/core/backups/components/BackupItem.tsx b/client/src/core/backups/components/BackupItem.tsx
index 5ff38424f..a2b2a58a1 100644
--- a/client/src/core/backups/components/BackupItem.tsx
+++ b/client/src/core/backups/components/BackupItem.tsx
@@ -1,4 +1,3 @@
-import { Icon } from '@iconify/react'
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 import dayjs from 'dayjs'
 import prettyBytes from 'pretty-bytes'
@@ -6,11 +5,14 @@ import { useCallback, useState } from 'react'
 import { toast } from 'react-toastify'
 
 import {
-  Button,
+  Box,
   Card,
   ConfirmationModal,
   ContextMenu,
   ContextMenuItem,
+  Flex,
+  Icon,
+  Text,
   useModalStore
 } from '@lifeforge/ui'
 
@@ -32,8 +34,7 @@ function BackupItem({
   const [downloadLoading, setDownloadLoading] = useState(false)
 
   const deleteMutation = useMutation(
-    forgeAPI
-      .untyped('backups/remove')
+    forgeAPI.backups.remove
       .input({
         key: backup.key
       })
@@ -50,8 +51,7 @@ function BackupItem({
   const handleDownloadBackup = useCallback(async () => {
     setDownloadLoading(true)
 
-    const buffer = (await forgeAPI
-      .untyped('backups/download')
+    const buffer = (await forgeAPI.backups.download
       .input({
         key: backup.key
       })
@@ -91,43 +91,26 @@ function BackupItem({
   }, [backup.key])
 
   return (
-    <Card as="li" className="flex-between gap-6">
-      <div className="flex w-full min-w-0 items-center gap-3">
-        <Icon
-          className="text-bg-500 ml-2 size-7 shrink-0"
-          icon="tabler:file-zip"
-        />
-        <div className="w-full min-w-0">
-          <h3 className="flex w-full min-w-0 items-end gap-2 text-lg font-medium">
-            <p className="truncate">{backup.key}</p>{' '}
-            <p className="text-bg-500 mb-0.5 block text-sm whitespace-nowrap">
-              ({prettyBytes(backup.size)})
-            </p>
-          </h3>
-          <p className="text-bg-500 mt-1 text-sm">
+    <Card align="center" as="li" direction="row" gap="lg" justify="between">
+      <Flex align="center" gap="md" minWidth="0" width="100%">
+        <Icon color="muted" icon="tabler:file-zip" ml="sm" size="2em" />
+        <Box minWidth="0" width="100%">
+          <Flex asChild align="baseline" gap="sm" minWidth="0" width="100%">
+            <Text as="h3" weight="medium">
+              <Text truncate size="lg">
+                {backup.key}
+              </Text>{' '}
+              <Text color="muted" size="sm" whiteSpace="nowrap">
+                ({prettyBytes(backup.size)})
+              </Text>
+            </Text>
+          </Flex>
+          <Text color="muted" mt="xs" size="sm">
             {dayjs(backup.modified).format('MMM D, YYYY h:mm A')}
-          </p>
-        </div>
-      </div>
-      <div className="hidden shrink-0 items-center gap-2 sm:flex">
-        <Button
-          icon="tabler:download"
-          loading={downloadLoading}
-          variant="plain"
-          onClick={handleDownloadBackup}
-        />
-        <Button
-          dangerous
-          icon="tabler:trash"
-          variant="plain"
-          onClick={handleDeleteBackup}
-        />
-      </div>
-      <ContextMenu
-        classNames={{
-          wrapper: 'flex sm:hidden'
-        }}
-      >
+          </Text>
+        </Box>
+      </Flex>
+      <ContextMenu>
         <ContextMenuItem
           icon="tabler:download"
           label="Download"
diff --git a/client/src/core/backups/components/CreateBackupModal.tsx b/client/src/core/backups/components/CreateBackupModal.tsx
index e1caf66ef..db4c19f98 100644
--- a/client/src/core/backups/components/CreateBackupModal.tsx
+++ b/client/src/core/backups/components/CreateBackupModal.tsx
@@ -12,7 +12,7 @@ function CreateBackupModal({ onClose }: { onClose: () => void }) {
   const queryClient = useQueryClient()
 
   const mutation = useMutation(
-    forgeAPI.untyped('backups/create').mutationOptions({
+    forgeAPI.backups.create.mutationOptions({
       onSuccess: () => {
         queryClient.invalidateQueries({ queryKey: ['backups'] })
       },
diff --git a/client/src/core/backups/index.tsx b/client/src/core/backups/index.tsx
index a10cc013b..38e167938 100644
--- a/client/src/core/backups/index.tsx
+++ b/client/src/core/backups/index.tsx
@@ -6,6 +6,7 @@ import {
   EmptyStateScreen,
   FAB,
   ModuleHeader,
+  Stack,
   WithQuery,
   useModalStore
 } from '@lifeforge/ui'
@@ -20,24 +21,14 @@ function Backups() {
 
   const { open } = useModalStore()
 
-  const backupsQuery = useQuery(
-    forgeAPI
-      .untyped<
-        {
-          key: string
-          size: number
-          modified: string
-        }[]
-      >('/backups/list')
-      .queryOptions()
-  )
+  const backupsQuery = useQuery(forgeAPI.backups.list.queryOptions())
 
   return (
     <>
       <ModuleHeader
         actionButton={
           <Button
-            className="hidden sm:flex"
+            display={{ base: 'none', sm: 'flex' }}
             icon="tabler:plus"
             tProps={{
               item: t('items.backup')
@@ -51,27 +42,25 @@ function Backups() {
         }
         totalItems={backupsQuery.data?.length ?? 0}
       />
-      <div className="flex-1">
-        <WithQuery query={backupsQuery}>
-          {data =>
-            data.length > 0 ? (
-              <ul className="flex flex-col gap-3">
-                {data.map(backup => (
-                  <BackupItem key={backup.key} backup={backup} />
-                ))}
-              </ul>
-            ) : (
-              <EmptyStateScreen
-                icon="tabler:history-off"
-                message={{
-                  id: 'noBackups',
-                  namespace: 'common.backups'
-                }}
-              />
-            )
-          }
-        </WithQuery>
-      </div>
+      <WithQuery query={backupsQuery}>
+        {data =>
+          data.length > 0 ? (
+            <Stack as="ul">
+              {data.map(backup => (
+                <BackupItem key={backup.key} backup={backup} />
+              ))}
+            </Stack>
+          ) : (
+            <EmptyStateScreen
+              icon="tabler:history-off"
+              message={{
+                id: 'noBackups',
+                namespace: 'common.backups'
+              }}
+            />
+          )
+        }
+      </WithQuery>
       <FAB
         onClick={() => {
           open(CreateBackupModal, {})
diff --git a/client/src/core/dashboard/components/DashboardGrid.tsx b/client/src/core/dashboard/components/DashboardGrid.tsx
index 6c2c374b2..717ff2b6c 100644
--- a/client/src/core/dashboard/components/DashboardGrid.tsx
+++ b/client/src/core/dashboard/components/DashboardGrid.tsx
@@ -1,11 +1,10 @@
-import { Icon } from '@iconify/react'
 import clsx from 'clsx'
 import { useMemo } from 'react'
 import { Responsive as ResponsiveGridLayout } from 'react-grid-layout'
 import { useTranslation } from 'react-i18next'
 
 import { useDivSize, usePersonalization } from '@lifeforge/shared'
-import { EmptyStateScreen, LoadingScreen } from '@lifeforge/ui'
+import { Box, EmptyStateScreen, Icon, LoadingScreen } from '@lifeforge/ui'
 
 import { useUserPersonalization } from '@/providers/features/UserPersonalizationProvider'
 
@@ -57,7 +56,7 @@ function DashboardGrid({
 
   if (Object.values(enabledWidgets).every(e => e.length === 0)) {
     return (
-      <div className="flex h-full flex-1 items-center justify-center">
+      <Box asChild flex="1">
         <EmptyStateScreen
           icon="tabler:hammer"
           message={{
@@ -65,7 +64,7 @@ function DashboardGrid({
             namespace: 'common.dashboard'
           }}
         />
-      </div>
+      </Box>
     )
   }
 
@@ -73,15 +72,13 @@ function DashboardGrid({
     <ResponsiveGridLayout
       autoSize
       className={canLayoutChange ? 'pb-64' : undefined}
-      cols={
-        {
-          lg: 8,
-          md: 8,
-          sm: 4,
-          xs: 4,
-          xxs: 4
-        } as any
-      }
+      cols={{
+        lg: 8,
+        md: 8,
+        sm: 4,
+        xs: 4,
+        xxs: 4
+      }}
       containerPadding={[0, 0]}
       isDraggable={canLayoutChange}
       isDroppable={canLayoutChange}
@@ -90,8 +87,8 @@ function DashboardGrid({
       margin={[10, 10]}
       rowHeight={100}
       width={width}
-      onLayoutChange={(_: any, layouts: any) => {
-        changeDashboardLayout(layouts)
+      onLayoutChange={(_, layouts) => {
+        changeDashboardLayout(layouts as never)
       }}
     >
       {[
@@ -134,10 +131,12 @@ function DashboardGrid({
           {canLayoutChange && (
             <>
               <div className="bg-bg-900/30 absolute inset-0 top-0 left-0 rounded" />
-              <Icon
-                className="absolute right-0 bottom-0 text-2xl"
-                icon="clarity:drag-handle-corner-line"
-              />
+              <Box bottom="0" position="absolute" right="0">
+                <Icon
+                  className="1.5em"
+                  icon="clarity:drag-handle-corner-line"
+                />
+              </Box>
             </>
           )}
         </div>
diff --git a/client/src/core/dashboard/index.tsx b/client/src/core/dashboard/index.tsx
index e4ca3b99a..91bbd1b3f 100644
--- a/client/src/core/dashboard/index.tsx
+++ b/client/src/core/dashboard/index.tsx
@@ -3,6 +3,7 @@ import { useCallback, useRef, useState } from 'react'
 import {
   Button,
   ContextMenuItem,
+  Flex,
   ModuleHeader,
   useModalStore
 } from '@lifeforge/ui'
@@ -26,7 +27,7 @@ function DashboardContent() {
   }, [widgets])
 
   return (
-    <div ref={wrapperRef} className="mb-12 flex w-full flex-1 flex-col">
+    <Flex ref={wrapperRef} direction="column" flex="1" mb="2xl">
       <ModuleHeader
         contextMenuProps={{
           children: (
@@ -74,7 +75,7 @@ function DashboardContent() {
           </div>
         </div>
       )}
-    </div>
+    </Flex>
   )
 }
 
diff --git a/client/src/core/dashboard/modals/ManageWidgetsModal/components/ComponentItem.tsx b/client/src/core/dashboard/modals/ManageWidgetsModal/components/ComponentItem.tsx
index a39235ed4..be485db48 100644
--- a/client/src/core/dashboard/modals/ManageWidgetsModal/components/ComponentItem.tsx
+++ b/client/src/core/dashboard/modals/ManageWidgetsModal/components/ComponentItem.tsx
@@ -1,10 +1,9 @@
-import { Icon } from '@iconify/react'
 import clsx from 'clsx'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { type IDashboardLayout, usePersonalization } from '@lifeforge/shared'
-import { Switch } from '@lifeforge/ui'
+import { Icon, Switch } from '@lifeforge/ui'
 
 import { useUserPersonalization } from '@/providers/features/UserPersonalizationProvider'
 
@@ -120,7 +119,7 @@ function ComponentListItem({
               : 'bg-bg-200 text-bg-400 dark:bg-bg-700/50 dark:text-bg-500'
           )}
         >
-          <Icon className="size-6" icon={icon} />
+          <Icon icon={icon} size="1.5em" />
         </div>
         <div className="flex flex-col">
           <div className="font-semibold">
diff --git a/client/src/core/dashboard/widgets/Quotes.tsx b/client/src/core/dashboard/widgets/Quotes.tsx
index 7848d0e99..863fcbf28 100644
--- a/client/src/core/dashboard/widgets/Quotes.tsx
+++ b/client/src/core/dashboard/widgets/Quotes.tsx
@@ -1,11 +1,10 @@
-import { Icon } from '@iconify/react'
 import { useQuery } from '@tanstack/react-query'
 import clsx from 'clsx'
 import tinycolor from 'tinycolor2'
 
 import { usePersonalization } from '@lifeforge/shared'
 import type { WidgetConfig } from '@lifeforge/shared'
-import { WithQuery } from '@lifeforge/ui'
+import { Icon, WithQuery } from '@lifeforge/ui'
 
 import forgeAPI from '@/forgeAPI'
 
diff --git a/client/src/core/documentation/index.tsx b/client/src/core/documentation/index.tsx
index bdd5837c1..de52a0e8a 100644
--- a/client/src/core/documentation/index.tsx
+++ b/client/src/core/documentation/index.tsx
@@ -19,14 +19,6 @@ function index() {
     navigate(-1)
     toast.success(t('redirected'))
   }, [])
-
-  return (
-    <>
-      <div className="flex size-full items-center justify-center">
-        <p className="text-bg-500 text-2xl font-medium">{t('redirecting')}</p>
-      </div>
-    </>
-  )
 }
 
 export default index
diff --git a/client/src/core/moduleManager/pages/Categories/components/CategoryItem.tsx b/client/src/core/moduleManager/pages/Categories/components/CategoryItem.tsx
index 6d915c699..b0355f175 100644
--- a/client/src/core/moduleManager/pages/Categories/components/CategoryItem.tsx
+++ b/client/src/core/moduleManager/pages/Categories/components/CategoryItem.tsx
@@ -4,11 +4,15 @@ import { toast } from 'react-toastify'
 
 import { useFederation } from '@lifeforge/shared'
 import {
+  Box,
   Button,
   Card,
   ConfirmationModal,
   ContextMenu,
   ContextMenuItem,
+  Flex,
+  Text,
+  WithDivide,
   useModalStore
 } from '@lifeforge/ui'
 
@@ -55,7 +59,7 @@ function CategoryItem({
 
       delete newCategoryTranslations[key]
 
-      await forgeAPI.untyped('modules/categories/update').mutate({
+      await forgeAPI.modules.categories.update.mutate({
         data: newCategoryTranslations
       })
 
@@ -75,35 +79,58 @@ function CategoryItem({
   }
 
   return (
-    <Card ref={setNodeRef} className="flex-between" style={style}>
-      <div className="flex items-center gap-4">
+    <Card
+      ref={setNodeRef}
+      align="center"
+      direction="row"
+      justify="between"
+      style={style}
+    >
+      <Flex align="center" gap="md">
         <Button
           {...attributes}
           {...listeners}
-          className="cursor-move! touch-none"
           icon="tabler:menu"
+          style={{
+            cursor: 'move',
+            touchAction: 'none'
+          }}
           variant="plain"
         />
-        <div>
-          <h3 className="text-lg font-medium">{key}</h3>
-          <p className="text-bg-500 divide-bg-700 mt-1 flex flex-wrap items-center divide-x text-sm">
-            {Object.entries(value).map(([lang, text], index) => (
-              <span
-                key={lang}
-                className={
-                  index === 0
-                    ? 'pr-2'
-                    : index === Object.entries(value).length - 1
-                      ? 'pl-2'
-                      : 'px-2'
-                }
-              >
-                <span className="font-medium">{lang}</span>: {text}
-              </span>
-            ))}
-          </p>
-        </div>
-      </div>
+        <Box>
+          <Text as="code" size="lg" weight="medium">
+            {key}
+          </Text>
+          <Flex asChild align="center" mt="xs" wrap="wrap">
+            <Text as="p" color="muted" size="sm">
+              {Object.entries(value).map(([lang, text], index) => (
+                <WithDivide
+                  key={lang}
+                  axis="x"
+                  color="bg-200"
+                  darkColor="bg-600"
+                >
+                  <Text
+                    pl={
+                      index === Object.entries(value).length - 1
+                        ? 'sm'
+                        : undefined
+                    }
+                    pr={index === 0 ? 'sm' : undefined}
+                    px={
+                      index && index !== Object.entries(value).length - 1
+                        ? 'sm'
+                        : undefined
+                    }
+                  >
+                    <Text weight="medium">{lang}</Text>: {text}
+                  </Text>
+                </WithDivide>
+              ))}
+            </Text>
+          </Flex>
+        </Box>
+      </Flex>
       <ContextMenu>
         <ContextMenuItem
           icon="tabler:pencil"
diff --git a/client/src/core/moduleManager/pages/Categories/components/ModifyCategoryModal.tsx b/client/src/core/moduleManager/pages/Categories/components/ModifyCategoryModal.tsx
index a25da6296..c27da61a4 100644
--- a/client/src/core/moduleManager/pages/Categories/components/ModifyCategoryModal.tsx
+++ b/client/src/core/moduleManager/pages/Categories/components/ModifyCategoryModal.tsx
@@ -1,12 +1,16 @@
-import { Icon } from '@iconify/react'
 import { useQuery } from '@tanstack/react-query'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { toast } from 'react-toastify'
 
 import {
+  Box,
   Button,
+  Flex,
+  Icon,
   ModalHeader,
+  Stack,
+  Text,
   TextInput,
   WithQuery,
   WithQueryData,
@@ -33,9 +37,7 @@ function ModifyCategoryModal({
 }) {
   const { t } = useTranslation('common.moduleManager')
 
-  const languagesQuery = useQuery(
-    forgeAPI.untyped<{ name: string }[]>('locales/listLanguages').queryOptions()
-  )
+  const languagesQuery = useQuery(forgeAPI.locales.listLanguages.queryOptions())
 
   const { open } = useModalStore()
 
@@ -78,15 +80,10 @@ function ModifyCategoryModal({
     try {
       const languages = data.value.map(([key]) => key)
 
-      const result = await forgeAPI
-        .untyped<{
-          key: string
-          value: string
-        }>('modules/categories/aiTranslate')
-        .mutate({
-          key: data.key,
-          languages
-        })
+      const result = await forgeAPI.modules.categories.aiTranslate.mutate({
+        key: data.key,
+        languages
+      })
 
       if (!result) {
         throw new Error('Something went wrong')
@@ -115,7 +112,7 @@ function ModifyCategoryModal({
   }, [languagesQuery.data])
 
   return (
-    <div className="min-w-[40vw]">
+    <Box minWidth="40vw">
       <ModalHeader
         icon={openType === 'create' ? 'tabler:plus' : 'tabler:pencil'}
         namespace="common.moduleManager"
@@ -149,86 +146,88 @@ function ModifyCategoryModal({
                   value={data.key}
                   onChange={value => setData({ ...data, key: value })}
                 />
-                <div className="text-bg-500 mt-6 flex items-center gap-2">
-                  <Icon className="size-5" icon="mingcute:translate-line" />
-                  <span className="font-medium">{t('misc.translations')}</span>
-                </div>
-                <div className="mt-3 space-y-3">
+                <Text asChild color="muted" weight="medium">
+                  <Flex align="center" gap="sm" mt="xl">
+                    <Icon icon="mingcute:translate-line" />
+                    {t('misc.translations')}
+                  </Flex>
+                </Text>
+                <Stack mt="md">
                   {data.value.map(([key, value], index) => (
-                    <div key={index} className="space-y-3">
-                      <div className="flex items-center gap-3">
-                        <TextInput
-                          required
-                          actionButtonProps={{
-                            icon: 'tabler:pencil',
-                            onClick: () => {
-                              open(ModifyTranslationKeyModal, {
-                                openType: 'update',
-                                key,
-                                onSubmit: key => {
-                                  setData({
-                                    ...data,
-                                    value: data.value.map(([k, v], i) =>
-                                      i === index ? [key, v] : [k, v]
-                                    )
-                                  })
-                                }
-                              })
-                            }
-                          }}
-                          icon="tabler:language"
-                          label={key}
-                          placeholder="e.g. Productivity, Produktiviti, 生产力, 生產力, etc."
-                          value={value}
-                          onChange={value => {
-                            setData({
-                              ...data,
-                              value: data.value.map(([k, v], i) =>
-                                i === index ? [k, value] : [k, v]
-                              )
+                    <Flex key={index} align="center" gap="md">
+                      <TextInput
+                        required
+                        actionButtonProps={{
+                          icon: 'tabler:pencil',
+                          onClick: () => {
+                            open(ModifyTranslationKeyModal, {
+                              openType: 'update',
+                              key,
+                              onSubmit: key => {
+                                setData({
+                                  ...data,
+                                  value: data.value.map(([k, v], i) =>
+                                    i === index ? [key, v] : [k, v]
+                                  )
+                                })
+                              }
                             })
-                          }}
-                        />
-                        <Button
-                          dangerous
-                          icon="tabler:trash"
-                          variant="plain"
-                          onClick={() => {
-                            setData({
-                              ...data,
-                              value: data.value.filter((_, i) => i !== index)
-                            })
-                          }}
-                        />
-                      </div>
-                    </div>
-                  ))}
-                  <Button
-                    icon="tabler:plus"
-                    namespace="common.moduleManager"
-                    variant="plain"
-                    width="100%"
-                    onClick={() => {
-                      open(ModifyTranslationKeyModal, {
-                        openType: 'create',
-                        onSubmit: key => {
-                          if (data.value.some(([k]) => k === key))
-                            throw new Error('Translation key already exists')
-
+                          }
+                        }}
+                        icon="tabler:language"
+                        label={key}
+                        placeholder="e.g. Productivity, Produktiviti, 生产力, 生產力, etc."
+                        value={value}
+                        onChange={value => {
                           setData({
                             ...data,
-                            value: [...data.value, [key, '']]
+                            value: data.value.map(([k, v], i) =>
+                              i === index ? [k, value] : [k, v]
+                            )
                           })
-                        }
-                      })
-                    }}
-                  >
-                    Add Translation
-                  </Button>
-                </div>
+                        }}
+                      />
+                      <Button
+                        dangerous
+                        icon="tabler:trash"
+                        variant="plain"
+                        onClick={() => {
+                          setData({
+                            ...data,
+                            value: data.value.filter((_, i) => i !== index)
+                          })
+                        }}
+                      />
+                    </Flex>
+                  ))}
+                </Stack>
+                <Button
+                  icon="tabler:plus"
+                  mt="lg"
+                  namespace="common.moduleManager"
+                  variant="plain"
+                  width="100%"
+                  onClick={() => {
+                    open(ModifyTranslationKeyModal, {
+                      openType: 'create',
+                      onSubmit: key => {
+                        if (data.value.some(([k]) => k === key))
+                          throw new Error('Translation key already exists')
+
+                        setData({
+                          ...data,
+                          value: [...data.value, [key, '']]
+                        })
+                      }
+                    })
+                  }}
+                >
+                  Add Translation
+                </Button>
                 <Button
-                  className="mt-6 w-full"
                   icon={openType === 'create' ? 'tabler:plus' : 'tabler:pencil'}
+                  mt="xl"
+                  width="100%"
                   onClick={handleSubmit}
                 >
                   {openType}
@@ -238,7 +237,7 @@ function ModifyCategoryModal({
           </WithQuery>
         )}
       </WithQueryData>
-    </div>
+    </Box>
   )
 }
 
diff --git a/client/src/core/moduleManager/pages/Categories/index.tsx b/client/src/core/moduleManager/pages/Categories/index.tsx
index 4a16f1047..994d117a3 100644
--- a/client/src/core/moduleManager/pages/Categories/index.tsx
+++ b/client/src/core/moduleManager/pages/Categories/index.tsx
@@ -20,9 +20,12 @@ import { toast } from 'react-toastify'
 import { SYSTEM_CATEGORIES, useFederation } from '@lifeforge/shared'
 import {
   Alert,
+  Box,
   Button,
   EmptyStateScreen,
   ModuleHeader,
+  Stack,
+  Text,
   useModalStore
 } from '@lifeforge/ui'
 
@@ -92,7 +95,7 @@ function Categories() {
 
       newCategoryTranslations[newData.key] = newData.value
 
-      await forgeAPI.untyped('modules/categories/update').mutate({
+      await forgeAPI.modules.categories.update.mutate({
         data: newCategoryTranslations
       })
 
@@ -128,7 +131,7 @@ function Categories() {
             newCategoryTranslations[item.key] = item.value
           }
 
-          await forgeAPI.untyped('modules/categories/update').mutate({
+          await forgeAPI.modules.categories.update.mutate({
             data: newCategoryTranslations
           })
 
@@ -147,7 +150,7 @@ function Categories() {
       <ModuleHeader
         actionButton={
           <Button
-            className="hidden md:flex"
+            display={{ base: 'none', md: 'flex' }}
             icon="tabler:plus"
             tProps={{
               item: t('items.category')
@@ -169,17 +172,19 @@ function Categories() {
         totalItems={items.length}
       />
       {missingKeys.length > 0 && (
-        <Alert className="text-bg-500 mb-6" type="warning">
-          {missingKeys.length} categories are missing translations:{' '}
-          {missingKeys.map((key, idx) => (
-            <>
-              <code key={key} className="text-bg-800 dark:text-bg-100">
-                {key}
-              </code>
-              {idx < missingKeys.length - 1 && ', '}
-            </>
-          ))}
-        </Alert>
+        <Box asChild mb="lg">
+          <Alert type="warning">
+            {missingKeys.length} categories are missing translations:{' '}
+            {missingKeys.map((key, idx) => (
+              <>
+                <Text key={key} as="code">
+                  {key}
+                </Text>
+                {idx < missingKeys.length - 1 && ', '}
+              </>
+            ))}
+          </Alert>
+        </Box>
       )}
       {items.length > 0 ? (
         <DndContext
@@ -191,7 +196,7 @@ function Categories() {
             items={items.map(item => item.key)}
             strategy={verticalListSortingStrategy}
           >
-            <div className="space-y-3">
+            <Stack>
               {items.map(item => (
                 <CategoryItem
                   key={item.key}
@@ -200,7 +205,7 @@ function Categories() {
                   onModify={handleModify}
                 />
               ))}
-            </div>
+            </Stack>
           </SortableContext>
         </DndContext>
       ) : (
diff --git a/client/src/core/moduleManager/pages/Modules/components/ModuleItem.tsx b/client/src/core/moduleManager/pages/Modules/components/ModuleItem.tsx
index 162c55bcf..873d9827f 100644
--- a/client/src/core/moduleManager/pages/Modules/components/ModuleItem.tsx
+++ b/client/src/core/moduleManager/pages/Modules/components/ModuleItem.tsx
@@ -1,17 +1,22 @@
-import { Icon } from '@iconify/react'
 import { useMutation } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
 import { toast } from 'react-toastify'
-import COLORS from 'tailwindcss/colors'
 
 import { useAPIOnlineStatus, useFederation } from '@lifeforge/shared'
 import {
+  Box,
+  COLORS,
   Card,
   ConfirmationModal,
   ContextMenu,
   ContextMenuItem,
+  Flex,
+  Icon,
+  TAILWIND_PALETTE,
   TagChip,
-  useModalStore
+  Text,
+  useModalStore,
+  withOpacity
 } from '@lifeforge/ui'
 
 import forgeAPI from '@/forgeAPI'
@@ -47,23 +52,20 @@ function ModuleItem({
 
   const devModeMutation = useMutation({
     mutationFn: () =>
-      forgeAPI
-        .untyped('modules/devMode/toggle')
-        .mutate({ moduleName: module.name }),
-    onSuccess: data => {
-      if (data) {
-        toast.success(
-          data.isDevMode
-            ? t('common.moduleManager:devMode.enabled', {
-                module: translatedTitle
-              })
-            : t('common.moduleManager:devMode.disabled', {
-                module: translatedTitle
-              })
-        )
-        onDevModeChange?.()
-        refetchFederation.current?.()
-      }
+      forgeAPI.modules.devMode.toggle.mutate({ moduleName: module.name }),
+    onSuccess: () => {
+      toast.success(
+        !module.isDevMode
+          ? t('common.moduleManager:devMode.enabled', {
+              module: translatedTitle
+            })
+          : t('common.moduleManager:devMode.disabled', {
+              module: translatedTitle
+            })
+      )
+
+      onDevModeChange?.()
+      refetchFederation.current?.()
     },
     onError: () => {
       toast.error('Failed to toggle dev mode')
@@ -101,40 +103,52 @@ function ModuleItem({
   }
 
   return (
-    <Card className="group flex min-w-0 flex-col gap-4">
-      <div className="flex min-w-0 items-start gap-4">
-        <div className="bg-custom-500/20 text-custom-500 flex size-12 shrink-0 items-center justify-center rounded-lg shadow-sm">
-          <Icon className="size-7" icon={module.icon} />
-        </div>
-        <div className="flex min-w-0 flex-1 items-start justify-between gap-4">
-          <div className="min-w-0">
-            <div className="flex items-center gap-2">
-              <h3 className="w-full min-w-0 truncate text-lg font-semibold">
+    <Card gap="md" minWidth="0">
+      <Flex align="start" gap="md">
+        <Flex
+          centered
+          shadow
+          flexShrink="0"
+          height="3em"
+          r="lg"
+          style={{
+            backgroundColor: withOpacity(COLORS['custom-500'], 0.2)
+          }}
+          width="3em"
+        >
+          <Icon color="primary" icon={module.icon} size="1.5em" />
+        </Flex>
+        <Flex align="start" flex="1" gap="md" justify="between" minWidth="0">
+          <Box minWidth="0">
+            <Flex align="center" gap="sm">
+              <Text truncate as="h3" size="lg" weight="semibold">
                 {translatedTitle}
-              </h3>
+              </Text>
               {module.isDevMode && environment.client === 'development' && (
                 <TagChip
-                  className="text-xs!"
-                  color={COLORS.yellow[500]}
+                  color={TAILWIND_PALETTE.yellow[500]}
+                  flexShrink="0"
                   icon="tabler:code"
                   label={t('common.moduleManager:devMode.label')}
+                  size="sm"
                   variant="outlined"
                 />
               )}
               {!module.hasDist && (
                 <TagChip
-                  className="text-xs!"
-                  color={COLORS.red[500]}
+                  color={TAILWIND_PALETTE.red[500]}
+                  flexShrink="0"
                   icon="tabler:alert-triangle"
                   label={t('common.moduleManager:notBuilt.label')}
+                  size="sm"
                   variant="outlined"
                 />
               )}
-            </div>
-            <div className="text-bg-500 flex items-center text-sm">
+            </Flex>
+            <Text color="muted" size="sm">
               v{module.version}
-            </div>
-          </div>
+            </Text>
+          </Box>
           <ContextMenu>
             {environment.client === 'development' && (
               <ContextMenuItem
@@ -153,21 +167,23 @@ function ModuleItem({
               onClick={handleUninstall}
             />
           </ContextMenu>
-        </div>
-      </div>
+        </Flex>
+      </Flex>
       {translatedDescription && (
-        <p className="text-bg-500 line-clamp-2 leading-relaxed">
+        <Text as="p" color="muted" leading="relaxed" lineClamp={2}>
           {translatedDescription}
-        </p>
+        </Text>
       )}
-      <div className="mt-auto">
+      <Box style={{ marginTop: 'auto' }}>
         {module.author && (
-          <div className="text-bg-500 flex items-center gap-1.5 text-sm">
-            <Icon className="size-4" icon="tabler:user" />
-            <span>{module.author.split('<')[0].trim()}</span>
-          </div>
+          <Flex asChild align="center" gap="sm">
+            <Text color="muted">
+              <Icon icon="tabler:user" size="1.1rem" />
+              <span>{module.author.split('<')[0].trim()}</span>
+            </Text>
+          </Flex>
         )}
-      </div>
+      </Box>
     </Card>
   )
 }
diff --git a/client/src/core/moduleManager/pages/Modules/index.tsx b/client/src/core/moduleManager/pages/Modules/index.tsx
index 22c23f73d..7a29feb74 100644
--- a/client/src/core/moduleManager/pages/Modules/index.tsx
+++ b/client/src/core/moduleManager/pages/Modules/index.tsx
@@ -3,7 +3,15 @@ import { useMemo } from 'react'
 import { toast } from 'react-toastify'
 
 import { useFederation, usePersonalization } from '@lifeforge/shared'
-import { EmptyStateScreen, ModuleHeader, WithQuery } from '@lifeforge/ui'
+import {
+  Box,
+  EmptyStateScreen,
+  Grid,
+  ModuleHeader,
+  Stack,
+  Text,
+  WithQuery
+} from '@lifeforge/ui'
 
 import forgeAPI from '@/forgeAPI'
 
@@ -30,13 +38,11 @@ function Modules() {
 
   const queryClient = useQueryClient()
 
-  const modulesQuery = useQuery(
-    forgeAPI.untyped<InstalledModule[]>('modules/list').queryOptions()
-  )
+  const modulesQuery = useQuery(forgeAPI.modules.list.queryOptions())
 
   const uninstallMutation = useMutation({
     mutationFn: (moduleName: string) =>
-      forgeAPI.untyped('modules/uninstall').mutate({ moduleName }),
+      forgeAPI.modules.uninstall.mutate({ moduleName }),
     onSuccess: (data, moduleName) => {
       if (data.success) {
         toast.success(`Uninstalled ${moduleName}`)
@@ -91,16 +97,16 @@ function Modules() {
       <WithQuery query={modulesQuery}>
         {modules =>
           modules.length > 0 ? (
-            <div className="mb-12 space-y-12">
+            <Box mb="2xl">
               {Object.entries(groupedModules).map(([category, mods]) => (
-                <section key={category}>
-                  <h2 className="text-bg-500 mb-4 text-2xl font-medium">
+                <Stack key={category} as="section">
+                  <Text as="h2" size="2xl" weight="medium">
                     {getCategoryName(category)}
-                    <span className="text-bg-400 dark:text-bg-600 ml-2 text-sm font-normal">
+                    <Text color="muted" ml="sm" size="sm">
                       ({mods.length})
-                    </span>
-                  </h2>
-                  <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+                    </Text>
+                  </Text>
+                  <Grid gap="md" templateCols={{ base: 1, md: 2, lg: 3 }}>
                     {mods.map(mod => (
                       <ModuleItem
                         key={mod.name}
@@ -115,10 +121,10 @@ function Modules() {
                         }}
                       />
                     ))}
-                  </div>
-                </section>
+                  </Grid>
+                </Stack>
               ))}
-            </div>
+            </Box>
           ) : (
             <EmptyStateScreen
               icon="tabler:apps-off"
diff --git a/client/src/core/personalization/components/BgImageSelector/index.tsx b/client/src/core/personalization/components/BgImageSelector/index.tsx
index b9f8e900f..d87dded73 100644
--- a/client/src/core/personalization/components/BgImageSelector/index.tsx
+++ b/client/src/core/personalization/components/BgImageSelector/index.tsx
@@ -30,7 +30,7 @@ function BgImageSelector() {
   }, [])
 
   const deleteMutation = useMutation(
-    forgeAPI.untyped('user/personalization/deleteBgImage').mutationOptions({
+    forgeAPI.user.personalization.deleteBgImage.mutationOptions({
       onSuccess: () => {
         setBgImage('')
         setBackdropFilters({
@@ -61,7 +61,7 @@ function BgImageSelector() {
   async function onSubmit(file: string | File) {
     try {
       const data = await forgeAPI
-        .untyped('user/personalization/updateBgImage')
+        .user.personalization.updateBgImage
         .mutate({
           file
         })
diff --git a/client/src/core/personalization/components/BgImageSelector/modals/AdjustBgImageModal/components/AdjustmentColumn.tsx b/client/src/core/personalization/components/BgImageSelector/modals/AdjustBgImageModal/components/AdjustmentColumn.tsx
index d9dc03af2..2e9b32ebc 100644
--- a/client/src/core/personalization/components/BgImageSelector/modals/AdjustBgImageModal/components/AdjustmentColumn.tsx
+++ b/client/src/core/personalization/components/BgImageSelector/modals/AdjustBgImageModal/components/AdjustmentColumn.tsx
@@ -21,7 +21,7 @@ function AdjustmentColumn({
   return (
     <OptionsColumn
       breakpoint="md"
-      className="dark:bg-bg-800/30 min-w-0"
+      // className="dark:bg-bg-800/30 min-w-0"
       description={t(
         `bgImageSelector.modals.adjustBackground.columns.${_.camelCase(title)}.desc`
       )}
diff --git a/client/src/core/personalization/components/BgTempSelector/index.tsx b/client/src/core/personalization/components/BgTempSelector/index.tsx
index e498ab1c1..29684edf7 100644
--- a/client/src/core/personalization/components/BgTempSelector/index.tsx
+++ b/client/src/core/personalization/components/BgTempSelector/index.tsx
@@ -1,10 +1,19 @@
-import { Icon } from '@iconify/react'
-import clsx from 'clsx'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { usePersonalization } from '@lifeforge/shared'
-import { Button, ColorInput, OptionsColumn } from '@lifeforge/ui'
+import {
+  Bordered,
+  Box,
+  Button,
+  ColorInput,
+  Flex,
+  Icon,
+  OptionsColumn,
+  Ring,
+  Text,
+  Transition
+} from '@lifeforge/ui'
 
 import { useUserPersonalization } from '@/providers/features/UserPersonalizationProvider'
 
@@ -24,38 +33,61 @@ function BgTempSelector() {
   return (
     <OptionsColumn
       breakpoint="md"
-      className="[@media(min-width:1170px)]:flex-row"
+      // className="[@media(min-width:1170px)]:flex-row"
       description={t('bgTempSelector.desc')}
       icon="tabler:temperature"
       title={t('bgTempSelector.title')}
     >
-      <div className="flex w-full min-w-0 flex-col items-center gap-3 lg:flex-row">
+      <Flex align="center" direction={{ base: 'column', lg: 'row' }} gap="md">
         <DefaultBgTempSelector bgTemp={bgTemp} />
-        <button
-          className={clsx(
-            'border-bg-500 ring-offset-bg-50 dark:ring-offset-bg-950 ml-4 flex h-12 w-full shrink-0 items-center justify-center gap-2 rounded-full border-2 ring-offset-2 transition-all lg:w-12',
-            bgTemp.startsWith('#')
-              ? 'ring-bg-500 ring-2'
-              : 'hover:ring-bg-500 hover:ring-2'
-          )}
-          onClick={() => {
-            changeBgTemp(customBgTemp)
-          }}
-        >
-          <Icon className="text-bg-500 size-6" icon="tabler:palette" />
-          <span className="text-bg-500 font-medium md:hidden">
-            {t('bgTempSelector.customBgTemp')}
-          </span>
-        </button>
+        <Transition>
+          <Bordered asChild borderColor="bg-500" borderWidth="2px">
+            <Ring
+              asChild
+              ringColor={
+                bgTemp.startsWith('#')
+                  ? 'bg-500'
+                  : { base: 'transparent', hover: 'bg-500' }
+              }
+              ringOffsetColor={{ base: 'bg-50', dark: 'bg-950' }}
+              ringOffsetWidth="2px"
+              ringWidth="2px"
+            >
+              <Flex
+                centered
+                as="button"
+                flexShrink="0"
+                gap="sm"
+                height="3em"
+                ml="md"
+                r="full"
+                width={{ base: '100%', lg: '3em' }}
+                onClick={() => {
+                  changeBgTemp(customBgTemp)
+                }}
+              >
+                <Icon color="muted" icon="tabler:palette" size="1.5em" />
+                <Text
+                  color="muted"
+                  display={{ base: 'inline', md: 'none' }}
+                  weight="medium"
+                >
+                  {t('bgTempSelector.customBgTemp')}
+                </Text>
+              </Flex>
+            </Ring>
+          </Bordered>
+        </Transition>
         {bgTemp.startsWith('#') && (
           <>
-            <ColorInput
-              className="w-full lg:w-min"
-              label="Color Hex"
-              namespace="common.personalization"
-              value={customBgTemp}
-              onChange={setCustomBgTemp}
-            />
+            <Box width={{ base: '100%', lg: '16em' }}>
+              <ColorInput
+                label="Color Hex"
+                namespace="common.personalization"
+                value={customBgTemp}
+                onChange={setCustomBgTemp}
+              />
+            </Box>
             {bgTemp !== customBgTemp &&
               customBgTemp.match(/^#[0-9A-F]{6}$/i) !== null && (
                 <>
@@ -79,7 +111,7 @@ function BgTempSelector() {
               )}
           </>
         )}
-      </div>
+      </Flex>
     </OptionsColumn>
   )
 }
diff --git a/client/src/core/personalization/components/BorderRadiusSelector/index.tsx b/client/src/core/personalization/components/BorderRadiusSelector/index.tsx
index 617141c68..4f6f50652 100644
--- a/client/src/core/personalization/components/BorderRadiusSelector/index.tsx
+++ b/client/src/core/personalization/components/BorderRadiusSelector/index.tsx
@@ -31,7 +31,8 @@ function BorderRadiusSelector() {
       title={t('borderRadiusSelector.title')}
     >
       <Listbox
-        buttonContent={
+        className="component-bg-lighter min-w-48"
+        renderContent={() => (
           <div className="flex items-center gap-2">
             <BorderRadiusIcon radius={borderRadiusMultiplier} />
             <span className="-mt-px block truncate">
@@ -44,8 +45,7 @@ function BorderRadiusSelector() {
               )}
             </span>
           </div>
-        }
-        className="component-bg-lighter min-w-48"
+        )}
         value={borderRadiusMultiplier}
         onChange={value => {
           changeBorderRadiusMultiplier(value)
diff --git a/client/src/core/personalization/components/FontFamilySelector/components/CustomFontUploadModal.tsx b/client/src/core/personalization/components/FontFamilySelector/components/CustomFontUploadModal.tsx
index d67c9352b..7ca8fae03 100644
--- a/client/src/core/personalization/components/FontFamilySelector/components/CustomFontUploadModal.tsx
+++ b/client/src/core/personalization/components/FontFamilySelector/components/CustomFontUploadModal.tsx
@@ -19,8 +19,7 @@ function CustomFontUploadModal({
   const queryClient = useQueryClient()
 
   const uploadMutation = useMutation(
-    forgeAPI
-      .untyped('user/customFonts/upload')
+    forgeAPI.user.customFonts.upload
       .input({
         id: openType === 'edit' && initialData ? initialData.id : undefined
       })
diff --git a/client/src/core/personalization/components/FontFamilySelector/components/FontFamilySelectorModal/components/FontListItem.tsx b/client/src/core/personalization/components/FontFamilySelector/components/FontFamilySelectorModal/components/FontListItem.tsx
index ec4741e24..34a70656d 100644
--- a/client/src/core/personalization/components/FontFamilySelector/components/FontFamilySelectorModal/components/FontListItem.tsx
+++ b/client/src/core/personalization/components/FontFamilySelector/components/FontFamilySelectorModal/components/FontListItem.tsx
@@ -30,7 +30,7 @@ function FontListItem({
 
   const togglePinMutation = useMutation(
     forgeAPI
-      .untyped('user/personalization/toggleGoogleFontsPin')
+      .user.personalization.toggleGoogleFontsPin
       .mutationOptions({
         onSuccess: () => {
           queryClient.invalidateQueries({
diff --git a/client/src/core/personalization/components/FontFamilySelector/components/FontFamilySelectorModal/tabs/CustomFontSelector.tsx b/client/src/core/personalization/components/FontFamilySelector/components/FontFamilySelectorModal/tabs/CustomFontSelector.tsx
index 235a5b54c..7adc69baa 100644
--- a/client/src/core/personalization/components/FontFamilySelector/components/FontFamilySelectorModal/tabs/CustomFontSelector.tsx
+++ b/client/src/core/personalization/components/FontFamilySelector/components/FontFamilySelectorModal/tabs/CustomFontSelector.tsx
@@ -45,11 +45,11 @@ function CustomFontSelector({
   const queryClient = useQueryClient()
 
   const customFontsQuery = useQuery(
-    forgeAPI.untyped<CustomFont[]>('user/customFonts/list').queryOptions()
+    forgeAPI.user.customFonts.list.queryOptions()
   )
 
   const deleteMutation = useMutation(
-    forgeAPI.untyped('user/customFonts/remove').mutationOptions({
+    forgeAPI.user.customFonts.remove.mutationOptions({
       onSuccess: () => {
         queryClient.invalidateQueries({
           queryKey: ['user', 'customFonts', 'list']
diff --git a/client/src/core/personalization/components/FontFamilySelector/components/FontFamilySelectorModal/tabs/GoogleFontSelector.tsx b/client/src/core/personalization/components/FontFamilySelector/components/FontFamilySelectorModal/tabs/GoogleFontSelector.tsx
index 59d5eca1f..73d257ded 100644
--- a/client/src/core/personalization/components/FontFamilySelector/components/FontFamilySelectorModal/tabs/GoogleFontSelector.tsx
+++ b/client/src/core/personalization/components/FontFamilySelector/components/FontFamilySelectorModal/tabs/GoogleFontSelector.tsx
@@ -91,13 +91,13 @@ function GoogleFontSelector({
     enabled: boolean
     items: FontFamily[]
   }>(
-    forgeAPI.untyped('user/personalization/listGoogleFonts').queryOptions({
+    forgeAPI.user.personalization.listGoogleFonts.queryOptions({
       enabled: apiKeyAvailable.data === true
     })
   )
 
   const pinnedFontsQuery = useQuery<string[]>(
-    forgeAPI.untyped('user/personalization/listGoogleFontsPin').queryOptions({
+    forgeAPI.user.personalization.listGoogleFontsPin.queryOptions({
       enabled: apiKeyAvailable.data === true
     })
   )
@@ -159,12 +159,12 @@ function GoogleFontSelector({
           <>
             <div className="mb-4 flex flex-col items-center gap-2 md:flex-row">
               <Listbox
-                buttonContent={
+                className="component-bg-lighter-with-hover md:max-w-56"
+                renderContent={() => (
                   <span>
                     {_.startCase(selectedCategory || '') || 'All category'}
                   </span>
-                }
-                className="component-bg-lighter-with-hover md:max-w-56"
+                )}
                 value={selectedCategory}
                 onChange={setSelectedCategory}
               >
diff --git a/client/src/core/personalization/components/FontFamilySelector/index.tsx b/client/src/core/personalization/components/FontFamilySelector/index.tsx
index f2c41f09e..cbdb98e22 100644
--- a/client/src/core/personalization/components/FontFamilySelector/index.tsx
+++ b/client/src/core/personalization/components/FontFamilySelector/index.tsx
@@ -3,7 +3,13 @@ import { useQuery } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
 
 import { usePersonalization } from '@lifeforge/shared'
-import { Button, OptionsColumn, WithQuery, useModalStore } from '@lifeforge/ui'
+import {
+  Button,
+  Flex,
+  OptionsColumn,
+  WithQuery,
+  useModalStore
+} from '@lifeforge/ui'
 
 import forgeAPI from '@/forgeAPI'
 
@@ -17,8 +23,7 @@ function FontFamilySelector() {
   const { fontFamily } = usePersonalization()
 
   const customFontQuery = useQuery(
-    forgeAPI
-      .untyped('user/customFonts/get')
+    forgeAPI.user.customFonts.get
       .input({
         id: fontFamily.replace('custom:', '')
       })
@@ -44,7 +49,12 @@ function FontFamilySelector() {
         </>
       }
     >
-      <div className="flex w-full flex-col items-center gap-6 md:flex-row">
+      <Flex
+        align="center"
+        direction={{ base: 'column', md: 'row' }}
+        gap="lg"
+        width="100%"
+      >
         {fontFamily.startsWith('custom:') ? (
           <WithQuery query={customFontQuery}>
             {customFont => (
@@ -65,20 +75,20 @@ function FontFamilySelector() {
               fontFamily
             }}
           >
-            {fontFamily}
+            {fontFamily || 'Onest'}
           </div>
         )}
         <Button
-          className="w-full md:w-auto"
           icon="tabler:text-size"
           variant="secondary"
+          width={{ base: '100%', md: 'auto' }}
           onClick={() => {
             open(FontFamilySelectorModal, {})
           }}
         >
           Select
         </Button>
-      </div>
+      </Flex>
     </OptionsColumn>
   )
 }
diff --git a/client/src/core/personalization/components/FontFamilySelector/utils/detectFontMetadata.ts b/client/src/core/personalization/components/FontFamilySelector/utils/detectFontMetadata.ts
index 8a2af9846..becd6f132 100644
--- a/client/src/core/personalization/components/FontFamilySelector/utils/detectFontMetadata.ts
+++ b/client/src/core/personalization/components/FontFamilySelector/utils/detectFontMetadata.ts
@@ -1,4 +1,4 @@
-import opentype from 'opentype.js'
+import * as opentype from 'opentype.js'
 
 export interface FontMetadata {
   family: string
diff --git a/client/src/core/personalization/components/FontScaleSelector.tsx b/client/src/core/personalization/components/FontScaleSelector.tsx
index 7106111a3..57b771e4d 100644
--- a/client/src/core/personalization/components/FontScaleSelector.tsx
+++ b/client/src/core/personalization/components/FontScaleSelector.tsx
@@ -2,7 +2,7 @@ import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { usePersonalization } from '@lifeforge/shared'
-import { Button, OptionsColumn, SliderInput } from '@lifeforge/ui'
+import { Box, Button, Flex, OptionsColumn, SliderInput } from '@lifeforge/ui'
 
 import { useUserPersonalization } from '@/providers/features/UserPersonalizationProvider'
 
@@ -21,29 +21,36 @@ function FontScaleSelector() {
       icon="tabler:text-size"
       title={t('fontScaleSelector.title')}
     >
-      <div className="flex w-full flex-col items-center gap-6 md:flex-row">
-        <SliderInput
-          width="100%"
-          max={2}
-          min={0.5}
-          namespace="common.personalization"
-          step={0.1}
-          value={selectedFontScale}
-          onChange={value => {
-            setSelectedFontScale(value)
-          }}
-        />
+      <Flex
+        align="center"
+        direction={{ base: 'column', md: 'row' }}
+        gap="lg"
+        mt={{ base: 'md', md: 'none' }}
+        width="100%"
+      >
+        <Box minWidth={{ md: '16em' }} width="100%">
+          <SliderInput
+            max={2}
+            min={0.5}
+            namespace="common.personalization"
+            step={0.1}
+            value={selectedFontScale}
+            onChange={value => {
+              setSelectedFontScale(value)
+            }}
+          />
+        </Box>
         <Button
-          className="w-full md:w-auto"
           disabled={selectedFontScale === fontScale}
           icon="tabler:check"
+          width={{ base: '100%', md: 'auto' }}
           onClick={() => {
             changeFontScale(selectedFontScale)
           }}
         >
           save
         </Button>
-      </div>
+      </Flex>
     </OptionsColumn>
   )
 }
diff --git a/client/src/core/personalization/components/LanguageSelector.tsx b/client/src/core/personalization/components/LanguageSelector.tsx
index b24386782..b80c213db 100644
--- a/client/src/core/personalization/components/LanguageSelector.tsx
+++ b/client/src/core/personalization/components/LanguageSelector.tsx
@@ -1,9 +1,16 @@
-import { Icon } from '@iconify/react'
 import { useQuery } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
 
 import { usePersonalization } from '@lifeforge/shared'
-import { Listbox, ListboxOption, OptionsColumn, WithQuery } from '@lifeforge/ui'
+import {
+  Flex,
+  Icon,
+  Listbox,
+  ListboxOption,
+  OptionsColumn,
+  Text,
+  WithQuery
+} from '@lifeforge/ui'
 
 import forgeAPI from '@/forgeAPI'
 import { useUserPersonalization } from '@/providers/features/UserPersonalizationProvider'
@@ -15,17 +22,7 @@ function LanguageSelector() {
 
   const { t } = useTranslation('common.personalization')
 
-  const languagesQuery = useQuery(
-    forgeAPI
-      .untyped<
-        {
-          name: string
-          icon: string
-          displayName: string
-        }[]
-      >('locales/listLanguages')
-      .queryOptions()
-  )
+  const languagesQuery = useQuery(forgeAPI.locales.listLanguages.queryOptions())
 
   return (
     <OptionsColumn
@@ -37,18 +34,23 @@ function LanguageSelector() {
       <WithQuery loaderSize="1.5em" query={languagesQuery}>
         {langs => (
           <Listbox
-            buttonContent={
-              <div className="flex items-center gap-2">
+            bg={{
+              base: 'bg-100',
+              hover: 'bg-200',
+              dark: 'bg-800',
+              darkHover: 'bg-700'
+            }}
+            minWidth="16em"
+            renderContent={() => (
+              <Flex align="center" gap="sm" maxWidth="16em" minWidth="0">
                 <Icon
-                  className="size-5"
                   icon={langs.find(({ name }) => name === language)?.icon ?? ''}
                 />
-                <span className="-mt-px block truncate">
+                <Text truncate>
                   {langs.find(({ name }) => name === language)?.displayName}
-                </span>
-              </div>
-            }
-            className="component-bg-lighter min-w-64"
+                </Text>
+              </Flex>
+            )}
             value={language}
             onChange={language => {
               changeLanguage(language)
diff --git a/client/src/core/personalization/components/ThemeColorSelector/components/DefaultThemeColorSelector.tsx b/client/src/core/personalization/components/ThemeColorSelector/components/DefaultThemeColorSelector.tsx
index 1287a6797..085fcb58f 100644
--- a/client/src/core/personalization/components/ThemeColorSelector/components/DefaultThemeColorSelector.tsx
+++ b/client/src/core/personalization/components/ThemeColorSelector/components/DefaultThemeColorSelector.tsx
@@ -1,8 +1,14 @@
-import clsx from 'clsx'
 import _ from 'lodash'
 import { useTranslation } from 'react-i18next'
 
-import { Listbox, ListboxOption } from '@lifeforge/ui'
+import {
+  Bordered,
+  Box,
+  Flex,
+  Listbox,
+  ListboxOption,
+  Text
+} from '@lifeforge/ui'
 
 import { useUserPersonalization } from '@/providers/features/UserPersonalizationProvider'
 
@@ -40,17 +46,26 @@ function DefaultThemeColorSelector({
 
   return (
     <Listbox
-      buttonContent={
-        <div className="flex items-center gap-2">
-          <span
-            className={clsx(
-              'inline-block size-4 shrink-0 rounded-full',
-              !themeColor.startsWith('#')
-                ? 'bg-custom-500'
-                : 'border-bg-500 border-2'
-            )}
+      bg={{
+        base: 'bg-100',
+        hover: 'bg-200',
+        dark: 'bg-800',
+        darkHover: 'bg-700'
+      }}
+      minWidth="16em"
+      renderContent={() => (
+        <Flex align="center" gap="sm" minWidth="0">
+          <Bordered
+            bg={!themeColor.startsWith('#') ? 'custom-500' : undefined}
+            borderColor="bg-500"
+            borderWidth={themeColor.startsWith('#') ? '2px' : '0px'}
+            display="inline-block"
+            flexShrink="0"
+            height="1em"
+            r="full"
+            width="1em"
           />
-          <span className="-mt-px block truncate">
+          <Text truncate>
             {t(
               `themeColorSelector.colors.${
                 !themeColor.startsWith('#')
@@ -64,10 +79,9 @@ function DefaultThemeColorSelector({
                   : 'custom'
               }`
             )}
-          </span>
-        </div>
-      }
-      className="component-bg-lighter min-w-64 p-6"
+          </Text>
+        </Flex>
+      )}
       value={themeColor.startsWith('#') ? 'theme-custom' : themeColor}
       onChange={color => {
         changeThemeColor(color === 'theme-custom' ? customThemeColor : color)
@@ -85,11 +99,14 @@ function DefaultThemeColorSelector({
             )}`
           )}
           renderColorAndIcon={() => (
-            <span
-              className={clsx(
-                'bg-custom-500 inline-block size-4 shrink-0 rounded-full',
-                `theme-${color}`
-              )}
+            <Box
+              bg="custom-500"
+              className={`theme-${color}`}
+              display="inline-block"
+              flexShrink="0"
+              height="1em"
+              r="full"
+              width="1em"
             />
           )}
           value={`theme-${color}`}
@@ -99,7 +116,14 @@ function DefaultThemeColorSelector({
         key="custom"
         label={t('themeColorSelector.colors.custom')}
         renderColorAndIcon={() => (
-          <span className="border-bg-500 inline-block size-4 rounded-full border-2" />
+          <Bordered
+            borderColor="bg-500"
+            borderWidth="2px"
+            flexShrink="0"
+            height="1em"
+            r="full"
+            width="1em"
+          />
         )}
         value="theme-custom"
       />
diff --git a/client/src/core/personalization/components/ThemeColorSelector/index.tsx b/client/src/core/personalization/components/ThemeColorSelector/index.tsx
index 0ddb09c21..8c91913c0 100644
--- a/client/src/core/personalization/components/ThemeColorSelector/index.tsx
+++ b/client/src/core/personalization/components/ThemeColorSelector/index.tsx
@@ -2,7 +2,7 @@ import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { usePersonalization } from '@lifeforge/shared'
-import { Button, ColorInput, OptionsColumn } from '@lifeforge/ui'
+import { Box, Button, ColorInput, Flex, OptionsColumn } from '@lifeforge/ui'
 
 import { useUserPersonalization } from '@/providers/features/UserPersonalizationProvider'
 
@@ -17,7 +17,7 @@ function ThemeColorSelector() {
     themeColor.startsWith('#') ? themeColor : '#000000'
   )
 
-  const { t } = useTranslation('common.personalization')
+  const { t } = useTranslation(['common.personalization', 'common.buttons'])
 
   return (
     <OptionsColumn
@@ -26,35 +26,43 @@ function ThemeColorSelector() {
       icon="tabler:palette"
       title={t('themeColorSelector.title')}
     >
-      <div className="flex w-full flex-col items-center gap-3 md:flex-row">
+      <Flex
+        align="center"
+        direction={{ base: 'column', sm: 'row' }}
+        gap="md"
+        width="100%"
+      >
         <DefaultThemeColorSelector
           customThemeColor={customThemeColor}
           themeColor={themeColor}
         />
         {themeColor.startsWith('#') && (
           <>
-            <ColorInput
-              className="w-full md:w-min"
-              label="Color Hex"
-              namespace="common.personalization"
-              value={customThemeColor}
-              onChange={setCustomThemeColor}
-            />
+            <Box width={{ base: '100%', lg: '16em' }}>
+              <ColorInput
+                label="Color Hex"
+                namespace="common.personalization"
+                value={customThemeColor}
+                onChange={setCustomThemeColor}
+              />
+            </Box>
             {themeColor !== customThemeColor &&
               customThemeColor.match(/^#[0-9A-F]{6}$/i) !== null && (
                 <Button
-                  className="w-full lg:w-auto"
                   icon="uil:save"
+                  width={{ base: '100%', lg: 'auto' }}
                   onClick={() => {
                     changeThemeColor(customThemeColor)
                   }}
                 >
-                  <span className="inline lg:hidden">{t('buttons.save')}</span>
+                  <span className="inline lg:hidden">
+                    {t('common.buttons:save')}
+                  </span>
                 </Button>
               )}
           </>
         )}
-      </div>
+      </Flex>
     </OptionsColumn>
   )
 }
diff --git a/client/src/core/personalization/components/ThemeSelector.tsx b/client/src/core/personalization/components/ThemeSelector.tsx
index 0acad01ef..f13ebd14e 100644
--- a/client/src/core/personalization/components/ThemeSelector.tsx
+++ b/client/src/core/personalization/components/ThemeSelector.tsx
@@ -1,9 +1,16 @@
-import { Icon } from '@iconify/react'
-import clsx from 'clsx'
 import { useTranslation } from 'react-i18next'
 
 import { usePersonalization } from '@lifeforge/shared'
-import { OptionsColumn } from '@lifeforge/ui'
+import {
+  Bordered,
+  Box,
+  Flex,
+  Grid,
+  Icon,
+  OptionsColumn,
+  Text,
+  Transition
+} from '@lifeforge/ui'
 
 import { useUserPersonalization } from '@/providers/features/UserPersonalizationProvider'
 
@@ -21,7 +28,7 @@ function ThemeSelector() {
       orientation="vertical"
       title={t('themeSelector.title')}
     >
-      <div className="flex w-full flex-col gap-8 px-2 md:flex-row">
+      <Grid gap="lg" px="sm" templateCols={{ md: 2, lg: 3 }}>
         {[
           {
             id: 'system',
@@ -39,43 +46,54 @@ function ThemeSelector() {
             Image: '/assets/mockup/dark.png'
           }
         ].map(({ id, name, Image }) => (
-          <div
-            key={id}
-            className="flex w-full flex-col items-center gap-2 md:w-1/3"
-          >
-            <button
-              className={clsx(
-                'flex-1 rounded-lg border-2 lg:rounded-xl',
-                theme === id
-                  ? 'border-custom-500'
-                  : 'border-bg-200 hover:border-bg-500 dark:border-bg-700 dark:hover:border-bg-500'
-              )}
-              type="button"
-              onClick={() => {
-                changeTheme(id as 'system' | 'light' | 'dark')
-              }}
-            >
-              <div className="relative rounded-md p-2 lg:rounded-lg">
-                {theme === id && (
-                  <Icon
-                    className="text-custom-500 absolute right-2.5 bottom-2 block size-6 text-xl"
-                    icon="tabler:circle-check-filled"
-                  />
-                )}
-                <img alt={id} className="w-full rounded-lg" src={Image} />
-              </div>
-            </button>
-            <p
-              className={clsx(
-                'mt-4',
-                theme === id && 'text-custom-500 font-medium'
-              )}
+          <Flex key={id} align="center" direction="column" gap="sm">
+            <Transition>
+              <Bordered
+                as="button"
+                borderColor={
+                  theme === id
+                    ? 'custom-500'
+                    : {
+                        base: 'bg-200',
+                        hover: 'bg-500',
+                        dark: 'bg-700',
+                        darkHover: 'bg-500'
+                      }
+                }
+                borderWidth="2px"
+                r={{ base: 'lg', lg: 'xl' }}
+                type="button"
+                onClick={() => {
+                  changeTheme(id as 'system' | 'light' | 'dark')
+                }}
+              >
+                <Box p="sm" position="relative" r={{ base: 'md', lg: 'lg' }}>
+                  {theme === id && (
+                    <Box bottom="0.75em" position="absolute" right="0.75em">
+                      <Icon
+                        color="custom-500"
+                        icon="tabler:circle-check-filled"
+                        size="1.5em"
+                      />
+                    </Box>
+                  )}
+                  <Box asChild r="lg">
+                    <img alt={id} src={Image} />
+                  </Box>
+                </Box>
+              </Bordered>
+            </Transition>
+            <Text
+              as="p"
+              color={theme === id ? 'custom-500' : undefined}
+              mt="sm"
+              weight="medium"
             >
               {name}
-            </p>
-          </div>
+            </Text>
+          </Flex>
         ))}
-      </div>
+      </Grid>
     </OptionsColumn>
   )
 }
diff --git a/client/src/core/personalization/index.tsx b/client/src/core/personalization/index.tsx
index d6a14f2f5..37e32fc6b 100644
--- a/client/src/core/personalization/index.tsx
+++ b/client/src/core/personalization/index.tsx
@@ -1,4 +1,4 @@
-import { ModuleHeader } from '@lifeforge/ui'
+import { ModuleHeader, Stack } from '@lifeforge/ui'
 
 import BgImageSelector from './components/BgImageSelector'
 import BgTempSelector from './components/BgTempSelector'
@@ -14,7 +14,7 @@ function Personalization() {
   return (
     <>
       <ModuleHeader />
-      <div className="mb-8 space-y-3">
+      <Stack mb="xl">
         <LanguageSelector />
         <ThemeSelector />
         <ThemeColorSelector />
@@ -24,7 +24,7 @@ function Personalization() {
         <FontScaleSelector />
         <BorderRadiusSelector />
         <BorderedSelector />
-      </div>
+      </Stack>
     </>
   )
 }
diff --git a/client/src/federation/loaders/loadModuleConfig.ts b/client/src/federation/loaders/loadModuleConfig.ts
index c929a62ba..07bd7ed21 100644
--- a/client/src/federation/loaders/loadModuleConfig.ts
+++ b/client/src/federation/loaders/loadModuleConfig.ts
@@ -28,7 +28,7 @@ interface FederatedModule {
  */
 export async function fetchModuleManifest(): Promise<FederatedModule[]> {
   try {
-    const { modules } = await forgeAPI.untyped('modules/manifest').query()
+    const { modules } = await forgeAPI.modules.manifest.query()
 
     return modules ?? []
   } catch (e) {
diff --git a/client/src/federation/providers/CoreFederationProvider.tsx b/client/src/federation/providers/CoreFederationProvider.tsx
index 42a5f0fef..044d4ba1f 100644
--- a/client/src/federation/providers/CoreFederationProvider.tsx
+++ b/client/src/federation/providers/CoreFederationProvider.tsx
@@ -30,6 +30,7 @@ export default function CoreFederationProvider({
     try {
       const result = await loadModules()
 
+
       setModules(result.routes)
       setGlobalProviders(result.globalProviders)
       setCategoryTranslations(result.categoryTranslations)
diff --git a/client/src/federation/utils/sortRoutes.ts b/client/src/federation/utils/sortRoutes.ts
index 0f2763af5..dd8e09498 100644
--- a/client/src/federation/utils/sortRoutes.ts
+++ b/client/src/federation/utils/sortRoutes.ts
@@ -9,7 +9,7 @@ export type CategoryOrder = Record<string, Record<string, string>>
  */
 export async function fetchCategoryOrder(): Promise<CategoryOrder> {
   try {
-    return (await forgeAPI.untyped('modules/categories/list').query()) ?? {}
+    return (await forgeAPI.modules.categories.list.query()) ?? {}
   } catch (e) {
     console.warn('Failed to fetch category order:', e)
 
diff --git a/client/src/forgeAPI.tsx b/client/src/forgeAPI.tsx
index 112396737..7898e7257 100644
--- a/client/src/forgeAPI.tsx
+++ b/client/src/forgeAPI.tsx
@@ -1,6 +1,8 @@
 import { createForgeProxy } from '@lifeforge/shared'
 
-const forgeAPI = createForgeProxy(
+import type { CoreRoutes } from '../../server/src/core/routes/core-routes.types'
+
+const forgeAPI = createForgeProxy<CoreRoutes>(
   import.meta.env.VITE_API_HOST || 'https://localhost:3000'
 )
 
diff --git a/client/src/i18n.ts b/client/src/i18n.ts
index 4a45b4786..aefe8a0b6 100644
--- a/client/src/i18n.ts
+++ b/client/src/i18n.ts
@@ -8,7 +8,11 @@ const AVAILABLE_LANG = (await fetch(
   `${import.meta.env.VITE_API_HOST}/locales/listLanguages`
 )
   .then(res => res.json())
-  .then(data => data.data)) as {
+  .then(data => data.data)
+  .catch(err => {
+    console.warn('Failed to fetch available languages from backend:', err)
+    return [{ name: 'en', icon: 'twemoji:flag-united-states' }]
+  })) as {
   name: string
   alternative?: string[]
   icon: string
@@ -45,7 +49,7 @@ i18n
         return
       }
 
-      await forgeAPI.untyped('locales/notifyMissing').mutate({
+      await forgeAPI.locales.notifyMissing.mutate({
         namespace,
         key
       })
@@ -67,7 +71,7 @@ i18n
           return
         }
 
-        return forgeAPI.untyped('locales/getLocale').input({
+        return forgeAPI.locales.getLocale.input({
           lang: langs[0],
           namespace: namespace as 'apps' | 'common',
           subnamespace: subnamespace
diff --git a/client/src/index.css b/client/src/index.css
index be8b3d3b1..e604087af 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -1,28 +1,14 @@
-@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Onest:wght@100..900&display=swap')
-layer(base);
-@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap')
-layer(base);
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Onest:wght@100..900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
 
-@layer modules, host, dependencies, custom;
-
-@import 'tailwindcss' layer(host);
-
-@plugin 'tailwindcss-animate';
-@plugin 'daisyui';
-@plugin '@tailwindcss/typography';
-
-/* 3rd party styles */
 @import 'react-grid-layout/css/styles.css';
-
-/* Core styles */
 @import '@lifeforge/ui/dist/index.css';
+@import '@core/dashboard/index.css';
 
-/* App styles */
 @source '../../apps/*/client/src';
 @source '../../apps/*/client/dist';
 @source '../../apps/*/client/dist-docker';
 @source '../../apps/**/*';
-@import '@core/dashboard/index.css';
 
 main#app {
   background-color: color-mix(in srgb, var(--color-bg-200) 50%, transparent);
@@ -33,3 +19,7 @@ main#app {
     color: var(--color-bg-50);
   }
 }
+
+body {
+  margin: 0 !important;
+}
diff --git a/client/src/index.tsx b/client/src/index.tsx
index 77a246c57..83e473ca3 100644
--- a/client/src/index.tsx
+++ b/client/src/index.tsx
@@ -1,5 +1,2 @@
-import ReactDOM from 'react-dom/client'
-
-import App from './App'
-
-ReactDOM.createRoot(document.getElementById('root')!).render(<App />)
+import './index.css'
+import('./bootstrap')
diff --git a/client/src/providers/features/APIKeyStatusProvider.tsx b/client/src/providers/features/APIKeyStatusProvider.tsx
index d51a521c5..e49fe2219 100644
--- a/client/src/providers/features/APIKeyStatusProvider.tsx
+++ b/client/src/providers/features/APIKeyStatusProvider.tsx
@@ -2,7 +2,14 @@ import { useQuery } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
 
 import { Link, type ModuleCategory } from '@lifeforge/shared'
-import { Button, Card, EmptyStateScreen, WithQuery } from '@lifeforge/ui'
+import {
+  Button,
+  Card,
+  EmptyStateScreen,
+  Stack,
+  Text,
+  WithQuery
+} from '@lifeforge/ui'
 
 import forgeAPI from '@/forgeAPI'
 
@@ -42,32 +49,45 @@ function APIKeyStatusProvider({
                 message={{
                   title: t('missing.title'),
                   description: (
-                    <div className="flex-center w-full flex-col gap-4 space-y-3 px-8 sm:w-3/4 lg:w-1/2">
-                      <p className="text-bg-400 dark:text-bg-600 text-center text-lg">
+                    <Stack
+                      centered
+                      px="xl"
+                      width={{
+                        sm: '75%',
+                        lg: '50%'
+                      }}
+                    >
+                      <Text align="center" as="p" color="muted" size="lg">
                         {t('missing.description')}
-                      </p>
+                      </Text>
                       {requiredAPIKeys.map((key, index) => (
                         <Card key={index} width="100%">
-                          <code className="text-xl">{key}</code>
-                          <p className="text-bg-500 mt-1">
+                          <Text
+                            as="code"
+                            color={{ base: 'bg-800', dark: 'bg-100' }}
+                            size="lg"
+                          >
+                            {key}
+                          </Text>
+                          <Text as="p" color="muted" mt="xs">
                             {
                               APIKeyAccess?.[key as keyof typeof APIKeyAccess]
                                 .usage
                             }
-                          </p>
+                          </Text>
                         </Card>
                       ))}
                       <Button
                         as={Link}
-                        width="100%"
                         icon="tabler:arrow-right"
                         iconPosition="end"
                         namespace="common.apiKeys"
                         to="/api-keys"
+                        width="100%"
                       >
                         configAPIKeys
                       </Button>
-                    </div>
+                    </Stack>
                   )
                 }}
               />
diff --git a/client/src/providers/features/UserPersonalizationProvider.tsx b/client/src/providers/features/UserPersonalizationProvider.tsx
index 6f2275f1b..d706c36e6 100644
--- a/client/src/providers/features/UserPersonalizationProvider.tsx
+++ b/client/src/providers/features/UserPersonalizationProvider.tsx
@@ -25,7 +25,7 @@ async function syncUserData(
 ) {
   try {
     await forgeAPI
-      .untyped('/user/personalization/updatePersonalization')
+      .user.personalization.updatePersonalization
       .mutate({
         data
       })
diff --git a/client/src/providers/index.tsx b/client/src/providers/index.tsx
index 3f3779df1..cbe1d3067 100644
--- a/client/src/providers/index.tsx
+++ b/client/src/providers/index.tsx
@@ -5,7 +5,6 @@ import {
   APIEndpointProvider,
   APIOnlineStatusProvider,
   AuthProvider,
-  BackgroundProvider,
   EncryptionProvider,
   FederationProvider,
   MainSidebarStateProvider,
@@ -16,6 +15,7 @@ import {
 } from '@lifeforge/shared'
 import {
   APIOnlineStatusWrapper,
+  BackgroundProvider,
   EncryptionWrapper,
   useModalStore
 } from '@lifeforge/ui'
diff --git a/client/src/routes/components/RootLayout.tsx b/client/src/routes/components/RootLayout.tsx
index 9656d2c3b..4fc35a999 100644
--- a/client/src/routes/components/RootLayout.tsx
+++ b/client/src/routes/components/RootLayout.tsx
@@ -1,7 +1,7 @@
 import { ErrorBoundary } from 'react-error-boundary'
 
 import { Outlet } from '@lifeforge/shared'
-import { ErrorScreen } from '@lifeforge/ui'
+import { ErrorScreen, Flex } from '@lifeforge/ui'
 
 import useTitleEffect from '../hooks/useTitleEffect'
 import Sidebar from './Sidebar/Sidebar'
@@ -12,13 +12,26 @@ function RootLayout() {
   return (
     <>
       <Sidebar />
-      <main className="relative flex size-full min-h-0 min-w-0 flex-col overflow-x-hidden pb-0 sm:ml-[5.4rem] lg:ml-0">
+      <Flex
+        direction="column"
+        height="100%"
+        minHeight="0"
+        minWidth="0"
+        ml={{
+          base: 'none',
+          sm: '3xl',
+          lg: 'none'
+        }}
+        overflowX="hidden"
+        position="relative"
+        width="100%"
+      >
         <ErrorBoundary
           fallback={<ErrorScreen message="An unexpected error occurred." />}
         >
           <Outlet />
         </ErrorBoundary>
-      </main>
+      </Flex>
     </>
   )
 }
diff --git a/client/src/routes/components/Sidebar/Sidebar.tsx b/client/src/routes/components/Sidebar/Sidebar.tsx
index 2ce87eaf6..519f5370c 100644
--- a/client/src/routes/components/Sidebar/Sidebar.tsx
+++ b/client/src/routes/components/Sidebar/Sidebar.tsx
@@ -1,8 +1,7 @@
-import clsx from 'clsx'
 import { useState } from 'react'
 
 import { useMainSidebarState } from '@lifeforge/shared'
-import { SidebarItem } from '@lifeforge/ui'
+import { Flex, SidebarItem, Transition } from '@lifeforge/ui'
 
 import SidebarBottomBar from './SidebarBottomBar'
 import SidebarEventBanner from './SidebarEventBanner'
@@ -15,30 +14,56 @@ function Sidebar() {
   const [searchQuery, setSearchQuery] = useState('')
 
   return (
-    <aside
-      className={clsx(
-        'bg-bg-50 shadow-custom border-bg-500/20 component-bg absolute top-0 left-0 z-9995 flex h-full shrink-0 flex-col overflow-hidden rounded-r-2xl backdrop-blur-xs transition-all duration-300 lg:relative lg:backdrop-blur-xs',
-        sidebarExpanded
-          ? 'w-full min-w-80 in-[.bordered]:border-2 sm:w-1/2 lg:w-3/12 xl:w-1/5'
-          : 'w-0 min-w-0 sm:w-[5.4rem] sm:in-[.bordered]:border-2'
-      )}
-    >
-      <SidebarEventBanner />
-      <SidebarHeader
-        searchQuery={searchQuery}
-        setSearchQuery={setSearchQuery}
-      />
-      <SidebarItems query={searchQuery} />
-      {!sidebarExpanded && (
-        <SidebarItem
-          active={false}
-          icon="tabler:layout-sidebar-left-expand"
-          label=""
-          onClick={toggleSidebar}
+    <Transition>
+      <Flex
+        shadow
+        as="aside"
+        bg={{ base: 'bg-50', dark: 'bg-900' }}
+        direction="column"
+        flexShrink="0"
+        height="100dvh"
+        left="0"
+        minWidth={sidebarExpanded ? '20em' : '0'}
+        overflow="hidden"
+        position={{
+          base: 'absolute',
+          lg: 'relative'
+        }}
+        rbr="2xl"
+        rtr="2xl"
+        top="0"
+        width={
+          sidebarExpanded
+            ? {
+                base: '100%',
+                sm: '50%',
+                lg: '25%',
+                xl: '20%'
+              }
+            : {
+                base: '0',
+                sm: '5.4em'
+              }
+        }
+        zIndex="9995"
+      >
+        <SidebarEventBanner />
+        <SidebarHeader
+          searchQuery={searchQuery}
+          setSearchQuery={setSearchQuery}
         />
-      )}
-      <SidebarBottomBar />
-    </aside>
+        <SidebarItems query={searchQuery} />
+        {!sidebarExpanded && (
+          <SidebarItem
+            active={false}
+            icon="tabler:layout-sidebar-left-expand"
+            label=""
+            onClick={toggleSidebar}
+          />
+        )}
+        <SidebarBottomBar />
+      </Flex>
+    </Transition>
   )
 }
 
diff --git a/client/src/routes/components/Sidebar/SidebarBottomBar.tsx b/client/src/routes/components/Sidebar/SidebarBottomBar.tsx
index 221a18b8d..b1f820941 100644
--- a/client/src/routes/components/Sidebar/SidebarBottomBar.tsx
+++ b/client/src/routes/components/Sidebar/SidebarBottomBar.tsx
@@ -1,10 +1,17 @@
-import { Icon } from '@iconify/react'
-import clsx from 'clsx'
 import { useCallback } from 'react'
 import { toast } from 'react-toastify'
 
 import { useAuth, useMainSidebarState, useNavigate } from '@lifeforge/shared'
-import { Card, ContextMenu, ContextMenuItem } from '@lifeforge/ui'
+import {
+  Box,
+  Card,
+  ContextMenu,
+  ContextMenuItem,
+  Flex,
+  Icon,
+  Text,
+  Transition
+} from '@lifeforge/ui'
 
 function SidebarBottomBar() {
   const navigate = useNavigate()
@@ -28,56 +35,82 @@ function SidebarBottomBar() {
   if (!userData) return <></>
 
   return (
-    <div
-      className={clsx(
-        'flex-center w-full min-w-0 pt-0 pb-4',
-        sidebarExpanded && 'px-4'
-      )}
-    >
+    <Flex centered pb="md" px={sidebarExpanded ? 'lg' : 'none'} width="100%">
       <ContextMenu
         buttonComponent={
-          <Card
-            className={clsx(
-              'flex-between gap-8',
-              sidebarExpanded &&
-                'bg-bg-200/50 dark:bg-bg-800/50 dark:hover:bg-bg-800/80 hover:bg-bg-200/50 transition-all'
-            )}
-          >
-            <div className="flex-center w-full min-w-0 gap-3">
-              <div className="bg-bg-100 shadow-custom dark:bg-bg-800 flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-full">
-                {userData.avatar !== '' ? (
-                  <img
-                    alt=""
-                    className="size-full object-cover"
-                    src={getAvatarURL()}
-                  />
-                ) : (
-                  <Icon className="text-bg-500 text-xl" icon="tabler:user" />
-                )}
-              </div>
-              <div
-                className={clsx(
-                  'w-full min-w-0 flex-col items-start',
-                  sidebarExpanded ? 'flex' : 'hidden'
-                )}
-              >
-                <div className="font-semibold">{userData?.name}</div>
-                <div className="text-bg-500 w-full min-w-0 truncate text-sm">
-                  {userData?.email}
-                </div>
-              </div>
-            </div>
-            <Icon
-              className={clsx(
-                'text-bg-500 size-5 shrink-0 stroke-[2px]',
-                sidebarExpanded ? 'flex' : 'hidden'
+          <Transition>
+            <Card
+              align="center"
+              bg={
+                sidebarExpanded
+                  ? {
+                      base: 'bg-100',
+                      dark: 'bg-800',
+                      darkHover: 'bg-700',
+                      hover: 'bg-200'
+                    }
+                  : 'transparent'
+              }
+              direction="row"
+              gap="xl"
+              justify={sidebarExpanded ? 'between' : 'center'}
+            >
+              <Flex centered gap="sm" minWidth="0">
+                <Flex
+                  centered
+                  shadow
+                  bg={{
+                    base: 'bg-100',
+                    dark: 'bg-700'
+                  }}
+                  flexShrink="0"
+                  height="2.5rem"
+                  overflow="hidden"
+                  r="full"
+                  width="2.5rem"
+                >
+                  {userData.avatar !== '' ? (
+                    <Box
+                      asChild
+                      height="100%"
+                      style={{
+                        objectFit: 'cover'
+                      }}
+                      width="100%"
+                    >
+                      <img alt="" src={getAvatarURL()} />
+                    </Box>
+                  ) : (
+                    <Icon color="muted" icon="tabler:user" />
+                  )}
+                </Flex>
+                <Flex
+                  direction="column"
+                  display={sidebarExpanded ? 'flex' : 'none'}
+                  minWidth="0"
+                >
+                  <Text truncate weight="semibold">
+                    {userData?.name}
+                  </Text>
+                  <Text truncate as="p" color="muted" size="sm">
+                    {userData?.email}
+                  </Text>
+                </Flex>
+              </Flex>
+              {sidebarExpanded && (
+                <Icon
+                  color={{ base: 'bg-400', dark: 'bg-600' }}
+                  display={sidebarExpanded ? 'flex' : 'none'}
+                  icon="ph:caret-up-down-bold"
+                />
               )}
-              icon="ph:caret-up-down-bold"
-            />
-          </Card>
+            </Card>
+          </Transition>
         }
-        classNames={{
-          wrapper: 'w-full'
+        styles={{
+          wrapper: {
+            width: '100%'
+          }
         }}
       >
         <ContextMenuItem
@@ -94,7 +127,7 @@ function SidebarBottomBar() {
           onClick={handleLoggingOut}
         />
       </ContextMenu>
-    </div>
+    </Flex>
   )
 }
 
diff --git a/client/src/routes/components/Sidebar/SidebarEventBanner.tsx b/client/src/routes/components/Sidebar/SidebarEventBanner.tsx
index 6dfa86fc5..2678a3cc8 100644
--- a/client/src/routes/components/Sidebar/SidebarEventBanner.tsx
+++ b/client/src/routes/components/Sidebar/SidebarEventBanner.tsx
@@ -1,5 +1,3 @@
-import { Icon } from '@iconify/react'
-import clsx from 'clsx'
 import dayjs from 'dayjs'
 import { useMemo } from 'react'
 import tinycolor from 'tinycolor2'
@@ -9,6 +7,7 @@ import {
   useMainSidebarState,
   usePersonalization
 } from '@lifeforge/shared'
+import { COLORS, Flex, Icon, Text } from '@lifeforge/ui'
 
 function addNumberSuffix(number: number): string {
   const suffixes = ['th', 'st', 'nd', 'rd']
@@ -61,7 +60,7 @@ const getEventIcon = (eventType: string) => {
   return iconMap[eventType] || ''
 }
 
-const SidebarEventBanner = () => {
+export default function SidebarEventBanner() {
   const { sidebarExpanded } = useMainSidebarState()
 
   const { derivedThemeColor: themeColor } = usePersonalization()
@@ -75,35 +74,39 @@ const SidebarEventBanner = () => {
 
   if (!sidebarExpanded || !eventType || !userData) return <></>
 
-  const textColor = tinycolor(themeColor).isLight()
-    ? 'text-bg-800'
-    : 'text-bg-50'
-
   const bgColor =
-    eventType === 'christmas' ? 'bg-[#f14e63] text-bg-100!' : 'bg-custom-500'
+    eventType === 'christmas'
+      ? {
+          backgroundColor: '#f14e63',
+          color: COLORS['bg-100']
+        }
+      : {
+          backgroundColor: COLORS['custom-500'],
+          color: tinycolor(themeColor).isLight()
+            ? COLORS['bg-800']
+            : COLORS['bg-100']
+        }
 
   return (
-    <div
-      className={clsx(
-        'flex-between flex w-full gap-2 rounded-tr-2xl p-4 text-lg font-medium whitespace-nowrap',
-        bgColor,
-        textColor
-      )}
-    >
-      <div className="flex w-full min-w-0 items-center gap-3">
-        {eventType === 'christmas' && (
-          <Icon
-            className="shrink-0 text-2xl"
-            icon="mingcute:christmas-hat-line"
-          />
-        )}
-        <p className="line-clamp-2 w-full whitespace-normal">
-          {getEventMessage(eventType, userData.name, userData.dateOfBirth)}
-        </p>
-      </div>
-      <Icon className="text-2xl" icon={getEventIcon(eventType)} />
-    </div>
+    <Text asChild size="lg" weight="medium" whiteSpace="nowrap">
+      <Flex
+        align="center"
+        gap="sm"
+        justify="between"
+        p="md"
+        rtr="2xl"
+        style={bgColor}
+      >
+        <Flex align="center" gap="sm">
+          {eventType === 'christmas' && (
+            <Icon icon="mingcute:christmas-hat-line" size="1.5em" />
+          )}
+          <Text as="p" lineClamp={2} whiteSpace="normal">
+            {getEventMessage(eventType, userData.name, userData.dateOfBirth)}
+          </Text>
+        </Flex>
+        <Icon icon={getEventIcon(eventType)} size="1.5em" />
+      </Flex>
+    </Text>
   )
 }
-
-export default SidebarEventBanner
diff --git a/client/src/routes/components/Sidebar/SidebarHeader.tsx b/client/src/routes/components/Sidebar/SidebarHeader.tsx
index dfa470079..7f8c2a0fb 100644
--- a/client/src/routes/components/Sidebar/SidebarHeader.tsx
+++ b/client/src/routes/components/Sidebar/SidebarHeader.tsx
@@ -1,8 +1,5 @@
-import { Icon } from '@iconify/react'
-import clsx from 'clsx'
-
 import { useMainSidebarState } from '@lifeforge/shared'
-import { SearchInput } from '@lifeforge/ui'
+import { Box, Button, Flex, Icon, SearchInput, Text } from '@lifeforge/ui'
 
 function SidebarHeader({
   searchQuery,
@@ -15,40 +12,47 @@ function SidebarHeader({
 
   return (
     <>
-      <div
-        className={clsx(
-          'flex-between flex h-24 w-full shrink-0 pl-6 transition-none',
-          !sidebarExpanded && 'overflow-hidden'
-        )}
+      <Flex
+        align="center"
+        flexShrink="0"
+        height="6em"
+        justify="between"
+        overflow={!sidebarExpanded ? 'hidden' : 'auto'}
+        px="lg"
       >
-        <h1 className="ml-1 flex shrink-0 items-center gap-2 text-xl font-semibold whitespace-nowrap">
-          <Icon className="text-custom-500 size-6" icon="tabler:hammer" />
-          {sidebarExpanded && (
-            <div>
-              LifeForge
-              <span className="text-custom-500 text-2xl">.</span>
-            </div>
-          )}
-        </h1>
+        <Flex asChild align="center" flexShrink="0" gap="sm">
+          <Text as="h1" size="xl" weight="semibold" whiteSpace="nowrap">
+            <Icon color="primary" icon="tabler:hammer" />
+            {sidebarExpanded && (
+              <Text tracking="wide">
+                LifeForge
+                <Text color="primary" size="2xl">
+                  .
+                </Text>
+              </Text>
+            )}
+          </Text>
+        </Flex>
         {sidebarExpanded && (
-          <button
-            className="text-bg-500 hover:text-bg-800 dark:hover:text-bg-50 p-6 transition-all"
-            onClick={toggleSidebar}
-          >
-            <Icon className="size-6" icon="tabler:menu" />
-          </button>
+          <Button icon="tabler:menu" variant="plain" onClick={toggleSidebar} />
         )}
-      </div>
+      </Flex>
       {sidebarExpanded && (
-        <div className="px-4">
+        <Box px="md">
           <SearchInput
-            className="component-bg-lighter-with-hover mb-4"
+            bg={{
+              base: 'bg-50',
+              hover: 'bg-100',
+              dark: 'bg-800',
+              darkHover: 'bg-700'
+            }}
+            mb="md"
             namespace="common.sidebar"
             searchTarget="module"
             value={searchQuery}
             onChange={setSearchQuery}
           />
-        </div>
+        </Box>
       )}
     </>
   )
diff --git a/client/src/routes/components/Sidebar/SidebarItems.tsx b/client/src/routes/components/Sidebar/SidebarItems.tsx
index 4a0824495..f063ccfb5 100644
--- a/client/src/routes/components/Sidebar/SidebarItems.tsx
+++ b/client/src/routes/components/Sidebar/SidebarItems.tsx
@@ -9,7 +9,9 @@ import {
   useMainSidebarState
 } from '@lifeforge/shared'
 import {
+  Box,
   EmptyStateScreen,
+  Flex,
   MainSidebarItem,
   Scrollbar,
   SidebarDivider
@@ -70,58 +72,62 @@ function SidebarItems({ query }: { query: string }) {
   }, [modules])
 
   return (
-    <ul className="flex flex-1 flex-col gap-1 pb-6">
-      <Scrollbar usePaddingRight={false}>
-        <div className="space-y-1">
-          {filteredRoutes.length > 0 ? (
-            filteredRoutes.map((item, index) => {
-              const filteredModules = item.items.filter(
-                subItem => !subItem.disabled && !subItem.hidden
-              )
+    <Flex as="ul" direction="column" flex="1" pb="lg">
+      <Box asChild flex="1">
+        <Scrollbar usePaddingRight={false}>
+          <Flex direction="column" flex="1" gap="xs">
+            {filteredRoutes.length > 0 ? (
+              filteredRoutes.map((item, index) => {
+                const filteredModules = item.items.filter(
+                  subItem => !subItem.disabled && !subItem.hidden
+                )
 
-              return (
-                <Fragment key={`section-${item.title || item.items[0].name}`}>
-                  {item.title !== '' &&
-                    filteredModules.length > 0 &&
-                    sidebarExpanded && <MainSidebarTitle title={item.title} />}
-                  {filteredModules.map(subItem => {
-                    const link = subItem.name.startsWith('lifeforge--')
-                      ? subItem.name.split('--')[1]
-                      : subItem.name
+                return (
+                  <Fragment key={`section-${item.title || item.items[0].name}`}>
+                    {item.title !== '' &&
+                      filteredModules.length > 0 &&
+                      sidebarExpanded && (
+                        <MainSidebarTitle title={item.title} />
+                      )}
+                    {filteredModules.map(subItem => {
+                      const link = subItem.name.startsWith('lifeforge--')
+                        ? subItem.name.split('--')[1]
+                        : subItem.name
 
-                    return (
-                      <MainSidebarItem
-                        key={_.kebabCase(subItem.name)}
-                        active={location.pathname.startsWith(`/${link}`)}
-                        icon={subItem.icon ?? ''}
-                        label={normalizeSubnamespace(subItem.name)}
-                        link={`/${link}`}
-                        sidebarExpanded={sidebarExpanded}
-                        subsection={subItem.subsection}
-                        toggleSidebar={toggleSidebar}
-                      />
-                    )
-                  })}
-                  {index !== modules.length - 1 &&
-                    filteredModules.length > 0 && <SidebarDivider />}
-                </Fragment>
-              )
-            })
-          ) : (
-            <div className="flex flex-1 items-center p-6">
-              <EmptyStateScreen
-                smaller
-                icon="tabler:search-off"
-                message={{
-                  id: 'modules',
-                  namespace: 'common.sidebar'
-                }}
-              />
-            </div>
-          )}
-        </div>
-      </Scrollbar>
-    </ul>
+                      return (
+                        <MainSidebarItem
+                          key={_.kebabCase(subItem.name)}
+                          active={location.pathname.startsWith(`/${link}`)}
+                          icon={subItem.icon ?? ''}
+                          label={normalizeSubnamespace(subItem.name)}
+                          link={`/${link}`}
+                          sidebarExpanded={sidebarExpanded}
+                          subsection={subItem.subsection}
+                          toggleSidebar={toggleSidebar}
+                        />
+                      )
+                    })}
+                    {index !== modules.length - 1 &&
+                      filteredModules.length > 0 && <SidebarDivider />}
+                  </Fragment>
+                )
+              })
+            ) : (
+              <Box flex="1" p="lg">
+                <EmptyStateScreen
+                  smaller
+                  icon="tabler:search-off"
+                  message={{
+                    id: 'modules',
+                    namespace: 'common.sidebar'
+                  }}
+                />
+              </Box>
+            )}
+          </Flex>
+        </Scrollbar>
+      </Box>
+    </Flex>
   )
 }
 
diff --git a/client/src/routes/hooks/useAppRouter.ts b/client/src/routes/hooks/useAppRouter.ts
index e4b462072..cf79237a0 100644
--- a/client/src/routes/hooks/useAppRouter.ts
+++ b/client/src/routes/hooks/useAppRouter.ts
@@ -62,5 +62,17 @@ export function useAppRouter() {
     return appRouter ?? loadingRouter
   }, [auth, authLoading, modulesLoading, appRouter, loadingRouter, authRouter])
 
-  return { router, isAuthenticated: !!auth }
+  const routerKey = useMemo(() => {
+    if (authLoading || modulesLoading) {
+      return 'loading'
+    }
+
+    if (!auth) {
+      return 'auth'
+    }
+
+    return appRouter ? 'app' : 'loading'
+  }, [auth, authLoading, modulesLoading, appRouter])
+
+  return { router, isAuthenticated: !!auth, routerKey }
 }
diff --git a/client/src/routes/providers/AppRoutesProvider.tsx b/client/src/routes/providers/AppRoutesProvider.tsx
index a78de1e09..a49bdf904 100644
--- a/client/src/routes/providers/AppRoutesProvider.tsx
+++ b/client/src/routes/providers/AppRoutesProvider.tsx
@@ -3,9 +3,9 @@ import { RouterProvider } from '@lifeforge/shared'
 import { useAppRouter } from '../hooks/useAppRouter'
 
 function AppRoutesProvider() {
-  const { router } = useAppRouter()
+  const { router, routerKey } = useAppRouter()
 
-  return <RouterProvider router={router} />
+  return <RouterProvider key={routerKey} router={router} />
 }
 
 export default AppRoutesProvider
diff --git a/client/tsconfig.json b/client/tsconfig.json
index 9aed80e71..5c2adad8b 100644
--- a/client/tsconfig.json
+++ b/client/tsconfig.json
@@ -2,10 +2,17 @@
   "compilerOptions": {
     "target": "ES2020",
     "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable", "ES2024.Object"],
+    "lib": [
+      "ES2020",
+      "DOM",
+      "DOM.Iterable",
+      "ES2024.Object"
+    ],
     "module": "ESNext",
     "skipLibCheck": true,
-    "types": ["node"],
+    "types": [
+      "node"
+    ],
     /* Bundler mode */
     "outDir": "${configDir}/tsbuild",
     "moduleResolution": "bundler",
@@ -22,13 +29,23 @@
     "rootDir": "../",
     "baseUrl": "./",
     "paths": {
-      "@/*": ["./src/*"],
-      "@core/*": ["../core/*"]
+      "@/*": [
+        "./src/*"
+      ],
+      "@core/*": [
+        "../core/*"
+      ],
+      "@functions/*": [
+        "../server/src/core/functions/*"
+      ],
     }
   },
+  "references": [
+    {
+      "path": "../server"
+    }
+  ],
   "include": [
-    "./src/**/*",
-    "src/federation/providers/CoreFederationProvider.tsx",
-    "src/federation"
+    "./src/**/*"
   ]
-}
+}
\ No newline at end of file
diff --git a/client/vite.config.ts b/client/vite.config.ts
index 8d3676312..8d7a79da0 100644
--- a/client/vite.config.ts
+++ b/client/vite.config.ts
@@ -1,6 +1,6 @@
 // import MillionLint from '@million/lint'
 import federation from '@originjs/vite-plugin-federation'
-import tailwindcss from '@tailwindcss/vite'
+import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin'
 import react from '@vitejs/plugin-react'
 import { globSync } from 'glob'
 import path from 'node:path'
@@ -13,6 +13,14 @@ const ReactCompilerConfig = {
 }
 
 export const alias: Alias[] = [
+  {
+    find: /^@lifeforge\/shared$/,
+    replacement: path.resolve(__dirname, '../shared/src/index.ts')
+  },
+  {
+    find: /^@lifeforge\/ui$/,
+    replacement: path.resolve(__dirname, '../packages/ui/src/index.ts')
+  },
   {
     find: '@providers',
     replacement: path.resolve(__dirname, './src/providers')
@@ -97,90 +105,100 @@ export const alias: Alias[] = [
   }
 ]
 
-export default defineConfig({
-  envDir: path.resolve(__dirname, '../env'),
-  plugins: [
-    // MillionLint.vite({}),
-    react({
-      babel: {
-        plugins: [['babel-plugin-react-compiler', ReactCompilerConfig]]
-      }
-    }),
-    tailwindcss(),
-    federation({
-      name: 'host',
-      remotes: {
-        None: ''
-      },
-      shared: [
-        'react',
-        'react-dom',
-        {
-          shared: {
-            packagePath: './node_modules/@lifeforge/shared'
-          },
-          '@lifeforge/ui': {
-            packagePath: './node_modules/@lifeforge/ui'
-          }
-        },
-        '@tanstack/react-query',
-        'i18next',
-        'react-i18next'
-      ]
-    })
-  ],
-  server: {
-    fs: {
-      strict: true
-    },
-    watch: {
-      ignored: ['**/node_modules/**', '**/.git/**']
-    }
-  },
-  resolve: {
-    alias
-  },
-  build: {
-    commonjsOptions: {
-      transformMixedEsModules: true
-    },
-    target: 'esnext',
-    sourcemap: false,
-    rollupOptions: {
-      output: {
-        manualChunks(id) {
-          if (id.includes('node_modules')) {
-            return id
-              .toString()
-              .split('node_modules/')
-              .pop()!
-              .split('/')[0]
-              .toString()
-          }
+export default defineConfig(({ command }) => {
+  const isDev = command === 'serve'
+  const activeAlias = isDev
+    ? alias
+    : alias.filter(a => {
+        if (a.find instanceof RegExp) {
+          return (
+            !a.find.test('@lifeforge/shared') && !a.find.test('@lifeforge/ui')
+          )
         }
-      }
-    }
-  },
-  optimizeDeps: {
-    esbuildOptions: {
+        return a.find !== '@lifeforge/shared' && a.find !== '@lifeforge/ui'
+      })
+
+  return {
+    envDir: path.resolve(__dirname, '../env'),
+    plugins: [
+      // MillionLint.vite({}),
+      react({
+        babel: {
+          plugins: [['babel-plugin-react-compiler', ReactCompilerConfig]]
+        }
+      }),
+      vanillaExtractPlugin(),
+      federation({
+        name: 'host',
+        remotes: {
+          None: ''
+        },
+        shared: [
+          'react',
+          'react-dom',
+          '@lifeforge/shared',
+          '@lifeforge/ui',
+          '@tanstack/react-query',
+          'i18next',
+          'react-i18next'
+        ]
+      })
+    ],
+    server: {
+      fs: {
+        strict: true
+      },
+      watch: {
+        ignored: ['**/node_modules/**', '**/.git/**']
+      },
+      allowedHosts: ['_.melvinchia.dev']
+    },
+    resolve: {
+      alias: activeAlias
+    },
+    build: {
+      commonjsOptions: {
+        transformMixedEsModules: true
+      },
+      target: 'esnext',
       sourcemap: false,
-      target: 'esnext'
-    }
-  },
-  css: {
-    postcss: {
-      plugins: [
-        {
-          postcssPlugin: 'internal:charset-removal',
-          AtRule: {
-            charset: atRule => {
-              if (atRule.name === 'charset') {
-                atRule.remove()
-              }
+      rollupOptions: {
+        output: {
+          manualChunks(id) {
+            if (id.includes('node_modules')) {
+              return id
+                .toString()
+                .split('node_modules/')
+                .pop()!
+                .split('/')[0]
+                .toString()
             }
           }
         }
-      ]
+      }
+    },
+    optimizeDeps: {
+      exclude: ['@lifeforge/shared', '@lifeforge/ui'],
+      esbuildOptions: {
+        sourcemap: false,
+        target: 'esnext'
+      }
+    },
+    css: {
+      postcss: {
+        plugins: [
+          {
+            postcssPlugin: 'internal:charset-removal',
+            AtRule: {
+              charset: atRule => {
+                if (atRule.name === 'charset') {
+                  atRule.remove()
+                }
+              }
+            }
+          }
+        ]
+      }
     }
   }
 })
diff --git a/docs/src/main.tsx b/docs/src/main.tsx
index 1f039ecee..05e8840cd 100644
--- a/docs/src/main.tsx
+++ b/docs/src/main.tsx
@@ -1,11 +1,11 @@
 import ReactDOM from 'react-dom/client'
-import ModalProvider from 'shared/dist/providers/ModalStoreProvider'
 
 import {
   APIEndpointProvider,
   PersonalizationProvider,
   createForgeProxy
 } from '@lifeforge/shared'
+import { ModalProvider } from '@lifeforge/ui'
 
 import App from './App'
 import './index.css'
diff --git a/packages/ui/src/components/auth/OTPInputBox/index.tsx b/packages/ui/src/components/auth/OTPInputBox/index.tsx
index ff07d71b1..1230df167 100644
--- a/packages/ui/src/components/auth/OTPInputBox/index.tsx
+++ b/packages/ui/src/components/auth/OTPInputBox/index.tsx
@@ -18,7 +18,7 @@ function _OTPInputBox({
   lighter?: boolean
 }) {
   return (
-    <Flex direction="column" gap="md">
+    <Flex centered direction="column" gap="md">
       <OtpInput
         shouldAutoFocus
         numInputs={6}
@@ -35,7 +35,7 @@ function _OTPInputBox({
             maxHeight={{ base: '3rem', md: '4rem' }}
             maxWidth={{ base: '3rem', md: '4rem' }}
             mx="xs"
-            rounded="md"
+            r="md"
             style={{
               aspectRatio: '1/1'
             }}
diff --git a/packages/ui/src/components/auth/sso/UnauthorizedScreen/index.tsx b/packages/ui/src/components/auth/sso/UnauthorizedScreen/index.tsx
index f8abfb4a4..048ff39ef 100644
--- a/packages/ui/src/components/auth/sso/UnauthorizedScreen/index.tsx
+++ b/packages/ui/src/components/auth/sso/UnauthorizedScreen/index.tsx
@@ -24,7 +24,7 @@ export function UnauthorizedScreen({ frontendURL }: { frontendURL: string }) {
         mt="3xl"
         p="md"
         px="lg"
-        rounded="md"
+        r="md"
         style={{
           color: 'var(--color-bg-800)',
           fontWeight: 600,
diff --git a/packages/ui/src/components/data-display/OptionsColumn/index.tsx b/packages/ui/src/components/data-display/OptionsColumn/index.tsx
index ae233c828..73cad2150 100644
--- a/packages/ui/src/components/data-display/OptionsColumn/index.tsx
+++ b/packages/ui/src/components/data-display/OptionsColumn/index.tsx
@@ -1,8 +1,6 @@
 import { Card } from '@/components/layout'
-import { Icon } from '@/components/primitives'
-import { Flex, Text } from '@/components/primitives'
+import { Flex, Icon, Text } from '@/components/primitives'
 import { Tooltip } from '@/components/utilities'
-
 import type { ResponsiveProp, SpaceToken } from '@/system'
 
 type DirectionValue = 'row' | 'column' | 'row-reverse' | 'column-reverse'
@@ -58,7 +56,7 @@ export function OptionsColumn({
   }
 
   return (
-    <Card direction={getDirection()} gap="xl" justify="between">
+    <Card direction={getDirection()} gapX="xl" gapY="md" justify="between">
       <Flex align="center" flexShrink="1" gap="md">
         <Icon
           icon={icon}
diff --git a/packages/ui/src/components/data-display/TagChip/index.tsx b/packages/ui/src/components/data-display/TagChip/index.tsx
index d0a44dc61..c2809466c 100644
--- a/packages/ui/src/components/data-display/TagChip/index.tsx
+++ b/packages/ui/src/components/data-display/TagChip/index.tsx
@@ -20,6 +20,8 @@ interface TagChipProps extends Omit<BorderedProps, 'color'> {
   icon?: string
   /** The color of the tag chip. If provided, it customizes the text, border and background colors. */
   color?: string
+  /** The size variant of the tag chip. */
+  size?: 'sm' | 'base'
   /** Optional action button properties, including icon and click handler.
    * If provided, an action button will be displayed at the end of the tag chip. */
   variant?: 'outlined' | 'filled'
@@ -41,6 +43,7 @@ export function TagChip({
   icon,
   color,
   variant = 'outlined',
+  size = 'base',
   actionButtonProps,
   onClick,
   ...rest
@@ -97,7 +100,7 @@ export function TagChip({
           minWidth="0"
           px="sm"
           py="xs"
-          rounded="full"
+          r="full"
           style={computedStyle}
           onClick={onClick}
           {...rest}
@@ -119,12 +122,18 @@ export function TagChip({
                   </Flex>
                 )
               } else {
-                return <Icon icon={icon} size="1em" />
+                return (
+                  <Icon icon={icon} size={size === 'base' ? '1em' : '0.75em'} />
+                )
               }
             })()}
             {typeof label === 'string' ? (
               <Box asChild minWidth="0">
-                <Text truncate size="sm" weight="medium">
+                <Text
+                  truncate
+                  size={size === 'base' ? 'sm' : 'xs'}
+                  weight="medium"
+                >
                   {label}
                 </Text>
               </Box>
diff --git a/packages/ui/src/components/data-display/ViewModeSelector/index.tsx b/packages/ui/src/components/data-display/ViewModeSelector/index.tsx
index c0a0f2ca7..feef37448 100644
--- a/packages/ui/src/components/data-display/ViewModeSelector/index.tsx
+++ b/packages/ui/src/components/data-display/ViewModeSelector/index.tsx
@@ -37,7 +37,7 @@ export function ViewModeSelector<
       className={styles.container}
       gap="xs"
       p={size === 'small' ? 'xs' : 'sm'}
-      rounded="lg"
+      r="lg"
     >
       {options.map(({ value, icon, text }) => (
         <Text
@@ -73,7 +73,7 @@ export function ViewModeSelector<
             gap="sm"
             px={size === 'small' ? 'sm' : 'md'}
             py={size === 'small' ? 'xs' : 'sm'}
-            rounded="md"
+            r="md"
             style={{
               transition: 'all 0.2s'
             }}
diff --git a/packages/ui/src/components/data-display/VirtualGrid/VirtualGrid.stories.tsx b/packages/ui/src/components/data-display/VirtualGrid/VirtualGrid.stories.tsx
index e66747acd..65ab9ac61 100644
--- a/packages/ui/src/components/data-display/VirtualGrid/VirtualGrid.stories.tsx
+++ b/packages/ui/src/components/data-display/VirtualGrid/VirtualGrid.stories.tsx
@@ -3,7 +3,6 @@ import { useRef } from 'react'
 
 import { Card } from '@/components/layout'
 import { Box, Flex, Icon, Text } from '@/components/primitives'
-
 import { TAILWIND_PALETTE } from '@/system'
 
 import { VirtualGrid } from './index'
@@ -117,7 +116,7 @@ function CardItem({ item }: { item: SampleItem }) {
       <Flex
         align="center"
         justify="center"
-        rounded="lg"
+        r="lg"
         style={{
           aspectRatio: '16 / 9',
           backgroundColor: COLORS[item.id % COLORS.length]
@@ -223,7 +222,7 @@ export const CompactItems: Story = {
         renderItem={(item: SampleItem) => (
           <Card height="100%">
             <Flex
-              rounded="lg"
+              r="lg"
               style={{
                 aspectRatio: '1 / 1',
                 backgroundColor: COLORS[item.id % COLORS.length]
diff --git a/packages/ui/src/components/data-display/Widget/components/WidgetIcon.tsx b/packages/ui/src/components/data-display/Widget/components/WidgetIcon.tsx
index bddb25dd6..80dbf1970 100644
--- a/packages/ui/src/components/data-display/Widget/components/WidgetIcon.tsx
+++ b/packages/ui/src/components/data-display/Widget/components/WidgetIcon.tsx
@@ -26,7 +26,7 @@ export function WidgetIcon({
         className={clsx(!iconColor && styles.largeIconWrapperNoColor)}
         mb="xs"
         p={{ base: 'sm', sm: 'md' }}
-        rounded="lg"
+        r="lg"
         style={
           iconColor
             ? { backgroundColor: anyColorToHex(iconColor) + '20' }
@@ -48,7 +48,7 @@ export function WidgetIcon({
   }
 
   return (
-    <Box asChild rounded="md">
+    <Box asChild r="md">
       <Flex
         align="center"
         className={clsx(!iconColor && styles.defaultIconWrapperNoColor)}
diff --git a/packages/ui/src/components/data-display/Widget/index.tsx b/packages/ui/src/components/data-display/Widget/index.tsx
index e70b17b92..b2f90b626 100644
--- a/packages/ui/src/components/data-display/Widget/index.tsx
+++ b/packages/ui/src/components/data-display/Widget/index.tsx
@@ -68,7 +68,7 @@ export function Widget({
       gap="lg"
       height="100%"
       p="md"
-      rounded="lg"
+      r="lg"
       width="100%"
     >
       {title && (
diff --git a/packages/ui/src/components/feedback/LoadingScreen/index.tsx b/packages/ui/src/components/feedback/LoadingScreen/index.tsx
index c5af2ebd8..665991167 100644
--- a/packages/ui/src/components/feedback/LoadingScreen/index.tsx
+++ b/packages/ui/src/components/feedback/LoadingScreen/index.tsx
@@ -1,5 +1,4 @@
-import { Icon } from '@/components/primitives'
-import { Flex, Text } from '@/components/primitives'
+import { Flex, Icon, Text } from '@/components/primitives'
 
 interface LoadingScreenProps {
   /** An optional message to display below the loading indicator. */
@@ -10,21 +9,21 @@ interface LoadingScreenProps {
 
 export function LoadingScreen({ message, loaderSize }: LoadingScreenProps) {
   return (
-    <Text asChild color="muted" weight="medium">
+    <Text asChild color="muted" size="lg" weight="medium">
       <Flex
         align="center"
         direction="column"
         flexGrow="1"
-        gap="md"
         height="100%"
         justify="center"
         width="100%"
       >
         <Icon
+          color="muted"
           icon="svg-spinners:ring-resize"
           style={{
             fontSize: loaderSize || '2rem',
-            color: 'var(--color-bg-500)'
+            marginBottom: '1em'
           }}
         />
         {message}
diff --git a/packages/ui/src/components/inputs/Button/index.tsx b/packages/ui/src/components/inputs/Button/index.tsx
index d999a643c..b7e107e65 100644
--- a/packages/ui/src/components/inputs/Button/index.tsx
+++ b/packages/ui/src/components/inputs/Button/index.tsx
@@ -105,7 +105,7 @@ export function Button<T extends ElementType = 'button'>({
           justify="center"
           minWidth="0"
           p="md"
-          rounded="lg"
+          r="lg"
           style={buttonStyle}
           type="button"
           onClick={onClick}
diff --git a/packages/ui/src/components/inputs/Checkbox/index.tsx b/packages/ui/src/components/inputs/Checkbox/index.tsx
index f315b8910..227007e3c 100644
--- a/packages/ui/src/components/inputs/Checkbox/index.tsx
+++ b/packages/ui/src/components/inputs/Checkbox/index.tsx
@@ -48,7 +48,7 @@ export function Checkbox({
               flexShrink="0"
               height="1.5em"
               justify="center"
-              rounded="md"
+              r="md"
               width="1.5em"
             >
               <CheckboxPrimitive.Indicator asChild>
diff --git a/packages/ui/src/components/inputs/ColorInput/ColorPickerModal/components/modals/FlatUIColorsModal/index.tsx b/packages/ui/src/components/inputs/ColorInput/ColorPickerModal/components/modals/FlatUIColorsModal/index.tsx
index 029496422..a96a60cc6 100644
--- a/packages/ui/src/components/inputs/ColorInput/ColorPickerModal/components/modals/FlatUIColorsModal/index.tsx
+++ b/packages/ui/src/components/inputs/ColorInput/ColorPickerModal/components/modals/FlatUIColorsModal/index.tsx
@@ -52,7 +52,7 @@ function FlatUIColorsModal({
                   align="center"
                   height="100%"
                   justify="center"
-                  rounded="md"
+                  r="md"
                   width="100%"
                 >
                   <Box
diff --git a/packages/ui/src/components/inputs/ColorInput/ColorPickerModal/components/modals/ModandiColorPaletteModal/index.tsx b/packages/ui/src/components/inputs/ColorInput/ColorPickerModal/components/modals/ModandiColorPaletteModal/index.tsx
index cae1bdea3..35c48e56a 100644
--- a/packages/ui/src/components/inputs/ColorInput/ColorPickerModal/components/modals/ModandiColorPaletteModal/index.tsx
+++ b/packages/ui/src/components/inputs/ColorInput/ColorPickerModal/components/modals/ModandiColorPaletteModal/index.tsx
@@ -36,13 +36,7 @@ function MorandiColorPaletteModal({
         style={{ gap: '0.75rem' }}
       >
         {MORANDI_COLORS.sort(sortFn).map((morandiColor, index) => (
-          <Flex
-            key={index}
-            asChild
-            align="center"
-            justify="center"
-            rounded="md"
-          >
+          <Flex key={index} asChild align="center" justify="center" r="md">
             <button
               className={clsx(
                 styles.colorButton,
diff --git a/packages/ui/src/components/inputs/ColorInput/ColorPickerModal/components/modals/TailwindCSSColorsModal/components/ColorItem.tsx b/packages/ui/src/components/inputs/ColorInput/ColorPickerModal/components/modals/TailwindCSSColorsModal/components/ColorItem.tsx
index 6c7d229dc..3938bd754 100644
--- a/packages/ui/src/components/inputs/ColorInput/ColorPickerModal/components/modals/TailwindCSSColorsModal/components/ColorItem.tsx
+++ b/packages/ui/src/components/inputs/ColorInput/ColorPickerModal/components/modals/TailwindCSSColorsModal/components/ColorItem.tsx
@@ -29,7 +29,7 @@ function _ColorItem({
 
   return (
     <Box as="li" width="100%">
-      <Flex asChild align="center" justify="center" rounded="md" width="100%">
+      <Flex asChild align="center" justify="center" r="md" width="100%">
         <button
           className={clsx(
             styles.colorButton,
diff --git a/packages/ui/src/components/inputs/ColorInput/index.tsx b/packages/ui/src/components/inputs/ColorInput/index.tsx
index 091111cb1..8a4596b21 100644
--- a/packages/ui/src/components/inputs/ColorInput/index.tsx
+++ b/packages/ui/src/components/inputs/ColorInput/index.tsx
@@ -91,7 +91,7 @@ export function ColorInput({
               borderWidth="1px"
               flexShrink="0"
               height={variant === 'plain' ? '1.5em' : '1em'}
-              rounded="full"
+              r="full"
               style={{
                 marginTop: '0.125rem',
                 backgroundColor: value?.match(/^#[0-9A-F]{6}$/i)
diff --git a/packages/ui/src/components/inputs/ComboboxInput/components/ComboboxOption.tsx b/packages/ui/src/components/inputs/ComboboxInput/components/ComboboxOption.tsx
index 339d579e2..0f9e0bcd1 100644
--- a/packages/ui/src/components/inputs/ComboboxInput/components/ComboboxOption.tsx
+++ b/packages/ui/src/components/inputs/ComboboxInput/components/ComboboxOption.tsx
@@ -63,7 +63,7 @@ export function ComboboxOption({
                           flexShrink="0"
                           p={color !== undefined ? 'sm' : undefined}
                           pr={color === undefined ? 'sm' : undefined}
-                          rounded="md"
+                          r="md"
                           style={
                             color !== undefined
                               ? {
@@ -93,7 +93,7 @@ export function ComboboxOption({
                             display="block"
                             flexShrink="0"
                             height="1rem"
-                            rounded="full"
+                            r="full"
                             style={{ backgroundColor: color }}
                             width="1rem"
                           />
diff --git a/packages/ui/src/components/inputs/ComboboxInput/components/ComboboxOptions.tsx b/packages/ui/src/components/inputs/ComboboxInput/components/ComboboxOptions.tsx
index f404b29ab..9faa76148 100644
--- a/packages/ui/src/components/inputs/ComboboxInput/components/ComboboxOptions.tsx
+++ b/packages/ui/src/components/inputs/ComboboxInput/components/ComboboxOptions.tsx
@@ -19,7 +19,7 @@ export function ComboboxOptions({
         bg={{ base: 'bg-100', dark: 'bg-800' }}
         className={styles.options}
         overflowY="auto"
-        rounded="md"
+        r="md"
         style={{
           // @ts-expect-error - headlessui CSS variable
           '--anchor-gap': '12px',
diff --git a/packages/ui/src/components/inputs/DateInput/components/CalendarHeader.tsx b/packages/ui/src/components/inputs/DateInput/components/CalendarHeader.tsx
index 58dd39174..b55729eeb 100644
--- a/packages/ui/src/components/inputs/DateInput/components/CalendarHeader.tsx
+++ b/packages/ui/src/components/inputs/DateInput/components/CalendarHeader.tsx
@@ -1,7 +1,6 @@
 import { Select } from '@headlessui/react'
 import dayjs from 'dayjs'
 import { range } from 'lodash'
-import React from 'react'
 
 import { Button } from '@/components/inputs'
 import { Box, Flex, Icon, Text } from '@/components/primitives'
@@ -60,7 +59,7 @@ export function CalendarHeader({
               pl="sm"
               pr="xl"
               py="sm"
-              rounded="md"
+              r="md"
             >
               <Select
                 value={dayjs(date).year()}
@@ -83,7 +82,7 @@ export function CalendarHeader({
               pl="sm"
               pr="xl"
               py="sm"
-              rounded="md"
+              r="md"
             >
               <Select
                 value={months[dayjs(date).month()]}
@@ -104,7 +103,7 @@ export function CalendarHeader({
               display={{ base: 'block', sm: 'none' }}
               pr="xl"
               py="sm"
-              rounded="md"
+              r="md"
               style={{ paddingLeft: '0.75rem' }}
             >
               <Select
diff --git a/packages/ui/src/components/inputs/DateInput/index.tsx b/packages/ui/src/components/inputs/DateInput/index.tsx
index 32478e898..19aeb1199 100644
--- a/packages/ui/src/components/inputs/DateInput/index.tsx
+++ b/packages/ui/src/components/inputs/DateInput/index.tsx
@@ -1,5 +1,5 @@
 import dayjs from 'dayjs'
-import { useRef, useState } from 'react'
+import { useRef } from 'react'
 import DatePicker from 'react-datepicker'
 import tinycolor from 'tinycolor2'
 
@@ -70,8 +70,6 @@ export function DateInput({
 
   const ref = useRef<DatePicker | null>(null)
 
-  const [isCalendarOpen, setCalendarOpen] = useState(false)
-
   return (
     <InputWrapper
       className={className}
@@ -118,7 +116,15 @@ export function DateInput({
               popperClassName="-mx-13"
               popperPlacement="bottom-start"
               portalId="app"
-              renderCustomHeader={CalendarHeader}
+              renderCustomHeader={(props: {
+                date: Date
+                changeYear: (year: number) => void
+                changeMonth: (month: number) => void
+                decreaseMonth: () => void
+                increaseMonth: () => void
+                prevMonthButtonDisabled: boolean
+                nextMonthButtonDisabled: boolean
+              }) => <CalendarHeader {...props} />}
               selected={value || null}
               showPopperArrow={false}
               showTimeSelect={hasTime}
@@ -127,12 +133,6 @@ export function DateInput({
 
                 return isWeekend ? styles.weekDayRed : styles.weekDayMuted
               }}
-              onCalendarClose={() => {
-                setCalendarOpen(false)
-              }}
-              onCalendarOpen={() => {
-                setCalendarOpen(true)
-              }}
               onChange={(value: Date | null) => onChange(value)}
             />
           </Placeholder>
diff --git a/packages/ui/src/components/inputs/FAB/index.tsx b/packages/ui/src/components/inputs/FAB/index.tsx
index 9e5ff85a1..10bfa1380 100644
--- a/packages/ui/src/components/inputs/FAB/index.tsx
+++ b/packages/ui/src/components/inputs/FAB/index.tsx
@@ -1,4 +1,4 @@
-import { Box } from '@/components/primitives'
+import { Flex } from '@/components/primitives'
 
 import { Button } from '../Button'
 
@@ -17,20 +17,20 @@ export function FAB({
   visibilityBreakpoint?: 'sm' | 'md' | 'lg' | 'xl' | false
 } & React.ComponentProps<typeof Button>) {
   return (
-    <Box
+    <Flex
       asChild
       shadow
       bottom="1.5em"
       display={
         visibilityBreakpoint
-          ? { base: 'none', [visibilityBreakpoint]: 'block' }
-          : 'block'
+          ? { base: 'flex', [visibilityBreakpoint]: 'none' }
+          : 'flex'
       }
       position="fixed"
       right="1.5em"
       zIndex="9992"
     >
       <Button {...props} icon={icon} />
-    </Box>
+    </Flex>
   )
 }
diff --git a/packages/ui/src/components/inputs/FileInput/FilePickerModal/components/AIImageGenerator.tsx b/packages/ui/src/components/inputs/FileInput/FilePickerModal/components/AIImageGenerator.tsx
index c971548f1..6dba22fe1 100644
--- a/packages/ui/src/components/inputs/FileInput/FilePickerModal/components/AIImageGenerator.tsx
+++ b/packages/ui/src/components/inputs/FileInput/FilePickerModal/components/AIImageGenerator.tsx
@@ -7,7 +7,6 @@ import { EmptyStateScreen } from '@/components/feedback'
 import { Button } from '@/components/inputs'
 import { Box, Flex } from '@/components/primitives'
 import { WithQueryData } from '@/components/utilities'
-
 import { forgeAPI } from '@/utils/forgeAPI'
 
 import { TextAreaInput } from '../../../TextAreaInput'
@@ -91,13 +90,13 @@ export function AIImageGenerator({
                 bg={{ base: 'bg-200', dark: 'bg-800' }}
                 justify="center"
                 p="xl"
-                rounded="lg"
+                r="lg"
                 style={{ height: '24rem' }}
                 width="100%"
               >
                 <Box
                   asChild
-                  rounded="lg"
+                  r="lg"
                   style={{ height: '100%', objectFit: 'contain' }}
                 >
                   <img alt="" src={file as string} />
diff --git a/packages/ui/src/components/inputs/FileInput/FilePickerModal/components/ImageURL.tsx b/packages/ui/src/components/inputs/FileInput/FilePickerModal/components/ImageURL.tsx
index afd350f42..4c2780a9d 100644
--- a/packages/ui/src/components/inputs/FileInput/FilePickerModal/components/ImageURL.tsx
+++ b/packages/ui/src/components/inputs/FileInput/FilePickerModal/components/ImageURL.tsx
@@ -30,7 +30,7 @@ export function ImageURL({
         mt="md"
         overflow="hidden"
         position="relative"
-        rounded="md"
+        r="md"
         style={{ flex: 1, isolation: 'isolate', minHeight: 0 }}
       >
         <Box asChild style={{ height: '100%', objectFit: 'contain' }}>
diff --git a/packages/ui/src/components/inputs/FileInput/FilePickerModal/components/LocalUpload/components/DnDContainer.tsx b/packages/ui/src/components/inputs/FileInput/FilePickerModal/components/LocalUpload/components/DnDContainer.tsx
index 63788da96..1006089e7 100644
--- a/packages/ui/src/components/inputs/FileInput/FilePickerModal/components/LocalUpload/components/DnDContainer.tsx
+++ b/packages/ui/src/components/inputs/FileInput/FilePickerModal/components/LocalUpload/components/DnDContainer.tsx
@@ -77,7 +77,7 @@ export function DnDContainer({
       height="100%"
       justify="center"
       p="2xl"
-      rounded="lg"
+      r="lg"
       style={{ flex: 1, minHeight: '24rem' }}
       width="100%"
       {...(getRootProps() as any)}
@@ -90,7 +90,7 @@ export function DnDContainer({
       />
       <Text
         asChild
-        color="bg-500"
+        color="muted"
         style={{ height: '5rem', width: '5rem', flexShrink: 0 }}
       >
         <Icon icon="tabler:drag-drop" />
@@ -98,7 +98,7 @@ export function DnDContainer({
       <Text
         align="center"
         as="div"
-        color="bg-500"
+        color="muted"
         mt="md"
         size="2xl"
         weight="medium"
@@ -108,7 +108,7 @@ export function DnDContainer({
       <Text
         align="center"
         as="div"
-        color="bg-500"
+        color="muted"
         mt="md"
         size="lg"
         style={{ letterSpacing: '0.1em', textTransform: 'uppercase' }}
@@ -124,7 +124,7 @@ export function DnDContainer({
       >
         dnd.buttons.pasteFromClipboard
       </Button>
-      <Text align="center" as="p" color="bg-500" mt="lg" size="sm">
+      <Text align="center" as="p" color="muted" mt="lg" size="sm">
         {t('fileInputSupportedFormat', {
           format: acceptedMimeTypesFlattened || 'N/A'
         })}
diff --git a/packages/ui/src/components/inputs/FileInput/FilePickerModal/components/LocalUpload/components/PreviewContainer.tsx b/packages/ui/src/components/inputs/FileInput/FilePickerModal/components/LocalUpload/components/PreviewContainer.tsx
index bb8c34140..f54fb4bfa 100644
--- a/packages/ui/src/components/inputs/FileInput/FilePickerModal/components/LocalUpload/components/PreviewContainer.tsx
+++ b/packages/ui/src/components/inputs/FileInput/FilePickerModal/components/LocalUpload/components/PreviewContainer.tsx
@@ -46,7 +46,7 @@ export function PreviewContainer({
           overflow="hidden"
           p="md"
           position="relative"
-          rounded="lg"
+          r="lg"
           style={{ minHeight: '8rem' }}
           width="100%"
         >
@@ -59,7 +59,7 @@ export function PreviewContainer({
             >
               <Text
                 asChild
-                color="bg-500"
+                color="muted"
                 style={{ height: '1.5rem', width: '1.5rem', flexShrink: 0 }}
               >
                 <Icon
@@ -86,7 +86,7 @@ export function PreviewContainer({
           </Flex>
           <Box
             asChild
-            rounded="md"
+            r="md"
             style={{ maxHeight: '24rem', objectFit: 'contain' }}
           >
             <img alt="" src={preview} />
@@ -110,7 +110,7 @@ export function PreviewContainer({
           >
             <Text
               asChild
-              color="bg-500"
+              color="muted"
               style={{ height: '1.5rem', width: '1.5rem' }}
             >
               <Icon
diff --git a/packages/ui/src/components/inputs/FileInput/FilePickerModal/components/Pixabay/components/SearchFilterModal/components/ColorFilter.tsx b/packages/ui/src/components/inputs/FileInput/FilePickerModal/components/Pixabay/components/SearchFilterModal/components/ColorFilter.tsx
index 2a184df52..c8424f131 100644
--- a/packages/ui/src/components/inputs/FileInput/FilePickerModal/components/Pixabay/components/SearchFilterModal/components/ColorFilter.tsx
+++ b/packages/ui/src/components/inputs/FileInput/FilePickerModal/components/Pixabay/components/SearchFilterModal/components/ColorFilter.tsx
@@ -20,7 +20,7 @@ export function ColorFilter({ colors, updateFilters }: ColorFilterProps) {
           <Bordered
             asChild
             borderColor={{ base: 'bg-200', dark: 'bg-700' }}
-            rounded="full"
+            r="full"
             style={{
               backgroundColor: COLORS.find(l => l.id === colors)?.color,
               height: '0.75rem',
diff --git a/packages/ui/src/components/inputs/FileInput/index.tsx b/packages/ui/src/components/inputs/FileInput/index.tsx
index eada8960b..aaddbac9a 100644
--- a/packages/ui/src/components/inputs/FileInput/index.tsx
+++ b/packages/ui/src/components/inputs/FileInput/index.tsx
@@ -4,8 +4,7 @@ import { useTranslation } from 'react-i18next'
 import Zoom from 'react-medium-image-zoom'
 
 import { Button } from '@/components/inputs'
-import { Icon } from '@/components/primitives'
-import { Box, Flex, Text } from '@/components/primitives'
+import { Box, Flex, Icon, Text } from '@/components/primitives'
 import { useModalStore } from '@/providers'
 
 import { useInputLabel } from '../shared/hooks/useInputLabel'
@@ -79,14 +78,14 @@ export function FileInput({
       className={clsx('__file-input', styles.wrapper)}
       direction="column"
       p="lg"
-      rounded="md"
+      r="md"
       style={{
         opacity: disabled ? 0.5 : 1,
         pointerEvents: disabled ? 'none' : 'auto'
       }}
       width="100%"
     >
-      <Text asChild color="bg-500">
+      <Text asChild color="muted">
         <Flex align="center" gap="sm">
           <Icon icon={icon} style={{ height: '1.5rem', width: '1.5rem' }} />
           <Text as="span" color="inherit" weight="medium">
@@ -111,7 +110,7 @@ export function FileInput({
               Select
             </Button>
           </Box>
-          <Text align="center" as="p" color="bg-500" size="sm">
+          <Text align="center" as="p" color="muted" size="sm">
             {reminderText ||
               t('fileInputSupportedFormat', {
                 format: acceptedMimeTypes
@@ -132,7 +131,7 @@ export function FileInput({
             preview.startsWith('data:')) ? (
             <Box mt="lg">
               <Zoom zoomMargin={100}>
-                <Box asChild maxHeight="24rem" rounded="md">
+                <Box asChild maxHeight="24rem" r="md">
                   <img alt="" src={preview} />
                 </Box>
               </Zoom>
@@ -151,20 +150,19 @@ export function FileInput({
           ) : (
             <Flex align="center" gap="xl" justify="between" mt="md">
               <Flex align="center" gap="sm" minWidth="0">
-                <Box asChild flexShrink="0">
-                  <Text asChild color="bg-500">
-                    <Icon
-                      icon={
-                        FILE_ICONS[
-                          (file instanceof File
-                            ? file.name.split('.').pop()
-                            : '') as keyof typeof FILE_ICONS
-                        ] || 'tabler:file'
-                      }
-                      style={{ height: '1.5rem', width: '1.5rem' }}
-                    />
-                  </Text>
-                </Box>
+                <Text asChild color="muted">
+                  <Icon
+                    color="muted"
+                    icon={
+                      FILE_ICONS[
+                        (file instanceof File
+                          ? file.name.split('.').pop()
+                          : '') as keyof typeof FILE_ICONS
+                      ] || 'tabler:file'
+                    }
+                    style={{ height: '1.5rem', width: '1.5rem' }}
+                  />
+                </Text>
                 <Text truncate as="p">
                   {file instanceof File ? file.name : file}
                 </Text>
diff --git a/packages/ui/src/components/inputs/IconInput/IconPickerModal/components/ChipSelector.tsx b/packages/ui/src/components/inputs/IconInput/IconPickerModal/components/ChipSelector.tsx
index e1b206e0a..4e75efff0 100644
--- a/packages/ui/src/components/inputs/IconInput/IconPickerModal/components/ChipSelector.tsx
+++ b/packages/ui/src/components/inputs/IconInput/IconPickerModal/components/ChipSelector.tsx
@@ -65,7 +65,7 @@ export function ChipSelector({
         height="2rem"
         justify="center"
         px="sm"
-        rounded="full"
+        r="full"
       >
         <Text
           asChild
diff --git a/packages/ui/src/components/inputs/IconInput/IconPickerModal/components/IconEntry.tsx b/packages/ui/src/components/inputs/IconInput/IconPickerModal/components/IconEntry.tsx
index 9fea9ac0a..914de63cd 100644
--- a/packages/ui/src/components/inputs/IconInput/IconPickerModal/components/IconEntry.tsx
+++ b/packages/ui/src/components/inputs/IconInput/IconPickerModal/components/IconEntry.tsx
@@ -23,7 +23,7 @@ function _IconEntry({
         bg={{ base: 'transparent', hover: 'bg-200', darkHover: 'bg-800' }}
         direction="column"
         p="md"
-        rounded="lg"
+        r="lg"
         style={{ cursor: 'pointer' }}
         width="100%"
         onClick={handleIconSelected}
diff --git a/packages/ui/src/components/inputs/IconInput/IconPickerModal/index.tsx b/packages/ui/src/components/inputs/IconInput/IconPickerModal/index.tsx
index acd03f9a3..f9226774e 100644
--- a/packages/ui/src/components/inputs/IconInput/IconPickerModal/index.tsx
+++ b/packages/ui/src/components/inputs/IconInput/IconPickerModal/index.tsx
@@ -66,7 +66,7 @@ export function IconPickerModal({
               asChild
               bg={{ base: 'transparent', hover: 'bg-100', darkHover: 'bg-800' }}
               p="sm"
-              rounded="md"
+              r="md"
             >
               <Text
                 asChild
@@ -92,11 +92,7 @@ export function IconPickerModal({
       ) : (
         <ModalHeader
           appendTitle={
-            <Text
-              align="right"
-              color="bg-500"
-              size={{ base: 'sm', sm: 'base' }}
-            >
+            <Text align="right" color="muted" size={{ base: 'sm', sm: 'base' }}>
               powered by&nbsp;
               <Text asChild decoration="underline">
                 <a
diff --git a/packages/ui/src/components/inputs/IconInput/IconPickerModal/pages/IconSetList/components/CategoryEntry.tsx b/packages/ui/src/components/inputs/IconInput/IconPickerModal/pages/IconSetList/components/CategoryEntry.tsx
index 65f111d38..5d9cf0e88 100644
--- a/packages/ui/src/components/inputs/IconInput/IconPickerModal/pages/IconSetList/components/CategoryEntry.tsx
+++ b/packages/ui/src/components/inputs/IconInput/IconPickerModal/pages/IconSetList/components/CategoryEntry.tsx
@@ -21,7 +21,7 @@ function _CategoryEntry({
 }) {
   return (
     <Box as="section" mb="lg" width="100%">
-      <Box as="header" mb="xl" position="relative" rounded="lg">
+      <Box as="header" mb="xl" position="relative" r="lg">
         <Text align="center" as="h2" size="3xl" weight="semibold">
           {category}
           <Bordered
diff --git a/packages/ui/src/components/inputs/Listbox/Listbox.stories.tsx b/packages/ui/src/components/inputs/Listbox/Listbox.stories.tsx
index ea661221b..8acd21b5e 100644
--- a/packages/ui/src/components/inputs/Listbox/Listbox.stories.tsx
+++ b/packages/ui/src/components/inputs/Listbox/Listbox.stories.tsx
@@ -1,8 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { useState } from 'react'
 
-import { Box, Flex, Icon, Text } from '@/components/primitives'
-
+import { Flex, Icon, Text } from '@/components/primitives'
 import { COLORS, TAILWIND_PALETTE } from '@/system'
 
 import { ListboxOption } from '../ListboxInput/components/ListboxOption'
@@ -70,14 +69,12 @@ export const Default: Story = {
       <Listbox
         renderContent={() => (
           <Flex align="center" gap="sm">
-            <Box asChild flexShrink="0">
-              <Icon
-                icon={selectedOption?.icon || 'tabler:cube'}
-                style={{
-                  color: selectedOption?.color || COLORS['bg-500']
-                }}
-              />
-            </Box>
+            <Icon
+              icon={selectedOption?.icon || 'tabler:cube'}
+              style={{
+                color: selectedOption?.color || COLORS['bg-500']
+              }}
+            />
             <Text truncate>{selectedOption?.label || 'Select an option'}</Text>
           </Flex>
         )}
@@ -118,14 +115,12 @@ export const Disabled: Story = {
         disabled
         renderContent={() => (
           <Flex align="center" gap="sm">
-            <Box asChild flexShrink="0">
-              <Icon
-                icon={selectedOption?.icon || 'tabler:cube'}
-                style={{
-                  color: selectedOption?.color || COLORS['bg-500']
-                }}
-              />
-            </Box>
+            <Icon
+              icon={selectedOption?.icon || 'tabler:cube'}
+              style={{
+                color: selectedOption?.color || COLORS['bg-500']
+              }}
+            />
             <Text truncate>{selectedOption?.label || 'Select an option'}</Text>
           </Flex>
         )}
diff --git a/packages/ui/src/components/inputs/Listbox/index.tsx b/packages/ui/src/components/inputs/Listbox/index.tsx
index e9118b147..885e71bc4 100644
--- a/packages/ui/src/components/inputs/Listbox/index.tsx
+++ b/packages/ui/src/components/inputs/Listbox/index.tsx
@@ -61,7 +61,7 @@ export function Listbox<T>({
           justify="between"
           minWidth="0"
           p="md"
-          rounded="lg"
+          r="lg"
           style={disabled ? { opacity: 0.5 } : undefined}
           width="100%"
           {...rest}
@@ -76,7 +76,7 @@ export function Listbox<T>({
                 {value as unknown as string}
               </Text>
             )}
-            <Text asChild color="bg-500" style={{ flexShrink: 0 }}>
+            <Text asChild color="muted" style={{ flexShrink: 0 }}>
               <Icon icon="tabler:chevron-down" />
             </Text>
           </ListboxButton>
diff --git a/packages/ui/src/components/inputs/ListboxInput/components/ListboxNullOption.tsx b/packages/ui/src/components/inputs/ListboxInput/components/ListboxNullOption.tsx
index 1ba2f6951..722636dcd 100644
--- a/packages/ui/src/components/inputs/ListboxInput/components/ListboxNullOption.tsx
+++ b/packages/ui/src/components/inputs/ListboxInput/components/ListboxNullOption.tsx
@@ -1,7 +1,13 @@
 import { ListboxOption as HeadlessListboxOption } from '@headlessui/react'
 
 import { Icon } from '@/components/primitives'
-import { Box, Flex, Text, Transition, WithDivide } from '@/components/primitives'
+import {
+  Box,
+  Flex,
+  Text,
+  Transition,
+  WithDivide
+} from '@/components/primitives'
 
 export function ListboxNullOption({
   icon,
@@ -47,7 +53,7 @@ export function ListboxNullOption({
                         flexShrink="0"
                         p={hasBgColor ? 'sm' : undefined}
                         pr={!hasBgColor ? 'sm' : undefined}
-                        rounded="md"
+                        r="md"
                       >
                         {hasBgColor ? (
                           <Text asChild color="muted">
diff --git a/packages/ui/src/components/inputs/ListboxInput/components/ListboxOption.tsx b/packages/ui/src/components/inputs/ListboxInput/components/ListboxOption.tsx
index e6b81e08f..0995a395f 100644
--- a/packages/ui/src/components/inputs/ListboxInput/components/ListboxOption.tsx
+++ b/packages/ui/src/components/inputs/ListboxInput/components/ListboxOption.tsx
@@ -91,7 +91,7 @@ export function ListboxOption({
                             flexShrink="0"
                             p={convertedColor !== undefined ? 'sm' : undefined}
                             pr={convertedColor === undefined ? 'sm' : undefined}
-                            rounded="md"
+                            r="md"
                             style={
                               convertedColor !== undefined
                                 ? {
@@ -136,7 +136,7 @@ export function ListboxOption({
                               display="block"
                               flexShrink="0"
                               height="1rem"
-                              rounded="full"
+                              r="full"
                               style={{ backgroundColor: convertedColor }}
                               width="1rem"
                             />
diff --git a/packages/ui/src/components/inputs/ListboxInput/components/ListboxOptions.tsx b/packages/ui/src/components/inputs/ListboxInput/components/ListboxOptions.tsx
index b951283c3..fef3caa34 100644
--- a/packages/ui/src/components/inputs/ListboxInput/components/ListboxOptions.tsx
+++ b/packages/ui/src/components/inputs/ListboxInput/components/ListboxOptions.tsx
@@ -24,7 +24,7 @@ export function ListboxOptions({
         className={styles.options}
         overflowY="auto"
         position={!portal ? 'absolute' : undefined}
-        rounded="md"
+        r="md"
         style={{
           // @ts-expect-error - headlessui CSS variable
           '--anchor-gap': '12px',
diff --git a/packages/ui/src/components/inputs/QRCodeScanner/index.tsx b/packages/ui/src/components/inputs/QRCodeScanner/index.tsx
index 61233a517..67cc4c03c 100644
--- a/packages/ui/src/components/inputs/QRCodeScanner/index.tsx
+++ b/packages/ui/src/components/inputs/QRCodeScanner/index.tsx
@@ -51,7 +51,7 @@ export function QRCodeScanner({
         height="100%"
         overflow="hidden"
         position="relative"
-        rounded="lg"
+        r="lg"
         style={{ aspectRatio: '1 / 1' }}
         width="100%"
       >
diff --git a/packages/ui/src/components/inputs/RRuleInput/components/SelectableFormWrapper.tsx b/packages/ui/src/components/inputs/RRuleInput/components/SelectableFormWrapper.tsx
index b9d71d8b2..8e0c315fb 100644
--- a/packages/ui/src/components/inputs/RRuleInput/components/SelectableFormWrapper.tsx
+++ b/packages/ui/src/components/inputs/RRuleInput/components/SelectableFormWrapper.tsx
@@ -25,7 +25,7 @@ export function SelectableFormWrapper({
         }
         borderWidth="2px"
         p="md"
-        rounded="md"
+        r="md"
         style={{
           opacity: selected ? 1 : 0.5
         }}
diff --git a/packages/ui/src/components/inputs/SearchInput/SearchInput.stories.tsx b/packages/ui/src/components/inputs/SearchInput/SearchInput.stories.tsx
index e41a9c601..23a4471ce 100644
--- a/packages/ui/src/components/inputs/SearchInput/SearchInput.stories.tsx
+++ b/packages/ui/src/components/inputs/SearchInput/SearchInput.stories.tsx
@@ -130,7 +130,7 @@ const ProductSuggestionItem = ({ product }: { product: ProductElement }) => {
       bg={{ darkHover: 'bg-800', hover: 'bg-100' }}
       gap="md"
       px="md"
-      rounded="md"
+      r="md"
       style={{
         cursor: 'pointer',
         paddingBottom: '0.75rem',
diff --git a/packages/ui/src/components/inputs/SearchInput/index.tsx b/packages/ui/src/components/inputs/SearchInput/index.tsx
index b3e97e36f..56c419e73 100644
--- a/packages/ui/src/components/inputs/SearchInput/index.tsx
+++ b/packages/ui/src/components/inputs/SearchInput/index.tsx
@@ -9,13 +9,7 @@ import { useDivSize } from '@lifeforge/shared'
 
 import { Card } from '@/components/layout'
 import { Icon } from '@/components/primitives'
-import {
-  Box,
-  Flex,
-  type FlexProps,
-  Text,
-  Transition
-} from '@/components/primitives'
+import { Box, Flex, type FlexProps, Transition } from '@/components/primitives'
 
 import { Button } from '../Button'
 import { Placeholder } from '../shared/components/Placeholder'
@@ -203,7 +197,7 @@ export function SearchInput({
         className={clsx(styles.searchWrapper, className)}
         p="md"
         position="relative"
-        rounded="lg"
+        r="lg"
         style={
           disabled
             ? {
@@ -221,11 +215,7 @@ export function SearchInput({
         }}
         {...props}
       >
-        <Box asChild flexShrink="0">
-          <Text asChild color="muted">
-            <Icon icon={icon} />
-          </Text>
-        </Box>
+        <Icon color="muted" icon={icon} />
         <Placeholder>
           <input
             autoComplete="one-time-code"
diff --git a/packages/ui/src/components/inputs/SliderInput/components/SliderTicks.tsx b/packages/ui/src/components/inputs/SliderInput/components/SliderTicks.tsx
index 6b36f4b6a..c76b1e879 100644
--- a/packages/ui/src/components/inputs/SliderInput/components/SliderTicks.tsx
+++ b/packages/ui/src/components/inputs/SliderInput/components/SliderTicks.tsx
@@ -16,7 +16,7 @@ export function SliderTicks({
           key={`title-${label}-${index}`}
           bg={{ base: 'bg-300', dark: 'bg-700' }}
           position="relative"
-          rounded="full"
+          r="full"
           style={{ height: '0.5rem', width: '0.125rem' }}
         >
           <Text
diff --git a/packages/ui/src/components/inputs/Switch/index.tsx b/packages/ui/src/components/inputs/Switch/index.tsx
index 49c0fa331..0166b55b4 100644
--- a/packages/ui/src/components/inputs/Switch/index.tsx
+++ b/packages/ui/src/components/inputs/Switch/index.tsx
@@ -3,7 +3,6 @@ import { Switch as HeadlessSwitch } from '@headlessui/react'
 import { usePersonalization } from '@lifeforge/shared'
 
 import { Box, Flex, Transition } from '@/components/primitives'
-
 import { COLORS } from '@/system'
 
 interface SwitchProps {
@@ -48,7 +47,7 @@ export function Switch({ value, onChange, disabled }: SwitchProps) {
         height="1.5em"
         justify="center"
         position="relative"
-        rounded="full"
+        r="full"
         style={disabled ? { cursor: 'not-allowed', opacity: 0.5 } : undefined}
         width="3em"
       >
@@ -61,7 +60,7 @@ export function Switch({ value, onChange, disabled }: SwitchProps) {
               as="span"
               display="inline-block"
               height="1em"
-              rounded="full"
+              r="full"
               style={{
                 transform: value
                   ? 'translateX(calc(100% - var(--spacing)))'
diff --git a/packages/ui/src/components/inputs/TextAreaInput/index.tsx b/packages/ui/src/components/inputs/TextAreaInput/index.tsx
index 227f0d1f8..ae0a4c9ac 100644
--- a/packages/ui/src/components/inputs/TextAreaInput/index.tsx
+++ b/packages/ui/src/components/inputs/TextAreaInput/index.tsx
@@ -1,7 +1,6 @@
 import { useEffect, useRef } from 'react'
 
 import { Box, Flex, Text } from '@/components/primitives'
-
 import { vars } from '@/system'
 
 import { InputIcon } from '../shared/components/InputIcon'
@@ -97,7 +96,7 @@ export function TextAreaInput({
             minHeight="4rem"
             p={variant === 'classic' ? 'xl' : 'none'}
             pl={variant === 'classic' ? 'none' : undefined}
-            rounded="lg"
+            r="lg"
             style={
               variant === 'classic'
                 ? { paddingBottom: vars.radii.md }
diff --git a/packages/ui/src/components/inputs/shared/components/InputActionButton.tsx b/packages/ui/src/components/inputs/shared/components/InputActionButton.tsx
index e7a8bbcf8..ce868810f 100644
--- a/packages/ui/src/components/inputs/shared/components/InputActionButton.tsx
+++ b/packages/ui/src/components/inputs/shared/components/InputActionButton.tsx
@@ -43,7 +43,7 @@ export function InputActionButton({
         p="sm"
         position="absolute"
         right={hasError ? (variant === 'classic' ? '3em' : '2.5em') : '0'}
-        rounded="lg"
+        r="lg"
         style={{
           // the `mr` props cannot be used since the 0.75rem value is required to be exact for the plain variant
           marginRight: variant === 'classic' ? '1em' : '0.75em',
diff --git a/packages/ui/src/components/layout/Card/Card.stories.tsx b/packages/ui/src/components/layout/Card/Card.stories.tsx
index 69a114760..77ce7fa90 100644
--- a/packages/ui/src/components/layout/Card/Card.stories.tsx
+++ b/packages/ui/src/components/layout/Card/Card.stories.tsx
@@ -97,7 +97,7 @@ export const MultipleItems: Story = {
     children: <></>
   },
   render: () => (
-    <Grid templateCols={2} gap="md" p="xl">
+    <Grid gap="md" p="xl" templateCols={2}>
       <Card>
         <Box p="md">Item 1</Box>
       </Card>
diff --git a/packages/ui/src/components/layout/Card/index.tsx b/packages/ui/src/components/layout/Card/index.tsx
index fce6620af..bfd13f838 100644
--- a/packages/ui/src/components/layout/Card/index.tsx
+++ b/packages/ui/src/components/layout/Card/index.tsx
@@ -27,7 +27,7 @@ export function Card<T extends React.ElementType = 'div'>({
       direction="column"
       p="md"
       position="relative"
-      rounded="lg"
+      r="lg"
       style={{
         ...(isInteractive ? { cursor: 'pointer', transition: 'all 0.2s' } : {}),
         ...style
diff --git a/packages/ui/src/components/layout/ModuleHeader/index.tsx b/packages/ui/src/components/layout/ModuleHeader/index.tsx
index c18414f65..ced674e3a 100644
--- a/packages/ui/src/components/layout/ModuleHeader/index.tsx
+++ b/packages/ui/src/components/layout/ModuleHeader/index.tsx
@@ -5,7 +5,6 @@ import { useMainSidebarState, useModuleHeaderState } from '@lifeforge/shared'
 
 import { Button } from '@/components/inputs'
 import { Box, Flex, Icon, Text, Transition } from '@/components/primitives'
-
 import { COLORS, withOpacity } from '@/system'
 
 import { ContextMenu } from '../../overlays/ContextMenu'
@@ -81,7 +80,7 @@ export function ModuleHeader({
               sm: '4em'
             }}
             justify="center"
-            rounded="lg"
+            r="lg"
             style={{
               backgroundColor: withOpacity(COLORS['custom-500'], 0.2)
             }}
@@ -159,7 +158,7 @@ export function ModuleHeader({
             display={{ base: 'none', md: 'block' }}
             overflow="hidden"
             position="relative"
-            rounded="md"
+            r="md"
             style={{ zIndex: 50 }}
             width="24em"
           >
@@ -172,7 +171,7 @@ export function ModuleHeader({
                     darkHover: 'bg-900'
                   }}
                   p="md"
-                  rounded="lg"
+                  r="lg"
                 >
                   <Text
                     asChild
diff --git a/packages/ui/src/components/layout/ModuleWrapper/ModuleWrapper.stories.tsx b/packages/ui/src/components/layout/ModuleWrapper/ModuleWrapper.stories.tsx
index e79d9254a..fd8de290a 100644
--- a/packages/ui/src/components/layout/ModuleWrapper/ModuleWrapper.stories.tsx
+++ b/packages/ui/src/components/layout/ModuleWrapper/ModuleWrapper.stories.tsx
@@ -20,7 +20,7 @@ type Story = StoryObj<typeof meta>
 
 function StatCard({ label, value }: { label: string; value: string }) {
   return (
-    <Box shadow bg={{ base: 'bg-50', dark: 'bg-900' }} p="lg" rounded="lg">
+    <Box shadow bg={{ base: 'bg-50', dark: 'bg-900' }} p="lg" r="lg">
       <Text color={{ base: 'bg-500', dark: 'bg-400' }} size="sm">
         {label}
       </Text>
@@ -33,7 +33,7 @@ function StatCard({ label, value }: { label: string; value: string }) {
 
 function ContentCard({ body, title }: { title: string; body: string }) {
   return (
-    <Box shadow bg={{ base: 'bg-50', dark: 'bg-900' }} p="lg" rounded="lg">
+    <Box shadow bg={{ base: 'bg-50', dark: 'bg-900' }} p="lg" r="lg">
       <Text as="h3" mb="xs" size="lg" weight="semibold">
         {title}
       </Text>
diff --git a/packages/ui/src/components/navigation/Tabs/index.tsx b/packages/ui/src/components/navigation/Tabs/index.tsx
index 9b6e53451..238cbc1a7 100644
--- a/packages/ui/src/components/navigation/Tabs/index.tsx
+++ b/packages/ui/src/components/navigation/Tabs/index.tsx
@@ -59,7 +59,7 @@ export function Tabs<
               <Text
                 asChild
                 color={
-                  currentTab !== id
+                  currentTab === id
                     ? { base: 'custom-500' }
                     : {
                         base: 'bg-400',
diff --git a/packages/ui/src/components/navigation/sidebar/SidebarItem/components/SidebarActionButton.tsx b/packages/ui/src/components/navigation/sidebar/SidebarItem/components/SidebarActionButton.tsx
index 885ef93e6..3f997164d 100644
--- a/packages/ui/src/components/navigation/sidebar/SidebarItem/components/SidebarActionButton.tsx
+++ b/packages/ui/src/components/navigation/sidebar/SidebarItem/components/SidebarActionButton.tsx
@@ -16,7 +16,7 @@ export function SidebarActionButton({
 
   return (
     <Transition duration={200} property="opacity">
-      <Box asChild p="sm" rounded="md" zIndex="9999">
+      <Box asChild p="sm" r="md" zIndex="9999">
         <button
           className={styles.actionButton}
           onClick={e => {
diff --git a/packages/ui/src/components/navigation/sidebar/SidebarItem/components/SidebarCancelButton.tsx b/packages/ui/src/components/navigation/sidebar/SidebarItem/components/SidebarCancelButton.tsx
index d4f2f17e9..b28021e01 100644
--- a/packages/ui/src/components/navigation/sidebar/SidebarItem/components/SidebarCancelButton.tsx
+++ b/packages/ui/src/components/navigation/sidebar/SidebarItem/components/SidebarCancelButton.tsx
@@ -14,7 +14,7 @@ export function SidebarCancelButton({ onClick }: { onClick: () => void }) {
         darkHover: 'bg-700'
       }}
       p="sm"
-      rounded="md"
+      r="md"
       style={{
         transition: 'all 0.2s'
       }}
diff --git a/packages/ui/src/components/navigation/sidebar/SidebarItem/components/SidebarItemIcon.tsx b/packages/ui/src/components/navigation/sidebar/SidebarItem/components/SidebarItemIcon.tsx
index 405058203..3754b1809 100644
--- a/packages/ui/src/components/navigation/sidebar/SidebarItem/components/SidebarItemIcon.tsx
+++ b/packages/ui/src/components/navigation/sidebar/SidebarItem/components/SidebarItemIcon.tsx
@@ -41,7 +41,7 @@ export function SidebarItemIcon({
         borderWidth={active ? '1px' : '0px'}
         flexShrink="0"
         overflow="hidden"
-        rounded="sm"
+        r="sm"
       >
         <img
           className={className}
diff --git a/packages/ui/src/components/navigation/sidebar/SidebarItem/components/SidebarItemSubsection.tsx b/packages/ui/src/components/navigation/sidebar/SidebarItem/components/SidebarItemSubsection.tsx
index 435af543e..cf083aa17 100644
--- a/packages/ui/src/components/navigation/sidebar/SidebarItem/components/SidebarItemSubsection.tsx
+++ b/packages/ui/src/components/navigation/sidebar/SidebarItem/components/SidebarItemSubsection.tsx
@@ -55,7 +55,7 @@ export function SidebarItemSubsection({
               styles.subsectionListBg
           )}
           direction="column"
-          rounded="lg"
+          r="lg"
           style={{ gap: '0.125rem' }}
           width="100%"
         >
diff --git a/packages/ui/src/components/navigation/sidebar/SidebarItem/components/SidebarItemSubsectionExpandIcon.tsx b/packages/ui/src/components/navigation/sidebar/SidebarItem/components/SidebarItemSubsectionExpandIcon.tsx
index f9ee37305..6f7d1ae5f 100644
--- a/packages/ui/src/components/navigation/sidebar/SidebarItem/components/SidebarItemSubsectionExpandIcon.tsx
+++ b/packages/ui/src/components/navigation/sidebar/SidebarItem/components/SidebarItemSubsectionExpandIcon.tsx
@@ -16,7 +16,7 @@ export function SidebarItemSubsectionExpandIcon({
         darkHover: 'bg-700'
       }}
       p="sm"
-      rounded="md"
+      r="md"
       style={{
         transition: 'all 0.2s'
       }}
diff --git a/packages/ui/src/components/navigation/sidebar/SidebarItem/components/SidebarItemWrapper.tsx b/packages/ui/src/components/navigation/sidebar/SidebarItem/components/SidebarItemWrapper.tsx
index 553db4797..bf4b69248 100644
--- a/packages/ui/src/components/navigation/sidebar/SidebarItem/components/SidebarItemWrapper.tsx
+++ b/packages/ui/src/components/navigation/sidebar/SidebarItem/components/SidebarItemWrapper.tsx
@@ -40,7 +40,7 @@ export function SidebarItemWrapper({
           justify="between"
           pl="md"
           position="relative"
-          rounded="lg"
+          r="lg"
           style={{ gap: '0.75rem', height: '3.5rem', paddingRight: '0.75rem' }}
           width="100%"
         >
diff --git a/packages/ui/src/components/navigation/sidebar/SidebarItem/components/SidebarSubsectionItemLink.tsx b/packages/ui/src/components/navigation/sidebar/SidebarItem/components/SidebarSubsectionItemLink.tsx
index 8a7df3a39..01e7e0d56 100644
--- a/packages/ui/src/components/navigation/sidebar/SidebarItem/components/SidebarSubsectionItemLink.tsx
+++ b/packages/ui/src/components/navigation/sidebar/SidebarItem/components/SidebarSubsectionItemLink.tsx
@@ -46,7 +46,7 @@ export function SidebarSubsectionItemLink({
         align="center"
         ml="md"
         mr="md"
-        rounded="lg"
+        r="lg"
         style={{ gap: '0.75rem', height: '3.5rem' }}
         width="100%"
       >
diff --git a/packages/ui/src/components/navigation/sidebar/SidebarItem/components/SidebarSubsectionItemWithOnClick.tsx b/packages/ui/src/components/navigation/sidebar/SidebarItem/components/SidebarSubsectionItemWithOnClick.tsx
index 2def5740d..f59c81cea 100644
--- a/packages/ui/src/components/navigation/sidebar/SidebarItem/components/SidebarSubsectionItemWithOnClick.tsx
+++ b/packages/ui/src/components/navigation/sidebar/SidebarItem/components/SidebarSubsectionItemWithOnClick.tsx
@@ -51,7 +51,7 @@ export function SidebarSubsectionItemWithOnClick({
         height="3.5rem"
         ml="md"
         mr="md"
-        rounded="lg"
+        r="lg"
         style={{ paddingLeft: '3rem' }}
         width="100%"
       >
diff --git a/packages/ui/src/components/navigation/sidebar/SidebarItem/index.tsx b/packages/ui/src/components/navigation/sidebar/SidebarItem/index.tsx
index 569107a55..0b5b195ba 100644
--- a/packages/ui/src/components/navigation/sidebar/SidebarItem/index.tsx
+++ b/packages/ui/src/components/navigation/sidebar/SidebarItem/index.tsx
@@ -120,7 +120,7 @@ export function SidebarItem({
             display="block"
             flexShrink="0"
             height="2rem"
-            rounded="full"
+            r="full"
             style={{ backgroundColor: sideStripColor }}
             width="0.25rem"
           />
diff --git a/packages/ui/src/components/navigation/sidebar/SidebarWrapper/index.tsx b/packages/ui/src/components/navigation/sidebar/SidebarWrapper/index.tsx
index a43884d94..bee975ed6 100644
--- a/packages/ui/src/components/navigation/sidebar/SidebarWrapper/index.tsx
+++ b/packages/ui/src/components/navigation/sidebar/SidebarWrapper/index.tsx
@@ -20,7 +20,7 @@ export function SidebarWrapper({ children }: { children: React.ReactNode }) {
       minWidth={{ base: '0', xl: '24rem' }}
       position={{ base: 'absolute', xl: 'static' }}
       py="md"
-      rounded="lg"
+      r="lg"
       top="0"
       width={{ base: '100%', xl: '25%' }}
       zIndex={isSidebarOpen ? '9990' : '0'}
diff --git a/packages/ui/src/components/overlays/ContextMenu/ContextMenu.stories.tsx b/packages/ui/src/components/overlays/ContextMenu/ContextMenu.stories.tsx
index 8c8f2cc55..f94a739b8 100644
--- a/packages/ui/src/components/overlays/ContextMenu/ContextMenu.stories.tsx
+++ b/packages/ui/src/components/overlays/ContextMenu/ContextMenu.stories.tsx
@@ -30,14 +30,14 @@ export const Default: Story = {
         bg={{ base: 'bg-50', dark: 'bg-900' }}
         height="100%"
         p="md"
-        rounded="lg"
+        r="lg"
         width="100%"
       >
         <Flex align="center" justify="between">
           <Flex align="center" style={{ gap: '0.75rem' }}>
             <Box
               p="sm"
-              rounded="md"
+              r="md"
               style={{
                 backgroundColor:
                   'color-mix(in srgb, var(--color-custom-500) 30%, transparent)'
diff --git a/packages/ui/src/components/overlays/ContextMenu/components/ContextMenuGroup.tsx b/packages/ui/src/components/overlays/ContextMenu/components/ContextMenuGroup.tsx
index b252656f2..f832c0a86 100644
--- a/packages/ui/src/components/overlays/ContextMenu/components/ContextMenuGroup.tsx
+++ b/packages/ui/src/components/overlays/ContextMenu/components/ContextMenuGroup.tsx
@@ -41,7 +41,7 @@ export function ContextMenuGroup({
           className={styles.groupContainer}
           direction="column"
           overflow="hidden"
-          rounded="lg"
+          r="lg"
         >
           {children}
         </Flex>
diff --git a/packages/ui/src/components/overlays/ContextMenu/index.tsx b/packages/ui/src/components/overlays/ContextMenu/index.tsx
index 14fee2f56..475c94c32 100644
--- a/packages/ui/src/components/overlays/ContextMenu/index.tsx
+++ b/packages/ui/src/components/overlays/ContextMenu/index.tsx
@@ -81,7 +81,7 @@ export function ContextMenu({
             className={classNames?.menu}
             minWidth="14rem"
             overflow="hidden"
-            rounded="lg"
+            r="lg"
             style={{
               width: 'var(--radix-popper-anchor-width)',
               ...styles?.menu
diff --git a/packages/ui/src/components/overlays/modals/core/components/ModalHeader.stories.tsx b/packages/ui/src/components/overlays/modals/core/components/ModalHeader.stories.tsx
index 19b4b88ea..d638ec5b0 100644
--- a/packages/ui/src/components/overlays/modals/core/components/ModalHeader.stories.tsx
+++ b/packages/ui/src/components/overlays/modals/core/components/ModalHeader.stories.tsx
@@ -32,7 +32,7 @@ function Shell({ children }: { children: React.ReactNode }) {
   return (
     <Box
       bg={{ base: 'bg-50', dark: 'bg-900' }}
-      rounded="xl"
+      r="xl"
       style={{ maxWidth: '32rem', padding: '1.5rem' }}
       width="100%"
     >
diff --git a/packages/ui/src/components/overlays/modals/core/components/ModalHeader.tsx b/packages/ui/src/components/overlays/modals/core/components/ModalHeader.tsx
index 7266ac0b1..2f61a5bfc 100644
--- a/packages/ui/src/components/overlays/modals/core/components/ModalHeader.tsx
+++ b/packages/ui/src/components/overlays/modals/core/components/ModalHeader.tsx
@@ -3,8 +3,7 @@ import _ from 'lodash'
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import { Icon } from '@/components/primitives'
-import { Box, Flex, Text } from '@/components/primitives'
+import { Box, Flex, Icon, Text } from '@/components/primitives'
 
 import { Button } from '../../../../inputs/Button'
 
@@ -51,13 +50,7 @@ function _ModalHeader({
           style={{ gap: '0.75rem' }}
           width="100%"
         >
-          <Box
-            asChild
-            flexShrink="0"
-            style={{ height: '1.5rem', width: '1.5rem' }}
-          >
-            <Icon icon={innerIcon} />
-          </Box>
+          <Icon icon={innerIcon} size="1.5em" />
           {typeof innerTitle === 'string' ? (
             <>
               <Text truncate as="span" style={{ minWidth: 0 }}>
diff --git a/packages/ui/src/components/overlays/modals/core/components/ModalWrapper.tsx b/packages/ui/src/components/overlays/modals/core/components/ModalWrapper.tsx
index 1618797c2..6a2c9868d 100644
--- a/packages/ui/src/components/overlays/modals/core/components/ModalWrapper.tsx
+++ b/packages/ui/src/components/overlays/modals/core/components/ModalWrapper.tsx
@@ -72,7 +72,7 @@ export function ModalWrapper({
             overflowY="auto"
             p="lg"
             position="absolute"
-            rounded="xl"
+            r="xl"
             style={{
               transform: `translate(-50%, -50%) scale(${!isOpen ? '0.9' : isTopmost ? '1' : '0.95'})`,
               boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
diff --git a/packages/ui/src/components/overlays/modals/features/ConfirmationModal/index.tsx b/packages/ui/src/components/overlays/modals/features/ConfirmationModal/index.tsx
index f33d2817e..92e3b2bc0 100644
--- a/packages/ui/src/components/overlays/modals/features/ConfirmationModal/index.tsx
+++ b/packages/ui/src/components/overlays/modals/features/ConfirmationModal/index.tsx
@@ -76,18 +76,13 @@ export function ConfirmationModal({
       )}
       {renderChildren?.(onClose) || (
         <Flex
+          direction={{ base: 'column-reverse', md: 'row' }}
+          gap="sm"
           justify="around"
           mt="xl"
-          style={{ flexDirection: 'column-reverse', gap: '0.5rem' }}
           width="100%"
-          wrap="wrap"
         >
-          <Button
-            icon=""
-            style={{ width: '100%' }}
-            variant="secondary"
-            onClick={onClose}
-          >
+          <Button flex="1" icon="" variant="secondary" onClick={onClose}>
             Cancel
           </Button>
           {typeof confirmationButton === 'string' ? (
@@ -97,6 +92,7 @@ export function ConfirmationModal({
                 !!confirmationPrompt &&
                 confirmationPrompt !== confirmationTextState
               }
+              flex="1"
               icon={
                 confirmationButton === 'delete'
                   ? 'tabler:trash'
@@ -116,8 +112,9 @@ export function ConfirmationModal({
                 !!confirmationPrompt &&
                 confirmationPrompt !== confirmationTextState
               }
+              flex="1"
               loading={isLoading}
-              style={{ width: '100%', ...confirmationButton.style }}
+              style={{ ...confirmationButton.style }}
               onClick={onClick}
             />
           )}
diff --git a/packages/ui/src/components/primitives/Bordered/Bordered.css.ts b/packages/ui/src/components/primitives/Bordered/Bordered.css.ts
index 3aea59729..782062870 100644
--- a/packages/ui/src/components/primitives/Bordered/Bordered.css.ts
+++ b/packages/ui/src/components/primitives/Bordered/Bordered.css.ts
@@ -4,9 +4,9 @@ import { createSprinkles, defineProperties } from '@vanilla-extract/sprinkles'
 import {
   RESPONSIVE_CONDITIONS,
   tokenizedLayoutProperties,
+  tokenizedRoundedProperties,
   tokenizedSpacingProperties,
-  tokenizedThemeColorProperties,
-  vars
+  tokenizedThemeColorProperties
 } from '@/system'
 
 /**
@@ -23,8 +23,7 @@ const borderedProperties = defineProperties({
   conditions: RESPONSIVE_CONDITIONS,
   defaultCondition: 'base',
   properties: {
-    display: ['block', 'inline', 'inline-block', 'none', 'contents'],
-    borderRadius: vars.radii
+    display: ['block', 'inline', 'inline-block', 'none', 'contents']
   }
 })
 
@@ -41,7 +40,8 @@ export const borderedSprinkles = createSprinkles(
   borderedProperties,
   tokenizedLayoutProperties,
   tokenizedSpacingProperties,
-  tokenizedThemeColorProperties
+  tokenizedThemeColorProperties,
+  tokenizedRoundedProperties
 )
 
 export type BorderedSprinkles = Parameters<typeof borderedSprinkles>[0]
diff --git a/packages/ui/src/components/primitives/Bordered/Bordered.stories.tsx b/packages/ui/src/components/primitives/Bordered/Bordered.stories.tsx
index e125a2c91..5153adaba 100644
--- a/packages/ui/src/components/primitives/Bordered/Bordered.stories.tsx
+++ b/packages/ui/src/components/primitives/Bordered/Bordered.stories.tsx
@@ -58,7 +58,7 @@ export const Default: Story = {
   },
   render: args => (
     <Flex align="center" height="100%" justify="center" p="3xl">
-      <Bordered {...args} p="lg" rounded="lg" width="20rem">
+      <Bordered {...args} p="lg" r="lg" width="20rem">
         <Text as="p" color={{ base: 'bg-600', dark: 'bg-400' }}>
           A simple bordered container using the default neutral border color
           that adapts between light and dark themes automatically.
@@ -76,18 +76,18 @@ export const BorderColor: Story = {
   args: {},
   render: () => (
     <Grid gap="lg" p="3xl" templateCols={3}>
-      <Bordered p="md" rounded="lg">
+      <Bordered p="md" r="lg">
         <DemoBox label="Default (bg-200 / bg-700)" />
       </Bordered>
 
-      <Bordered borderColor="custom-500" p="md" rounded="lg">
+      <Bordered borderColor="custom-500" p="md" r="lg">
         <DemoBox label="custom-500 (flat)" />
       </Bordered>
 
       <Bordered
         borderColor={{ base: 'custom-300', dark: 'custom-600' }}
         p="md"
-        rounded="lg"
+        r="lg"
       >
         <DemoBox label="custom-300 / custom-600 (adaptive)" />
       </Bordered>
@@ -100,16 +100,12 @@ export const BorderColor: Story = {
           hover: 'custom-500'
         }}
         p="md"
-        rounded="lg"
+        r="lg"
       >
         <DemoBox label="hover + dark + darkHover conditions" />
       </Bordered>
 
-      <Bordered
-        borderColor={{ base: 'bg-200', dark: 'bg-800' }}
-        p="md"
-        rounded="lg"
-      >
+      <Bordered borderColor={{ base: 'bg-200', dark: 'bg-800' }} p="md" r="lg">
         <DemoBox label="bg-200 / bg-800 (subtle)" />
       </Bordered>
 
@@ -117,7 +113,7 @@ export const BorderColor: Story = {
         borderColor={{ base: 'custom-500', dark: 'custom-400' }}
         borderWidth="2px"
         p="md"
-        rounded="lg"
+        r="lg"
       >
         <DemoBox label="2px accent border" />
       </Bordered>
@@ -134,7 +130,7 @@ export const BorderWidth: Story = {
   render: () => (
     <ScrollableStory>
       {(['1px', '2px', '4px', '8px'] as const).map(w => (
-        <Bordered key={w} borderWidth={w} p="md" rounded="lg">
+        <Bordered key={w} borderWidth={w} p="md" r="lg">
           <DemoBox label={`borderWidth="${w}"`} />
         </Bordered>
       ))}
@@ -150,7 +146,7 @@ export const BorderStyle: Story = {
   render: () => (
     <ScrollableStory>
       {(['solid', 'dashed', 'dotted', 'double', 'none'] as const).map(s => (
-        <Bordered key={s} borderStyle={s} borderWidth="2px" p="md" rounded="lg">
+        <Bordered key={s} borderStyle={s} borderWidth="2px" p="md" r="lg">
           <DemoBox label={`borderStyle="${s}"`} />
         </Bordered>
       ))}
@@ -196,8 +192,8 @@ export const BorderRadius: Story = {
       <Grid gap="lg" templateCols="repeat(auto-fill, minmax(200px, 1fr)">
         {(['none', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', 'full'] as const).map(
           r => (
-            <Bordered key={r} p="md" rounded={r}>
-              <DemoBox label={`rounded="${r}"`} />
+            <Bordered key={r} p="md" r={r}>
+              <DemoBox label={`r="${r}"`} />
             </Bordered>
           )
         )}
@@ -214,12 +210,7 @@ export const WithBackground: Story = {
   args: {},
   render: () => (
     <Grid gap="lg" p="3xl" templateCols={2}>
-      <Bordered
-        shadow
-        bg={{ base: 'bg-50', dark: 'bg-900' }}
-        p="lg"
-        rounded="lg"
-      >
+      <Bordered shadow bg={{ base: 'bg-50', dark: 'bg-900' }} p="lg" r="lg">
         <Text as="p" color={{ base: 'bg-600', dark: 'bg-400' }}>
           bg + border + shadow - a complete card panel.
         </Text>
@@ -230,7 +221,7 @@ export const WithBackground: Story = {
         borderColor="custom-500"
         borderWidth="2px"
         p="lg"
-        rounded="lg"
+        r="lg"
       >
         <Text as="p" color={{ base: 'custom-700', dark: 'custom-300' }}>
           Accent-tinted background with matching border.
@@ -255,7 +246,7 @@ export const AccentBar: Story = {
         borderWidth="4px"
         px="lg"
         py="md"
-        rounded="sm"
+        r="sm"
       >
         <Text weight="semibold">Info callout</Text>
         <Text as="p" color={{ base: 'bg-500', dark: 'bg-400' }} mt="xs">
@@ -306,7 +297,7 @@ export const AsChild: Story = {
         borderColor="custom-500"
         borderWidth="2px"
         p="lg"
-        rounded="lg"
+        r="lg"
       >
         <Flex
           align="center"
diff --git a/packages/ui/src/components/primitives/Bordered/index.tsx b/packages/ui/src/components/primitives/Bordered/index.tsx
index 4f0fb7264..ab0be1d96 100644
--- a/packages/ui/src/components/primitives/Bordered/index.tsx
+++ b/packages/ui/src/components/primitives/Bordered/index.tsx
@@ -18,7 +18,7 @@ import {
 } from '@/system'
 import { normalizeGridSpan } from '@/system/grid-utils'
 import type { ThemeConditionProp } from '@/system/themes'
-import { type RadiusToken, shadowClass } from '@/system/vars.css'
+import { shadowClass } from '@/system/vars.css'
 
 import { Slot } from '../Slot'
 import {
@@ -44,7 +44,6 @@ interface BorderedOwnProps<T extends ElementType = 'div'>
   borderStyle?: BorderStyleValue
   borderSide?: BorderSide
   borderWidth?: string
-  rounded?: ResponsiveProp<RadiusToken>
   shadow?: boolean
   className?: string
   style?: CSSProperties
@@ -101,7 +100,11 @@ export function Bordered<T extends ElementType = 'div'>({
   // Container props
   bg,
   color,
-  rounded,
+  r,
+  rtl,
+  rtr,
+  rbl,
+  rbr,
   shadow,
   // Layout props (CSS string - responsive)
   bottom,
@@ -153,11 +156,8 @@ export function Bordered<T extends ElementType = 'div'>({
   const styles = resolveStyles({
     sprinkles: borderedSprinkles,
     sprinkleProps: {
-      backgroundColor: bg as BorderedSprinkles['backgroundColor'],
-      borderColor: borderColor as BorderedSprinkles['borderColor'],
-      borderRadius: normalizeResponsiveProp(
-        rounded
-      ) as BorderedSprinkles['borderRadius'],
+      backgroundColor: bg,
+      borderColor: borderColor,
       color: color as BorderedSprinkles['color'],
       display: normalizeResponsiveProp(display) as BorderedSprinkles['display'],
       ...resolveCommonSprinkleProps(
@@ -167,7 +167,8 @@ export function Bordered<T extends ElementType = 'div'>({
           overflow,
           overflowX,
           overflowY
-        }
+        },
+        { r, rtl, rtr, rbl, rbr }
       )
     },
     arbitraryProps: {
diff --git a/packages/ui/src/components/primitives/Box/Box.css.ts b/packages/ui/src/components/primitives/Box/Box.css.ts
index e5079fca2..6560fb64c 100644
--- a/packages/ui/src/components/primitives/Box/Box.css.ts
+++ b/packages/ui/src/components/primitives/Box/Box.css.ts
@@ -4,9 +4,9 @@ import { createSprinkles, defineProperties } from '@vanilla-extract/sprinkles'
 import {
   RESPONSIVE_CONDITIONS,
   tokenizedLayoutProperties,
+  tokenizedRoundedProperties,
   tokenizedSpacingProperties,
-  tokenizedThemeColorProperties,
-  vars
+  tokenizedThemeColorProperties
 } from '@/system'
 
 export const boxBase = recipe({
@@ -19,8 +19,7 @@ const boxProperties = defineProperties({
   conditions: RESPONSIVE_CONDITIONS,
   defaultCondition: 'base',
   properties: {
-    display: ['block', 'inline', 'inline-block', 'none', 'contents'],
-    borderRadius: vars.radii
+    display: ['block', 'inline', 'inline-block', 'none', 'contents']
   }
 })
 
@@ -28,7 +27,8 @@ export const boxSprinkles = createSprinkles(
   boxProperties,
   tokenizedThemeColorProperties,
   tokenizedLayoutProperties,
-  tokenizedSpacingProperties
+  tokenizedSpacingProperties,
+  tokenizedRoundedProperties
 )
 
 export type BoxSprinkles = Parameters<typeof boxSprinkles>[0]
diff --git a/packages/ui/src/components/primitives/Box/Box.stories.tsx b/packages/ui/src/components/primitives/Box/Box.stories.tsx
index b5f693cf5..9b7db0e07 100644
--- a/packages/ui/src/components/primitives/Box/Box.stories.tsx
+++ b/packages/ui/src/components/primitives/Box/Box.stories.tsx
@@ -72,7 +72,7 @@ export const Default: Story = {
       <Box
         {...args}
         bg={{ base: 'bg-50', dark: 'bg-800' }}
-        rounded="lg"
+        r="lg"
         style={{ width: '20rem' }}
       >
         <PlaceholderContent />
@@ -100,7 +100,7 @@ export const PolymorphicElement: Story = {
           as={tag}
           bg={{ base: 'bg-50', dark: 'bg-800' }}
           p="md"
-          rounded="md"
+          r="md"
         >
           <Text as="code" color={{ base: 'bg-500', dark: 'bg-400' }} size="sm">
             as=&quot;{tag}&quot;
@@ -120,11 +120,11 @@ export const BackgroundColor: Story = {
   args: {},
   render: () => (
     <ScrollableStory>
-      <Box bg="bg-50" p="md" rounded="lg">
+      <Box bg="bg-50" p="md" r="lg">
         <PlaceholderContent asCode label="bg='bg-50' (flat)" />
       </Box>
 
-      <Box bg={{ base: 'bg-50', dark: 'bg-800' }} p="md" rounded="lg">
+      <Box bg={{ base: 'bg-50', dark: 'bg-800' }} p="md" r="lg">
         <PlaceholderContent
           asCode
           label="bg={{ base: 'bg-50', dark: 'bg-800' }}"
@@ -139,7 +139,7 @@ export const BackgroundColor: Story = {
           hover: 'bg-200'
         }}
         p="md"
-        rounded="lg"
+        r="lg"
         style={{ cursor: 'pointer', transition: 'background-color 0.2s' }}
       >
         <PlaceholderContent
@@ -148,7 +148,7 @@ export const BackgroundColor: Story = {
         />
       </Box>
 
-      <Box bg={{ base: 'custom-100', dark: 'custom-900' }} p="md" rounded="lg">
+      <Box bg={{ base: 'custom-100', dark: 'custom-900' }} p="md" r="lg">
         <PlaceholderContent
           asCode
           label="bg={{ base: 'custom-100', dark: 'custom-900' }}"
@@ -168,13 +168,8 @@ export const BorderRadius: Story = {
     <ScrollableStory>
       {(['none', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', 'full'] as const).map(
         r => (
-          <Box
-            key={r}
-            bg={{ base: 'bg-50', dark: 'bg-800' }}
-            p="md"
-            rounded={r}
-          >
-            <PlaceholderContent asCode label={`rounded="${r}"`} />
+          <Box key={r} bg={{ base: 'bg-50', dark: 'bg-800' }} p="md" r={r}>
+            <PlaceholderContent asCode label={`r="${r}"`} />
           </Box>
         )
       )}
@@ -190,11 +185,11 @@ export const Shadow: Story = {
   args: {},
   render: () => (
     <ScrollableStory>
-      <Box bg={{ base: 'bg-50', dark: 'bg-800' }} p="lg" rounded="lg">
+      <Box bg={{ base: 'bg-50', dark: 'bg-800' }} p="lg" r="lg">
         <PlaceholderContent label="Without shadow" />
       </Box>
 
-      <Box shadow bg={{ base: 'bg-50', dark: 'bg-800' }} p="lg" rounded="lg">
+      <Box shadow bg={{ base: 'bg-50', dark: 'bg-800' }} p="lg" r="lg">
         <PlaceholderContent label="With shadow" />
       </Box>
     </ScrollableStory>
@@ -216,9 +211,9 @@ export const Spacing: Story = {
             key={token}
             bg={{ base: 'bg-50', dark: 'bg-800' }}
             p={token}
-            rounded="md"
+            r="md"
           >
-            <Box bg={{ base: 'bg-200', dark: 'bg-700' }} p="xs" rounded="sm">
+            <Box bg={{ base: 'bg-200', dark: 'bg-700' }} p="xs" r="sm">
               <PlaceholderContent asCode label={`p="${token}"`} />
             </Box>
           </Box>
@@ -240,7 +235,7 @@ export const Sizing: Story = {
         bg={{ base: 'bg-50', dark: 'bg-800' }}
         height="4rem"
         p="md"
-        rounded="md"
+        r="md"
         width="100%"
       >
         <PlaceholderContent asCode label="width='100%' height='4rem'" />
@@ -252,7 +247,7 @@ export const Sizing: Story = {
         maxWidth="24rem"
         minWidth="8rem"
         p="md"
-        rounded="md"
+        r="md"
         width="50%"
       >
         <PlaceholderContent
@@ -263,7 +258,7 @@ export const Sizing: Story = {
       <Box
         bg={{ base: 'bg-50', dark: 'bg-800' }}
         p="md"
-        rounded="md"
+        r="md"
         width={{ base: '100%', md: '50%', sm: '75%' }}
       >
         <PlaceholderContent
@@ -287,7 +282,7 @@ export const Positioning: Story = {
         bg={{ base: 'bg-50', dark: 'bg-800' }}
         height="100%"
         position="relative"
-        rounded="lg"
+        r="lg"
         width="100%"
       >
         <PlaceholderContent asCode label="position='relative'" />
@@ -297,7 +292,7 @@ export const Positioning: Story = {
           p="xs"
           position="absolute"
           right="0"
-          rounded="md"
+          r="md"
           style={{ margin: '0.5rem' }}
         >
           <PlaceholderContent
@@ -323,7 +318,7 @@ export const Overflow: Story = {
         height="5rem"
         overflow="hidden"
         p="md"
-        rounded="lg"
+        r="lg"
       >
         <PlaceholderContent>
           <code>overflow=&quot;hidden&quot;</code> - this content is clipped
@@ -338,7 +333,7 @@ export const Overflow: Story = {
         height="5rem"
         overflowY="auto"
         p="md"
-        rounded="lg"
+        r="lg"
       >
         <PlaceholderContent>
           <code>overflowY=&quot;auto&quot;</code> - scrollable when content
@@ -368,7 +363,7 @@ export const Display: Story = {
   render: () => (
     <ScrollableStory>
       {(['block', 'inline', 'inline-block'] as const).map(d => (
-        <Box key={d} bg={{ base: 'bg-50', dark: 'bg-900' }} p="md" rounded="lg">
+        <Box key={d} bg={{ base: 'bg-50', dark: 'bg-900' }} p="md" r="lg">
           <Text
             as="div"
             color={{ base: 'bg-500', dark: 'bg-400' }}
@@ -383,7 +378,7 @@ export const Display: Story = {
             minHeight="3em"
             minWidth="3em"
             p="sm"
-            rounded="sm"
+            r="sm"
           >
             <Text size="sm">A</Text>
           </Box>
@@ -393,7 +388,7 @@ export const Display: Story = {
             minHeight="3em"
             minWidth="3em"
             p="sm"
-            rounded="sm"
+            r="sm"
           >
             <Text size="sm">B</Text>
           </Box>
@@ -415,16 +410,16 @@ export const GridChildSpanning: Story = {
         bg={{ base: 'custom-100', dark: 'custom-900' }}
         gridColumnSpan={2}
         p="md"
-        rounded="md"
+        r="md"
       >
         <PlaceholderContent asCode label="gridColumn='span 2 / span 2'" />
       </Box>
 
-      <Box bg={{ base: 'bg-50', dark: 'bg-800' }} p="md" rounded="md">
+      <Box bg={{ base: 'bg-50', dark: 'bg-800' }} p="md" r="md">
         <PlaceholderContent asCode label="1 col" />
       </Box>
 
-      <Box bg={{ base: 'bg-50', dark: 'bg-800' }} p="md" rounded="md">
+      <Box bg={{ base: 'bg-50', dark: 'bg-800' }} p="md" r="md">
         <PlaceholderContent asCode label="1 col" />
       </Box>
 
@@ -432,7 +427,7 @@ export const GridChildSpanning: Story = {
         bg={{ base: 'custom-100', dark: 'custom-900' }}
         gridColumnSpan={2}
         p="md"
-        rounded="md"
+        r="md"
       >
         <PlaceholderContent asCode label="gridColumn='span 2 / span 2'" />
       </Box>
@@ -463,7 +458,7 @@ export const AsChild: Story = {
           shadow
           bg={{ base: 'bg-50', dark: 'bg-800' }}
           p="lg"
-          rounded="xl"
+          r="xl"
         >
           <section>
             <Text weight="semibold">
diff --git a/packages/ui/src/components/primitives/Box/index.tsx b/packages/ui/src/components/primitives/Box/index.tsx
index e0c815ee7..64bb7461f 100644
--- a/packages/ui/src/components/primitives/Box/index.tsx
+++ b/packages/ui/src/components/primitives/Box/index.tsx
@@ -10,7 +10,6 @@ import {
 import {
   type ArbitraryProps,
   type ColorToken,
-  type RadiusToken,
   type ResponsiveProp,
   type TokenizedCommonProps,
   normalizeResponsiveProp,
@@ -22,7 +21,7 @@ import type { ThemeConditionProp } from '@/system/themes'
 import { shadowClass } from '@/system/vars.css'
 
 import { Slot } from '../Slot'
-import { type BoxSprinkles, boxBase, boxSprinkles } from './Box.css'
+import { boxBase, boxSprinkles } from './Box.css'
 
 type DisplayValue = 'block' | 'inline' | 'inline-block' | 'none' | 'contents'
 
@@ -33,7 +32,6 @@ interface BoxOwnProps<T extends ElementType = 'div'>
   ref?: Ref<HTMLElement>
   display?: ResponsiveProp<DisplayValue>
   bg?: ThemeConditionProp<ColorToken>
-  rounded?: ResponsiveProp<RadiusToken>
   shadow?: boolean
   className?: string
   style?: CSSProperties
@@ -90,7 +88,11 @@ export function Box<T extends ElementType = 'div'>({
   overflowX,
   overflowY,
   bg,
-  rounded,
+  r,
+  rtl,
+  rtr,
+  rbl,
+  rbr,
   shadow,
   // Standard props
   className,
@@ -103,11 +105,8 @@ export function Box<T extends ElementType = 'div'>({
   const styles = resolveStyles({
     sprinkles: boxSprinkles,
     sprinkleProps: {
-      display: normalizeResponsiveProp(display) as BoxSprinkles['display'],
-      backgroundColor: bg as BoxSprinkles['backgroundColor'],
-      borderRadius: normalizeResponsiveProp(
-        rounded
-      ) as BoxSprinkles['borderRadius'],
+      display: normalizeResponsiveProp(display),
+      backgroundColor: bg,
       ...resolveCommonSprinkleProps(
         { p, px, py, pt, pr, pb, pl, m, mx, my, mt, mr, mb, ml },
         {
@@ -115,7 +114,8 @@ export function Box<T extends ElementType = 'div'>({
           overflow,
           overflowX,
           overflowY
-        }
+        },
+        { r, rtl, rtr, rbl, rbr }
       )
     },
     arbitraryProps: {
diff --git a/packages/ui/src/components/primitives/Flex/Flex.css.ts b/packages/ui/src/components/primitives/Flex/Flex.css.ts
index 2f1303f1b..2d8ce662f 100644
--- a/packages/ui/src/components/primitives/Flex/Flex.css.ts
+++ b/packages/ui/src/components/primitives/Flex/Flex.css.ts
@@ -4,6 +4,7 @@ import { createSprinkles, defineProperties } from '@vanilla-extract/sprinkles'
 import {
   RESPONSIVE_CONDITIONS,
   tokenizedLayoutProperties,
+  tokenizedRoundedProperties,
   tokenizedSpacingProperties,
   tokenizedThemeColorProperties,
   vars
@@ -35,8 +36,7 @@ const flexProperties = defineProperties({
     columnGap: vars.space,
     flexGrow: [0, 1],
     flexShrink: [0, 1],
-    flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
-    borderRadius: vars.radii
+    flexWrap: ['nowrap', 'wrap', 'wrap-reverse']
   }
 })
 
@@ -44,7 +44,8 @@ export const flexSprinkles = createSprinkles(
   flexProperties,
   tokenizedLayoutProperties,
   tokenizedSpacingProperties,
-  tokenizedThemeColorProperties
+  tokenizedThemeColorProperties,
+  tokenizedRoundedProperties
 )
 
 export type FlexSprinkles = Parameters<typeof flexSprinkles>[0]
diff --git a/packages/ui/src/components/primitives/Flex/Flex.stories.tsx b/packages/ui/src/components/primitives/Flex/Flex.stories.tsx
index 199722df9..313c5beef 100644
--- a/packages/ui/src/components/primitives/Flex/Flex.stories.tsx
+++ b/packages/ui/src/components/primitives/Flex/Flex.stories.tsx
@@ -85,7 +85,7 @@ function Item<T extends ElementType = 'div'>({
         }
         justify="center"
         p="md"
-        rounded="md"
+        r="md"
         {...(props as FlexProps<T>)}
       >
         {props.asChild
@@ -117,7 +117,7 @@ export const Default: Story = {
         {...args}
         shadow
         bg={{ base: 'bg-50', dark: 'bg-900' }}
-        rounded="lg"
+        r="lg"
         width="100%"
       >
         <Item label="Item A" />
@@ -145,7 +145,7 @@ export const Direction: Story = {
               gap="sm"
               mt="sm"
               p="md"
-              rounded="lg"
+              r="lg"
             >
               <Item label="A" />
               <Item label="B" />
@@ -176,7 +176,7 @@ export const Align: Story = {
               gap="sm"
               mt="sm"
               p="md"
-              rounded="lg"
+              r="lg"
               style={{ minHeight: '5rem' }}
             >
               {['Short', 'Tall', 'Short'].map((label, i) => (
@@ -210,7 +210,7 @@ export const Justify: Story = {
               gap="sm"
               justify={justify}
               p="md"
-              rounded="lg"
+              r="lg"
               width="100%"
             >
               <Item label="A" />
@@ -240,7 +240,7 @@ export const Gap: Story = {
               gap={gap}
               mt="sm"
               p="md"
-              rounded="lg"
+              r="lg"
             >
               <Item label="A" />
               <Item label="B" />
@@ -266,7 +266,7 @@ export const IndependentGap: Story = {
         gapX="xl"
         gapY="sm"
         p="lg"
-        rounded="lg"
+        r="lg"
         style={{ maxWidth: '24rem' }}
         wrap="wrap"
       >
@@ -293,7 +293,7 @@ export const Wrap: Story = {
             gap="sm"
             overflow="hidden"
             p="md"
-            rounded="lg"
+            r="lg"
             style={{ maxWidth: '20rem' }}
             wrap={wrap}
           >
@@ -323,13 +323,13 @@ export const WithBackgroundAndShadow: Story = {
         bg={{ base: 'bg-50', dark: 'bg-900' }}
         gap="md"
         p="lg"
-        rounded="xl"
+        r="xl"
       >
         <Flex
           centered
           flexShrink="0"
           height="3em"
-          rounded="md"
+          r="md"
           style={{
             backgroundColor: withOpacity(COLORS['custom-500'], 0.2)
           }}
@@ -361,7 +361,7 @@ export const ColumnLayout: Story = {
         bg={{ base: 'bg-50', dark: 'bg-900' }}
         direction="column"
         overflow="hidden"
-        rounded="xl"
+        r="xl"
         style={{ height: '20em', width: '20em' }}
       >
         <Flex
@@ -429,14 +429,14 @@ export const FlexChildProps: Story = {
         bg={{ base: 'bg-50', dark: 'bg-900' }}
         gap="sm"
         p="md"
-        rounded="lg"
+        r="lg"
         width="100%"
       >
         <Box
           bg={{ base: 'bg-200', dark: 'bg-700' }}
           flexShrink="0"
           p="md"
-          rounded="md"
+          r="md"
           style={{ width: '6rem' }}
         >
           <Text size="sm">shrink=0</Text>
@@ -446,7 +446,7 @@ export const FlexChildProps: Story = {
           bg={{ base: 'custom-100', dark: 'custom-900' }}
           flexGrow="1"
           p="md"
-          rounded="md"
+          r="md"
         >
           <Text size="sm">grow=1 (fills remaining space)</Text>
         </Box>
@@ -455,7 +455,7 @@ export const FlexChildProps: Story = {
           bg={{ base: 'bg-200', dark: 'bg-700' }}
           flexShrink="0"
           p="md"
-          rounded="md"
+          r="md"
           style={{ width: '6rem' }}
         >
           <Text size="sm">shrink=0</Text>
@@ -484,7 +484,7 @@ export const PolymorphicElement: Story = {
           bg={{ base: 'bg-50', dark: 'bg-800' }}
           gap="md"
           p="md"
-          rounded="xl"
+          r="xl"
           width="100%"
         >
           {['Home', 'About', 'Work', 'Contact'].map(item => (
@@ -520,7 +520,7 @@ export const AsChild: Story = {
         bg={{ base: 'bg-50', dark: 'bg-900' }}
         gap="md"
         p="lg"
-        rounded="xl"
+        r="xl"
       >
         <form>
           <Item
@@ -528,7 +528,7 @@ export const AsChild: Story = {
             shadow
             bg={{ base: 'bg-100', dark: 'bg-800' }}
             p="md"
-            rounded="md"
+            r="md"
           >
             <input placeholder="Enter your name" type="text" />
           </Item>
@@ -537,7 +537,7 @@ export const AsChild: Story = {
             shadow
             bg={{ base: 'bg-100', dark: 'bg-800' }}
             p="md"
-            rounded="md"
+            r="md"
           >
             <input placeholder="Enter your email" type="email" />
           </Item>
diff --git a/packages/ui/src/components/primitives/Flex/index.tsx b/packages/ui/src/components/primitives/Flex/index.tsx
index 8793fb777..ff2c12b93 100644
--- a/packages/ui/src/components/primitives/Flex/index.tsx
+++ b/packages/ui/src/components/primitives/Flex/index.tsx
@@ -10,7 +10,6 @@ import {
 import {
   type ArbitraryProps,
   type ColorToken,
-  type RadiusToken,
   type ResponsiveProp,
   type SpaceToken,
   type TokenizedCommonProps,
@@ -50,10 +49,10 @@ interface FlexOwnProps<T extends ElementType = 'div'>
   justify?: ResponsiveProp<JustifyValue>
   wrap?: ResponsiveProp<WrapValue>
   bg?: ThemeConditionProp<ColorToken>
-  rounded?: ResponsiveProp<RadiusToken>
   shadow?: boolean
   className?: string
   style?: CSSProperties
+  sus?: string
   children?: ReactNode
 }
 
@@ -91,7 +90,11 @@ export function Flex<T extends ElementType = 'div'>({
   justify: justifyProp,
   wrap,
   bg,
-  rounded,
+  r,
+  rtl,
+  rtr,
+  rbl,
+  rbr,
   shadow,
   // Layout props (CSS string - responsive)
   width,
@@ -149,7 +152,6 @@ export function Flex<T extends ElementType = 'div'>({
     sprinkleProps: {
       display: normalizeResponsiveProp(display),
       backgroundColor: bg,
-      borderRadius: normalizeResponsiveProp(rounded),
       flexDirection: normalizeResponsiveProp(direction),
       gap: normalizeResponsiveProp(gap),
       rowGap: normalizeResponsiveProp(gapY),
@@ -164,7 +166,8 @@ export function Flex<T extends ElementType = 'div'>({
           overflow,
           overflowX,
           overflowY
-        }
+        },
+        { r, rtl, rtr, rbl, rbr }
       )
     },
     arbitraryProps: {
diff --git a/packages/ui/src/components/primitives/Grid/Grid.css.ts b/packages/ui/src/components/primitives/Grid/Grid.css.ts
index 79bf172b7..945f8e80c 100644
--- a/packages/ui/src/components/primitives/Grid/Grid.css.ts
+++ b/packages/ui/src/components/primitives/Grid/Grid.css.ts
@@ -4,6 +4,7 @@ import { createSprinkles, defineProperties } from '@vanilla-extract/sprinkles'
 import {
   RESPONSIVE_CONDITIONS,
   tokenizedLayoutProperties,
+  tokenizedRoundedProperties,
   tokenizedSpacingProperties,
   tokenizedThemeColorProperties,
   vars
@@ -32,16 +33,16 @@ const gridProperties = defineProperties({
     gap: vars.space,
     rowGap: vars.space,
     columnGap: vars.space,
-    gridAutoFlow: ['row', 'column', 'dense', 'row dense', 'column dense'],
-    borderRadius: vars.radii
+    gridAutoFlow: ['row', 'column', 'dense', 'row dense', 'column dense']
   }
 })
 
 export const gridSprinkles = createSprinkles(
   gridProperties,
+  tokenizedThemeColorProperties,
   tokenizedLayoutProperties,
   tokenizedSpacingProperties,
-  tokenizedThemeColorProperties
+  tokenizedRoundedProperties
 )
 
 export type GridSprinkles = Parameters<typeof gridSprinkles>[0]
diff --git a/packages/ui/src/components/primitives/Grid/Grid.stories.tsx b/packages/ui/src/components/primitives/Grid/Grid.stories.tsx
index 35b86855a..3acab3c00 100644
--- a/packages/ui/src/components/primitives/Grid/Grid.stories.tsx
+++ b/packages/ui/src/components/primitives/Grid/Grid.stories.tsx
@@ -68,7 +68,7 @@ function Cell({
       }
       justify="center"
       p="md"
-      rounded="md"
+      r="md"
       {...props}
     >
       {props.asChild
@@ -99,7 +99,7 @@ export const Default: Story = {
         {...args}
         shadow
         bg={{ base: 'bg-50', dark: 'bg-900' }}
-        rounded="lg"
+        r="lg"
         templateCols={3}
         width="100%"
       >
@@ -137,7 +137,7 @@ export const Columns: Story = {
             bg={{ base: 'bg-50', dark: 'bg-900' }}
             gap="sm"
             p="md"
-            rounded="lg"
+            r="lg"
             templateCols={columns}
           >
             {['A', 'B', 'C', 'D', 'E', 'F'].map(c => (
@@ -162,7 +162,7 @@ export const Rows: Story = {
         bg={{ base: 'bg-50', dark: 'bg-900' }}
         gap="md"
         p="lg"
-        rounded="lg"
+        r="lg"
         templateCols={3}
         templateRows="5rem 8rem 5rem"
         width="100%"
@@ -196,7 +196,7 @@ export const Gap: Story = {
               bg={{ base: 'bg-50', dark: 'bg-900' }}
               gap={gap}
               p="md"
-              rounded="lg"
+              r="lg"
               templateCols={4}
             >
               {['A', 'B', 'C', 'D'].map(c => (
@@ -223,7 +223,7 @@ export const IndependentGap: Story = {
         gapX="xl"
         gapY="sm"
         p="lg"
-        rounded="lg"
+        r="lg"
         templateCols={3}
         width="100%"
       >
@@ -251,7 +251,7 @@ export const Align: Story = {
               bg={{ base: 'bg-50', dark: 'bg-900' }}
               gap="sm"
               p="md"
-              rounded="lg"
+              r="lg"
               style={{ minHeight: '6rem' }}
               templateCols={3}
             >
@@ -292,14 +292,14 @@ export const Flow: Story = {
             flow={flow}
             gap="sm"
             p="md"
-            rounded="lg"
+            r="lg"
             templateCols={4}
           >
             <Box
               bg={{ base: 'custom-100', dark: 'custom-900' }}
               gridColumnSpan={2}
               p="md"
-              rounded="md"
+              r="md"
             >
               <Text
                 color={{ base: 'custom-700', dark: 'custom-300' }}
@@ -332,7 +332,7 @@ export const SpanningCells: Story = {
         bg={{ base: 'bg-50', dark: 'bg-900' }}
         gap="md"
         p="lg"
-        rounded="lg"
+        r="lg"
         templateCols={3}
         templateRows="repeat(3, 5rem)"
         width="100%"
@@ -365,7 +365,7 @@ export const WithBackgroundAndShadow: Story = {
       bg={{ base: 'bg-50', dark: 'bg-900' }}
       gap="md"
       p="lg"
-      rounded="xl"
+      r="xl"
       templateCols={3}
       width="100%"
     >
@@ -379,7 +379,7 @@ export const WithBackgroundAndShadow: Story = {
           shadow
           bg={{ base: 'bg-100', dark: 'bg-800' }}
           p="lg"
-          rounded="lg"
+          r="lg"
         >
           <Text as="p" color={{ base: 'bg-500', dark: 'bg-400' }} size="sm">
             {title}
@@ -411,7 +411,7 @@ export const NumericColumns: Story = {
             bg={{ base: 'bg-50', dark: 'bg-900' }}
             gap="sm"
             p="md"
-            rounded="lg"
+            r="lg"
             templateCols={columns}
           >
             {['A', 'B', 'C', 'D', 'E', 'F'].map(c => (
@@ -436,7 +436,7 @@ export const ResponsiveColumns: Story = {
         bg={{ base: 'bg-50', dark: 'bg-900' }}
         gap="md"
         p="lg"
-        rounded="xl"
+        r="xl"
         templateCols={{
           base: 1,
           lg: 3,
@@ -470,7 +470,7 @@ export const AsChild: Story = {
           bg={{ base: 'bg-50', dark: 'bg-900' }}
           gap="md"
           p="lg"
-          rounded="xl"
+          r="xl"
           templateCols={3}
           width="100%"
         >
diff --git a/packages/ui/src/components/primitives/Grid/index.tsx b/packages/ui/src/components/primitives/Grid/index.tsx
index 55d43e889..bd3847b52 100644
--- a/packages/ui/src/components/primitives/Grid/index.tsx
+++ b/packages/ui/src/components/primitives/Grid/index.tsx
@@ -10,7 +10,6 @@ import {
 import {
   type ArbitraryProps,
   type ColorToken,
-  type RadiusToken,
   type ResponsiveProp,
   type SpaceToken,
   type TokenizedCommonProps,
@@ -49,7 +48,6 @@ interface GridOwnProps<T extends ElementType = 'div'>
   gapX?: ResponsiveProp<SpaceToken>
   gapY?: ResponsiveProp<SpaceToken>
   bg?: ThemeConditionProp<ColorToken>
-  rounded?: ResponsiveProp<RadiusToken>
   shadow?: boolean
   className?: string
   style?: CSSProperties
@@ -78,7 +76,11 @@ export function Grid<T extends ElementType = 'div'>({
   gapX,
   gapY,
   bg,
-  rounded,
+  r,
+  rtl,
+  rtr,
+  rbl,
+  rbr,
   shadow,
   align,
   justify,
@@ -104,7 +106,6 @@ export function Grid<T extends ElementType = 'div'>({
   flexGrow,
   flexShrink,
   gridArea,
-
   gridColumnSpan,
   gridRowSpan,
   // Padding
@@ -141,7 +142,6 @@ export function Grid<T extends ElementType = 'div'>({
     sprinkleProps: {
       display: normalizeResponsiveProp(display),
       backgroundColor: bg,
-      borderRadius: normalizeResponsiveProp(rounded),
       gap: normalizeResponsiveProp(gap),
       rowGap: normalizeResponsiveProp(gapY),
       columnGap: normalizeResponsiveProp(gapX),
@@ -155,6 +155,13 @@ export function Grid<T extends ElementType = 'div'>({
           overflow,
           overflowX,
           overflowY
+        },
+        {
+          r,
+          rtl,
+          rtr,
+          rbl,
+          rbr
         }
       )
     },
diff --git a/packages/ui/src/components/primitives/Icon/index.tsx b/packages/ui/src/components/primitives/Icon/index.tsx
index 08689e1bb..200a2dbfa 100644
--- a/packages/ui/src/components/primitives/Icon/index.tsx
+++ b/packages/ui/src/components/primitives/Icon/index.tsx
@@ -1,23 +1,26 @@
 import { Icon as IconifyIcon } from '@iconify/react'
 
+import { Box } from '../Box'
 import { Text, type TextProps } from '../Text'
 
-export type IconProps = TextProps & {
+export type IconProps = Omit<TextProps, 'size'> & {
   icon: string
   size?: number | string
 }
 
 export function Icon({ icon, size = '1.25em', color, ...rest }: IconProps) {
   return (
-    <Text
-      as="span"
-      color={color}
-      {...rest}
-      asChild
-      display="inline-block"
-      style={{ width: size, height: size, ...rest.style }}
-    >
-      <IconifyIcon icon={icon} />
-    </Text>
+    <Box asChild flexShrink="0">
+      <Text
+        as="span"
+        color={color}
+        {...rest}
+        asChild
+        display="inline-block"
+        style={{ width: size, height: size, ...rest.style }}
+      >
+        <IconifyIcon icon={icon} />
+      </Text>
+    </Box>
   )
 }
diff --git a/packages/ui/src/components/primitives/Ring/Ring.css.ts b/packages/ui/src/components/primitives/Ring/Ring.css.ts
new file mode 100644
index 000000000..901e618b1
--- /dev/null
+++ b/packages/ui/src/components/primitives/Ring/Ring.css.ts
@@ -0,0 +1,63 @@
+import { recipe } from '@vanilla-extract/recipes'
+import { createSprinkles, defineProperties } from '@vanilla-extract/sprinkles'
+
+import {
+  COLORS,
+  RESPONSIVE_CONDITIONS,
+  tokenizedLayoutProperties,
+  tokenizedRoundedProperties,
+  tokenizedSpacingProperties
+} from '@/system'
+
+const mapColorsToVars = (variableName: string) => {
+  const result: Record<string, Record<string, string>> = {}
+
+  for (const [key, value] of Object.entries(COLORS)) {
+    result[key] = { [variableName]: value }
+  }
+
+  return result
+}
+
+export const ringColorProperties = defineProperties({
+  conditions: {
+    base: {},
+    dark: { selector: '.dark &' },
+    hover: { selector: '&:hover' },
+    darkHover: { selector: '.dark &:hover' }
+  },
+  defaultCondition: 'base',
+  properties: {
+    ringColor: mapColorsToVars('--lf-ring-color'),
+    ringOffsetColor: mapColorsToVars('--lf-ring-offset-color')
+  }
+})
+
+const ringProperties = defineProperties({
+  conditions: RESPONSIVE_CONDITIONS,
+  defaultCondition: 'base',
+  properties: {
+    display: ['block', 'inline', 'inline-block', 'none', 'contents']
+  }
+})
+
+export const ringBase = recipe({
+  base: {
+    boxSizing: 'border-box',
+    boxShadow: [
+      'var(--lf-ring-offset-shadow, var(--lf-ring-inset, ) 0 0 0 var(--lf-ring-offset-width, 0px) var(--lf-ring-offset-color, transparent))',
+      'var(--lf-ring-shadow, var(--lf-ring-inset, ) 0 0 0 calc(var(--lf-ring-offset-width, 0px) + var(--lf-ring-width, 3px)) var(--lf-ring-color, var(--color-custom-500)))',
+      'var(--lf-shadow, 0 0 #0000)'
+    ].join(', ')
+  }
+})
+
+export const ringSprinkles = createSprinkles(
+  ringProperties,
+  ringColorProperties,
+  tokenizedLayoutProperties,
+  tokenizedSpacingProperties,
+  tokenizedRoundedProperties
+)
+
+export type RingSprinkles = Parameters<typeof ringSprinkles>[0]
diff --git a/packages/ui/src/components/primitives/Ring/Ring.stories.tsx b/packages/ui/src/components/primitives/Ring/Ring.stories.tsx
new file mode 100644
index 000000000..df71f3d9c
--- /dev/null
+++ b/packages/ui/src/components/primitives/Ring/Ring.stories.tsx
@@ -0,0 +1,206 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import {
+  Bordered,
+  Flex,
+  Grid,
+  Stack,
+  Text,
+  Transition
+} from '@/components/primitives'
+
+import { Ring } from './index'
+
+const meta = {
+  argTypes: {
+    bg: { control: false },
+    children: { control: false },
+    ringColor: { control: false },
+    ringOffsetColor: { control: false },
+    rounded: {
+      control: { type: 'select' },
+      options: ['none', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', 'full']
+    }
+  },
+  component: Ring
+} satisfies Meta<typeof Ring>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+function DemoBox({ label }: { label: string }) {
+  return (
+    <Flex align="center" justify="center" p="md">
+      <Text color={{ base: 'bg-500', dark: 'bg-400' }} size="sm">
+        {label}
+      </Text>
+    </Flex>
+  )
+}
+
+export const Default: Story = {
+  args: {
+    ringColor: 'custom-500',
+    ringWidth: '3px'
+  },
+  render: args => (
+    <Flex align="center" height="100%" justify="center" p="3xl">
+      <Ring {...args} p="lg" r="lg" width="20rem">
+        <Text as="p" color={{ base: 'bg-600', dark: 'bg-400' }}>
+          A simple container with a 3px custom-500 ring. Very clean and
+          beautiful.
+        </Text>
+      </Ring>
+    </Flex>
+  )
+}
+
+export const RingColor: Story = {
+  args: {},
+  render: () => (
+    <Grid gap="lg" p="3xl" templateCols={3}>
+      <Ring p="md" r="lg" ringColor="custom-500">
+        <DemoBox label="custom-500 (flat)" />
+      </Ring>
+      <Ring
+        p="md"
+        r="lg"
+        ringColor={{ base: 'custom-300', dark: 'custom-600' }}
+      >
+        <DemoBox label="custom-300 / custom-600 (adaptive)" />
+      </Ring>
+      <Ring
+        p="md"
+        r="lg"
+        ringColor={{
+          base: 'bg-400',
+          dark: 'bg-600',
+          darkHover: 'custom-400',
+          hover: 'custom-500'
+        }}
+      >
+        <DemoBox label="hover + dark + darkHover conditions" />
+      </Ring>
+    </Grid>
+  )
+}
+
+export const RingWidth: Story = {
+  args: {},
+  render: () => (
+    <Stack gap="xl" px="md">
+      {(['1px', '2px', '4px', '8px'] as const).map(w => (
+        <Ring key={w} p="md" r="lg" ringWidth={w}>
+          <DemoBox label={`ringWidth="${w}"`} />
+        </Ring>
+      ))}
+    </Stack>
+  )
+}
+
+export const RingOffset: Story = {
+  args: {},
+  render: () => (
+    <Stack>
+      <Ring
+        p="md"
+        r="lg"
+        ringColor="custom-500"
+        ringOffsetColor="dangerous"
+        ringOffsetWidth="6px"
+        ringWidth="4px"
+      >
+        <DemoBox label="6px away from container" />
+      </Ring>
+    </Stack>
+  )
+}
+
+export const InsetRing: Story = {
+  args: {},
+  render: () => (
+    <Flex align="center" height="100%" justify="center" p="3xl">
+      <Ring
+        ringInset
+        p="lg"
+        r="lg"
+        ringColor="custom-500"
+        ringWidth="4px"
+        width="20rem"
+      >
+        <Text as="p" color={{ base: 'bg-600', dark: 'bg-400' }}>
+          An inset ring drawn on the inside of the container edge.
+        </Text>
+      </Ring>
+    </Flex>
+  )
+}
+
+export const AsChild: Story = {
+  args: {},
+  render: () => (
+    <Flex direction="column" gap="md" p="3xl">
+      <Transition duration="0.1s">
+        <Ring
+          asChild
+          r="md"
+          ringColor={{
+            base: 'transparent',
+            darkHover: 'custom-400',
+            hover: 'custom-500'
+          }}
+          ringOffsetColor={{ base: 'bg-50', dark: 'bg-900' }}
+          ringOffsetWidth="2px"
+          ringWidth="3px"
+        >
+          <button
+            style={{
+              backgroundColor: 'var(--color-custom-600)',
+              border: 'none',
+              borderRadius: '0.375rem',
+              color: 'white',
+              cursor: 'pointer',
+              fontWeight: '600',
+              padding: '1rem 2rem'
+            }}
+          >
+            Hover to see Ring
+          </button>
+        </Ring>
+      </Transition>
+    </Flex>
+  )
+}
+
+export const WithBordered: Story = {
+  args: {},
+  render: () => (
+    <Flex direction="column" gap="md" p="3xl">
+      <Ring
+        asChild
+        r="lg"
+        ringColor={{ base: 'bg-300', dark: 'bg-700' }}
+        ringOffsetColor={{ base: 'bg-50', dark: 'bg-900' }}
+        ringOffsetWidth="3px"
+        ringWidth="2px"
+      >
+        <Bordered
+          bg={{ base: 'bg-50', dark: 'bg-900' }}
+          borderColor={{ base: 'bg-300', dark: 'bg-700' }}
+          borderWidth="2px"
+          p="lg"
+          r="lg"
+          style={{ cursor: 'pointer', transition: 'all 0.2s' }}
+        >
+          <Text weight="semibold">Card with Ring + Border</Text>
+          <Text as="p" color={{ base: 'bg-500', dark: 'bg-400' }} mt="xs">
+            A composition showing a 2px ring and a 2px bordered container. The
+            ring expands outward from the container with a 3px offset, creating
+            a doubled border effect.
+          </Text>
+        </Bordered>
+      </Ring>
+    </Flex>
+  )
+}
diff --git a/packages/ui/src/components/primitives/Ring/index.tsx b/packages/ui/src/components/primitives/Ring/index.tsx
new file mode 100644
index 000000000..6e8089396
--- /dev/null
+++ b/packages/ui/src/components/primitives/Ring/index.tsx
@@ -0,0 +1,176 @@
+import { clsx } from 'clsx'
+import {
+  type CSSProperties,
+  type ComponentPropsWithRef,
+  type ElementType,
+  type ReactNode,
+  type Ref
+} from 'react'
+
+import {
+  type ArbitraryProps,
+  type ColorToken,
+  type ResponsiveProp,
+  type TokenizedCommonProps,
+  normalizeResponsiveProp,
+  resolveCommonSprinkleProps,
+  resolveStyles,
+  shadowClass
+} from '@/system'
+import { normalizeGridSpan } from '@/system/grid-utils'
+import type { ThemeConditionProp } from '@/system/themes'
+
+import { Slot } from '../Slot'
+import { type RingSprinkles, ringBase, ringSprinkles } from './Ring.css'
+
+type DisplayValue = 'block' | 'inline' | 'inline-block' | 'none' | 'contents'
+type RingProps<T extends ElementType = 'div'> = TokenizedCommonProps &
+  ArbitraryProps & {
+    as?: T
+    asChild?: boolean
+    ref?: Ref<HTMLElement>
+    display?: ResponsiveProp<DisplayValue>
+    ringWidth?: ResponsiveProp<string>
+    ringColor?: ThemeConditionProp<ColorToken>
+    ringOffsetWidth?: ResponsiveProp<string>
+    ringOffsetColor?: ThemeConditionProp<ColorToken>
+    ringInset?: boolean
+    shadow?: boolean
+    className?: string
+    style?: CSSProperties
+    children?: ReactNode
+  } & Omit<
+    ComponentPropsWithRef<T>,
+    | 'as'
+    | 'asChild'
+    | 'ref'
+    | 'display'
+    | 'ringWidth'
+    | 'ringColor'
+    | 'ringOffsetWidth'
+    | 'ringOffsetColor'
+    | 'ringInset'
+    | 'shadow'
+    | 'className'
+    | 'style'
+    | 'children'
+  >
+
+export function Ring<T extends ElementType = 'div'>({
+  as,
+  asChild = false,
+  ref,
+  display,
+  ringWidth = '3px',
+  ringColor = 'custom-500',
+  ringOffsetWidth = '0px',
+  ringOffsetColor = 'transparent',
+  ringInset = false,
+  shadow = false,
+  p,
+  pb,
+  pl,
+  pr,
+  pt,
+  px,
+  py,
+  m,
+  mb,
+  ml,
+  mr,
+  mt,
+  mx,
+  my,
+  r,
+  rtl,
+  rtr,
+  rbl,
+  rbr,
+  position,
+  overflow,
+  overflowX,
+  overflowY,
+  width,
+  minWidth,
+  maxWidth,
+  height,
+  minHeight,
+  maxHeight,
+  zIndex,
+  inset,
+  top,
+  right,
+  bottom,
+  left,
+  flex,
+  flexBasis,
+  flexGrow,
+  flexShrink,
+  gridArea,
+  gridColumnSpan,
+  gridRowSpan,
+  className,
+  style,
+  children,
+  ...rest
+}: RingProps<T>) {
+  const Component = asChild ? Slot : (as ?? 'div')
+
+  const styles = resolveStyles({
+    sprinkles: ringSprinkles,
+    sprinkleProps: {
+      ringColor: ringColor,
+      ringOffsetColor: ringOffsetColor,
+      display: normalizeResponsiveProp(display) as RingSprinkles['display'],
+      ...resolveCommonSprinkleProps(
+        { p, px, py, pt, pr, pb, pl, m, mx, my, mt, mr, mb, ml },
+        {
+          position,
+          overflow,
+          overflowX,
+          overflowY
+        },
+        { r, rtl, rtr, rbl, rbr }
+      )
+    },
+    arbitraryProps: {
+      bottom,
+      flex,
+      flexBasis,
+      flexGrow,
+      flexShrink,
+      gridArea,
+      height,
+      inset,
+      left,
+      maxHeight,
+      maxWidth,
+      minHeight,
+      minWidth,
+      right,
+      top,
+      width,
+      zIndex,
+      gridColumnSpan: normalizeResponsiveProp(
+        gridColumnSpan,
+        normalizeGridSpan
+      ),
+      gridRowSpan: normalizeResponsiveProp(gridRowSpan, normalizeGridSpan)
+    },
+    componentArbitraryProps: {
+      ringWidth: normalizeResponsiveProp(ringWidth),
+      ringOffsetWidth: normalizeResponsiveProp(ringOffsetWidth)
+    },
+    className: clsx(ringBase(), shadow && shadowClass, className),
+    style: {
+      '--lf-ring-inset': ringInset ? 'inset' : ' ',
+      ...style
+    } as CSSProperties
+  })
+
+  return (
+    <Component ref={ref as Ref<never>} {...styles} {...rest}>
+      {children}
+    </Component>
+  )
+}
diff --git a/packages/ui/src/components/primitives/Slot/Slot.stories.tsx b/packages/ui/src/components/primitives/Slot/Slot.stories.tsx
index ac3a4d996..7e71aaa14 100644
--- a/packages/ui/src/components/primitives/Slot/Slot.stories.tsx
+++ b/packages/ui/src/components/primitives/Slot/Slot.stories.tsx
@@ -40,7 +40,7 @@ export const Default: Story = {
         onto its single child - no extra DOM node is added.
       </Text>
 
-      <Box bg={{ base: 'bg-50', dark: 'bg-800' }} p="md" rounded="lg">
+      <Box bg={{ base: 'bg-50', dark: 'bg-800' }} p="md" r="lg">
         <Slot
           className="extra-class-from-slot"
           style={{ outline: '2px dashed oklch(0.6 0.1 220)' }}
@@ -88,7 +88,7 @@ export const AsChildPattern: Story = {
         examples.
       </Alert>
       <VariantContainer title="Without asChild - extra <div> wrapper:">
-        <Box shadow bg={{ base: 'bg-50', dark: 'bg-900' }} p="lg" rounded="xl">
+        <Box shadow bg={{ base: 'bg-50', dark: 'bg-900' }} p="lg" r="xl">
           <article>
             <Text weight="semibold">Box wraps &lt;article&gt;</Text>
             <Text as="p" color={{ base: 'bg-500', dark: 'bg-400' }} mt="xs">
@@ -103,7 +103,7 @@ export const AsChildPattern: Story = {
           shadow
           bg={{ base: 'bg-50', dark: 'bg-900' }}
           p="lg"
-          rounded="xl"
+          r="xl"
         >
           <article>
             <Text weight="semibold">Box is &lt;article&gt;</Text>
diff --git a/packages/ui/src/components/primitives/Stack/Stack.stories.tsx b/packages/ui/src/components/primitives/Stack/Stack.stories.tsx
new file mode 100644
index 000000000..935dd03ce
--- /dev/null
+++ b/packages/ui/src/components/primitives/Stack/Stack.stories.tsx
@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { Box, Grid, Text } from '@/components/primitives'
+
+import { Stack } from './index'
+
+const meta = {
+  component: Stack
+} satisfies Meta<typeof Stack>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {},
+  render: () => (
+    <Stack>
+      <Box bg={{ base: 'bg-200', dark: 'bg-700' }} p="md" r="md">
+        <Text>Item 1</Text>
+      </Box>
+      <Box bg={{ base: 'bg-200', dark: 'bg-700' }} p="md" r="md">
+        <Text>Item 2</Text>
+      </Box>
+      <Box bg={{ base: 'bg-200', dark: 'bg-700' }} p="md" r="md">
+        <Text>Item 3</Text>
+      </Box>
+    </Stack>
+  )
+}
+
+export const NestedStacks: Story = {
+  args: {},
+  render: () => (
+    <Grid gap="md" templateCols={3}>
+      <Stack>
+        <Text weight="semibold">Column A</Text>
+        <Box bg={{ base: 'custom-100', dark: 'custom-900' }} p="md" r="md">
+          <Text>A1</Text>
+        </Box>
+        <Box bg={{ base: 'custom-100', dark: 'custom-900' }} p="md" r="md">
+          <Text>A2</Text>
+        </Box>
+      </Stack>
+      <Stack>
+        <Text weight="semibold">Column B</Text>
+        <Box bg={{ base: 'custom-100', dark: 'custom-900' }} p="md" r="md">
+          <Text>B1</Text>
+        </Box>
+        <Box bg={{ base: 'custom-100', dark: 'custom-900' }} p="md" r="md">
+          <Text>B2</Text>
+        </Box>
+        <Box bg={{ base: 'custom-100', dark: 'custom-900' }} p="md" r="md">
+          <Text>B3</Text>
+        </Box>
+      </Stack>
+      <Stack>
+        <Text weight="semibold">Column C</Text>
+        <Box bg={{ base: 'custom-100', dark: 'custom-900' }} p="md" r="md">
+          <Text>C1</Text>
+        </Box>
+      </Stack>
+    </Grid>
+  )
+}
diff --git a/packages/ui/src/components/primitives/Stack/index.tsx b/packages/ui/src/components/primitives/Stack/index.tsx
new file mode 100644
index 000000000..e3080b6b3
--- /dev/null
+++ b/packages/ui/src/components/primitives/Stack/index.tsx
@@ -0,0 +1,9 @@
+import { Flex, type FlexProps } from '../Flex'
+
+export function Stack<T extends React.ElementType = 'div'>(
+  props: FlexProps<T>
+) {
+  return (
+    <Flex direction="column" gap="sm" minWidth="0" width="100%" {...props} />
+  )
+}
diff --git a/packages/ui/src/components/primitives/Text/Text.stories.tsx b/packages/ui/src/components/primitives/Text/Text.stories.tsx
index de9b58ebe..e5a7a69bf 100644
--- a/packages/ui/src/components/primitives/Text/Text.stories.tsx
+++ b/packages/ui/src/components/primitives/Text/Text.stories.tsx
@@ -2,7 +2,6 @@ import type { Meta, StoryObj } from '@storybook/react-vite'
 
 import { Alert } from '@/components/feedback'
 import { Box, Flex, Grid, Text } from '@/components/primitives'
-
 import { ScrollableStory } from '@/storybook/ScrollableStory'
 
 const meta = {
@@ -244,7 +243,7 @@ export const TextAlign: Story = {
           key={align}
           bg={{ base: 'bg-50', dark: 'bg-800' }}
           p="md"
-          rounded="lg"
+          r="lg"
           width="100%"
         >
           <Text align={align} as="p" size="lg">
@@ -352,7 +351,7 @@ export const LineClamp: Story = {
             bg={{ base: 'bg-50', dark: 'bg-800' }}
             maxWidth="32em"
             p="md"
-            rounded="lg"
+            r="lg"
             width="100%"
           >
             <Text
@@ -393,7 +392,7 @@ export const WhiteSpace: Story = {
             bg={{ base: 'bg-50', dark: 'bg-800' }}
             overflow="hidden"
             p="md"
-            rounded="lg"
+            r="lg"
           >
             <Text
               as="code"
@@ -499,7 +498,7 @@ export const Composition: Story = {
             shadow
             bg={{ base: 'bg-50', dark: 'bg-900' }}
             p="lg"
-            rounded="xl"
+            r="xl"
           >
             <Text
               color="primary"
@@ -571,7 +570,7 @@ export const Leading: Story = {
             key={leading}
             bg={{ base: 'bg-50', dark: 'bg-800' }}
             p="md"
-            rounded="lg"
+            r="lg"
             width="100%"
           >
             <Text
diff --git a/packages/ui/src/components/primitives/Text/index.tsx b/packages/ui/src/components/primitives/Text/index.tsx
index 0ebad4102..ee3005d66 100644
--- a/packages/ui/src/components/primitives/Text/index.tsx
+++ b/packages/ui/src/components/primitives/Text/index.tsx
@@ -26,6 +26,7 @@ import {
 } from './Text.css'
 
 type TextSize =
+  | 'xs'
   | 'sm'
   | 'base'
   | 'lg'
diff --git a/packages/ui/src/components/primitives/Transition/Transition.stories.tsx b/packages/ui/src/components/primitives/Transition/Transition.stories.tsx
index 273e087bf..4cc50e85b 100644
--- a/packages/ui/src/components/primitives/Transition/Transition.stories.tsx
+++ b/packages/ui/src/components/primitives/Transition/Transition.stories.tsx
@@ -61,7 +61,7 @@ export const Opacity: Story = {
             <Box
               bg={{ base: 'custom-500' }}
               p="lg"
-              rounded="lg"
+              r="lg"
               style={{ opacity: on ? 1 : 0 }}
             >
               <Text color="bg-50" weight="semibold">
@@ -78,7 +78,7 @@ export const Opacity: Story = {
               shadow
               bg={{ base: 'bg-50', dark: 'bg-800' }}
               p="lg"
-              rounded="lg"
+              r="lg"
               style={{
                 transform: on ? 'scale(1)' : 'scale(0.8)',
                 transformOrigin: 'top left'
@@ -100,7 +100,7 @@ export const Opacity: Story = {
           >
             <Box
               p="lg"
-              rounded="lg"
+              r="lg"
               style={{
                 backgroundColor: on
                   ? COLORS['custom-500']
@@ -123,7 +123,7 @@ export const Opacity: Story = {
             <Box
               bg={{ base: 'bg-50', dark: 'bg-800' }}
               p="lg"
-              rounded="lg"
+              r="lg"
               style={{
                 boxShadow: on
                   ? '0 8px 24px rgba(0,0,0,0.25)'
@@ -158,7 +158,7 @@ export const MultiProperty: Story = {
             <Box
               bg={{ base: 'custom-500' }}
               p="lg"
-              rounded="lg"
+              r="lg"
               style={{
                 opacity: on ? 1 : 0,
                 transform: on ? 'translateX(0)' : 'translateX(1.5rem)'
@@ -183,7 +183,7 @@ export const MultiProperty: Story = {
               shadow
               bg={{ base: 'bg-50', dark: 'bg-800' }}
               p="lg"
-              rounded="lg"
+              r="lg"
               style={{
                 height: on ? '8rem' : '3rem',
                 overflow: 'hidden',
@@ -225,7 +225,7 @@ export const PerPropertyOverrides: Story = {
             <Box
               bg={{ base: 'custom-500' }}
               p="lg"
-              rounded="lg"
+              r="lg"
               style={{
                 opacity: on ? 1 : 0,
                 transform: on ? 'rotate(0deg)' : 'rotate(8deg)'
@@ -253,7 +253,7 @@ export const PerPropertyOverrides: Story = {
           >
             <Box
               p="lg"
-              rounded="lg"
+              r="lg"
               style={{
                 backgroundColor: on
                   ? 'var(--color-bg-800)'
@@ -290,7 +290,7 @@ export const HoverTriggered: Story = {
               hover: 'custom-500'
             }}
             p="md"
-            rounded="md"
+            r="md"
             width="100%"
           >
             <Text weight="semibold">
@@ -324,7 +324,7 @@ export const SingleEntryObject: Story = {
             <Box
               bg={{ base: 'bg-50', dark: 'bg-800' }}
               p="lg"
-              rounded="lg"
+              r="lg"
               style={{
                 border: '3px solid',
                 borderColor: on ? COLORS['custom-500'] : 'var(--color-bg-300)'
diff --git a/packages/ui/src/components/primitives/WithDivide/WithDivide.css.ts b/packages/ui/src/components/primitives/WithDivide/WithDivide.css.ts
index 6cc8966a9..d4b7c0c32 100644
--- a/packages/ui/src/components/primitives/WithDivide/WithDivide.css.ts
+++ b/packages/ui/src/components/primitives/WithDivide/WithDivide.css.ts
@@ -1,6 +1,6 @@
 import { style } from '@vanilla-extract/css'
 
-export const divideBase = style({
+const divideBase = style({
   selectors: {
     '&:not(:first-child)': {
       borderTopWidth: '1px',
@@ -12,3 +12,23 @@ export const divideBase = style({
     }
   }
 })
+
+const divideYBase = style({
+  selectors: {
+    '&:not(:first-child)': {
+      borderLeftWidth: '1px',
+      borderLeftStyle: 'solid',
+      borderLeftColor: 'var(--divide-color)'
+    },
+    '.dark &:not(:first-child)': {
+      borderLeftColor: 'var(--divide-dark-color)'
+    }
+  }
+})
+
+export const divideVariants = {
+  y: divideBase,
+  x: divideYBase
+} as const
+
+export type DivideAxis = keyof typeof divideVariants
diff --git a/packages/ui/src/components/primitives/WithDivide/WithDivide.stories.tsx b/packages/ui/src/components/primitives/WithDivide/WithDivide.stories.tsx
index 83b7e4f31..1384e737a 100644
--- a/packages/ui/src/components/primitives/WithDivide/WithDivide.stories.tsx
+++ b/packages/ui/src/components/primitives/WithDivide/WithDivide.stories.tsx
@@ -2,12 +2,15 @@ import type { Meta, StoryObj } from '@storybook/react-vite'
 
 import { Card } from '@/components/layout'
 import { Box, Flex, Text } from '@/components/primitives'
-import { COLORS } from '@/system'
 
 import { WithDivide } from './index'
 
 const meta = {
   argTypes: {
+    axis: {
+      control: { type: 'select' },
+      options: ['x', 'y']
+    },
     children: { control: false },
     color: { control: 'color' },
     darkColor: { control: 'color' }
@@ -47,10 +50,28 @@ export const Default: Story = {
   )
 }
 
+export const Vertical: Story = {
+  args: {
+    axis: 'y',
+    children: null
+  },
+  render: () => (
+    <Flex>
+      {items.slice(0, 3).map(item => (
+        <WithDivide key={item.id} axis="y">
+          <Box p="md">
+            <Text weight="semibold">{item.title}</Text>
+          </Box>
+        </WithDivide>
+      ))}
+    </Flex>
+  )
+}
+
 export const CustomColor: Story = {
   args: {
     children: null,
-    color: COLORS['custom-500']
+    color: 'custom-500'
   },
   render: args => (
     <Card width="100%">
diff --git a/packages/ui/src/components/primitives/WithDivide/index.tsx b/packages/ui/src/components/primitives/WithDivide/index.tsx
index 5b1105012..faa8740af 100644
--- a/packages/ui/src/components/primitives/WithDivide/index.tsx
+++ b/packages/ui/src/components/primitives/WithDivide/index.tsx
@@ -1,61 +1,33 @@
 import { type CSSProperties, type ReactNode, type Ref } from 'react'
 
-import { COLORS, withOpacity } from '@/system'
+import { COLORS, type ColorToken, withOpacity } from '@/system'
 
 import { Slot } from '../Slot'
-import { divideBase } from './WithDivide.css'
-
-// ─── Props ────────────────────────────────────────────────────────────────────
+import { type DivideAxis, divideVariants } from './WithDivide.css'
 
 interface WithDivideProps {
   ref?: Ref<HTMLElement>
-  /**
-   * Border color applied between children in light mode.
-   * Accepts any CSS color value, e.g. `bg[200]`, `'#hexValue'`, `withOpacity(bg[500], 0.3)`.
-   * Defaults to `bg[200]`.
-   */
-  color?: string
-  /**
-   * Border color applied between children in dark mode.
-   * Defaults to `withOpacity(bg[700], 0.5)`.
-   */
-  darkColor?: string
+  axis?: DivideAxis
+  color?: ColorToken
+  darkColor?: ColorToken
   children?: ReactNode
 }
 
-// ─── Component ───────────────────────────────────────────────────────────────
-
-/**
- * Merges a top-border divider style onto its single child via slot.
- * The border is applied to every child that is not the first sibling,
- * matching the CSS `:not(:first-child)` selector.
- *
- * Wrap each repeating item with `<WithDivide>` inside a list and the borders
- * will appear automatically between items without any extra markup.
- *
- * @example
- * ```tsx
- * {items.map(item => (
- *   <WithDivide key={item.id}>
- *     <div>{item.label}</div>
- *   </WithDivide>
- * ))}
- * ```
- */
 export function WithDivide({
   ref,
-  color = COLORS['bg-200'],
-  darkColor = withOpacity(COLORS['bg-700'], 0.5),
+  axis = 'y',
+  color = 'bg-200',
+  darkColor: darkColorToken = 'bg-700',
   children
 }: WithDivideProps) {
   return (
     <Slot
       ref={ref}
-      className={divideBase}
+      className={divideVariants[axis]}
       style={
         {
-          '--divide-color': color,
-          '--divide-dark-color': darkColor
+          '--divide-color': COLORS[color],
+          '--divide-dark-color': withOpacity(COLORS[darkColorToken], 0.5)
         } as CSSProperties
       }
     >
diff --git a/packages/ui/src/components/primitives/index.ts b/packages/ui/src/components/primitives/index.ts
index 3ec8ad78f..7b3ec5631 100644
--- a/packages/ui/src/components/primitives/index.ts
+++ b/packages/ui/src/components/primitives/index.ts
@@ -10,6 +10,8 @@ export * from './Grid'
 
 export * from './Slot'
 
+export * from './Stack'
+
 export * from './Transition'
 
 export * from './Prose'
@@ -17,3 +19,5 @@ export * from './Prose'
 export * from './WithDivide'
 
 export * from './Icon'
+
+export * from './Ring'
diff --git a/packages/ui/src/components/utilities/Scrollbar/index.tsx b/packages/ui/src/components/utilities/Scrollbar/index.tsx
index 060d10ee8..7bbb08a3a 100644
--- a/packages/ui/src/components/utilities/Scrollbar/index.tsx
+++ b/packages/ui/src/components/utilities/Scrollbar/index.tsx
@@ -21,7 +21,7 @@ export function Scrollbar({
           {...props}
           bg={{ base: 'bg-400', dark: 'bg-600' }}
           minHeight="30px"
-          rounded="lg"
+          r="lg"
           style={{ ...props.style }}
         />
       )}
diff --git a/packages/ui/src/components/utilities/Tooltip/index.tsx b/packages/ui/src/components/utilities/Tooltip/index.tsx
index 42b114cea..9dc5879ca 100644
--- a/packages/ui/src/components/utilities/Tooltip/index.tsx
+++ b/packages/ui/src/components/utilities/Tooltip/index.tsx
@@ -32,11 +32,11 @@ export function Tooltip({
   return (
     <>
       <span data-tooltip-id={`tooltip-${_.kebabCase(id)}`}>
-        <Icon className={iconClassName ?? ''} color="bg-500" icon={icon} />
+        <Icon className={iconClassName ?? ''} color="muted" icon={icon} />
       </span>
       <Box
         asChild
-        rounded="md"
+        r="md"
         style={{
           background:
             derivedTheme === 'light'
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 559fa5558..fd80a8b7c 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -24,9 +24,6 @@ export * from './components/overlays'
 
 export * from './components/utilities'
 
-// Theme tokens - typed CSS variable references
 export { withOpacity, TAILWIND_PALETTE, COLORS } from './system'
 
-export { ModalProvider, useModalStore } from './providers/ModalProvider'
-
-export type { ModalComponent } from './providers/ModalProvider'
+export * from './providers'
diff --git a/shared/src/providers/BackgroundProvider.tsx b/packages/ui/src/providers/BackgroundProvider.tsx
similarity index 55%
rename from shared/src/providers/BackgroundProvider.tsx
rename to packages/ui/src/providers/BackgroundProvider.tsx
index d9e48208c..886fb9d4c 100644
--- a/shared/src/providers/BackgroundProvider.tsx
+++ b/packages/ui/src/providers/BackgroundProvider.tsx
@@ -1,9 +1,12 @@
-import clsx from 'clsx'
+import { BG_BLURS, usePersonalization } from '@lifeforge/shared'
 
-import { usePersonalization } from './PersonalizationProvider'
-import { BG_BLURS } from './PersonalizationProvider/constants/bg_blurs'
+import { Box, Flex } from '@/components/primitives'
 
-function BackgroundProvider({ children }: { children: React.ReactNode }) {
+export function BackgroundProvider({
+  children
+}: {
+  children: React.ReactNode
+}) {
   const {
     bgImage,
     derivedTheme,
@@ -11,22 +14,25 @@ function BackgroundProvider({ children }: { children: React.ReactNode }) {
   } = usePersonalization()
 
   return (
-    <div
-      className={clsx(
-        'relative isolate flex h-dvh w-full',
-        bgImage !== '' && 'has-bg-image bg-cover bg-center bg-no-repeat'
-      )}
+    <Flex
+      height="100dvh"
       style={
         bgImage !== ''
           ? {
-              backgroundImage: `url(${bgImage})`
+              backgroundImage: `url(${bgImage})`,
+              backgroundSize: 'cover',
+              backgroundPosition: 'center',
+              backgroundRepeat: 'no-repeat'
             }
           : {}
       }
+      width="100%"
     >
       {bgImage !== '' && (
-        <div
-          className="absolute top-0 left-0 z-[-1] size-full"
+        <Box
+          height="100%"
+          left="0"
+          position="absolute"
           style={{
             backgroundColor: `color-mix(in oklab, var(--color-bg-${
               derivedTheme === 'dark' ? '950' : '50'
@@ -36,12 +42,13 @@ function BackgroundProvider({ children }: { children: React.ReactNode }) {
                 ? `brightness(${brightness}%) blur(${BG_BLURS[blur]}) contrast(${contrast}%) saturate(${saturation}%)`
                 : ''
           }}
+          top="0"
+          width="100%"
+          zIndex="-1"
         />
       )}
 
       {children}
-    </div>
+    </Flex>
   )
 }
-
-export default BackgroundProvider
diff --git a/packages/ui/src/providers/index.ts b/packages/ui/src/providers/index.ts
index 1b8ffe05a..886e13ec2 100644
--- a/packages/ui/src/providers/index.ts
+++ b/packages/ui/src/providers/index.ts
@@ -1 +1,3 @@
+export * from './BackgroundProvider'
+
 export * from './ModalProvider'
diff --git a/packages/ui/src/system/props-resolver.ts b/packages/ui/src/system/props-resolver.ts
index fcb1843d9..2c242c94e 100644
--- a/packages/ui/src/system/props-resolver.ts
+++ b/packages/ui/src/system/props-resolver.ts
@@ -6,10 +6,6 @@ import type { ArbitraryProps } from './arbitrary'
 import type { ResponsiveProp } from './responsive'
 import { getResponsiveLayoutStyles } from './responsive/utils/getResponsiveLayoutStyles'
 
-// ========================================
-// SPRINKLES
-// ========================================
-
 type AnySprinklesFn = {
   (props: any): string
   properties: Set<string>
@@ -17,10 +13,6 @@ type AnySprinklesFn = {
 
 type SprinklesProps<T extends AnySprinklesFn> = Parameters<T>[0]
 
-// ========================================
-// RESPONSIVE OUTPUTS
-// ========================================
-
 type ResolveResponsiveOutputs<T> = {
   [K in keyof T]: NonNullable<T[K]> extends ResponsiveProp<
     infer TInput,
@@ -31,33 +23,20 @@ type ResolveResponsiveOutputs<T> = {
     : T[K]
 }
 
-// ========================================
-// OPTIONS
-// ========================================
-
 type ResolveStylesOptions<
   T extends AnySprinklesFn,
   TComponentArbitraryProps extends object = {}
 > = {
   sprinkles: T
-
   sprinkleProps: Partial<SprinklesProps<T>>
-
   arbitraryProps?: Partial<ResolveResponsiveOutputs<ArbitraryProps>>
-
   componentArbitraryProps?: Partial<
     ResolveResponsiveOutputs<TComponentArbitraryProps>
   >
-
   style?: CSSProperties
-
   className?: string
 }
 
-// ========================================
-// RESOLVER
-// ========================================
-
 export function resolveStyles<
   T extends AnySprinklesFn,
   TComponentArbitraryProps extends object = {}
diff --git a/packages/ui/src/system/responsive/constant.ts b/packages/ui/src/system/responsive/constant.ts
index 6c029cdc3..d3ce7bfce 100644
--- a/packages/ui/src/system/responsive/constant.ts
+++ b/packages/ui/src/system/responsive/constant.ts
@@ -94,6 +94,14 @@ export const LAYOUT_PROP_DEFS = {
   zIndex: {
     className: 'lf-zi',
     customProperties: ['--lf-zi']
+  },
+  ringWidth: {
+    className: 'lf-rw',
+    customProperties: ['--lf-rw']
+  },
+  ringOffsetWidth: {
+    className: 'lf-row',
+    customProperties: ['--lf-row']
   }
 } as const satisfies Record<string, PropDef>
 
diff --git a/packages/ui/src/system/responsive/index.css.ts b/packages/ui/src/system/responsive/index.css.ts
index e1bc341de..04c1ce0f8 100644
--- a/packages/ui/src/system/responsive/index.css.ts
+++ b/packages/ui/src/system/responsive/index.css.ts
@@ -27,7 +27,9 @@ const RESPONSIVE_PROPS = [
     customProp: '--lf-gtc'
   },
   { className: 'lf-gtr', property: 'gridTemplateRows', customProp: '--lf-gtr' },
-  { className: 'lf-zi', property: 'zIndex', customProp: '--lf-zi' }
+  { className: 'lf-zi', property: 'zIndex', customProp: '--lf-zi' },
+  { className: 'lf-rw', property: '--lf-ring-width', customProp: '--lf-rw' },
+  { className: 'lf-row', property: '--lf-ring-offset-width', customProp: '--lf-row' }
 ] as const
 
 // Breakpoint media queries
diff --git a/packages/ui/src/system/tokens/index.ts b/packages/ui/src/system/tokens/index.ts
index db53419f1..1d1e493d7 100644
--- a/packages/ui/src/system/tokens/index.ts
+++ b/packages/ui/src/system/tokens/index.ts
@@ -1,7 +1,3 @@
-export * from './layout-props.css'
-
-export * from './spacing-props.css'
-
-export * from './theme-props.css'
+export * from './props'
 
 export * from './resolvers'
diff --git a/packages/ui/src/system/tokens/props/index.ts b/packages/ui/src/system/tokens/props/index.ts
new file mode 100644
index 000000000..e6dde13c2
--- /dev/null
+++ b/packages/ui/src/system/tokens/props/index.ts
@@ -0,0 +1,7 @@
+export * from './layout-props.css'
+
+export * from './spacing-props.css'
+
+export * from './theme-props.css'
+
+export * from './rounded-props.css'
diff --git a/packages/ui/src/system/tokens/layout-props.css.ts b/packages/ui/src/system/tokens/props/layout-props.css.ts
similarity index 89%
rename from packages/ui/src/system/tokens/layout-props.css.ts
rename to packages/ui/src/system/tokens/props/layout-props.css.ts
index 398b0b496..8d3428c27 100644
--- a/packages/ui/src/system/tokens/layout-props.css.ts
+++ b/packages/ui/src/system/tokens/props/layout-props.css.ts
@@ -1,10 +1,6 @@
 import { defineProperties } from '@vanilla-extract/sprinkles'
 
-import {
-  RESPONSIVE_CONDITIONS,
-  type ResponsiveProp,
-  normalizeResponsiveProp
-} from '..'
+import { RESPONSIVE_CONDITIONS, type ResponsiveProp } from '../..'
 
 export type PositionValue =
   | 'static'
diff --git a/packages/ui/src/system/tokens/props/rounded-props.css.ts b/packages/ui/src/system/tokens/props/rounded-props.css.ts
new file mode 100644
index 000000000..3e9b4c496
--- /dev/null
+++ b/packages/ui/src/system/tokens/props/rounded-props.css.ts
@@ -0,0 +1,28 @@
+import { defineProperties } from '@vanilla-extract/sprinkles'
+
+import {
+  RESPONSIVE_CONDITIONS,
+  type RadiusToken,
+  type ResponsiveProp,
+  vars
+} from '../..'
+
+export interface TokenizedRoundedProps {
+  r?: ResponsiveProp<RadiusToken>
+  rtl?: ResponsiveProp<RadiusToken>
+  rtr?: ResponsiveProp<RadiusToken>
+  rbl?: ResponsiveProp<RadiusToken>
+  rbr?: ResponsiveProp<RadiusToken>
+}
+
+export const tokenizedRoundedProperties = defineProperties({
+  conditions: RESPONSIVE_CONDITIONS,
+  defaultCondition: 'base',
+  properties: {
+    borderRadius: vars.radii,
+    borderTopLeftRadius: vars.radii,
+    borderTopRightRadius: vars.radii,
+    borderBottomLeftRadius: vars.radii,
+    borderBottomRightRadius: vars.radii
+  }
+})
diff --git a/packages/ui/src/system/tokens/spacing-props.css.ts b/packages/ui/src/system/tokens/props/spacing-props.css.ts
similarity index 98%
rename from packages/ui/src/system/tokens/spacing-props.css.ts
rename to packages/ui/src/system/tokens/props/spacing-props.css.ts
index 7a699d993..ed953f9c3 100644
--- a/packages/ui/src/system/tokens/spacing-props.css.ts
+++ b/packages/ui/src/system/tokens/props/spacing-props.css.ts
@@ -5,7 +5,7 @@ import {
   type ResponsiveProp,
   type SpaceToken,
   vars
-} from '..'
+} from '../..'
 
 interface TokenizedPaddingProps {
   p?: ResponsiveProp<SpaceToken>
diff --git a/packages/ui/src/system/tokens/theme-props.css.ts b/packages/ui/src/system/tokens/props/theme-props.css.ts
similarity index 94%
rename from packages/ui/src/system/tokens/theme-props.css.ts
rename to packages/ui/src/system/tokens/props/theme-props.css.ts
index c4e27eae6..66e41153c 100644
--- a/packages/ui/src/system/tokens/theme-props.css.ts
+++ b/packages/ui/src/system/tokens/props/theme-props.css.ts
@@ -1,6 +1,6 @@
 import { defineProperties } from '@vanilla-extract/sprinkles'
 
-import { COLORS } from '..'
+import { COLORS } from '../..'
 
 export const tokenizedThemeColorProperties = defineProperties({
   conditions: {
diff --git a/packages/ui/src/system/tokens/resolvers/common-props-resolver.ts b/packages/ui/src/system/tokens/resolvers/common-props-resolver.ts
index 7c8f66cc0..9dbe10830 100644
--- a/packages/ui/src/system/tokens/resolvers/common-props-resolver.ts
+++ b/packages/ui/src/system/tokens/resolvers/common-props-resolver.ts
@@ -1,17 +1,25 @@
-import type { TokenizedLayoutProps } from '../layout-props.css'
-import type { TokenizedSpacingProps } from '../spacing-props.css'
-import { resolveLayoutSprinklesProps } from './layout-props-resolvers'
-import { resolveSpacingSprinklesProps } from './spacing-props-resolvers'
+import {
+  resolveLayoutSprinklesProps,
+  resolveRoundedSprinklesProps,
+  resolveSpacingSprinklesProps
+} from '.'
+import type {
+  TokenizedLayoutProps,
+  TokenizedRoundedProps,
+  TokenizedSpacingProps
+} from '../props'
 
 export interface TokenizedCommonProps
-  extends TokenizedLayoutProps, TokenizedSpacingProps {}
+  extends TokenizedLayoutProps, TokenizedSpacingProps, TokenizedRoundedProps {}
 
 export function resolveCommonSprinkleProps(
   spacing: TokenizedSpacingProps,
-  layout: TokenizedLayoutProps
+  layout: TokenizedLayoutProps,
+  rounded: TokenizedRoundedProps
 ) {
   return {
     ...resolveSpacingSprinklesProps(spacing),
-    ...resolveLayoutSprinklesProps(layout)
+    ...resolveLayoutSprinklesProps(layout),
+    ...resolveRoundedSprinklesProps(rounded)
   }
 }
diff --git a/packages/ui/src/system/tokens/resolvers/index.ts b/packages/ui/src/system/tokens/resolvers/index.ts
index 692a6ea77..9c8eef1cd 100644
--- a/packages/ui/src/system/tokens/resolvers/index.ts
+++ b/packages/ui/src/system/tokens/resolvers/index.ts
@@ -3,3 +3,5 @@ export * from './common-props-resolver'
 export * from './spacing-props-resolvers'
 
 export * from './layout-props-resolvers'
+
+export * from './rounded-props-resolvers'
diff --git a/packages/ui/src/system/tokens/resolvers/layout-props-resolvers.ts b/packages/ui/src/system/tokens/resolvers/layout-props-resolvers.ts
index d3ca87647..6e5683944 100644
--- a/packages/ui/src/system/tokens/resolvers/layout-props-resolvers.ts
+++ b/packages/ui/src/system/tokens/resolvers/layout-props-resolvers.ts
@@ -1,6 +1,6 @@
 import { normalizeResponsiveProp } from '@/system/responsive'
 
-import type { TokenizedLayoutProps } from '../layout-props.css'
+import type { TokenizedLayoutProps } from '../props'
 
 export function resolveLayoutSprinklesProps({
   position,
diff --git a/packages/ui/src/system/tokens/resolvers/rounded-props-resolvers.ts b/packages/ui/src/system/tokens/resolvers/rounded-props-resolvers.ts
new file mode 100644
index 000000000..4eb3f1f57
--- /dev/null
+++ b/packages/ui/src/system/tokens/resolvers/rounded-props-resolvers.ts
@@ -0,0 +1,21 @@
+import type { CSSProperties } from '@vanilla-extract/css'
+
+import { normalizeResponsiveProp } from '@/system/responsive'
+
+import type { TokenizedRoundedProps } from '../props'
+
+export function resolveRoundedSprinklesProps({
+  r,
+  rtl,
+  rtr,
+  rbl,
+  rbr
+}: TokenizedRoundedProps): Partial<Record<keyof CSSProperties, any>> {
+  return {
+    borderRadius: normalizeResponsiveProp(r),
+    borderTopLeftRadius: normalizeResponsiveProp(rtl),
+    borderTopRightRadius: normalizeResponsiveProp(rtr),
+    borderBottomLeftRadius: normalizeResponsiveProp(rbl),
+    borderBottomRightRadius: normalizeResponsiveProp(rbr)
+  }
+}
diff --git a/packages/ui/src/system/tokens/resolvers/spacing-props-resolvers.ts b/packages/ui/src/system/tokens/resolvers/spacing-props-resolvers.ts
index 8d5fc60cd..fc5eaf9c3 100644
--- a/packages/ui/src/system/tokens/resolvers/spacing-props-resolvers.ts
+++ b/packages/ui/src/system/tokens/resolvers/spacing-props-resolvers.ts
@@ -1,6 +1,6 @@
 import { normalizeResponsiveProp } from '@/system/responsive'
 
-import type { TokenizedSpacingProps } from '../spacing-props.css'
+import type { TokenizedSpacingProps } from '../props'
 
 export function resolveSpacingSprinklesProps({
   p,
diff --git a/packages/ui/src/system/vars.css.ts b/packages/ui/src/system/vars.css.ts
index ae7b801d3..38f60c998 100644
--- a/packages/ui/src/system/vars.css.ts
+++ b/packages/ui/src/system/vars.css.ts
@@ -30,6 +30,7 @@ export const vars = createGlobalTheme(':root', {
     full: '9999px'
   },
   fontSize: {
+    xs: 'var(--text-xs)',
     sm: 'var(--text-sm)',
     base: 'var(--text-base)',
     lg: 'var(--text-lg)',
@@ -44,6 +45,7 @@ export const vars = createGlobalTheme(':root', {
     '9xl': 'var(--text-9xl)'
   },
   lineHeight: {
+    xs: 'var(--text-xs--line-height)',
     sm: 'var(--text-sm--line-height)',
     base: 'var(--text-base--line-height)',
     lg: 'var(--text-lg--line-height)',
diff --git a/server/src/core/functions/routes/functions/controllerLogic.ts b/server/src/core/functions/routes/functions/controllerLogic.ts
index 6307502d9..66920d9fd 100755
--- a/server/src/core/functions/routes/functions/controllerLogic.ts
+++ b/server/src/core/functions/routes/functions/controllerLogic.ts
@@ -89,6 +89,7 @@ function createHandler<
 
     const aesKey = getAESKey(req, res, encrypted, callerModuleId)
 
+
     try {
       parseQuery(req, schema.query)
 
diff --git a/server/src/core/functions/routes/utils/parsePayload.ts b/server/src/core/functions/routes/utils/parsePayload.ts
index 84ed49d94..f408aa09e 100644
--- a/server/src/core/functions/routes/utils/parsePayload.ts
+++ b/server/src/core/functions/routes/utils/parsePayload.ts
@@ -1,10 +1,9 @@
+import { decryptPayload } from '@functions/encryption'
 import { Request } from 'express'
 import z from 'zod'
 
 import { ClientError, ConvertMedia, MediaConfig } from '@lifeforge/server-utils'
 
-import { decryptPayload } from '@functions/encryption'
-
 import restoreFormDataType from './restoreDataType'
 import { splitMediaAndData } from './splitMediaAndData'
 
diff --git a/server/src/core/routes/constants/corsAllowedOrigins.ts b/server/src/core/routes/constants/corsAllowedOrigins.ts
index 97008f034..bf070bbb7 100644
--- a/server/src/core/routes/constants/corsAllowedOrigins.ts
+++ b/server/src/core/routes/constants/corsAllowedOrigins.ts
@@ -2,5 +2,6 @@ export const CORS_ALLOWED_ORIGINS = [
   'http://localhost:5173',
   'http://localhost:5174',
   'http://localhost:4173',
-  'http://localhost'
+  'http://localhost',
+  'https://_.melvinchia.dev'
 ]
diff --git a/server/src/core/routes/core-routes.types.ts b/server/src/core/routes/core-routes.types.ts
new file mode 100644
index 000000000..b9bf26a68
--- /dev/null
+++ b/server/src/core/routes/core-routes.types.ts
@@ -0,0 +1,3 @@
+import type coreRoutes from './core.routes'
+
+export type CoreRoutes = typeof coreRoutes
diff --git a/server/src/core/routes/core.routes.ts b/server/src/core/routes/core.routes.ts
index 784405b80..809438199 100644
--- a/server/src/core/routes/core.routes.ts
+++ b/server/src/core/routes/core.routes.ts
@@ -1,3 +1,4 @@
+import { getPublicKey } from '@functions/encryption'
 import corsAnywhere from '@lib/corsAnywhere'
 import dayjs from 'dayjs'
 import request from 'request'
@@ -5,8 +6,6 @@ import z from 'zod'
 
 import { forgeRouter } from '@lifeforge/server-utils'
 
-import { getPublicKey } from '@functions/encryption'
-
 import forge from './forge'
 
 const welcome = forge
@@ -104,4 +103,5 @@ const coreRoutes = forgeRouter({
   encryptionPublicKey
 })
 
+
 export default coreRoutes
diff --git a/server/src/lib/apiKeys/routes/entries.ts b/server/src/lib/apiKeys/routes/entries.ts
index 7071c6377..c87264cf0 100644
--- a/server/src/lib/apiKeys/routes/entries.ts
+++ b/server/src/lib/apiKeys/routes/entries.ts
@@ -1,9 +1,8 @@
+import { decrypt2, encrypt2 } from '@functions/auth/encryption'
 import z from 'zod'
 
 import { ClientError, forgeRouter } from '@lifeforge/server-utils'
 
-import { decrypt2, encrypt2 } from '@functions/auth/encryption'
-
 import forge from '../forge'
 
 const get = forge
@@ -21,7 +20,7 @@ const get = forge
       .collection('entries')
       .filter([
         {
-          field: 'keyId',
+          field: 'id',
           operator: '=',
           value: keyId
         }
@@ -29,6 +28,8 @@ const get = forge
       .execute()
       .catch(() => null)
 
+    console.log(await pb.getFullList.collection('entries').execute())
+
     if (!entry) {
       throw new ClientError('API Key not found', 404)
     }
diff --git a/server/src/lib/modules/routes/categories.ts b/server/src/lib/modules/routes/categories.ts
index 853cddcc1..d89223cf2 100644
--- a/server/src/lib/modules/routes/categories.ts
+++ b/server/src/lib/modules/routes/categories.ts
@@ -7,7 +7,7 @@ export const list = forge
   .description('Get the category display order')
   .input({})
   .callback(async ({ core: { tempFile } }) =>
-    new tempFile('module_categories.json').read<
+    new tempFile('module_categories.json', 'object').read<
       Record<string, Record<string, string>>
     >()
   )
diff --git a/server/src/lib/modules/routes/modules.ts b/server/src/lib/modules/routes/modules.ts
index 83b1e4f07..9fc119e96 100644
--- a/server/src/lib/modules/routes/modules.ts
+++ b/server/src/lib/modules/routes/modules.ts
@@ -51,7 +51,7 @@ export const list = forge
   .callback(async ({ core: { tempFile } }) => {
     const modules: InstalledModule[] = []
 
-    if (!fs.existsSync(APPS_DIR)) return { modules }
+    if (!fs.existsSync(APPS_DIR)) return modules
 
     const devModeModules =
       (new tempFile('module_dev_mode.json', 'array').read() as string[]) || []
diff --git a/server/src/lib/user/routes/twoFA.ts b/server/src/lib/user/routes/twoFA.ts
index d518df0c9..e309de51e 100644
--- a/server/src/lib/user/routes/twoFA.ts
+++ b/server/src/lib/user/routes/twoFA.ts
@@ -1,3 +1,4 @@
+import { decrypt2, encrypt, encrypt2 } from '@functions/auth/encryption'
 import dayjs from 'dayjs'
 import PocketBase from 'pocketbase'
 import speakeasy from 'speakeasy'
@@ -6,15 +7,11 @@ import z from 'zod'
 
 import { ClientError } from '@lifeforge/server-utils'
 
-import { decrypt2, encrypt, encrypt2 } from '@functions/auth/encryption'
-import { default as _validateOTP } from '@functions/auth/validateOTP'
-
 import { currentSession } from '..'
 import forge from '../forge'
 import { removeSensitiveData, updateNullData } from '../utils/auth'
 import { verifyAppOTP, verifyEmailOTP } from '../utils/otp'
 
-let canDisable2FA = false
 let challenge = v4()
 
 setTimeout(
@@ -58,31 +55,31 @@ export const requestOTP = forge
     return currentSession.tokenId
   })
 
-export const validateOTP = forge
-  .mutation()
-  .noAuth()
-  .description('Verify OTP for two-factor authentication')
-  .input({
-    body: z.object({
-      otp: z.string(),
-      otpId: z.string()
-    })
-  })
-  .callback(async ({ pb, body }) => {
-    if (await _validateOTP(pb, body, challenge)) {
-      canDisable2FA = true
-      setTimeout(
-        () => {
-          canDisable2FA = false
-        },
-        1000 * 60 * 5
-      )
+// export const validateOTP = forge
+//   .mutation()
+//   .noAuth()
+//   .description('Verify OTP for two-factor authentication')
+//   .input({
+//     body: z.object({
+//       otp: z.string(),
+//       otpId: z.string()
+//     })
+//   })
+//   .callback(async ({ pb, body }) => {
+//     if (await _validateOTP(pb, body, challenge)) {
+//       canDisable2FA = true
+//       setTimeout(
+//         () => {
+//           canDisable2FA = false
+//         },
+//         1000 * 60 * 5
+//       )
 
-      return true
-    }
+//       return true
+//     }
 
-    return false
-  })
+//     return false
+//   })
 
 export const generateAuthenticatorLink = forge
   .query()
@@ -162,12 +159,13 @@ export const disable = forge
   .description('Disable two-factor authentication')
   .input({})
   .callback(async ({ pb }) => {
-    if (!canDisable2FA) {
-      throw new ClientError(
-        'You cannot disable 2FA right now. Please try again later.',
-        403
-      )
-    }
+    //TODO
+    // if (!canDisable2FA) {
+    //   throw new ClientError(
+    //     'You cannot disable 2FA right now. Please try again later.',
+    //     403
+    //   )
+    // }
 
     await pb.update
       .collection('users')
@@ -177,7 +175,7 @@ export const disable = forge
       })
       .execute()
 
-    canDisable2FA = false
+    // canDisable2FA = false
   })
 
 export const verify = forge
diff --git a/shared/src/api/core/forgeEndpoint.ts b/shared/src/api/core/forgeEndpoint.ts
index 904832c44..7db623422 100644
--- a/shared/src/api/core/forgeEndpoint.ts
+++ b/shared/src/api/core/forgeEndpoint.ts
@@ -312,6 +312,8 @@ export default class ForgeEndpoint<
       return this.mutateRaw(data)
     }
 
+    console.log(data)
+
     // Encrypt the request
     const { payload, session } = await encryptRequest(data)
 
diff --git a/shared/src/index.ts b/shared/src/index.ts
index 0535f65c1..772a9f8ec 100644
--- a/shared/src/index.ts
+++ b/shared/src/index.ts
@@ -16,6 +16,7 @@ export { useEncryption } from './providers/EncryptionProvider'
 export { useAPIEndpoint } from './providers/APIEndpointProvider'
 export { useAPIOnlineStatus } from './providers/APIOnlineStatusProvider'
 export { usePersonalization } from './providers/PersonalizationProvider'
+export { BG_BLURS } from './providers/PersonalizationProvider/constants/bg_blurs'
 export { useMainSidebarState as useMainSidebarState } from './providers/SidebarStateProvider'
 export { useAuth } from './providers/AuthProvider'
 export { useModuleSidebarState } from './providers/ModuleSidebarStateProvider'
@@ -24,7 +25,6 @@ export { useFederation } from './providers/FederationProvider'
 export { default as AuthProvider } from './providers/AuthProvider'
 export { default as APIEndpointProvider } from './providers/APIEndpointProvider'
 export { default as PersonalizationProvider } from './providers/PersonalizationProvider'
-export { default as BackgroundProvider } from './providers/BackgroundProvider'
 export { default as APIOnlineStatusProvider } from './providers/APIOnlineStatusProvider'
 export { default as MainSidebarStateProvider } from './providers/SidebarStateProvider'
 export { default as ToastProvider } from './providers/ToastProvider'
diff --git a/shared/src/providers/ModalStoreProvider.tsx b/shared/src/providers/ModalStoreProvider.tsx
deleted file mode 100644
index b6904308d..000000000
--- a/shared/src/providers/ModalStoreProvider.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import {
-  type FC,
-  type ReactNode,
-  createContext,
-  useContext,
-  useMemo,
-  useState
-} from 'react'
-
-export type ModalComponent<P = any> = FC<{
-  data: P
-  onClose: () => void
-}>
-
-type ModalInstance<P = any> = {
-  component: ModalComponent<P>
-  data: P
-  isClosing: boolean
-}
-
-interface ModalState {
-  stack: ModalInstance[]
-  open: <P>(component: ModalComponent<P>, data: P) => void
-  close: () => void
-  remove: (index: number) => void
-}
-
-const ModalContext = createContext<ModalState | null>(null)
-
-export default function ModalProvider({ children }: { children: ReactNode }) {
-  const [stack, setStack] = useState<ModalInstance[]>([])
-
-  const open: ModalState['open'] = (component, data) => {
-    setStack(prev => [...prev, { component, data, isClosing: false }])
-  }
-
-  const close: ModalState['close'] = () => {
-    setStack(prev => {
-      if (prev.length === 0) return prev
-
-      const next = [...prev]
-
-      const lastIndex = next.length - 1
-
-      next[lastIndex] = { ...next[lastIndex], isClosing: true } as any
-
-      return next
-    })
-  }
-
-  const remove: ModalState['remove'] = index => {
-    setStack(prev => {
-      const next = [...prev]
-
-      next.splice(index, 1)
-
-      return next
-    })
-  }
-
-  const value = useMemo<ModalState>(
-    () => ({ stack, open, close, remove }),
-    [stack]
-  )
-
-  return <ModalContext.Provider value={value}>{children}</ModalContext.Provider>
-}
-
-export function useModalStore(): ModalState {
-  const ctx = useContext(ModalContext)
-
-  if (!ctx) {
-    throw new Error('ModalProvider is missing in the component tree')
-  }
-
-  return ctx
-}
diff --git a/tools/src/templates/with-crud/client/utils/forgeAPI.ts b/tools/src/templates/with-crud/client/utils/forgeAPI.ts
index 729cc6ec1..4c3c1267e 100644
--- a/tools/src/templates/with-crud/client/utils/forgeAPI.ts
+++ b/tools/src/templates/with-crud/client/utils/forgeAPI.ts
@@ -1,5 +1,5 @@
 import routes from '@server/index'
-import routes from '@server/index'
+
 import { createForgeProxy } from '@lifeforge/shared'
 
 if (!import.meta.env.VITE_API_HOST) {