diff --git a/routers/web/user/setting/account.go b/routers/web/user/setting/account.go
index 1927efb7fe..a8d270dd32 100644
--- a/routers/web/user/setting/account.go
+++ b/routers/web/user/setting/account.go
@@ -249,21 +249,13 @@ func DeleteAccount(ctx *context.Context) {
 	if _, _, err := auth.UserSignIn(ctx, ctx.Doer.Name, ctx.FormString("password")); err != nil {
 		switch {
 		case user_model.IsErrUserNotExist(err):
-			loadAccountData(ctx)
-
-			ctx.RenderWithErrDeprecated(ctx.Tr("form.user_not_exist"), tplSettingsAccount, nil)
+			ctx.JSONError(ctx.Tr("form.user_not_exist"))
 		case errors.Is(err, smtp.ErrUnsupportedLoginType):
-			loadAccountData(ctx)
-
-			ctx.RenderWithErrDeprecated(ctx.Tr("form.unsupported_login_type"), tplSettingsAccount, nil)
+			ctx.JSONError(ctx.Tr("form.unsupported_login_type"))
 		case errors.As(err, &db.ErrUserPasswordNotSet{}):
-			loadAccountData(ctx)
-
-			ctx.RenderWithErrDeprecated(ctx.Tr("form.unset_password"), tplSettingsAccount, nil)
+			ctx.JSONError(ctx.Tr("form.unset_password"))
 		case errors.As(err, &db.ErrUserPasswordInvalid{}):
-			loadAccountData(ctx)
-
-			ctx.RenderWithErrDeprecated(ctx.Tr("form.enterred_invalid_password"), tplSettingsAccount, nil)
+			ctx.JSONError(ctx.Tr("form.enterred_invalid_password"))
 		default:
 			ctx.ServerError("UserSignIn", err)
 		}
diff --git a/routers/web/user/setting/security/webauthn.go b/routers/web/user/setting/security/webauthn.go
index a265fcdd10..4db7b47879 100644
--- a/routers/web/user/setting/security/webauthn.go
+++ b/routers/web/user/setting/security/webauthn.go
@@ -132,8 +132,7 @@ func WebauthnDelete(ctx *context.Context) {
 		return
 	}
 
-	form := web.GetForm(ctx).(*forms.WebauthnDeleteForm)
-	if _, err := auth.DeleteCredential(ctx, form.ID, ctx.Doer.ID); err != nil {
+	if _, err := auth.DeleteCredential(ctx, ctx.FormInt64("id"), ctx.Doer.ID); err != nil {
 		ctx.ServerError("GetWebAuthnCredentialByID", err)
 		return
 	}
diff --git a/routers/web/web.go b/routers/web/web.go
index bde886177c..4525516f5a 100644
--- a/routers/web/web.go
+++ b/routers/web/web.go
@@ -643,7 +643,7 @@ func registerWebRoutes(m *web.Router, webAuth *AuthMiddleware) {
 			m.Group("/webauthn", func() {
 				m.Post("/request_register", web.Bind(forms.WebauthnRegistrationForm{}), security.WebAuthnRegister)
 				m.Post("/register", security.WebauthnRegisterPost)
-				m.Post("/delete", web.Bind(forms.WebauthnDeleteForm{}), security.WebauthnDelete)
+				m.Post("/delete", security.WebauthnDelete)
 			})
 			m.Group("/openid", func() {
 				m.Post("", web.Bind(forms.AddOpenIDForm{}), security.OpenIDPost)
diff --git a/services/forms/user_form.go b/services/forms/user_form.go
index 195c746985..75275fb5c7 100644
--- a/services/forms/user_form.go
+++ b/services/forms/user_form.go
@@ -419,17 +419,6 @@ func (f *WebauthnRegistrationForm) Validate(req *http.Request, errs binding.Erro
 	return middleware.Validate(errs, ctx.Data, f, ctx.Locale)
 }
 
-// WebauthnDeleteForm for deleting WebAuthn keys
-type WebauthnDeleteForm struct {
-	ID int64 `binding:"Required"`
-}
-
-// Validate validates the fields
-func (f *WebauthnDeleteForm) Validate(req *http.Request, errs binding.Errors) binding.Errors {
-	ctx := context.GetValidateContext(req)
-	return middleware.Validate(errs, ctx.Data, f, ctx.Locale)
-}
-
 // PackageSettingForm form for package settings
 type PackageSettingForm struct {
 	Action   string
diff --git a/templates/org/team/members.tmpl b/templates/org/team/members.tmpl
index ac4039e596..c652d9c481 100644
--- a/templates/org/team/members.tmpl
+++ b/templates/org/team/members.tmpl
@@ -34,12 +34,10 @@
 								</div>
 								<div class="item-trailing">
 									{{if and $.IsOrganizationOwner (not (and ($.Team.IsOwnerTeam) (eq (len $.Team.Members) 1)))}}
-										<form>
-											<button class="ui red button delete-button" data-modal-id="remove-team-member"
-												data-url="{{$.OrgLink}}/teams/{{$.Team.LowerName | PathEscape}}/action/remove" data-datauid="{{.ID}}"
-												data-name="{{.DisplayName}}"
-												data-data-team-name="{{$.Team.Name}}">{{ctx.Locale.Tr "org.members.remove"}}</button>
-										</form>
+										<button class="ui red button show-modal" data-modal="#remove-team-member"
+											data-modal-form.action="{{$.OrgLink}}/teams/{{$.Team.LowerName | PathEscape}}/action/remove?uid={{.ID}}"
+											data-modal-name="{{.DisplayName}}"
+											data-modal-team-name="{{$.Team.Name}}">{{ctx.Locale.Tr "org.members.remove"}}</button>
 									{{end}}
 								</div>
 							</div>
@@ -74,13 +72,13 @@
 		</div>
 	</div>
 </div>
-<div class="ui g-modal-confirm delete modal" id="remove-team-member">
+<form class="ui small modal form-fetch-action" method="post" id="remove-team-member">
 	<div class="header">
 		{{ctx.Locale.Tr "org.members.remove"}}
 	</div>
 	<div class="content">
-		<p>{{ctx.Locale.Tr "org.members.remove.detail" (HTMLFormat `<span class="%s"></span>` "name") (HTMLFormat `<span class="%s"></span>` "dataTeamName")}}</p>
+		<p>{{ctx.Locale.Tr "org.members.remove.detail" (HTMLFormat `<span class="%s"></span>` "name") (HTMLFormat `<span class="%s"></span>` "team-name")}}</p>
 	</div>
 	{{template "base/modal_actions_confirm" .}}
-</div>
+</form>
 {{template "base/footer" .}}
diff --git a/templates/org/team/new.tmpl b/templates/org/team/new.tmpl
index 7e0403a2f5..1aa306a3e9 100644
--- a/templates/org/team/new.tmpl
+++ b/templates/org/team/new.tmpl
@@ -176,7 +176,7 @@
 							{{else}}
 								<button class="ui primary button">{{ctx.Locale.Tr "org.teams.update_settings"}}</button>
 								{{if not .Team.IsOwnerTeam}}
-									<button class="ui red button delete-button" data-url="{{.OrgLink}}/teams/{{.Team.Name | PathEscape}}/delete">{{ctx.Locale.Tr "org.teams.delete_team"}}</button>
+									<button class="ui red button link-action" data-modal-confirm="#delete-team" data-url="{{.OrgLink}}/teams/{{.Team.Name | PathEscape}}/delete">{{ctx.Locale.Tr "org.teams.delete_team"}}</button>
 								{{end}}
 							{{end}}
 						</div>
@@ -187,7 +187,7 @@
 	</div>
 </div>
 
-<div class="ui g-modal-confirm delete modal">
+<div class="ui small modal" id="delete-team">
 	<div class="header">
 		{{svg "octicon-trash"}}
 		{{ctx.Locale.Tr "org.teams.delete_team_title"}}
diff --git a/templates/repo/branch/list.tmpl b/templates/repo/branch/list.tmpl
index 6d1fa21151..74e38bfdc0 100644
--- a/templates/repo/branch/list.tmpl
+++ b/templates/repo/branch/list.tmpl
@@ -200,7 +200,7 @@
 											</span>
 										</button>
 									{{else}}
-										<button class="btn interact-bg tw-p-2 delete-button delete-branch-button" data-url="{{$.Link}}/delete?name={{.DBBranch.Name}}&page={{$.Page.Paginater.Current}}" data-tooltip-content="{{ctx.Locale.Tr "repo.branch.delete" (.DBBranch.Name)}}" data-name="{{.DBBranch.Name}}">
+										<button class="btn interact-bg tw-p-2 show-modal delete-branch-button tw-text-red" data-modal="#delete-branch-modal" data-modal-form.action="{{$.Link}}/delete?name={{.DBBranch.Name}}&page={{$.Page.Paginater.Current}}" data-tooltip-content="{{ctx.Locale.Tr "repo.branch.delete" (.DBBranch.Name)}}" data-modal-name="{{.DBBranch.Name}}">
 											{{svg "octicon-trash"}}
 										</button>
 									{{end}}
@@ -216,7 +216,7 @@
 	</div>
 </div>
 
-<div class="ui g-modal-confirm delete modal">
+<form class="ui small modal form-fetch-action" method="post" id="delete-branch-modal">
 	<div class="header">
 		{{svg "octicon-trash"}}
 		{{ctx.Locale.Tr "repo.branch.delete_html"}} <span class="name"></span>
@@ -225,7 +225,7 @@
 		<p>{{ctx.Locale.Tr "repo.branch.delete_desc"}}</p>
 	</div>
 	{{template "base/modal_actions_confirm" .}}
-</div>
+</form>
 
 <div class="ui mini modal" id="create-branch-modal">
 	<div class="header">
diff --git a/templates/shared/actions/runner_edit.tmpl b/templates/shared/actions/runner_edit.tmpl
index 4753711c2f..76992eea52 100644
--- a/templates/shared/actions/runner_edit.tmpl
+++ b/templates/shared/actions/runner_edit.tmpl
@@ -52,7 +52,7 @@
 				<button type="button" class="ui button link-action" data-url="{{.Link}}/update-runner?disabled={{not .Runner.IsDisabled}}">
 					{{if .Runner.IsDisabled}}{{ctx.Locale.Tr "actions.runners.enable_runner"}}{{else}}{{ctx.Locale.Tr "actions.runners.disable_runner"}}{{end}}
 				</button>
-				<button class="ui red button delete-button" data-url="{{.Link}}/delete" data-modal="#runner-delete-modal">
+				<button class="ui red button link-action" data-url="{{.Link}}/delete" data-modal-confirm="#runner-delete-modal">
 					{{ctx.Locale.Tr "actions.runners.delete_runner"}}</button>
 			</div>
 		</form>
@@ -95,7 +95,7 @@
 		</table>
 		{{template "base/paginate" .}}
 	</div>
-	<div class="ui g-modal-confirm delete modal" id="runner-delete-modal">
+	<div class="ui small modal" id="runner-delete-modal">
 		<div class="header">
 			{{svg "octicon-trash"}}
 			{{ctx.Locale.Tr "actions.runners.delete_runner_header"}}
diff --git a/templates/user/settings/account.tmpl b/templates/user/settings/account.tmpl
index 1b58f711ec..c43faa269a 100644
--- a/templates/user/settings/account.tmpl
+++ b/templates/user/settings/account.tmpl
@@ -56,7 +56,7 @@
 							</div>
 							<div class="flex-text-block">
 							{{if not .IsPrimary}}
-								<button class="ui red tiny button delete-button" data-modal-id="delete-email" data-url="{{AppSubUrl}}/user/settings/account/email/delete" data-id="{{.ID}}">
+								<button class="ui red tiny button link-action" data-modal-confirm="#delete-email" data-url="{{AppSubUrl}}/user/settings/account/email/delete?id={{.ID}}">
 									{{ctx.Locale.Tr "settings.delete_email"}}
 								</button>
 								{{if .CanBePrimary}}
@@ -115,19 +115,19 @@
 				<p class="text left tw-font-semibold">{{ctx.Locale.Tr "settings.delete_with_all_comments" .UserDeleteWithCommentsMaxTime}}</p>
 				{{end}}
 			</div>
-			<form class="ui form ignore-dirty" id="delete-form" action="{{AppSubUrl}}/user/settings/account/delete" method="post">
+			<form class="ui form ignore-dirty form-fetch-action" action="{{AppSubUrl}}/user/settings/account/delete" method="post">
 				{{template "base/disable_form_autofill"}}
 				<div class="required field {{if .Err_Password}}error{{end}}">
 					<label for="password-confirmation">{{ctx.Locale.Tr "password"}}</label>
 					<input id="password-confirmation" name="password" type="password" autocomplete="off" required>
 				</div>
 				<div class="field">
-					<button class="ui red button delete-button" data-modal-id="delete-account" data-type="form" data-form="#delete-form">
+					<button class="ui red button" data-modal-confirm="#delete-account">
 						{{ctx.Locale.Tr "settings.confirm_delete_account"}}
 					</button>
 				</div>
 			</form>
-			<div class="ui g-modal-confirm delete modal" id="delete-account">
+			<div class="ui small modal" id="delete-account">
 				<div class="header">
 					{{svg "octicon-trash"}}
 					{{ctx.Locale.Tr "settings.delete_account_title"}}
@@ -141,7 +141,7 @@
 		{{end}}
 	</div>
 
-<div class="ui g-modal-confirm delete modal" id="delete-email">
+<div class="ui small modal" id="delete-email">
 	<div class="header">
 		{{svg "octicon-trash"}}
 		{{ctx.Locale.Tr "settings.email_deletion"}}
diff --git a/templates/user/settings/applications.tmpl b/templates/user/settings/applications.tmpl
index 195a2c3a57..7c3da41e33 100644
--- a/templates/user/settings/applications.tmpl
+++ b/templates/user/settings/applications.tmpl
@@ -40,7 +40,7 @@
 							</div>
 						</div>
 						<div class="item-trailing">
-								<button class="ui red tiny button delete-button" data-modal-id="delete-token" data-url="{{$.Link}}/delete" data-id="{{.ID}}">
+								<button class="ui red tiny button link-action" data-modal-confirm="#delete-token" data-url="{{$.Link}}/delete?id={{.ID}}">
 									{{svg "octicon-trash"}}
 									{{ctx.Locale.Tr "settings.delete_token"}}
 								</button>
@@ -92,7 +92,7 @@
 		{{end}}
 	</div>
 
-<div class="ui g-modal-confirm delete modal" id="delete-token">
+<div class="ui small modal" id="delete-token">
 	<div class="header">
 		{{svg "octicon-trash"}}
 		{{ctx.Locale.Tr "settings.access_token_deletion"}}
diff --git a/templates/user/settings/applications_oauth2_list.tmpl b/templates/user/settings/applications_oauth2_list.tmpl
index cbec1de7b7..53e5af4eb1 100644
--- a/templates/user/settings/applications_oauth2_list.tmpl
+++ b/templates/user/settings/applications_oauth2_list.tmpl
@@ -24,7 +24,7 @@
 							{{svg "octicon-pencil"}}
 							{{ctx.Locale.Tr "settings.oauth2_application_edit"}}
 						</a>
-						<button class="ui red tiny button delete-button" data-modal-id="remove-gitea-oauth2-application"
+						<button class="ui red tiny button link-action" data-modal-confirm="#remove-gitea-oauth2-application"
 								data-url="{{$.Link}}/oauth2/{{.ID}}/delete">
 							{{svg "octicon-trash"}}
 							{{ctx.Locale.Tr "settings.delete_key"}}
@@ -35,7 +35,7 @@
 		{{end}}
 	</div>
 
-	<div class="ui g-modal-confirm delete modal" id="remove-gitea-oauth2-application">
+	<div class="ui small modal" id="remove-gitea-oauth2-application">
 		<div class="header">
 			{{svg "octicon-trash"}}
 			{{ctx.Locale.Tr "settings.remove_oauth2_application"}}
diff --git a/templates/user/settings/grants_oauth2.tmpl b/templates/user/settings/grants_oauth2.tmpl
index ed2cfad038..6646d877aa 100644
--- a/templates/user/settings/grants_oauth2.tmpl
+++ b/templates/user/settings/grants_oauth2.tmpl
@@ -18,7 +18,7 @@
 					</div>
 				</div>
 				<div class="item-trailing">
-					<button class="ui red tiny button delete-button" data-modal-id="revoke-gitea-oauth2-grant"
+					<button class="ui red tiny button link-action" data-modal-confirm="#revoke-gitea-oauth2-grant"
 							data-url="{{AppSubUrl}}/user/settings/applications/oauth2/{{.ApplicationID}}/revoke/{{.ID}}">
 						{{ctx.Locale.Tr "settings.revoke_key"}}
 					</button>
@@ -27,7 +27,7 @@
 		{{end}}
 	</div>
 
-	<div class="ui g-modal-confirm delete modal" id="revoke-gitea-oauth2-grant">
+	<div class="ui small modal" id="revoke-gitea-oauth2-grant">
 		<div class="header">
 			{{svg "octicon-shield" 16 "tw-mr-1"}}
 			{{ctx.Locale.Tr "settings.revoke_oauth2_grant"}}
diff --git a/templates/user/settings/keys_gpg.tmpl b/templates/user/settings/keys_gpg.tmpl
index e07b84b738..2faf2d619c 100644
--- a/templates/user/settings/keys_gpg.tmpl
+++ b/templates/user/settings/keys_gpg.tmpl
@@ -68,7 +68,7 @@
 					</div>
 				</div>
 				<div class="item-trailing">
-					<button class="ui red tiny button delete-button" data-modal-id="delete-gpg" data-url="{{$.Link}}/delete?type=gpg" data-id="{{.ID}}">
+					<button class="ui red tiny button link-action" data-modal-confirm="#delete-gpg" data-url="{{$.Link}}/delete?type=gpg&id={{.ID}}">
 						{{ctx.Locale.Tr "settings.delete_key"}}
 					</button>
 					{{if and (not .Verified) (ne $.VerifyingID .KeyID)}}
@@ -108,7 +108,7 @@
 			{{end}}
 		{{end}}
 	</div>
-	<div class="ui g-modal-confirm delete modal" id="delete-gpg">
+	<div class="ui small modal" id="delete-gpg">
 		<div class="header">
 			{{svg "octicon-trash"}}
 			{{ctx.Locale.Tr "settings.gpg_key_deletion"}}
diff --git a/templates/user/settings/keys_principal.tmpl b/templates/user/settings/keys_principal.tmpl
index 162f1f43d8..f4ac3336de 100644
--- a/templates/user/settings/keys_principal.tmpl
+++ b/templates/user/settings/keys_principal.tmpl
@@ -26,7 +26,7 @@
 						</div>
 					</div>
 					<div class="item-trailing">
-						<button class="ui red tiny button delete-button" data-modal-id="delete-principal" data-url="{{$.Link}}/delete?type=principal" data-id="{{.ID}}">
+						<button class="ui red tiny button link-action" data-modal-confirm="#delete-principal" data-url="{{$.Link}}/delete?type=principal&id={{.ID}}">
 							{{ctx.Locale.Tr "settings.delete_key"}}
 						</button>
 					</div>
@@ -55,7 +55,7 @@
 		</div>
 	</div>
 
-	<div class="ui g-modal-confirm delete modal" id="delete-principal">
+	<div class="ui small modal" id="delete-principal">
 		<div class="header">
 			{{svg "octicon-trash"}}
 			{{ctx.Locale.Tr "settings.ssh_principal_deletion"}}
diff --git a/templates/user/settings/keys_ssh.tmpl b/templates/user/settings/keys_ssh.tmpl
index 15dc5bb7a9..c4dc3a5c0c 100644
--- a/templates/user/settings/keys_ssh.tmpl
+++ b/templates/user/settings/keys_ssh.tmpl
@@ -56,7 +56,7 @@
 						</div>
 				</div>
 				<div class="item-trailing">
-					<button class="ui red tiny button delete-button{{if index $.ExternalKeys $index}} disabled{{end}}" data-modal-id="delete-ssh" data-url="{{$.Link}}/delete?type=ssh" data-id="{{.ID}}"{{if index $.ExternalKeys $index}} title="{{ctx.Locale.Tr "settings.ssh_externally_managed"}}"{{end}}>
+					<button class="ui red tiny button link-action{{if index $.ExternalKeys $index}} disabled{{end}}" data-modal-confirm="#delete-ssh" data-url="{{$.Link}}/delete?type=ssh&id={{.ID}}"{{if index $.ExternalKeys $index}} title="{{ctx.Locale.Tr "settings.ssh_externally_managed"}}"{{end}}>
 						{{ctx.Locale.Tr "settings.delete_key"}}
 					</button>
 					{{if and (not .Verified) (ne $.VerifyingFingerprint .Fingerprint)}}
@@ -104,7 +104,7 @@
 			{{end}}
 		{{end}}
 	</div>
-	<div class="ui g-modal-confirm delete modal" id="delete-ssh">
+	<div class="ui small modal" id="delete-ssh">
 		<div class="header">
 			{{svg "octicon-trash"}}
 			{{ctx.Locale.Tr "settings.ssh_key_deletion"}}
diff --git a/templates/user/settings/organization.tmpl b/templates/user/settings/organization.tmpl
index 166f34f54a..82ab21b7df 100644
--- a/templates/user/settings/organization.tmpl
+++ b/templates/user/settings/organization.tmpl
@@ -23,13 +23,10 @@
 							</div>
 						</div>
 						<div class="item-trailing">
-							<form>
-								<button class="ui red button delete-button" data-modal-id="leave-organization"
-												data-url="{{.OrganisationLink}}/members/action/leave" data-datauid="{{$.SignedUser.ID}}"
-												data-name="{{$.SignedUser.DisplayName}}"
-												data-data-organization-name="{{.DisplayName}}">{{ctx.Locale.Tr "org.members.leave"}}
-								</button>
-							</form>
+							<button class="ui red button show-modal" data-modal="#leave-organization"
+											data-modal-form.action="{{.OrganisationLink}}/members/action/leave?uid={{$.SignedUser.ID}}"
+											data-modal-organization-name="{{.DisplayName}}">{{ctx.Locale.Tr "org.members.leave"}}
+							</button>
 						</div>
 					</div>
 					{{end}}
@@ -41,14 +38,14 @@
 		</div>
 	</div>
 
-<div class="ui g-modal-confirm delete modal" id="leave-organization">
+<form class="ui small modal form-fetch-action" method="post" id="leave-organization">
 	<div class="header">
 		{{ctx.Locale.Tr "org.members.leave"}}
 	</div>
 	<div class="content">
-		<p>{{ctx.Locale.Tr "org.members.leave.detail" (HTMLFormat `<span class="%s"></span>` "dataOrganizationName")}}</p>
+		<p>{{ctx.Locale.Tr "org.members.leave.detail" (HTMLFormat `<span class="%s"></span>` "organization-name")}}</p>
 	</div>
 	{{template "base/modal_actions_confirm" .}}
-</div>
+</form>
 
 {{template "user/settings/layout_footer" .}}
diff --git a/templates/user/settings/security/accountlinks.tmpl b/templates/user/settings/security/accountlinks.tmpl
index 5df94893f9..97d9bf7826 100644
--- a/templates/user/settings/security/accountlinks.tmpl
+++ b/templates/user/settings/security/accountlinks.tmpl
@@ -40,7 +40,7 @@
 					{{end}}
 				</div>
 				<div class="item-trailing">
-					<button class="ui red tiny button delete-button" data-modal-id="delete-account-link" data-url="{{AppSubUrl}}/user/settings/security/account_link" data-id="{{$loginSource.ID}}">
+					<button class="ui red tiny button link-action" data-modal-confirm="#delete-account-link" data-url="{{AppSubUrl}}/user/settings/security/account_link?id={{$loginSource.ID}}">
 						{{ctx.Locale.Tr "settings.delete_key"}}
 					</button>
 				</div>
@@ -48,7 +48,7 @@
 		{{end}}
 	</div>
 
-	<div class="ui g-modal-confirm delete modal" id="delete-account-link">
+	<div class="ui small modal" id="delete-account-link">
 		<div class="header">
 			{{svg "octicon-trash"}}
 			{{ctx.Locale.Tr "settings.remove_account_link"}}
diff --git a/templates/user/settings/security/openid.tmpl b/templates/user/settings/security/openid.tmpl
index 6ae7d0e0d6..d14091080b 100644
--- a/templates/user/settings/security/openid.tmpl
+++ b/templates/user/settings/security/openid.tmpl
@@ -29,7 +29,7 @@
 							</button>
 						{{end}}
 					</form>
-					<button class="ui red tiny button delete-button" data-modal-id="delete-openid" data-url="{{AppSubUrl}}/user/settings/security/openid/delete" data-id="{{.ID}}">
+					<button class="ui red tiny button link-action" data-modal-confirm="#delete-openid" data-url="{{AppSubUrl}}/user/settings/security/openid/delete?id={{.ID}}">
 						{{ctx.Locale.Tr "settings.delete_key"}}
 					</button>
 				</div>
@@ -48,7 +48,7 @@
 		</button>
 	</form>
 
-	<div class="ui g-modal-confirm delete modal" id="delete-openid">
+	<div class="ui small modal" id="delete-openid">
 		<div class="header">
 			{{svg "octicon-trash"}}
 			{{ctx.Locale.Tr "settings.openid_deletion"}}
diff --git a/templates/user/settings/security/twofa.tmpl b/templates/user/settings/security/twofa.tmpl
index 29dd9df6c8..ff1e396310 100644
--- a/templates/user/settings/security/twofa.tmpl
+++ b/templates/user/settings/security/twofa.tmpl
@@ -9,9 +9,9 @@
 		<p>{{ctx.Locale.Tr "settings.regenerate_scratch_token_desc"}}</p>
 		<button class="ui primary button">{{ctx.Locale.Tr "settings.twofa_scratch_token_regenerate"}}</button>
 	</form>
-	<form class="ui form" action="{{AppSubUrl}}/user/settings/security/two_factor/disable" method="post" enctype="multipart/form-data" id="disable-form">
+	<form class="ui form form-fetch-action" action="{{AppSubUrl}}/user/settings/security/two_factor/disable" method="post">
 		<p>{{ctx.Locale.Tr "settings.twofa_disable_note"}}</p>
-		<button class="ui red button delete-button" data-modal-id="disable-twofa" data-type="form" data-form="#disable-form">{{ctx.Locale.Tr "settings.twofa_disable"}}</button>
+		<button class="ui red button" data-modal-confirm="#disable-twofa">{{ctx.Locale.Tr "settings.twofa_disable"}}</button>
 	</form>
 	{{else}}
 	{{/* The recovery tip is there as a means of encouraging a user to enroll */}}
@@ -22,7 +22,7 @@
 	</div>
 	{{end}}
 
-	<div class="ui g-modal-confirm delete modal" id="disable-twofa">
+	<div class="ui small modal" id="disable-twofa">
 		<div class="header">
 			{{svg "octicon-trash"}}
 			{{ctx.Locale.Tr "settings.twofa_disable"}}
diff --git a/templates/user/settings/security/webauthn.tmpl b/templates/user/settings/security/webauthn.tmpl
index 82653086b0..1bf0159d37 100644
--- a/templates/user/settings/security/webauthn.tmpl
+++ b/templates/user/settings/security/webauthn.tmpl
@@ -16,7 +16,7 @@
 					</div>
 				</div>
 				<div class="item-trailing">
-					<button class="ui red tiny button delete-button" data-modal-id="delete-registration" data-url="{{$.Link}}/webauthn/delete" data-id="{{.ID}}">
+					<button class="ui red tiny button link-action" data-modal-confirm="#delete-registration" data-url="{{$.Link}}/webauthn/delete?id={{.ID}}">
 					{{ctx.Locale.Tr "settings.delete_key"}}
 					</button>
 				</div>
@@ -30,7 +30,7 @@
 		</div>
 		<button id="register-webauthn" class="ui primary button">{{svg "octicon-key"}} {{ctx.Locale.Tr "settings.webauthn_register_key"}}</button>
 	</div>
-	<div class="ui g-modal-confirm delete modal" id="delete-registration">
+	<div class="ui small modal" id="delete-registration">
 		<div class="header">
 			{{svg "octicon-trash"}}
 			{{ctx.Locale.Tr "settings.webauthn_delete_key"}}
diff --git a/tests/e2e/org.test.ts b/tests/e2e/org.test.ts
index 2bf43792d3..7fa12c5bb8 100644
--- a/tests/e2e/org.test.ts
+++ b/tests/e2e/org.test.ts
@@ -32,3 +32,22 @@ test('add team member search', async ({page, request}) => {
   const result = page.locator('#search-user-box .results .result').first();
   await expect(result).toContainText(userName);
 });
+
+test('delete team via confirm modal', async ({page, request}) => {
+  const orgName = `e2e-del-team-${randomString(8)}`;
+  const teamName = `team-${randomString(8)}`;
+  await Promise.all([
+    (async () => {
+      await apiCreateOrg(request, orgName);
+      await apiCreateTeam(request, orgName, teamName);
+    })(),
+    login(page),
+  ]);
+
+  await page.goto(`/org/${orgName}/teams/${teamName}/edit`);
+  await page.getByRole('button', {name: 'Delete Team'}).click();
+  await page.getByRole('button', {name: 'Yes'}).click();
+  await expect(page).toHaveURL(new RegExp(`/org/${orgName}/teams$`));
+  await expect(page.getByText('The team has been deleted.')).toBeVisible();
+  await apiDeleteOrg(request, orgName);
+});
diff --git a/tests/integration/branches_test.go b/tests/integration/branches_test.go
index 0763aef68f..a37f77986a 100644
--- a/tests/integration/branches_test.go
+++ b/tests/integration/branches_test.go
@@ -38,13 +38,13 @@ func TestViewBranches(t *testing.T) {
 }
 
 func TestUndoDeleteBranch(t *testing.T) {
-	branchAction := func(t *testing.T, button string) (*HTMLDoc, string) {
+	branchAction := func(t *testing.T, button, attr string) (*HTMLDoc, string) {
 		session := loginUser(t, "user2")
 		req := NewRequest(t, "GET", "/user2/repo1/branches")
 		resp := session.MakeRequest(t, req, http.StatusOK)
 
 		htmlDoc := NewHTMLParser(t, resp.Body)
-		link, exists := htmlDoc.doc.Find(button).Attr("data-url")
+		link, exists := htmlDoc.doc.Find(button).Attr(attr)
 		require.True(t, exists, "The template has changed")
 		linkURL, err := url.Parse(link)
 		require.NoError(t, err)
@@ -58,12 +58,12 @@ func TestUndoDeleteBranch(t *testing.T) {
 	}
 
 	onGiteaRun(t, func(t *testing.T, u *url.URL) {
-		htmlDoc, name := branchAction(t, ".delete-branch-button")
+		htmlDoc, name := branchAction(t, ".delete-branch-button", "data-modal-form.action")
 		assert.Contains(t,
 			htmlDoc.doc.Find(".ui.positive.message").Text(),
 			translation.NewLocale("en-US").TrString("repo.branch.deletion_success", name),
 		)
-		htmlDoc, name = branchAction(t, ".restore-branch-button")
+		htmlDoc, name = branchAction(t, ".restore-branch-button", "data-url")
 		assert.Contains(t,
 			htmlDoc.doc.Find(".ui.positive.message").Text(),
 			translation.NewLocale("en-US").TrString("repo.branch.restore_success", name),
diff --git a/web_src/css/modules/button.css b/web_src/css/modules/button.css
index f3ece50271..9bc60fd937 100644
--- a/web_src/css/modules/button.css
+++ b/web_src/css/modules/button.css
@@ -326,11 +326,6 @@
   margin: 0 0.25em 0 0;
 }
 
-.delete-button,
-.delete-button:hover {
-  color: var(--color-red);
-}
-
 /* btn is a plain button without any opinionated styling, it only uses flex for vertical alignment like ".ui.button" in base.css */
 
 .btn {
diff --git a/web_src/js/features/common-button.ts b/web_src/js/features/common-button.ts
index efb227351c..cc26103aa3 100644
--- a/web_src/js/features/common-button.ts
+++ b/web_src/js/features/common-button.ts
@@ -1,4 +1,3 @@
-import {POST} from '../modules/fetch.ts';
 import {addDelegatedEventListener, hideElem, isElemVisible, showElem, toggleElem} from '../utils/dom.ts';
 import {showFomanticModal} from '../modules/fomantic/modal.ts';
 import {camelize} from 'vue';
@@ -13,74 +12,6 @@ export function initGlobalButtonClickOnEnter(): void {
   });
 }
 
-export function initGlobalDeleteButton(): void {
-  // ".delete-button" shows a confirmation modal defined by `data-modal-id` attribute.
-  // Some model/form elements will be filled by `data-id` / `data-name` / `data-data-xxx` attributes.
-  // If there is a form defined by `data-form`, then the form will be submitted as-is (without any modification).
-  // If there is no form, then the data will be posted to `data-url`.
-  // TODO: do not use this method in new code. `show-modal` / `link-action(data-modal-confirm)` does far better than this.
-  // FIXME: all legacy `delete-button` should be refactored to use `show-modal` or `link-action`
-  for (const btn of document.querySelectorAll<HTMLElement>('.delete-button')) {
-    btn.addEventListener('click', (e) => {
-      e.preventDefault();
-
-      // eslint-disable-next-line github/no-dataset -- code depends on the camel-casing
-      const dataObj = btn.dataset;
-
-      const modalId = btn.getAttribute('data-modal-id');
-      const modal = document.querySelector(`.delete.modal${modalId ? `#${modalId}` : ''}`)!;
-
-      // set the modal "display name" by `data-name`
-      const modalNameEl = modal.querySelector('.name');
-      if (modalNameEl) modalNameEl.textContent = btn.getAttribute('data-name');
-
-      // fill the modal elements with data-xxx attributes: `data-data-organization-name="..."` => `<span class="dataOrganizationName">...</span>`
-      for (const [key, value] of Object.entries(dataObj)) {
-        if (key.startsWith('data')) {
-          const textEl = modal.querySelector(`.${key}`);
-          if (textEl) textEl.textContent = value ?? null;
-        }
-      }
-
-      showFomanticModal(modal, {
-        closable: false,
-        onApprove: () => {
-          // if `data-type="form"` exists, then submit the form by the selector provided by `data-form="..."`
-          if (btn.getAttribute('data-type') === 'form') {
-            const formSelector = btn.getAttribute('data-form')!;
-            const form = document.querySelector<HTMLFormElement>(formSelector);
-            if (!form) throw new Error(`no form named ${formSelector} found`);
-            modal.classList.add('is-loading'); // the form is not in the modal, so also add loading indicator to the modal
-            form.classList.add('is-loading');
-            form.submit();
-            return false; // prevent modal from closing automatically
-          }
-
-          // prepare an AJAX form by data attributes
-          const postData = new FormData();
-          for (const [key, value] of Object.entries(dataObj)) {
-            if (key.startsWith('data')) { // for data-data-xxx (HTML) -> dataXxx (form)
-              postData.append(key.slice(4), String(value));
-            }
-            if (key === 'id') { // for data-id="..."
-              postData.append('id', String(value));
-            }
-          }
-          (async () => {
-            const response = await POST(btn.getAttribute('data-url')!, {data: postData});
-            if (response.ok) {
-              const data = await response.json();
-              window.location.href = data.redirect;
-            }
-          })();
-          modal.classList.add('is-loading'); // the request is in progress, so also add loading indicator to the modal
-          return false; // prevent modal from closing automatically
-        },
-      });
-    });
-  }
-}
-
 function onShowPanelClick(el: HTMLElement, e: MouseEvent) {
   // a '.show-panel' element can show a panel, by `data-panel="selector"`
   // if it has "toggle" class, it toggles the panel
diff --git a/web_src/js/index.ts b/web_src/js/index.ts
index 6f081f3020..0ca1deb0d3 100644
--- a/web_src/js/index.ts
+++ b/web_src/js/index.ts
@@ -58,7 +58,7 @@ import {initAdminSelfCheck} from './features/admin/selfcheck.ts';
 import {initOAuth2SettingsDisableCheckbox} from './features/oauth2-settings.ts';
 import {initGlobalFetchAction} from './features/common-fetch-action.ts';
 import {initCommmPageComponents, initGlobalComponent, initGlobalDropdown, initGlobalInput} from './features/common-page.ts';
-import {initGlobalButtonClickOnEnter, initGlobalButtons, initGlobalDeleteButton} from './features/common-button.ts';
+import {initGlobalButtonClickOnEnter, initGlobalButtons} from './features/common-button.ts';
 import {initGlobalComboMarkdownEditor, initGlobalEnterQuickSubmit, initGlobalFormDirtyLeaveConfirm} from './features/common-form.ts';
 import {callInitFunctions} from './modules/init.ts';
 import {initRepoViewFileTree} from './features/repo-view-file-tree.ts';
@@ -81,7 +81,6 @@ const initPerformanceTracer = callInitFunctions([
   initGlobalEnterQuickSubmit,
   initGlobalFormDirtyLeaveConfirm,
   initGlobalComboMarkdownEditor,
-  initGlobalDeleteButton,
   initGlobalInput,
   initGlobalShortcut,