Change to vertical navbar layout for secondary navbar for repo/user/admin settings (#24246)

Co-Author: @wxiaoguang 

This is the first step of #24229. And this PR will only includes html
changes, and followed by other PRs that fine tune css and change to
submenus.

After:

Admin Level

<img width="1400" alt="Screen Shot 2023-04-21 at 10 07 16"
src="https://user-images.githubusercontent.com/17645053/233523870-f848b61d-056a-4b41-9760-a9a49fea1fe8.png">

User Level

<img width="1422" alt="Screen Shot 2023-04-21 at 10 07 23"
src="https://user-images.githubusercontent.com/17645053/233523878-979adb20-a657-43d9-99a6-ad414010c0ef.png">

Repo Level

<img width="1404" alt="Screen Shot 2023-04-21 at 10 07 07"
src="https://user-images.githubusercontent.com/17645053/233523863-337440bd-c03a-4dfd-87fa-cef40300bfe0.png">

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

85 files changed, 350 insertions, 582 deletions

diff --git a/templates/admin/applications/list.tmpl b/templates/admin/applications/list.tmpl
index 4da6cb0446..a292051fd0 100644
--- a/templates/admin/applications/list.tmpl
+++ b/templates/admin/applications/list.tmpl
@@ -1,14 +1,8 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content admin config">
-	{{template "admin/navbar" .}}
-	<div class="ui container">
-		<div class="twelve wide column content">
-			{{template "base/alert" .}}
-			<h4 class="ui top attached header">
-					{{.locale.Tr "settings.applications"}}
-			</h4>
-			{{template "user/settings/applications_oauth2_list" .}}
-		</div>
+{{template "admin/layout_head" (dict "ctxData" . "pageClass" "admin config")}}
+	<div class="admin-setting-content">
+		<h4 class="ui top attached header">
+				{{.locale.Tr "settings.applications"}}
+		</h4>
+		{{template "user/settings/applications_oauth2_list" .}}
 	</div>
-</div>
-{{template "base/footer" .}}
+{{template "admin/layout_footer" .}}
diff --git a/templates/admin/applications/oauth2_edit.tmpl b/templates/admin/applications/oauth2_edit.tmpl
index 20231c4b1c..668bfe0633 100644
--- a/templates/admin/applications/oauth2_edit.tmpl
+++ b/templates/admin/applications/oauth2_edit.tmpl
@@ -1,7 +1,6 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content admin config">
-	{{template "admin/navbar" .}}
+{{template "admin/layout_head" (dict "ctxData" . "pageClass" "admin config")}}
+	<div class="admin-setting-content">
 
-	{{template "user/settings/applications_oauth2_edit_form" .}}
-</div>
-{{template "base/footer" .}}
+		{{template "user/settings/applications_oauth2_edit_form" .}}
+	</div>
+{{template "admin/layout_footer" .}}
diff --git a/templates/admin/auth/edit.tmpl b/templates/admin/auth/edit.tmpl
index c3ff228ac0..c39725699c 100644
--- a/templates/admin/auth/edit.tmpl
+++ b/templates/admin/auth/edit.tmpl
@@ -1,8 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content admin edit authentication">
-	{{template "admin/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "admin/layout_head" (dict "ctxData" . "pageClass" "admin edit authentication")}}
+	<div class="admin-setting-content">
 		<h4 class="ui top attached header">
 			{{.locale.Tr "admin.auths.edit"}}
 		</h4>
@@ -438,7 +435,6 @@
 			</form>
 		</div>
 	</div>
-</div>
 
 <div class="ui gitea-confirm-modal delete modal">
 	<div class="header">
@@ -450,4 +446,5 @@
 	</div>
 	{{template "base/modal_actions_confirm" .}}
 </div>
-{{template "base/footer" .}}
+
+{{template "admin/layout_footer" .}}
diff --git a/templates/admin/auth/list.tmpl b/templates/admin/auth/list.tmpl
index 3b8d17ff7d..5350672026 100644
--- a/templates/admin/auth/list.tmpl
+++ b/templates/admin/auth/list.tmpl
@@ -1,8 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content admin authentication">
-	{{template "admin/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "admin/layout_head" (dict "ctxData" . "pageClass" "admin authentication")}}
+	<div class="admin-setting-content">
 		<h4 class="ui top attached header">
 			{{.locale.Tr "admin.auths.auth_manage_panel"}} ({{.locale.Tr "admin.total" .Total}})
 			<div class="ui right">
@@ -38,5 +35,4 @@
 			</table>
 		</div>
 	</div>
-</div>
-{{template "base/footer" .}}
+{{template "admin/layout_footer" .}}
diff --git a/templates/admin/auth/new.tmpl b/templates/admin/auth/new.tmpl
index b7715cb5fe..5d9a9083c5 100644
--- a/templates/admin/auth/new.tmpl
+++ b/templates/admin/auth/new.tmpl
@@ -1,8 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content admin new authentication">
-	{{template "admin/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "admin/layout_head" (dict "ctxData" . "pageClass" "admin new authentication")}}
+	<div class="admin-setting-content">
 		<h4 class="ui top attached header">
 			{{.locale.Tr "admin.auths.new"}}
 		</h4>
@@ -122,5 +119,4 @@
 			</div>
 		</div>
 	</div>
-</div>
-{{template "base/footer" .}}
+{{template "admin/layout_footer" .}}
diff --git a/templates/admin/config.tmpl b/templates/admin/config.tmpl
index 14281c70c0..136ad38f16 100644
--- a/templates/admin/config.tmpl
+++ b/templates/admin/config.tmpl
@@ -1,8 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content admin config">
-	{{template "admin/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "admin/layout_head" (dict "ctxData" . "pageClass" "admin config")}}
+	<div class="admin-setting-content">
 		<h4 class="ui top attached header">
 			{{.locale.Tr "admin.config.server_config"}}
 		</h4>
@@ -426,5 +423,4 @@
 			</dl>
 		</div>
 	</div>
-</div>
-{{template "base/footer" .}}
+{{template "admin/layout_footer" .}}
diff --git a/templates/admin/dashboard.tmpl b/templates/admin/dashboard.tmpl
index fc1b1f4385..93fcae4ca4 100644
--- a/templates/admin/dashboard.tmpl
+++ b/templates/admin/dashboard.tmpl
@@ -1,8 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content admin dashboard">
-	{{template "admin/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "admin/layout_head" (dict "ctxData" . "pageClass" "admin dashboard")}}
+	<div class="admin-setting-content">
 		{{if .NeedUpdate}}
 			<div class="ui negative message flash-error">
 				<p>{{(.locale.Tr "admin.dashboard.new_version_hint" .RemoteVersion AppVer) | Str2html}}</p>
@@ -145,5 +142,4 @@
 			</dl>
 		</div>
 	</div>
-</div>
-{{template "base/footer" .}}
+{{template "admin/layout_footer" .}}
diff --git a/templates/admin/emails/list.tmpl b/templates/admin/emails/list.tmpl
index 61af571095..05c6aa66b4 100644
--- a/templates/admin/emails/list.tmpl
+++ b/templates/admin/emails/list.tmpl
@@ -1,8 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content admin user">
-	{{template "admin/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "admin/layout_head" (dict "ctxData" . "pageClass" "admin user")}}
+	<div class="admin-setting-content">
 		<h4 class="ui top attached header">
 			{{.locale.Tr "admin.emails.email_manage_panel"}} ({{.locale.Tr "admin.total" .Total}})
 		</h4>
@@ -101,5 +98,4 @@
 		</div>
 
 	</div>
-</div>
-{{template "base/footer" .}}
+{{template "admin/layout_footer" .}}
diff --git a/templates/admin/hook_new.tmpl b/templates/admin/hook_new.tmpl
index 0c018ff293..1abdd4c813 100644
--- a/templates/admin/hook_new.tmpl
+++ b/templates/admin/hook_new.tmpl
@@ -1,8 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content admin settings new webhook">
-	{{template "admin/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "admin/layout_head" (dict "ctxData" . "pageClass" "admin settings new webhook")}}
+	<div class="admin-setting-content">
 		<h4 class="ui top attached header">
 			{{if .PageIsAdminDefaultHooksNew}}
 				{{.locale.Tr "admin.defaulthooks.add_webhook"}}
@@ -55,5 +52,4 @@
 
 		{{template "repo/settings/webhook/history" .}}
 	</div>
-</div>
-{{template "base/footer" .}}
+{{template "admin/layout_footer" .}}
diff --git a/templates/admin/hooks.tmpl b/templates/admin/hooks.tmpl
index 26f92c7064..c77d27dbd0 100644
--- a/templates/admin/hooks.tmpl
+++ b/templates/admin/hooks.tmpl
@@ -1,13 +1,9 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content admin hooks">
-	{{template "admin/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "admin/layout_head" (dict "ctxData" . "pageClass" "admin hooks")}}
+	<div class="admin-setting-content">
 
 		{{template "repo/settings/webhook/base_list" .SystemWebhooks}}
 		{{template "repo/settings/webhook/base_list" .DefaultWebhooks}}
 
 		{{template "repo/settings/webhook/delete_modal" .}}
 	</div>
-</div>
-{{template "base/footer" .}}
+{{template "admin/layout_footer" .}}
diff --git a/templates/admin/layout_footer.tmpl b/templates/admin/layout_footer.tmpl
new file mode 100644
index 0000000000..8d6e564d51
--- /dev/null
+++ b/templates/admin/layout_footer.tmpl
@@ -0,0 +1,11 @@
+{{if false}}{{/* to make html structure "likely" complete to prevent IDE warnings */}}
+<div class="page-content">
+	<div class="admin-layout-right">
+		<div>
+		{{/* block: admin-setting-content */}}
+{{end}}
+
+		</div>
+	</div>
+</div>
+{{template "base/footer" .}}
diff --git a/templates/admin/layout_head.tmpl b/templates/admin/layout_head.tmpl
new file mode 100644
index 0000000000..6d84f8f359
--- /dev/null
+++ b/templates/admin/layout_head.tmpl
@@ -0,0 +1,13 @@
+{{template "base/head" .ctxData}}
+<div role="main" aria-label="{{.ctxData.Title}}" class="page-content {{.pageClass}}">
+	<div class="ui container stackable grid">
+		{{template "admin/navbar" .ctxData}}
+		<div class="twelve wide column">
+			{{template "base/alert" .ctxData}}
+			{{/* block: admin-setting-content */}}
+
+{{if false}}{{/* to make html structure "likely" complete to prevent IDE warnings */}}
+		</div>
+	</div>
+</div>
+{{end}}
diff --git a/templates/admin/monitor.tmpl b/templates/admin/monitor.tmpl
index 4d66d3bfbb..4b9e51503c 100644
--- a/templates/admin/monitor.tmpl
+++ b/templates/admin/monitor.tmpl
@@ -1,8 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content admin monitor">
-	{{template "admin/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "admin/layout_head" (dict "ctxData" . "pageClass" "admin monitor")}}
+	<div class="admin-setting-content">
 		{{template "admin/cron" .}}
 		<h4 class="ui top attached header">
 			{{.locale.Tr "admin.monitor.queues"}}
@@ -26,7 +23,7 @@
 							<td>{{.Type}}</td>
 							<td>{{.ExemplarType}}</td>
 							<td>{{$sum := .NumberOfWorkers}}{{if lt $sum 0}}-{{else}}{{$sum}}{{end}}</td>
-							<td>{{$sum := .NumberInQueue}}{{if lt $sum 0}}-{{else}}{{$sum}}{{end}}</td>
+							<td>{{$sum = .NumberInQueue}}{{if lt $sum 0}}-{{else}}{{$sum}}{{end}}</td>
 							<td><a href="{{$.Link}}/queue/{{.QID}}" class="button">{{if lt $sum 0}}{{$.locale.Tr "admin.monitor.queue.review"}}{{else}}{{$.locale.Tr "admin.monitor.queue.review_add"}}{{end}}</a>
 						</tr>
 					{{end}}
@@ -36,7 +33,7 @@
 
 		{{template "admin/process" .}}
 	</div>
-</div>
+
 <div class="ui gitea-confirm-modal delete modal">
 	<div class="header">
 		{{.locale.Tr "admin.monitor.process.cancel"}}
@@ -47,4 +44,5 @@
 	</div>
 	{{template "base/modal_actions_confirm" .}}
 </div>
-{{template "base/footer" .}}
+
+{{template "admin/layout_footer" .}}
diff --git a/templates/admin/navbar.tmpl b/templates/admin/navbar.tmpl
index 97ee917167..e8eb54e58d 100644
--- a/templates/admin/navbar.tmpl
+++ b/templates/admin/navbar.tmpl
@@ -1,5 +1,6 @@
-<div class="ui secondary pointing tabular top attached borderless menu stackable new-menu navbar">
-	<div class="new-menu-inner">
+<div class="four wide column">
+	<div class="ui fluid vertical menu">
+		<div class="header item">{{.locale.Tr "settings"}}</div>
 		<a class="{{if .PageIsAdminDashboard}}active {{end}}item" href="{{AppSubUrl}}/admin">
 			{{.locale.Tr "admin.dashboard"}}
 		</a>
diff --git a/templates/admin/notice.tmpl b/templates/admin/notice.tmpl
index 850b6333f2..82acb14247 100644
--- a/templates/admin/notice.tmpl
+++ b/templates/admin/notice.tmpl
@@ -1,8 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content admin notice">
-	{{template "admin/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "admin/layout_head" (dict "ctxData" . "pageClass" "admin notice")}}
+	<div class="admin-setting-content">
 		<h4 class="ui top attached header">
 			{{.locale.Tr "admin.notices.system_notice_list"}} ({{.locale.Tr "admin.total" .Total}})
 		</h4>
@@ -69,7 +66,6 @@
 
 		{{template "base/paginate" .}}
 	</div>
-</div>
 
 <div class="ui modal admin" id="detail-modal">
 	<div class="header">{{$.locale.Tr "admin.notices.view_detail_header"}}</div>
@@ -78,4 +74,5 @@
 		<pre></pre>
 	</div>
 </div>
-{{template "base/footer" .}}
+
+{{template "admin/layout_footer" .}}
diff --git a/templates/admin/org/list.tmpl b/templates/admin/org/list.tmpl
index f114b90fc7..2e8a635985 100644
--- a/templates/admin/org/list.tmpl
+++ b/templates/admin/org/list.tmpl
@@ -1,8 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content admin user">
-	{{template "admin/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "admin/layout_head" (dict "ctxData" . "pageClass" "admin user")}}
+	<div class="admin-setting-content">
 		<h4 class="ui top attached header">
 			{{.locale.Tr "admin.orgs.org_manage_panel"}} ({{.locale.Tr "admin.total" .Total}})
 			<div class="ui right">
@@ -54,5 +51,4 @@
 
 		{{template "base/paginate" .}}
 	</div>
-</div>
-{{template "base/footer" .}}
+{{template "admin/layout_footer" .}}
diff --git a/templates/admin/packages/list.tmpl b/templates/admin/packages/list.tmpl
index 6b3480d427..af98e76175 100644
--- a/templates/admin/packages/list.tmpl
+++ b/templates/admin/packages/list.tmpl
@@ -1,8 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content admin user">
-	{{template "admin/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "admin/layout_head" (dict "ctxData" . "pageClass" "admin user")}}
+	<div class="admin-setting-content">
 		<h4 class="ui top attached header">
 			{{.locale.Tr "admin.packages.package_manage_panel"}} ({{.locale.Tr "admin.total" .TotalCount}},
 			{{.locale.Tr "admin.packages.total_size" (FileSize .TotalBlobSize)}},
@@ -78,7 +75,6 @@
 
 		{{template "base/paginate" .}}
 	</div>
-</div>
 
 <div class="ui gitea-confirm-modal delete modal">
 	<div class="header">
@@ -90,4 +86,5 @@
 	</div>
 	{{template "base/modal_actions_confirm" .}}
 </div>
-{{template "base/footer" .}}
+
+{{template "admin/layout_footer" .}}
diff --git a/templates/admin/queue.tmpl b/templates/admin/queue.tmpl
index 10c35bd599..b6ca0de117 100644
--- a/templates/admin/queue.tmpl
+++ b/templates/admin/queue.tmpl
@@ -1,8 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content admin monitor">
-	{{template "admin/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "admin/layout_head" (dict "ctxData" . "pageClass" "admin monitor")}}
+	<div class="admin-setting-content">
 		<h4 class="ui top attached header">
 			{{.locale.Tr "admin.monitor.queue" .Queue.Name}}
 		</h4>
@@ -25,7 +22,7 @@
 						<td>{{.Queue.ExemplarType}}</td>
 						<td>{{$sum := .Queue.NumberOfWorkers}}{{if lt $sum 0}}-{{else}}{{$sum}}{{end}}</td>
 						<td>{{if lt $sum 0}}-{{else}}{{.Queue.MaxNumberOfWorkers}}{{end}}</td>
-						<td>{{$sum := .Queue.NumberInQueue}}{{if lt $sum 0}}-{{else}}{{$sum}}{{end}}</td>
+						<td>{{$sum = .Queue.NumberInQueue}}{{if lt $sum 0}}-{{else}}{{$sum}}{{end}}</td>
 					</tr>
 				</tbody>
 			</table>
@@ -177,10 +174,10 @@
 			{{.locale.Tr "admin.monitor.queue.configuration"}}
 		</h4>
 		<div class="ui attached segment">
-			<pre>{{.Queue.Configuration | JsonPrettyPrint}}
+			<pre>{{.Queue.Configuration | JsonPrettyPrint}}</pre>
 		</div>
 	</div>
-</div>
+
 <div class="ui gitea-confirm-modal delete modal">
 	<div class="header">
 		{{.locale.Tr "admin.monitor.queue.pool.cancel"}}
@@ -192,4 +189,4 @@
 	{{template "base/modal_actions_confirm" .}}
 </div>
 
-{{template "base/footer" .}}
+{{template "admin/layout_footer" .}}
diff --git a/templates/admin/repo/list.tmpl b/templates/admin/repo/list.tmpl
index 1574a37668..59aa36d19d 100644
--- a/templates/admin/repo/list.tmpl
+++ b/templates/admin/repo/list.tmpl
@@ -1,8 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content admin user">
-	{{template "admin/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "admin/layout_head" (dict "ctxData" . "pageClass" "admin user")}}
+	<div class="admin-setting-content">
 		<h4 class="ui top attached header">
 			{{.locale.Tr "admin.repos.repo_manage_panel"}} ({{.locale.Tr "admin.total" .Total}})
 			<div class="ui right">
@@ -93,7 +90,6 @@
 
 		{{template "base/paginate" .}}
 	</div>
-</div>
 
 <div class="ui gitea-confirm-modal delete modal">
 	<div class="header">
@@ -107,4 +103,5 @@
 	</div>
 	{{template "base/modal_actions_confirm" .}}
 </div>
-{{template "base/footer" .}}
+
+{{template "admin/layout_footer" .}}
diff --git a/templates/admin/repo/unadopted.tmpl b/templates/admin/repo/unadopted.tmpl
index fbb0bdf0e8..fa29cae1fe 100644
--- a/templates/admin/repo/unadopted.tmpl
+++ b/templates/admin/repo/unadopted.tmpl
@@ -1,8 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content admin user">
-	{{template "admin/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "admin/layout_head" (dict "ctxData" . "pageClass" "admin user")}}
+	<div class="admin-setting-content">
 		<h4 class="ui top attached header">
 			{{.locale.Tr "admin.repos.unadopted"}}
 			<div class="ui right">
@@ -95,6 +92,5 @@
 			</div>
 		{{end}}
 	</div>
-</div>
 
-{{template "base/footer" .}}
+{{template "admin/layout_footer" .}}
diff --git a/templates/admin/runners/base.tmpl b/templates/admin/runners/base.tmpl
index a00a4dbc26..36495b6a0b 100644
--- a/templates/admin/runners/base.tmpl
+++ b/templates/admin/runners/base.tmpl
@@ -1,8 +1,5 @@
-{{template "base/head" .}}
-<div class="page-content admin runners">
-	{{template "admin/navbar" .}}
-	<div class="ui container">
+{{template "admin/layout_head" (dict "ctxData" . "pageClass" "admin runners")}}
+	<div class="admin-setting-content">
 		{{template "shared/actions/runner_list" .}}
 	</div>
-</div>
-{{template "base/footer" .}}
+{{template "admin/layout_footer" .}}
diff --git a/templates/admin/runners/edit.tmpl b/templates/admin/runners/edit.tmpl
index 0963e97a5b..1165c84b79 100644
--- a/templates/admin/runners/edit.tmpl
+++ b/templates/admin/runners/edit.tmpl
@@ -1,8 +1,5 @@
-{{template "base/head" .}}
-<div class="page-content admin runners">
-	{{template "admin/navbar" .}}
-	<div class="ui container">
+{{template "admin/layout_head" (dict "ctxData" . "pageClass" "admin runners")}}
+	<div class="admin-setting-content">
 		{{template "shared/actions/runner_edit" .}}
 	</div>
-</div>
-{{template "base/footer" .}}
+{{template "admin/layout_footer" .}}
diff --git a/templates/admin/stacktrace.tmpl b/templates/admin/stacktrace.tmpl
index 2bef11fcf6..1995404d91 100644
--- a/templates/admin/stacktrace.tmpl
+++ b/templates/admin/stacktrace.tmpl
@@ -1,8 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content admin monitor">
-	{{template "admin/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "admin/layout_head" (dict "ctxData" . "pageClass" "admin monitor")}}
+	<div class="admin-setting-content">
 		<h4 class="ui top attached header">
 			{{.locale.Tr "admin.monitor.stacktrace"}}: {{.locale.Tr "admin.monitor.goroutines" .GoroutineCount}}
 			<div class="ui right">
@@ -17,7 +14,7 @@
 			</div>
 		</div>
 	</div>
-</div>
+
 <div class="ui gitea-confirm-modal delete modal">
 	<div class="header">
 		{{.locale.Tr "admin.monitor.process.cancel"}}
@@ -29,4 +26,4 @@
 	{{template "base/modal_actions_confirm" .}}
 </div>
 
-{{template "base/footer" .}}
+{{template "admin/layout_footer" .}}
diff --git a/templates/admin/user/edit.tmpl b/templates/admin/user/edit.tmpl
index 6d916ae207..cd3175b493 100644
--- a/templates/admin/user/edit.tmpl
+++ b/templates/admin/user/edit.tmpl
@@ -1,8 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content admin edit user">
-	{{template "admin/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "admin/layout_head" (dict "ctxData" . "pageClass" "admin edit user")}}
+	<div class="admin-setting-content">
 		<h4 class="ui top attached header">
 			{{.locale.Tr "admin.users.edit_account"}}
 		</h4>
@@ -194,7 +191,6 @@
 			</form>
 		</div>
 	</div>
-</div>
 
 <div class="ui gitea-confirm-modal delete modal" id="delete-user-modal">
 	<div class="header">
@@ -216,4 +212,5 @@
 		{{template "base/modal_actions_confirm" .}}
 	</form>
 </div>
-{{template "base/footer" .}}
+
+{{template "admin/layout_footer" .}}
diff --git a/templates/admin/user/list.tmpl b/templates/admin/user/list.tmpl
index 50b9d13619..c7644b3b4e 100644
--- a/templates/admin/user/list.tmpl
+++ b/templates/admin/user/list.tmpl
@@ -1,8 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content admin user">
-	{{template "admin/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "admin/layout_head" (dict "ctxData" . "pageClass" "admin user")}}
+	<div class="admin-setting-content">
 		<h4 class="ui top attached header">
 			{{.locale.Tr "admin.users.user_manage_panel"}} ({{.locale.Tr "admin.total" .Total}})
 			<div class="ui right">
@@ -109,5 +106,4 @@
 
 		{{template "base/paginate" .}}
 	</div>
-</div>
-{{template "base/footer" .}}
+{{template "admin/layout_footer" .}}
diff --git a/templates/admin/user/new.tmpl b/templates/admin/user/new.tmpl
index 3f25c30c8b..dbf01fb43e 100644
--- a/templates/admin/user/new.tmpl
+++ b/templates/admin/user/new.tmpl
@@ -1,8 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content admin new user">
-	{{template "admin/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "admin/layout_head" (dict "ctxData" . "pageClass" "admin new user")}}
+	<div class="admin-setting-content">
 		<h4 class="ui top attached header">
 			{{.locale.Tr "admin.users.new_account"}}
 		</h4>
@@ -90,5 +87,4 @@
 			</form>
 		</div>
 	</div>
-</div>
-{{template "base/footer" .}}
+{{template "admin/layout_footer" .}}
diff --git a/templates/org/settings/applications.tmpl b/templates/org/settings/applications.tmpl
index 35736df591..5934f99de7 100644
--- a/templates/org/settings/applications.tmpl
+++ b/templates/org/settings/applications.tmpl
@@ -1,18 +1,9 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content organization settings options">
-	{{template "org/header" .}}
-	<div class="ui container">
-		<div class="ui grid">
-			{{template "org/settings/navbar" .}}
-			<div class="twelve wide column content">
-				{{template "base/alert" .}}
+{{template "org/settings/layout_head" (dict "ctxData" . "pageClass" "organization settings options")}}
+			<div class="org-setting-content">
 				<h4 class="ui top attached header">
 					{{.locale.Tr "settings.applications"}}
 				</h4>
 
 				{{template "user/settings/applications_oauth2_list" .}}
 			</div>
-		</div>
-	</div>
-</div>
-{{template "base/footer" .}}
+{{template "org/settings/layout_footer" .}}
diff --git a/templates/org/settings/applications_oauth2_edit.tmpl b/templates/org/settings/applications_oauth2_edit.tmpl
index 861651a15e..987803ac26 100644
--- a/templates/org/settings/applications_oauth2_edit.tmpl
+++ b/templates/org/settings/applications_oauth2_edit.tmpl
@@ -1,7 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content organization settings options">
-	{{template "org/header" .}}
-
-	{{template "user/settings/applications_oauth2_edit_form" .}}
-</div>
-{{template "base/footer" .}}
+{{template "org/settings/layout_head" (dict "ctxData" . "pageClass" "organization settings options")}}
+			<div class="org-setting-content">
+				{{template "user/settings/applications_oauth2_edit_form" .}}
+			</div>
+{{template "org/settings/layout_footer" .}}
diff --git a/templates/org/settings/delete.tmpl b/templates/org/settings/delete.tmpl
index e8a8f5b185..1cfe1f16cd 100644
--- a/templates/org/settings/delete.tmpl
+++ b/templates/org/settings/delete.tmpl
@@ -1,11 +1,6 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content organization settings delete">
-	{{template "org/header" .}}
-	<div class="ui container">
-		<div class="ui grid">
-			{{template "org/settings/navbar" .}}
-			<div class="twelve wide column content">
-				{{template "base/alert" .}}
+{{template "org/settings/layout_head" (dict "ctxData" . "pageClass" "organization settings delete")}}
+
+			<div class="org-setting-content">
 				<h4 class="ui top attached error header">
 					{{.locale.Tr "org.settings.delete_account"}}
 				</h4>
@@ -25,9 +20,6 @@
 					</form>
 				</div>
 			</div>
-		</div>
-	</div>
-</div>
 
 <div class="ui gitea-confirm-modal delete modal">
 	<div class="header">
@@ -39,4 +31,5 @@
 	</div>
 	{{template "base/modal_actions_confirm" .}}
 </div>
-{{template "base/footer" .}}
+
+{{template "org/settings/layout_footer" .}}
diff --git a/templates/org/settings/hook_new.tmpl b/templates/org/settings/hook_new.tmpl
index 4685225f4c..1bf74fb7ba 100644
--- a/templates/org/settings/hook_new.tmpl
+++ b/templates/org/settings/hook_new.tmpl
@@ -1,11 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content organization settings new webhook">
-	{{template "org/header" .}}
-	<div class="ui container">
-		<div class="ui grid">
-			{{template "org/settings/navbar" .}}
-			<div class="twelve wide column content">
-				{{template "base/alert" .}}
+{{template "org/settings/layout_head" (dict "ctxData" . "pageClass" "organization settings new webhook")}}
+			<div class="org-setting-content">
 				<h4 class="ui top attached header">
 					{{if .PageIsSettingsHooksNew}}{{.locale.Tr "repo.settings.add_webhook"}}{{else}}{{.locale.Tr "repo.settings.update_webhook"}}{{end}}
 					<div class="ui right">
@@ -50,7 +44,5 @@
 
 				{{template "repo/settings/webhook/history" .}}
 			</div>
-		</div>
-	</div>
-</div>
-{{template "base/footer" .}}
+
+{{template "org/settings/layout_footer" .}}
diff --git a/templates/org/settings/hooks.tmpl b/templates/org/settings/hooks.tmpl
index 3abbc62ecf..9f307968f8 100644
--- a/templates/org/settings/hooks.tmpl
+++ b/templates/org/settings/hooks.tmpl
@@ -1,13 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content organization settings webhooks">
-	{{template "org/header" .}}
-	<div class="ui container">
-		<div class="ui grid">
-			{{template "org/settings/navbar" .}}
-			<div class="twelve wide column content">
+{{template "org/settings/layout_head" (dict "ctxData" . "pageClass" "organization settings webhooks")}}
+			<div class="org-setting-content">
 				{{template "repo/settings/webhook/list" .}}
 			</div>
-		</div>
-	</div>
-</div>
-{{template "base/footer" .}}
+{{template "org/settings/layout_footer" .}}
diff --git a/templates/org/settings/labels.tmpl b/templates/org/settings/labels.tmpl
index e04b391271..c3917861f6 100644
--- a/templates/org/settings/labels.tmpl
+++ b/templates/org/settings/labels.tmpl
@@ -1,10 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content organization settings labels">
-	{{template "org/header" .}}
-	<div class="ui container">
-		<div class="ui grid">
-			{{template "org/settings/navbar" .}}
-				<div class="ui twelve wide column content">
+{{template "org/settings/layout_head" (dict "ctxData" . "pageClass" "organization settings labels")}}
+				<div class="org-setting-content">
 					<div class="ui grid">
 						<div class="left floated twelve wide column">
 							{{$.locale.Tr "org.settings.labels_desc" | Str2html}}
@@ -17,13 +12,8 @@
 					</div>
 					<div class="ui divider"></div>
 					{{template "repo/issue/labels/label_new" .}}
-					{{template "base/alert" .}}
 					{{template "repo/issue/labels/label_list" .}}
 				</div>
-			</div>
-		</div>
-	</div>
-</div>
-
 {{template "repo/issue/labels/edit_delete_label" .}}
-{{template "base/footer" .}}
+{{template "org/settings/layout_footer" .}}
+
diff --git a/templates/org/settings/layout_footer.tmpl b/templates/org/settings/layout_footer.tmpl
new file mode 100644
index 0000000000..09d88c0c15
--- /dev/null
+++ b/templates/org/settings/layout_footer.tmpl
@@ -0,0 +1,11 @@
+{{if false}}{{/* to make html structure "likely" complete to prevent IDE warnings */}}
+<div class="page-content">
+	<div class="org-layout-right">
+		<div>
+		{{/* block: org-setting-content */}}
+{{end}}
+
+		</div>
+	</div>
+</div>
+{{template "base/footer" .}}
diff --git a/templates/org/settings/layout_head.tmpl b/templates/org/settings/layout_head.tmpl
new file mode 100644
index 0000000000..c245a3bf62
--- /dev/null
+++ b/templates/org/settings/layout_head.tmpl
@@ -0,0 +1,14 @@
+{{template "base/head" .ctxData}}
+<div role="main" aria-label="{{.ctxData.Title}}" class="page-content {{.pageClass}}">
+	{{template "org/header" .ctxData}}
+	<div class="ui container stackable grid">
+		{{template "org/settings/navbar" .ctxData}}
+		<div class="twelve wide column">
+			{{template "base/alert" .ctxData}}
+			{{/* block: org-setting-content */}}
+
+{{if false}}{{/* to make html structure "likely" complete to prevent IDE warnings */}}
+		</div>
+	</div>
+</div>
+{{end}}
diff --git a/templates/org/settings/options.tmpl b/templates/org/settings/options.tmpl
index 56ad5fa896..6f9f076548 100644
--- a/templates/org/settings/options.tmpl
+++ b/templates/org/settings/options.tmpl
@@ -1,11 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content organization settings options">
-	{{template "org/header" .}}
-	<div class="ui container">
-		<div class="ui grid">
-			{{template "org/settings/navbar" .}}
-			<div class="twelve wide column content">
-				{{template "base/alert" .}}
+{{template "org/settings/layout_head" (dict "ctxData" . "pageClass" "organization settings options")}}
+			<div class="org-setting-content">
 				<h4 class="ui top attached header">
 					{{.locale.Tr "org.settings.options"}}
 				</h4>
@@ -101,7 +95,4 @@
 					</form>
 				</div>
 			</div>
-		</div>
-	</div>
-</div>
-{{template "base/footer" .}}
+{{template "org/settings/layout_footer" .}}
diff --git a/templates/org/settings/packages.tmpl b/templates/org/settings/packages.tmpl
index 04e5d45b50..91106c3f15 100644
--- a/templates/org/settings/packages.tmpl
+++ b/templates/org/settings/packages.tmpl
@@ -1,15 +1,6 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content organization settings packages">
-	{{template "org/header" .}}
-	<div class="ui container">
-		<div class="ui grid">
-			{{template "org/settings/navbar" .}}
-			<div class="twelve wide column content">
-				{{template "base/alert" .}}
+{{template "org/settings/layout_head" (dict "ctxData" . "pageClass" "organization settings packages")}}
+			<div class="org-setting-content">
 				{{template "package/shared/cleanup_rules/list" .}}
 				{{template "package/shared/cargo" .}}
 			</div>
-		</div>
-	</div>
-</div>
-{{template "base/footer" .}}
+{{template "org/settings/layout_footer" .}}
diff --git a/templates/org/settings/packages_cleanup_rules_edit.tmpl b/templates/org/settings/packages_cleanup_rules_edit.tmpl
index 195c21da0c..ff4c2dd651 100644
--- a/templates/org/settings/packages_cleanup_rules_edit.tmpl
+++ b/templates/org/settings/packages_cleanup_rules_edit.tmpl
@@ -1,14 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content organization settings packages">
-	{{template "org/header" .}}
-	<div class="ui container">
-		<div class="ui grid">
-			{{template "org/settings/navbar" .}}
-			<div class="twelve wide column content">
-				{{template "base/alert" .}}
+{{template "org/settings/layout_head" (dict "ctxData" . "pageClass" "organization settings packages")}}
+			<div class="org-setting-content">
 				{{template "package/shared/cleanup_rules/edit" .}}
 			</div>
-		</div>
-	</div>
-</div>
-{{template "base/footer" .}}
+{{template "org/settings/layout_footer" .}}
diff --git a/templates/org/settings/packages_cleanup_rules_preview.tmpl b/templates/org/settings/packages_cleanup_rules_preview.tmpl
index 771e6cb8f3..5a2f061225 100644
--- a/templates/org/settings/packages_cleanup_rules_preview.tmpl
+++ b/templates/org/settings/packages_cleanup_rules_preview.tmpl
@@ -1,13 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content organization settings packages admin">
-	{{template "org/header" .}}
-	<div class="ui container">
-		<div class="ui grid">
-			{{template "org/settings/navbar" .}}
-			<div class="twelve wide column content">
+{{template "org/settings/layout_head" (dict "ctxData" . "pageClass" "organization settings packages")}}
+			<div class="org-setting-content">
 				{{template "package/shared/cleanup_rules/preview" .}}
 			</div>
-		</div>
-	</div>
-</div>
-{{template "base/footer" .}}
+{{template "org/settings/layout_footer" .}}
diff --git a/templates/org/settings/runners.tmpl b/templates/org/settings/runners.tmpl
index 7c70f6d956..2350f68ba9 100644
--- a/templates/org/settings/runners.tmpl
+++ b/templates/org/settings/runners.tmpl
@@ -1,13 +1,5 @@
-{{template "base/head" .}}
-<div class="page-content organization settings runners">
-	{{template "org/header" .}}
-	<div class="ui container">
-		<div class="ui grid">
-			{{template "org/settings/navbar" .}}
-			<div class="twelve wide column content">
+{{template "org/settings/layout_head" (dict "ctxData" . "pageClass" "organization settings runners")}}
+			<div class="org-setting-content">
 				{{template "shared/actions/runner_list" .}}
 			</div>
-		</div>
-	</div>
-</div>
-{{template "base/footer" .}}
+{{template "org/settings/layout_footer" .}}
diff --git a/templates/org/settings/runners_edit.tmpl b/templates/org/settings/runners_edit.tmpl
index 931ca3701a..acd67a4d7b 100644
--- a/templates/org/settings/runners_edit.tmpl
+++ b/templates/org/settings/runners_edit.tmpl
@@ -1,13 +1,5 @@
-{{template "base/head" .}}
-<div class="page-content organization settings runners">
-	{{template "org/header" .}}
-	<div class="ui container">
-		<div class="ui grid">
-			{{template "org/settings/navbar" .}}
-			<div class="twelve wide column content">
+{{template "org/settings/layout_head" (dict "ctxData" . "pageClass" "organization settings runners")}}
+			<div class="org-setting-content">
 				{{template "shared/actions/runner_edit" .}}
 			</div>
-		</div>
-	</div>
-</div>
-{{template "base/footer" .}}
+{{template "org/settings/layout_footer" .}}
diff --git a/templates/org/settings/secrets.tmpl b/templates/org/settings/secrets.tmpl
index 909c16f448..68ce415f41 100644
--- a/templates/org/settings/secrets.tmpl
+++ b/templates/org/settings/secrets.tmpl
@@ -1,15 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content organization settings webhooks">
-	{{template "org/header" .}}
-	<div class="ui container">
-		<div class="ui grid">
-			{{template "org/settings/navbar" .}}
-			<div class="ui twelve wide column content">
-				{{template "base/alert" .}}
+{{template "org/settings/layout_head" (dict "ctxData" . "pageClass" "organization settings secrets")}}
+			<div class="org-setting-content">
 				{{template "shared/secrets/add_list" .}}
 			</div>
-		</div>
-	</div>
-</div>
-
-{{template "base/footer" .}}
+{{template "org/settings/layout_footer" .}}
diff --git a/templates/repo/settings/branches.tmpl b/templates/repo/settings/branches.tmpl
index 53e1b00f6f..ae1d7277a1 100644
--- a/templates/repo/settings/branches.tmpl
+++ b/templates/repo/settings/branches.tmpl
@@ -1,9 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content repository settings edit">
-	{{template "repo/header" .}}
-	{{template "repo/settings/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "repo/settings/layout_head" (dict "ctxData" . "pageClass" "repository settings edit")}}
+	<div class="repo-setting-content">
 		{{if .Repository.IsArchived}}
 			<div class="ui warning message">
 				{{.locale.Tr "repo.settings.archive.branchsettings_unavailable"}}
@@ -94,7 +90,6 @@
 			{{end}}
 		{{end}}
 	</div>
-</div>
 
 <div class="ui gitea-confirm-modal delete modal">
 	<div class="header">
@@ -107,4 +102,4 @@
 	{{template "base/modal_actions_confirm" .}}
 </div>
 
-{{template "base/footer" .}}
+{{template "repo/settings/layout_footer" .}}
diff --git a/templates/repo/settings/collaboration.tmpl b/templates/repo/settings/collaboration.tmpl
index d9a415662e..6b1fcf194a 100644
--- a/templates/repo/settings/collaboration.tmpl
+++ b/templates/repo/settings/collaboration.tmpl
@@ -1,9 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content repository settings collaboration">
-	{{template "repo/header" .}}
-	{{template "repo/settings/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "repo/settings/layout_head" (dict "ctxData" . "pageClass" "repository settings collaboration")}}
+	<div class="repo-setting-content">
 		<h4 class="ui top attached header">
 			{{.locale.Tr "repo.settings.collaboration"}}
 		</h4>
@@ -110,7 +106,6 @@
 		</div>
 		{{end}}
 	</div>
-</div>
 
 <div class="ui gitea-confirm-modal delete modal">
 	<div class="header">
@@ -122,4 +117,5 @@
 	</div>
 	{{template "base/modal_actions_confirm" .}}
 </div>
-{{template "base/footer" .}}
+
+{{template "repo/settings/layout_footer" .}}
diff --git a/templates/repo/settings/deploy_keys.tmpl b/templates/repo/settings/deploy_keys.tmpl
index a0f802e49a..e577fcc5fa 100644
--- a/templates/repo/settings/deploy_keys.tmpl
+++ b/templates/repo/settings/deploy_keys.tmpl
@@ -1,9 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content repository settings">
-	{{template "repo/header" .}}
-	{{template "repo/settings/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "repo/settings/layout_head" (dict "ctxData" . "pageClass" "repository settings")}}
+	<div class="repo-setting-content">
 		<h4 class="ui top attached header">
 			{{.locale.Tr "repo.settings.deploy_keys"}}
 			<div class="ui right">
@@ -75,7 +71,6 @@
 			{{end}}
 		</div>
 	</div>
-</div>
 
 <div class="ui gitea-confirm-modal delete modal">
 	<div class="header">
@@ -87,4 +82,5 @@
 	</div>
 	{{template "base/modal_actions_confirm" .}}
 </div>
-{{template "base/footer" .}}
+
+{{template "repo/settings/layout_footer" .}}
diff --git a/templates/repo/settings/githook_edit.tmpl b/templates/repo/settings/githook_edit.tmpl
index d4df95b29a..3d212b5ffd 100644
--- a/templates/repo/settings/githook_edit.tmpl
+++ b/templates/repo/settings/githook_edit.tmpl
@@ -1,9 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content repository settings edit githook">
-	{{template "repo/header" .}}
-	{{template "repo/settings/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "repo/settings/layout_head" (dict "ctxData" . "pageClass" "repository settings edit githook")}}
+	<div class="repo-setting-content">
 		<h4 class="ui top attached header">
 			{{.locale.Tr "repo.settings.githooks"}}
 		</h4>
@@ -28,5 +24,4 @@
 			</form>
 		</div>
 	</div>
-</div>
-{{template "base/footer" .}}
+{{template "repo/settings/layout_footer" .}}
diff --git a/templates/repo/settings/githooks.tmpl b/templates/repo/settings/githooks.tmpl
index a72d5ba290..c0bf91f910 100644
--- a/templates/repo/settings/githooks.tmpl
+++ b/templates/repo/settings/githooks.tmpl
@@ -1,9 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content repository settings githooks">
-	{{template "repo/header" .}}
-	{{template "repo/settings/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "repo/settings/layout_head" (dict "ctxData" . "pageClass" "repository settings githooks")}}
+	<div class="repo-setting-content">
 		<h4 class="ui top attached header">
 			{{.locale.Tr "repo.settings.githooks"}}
 		</h4>
@@ -24,5 +20,4 @@
 			</div>
 		</div>
 	</div>
-</div>
-{{template "base/footer" .}}
+{{template "repo/settings/layout_footer" .}}
diff --git a/templates/repo/settings/layout_footer.tmpl b/templates/repo/settings/layout_footer.tmpl
new file mode 100644
index 0000000000..60cad3ffb9
--- /dev/null
+++ b/templates/repo/settings/layout_footer.tmpl
@@ -0,0 +1,11 @@
+{{if false}}{{/* to make html structure "likely" complete to prevent IDE warnings */}}
+<div class="page-content">
+	<div class="repo-layout-right">
+		<div>
+		{{/* block: repo-setting-content */}}
+{{end}}
+
+		</div>
+	</div>
+</div>
+{{template "base/footer" .}}
diff --git a/templates/repo/settings/layout_head.tmpl b/templates/repo/settings/layout_head.tmpl
new file mode 100644
index 0000000000..3117309831
--- /dev/null
+++ b/templates/repo/settings/layout_head.tmpl
@@ -0,0 +1,14 @@
+{{template "base/head" .ctxData}}
+<div role="main" aria-label="{{.ctxData.Title}}" class="page-content {{.pageClass}}">
+	{{template "repo/header" .ctxData}}
+	<div class="ui container stackable grid">
+		{{template "repo/settings/navbar" .ctxData}}
+		<div class="twelve wide column">
+			{{template "base/alert" .ctxData}}
+			{{/* block: repo-setting-content */}}
+
+{{if false}}{{/* to make html structure "likely" complete to prevent IDE warnings */}}
+		</div>
+	</div>
+</div>
+{{end}}
diff --git a/templates/repo/settings/lfs.tmpl b/templates/repo/settings/lfs.tmpl
index b4ffa1894f..3a39dff62c 100644
--- a/templates/repo/settings/lfs.tmpl
+++ b/templates/repo/settings/lfs.tmpl
@@ -1,9 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content repository settings lfs">
-	{{template "repo/header" .}}
-	{{template "repo/settings/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "repo/settings/layout_head" (dict "ctxData" . "pageClass" "repository settings lfs")}}
+	<div class="repo-setting-content">
 		<h4 class="ui top attached header">
 			{{.locale.Tr "repo.settings.lfs_filelist"}} ({{.locale.Tr "admin.total" .Total}})
 			<div class="ui right">
@@ -60,4 +56,4 @@
 		{{end}}
 	</div>
 </div>
-{{template "base/footer" .}}
+{{template "repo/settings/layout_footer" .}}
diff --git a/templates/repo/settings/lfs_file.tmpl b/templates/repo/settings/lfs_file.tmpl
index 2ad3458501..d38cf32d24 100644
--- a/templates/repo/settings/lfs_file.tmpl
+++ b/templates/repo/settings/lfs_file.tmpl
@@ -1,9 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content repository settings lfs">
-	{{template "repo/header" .}}
-	{{template "repo/settings/navbar" .}}
-	<div class="ui container repository file list">
-		{{template "base/alert" .}}
+{{template "repo/settings/layout_head" (dict "ctxData" . "pageClass" "repository settings lfs")}}
+	<div class="user-main-content twelve wide column content repository file list">
 		<div class="tab-size-8 non-diff-file-content">
 			<h4 class="ui top attached header">
 				<a href="{{.LFSFilesLink}}">{{.locale.Tr "repo.settings.lfs"}}</a> / <span class="truncate sha">{{.LFSFile.Oid}}</span>
@@ -58,5 +54,4 @@
 			</div>
 		</div>
 	</div>
-</div>
-{{template "base/footer" .}}
+{{template "repo/settings/layout_footer" .}}
diff --git a/templates/repo/settings/lfs_file_find.tmpl b/templates/repo/settings/lfs_file_find.tmpl
index 81cb649837..21709e7b33 100644
--- a/templates/repo/settings/lfs_file_find.tmpl
+++ b/templates/repo/settings/lfs_file_find.tmpl
@@ -1,9 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content repository settings lfs">
-	{{template "repo/header" .}}
-	{{template "repo/settings/navbar" .}}
-	<div class="ui container repository file list">
-		{{template "base/alert" .}}
+{{template "repo/settings/layout_head" (dict "ctxData" . "pageClass" "repository settings lfs")}}
+	<div class="user-main-content twelve wide column content repository file list">
 		<div class="tab-size-8 non-diff-file-content">
 			<h4 class="ui top attached header">
 				<a href="{{.LFSFilesLink}}">{{.locale.Tr "repo.settings.lfs"}}</a> / <span class="truncate sha">{{.Oid}}</span>
@@ -48,5 +44,4 @@
 			</table>
 		</div>
 	</div>
-</div>
-{{template "base/footer" .}}
+{{template "repo/settings/layout_footer" .}}
diff --git a/templates/repo/settings/lfs_locks.tmpl b/templates/repo/settings/lfs_locks.tmpl
index cfe4f6add5..8fa3dfd3d3 100644
--- a/templates/repo/settings/lfs_locks.tmpl
+++ b/templates/repo/settings/lfs_locks.tmpl
@@ -1,9 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content repository settings lfs">
-	{{template "repo/header" .}}
-	{{template "repo/settings/navbar" .}}
-	<div class="ui container repository file list">
-		{{template "base/alert" .}}
+{{template "repo/settings/layout_head" (dict "ctxData" . "pageClass" "repository settings lfs")}}
+	<div class="user-main-content twelve wide column content repository file list">
 		<div class="tab-size-8 non-diff-file-content">
 			<h4 class="ui top attached header">
 				<a href="{{.LFSFilesLink}}">{{.locale.Tr "repo.settings.lfs"}}</a> / {{.locale.Tr "repo.settings.lfs_locks"}} ({{.locale.Tr "admin.total" .Total}})
@@ -57,5 +53,4 @@
 			{{template "base/paginate" .}}
 		</div>
 	</div>
-</div>
-{{template "base/footer" .}}
+{{template "repo/settings/layout_footer" .}}
diff --git a/templates/repo/settings/lfs_pointers.tmpl b/templates/repo/settings/lfs_pointers.tmpl
index c95e07b482..5f0cf3164d 100644
--- a/templates/repo/settings/lfs_pointers.tmpl
+++ b/templates/repo/settings/lfs_pointers.tmpl
@@ -1,9 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content repository settings lfs">
-	{{template "repo/header" .}}
-	{{template "repo/settings/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "repo/settings/layout_head" (dict "ctxData" . "pageClass" "repository settings lfs")}}
+	<div class="repo-setting-content">
 		<h4 class="ui top attached header">
 			{{.locale.Tr "repo.settings.lfs_pointers.found" .NumPointers .NumAssociated .NumNotAssociated .NumNoExist}}
 			{{if gt .NumAssociatable 0}}
@@ -67,5 +63,4 @@
 			</table>
 		</div>
 	</div>
-</div>
-{{template "base/footer" .}}
+{{template "repo/settings/layout_footer" .}}
diff --git a/templates/repo/settings/navbar.tmpl b/templates/repo/settings/navbar.tmpl
index bdfbb6bf10..081d0c474e 100644
--- a/templates/repo/settings/navbar.tmpl
+++ b/templates/repo/settings/navbar.tmpl
@@ -1,5 +1,6 @@
-<div class="ui secondary pointing tabular top attached borderless menu stackable new-menu navbar shadow-body">
-	<div class="new-menu-inner">
+<div class="four wide column">
+	<div class="ui fluid vertical menu">
+		<div class="header item">{{.locale.Tr "org.settings"}}</div>
 		<a class="{{if .PageIsSettingsOptions}}active {{end}}item" href="{{.RepoLink}}/settings">
 			{{.locale.Tr "repo.settings.options"}}
 		</a>
diff --git a/templates/repo/settings/options.tmpl b/templates/repo/settings/options.tmpl
index 70850a6ea4..9440f265fc 100644
--- a/templates/repo/settings/options.tmpl
+++ b/templates/repo/settings/options.tmpl
@@ -1,9 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content repository settings options">
-	{{template "repo/header" .}}
-	{{template "repo/settings/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "repo/settings/layout_head" (dict "ctxData" . "pageClass" "repository settings options")}}
+	<div class="user-main-content twelve wide column">
 		<h4 class="ui top attached header">
 			{{.locale.Tr "repo.settings.basic_settings"}}
 		</h4>
@@ -798,7 +794,7 @@
 		</div>
 		{{end}}
 	</div>
-</div>
+{{template "repo/settings/layout_footer" .}}
 
 {{if .Permission.IsOwner}}
 	{{if .Repository.IsMirror}}
@@ -993,5 +989,3 @@
 		</div>
 	{{end}}
 {{end}}
-
-{{template "base/footer" .}}
diff --git a/templates/repo/settings/protected_branch.tmpl b/templates/repo/settings/protected_branch.tmpl
index d63fed46bc..31ba0bf888 100644
--- a/templates/repo/settings/protected_branch.tmpl
+++ b/templates/repo/settings/protected_branch.tmpl
@@ -1,9 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content repository settings branches">
-	{{template "repo/header" .}}
-	{{template "repo/settings/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "repo/settings/layout_head" (dict "ctxData" . "pageClass" "repository settings branches")}}
+	<div class="repo-setting-content">
 		<form class="ui form" action="{{.Link}}" method="post">
 			<h4 class="ui top attached header">
 				{{.locale.Tr "repo.settings.branch_protection" (.Rule.RuleName|Escape) | Str2html}}
@@ -260,5 +256,4 @@
 			</div>
 		</form>
 	</div>
-</div>
-{{template "base/footer" .}}
+{{template "repo/settings/layout_footer" .}}
diff --git a/templates/repo/settings/runner_edit.tmpl b/templates/repo/settings/runner_edit.tmpl
index 10d410f096..8b76aead57 100644
--- a/templates/repo/settings/runner_edit.tmpl
+++ b/templates/repo/settings/runner_edit.tmpl
@@ -1,9 +1,5 @@
-{{template "base/head" .}}
-<div class="page-content repository settings runners">
-	{{template "repo/header" .}}
-	{{template "repo/settings/navbar" .}}
-	<div class="ui container">
+{{template "repo/settings/layout_head" (dict "ctxData" . "pageClass" "repository settings runners")}}
+	<div class="repo-setting-content">
 		{{template "shared/actions/runner_edit" .}}
 	</div>
-</div>
-{{template "base/footer" .}}
+{{template "repo/settings/layout_footer" .}}
diff --git a/templates/repo/settings/runners.tmpl b/templates/repo/settings/runners.tmpl
index d3a0b64fc5..ab3ad40400 100644
--- a/templates/repo/settings/runners.tmpl
+++ b/templates/repo/settings/runners.tmpl
@@ -1,9 +1,5 @@
-{{template "base/head" .}}
-<div class="page-content repository settings runners">
-	{{template "repo/header" .}}
-	{{template "repo/settings/navbar" .}}
-	<div class="ui container">
+{{template "repo/settings/layout_head" (dict "ctxData" . "pageClass" "repository settings runners")}}
+	<div class="repo-setting-content">
 		{{template "shared/actions/runner_list" .}}
 	</div>
-</div>
-{{template "base/footer" .}}
+{{template "repo/settings/layout_footer" .}}
diff --git a/templates/repo/settings/secrets.tmpl b/templates/repo/settings/secrets.tmpl
index 71c5c51157..0b89639e79 100644
--- a/templates/repo/settings/secrets.tmpl
+++ b/templates/repo/settings/secrets.tmpl
@@ -1,10 +1,5 @@
-{{template "base/head" .}}
-<div class="page-content repository settings">
-	{{template "repo/header" .}}
-	{{template "repo/settings/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "repo/settings/layout_head" (dict "ctxData" . "pageClass" "repository settings")}}
+	<div class="repo-setting-content">
 		{{template "shared/secrets/add_list" .}}
 	</div>
-</div>
-{{template "base/footer" .}}
+{{template "repo/settings/layout_footer" .}}
diff --git a/templates/repo/settings/tags.tmpl b/templates/repo/settings/tags.tmpl
index 6387a20de6..fffb97100e 100644
--- a/templates/repo/settings/tags.tmpl
+++ b/templates/repo/settings/tags.tmpl
@@ -1,9 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content repository settings edit">
-	{{template "repo/header" .}}
-	{{template "repo/settings/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "repo/settings/layout_head" (dict "ctxData" . "pageClass" "repository settings edit")}}
+	<div class="repo-setting-content">
 		{{if .Repository.IsArchived}}
 			<div class="ui warning message">
 				{{.locale.Tr "repo.settings.archive.tagsettings_unavailable"}}
@@ -127,5 +123,4 @@
 			</div>
 		{{end}}
 	</div>
-</div>
-{{template "base/footer" .}}
+{{template "repo/settings/layout_footer" .}}
diff --git a/templates/repo/settings/webhook/base.tmpl b/templates/repo/settings/webhook/base.tmpl
index 442434007d..d524722454 100644
--- a/templates/repo/settings/webhook/base.tmpl
+++ b/templates/repo/settings/webhook/base.tmpl
@@ -1,9 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content repository settings webhooks">
-	{{template "repo/header" .}}
-	{{template "repo/settings/navbar" .}}
-	<div class="ui container">
+{{template "repo/settings/layout_head" (dict "ctxData" . "pageClass" "repository settings webhooks")}}
+	<div class="repo-setting-content">
 		{{template "repo/settings/webhook/list" .}}
 	</div>
-</div>
-{{template "base/footer" .}}
+{{template "repo/settings/layout_footer" .}}
diff --git a/templates/repo/settings/webhook/list.tmpl b/templates/repo/settings/webhook/list.tmpl
index 507f5e1f67..b24159fccb 100644
--- a/templates/repo/settings/webhook/list.tmpl
+++ b/templates/repo/settings/webhook/list.tmpl
@@ -1,4 +1,3 @@
-{{template "base/alert" .}}
 
 {{template "repo/settings/webhook/base_list" .}}
 
diff --git a/templates/repo/settings/webhook/new.tmpl b/templates/repo/settings/webhook/new.tmpl
index 5102390db9..f4caa28989 100644
--- a/templates/repo/settings/webhook/new.tmpl
+++ b/templates/repo/settings/webhook/new.tmpl
@@ -1,9 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content repository settings new webhook">
-	{{template "repo/header" .}}
-	{{template "repo/settings/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "repo/settings/layout_head" (dict "ctxData" . "pageClass" "repository settings webhook")}}
+	<div class="repo-setting-content">
 		<h4 class="ui top attached header">
 			{{if .PageIsSettingsHooksNew}}{{.locale.Tr "repo.settings.add_webhook"}}{{else}}{{.locale.Tr "repo.settings.update_webhook"}}{{end}}
 			<div class="ui right">
@@ -48,5 +44,4 @@
 
 		{{template "repo/settings/webhook/history" .}}
 	</div>
-</div>
-{{template "base/footer" .}}
+{{template "repo/settings/layout_footer" .}}
diff --git a/templates/shared/actions/runner_edit.tmpl b/templates/shared/actions/runner_edit.tmpl
index d92010ce11..38a869a6c9 100644
--- a/templates/shared/actions/runner_edit.tmpl
+++ b/templates/shared/actions/runner_edit.tmpl
@@ -1,5 +1,4 @@
 <div class="runner-container">
-	{{template "base/alert" .}}
 	<h4 class="ui top attached header">
 		{{.locale.Tr "actions.runners.runner_title"}} {{.Runner.ID}} {{.Runner.Name}}
 	</h4>
diff --git a/templates/shared/actions/runner_list.tmpl b/templates/shared/actions/runner_list.tmpl
index d4a5b863ab..536ae6b066 100644
--- a/templates/shared/actions/runner_list.tmpl
+++ b/templates/shared/actions/runner_list.tmpl
@@ -1,5 +1,4 @@
 <div class="runner-container">
-	{{template "base/alert" .}}
 
 	<h4 class="ui top attached header">
 		{{.locale.Tr "actions.runners.runner_manage_panel"}} ({{.locale.Tr "admin.total" .Total}})
diff --git a/templates/user/settings/account.tmpl b/templates/user/settings/account.tmpl
index 2ad3eb7af2..fe8e733219 100644
--- a/templates/user/settings/account.tmpl
+++ b/templates/user/settings/account.tmpl
@@ -1,8 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content user settings account">
-	{{template "user/settings/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "user/settings/layout_head" (dict "ctxData" . "pageClass" "user settings account")}}
+	<div class="user-setting-content">
 		<h4 class="ui top attached header">
 			{{.locale.Tr "settings.password"}}
 		</h4>
@@ -159,7 +156,6 @@
 			</form>
 		</div>
 	</div>
-</div>
 
 <div class="ui gitea-confirm-modal delete modal" id="delete-email">
 	<div class="header">
@@ -183,4 +179,4 @@
 	{{template "base/modal_actions_confirm" .}}
 </div>
 
-{{template "base/footer" .}}
+{{template "user/settings/layout_footer" .}}
diff --git a/templates/user/settings/appearance.tmpl b/templates/user/settings/appearance.tmpl
index c78caedc96..129fca2657 100644
--- a/templates/user/settings/appearance.tmpl
+++ b/templates/user/settings/appearance.tmpl
@@ -1,8 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content user settings sshkeys">
-	{{template "user/settings/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "user/settings/layout_head" (dict "ctxData" . "pageClass" "user settings sshkeys")}}
+	<div class="user-setting-content">
 
 		<!-- Theme -->
 		<h4 class="ui top attached header">
@@ -170,6 +167,4 @@
 			</form>
 		</div>
 	</div>
-</div>
-
-{{template "base/footer" .}}
+{{template "user/settings/layout_footer" .}}
diff --git a/templates/user/settings/applications.tmpl b/templates/user/settings/applications.tmpl
index bb0fba8f4f..c8789bbe82 100644
--- a/templates/user/settings/applications.tmpl
+++ b/templates/user/settings/applications.tmpl
@@ -1,8 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content user settings applications">
-	{{template "user/settings/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "user/settings/layout_head" (dict "ctxData" . "pageClass" "user settings applications")}}
+	<div class="user-setting-content">
 		<h4 class="ui top attached header">
 			{{.locale.Tr "settings.manage_access_token"}}
 		</h4>
@@ -266,7 +263,6 @@
 			{{template "user/settings/applications_oauth2" .}}
 		{{end}}
 	</div>
-</div>
 
 <div class="ui gitea-confirm-modal delete modal" id="delete-token">
 	<div class="header">
@@ -289,5 +285,4 @@
 	</div>
 </div>
 
-
-{{template "base/footer" .}}
+{{template "user/settings/layout_footer" .}}
diff --git a/templates/user/settings/applications_oauth2_edit.tmpl b/templates/user/settings/applications_oauth2_edit.tmpl
index d2ca83b90d..2858ecd0ee 100644
--- a/templates/user/settings/applications_oauth2_edit.tmpl
+++ b/templates/user/settings/applications_oauth2_edit.tmpl
@@ -1,8 +1,6 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content user settings applications">
-	{{template "user/settings/navbar" .}}
+{{template "user/settings/layout_head" (dict "ctxData" . "pageClass" "user settings applications")}}
+	<div class="user-setting-content">
 
-	{{template "user/settings/applications_oauth2_edit_form" .}}
-</div>
-
-{{template "base/footer" .}}
+		{{template "user/settings/applications_oauth2_edit_form" .}}
+	</div>
+{{template "user/settings/layout_footer" .}}
diff --git a/templates/user/settings/applications_oauth2_edit_form.tmpl b/templates/user/settings/applications_oauth2_edit_form.tmpl
index 9d7273fd6d..1a8336b150 100644
--- a/templates/user/settings/applications_oauth2_edit_form.tmpl
+++ b/templates/user/settings/applications_oauth2_edit_form.tmpl
@@ -1,5 +1,4 @@
 <div class="ui container">
-	{{template "base/alert" .}}
 	<h4 class="ui top attached header">
 		{{.locale.Tr "settings.edit_oauth2_application"}}
 	</h4>
diff --git a/templates/user/settings/hook_new.tmpl b/templates/user/settings/hook_new.tmpl
index 20aaf65f62..ac32cdd8c8 100644
--- a/templates/user/settings/hook_new.tmpl
+++ b/templates/user/settings/hook_new.tmpl
@@ -1,10 +1,7 @@
-{{template "base/head" .}}
-<div class="page-content user  settings new webhook">
-	{{template "user/settings/navbar" .}}
-	<div class="ui container">
-		<div class="twelve wide column content">
-			{{template "base/alert" .}}
-			<h4 class="ui top attached header">
+{{template "user/settings/layout_head" (dict "ctxData" . "pageClass" "user settings new webhook")}}
+	<div class="user-setting-content">
+		<div class="user-setting-content">
+				<h4 class="ui top attached header">
 				{{if .PageIsSettingsHooksNew}}{{.locale.Tr "repo.settings.add_webhook"}}{{else}}{{.locale.Tr "repo.settings.update_webhook"}}{{end}}
 				<div class="ui right">
 					{{if eq .HookType "gitea"}}
@@ -49,5 +46,4 @@
 			{{template "repo/settings/webhook/history" .}}
 		</div>
 	</div>
-</div>
-{{template "base/footer" .}}
+{{template "user/settings/layout_footer" .}}
diff --git a/templates/user/settings/hooks.tmpl b/templates/user/settings/hooks.tmpl
index 02bfa8a4e6..477c333220 100644
--- a/templates/user/settings/hooks.tmpl
+++ b/templates/user/settings/hooks.tmpl
@@ -1,8 +1,5 @@
-{{template "base/head" .}}
-<div class="page-content user settings webhooks">
-	{{template "user/settings/navbar" .}}
-	<div class="ui container">
+{{template "user/settings/layout_head" (dict "ctxData" . "pageClass" "user settings webhooks")}}
+	<div class="user-setting-content">
 		{{template "repo/settings/webhook/list" .}}
 	</div>
-</div>
-{{template "base/footer" .}}
+{{template "user/settings/layout_footer" .}}
diff --git a/templates/user/settings/keys.tmpl b/templates/user/settings/keys.tmpl
index 9a4be2b2c2..93037e7e28 100644
--- a/templates/user/settings/keys.tmpl
+++ b/templates/user/settings/keys.tmpl
@@ -1,12 +1,7 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content user settings sshkeys">
-	{{template "user/settings/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "user/settings/layout_head" (dict "ctxData" . "pageClass" "user settings sshkeys")}}
+	<div class="user-setting-content">
 		{{template "user/settings/keys_ssh" .}}
 		{{template "user/settings/keys_principal" .}}
 		{{template "user/settings/keys_gpg" .}}
 	</div>
-</div>
-
-{{template "base/footer" .}}
+{{template "user/settings/layout_footer" .}}
diff --git a/templates/user/settings/layout_footer.tmpl b/templates/user/settings/layout_footer.tmpl
new file mode 100644
index 0000000000..46120d5102
--- /dev/null
+++ b/templates/user/settings/layout_footer.tmpl
@@ -0,0 +1,11 @@
+{{if false}}{{/* to make html structure "likely" complete to prevent IDE warnings */}}
+<div class="page-content">
+	<div class="user-layout-right">
+		<div>
+		{{/* block: user-setting-content */}}
+{{end}}
+
+		</div>
+	</div>
+</div>
+{{template "base/footer" .}}
diff --git a/templates/user/settings/layout_head.tmpl b/templates/user/settings/layout_head.tmpl
new file mode 100644
index 0000000000..26d1653948
--- /dev/null
+++ b/templates/user/settings/layout_head.tmpl
@@ -0,0 +1,13 @@
+{{template "base/head" .ctxData}}
+<div role="main" aria-label="{{.ctxData.Title}}" class="page-content {{.pageClass}}">
+	<div class="ui container stackable grid">
+		{{template "user/settings/navbar" .ctxData}}
+		<div class="twelve wide column">
+			{{template "base/alert" .ctxData}}
+			{{/* block: user-setting-content */}}
+
+{{if false}}{{/* to make html structure "likely" complete to prevent IDE warnings */}}
+		</div>
+	</div>
+</div>
+{{end}}
diff --git a/templates/user/settings/navbar.tmpl b/templates/user/settings/navbar.tmpl
index 4afe2173c2..27ec73c34f 100644
--- a/templates/user/settings/navbar.tmpl
+++ b/templates/user/settings/navbar.tmpl
@@ -1,5 +1,6 @@
-<div class="ui secondary pointing tabular top attached borderless menu stackable new-menu navbar">
-	<div class="new-menu-inner">
+<div class="four wide column">
+	<div class="ui fluid vertical menu">
+		<div class="header item">{{.locale.Tr "org.settings"}}</div>
 		<a class="{{if .PageIsSettingsProfile}}active {{end}}item" href="{{AppSubUrl}}/user/settings">
 			{{.locale.Tr "settings.profile"}}
 		</a>
diff --git a/templates/user/settings/organization.tmpl b/templates/user/settings/organization.tmpl
index 97b5a6a0bc..088878e9cd 100644
--- a/templates/user/settings/organization.tmpl
+++ b/templates/user/settings/organization.tmpl
@@ -1,8 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content user settings organization">
-	{{template "user/settings/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "user/settings/layout_head" (dict "ctxData" . "pageClass" "user settings organization")}}
+	<div class="user-setting-content">
 		<h4 class="ui top attached header">
 			{{.locale.Tr "settings.orgs"}}
 			{{if .SignedUser.CanCreateOrganization}}
@@ -39,7 +36,7 @@
 			{{end}}
 		</div>
 	</div>
-</div>
+
 <div class="ui gitea-confirm-modal delete modal" id="leave-organization">
 	<div class="header">
 		{{$.locale.Tr "org.members.leave"}}
@@ -49,4 +46,5 @@
 	</div>
 	{{template "base/modal_actions_confirm" .}}
 </div>
-{{template "base/footer" .}}
+
+{{template "user/settings/layout_footer" .}}
diff --git a/templates/user/settings/packages.tmpl b/templates/user/settings/packages.tmpl
index 1faddab5de..a35597335b 100644
--- a/templates/user/settings/packages.tmpl
+++ b/templates/user/settings/packages.tmpl
@@ -1,8 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content user settings packages">
-	{{template "user/settings/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "user/settings/layout_head" (dict "ctxData" . "pageClass" "user settings packages")}}
+	<div class="user-setting-content">
 		{{template "package/shared/cleanup_rules/list" .}}
 		{{template "package/shared/cargo" .}}
 
@@ -25,4 +22,4 @@
 		</div>
 	</div>
 </div>
-{{template "base/footer" .}}
+{{template "user/settings/layout_footer" .}}
diff --git a/templates/user/settings/packages_cleanup_rules_edit.tmpl b/templates/user/settings/packages_cleanup_rules_edit.tmpl
index 114c825a48..522b524882 100644
--- a/templates/user/settings/packages_cleanup_rules_edit.tmpl
+++ b/templates/user/settings/packages_cleanup_rules_edit.tmpl
@@ -1,9 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content user settings packages">
-	{{template "user/settings/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "user/settings/layout_head" (dict "ctxData" . "pageClass" "user settings packages")}}
+	<div class="user-setting-content">
 		{{template "package/shared/cleanup_rules/edit" .}}
 	</div>
-</div>
-{{template "base/footer" .}}
+{{template "user/settings/layout_footer" .}}
diff --git a/templates/user/settings/packages_cleanup_rules_preview.tmpl b/templates/user/settings/packages_cleanup_rules_preview.tmpl
index d37e5148b3..d99aee4b9a 100644
--- a/templates/user/settings/packages_cleanup_rules_preview.tmpl
+++ b/templates/user/settings/packages_cleanup_rules_preview.tmpl
@@ -1,8 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content user settings packages admin">
-	{{template "user/settings/navbar" .}}
-	<div class="ui container">
+{{template "user/settings/layout_head" (dict "ctxData" . "pageClass" "user packages admin")}}
+	<div class="user-setting-content">
 		{{template "package/shared/cleanup_rules/preview" .}}
 	</div>
-</div>
-{{template "base/footer" .}}
+{{template "user/settings/layout_footer" .}}
diff --git a/templates/user/settings/profile.tmpl b/templates/user/settings/profile.tmpl
index 7ef9a955a7..92fbf5814c 100644
--- a/templates/user/settings/profile.tmpl
+++ b/templates/user/settings/profile.tmpl
@@ -1,8 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content user settings profile">
-	{{template "user/settings/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "user/settings/layout_head" (dict "ctxData" . "pageClass" "user settings profile")}}
+	<div class="user-setting-content">
 		<h4 class="ui top attached header">
 			{{.locale.Tr "settings.public_profile"}}
 		</h4>
@@ -133,5 +130,4 @@
 			</form>
 		</div>
 	</div>
-</div>
-{{template "base/footer" .}}
+{{template "user/settings/layout_footer" .}}
diff --git a/templates/user/settings/repos.tmpl b/templates/user/settings/repos.tmpl
index 7f0b106614..5e11f58988 100644
--- a/templates/user/settings/repos.tmpl
+++ b/templates/user/settings/repos.tmpl
@@ -1,8 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content user settings repos">
-	{{template "user/settings/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "user/settings/layout_head" (dict "ctxData" . "pageClass" "user settings repos")}}
+	<div class="user-setting-content">
 		<h4 class="ui top attached header">
 			{{.locale.Tr "settings.repos"}}
 		</h4>
@@ -127,7 +124,6 @@
 			{{end}}
 		</div>
 	</div>
-</div>
 
 <div class="ui gitea-confirm-modal delete modal">
 	<div class="header">
@@ -139,4 +135,5 @@
 	</div>
 	{{template "base/modal_actions_confirm" .}}
 </div>
-{{template "base/footer" .}}
+
+{{template "user/settings/layout_footer" .}}
diff --git a/templates/user/settings/secrets.tmpl b/templates/user/settings/secrets.tmpl
index 1a6875acef..a831453f2a 100644
--- a/templates/user/settings/secrets.tmpl
+++ b/templates/user/settings/secrets.tmpl
@@ -1,10 +1,6 @@
-{{template "base/head" .}}
-<div class="page-content user settings secrets">
-	{{template "user/settings/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "user/settings/layout_head" (dict "ctxData" . "pageClass" "user settings secrets")}}
+	<div class="user-setting-content">
 		{{template "shared/secrets/add_list" .}}
 	</div>
-</div>
 
-{{template "base/footer" .}}
+{{template "user/settings/layout_footer" .}}
diff --git a/templates/user/settings/security/security.tmpl b/templates/user/settings/security/security.tmpl
index d412a4f4e8..aee0456b8f 100644
--- a/templates/user/settings/security/security.tmpl
+++ b/templates/user/settings/security/security.tmpl
@@ -1,8 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content user settings security">
-	{{template "user/settings/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "user/settings/layout_head" (dict "ctxData" . "pageClass" "user settings security")}}
+	<div class="user-setting-content">
 		{{template "user/settings/security/twofa" .}}
 		{{template "user/settings/security/webauthn" .}}
 		{{template "user/settings/security/accountlinks" .}}
@@ -10,6 +7,5 @@
 		{{template "user/settings/security/openid" .}}
 		{{end}}
 	</div>
-</div>
 
-{{template "base/footer" .}}
+{{template "user/settings/layout_footer" .}}
diff --git a/templates/user/settings/security/twofa_enroll.tmpl b/templates/user/settings/security/twofa_enroll.tmpl
index b7e1f4b7cc..0ff0beb1bc 100644
--- a/templates/user/settings/security/twofa_enroll.tmpl
+++ b/templates/user/settings/security/twofa_enroll.tmpl
@@ -1,8 +1,5 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content user settings twofa">
-	{{template "user/settings/navbar" .}}
-	<div class="ui container">
-		{{template "base/alert" .}}
+{{template "user/settings/layout_head" (dict "ctxData" . "pageClass" "user settings twofa")}}
+	<div class="user-setting-content">
 		<h4 class="ui top attached header">
 			{{.locale.Tr "settings.twofa_enroll"}}
 		</h4>
@@ -24,6 +21,5 @@
 			</form>
 		</div>
 	</div>
-</div>
 
-{{template "base/footer" .}}
+{{template "user/settings/layout_footer" .}}