diff --git a/templates/repo/home.tmpl b/templates/repo/home.tmpl
index f2cec3bba3..a648d7ef45 100644
--- a/templates/repo/home.tmpl
+++ b/templates/repo/home.tmpl
@@ -5,7 +5,6 @@
 {{$hasTreeSidebar := not $isTreePathRoot}}
 {{$showTreeSidebar := .RepoPreferences.ShowFileViewTreeSidebar}}
 {{$hideTreeSidebar := not $showTreeSidebar}}
-{{$hasAndShowTreeSidebar := and $hasTreeSidebar $showTreeSidebar}}
 <div role="main" aria-label="{{.Title}}" class="page-content repository file list {{if .IsBlame}}blame{{end}}">
 	{{template "repo/header" .}}
 	<div class="ui container {{if or $hasTreeSidebar .IsBlame}}fluid padded{{end}}">
@@ -29,92 +28,7 @@
 			{{end}}
 
 			<div class="repo-home-filelist">
-				{{template "repo/sub_menu" .}}
-				<div class="repo-button-row">
-					<div class="repo-button-row-left">
-						{{if $hasTreeSidebar}}
-							<button class="show-tree-sidebar-button ui compact basic button icon not-mobile {{if $showTreeSidebar}}tw-hidden{{end}}" title="{{ctx.Locale.Tr "repo.diff.show_file_tree"}}">
-								{{svg "octicon-sidebar-collapse" 20 "icon"}}
-							</button>
-						{{end}}
-						{{template "repo/home_branch_dropdown" (dict "ctxData" . "containerClasses" (Iif $hasAndShowTreeSidebar "tw-hidden" ""))}}
-						{{if and .CanCompareOrPull .IsViewBranch (not .Repository.IsArchived)}}
-							{{$cmpBranch := ""}}
-							{{if ne .Repository.ID .BaseRepo.ID}}
-								{{$cmpBranch = printf "%s/%s:" (.Repository.OwnerName|PathEscape) (.Repository.Name|PathEscape)}}
-							{{end}}
-							{{$cmpBranch = print $cmpBranch (.BranchName|PathEscapeSegments)}}
-							{{$compareLink := printf "%s/compare/%s...%s" .BaseRepo.Link (.BaseRepo.DefaultBranch|PathEscapeSegments) $cmpBranch}}
-							<a id="new-pull-request" role="button" class="ui compact basic button {{if $hasAndShowTreeSidebar}}tw-hidden{{end}}" href="{{$compareLink}}"
-								data-tooltip-content="{{if .PullRequestCtx.Allowed}}{{ctx.Locale.Tr "repo.pulls.compare_changes"}}{{else}}{{ctx.Locale.Tr "action.compare_branch"}}{{end}}">
-								{{svg "octicon-git-pull-request"}}
-							</a>
-						{{end}}
-
-						<!-- Show go to file if on home page -->
-						{{if $isTreePathRoot}}
-							<a href="{{.Repository.Link}}/find/{{.BranchNameSubURL}}" class="ui compact basic button">{{ctx.Locale.Tr "repo.find_file.go_to_file"}}</a>
-						{{end}}
-
-						{{if and .CanWriteCode .IsViewBranch (not .Repository.IsMirror) (not .Repository.IsArchived) (not .IsViewFile)}}
-							<button class="add-file-dropdown ui dropdown basic compact jump button {{if $hasAndShowTreeSidebar}}tw-hidden{{end}}"{{if not .Repository.CanEnableEditor}} disabled{{end}}>
-								{{ctx.Locale.Tr "repo.editor.add_file"}}
-								{{svg "octicon-triangle-down" 14 "dropdown icon"}}
-								<div class="menu">
-									<a class="item" href="{{.RepoLink}}/_new/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}">
-										{{ctx.Locale.Tr "repo.editor.new_file"}}
-									</a>
-									{{if .RepositoryUploadEnabled}}
-									<a class="item" href="{{.RepoLink}}/_upload/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}">
-										{{ctx.Locale.Tr "repo.editor.upload_file"}}
-									</a>
-									{{end}}
-									<a class="item" href="{{.RepoLink}}/_diffpatch/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}">
-										{{ctx.Locale.Tr "repo.editor.patch"}}
-									</a>
-								</div>
-							</button>
-						{{end}}
-
-						{{if and $isTreePathRoot .Repository.IsTemplate}}
-							<a role="button" class="ui primary compact button" href="{{AppSubUrl}}/repo/create?template_id={{.Repository.ID}}">
-								{{ctx.Locale.Tr "repo.use_template"}}
-							</a>
-						{{end}}
-
-						{{if not $isTreePathRoot}}
-							{{$treeNameIdxLast := Eval $treeNamesLen "-" 1}}
-							<span id="repo_path" class="breadcrumb repo-path tw-ml-1">
-								<a class="section" href="{{.RepoLink}}/src/{{.BranchNameSubURL}}" title="{{.Repository.Name}}">{{StringUtils.EllipsisString .Repository.Name 30}}</a>
-								{{- range $i, $v := .TreeNames -}}
-									<span class="breadcrumb-divider">/</span>
-									{{- if eq $i $treeNameIdxLast -}}
-										<span class="active section" title="{{$v}}">{{$v}}</span>
-										<button class="btn interact-fg tw-mx-1" data-clipboard-text="{{$.TreePath}}" data-tooltip-content="{{ctx.Locale.Tr "copy_path"}}">{{svg "octicon-copy" 14}}</button>
-									{{- else -}}
-										{{$p := index $.Paths $i}}<span class="section"><a href="{{$.BranchLink}}/{{PathEscapeSegments $p}}" title="{{$v}}">{{$v}}</a></span>
-									{{- end -}}
-								{{- end -}}
-							</span>
-						{{end}}
-					</div>
-
-					<div class="repo-button-row-right">
-						<!-- Only show clone panel in repository home page -->
-						{{if $isTreePathRoot}}
-							{{template "repo/clone_panel" .}}
-						{{end}}
-						{{if and (not $isTreePathRoot) (not .IsViewFile) (not .IsBlame)}}{{/* IsViewDirectory (not home), TODO: split the templates, avoid using "if" tricks */}}
-							<a id="path_history" class="ui button" href="{{.RepoLink}}/commits/{{.BranchNameSubURL}}/{{.TreePath | PathEscapeSegments}}">
-								{{svg "octicon-history" 16 "tw-mr-2"}}{{ctx.Locale.Tr "repo.file_history"}}
-							</a>
-						{{end}}
-					</div>
-				</div>
-
-				<div id="path_content">
-					{{template "repo/home_content" .}}
-				</div>
+				{{template "repo/home_content" .}}
 			</div>
 
 			{{if $showSidebar}}
