diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index ebc6064..a7ccdb4 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -294,6 +294,14 @@
 				node_kind: 'collection',
 				title: 'Ny arbeidsflate',
 				visibility: 'hidden',
+				metadata: {
+					traits: {
+						chat: {},
+						editor: {},
+						kanban: {},
+						calendar: {},
+					}
+				},
 			});
 			await createEdge(accessToken, {
 				source_id: nodeId,
@@ -828,15 +836,15 @@
 		display: flex;
 		flex-direction: column;
 		height: 100vh;
-		background: #0a0a0b;
+		background: var(--color-bg, #0a0a0b);
 	}
 
 	/* ================================================================= */
 	/* Context header (inline — personal workspace variant)              */
 	/* ================================================================= */
 	.context-header {
-		border-bottom: 1px solid #2a2a2e;
-		background: #1c1c20;
+		border-bottom: 1px solid var(--color-border, #2a2a2e);
+		background: var(--color-surface, #1c1c20);
 		flex-shrink: 0;
 		z-index: 30;
 		position: relative;
@@ -904,7 +912,7 @@
 	}
 
 	.context-selector-trigger:hover {
-		background: #242428;
+		background: var(--color-surface-hover, #242428);
 		border-color: #e5e7eb;
 	}
 
@@ -931,8 +939,8 @@
 		left: 0;
 		min-width: 260px;
 		max-width: 360px;
-		background: #1c1c20;
-		border: 1px solid #2a2a2e;
+		background: var(--color-surface, #1c1c20);
+		border: 1px solid var(--color-border, #2a2a2e);
 		border-radius: 8px;
 		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
 		z-index: 50;
@@ -947,16 +955,16 @@
 	.context-selector-search-input {
 		width: 100%;
 		padding: 6px 10px;
-		border: 1px solid #2a2a2e;
+		border: 1px solid var(--color-border, #2a2a2e);
 		border-radius: 6px;
 		font-size: 13px;
 		outline: none;
-		background: #141416;
+		background: var(--color-bg, #141416);
 	}
 
 	.context-selector-search-input:focus {
-		border-color: #4f46e5;
-		background: #1c1c20;
+		border-color: var(--color-accent, #4f46e5);
+		background: var(--color-surface, #1c1c20);
 	}
 
 	.context-selector-list {
@@ -982,7 +990,7 @@
 	}
 
 	.context-selector-item:hover {
-		background: #242428;
+		background: var(--color-surface-hover, #242428);
 	}
 
 	.context-selector-item-title {
@@ -1014,8 +1022,8 @@
 		top: calc(100% + 4px);
 		right: 0;
 		min-width: 200px;
-		background: #1c1c20;
-		border: 1px solid #2a2a2e;
+		background: var(--color-surface, #1c1c20);
+		border: 1px solid var(--color-border, #2a2a2e);
 		border-radius: 8px;
 		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
 		z-index: 50;
@@ -1049,7 +1057,7 @@
 	}
 
 	.tool-menu-item:hover:not(:disabled) {
-		background: #242428;
+		background: var(--color-surface-hover, #242428);
 	}
 
 	.tool-menu-item:disabled {
@@ -1073,7 +1081,7 @@
 	.tool-menu-item-badge {
 		font-size: 10px;
 		color: #5a5a66;
-		background: #242428;
+		background: var(--color-surface-hover, #242428);
 		padding: 1px 6px;
 		border-radius: 4px;
 	}
@@ -1097,7 +1105,7 @@
 		font-size: 12px;
 		font-weight: 500;
 		cursor: pointer;
-		background: #242428;
+		background: var(--color-surface-hover, #242428);
 		color: #4b5563;
 		transition: background 0.12s;
 	}
@@ -1172,9 +1180,9 @@
 		align-items: center;
 		gap: 6px;
 		padding: 8px 14px;
-		border: 1px solid #2a2a2e;
+		border: 1px solid var(--color-border, #2a2a2e);
 		border-radius: 8px;
-		background: #1c1c20;
+		background: var(--color-surface, #1c1c20);
 		cursor: pointer;
 		font-size: 13px;
 		color: #8a8a96;
@@ -1182,7 +1190,7 @@
 	}
 
 	.workspace-empty-tool:hover {
-		border-color: #4f46e5;
+		border-color: var(--color-accent, #4f46e5);
 		box-shadow: 0 2px 8px rgba(79, 70, 229, 0.1);
 	}
 
@@ -1209,8 +1217,8 @@
 		display: flex;
 		overflow-x: auto;
 		gap: 0;
-		background: #1c1c20;
-		border-bottom: 1px solid #2a2a2e;
+		background: var(--color-surface, #1c1c20);
+		border-bottom: 1px solid var(--color-border, #2a2a2e);
 		flex-shrink: 0;
 		-webkit-overflow-scrolling: touch;
 	}
@@ -1235,8 +1243,8 @@
 	}
 
 	.mobile-tab-active {
-		color: #4f46e5;
-		border-bottom-color: #4f46e5;
+		color: var(--color-accent, #4f46e5);
+		border-bottom-color: var(--color-accent, #4f46e5);
 		font-weight: 500;
 	}
 
@@ -1295,7 +1303,7 @@
 
 	.context-selector-rename-btn:hover {
 		opacity: 1 !important;
-		background: #242428;
+		background: var(--color-surface-hover, #242428);
 	}
 
 	.context-selector-rename-input {
@@ -1311,14 +1319,14 @@
 	}
 
 	.context-selector-footer {
-		border-top: 1px solid #2a2a2e;
+		border-top: 1px solid var(--color-border, #2a2a2e);
 		padding: 6px;
 	}
 
 	.context-selector-new-btn {
 		width: 100%;
 		padding: 8px 10px;
-		border: 1px dashed #2a2a2e;
+		border: 1px dashed var(--color-border, #2a2a2e);
 		border-radius: 6px;
 		background: transparent;
 		cursor: pointer;
@@ -1328,7 +1336,7 @@
 	}
 
 	.context-selector-new-btn:hover:not(:disabled) {
-		border-color: #6366f1;
+		border-color: var(--color-accent, #6366f1);
 		color: #8a8a96;
 	}
 
@@ -1353,9 +1361,9 @@
 		top: calc(100% + 4px);
 		right: 0;
 		min-width: 220px;
-		background: #1c1c20;
 		background: var(--color-surface, #1c1c20);
-		border: 1px solid #2a2a2e;
+		background: var(--color-surface, #1c1c20);
+		border: 1px solid var(--color-border, #2a2a2e);
 		border: 1px solid var(--color-border, #2a2a2e);
 		border-radius: 8px;
 		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
@@ -1433,7 +1441,7 @@
 	}
 
 	.settings-signout:hover {
-		background: #242428;
+		background: var(--color-surface-hover, #242428);
 		color: #e8e8ec;
 	}