diff --git a/docs/content/doc/contributing/guidelines-frontend.en-us.md b/docs/content/doc/contributing/guidelines-frontend.en-us.md
index 36c88739ecb4..bde7d3151074 100644
--- a/docs/content/doc/contributing/guidelines-frontend.en-us.md
+++ b/docs/content/doc/contributing/guidelines-frontend.en-us.md
@@ -49,6 +49,7 @@ We recommend [Google HTML/CSS Style Guide](https://google.github.io/styleguide/h
 9. Avoid unnecessary `!important` in CSS, add comments to explain why it's necessary if it can't be avoided.
 10. Avoid mixing different events in one event listener, prefer to use individual event listeners for every event.
 11. Custom event names are recommended to use `ce-` prefix.
+12. Gitea's tailwind-style CSS classes use `gt-` prefix (`gt-relative`), while Gitea's own private framework-level CSS classes use `g-` prefix (`g-modal-confirm`).
 
 ### Accessibility / ARIA
 
diff --git a/templates/admin/auth/edit.tmpl b/templates/admin/auth/edit.tmpl
index c39725699c40..0aed59ffabbd 100644
--- a/templates/admin/auth/edit.tmpl
+++ b/templates/admin/auth/edit.tmpl
@@ -436,7 +436,7 @@
 		</div>
 	</div>
 
-<div class="ui gitea-confirm-modal delete modal">
+<div class="ui g-modal-confirm delete modal">
 	<div class="header">
 		{{svg "octicon-trash"}}
 		{{.locale.Tr "admin.auths.delete_auth_title"}}
diff --git a/templates/admin/emails/list.tmpl b/templates/admin/emails/list.tmpl
index 05c6aa66b4e9..1da40cbf29ac 100644
--- a/templates/admin/emails/list.tmpl
+++ b/templates/admin/emails/list.tmpl
@@ -70,7 +70,7 @@
 
 		{{template "base/paginate" .}}
 
-		<div class="ui gitea-confirm-modal modal" id="change-email-modal">
+		<div class="ui g-modal-confirm modal" id="change-email-modal">
 			<div class="header">
 				{{.locale.Tr "admin.emails.change_email_header"}}
 			</div>
diff --git a/templates/admin/monitor.tmpl b/templates/admin/monitor.tmpl
index 4b9e51503c65..1ab6b75a1e1e 100644
--- a/templates/admin/monitor.tmpl
+++ b/templates/admin/monitor.tmpl
@@ -34,7 +34,7 @@
 		{{template "admin/process" .}}
 	</div>
 
-<div class="ui gitea-confirm-modal delete modal">
+<div class="ui g-modal-confirm delete modal">
 	<div class="header">
 		{{.locale.Tr "admin.monitor.process.cancel"}}
 	</div>
diff --git a/templates/admin/packages/list.tmpl b/templates/admin/packages/list.tmpl
index 48046f4296e4..2edcad4b7bbf 100644
--- a/templates/admin/packages/list.tmpl
+++ b/templates/admin/packages/list.tmpl
@@ -76,7 +76,7 @@
 		{{template "base/paginate" .}}
 	</div>
 
-<div class="ui gitea-confirm-modal delete modal">
+<div class="ui g-modal-confirm delete modal">
 	<div class="header">
 		{{svg "octicon-trash"}}
 		{{.locale.Tr "packages.settings.delete"}}
diff --git a/templates/admin/queue.tmpl b/templates/admin/queue.tmpl
index 79b20dc1a47b..d3052c91a937 100644
--- a/templates/admin/queue.tmpl
+++ b/templates/admin/queue.tmpl
@@ -178,7 +178,7 @@
 		</div>
 	</div>
 
-<div class="ui gitea-confirm-modal delete modal">
+<div class="ui g-modal-confirm delete modal">
 	<div class="header">
 		{{.locale.Tr "admin.monitor.queue.pool.cancel"}}
 	</div>
diff --git a/templates/admin/repo/list.tmpl b/templates/admin/repo/list.tmpl
index 06c801774fbf..f9a0a6ef9861 100644
--- a/templates/admin/repo/list.tmpl
+++ b/templates/admin/repo/list.tmpl
@@ -91,7 +91,7 @@
 		{{template "base/paginate" .}}
 	</div>
 
-<div class="ui gitea-confirm-modal delete modal">
+<div class="ui g-modal-confirm delete modal">
 	<div class="header">
 		{{svg "octicon-trash"}}
 		{{.locale.Tr "repo.settings.delete"}}
diff --git a/templates/admin/repo/unadopted.tmpl b/templates/admin/repo/unadopted.tmpl
index fa29cae1feab..3e47447178c9 100644
--- a/templates/admin/repo/unadopted.tmpl
+++ b/templates/admin/repo/unadopted.tmpl
@@ -26,7 +26,7 @@
 									<span class="name">{{$dir}}</span>
 									<div class="right floated content">
 										<button class="ui button submit tiny green adopt show-modal" data-modal="#adopt-unadopted-modal-{{$dirI}}"><span class="icon">{{svg "octicon-plus"}}</span><span class="label">{{$.locale.Tr "repo.adopt_preexisting_label"}}</span></button>
-										<div class="ui gitea-confirm-modal modal" id="adopt-unadopted-modal-{{$dirI}}">
+										<div class="ui g-modal-confirm modal" id="adopt-unadopted-modal-{{$dirI}}">
 											<div class="header">
 												<span class="label">{{$.locale.Tr "repo.adopt_preexisting"}}</span>
 											</div>
@@ -39,20 +39,11 @@
 												<input type="hidden" name="action" value="adopt">
 												<input type="hidden" name="q" value="{{$.Keyword}}">
 												<input type="hidden" name="page" value="{{$.CurrentPage}}">
-												<div class="actions">{{/* TODO: Convert to base/modal_actions_confirm */}}
-													<button class="ui red basic inverted cancel button">
-														{{svg "octicon-trash" 16 "gt-mr-2"}}
-														{{$.locale.Tr "modal.no"}}
-													</button>
-													<button class="ui green basic inverted ok button">
-														{{svg "octicon-check" 16 "gt-mr-2"}}
-														{{$.locale.Tr "modal.yes"}}
-													</button>
-												</div>
+												{{template "base/modal_actions_confirm" (dict "locale" $.locale)}}
 											</form>
 										</div>
 										<button class="ui button submit tiny red delete show-modal" data-modal="#delete-unadopted-modal-{{$dirI}}"><span class="icon">{{svg "octicon-x"}}</span><span class="label">{{$.locale.Tr "repo.delete_preexisting_label"}}</span></button>
-										<div class="ui gitea-confirm-modal modal" id="delete-unadopted-modal-{{$dirI}}">
+										<div class="ui g-modal-confirm modal" id="delete-unadopted-modal-{{$dirI}}">
 											<div class="header">
 												<span class="label">{{$.locale.Tr "repo.delete_preexisting"}}</span>
 											</div>
@@ -65,16 +56,7 @@
 												<input type="hidden" name="action" value="delete">
 												<input type="hidden" name="q" value="{{$.Keyword}}">
 												<input type="hidden" name="page" value="{{$.CurrentPage}}">
-												<div class="actions">{{/* TODO: Convert to base/modal_actions_confirm */}}
-													<button class="ui red basic inverted cancel button">
-														{{svg "octicon-trash" 16 "gt-mr-2"}}
-														{{$.locale.Tr "modal.no"}}
-													</button>
-													<button class="ui green basic inverted ok button">
-														{{svg "octicon-check" 16 "gt-mr-2"}}
-														{{$.locale.Tr "modal.yes"}}
-													</button>
-												</div>
+												{{template "base/modal_actions_confirm" (dict "locale" $.locale "ModalButtonColors" "yellow")}}
 											</form>
 										</div>
 									</div>
diff --git a/templates/admin/stacktrace.tmpl b/templates/admin/stacktrace.tmpl
index 1995404d91a0..2ffb9982f2a4 100644
--- a/templates/admin/stacktrace.tmpl
+++ b/templates/admin/stacktrace.tmpl
@@ -15,7 +15,7 @@
 		</div>
 	</div>
 
-<div class="ui gitea-confirm-modal delete modal">
+<div class="ui g-modal-confirm delete modal">
 	<div class="header">
 		{{.locale.Tr "admin.monitor.process.cancel"}}
 	</div>
diff --git a/templates/admin/user/edit.tmpl b/templates/admin/user/edit.tmpl
index cd3175b493f3..30109cc923a4 100644
--- a/templates/admin/user/edit.tmpl
+++ b/templates/admin/user/edit.tmpl
@@ -192,7 +192,7 @@
 		</div>
 	</div>
 
-<div class="ui gitea-confirm-modal delete modal" id="delete-user-modal">
+<div class="ui g-modal-confirm delete modal" id="delete-user-modal">
 	<div class="header">
 		{{svg "octicon-trash"}}
 		{{.locale.Tr "settings.delete_account_title"}}
diff --git a/templates/base/modal_actions_confirm.tmpl b/templates/base/modal_actions_confirm.tmpl
index 361f214466fd..a39a855b631d 100644
--- a/templates/base/modal_actions_confirm.tmpl
+++ b/templates/base/modal_actions_confirm.tmpl
@@ -1,21 +1,38 @@
 {{/*
 Template Attributes:
 * locale
-* ModalButtonStyle: "yes" (default) or "confirm"
+
+Two buttons (negative, positive):
+* ModalButtonTypes: "yes" (default) or "confirm"
+* ModalButtonColors: "green" (default) / "blue" / "yellow"
 * ModalButtonCancelText
 * ModalButtonOkText
 
+Single danger button (GitHub-like):
+* ModalButtonDangerText "This action will destroy your data"
+
 The ".ok.button" and ".cancel.button" selectors are also used by Fomantic Modal internally
 */}}
 <div class="actions">
-	{{$textNegitive := .locale.Tr "modal.no"}}
-	{{$textPositive := .locale.Tr "modal.yes"}}
-	{{if eq .ModalButtonStyle "confirm"}}
-		{{$textNegitive = .locale.Tr "modal.cancel"}}
-		{{$textPositive = .locale.Tr "modal.confirm"}}
+	{{if .ModalButtonDangerText}}
+		<button class="ui danger red ok button">{{.ModalButtonDangerText}}</button>
+	{{else}}
+		{{$textNegitive := .locale.Tr "modal.no"}}
+		{{$textPositive := .locale.Tr "modal.yes"}}
+		{{if eq .ModalButtonTypes "confirm"}}
+			{{$textNegitive = .locale.Tr "modal.cancel"}}
+			{{$textPositive = .locale.Tr "modal.confirm"}}
+		{{end}}
+		{{if .ModalButtonCancelText}}{{$textNegitive = .ModalButtonCancelText}}{{end}}
+		{{if .ModalButtonOkText}}{{$textPositive = .ModalButtonOkText}}{{end}}
+
+		{{$stylePositive := "green"}}
+		{{if eq .ModalButtonColors "blue"}}
+			{{$stylePositive = "blue"}}
+		{{else if eq .ModalButtonColors "yellow"}}
+			{{$stylePositive = "yellow"}}
+		{{end}}
+		<button class="ui secondary basic cancel button">{{svg "octicon-x"}} {{$textNegitive}}</button>
+		<button class="ui {{$stylePositive}} ok button">{{svg "octicon-check"}} {{$textPositive}}</button>
 	{{end}}
-	{{if .ModalButtonCancelText}}{{$textNegitive = .ModalButtonCancelText}}{{end}}
-	{{if .ModalButtonOkText}}{{$textPositive = .ModalButtonOkText}}{{end}}
-	<button class="ui red cancel button">{{svg "octicon-x"}} {{$textNegitive}}</button>
-	<button class="ui green ok button">{{svg "octicon-check"}} {{$textPositive}}</button>
 </div>
diff --git a/templates/devtest/fomantic-modal.tmpl b/templates/devtest/fomantic-modal.tmpl
new file mode 100644
index 000000000000..aaa4c2c12d1a
--- /dev/null
+++ b/templates/devtest/fomantic-modal.tmpl
@@ -0,0 +1,49 @@
+{{template "base/head" .}}
+<div class="page-content devtest ui container">
+	<div class="ui g-modal-confirm modal" id="test-modal-default">
+		<div class="header">{{svg "octicon-file"}} Default dialog <span>title</span></div>
+		<div class="content">
+			very long aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
+		</div>
+		{{template "base/modal_actions_confirm" (dict "locale" $.locale)}}
+	</div>
+
+	<div class="ui g-modal-confirm modal" id="test-modal-confirm">
+		<div class="header">Confirm dialog</div>
+		<div class="content">hello, this is the modal dialog content</div>
+		{{template "base/modal_actions_confirm" (dict "locale" $.locale "ModalButtonTypes" "confirm")}}
+	</div>
+
+	<div class="ui g-modal-confirm modal" id="test-modal-blue">
+		<div class="header">Blue dialog</div>
+		<div class="content">hello, this is the modal dialog content</div>
+		{{template "base/modal_actions_confirm" (dict "locale" $.locale "ModalButtonColors" "blue")}}
+	</div>
+
+	<div class="ui g-modal-confirm modal" id="test-modal-yellow">
+		<div class="header">yellow dialog</div>
+		<div class="content">hello, this is the modal dialog content</div>
+		{{template "base/modal_actions_confirm" (dict "locale" $.locale "ModalButtonColors" "yellow")}}
+	</div>
+
+	<div class="ui g-modal-confirm modal" id="test-modal-danger">
+		{{svg "octicon-x" 16 "inside close"}}
+		<div class="header">dangerous action dialog</div>
+		<div class="content">hello, this is the modal dialog content, this is a dangerous operation</div>
+		{{template "base/modal_actions_confirm" (dict "ModalButtonDangerText" "I know and must do  this is dangerous operation")}}
+	</div>
+
+	<div class="modal-buttons"></div>
+	<script type="module">
+		for (const el of $('.ui.modal')) {
+			const $btn = $('<button>').text(`Show ${el.id}`).on('click', () => {
+				$(el).modal({onApprove() {alert('confirmed')}}).modal('show');
+			});
+			$('.modal-buttons').append($btn);
+		}
+	</script>
+	<style>
+		.modal-buttons button { margin: 5px; }
+	</style>
+</div>
+{{template "base/footer" .}}
diff --git a/templates/org/member/members.tmpl b/templates/org/member/members.tmpl
index 7b6c83cfcc04..d6ab265ea84c 100644
--- a/templates/org/member/members.tmpl
+++ b/templates/org/member/members.tmpl
@@ -81,7 +81,7 @@
 		{{template "base/paginate" .}}
 	</div>
 </div>
-<div class="ui gitea-confirm-modal delete modal" id="leave-organization">
+<div class="ui g-modal-confirm delete modal" id="leave-organization">
 	<div class="header">
 		{{$.locale.Tr "org.members.leave"}}
 	</div>
@@ -90,7 +90,7 @@
 	</div>
 	{{template "base/modal_actions_confirm" .}}
 </div>
-<div class="ui gitea-confirm-modal delete modal" id="remove-organization-member">
+<div class="ui g-modal-confirm delete modal" id="remove-organization-member">
 	<div class="header">
 		{{$.locale.Tr "org.members.remove"}}
 	</div>
diff --git a/templates/org/settings/delete.tmpl b/templates/org/settings/delete.tmpl
index 1cfe1f16cd57..9c8644da27e0 100644
--- a/templates/org/settings/delete.tmpl
+++ b/templates/org/settings/delete.tmpl
@@ -21,7 +21,7 @@
 				</div>
 			</div>
 
-<div class="ui gitea-confirm-modal delete modal">
+<div class="ui g-modal-confirm delete modal">
 	<div class="header">
 		{{svg "octicon-trash"}}
 		{{.locale.Tr "org.settings.delete_org_title"}}
diff --git a/templates/org/team/members.tmpl b/templates/org/team/members.tmpl
index e387090b3b61..5f520f24a115 100644
--- a/templates/org/team/members.tmpl
+++ b/templates/org/team/members.tmpl
@@ -64,7 +64,7 @@
 		</div>
 	</div>
 </div>
-<div class="ui gitea-confirm-modal delete modal" id="remove-team-member">
+<div class="ui g-modal-confirm delete modal" id="remove-team-member">
 	<div class="header">
 		{{$.locale.Tr "org.members.remove"}}
 	</div>
diff --git a/templates/org/team/new.tmpl b/templates/org/team/new.tmpl
index 2860ea497b44..0cba09be5139 100644
--- a/templates/org/team/new.tmpl
+++ b/templates/org/team/new.tmpl
@@ -148,7 +148,7 @@
 	</div>
 </div>
 
-<div class="ui gitea-confirm-modal delete modal">
+<div class="ui g-modal-confirm delete modal">
 	<div class="header">
 		{{svg "octicon-trash"}}
 		{{.locale.Tr "org.teams.delete_team_title"}}
diff --git a/templates/org/team/repositories.tmpl b/templates/org/team/repositories.tmpl
index 41561da31144..86b4a212d1f3 100644
--- a/templates/org/team/repositories.tmpl
+++ b/templates/org/team/repositories.tmpl
@@ -64,7 +64,7 @@
 	</div>
 </div>
 
-<div class="ui gitea-confirm-modal delete modal" id="org-team-remove-all-repo">
+<div class="ui g-modal-confirm delete modal" id="org-team-remove-all-repo">
 	<div class="header">
 		{{svg "octicon-trash"}}
 		{{.locale.Tr "org.teams.remove_all_repos_title"}}
@@ -75,7 +75,7 @@
 	{{template "base/modal_actions_confirm" .}}
 </div>
 
-<div class="ui gitea-confirm-modal addall modal" id="org-team-add-all-repo">
+<div class="ui g-modal-confirm addall modal" id="org-team-add-all-repo">
 	<div class="header">
 		{{svg "octicon-globe"}}
 		{{.locale.Tr "org.teams.add_all_repos_title"}}
diff --git a/templates/org/team/sidebar.tmpl b/templates/org/team/sidebar.tmpl
index f2652552569c..f215dd52cd05 100644
--- a/templates/org/team/sidebar.tmpl
+++ b/templates/org/team/sidebar.tmpl
@@ -83,7 +83,7 @@
 		</div>
 	{{end}}
 </div>
-<div class="ui gitea-confirm-modal delete modal" id="leave-team-sidebar">
+<div class="ui g-modal-confirm delete modal" id="leave-team-sidebar">
 	<div class="header">
 		{{$.locale.Tr "org.teams.leave"}}
 	</div>
diff --git a/templates/org/team/teams.tmpl b/templates/org/team/teams.tmpl
index c31b6caf1c1d..9148a45e5a55 100644
--- a/templates/org/team/teams.tmpl
+++ b/templates/org/team/teams.tmpl
@@ -43,7 +43,7 @@
 		</div>
 	</div>
 </div>
-<div class="ui gitea-confirm-modal delete modal" id="leave-team">
+<div class="ui g-modal-confirm delete modal" id="leave-team">
 	<div class="header">
 		{{$.locale.Tr "org.teams.leave"}}
 	</div>
diff --git a/templates/projects/list.tmpl b/templates/projects/list.tmpl
index bcb402601ce0..ac4b34a960f2 100644
--- a/templates/projects/list.tmpl
+++ b/templates/projects/list.tmpl
@@ -76,7 +76,7 @@
 </div>
 
 {{if $.CanWriteProjects}}
-<div class="ui gitea-confirm-modal delete modal">
+<div class="ui g-modal-confirm delete modal">
 	<div class="header">
 		{{svg "octicon-trash"}}
 		{{.locale.Tr "repo.projects.deletion"}}
diff --git a/templates/projects/view.tmpl b/templates/projects/view.tmpl
index 34eaf9367053..c108d0b370db 100644
--- a/templates/projects/view.tmpl
+++ b/templates/projects/view.tmpl
@@ -150,17 +150,17 @@
 									</div>
 								</div>
 
-								<div class="ui gitea-confirm-modal modal default-project-board-modal" id="default-project-board-modal-{{.ID}}">
+								<div class="ui g-modal-confirm modal default-project-board-modal" id="default-project-board-modal-{{.ID}}">
 									<div class="header">
 										<span id="default-project-board-header"></span>
 									</div>
 									<div class="content">
 										<label id="default-project-board-content"></label>
 									</div>
-									{{template "base/modal_actions_confirm" (dict "locale" $.locale "ModalButtonStyle" "confirm")}}
+									{{template "base/modal_actions_confirm" (dict "locale" $.locale "ModalButtonTypes" "confirm")}}
 								</div>
 
-								<div class="ui gitea-confirm-modal modal" id="delete-board-modal-{{.ID}}">
+								<div class="ui g-modal-confirm modal" id="delete-board-modal-{{.ID}}">
 									<div class="header">
 										{{$.locale.Tr "repo.projects.column.delete"}}
 									</div>
@@ -169,7 +169,7 @@
 											{{$.locale.Tr "repo.projects.column.deletion_desc"}}
 										</label>
 									</div>
-									{{template "base/modal_actions_confirm" (dict "locale" $.locale "ModalButtonStyle" "confirm")}}
+									{{template "base/modal_actions_confirm" (dict "locale" $.locale "ModalButtonTypes" "confirm")}}
 								</div>
 							</div>
 						</div>
@@ -272,7 +272,7 @@
 </div>
 
 {{if .CanWriteProjects}}
-	<div class="ui gitea-confirm-modal delete modal">
+	<div class="ui g-modal-confirm delete modal">
 		<div class="header">
 			{{svg "octicon-trash"}}
 			{{.locale.Tr "repo.projects.deletion"}}
diff --git a/templates/repo/branch/list.tmpl b/templates/repo/branch/list.tmpl
index 98862bfd8e44..b027c175a4d7 100644
--- a/templates/repo/branch/list.tmpl
+++ b/templates/repo/branch/list.tmpl
@@ -147,7 +147,7 @@
 	</div>
 </div>
 
-<div class="ui gitea-confirm-modal delete modal">
+<div class="ui g-modal-confirm delete modal">
 	<div class="header">
 		{{svg "octicon-trash"}}
 		{{.locale.Tr "repo.branch.delete_html"}} <span class="name"></span>
diff --git a/templates/repo/commit_page.tmpl b/templates/repo/commit_page.tmpl
index 00e6220c3e39..5e26c04fd879 100644
--- a/templates/repo/commit_page.tmpl
+++ b/templates/repo/commit_page.tmpl
@@ -59,7 +59,7 @@
 										data-modal-cherry-pick-header="{{$.locale.Tr "repo.commit.cherry-pick-header" (ShortSha .CommitID)}}"
 										data-modal-cherry-pick-content="{{$.locale.Tr "repo.commit.cherry-pick-content"}}"
 										data-modal-cherry-pick-submit="{{.locale.Tr "repo.commit.cherry-pick"}}">{{.locale.Tr "repo.commit.cherry-pick"}}</div>
-									<div class="ui gitea-confirm-modal modal" id="cherry-pick-modal">
+									<div class="ui g-modal-confirm modal" id="cherry-pick-modal">
 										<div class="header">
 											<span id="cherry-pick-header"></span>
 										</div>
diff --git a/templates/repo/editor/edit.tmpl b/templates/repo/editor/edit.tmpl
index 1c0682f4d570..fe0bd4663571 100644
--- a/templates/repo/editor/edit.tmpl
+++ b/templates/repo/editor/edit.tmpl
@@ -56,7 +56,7 @@
 	</div>
 
 
-	<div class="ui gitea-confirm-modal modal" id="edit-empty-content-modal">
+	<div class="ui g-modal-confirm modal" id="edit-empty-content-modal">
 		<div class="header">
 			{{svg "octicon-file"}}
 			{{.locale.Tr "repo.editor.commit_empty_file_header"}}
@@ -65,11 +65,11 @@
 			<p>{{.locale.Tr "repo.editor.commit_empty_file_text"}}</p>
 		</div>
 		<div class="actions">
-			<button class="ui red basic cancel inverted button">
+			<button class="ui red cancel button">
 				{{svg "octicon-x"}}
 				{{.locale.Tr "repo.editor.cancel"}}
 			</button>
-			<button class="ui green basic ok inverted button">
+			<button class="ui green ok button">
 				{{svg "fontawesome-save"}}
 				{{.locale.Tr "repo.editor.commit_changes"}}
 			</button>
diff --git a/templates/repo/editor/patch.tmpl b/templates/repo/editor/patch.tmpl
index a211187d069a..99c13c1fc529 100644
--- a/templates/repo/editor/patch.tmpl
+++ b/templates/repo/editor/patch.tmpl
@@ -36,7 +36,7 @@
 		</form>
 	</div>
 
-	<div class="ui gitea-confirm-modal modal" id="edit-empty-content-modal">
+	<div class="ui g-modal-confirm modal" id="edit-empty-content-modal">
 		<div class="header">
 			{{svg "octicon-file"}}
 			{{.locale.Tr "repo.editor.commit_empty_file_header"}}
@@ -45,11 +45,11 @@
 			<p>{{.locale.Tr "repo.editor.commit_empty_file_text"}}</p>
 		</div>
 		<div class="actions">
-			<button class="ui red basic inverted cancel button">
+			<button class="ui red cancel button">
 				{{svg "octicon-x"}}
 				{{.locale.Tr "repo.editor.cancel"}}
 			</button>
-			<button class="ui green basic inverted ok button">
+			<button class="ui green ok button">
 				{{svg "fontawesome-save"}}
 				{{.locale.Tr "repo.editor.commit_changes"}}
 			</button>
diff --git a/templates/repo/issue/labels/edit_delete_label.tmpl b/templates/repo/issue/labels/edit_delete_label.tmpl
index 32e5a140ae76..458250f92b39 100644
--- a/templates/repo/issue/labels/edit_delete_label.tmpl
+++ b/templates/repo/issue/labels/edit_delete_label.tmpl
@@ -1,4 +1,4 @@
-<div class="ui gitea-confirm-modal delete modal">
+<div class="ui g-modal-confirm delete modal">
 	<div class="header">
 		{{svg "octicon-trash"}}
 		{{.locale.Tr "repo.issues.label_deletion"}}
diff --git a/templates/repo/issue/milestones.tmpl b/templates/repo/issue/milestones.tmpl
index 7abb1a660699..b2428237a090 100644
--- a/templates/repo/issue/milestones.tmpl
+++ b/templates/repo/issue/milestones.tmpl
@@ -116,7 +116,7 @@
 </div>
 
 {{if or .CanWriteIssues .CanWritePulls}}
-	<div class="ui gitea-confirm-modal delete modal">
+	<div class="ui g-modal-confirm delete modal">
 		<div class="header">
 			{{svg "octicon-trash"}}
 			{{.locale.Tr "repo.milestones.deletion"}}
diff --git a/templates/repo/issue/view_content.tmpl b/templates/repo/issue/view_content.tmpl
index 8112373f06b2..7d3bce2b6a87 100644
--- a/templates/repo/issue/view_content.tmpl
+++ b/templates/repo/issue/view_content.tmpl
@@ -197,7 +197,7 @@
 	<span class="no-content">{{.locale.Tr "repo.issues.no_content"}}</span>
 </div>
 
-<div class="ui gitea-confirm-modal delete modal">
+<div class="ui g-modal-confirm delete modal">
 	<div class="header">
 		{{svg "octicon-trash"}}
 		{{.locale.Tr "repo.branch.delete" .HeadTarget}}
diff --git a/templates/repo/issue/view_content/sidebar.tmpl b/templates/repo/issue/view_content/sidebar.tmpl
index a8ca0331c756..248fc71b0616 100644
--- a/templates/repo/issue/view_content/sidebar.tmpl
+++ b/templates/repo/issue/view_content/sidebar.tmpl
@@ -542,7 +542,7 @@
 			{{if and .CanCreateIssueDependencies (not .Repository.IsArchived)}}
 				<input type="hidden" id="crossRepoSearch" value="{{.AllowCrossRepositoryDependencies}}">
 
-				<div class="ui gitea-confirm-modal modal remove-dependency">
+				<div class="ui g-modal-confirm modal remove-dependency">
 					<div class="header">
 						{{svg "octicon-trash"}}
 						{{.locale.Tr "repo.issues.dependency.remove_header"}}
@@ -656,7 +656,7 @@
 				{{svg "octicon-trash"}}
 				{{.locale.Tr "repo.issues.delete"}}
 			</button>
-			<div class="ui gitea-confirm-modal modal" id="delete">
+			<div class="ui g-modal-confirm modal" id="delete">
 				<div class="header">
 					{{if .Issue.IsPull}}
 						{{.locale.Tr "repo.pulls.delete.title"}}
diff --git a/templates/repo/projects/list.tmpl b/templates/repo/projects/list.tmpl
index ebe6008bbaca..5fd146633160 100644
--- a/templates/repo/projects/list.tmpl
+++ b/templates/repo/projects/list.tmpl
@@ -78,7 +78,7 @@
 </div>
 
 {{if .CanWriteProjects}}
-<div class="ui gitea-confirm-modal delete modal">
+<div class="ui g-modal-confirm delete modal">
 	<div class="header">
 		{{svg "octicon-trash"}}
 		{{.locale.Tr "repo.projects.deletion"}}
diff --git a/templates/repo/projects/view.tmpl b/templates/repo/projects/view.tmpl
index df880591b746..fa98d2eeba6a 100644
--- a/templates/repo/projects/view.tmpl
+++ b/templates/repo/projects/view.tmpl
@@ -156,17 +156,17 @@
 									</div>
 								</div>
 
-								<div class="ui gitea-confirm-modal modal default-project-board-modal" id="default-project-board-modal-{{.ID}}">
+								<div class="ui g-modal-confirm modal default-project-board-modal" id="default-project-board-modal-{{.ID}}">
 									<div class="header">
 										<span id="default-project-board-header"></span>
 									</div>
 									<div class="content">
 										<label id="default-project-board-content"></label>
 									</div>
-									{{template "base/modal_actions_confirm" (dict "locale" $.locale "ModalButtonStyle" "confirm")}}
+									{{template "base/modal_actions_confirm" (dict "locale" $.locale "ModalButtonTypes" "confirm")}}
 								</div>
 
-								<div class="ui gitea-confirm-modal modal" id="delete-board-modal-{{.ID}}">
+								<div class="ui g-modal-confirm modal" id="delete-board-modal-{{.ID}}">
 									<div class="header">
 										{{$.locale.Tr "repo.projects.column.delete"}}
 									</div>
@@ -175,7 +175,7 @@
 											{{$.locale.Tr "repo.projects.column.deletion_desc"}}
 										</label>
 									</div>
-									{{template "base/modal_actions_confirm" (dict "locale" $.locale "ModalButtonStyle" "confirm")}}
+									{{template "base/modal_actions_confirm" (dict "locale" $.locale "ModalButtonTypes" "confirm")}}
 								</div>
 							</div>
 						</div>
@@ -278,7 +278,7 @@
 </div>
 
 {{if .CanWriteProjects}}
-	<div class="ui gitea-confirm-modal delete modal">
+	<div class="ui g-modal-confirm delete modal">
 		<div class="header">
 			{{svg "octicon-trash"}}
 			{{.locale.Tr "repo.projects.deletion"}}
diff --git a/templates/repo/release/list.tmpl b/templates/repo/release/list.tmpl
index 1ddb47931772..d0e3b9cc073f 100644
--- a/templates/repo/release/list.tmpl
+++ b/templates/repo/release/list.tmpl
@@ -184,7 +184,7 @@
 </div>
 
 {{if (and ($.Permission.CanWrite $.UnitTypeCode) .PageIsTagList)}}
-	<div class="ui gitea-confirm-modal delete modal">
+	<div class="ui g-modal-confirm delete modal">
 		<div class="header">
 			{{svg "octicon-trash"}}
 			{{.locale.Tr "repo.release.delete_tag"}}
diff --git a/templates/repo/release/new.tmpl b/templates/repo/release/new.tmpl
index de5946fe6897..fe8a6cfc55cd 100644
--- a/templates/repo/release/new.tmpl
+++ b/templates/repo/release/new.tmpl
@@ -138,7 +138,7 @@
 </div>
 
 {{if .PageIsEditRelease}}
-	<div class="ui gitea-confirm-modal delete modal">
+	<div class="ui g-modal-confirm delete modal">
 		<div class="header">
 			{{svg "octicon-trash"}}
 			{{.locale.Tr "repo.release.deletion"}}
diff --git a/templates/repo/settings/branches.tmpl b/templates/repo/settings/branches.tmpl
index ae1d7277a1e8..f74a2a837db6 100644
--- a/templates/repo/settings/branches.tmpl
+++ b/templates/repo/settings/branches.tmpl
@@ -91,7 +91,7 @@
 		{{end}}
 	</div>
 
-<div class="ui gitea-confirm-modal delete modal">
+<div class="ui g-modal-confirm delete modal">
 	<div class="header">
 		{{svg "octicon-trash"}}
 		{{.locale.Tr "repo.settings.protected_branch_deletion"}}
diff --git a/templates/repo/settings/collaboration.tmpl b/templates/repo/settings/collaboration.tmpl
index 82696612f894..66448da0c582 100644
--- a/templates/repo/settings/collaboration.tmpl
+++ b/templates/repo/settings/collaboration.tmpl
@@ -107,7 +107,7 @@
 		{{end}}
 	</div>
 
-<div class="ui gitea-confirm-modal delete modal">
+<div class="ui g-modal-confirm delete modal">
 	<div class="header">
 		{{svg "octicon-trash"}}
 		{{.locale.Tr "repo.settings.collaborator_deletion"}}
diff --git a/templates/repo/settings/deploy_keys.tmpl b/templates/repo/settings/deploy_keys.tmpl
index 584a6ee1a6c1..caf049acd6fd 100644
--- a/templates/repo/settings/deploy_keys.tmpl
+++ b/templates/repo/settings/deploy_keys.tmpl
@@ -72,7 +72,7 @@
 		</div>
 	</div>
 
-<div class="ui gitea-confirm-modal delete modal">
+<div class="ui g-modal-confirm delete modal">
 	<div class="header">
 		{{svg "octicon-trash"}}
 		{{.locale.Tr "repo.settings.deploy_key_deletion"}}
diff --git a/templates/repo/settings/lfs.tmpl b/templates/repo/settings/lfs.tmpl
index 3a39dff62cec..4d469a364e97 100644
--- a/templates/repo/settings/lfs.tmpl
+++ b/templates/repo/settings/lfs.tmpl
@@ -36,7 +36,7 @@
 		</table>
 		{{template "base/paginate" .}}
 		{{range .LFSFiles}}
-			<div class="ui gitea-confirm-modal modal" id="delete-{{.Oid}}">
+			<div class="ui g-modal-confirm modal" id="delete-{{.Oid}}">
 				<div class="header">
 					{{$.locale.Tr "repo.settings.lfs_delete" .Oid}}
 				</div>
@@ -46,14 +46,10 @@
 					</p>
 					<form class="ui form" action="{{$.Link}}/delete/{{.Oid}}" method="post">
 						{{$.CsrfTokenHtml}}
-						<div class="actions">{{/* TODO: Convert to base/modal_actions_confirm */}}
-							<button class="ui basic cancel inverted button">{{$.locale.Tr "settings.cancel"}}</button>
-							<button class="ui basic inverted yellow button">{{$.locale.Tr "modal.yes"}}</button>
-						</div>
+						{{template "base/modal_actions_confirm" (dict "locale" $.locale "ModalButtonColors" "yellow")}}
 					</form>
 				</div>
 			</div>
 		{{end}}
 	</div>
-</div>
 {{template "repo/settings/layout_footer" .}}
diff --git a/templates/repo/settings/options.tmpl b/templates/repo/settings/options.tmpl
index 0f69dac53c15..dba554a3d37f 100644
--- a/templates/repo/settings/options.tmpl
+++ b/templates/repo/settings/options.tmpl
@@ -963,7 +963,7 @@
 	{{end}}
 
 	{{if not .Repository.IsMirror}}
-		<div class="ui gitea-confirm-modal modal" id="archive-repo-modal">
+		<div class="ui g-modal-confirm modal" id="archive-repo-modal">
 			<div class="header">
 				{{if .Repository.IsArchived}}
 					{{.locale.Tr "repo.settings.unarchive.header"}}
diff --git a/templates/repo/settings/webhook/delete_modal.tmpl b/templates/repo/settings/webhook/delete_modal.tmpl
index 209e39a96be6..b78e69e6f4bb 100644
--- a/templates/repo/settings/webhook/delete_modal.tmpl
+++ b/templates/repo/settings/webhook/delete_modal.tmpl
@@ -1,4 +1,4 @@
-<div class="ui gitea-confirm-modal delete modal">
+<div class="ui g-modal-confirm delete modal">
 	<div class="header">
 		{{svg "octicon-trash"}}
 		{{.locale.Tr "repo.settings.webhook_deletion"}}
diff --git a/templates/repo/wiki/view.tmpl b/templates/repo/wiki/view.tmpl
index 74e4090b9a89..b892bff947b0 100644
--- a/templates/repo/wiki/view.tmpl
+++ b/templates/repo/wiki/view.tmpl
@@ -99,7 +99,7 @@
 	</div>
 </div>
 
-<div class="ui gitea-confirm-modal delete modal">
+<div class="ui g-modal-confirm delete modal">
 	<div class="header">
 		{{svg "octicon-trash"}}
 		{{.locale.Tr "repo.wiki.delete_page_button"}}
diff --git a/templates/shared/actions/runner_edit.tmpl b/templates/shared/actions/runner_edit.tmpl
index 38a869a6c975..d64479e19bad 100644
--- a/templates/shared/actions/runner_edit.tmpl
+++ b/templates/shared/actions/runner_edit.tmpl
@@ -88,7 +88,7 @@
 		</table>
 		{{template "base/paginate" .}}
 	</div>
-	<div class="ui gitea-confirm-modal delete modal" id="runner-delete-modal">
+	<div class="ui g-modal-confirm delete modal" id="runner-delete-modal">
 		<div class="header">
 			{{svg "octicon-trash"}}
 			{{.locale.Tr "actions.runners.delete_runner_header"}}
diff --git a/templates/shared/secrets/add_list.tmpl b/templates/shared/secrets/add_list.tmpl
index 659836eadde1..e56ace8fc6e1 100644
--- a/templates/shared/secrets/add_list.tmpl
+++ b/templates/shared/secrets/add_list.tmpl
@@ -56,7 +56,7 @@
 		{{.locale.Tr "secrets.none"}}
 	{{end}}
 </div>
-<div class="ui gitea-confirm-modal delete modal">
+<div class="ui g-modal-confirm delete modal">
 	<div class="header">
 		{{svg "octicon-trash"}}
 		{{.locale.Tr "secrets.deletion"}}
diff --git a/templates/status/500.tmpl b/templates/status/500.tmpl
index e8984aa18d06..27c087bc1822 100644
--- a/templates/status/500.tmpl
+++ b/templates/status/500.tmpl
@@ -1,5 +1,5 @@
 {{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content gt-w-screen status-page-500">
+<div role="main" aria-label="{{.Title}}" class="page-content status-page-500">
 	<p class="gt-mt-5 center"><img src="{{AssetUrlPrefix}}/img/500.png" alt="Internal Server Error"></p>
 	<div class="ui divider"></div>
 
diff --git a/templates/user/settings/account.tmpl b/templates/user/settings/account.tmpl
index fe8e73321901..451b0ca0e008 100644
--- a/templates/user/settings/account.tmpl
+++ b/templates/user/settings/account.tmpl
@@ -157,7 +157,7 @@
 		</div>
 	</div>
 
-<div class="ui gitea-confirm-modal delete modal" id="delete-email">
+<div class="ui g-modal-confirm delete modal" id="delete-email">
 	<div class="header">
 		{{svg "octicon-trash"}}
 		{{.locale.Tr "settings.email_deletion"}}
@@ -168,7 +168,7 @@
 	{{template "base/modal_actions_confirm" .}}
 </div>
 
-<div class="ui gitea-confirm-modal delete modal" id="delete-account">
+<div class="ui g-modal-confirm delete modal" id="delete-account">
 	<div class="header">
 		{{svg "octicon-trash"}}
 		{{.locale.Tr "settings.delete_account_title"}}
diff --git a/templates/user/settings/applications.tmpl b/templates/user/settings/applications.tmpl
index fb1154d0c8bf..142bfa0a2d60 100644
--- a/templates/user/settings/applications.tmpl
+++ b/templates/user/settings/applications.tmpl
@@ -264,7 +264,7 @@
 		{{end}}
 	</div>
 
-<div class="ui gitea-confirm-modal delete modal" id="delete-token">
+<div class="ui g-modal-confirm delete modal" id="delete-token">
 	<div class="header">
 		{{svg "octicon-trash"}}
 		{{.locale.Tr "settings.access_token_deletion"}}
@@ -272,17 +272,7 @@
 	<div class="content">
 		<p>{{.locale.Tr "settings.access_token_deletion_desc"}}</p>
 	</div>
-
-	<div class="actions">{{/* TODO: Convert to base/modal_actions_confirm.tmpl */}}
-		<button class="ui green basic inverted cancel button">
-			{{svg "octicon-x"}}
-			{{.locale.Tr "settings.access_token_deletion_cancel_action"}}
-		</button>
-		<button class="ui red basic inverted ok button">
-			{{svg "octicon-check"}}
-			{{.locale.Tr "settings.access_token_deletion_confirm_action"}}
-		</button>
-	</div>
+	{{template "base/modal_actions_confirm" (dict "locale" $.locale "ModalButtonColors" "yellow")}}
 </div>
 
 {{template "user/settings/layout_footer" .}}
diff --git a/templates/user/settings/applications_oauth2_list.tmpl b/templates/user/settings/applications_oauth2_list.tmpl
index 5a9554b0309f..ad38c60eb985 100644
--- a/templates/user/settings/applications_oauth2_list.tmpl
+++ b/templates/user/settings/applications_oauth2_list.tmpl
@@ -47,7 +47,7 @@
 	</form>
 </div>
 
-<div class="ui gitea-confirm-modal delete modal" id="remove-gitea-oauth2-application">
+<div class="ui g-modal-confirm delete modal" id="remove-gitea-oauth2-application">
 	<div class="header">
 		{{svg "octicon-trash"}}
 		{{.locale.Tr "settings.remove_oauth2_application"}}
diff --git a/templates/user/settings/grants_oauth2.tmpl b/templates/user/settings/grants_oauth2.tmpl
index 3fe34a87270a..a3b549722da8 100644
--- a/templates/user/settings/grants_oauth2.tmpl
+++ b/templates/user/settings/grants_oauth2.tmpl
@@ -28,7 +28,7 @@
 	</div>
 </div>
 
-<div class="ui gitea-confirm-modal delete modal" id="revoke-gitea-oauth2-grant">
+<div class="ui g-modal-confirm delete modal" id="revoke-gitea-oauth2-grant">
 	<div class="header">
 		{{svg "octicon-shield" 16 "gt-mr-2"}}
 		{{.locale.Tr "settings.revoke_oauth2_grant"}}
diff --git a/templates/user/settings/keys_gpg.tmpl b/templates/user/settings/keys_gpg.tmpl
index a4885554044e..d255760cd555 100644
--- a/templates/user/settings/keys_gpg.tmpl
+++ b/templates/user/settings/keys_gpg.tmpl
@@ -111,7 +111,7 @@
 <br>
 <p>{{.locale.Tr "settings.gpg_helper" "https://docs.github.com/en/free-pro-team@latest/github/authenticating-to-github/about-commit-signature-verification#gpg-commit-signature-verification" | Str2html}}</p>
 
-<div class="ui gitea-confirm-modal delete modal" id="delete-gpg">
+<div class="ui g-modal-confirm delete modal" id="delete-gpg">
 	<div class="header">
 		{{svg "octicon-trash"}}
 		{{.locale.Tr "settings.gpg_key_deletion"}}
diff --git a/templates/user/settings/keys_principal.tmpl b/templates/user/settings/keys_principal.tmpl
index 51009fdea144..7cde3e37af6b 100644
--- a/templates/user/settings/keys_principal.tmpl
+++ b/templates/user/settings/keys_principal.tmpl
@@ -54,7 +54,7 @@
 		</div>
 	</div>
 
-	<div class="ui gitea-confirm-modal delete modal" id="delete-principal">
+	<div class="ui g-modal-confirm delete modal" id="delete-principal">
 		<div class="header">
 			{{svg "octicon-trash"}}
 			{{.locale.Tr "settings.ssh_principal_deletion"}}
diff --git a/templates/user/settings/keys_ssh.tmpl b/templates/user/settings/keys_ssh.tmpl
index abe0624d968d..bf2523f57b62 100644
--- a/templates/user/settings/keys_ssh.tmpl
+++ b/templates/user/settings/keys_ssh.tmpl
@@ -100,7 +100,7 @@
 <br>
 <p>{{.locale.Tr "settings.ssh_helper" "https://docs.github.com/en/free-pro-team@latest/github/authenticating-to-github/connecting-to-github-with-ssh" "https://docs.github.com/en/free-pro-team@latest/github/authenticating-to-github/troubleshooting-ssh" | Str2html}}</p>
 
-<div class="ui gitea-confirm-modal delete modal" id="delete-ssh">
+<div class="ui g-modal-confirm delete modal" id="delete-ssh">
 	<div class="header">
 		{{svg "octicon-trash"}}
 		{{.locale.Tr "settings.ssh_key_deletion"}}
diff --git a/templates/user/settings/organization.tmpl b/templates/user/settings/organization.tmpl
index 088878e9cdd3..2e10588fd8f2 100644
--- a/templates/user/settings/organization.tmpl
+++ b/templates/user/settings/organization.tmpl
@@ -37,7 +37,7 @@
 		</div>
 	</div>
 
-<div class="ui gitea-confirm-modal delete modal" id="leave-organization">
+<div class="ui g-modal-confirm delete modal" id="leave-organization">
 	<div class="header">
 		{{$.locale.Tr "org.members.leave"}}
 	</div>
diff --git a/templates/user/settings/repos.tmpl b/templates/user/settings/repos.tmpl
index 5e11f58988bd..3d9f4e5a80d5 100644
--- a/templates/user/settings/repos.tmpl
+++ b/templates/user/settings/repos.tmpl
@@ -35,7 +35,7 @@
 										<div class="right floated content">
 											{{if $.allowAdopt}}
 												<button class="ui button submit tiny green adopt show-modal" data-modal="#adopt-unadopted-modal-{{$dirI}}"><span class="icon">{{svg "octicon-plus"}}</span><span class="label">{{$.locale.Tr "repo.adopt_preexisting_label"}}</span></button>
-												<div class="ui gitea-confirm-modal modal" id="adopt-unadopted-modal-{{$dirI}}">
+												<div class="ui g-modal-confirm modal" id="adopt-unadopted-modal-{{$dirI}}">
 													<div class="header">
 														<span class="label">{{$.locale.Tr "repo.adopt_preexisting"}}</span>
 													</div>
@@ -46,22 +46,13 @@
 														{{$.CsrfTokenHtml}}
 														<input type="hidden" name="id" value="{{$dir}}">
 														<input type="hidden" name="action" value="adopt">
-														<div class="actions">{{/* TODO: Convert to base/modal_actions_confirm */}}
-															<button class="ui red basic inverted cancel button">
-																{{svg "octicon-x"}}
-																{{$.locale.Tr "modal.no"}}
-															</button>
-															<button class="ui green basic inverted ok button">
-																{{svg "octicon-check"}}
-																{{$.locale.Tr "modal.yes"}}
-															</button>
-														</div>
+														{{template "base/modal_actions_confirm" .}}
 													</form>
 												</div>
 											{{end}}
 											{{if $.allowDelete}}
 												<button class="ui button submit tiny red delete show-modal" data-modal="#delete-unadopted-modal-{{$dirI}}"><span class="icon">{{svg "octicon-x"}}</span><span class="label">{{$.locale.Tr "repo.delete_preexisting_label"}}</span></button>
-												<div class="ui gitea-confirm-modal modal" id="delete-unadopted-modal-{{$dirI}}">
+												<div class="ui g-modal-confirm modal" id="delete-unadopted-modal-{{$dirI}}">
 													<div class="header">
 														<span class="label">{{$.locale.Tr "repo.delete_preexisting"}}</span>
 													</div>
@@ -125,7 +116,7 @@
 		</div>
 	</div>
 
-<div class="ui gitea-confirm-modal delete modal">
+<div class="ui g-modal-confirm delete modal">
 	<div class="header">
 		{{svg "octicon-trash"}}
 		{{.locale.Tr "settings.remove_account_link"}}
diff --git a/templates/user/settings/security/accountlinks.tmpl b/templates/user/settings/security/accountlinks.tmpl
index 196d07c56ff9..29fbe6832cbd 100644
--- a/templates/user/settings/security/accountlinks.tmpl
+++ b/templates/user/settings/security/accountlinks.tmpl
@@ -41,7 +41,7 @@
 	</div>
 </div>
 
-<div class="ui gitea-confirm-modal delete modal" id="delete-account-link">
+<div class="ui g-modal-confirm delete modal" id="delete-account-link">
 	<div class="header">
 		{{svg "octicon-trash"}}
 		{{.locale.Tr "settings.remove_account_link"}}
diff --git a/templates/user/settings/security/openid.tmpl b/templates/user/settings/security/openid.tmpl
index 7a206a021a6e..2719b3b495b4 100644
--- a/templates/user/settings/security/openid.tmpl
+++ b/templates/user/settings/security/openid.tmpl
@@ -51,7 +51,7 @@
 	</form>
 </div>
 
-<div class="ui gitea-confirm-modal delete modal" id="delete-openid">
+<div class="ui g-modal-confirm delete modal" id="delete-openid">
 	<div class="header">
 		{{svg "octicon-trash"}}
 		{{.locale.Tr "settings.openid_deletion"}}
diff --git a/templates/user/settings/security/twofa.tmpl b/templates/user/settings/security/twofa.tmpl
index f00651e7fca7..43f324f40b31 100644
--- a/templates/user/settings/security/twofa.tmpl
+++ b/templates/user/settings/security/twofa.tmpl
@@ -23,7 +23,7 @@
 	{{end}}
 </div>
 
-<div class="ui gitea-confirm-modal delete modal" id="disable-twofa">
+<div class="ui g-modal-confirm delete modal" id="disable-twofa">
 	<div class="header">
 		{{svg "octicon-trash"}}
 		{{.locale.Tr "settings.twofa_disable"}}
diff --git a/templates/user/settings/security/webauthn.tmpl b/templates/user/settings/security/webauthn.tmpl
index 25b7f03fca6f..59022eb1c976 100644
--- a/templates/user/settings/security/webauthn.tmpl
+++ b/templates/user/settings/security/webauthn.tmpl
@@ -30,7 +30,7 @@
 
 {{template "user/auth/webauthn_error" .}}
 
-<div class="ui gitea-confirm-modal delete modal" id="delete-registration">
+<div class="ui g-modal-confirm delete modal" id="delete-registration">
 	<div class="header">
 		{{svg "octicon-trash"}}
 	{{.locale.Tr "settings.webauthn_delete_key"}}
diff --git a/web_src/css/helpers.css b/web_src/css/helpers.css
index beb93e1e86d8..c69b4d545004 100644
--- a/web_src/css/helpers.css
+++ b/web_src/css/helpers.css
@@ -1,3 +1,7 @@
+/*
+Gitea's tailwind-style CSS helper classes have `gt-` prefix.
+Gitea's private styles use `g-` prefix.
+*/
 .gt-df { display: flex !important; }
 .gt-di { display: inline !important; }
 .gt-dif { display: inline-flex !important; }
diff --git a/web_src/css/modules/modal.css b/web_src/css/modules/modal.css
index 60d096dfbfe1..1bf55ea4ccf1 100644
--- a/web_src/css/modules/modal.css
+++ b/web_src/css/modules/modal.css
@@ -1,8 +1,15 @@
-.ui.modal.gitea-confirm-modal {
+.ui.modal.g-modal-confirm {
   max-width: min(800px, 90vw);
   width: fit-content;
 }
 
+.ui.modal.g-modal-confirm > .inside.close {
+  padding: 0;
+  width: 1em;
+  height: 1em;
+  top: 1.2em;
+}
+
 .ui.modal > .header {
   /* can't use display:flex, because some headers have space-separated elements, eg: delete branch modal */
   color: var(--color-text-dark);
@@ -42,6 +49,13 @@
   padding: 10px 12px 10px 10px;
 }
 
+.ui.modal .actions > .ui.button.danger {
+  display: block;
+  width: 100%;
+  margin: 0 auto;
+  text-align: center;
+}
+
 .ui.modal .actions > .ui.button .svg {
   margin-right: 5px;
 }