diff --git a/templates/repo/home_content.tmpl b/templates/repo/home_content.tmpl
index 7398d6e7e5..310e93bc86 100644
--- a/templates/repo/home_content.tmpl
+++ b/templates/repo/home_content.tmpl
@@ -1,3 +1,92 @@
+{{$treeNamesLen := len .TreeNames}}
+{{$isTreePathRoot := eq $treeNamesLen 0}}
+{{$showSidebar := and $isTreePathRoot (not .HideRepoInfo) (not .IsBlame)}}
+{{$hasTreeSidebar := not $isTreePathRoot}}
+{{$showTreeSidebar := .RepoPreferences.ShowFileViewTreeSidebar}}
+
+{{template "repo/sub_menu" .}}
+<div class="repo-button-row">
+	<div class="repo-button-row-left">
+		{{if $hasTreeSidebar}}
+			<button class="show-tree-sidebar-button ui compact basic button icon not-mobile {{if $showTreeSidebar}}tw-hidden{{end}}" title="{{ctx.Locale.Tr "repo.diff.show_file_tree"}}">
+				{{svg "octicon-sidebar-collapse" 20 "icon"}}
+			</button>
+		{{end}}
+		{{template "repo/home_branch_dropdown" (dict "ctxData" .)}}
+		{{if and .CanCompareOrPull .IsViewBranch (not .Repository.IsArchived)}}
+			{{$cmpBranch := ""}}
+			{{if ne .Repository.ID .BaseRepo.ID}}
+				{{$cmpBranch = printf "%s/%s:" (.Repository.OwnerName|PathEscape) (.Repository.Name|PathEscape)}}
+			{{end}}
+			{{$cmpBranch = print $cmpBranch (.BranchName|PathEscapeSegments)}}
+			{{$compareLink := printf "%s/compare/%s...%s" .BaseRepo.Link (.BaseRepo.DefaultBranch|PathEscapeSegments) $cmpBranch}}
+			<a id="new-pull-request" role="button" class="ui compact basic button" href="{{$compareLink}}"
+				data-tooltip-content="{{if .PullRequestCtx.Allowed}}{{ctx.Locale.Tr "repo.pulls.compare_changes"}}{{else}}{{ctx.Locale.Tr "action.compare_branch"}}{{end}}">
+				{{svg "octicon-git-pull-request"}}
+			</a>
+		{{end}}
+
+		<!-- Show go to file if on home page -->
+		{{if $isTreePathRoot}}
+			<a href="{{.Repository.Link}}/find/{{.BranchNameSubURL}}" class="ui compact basic button">{{ctx.Locale.Tr "repo.find_file.go_to_file"}}</a>
+		{{end}}
+
+		{{if and .CanWriteCode .IsViewBranch (not .Repository.IsMirror) (not .Repository.IsArchived) (not .IsViewFile)}}
+			<button class="add-file-dropdown ui dropdown basic compact jump button"{{if not .Repository.CanEnableEditor}} disabled{{end}}>
+				{{ctx.Locale.Tr "repo.editor.add_file"}}
+				{{svg "octicon-triangle-down" 14 "dropdown icon"}}
+				<div class="menu">
+					<a class="item" href="{{.RepoLink}}/_new/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}">
+						{{ctx.Locale.Tr "repo.editor.new_file"}}
+					</a>
+					{{if .RepositoryUploadEnabled}}
+					<a class="item" href="{{.RepoLink}}/_upload/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}">
+						{{ctx.Locale.Tr "repo.editor.upload_file"}}
+					</a>
+					{{end}}
+					<a class="item" href="{{.RepoLink}}/_diffpatch/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}">
+						{{ctx.Locale.Tr "repo.editor.patch"}}
+					</a>
+				</div>
+			</button>
+		{{end}}
+
+		{{if and $isTreePathRoot .Repository.IsTemplate}}
+			<a role="button" class="ui primary compact button" href="{{AppSubUrl}}/repo/create?template_id={{.Repository.ID}}">
+				{{ctx.Locale.Tr "repo.use_template"}}
+			</a>
+		{{end}}
+
+		{{if not $isTreePathRoot}}
+			{{$treeNameIdxLast := Eval $treeNamesLen "-" 1}}
+			<span class="breadcrumb repo-path tw-ml-1">
+				<a class="section" href="{{.RepoLink}}/src/{{.BranchNameSubURL}}" title="{{.Repository.Name}}">{{StringUtils.EllipsisString .Repository.Name 30}}</a>
+				{{- range $i, $v := .TreeNames -}}
+					<span class="breadcrumb-divider">/</span>
+					{{- if eq $i $treeNameIdxLast -}}
+						<span class="active section" title="{{$v}}">{{$v}}</span>
+						<button class="btn interact-fg tw-mx-1" data-clipboard-text="{{$.TreePath}}" data-tooltip-content="{{ctx.Locale.Tr "copy_path"}}">{{svg "octicon-copy" 14}}</button>
+					{{- else -}}
+						{{$p := index $.Paths $i}}<span class="section"><a href="{{$.BranchLink}}/{{PathEscapeSegments $p}}" title="{{$v}}">{{$v}}</a></span>
+					{{- end -}}
+				{{- end -}}
+			</span>
+		{{end}}
+	</div>
+
+	<div class="repo-button-row-right">
+		<!-- Only show clone panel in repository home page -->
+		{{if $isTreePathRoot}}
+			{{template "repo/clone_panel" .}}
+		{{end}}
+		{{if and (not $isTreePathRoot) (not .IsViewFile) (not .IsBlame)}}{{/* IsViewDirectory (not home), TODO: split the templates, avoid using "if" tricks */}}
+			<a class="ui button" href="{{.RepoLink}}/commits/{{.BranchNameSubURL}}/{{.TreePath | PathEscapeSegments}}">
+				{{svg "octicon-history" 16 "tw-mr-2"}}{{ctx.Locale.Tr "repo.file_history"}}
+			</a>
+		{{end}}
+	</div>
+</div>
+
 {{$treeNamesLen := len .TreeNames}}
 {{$isTreePathRoot := eq $treeNamesLen 0}}
 
