diff --git a/templates/admin/notice.tmpl b/templates/admin/notice.tmpl
index 5cd617a0b5..ac5851f853 100644
--- a/templates/admin/notice.tmpl
+++ b/templates/admin/notice.tmpl
@@ -17,7 +17,7 @@
 			<tbody>
 				{{range .Notices}}
 					<tr>
-						<td><div class="ui checkbox gt-db" data-id="{{.ID}}"><input type="checkbox"></div></td>
+						<td><div class="ui checkbox gt-df" data-id="{{.ID}}"><input type="checkbox"></div></td>
 						<td>{{.ID}}</td>
 						<td>{{$.locale.Tr .TrStr}}</td>
 						<td class="view-detail auto-ellipsis" style="width: 80%;"><span class="notice-description">{{.Description}}</span></td>
diff --git a/templates/admin/stacktrace-row.tmpl b/templates/admin/stacktrace-row.tmpl
index 15e51e4aca..b0e282bcc7 100644
--- a/templates/admin/stacktrace-row.tmpl
+++ b/templates/admin/stacktrace-row.tmpl
@@ -27,7 +27,7 @@
 				<div class="item">
 					<details>
 						<summary>
-							<div class="gt-dif content">
+							<div class="flex-text-inline">
 								<div class="header gt-ml-3">
 									<span class="icon gt-mr-3">{{svg "octicon-code" 16}}</span>{{.Description}}{{if gt .Count 1}} * {{.Count}}{{end}}
 								</div>
diff --git a/templates/org/home.tmpl b/templates/org/home.tmpl
index 0bd744d2b8..72be948650 100644
--- a/templates/org/home.tmpl
+++ b/templates/org/home.tmpl
@@ -57,7 +57,7 @@
 				{{if .NumMembers}}
 					<h4 class="ui top attached header gt-df">
 						<strong class="gt-f1">{{.locale.Tr "org.members"}}</strong>
-						<a class="text grey gt-dif gt-ac" href="{{.OrgLink}}/members"><span>{{.NumMembers}}</span> {{svg "octicon-chevron-right"}}</a>
+						<a class="text grey gt-df gt-ac" href="{{.OrgLink}}/members"><span>{{.NumMembers}}</span> {{svg "octicon-chevron-right"}}</a>
 					</h4>
 					<div class="ui attached segment members">
 						{{$isMember := .IsOrganizationMember}}
@@ -71,7 +71,7 @@
 				{{if .IsOrganizationMember}}
 					<div class="ui top attached header gt-df">
 						<strong class="gt-f1">{{.locale.Tr "org.teams"}}</strong>
-						<a class="text grey gt-dif gt-ac" href="{{.OrgLink}}/teams"><span>{{.Org.NumTeams}}</span> {{svg "octicon-chevron-right"}}</a>
+						<a class="text grey gt-df gt-ac" href="{{.OrgLink}}/teams"><span>{{.Org.NumTeams}}</span> {{svg "octicon-chevron-right"}}</a>
 					</div>
 					<div class="ui attached table segment teams">
 						{{range .Teams}}
diff --git a/templates/org/team/repositories.tmpl b/templates/org/team/repositories.tmpl
index ab5f6c6e75..65eb64cb54 100644
--- a/templates/org/team/repositories.tmpl
+++ b/templates/org/team/repositories.tmpl
@@ -10,7 +10,7 @@
 				{{$canAddRemove := and $.IsOrganizationOwner (not $.Team.IncludesAllRepositories)}}
 				{{if $canAddRemove}}
 					<div class="ui attached segment gt-df gt-fw gt-gap-3">
-						<form class="ui form ignore-dirty gt-f1 gt-dif" action="{{$.OrgLink}}/teams/{{$.Team.LowerName | PathEscape}}/action/repo/add" method="post">
+						<form class="ui form ignore-dirty gt-f1 gt-df" action="{{$.OrgLink}}/teams/{{$.Team.LowerName | PathEscape}}/action/repo/add" method="post">
 							{{.CsrfTokenHtml}}
 							<div id="search-repo-box" data-uid="{{.Org.ID}}" class="ui search">
 								<div class="ui input">
