diff --git a/packages/ui/src/routes/+layout.svelte b/packages/ui/src/routes/+layout.svelte
index 1f5b61826..6a578c860 100644
--- a/packages/ui/src/routes/+layout.svelte
+++ b/packages/ui/src/routes/+layout.svelte
@@ -113,7 +113,7 @@
 <div class="flex h-full flex-col">
 	<header
 		data-tauri-drag-region
-		class="bg-color-3 flex h-8 flex-shrink-0 flex-row items-center gap-x-6 border-b border-light-300 dark:border-dark-500"
+		class="bg-color-3 border-color-4 flex h-8 flex-shrink-0 flex-row items-center gap-x-6 border-b"
 		style="z-index: 9999;"
 	>
 		<div class="breadcrumb-project-container ml-[80px]">
@@ -132,7 +132,7 @@
 		</div>
 	</header>
 
-	<div class="flex flex-grow overflow-y-auto">
+	<div class="flex flex-grow overflow-y-auto overscroll-none">
 		<slot />
 	</div>
 
@@ -141,9 +141,9 @@
 	<LinkProjectModal bind:this={linkProjectModal} {cloud} {projects} />
 
 	<ShareIssueModal bind:this={shareIssueModal} user={$user} {cloud} />
-	<footer class="w-full text-sm font-medium text-light-700 dark:text-dark-100">
+	<footer class="text-color-3 w-full text-sm font-medium">
 		<div
-			class="bg-color-3 flex h-[1.375rem] flex-shrink-0 select-none items-center border-t border-light-300 dark:border-dark-500"
+			class="bg-color-3 border-color-4 flex h-[1.375rem] flex-shrink-0 select-none items-center border-t"
 		>
 			<div class="mx-4 flex w-full flex-row items-center justify-between space-x-2 pb-[1px]">
 				<div>
diff --git a/packages/ui/src/routes/+page.svelte b/packages/ui/src/routes/+page.svelte
index 12a23c724..6aaac25cf 100644
--- a/packages/ui/src/routes/+page.svelte
+++ b/packages/ui/src/routes/+page.svelte
@@ -13,11 +13,9 @@
 {:then}
 	<div class="bg-color-2 flex h-full w-full flex-col p-8">
 		<div class="mb-8 flex flex-row justify-between">
-			<div class="text-light-900 dark:text-dark-100">
+			<div class="text-color-2">
 				<h1 class="mb-2 text-2xl">Your projects</h1>
