diff --git a/models/user/setting_keys.go b/models/user/setting_keys.go
index 3149aae18ba68..ae09086db99b7 100644
--- a/models/user/setting_keys.go
+++ b/models/user/setting_keys.go
@@ -17,5 +17,6 @@ const (
 	// SignupIP is the IP address that the user signed up with
 	SignupIP = "signup.ip"
 	// SignupUserAgent is the user agent that the user signed up with
-	SignupUserAgent = "signup.user_agent"
+	SignupUserAgent                    = "signup.user_agent"
+	SettingsKeyShowFileViewTreeSidebar = "tree.show_file_view_tree_sidebar"
 )
diff --git a/modules/git/ref.go b/modules/git/ref.go
index f20a175e422a8..7f3c2d465790b 100644
--- a/modules/git/ref.go
+++ b/modules/git/ref.go
@@ -84,6 +84,19 @@ func RefNameFromCommit(shortName string) RefName {
 	return RefName(shortName)
 }
 
+func RefNameFromTypeAndShortName(tp RefType, shortName string) RefName {
+	switch tp {
+	case RefTypeBranch:
+		return RefNameFromBranch(shortName)
+	case RefTypeTag:
+		return RefNameFromTag(shortName)
+	case RefTypeCommit:
+		return RefNameFromCommit(shortName)
+	default:
+		return ""
+	}
+}
+
 func (ref RefName) String() string {
 	return string(ref)
 }
diff --git a/routers/web/repo/blame.go b/routers/web/repo/blame.go
index 1022c5e6d6c26..31a6a577728a7 100644
--- a/routers/web/repo/blame.go
+++ b/routers/web/repo/blame.go
@@ -46,6 +46,19 @@ func RefBlame(ctx *context.Context) {
 		return
 	}
 
+	showFileViewTreeSidebar := true
+	if ctx.Doer != nil {
+		v, err := user_model.GetUserSetting(ctx, ctx.Doer.ID, user_model.SettingsKeyShowFileViewTreeSidebar, "true")
+		if err != nil {
+			log.Error("GetUserSetting: %v", err)
+		} else {
+			showFileViewTreeSidebar, _ = strconv.ParseBool(v)
+		}
+	}
+	ctx.Data["RepoPreferences"] = &preferencesForm{
+		ShowFileViewTreeSidebar: showFileViewTreeSidebar,
+	}
+
 	branchLink := ctx.Repo.RepoLink + "/src/" + ctx.Repo.RefTypeNameSubURL()
 	treeLink := branchLink
 	rawLink := ctx.Repo.RepoLink + "/raw/" + ctx.Repo.RefTypeNameSubURL()
