diff --git a/frappe-ui b/frappe-ui
index c0e44d13..858d8f7a 160000
--- a/frappe-ui
+++ b/frappe-ui
@@ -1 +1 @@
-Subproject commit c0e44d13bb7911bbc581ea36ac29fc216d907ed4
+Subproject commit 858d8f7aa521789d648195dc477d115abe6642d8
diff --git a/frontend/espresso_colors.js b/frontend/espresso_colors.js
deleted file mode 100644
index dbc82265..00000000
--- a/frontend/espresso_colors.js
+++ /dev/null
@@ -1,83 +0,0 @@
-const espressoColors = {
-	outline: {
-		"amber-1": "var(--outline-amber-1)",
-		"amber-2": "var(--outline-amber-2)",
-		"blue-1": "var(--outline-blue-1)",
-		"blue-2": "var(--outline-blue-2)",
-		"gray-1": "var(--outline-gray-1)",
-		"gray-2": "var(--outline-gray-2)",
-		"gray-3": "var(--outline-gray-3)",
-		"gray-4": "var(--outline-gray-4)",
-		"gray-5": "var(--outline-gray-5)",
-		"gray-modals": "var(--outline-gray-modals)",
-		"green-1": "var(--outline-green-1)",
-		"green-2": "var(--outline-green-2)",
-		"orange-1": "var(--outline-orange-1)",
-		"red-1": "var(--outline-red-1)",
-		"red-2": "var(--outline-red-2)",
-		"red-3": "var(--outline-red-3)",
-		"red-4": "var(--outline-red-4)",
-		white: "var(--outline-white)",
-	},
-	surface: {
-		"amber-1": "var(--surface-amber-1)",
-		"amber-2": "var(--surface-amber-2)",
-		"blue-1": "var(--surface-blue-1)",
-		"blue-2": "var(--surface-blue-2)",
-		cards: "var(--surface-cards)",
-		"cyan-1": "var(--surface-cyan-1)",
-		"gray-1": "var(--surface-gray-1)",
-		"gray-2": "var(--surface-gray-2)",
-		"gray-3": "var(--surface-gray-3)",
-		"gray-4": "var(--surface-gray-4)",
-		"gray-5": "var(--surface-gray-5)",
-		"gray-6": "var(--surface-gray-6)",
-		"gray-7": "var(--surface-gray-7)",
-		"green-1": "var(--surface-green-1)",
-		"green-2": "var(--surface-green-2)",
-		"green-3": "var(--surface-green-3)",
-		"menu-bar": "var(--surface-menu-bar)",
-		modal: "var(--surface-modal)",
-		"orange-1": "var(--surface-orange-1)",
-		"pink-1": "var(--surface-pink-1)",
-		"red-1": "var(--surface-red-1)",
-		"red-2": "var(--surface-red-2)",
-		"red-3": "var(--surface-red-3)",
-		"red-4": "var(--surface-red-4)",
-		"red-5": "var(--surface-red-5)",
-		"red-6": "var(--surface-red-6)",
-		selected: "var(--surface-selected)",
-		"violet-1": "var(--surface-violet-1)",
-		white: "var(--surface-white)",
-	},
-	"text-icons": {
-		"amber-1": "var(--text-icons-amber-1)",
-		"amber-2": "var(--text-icons-amber-2)",
-		"amber-3": "var(--text-icons-amber-3)",
-		"blue-1": "var(--text-icons-blue-1)",
-		"blue-2": "var(--text-icons-blue-2)",
-		"blue-3": "var(--text-icons-blue-3)",
-		"cyan-1": "var(--text-icons-cyan-1)",
-		"gray-1": "var(--text-icons-gray-1)",
-		"gray-2": "var(--text-icons-gray-2)",
-		"gray-3": "var(--text-icons-gray-3)",
-		"gray-4": "var(--text-icons-gray-4)",
-		"gray-5": "var(--text-icons-gray-5)",
-		"gray-6": "var(--text-icons-gray-6)",
-		"gray-7": "var(--text-icons-gray-7)",
-		"gray-8": "var(--text-icons-gray-8)",
-		"gray-9": "var(--text-icons-gray-9)",
-		"green-1": "var(--text-icons-green-1)",
-		"green-2": "var(--text-icons-green-2)",
-		"green-3": "var(--text-icons-green-3)",
-		"pink-1": "var(--text-icons-pink-1)",
-		"red-1": "var(--text-icons-red-1)",
-		"red-2": "var(--text-icons-red-2)",
-		"red-3": "var(--text-icons-red-3)",
-		"red-4": "var(--text-icons-red-4)",
-		"violet-1": "var(--text-icons-violet-1)",
-		white: "var(--text-icons-white)",
-	},
-};
-
-export default espressoColors;
diff --git a/frontend/package.json b/frontend/package.json
index a9a9a9a4..a36a7077 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -24,7 +24,7 @@
     "ace-builds": "^1.22.0",
     "autoprefixer": "^10.4.2",
     "feather-icons": "^4.28.0",
