diff --git a/gitbutler-ui/src/lib/components/Resizer.svelte b/gitbutler-ui/src/lib/components/Resizer.svelte
index 0ba095e84..bf4f6eda0 100644
--- a/gitbutler-ui/src/lib/components/Resizer.svelte
+++ b/gitbutler-ui/src/lib/components/Resizer.svelte
@@ -92,7 +92,7 @@
 		transition: background-color 0.1s ease-out;
 		/* background-color: var(--clr-theme-container-outline-light); */
 		&:hover {
-			transition-delay: 0.3s;
+			transition-delay: 0.1s;
 		}
 		z-index: 40;
 		&:hover,
diff --git a/gitbutler-ui/src/routes/[projectId]/components/BranchCard.svelte b/gitbutler-ui/src/routes/[projectId]/components/BranchCard.svelte
index 069902852..b76c8c8fd 100644
--- a/gitbutler-ui/src/routes/[projectId]/components/BranchCard.svelte
+++ b/gitbutler-ui/src/routes/[projectId]/components/BranchCard.svelte
@@ -30,7 +30,6 @@
 
 	import DropzoneOverlay from './DropzoneOverlay.svelte';
 	import ScrollableContainer from '$lib/components/ScrollableContainer.svelte';
-	import type { BranchService } from '$lib/branches/service';
 
 	export let branch: Branch;
 	export let readonly = false;
@@ -38,7 +37,6 @@
 	export let base: BaseBranch | undefined | null;
 	export let cloud: ReturnType<typeof getCloudApiClient>;
 	export let branchController: BranchController;
-	export let branchService: BranchService;
 	export let branchCount = 1;
 	export let user: User | undefined;
 	export let selectedFiles: Writable<File[]>;
@@ -144,8 +142,9 @@
 	}
 </script>
 
-<div class="branch-card" data-tauri-drag-region class:target-branch={branch.selectedForChanges}>
-	<div class="branch-card-resize-container">
+<div class="branch-card-wrapper">
+	<div class="branch-card" data-tauri-drag-region class:target-branch={branch.selectedForChanges}>
+		<!-- <div> -->
 		<div
 			bind:this={rsViewport}
 			style:width={`${laneWidth || $defaultBranchWidthRem}rem`}
@@ -252,19 +251,19 @@
 					</div>
 				{/if}
 			</div>
+
 			<BranchCommits
 				{base}
 				{branch}
 				{project}
 				{githubService}
 				{branchController}
-				{branchService}
 				{branchCount}
 				{readonly}
 			/>
 		</div>
+		<!-- </div> -->
 	</div>
-
 	<div class="divider-line">
 		<Resizer
 			viewport={rsViewport}
@@ -279,24 +278,26 @@
 			}}
 		/>
 	</div>
-
-	<slot name="file-view" />
 </div>
 
 <style lang="postcss">
+	.branch-card-wrapper {
+		position: relative;
+		display: flex;
+		height: 100%;
+	}
 	.branch-card {
 		height: 100%;
 		position: relative;
-		display: flex;
-		--target-branch-background: var(--clr-theme-container-pale);
-		display: flex;
+		/* display: flex; */
 		/* flex-direction: column; */
+
 		user-select: none;
 		overflow-x: hidden;
 		overflow-y: scroll;
 		/* padding: 8px; */
 		/* border-radius: var(--radius-l); */
-		background-color: var(--target-branch-background);
+		/* background-color: var(--target-branch-background); */
 
 		/* remover scrollbar */
 
@@ -306,16 +307,19 @@
 		}
 	}
 
-	.branch-card-resize-container {
+	/* .branch-card-resize-container {
 		display: flex;
-	}
+	} */
 
 	.divider-line {
-		position: sticky;
+		position: absolute;
 		top: 0;
 		right: 0;
-		width: 3px;
+		width: var(--space-4);
+		/* margin-left: calc(var(--space-4) * -1); */
 		height: 100%;
+		/* margin-left: var(--selected-resize-shift); */
+		transform: translateX(var(--selected-resize-shift));
 		/* background-color: red; */
 		/* background-color: var(--clr-theme-container-outline-light); */
 
@@ -324,22 +328,14 @@
 			content: '';
 			position: absolute;
 			top: 0;
-			right: 50%;
-			transform: translateX(50%);
+			right: 0;
 			width: 1px;
 			height: 100%;
+			opacity: var(--selected-opacity);
 			background-color: var(--clr-theme-container-outline-light);
 		}
 	}
 
-	.target-branch {
-		--target-branch-background: color-mix(
-			in srgb,
-			var(--clr-theme-scale-pop-60) 20%,
-			var(--clr-theme-container-pale)
-		);
-	}
-
 	.branch-card__dropzone-wrapper {
 		display: flex;
 		flex-direction: column;
@@ -351,8 +347,12 @@
 		position: relative;
 		display: flex;
 		flex-direction: column;
+		flex: 1;
+		min-height: 100%;
 		gap: var(--space-8);
 		padding: var(--space-12);
+		/* transition: padding var(--transition-fast);
+		will-change: padding; */
 	}
 
 	.first-child {
@@ -423,4 +423,10 @@
 	:global(.squash-dz-active .squash-dz-marker) {
 		@apply flex;
 	}
+
+	.branch-card :global(.contents) {
+		display: flex;
+		flex-direction: column;
+		min-height: 100%;
+	}
 </style>
diff --git a/gitbutler-ui/src/routes/[projectId]/components/BranchLane.svelte b/gitbutler-ui/src/routes/[projectId]/components/BranchLane.svelte
index 3fb3c044c..54c331984 100644
--- a/gitbutler-ui/src/routes/[projectId]/components/BranchLane.svelte
+++ b/gitbutler-ui/src/routes/[projectId]/components/BranchLane.svelte
@@ -37,7 +37,12 @@
 	}
 </script>
 