diff --git a/templates/repo/home.tmpl b/templates/repo/home.tmpl
index 7eb4ba4636..202c8b8ff3 100644
--- a/templates/repo/home.tmpl
+++ b/templates/repo/home.tmpl
@@ -18,7 +18,7 @@
 							<div class="ui small action input{{if .CodeIndexerUnavailable}} disabled left icon{{end}}"{{if .CodeIndexerUnavailable}} data-tooltip-content="{{.locale.Tr "repo.search.code_search_unavailable"}}"{{end}}>
 								<input name="q" value="{{.Keyword}}"{{if .CodeIndexerUnavailable}} disabled{{end}} placeholder="{{.locale.Tr "repo.search.search_repo"}}">
 								{{if .CodeIndexerUnavailable}}
-									<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-alert"}}</i>
+									<i class="icon">{{svg "octicon-alert"}}</i>
 								{{end}}
 								<button class="ui small icon button"{{if .CodeIndexerUnavailable}} disabled{{end}} type="submit">
 									{{svg "octicon-search"}}
diff --git a/templates/repo/issue/filters.tmpl b/templates/repo/issue/filters.tmpl
index 799509328f..b482e471e1 100644
--- a/templates/repo/issue/filters.tmpl
+++ b/templates/repo/issue/filters.tmpl
@@ -15,7 +15,7 @@
 				</span>
 				<div class="menu">
 					<div class="ui icon search input">
-						<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-search" 16}}</i>
+						<i class="icon">{{svg "octicon-search" 16}}</i>
 						<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_label"}}">
 					</div>
 					<span class="info">{{.locale.Tr "repo.issues.filter_label_exclude" | Safe}}</span>
@@ -43,7 +43,7 @@
 				</span>
 				<div class="menu">
 					<div class="ui icon search input">
-						<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-search" 16}}</i>
+						<i class="icon">{{svg "octicon-search" 16}}</i>
 						<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_milestone"}}">
 					</div>
 					<div class="divider"></div>
@@ -81,7 +81,7 @@
 				</span>
 				<div class="menu">
 					<div class="ui icon search input">
-						<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-search" 16}}</i>
+						<i class="icon">{{svg "octicon-search" 16}}</i>
 						<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_project"}}">
 					</div>
 					<a class="{{if not .ProjectID}}active selected {{end}}item" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{.SelectLabels}}&assignee={{$.AssigneeID}}&poster={{$.PosterID}}">{{.locale.Tr "repo.issues.filter_project_all"}}</a>
@@ -123,7 +123,7 @@
 				</span>
 				<div class="menu">
 					<div class="ui icon search input">
-						<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-search" 16}}</i>
+						<i class="icon">{{svg "octicon-search" 16}}</i>
 						<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_poster"}}">
 					</div>
 					<a class="item" data-value="0">{{.locale.Tr "repo.issues.filter_poster_no_select"}}</a>
@@ -138,7 +138,7 @@
 				</span>
 				<div class="menu">
 					<div class="ui icon search input">
-						<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-search" 16}}</i>
+						<i class="icon">{{svg "octicon-search" 16}}</i>
 						<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_assignee"}}">
 					</div>
 					<a class="{{if not .AssigneeID}}active selected {{end}}item" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{.SelectLabels}}&milestone={{$.MilestoneID}}&project={{$.ProjectID}}&poster={{$.PosterID}}">{{.locale.Tr "repo.issues.filter_assginee_no_select"}}</a>
diff --git a/templates/repo/issue/labels/labels_selector_field.tmpl b/templates/repo/issue/labels/labels_selector_field.tmpl
index c509cf37c6..bdec96e6ac 100644
--- a/templates/repo/issue/labels/labels_selector_field.tmpl
+++ b/templates/repo/issue/labels/labels_selector_field.tmpl
@@ -8,7 +8,7 @@
 	<div class="filter menu" {{if .Issue}}data-action="update" data-issue-id="{{$.Issue.ID}}" data-update-url="{{$.RepoLink}}/issues/labels"{{else}}data-id="#label_ids"{{end}}>
 		{{if or .Labels .OrgLabels}}
 			<div class="ui icon search input">