diff --git a/templates/repo/view_file_tree_sidebar.tmpl b/templates/repo/view_file_tree_sidebar.tmpl
index 0bddabfb26..f52e17fdef 100644
--- a/templates/repo/view_file_tree_sidebar.tmpl
+++ b/templates/repo/view_file_tree_sidebar.tmpl
@@ -12,42 +12,7 @@
 		</button>
 		<b> Files</b>
 	</div>
-	<div class="sidebar-ref">
-		{{template "repo/home_branch_dropdown" (dict "ctxData" .)}}
-
-		{{if and .CanCompareOrPull .IsViewBranch (not .Repository.IsArchived)}}
-			{{$cmpBranch := ""}}
-			{{if ne .Repository.ID .BaseRepo.ID}}
-				{{$cmpBranch = printf "%s/%s:" (.Repository.OwnerName|PathEscape) (.Repository.Name|PathEscape)}}
-			{{end}}
-			{{$cmpBranch = print $cmpBranch (.BranchName|PathEscapeSegments)}}
-			{{$compareLink := printf "%s/compare/%s...%s" .BaseRepo.Link (.BaseRepo.DefaultBranch|PathEscapeSegments) $cmpBranch}}
-			<a role="button" class="ui compact basic button" href="{{$compareLink}}"
-				data-tooltip-content="{{if .PullRequestCtx.Allowed}}{{ctx.Locale.Tr "repo.pulls.compare_changes"}}{{else}}{{ctx.Locale.Tr "action.compare_branch"}}{{end}}">
-				{{svg "octicon-git-pull-request"}}
-			</a>
-		{{end}}
-
-		{{if and .CanWriteCode .IsViewBranch (not .Repository.IsMirror) (not .Repository.IsArchived) (not .IsViewFile)}}
-			<button class="ui dropdown basic compact jump button"{{if not .Repository.CanEnableEditor}} disabled{{end}}>
-				{{ctx.Locale.Tr "repo.editor.add_file"}}
-				{{svg "octicon-triangle-down" 14 "dropdown icon"}}
-				<div class="menu">
-					<a class="item" href="{{.RepoLink}}/_new/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}">
-						{{ctx.Locale.Tr "repo.editor.new_file"}}
-					</a>
-					{{if .RepositoryUploadEnabled}}
-					<a class="item" href="{{.RepoLink}}/_upload/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}">
-						{{ctx.Locale.Tr "repo.editor.upload_file"}}
-					</a>
-					{{end}}
-					<a class="item" href="{{.RepoLink}}/_diffpatch/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}">
-						{{ctx.Locale.Tr "repo.editor.patch"}}
-					</a>
-				</div>
-			</button>
-		{{end}}
-	</div>
+	<!--// TODO: Dynamically move components such as refSelector and createPR here-->
 </div>
 <div class="view-file-tree-sidebar-bottom">
 	<div id="view-file-tree" class="is-loading"
