diff --git a/apps/desktop/src/lib/components/BaseBranch.svelte b/apps/desktop/src/lib/components/BaseBranch.svelte
index a19cfb1e06..56510a3eca 100644
--- a/apps/desktop/src/lib/components/BaseBranch.svelte
+++ b/apps/desktop/src/lib/components/BaseBranch.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
+	import IntegrateUpstreamModal from './IntegrateUpstreamModal.svelte';
 	import Spacer from '../shared/Spacer.svelte';
 	import { Project } from '$lib/backend/projects';
 	import CommitCard from '$lib/commit/CommitCard.svelte';
-	import UpdateBaseButton from '$lib/components/UpdateBaseButton.svelte';
 	import { projectMergeUpstreamWarningDismissed } from '$lib/config/config';
 	import { getGitHost } from '$lib/gitHost/interface/gitHost';
 	import { ModeService } from '$lib/modes/service';
@@ -29,6 +29,7 @@
 	);
 
 	let updateTargetModal: Modal;
+	let integrateUpstreamModal: IntegrateUpstreamModal | undefined;
 	let mergeUpstreamWarningDismissedCheckbox = false;
 
 	$: multiple = base ? base.upstreamCommits.length > 1 || base.upstreamCommits.length === 0 : false;
@@ -40,7 +41,17 @@
 		}
 	}
 
-	let updateBaseButton: UpdateBaseButton | undefined;
+	function mergeUpstream() {
+		if (project.succeedingRebases) {
+			integrateUpstreamModal?.show();
+		} else {
+			if (mergeUpstreamWarningDismissedCheckbox) {
+				updateBaseBranch();
+			} else {
+				updateTargetModal.show();
+			}
+		}
+	}
 </script>
 
 <div class="wrapper">