-				<p class="text-lg text-light-700 dark:text-dark-200">
-					All the projects tracked by GitButler
-				</p>
+				<p class="text-color-3 text-lg">All the projects tracked by GitButler</p>
 			</div>
 			{#if $projects.length > 0}
 				<div class="self-start">
@@ -33,7 +31,7 @@
 		</div>
 		{#if $projects.length == 0}
 			<div
-				class="mx-auto flex w-full flex-grow items-center justify-center rounded border border-light-400 bg-light-200 p-8 dark:border-dark-500 dark:bg-dark-1000"
+				class="border-color-3 bg-color-2 mx-auto flex w-full flex-grow items-center justify-center rounded-lg border p-8"
 			>
 				<div class="inline-flex w-96 flex-col items-center gap-y-4 text-center">
 					<svg
@@ -66,21 +64,19 @@
 			<div class="flex flex-wrap gap-4">
 				{#each $projects as project}
 					<a
-						class="bg-color-5 w-96 overflow-hidden rounded-lg text-light-900 shadow dark:border dark:border-dark-600 dark:text-light-200"
+						class="bg-color-5 text-color-2 dark:border-color-5 w-96 overflow-hidden rounded-lg shadow dark:border dark:shadow-none"
 						href="/repo/{project.id}/"
 					>
-						<div class="p-4">
-							<h1 class="text-lg text-light-900 dark:text-dark-100">
+						<div class="text-color-2 p-4">
+							<h1 class="text-lg">
 								{project.title}
 							</h1>
-							<p class="text-light-700 dark:text-dark-200">
+							<p>
 								{project.path}
 							</p>
 						</div>
 
-						<div
-							class="bg-color-4 flex flex-row items-center gap-x-2 px-4 py-2 text-light-900 dark:text-dark-100"
-						>
+						<div class="bg-color-4 flex flex-row items-center gap-x-2 px-4 py-2">
 							{#if project.api}
 								<div class="h-2 w-2 rounded-full bg-green-600" />
 								<div>Backed-up</div>
diff --git a/packages/ui/src/routes/ShareIssueModal.svelte b/packages/ui/src/routes/ShareIssueModal.svelte
index 4d19e3d3b..c3e081bea 100644
--- a/packages/ui/src/routes/ShareIssueModal.svelte
+++ b/packages/ui/src/routes/ShareIssueModal.svelte
@@ -79,7 +79,7 @@
 
 <Modal bind:this={modal} title="Share with GitButler team for review" on:close={onClose}>
 	<div class="flex flex-col gap-4">
-		<p>
+		<p class="text-color-3">
 			If you are having trouble, please share your project and logs with the Gitbutler team. We will
 			review it for you and help identify how we can help resolve the issue.
 		</p>
@@ -98,7 +98,7 @@
 		{/if}
 
 		<div class="flex flex-col gap-1">
-			<label for="comments" class="text-xl font-semibold">Comments</label>
+			<label for="comments">Comments</label>
 
 			<textarea
 				placeholder="Provide any steps necessary to reproduce the problem."
@@ -114,7 +114,7 @@
 
 		<div class="flex flex-col gap-1">
 			<span class="text-xl font-semibold"> Share logs </span>
-			<span class="text-sm text-text-subdued">
+			<span class="text-color-3 text-sm">
 				We personally ensure all information you share with us will be reviewed internally only and
 				discarded post-resolution
 			</span>
diff --git a/packages/ui/src/routes/repo/[projectId]/Board.svelte b/packages/ui/src/routes/repo/[projectId]/Board.svelte
index d75f48b2c..0c2783553 100644
--- a/packages/ui/src/routes/repo/[projectId]/Board.svelte
+++ b/packages/ui/src/routes/repo/[projectId]/Board.svelte
@@ -49,7 +49,7 @@
 	<div
 		bind:this={dropZone}
 		id="branch-lanes"
-		class="bg-color-1 flex flex-shrink flex-grow items-start"
+		class="bg-color-2 flex flex-shrink flex-grow items-start"
 		role="group"
 		use:dzHighlight={{ type: dzType, active: 'board-dz-active', hover: 'board-dz-hover' }}
 		on:dragover={(e) => {
diff --git a/packages/ui/src/styles/main.postcss b/packages/ui/src/styles/main.postcss
index c4500dbf3..04db5e028 100644
--- a/packages/ui/src/styles/main.postcss
+++ b/packages/ui/src/styles/main.postcss
@@ -382,11 +382,11 @@ input[type='checkbox'].large {
 	--text-color-3: #777777;
 	--text-color-4: #999999;
 
-	--border-color-5: #fafafa;
-	--border-color-4: #eaeaea;
-	--border-color-3: #c4c4c7;
-	--border-color-2: #adadae;
 	--border-color-1: #949498;
+	--border-color-2: #adadae;
+	--border-color-3: #c4c4c7;
+	--border-color-4: #e6e6e8;
+	--border-color-5: #fafafa;
 }
 
 :root.dark {
@@ -404,7 +404,7 @@ input[type='checkbox'].large {
 	--border-color-1: #d4d4d8;
 	--border-color-2: #a1a1aa;
 	--border-color-3: #71717a;
-	--border-color-4: #585858;
+	--border-color-4: #484848;
 	--border-color-5: #484848;
 }
 
@@ -441,7 +441,6 @@ input[type='checkbox'].large {
 	}
 
 	/* Border colors */
-
 	.border-color-1 {
 		border-color: var(--border-color-1);
 	}