diff --git a/web_src/js/features/repo-view-file-tree-sidebar.ts b/web_src/js/features/repo-view-file-tree-sidebar.ts
index 1e4bf6f66e..8adcc2ab69 100644
--- a/web_src/js/features/repo-view-file-tree-sidebar.ts
+++ b/web_src/js/features/repo-view-file-tree-sidebar.ts
@@ -2,23 +2,17 @@ import {createApp, ref} from 'vue';
 import {toggleElem} from '../utils/dom.ts';
 import {GET, PUT} from '../modules/fetch.ts';
 import ViewFileTree from '../components/ViewFileTree.vue';
+import RepoBranchTagSelector from '../components/RepoBranchTagSelector.vue';
+import {initGlobalDropdown} from './common-page.ts';
 
 async function toggleSidebar(visibility) {
   const sidebarEl = document.querySelector('.repo-view-file-tree-sidebar');
   const showBtnEl = document.querySelector('.show-tree-sidebar-button');
-  const refSelectorEl = document.querySelector('.repo-home-filelist .js-branch-tag-selector');
-  const newPrBtnEl = document.querySelector('.repo-home-filelist #new-pull-request');
-  const addFileEl = document.querySelector('.repo-home-filelist .add-file-dropdown');
   const containerClassList = sidebarEl.parentElement.classList;
   containerClassList.toggle('repo-grid-tree-sidebar', visibility);
   containerClassList.toggle('repo-grid-filelist-only', !visibility);
   toggleElem(sidebarEl, visibility);
   toggleElem(showBtnEl, !visibility);
-  toggleElem(refSelectorEl, !visibility);
-  toggleElem(newPrBtnEl, !visibility);
-  if (addFileEl) {
-    toggleElem(addFileEl, !visibility);
-  }
 
   // save to session
   await PUT('/repo/preferences', {
@@ -46,24 +40,34 @@ async function loadChildren(item, recursive?: boolean) {
   return null;
 }
 
-async function loadContent(item) {
-  // todo: change path of `repo_path` `path_history`
+async function loadContent() {
   // load content by path (content based on home_content.tmpl)
   const response = await GET(`${window.location.href}?only_content=true`);
-  document.querySelector('#path_content').innerHTML = await response.text();
+  document.querySelector('.repo-home-filelist').innerHTML = await response.text();
+  reloadContentScript();
+}
+
+function reloadContentScript() {
+  document.querySelector('.repo-home-filelist .show-tree-sidebar-button').addEventListener('click', () => {
+    toggleSidebar(true);
+  });
+  const refSelectorEl = document.querySelector('.repo-home-filelist .js-branch-tag-selector');
+  if (refSelectorEl) {
+    createApp(RepoBranchTagSelector, {elRoot: refSelectorEl}).mount(refSelectorEl);
+  }
+  initGlobalDropdown();
 }
 
 export async function initViewFileTreeSidebar() {
   const sidebarElement = document.querySelector('.repo-view-file-tree-sidebar');
   if (!sidebarElement) return;
 
-  document.querySelector('.show-tree-sidebar-button').addEventListener('click', () => {
-    toggleSidebar(true);
-  });
-
   document.querySelector('.hide-tree-sidebar-button').addEventListener('click', () => {
     toggleSidebar(false);
   });
+  document.querySelector('.repo-home-filelist .show-tree-sidebar-button').addEventListener('click', () => {
+    toggleSidebar(true);
+  });
 
   const fileTree = document.querySelector('#view-file-tree');
   const baseUrl = fileTree.getAttribute('data-api-base-url');
@@ -79,7 +83,7 @@ export async function initViewFileTreeSidebar() {
   const fileTreeView = createApp(ViewFileTree, {files, selectedItem, loadChildren, loadContent: (item) => {
     window.history.pushState(null, null, `${baseUrl}/src/${refType}/${refName}/${item.path}`);
     selectedItem.value = item.path;
-    loadContent(item);
+    loadContent();
   }});
   fileTreeView.mount(fileTree);
 }