@@ -91,9 +104,16 @@ func RefBlame(ctx *context.Context) {
 	ctx.Data["FileSize"] = fileSize
 	ctx.Data["FileName"] = blob.Name()
 
+	var tplName templates.TplName
+	if ctx.FormBool("only_content") {
+		tplName = tplRepoHomeContent
+	} else {
+		tplName = tplRepoHome
+	}
+
 	if fileSize >= setting.UI.MaxDisplayFileSize {
 		ctx.Data["IsFileTooLarge"] = true
-		ctx.HTML(http.StatusOK, tplRepoHome)
+		ctx.HTML(http.StatusOK, tplName)
 		return
 	}
 
@@ -121,7 +141,7 @@ func RefBlame(ctx *context.Context) {
 
 	renderBlame(ctx, result.Parts, commitNames)
 
-	ctx.HTML(http.StatusOK, tplRepoHome)
+	ctx.HTML(http.StatusOK, tplName)
 }
 
 type blameResult struct {
diff --git a/routers/web/repo/repo.go b/routers/web/repo/repo.go
index e5c397ec5415e..84a86e96359e4 100644
--- a/routers/web/repo/repo.go
+++ b/routers/web/repo/repo.go
@@ -9,6 +9,7 @@ import (
 	"fmt"
 	"net/http"
 	"slices"
+	"strconv"
 	"strings"
 
 	"code.gitea.io/gitea/models/db"
@@ -20,6 +21,7 @@ import (
 	user_model "code.gitea.io/gitea/models/user"
 	"code.gitea.io/gitea/modules/cache"
 	"code.gitea.io/gitea/modules/git"
+	"code.gitea.io/gitea/modules/json"
 	"code.gitea.io/gitea/modules/log"
 	"code.gitea.io/gitea/modules/optional"
 	repo_module "code.gitea.io/gitea/modules/repository"
@@ -746,3 +748,21 @@ func PrepareBranchList(ctx *context.Context) {
 	}
 	ctx.Data["Branches"] = brs
 }
+
+type preferencesForm struct {
+	ShowFileViewTreeSidebar bool `json:"show_file_view_tree_sidebar"`
+}
+
+func UpdatePreferences(ctx *context.Context) {
+	form := &preferencesForm{}
+	if err := json.NewDecoder(ctx.Req.Body).Decode(&form); err != nil {
+		ctx.ServerError("DecodePreferencesForm", err)
+		return
+	}
+	if err := user_model.SetUserSetting(ctx, ctx.Doer.ID, user_model.SettingsKeyShowFileViewTreeSidebar,
+		strconv.FormatBool(form.ShowFileViewTreeSidebar)); err != nil {
+		log.Error("SetUserSetting: %v", err)
+	}
+
+	ctx.JSONOK()
+}
diff --git a/routers/web/repo/treelist.go b/routers/web/repo/tree.go
similarity index 56%
rename from routers/web/repo/treelist.go
rename to routers/web/repo/tree.go
index d11af4669f90c..0a7767aacb84c 100644
--- a/routers/web/repo/treelist.go
+++ b/routers/web/repo/tree.go
@@ -9,6 +9,7 @@ import (
 	"code.gitea.io/gitea/modules/base"
 	"code.gitea.io/gitea/modules/git"
 	"code.gitea.io/gitea/services/context"
+	files_service "code.gitea.io/gitea/services/repository/files"
 
 	"github.com/go-enry/go-enry/v2"
 )
@@ -52,3 +53,26 @@ func isExcludedEntry(entry *git.TreeEntry) bool {
 
 	return false
 }
+
+func Tree(ctx *context.Context) {
+	treePath := ctx.PathParam("*")
+	recursive := ctx.FormBool("recursive")
+	refFullName := git.RefNameFromTypeAndShortName(git.RefType(ctx.FormTrim("ref_type")), ctx.FormTrim("ref_name"))
+	if refFullName == "" {
+		ctx.Error(http.StatusBadRequest, "RefNameFromTypeAndShortName", "ref_type or ref_name is invalid")
+		return
+	}
+
+	var results []*files_service.TreeViewNode
+	var err error
+	if !recursive {
+		results, err = files_service.GetTreeList(ctx, ctx.Repo.Repository, treePath, refFullName, false)
+	} else {
+		results, err = files_service.GetTreeInformation(ctx, ctx.Repo.Repository, treePath, refFullName)
+	}
+	if err != nil {
+		ctx.ServerError("GetTreeInformation", err)
+		return
+	}
+	ctx.JSON(http.StatusOK, results)
+}
diff --git a/routers/web/repo/view.go b/routers/web/repo/view.go
index 05ecf2ab794b3..550f1203fdc94 100644
--- a/routers/web/repo/view.go
+++ b/routers/web/repo/view.go
@@ -46,12 +46,13 @@ import (
 )
 
 const (
-	tplRepoEMPTY    templates.TplName = "repo/empty"
-	tplRepoHome     templates.TplName = "repo/home"
-	tplRepoViewList templates.TplName = "repo/view_list"
-	tplWatchers     templates.TplName = "repo/watchers"
-	tplForks        templates.TplName = "repo/forks"
-	tplMigrating    templates.TplName = "repo/migrate/migrating"
+	tplRepoEMPTY       templates.TplName = "repo/empty"
+	tplRepoHome        templates.TplName = "repo/home"
+	tplRepoHomeContent templates.TplName = "repo/home_content"
+	tplRepoViewList    templates.TplName = "repo/view_list"
+	tplWatchers        templates.TplName = "repo/watchers"
+	tplForks           templates.TplName = "repo/forks"
+	tplMigrating       templates.TplName = "repo/migrate/migrating"
 )
 
 type fileInfo struct {
diff --git a/routers/web/repo/view_home.go b/routers/web/repo/view_home.go
index 622072adeb719..fc2adf29af678 100644
--- a/routers/web/repo/view_home.go
+++ b/routers/web/repo/view_home.go
@@ -9,6 +9,7 @@ import (
 	"html/template"
 	"net/http"
 	"path"
+	"strconv"
 	"strings"
 	"time"
 
@@ -17,6 +18,7 @@ import (
 	access_model "code.gitea.io/gitea/models/perm/access"
 	repo_model "code.gitea.io/gitea/models/repo"
 	unit_model "code.gitea.io/gitea/models/unit"
+	user_model "code.gitea.io/gitea/models/user"
 	"code.gitea.io/gitea/modules/git"
 	"code.gitea.io/gitea/modules/log"
 	repo_module "code.gitea.io/gitea/modules/repository"
@@ -323,6 +325,19 @@ func Home(ctx *context.Context) {
 		return
 	}
 
+	showFileViewTreeSidebar := true
+	if ctx.Doer != nil {
+		v, err := user_model.GetUserSetting(ctx, ctx.Doer.ID, user_model.SettingsKeyShowFileViewTreeSidebar, "true")
+		if err != nil {
+			log.Error("GetUserSetting: %v", err)
+		} else {
+			showFileViewTreeSidebar, _ = strconv.ParseBool(v)
+		}
+	}
+	ctx.Data["RepoPreferences"] = &preferencesForm{
+		ShowFileViewTreeSidebar: showFileViewTreeSidebar,
+	}
+
 	title := ctx.Repo.Repository.Owner.Name + "/" + ctx.Repo.Repository.Name
 	if len(ctx.Repo.Repository.Description) > 0 {
 		title += ": " + ctx.Repo.Repository.Description
@@ -392,5 +407,9 @@ func Home(ctx *context.Context) {
 		}
 	}
 
-	ctx.HTML(http.StatusOK, tplRepoHome)
+	if ctx.FormBool("only_content") {
+		ctx.HTML(http.StatusOK, tplRepoHomeContent)
+	} else {
+		ctx.HTML(http.StatusOK, tplRepoHome)
+	}
 }
diff --git a/routers/web/web.go b/routers/web/web.go
index 463bda19d55dc..effeddb9d2f7d 100644
--- a/routers/web/web.go
+++ b/routers/web/web.go
@@ -986,6 +986,7 @@ func registerRoutes(m *web.Router) {
 		m.Get("/migrate", repo.Migrate)
 		m.Post("/migrate", web.Bind(forms.MigrateRepoForm{}), repo.MigratePost)
 		m.Get("/search", repo.SearchRepo)
+		m.Put("/preferences", repo.UpdatePreferences)
 	}, reqSignIn)
 	// end "/repo": create, migrate, search
 
@@ -1156,11 +1157,15 @@ func registerRoutes(m *web.Router) {
 
 	m.Group("/{username}/{reponame}", func() {
 		m.Get("/find/*", repo.FindFiles)
-		m.Group("/tree-list", func() {
+		m.Group("/tree-list", func() { // for find files
 			m.Get("/branch/*", context.RepoRefByType(context.RepoRefBranch), repo.TreeList)
 			m.Get("/tag/*", context.RepoRefByType(context.RepoRefTag), repo.TreeList)
 			m.Get("/commit/*", context.RepoRefByType(context.RepoRefCommit), repo.TreeList)
 		})
+		m.Group("/tree", func() {
+			m.Get("", repo.Tree)
+			m.Get("/*", repo.Tree)
+		})
 		m.Get("/compare", repo.MustBeNotEmpty, repo.SetEditorconfigIfExists, repo.SetDiffViewStyle, repo.SetWhitespaceBehavior, repo.CompareDiff)
 		m.Combo("/compare/*", repo.MustBeNotEmpty, repo.SetEditorconfigIfExists).
 			Get(repo.SetDiffViewStyle, repo.SetWhitespaceBehavior, repo.CompareDiff).
diff --git a/services/repository/files/tree.go b/services/repository/files/tree.go
index 6775186afdd8e..122421a0d3f7b 100644
--- a/services/repository/files/tree.go
+++ b/services/repository/files/tree.go
@@ -7,9 +7,13 @@ import (
 	"context"
 	"fmt"
 	"net/url"
+	"path"
+	"sort"
+	"strings"
 
 	repo_model "code.gitea.io/gitea/models/repo"
 	"code.gitea.io/gitea/modules/git"
+	"code.gitea.io/gitea/modules/gitrepo"
 	"code.gitea.io/gitea/modules/setting"
 	api "code.gitea.io/gitea/modules/structs"
 	"code.gitea.io/gitea/modules/util"
@@ -118,3 +122,380 @@ func GetTreeBySHA(ctx context.Context, repo *repo_model.Repository, gitRepo *git
 	}
 	return tree, nil
 }
+
+func entryModeString(entryMode git.EntryMode) string {
+	switch entryMode {
+	case git.EntryModeBlob:
+		return "blob"
+	case git.EntryModeExec:
+		return "exec"
+	case git.EntryModeSymlink:
+		return "symlink"
+	case git.EntryModeCommit:
+		return "commit" // submodule
+	case git.EntryModeTree:
+		return "tree"
+	}
+	return "unknown"
+}
+
+type TreeViewNode struct {
+	Name     string          `json:"name"`
+	Type     string          `json:"type"`
+	Path     string          `json:"path"`
+	Children []*TreeViewNode `json:"children,omitempty"`
+}
+
+/*
+Example 1: (path: /)
+
+	GET /repo/name/tree/
+
+	resp:
+	[{
+	    "name": "d1",
+	    "isFile": false,
+	    "path": "d1"
+	},{
+	    "name": "d2",
+	    "isFile": false,
+	    "path": "d2"
+	},{
+	    "name": "d3",
+	    "isFile": false,
+	    "path": "d3"
+	},{
+	    "name": "f1",
+	    "isFile": true,
+	    "path": "f1"
+	},]
+
+Example 2: (path: d3)
+
+	GET /repo/name/tree/d3
+	resp:
+	[{
+	    "name": "d3d1",
+	    "isFile": false,
+	    "path": "d3/d3d1"
+	}]
+
+Example 3: (path: d3/d3d1)
+
+	GET /repo/name/tree/d3/d3d1
+	resp:
+	[{
+	    "name": "d3d1f1",
+	    "isFile": true,
+	    "path": "d3/d3d1/d3d1f1"
+	},{
+	    "name": "d3d1f1",
+	    "isFile": true,
+	    "path": "d3/d3d1/d3d1f2"
+	}]
+*/
+func GetTreeList(ctx context.Context, repo *repo_model.Repository, treePath string, ref git.RefName, recursive bool) ([]*TreeViewNode, error) {
+	if repo.IsEmpty {
+		return nil, nil
+	}
+	if ref == "" {
+		ref = git.RefNameFromBranch(repo.DefaultBranch)
+	}
+
+	// Check that the path given in opts.treePath is valid (not a git path)
+	cleanTreePath := CleanUploadFileName(treePath)
+	if cleanTreePath == "" && treePath != "" {
+		return nil, ErrFilenameInvalid{
+			Path: treePath,
+		}
+	}
+	treePath = cleanTreePath
+
+	gitRepo, closer, err := gitrepo.RepositoryFromContextOrOpen(ctx, repo)
+	if err != nil {
+		return nil, err
+	}
+	defer closer.Close()
+
+	// Get the commit object for the ref
+	commit, err := gitRepo.GetCommit(ref.String())
+	if err != nil {
+		return nil, err
+	}
+
+	entry, err := commit.GetTreeEntryByPath(treePath)
+	if err != nil {
+		return nil, err
+	}
+
+	// If the entry is a file, we return a FileContentResponse object
+	if entry.Type() != "tree" {
+		return nil, fmt.Errorf("%s is not a tree", treePath)
+	}
+
+	gitTree, err := commit.SubTree(treePath)
+	if err != nil {
+		return nil, err
+	}
+	var entries git.Entries
+	if recursive {
+		entries, err = gitTree.ListEntriesRecursiveFast()
+	} else {
+		entries, err = gitTree.ListEntries()
+	}
+	if err != nil {
+		return nil, err
+	}
+
+	var treeViewNodes []*TreeViewNode
+	mapTree := make(map[string][]*TreeViewNode)
+	for _, e := range entries {
+		subTreePath := path.Join(treePath, e.Name())
+
+		if strings.Contains(e.Name(), "/") {
+			mapTree[path.Dir(e.Name())] = append(mapTree[path.Dir(e.Name())], &TreeViewNode{
+				Name: path.Base(e.Name()),
+				Type: entryModeString(e.Mode()),
+				Path: subTreePath,
+			})
+		} else {
+			treeViewNodes = append(treeViewNodes, &TreeViewNode{
+				Name: e.Name(),
+				Type: entryModeString(e.Mode()),
+				Path: subTreePath,
+			})
+		}
+	}
+
+	for _, node := range treeViewNodes {
+		if node.Type == "tree" {
+			node.Children = mapTree[node.Path]
+			sortTreeViewNodes(node.Children)
+		}
+	}
+
+	sortTreeViewNodes(treeViewNodes)
+
+	return treeViewNodes, nil
+}
+
+// GetTreeInformation returns the first level directories and files and all the trees of the path to treePath.
+// If treePath is a directory, list all subdirectories and files of treePath.
+/*
+Example 1: (path: /)
+    GET /repo/name/tree/?recursive=true
+    resp:
+    [{
+        "name": "d1",
+        "isFile": false,
+        "path": "d1"
+    },{
+        "name": "d2",
+        "isFile": false,
+        "path": "d2"
+    },{
+        "name": "d3",
+        "isFile": false,
+        "path": "d3"
+    },{
+        "name": "f1",
+        "isFile": true,
+        "path": "f1"
+    },]
+
+Example 2: (path: d3)
+    GET /repo/name/tree/d3?recursive=true
+    resp:
+    [{
+        "name": "d1",
+        "isFile": false,
+        "path": "d1"
+    },{
+        "name": "d2",
+        "isFile": false,
+        "path": "d2"
+    },{
+        "name": "d3",
+        "isFile": false,
+        "path": "d3",
+        "children": [{
+            "name": "d3d1",
+            "isFile": false,
+            "path": "d3/d3d1"
+        }]
+    },{
+        "name": "f1",
+        "isFile": true,
+        "path": "f1"
+    },]
+
+Example 3: (path: d3/d3d1)
+    GET /repo/name/tree/d3/d3d1?recursive=true
+    resp:
+    [{
+        "name": "d1",
+        "isFile": false,
+        "path": "d1"
+    },{
+        "name": "d2",
+        "isFile": false,
+        "path": "d2"
+    },{
+        "name": "d3",
+        "isFile": false,
+        "path": "d3",
+        "children": [{
+            "name": "d3d1",
+            "isFile": false,
+            "path": "d3/d3d1",
+            "children": [{
+                "name": "d3d1f1",
+                "isFile": true,
+                "path": "d3/d3d1/d3d1f1"
+            },{
+                "name": "d3d1f1",
+                "isFile": true,
+                "path": "d3/d3d1/d3d1f2"
+            }]
+        }]
+    },{
+        "name": "f1",
+        "isFile": true,
+        "path": "f1"
+    },]
+
+Example 4: (path: d2/d2f1)
+    GET /repo/name/tree/d2/d2f1?recursive=true
+    resp:
+    [{
+        "name": "d1",
+        "isFile": false,
+        "path": "d1"
+    },{
+        "name": "d2",
+        "isFile": false,
+        "path": "d2",
+        "children": [{
+            "name": "d2f1",
+            "isFile": true,
+            "path": "d2/d2f1"
+        }]
+    },{
+        "name": "d3",
+        "isFile": false,
+        "path": "d3"
+    },{
+        "name": "f1",
+        "isFile": true,
+        "path": "f1"
+    },]
+*/
+func GetTreeInformation(ctx context.Context, repo *repo_model.Repository, treePath string, ref git.RefName) ([]*TreeViewNode, error) {
+	if repo.IsEmpty {
+		return nil, nil
+	}
+	if ref == "" {
+		ref = git.RefNameFromBranch(repo.DefaultBranch)
+	}
+
+	// Check that the path given in opts.treePath is valid (not a git path)
+	cleanTreePath := CleanUploadFileName(treePath)
+	if cleanTreePath == "" && treePath != "" {
+		return nil, ErrFilenameInvalid{
+			Path: treePath,
+		}
+	}
+	treePath = cleanTreePath
+
+	gitRepo, closer, err := gitrepo.RepositoryFromContextOrOpen(ctx, repo)
+	if err != nil {
+		return nil, err
+	}
+	defer closer.Close()
+
+	// Get the commit object for the ref
+	commit, err := gitRepo.GetCommit(ref.String())
+	if err != nil {
+		return nil, err
+	}
+
+	// get root entries
+	rootEntries, err := commit.ListEntries()
+	if err != nil {
+		return nil, err
+	}
+
+	dir := treePath
+	if dir != "" {
+		lastDirEntry, err := commit.GetTreeEntryByPath(treePath)
+		if err != nil {
+			return nil, err
+		}
+		if lastDirEntry.IsRegular() {
+			// path.Dir cannot correctly handle .xxx file
+			dir, _ = path.Split(treePath)
+			dir = strings.TrimRight(dir, "/")
+		}
+	}
+
+	treeViewNodes := make([]*TreeViewNode, 0, len(rootEntries))
+	fields := strings.Split(dir, "/")
+	var parentNode *TreeViewNode
+	for _, entry := range rootEntries {
+		node := &TreeViewNode{
+			Name: entry.Name(),
+			Type: entryModeString(entry.Mode()),
+			Path: entry.Name(),
+		}
+		treeViewNodes = append(treeViewNodes, node)
+		if dir != "" && fields[0] == entry.Name() {
+			parentNode = node
+		}
+	}
+
+	sortTreeViewNodes(treeViewNodes)
+	if dir == "" || parentNode == nil {
+		return treeViewNodes, nil
+	}
+
+	for i := 1; i < len(fields); i++ {
+		parentNode.Children = []*TreeViewNode{
+			{
+				Name: fields[i],
+				Type: "tree",
+				Path: path.Join(fields[:i+1]...),
+			},
+		}
+		parentNode = parentNode.Children[0]
+	}
+
+	tree, err := commit.Tree.SubTree(dir)
+	if err != nil {
+		return nil, err
+	}
+	entries, err := tree.ListEntries()
+	if err != nil {
+		return nil, err
+	}
+
+	for _, entry := range entries {
+		parentNode.Children = append(parentNode.Children, &TreeViewNode{
+			Name: entry.Name(),
+			Type: entryModeString(entry.Mode()),
+			Path: path.Join(dir, entry.Name()),
+		})
+	}
+	sortTreeViewNodes(parentNode.Children)
+	return treeViewNodes, nil
+}
+
+// sortTreeViewNodes list directory first and with alpha sequence
+func sortTreeViewNodes(nodes []*TreeViewNode) {
+	sort.Slice(nodes, func(i, j int) bool {
+		if nodes[i].Type != nodes[j].Type {
+			// folder and submodule first
+			return nodes[i].Type == "tree" || nodes[i].Type == "commit"
+		}
+		return nodes[i].Name < nodes[j].Name
+	})
+}
diff --git a/services/repository/files/tree_test.go b/services/repository/files/tree_test.go
index 0c60fddf7b425..614d9621bcbd8 100644
--- a/services/repository/files/tree_test.go
+++ b/services/repository/files/tree_test.go
@@ -7,6 +7,7 @@ import (
 	"testing"
 
 	"code.gitea.io/gitea/models/unittest"
+	"code.gitea.io/gitea/modules/git"
 	api "code.gitea.io/gitea/modules/structs"
 	"code.gitea.io/gitea/services/contexttest"
 
@@ -50,3 +51,139 @@ func TestGetTreeBySHA(t *testing.T) {
 
 	assert.EqualValues(t, expectedTree, tree)
 }
+
+func Test_GetTreeList(t *testing.T) {
+	unittest.PrepareTestEnv(t)
+	ctx1, _ := contexttest.MockContext(t, "user2/repo1")
+	contexttest.LoadRepo(t, ctx1, 1)
+	contexttest.LoadRepoCommit(t, ctx1)
+	contexttest.LoadUser(t, ctx1, 2)
+	contexttest.LoadGitRepo(t, ctx1)
+	defer ctx1.Repo.GitRepo.Close()
+
+	refName := git.RefNameFromBranch(ctx1.Repo.Repository.DefaultBranch)
+
+	treeList, err := GetTreeList(ctx1, ctx1.Repo.Repository, "", refName, true)
+	assert.NoError(t, err)
+	assert.Len(t, treeList, 1)
+	assert.EqualValues(t, "README.md", treeList[0].Name)
+	assert.EqualValues(t, "README.md", treeList[0].Path)
+	assert.EqualValues(t, "blob", treeList[0].Type)
+	assert.Empty(t, treeList[0].Children)
+
+	ctx2, _ := contexttest.MockContext(t, "org3/repo3")
+	contexttest.LoadRepo(t, ctx2, 3)
+	contexttest.LoadRepoCommit(t, ctx2)
+	contexttest.LoadUser(t, ctx2, 2)
+	contexttest.LoadGitRepo(t, ctx2)
+	defer ctx2.Repo.GitRepo.Close()
+
+	refName = git.RefNameFromBranch(ctx2.Repo.Repository.DefaultBranch)
+
+	treeList, err = GetTreeList(ctx2, ctx2.Repo.Repository, "", refName, true)
+	assert.NoError(t, err)
+	assert.Len(t, treeList, 2)
+
+	assert.EqualValues(t, "doc", treeList[0].Name)
+	assert.EqualValues(t, "doc", treeList[0].Path)
+	assert.EqualValues(t, "tree", treeList[0].Type)
+	assert.Len(t, treeList[0].Children, 1)
+
+	assert.EqualValues(t, "doc.md", treeList[0].Children[0].Name)
+	assert.EqualValues(t, "doc/doc.md", treeList[0].Children[0].Path)
+	assert.EqualValues(t, "blob", treeList[0].Children[0].Type)
+	assert.Empty(t, treeList[0].Children[0].Children)
+
+	assert.EqualValues(t, "README.md", treeList[1].Name)
+	assert.EqualValues(t, "README.md", treeList[1].Path)
+	assert.EqualValues(t, "blob", treeList[1].Type)
+	assert.Empty(t, treeList[1].Children)
+}
+
+func Test_GetTreeInformation(t *testing.T) {
+	unittest.PrepareTestEnv(t)
+	ctx1, _ := contexttest.MockContext(t, "user2/repo1")
+	contexttest.LoadRepo(t, ctx1, 1)
+	contexttest.LoadRepoCommit(t, ctx1)
+	contexttest.LoadUser(t, ctx1, 2)
+	contexttest.LoadGitRepo(t, ctx1)
+	defer ctx1.Repo.GitRepo.Close()
+
+	refName := git.RefNameFromBranch(ctx1.Repo.Repository.DefaultBranch)
+
+	treeList, err := GetTreeInformation(ctx1, ctx1.Repo.Repository, "", refName)
+	assert.NoError(t, err)
+	assert.Len(t, treeList, 1)
+	assert.EqualValues(t, "README.md", treeList[0].Name)
+	assert.EqualValues(t, "README.md", treeList[0].Path)
+	assert.EqualValues(t, "blob", treeList[0].Type)
+	assert.Empty(t, treeList[0].Children)
+
+	treeList, err = GetTreeInformation(ctx1, ctx1.Repo.Repository, "README.md", refName)
+	assert.NoError(t, err)
+	assert.Len(t, treeList, 1)
+	assert.EqualValues(t, "README.md", treeList[0].Name)
+	assert.EqualValues(t, "README.md", treeList[0].Path)
+	assert.EqualValues(t, "blob", treeList[0].Type)
+	assert.Empty(t, treeList[0].Children)
+
+	ctx2, _ := contexttest.MockContext(t, "org3/repo3")
+	contexttest.LoadRepo(t, ctx2, 3)
+	contexttest.LoadRepoCommit(t, ctx2)
+	contexttest.LoadUser(t, ctx2, 2)
+	contexttest.LoadGitRepo(t, ctx2)
+	defer ctx2.Repo.GitRepo.Close()
+
+	refName = git.RefNameFromBranch(ctx2.Repo.Repository.DefaultBranch)
+
+	treeList, err = GetTreeInformation(ctx2, ctx2.Repo.Repository, "", refName)
+	assert.NoError(t, err)
+	assert.Len(t, treeList, 2)
+
+	assert.EqualValues(t, "doc", treeList[0].Name)
+	assert.EqualValues(t, "doc", treeList[0].Path)
+	assert.EqualValues(t, "tree", treeList[0].Type)
+	assert.Empty(t, treeList[0].Children)
+
+	assert.EqualValues(t, "README.md", treeList[1].Name)
+	assert.EqualValues(t, "README.md", treeList[1].Path)
+	assert.EqualValues(t, "blob", treeList[1].Type)
+	assert.Empty(t, treeList[1].Children)
+
+	treeList, err = GetTreeInformation(ctx2, ctx2.Repo.Repository, "doc", refName)
+	assert.NoError(t, err)
+	assert.Len(t, treeList, 2)
+	assert.EqualValues(t, "doc", treeList[0].Name)
+	assert.EqualValues(t, "doc", treeList[0].Path)
+	assert.EqualValues(t, "tree", treeList[0].Type)
+	assert.Len(t, treeList[0].Children, 1)
+
+	assert.EqualValues(t, "doc.md", treeList[0].Children[0].Name)
+	assert.EqualValues(t, "doc/doc.md", treeList[0].Children[0].Path)
+	assert.EqualValues(t, "blob", treeList[0].Children[0].Type)
+	assert.Empty(t, treeList[0].Children[0].Children)
+
+	assert.EqualValues(t, "README.md", treeList[1].Name)
+	assert.EqualValues(t, "README.md", treeList[1].Path)
+	assert.EqualValues(t, "blob", treeList[1].Type)
+	assert.Empty(t, treeList[1].Children)
+
+	treeList, err = GetTreeInformation(ctx2, ctx2.Repo.Repository, "doc/doc.md", refName)
+	assert.NoError(t, err)
+	assert.Len(t, treeList, 2)
+
+	assert.EqualValues(t, "doc", treeList[0].Name)
+	assert.EqualValues(t, "doc", treeList[0].Path)
+	assert.EqualValues(t, "tree", treeList[0].Type)
+	assert.Len(t, treeList[0].Children, 1)
+
+	assert.EqualValues(t, "doc.md", treeList[0].Children[0].Name)
+	assert.EqualValues(t, "doc/doc.md", treeList[0].Children[0].Path)
+	assert.EqualValues(t, "blob", treeList[0].Children[0].Type)
+	assert.Empty(t, treeList[0].Children[0].Children)
+
+	assert.EqualValues(t, "README.md", treeList[1].Name)
+	assert.EqualValues(t, "README.md", treeList[1].Path)
+	assert.EqualValues(t, "blob", treeList[1].Type)
+	assert.Empty(t, treeList[1].Children)
+}
diff --git a/templates/repo/home.tmpl b/templates/repo/home.tmpl
index 86ad1629085a1..07141256c7beb 100644
--- a/templates/repo/home.tmpl
+++ b/templates/repo/home.tmpl
@@ -1,7 +1,13 @@
 {{template "base/head" .}}
+{{$treeNamesLen := len .TreeNames}}
+{{$isTreePathRoot := eq $treeNamesLen 0}}
+{{$showSidebar := and $isTreePathRoot (not .HideRepoInfo) (not .IsBlame)}}
+{{$hasTreeSidebar := not $isTreePathRoot}}
+{{$showTreeSidebar := .RepoPreferences.ShowFileViewTreeSidebar}}
+{{$hideTreeSidebar := not $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 .IsBlame}}fluid padded{{end}}">
+	<div class="ui container {{if or $hasTreeSidebar .IsBlame}}fluid padded{{end}}">
 		{{template "base/alert" .}}
 
 		{{if .Repository.IsArchived}}
@@ -16,123 +22,13 @@
 
 		{{template "repo/code/recently_pushed_new_branches" .}}
 
-		{{$treeNamesLen := len .TreeNames}}
-		{{$isTreePathRoot := eq $treeNamesLen 0}}
-		{{$showSidebar := and $isTreePathRoot (not .HideRepoInfo) (not .IsBlame)}}
-		<div class="{{Iif $showSidebar "repo-grid-filelist-sidebar" "repo-grid-filelist-only"}}">
-			<div class="repo-home-filelist">
-				{{template "repo/sub_menu" .}}
-				<div class="repo-button-row">
-					<div class="repo-button-row-left">
-						{{- /* for repo home (default branch) and /owner/repo/src/branch/the-name */ -}}
-						{{- $branchDropdownCurrentRefType := "branch" -}}
-						{{- $branchDropdownCurrentRefShortName := .BranchName -}}
-						{{- if .IsViewTag -}}
-							{{- /* for /owner/repo/src/tag/the-name */ -}}
-							{{- $branchDropdownCurrentRefType = "tag" -}}
-							{{- $branchDropdownCurrentRefShortName = .TagName -}}
-						{{- else if .IsViewCommit -}}
-							{{- /* for /owner/repo/src/commit/000000 */ -}}
-							{{- $branchDropdownCurrentRefType = "commit" -}}
-							{{- $branchDropdownCurrentRefShortName = ShortSha .CommitID -}}
-						{{- end -}}
-						{{- template "repo/branch_dropdown" dict
-							"Repository" .Repository
-							"ShowTabBranches" true
-							"ShowTabTags" true
-							"CurrentRefType" $branchDropdownCurrentRefType
-							"CurrentRefShortName" $branchDropdownCurrentRefShortName
-							"CurrentTreePath" .TreePath
-							"RefLinkTemplate" "{RepoLink}/src/{RefType}/{RefShortName}/{TreePath}"
-							"AllowCreateNewRef" .CanCreateBranch
-							"ShowViewAllRefsEntry" true
-						-}}
-						{{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/{{.RefTypeNameSubURL}}" 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="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/{{.RefTypeNameSubURL}}" 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="{{Iif $showSidebar "repo-grid-filelist-sidebar" (Iif $showTreeSidebar "repo-grid-tree-sidebar" "repo-grid-filelist-only")}}">
+			{{if $hasTreeSidebar}}
+				<div class="repo-view-file-tree-sidebar not-mobile {{if $hideTreeSidebar}}tw-hidden{{end}}" {{if .IsSigned}} data-is-signed {{end}}>{{template "repo/view_file_tree_sidebar" .}}</div>
+			{{end}}
 
-					<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/{{.RefTypeNameSubURL}}/{{.TreePath | PathEscapeSegments}}">
-								{{svg "octicon-history" 16 "tw-mr-2"}}{{ctx.Locale.Tr "repo.file_history"}}
-							</a>
-						{{end}}
-					</div>
-				</div>
-				{{if .IsViewFile}}
-					{{template "repo/view_file" .}}
-				{{else if .IsBlame}}
-					{{template "repo/blame" .}}
-				{{else}}{{/* IsViewDirectory */}}
-					{{if $isTreePathRoot}}
-						{{template "repo/code/upstream_diverging_info" .}}
-					{{end}}
-					{{template "repo/view_list" .}}
-					{{if and .ReadmeExist (or .IsMarkup .IsPlainText)}}
-						{{template "repo/view_file" .}}
-					{{end}}
-				{{end}}
+			<div class="repo-home-filelist">
+				{{template "repo/home_content" .}}
 			</div>
 
 			{{if $showSidebar}}
diff --git a/templates/repo/home_branch_dropdown.tmpl b/templates/repo/home_branch_dropdown.tmpl
new file mode 100644
index 0000000000000..f720100c7d273
--- /dev/null
+++ b/templates/repo/home_branch_dropdown.tmpl
@@ -0,0 +1,12 @@
+{{template "repo/branch_dropdown" dict
+	"Repository" .ctxData.Repository
+	"ShowTabBranches" true
+	"ShowTabTags" true
+	"CurrentRefType" .ctxData.RefFullName.RefType
+	"CurrentRefShortName" .ctxData.RefFullName.ShortName
+	"CurrentTreePath" .ctxData.TreePath
+	"RefLinkTemplate" "{RepoLink}/src/{RefTypeNameSubURL}/{TreePath}"
+	"AllowCreateNewRef" .ctxData.CanCreateBranch
+	"ShowViewAllRefsEntry" true
+	"ContainerClasses" .containerClasses
+}}
diff --git a/templates/repo/home_content.tmpl b/templates/repo/home_content.tmpl
new file mode 100644
index 0000000000000..d8e1890d43473
--- /dev/null
+++ b/templates/repo/home_content.tmpl
@@ -0,0 +1,101 @@
+{{$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/{{.RefTypeNameSubURL}}" 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="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/{{.RefTypeNameSubURL}}" 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/{{.RefTypeNameSubURL}}/{{.TreePath | PathEscapeSegments}}">
+				{{svg "octicon-history" 16 "tw-mr-2"}}{{ctx.Locale.Tr "repo.file_history"}}
+			</a>
+		{{end}}
+	</div>
+</div>
+{{if .IsViewFile}}
+	{{template "repo/view_file" .}}
+{{else if .IsBlame}}
+	{{template "repo/blame" .}}
+{{else}}{{/* IsViewDirectory */}}
+	{{if $isTreePathRoot}}
+		{{template "repo/code/upstream_diverging_info" .}}
+	{{end}}
+	{{template "repo/view_list" .}}
+	{{if and .ReadmeExist (or .IsMarkup .IsPlainText)}}
+		{{template "repo/view_file" .}}
+	{{end}}
+{{end}}
diff --git a/templates/repo/view_file_tree_sidebar.tmpl b/templates/repo/view_file_tree_sidebar.tmpl
new file mode 100644
index 0000000000000..c2ee6336c393b
--- /dev/null
+++ b/templates/repo/view_file_tree_sidebar.tmpl
@@ -0,0 +1,17 @@
+<div class="view-file-tree-sidebar-top">
+	<div class="sidebar-header">
+		<button class="hide-tree-sidebar-button ui compact basic button icon" title="{{ctx.Locale.Tr "repo.diff.hide_file_tree"}}">
+			{{svg "octicon-sidebar-expand" 20 "icon"}}
+		</button>
+		<b> Files</b>
+	</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"
+		data-api-base-url="{{.RepoLink}}"
+		data-tree-path="{{$.TreePath}}"
+		data-current-ref-type="{{.RefFullName.RefType}}"
+		data-current-ref-short-name="{{.RefFullName.ShortName}}"
+	></div>
+</div>
diff --git a/web_src/css/repo/home.css b/web_src/css/repo/home.css
index 65005e2263537..db171e7974b29 100644
--- a/web_src/css/repo/home.css
+++ b/web_src/css/repo/home.css
@@ -50,6 +50,65 @@
   }
 }
 
+.repo-grid-tree-sidebar {
+  display: grid;
+  grid-template-columns: 300px auto;
+  grid-template-rows: auto auto 1fr;
+}
+
+.repo-grid-tree-sidebar .repo-home-filelist {
+  min-width: 0;
+  grid-column: 2;
+  grid-row: 1 / 4;
+  margin-left: 1rem;
+}
+
+#view-file-tree.is-loading {
+  aspect-ratio: 5.415; /* the size is about 790 x 145 */
+}
+
+.repo-grid-tree-sidebar .repo-view-file-tree-sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-height: 100vh;
+  overflow: hidden;
+}
+
+.repo-grid-tree-sidebar .view-file-tree-sidebar-top {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25em;
+}
+
+.repo-grid-tree-sidebar .view-file-tree-sidebar-top .button {
+  padding: 6px 10px !important;
+  height: 30px;
+  flex-shrink: 0;
+  margin: 0;
+}
+
+.repo-grid-tree-sidebar .view-file-tree-sidebar-top .sidebar-ref {
+  display: flex;
+  gap: 0.25em;
+}
+
+.repo-grid-tree-sidebar .view-file-tree-sidebar-bottom {
+  flex: 1;
+  overflow: auto;
+}
+
+.repo-grid-tree-sidebar .repo-button-row {
+  margin-top: 0 !important;
+}
+
+@media (max-width: 767.98px) {
+  .repo-grid-tree-sidebar {
+    grid-template-columns: auto;
+    grid-template-rows: auto auto auto;
+  }
+}
+
 .language-stats {
   display: flex;
   gap: 2px;
diff --git a/web_src/js/components/ViewFileTree.vue b/web_src/js/components/ViewFileTree.vue
new file mode 100644
index 0000000000000..3337f6e9e553e
--- /dev/null
+++ b/web_src/js/components/ViewFileTree.vue
@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import ViewFileTreeItem from './ViewFileTreeItem.vue';
+
+defineProps<{
+  files: any,
+  selectedItem: any,
+  loadChildren: any,
+  loadContent: any;
+}>();
+</script>
+
+<template>
+  <div class="view-file-tree-items">
+    <!-- only render the tree if we're visible. in many cases this is something that doesn't change very often -->
+    <ViewFileTreeItem v-for="item in files" :key="item.name" :item="item" :selected-item="selectedItem" :load-content="loadContent" :load-children="loadChildren"/>
+  </div>
+</template>
+
+<style scoped>
+.view-file-tree-items {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  margin-right: .5rem;
+}
+</style>
diff --git a/web_src/js/components/ViewFileTreeItem.vue b/web_src/js/components/ViewFileTreeItem.vue
new file mode 100644
index 0000000000000..cb94c1f7f1d06
--- /dev/null
+++ b/web_src/js/components/ViewFileTreeItem.vue
@@ -0,0 +1,115 @@
+<script lang="ts" setup>
+import {SvgIcon} from '../svg.ts';
+import {ref} from 'vue';
+
+type Item = {
+  name: string;
+  path: string;
+  htmlUrl: string;
+  type: string;
+  children?: Item[];
+};
+
+const props = defineProps<{
+  item: Item,
+  loadContent: any;
+  loadChildren: any;
+  selectedItem?: any;
+}>();
+
+const isLoading = ref(false);
+const children = ref(props.item.children);
+const collapsed = ref(!props.item.children);
+
+const doLoadChildren = async () => {
+  collapsed.value = !collapsed.value;
+  if (!collapsed.value && props.loadChildren) {
+    isLoading.value = true;
+    const _children = await props.loadChildren(props.item);
+    children.value = _children;
+    isLoading.value = false;
+  }
+};
+
+const doLoadDirContent = () => {
+  doLoadChildren();
+  props.loadContent(props.item);
+};
+
+const doLoadFileContent = () => {
+  props.loadContent(props.item);
+};
+</script>
+
+<template>
+  <!--title instead of tooltip above as the tooltip needs too much work with the current methods, i.e. not being loaded or staying open for "too long"-->
+  <div
+    v-if="item.type !== 'tree'" class="item-file"
+    :class="{'selected': selectedItem.value === item.path}"
+    :title="item.name"
+    @click.stop="doLoadFileContent"
+  >
+    <!-- file -->
+    <SvgIcon name="octicon-file"/>
+    <span class="gt-ellipsis tw-flex-1">{{ item.name }}</span>
+  </div>
+  <div
+    v-else class="item-directory"
+    :class="{'selected': selectedItem.value === item.path}"
+    :title="item.name"
+    @click.stop="doLoadDirContent"
+  >
+    <!-- directory -->
+    <SvgIcon v-if="isLoading" name="octicon-sync" class="job-status-rotate"/>
+    <SvgIcon v-else :name="collapsed ? 'octicon-chevron-right' : 'octicon-chevron-down'" @click.stop="doLoadChildren"/>
+    <SvgIcon class="text primary" :name="collapsed ? 'octicon-file-directory-fill' : 'octicon-file-directory-open-fill'"/>
+    <span class="gt-ellipsis">{{ item.name }}</span>
+  </div>
+
+  <div v-if="children?.length" v-show="!collapsed" class="sub-items">
+    <ViewFileTreeItem v-for="childItem in children" :key="childItem.name" :item="childItem" :selected-item="selectedItem" :load-content="loadContent" :load-children="loadChildren"/>
+  </div>
+</template>
+<style scoped>
+.sub-items {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  margin-left: 13px;
+  border-left: 1px solid var(--color-secondary);
+}
+
+.sub-items .item-file {
+  padding-left: 18px;
+}
+
+.item-directory.selected, .item-file.selected {
+  color: var(--color-text);
+  background: var(--color-active);
+  border-radius: 4px;
+}
+
+.item-file.viewed {
+  color: var(--color-text-light-3);
+}
+
+.item-directory {
+  user-select: none;
+}
+
+.item-file,
+.item-directory {
+  display: flex;
+  align-items: center;
+  gap: 0.25em;
+  padding: 6px;
+}
+
+.item-file:hover,
+.item-directory:hover {
+  color: var(--color-text);
+  background: var(--color-hover);
+  border-radius: 4px;
+  cursor: pointer;
+}
+</style>
diff --git a/web_src/js/features/common-button.ts b/web_src/js/features/common-button.ts
index 3162557b9b21f..c0cd8ee359db9 100644
--- a/web_src/js/features/common-button.ts
+++ b/web_src/js/features/common-button.ts
@@ -155,12 +155,16 @@ function onShowModalClick(e) {
 }
 
 export function initGlobalButtons(): void {
+  initTargetButtons(document as ParentNode);
+}
+
+export function initTargetButtons(target: ParentNode): void {
   // There are many "cancel button" elements in modal dialogs, Fomantic UI expects they are button-like elements but never submit a form.
   // However, Gitea misuses the modal dialog and put the cancel buttons inside forms, so we must prevent the form submission.
   // There are a few cancel buttons in non-modal forms, and there are some dynamically created forms (eg: the "Edit Issue Content")
-  addDelegatedEventListener(document, 'click', 'form button.ui.cancel.button', (_ /* el */, e) => e.preventDefault());
+  queryElems(target, 'form button.ui.cancel.button', (el) => el.addEventListener('click', (e) => e.preventDefault()));
 
-  queryElems(document, '.show-panel', (el) => el.addEventListener('click', onShowPanelClick));
-  queryElems(document, '.hide-panel', (el) => el.addEventListener('click', onHidePanelClick));
-  queryElems(document, '.show-modal', (el) => el.addEventListener('click', onShowModalClick));
+  queryElems(target, '.show-panel', (el) => el.addEventListener('click', onShowPanelClick));
+  queryElems(target, '.hide-panel', (el) => el.addEventListener('click', onHidePanelClick));
+  queryElems(target, '.show-modal', (el) => el.addEventListener('click', onShowModalClick));
 }
diff --git a/web_src/js/features/common-page.ts b/web_src/js/features/common-page.ts
index 56c5915b6dbf8..058702785d072 100644
--- a/web_src/js/features/common-page.ts
+++ b/web_src/js/features/common-page.ts
@@ -28,8 +28,13 @@ export function initFootLanguageMenu() {
 }
 
 export function initGlobalDropdown() {
+  initTargetDropdown(document.body);
+}
+
+export function initTargetDropdown(target: Element) {
   // Semantic UI modules.
-  const $uiDropdowns = fomanticQuery('.ui.dropdown');
+  const $target = fomanticQuery(target);
+  const $uiDropdowns = $target.find('.ui.dropdown');
 
   // do not init "custom" dropdowns, "custom" dropdowns are managed by their own code.
   $uiDropdowns.filter(':not(.custom)').dropdown({hideDividers: 'empty'});
diff --git a/web_src/js/features/copycontent.ts b/web_src/js/features/copycontent.ts
index af867463b2998..554c9b7f47535 100644
--- a/web_src/js/features/copycontent.ts
+++ b/web_src/js/features/copycontent.ts
@@ -6,7 +6,11 @@ import {GET} from '../modules/fetch.ts';
 const {i18n} = window.config;
 
 export function initCopyContent() {
-  const btn = document.querySelector('#copy-content');
+  initTargetCopyContent(document);
+}
+
+export function initTargetCopyContent(target: ParentNode) {
+  const btn = target.querySelector('#copy-content');
   if (!btn || btn.classList.contains('disabled')) return;
 
   btn.addEventListener('click', async () => {
diff --git a/web_src/js/features/repo-commit.ts b/web_src/js/features/repo-commit.ts
index 56493443d9068..3d19905934a35 100644
--- a/web_src/js/features/repo-commit.ts
+++ b/web_src/js/features/repo-commit.ts
@@ -2,7 +2,11 @@ import {createTippy} from '../modules/tippy.ts';
 import {toggleElem} from '../utils/dom.ts';
 
 export function initRepoEllipsisButton() {
-  for (const button of document.querySelectorAll('.js-toggle-commit-body')) {
+  initTargetRepoEllipsisButton(document);
+}
+
+export function initTargetRepoEllipsisButton(target: ParentNode) {
+  for (const button of target.querySelectorAll('.js-toggle-commit-body')) {
     button.addEventListener('click', function (e) {
       e.preventDefault();
       const expanded = this.getAttribute('aria-expanded') === 'true';
diff --git a/web_src/js/features/repo-legacy.ts b/web_src/js/features/repo-legacy.ts
index 33f02be865eff..cf51585c57f2c 100644
--- a/web_src/js/features/repo-legacy.ts
+++ b/web_src/js/features/repo-legacy.ts
@@ -21,12 +21,6 @@ import {initRepoNew} from './repo-new.ts';
 import {createApp} from 'vue';
 import RepoBranchTagSelector from '../components/RepoBranchTagSelector.vue';
 
-function initRepoBranchTagSelector(selector: string) {
-  for (const elRoot of document.querySelectorAll(selector)) {
-    createApp(RepoBranchTagSelector, {elRoot}).mount(elRoot);
-  }
-}
-
 export function initBranchSelectorTabs() {
   const elSelectBranches = document.querySelectorAll('.ui.dropdown.select-branch');
   for (const elSelectBranch of elSelectBranches) {
@@ -39,11 +33,17 @@ export function initBranchSelectorTabs() {
   }
 }
 
+export function initTargetRepoBranchTagSelector(target: ParentNode, selector: string = '.js-branch-tag-selector') {
+  for (const elRoot of target.querySelectorAll(selector)) {
+    createApp(RepoBranchTagSelector, {elRoot}).mount(elRoot);
+  }
+}
+
 export function initRepository() {
   const pageContent = document.querySelector('.page-content.repository');
   if (!pageContent) return;
 
-  initRepoBranchTagSelector('.js-branch-tag-selector');
+  initTargetRepoBranchTagSelector(document);
   initRepoCommentFormAndSidebar();
 
   // Labels
diff --git a/web_src/js/features/repo-view-file-tree-sidebar.ts b/web_src/js/features/repo-view-file-tree-sidebar.ts
new file mode 100644
index 0000000000000..7fc97137134ce
--- /dev/null
+++ b/web_src/js/features/repo-view-file-tree-sidebar.ts
@@ -0,0 +1,100 @@
+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 {initTargetRepoBranchTagSelector} from './repo-legacy.ts';
+import {initTargetDropdown} from './common-page.ts';
+import {initTargetRepoEllipsisButton} from './repo-commit.ts';
+import {initTargetPdfViewer} from '../render/pdf.ts';
+import {initTargetButtons} from './common-button.ts';
+import {initTargetCopyContent} from './copycontent.ts';
+
+async function toggleSidebar(visibility, isSigned) {
+  const sidebarEl = document.querySelector('.repo-view-file-tree-sidebar');
+  const showBtnEl = document.querySelector('.show-tree-sidebar-button');
+  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);
+
+  if (!isSigned) return;
+
+  // save to session
+  await PUT('/repo/preferences', {
+    data: {
+      show_file_view_tree_sidebar: visibility,
+    },
+  });
+}
+
+async function loadChildren(item, recursive?: boolean) {
+  const fileTree = document.querySelector('#view-file-tree');
+  const apiBaseUrl = fileTree.getAttribute('data-api-base-url');
+  const refType = fileTree.getAttribute('data-current-ref-type');
+  const refName = fileTree.getAttribute('data-current-ref-short-name');
+  const response = await GET(`${apiBaseUrl}/tree/${item ? item.path : ''}?ref_type=${refType}&ref_name=${refName}&recursive=${recursive ?? false}`);
+  const json = await response.json();
+  if (json instanceof Array) {
+    return json.map((i) => ({
+      name: i.name,
+      type: i.type,
+      path: i.path,
+      children: i.children,
+    }));
+  }
+  return null;
+}
+
+async function loadContent() {
+  // load content by path (content based on home_content.tmpl)
+  const response = await GET(`${window.location.href}?only_content=true`);
+  const contentEl = document.querySelector('.repo-home-filelist');
+  contentEl.innerHTML = await response.text();
+  reloadContentScript(contentEl);
+}
+
+function reloadContentScript(contentEl: Element) {
+  contentEl.querySelector('.show-tree-sidebar-button').addEventListener('click', () => {
+    toggleSidebar(true, document.querySelector('.repo-view-file-tree-sidebar').hasAttribute('data-is-signed'));
+  });
+  initTargetButtons(contentEl);
+  initTargetDropdown(contentEl);
+  initTargetPdfViewer(contentEl);
+  initTargetRepoBranchTagSelector(contentEl);
+  initTargetRepoEllipsisButton(contentEl);
+  initTargetCopyContent(contentEl);
+}
+
+export async function initViewFileTreeSidebar() {
+  const sidebarElement = document.querySelector('.repo-view-file-tree-sidebar');
+  if (!sidebarElement) return;
+
+  const isSigned = sidebarElement.hasAttribute('data-is-signed');
+
+  document.querySelector('.hide-tree-sidebar-button').addEventListener('click', () => {
+    toggleSidebar(false, isSigned);
+  });
+  document.querySelector('.repo-home-filelist .show-tree-sidebar-button').addEventListener('click', () => {
+    toggleSidebar(true, isSigned);
+  });
+
+  const fileTree = document.querySelector('#view-file-tree');
+  const baseUrl = fileTree.getAttribute('data-api-base-url');
+  const treePath = fileTree.getAttribute('data-tree-path');
+  const refType = fileTree.getAttribute('data-current-ref-type');
+  const refName = fileTree.getAttribute('data-current-ref-short-name');
+  const refString = (refType ? (`/${refType}`) : '') + (refName ? (`/${refName}`) : '');
+
+  const selectedItem = ref(treePath);
+
+  const files = await loadChildren({path: treePath}, true);
+
+  fileTree.classList.remove('is-loading');
+  const fileTreeView = createApp(ViewFileTree, {files, selectedItem, loadChildren, loadContent: (item) => {
+    window.history.pushState(null, null, `${baseUrl}/src${refString}/${item.path}`);
+    selectedItem.value = item.path;
+    loadContent();
+  }});
+  fileTreeView.mount(fileTree);
+}
diff --git a/web_src/js/index.ts b/web_src/js/index.ts
index 022be033da25f..59bdf87c85171 100644
--- a/web_src/js/index.ts
+++ b/web_src/js/index.ts
@@ -33,6 +33,7 @@ import {
 } from './features/repo-issue.ts';
 import {initRepoEllipsisButton, initCommitStatuses} from './features/repo-commit.ts';
 import {initRepoTopicBar} from './features/repo-home.ts';
+import {initViewFileTreeSidebar} from './features/repo-view-file-tree-sidebar.ts';
 import {initAdminCommon} from './features/admin/common.ts';
 import {initRepoCodeView} from './features/repo-code.ts';
 import {initSshKeyFormParser} from './features/sshkey-helper.ts';
@@ -192,6 +193,7 @@ onDomReady(() => {
     initRepoRelease,
     initRepoReleaseNew,
     initRepoTopicBar,
+    initViewFileTreeSidebar,
     initRepoWikiForm,
     initRepository,
     initRepositoryActionView,
diff --git a/web_src/js/render/pdf.ts b/web_src/js/render/pdf.ts
index f31f161e6e8e2..5bed6f7bab842 100644
--- a/web_src/js/render/pdf.ts
+++ b/web_src/js/render/pdf.ts
@@ -1,7 +1,11 @@
 import {htmlEscape} from 'escape-goat';
 
 export async function initPdfViewer() {
-  const els = document.querySelectorAll('.pdf-content');
+  initTargetPdfViewer(document);
+}
+
+export async function initTargetPdfViewer(target: ParentNode) {
+  const els = target.querySelectorAll('.pdf-content');
   if (!els.length) return;
 
   const pdfobject = await import(/* webpackChunkName: "pdfobject" */'pdfobject');