-				<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-search" 16}}</i>
+				<i class="icon">{{svg "octicon-search" 16}}</i>
 				<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_labels"}}">
 			</div>
 		{{end}}
diff --git a/templates/repo/issue/milestone/select_menu.tmpl b/templates/repo/issue/milestone/select_menu.tmpl
index 497313e75d..df9b324465 100644
--- a/templates/repo/issue/milestone/select_menu.tmpl
+++ b/templates/repo/issue/milestone/select_menu.tmpl
@@ -1,6 +1,6 @@
 {{if or .OpenMilestones .ClosedMilestones}}
 	<div class="ui icon search input">
-		<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-search" 16}}</i>
+		<i class="icon">{{svg "octicon-search" 16}}</i>
 		<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_milestones"}}">
 	</div>
 	<div class="divider"></div>
diff --git a/templates/repo/issue/new_form.tmpl b/templates/repo/issue/new_form.tmpl
index 272693e63e..ae43d70c4a 100644
--- a/templates/repo/issue/new_form.tmpl
+++ b/templates/repo/issue/new_form.tmpl
@@ -95,7 +95,7 @@
 			<div class="menu">
 				{{if or .OpenProjects .ClosedProjects}}
 				<div class="ui icon search input">
-					<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-search" 16}}</i>
+					<i class="icon">{{svg "octicon-search" 16}}</i>
 					<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_projects"}}">
 				</div>
 				{{end}}
@@ -152,7 +152,7 @@
 				</span>
 				<div class="filter menu" data-id="#assignee_ids">
 					<div class="ui icon search input">
-						<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-search" 16}}</i>
+						<i class="icon">{{svg "octicon-search" 16}}</i>
 						<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_assignees"}}">
 					</div>
 					<div class="no-select item">{{.locale.Tr "repo.issues.new.clear_assignees"}}</div>
diff --git a/templates/repo/issue/view_content/pull_merge_instruction.tmpl b/templates/repo/issue/view_content/pull_merge_instruction.tmpl
index d2b3913274..71e3fc12bc 100644
--- a/templates/repo/issue/view_content/pull_merge_instruction.tmpl
+++ b/templates/repo/issue/view_content/pull_merge_instruction.tmpl
@@ -1,7 +1,7 @@
 <div class="divider"></div>
 <div class="instruct-toggle"> {{$.locale.Tr "repo.pulls.merge_instruction_hint" | Safe}} </div>
 <div class="instruct-content gt-mt-3 gt-hidden">
-	<div><h3 class="gt-di">{{$.locale.Tr "step1"}} </h3>{{$.locale.Tr "repo.pulls.merge_instruction_step1_desc"}}</div>
+	<div><h3 class="gt-dib">{{$.locale.Tr "step1"}}</h3> {{$.locale.Tr "repo.pulls.merge_instruction_step1_desc"}}</div>
 	<div class="ui secondary segment">
 		{{if eq $.Issue.PullRequest.Flow 0}}
 		<div>git checkout -b {{if ne $.Issue.PullRequest.HeadRepo.ID $.Issue.PullRequest.BaseRepo.ID}}{{$.Issue.PullRequest.HeadRepo.OwnerName}}-{{end}}{{$.Issue.PullRequest.HeadBranch}} {{$.Issue.PullRequest.BaseBranch}}</div>
@@ -10,7 +10,7 @@
 		<div>git fetch origin {{$.Issue.PullRequest.GetGitRefName}}:{{$.Issue.PullRequest.HeadBranch}}</div>
 		{{end}}
 	</div>
-	<div><h3 class="gt-di">{{$.locale.Tr "step2"}} </h3>{{$.locale.Tr "repo.pulls.merge_instruction_step2_desc"}}</div>
+	<div><h3 class="gt-dib">{{$.locale.Tr "step2"}}</h3> {{$.locale.Tr "repo.pulls.merge_instruction_step2_desc"}}</div>
 	<div class="ui secondary segment">
 		<div>git checkout {{$.Issue.PullRequest.BaseBranch}}</div>
 		<div>git merge --no-ff {{if ne $.Issue.PullRequest.HeadRepo.ID $.Issue.PullRequest.BaseRepo.ID}}{{$.Issue.PullRequest.HeadRepo.OwnerName}}-{{end}}{{$.Issue.PullRequest.HeadBranch}}</div>
