diff --git a/packages/ui/src/routes/[projectId]/components/BranchFiles.svelte b/packages/ui/src/routes/[projectId]/components/BranchFiles.svelte
index 80810c474..4569e78f7 100644
--- a/packages/ui/src/routes/[projectId]/components/BranchFiles.svelte
+++ b/packages/ui/src/routes/[projectId]/components/BranchFiles.svelte
@@ -86,7 +86,6 @@
 						<FileTree
 							node={filesToFileTree(branch.files)}
 							isRoot={true}
-							class="p-2"
 							branchId={branch.id}
 							{selectedOwnership}
 							{selectedFileId}
diff --git a/packages/ui/src/routes/[projectId]/components/FileListItem.svelte b/packages/ui/src/routes/[projectId]/components/FileListItem.svelte
index 7c8e2445a..90554cb1a 100644
--- a/packages/ui/src/routes/[projectId]/components/FileListItem.svelte
+++ b/packages/ui/src/routes/[projectId]/components/FileListItem.svelte
@@ -43,13 +43,15 @@
 				{file.justpath}
 			</div>
 		</div>
-		{#if isLocked}
-			<div class="locked">
-				<Icon name="locked" />
+		<div class="icons">
+			{#if isLocked}
+				<div class="locked">
+					<Icon name="locked-small" />
+				</div>
+			{/if}
+			<div class="status">
+				<FileStatusCircle status={computeFileStatus(file)} />
 			</div>
-		{/if}
-		<div class="status">
-			<FileStatusCircle status={computeFileStatus(file)} />
 		</div>
 	</div>
 </div>
@@ -58,7 +60,7 @@
 	.file-list-item {
 		display: flex;
 		align-items: center;
-		padding: var(--space-6) var(--space-8);
+		padding: var(--space-4) var(--space-8);
 		gap: var(--space-16);
 		border-radius: var(--radius-s);
 		max-width: 100%;
@@ -69,6 +71,11 @@
 			background: var(--clr-theme-container-pale);
 		}
 	}
+	.icons {
+		display: flex;
+		align-items: center;
+		gap: var(--space-4);
+	}
 	.icon {
 		flex-shrink: 0;
 	}
@@ -96,13 +103,6 @@
 		color: var(--clr-theme-scale-warn-60);
 	}
 	.selected {
-		background-color: var(--clr-theme-pop-element);
-		& .name {
-			color: var(--clr-theme-pop-on-element);
-		}
-		& .path {
-			color: var(--clr-theme-pop-on-element);
-			opacity: 0.4;
-		}
+		background-color: var(--clr-theme-scale-pop-80);
 	}
 </style>
diff --git a/packages/ui/src/routes/[projectId]/components/TreeListFile.svelte b/packages/ui/src/routes/[projectId]/components/TreeListFile.svelte
index 68394fb2b..058870552 100644
--- a/packages/ui/src/routes/[projectId]/components/TreeListFile.svelte
+++ b/packages/ui/src/routes/[projectId]/components/TreeListFile.svelte
@@ -37,9 +37,9 @@
 				class="mr-1 inline"
 			/>
 		</div>
-		<div class="name flex-shrink">
+		<span class="name text-base-12">
 			{file.filename}
-		</div>
+		</span>
 		<div class="status">
 			<FileStatusCircle status={computeFileStatus(file)} />
 		</div>
@@ -73,9 +73,6 @@
 		opacity: 0.3;
 	}
 	.selected {
-		background-color: var(--clr-theme-pop-element);
-		& .name {
-			color: var(--clr-theme-pop-on-element);
-		}
+		background-color: var(--clr-theme-scale-pop-80);
 	}
 </style>
diff --git a/packages/ui/src/routes/[projectId]/components/TreeListFolder.svelte b/packages/ui/src/routes/[projectId]/components/TreeListFolder.svelte
index 5d04e891a..d0ecb14db 100644
--- a/packages/ui/src/routes/[projectId]/components/TreeListFolder.svelte
+++ b/packages/ui/src/routes/[projectId]/components/TreeListFolder.svelte
@@ -14,9 +14,9 @@
 		<Icon name="chevron-right-small" />
 	{/if}
 	<IconFolder class="h-4 w-4 scale-75 text-blue-400" />
-	<div class="name">
+	<span class="name text-base-12">
 		{node.name}
-	</div>
+	</span>
 	<!-- {#if withCheckboxes}
 		<Checkbox checked={isChecked} indeterminate={isIndeterminate} on:change={onCheckboxChange} />
 	{/if} -->