diff --git a/models/actions/runner.go b/models/actions/runner.go
index 94503f2881..4efe105b08 100644
--- a/models/actions/runner.go
+++ b/models/actions/runner.go
@@ -236,9 +236,12 @@ func UpdateRunner(ctx context.Context, r *ActionRunner, cols ...string) error {
 }
 
 // DeleteRunner deletes a runner by given ID.
-func DeleteRunner(ctx context.Context, r *ActionRunner) error {
-	e := db.GetEngine(ctx)
-	_, err := e.Delete(r)
+func DeleteRunner(ctx context.Context, id int64) error {
+	if _, err := GetRunnerByID(ctx, id); err != nil {
+		return err
+	}
+
+	_, err := db.GetEngine(ctx).Delete(&ActionRunner{ID: id})
 	return err
 }
 
diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini
index 51ba8866b2..52204db546 100644
--- a/options/locale/locale_en-US.ini
+++ b/options/locale/locale_en-US.ini
@@ -3278,7 +3278,6 @@ runners.delete_runner_success = Runner deleted successfully
 runners.delete_runner_failed = Failed to delete runner
 runners.delete_runner_header = Confirm to delete this runner
 runners.delete_runner_notice = If a task is running on this runner, it will be terminated and mark as failed. It may break building workflow.
-runners.delete_runner_confirm = Delete this runner
 runners.none = No runners available
 runners.status.unspecified = Unknown
 runners.status.idle = Idle
diff --git a/routers/web/shared/actions/runners.go b/routers/web/shared/actions/runners.go
index 88a2118638..f63d37f165 100644
--- a/routers/web/shared/actions/runners.go
+++ b/routers/web/shared/actions/runners.go
@@ -162,25 +162,23 @@ func RunnerResetRegistrationToken(ctx *context.Context, ownerID, repoID int64, r
 func RunnerDeletePost(ctx *context.Context, runnerID int64,
 	successRedirectTo, failedRedirectTo string,
 ) {
-	runner, err := actions_model.GetRunnerByID(ctx, runnerID)
-	if err != nil {
-		log.Warn("DeleteRunnerPost.GetRunnerByID failed: %v, url: %s", err, ctx.Req.URL)
-		ctx.ServerError("DeleteRunnerPost.GetRunnerByID", err)
-		return
-	}
-
-	err = actions_model.DeleteRunner(ctx, runner)
-	if err != nil {
+	if err := actions_model.DeleteRunner(ctx, runnerID); err != nil {
 		log.Warn("DeleteRunnerPost.UpdateRunner failed: %v, url: %s", err, ctx.Req.URL)
-		ctx.Flash.Warning(ctx.Tr("runners.delete_runner_failed"))
-		ctx.Redirect(failedRedirectTo)
+		ctx.Flash.Warning(ctx.Tr("actions.runners.delete_runner_failed"))
+
+		ctx.JSON(http.StatusOK, map[string]interface{}{
+			"redirect": failedRedirectTo,
+		})
 		return
 	}
 
 	log.Info("DeleteRunnerPost success: %s", ctx.Req.URL)
 
-	ctx.Flash.Success(ctx.Tr("runners.delete_runner_success"))
-	ctx.Redirect(successRedirectTo)
+	ctx.Flash.Success(ctx.Tr("actions.runners.delete_runner_success"))
+
+	ctx.JSON(http.StatusOK, map[string]interface{}{
+		"redirect": successRedirectTo,
+	})
 }
 
 func splitLabels(s string) []string {
diff --git a/templates/shared/actions/runner_edit.tmpl b/templates/shared/actions/runner_edit.tmpl
index 37ec3dd92c..584c3f4d55 100644
--- a/templates/shared/actions/runner_edit.tmpl
+++ b/templates/shared/actions/runner_edit.tmpl
@@ -4,7 +4,7 @@
 		{{.locale.Tr "actions.runners.runner_title"}} {{template "shared/actions/runner_id" .Runner.ID}} {{.Runner.Name}}
 	</h4>
 	<div class="ui attached segment">
-		<form class="ui form" action="{{.Link}}" method="post">
+		<form class="ui form" method="post">
 			{{template "base/disable_form_autofill"}}
 			{{.CsrfTokenHtml}}
 			<div class="runner-basic-info">
@@ -45,8 +45,8 @@
 			<div class="ui divider"></div>
 
 			<div class="field">
-				<button type="submit" class="ui green button">{{.locale.Tr "actions.runners.update_runner"}}</button>
-				<button type="button" class="ui red button delete-button show-modal" data-modal="#runner-delete-modal">
+				<button class="ui green button" data-url="{{.Link}}">{{.locale.Tr "actions.runners.update_runner"}}</button>
+				<button class="ui red button delete-button show-modal" data-url="{{.Link}}/delete" data-modal="#runner-delete-modal">
 					{{.locale.Tr "actions.runners.delete_runner"}}</button>
 			</div>
 		</form>
@@ -89,22 +89,14 @@
 		</table>
 		{{template "base/paginate" .}}
 	</div>
-	<div class="ui small modal" id="runner-delete-modal">
-		<div class="header">
+	<div class="ui small basic delete modal" id="runner-delete-modal">
+		<div class="ui icon header">
+			{{svg "octicon-trash"}}
 			{{.locale.Tr "actions.runners.delete_runner_header"}}
 		</div>
 		<div class="content">
-			<div class="ui warning message text left">
-				{{.locale.Tr "actions.runners.delete_runner_notice" | Safe}}
-			</div>
-			<form class="ui form" action="{{.Link}}/delete" method="post">
-				{{.CsrfTokenHtml}}
-				<input type="hidden" name="action" value="delete">
-				<div class="text right actions">
-					<div class="ui cancel button">{{.locale.Tr "settings.cancel"}}</div>
-					<button class="ui red button">{{.locale.Tr "actions.runners.delete_runner_confirm"}}</button>
-				</div>
-			</form>
+			<p>{{.locale.Tr "actions.runners.delete_runner_notice" | Safe}}</p>
 		</div>
+		{{template "base/delete_modal_actions" .}}
 	</div>
 </div>