-    "frappe-ui": "^0.1.43",
+    "frappe-ui": "0.1.80",
     "opentype.js": "^1.3.4",
     "pinia": "^2.0.28",
     "postcss": "^8.4.5",
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index b1abe423..d1c21181 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -52,8 +52,8 @@ const isDark = useDark({
 [id^="headlessui-dialog-panel"] > div > div > div > div.mb-6.flex.items-center.justify-between > button {
 	@apply bg-surface-gray-1;
 	@apply hover:bg-surface-gray-3;
-	@apply stroke-text-icons-gray-8;
-	@apply hover:stroke-text-icons-gray-9;
+	@apply stroke-ink-gray-8;
+	@apply hover:stroke-ink-gray-9;
 	> svg {
 		@apply stroke-[0.2px];
 		@apply h-[14px];
@@ -63,7 +63,7 @@ const isDark = useDark({
 [id^="headlessui-dialog-panel"] > div,
 [id^="headlessui-dialog-panel"] .space-y-4 > p {
 	@apply bg-surface-white;
-	@apply text-text-icons-gray-8;
+	@apply text-ink-gray-8;
 }
 
 [id^="headlessui-dialog-panel"] header h3 {
@@ -82,7 +82,7 @@ const isDark = useDark({
 [id^="headlessui-combobox-options"] {
 	@apply bg-surface-white;
 	@apply dark:bg-surface-gray-1;
-	@apply text-text-icons-gray-7;
+	@apply text-ink-gray-7;
 
 	@apply overflow-y-auto;
 	-ms-overflow-style: none; /* IE and Edge */
diff --git a/frontend/src/colors.css b/frontend/src/colors.css
deleted file mode 100644
index 77a64741..00000000
--- a/frontend/src/colors.css
+++ /dev/null
@@ -1,152 +0,0 @@
-@layer base {
-	:root {
-		--outline-amber-1: rgb(254 237 169);
-		--outline-amber-2: rgb(251 204 85);
-		--outline-blue-1: rgb(167 215 253);
-		--outline-blue-2: rgb(2 137 247);
-		--outline-gray-1: rgb(237 237 237);
-		--outline-gray-2: rgb(226 226 226);
-		--outline-gray-3: rgb(199 199 199);
-		--outline-gray-4: rgb(153 153 153);
-		--outline-gray-5: rgb(56 56 56);
-		--outline-gray-modals: rgb(237 237 237);
-		--outline-green-1: rgb(185 238 204);
-		--outline-green-2: rgb(155 228 182);
-		--outline-orange-1: rgb(244 176 127);
-		--outline-red-1: rgb(255 216 216);
-		--outline-red-2: rgb(253 194 194);
-		--outline-red-3: rgb(247 149 150);
-		--outline-red-4: rgb(224 54 54);
-		--outline-white: rgb(255 255 255);
-		--surface-amber-1: rgb(255 247 211);
-		--surface-amber-2: rgb(219 119 6);
-		--surface-blue-1: rgb(230 244 255);
-		--surface-blue-2: rgb(2 137 247);
-		--surface-cards: rgb(255 255 255);
-		--surface-cyan-1: rgb(221 247 255);
-		--surface-gray-1: rgb(248 248 248);
-		--surface-gray-2: rgb(243 243 243);
-		--surface-gray-3: rgb(237 237 237);
-		--surface-gray-4: rgb(226 226 226);
-		--surface-gray-5: rgb(82 82 82);
-		--surface-gray-6: rgb(56 56 56);
-		--surface-gray-7: rgb(23 23 23);
-		--surface-green-1: rgb(242 253 244);
-		--surface-green-2: rgb(228 250 235);
-		--surface-green-3: rgb(48 166 109);
-		--surface-menu-bar: rgb(248 248 248);
-		--surface-modal: rgb(255 255 255);
-		--surface-orange-1: rgb(255 239 228);
-		--surface-pink-1: rgb(253 232 245);
-		--surface-red-1: rgb(255 231 231);
-		--surface-red-2: rgb(255 216 216);
-		--surface-red-3: rgb(253 194 194);
-		--surface-red-4: rgb(204 41 41);
-		--surface-red-5: rgb(181 42 42);
-		--surface-red-6: rgb(148 31 31);
-		--surface-selected: rgb(255 255 255);
-		--surface-violet-1: rgb(240 235 255);
-		--surface-white: rgb(255 255 255);
-		--text-icons-amber-1: rgb(255 247 211);
-		--text-icons-amber-2: rgb(231 153 19);
-		--text-icons-amber-3: rgb(219 119 6);
-		--text-icons-blue-1: rgb(230 244 255);
-		--text-icons-blue-2: rgb(0 123 224);
-		--text-icons-blue-3: rgb(0 92 163);
-		--text-icons-cyan-1: rgb(59 189 229);
-		--text-icons-gray-1: rgb(237 237 237);
-		--text-icons-gray-2: rgb(226 226 226);
-		--text-icons-gray-3: rgb(199 199 199);
-		--text-icons-gray-4: rgb(153 153 153);
-		--text-icons-gray-5: rgb(124 124 124);
-		--text-icons-gray-6: rgb(82 82 82);
-		--text-icons-gray-7: rgb(82 82 82);
-		--text-icons-gray-8: rgb(56 56 56);
-		--text-icons-gray-9: rgb(23 23 23);
-		--text-icons-green-1: rgb(242 253 244);
-		--text-icons-green-2: rgb(48 166 109);
-		--text-icons-green-3: rgb(22 121 76);
-		--text-icons-pink-1: rgb(227 74 166);
-		--text-icons-red-1: rgb(255 247 247);
-		--text-icons-red-2: rgb(247 149 150);
-		--text-icons-red-3: rgb(224 54 54);
-		--text-icons-red-4: rgb(204 41 41);
-		--text-icons-violet-1: rgb(104 70 227);
-		--text-icons-white: rgb(255 255 255);
-	}
-	[data-theme="dark"] {
-		--outline-amber-1: rgb(130 65 8);
-		--outline-amber-2: rgb(130 65 8);
-		--outline-blue-1: rgb(21 89 153);
-		--outline-blue-2: rgb(21 89 153);
-		--outline-gray-1: rgb(35 35 35);
-		--outline-gray-2: rgb(52 52 52);
-		--outline-gray-3: rgb(66 66 66);
-		--outline-gray-4: rgb(128 128 128);
-		--outline-gray-5: rgb(237 237 237);
-		--outline-gray-modals: rgb(52 52 52);
-		--outline-green-1: rgb(11 97 57);
-		--outline-green-2: rgb(10 63 39);
-		--outline-orange-1: rgb(130 57 6);
-		--outline-red-1: rgb(98 27 24);
-		--outline-red-2: rgb(76 24 24);
-		--outline-red-3: rgb(98 27 24);
-		--outline-red-4: rgb(156 32 32);
-		--outline-white: rgb(28 28 28);
-		--surface-amber-1: rgb(55 30 6);
-		--surface-amber-2: rgb(197 116 17);
-		--surface-blue-1: rgb(14 32 55);
-		--surface-blue-2: rgb(21 128 216);
-		--surface-cards: rgb(28 28 28);
-		--surface-cyan-1: rgb(11 37 45);
-		--surface-gray-1: rgb(35 35 35);
-		--surface-gray-2: rgb(255 255 255 / 0.1);
-		--surface-gray-3: rgb(255 255 255 / 0.18);
-		--surface-gray-4: rgb(66 66 66);
-		--surface-gray-5: rgb(212 212 212);
-		--surface-gray-6: rgb(175 175 175);
-		--surface-gray-7: rgb(212 212 212);
-		--surface-green-1: rgb(11 46 28);
-		--surface-green-2: rgb(10 63 39);
-		--surface-green-3: rgb(31 157 96);
-		--surface-menu-bar: rgb(15 15 15);
-		--surface-modal: rgb(35 35 35);
-		--surface-orange-1: rgb(64 31 7 / 0.8);
-		--surface-pink-1: rgb(71 20 50 / 0.8);
-		--surface-red-1: rgb(54 21 21 / 0.8);
-		--surface-red-2: rgb(76 24 24 / 0.9);
-		--surface-red-3: rgb(98 27 24);
-		--surface-red-4: rgb(228 56 56);
-		--surface-red-5: rgb(156 32 32);
-		--surface-red-6: rgb(98 27 24);
-		--surface-selected: rgb(255 255 255 / 0.1);
-		--surface-violet-1: rgb(34 28 66);
-		--surface-white: rgb(15 15 15);
-		--text-icons-amber-1: rgb(255 255 255);
-		--text-icons-amber-2: rgb(231 153 19);
-		--text-icons-amber-3: rgb(231 153 19);
-		--text-icons-blue-1: rgb(255 255 255);
-		--text-icons-blue-2: rgb(90 174 242);
-		--text-icons-blue-3: rgb(140 193 236);
-		--text-icons-cyan-1: rgb(60 184 220);
-		--text-icons-gray-1: rgb(35 35 35);
-		--text-icons-gray-2: rgb(66 66 66);
-		--text-icons-gray-3: rgb(113 113 113);
-		--text-icons-gray-4: rgb(113 113 113);
-		--text-icons-gray-5: rgb(128 128 128);
-		--text-icons-gray-6: rgb(153 153 153);
-		--text-icons-gray-7: rgb(175 175 175);
-		--text-icons-gray-8: rgb(212 212 212);
-		--text-icons-gray-9: rgb(248 248 248);
-		--text-icons-green-1: rgb(255 255 255);
-		--text-icons-green-2: rgb(53 174 116);
-		--text-icons-green-3: rgb(120 215 169);
-		--text-icons-pink-1: rgb(227 89 171);
-		--text-icons-red-1: rgb(255 255 255);
-		--text-icons-red-2: rgb(98 27 24);
-		--text-icons-red-3: rgb(235 77 82);
-		--text-icons-red-4: rgb(252 116 116);
-		--text-icons-violet-1: rgb(157 124 234);
-		--text-icons-white: rgb(15 15 15);
-	}
-}
\ No newline at end of file
diff --git a/frontend/src/components/BlockLayers.vue b/frontend/src/components/BlockLayers.vue
index 6f4dec13..0752f04f 100644
--- a/frontend/src/components/BlockLayers.vue
+++ b/frontend/src/components/BlockLayers.vue
@@ -14,7 +14,7 @@
 							:data-block-layer-id="element.blockId"
 							:title="element.blockId"
 							@contextmenu.prevent.stop="onContextMenu"
-							class="min-w-24 cursor-pointer overflow-hidden rounded border border-transparent bg-surface-white bg-opacity-50 text-base text-text-icons-gray-7"
+							class="min-w-24 cursor-pointer overflow-hidden rounded border border-transparent bg-surface-white bg-opacity-50 text-base text-ink-gray-7"
 							@click.stop="
 								store.activeCanvas?.history.pause();
 								store.selectBlock(element, $event, false, true);
@@ -30,7 +30,7 @@
 								}">
 								<FeatherIcon
 									:name="isExpanded(element) ? 'chevron-down' : 'chevron-right'"
-									class="ml-[-18px] h-3 w-3 text-text-icons-gray-4"
+									class="ml-[-18px] h-3 w-3 text-ink-gray-4"
 									v-if="element.children && element.children.length && !element.isRoot()"
 									@click.stop="toggleExpanded(element)" />
 								<FeatherIcon
@@ -67,7 +67,7 @@
 									:name="element.isVisible() ? 'eye' : 'eye-off'"
 									class="ml-auto mr-2 hidden h-3 w-3 group-hover:block"
 									@click.stop="element.toggleVisibility()" />
-								<span v-if="element.isRoot()" class="ml-auto mr-2 text-sm capitalize text-text-icons-gray-5">
+								<span v-if="element.isRoot()" class="ml-auto mr-2 text-sm capitalize text-ink-gray-5">
 									{{ store.activeBreakpoint }}
 								</span>
 							</span>
diff --git a/frontend/src/components/BuilderBlockTemplates.vue b/frontend/src/components/BuilderBlockTemplates.vue
index 3d50b3db..c2f0681c 100644
--- a/frontend/src/components/BuilderBlockTemplates.vue
+++ b/frontend/src/components/BuilderBlockTemplates.vue
@@ -34,7 +34,7 @@
 							}">
 							<img :src="blockTemplate.preview" />
 						</div>
-						<p class="text-sm text-text-icons-gray-6">
+						<p class="text-sm text-ink-gray-6">
 							{{ blockTemplate.template_name }}
 						</p>
 					</div>
diff --git a/frontend/src/components/BuilderCanvas.vue b/frontend/src/components/BuilderCanvas.vue
index 25410bd2..e0e8a004 100644
--- a/frontend/src/components/BuilderCanvas.vue
+++ b/frontend/src/components/BuilderCanvas.vue
@@ -4,7 +4,7 @@
 		<div class="overlay absolute" id="overlay" ref="overlay" />
 		<Transition name="fade">
 			<div
-				class="absolute bottom-0 left-0 right-0 top-0 z-[19] grid w-full place-items-center bg-surface-gray-1 p-10 text-text-icons-gray-5"
+				class="absolute bottom-0 left-0 right-0 top-0 z-[19] grid w-full place-items-center bg-surface-gray-1 p-10 text-ink-gray-5"
 				v-show="store.settingPage">
 				<LoadingIcon></LoadingIcon>
 			</div>
@@ -31,8 +31,8 @@
 						:name="breakpoint.icon"
 						class="h-8 w-6"
 						:class="{
-							'text-text-icons-gray-8': breakpoint.visible,
-							'text-text-icons-gray-3': !breakpoint.visible,
+							'text-ink-gray-8': breakpoint.visible,
+							'text-ink-gray-3': !breakpoint.visible,
 						}" />
 				</div>
 			</div>
diff --git a/frontend/src/components/BuilderLeftPanel.vue b/frontend/src/components/BuilderLeftPanel.vue
index 24085f92..8a9a4dce 100644
--- a/frontend/src/components/BuilderLeftPanel.vue
+++ b/frontend/src/components/BuilderLeftPanel.vue
@@ -4,9 +4,9 @@
 			<button
 				v-for="option of leftPanelOptions"
 				:key="option.value"
-				class="flex size-8 items-center justify-center rounded text-text-icons-gray-7 hover:bg-surface-gray-2 focus:!bg-surface-gray-3"
+				class="flex size-8 items-center justify-center rounded text-ink-gray-7 hover:bg-surface-gray-2 focus:!bg-surface-gray-3"
 				:class="{
-					'bg-surface-gray-3 text-text-icons-gray-9': store.leftPanelActiveTab === option.value,
+					'bg-surface-gray-3 text-ink-gray-9': store.leftPanelActiveTab === option.value,
 				}"
 				@click.stop="setActiveTab(option.value as LeftSidebarTabOption)"
 				:title="option.label">
@@ -71,6 +71,7 @@
 import ComponentIcon from "@/components/Icons/Component.vue";
 import LayersIcon from "@/components/Icons/Layers.vue";
 import PlusIcon from "@/components/Icons/Plus.vue";
+import PageScript from "@/components/PageScript.vue";
 import Block from "@/utils/block";
 import convertHTMLToBlocks from "@/utils/convertHTMLToBlocks";
 import { createResource } from "frappe-ui";
@@ -81,7 +82,6 @@ import BuilderAssets from "./BuilderAssets.vue";
 import BuilderBlockTemplates from "./BuilderBlockTemplates.vue";
 import BuilderCanvas from "./BuilderCanvas.vue";
 import PanelResizer from "./PanelResizer.vue";
-import PageScript from "@/components/PageScript.vue";
 
 const pageCanvas = inject("pageCanvas") as Ref<InstanceType<typeof BuilderCanvas> | null>;
 const fragmentCanvas = inject("fragmentCanvas") as Ref<InstanceType<typeof BuilderCanvas> | null>;
diff --git a/frontend/src/components/BuilderToolbar.vue b/frontend/src/components/BuilderToolbar.vue
index 10103229..31d87b62 100644
--- a/frontend/src/components/BuilderToolbar.vue
+++ b/frontend/src/components/BuilderToolbar.vue
@@ -1,6 +1,6 @@
 <template>
 	<div
-		class="toolbar flex items-center justify-center border-b-[1px] border-outline-gray-1 bg-surface-white px-2 py-1"
+		class="toolbar border-outline border-outline flex items-center justify-center border-b-[1px] border-outline-gray-1 bg-surface-white px-2 py-1"
 		ref="toolbar">
 		<div class="absolute left-3 flex items-center gap-5">
 			<MainMenu @showSettings="() => (showSettingsDialog = true)"></MainMenu>
@@ -17,7 +17,7 @@
 					<BuilderButton
 						variant="ghost"
 						:icon="mode.icon"
-						class="text-text-icons-gray-7 hover:bg-surface-gray-2 focus:!bg-surface-gray-3 [&[active='true']]:bg-surface-gray-3 [&[active='true']]:text-text-icons-gray-9"
+						class="text-ink-gray-7 hover:bg-surface-gray-2 focus:!bg-surface-gray-3 [&[active='true']]:bg-surface-gray-3 [&[active='true']]:text-ink-gray-9"
 						@click="() => (store.mode = mode.mode as BuilderMode)"
 						:active="store.mode === mode.mode"></BuilderButton>
 				</Tooltip>
@@ -26,8 +26,8 @@
 		<div>
 			<Popover transition="default" placement="bottom" popoverClass="!absolute top-0 !mt-[20px]">
 				<template #target="{ togglePopover, isOpen }">
-					<div class="flex cursor-pointer items-center gap-2 p-2 text-text-icons-gray-8">
-						<div class="flex h-6 items-center text-base text-text-icons-gray-6" v-if="!store.activePage">
+					<div class="flex cursor-pointer items-center gap-2 p-2 text-ink-gray-8">
+						<div class="flex h-6 items-center text-base text-ink-gray-6" v-if="!store.activePage">
 							Loading...
 						</div>
 						<div @click="togglePopover" v-else class="flex items-center gap-1">
@@ -39,18 +39,16 @@
 							</Tooltip>
 							<Tooltip text="This page has limited access" :hoverDelay="0.6">
 								<AuthenticatedUserIcon
-									class="size-4 text-text-icons-amber-3"
+									class="size-4 text-ink-amber-3"
 									v-if="
 										store.activePage?.published && store.activePage?.authenticated_access
 									"></AuthenticatedUserIcon>
 							</Tooltip>
-							<span class="max-w-48 truncate text-base text-text-icons-gray-8">
+							<span class="max-w-48 truncate text-base text-ink-gray-8">
 								{{ store?.activePage?.page_title || "My Page" }}
 							</span>
 							-
-							<span
-								class="flex max-w-96 truncate text-base text-text-icons-gray-5"
-								v-html="routeString"></span>
+							<span class="flex max-w-96 truncate text-base text-ink-gray-5" v-html="routeString"></span>
 						</div>
 						<FeatherIcon
 							name="external-link"
@@ -110,7 +108,7 @@
 			<Tooltip text="Settings" :hoverDelay="0.6">
 				<SettingsGearIcon
 					@click="showSettingsDialog = true"
-					class="size-4 cursor-pointer text-text-icons-gray-8"></SettingsGearIcon>
+					class="size-4 cursor-pointer text-ink-gray-8"></SettingsGearIcon>
 			</Tooltip>
 			<Dialog
 				v-model="showSettingsDialog"
@@ -128,7 +126,7 @@
 
 			<router-link :to="{ name: 'preview', params: { pageId: store.selectedPage } }" title="Preview">
 				<Tooltip text="Preview" :hoverDelay="0.6">
-					<PlayIcon class="h-[18px] w-[18px] cursor-pointer text-text-icons-gray-8"></PlayIcon>
+					<PlayIcon class="h-[18px] w-[18px] cursor-pointer text-ink-gray-8"></PlayIcon>
 				</Tooltip>
 			</router-link>
 			<BuilderButton
@@ -142,9 +140,9 @@
 				"
 				class="border-0"
 				:class="{
-					'bg-surface-gray-7 !text-text-icons-white hover:bg-surface-gray-6':
+					'bg-surface-gray-7 !text-ink-white hover:bg-surface-gray-6':
 						!publishing && store.activePage?.draft_blocks,
-					'dark:bg-surface-gray-2 dark:text-text-icons-gray-4': !store.activePage?.draft_blocks,
+					'dark:bg-surface-gray-2 dark:text-ink-gray-4': !store.activePage?.draft_blocks,
 				}"
 				:loading="publishing">
 				{{ publishing ? "Publishing" : "Publish" }}
diff --git a/frontend/src/components/Controls/Autocomplete.vue b/frontend/src/components/Controls/Autocomplete.vue
index a8bf3b7a..54aa4628 100644
--- a/frontend/src/components/Controls/Autocomplete.vue
+++ b/frontend/src/components/Controls/Autocomplete.vue
@@ -12,7 +12,7 @@
 			:multiple="multiple">
 			<ComboboxButton v-show="false" ref="comboboxButton"></ComboboxButton>
 			<div
-				class="form-input flex h-7 w-full items-center justify-between gap-2 rounded border-outline-gray-1 bg-surface-gray-1 p-0 text-sm text-text-icons-gray-8 transition-colors hover:border-outline-gray-2 hover:bg-surface-gray-1">
+				class="form-input flex h-7 w-full items-center justify-between gap-2 rounded border-outline-gray-1 bg-surface-gray-1 p-0 text-sm text-ink-gray-8 transition-colors hover:border-outline-gray-2 hover:bg-surface-gray-1">
 				<!-- {{ displayValue }} -->
 				<ComboboxInput
 					autocomplete="off"
@@ -26,7 +26,7 @@
 					@change="query = $event.target.value"
 					:displayValue="getDisplayValue"
 					:placeholder="!modelValue ? placeholder : null"
-					class="h-full w-full rounded border-none bg-transparent pl-2 pr-5 text-base focus:ring-2 focus:ring-outline-gray-3" />
+					class="focus:ring-outline-gray-3 h-full w-full rounded border-none bg-transparent pl-2 pr-5 text-base focus:ring-2" />
 			</div>
 			<ComboboxOptions
 				class="absolute right-0 z-50 w-full overflow-y-auto rounded-lg border border-outline-gray-2 bg-surface-white p-0 shadow-2xl"
@@ -43,7 +43,7 @@
 						class="flex items-center">
 						<span
 							v-if="String(option.value).startsWith('_separator')"
-							class="flex w-full items-center gap-2 px-2.5 pb-2 pt-3 text-xs font-medium !text-text-icons-gray-5">
+							class="flex w-full items-center gap-2 px-2.5 pb-2 pt-3 text-xs font-medium !text-ink-gray-5">
 							{{ option.label }}
 						</span>
 						<li
@@ -67,7 +67,7 @@
 					<BuilderButton
 						v-else
 						:iconLeft="actionButton.icon"
-						class="w-full rounded-none text-xs text-text-icons-gray-8"
+						class="w-full rounded-none text-xs text-ink-gray-8"
 						@click="actionButton.handler">
 						{{ actionButton.label }}
 					</BuilderButton>
@@ -75,7 +75,7 @@
 			</ComboboxOptions>
 		</Combobox>
 		<div
-			class="absolute right-[1px] top-[3px] cursor-pointer p-1 text-text-icons-gray-4 hover:text-text-icons-gray-5"
+			class="absolute right-[1px] top-[3px] cursor-pointer p-1 text-ink-gray-4 hover:text-ink-gray-5"
 			@click="clearValue"
 			v-show="modelValue">
 			<CrossIcon />
diff --git a/frontend/src/components/Controls/BuilderButton.vue b/frontend/src/components/Controls/BuilderButton.vue
index 7c7fd5eb..d1fb00c9 100644
--- a/frontend/src/components/Controls/BuilderButton.vue
+++ b/frontend/src/components/Controls/BuilderButton.vue
@@ -16,14 +16,14 @@ const classes = computed(() => {
 	if (props.variant === "solid") {
 		_classes.push([
 			"bg-surface-gray-7",
-			"text-text-icons-white",
+			"text-ink-white",
 			"hover:bg-surface-gray-6",
 			"active:bg-surface-gray-5",
 		]);
 	} else if (props.variant === "subtle") {
 		_classes.push([
 			"bg-surface-gray-2",
-			"text-text-icons-gray-7",
+			"text-ink-gray-7",
 			"hover:bg-surface-gray-3",
 			"active:bg-surface-gray-4",
 		]);
diff --git a/frontend/src/components/Controls/CodeEditor.vue b/frontend/src/components/Controls/CodeEditor.vue
index cfd30b8a..57e1f483 100644
--- a/frontend/src/components/Controls/CodeEditor.vue
+++ b/frontend/src/components/Controls/CodeEditor.vue
@@ -4,13 +4,13 @@
 		:style="{
 			height: height,
 		}">
-		<span class="text-p-sm font-medium text-text-icons-gray-8" v-if="label">
+		<span class="text-p-sm font-medium text-ink-gray-8" v-if="label">
 			{{ label }}
 		</span>
 		<div
 			ref="editor"
 			class="h-auto flex-1 overflow-hidden overscroll-none !rounded border border-outline-gray-2 bg-surface-gray-2 dark:bg-gray-900" />
-		<span class="mt-1 text-p-xs text-text-icons-gray-6" v-show="description" v-html="description"></span>
+		<span class="mt-1 text-p-xs text-ink-gray-6" v-show="description" v-html="description"></span>
 		<BuilderButton v-if="showSaveButton" @click="emit('save', aceEditor?.getValue())" class="mt-3">
 			Save
 		</BuilderButton>
diff --git a/frontend/src/components/Controls/FontUploader.vue b/frontend/src/components/Controls/FontUploader.vue
index ed43368e..ee9ac56a 100644
--- a/frontend/src/components/Controls/FontUploader.vue
+++ b/frontend/src/components/Controls/FontUploader.vue
@@ -1,7 +1,7 @@
 <template>
 	<BuilderButton
 		iconLeft="plus"
-		class="w-full rounded-none text-xs text-text-icons-gray-8"
+		class="w-full rounded-none text-xs text-ink-gray-8"
 		@click="openFileSelector">
 		Upload Font
 	</BuilderButton>
diff --git a/frontend/src/components/Controls/Input.vue b/frontend/src/components/Controls/Input.vue
index b8c8c215..b616e28a 100644
--- a/frontend/src/components/Controls/Input.vue
+++ b/frontend/src/components/Controls/Input.vue
@@ -13,7 +13,7 @@
 			</template>
 		</FormControl>
 		<div
-			class="absolute bottom-[3px] right-[1px] cursor-pointer p-1 text-text-icons-gray-4 hover:text-text-icons-gray-5"
+			class="absolute bottom-[3px] right-[1px] cursor-pointer p-1 text-ink-gray-4 hover:text-ink-gray-5"
 			@click="clearValue"
 			v-if="!['select', 'checkbox'].includes(type) && !hideClearButton"
 			v-show="data">
@@ -40,13 +40,13 @@ const classes = computed(() => {
 		_classes.push("[&>div>input]:pr-7");
 	}
 	if (props.type === "checkbox") {
-		_classes.push("[&>label]:text-text-icons-gray-7");
+		_classes.push("[&>label]:text-ink-gray-7");
 	}
 	if (props.type === "select") {
 		_classes.push(
 			...[
-				"[&>div>select]:text-text-icons-gray-8",
-				"[&>label]:text-text-icons-gray-7",
+				"[&>div>select]:text-ink-gray-8",
+				"[&>label]:text-ink-gray-7",
 				"[&>div>select]:border-outline-gray-1",
 				"[&>div>select]:bg-surface-gray-2",
 				"[&>div>select]:pr-7",
@@ -60,9 +60,9 @@ const classes = computed(() => {
 	} else if (props.type === "textarea") {
 		_classes.push([
 			"[&>div>textarea]:border-outline-gray-1",
-			"[&>label]:text-text-icons-gray-7",
+			"[&>label]:text-ink-gray-7",
 			"[&>div>textarea]:!bg-surface-gray-2",
-			"[&>div>textarea]:text-text-icons-gray-8",
+			"[&>div>textarea]:text-ink-gray-8",
 			"[&>div>textarea]:focus:border-outline-gray-3",
 			"[&>div>textarea]:focus:bg-surface-gray-1",
 			"[&>div>textarea]:hover:!border-outline-gray-2",
@@ -73,10 +73,10 @@ const classes = computed(() => {
 		]);
 	} else {
 		_classes.push([
-			"[&>label]:text-text-icons-gray-7",
+			"[&>label]:text-ink-gray-7",
 			"[&>div>input]:border-outline-gray-1",
 			"[&>div>input]:bg-surface-gray-2",
-			"[&>div>input]:text-text-icons-gray-8",
+			"[&>div>input]:text-ink-gray-8",
 			"text-sm",
 			"[&>p]:text-p-xs",
 			"[&>div>input]:hover:!border-outline-gray-2",
diff --git a/frontend/src/components/Controls/Switch.vue b/frontend/src/components/Controls/Switch.vue
index 546710a8..f4dde290 100644
--- a/frontend/src/components/Controls/Switch.vue
+++ b/frontend/src/components/Controls/Switch.vue
@@ -1,7 +1,7 @@
 <template>
 	<Switch
 		v-model="value"
-		class="[&>button>span]:bg-surface-gray-1 [&>span>[id^=headlessui-description]]:text-text-icons-gray-5 [&>span>[id^=headlessui-label]]:text-text-icons-gray-9"
+		class="[&>button>span]:bg-surface-gray-1 [&>span>[id^=headlessui-description]]:text-ink-gray-5 [&>span>[id^=headlessui-label]]:text-ink-gray-9"
 		:class="{
 			'[&>button]:bg-surface-gray-3 hover:[&>button]:!bg-surface-gray-4': !value,
 			'[&>button]:bg-surface-gray-6 hover:[&>button]:!bg-surface-gray-5': value,
diff --git a/frontend/src/components/PageClientScriptManager.vue b/frontend/src/components/PageClientScriptManager.vue
index 0117863c..e0c4c117 100644
--- a/frontend/src/components/PageClientScriptManager.vue
+++ b/frontend/src/components/PageClientScriptManager.vue
@@ -7,8 +7,8 @@
 						v-for="script in attachedScriptResource.data"
 						href="#"
 						:class="{
-							'text-text-icons-gray-5': activeScript !== script,
-							'font-medium text-text-icons-gray-8': activeScript === script,
+							'text-ink-gray-5': activeScript !== script,
+							'font-medium text-ink-gray-8': activeScript === script,
 						}"
 						@click="selectScript(script)"
 						class="group flex items-center justify-between gap-1 text-sm last-of-type:mb-2">
@@ -49,14 +49,14 @@
 						</Dropdown>
 					</div>
 				</div>
-				<div class="text-xs leading-4 text-text-icons-gray-6">
+				<div class="text-xs leading-4 text-ink-gray-6">
 					<b>Note:</b>
 					All client scripts are executed in preview mode and on published pages.
 				</div>
 			</div>
 		</div>
 		<div
-			class="flex h-full w-full items-center justify-center rounded bg-surface-gray-1 text-base text-text-icons-gray-6"
+			class="flex h-full w-full items-center justify-center rounded bg-surface-gray-1 text-base text-ink-gray-6"
 			v-show="!activeScript">
 			Add Script
 		</div>
diff --git a/frontend/src/components/PageOptions.vue b/frontend/src/components/PageOptions.vue
index 45e81e53..fca5ef66 100644
--- a/frontend/src/components/PageOptions.vue
+++ b/frontend/src/components/PageOptions.vue
@@ -20,7 +20,7 @@
 			<CollapsibleSection
 				sectionName="URL Variables"
 				v-if="dynamicVariables.length"
-				class="w-full [&>div>h3]:!text-xs [&>div>h3]:!text-text-icons-gray-5">
+				class="w-full [&>div>h3]:!text-xs [&>div>h3]:!text-ink-gray-5">
 				<BuilderInput
 					v-for="(variable, index) in dynamicVariables"
 					:key="index"
diff --git a/frontend/src/components/Settings.vue b/frontend/src/components/Settings.vue
index 99114e80..d7bc6807 100644
--- a/frontend/src/components/Settings.vue
+++ b/frontend/src/components/Settings.vue
@@ -1,17 +1,17 @@
 <template>
 	<div class="flex h-[90vh] max-h-[800px] overflow-hidden">
 		<div class="flex w-48 shrink-0 flex-col gap-5 bg-surface-gray-1 p-4 px-2">
-			<span class="px-2 text-lg font-semibold text-text-icons-gray-9">Settings</span>
+			<span class="px-2 text-lg font-semibold text-ink-gray-9">Settings</span>
 			<div class="flex flex-col" v-for="(item, index) in settingsSidebarItems" :key="index">
-				<span class="mb-2 px-2 text-base font-medium text-text-icons-gray-5">
+				<span class="mb-2 px-2 text-base font-medium text-ink-gray-5">
 					{{ item.title }}
 				</span>
 				<a
 					@click="!link.disabled && selectItem(link.value)"
-					class="flex cursor-pointer items-center gap-2 rounded p-2 py-[5px] text-base text-text-icons-gray-8"
+					class="flex cursor-pointer items-center gap-2 rounded p-2 py-[5px] text-base text-ink-gray-8"
 					:class="{
 						'bg-surface-selected shadow-sm': selectedItem === link.value,
-						'!text-text-icons-gray-3': link.disabled,
+						'!text-ink-gray-3': link.disabled,
 					}"
 					v-for="link in item.items">
 					<component v-if="link?.icon" :is="link?.icon" class="h-4 w-4" />
diff --git a/frontend/src/components/Settings/GlobalGeneral.vue b/frontend/src/components/Settings/GlobalGeneral.vue
index cced2de6..d4398e29 100644
--- a/frontend/src/components/Settings/GlobalGeneral.vue
+++ b/frontend/src/components/Settings/GlobalGeneral.vue
@@ -12,9 +12,9 @@
 				}
 			"
 			:options="routeOptions"></InlineInput>
-		<hr class="w-full border-surface-gray-2" />
+		<hr class="w-full border-outline-gray-2" />
 		<div class="flex flex-col justify-between gap-5">
-			<span class="text-lg font-semibold text-text-icons-gray-9">Favicon</span>
+			<span class="text-lg font-semibold text-ink-gray-9">Favicon</span>
 			<div class="flex flex-1 gap-5">
 				<div class="flex items-center justify-center rounded border border-outline-gray-1 px-20 py-5">
 					<img
@@ -29,13 +29,13 @@
 						:image_url="builderSettings.doc?.favicon"
 						@upload="(url: string) => store.updateBuilderSettings('favicon', url)"
 						@remove="() => store.updateBuilderSettings('favicon', '')" />
-					<span class="text-p-sm text-text-icons-gray-6">
+					<span class="text-p-sm text-ink-gray-6">
 						Appears next to the title in your browser tab. Recommended size is 32x32 px in PNG or ICO
 					</span>
 				</div>
 			</div>
 		</div>
-		<hr class="w-full border-surface-gray-2" />
+		<hr class="w-full border-outline-gray-2" />
 		<Switch
 			size="sm"
 			label="Enable View Tracking"
diff --git a/frontend/src/components/Settings/GlobalRedirects.vue b/frontend/src/components/Settings/GlobalRedirects.vue
index 6ebc7bd8..2f7179ce 100644
--- a/frontend/src/components/Settings/GlobalRedirects.vue
+++ b/frontend/src/components/Settings/GlobalRedirects.vue
@@ -16,7 +16,7 @@
 					placeholder="To" />
 			</div>
 			<button
-				class="flex w-fit cursor-pointer items-center gap-2 px-[2px] py-1 text-base text-text-icons-gray-5"
+				class="flex w-fit cursor-pointer items-center gap-2 px-[2px] py-1 text-base text-ink-gray-5"
 				@click="addRedirect">
 				<FeatherIcon name="plus" class="size-4" />
 				<span>Add Redirect</span>
@@ -24,19 +24,19 @@
 		</div>
 		<div class="h-full overflow-hidden text-sm">
 			<div
-				class="sticky top-0 flex rounded-t-md border-b border-outline-gray-1 bg-surface-gray-1 py-2 text-text-icons-gray-5">
+				class="sticky top-0 flex rounded-t-md border-b border-outline-gray-1 bg-surface-gray-1 py-2 text-ink-gray-5">
 				<span class="w-1/2 pl-2">From URL</span>
 				<span class="w-1/2 pl-2">To URL</span>
 			</div>
 			<div class="h-[calc(100%-115px)] overflow-y-auto">
 				<div
-					class="group flex items-center rounded-sm border-b border-outline-gray-1 px-2 py-2 text-sm text-text-icons-gray-7 hover:bg-surface-gray-2"
+					class="group flex items-center rounded-sm border-b border-outline-gray-1 px-2 py-2 text-sm text-ink-gray-7 hover:bg-surface-gray-2"
 					v-for="row in rows">
 					<code class="w-1/2 truncate">{{ row.from }}</code>
 					<code class="ml-3 w-1/2 truncate pl-2">{{ row.to }}</code>
 					<FeatherIcon
 						name="trash"
-						class="size-3 cursor-pointer text-text-icons-gray-5"
+						class="size-3 cursor-pointer text-ink-gray-5"
 						@click="deleteRedirect(row.id)" />
 				</div>
 			</div>
diff --git a/frontend/src/components/Settings/PageGeneral.vue b/frontend/src/components/Settings/PageGeneral.vue
index 2b90de2f..15bf4c6c 100644
--- a/frontend/src/components/Settings/PageGeneral.vue
+++ b/frontend/src/components/Settings/PageGeneral.vue
@@ -19,27 +19,27 @@
 				</div>
 				<div class="flex flex-col gap-3 text-base">
 					<div class="flex">
-						<span class="w-20 text-text-icons-gray-6">URL</span>
-						<a class="font-medium text-text-icons-gray-8 hover:underline" target="_blank" :href="fullURL">
+						<span class="w-20 text-ink-gray-6">URL</span>
+						<a class="font-medium text-ink-gray-8 hover:underline" target="_blank" :href="fullURL">
 							{{ fullURL }}
 						</a>
 					</div>
 					<div class="flex items-center">
-						<span class="w-20 text-text-icons-gray-6">Status</span>
+						<span class="w-20 text-ink-gray-6">Status</span>
 						<div class="flex items-center gap-2">
-							<span class="flex items-center gap-2 text-base text-text-icons-gray-9">
+							<span class="flex items-center gap-2 text-base text-ink-gray-9">
 								<FeatherIcon
 									name="check-circle"
-									class="size-4 text-text-icons-green-3"
+									class="size-4 text-ink-green-3"
 									v-if="store.activePage?.published && !store.activePage.authenticated_access" />
 								<AuthenticatedUserIcon
-									class="size-4 text-text-icons-amber-3"
+									class="size-4 text-ink-amber-3"
 									v-else-if="
 										store.activePage?.published && store.activePage?.authenticated_access
 									"></AuthenticatedUserIcon>
 								<FeatherIcon
 									name="alert-circle"
-									class="size-4 text-text-icons-gray-4"
+									class="size-4 text-ink-gray-4"
 									v-else-if="!store.activePage?.published" />
 								{{
 									store.activePage?.published
@@ -63,10 +63,10 @@
 					</div>
 				</div>
 				<!-- favicon -->
-				<hr class="w-full border-surface-gray-2" />
+				<hr class="w-full border-outline-gray-2" />
 
 				<div class="flex flex-col justify-between gap-5">
-					<span class="text-lg font-semibold text-text-icons-gray-9">Favicon</span>
+					<span class="text-lg font-semibold text-ink-gray-9">Favicon</span>
 					<div class="flex flex-1 gap-5">
 						<div class="flex items-center justify-center rounded border border-outline-gray-1 px-20 py-5">
 							<img
@@ -85,19 +85,19 @@
 								:image_url="store.activePage?.favicon"
 								@upload="(url: string) => store.updateActivePage('favicon', url)"
 								@remove="() => store.updateActivePage('favicon', '')" />
-							<span class="text-p-sm text-text-icons-gray-6">
+							<span class="text-p-sm text-ink-gray-6">
 								Appears next to the title in your browser tab. Recommended size is 32x32 px in PNG or ICO
 							</span>
 						</div>
 					</div>
 				</div>
 				<div class="flex flex-col gap-4">
-					<hr class="w-full border-surface-gray-2" />
+					<hr class="w-full border-outline-gray-2" />
 					<!-- homepage -->
 					<div class="flex items-center justify-between">
 						<div class="flex flex-col gap-2">
-							<span class="text-base font-medium text-text-icons-gray-9">Homepage</span>
-							<p class="text-base text-text-icons-gray-5">Set current page as Homepage</p>
+							<span class="text-base font-medium text-ink-gray-9">Homepage</span>
+							<p class="text-base text-ink-gray-5">Set current page as Homepage</p>
 						</div>
 						<Tooltip
 							:text="
@@ -105,22 +105,12 @@
 									? 'Unset this page as the homepage'
 									: 'Set this page as the homepage'
 							">
-							<BuilderButton
-								variant="subtle"
-								@click="
-									() => {
-										if (store.isHomePage(store.activePage)) {
-											store.unsetHomePage();
-										} else {
-											store.setHomePage(store.activePage?.route as string);
-										}
-									}
-								">
+							<Button variant="outline" @click.stop="handleClick">
 								{{ store.isHomePage(store.activePage) ? "Unset Homepage" : "Set As Homepage" }}
-							</BuilderButton>
+							</Button>
 						</Tooltip>
 					</div>
-					<hr class="w-full border-surface-gray-2" />
+					<hr class="w-full border-outline-gray-2" />
 					<Switch
 						size="sm"
 						label="Protected Page"
@@ -128,7 +118,7 @@
 						description="Only logged-in users can access this page"
 						:modelValue="Boolean(store.activePage?.authenticated_access)"
 						@update:modelValue="(val: Boolean) => store.updateActivePage('authenticated_access', val)" />
-					<hr class="w-full border-surface-gray-2" />
+					<hr class="w-full border-outline-gray-2" />
 					<Switch
 						size="sm"
 						label="Disable Indexing"
@@ -146,7 +136,7 @@ import Switch from "@/components/Controls/Switch.vue";
 import AuthenticatedUserIcon from "@/components/Icons/AuthenticatedUser.vue";
 import { builderSettings } from "@/data/builderSettings";
 import useStore from "@/store";
-import { Tooltip } from "frappe-ui";
+import { Button, Tooltip } from "frappe-ui";
 import FeatherIcon from "frappe-ui/src/components/FeatherIcon.vue";
 import { computed } from "vue";
 // check route for page id
@@ -155,4 +145,8 @@ const store = useStore();
 const fullURL = computed(
 	() => window.location.origin + (store.activePage?.route ? "/" + store.activePage.route : ""),
 );
+
+const handleClick = () => {
+	console.log("clicked");
+};
 </script>
diff --git a/frontend/src/components/Settings/PageMeta.vue b/frontend/src/components/Settings/PageMeta.vue
index 7278e444..b779d9a3 100644
--- a/frontend/src/components/Settings/PageMeta.vue
+++ b/frontend/src/components/Settings/PageMeta.vue
@@ -28,18 +28,18 @@
 			</div>
 			<!-- preview -->
 			<div class="flex h-fit w-72 flex-shrink-0 flex-col justify-between gap-1">
-				<span class="text-sm text-text-icons-gray-7">Social Preview</span>
+				<span class="text-sm text-ink-gray-7">Social Preview</span>
 				<div class="flex flex-1 flex-col rounded border border-outline-gray-2">
 					<img
 						:src="store.activePage?.meta_image || store.activePage?.preview"
 						alt=""
 						class="h-40 w-full rounded-t object-cover" />
 					<div class="flex flex-1 flex-col gap-1 border-t border-outline-gray-2 p-2">
-						<span class="text-base text-text-icons-gray-6">{{ store.activePage?.route }}</span>
-						<span class="mt-2 text-base font-medium text-text-icons-gray-9">
+						<span class="text-base text-ink-gray-6">{{ store.activePage?.route }}</span>
+						<span class="mt-2 text-base font-medium text-ink-gray-9">
 							{{ store.activePage?.page_title }}
 						</span>
-						<span class="text-base leading-5 text-text-icons-gray-6">
+						<span class="text-base leading-5 text-ink-gray-6">
 							{{ store.activePage?.meta_description }}
 						</span>
 					</div>
diff --git a/frontend/src/components/Settings/PageRedirects.vue b/frontend/src/components/Settings/PageRedirects.vue
index ba3d8d84..99597724 100644
--- a/frontend/src/components/Settings/PageRedirects.vue
+++ b/frontend/src/components/Settings/PageRedirects.vue
@@ -3,12 +3,10 @@
 		<div class="flex flex-col justify-between gap-5">
 			<div class="flex items-end gap-4">
 				<BuilderInput type="text" label="From URL" v-model="redirectMap.from" :hideClearButton="true" />
-				<FeatherIcon name="arrow-right" class="mb-1 size-4 text-text-icons-gray-5" />
+				<FeatherIcon name="arrow-right" class="mb-1 size-4 text-ink-gray-5" />
 				<BuilderInput type="text" label="To URL" v-model="redirectMap.to" :hideClearButton="true" />
 			</div>
-			<div
-				class="flex cursor-pointer items-center gap-2 text-base text-text-icons-gray-5"
-				@click="addRedirect">
+			<div class="flex cursor-pointer items-center gap-2 text-base text-ink-gray-5" @click="addRedirect">
 				<FeatherIcon name="plus" class="size-4" />
 				<span>Add Redirect</span>
 			</div>
diff --git a/frontend/src/components/TextBlock.vue b/frontend/src/components/TextBlock.vue
index 67bba324..ec9198b3 100644
--- a/frontend/src/components/TextBlock.vue
+++ b/frontend/src/components/TextBlock.vue
@@ -27,12 +27,12 @@
 				},
 			}"
 			v-if="editor"
-			class="z-50 rounded-md border border-outline-gray-3 bg-surface-white p-1 text-lg text-text-icons-gray-9 shadow-2xl">
+			class="z-50 rounded-md border border-outline-gray-3 bg-surface-white p-1 text-lg text-ink-gray-9 shadow-2xl">
 			<div v-if="settingLink" class="flex">
 				<TextInput
 					v-model="textLink"
 					placeholder="https://example.com"
-					class="link-input w-56 text-sm [&>input]:border-outline-gray-1 [&>input]:bg-surface-gray-2 [&>input]:text-text-icons-gray-8 [&>input]:hover:!border-outline-gray-2 [&>input]:hover:!bg-surface-gray-1 focus:[&>input]:border-outline-gray-3 focus:[&>input]:bg-surface-gray-1 focus:[&>input]:ring-outline-gray-3 [&>input]:focus-visible:bg-surface-gray-1"
+					class="link-input focus:[&>input]:ring-outline-gray-3 w-56 text-sm [&>input]:border-outline-gray-1 [&>input]:bg-surface-gray-2 [&>input]:text-ink-gray-8 [&>input]:hover:!border-outline-gray-2 [&>input]:hover:!bg-surface-gray-1 focus:[&>input]:border-outline-gray-3 focus:[&>input]:bg-surface-gray-1 [&>input]:focus-visible:bg-surface-gray-1"
 					@keydown.enter="
 						() => {
 							if (!linkInput) return;
diff --git a/frontend/src/index.css b/frontend/src/index.css
index db44f7b9..15c427f5 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,5 +1,4 @@
 @import "frappe-ui/src/style.css";
-@import "./colors.css";
 
 @layer base {
 	ul,
diff --git a/frontend/src/pages/PageBuilderDashboard.vue b/frontend/src/pages/PageBuilderDashboard.vue
index e30cfaae..281a9521 100644
--- a/frontend/src/pages/PageBuilderDashboard.vue
+++ b/frontend/src/pages/PageBuilderDashboard.vue
@@ -80,7 +80,7 @@
 			<BuilderButton
 				variant="solid"
 				iconLeft="plus"
-				class="bg-surface-gray-7 !text-text-icons-white hover:bg-surface-gray-6">
+				class="bg-surface-gray-7 !text-ink-white hover:bg-surface-gray-6">
 				New
 			</BuilderButton>
 		</router-link>
@@ -89,7 +89,7 @@
 	<section class="m-auto mb-32 flex w-3/4 max-w-6xl flex-col pt-10">
 		<!-- list head -->
 		<div class="mb-8 flex items-center justify-between px-3">
-			<h1 class="text-xl font-semibold text-text-icons-gray-9">All Pages</h1>
+			<h1 class="text-xl font-semibold text-ink-gray-9">All Pages</h1>
 			<div class="flex gap-2">
 				<div class="relative flex">
 					<BuilderInput
@@ -104,7 +104,7 @@
 							}
 						">
 						<template #prefix>
-							<FeatherIcon name="search" class="size-4 text-text-icons-gray-5"></FeatherIcon>
+							<FeatherIcon name="search" class="size-4 text-ink-gray-5"></FeatherIcon>
 						</template>
 					</BuilderInput>
 				</div>
@@ -176,13 +176,12 @@
 						<div class="flex items-center justify-between border-outline-gray-2">
 							<span class="inline-block max-w-[160px]">
 								<div class="flex items-center gap-1">
-									<p
-										class="truncate text-base font-medium text-text-icons-gray-7 group-hover:text-text-icons-gray-9">
+									<p class="truncate text-base font-medium text-ink-gray-7 group-hover:text-ink-gray-9">
 										{{ page.page_title || page.page_name }}
 									</p>
 								</div>
 								<UseTimeAgo v-slot="{ timeAgo }" :time="page.modified">
-									<p class="mt-1 block text-sm text-text-icons-gray-5 group-hover:text-text-icons-gray-6">
+									<p class="mt-1 block text-sm text-ink-gray-5 group-hover:text-ink-gray-6">
 										Edited {{ timeAgo }}
 									</p>
 								</UseTimeAgo>
@@ -214,7 +213,7 @@
 										icon="more-horizontal"
 										size="sm"
 										variant="subtle"
-										class="bg-surface-white !text-text-icons-gray-5 hover:!text-text-icons-gray-9"
+										class="bg-surface-white !text-ink-gray-5 hover:!text-ink-gray-9"
 										@click="open"></BuilderButton>
 								</template>
 							</Dropdown>
@@ -246,15 +245,15 @@
 							<span class="flex h-full flex-col justify-between text-base text-gray-700 dark:text-zinc-200">
 								<div>
 									<div class="flex items-center gap-1">
-										<p class="truncate font-medium text-text-icons-gray-9">
+										<p class="truncate font-medium text-ink-gray-9">
 											{{ page.page_title || page.page_name }}
 										</p>
 									</div>
-									<div class="mt-2 flex items-center gap-2 text-text-icons-gray-6">
+									<div class="mt-2 flex items-center gap-2 text-ink-gray-6">
 										<div v-show="page.published">
 											<AuthenticatedUserIcon
 												title="Limited access"
-												class="size-4 text-text-icons-amber-3"
+												class="size-4 text-ink-amber-3"
 												v-if="page.authenticated_access" />
 											<GlobeIcon class="size-4" title="Publicly accessible" v-else />
 										</div>
@@ -263,7 +262,7 @@
 										</p>
 									</div>
 								</div>
-								<div class="flex items-baseline gap-2 text-text-icons-gray-6">
+								<div class="flex items-baseline gap-2 text-ink-gray-6">
 									<UseTimeAgo v-slot="{ timeAgo }" :time="page.modified">
 										<p class="mt-1 block text-sm">Last updated {{ timeAgo }} by {{ page.modified_by }}</p>
 									</UseTimeAgo>
@@ -277,7 +276,7 @@
 									:shape="'circle'"
 									:image="null"
 									:label="page.owner"
-									class="[&>div]:bg-surface-gray-2 [&>div]:text-text-icons-gray-4 [&>div]:group-hover:bg-surface-gray-4 [&>div]:group-hover:text-text-icons-gray-6"
+									class="[&>div]:bg-surface-gray-2 [&>div]:text-ink-gray-4 [&>div]:group-hover:bg-surface-gray-4 [&>div]:group-hover:text-ink-gray-6"
 									size="sm"
 									:title="`Created by ${page.owner}`" />
 								<Dropdown
@@ -291,7 +290,7 @@
 									<template v-slot="{ open }">
 										<FeatherIcon
 											name="more-horizontal"
-											class="h-4 w-4 font-bold text-text-icons-gray-6"
+											class="h-4 w-4 font-bold text-ink-gray-6"
 											@click="open"></FeatherIcon>
 									</template>
 								</Dropdown>
diff --git a/frontend/src/pages/PagePreview.vue b/frontend/src/pages/PagePreview.vue
index 8c0f4074..3302e985 100644
--- a/frontend/src/pages/PagePreview.vue
+++ b/frontend/src/pages/PagePreview.vue
@@ -35,9 +35,9 @@
 				"
 				class="absolute right-5 border-0"
 				:class="{
-					'bg-surface-gray-7 !text-text-icons-white hover:bg-surface-gray-6':
+					'bg-surface-gray-7 !text-ink-white hover:bg-surface-gray-6':
 						!publishing && store.activePage?.draft_blocks,
-					'dark:bg-surface-gray-2 dark:text-text-icons-gray-4': !store.activePage?.draft_blocks,
+					'dark:bg-surface-gray-2 dark:text-ink-gray-4': !store.activePage?.draft_blocks,
 				}"
 				:loading="publishing">
 				{{ publishing ? "Publishing" : "Publish" }}
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 8f02575a..c4121e62 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -1,11 +1,9 @@
 import colors from "tailwindcss/colors";
-import tailwindConfig from "frappe-ui/src/utils/tailwind.config";
+import frappeUIPreset from "frappe-ui/src/tailwind/preset.js";
 import plugin from "tailwindcss/plugin";
-import espressoColors from "./espresso_colors";
 
 module.exports = {
-	darkMode: ["selector", '[data-theme="dark"]'],
-	presets: [tailwindConfig],
+	presets: [frappeUIPreset],
 	content: [
 		"./index.html",
 		"./src/**/*.{vue,js,ts,jsx,tsx}",
@@ -36,7 +34,6 @@ module.exports = {
 			},
 			colors: {
 				zinc: colors.zinc,
-				...espressoColors,
 			},
 		},
 	},
diff --git a/yarn.lock b/yarn.lock
index dbdf572a..1819aa80 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5009,7 +5009,16 @@ string-argv@~0.3.2:
   resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.3.2.tgz#2b6d0ef24b656274d957d54e0a4bbf6153dc02b6"
   integrity sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0:
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^4.1.0, string-width@^4.2.0:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -5069,7 +5078,14 @@ string.prototype.trimstart@^1.0.8:
     define-properties "^1.2.1"
     es-object-atoms "^1.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -5654,7 +5670,7 @@ word-wrap@^1.2.5:
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34"
   integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -5672,6 +5688,15 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"