diff --git a/routers/web/repo/issue_view.go b/routers/web/repo/issue_view.go
index 852b880ab05..28fdfb34faa 100644
--- a/routers/web/repo/issue_view.go
+++ b/routers/web/repo/issue_view.go
@@ -835,14 +835,14 @@ func (prInfo *pullRequestViewInfo) prepareMergeBox(ctx *context.Context, issue *
 	}
 
 	canDelete := false
-	allowMerge := false
 	canWriteToHeadRepo := false
 
 	pull_service.StartPullRequestCheckOnView(ctx, pull)
 
 	if !prInfo.IsPullRequestBroken {
+		data.ShowUpdatePullInfo = pull.CommitsBehind > 0 && !issue.IsClosed && !pull.IsChecking() && !pull.IsFilesConflicted() && !prInfo.IsPullRequestBroken
 		var err error
-		ctx.Data["UpdateAllowed"], ctx.Data["UpdateByRebaseAllowed"], err = pull_service.IsUserAllowedToUpdate(ctx, pull, ctx.Doer)
+		data.UpdateAllowed, data.UpdateByRebaseAllowed, err = pull_service.IsUserAllowedToUpdate(ctx, pull, ctx.Doer)
 		if err != nil {
 			ctx.ServerError("IsUserAllowedToUpdate", err)
 			return
@@ -888,7 +888,7 @@ func (prInfo *pullRequestViewInfo) prepareMergeBox(ctx *context.Context, issue *
 		if !canWriteToHeadRepo { // maintainers maybe allowed to push to head repo even if they can't write to it
 			canWriteToHeadRepo = pull.AllowMaintainerEdit && perm.CanWrite(unit.TypeCode)
 		}
-		allowMerge, err = pull_service.IsUserAllowedToMerge(ctx, pull, perm, ctx.Doer)
+		data.allowMerge, err = pull_service.IsUserAllowedToMerge(ctx, pull, perm, ctx.Doer)
 		if err != nil {
 			ctx.ServerError("IsUserAllowedToMerge", err)
 			return
@@ -903,7 +903,7 @@ func (prInfo *pullRequestViewInfo) prepareMergeBox(ctx *context.Context, issue *
 	data.ReloadingInterval = util.Iif(pull.IsChecking(), 2000, 0)
 	data.ShowMergeInstructions = canWriteToHeadRepo
 	data.ShowPullCommands = pull.HeadRepo != nil && !pull.HasMerged && !issue.IsClosed
-	ctx.Data["AllowMerge"] = allowMerge
+	ctx.Data["AllowMerge"] = data.allowMerge
 
 	pb := prInfo.ProtectedBranchRule
 	if pb != nil {
@@ -947,18 +947,6 @@ func (prInfo *pullRequestViewInfo) prepareMergeBox(ctx *context.Context, issue *
 	prConfig := issue.Repo.MustGetUnit(ctx, unit.TypePullRequests).PullRequestsConfig()
 	data.AutodetectManualMerge = prConfig.AutodetectManualMerge
 
-	stillCanManualMerge := func() bool {
-		if pull.HasMerged || issue.IsClosed || !ctx.IsSigned {
-			return false
-		}
-		if pull.IsStatusMergeable() || pull.IsWorkInProgress(ctx) || pull.IsChecking() {
-			return false
-		}
-		return allowMerge && prConfig.AllowManualMerge
-	}
-
-	ctx.Data["StillCanManualMerge"] = stillCanManualMerge()
-
 	enableStatusCheck := pb != nil && pb.EnableStatusCheck
 	ctx.Data["EnableStatusCheck"] = enableStatusCheck
 
@@ -989,6 +977,7 @@ func (prInfo *pullRequestViewInfo) prepareMergeBox(ctx *context.Context, issue *
 
 	ctx.Data["PullMergeBoxData"] = prInfo.MergeBoxData
 	prInfo.prepareMergeBoxFormProps(ctx)
+	prInfo.prepareMergeBoxIconColor()
 }
 
 func prepareIssueViewContent(ctx *context.Context, issue *issues_model.Issue) {
diff --git a/routers/web/repo/pull.go b/routers/web/repo/pull.go
index 7406c1d1228..404f77beb7a 100644
--- a/routers/web/repo/pull.go
+++ b/routers/web/repo/pull.go
@@ -266,8 +266,15 @@ type pullMergeBoxData struct {
 	ShowMergeBox      bool
 	ReloadingInterval int
 
+	TimelineIconClass string
+
 	HasOverridableBlockers bool
-	CanMergeNow            bool
+	CanMergeNow            bool // PR is mergeable, either no blocker, or doer is admin and can bypass the blockers
+	allowMerge             bool // doer has permission to merge
+
+	ShowUpdatePullInfo    bool
+	UpdateAllowed         bool
+	UpdateByRebaseAllowed bool
 
 	MergeFormProps        map[string]any
 	ShowPullCommands      bool
@@ -302,6 +309,9 @@ type pullRequestViewInfo struct {
 	StatusCheckData     *pullCommitStatusCheckData
 	CommitStatuses      []*git_model.CommitStatus
 	MergeBoxData        *pullMergeBoxData
+
+	enableStatusCheck    bool
+	workInProgressPrefix string
 }
 
 func newPullRequestViewInfo() *pullRequestViewInfo {
@@ -430,8 +440,8 @@ func (prInfo *pullRequestViewInfo) prepareViewFillCommitStatusInfoForOpen(ctx *c
 	}
 
 	pb := prInfo.ProtectedBranchRule
-	enableStatusCheck := pb != nil && pb.EnableStatusCheck
-	if !enableStatusCheck {
+	prInfo.enableStatusCheck = pb != nil && pb.EnableStatusCheck
+	if !prInfo.enableStatusCheck {
 		return
 	}
 
@@ -549,9 +559,10 @@ func (prInfo *pullRequestViewInfo) prepareViewOpenPullInfo(ctx *context.Context)
 	}
 
 	// this one is used by both sidebar and merge-box
+	prInfo.workInProgressPrefix = pull.GetWorkInProgressPrefix(ctx)
 	if pull.IsWorkInProgress(ctx) {
-		ctx.Data["IsPullWorkInProgress"] = true
-		ctx.Data["WorkInProgressPrefix"] = pull.GetWorkInProgressPrefix(ctx)
+		ctx.Data["IsPullWorkInProgress"] = prInfo.workInProgressPrefix != ""
+		ctx.Data["WorkInProgressPrefix"] = prInfo.workInProgressPrefix
 	}
 }
 
diff --git a/routers/web/repo/pull_merge_box.go b/routers/web/repo/pull_merge_box.go
new file mode 100644
index 00000000000..4163d98cbfd
--- /dev/null
+++ b/routers/web/repo/pull_merge_box.go
@@ -0,0 +1,33 @@
+// Copyright 2026 The Gitea Authors. All rights reserved.
+// SPDX-License-Identifier: MIT
+
+package repo
+
+func (prInfo *pullRequestViewInfo) prepareMergeBoxIconColor() {
+	pull := prInfo.issue.PullRequest
+	mergeBoxData := prInfo.MergeBoxData
+	statusCheckData := prInfo.StatusCheckData
+	switch {
+	case pull.HasMerged:
+		prInfo.MergeBoxData.TimelineIconClass = "tw-text-purple"
+	case prInfo.issue.IsClosed, prInfo.workInProgressPrefix != "", pull.IsFilesConflicted():
+		prInfo.MergeBoxData.TimelineIconClass = "tw-text-text-light"
+	case prInfo.IsPullRequestBroken, mergeBoxData.isBlockedByApprovals, mergeBoxData.isBlockedByRejection,
+		mergeBoxData.isBlockedByOfficialReviewRequests, mergeBoxData.isBlockedByOutdatedBranch, mergeBoxData.isBlockedByChangedProtectedFiles:
+		prInfo.MergeBoxData.TimelineIconClass = "tw-text-red"
+	case prInfo.enableStatusCheck && (statusCheckData.RequiredChecksState.IsFailure() || statusCheckData.RequiredChecksState.IsError()):
+		prInfo.MergeBoxData.TimelineIconClass = "tw-text-red"
+	case prInfo.enableStatusCheck && (statusCheckData.LatestCommitStatus == nil || statusCheckData.RequiredChecksState.IsPending() || statusCheckData.RequiredChecksState.IsWarning()):
+		prInfo.MergeBoxData.TimelineIconClass = "tw-text-yellow"
+	case mergeBoxData.allowMerge && mergeBoxData.requireSigned && !mergeBoxData.willSign:
+		prInfo.MergeBoxData.TimelineIconClass = "tw-text-red"
+	case pull.IsChecking():
+		prInfo.MergeBoxData.TimelineIconClass = "tw-text-yellow"
+	case pull.IsEmpty():
+		prInfo.MergeBoxData.TimelineIconClass = "tw-text-text-light"
+	case pull.IsStatusMergeable():
+		prInfo.MergeBoxData.TimelineIconClass = "tw-text-green"
+	default:
+		prInfo.MergeBoxData.TimelineIconClass = "tw-text-red"
+	}
+}
diff --git a/routers/web/repo/pull_merge_form.go b/routers/web/repo/pull_merge_form.go
index b390fd69349..0cc2bfc27b0 100644
--- a/routers/web/repo/pull_merge_form.go
+++ b/routers/web/repo/pull_merge_form.go
@@ -16,6 +16,13 @@ import (
 
 func (prInfo *pullRequestViewInfo) prepareMergeBoxFormProps(ctx *context.Context) {
 	pull := prInfo.issue.PullRequest
+	if pull.HasMerged || prInfo.issue.IsClosed {
+		return
+	}
+	if !prInfo.MergeBoxData.allowMerge {
+		return
+	}
+
 	prConfig := ctx.Repo.Repository.MustGetUnit(ctx, unit.TypePullRequests).PullRequestsConfig()
 
 	// Check correct values and select default
@@ -69,7 +76,7 @@ func (prInfo *pullRequestViewInfo) prepareMergeBoxFormProps(ctx *context.Context
 	}
 
 	allOverridableChecksOk := !prInfo.MergeBoxData.HasOverridableBlockers
-	prInfo.MergeBoxData.MergeFormProps = map[string]any{
+	mergeFormProps := map[string]any{
 		"baseLink":                       prInfo.issue.Link(),
 		"textCancel":                     ctx.Locale.Tr("cancel"),
 		"textDeleteBranch":               ctx.Locale.Tr("repo.branch.delete", prInfo.headTarget),
@@ -97,51 +104,75 @@ func (prInfo *pullRequestViewInfo) prepareMergeBoxFormProps(ctx *context.Context
 	// if this pr can be merged now, then hide the auto merge
 	generalHideAutoMerge := prInfo.MergeBoxData.CanMergeNow && allOverridableChecksOk
 
-	prInfo.MergeBoxData.MergeFormProps["mergeStyles"] = []any{
-		map[string]any{
-			"name":                  "merge",
-			"allowed":               prConfig.AllowMerge,
-			"textDoMerge":           ctx.Locale.Tr("repo.pulls.merge_pull_request"),
-			"mergeTitleFieldText":   defaultMergeTitle,
-			"mergeMessageFieldText": defaultMergeBody,
-			"hideAutoMerge":         generalHideAutoMerge,
-		},
-		map[string]any{
-			"name":                  "rebase",
-			"allowed":               prConfig.AllowRebase,
-			"textDoMerge":           ctx.Locale.Tr("repo.pulls.rebase_merge_pull_request"),
-			"hideMergeMessageTexts": true,
-			"hideAutoMerge":         generalHideAutoMerge,
-		},
-		map[string]any{
-			"name":                  "rebase-merge",
-			"allowed":               prConfig.AllowRebaseMerge,
-			"textDoMerge":           ctx.Locale.Tr("repo.pulls.rebase_merge_commit_pull_request"),
-			"mergeTitleFieldText":   defaultMergeTitle,
-			"mergeMessageFieldText": defaultMergeBody,
-			"hideAutoMerge":         generalHideAutoMerge,
-		},
-		map[string]any{
-			"name":                  "squash",
-			"allowed":               prConfig.AllowSquash,
-			"textDoMerge":           ctx.Locale.Tr("repo.pulls.squash_merge_pull_request"),
-			"mergeTitleFieldText":   defaultSquashMergeTitle,
-			"mergeMessageFieldText": defaultSquashMergeCommitMessages + defaultSquashMergeBody,
-			"hideAutoMerge":         generalHideAutoMerge,
-		},
-		map[string]any{
-			"name":                  "fast-forward-only",
-			"allowed":               prConfig.AllowFastForwardOnly && pull.CommitsBehind == 0,
-			"textDoMerge":           ctx.Locale.Tr("repo.pulls.fast_forward_only_merge_pull_request"),
-			"hideMergeMessageTexts": true,
-			"hideAutoMerge":         generalHideAutoMerge,
-		},
-		map[string]any{
+	var mergeStyles []any
+	if pull.IsStatusMergeable() {
+		mergeStyles = []any{
+			map[string]any{
+				"name":                  "merge",
+				"allowed":               prConfig.AllowMerge,
+				"textDoMerge":           ctx.Locale.Tr("repo.pulls.merge_pull_request"),
+				"mergeTitleFieldText":   defaultMergeTitle,
+				"mergeMessageFieldText": defaultMergeBody,
+				"hideAutoMerge":         generalHideAutoMerge,
+			},
+			map[string]any{
+				"name":                  "rebase",
+				"allowed":               prConfig.AllowRebase,
+				"textDoMerge":           ctx.Locale.Tr("repo.pulls.rebase_merge_pull_request"),
+				"hideMergeMessageTexts": true,
+				"hideAutoMerge":         generalHideAutoMerge,
+			},
+			map[string]any{
+				"name":                  "rebase-merge",
+				"allowed":               prConfig.AllowRebaseMerge,
+				"textDoMerge":           ctx.Locale.Tr("repo.pulls.rebase_merge_commit_pull_request"),
+				"mergeTitleFieldText":   defaultMergeTitle,
+				"mergeMessageFieldText": defaultMergeBody,
+				"hideAutoMerge":         generalHideAutoMerge,
+			},
+			map[string]any{
+				"name":                  "squash",
+				"allowed":               prConfig.AllowSquash,
+				"textDoMerge":           ctx.Locale.Tr("repo.pulls.squash_merge_pull_request"),
+				"mergeTitleFieldText":   defaultSquashMergeTitle,
+				"mergeMessageFieldText": defaultSquashMergeCommitMessages + defaultSquashMergeBody,
+				"hideAutoMerge":         generalHideAutoMerge,
+			},
+			map[string]any{
+				"name":                  "fast-forward-only",
+				"allowed":               prConfig.AllowFastForwardOnly && pull.CommitsBehind == 0,
+				"textDoMerge":           ctx.Locale.Tr("repo.pulls.fast_forward_only_merge_pull_request"),
+				"hideMergeMessageTexts": true,
+				"hideAutoMerge":         generalHideAutoMerge,
+			},
+		}
+	}
+
+	canUseManualMerge := func() bool {
+		if pull.IsWorkInProgress(ctx) || pull.IsChecking() {
+			return false
+		}
+		return prConfig.AllowManualMerge
+	}
+	// Manually Merged is not a well-known feature, it is used to mark a non-mergeable PR (already merged, conflicted) as merged
+	// To test it:
+	//  Enable "Manually Merged" feature in the Repository Settings
+	//  Create a pull request, either:
+	//  - Merge the pull request branch locally and push the merged commit to Gitea
+	//  - Make some conflicts between the base branch and the pull request branch
+	//  Then the Manually Merged form will be shown in the merge form
+	if canUseManualMerge() {
+		mergeStyles = append(mergeStyles, map[string]any{
 			"name":                  "manually-merged",
 			"allowed":               prConfig.AllowManualMerge,
 			"textDoMerge":           ctx.Locale.Tr("repo.pulls.merge_manually"),
 			"hideMergeMessageTexts": true,
 			"hideAutoMerge":         true,
-		},
+		})
+	}
+
+	if len(mergeStyles) > 0 {
+		mergeFormProps["mergeStyles"] = mergeStyles
+		prInfo.MergeBoxData.MergeFormProps = mergeFormProps
 	}
 }
diff --git a/templates/devtest/flex-list.tmpl b/templates/devtest/flex-list.tmpl
index 02f0df9ff92..22030202440 100644
--- a/templates/devtest/flex-list.tmpl
+++ b/templates/devtest/flex-list.tmpl
@@ -102,34 +102,26 @@
 			</div>
 		</div>
 		<h3>Flex List (with "ui segment fitted", items have their own padding)</h3>
-		<div class="ui attached segment fitted container-divided">
-			<div class="flex-divided-list container-divided">
+		<div class="ui fitted segment">
+			<div class="flex-divided-list items-px-default">
 				<div class="item">item 1</div>
 				<div class="item">item 2</div>
-				<div class="item flex-divided-list">
-					<div class="item">item nested 1</div>
-					<div class="item">item nested 2</div>
-				</div>
 				<div class="item">item 3</div>
 			</div>
 		</div>
 
 		<h3>If parent provides padding or items need their own flex and/or padding:</h3>
-		<div class="container-divided tw-border tw-border-secondary">
+		<div class="tw-border tw-border-secondary">
 			<div class="tw-m-3">before divider</div>
 			<div class="divider"></div>
-			<div class="flex-divided-list container-divided flex-items-block">
+			<div class="flex-divided-list flex-items-block items-px-default">
 				<div class="item">item 1</div>
 				<div class="item">item 2</div>
-				<div class="item flex-divided-list">
-					<div class="item">item nested 1</div>
-					<div class="item">item nested 2</div>
-				</div>
 			</div>
 			<div class="divider"></div>
 			<div class="tw-m-3">after divider</div>
 		</div>
-		<div class="container-padded tw-border tw-border-secondary tw-p-4 tw-my-2">
+		<div class="tw-border tw-border-secondary tw-p-4 tw-my-2">
 			<div>before divider</div>
 			<div class="divider"></div>
 			<div class="flex-divided-list">
diff --git a/templates/repo/commit_statuses.tmpl b/templates/repo/commit_statuses.tmpl
index 2f9f44fabe4..4575827cebc 100644
--- a/templates/repo/commit_statuses.tmpl
+++ b/templates/repo/commit_statuses.tmpl
@@ -9,10 +9,8 @@
 		</span>
 	{{end}}
 	<div class="tippy-target">
-		<div class="ui segment">
-			<div class="flex-divided-list">
-				{{template "repo/pulls/status" (dict "CommitStatuses" .Statuses "CommitStatus" .Status)}}
-			</div>
+		<div class="flex-divided-list items-px-default">
+			{{template "repo/pulls/status_items" (dict "CommitStatuses" .Statuses)}}
 		</div>
 	</div>
 {{end}}
diff --git a/templates/repo/issue/view_content/pull_merge_box.tmpl b/templates/repo/issue/view_content/pull_merge_box.tmpl
index 2bda4ad83f6..610016e27c6 100644
--- a/templates/repo/issue/view_content/pull_merge_box.tmpl
+++ b/templates/repo/issue/view_content/pull_merge_box.tmpl
@@ -9,36 +9,17 @@
 >
 	{{$statusCheckData := .StatusCheckData}}
 	{{$requiredStatusCheckState := $statusCheckData.RequiredChecksState}}
-	<div class="timeline-avatar {{if .Issue.PullRequest.HasMerged}}tw-text-purple
-	{{- else if .Issue.IsClosed}}tw-text-text-light
-	{{- else if .IsPullWorkInProgress}}tw-text-text-light
-	{{- else if .IsFilesConflicted}}tw-text-text-light
-	{{- else if .IsPullRequestBroken}}tw-text-red
-	{{- else if .IsBlockedByApprovals}}tw-text-red
-	{{- else if .IsBlockedByRejection}}tw-text-red
-	{{- else if .IsBlockedByOfficialReviewRequests}}tw-text-red
-	{{- else if .IsBlockedByOutdatedBranch}}tw-text-red
-	{{- else if .IsBlockedByChangedProtectedFiles}}tw-text-red
-	{{- else if and .EnableStatusCheck (or $requiredStatusCheckState.IsFailure $requiredStatusCheckState.IsError)}}tw-text-red
-	{{- else if and .EnableStatusCheck (or (not $.LatestCommitStatus) $requiredStatusCheckState.IsPending $requiredStatusCheckState.IsWarning)}}tw-text-yellow
-	{{- else if and .AllowMerge .RequireSigned (not .WillSign)}}tw-text-red
-	{{- else if .Issue.PullRequest.IsChecking}}tw-text-yellow
-	{{- else if .Issue.PullRequest.IsEmpty}}tw-text-text-light
-	{{- else if .Issue.PullRequest.IsStatusMergeable}}tw-text-green
-	{{- else}}tw-text-red{{end}}">{{svg "octicon-git-merge" 40}}</div>
+	<div class="timeline-avatar {{$data.TimelineIconClass}}">{{svg "octicon-git-merge" 40}}</div>
 	<div class="content">
-		<div class="ui segment fitted avatar-content-left-arrow container-divided">
-			<div class="merge-section flex-divided-list flex-items-block container-divided">
+		<div class="ui segment fitted avatar-content-left-arrow">
+			<div class="merge-section flex-divided-list flex-items-block items-px-default">
 			{{if .LatestCommitStatus}}
-				{{template "repo/pulls/status" (dict
-					"CommitStatus" .LatestCommitStatus
+				{{template "repo/issue/view_content/pull_merge_status_checks" (dict
 					"CommitStatuses" .LatestCommitStatuses
-					"ShowHideChecks" true
 					"StatusCheckData" $statusCheckData
 				)}}
 			{{end}}
 
-			{{$showGeneralMergeForm := false}}
 			{{if .Issue.PullRequest.HasMerged}}
 				{{if .IsPullBranchDeletable}}
 					<div class="item item-section text tw-flex-1">
@@ -113,7 +94,7 @@
 					{{svg "octicon-alert"}}
 					{{ctx.Locale.Tr "repo.pulls.is_ancestor"}}
 				</div>
-			{{else if or .Issue.PullRequest.IsStatusMergeable .Issue.PullRequest.IsEmpty}}
+			{{else}}
 				{{if .IsBlockedByApprovals}}
 					<div class="item">
 						{{svg "octicon-x"}}
@@ -167,6 +148,15 @@
 						{{svg "octicon-unlock"}}
 						{{ctx.Locale.Tr (printf "repo.signing.wont_sign.%s" .WontSignReason)}}
 					</div>
+				{{else if not .Issue.PullRequest.IsStatusMergeable}}
+					<div class="item tw-text-red">
+						{{svg "octicon-x"}}
+						{{ctx.Locale.Tr "repo.pulls.cannot_auto_merge_desc"}}
+					</div>
+					<div class="item">
+						{{svg "octicon-info"}}
+						{{ctx.Locale.Tr "repo.pulls.cannot_auto_merge_helper"}}
+					</div>
 				{{end}}
 
 				{{$notAllOverridableChecksOk := $data.HasOverridableBlockers}}
@@ -197,112 +187,38 @@
 					{{end}}
 				{{end}}
 
-				{{template "repo/issue/view_content/update_branch_by_merge" $}}
-
 				{{if .Issue.PullRequest.IsEmpty}}
-					<div class="item">
-						{{svg "octicon-alert"}}
-						{{ctx.Locale.Tr "repo.pulls.is_empty"}}
-					</div>
+				<div class="item">
+					{{svg "octicon-alert"}}
+					{{ctx.Locale.Tr "repo.pulls.is_empty"}}
+				</div>
 				{{end}}
 
-				{{if .AllowMerge}} {{/* user is allowed to merge */}}
-					{{if $data.MergeFormProps}}
-						{{$showGeneralMergeForm = true}}
-						{{/* The merge form is a Vue component. After mounted, it has a button for choosing merge style, so make it have min-height to avoid layout shifting */}}
-						<div class="item">
-							<div id="pull-request-merge-form" class="tw-min-h-[40px]" data-merge-form-props="{{JsonUtils.EncodeToString $data.MergeFormProps}}"></div>
-						</div>
-					{{else}}
-						{{/* no merge style was set in repo setting: not or ($prUnit.PullRequestsConfig.AllowMerge ...) */}}
-						<div class="item tw-text-red">
-							{{svg "octicon-x"}}
-							{{ctx.Locale.Tr "repo.pulls.no_merge_desc"}}
-						</div>
-						<div class="item">
-							{{svg "octicon-info"}}
-							{{ctx.Locale.Tr "repo.pulls.no_merge_helper"}}
-						</div>
-					{{end}} {{/* end if the repo was set to use any merge style */}}
-				{{else}}
+				{{template "repo/issue/view_content/update_branch_by_merge" (dict "MergeBoxData" $data "Issue" $.Issue)}}
+
+				{{if not .AllowMerge}} {{/* user is allowed to merge */}}
 					{{/* user is not allowed to merge */}}
 					<div class="item">
 						{{svg "octicon-info"}}
 						{{ctx.Locale.Tr "repo.pulls.no_merge_access"}}
 					</div>
-				{{end}} {{/* end if user is allowed to merge or not */}}
-			{{else}}
-				{{/* Merge conflict without specific file. Suggest manual merge, only if all reviews and status checks OK. */}}
-				{{if .IsBlockedByApprovals}}
-					<div class="item tw-text-red">
-						{{svg "octicon-x"}}
-						{{ctx.Locale.Tr "repo.pulls.blocked_by_approvals" .GrantedApprovals .ProtectedBranch.RequiredApprovals}}
-					</div>
-				{{else if .IsBlockedByRejection}}
-					<div class="item tw-text-red">
-						{{svg "octicon-x"}}
-						{{ctx.Locale.Tr "repo.pulls.blocked_by_rejection"}}
-					</div>
-				{{else if .IsBlockedByOfficialReviewRequests}}
-					<div class="item tw-text-red">
-						{{svg "octicon-x"}}
-						{{ctx.Locale.Tr "repo.pulls.blocked_by_official_review_requests"}}
-					</div>
-				{{else if .IsBlockedByOutdatedBranch}}
-					<div class="item tw-text-red">
-						{{svg "octicon-x"}}
-						{{ctx.Locale.Tr "repo.pulls.blocked_by_outdated_branch"}}
-					</div>
-				{{else if .IsBlockedByChangedProtectedFiles}}
-					<div class="item tw-text-red">
-						{{svg "octicon-x"}}
-						{{ctx.Locale.TrN $.ChangedProtectedFilesNum "repo.pulls.blocked_by_changed_protected_files_1" "repo.pulls.blocked_by_changed_protected_files_n"}}
-					</div>
-					<ul class="item">
-						{{range .ChangedProtectedFiles}}
-						<li>{{.}}</li>
-						{{end}}
-					</ul>
-				{{else if and .EnableStatusCheck (not $requiredStatusCheckState.IsSuccess)}}
-					<div class="item tw-text-red">
-						{{svg "octicon-x"}}
-						{{ctx.Locale.Tr "repo.pulls.required_status_check_failed"}}
-					</div>
-				{{else if and .RequireSigned (not .WillSign)}}
-					<div class="item tw-text-red">
-						{{svg "octicon-x"}}
-						{{ctx.Locale.Tr "repo.pulls.require_signed_wont_sign"}}
-					</div>
-				{{else}}
-					<div class="item tw-text-red">
-						{{svg "octicon-x"}}
-						{{ctx.Locale.Tr "repo.pulls.cannot_auto_merge_desc"}}
-					</div>
-					<div class="item">
-						{{svg "octicon-info"}}
-						{{ctx.Locale.Tr "repo.pulls.cannot_auto_merge_helper"}}
-					</div>
 				{{end}}
 			{{end}}{{/* end if: pull request status */}}
 
-			{{/* Manually Merged is not a well-known feature, it is used to mark a non-mergeable PR (already merged, conflicted) as merged
-			To test it:
-			* Enable "Manually Merged" feature in the Repository Settings
-			* Create a pull request, either:
-			* - Merge the pull request branch locally and push the merged commit to Gitea
-			* - Make some conflicts between the base branch and the pull request branch
-			* Then the Manually Merged form will be shown in the merge form
-			*/}}
-			{{if and $.StillCanManualMerge (not $showGeneralMergeForm)}}
+			{{if $data.MergeFormProps}}
+				{{/* The merge form is a Vue component. After mounted, it has a button for choosing merge style, so make it have min-height to avoid layout shifting */}}
 				<div class="item">
-					<form class="ui form form-fetch-action tw-flex-1" action="{{.Issue.Link}}/merge" method="post">{{/* another similar form is in PullRequestMergeForm.vue*/}}
-						<div class="field">
-							<input type="text" name="merge_commit_id" placeholder="{{ctx.Locale.Tr "repo.pulls.merge_commit_id"}}">
-						</div>
-						<button class="ui red button" type="submit" name="do" value="manually-merged">
-							{{ctx.Locale.Tr "repo.pulls.merge_manually"}}
-						</button>
-					</form>
+					<div id="pull-request-merge-form" class="tw-min-h-[40px] tw-w-full" data-merge-form-props="{{JsonUtils.EncodeToString $data.MergeFormProps}}"></div>
+				</div>
+			{{else if and .AllowMerge .Issue.PullRequest.IsStatusMergeable}}
+				{{/* no merge style was set in repo setting */}}
+				<div class="item tw-text-red">
+					{{svg "octicon-x"}}
+					{{ctx.Locale.Tr "repo.pulls.no_merge_desc"}}
+				</div>
+				<div class="item">
+					{{svg "octicon-info"}}
+					{{ctx.Locale.Tr "repo.pulls.no_merge_helper"}}
 				</div>
 			{{end}}
 
diff --git a/templates/repo/issue/view_content/pull_merge_status_checks.tmpl b/templates/repo/issue/view_content/pull_merge_status_checks.tmpl
new file mode 100644
index 00000000000..24cf9d39e10
--- /dev/null
+++ b/templates/repo/issue/view_content/pull_merge_status_checks.tmpl
@@ -0,0 +1,35 @@
+{{/* Template Attributes:
+* CommitStatuses: all commit status elements
+* StatusCheckData: additional status check data, see backend pullCommitStatusCheckData struct
+*/}}
+{{$commitStatuses := $.CommitStatuses}}
+{{$statusCheckData := $.StatusCheckData}}
+{{if $statusCheckData}}
+	<div class="item flex-left-right commit-status-toggle">
+		<div>{{$statusCheckData.CommitStatusCheckPrompt ctx.Locale}}</div>
+		<button data-global-click="onCommitStatusChecksToggle" class="btn interact-fg"
+						data-show-all="{{ctx.Locale.Tr "repo.pulls.status_checks_show_all"}}"
+						data-hide-all="{{ctx.Locale.Tr "repo.pulls.status_checks_hide_all"}}"
+		>{{ctx.Locale.Tr "repo.pulls.status_checks_hide_all"}}</button>
+	</div>
+
+	{{if $statusCheckData.RequireApprovalRunCount}}
+	<div class="item flex-left-right" id="approve-status-checks">
+		<div>
+			<strong>{{ctx.Locale.Tr "repo.pulls.status_checks_need_approvals" $statusCheckData.RequireApprovalRunCount}}</strong>
+			<p>{{ctx.Locale.Tr "repo.pulls.status_checks_need_approvals_helper"}}</p>
+		</div>
+		{{if $statusCheckData.CanApprove}}
+		<button class="ui basic button link-action" data-url="{{$statusCheckData.ApproveLink}}">
+			{{ctx.Locale.Tr "repo.pulls.status_checks_approve_all"}}
+		</button>
+		{{end}}
+	</div>
+	{{end}}
+
+	<div class="item tw-p-0">
+		<div class="commit-status-list flex-divided-list items-px-default">
+			{{template "repo/pulls/status_items" (dict "CommitStatuses" $commitStatuses "StatusCheckData" $statusCheckData)}}
+		</div>
+	</div>
+{{end}}
diff --git a/templates/repo/issue/view_content/update_branch_by_merge.tmpl b/templates/repo/issue/view_content/update_branch_by_merge.tmpl
index 940da17db19..0d2a40031ef 100644
--- a/templates/repo/issue/view_content/update_branch_by_merge.tmpl
+++ b/templates/repo/issue/view_content/update_branch_by_merge.tmpl
@@ -1,30 +1,30 @@
-{{if and (gt $.Issue.PullRequest.CommitsBehind 0) (not $.Issue.IsClosed) (not $.Issue.PullRequest.IsChecking) (not $.IsPullFilesConflicted) (not $.IsPullRequestBroken)}}
-	<div class="item item-section">
-		<div class="item-section-left flex-text-inline">
+{{$data := $.MergeBoxData}}
+{{$issue := $.Issue}}
+{{if $data.ShowUpdatePullInfo}}
+	<div class="item flex-left-right">
+		<div class="flex-text-block">
 			{{svg "octicon-alert"}}
 			{{ctx.Locale.Tr "repo.pulls.outdated_with_base_branch"}}
 		</div>
-		<div class="item-section-right">
-			{{if and $.UpdateAllowed $.UpdateByRebaseAllowed}}
-				<div class="tw-inline-block">
-					<div id="update-pr-branch-with-base" class="ui buttons">
-						<button class="ui button" data-do="{{$.Issue.Link}}/update">
-							<span class="button-text">
-								{{ctx.Locale.Tr "repo.pulls.update_branch"}}
-							</span>
-						</button>
-						<div class="ui dropdown icon button">
-							{{svg "octicon-triangle-down"}}
-							<div class="menu">
-								<a class="item active selected" data-do="{{$.Issue.Link}}/update">{{ctx.Locale.Tr "repo.pulls.update_branch"}}</a>
-								<a class="item" data-do="{{$.Issue.Link}}/update?style=rebase">{{ctx.Locale.Tr "repo.pulls.update_branch_rebase"}}</a>
-							</div>
+		<div>
+			{{if and $data.UpdateAllowed $data.UpdateByRebaseAllowed}}
+				<div id="update-pr-branch-with-base" class="ui buttons">
+					<button class="ui button" data-do="{{$issue.Link}}/update">
+						<span class="button-text">
+							{{ctx.Locale.Tr "repo.pulls.update_branch"}}
+						</span>
+					</button>
+					<div class="ui dropdown icon button">
+						{{svg "octicon-triangle-down"}}
+						<div class="menu">
+							<a class="item active selected" data-do="{{$issue.Link}}/update">{{ctx.Locale.Tr "repo.pulls.update_branch"}}</a>
+							<a class="item" data-do="{{$issue.Link}}/update?style=rebase">{{ctx.Locale.Tr "repo.pulls.update_branch_rebase"}}</a>
 						</div>
 					</div>
 				</div>
 			{{end}}
-			{{if and $.UpdateAllowed (not $.UpdateByRebaseAllowed)}}
-				<form action="{{$.Issue.Link}}/update" method="post" class="ui update-branch-form">
+			{{if and $data.UpdateAllowed (not $data.UpdateByRebaseAllowed)}}
+				<form action="{{$issue.Link}}/update" method="post">
 					<button class="ui compact button">
 						<span class="ui text">{{ctx.Locale.Tr "repo.pulls.update_branch"}}</span>
 					</button>
diff --git a/templates/repo/pulls/status.tmpl b/templates/repo/pulls/status.tmpl
deleted file mode 100644
index 3a6c261423c..00000000000
--- a/templates/repo/pulls/status.tmpl
+++ /dev/null
@@ -1,63 +0,0 @@
-{{/* Template Attributes:
-* CommitStatus: summary of all commit status state
-* CommitStatuses: all commit status elements
-* ShowHideChecks: whether use a button to show/hide the checks
-* StatusCheckData: additional status check data, see backend pullCommitStatusCheckData struct
-*/}}
-{{$statusCheckData := .StatusCheckData}}
-{{if .CommitStatus}}
-	{{if $statusCheckData}}
-	<div class="item flex-left-right commit-status-toggle">
-		<div>{{$statusCheckData.CommitStatusCheckPrompt ctx.Locale}}</div>
-		{{if .ShowHideChecks}}
-		<button data-global-click="onCommitStatusChecksToggle" class="btn interact-fg"
-			data-show-all="{{ctx.Locale.Tr "repo.pulls.status_checks_show_all"}}"
-			data-hide-all="{{ctx.Locale.Tr "repo.pulls.status_checks_hide_all"}}"
-		>{{ctx.Locale.Tr "repo.pulls.status_checks_hide_all"}}</button>
-		{{end}}
-	</div>
-	{{end}}
-	{{if and $statusCheckData $statusCheckData.RequireApprovalRunCount}}
-		<div class="item flex-left-right" id="approve-status-checks">
-			<div>
-				<strong>
-					{{ctx.Locale.Tr "repo.pulls.status_checks_need_approvals" $statusCheckData.RequireApprovalRunCount}}
-				</strong>
-				<p>{{ctx.Locale.Tr "repo.pulls.status_checks_need_approvals_helper"}}</p>
-			</div>
-			{{if $statusCheckData.CanApprove}}
-				<button class="ui basic button link-action" data-url="{{$statusCheckData.ApproveLink}}">
-					{{ctx.Locale.Tr "repo.pulls.status_checks_approve_all"}}
-				</button>
-			{{end}}
-		</div>
-	{{end}}
-
-	<div class="item flex-divided-list commit-status-list">
-		{{range .CommitStatuses}}
-			<div class="item commit-status-item">
-				<div class="flex-text-block">
-					{{template "repo/commit_status" .}}
-					<div class="status-context gt-ellipsis">{{.Context}} <span class="tw-text-text-light-2">{{.Description}}</span></div>
-				</div>
-				<div class="status-details">
-					{{if and $statusCheckData $statusCheckData.IsContextRequired}}
-						{{if (call $statusCheckData.IsContextRequired .Context)}}<div class="ui label">{{ctx.Locale.Tr "repo.pulls.status_checks_requested"}}</div>{{end}}
-					{{end}}
-					{{if .TargetURL}}<a href="{{.TargetURL}}">{{ctx.Locale.Tr "repo.pulls.status_checks_details"}}</a>{{end}}
-				</div>
-			</div>
-		{{end}}
-		{{if $statusCheckData}}
-			{{range $statusCheckData.MissingRequiredChecks}}
-				<div class="item commit-status-item">
-					<div class="flex-text-block">
-						{{svg "octicon-dot-fill" 16 "commit-status icon tw-text-yellow"}}
-						<div class="status-context gt-ellipsis">{{.}}</div>
-					</div>
-					<div class="ui label">{{ctx.Locale.Tr "repo.pulls.status_checks_requested"}}</div>
-				</div>
-			{{end}}
-		{{end}}
-	</div>
-{{end}}
diff --git a/templates/repo/pulls/status_items.tmpl b/templates/repo/pulls/status_items.tmpl
new file mode 100644
index 00000000000..b4f8307395e
--- /dev/null
+++ b/templates/repo/pulls/status_items.tmpl
@@ -0,0 +1,32 @@
+{{/* Template Attributes:
+* CommitStatuses: all commit status elements
+* StatusCheckData: optional, additional status check data, see backend pullCommitStatusCheckData struct
+*/}}
+{{$statusCheckData := $.StatusCheckData}}
+{{range $cs := $.CommitStatuses}}
+	<div class="item commit-status-item">
+		<div class="flex-text-block">
+			{{template "repo/commit_status" $cs}}
+			<div class="status-context gt-ellipsis">
+				{{$cs.Context}} <span class="tw-text-text-light-2">{{$cs.Description}}</span>
+			</div>
+		</div>
+		<div class="status-details">
+			{{if and $statusCheckData $statusCheckData.IsContextRequired}}
+				{{if (call $statusCheckData.IsContextRequired $cs.Context)}}
+					<div class="ui label">{{ctx.Locale.Tr "repo.pulls.status_checks_requested"}}</div>
+				{{end}}
+			{{end}}
+			{{if $cs.TargetURL}}<a href="{{$cs.TargetURL}}">{{ctx.Locale.Tr "repo.pulls.status_checks_details"}}</a>{{end}}
+		</div>
+	</div>
+{{end}}
+{{range $missingCheck := $statusCheckData.MissingRequiredChecks}}
+	<div class="item commit-status-item">
+		<div class="flex-text-block">
+			{{svg "octicon-dot-fill" 16 "commit-status icon tw-text-yellow"}}
+			<div class="status-context gt-ellipsis">{{$missingCheck}}</div>
+		</div>
+		<div class="ui label">{{ctx.Locale.Tr "repo.pulls.status_checks_requested"}}</div>
+	</div>
+{{end}}
diff --git a/web_src/css/modules/segment.css b/web_src/css/modules/segment.css
index adb514be599..7bb8a52dc86 100644
--- a/web_src/css/modules/segment.css
+++ b/web_src/css/modules/segment.css
@@ -179,13 +179,8 @@
   margin-bottom: 1rem;
 }
 
-.ui.fitted.segment:not(.horizontally) {
-  padding-top: 0;
-  padding-bottom: 0;
-}
-.ui.fitted.segment:not(.vertically) {
-  padding-left: 0;
-  padding-right: 0;
+.ui.fitted.segment {
+  padding: 0;
 }
 
 .ui.segments .segment,
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index d2407c898de..f1c4678626c 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -1929,6 +1929,7 @@ tbody.commit-list {
   max-height: 240px; /* fit exactly 6 items, commit-status-item.height * 6 */
   overflow-x: hidden;
   transition: max-height .2s;
+  width: 100%;
 }
 
 .commit-status-item {
diff --git a/web_src/css/shared/flex-list.css b/web_src/css/shared/flex-list.css
index ea4314290ac..c68029697e6 100644
--- a/web_src/css/shared/flex-list.css
+++ b/web_src/css/shared/flex-list.css
@@ -9,7 +9,7 @@
   margin: 0;
 }
 
-/* items have dividers between them, the dividers align with items (use parent padding) */
+/* items have dividers between them, the dividers align with items */
 .flex-divided-list,
 .flex-divided-list > .item.flex-divided-list {
   display: flex;
@@ -22,6 +22,10 @@
   padding: 10px 0;
 }
 
+.flex-divided-list > .divider {
+  margin: 0;
+}
+
 .flex-divided-list > .item + .item {
   border-top: 1px solid var(--color-secondary);
 }
@@ -101,21 +105,16 @@
 }
 
 /* special rules to make the list work with existing UI elements */
-.container-divided > .flex-divided-list > .item {
-  padding-left: 1em;
+.flex-divided-list.items-px-default > .item {
+  padding-left: 1em; /* matches ".ui.segment" padding */
   padding-right: 1em;
 }
-.container-divided > .flex-divided-list > .item.flex-divided-list {
-  padding: 0;
-}
 
-.container-padded > .flex-divided-list > .item:first-child,
-.ui.segment:not(.container-divided) > .flex-divided-list > .item:first-child {
+.ui.segment:not(.fitted) > .flex-divided-list > .item:first-child {
   padding-top: 0;
 }
 
-.container-padded > .flex-divided-list > .item:last-child,
-.ui.segment:not(.container-divided) > .flex-divided-list > .item:last-child {
+.ui.segment:not(.fitted) > .flex-divided-list > .item:last-child {
   padding-bottom: 0;
 }
 
@@ -127,7 +126,3 @@
 .flex-divided-list + .divider {
   margin-top: 0;
 }
-
-.container-padded > .flex-divided-list + .divider {
-  margin-top: 10px;
-}
diff --git a/web_src/js/components/PullRequestMergeForm.vue b/web_src/js/components/PullRequestMergeForm.vue
index d2835fe163d..95fe0f1beb4 100644
--- a/web_src/js/components/PullRequestMergeForm.vue
+++ b/web_src/js/components/PullRequestMergeForm.vue
@@ -7,6 +7,8 @@ const props = defineProps<{
   mergeFormProps: any, // TODO: this is a huge object, need to be refactored in the future
 }>();
 
+const mergeStyleManuallyMerged = 'manually-merged';
+
 const mergeForm = props.mergeFormProps;
 
 const mergeTitleFieldValue = shallowRef('');
@@ -29,10 +31,17 @@ const showMergeStyleMenu = shallowRef(false);
 const showActionForm = shallowRef(false);
 
 const mergeButtonStyleClass = computed(() => {
+  if (mergeStyle.value === mergeStyleManuallyMerged) return 'red';
   if (mergeForm.allOverridableChecksOk) return 'primary';
   return autoMergeWhenSucceed.value ? 'primary' : 'red';
 });
 
+const mergeSelectStyleClass = computed(() => {
+  if (mergeForm.emptyCommit) return '';
+  if (mergeStyle.value === mergeStyleManuallyMerged) return 'red';
+  return 'primary';
+});
+
 const forceMerge = computed(() => {
   return mergeForm.canMergeNow && !mergeForm.allOverridableChecksOk;
 });
@@ -115,30 +124,32 @@ function clearMergeMessage() {
         </div>
       </template>
 
-      <div class="field" v-if="mergeStyle === 'manually-merged'">
+      <div class="field" v-if="mergeStyle === mergeStyleManuallyMerged">
         <input type="text" name="merge_commit_id" :placeholder="mergeForm.textMergeCommitId">
       </div>
 
-      <button class="ui button" :class="mergeButtonStyleClass" type="submit" name="do" :value="mergeStyle">
-        {{ mergeStyleDetail.textDoMerge }}
-        <template v-if="autoMergeWhenSucceed">
-          {{ mergeForm.textAutoMergeButtonWhenSucceed }}
-        </template>
-      </button>
+      <div class="flex-text-block tw-gap-3">
+        <button class="ui button" :class="mergeButtonStyleClass" type="submit" name="do" :value="mergeStyle">
+          {{ mergeStyleDetail.textDoMerge }}
+          <template v-if="autoMergeWhenSucceed">
+            {{ mergeForm.textAutoMergeButtonWhenSucceed }}
+          </template>
+        </button>
 
-      <button class="ui button merge-cancel" @click="toggleActionForm(false)">
-        {{ mergeForm.textCancel }}
-      </button>
+        <button class="ui button merge-cancel" type="button" @click="toggleActionForm(false)">
+          {{ mergeForm.textCancel }}
+        </button>
 
-      <div class="ui checkbox tw-ml-1" v-if="mergeForm.isPullBranchDeletable">
-        <input name="delete_branch_after_merge" type="checkbox" v-model="deleteBranchAfterMerge" id="delete-branch-after-merge">
-        <label for="delete-branch-after-merge">{{ mergeForm.textDeleteBranch }}</label>
+        <div class="ui checkbox" v-if="mergeForm.isPullBranchDeletable">
+          <input name="delete_branch_after_merge" type="checkbox" v-model="deleteBranchAfterMerge" id="delete-branch-after-merge">
+          <label for="delete-branch-after-merge">{{ mergeForm.textDeleteBranch }}</label>
+        </div>
       </div>
     </form>
 
     <div v-if="!showActionForm" class="tw-flex">
       <!-- the merge button -->
-      <div class="ui buttons merge-button" :class="[mergeForm.emptyCommit ? '' : mergeForm.allOverridableChecksOk ? 'primary' : 'red']" @click="toggleActionForm(true)">
+      <div class="ui buttons merge-button" :class="mergeSelectStyleClass" @click="toggleActionForm(true)">
         <button class="ui button">
           <svg-icon name="octicon-git-merge"/>
           <span class="button-text">
diff --git a/web_src/js/features/repo-issue-pull.ts b/web_src/js/features/repo-issue-pull.ts
index 05aaf577967..d16e865c708 100644
--- a/web_src/js/features/repo-issue-pull.ts
+++ b/web_src/js/features/repo-issue-pull.ts
@@ -23,6 +23,7 @@ function initRepoPullRequestUpdate(el: HTMLElement) {
     }
     let data: Record<string, any> | undefined;
     try {
+      // TODO: the response is indeed not JSON, need to fix (see backend UpdatePullRequest)
       data = await response?.json(); // the response is probably not a JSON
     } catch (error) {
       console.error(error);