-<div class="wrapper" data-tauri-drag-region>
+<div
+	class="wrapper"
+	data-tauri-drag-region
+	class:target-branch={branch.selectedForChanges}
+	class:selected
+>
 	<BranchCard
 		{branch}
 		{readonly}
@@ -80,5 +85,24 @@
 		align-items: self-start;
 		flex-shrink: 0;
 		position: relative;
+		--target-branch-background: var(--clr-theme-container-pale);
+		--selected-resize-shift: 0;
+		--selected-opacity: 1;
+		--selected-file-shift: 0;
+		background-color: var(--target-branch-background);
+	}
+
+	.target-branch {
+		--target-branch-background: color-mix(
+			in srgb,
+			var(--clr-theme-scale-pop-60) 20%,
+			var(--clr-theme-container-pale)
+		);
+	}
+
+	.selected {
+		--selected-resize-shift: calc(var(--space-6) * -1);
+		--selected-file-shift: var(--space-4);
+		--selected-opacity: 0;
 	}
 </style>
diff --git a/gitbutler-ui/src/routes/[projectId]/components/CommitList.svelte b/gitbutler-ui/src/routes/[projectId]/components/CommitList.svelte
index 9d619dfbe..8710a0bd2 100644
--- a/gitbutler-ui/src/routes/[projectId]/components/CommitList.svelte
+++ b/gitbutler-ui/src/routes/[projectId]/components/CommitList.svelte
@@ -76,7 +76,7 @@
 <style lang="postcss">
 	.commit-list {
 		&.upstream {
-			background-color: var(--clr-theme-container-pale);
+			background-color: var(--clr-theme-container-light);
 		}
 		background-color: var(--clr-theme-container-light);
 		display: flex;
diff --git a/gitbutler-ui/src/routes/[projectId]/components/CommitListHeader.svelte b/gitbutler-ui/src/routes/[projectId]/components/CommitListHeader.svelte
index 3ce779c85..743f8fab4 100644
--- a/gitbutler-ui/src/routes/[projectId]/components/CommitListHeader.svelte
+++ b/gitbutler-ui/src/routes/[projectId]/components/CommitListHeader.svelte
@@ -49,6 +49,12 @@
 		padding: var(--space-16) var(--space-12) var(--space-16) var(--space-16);
 		justify-content: space-between;
 		gap: var(--space-8);
+
+		&:hover {
+			& .expander {
+				opacity: 1;
+			}
+		}
 	}
 	.title {
 		display: flex;
@@ -57,4 +63,10 @@
 		gap: var(--space-8);
 		overflow-x: hidden;
 	}
+
+	.expander {
+		color: var(--clr-theme-scale-ntrl-50);
+		opacity: 0.5;
+		transition: opacity var(--transition-fast);
+	}
 </style>
diff --git a/gitbutler-ui/src/routes/[projectId]/components/FileCard.svelte b/gitbutler-ui/src/routes/[projectId]/components/FileCard.svelte
index 30688844c..082609b61 100644
--- a/gitbutler-ui/src/routes/[projectId]/components/FileCard.svelte
+++ b/gitbutler-ui/src/routes/[projectId]/components/FileCard.svelte
@@ -235,27 +235,54 @@
 			</div>
 		</ScrollableContainer>
 	</div>
-	<Resizer
-		viewport={rsViewport}
-		direction="right"
-		inside
-		minWidth={240}
-		on:width={(e) => {
-			fileWidth = e.detail / (16 * $userSettings.zoom);
-			lscache.set(fileWidthKey + file.id, fileWidth, 7 * 1440); // 7 day ttl
-			$defaultFileWidthRem = fileWidth;
-		}}
-	/>
+
+	<div class="divider-line">
+		<Resizer
+			viewport={rsViewport}
+			direction="right"
+			inside
+			minWidth={240}
+			on:width={(e) => {
+				fileWidth = e.detail / (16 * $userSettings.zoom);
+				lscache.set(fileWidthKey + file.id, fileWidth, 7 * 1440); // 7 day ttl
+				$defaultFileWidthRem = fileWidth;
+			}}
+		/>
+	</div>
 </div>
 
 <style lang="postcss">
+	.divider-line {
+		position: absolute;
+		top: 0;
+		right: 0;
+		width: 1px;
+		height: 100%;
+
+		/* background-color: red; */
+		/* background-color: var(--clr-theme-container-outline-light); */
+
+		&:after {
+			pointer-events: none;
+			content: '';
+			position: absolute;
+			top: 0;
+			right: 50%;
+			transform: translateX(50%);
+			width: 1px;
+			height: 100%;
+			background-color: var(--clr-theme-container-outline-light);
+		}
+	}
 	.resize-viewport {
 		position: relative;
 		display: flex;
 		height: 100%;
 		align-items: self-start;
 		overflow: hidden;
-		padding: var(--space-12);
+		padding: var(--space-12) var(--space-12) var(--space-12) 0;
+		margin-left: calc(var(--selected-file-shift) * -1);
+		/* background-color: var(--target-branch-background); */
 	}
 	.file-card {
 		background: var(--clr-theme-container-light);