diff --git a/moon/apps/web/components/MrBox/ChecksSection.tsx b/moon/apps/web/components/MrBox/ChecksSection.tsx
new file mode 100644
index 000000000..c60534a27
--- /dev/null
+++ b/moon/apps/web/components/MrBox/ChecksSection.tsx
@@ -0,0 +1,214 @@
+import * as Collapsible from '@radix-ui/react-collapsible';
+import { ArrowDownIcon, ArrowUpIcon, AlertIcon, CheckIcon, ClockIcon, WarningTriangleIcon } from "@gitmono/ui";
+import { useEffect, useMemo, useState } from 'react';
+import { MergeCheckItem } from './components/MergeCheckItem';
+import type { TaskData, AdditionalCheckItem, AdditionalCheckStatus } from './types/mergeCheck.config';
+import { ADDITIONAL_CHECK_LABELS } from './types/mergeCheck.config';
+
+interface ChecksSectionProps {
+  checks: TaskData[];
+  onStatusChange: (hasFailures: boolean) => void;
+  additionalChecks?: AdditionalCheckItem[];
+}
+interface CheckStatusProps {
+  hasFailures: boolean;
+  failureCount: number;
+  inProgressCount: number;
+  successCount: number;
+  open: boolean;
+}
+interface CheckGroupProps {
+  title: string;
+  checks: TaskData[];
+}
+interface CheckListProps {
+  groupedChecks: {
+    failing: TaskData[];
+    pending: TaskData[];
+    success: TaskData[];
+  };
+}
+
+const CheckStatus = ({hasFailures, failureCount, inProgressCount, successCount, open}: CheckStatusProps) => {
+  let statusInfo: string[] = []
+
+  if (failureCount > 0) {
+    statusInfo.push(`${failureCount} failed`)
+  }
+  if (inProgressCount > 0) {
+    statusInfo.push(`${inProgressCount} in progress`)
+  }
+  if (successCount > 0) {
+    statusInfo.push(`${successCount} successful`)
+  }
+  if (statusInfo.length === 0) {
+    statusInfo.push('No checks have run yet')
+  }
+
+  return (
+    <div className="flex w-full px-3 py-0 items-center">
+      {hasFailures? <AlertIcon className="h-5 w-5 mr-3 text-yellow-600"/> : <CheckIcon className="h-5 w-5 mr-3 text-green-700"/>}
+      <div>
+        <p className="font-semibold">
+          {hasFailures ? 'Some checks were not successful' : 'All checks have passed'}
+        </p>
+        <p className="text-sm text-gray-600">
+          {statusInfo.join(', ')}
+        </p>
+      </div>
+      <button className="justify-self-end ml-auto">
+        {open ? <ArrowUpIcon /> : <ArrowDownIcon />}
+      </button>
+    </div>
+  )
+}
+
+const CheckGroup = ({ title, checks }: CheckGroupProps) => (
+  <div className="mb-2">
+    <h4 className="text-xs font-bold text-gray-500 uppercase px-2 py-1">{title} ({checks.length})</h4>
+    <div>
+      {checks.map(check => <MergeCheckItem key={check.build_id} check={check} />)}
+    </div>
+  </div>
+);
+
+const CheckList = ({groupedChecks}: CheckListProps) => (
+  <div className="border-t mt-2 pt-2 max-h-[300px] overflow-y-auto">
+    {groupedChecks.failing.length > 0 && <CheckGroup title="Failing" checks={groupedChecks.failing} />}
+    {groupedChecks.pending.length > 0 && <CheckGroup title="In progress" checks={groupedChecks.pending} />}
+    {groupedChecks.success.length > 0 && <CheckGroup title="Successful" checks={groupedChecks.success} />}
+  </div>
+)
+
+interface AdditionalCheckItemProps {
+  check: AdditionalCheckItem;
+}
+
+const getStatusIcon = (status: AdditionalCheckStatus) => {
+  switch (status) {
+    case 'Success':
+      return <CheckIcon className="w-4 h-4 text-green-600" />;
+    case 'Failure':
+      return <AlertIcon className="w-4 h-4 text-red-600" />;
+    case 'Warning':
+      return <WarningTriangleIcon className="w-4 h-4 text-yellow-600" />;
+    case 'Pending':
+      return <ClockIcon className="w-4 h-4 text-gray-500" />;
+    default:
+      return <ClockIcon className="w-4 h-4 text-gray-500" />;
+  }
+};
+
+const AdditionalCheckItemComponent = ({ check }: AdditionalCheckItemProps) => (
+  <div className="flex items-start px-2 py-2 border-b border-gray-100 last:border-b-0">
+    <div className="flex-shrink-0 mr-3 mt-0.5">
+      {getStatusIcon(check.status)}
+    </div>
+    <div className="flex-1 min-w-0">
+      <div className="flex items-center justify-between">
+        <h5 className="text-sm font-medium text-gray-900">
+          {ADDITIONAL_CHECK_LABELS[check.type]}
+        </h5>
+        <span className={`text-xs px-2 py-1 rounded-full font-medium ${
+          check.status === 'Success' ? 'bg-green-100 text-green-800' :
+          check.status === 'Failure' ? 'bg-red-100 text-red-800' :
+          check.status === 'Warning' ? 'bg-yellow-100 text-yellow-800' :
+          'bg-gray-100 text-gray-800'
+        }`}>
+          {check.status}
+        </span>
+      </div>
+      {check.message && (
+        <p className="text-sm text-gray-600 mt-1">{check.message}</p>
+      )}
+      {check.errors && check.errors.length > 0 && (
+        <ul className="text-sm text-red-600 mt-1 list-disc list-inside">
+          {check.errors.map((error, index) => (
+            // eslint-disable-next-line react/no-array-index-key
+            <li key={index}>{error}</li>
+          ))}
+        </ul>
+      )}
+    </div>
+  </div>
+);
+
+interface AdditionalChecksSectionProps {
+  additionalChecks: AdditionalCheckItem[];
+}
+
+const AdditionalChecksSection = ({ additionalChecks }: AdditionalChecksSectionProps) => {
+  if (!additionalChecks || additionalChecks.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="border-t mt-2 pt-2">
+      <h4 className="text-xs font-bold text-gray-500 uppercase px-2 py-1 mb-2">
+        Additional Checks ({additionalChecks.length})
+      </h4>
+      <div className="space-y-1">
+        {additionalChecks.map(check => (
+          <AdditionalCheckItemComponent key={check.message} check={check} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export function ChecksSection({ checks, onStatusChange, additionalChecks }: ChecksSectionProps) {
+  const summary = useMemo(() => {
+    return checks.reduce((acc, check) => {
+      acc[check.status] = (acc[check.status] || 0) + 1;
+      return acc;
+    }, {} as Record<TaskData['status'], number>);
+  }, [checks]);
+
+  const failureCount = summary.Failure || 0;
+  const inProgressCount = summary.Pending || 0;
+  const successCount = summary.Success || 0;
+  const hasFailures = failureCount > 0;
+
+  useEffect(() => {
+    onStatusChange(hasFailures);
+  }, [hasFailures, onStatusChange]);
+
+  const groupedChecks = useMemo(() => {
+    const failing = checks.filter(c => c.status === 'Failure');
+    const pending = checks.filter(c => c.status === 'Pending');
+    const success = checks.filter(c => c.status === 'Success');
+
+    return { failing, pending, success };
+  }, [checks]);
+
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <Collapsible.Root
+        open={open}
+        onOpenChange={setOpen}
+      >
+        {/* CheckStatus 部分 */}
+        <Collapsible.Trigger
+          className="w-full hover:bg-gray-100 rounded-md cursor-pointer flex"
+        >
+          <CheckStatus
+            hasFailures={hasFailures}
+            failureCount={failureCount}
+            inProgressCount={inProgressCount}
+            successCount={successCount}
+            open={open}
+          />
+        </Collapsible.Trigger>
+
+        {/* CheckList 部分 */}
+        <Collapsible.Content>
+          <CheckList groupedChecks={groupedChecks} />
+          <AdditionalChecksSection additionalChecks={additionalChecks || []} />
+        </Collapsible.Content>
+      </Collapsible.Root>
+
+    </>
+  );
+}
\ No newline at end of file
diff --git a/moon/apps/web/components/MrBox/MergeBox.tsx b/moon/apps/web/components/MrBox/MergeBox.tsx
new file mode 100644
index 000000000..bcb493a73
--- /dev/null
+++ b/moon/apps/web/components/MrBox/MergeBox.tsx
@@ -0,0 +1,77 @@
+import React, { useState, useCallback } from 'react';
+import { useMergeChecks } from './hooks/useMergeChecks';
+import { ReviewerSection } from './ReviewerSection';
+import { ChecksSection } from './ChecksSection';
+import { MergeSection } from './MergeSection';
+import { FeedMergedIcon } from "@primer/octicons-react";
+import { usePostMrMerge } from "@/hooks/usePostMrMerge";
+
+const REQUIRED_REVIEWERS = 2; // 假设需要2个 reviewer
+
+export function MergeBox({ prId }: { prId: string }) {
+  const { checks, refresh } = useMergeChecks(prId);
+  const [isReviewerApproved, setIsReviewerApproved] = useState(false);
+  const [hasCheckFailures, setHasCheckFailures] = useState(true);
+  const { mutate: approveMr, isPending: mrMergeIsPending } = usePostMrMerge(prId)
+
+  // 定义最终的合并处理函数
+  const handleMerge = useCallback(async () => {
+    // console.log('Final validation before merge...');
+    // TODO: 再次发送校验请求
+    refresh();
+
+    // 模拟校验结果
+    const stillHasFailures = false;
+
+    if (stillHasFailures) {
+      alert("阻止合并：仍有检查项未通过，请刷新页面查看详情。");
+    } else {
+      // console.log('All checks passed. Sending merge request to backend...');
+
+      approveMr(undefined)
+      
+      alert("合并请求已发送！");
+    }
+  }, [approveMr, refresh]);
+
+  return (
+    <div className="flex">
+      <FeedMergedIcon size={ 24 } className='text-gray-500 ml-1'/>
+      <div className="border rounded-lg bg-white divide-y ml-3 w-full">
+        <ReviewerSection
+          required={ REQUIRED_REVIEWERS }
+          onStatusChange={ setIsReviewerApproved }
+        />
+        <ChecksSection
+          checks={ checks }
+          onStatusChange={ setHasCheckFailures }
+          additionalChecks={[
+            {
+              type: 'GPG_SIGNATURE',
+              status: 'Failure',
+              message: 'GPG 签名验证失败',
+              errors: ['提交 abc123 缺少有效的 GPG 签名', '提交 def456 的 GPG 签名无法验证']
+            },
+            {
+              type: 'BRANCH_PROTECTION',
+              status: 'Success',
+              message: '分支保护规则检查通过'
+            },
+            {
+              type: 'COMMIT_MESSAGE_FORMAT',
+              status: 'Warning',
+              message: '部分提交信息不符合规范',
+              errors: ['提交 "fix bug" 应使用 "fix: bug description" 格式']
+            }
+          ]}
+        />
+        <MergeSection
+          isReviewerApproved={ isReviewerApproved }
+          hasCheckFailures={ hasCheckFailures }
+          onMerge={ handleMerge }
+          isMerging={ mrMergeIsPending }
+        />
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/moon/apps/web/components/MrBox/MergeSection.tsx b/moon/apps/web/components/MrBox/MergeSection.tsx
new file mode 100644
index 000000000..647200411
--- /dev/null
+++ b/moon/apps/web/components/MrBox/MergeSection.tsx
@@ -0,0 +1,52 @@
+import { AlertIcon, WarningTriangleIcon, CheckCircleIcon, LoadingSpinner } from "@gitmono/ui";
+import React from "react";
+
+interface MergeSectionProps {
+  isReviewerApproved: boolean;
+  hasCheckFailures: boolean;
+  onMerge: () => Promise<void>;
+  isMerging: boolean;
+}
+
+export function MergeSection({ isReviewerApproved, hasCheckFailures, onMerge, isMerging }: MergeSectionProps) {
+  let statusNode: React.ReactNode;
+  const isMergeable = isReviewerApproved && !hasCheckFailures;
+
+  if (!isReviewerApproved) {
+    statusNode = (
+      <div className="flex items-center text-yellow-700">
+        <WarningTriangleIcon className="h-5 w-5 mr-3" />
+        <span className="font-semibold">Merging is blocked</span>
+      </div>
+    );
+  } else if (hasCheckFailures) {
+    statusNode = (
+      <div className="flex items-center text-red-700">
+        <AlertIcon className="h-5 w-5 mr-3" />
+        <span className="font-semibold">Merging is blocked</span>
+      </div>
+    );
+  } else {
+    statusNode = (
+      <div className="flex items-center text-green-700">
+        <CheckCircleIcon className="h-5 w-5 mr-3" />
+        <span className="font-semibold">Allow merging</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-3">
+      {statusNode}
+      <button
+        onClick={onMerge}
+        disabled={!isMergeable}
+        className="w-full mt-3 px-4 py-2 font-bold text-white bg-green-600 rounded-md
+                   hover:bg-green-700
+                   disabled:bg-gray-400 disabled:cursor-not-allowed"
+      >
+        {isMerging ? <LoadingSpinner/> : "Confirm Merge"}
+      </button>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/moon/apps/web/components/MrBox/ReviewerSection.tsx b/moon/apps/web/components/MrBox/ReviewerSection.tsx
new file mode 100644
index 000000000..7b9e8ed79
--- /dev/null
+++ b/moon/apps/web/components/MrBox/ReviewerSection.tsx
@@ -0,0 +1,45 @@
+import { useState, useEffect } from 'react';
+import { CheckCircleIcon, AlertIcon } from "@gitmono/ui";
+
+interface ReviewerSectionProps {
+  required: number;
+  onStatusChange: (isApproved: boolean) => void;
+}
+
+export function ReviewerSection({ required, onStatusChange }: ReviewerSectionProps) {
+  // 实际的 review 人数，暂时用 state 模拟，未来应由 API 获取
+  const [actual, _setActual] = useState(1);
+  const isApproved = actual >= required;
+
+  useEffect(() => {
+    // TODO: 调用 API 获取实际 review 人数并更新 setActual
+    // fetch('/api/.../reviewers').then(res => res.json()).then(data => setActual(data.count));
+  }, []);
+
+  useEffect(() => {
+    onStatusChange(isApproved);
+  }, [isApproved, onStatusChange]);
+
+  if (isApproved) {
+    return (
+      <div className="flex items-center p-3 text-green-700">
+        <CheckCircleIcon className="h-5 w-5 mr-3" />
+        <div>
+          <span className="font-semibold">All required reviewers have approved</span>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex items-center p-3 text-gray-800">
+      <AlertIcon className="h-5 w-5 mr-3 text-yellow-600" />
+      <div>
+        <div className="font-semibold">Review required</div>
+        <div className="ml-auto text-sm text-gray-500">
+          {`At least ${required} reviewer${required > 1 ? 's' : ''} required with write access.`}
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/moon/apps/web/components/MrBox/components/CheckGroup.tsx b/moon/apps/web/components/MrBox/components/CheckGroup.tsx
new file mode 100644
index 000000000..9043606dd
--- /dev/null
+++ b/moon/apps/web/components/MrBox/components/CheckGroup.tsx
@@ -0,0 +1,40 @@
+import * as Collapsible from '@radix-ui/react-collapsible';
+import { ArrowDownIcon, ArrowUpIcon } from "@gitmono/ui";
+import { useState } from 'react';
+import type { ReactNode } from 'react';
+import { GroupStatus } from "@/components/MrBox/types/mergeCheck.config";
+
+const groupStatusMap = {
+  Pending: { color: 'border-yellow-400' },
+  Success: { color: 'border-green-400' },
+  Failure: { color: 'border-red-400' },
+};
+
+interface CheckGroupProps {
+  title: string;
+  summary: string;
+  status: GroupStatus;
+  children: ReactNode;
+}
+
+export function CheckGroup({ title, summary, status, children }: CheckGroupProps) {
+  const [isOpen, setIsOpen] = useState(true); // 默认展开
+  const { color } = groupStatusMap[status];
+
+  return (
+    <div className={ `border-l-4 ${ color } rounded` }>
+      <Collapsible.Root open={ isOpen } onOpenChange={ setIsOpen }>
+        <Collapsible.Trigger className="flex w-full items-center justify-between p-3 bg-gray-50 rounded-t">
+          <div className="flex items-center">
+            <h4 className="font-bold text-gray-900">{ title }</h4>
+            <span className="ml-4 text-sm text-gray-600">{ summary }</span>
+          </div>
+          { isOpen? <ArrowUpIcon className="h-5 w-5 text-gray-500"/> : <ArrowDownIcon className="h-5 w-5 text-gray-500"/> }
+        </Collapsible.Trigger>
+        <Collapsible.Content className="p-2 bg-white rounded-b">
+          { children }
+        </Collapsible.Content>
+      </Collapsible.Root>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/moon/apps/web/components/MrBox/components/MergeCheckItem.tsx b/moon/apps/web/components/MrBox/components/MergeCheckItem.tsx
new file mode 100644
index 000000000..ee78dd8d1
--- /dev/null
+++ b/moon/apps/web/components/MrBox/components/MergeCheckItem.tsx
@@ -0,0 +1,26 @@
+import {CheckCircleIcon, AlertIcon, WarningTriangleIcon} from "@gitmono/ui";
+import {TaskData} from "../types/mergeCheck.config";
+
+const statusMap = {
+  Pending: { Icon: WarningTriangleIcon, className: 'text-yellow-600' },
+  Success: { Icon: CheckCircleIcon, className: 'text-green-600' },
+  Failure: { Icon: AlertIcon, className: 'text-red-600' },
+  Warning: { Icon: WarningTriangleIcon, className: 'text-yellow-600' }, // GitHub 通常用黄点表示 in-progress 或 warning
+};
+
+export function MergeCheckItem({ check }: { check: TaskData }) {
+  const { Icon, className } = statusMap[check.status];
+
+  return (
+    <div className="flex items-center p-2 hover:bg-gray-100 rounded-md">
+      <Icon className={`h-5 w-5 flex-shrink-0 ${className}`} />
+      <div className="ml-3 flex-grow">
+        <span className="font-semibold text-gray-800">{check.repo_name}</span>
+        {check.arguments && <span className="ml-2 text-gray-500 text-sm">{check.arguments}</span>}
+      </div>
+      <button className="text-gray-500 hover:text-gray-800">
+
+      </button>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/moon/apps/web/components/MrBox/hooks/useMergeChecks.ts b/moon/apps/web/components/MrBox/hooks/useMergeChecks.ts
new file mode 100644
index 000000000..f710ed21d
--- /dev/null
+++ b/moon/apps/web/components/MrBox/hooks/useMergeChecks.ts
@@ -0,0 +1,58 @@
+import { GetApiTasksData } from "@/components/MrBox/types/mergeCheck.config";
+
+export const useMergeChecks = (_prId: string) => {
+  const checks: GetApiTasksData = [
+    {
+      repo_name: "frontend-app",
+      status: "Success",
+      arguments: "--env=production",
+      build_id: "build-123",
+      end_at: "2025-08-18T10:00:00Z",
+      exit_code: 0,
+      mr: "MR-456",
+      output_file: "output.log",
+      start_at: "2025-08-18T09:50:00Z",
+      target: "main"
+    },
+    {
+      repo_name: "backend-service",
+      status: "Pending",
+      arguments: "--mode=test",
+      build_id: "build-124",
+      end_at: "2025-08-18T10:15:00Z",
+      exit_code: 0,
+      mr: "MR-457",
+      output_file: "test.log",
+      start_at: "2025-08-18T10:00:00Z",
+      target: "develop"
+    },
+    {
+      repo_name: "shared-lib",
+      status: "Failure",
+      arguments: "--check=lint",
+      build_id: "build-125",
+      end_at: "2025-08-18T10:30:00Z",
+      exit_code: 1,
+      mr: "MR-458",
+      output_file: "error.log",
+      start_at: "2025-08-18T10:20:00Z",
+      target: "feature"
+    },
+    {
+      repo_name: "config-repo",
+      status: "Warning",
+      arguments: "--validate",
+      build_id: "build-126",
+      end_at: "2025-08-18T10:45:00Z",
+      exit_code: 0,
+      mr: "MR-459",
+      output_file: "warning.log",
+      start_at: "2025-08-18T10:35:00Z",
+      target: "main"
+    }
+  ];
+  // eslint-disable-next-line no-empty-function
+  const refresh = () => {}
+
+  return { checks, refresh };
+};
\ No newline at end of file
diff --git a/moon/apps/web/components/MrBox/types/mergeCheck.config.ts b/moon/apps/web/components/MrBox/types/mergeCheck.config.ts
new file mode 100644
index 000000000..b529a256a
--- /dev/null
+++ b/moon/apps/web/components/MrBox/types/mergeCheck.config.ts
@@ -0,0 +1,40 @@
+export interface TaskData {
+  "arguments": string,
+  "build_id": string,
+  "end_at": string,
+  "exit_code": number,
+  "mr": string,
+  "output_file": string,
+  "repo_name": string,
+  "start_at": string,
+  "status": "Pending" | "Success" | "Failure" | "Warning",
+  "target": string
+}
+
+export type GetApiTasksData = TaskData[]
+
+export type GroupStatus = 'Success' | 'Failure' | 'Pending';
+
+export type AdditionalCheckStatus = 'Success' | 'Failure' | 'Pending' | 'Warning';
+
+export interface AdditionalCheckItem {
+  type: AdditionalCheckType;
+  status: AdditionalCheckStatus;
+  message?: string;
+  errors?: string[];
+}
+
+export type AdditionalCheckType = 
+  | 'GPG_SIGNATURE'
+  | 'BRANCH_PROTECTION'
+  | 'COMMIT_MESSAGE_FORMAT'
+  | 'PR_UPDATE_STATUS'
+  | 'CONFLICT_DETECTION';
+
+export const ADDITIONAL_CHECK_LABELS: Record<AdditionalCheckType, string> = {
+  GPG_SIGNATURE: 'GPG 签名验证',
+  BRANCH_PROTECTION: '分支保护规则',
+  COMMIT_MESSAGE_FORMAT: '提交信息规范',
+  PR_UPDATE_STATUS: 'PR 更新状态',
+  CONFLICT_DETECTION: '冲突检测'
+};
\ No newline at end of file
diff --git a/moon/apps/web/pages/[org]/mr/[link]/index.tsx b/moon/apps/web/pages/[org]/mr/[link]/index.tsx
index d909fcfec..8f9ebffa4 100644
--- a/moon/apps/web/pages/[org]/mr/[link]/index.tsx
+++ b/moon/apps/web/pages/[org]/mr/[link]/index.tsx
@@ -42,12 +42,13 @@ import { useGetMrFilesChanged } from '@/hooks/useGetMrFilesChanged'
 import { usePostMrClose } from '@/hooks/usePostMrClose'
 import { usePostMrComment } from '@/hooks/usePostMrComment'
 import { usePostMRLabels } from '@/hooks/usePostMRLabels'
-import { usePostMrMerge } from '@/hooks/usePostMrMerge'
+// import { usePostMrMerge } from '@/hooks/usePostMrMerge'
 import { usePostMrReopen } from '@/hooks/usePostMrReopen'
 import { useUploadHelpers } from '@/hooks/useUploadHelpers'
 import { apiErrorToast } from '@/utils/apiErrorToast'
 import { trimHtml } from '@/utils/trimHtml'
 import { PageWithLayout } from '@/utils/types'
+import { MergeBox } from "@/components/MrBox/MergeBox";
 
 export interface MRDetail {
   status: string
@@ -73,21 +74,21 @@ const MRDetailPage: PageWithLayout<any> = () => {
   const [loading, setLoading] = useState(false)
   const Checks = dynamic(() => import('@/components/MrView/components/Checks'))
 
-  if (mrDetail && typeof mrDetail.status === 'string') {
+  if (mrDetail) {
     mrDetail.status = mrDetail.status.toLowerCase()
   }
 
   const { data: MrFilesChangedData, isLoading: fileChgIsLoading } = useGetMrFilesChanged(id)
   const { mutate: modifyTitle } = usePostMrTitle()
 
-  const { mutate: approveMr, isPending: mrMergeIsPending } = usePostMrMerge(id)
-  const handleMrApprove = () => {
-    approveMr(undefined, {
-      onSuccess: () => {
-        router.push(`/${scope}/mr`)
-      }
-    })
-  }
+  // const { mutate: approveMr, isPending: mrMergeIsPending } = usePostMrMerge(id)
+  // const handleMrApprove = () => {
+  //   approveMr(undefined, {
+  //     onSuccess: () => {
+  //       router.push(`/${scope}/mr`)
+  //     }
+  //   })
+  // }
 
   const [_, setEditId] = useAtom(editIdAtom)
   const [refresh, setRefresh] = useAtom(refreshAtom)
@@ -247,17 +248,22 @@ const MRDetailPage: PageWithLayout<any> = () => {
           mrDetail && <TimelineItems detail={mrDetail} id={id} type='mr' editorRef={editorRef} />
         )}
         <div style={{ marginTop: '12px' }} className='prose'>
-          <div className='flex'>
+          {/*<div className='flex'>*/}
+          {/*  {mrDetail && mrDetail.status === 'open' && (*/}
+          {/*    <Button*/}
+          {/*      disabled={!login || mrMergeIsPending}*/}
+          {/*      onClick={handleMrApprove}*/}
+          {/*      aria-label='Merge MR'*/}
+          {/*      className={cn(buttonClasses)}*/}
+          {/*      loading={mrMergeIsPending}*/}
+          {/*    >*/}
+          {/*      Merge MR*/}
+          {/*    </Button>*/}
+          {/*  )}*/}
+          {/*</div>*/}
+          <div className='w-full'>
             {mrDetail && mrDetail.status === 'open' && (
-              <Button
-                disabled={!login || mrMergeIsPending}
-                onClick={handleMrApprove}
-                aria-label='Merge MR'
-                className={cn(buttonClasses)}
-                loading={mrMergeIsPending}
-              >
-                Merge MR
-              </Button>
+              <MergeBox prId={id} />
             )}
           </div>
           <h2>Add a comment</h2>