@@ -51,23 +62,14 @@
 	</div>
 
 	{#if base.upstreamCommits?.length > 0}
-		<UpdateBaseButton bind:this={updateBaseButton} showButton={false} />
+		<IntegrateUpstreamModal bind:this={integrateUpstreamModal} />
 		<Button
 			style="pop"
 			kind="solid"
 			tooltip={`Merges the commits from ${base.branchName} into the base of all applied virtual branches`}
-			disabled={$mode?.type !== 'OpenWorkspace'}
-			onclick={() => {
-				if (project.succeedingRebases) {
-					updateBaseButton?.openModal();
-				} else {
-					if ($mergeUpstreamWarningDismissed) {
-						updateBaseBranch();
-					} else {
-						updateTargetModal.show();
-					}
-				}
-			}}
+			disabled={$mode?.type !== 'OpenWorkspace' || integrateUpstreamModal.imports.open}
+			loading={integrateUpstreamModal.imports.open}
+			onclick={mergeUpstream}
 		>
 			Merge into common base
 		</Button>
diff --git a/apps/desktop/src/lib/components/IntegrateUpstreamModal.svelte b/apps/desktop/src/lib/components/IntegrateUpstreamModal.svelte
new file mode 100644
index 0000000000..0899e381ee
--- /dev/null
+++ b/apps/desktop/src/lib/components/IntegrateUpstreamModal.svelte
@@ -0,0 +1,258 @@
+<script lang="ts">
+	import { BaseBranchService } from '$lib/baseBranch/baseBranchService';
+	import CommitCard from '$lib/commit/CommitCard.svelte';
+	import { getGitHost } from '$lib/gitHost/interface/gitHost';
+	import ScrollableContainer from '$lib/scroll/ScrollableContainer.svelte';
+	import Select from '$lib/select/Select.svelte';
+	import SelectItem from '$lib/select/SelectItem.svelte';
+	import { getContext } from '$lib/utils/context';
+	import {
+		getResolutionApproach,
+		sortStatusInfo,
+		UpstreamIntegrationService,
+		type BranchStatusesWithBranches,
+		type BranchStatusInfo,
+		type Resolution
+	} from '$lib/vbranches/upstreamIntegrationService';
+	import Button from '@gitbutler/ui/Button.svelte';
+	import Modal from '@gitbutler/ui/Modal.svelte';
+	import { tick } from 'svelte';
+	import { SvelteMap } from 'svelte/reactivity';
+	import type { Readable } from 'svelte/store';
+
+	type OperationState = 'inert' | 'loading' | 'completed';
+
+	interface Props {
+		onClose?: () => void;
+	}
+
+	const { onClose }: Props = $props();
+
+	const gitHost = getGitHost();
+	const upstreamIntegrationService = getContext(UpstreamIntegrationService);
+	let branchStatuses = $state<Readable<BranchStatusesWithBranches | undefined>>();
+	const baseBranchService = getContext(BaseBranchService);
+	const base = baseBranchService.base;
+
+	let modal = $state<Modal>();
+	let integratingUpstream = $state<OperationState>('inert');
+	let results = $state(new SvelteMap<string, Resolution>());
+	let statuses = $state<BranchStatusInfo[]>([]);
+	let expanded = $state<boolean>(false);
+
+	$effect(() => {
+		if ($branchStatuses?.type !== 'updatesRequired') {
+			statuses = [];
+			return;
+		}
+
+		const statusesTmp = [...$branchStatuses.subject];
+		statusesTmp.sort(sortStatusInfo);
+
+		// Side effect, refresh results
+		results = new SvelteMap(
+			statusesTmp.map((status) => {
+				const defaultApproach = getResolutionApproach(status);
+
+				return [
+					status.branch.id,
+					{
+						branchId: status.branch.id,
+						branchTree: status.branch.tree,
+						approach: defaultApproach
+					}
+				];
+			})
+		);
+
+		statuses = statusesTmp;
+	});
+
+	async function integrate() {
+		integratingUpstream = 'loading';
+		await tick();
+		await upstreamIntegrationService.integrateUpstream(Array.from(results.values()));
+		await baseBranchService.refresh();
+		integratingUpstream = 'completed';
+
+		modal?.close();
+	}
+
+	export async function show() {
+		integratingUpstream = 'inert';
+		expanded = false;
+		branchStatuses = upstreamIntegrationService.upstreamStatuses();
+		await tick();
+		modal?.show();
+	}
+
+	export const imports = {
+		get open() {
+			return modal?.imports.open;
+		}
+	};
+</script>
+
+<Modal bind:this={modal} title="Integrate upstream changes" {onClose} width="small" noPadding>
+	<ScrollableContainer maxHeight="50vh">
+		<div class="modal-content">
+			{#if $base}
+				<div class="upstream-commits">
+					{#each $base.upstreamCommits.slice(0, 2) as commit, index}
+						<CommitCard
+							{commit}
+							first={index === 0}
+							last={(() => {
+								if (expanded) {
+									return $base.upstreamCommits.length - 1 === index;
+								} else {
+									if ($base.upstreamCommits.length > 2) {
+										return index === 1;
+									} else {
+										return $base.upstreamCommits.length - 1 === index;
+									}
+								}
+							})()}
+							isUnapplied={true}
+							commitUrl={$gitHost?.commitUrl(commit.id)}
+							type="remote"
+							filesToggleable={false}
+						/>
+					{/each}
+					{#if $base.upstreamCommits.length > 2}
+						{#if expanded}
+							{#each $base.upstreamCommits.slice(2) as commit, index}
+								<CommitCard
+									{commit}
+									last={index === $base.upstreamCommits.length - 3}
+									isUnapplied={true}
+									commitUrl={$gitHost?.commitUrl(commit.id)}
+									type="remote"
+									filesToggleable={false}
+								/>
+							{/each}
+							<div class="commit-expand-button">
+								<Button wide onclick={() => (expanded = false)}>Hide</Button>
+							</div>
+						{:else}
+							<div class="commit-expand-button">
+								<Button wide onclick={() => (expanded = true)}
+									>Show more ({$base.upstreamCommits.length - 2})</Button
+								>
+							</div>
+						{/if}
+					{/if}
+				</div>
+			{/if}
+			{#if statuses.length > 0}
+				<div class="statuses">
+					{#each statuses as { branch, status }}
+						<div class="branch-status" class:integrated={status.type === 'fullyIntegrated'}>
+							<div class="description">
+								<h5 class="text-16">{branch?.name || 'Unknown'}</h5>
+								{#if status.type === 'conflicted'}
+									<p>Conflicted</p>
+								{:else if status.type === 'saflyUpdatable' || status.type === 'empty'}
+									<p>No Conflicts</p>
+								{:else if status.type === 'fullyIntegrated'}
+									<p>Integrated</p>
+								{/if}
+							</div>
+
+							<div class="action" class:action--centered={status.type === 'fullyIntegrated'}>
+								{#if status.type === 'fullyIntegrated'}
+									<p>Changes included in base branch</p>
+								{:else if results.get(branch.id)}
+									<Select
+										value={results.get(branch.id)!.approach.type}
+										onselect={(value) => {
+										const result = results.get(branch.id)!
+
+										results.set(branch.id, {...result, approach: { type: value as "rebase" | "merge" | "unapply" }})
+									}}
+										options={[
+											{ label: 'Rebase', value: 'rebase' },
+											{ label: 'Merge', value: 'merge' },
+											{ label: 'Stash', value: 'unapply' }
+										]}
+									>
+										{#snippet itemSnippet({ item, highlighted })}
+											<SelectItem selected={highlighted} {highlighted}>
+												{item.label}
+											</SelectItem>
+										{/snippet}
+									</Select>
+								{/if}
+							</div>
+						</div>
+					{/each}
+				</div>
+			{/if}
+		</div>
+	</ScrollableContainer>
+
+	{#snippet controls()}
+		<Button onclick={() => modal?.close()}>Cancel</Button>
+		<Button onclick={integrate} style="pop" kind="solid" loading={integratingUpstream === 'loading'}
+			>Integrate</Button
+		>
+	{/snippet}
+</Modal>
+
+<style>
+	.upstream-commits {
+		text-align: left;
+		padding: 0 16px;
+	}
+
+	.modal-content {
+		display: flex;
+		flex-direction: column;
+		gap: 14px;
+		padding-bottom: 14px;
+	}
+
+	.statuses {
+		box-sizing: border-box;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-around;
+		gap: 14px;
+	}
+
+	.branch-status {
+		display: flex;
+		justify-content: space-between;
+		padding: 0 14px;
+
+		&.integrated {
+			background-color: var(--clr-bg-2);
+		}
+
+		& .description {
+			display: flex;
+			flex-direction: column;
+
+			gap: 8px;
+			text-align: left;
+		}
+
+		& .action {
+			width: 144px;
+
+			&.action--centered {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
+		}
+	}
+
+	.commit-expand-button {
+		margin: 8px -16px;
+		padding: 0 16px;
+		padding-bottom: 8px;
+
+		border-bottom: 1px solid var(--clr-border-2);
+	}
+</style>
diff --git a/apps/desktop/src/lib/components/UpdateBaseButton.svelte b/apps/desktop/src/lib/components/UpdateBaseButton.svelte
index 5160223506..0ce4069847 100644
--- a/apps/desktop/src/lib/components/UpdateBaseButton.svelte
+++ b/apps/desktop/src/lib/components/UpdateBaseButton.svelte
@@ -1,130 +1,30 @@
 <script lang="ts">
+	import IntegrateUpstreamModal from './IntegrateUpstreamModal.svelte';
 	import { Project } from '$lib/backend/projects';
 	import { BaseBranchService } from '$lib/baseBranch/baseBranchService';
-	import CommitCard from '$lib/commit/CommitCard.svelte';
-	import { getGitHost } from '$lib/gitHost/interface/gitHost';
 	import { showInfo } from '$lib/notifications/toasts';
-	import ScrollableContainer from '$lib/scroll/ScrollableContainer.svelte';
-	import Select from '$lib/select/Select.svelte';
-	import SelectItem from '$lib/select/SelectItem.svelte';
 	import { getContext } from '$lib/utils/context';
 	import { BranchController } from '$lib/vbranches/branchController';
-	import { VirtualBranch } from '$lib/vbranches/types';
-	import {
-		UpstreamIntegrationService,
-		type BranchStatus,
-		type BranchStatusesWithBranches,
-		type Resolution,
-		type ResolutionApproach
-	} from '$lib/vbranches/upstreamIntegrationService';
 	import Button from '@gitbutler/ui/Button.svelte';
-	import Modal from '@gitbutler/ui/Modal.svelte';
-	import { SvelteMap } from 'svelte/reactivity';
-	import type { Readable } from 'svelte/store';
 
-	interface Props {
-		showButton?: boolean;
-	}
-
-	const { showButton = true }: Props = $props();
-
-	const upstreamIntegrationService = getContext(UpstreamIntegrationService);
 	const baseBranchService = getContext(BaseBranchService);
-	const gitHost = getGitHost();
 	const branchController = getContext(BranchController);
 	const project = getContext(Project);
 
 	const base = baseBranchService.base;
 
-	let modal = $state<Modal>();
-
-	let modalOpeningState = $state<'inert' | 'loading' | 'completed'>('inert');
-	let branchStatuses = $state<Readable<BranchStatusesWithBranches | undefined>>();
-
-	let results = $state(new SvelteMap<string, Resolution>());
-
-	let statuses = $state<{ branch: VirtualBranch; status: BranchStatus }[]>([]);
-
-	$effect(() => {
-		if ($branchStatuses?.type !== 'updatesRequired') {
-			statuses = [];
-			return;
-		}
-
-		const statusesTmp = [...$branchStatuses.subject];
-		statusesTmp.sort((a, b) => {
-			if (
-				(a.status.type !== 'fullyIntegrated' && b.status.type !== 'fullyIntegrated') ||
-				(a.status.type === 'fullyIntegrated' && b.status.type === 'fullyIntegrated')
-			) {
-				return (a.branch?.name || 'Unknown').localeCompare(b.branch?.name || 'Unknown');
-			}
-
-			if (a.status.type === 'fullyIntegrated') {
-				return 1;
-			} else {
-				return -1;
-			}
-		});
-
-		// Side effect, refresh results
-		results = new SvelteMap(
-			statusesTmp.map((status) => {
-				let defaultApproach: ResolutionApproach;
-
-				if (status.status.type === 'fullyIntegrated') {
-					defaultApproach = { type: 'delete' };
-				} else {
-					if (status.branch.allowRebasing) {
-						defaultApproach = { type: 'rebase' };
-					} else {
-						defaultApproach = { type: 'merge' };
-					}
-				}
-
-				return [
-					status.branch.id,
-					{
-						branchId: status.branch.id,
-						branchTree: status.branch.tree,
-						approach: defaultApproach
-					}
-				];
-			})
-		);
-
-		statuses = statusesTmp;
+	const displayButton = $derived.by(() => {
+		const hasUpstreamCommits = ($base?.upstreamCommits?.length ?? 0) > 0;
+		return hasUpstreamCommits;
 	});
 
-	$effect(() => {
-		if ($branchStatuses && modalOpeningState === 'loading') {
-			modalOpeningState = 'completed';
-			modal?.show();
-			console.log(modalOpeningState);
-		}
-	});
-
-	let integratingUpstream = $state<'inert' | 'loading' | 'complete'>('inert');
+	let modal = $state<IntegrateUpstreamModal>();
 
-	export function openModal() {
-		modalOpeningState = 'loading';
-		integratingUpstream = 'inert';
-		expanded = false;
-		branchStatuses = upstreamIntegrationService.upstreamStatuses();
+	function openModal() {
+		modal?.show();
 	}
 
-	function onClose() {
-		modalOpeningState = 'inert';
-	}
-
-	async function integrate() {
-		integratingUpstream = 'loading';
-		await upstreamIntegrationService.integrateUpstream([...results.values()]);
-		await baseBranchService.refresh();
-		integratingUpstream = 'complete';
-
-		modal?.close();
-	}
+	function onClose() {}
 
 	async function updateBaseBranch() {
 		let infoText = await branchController.updateBaseBranch();
@@ -132,113 +32,11 @@
 			showInfo('Stashed conflicting branches', infoText);
 		}
 	}
-
-	let expanded = $state(false);
 </script>
 
-<Modal bind:this={modal} title="Integrate upstream changes" {onClose} width="small" noPadding>
-	<ScrollableContainer maxHeight="50vh">
-		{#if $base}
-			<div class="upstream-commits">
-				{#each $base.upstreamCommits.slice(0, 2) as commit, index}
-					<CommitCard
-						{commit}
-						first={index === 0}
-						last={(() => {
-							if (expanded) {
-								return $base.upstreamCommits.length - 1 === index;
-							} else {
-								if ($base.upstreamCommits.length > 2) {
-									return index === 1;
-								} else {
-									return $base.upstreamCommits.length - 1 === index;
-								}
-							}
-						})()}
-						isUnapplied={true}
-						commitUrl={$gitHost?.commitUrl(commit.id)}
-						type="remote"
-						filesToggleable={false}
-					/>
-				{/each}
-				{#if $base.upstreamCommits.length > 2}
-					{#if expanded}
-						{#each $base.upstreamCommits.slice(2) as commit, index}
-							<CommitCard
-								{commit}
-								last={index === $base.upstreamCommits.length - 3}
-								isUnapplied={true}
-								commitUrl={$gitHost?.commitUrl(commit.id)}
-								type="remote"
-								filesToggleable={false}
-							/>
-						{/each}
-						<div class="commit-expand-button">
-							<Button wide onclick={() => (expanded = false)}>Hide</Button>
-						</div>
-					{:else}
-						<div class="commit-expand-button">
-							<Button wide onclick={() => (expanded = true)}
-								>Show more ({$base.upstreamCommits.length - 2})</Button
-							>
-						</div>
-					{/if}
-				{/if}
-			</div>
-		{/if}
-		<div class="statuses">
-			{#each statuses as { branch, status }}
-				<div class="branch-status" class:integrated={status.type === 'fullyIntegrated'}>
-					<div class="description">
-						<h5 class="text-16">{branch?.name || 'Unknown'}</h5>
-						{#if status.type === 'conflicted'}
-							<p>Conflicted</p>
-						{:else if status.type === 'saflyUpdatable' || status.type === 'empty'}
-							<p>No Conflicts</p>
-						{:else if status.type === 'fullyIntegrated'}
-							<p>Integrated</p>
-						{/if}
-					</div>
-
-					<div class="action" class:action--centered={status.type === 'fullyIntegrated'}>
-						{#if status.type === 'fullyIntegrated'}
-							<p>Changes included in base branch</p>
-						{:else if results.get(branch.id)}
-							<Select
-								value={results.get(branch.id)!.approach.type}
-								onselect={(value) => {
-								const result = results.get(branch.id)!
+<IntegrateUpstreamModal bind:this={modal} {onClose} />
 
-								results.set(branch.id, {...result, approach: { type: value as "rebase" | "merge" | "unapply" }})
-							}}
-								options={[
-									{ label: 'Rebase', value: 'rebase' },
-									{ label: 'Merge', value: 'merge' },
-									{ label: 'Stash', value: 'unapply' }
-								]}
-							>
-								{#snippet itemSnippet({ item, highlighted })}
-									<SelectItem selected={highlighted} {highlighted}>
-										{item.label}
-									</SelectItem>
-								{/snippet}
-							</Select>
-						{/if}
-					</div>
-				</div>
-			{/each}
-		</div>
-	</ScrollableContainer>
-
-	{#snippet controls()}
-		<Button onclick={() => modal?.close()}>Cancel</Button>
-		<Button onclick={integrate} style="pop" kind="solid" loading={integratingUpstream === 'loading'}
-			>Integrate</Button
-		>
-	{/snippet}
-</Modal>
-
-{#if showButton && ($base?.upstreamCommits.length || 0) > 0}
+{#if displayButton}
 	<Button
 		size="tag"
 		style="error"
@@ -251,53 +49,8 @@
 				updateBaseBranch();
 			}
 		}}
-		loading={modalOpeningState === 'loading'}
+		loading={modal?.imports.open}
 	>
 		Update
 	</Button>
 {/if}
-
-<style>
-	.upstream-commits {
-		text-align: left;
-
-		padding: 0 16px;
-	}
-
-	.branch-status {
-		display: flex;
-		justify-content: space-between;
-
-		padding: 14px;
-
-		&.integrated {
-			background-color: var(--clr-bg-2);
-		}
-
-		& .description {
-			display: flex;
-			flex-direction: column;
-
-			gap: 8px;
-			text-align: left;
-		}
-
-		& .action {
-			width: 144px;
-
-			&.action--centered {
-				display: flex;
-				align-items: center;
-				justify-content: center;
-			}
-		}
-	}
-
-	.commit-expand-button {
-		margin: 8px -16px;
-		padding: 0 16px;
-		padding-bottom: 8px;
-
-		border-bottom: 1px solid var(--clr-border-2);
-	}
-</style>
diff --git a/apps/desktop/src/lib/vbranches/upstreamIntegrationService.ts b/apps/desktop/src/lib/vbranches/upstreamIntegrationService.ts
index 3079797e2f..2f8ab47e4c 100644
--- a/apps/desktop/src/lib/vbranches/upstreamIntegrationService.ts
+++ b/apps/desktop/src/lib/vbranches/upstreamIntegrationService.ts
@@ -16,14 +16,7 @@ export type BranchStatus =
 			};
 	  };
 
-type BranchStatuses =
-	| {
-			type: 'upToDate';
-	  }
-	| {
-			type: 'updatesRequired';
-			subject: [string, BranchStatus][];
-	  };
+export type BranchStatusInfo = { branch: VirtualBranch; status: BranchStatus };
 
 export type BranchStatusesWithBranches =
 	| {
@@ -31,7 +24,7 @@ export type BranchStatusesWithBranches =
 	  }
 	| {
 			type: 'updatesRequired';
-			subject: { branch: VirtualBranch; status: BranchStatus }[];
+			subject: BranchStatusInfo[];
 	  };
 
 export type ResolutionApproach = {
@@ -44,6 +37,42 @@ export type Resolution = {
 	approach: ResolutionApproach;
 };
 
+export function getResolutionApproach(statusInfo: BranchStatusInfo): ResolutionApproach {
+	if (statusInfo.status.type === 'fullyIntegrated') {
+		return { type: 'delete' };
+	}
+
+	if (statusInfo.branch.allowRebasing) {
+		return { type: 'rebase' };
+	}
+
+	return { type: 'merge' };
+}
+
+export function sortStatusInfo(a: BranchStatusInfo, b: BranchStatusInfo): number {
+	if (
+		(a.status.type !== 'fullyIntegrated' && b.status.type !== 'fullyIntegrated') ||
+		(a.status.type === 'fullyIntegrated' && b.status.type === 'fullyIntegrated')
+	) {
+		return (a.branch?.name || 'Unknown').localeCompare(b.branch?.name || 'Unknown');
+	}
+
+	if (a.status.type === 'fullyIntegrated') {
+		return 1;
+	} else {
+		return -1;
+	}
+}
+
+type BranchStatusesResponse =
+	| {
+			type: 'upToDate';
+	  }
+	| {
+			type: 'updatesRequired';
+			subject: [string, BranchStatus][];
+	  };
+
 export class UpstreamIntegrationService {
 	constructor(
 		private project: Project,
@@ -51,10 +80,10 @@ export class UpstreamIntegrationService {
 	) {}
 
 	upstreamStatuses(): Readable<BranchStatusesWithBranches | undefined> {
-		const branchStatuses = readable<BranchStatuses | undefined>(undefined, (set) => {
-			invoke<BranchStatuses>('upstream_integration_statuses', { projectId: this.project.id }).then(
-				set
-			);
+		const branchStatuses = readable<BranchStatusesResponse | undefined>(undefined, (set) => {
+			invoke<BranchStatusesResponse>('upstream_integration_statuses', {
+				projectId: this.project.id
+			}).then(set);
 		});
 
 		const branchStatusesWithBranches = derived(
@@ -85,7 +114,6 @@ export class UpstreamIntegrationService {
 	}
 
 	async integrateUpstream(resolutions: Resolution[]) {
-		console.log(resolutions);
 		return await invoke('integrate_upstream', { projectId: this.project.id, resolutions });
 	}
 }
diff --git a/packages/ui/src/lib/Modal.svelte b/packages/ui/src/lib/Modal.svelte
index 34b18e4360..6135a3acf4 100644
--- a/packages/ui/src/lib/Modal.svelte
+++ b/packages/ui/src/lib/Modal.svelte
@@ -42,6 +42,12 @@
 		onClose?.();
 		dialogElement?.close();
 	}
+
+	export const imports = {
+		get open() {
+			return open;
+		}
+	};
 </script>
 
 <dialog