diff --git a/docs/content/doc/contributing/guidelines-frontend.en-us.md b/docs/content/doc/contributing/guidelines-frontend.en-us.md
index 36c88739e..bde7d3151 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 c39725699..0aed59ffa 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 05c6aa66b..1da40cbf2 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 4b9e51503..1ab6b75a1 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 48046f429..2edcad4b7 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 79b20dc1a..d3052c91a 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 06c801774..f9a0a6ef9 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 fa29cae1f..3e4744717 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 1995404d9..2ffb9982f 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 cd3175b49..30109cc92 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 361f21446..a39a855b6 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 000000000..aaa4c2c12
--- /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 7b6c83cfc..d6ab265ea 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 1cfe1f16c..9c8644da2 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 e387090b3..5f520f24a 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 2860ea497..0cba09be5 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 41561da31..86b4a212d 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 f26525525..f215dd52c 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 c31b6caf1..9148a45e5 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 bcb402601..ac4b34a96 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 34eaf9367..c108d0b37 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 98862bfd8..b027c175a 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 00e6220c3..5e26c04fd 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 1c0682f4d..fe0bd4663 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 a211187d0..99c13c1fc 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 32e5a140a..458250f92 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 7abb1a660..b2428237a 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 8112373f0..7d3bce2b6 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 a8ca0331c..248fc71b0 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 ebe6008bb..5fd146633 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 df880591b..fa98d2eeb 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 1ddb47931..d0e3b9cc0 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 de5946fe6..fe8a6cfc5 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 ae1d7277a..f74a2a837 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 82696612f..66448da0c 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 584a6ee1a..caf049acd 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 3a39dff62..4d469a364 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 0f69dac53..dba554a3d 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 209e39a96..b78e69e6f 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 74e4090b9..b892bff94 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 38a869a6c..d64479e19 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 659836ead..e56ace8fc 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 e8984aa18..27c087bc1 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 fe8e73321..451b0ca0e 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 fb1154d0c..142bfa0a2 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 5a9554b03..ad38c60eb 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 3fe34a872..a3b549722 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 a48855540..d255760cd 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 51009fdea..7cde3e37a 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 abe0624d9..bf2523f57 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 088878e9c..2e10588fd 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 5e11f5898..3d9f4e5a8 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 196d07c56..29fbe6832 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 7a206a021..2719b3b49 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 f00651e7f..43f324f40 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 25b7f03fc..59022eb1c 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 beb93e1e8..c69b4d545 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 60d096dfb..1bf55ea4c 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;
 }