diff --git a/templates/repo/issue/view_content/sidebar.tmpl b/templates/repo/issue/view_content/sidebar.tmpl
index 70aa8e53c0..c150a9cdcd 100644
--- a/templates/repo/issue/view_content/sidebar.tmpl
+++ b/templates/repo/issue/view_content/sidebar.tmpl
@@ -12,7 +12,7 @@
 			<div class="filter menu" data-action="update" data-issue-id="{{$.Issue.ID}}" data-update-url="{{$.RepoLink}}/issues/request_review">
 				{{if .Reviewers}}
 					<div class="ui icon search input">
-						<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-search" 16}}</i>
+						<i class="icon">{{svg "octicon-search" 16}}</i>
 						<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_reviewers"}}">
 					</div>
 				{{end}}
@@ -162,7 +162,7 @@
 			<div class="menu" data-action="update" data-issue-id="{{$.Issue.ID}}" data-update-url="{{$.RepoLink}}/issues/projects">
 				{{if or .OpenProjects .ClosedProjects}}
 				<div class="ui icon search input">
-					<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-search" 16}}</i>
+					<i class="icon">{{svg "octicon-search" 16}}</i>
 					<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_projects"}}">
 				</div>
 				{{end}}
@@ -215,7 +215,7 @@
 		</a>
 		<div class="filter menu" data-action="update" data-issue-id="{{$.Issue.ID}}" data-update-url="{{$.RepoLink}}/issues/assignee">
 			<div class="ui icon search input">
-				<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-search" 16}}</i>
+				<i class="icon">{{svg "octicon-search" 16}}</i>
 				<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_assignees"}}">
 			</div>
 			<div class="no-select item">{{.locale.Tr "repo.issues.new.clear_assignees"}}</div>
diff --git a/templates/repo/release/list.tmpl b/templates/repo/release/list.tmpl
index f326fb3272..c7f50c611a 100644
--- a/templates/repo/release/list.tmpl
+++ b/templates/repo/release/list.tmpl
@@ -8,10 +8,10 @@
 			{{range $idx, $release := .Releases}}
 				<li class="ui grid">
 					<div class="ui four wide column meta">
-							<a class="gt-db muted" href="{{if not .Sha1}}#{{else}}{{$.RepoLink}}/src/tag/{{.TagName | PathEscapeSegments}}{{end}}" rel="nofollow">{{svg "octicon-tag" 16 "gt-mr-2"}}{{.TagName}}</a>
+							<a class="muted" href="{{if not .Sha1}}#{{else}}{{$.RepoLink}}/src/tag/{{.TagName | PathEscapeSegments}}{{end}}" rel="nofollow">{{svg "octicon-tag" 16 "gt-mr-2"}}{{.TagName}}</a>
 							{{if .Sha1}}
-								<a class="gt-mono muted gt-db gt-mt-4 gt-pt-1" href="{{$.RepoLink}}/src/commit/{{.Sha1}}" rel="nofollow">{{svg "octicon-git-commit" 16 "gt-mr-2"}}{{ShortSha .Sha1}}</a>
-								{{template "repo/branch_dropdown" dict "root" $ "release" . "ContainerClasses" "gt-mt-4"}}
+								<a class="muted gt-mono" href="{{$.RepoLink}}/src/commit/{{.Sha1}}" rel="nofollow">{{svg "octicon-git-commit" 16 "gt-mr-2"}}{{ShortSha .Sha1}}</a>
+								{{template "repo/branch_dropdown" dict "root" $ "release" .}}
 							{{end}}
 					</div>
 					<div class="ui twelve wide column detail">
diff --git a/templates/repo/settings/options.tmpl b/templates/repo/settings/options.tmpl
index 48d918fdc6..012368fb94 100644
--- a/templates/repo/settings/options.tmpl
+++ b/templates/repo/settings/options.tmpl
@@ -116,7 +116,7 @@
 						<tbody>
 							<tr>
 								<td colspan="4">
