diff --git a/docs/content/doc/contributing/guidelines-frontend.en-us.md b/docs/content/doc/contributing/guidelines-frontend.en-us.md
index 36c88739ec..bde7d31510 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 c39725699c..0aed59ffab 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 05c6aa66b4..1da40cbf29 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 4b9e51503c..1ab6b75a1e 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 48046f4296..2edcad4b7b 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 79b20dc1a4..d3052c91a9 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 06c801774f..f9a0a6ef98 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 fa29cae1fe..3e47447178 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 1995404d91..2ffb9982f2 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 cd3175b493..30109cc923 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 361f214466..a39a855b63 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 0000000000..aaa4c2c12d
--- /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 7b6c83cfcc..d6ab265ea8 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 1cfe1f16cd..9c8644da27 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 e387090b3b..5f520f24a1 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 2860ea497b..0cba09be51 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 41561da311..86b4a212d1 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 f265255256..f215dd52cd 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 c31b6caf1c..9148a45e5a 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 bcb402601c..ac4b34a960 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 34eaf93670..c108d0b370 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 98862bfd8e..b027c175a4 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 00e6220c3e..5e26c04fd8 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 1c0682f4d5..fe0bd46635 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 a211187d06..99c13c1fc5 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 32e5a140ae..458250f92b 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 7abb1a6606..b2428237a0 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 8112373f06..7d3bce2b6a 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 a8ca0331c7..248fc71b06 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 ebe6008bba..5fd1466331 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 df880591b7..fa98d2eeba 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 1ddb479317..d0e3b9cc07 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 de5946fe68..fe8a6cfc55 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 ae1d7277a1..f74a2a837d 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 82696612f8..66448da0c5 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 584a6ee1a6..caf049acd6 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 3a39dff62c..4d469a364e 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 0f69dac53c..dba554a3d3 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 209e39a96b..b78e69e6f4 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 74e4090b9a..b892bff947 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 38a869a6c9..d64479e19b 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 659836eadd..e56ace8fc6 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 e8984aa18d..27c087bc18 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 fe8e733219..451b0ca0e0 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 fb1154d0c8..142bfa0a2d 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 5a9554b030..ad38c60eb9 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 3fe34a8727..a3b549722d 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 a488555404..d255760cd5 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 51009fdea1..7cde3e37af 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 abe0624d96..bf2523f57b 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 088878e9cd..2e10588fd8 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 5e11f58988..3d9f4e5a80 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 196d07c56f..29fbe6832c 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 7a206a021a..2719b3b495 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 f00651e7fc..43f324f40b 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 25b7f03fca..59022eb1c9 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 beb93e1e86..c69b4d5450 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 60d096dfbf..1bf55ea4cc 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;
 }