diff --git a/packages/editor-ui/src/App.vue b/packages/editor-ui/src/App.vue
index 2d1e09cf36..2498681e81 100644
--- a/packages/editor-ui/src/App.vue
+++ b/packages/editor-ui/src/App.vue
@@ -47,6 +47,7 @@ import { useNodeTypesStore } from './stores/nodeTypes';
 import { useHistoryHelper } from '@/composables/useHistoryHelper';
 import { newVersions } from '@/mixins/newVersions';
 import { useRoute } from 'vue-router/composables';
+import { useVersionControlStore } from '@/stores/versionControl';
 
 export default mixins(newVersions, showMessage, userHelpers).extend({
 	name: 'App',
@@ -69,6 +70,7 @@ export default mixins(newVersions, showMessage, userHelpers).extend({
 			useTemplatesStore,
 			useUIStore,
 			useUsersStore,
+			useVersionControlStore,
 		),
 		defaultLocale(): string {
 			return this.rootStore.defaultLocale;
@@ -196,6 +198,13 @@ export default mixins(newVersions, showMessage, userHelpers).extend({
 		if (this.defaultLocale !== 'en') {
 			await this.nodeTypesStore.getNodeTranslationHeaders();
 		}
+
+		if (
+			this.versionControlStore.isEnterpriseVersionControlEnabled &&
+			this.usersStore.isInstanceOwner
+		) {
+			this.versionControlStore.getPreferences();
+		}
 	},
 	watch: {
 		$route(route) {
diff --git a/packages/editor-ui/src/Interface.ts b/packages/editor-ui/src/Interface.ts
index cb153e3f1f..c90e18da3a 100644
--- a/packages/editor-ui/src/Interface.ts
+++ b/packages/editor-ui/src/Interface.ts
@@ -1432,3 +1432,14 @@ export type SamlPreferencesExtractedData = {
 	entityID: string;
 	returnUrl: string;
 };
+
+export type VersionControlPreferences = {
+	connected: boolean;
+	repositoryUrl: string;
+	authorName: string;
+	authorEmail: string;
+	branchName: string;
+	branchReadOnly: boolean;
+	branchColor: string;
+	publicKey?: string;
+};
diff --git a/packages/editor-ui/src/api/versionControl.ts b/packages/editor-ui/src/api/versionControl.ts
new file mode 100644
index 0000000000..d4b78a5654
--- /dev/null
+++ b/packages/editor-ui/src/api/versionControl.ts
@@ -0,0 +1,36 @@
+import type { IRestApiContext, VersionControlPreferences } from '@/Interface';
+import { makeRestApiRequest } from '@/utils';
+import type { IDataObject } from 'n8n-workflow';
+
+const versionControlApiRoot = '/version-control';
+
+export const initSsh = (context: IRestApiContext, data: IDataObject): Promise<string> => {
+	return makeRestApiRequest(context, 'POST', `${versionControlApiRoot}/init-ssh`, data);
+};
+
+export const initRepository = (
+	context: IRestApiContext,
+): Promise<{ branches: string[]; currentBranch: string }> => {
+	return makeRestApiRequest(context, 'POST', `${versionControlApiRoot}/init-repository`);
+};
+
+export const sync = (context: IRestApiContext, data: IDataObject): Promise<void> => {
+	return makeRestApiRequest(context, 'POST', `${versionControlApiRoot}/push`, data);
+};
+
+export const getConfig = (
+	context: IRestApiContext,
+): Promise<{ remoteRepository: string; name: string; email: string; currentBranch: string }> => {
+	return makeRestApiRequest(context, 'GET', `${versionControlApiRoot}/config`);
+};
+
+export const setPreferences = (
+	context: IRestApiContext,
+	preferences: Partial<VersionControlPreferences>,
+): Promise<VersionControlPreferences> => {
+	return makeRestApiRequest(context, 'POST', `${versionControlApiRoot}/preferences`, preferences);
+};
+
+export const getPreferences = (context: IRestApiContext): Promise<VersionControlPreferences> => {
+	return makeRestApiRequest(context, 'GET', `${versionControlApiRoot}/preferences`);
+};
diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index d3c3cff701..d9c8eb0ed1 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/packages/editor-ui/src/components/MainSidebar.vue
@@ -26,19 +26,39 @@
 					/>
 				</div>
 			</template>
-			<template #menuSuffix v-if="hasVersionUpdates">
-				<div :class="$style.updates" @click="openUpdatesPanel">
-					<div :class="$style.giftContainer">
-						<GiftNotificationIcon />
+			<template #menuSuffix>
+				<div v-if="hasVersionUpdates || versionControlStore.state.currentBranch">
+					<div v-if="hasVersionUpdates" :class="$style.updates" @click="openUpdatesPanel">
+						<div :class="$style.giftContainer">
+							<GiftNotificationIcon />
+						</div>
+						<n8n-text
+							:class="{ ['ml-xs']: true, [$style.expanded]: fullyExpanded }"
+							color="text-base"
+						>
+							{{ nextVersions.length > 99 ? '99+' : nextVersions.length }} update{{
+								nextVersions.length > 1 ? 's' : ''
+							}}
+						</n8n-text>
+					</div>
+					<div :class="$style.sync" v-if="versionControlStore.state.currentBranch">
+						<span>
+							<n8n-icon icon="code-branch" class="mr-xs" />
+							{{ currentBranch }}
+						</span>
+						<n8n-button
+							:title="
+								$locale.baseText('settings.versionControl.sync.prompt.title', {
+									interpolate: { branch: currentBranch },
+								})
+							"
+							icon="sync"
+							type="tertiary"
+							:size="isCollapsed ? 'mini' : 'small'"
+							square
+							@click="sync"
+						/>
 					</div>
-					<n8n-text
-						:class="{ ['ml-xs']: true, [$style.expanded]: fullyExpanded }"
-						color="text-base"
-					>
-						{{ nextVersions.length > 99 ? '99+' : nextVersions.length }} update{{
-							nextVersions.length > 1 ? 's' : ''
-						}}
-					</n8n-text>
 				</div>
 			</template>
 			<template #footer v-if="showUserArea">
@@ -114,6 +134,7 @@ import { useWorkflowsStore } from '@/stores/workflows';
 import { useRootStore } from '@/stores/n8nRootStore';
 import { useVersionsStore } from '@/stores/versions';
 import { isNavigationFailure } from 'vue-router';
+import { useVersionControlStore } from '@/stores/versionControl';
 
 export default mixins(
 	genericHelpers,
@@ -143,7 +164,11 @@ export default mixins(
 			useUsersStore,
 			useVersionsStore,
 			useWorkflowsStore,
+			useVersionControlStore,
 		),
+		currentBranch(): string {
+			return this.versionControlStore.state.currentBranch;
+		},
 		hasVersionUpdates(): boolean {
 			return this.versionsStore.hasVersionUpdates;
 		},
@@ -458,6 +483,29 @@ export default mixins(
 				});
 			}
 		},
+		async sync() {
+			const prompt = await this.$prompt(
+				this.$locale.baseText('settings.versionControl.sync.prompt.description', {
+					interpolate: { branch: this.versionControlStore.state.currentBranch },
+				}),
+				this.$locale.baseText('settings.versionControl.sync.prompt.title', {
+					interpolate: { branch: this.versionControlStore.state.currentBranch },
+				}),
+				{
+					confirmButtonText: 'Sync',
+					cancelButtonText: 'Cancel',
+					inputPlaceholder: this.$locale.baseText(
+						'settings.versionControl.sync.prompt.placeholder',
+					),
+					inputPattern: /^.+$/,
+					inputErrorMessage: this.$locale.baseText('settings.versionControl.sync.prompt.error'),
+				},
+			);
+
+			if (prompt.value) {
+				this.versionControlStore.sync({ commitMessage: prompt.value });
+			}
+		},
 	},
 });
 </script>
@@ -596,4 +644,27 @@ export default mixins(
 		display: none;
 	}
 }
+
+.sync {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: var(--spacing-s) var(--spacing-s) var(--spacing-s) var(--spacing-l);
+	margin: 0 calc(var(--spacing-l) * -1) calc(var(--spacing-m) * -1);
+	background: var(--color-background-light);
+	border-top: 1px solid var(--color-foreground-light);
+	font-size: var(--font-size-2xs);
+
+	span {
+		color: var(--color-text-light);
+	}
+
+	.sideMenuCollapsed & {
+		justify-content: center;
+		margin-left: calc(var(--spacing-xl) * -1);
+		> span {
+			display: none;
+		}
+	}
+}
 </style>
diff --git a/packages/editor-ui/src/composables/useMessage.ts b/packages/editor-ui/src/composables/useMessage.ts
index 2a5dd6e8e7..3fbecc5807 100644
--- a/packages/editor-ui/src/composables/useMessage.ts
+++ b/packages/editor-ui/src/composables/useMessage.ts
@@ -4,8 +4,8 @@ import { Message, MessageBox } from 'element-ui';
 export function useMessage() {
 	async function alert(
 		message: string,
-		configOrTitle: string | ElMessageBoxOptions | undefined,
-		config: ElMessageBoxOptions | undefined,
+		configOrTitle?: string | ElMessageBoxOptions,
+		config?: ElMessageBoxOptions,
 	) {
 		const resolvedConfig = {
 			...(config || (typeof configOrTitle === 'object' ? configOrTitle : {})),
@@ -21,8 +21,8 @@ export function useMessage() {
 
 	async function confirm(
 		message: string,
-		configOrTitle: string | ElMessageBoxOptions | undefined,
-		config: ElMessageBoxOptions | undefined,
+		configOrTitle?: string | ElMessageBoxOptions,
+		config?: ElMessageBoxOptions,
 	) {
 		const resolvedConfig = {
 			...(config || (typeof configOrTitle === 'object' ? configOrTitle : {})),
@@ -41,8 +41,8 @@ export function useMessage() {
 
 	async function prompt(
 		message: string,
-		configOrTitle: string | ElMessageBoxOptions | undefined,
-		config: ElMessageBoxOptions | undefined,
+		configOrTitle?: string | ElMessageBoxOptions,
+		config?: ElMessageBoxOptions,
 	) {
 		const resolvedConfig = {
 			...(config || (typeof configOrTitle === 'object' ? configOrTitle : {})),
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index 30eb69c8dd..ecf79a1733 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -1286,6 +1286,24 @@
 	"settings.versionControl.actionBox.title": "Available on Enterprise plan",
 	"settings.versionControl.actionBox.description": "Use Version Control to connect your instance to an external Git repository to backup and track changes made to your workflows, variables, and credentials. With Version Control you can also sync instances across multiple environments (development, production...).",
 	"settings.versionControl.actionBox.buttonText": "See plans",
+	"settings.versionControl.description": "Versioning allows you to connect your n8n instance to a Git branch of a repository. You can connect your branches to multiples n8n instances to create a multi environments setup. Learn how to set up versioning and environments in n8n.",
+	"settings.versionControl.repoUrl": "Git repository URL",
+	"settings.versionControl.repoUrlPlaceholder": "e.g. git@github.com:my-team/my-repository",
+	"settings.versionControl.repoUrlDescription": "The SSH url of your Git repository",
+	"settings.versionControl.authorName": "Author name",
+	"settings.versionControl.authorEmail": "Author email",
+	"settings.versionControl.sshKey": "SSH Key",
+	"settings.versionControl.sshKeyDescription": "Paste the SSH key in yout git repository settings. {link}.",
+	"settings.versionControl.sshKeyDescriptionLink": "More info.",
+	"settings.versionControl.button.continue": "Continue",
+	"settings.versionControl.button.connect": "Connect",
+	"settings.versionControl.branches": "Select branch",
+	"settings.versionControl.switchBranch.title": "Switch to {branch} branch",
+	"settings.versionControl.switchBranch.description": "Please confirm you want to switch the current n8n instance to the branch: {branch}",
+	"settings.versionControl.sync.prompt.title": "Sync changes in {branch} branch",
+	"settings.versionControl.sync.prompt.description": "All the changes on your n8n instances will be synced with branch {branch} on the remote git repository. The following git sequence will be executed: pull > commit > push.",
+	"settings.versionControl.sync.prompt.placeholder": "Commit message",
+	"settings.versionControl.sync.prompt.error": "Please enter a commit message",
 	"showMessage.cancel": "@:_reusableBaseText.cancel",
 	"showMessage.ok": "OK",
 	"showMessage.showDetails": "Show Details",
diff --git a/packages/editor-ui/src/stores/versionControl.ts b/packages/editor-ui/src/stores/versionControl.ts
index 315d204455..9c0d0abfa0 100644
--- a/packages/editor-ui/src/stores/versionControl.ts
+++ b/packages/editor-ui/src/stores/versionControl.ts
@@ -1,16 +1,88 @@
-import { computed } from 'vue';
+import { computed, reactive } from 'vue';
 import { defineStore } from 'pinia';
+import type { IDataObject } from 'n8n-workflow';
 import { EnterpriseEditionFeature } from '@/constants';
 import { useSettingsStore } from '@/stores/settings';
+import * as vcApi from '@/api/versionControl';
+import { useRootStore } from '@/stores/n8nRootStore';
+import type { VersionControlPreferences } from '@/Interface';
 
 export const useVersionControlStore = defineStore('versionControl', () => {
+	const rootStore = useRootStore();
 	const settingsStore = useSettingsStore();
 
 	const isEnterpriseVersionControlEnabled = computed(() =>
 		settingsStore.isEnterpriseFeatureEnabled(EnterpriseEditionFeature.VersionControl),
 	);
 
+	const preferences = reactive<VersionControlPreferences>({
+		branchName: '',
+		authorName: '',
+		authorEmail: '',
+		repositoryUrl: '',
+		branchReadOnly: false,
+		branchColor: '#000000',
+		connected: false,
+		publicKey: '',
+	});
+
+	const state = reactive({
+		branches: [] as string[],
+		currentBranch: '',
+		authorName: '',
+		authorEmail: '',
+		repositoryUrl: '',
+		sshKey: '',
+		commitMessage: 'commit message',
+	});
+
+	const initSsh = async (data: IDataObject) => {
+		state.sshKey = await vcApi.initSsh(rootStore.getRestApiContext, data);
+	};
+
+	const initRepository = async () => {
+		const { branches, currentBranch } = await vcApi.initRepository(rootStore.getRestApiContext);
+		state.branches = branches;
+		state.currentBranch = currentBranch;
+	};
+
+	const sync = async (data: { commitMessage: string }) => {
+		state.commitMessage = data.commitMessage;
+		return vcApi.sync(rootStore.getRestApiContext, { message: data.commitMessage });
+	};
+	const getConfig = async () => {
+		const { remoteRepository, name, email, currentBranch } = await vcApi.getConfig(
+			rootStore.getRestApiContext,
+		);
+		state.repositoryUrl = remoteRepository;
+		state.authorName = name;
+		state.authorEmail = email;
+		state.currentBranch = currentBranch;
+	};
+
+	const setPreferences = (data: Partial<VersionControlPreferences>) => {
+		Object.assign(preferences, data);
+	};
+
+	const getPreferences = async () => {
+		const data = await vcApi.getPreferences(rootStore.getRestApiContext);
+		setPreferences(data);
+	};
+
+	const savePreferences = async (preferences: Partial<VersionControlPreferences>) => {
+		const data = await vcApi.setPreferences(rootStore.getRestApiContext, preferences);
+		setPreferences(data);
+	};
+
 	return {
 		isEnterpriseVersionControlEnabled,
+		state,
+		initSsh,
+		initRepository,
+		sync,
+		getConfig,
+		getPreferences,
+		setPreferences,
+		savePreferences,
 	};
 });
diff --git a/packages/editor-ui/src/views/SettingsVersionControl.vue b/packages/editor-ui/src/views/SettingsVersionControl.vue
index 4c6906c6a5..917e3b870b 100644
--- a/packages/editor-ui/src/views/SettingsVersionControl.vue
+++ b/packages/editor-ui/src/views/SettingsVersionControl.vue
@@ -1,10 +1,48 @@
 <script lang="ts" setup>
+import { computed, ref } from 'vue';
 import { i18n as locale } from '@/plugins/i18n';
 import { useVersionControlStore } from '@/stores/versionControl';
 import { useUIStore } from '@/stores/ui';
+import { useMessage } from '@/composables';
 
 const versionControlStore = useVersionControlStore();
 const uiStore = useUIStore();
+const message = useMessage();
+
+const sshKey = computed(() => versionControlStore.state.sshKey);
+const branch = computed(() => versionControlStore.state.currentBranch);
+const branches = ref<string[]>([]);
+const selectElement = ref<HTMLSelectElement | null>(null);
+
+const onContinue = () => {
+	versionControlStore.initSsh({
+		name: versionControlStore.state.authorName,
+		email: versionControlStore.state.authorEmail,
+		remoteRepository: versionControlStore.state.repositoryUrl,
+	});
+};
+
+const onConnect = () => {
+	versionControlStore.initRepository();
+};
+
+const onSelect = async (b: string) => {
+	if (b === branch.value) {
+		return;
+	}
+	const switchBranch = await message
+		.confirm(
+			locale.baseText('settings.versionControl.switchBranch.description', {
+				interpolate: { branch: b },
+			}),
+			locale.baseText('settings.versionControl.switchBranch.title', { interpolate: { branch: b } }),
+		)
+		.catch(() => {});
+	if (switchBranch === 'confirm') {
+		versionControlStore.state.currentBranch = b;
+		selectElement.value?.blur();
+	}
+};
 
 const goToUpgrade = () => {
 	uiStore.goToUpgrade('version-control', 'upgrade-version-control');
@@ -17,7 +55,69 @@ const goToUpgrade = () => {
 		<div
 			v-if="versionControlStore.isEnterpriseVersionControlEnabled"
 			data-test-id="version-control-content-licensed"
-		></div>
+		>
+			<n8n-callout theme="secondary" icon="info-circle" class="mt-2xl mb-l">{{
+				locale.baseText('settings.versionControl.description')
+			}}</n8n-callout>
+			<div :class="$style.group">
+				<label for="repoUrl">{{ locale.baseText('settings.versionControl.repoUrl') }}</label>
+				<n8n-input
+					id="repoUrl"
+					:placeholder="locale.baseText('settings.versionControl.repoUrlPlaceholder')"
+					v-model="versionControlStore.state.repositoryUrl"
+				/>
+				<small>{{ locale.baseText('settings.versionControl.repoUrlDescription') }}</small>
+			</div>
+			<div :class="$style.group">
+				<label for="authorName">{{ locale.baseText('settings.versionControl.authorName') }}</label>
+				<n8n-input id="authorName" v-model="versionControlStore.state.authorName" />
+			</div>
+			<div :class="$style.group">
+				<label for="authorEmail">{{
+					locale.baseText('settings.versionControl.authorEmail')
+				}}</label>
+				<n8n-input id="authorEmail" v-model="versionControlStore.state.authorEmail" />
+			</div>
+			<n8n-button v-if="!sshKey" @click="onContinue" size="large" class="mt-2xs">{{
+				locale.baseText('settings.versionControl.button.continue')
+			}}</n8n-button>
+			<div v-if="sshKey" :class="$style.group">
+				<label>{{ locale.baseText('settings.versionControl.sshKey') }}</label>
+				<CopyInput
+					:value="versionControlStore.state.sshKey"
+					:copy-button-text="locale.baseText('generic.clickToCopy')"
+				/>
+				<n8n-notice type="info" class="mt-s">
+					<i18n path="settings.versionControl.sshKeyDescription">
+						<template #link>
+							<a href="#" target="_blank">
+								{{ locale.baseText('settings.versionControl.sshKeyDescriptionLink') }}
+							</a>
+						</template>
+					</i18n>
+				</n8n-notice>
+			</div>
+			<n8n-button v-if="sshKey" @click="onConnect" size="large" :class="$style.connect">{{
+				locale.baseText('settings.versionControl.button.connect')
+			}}</n8n-button>
+			<div v-if="versionControlStore.state.branches.length" :class="$style.group">
+				<label>{{ locale.baseText('settings.versionControl.branches') }}</label>
+				<n8n-select
+					ref="selectElement"
+					:value="versionControlStore.state.currentBranch"
+					size="medium"
+					filterable
+					@input="onSelect"
+				>
+					<n8n-option
+						v-for="b in versionControlStore.state.branches"
+						:key="b"
+						:value="b"
+						:label="b"
+					/>
+				</n8n-select>
+			</div>
+		</div>
 		<n8n-action-box
 			v-else
 			data-test-id="version-control-content-unlicensed"
@@ -34,6 +134,27 @@ const goToUpgrade = () => {
 </template>
 
 <style lang="scss" module>
+.group {
+	padding: 0 0 var(--spacing-2xs);
+
+	label {
+		display: inline-block;
+		padding: 0 0 var(--spacing-2xs);
+		font-size: var(--font-size-s);
+	}
+
+	small {
+		display: inline-block;
+		padding: var(--spacing-2xs) 0 0;
+		font-size: var(--font-size-2xs);
+		color: var(--color-text-light);
+	}
+}
+
+.connect {
+	margin: calc(var(--spacing-2xs) * -1) 0 var(--spacing-2xs);
+}
+
 .actionBox {
 	margin: var(--spacing-2xl) 0 0;
 }