-									<span class="text red gt-db gt-py-4 gt-border-secondary-bottom">{{$.locale.Tr "repo.settings.mirror_settings.direction.pull"}}: {{$.locale.Tr "error.occurred"}}</span>
+									<div class="text red gt-py-4 gt-border-secondary-bottom">{{$.locale.Tr "repo.settings.mirror_settings.direction.pull"}}: {{$.locale.Tr "error.occurred"}}</div>
 								</td>
 							</tr>
 						</tbody>
diff --git a/templates/user/settings/applications.tmpl b/templates/user/settings/applications.tmpl
index a32d284e07..f142af3876 100644
--- a/templates/user/settings/applications.tmpl
+++ b/templates/user/settings/applications.tmpl
@@ -86,13 +86,13 @@
 						></scoped-access-token-selector>
 					</div>
 				</details>
-				<div id="scoped-access-warning" class="ui warning message center gt-db gt-hidden">
-					{{.locale.Tr "settings.at_least_one_permission"}}
-				</div>
 				<button id="scoped-access-submit" class="ui green button">
 					{{.locale.Tr "settings.generate_token"}}
 				</button>
-			</form>
+			</form>{{/* Fomantic ".ui.form .warning.message" is hidden by default, so put the warning message out of the form*/}}
+			<div id="scoped-access-warning" class="ui warning message center gt-hidden">
+				{{.locale.Tr "settings.at_least_one_permission"}}
+			</div>
 		</div>
 
 		{{if .EnableOAuth2}}
diff --git a/web_src/css/helpers.css b/web_src/css/helpers.css
index 17a89ebfb7..bd1fb992ac 100644
--- a/web_src/css/helpers.css
+++ b/web_src/css/helpers.css
@@ -2,14 +2,10 @@
 Gitea's tailwind-style CSS helper classes have `gt-` prefix.
 Gitea's private styles use `g-` prefix.
 */
-.gt-db { display: block !important; }
 .gt-df { display: flex !important; }
-.gt-di { display: inline !important; }
-.gt-dif { display: inline-flex !important; }
 .gt-dib { display: inline-block !important; }
 .gt-ac { align-items: center !important; }
 .gt-jc { justify-content: center !important; }
-.gt-js { justify-content: flex-start !important; }
 .gt-je { justify-content: flex-end !important; }
 .gt-sb { justify-content: space-between !important; }
 .gt-fc { flex-direction: column !important; }
diff --git a/web_src/css/repo/release-tag.css b/web_src/css/repo/release-tag.css
index 33ff2cddd9..70925f5a0e 100644
--- a/web_src/css/repo/release-tag.css
+++ b/web_src/css/repo/release-tag.css
@@ -23,8 +23,11 @@
 
 .repository.releases #release-list > li .meta {
   margin-top: 4px;
-  text-align: right;
   position: relative;
+  text-align: right;
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
 }
 
 .repository.releases #release-list > li .detail {
diff --git a/web_src/js/components/DashboardRepoList.vue b/web_src/js/components/DashboardRepoList.vue
index bc6cc6a2c4..f1ea937f05 100644
--- a/web_src/js/components/DashboardRepoList.vue
+++ b/web_src/js/components/DashboardRepoList.vue
@@ -17,7 +17,7 @@
       <div class="ui attached segment repos-search">
         <div class="ui fluid right action left icon input" :class="{loading: isLoading}">
           <input type="search" spellcheck="false" maxlength="255" @input="changeReposFilter(reposFilter)" v-model="searchQuery" ref="search" @keydown="reposFilterKeyControl" :placeholder="textSearchRepos">
-          <i class="icon gt-df gt-ac gt-jc"><svg-icon name="octicon-search" :size="16"/></i>
+          <i class="icon"><svg-icon name="octicon-search" :size="16"/></i>
           <div class="ui dropdown icon button" :title="textFilter">
             <svg-icon name="octicon-filter" :size="16"/>
             <div class="menu">