diff --git a/moon/apps/web/components/Issues/IssueDetailPage.tsx b/moon/apps/web/components/Issues/IssueDetailPage.tsx
index a3a84c87c..a30e441e3 100644
--- a/moon/apps/web/components/Issues/IssueDetailPage.tsx
+++ b/moon/apps/web/components/Issues/IssueDetailPage.tsx
@@ -1,14 +1,14 @@
 'use client'
 
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { IssueClosedIcon, IssueOpenedIcon, IssueReopenedIcon } from '@primer/octicons-react'
-import { Stack, TextInput } from '@primer/react'
+import { IssueClosedIcon, IssueReopenedIcon } from '@primer/octicons-react'
+import { Stack } from '@primer/react'
 import { useAtom } from 'jotai'
 import { useRouter } from 'next/router'
 import toast from 'react-hot-toast'
 
 import { CommonResultIssueDetailRes } from '@gitmono/types'
-import { Button, LoadingSpinner, PicturePlusIcon, UIText } from '@gitmono/ui'
+import { Button, LoadingSpinner, PicturePlusIcon } from '@gitmono/ui'
 
 import { EMPTY_HTML } from '@/atoms/markdown'
 import { useHandleBottomScrollOffset } from '@/components/NoteEditor/useHandleBottomScrollOffset'
@@ -19,7 +19,6 @@ import { usePostIssueAssignees } from '@/hooks/issues/usePostIssueAssignees'
 import { usePostIssueClose } from '@/hooks/issues/usePostIssueClose'
 import { usePostIssueComment } from '@/hooks/issues/usePostIssueComment'
 import { usePostIssueReopen } from '@/hooks/issues/usePostIssueReopen'
-import { usePostIssueTitle } from '@/hooks/issues/usePostIssueTitle'
 import { useGetCurrentUser } from '@/hooks/useGetCurrentUser'
 import { useGetOrganizationMember } from '@/hooks/useGetOrganizationMember'
 import { usePostIssueLabels } from '@/hooks/usePostIssueLabels'
@@ -30,6 +29,7 @@ import { trimHtml } from '@/utils/trimHtml'
 import { MemberAvatar } from '../MemberAvatar'
 import TimelineItems from '../MrView/TimelineItems'
 import { BadgeItem } from './IssueNewPage'
+import TitleInput from './TitleInput'
 import { pickWithReflect } from './utils/pickWithReflectDeep'
 import {
   splitFun,
@@ -80,10 +80,6 @@ export default function IssueDetailPage({ link }: { link: string }) {
 
   const issueDetail = issueDetailObj?.data as CommonResultIssueDetailRes['data'] | undefined
 
-  const [isEdit, setIsEdit] = useState(false)
-  const [editTitle, setEditTitle] = useState(issueDetail?.title)
-  const [titleloading, setTitleLoading] = useState(false)
-
   const applyDetailData = (detail: CommonResultIssueDetailRes | undefined) => {
     if (!detail || !detail.req_result || !detail.data) return
     setInfo({
@@ -294,82 +290,18 @@ export default function IssueDetailPage({ link }: { link: string }) {
     }
   })
 
-  const { mutate: modifyTitle } = usePostIssueTitle()
-  const handleSave = () => {
-    if (editTitle === issueDetail?.title || editTitle === '') {
-      apiErrorToast(new Error('Nothing Changed or is Empty'))
-      return
-    }
-    setTitleLoading(true)
-    modifyTitle(
-      { link, data: { content: editTitle as string } },
-      {
-        onError: (err) => apiErrorToast(err),
-        onSuccess: async () => await refetch({ throwOnError: true }),
-        onSettled: () => {
-          setIsEdit(false)
-          setTitleLoading(false)
-        }
-      }
-    )
-  }
-
   return (
     <>
       <div className='h-screen overflow-auto pt-10'>
         {info?.title && (
           <div className='px-10 pb-4 text-xl'>
-            <div className='mb-4'>
-              {!isEdit && (
-                <>
-                  <div className='flex w-full items-center justify-between'>
-                    <UIText size='text-2xl' weight='font-bold' className='-tracking-[1px] lg:flex'>
-                      {`${issueDetail?.title || ''}`}
-                      <span>&nbsp;</span>
-                      <span className='font-light !text-[#59636e]'>${link}</span>
-                    </UIText>
-                    <Button
-                      onClick={() => {
-                        setEditTitle(issueDetail?.title)
-                        setIsEdit(true)
-                      }}
-                    >
-                      Edit
-                    </Button>
-                  </div>
-                </>
-              )}
-              {isEdit && (
-                <>
-                  <div className='flex w-full items-center justify-between gap-2'>
-                    <TextInput
-                      value={editTitle || ''}
-                      onChange={(e) => setEditTitle(e.target.value)}
-                      className='new-issue-input no-border-input w-[80%]'
-                      trailingVisual={() => (titleloading ? <LoadingSpinner /> : '')}
-                    />
-                    <div className='flex gap-4'>
-                      <Button onClick={handleSave}>Save</Button>
-                      <Button onClick={() => setIsEdit(false)}>Cancel</Button>
-                    </div>
-                  </div>
-                </>
-              )}
-            </div>
-            {info.status === 'open' ? (
-              <>
-                <span className='flex w-fit items-center gap-2 rounded-full bg-[#1f883d] px-3 py-1 text-sm text-[#fff]'>
-                  <IssueOpenedIcon className='text-[#fff]' />
-                  Open
-                </span>
-              </>
-            ) : (
-              <>
-                <span className='flex w-fit items-center gap-2 rounded-full bg-[#8250df] px-3 py-1 text-sm text-[#fff]'>
-                  <IssueClosedIcon className='text-[#fff]' />
-                  Closed
-                </span>
-              </>
+            {issueDetail && (
+              <TitleInput
+                title={issueDetail.title}
+                id={link}
+                whoami='issue'
+                callback={() => refetch({ throwOnError: true })}
+              />
             )}
           </div>
         )}
diff --git a/moon/apps/web/components/Issues/TitleInput.tsx b/moon/apps/web/components/Issues/TitleInput.tsx
new file mode 100644
index 000000000..d8bb5f8b5
--- /dev/null
+++ b/moon/apps/web/components/Issues/TitleInput.tsx
@@ -0,0 +1,115 @@
+'use client'
+
+import { memo, useState } from 'react'
+import { TextInput } from '@primer/react'
+
+import { Button } from '@gitmono/ui/Button'
+import { LoadingSpinner } from '@gitmono/ui/Spinner'
+import { UIText } from '@gitmono/ui/Text'
+
+import { usePostIssueTitle } from '@/hooks/issues/usePostIssueTitle'
+import { usePostMrTitle } from '@/hooks/MR/usePostMrTitle'
+import { apiErrorToast } from '@/utils/apiErrorToast'
+
+const TitleInput = ({
+  title,
+  id,
+  whoami,
+  callback
+}: {
+  title: string
+  id: string
+  whoami: 'mr' | 'issue'
+  callback?: () => void | Promise<any>
+}) => {
+  const [editTitle, setEditTitle] = useState(title)
+  const [isEdit, setIsEdit] = useState(false)
+  const [loading, setLoading] = useState(false)
+  const { mutate: modifyMRTitle } = usePostMrTitle()
+  const { mutate: modifyIssueTitle } = usePostIssueTitle()
+
+  const handleSave = () => {
+    if (editTitle === title || editTitle === '') {
+      apiErrorToast(new Error('Nothing Changed or is Empty'))
+      return
+    }
+    setLoading(true)
+    switch (whoami) {
+      case 'mr':
+        modifyMRTitle(
+          { link: id, data: { content: editTitle as string } },
+          {
+            onError: (err) => apiErrorToast(err),
+            onSuccess: async () => {
+              await callback?.()
+              setIsEdit(false)
+              setLoading(false)
+            }
+          }
+        )
+        break
+      case 'issue':
+        modifyIssueTitle(
+          { link: id, data: { content: editTitle as string } },
+          {
+            onError: (err) => apiErrorToast(err),
+            onSuccess: async () => {
+              await callback?.()
+              setIsEdit(false)
+              setLoading(false)
+            }
+          }
+        )
+        break
+
+      default:
+        break
+    }
+  }
+
+  return (
+    <>
+      <div className='mb-2 w-[70%]'>
+        {!isEdit && (
+          <>
+            <div className='flex w-full items-center justify-between'>
+              <UIText size='text-2xl' weight='font-bold' className='-tracking-[1px] lg:flex'>
+                {`${title || ''}`}
+                <span>&nbsp;</span>
+                <span className='font-light !text-[#59636e]'>${id}</span>
+              </UIText>
+              <Button
+                onClick={() => {
+                  setEditTitle(title)
+                  setIsEdit(true)
+                }}
+              >
+                Edit
+              </Button>
+            </div>
+          </>
+        )}
+        {isEdit && (
+          <>
+            <div className='flex w-full items-center justify-between gap-2'>
+              <TextInput
+                value={editTitle || ''}
+                onChange={(e) => {
+                  setEditTitle(e.target.value)
+                }}
+                className='new-issue-input no-border-input w-[80%]'
+                trailingVisual={() => (loading ? <LoadingSpinner /> : '')}
+              />
+              <div className='flex gap-4'>
+                <Button onClick={handleSave}>Save</Button>
+                <Button onClick={() => setIsEdit(false)}>Cancel</Button>
+              </div>
+            </div>
+          </>
+        )}
+      </div>
+    </>
+  )
+}
+
+export default memo(TitleInput)
diff --git a/moon/apps/web/components/MrView/components/Checks/index.tsx b/moon/apps/web/components/MrView/components/Checks/index.tsx
index 190c33663..9cb895ffc 100644
--- a/moon/apps/web/components/MrView/components/Checks/index.tsx
+++ b/moon/apps/web/components/MrView/components/Checks/index.tsx
@@ -15,7 +15,7 @@ import { Task } from './cpns/Task'
 
 const Checks = ({ mr }: { mr: string }) => {
   // const { data } = useGetMrTask(mr)
-  const [buildid, setBuildId] = useAtom(buildIdAtom)
+  const [buildid, _setBuildId] = useAtom(buildIdAtom)
   const { logsMap, setEventSource, eventSourcesRef, setLogsMap } = useTaskSSE()
   const [statusMap, _setStatusMap] = useAtom(statusMapAtom)
   // 获取所有构建任务
@@ -48,7 +48,7 @@ const Checks = ({ mr }: { mr: string }) => {
     }
 
     fetchLogs()
-    setBuildId(status[0].build_id)
+    // setBuildId(status[0].build_id)
     return () => {
       statusMap.clear()
     }
diff --git a/moon/apps/web/pages/[org]/mr/[link]/index.tsx b/moon/apps/web/pages/[org]/mr/[link]/index.tsx
index 57cc30878..9e5ea14b5 100644
--- a/moon/apps/web/pages/[org]/mr/[link]/index.tsx
+++ b/moon/apps/web/pages/[org]/mr/[link]/index.tsx
@@ -1,14 +1,14 @@
 'use client'
 
 import React, { useEffect, useRef, useState } from 'react'
-import { BaseStyles, TextInput, ThemeProvider } from '@primer/react'
+import { BaseStyles, ThemeProvider } from '@primer/react'
 import { useAtom } from 'jotai'
 import dynamic from 'next/dynamic'
 import { useRouter } from 'next/router'
 import { toast } from 'react-hot-toast'
 
 import { ConversationItem } from '@gitmono/types/generated'
-import { Button, LoadingSpinner, UIText } from '@gitmono/ui'
+import { Button, LoadingSpinner } from '@gitmono/ui'
 import { PicturePlusIcon } from '@gitmono/ui/Icons'
 import { cn } from '@gitmono/ui/utils'
 
@@ -29,6 +29,7 @@ import { editIdAtom, FALSE_EDIT_VAL, mridAtom, refreshAtom } from '@/components/
 import { AppLayout } from '@/components/Layout/AppLayout'
 import { TabLayout } from '@/components/Layout/TabLayout'
 import { MemberAvatar } from '@/components/MemberAvatar'
+import { MergeBox } from '@/components/MrBox/MergeBox'
 import { tabAtom } from '@/components/MrView/components/Checks/cpns/store'
 import TimelineItems from '@/components/MrView/TimelineItems'
 import { useHandleBottomScrollOffset } from '@/components/NoteEditor/useHandleBottomScrollOffset'
@@ -37,7 +38,6 @@ import { ComposerReactionPicker } from '@/components/Reactions/ComposerReactionP
 import { SimpleNoteContent, SimpleNoteContentRef } from '@/components/SimpleNoteEditor/SimpleNoteContent'
 import { useScope } from '@/contexts/scope'
 import { usePostMRAssignees } from '@/hooks/issues/usePostMRAssignees'
-import { usePostMrTitle } from '@/hooks/MR/usePostMrTitle'
 import { useGetMrDetail } from '@/hooks/useGetMrDetail'
 import { useMrFilesChanged } from '@/hooks/useMrFilesChanged'
 import { usePostMrClose } from '@/hooks/usePostMrClose'
@@ -49,7 +49,8 @@ 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";
+import TitleInput from '@/components/Issues/TitleInput'
+
 
 export interface MRDetail {
   status: string
@@ -70,9 +71,6 @@ const MRDetailPage: PageWithLayout<any> = () => {
   const { closeHint, needComment, handleChange } = useChange({ title: 'Close Merge Request' })
   const { mutate: mrAssignees } = usePostMRAssignees()
   const { mutate: mrLabels } = usePostMRLabels()
-  const [isEdit, setIsEdit] = useState(false)
-  const [editTitle, setEditTitle] = useState(mrDetail?.title)
-  const [loading, setLoading] = useState(false)
   const Checks = dynamic(() => import('@/components/MrView/components/Checks'))
   const [page, _setPage] = useState(1)
 
@@ -81,22 +79,12 @@ const MRDetailPage: PageWithLayout<any> = () => {
   }
 
   const { data: MrFilesChangedData, isLoading: fileChgIsLoading } = useMrFilesChanged(id, {
-    additional: 'string', 
+    additional: 'string',
     pagination: {
       page,
-      per_page: 10,
-    },
+      per_page: 10
+    }
   })
-  const { mutate: modifyTitle } = usePostMrTitle()
-
-  // 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)
@@ -225,25 +213,6 @@ const MRDetailPage: PageWithLayout<any> = () => {
     }
   })
 
-  const handleSave = () => {
-    if (editTitle === mrDetail?.title || editTitle === '') {
-      apiErrorToast(new Error('Nothing Changed or is Empty'))
-      return
-    }
-    setLoading(true)
-    modifyTitle(
-      { link: id, data: { content: editTitle as string } },
-      {
-        onError: (err) => apiErrorToast(err),
-        onSuccess: async () => await refetch({ throwOnError: true }),
-        onSettled: () => {
-          setIsEdit(false)
-          setLoading(false)
-        }
-      }
-    )
-  }
-
   const [tab] = useAtom(tabAtom)
   const Conversation = () => (
     <div className='flex gap-40'>
@@ -256,24 +225,7 @@ const MRDetailPage: PageWithLayout<any> = () => {
           mrDetail && <TimelineItems detail={mrDetail} id={id} type='mr' editorRef={editorRef} />
         )}
         <div style={{ marginTop: '12px' }} className='prose'>
-          {/*<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' && (
-              <MergeBox prId={id} />
-            )}
-          </div>
+          <div className='w-full'>{mrDetail && mrDetail.status === 'open' && <MergeBox prId={id} />}</div>
           <h2>Add a comment</h2>
           <input {...dropzone.getInputProps()} />
           <div className='rounded-lg border p-6'>
@@ -409,9 +361,9 @@ const MRDetailPage: PageWithLayout<any> = () => {
         <div className='align-center container absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 justify-center'>
           <LoadingSpinner />
         </div>
-        ) : MrFilesChangedData?.data?.page.items ? (
-          <FileDiff diffs={MrFilesChangedData.data.page.items} treeData={MrFilesChangedData.data} />
-        ) : (
+      ) : MrFilesChangedData?.data?.page.items ? (
+        <FileDiff diffs={MrFilesChangedData.data.page.items} treeData={MrFilesChangedData.data} />
+      ) : (
         <div>No files changed</div>
       )}
     </>
@@ -421,43 +373,9 @@ const MRDetailPage: PageWithLayout<any> = () => {
     <ThemeProvider>
       <BaseStyles>
         <div className='h-screen overflow-auto p-6'>
-          <div className='mb-2 w-[70%]'>
-            {!isEdit && (
-              <>
-                <div className='flex w-full items-center justify-between'>
-                  <UIText size='text-2xl' weight='font-bold' className='-tracking-[1px] lg:flex'>
-                    {`${mrDetail?.title || ''}`}
-                    <span>&nbsp;</span>
-                    <span className='font-light !text-[#59636e]'>${id}</span>
-                  </UIText>
-                  <Button
-                    onClick={() => {
-                      setEditTitle(mrDetail?.title)
-                      setIsEdit(true)
-                    }}
-                  >
-                    Edit
-                  </Button>
-                </div>
-              </>
-            )}
-            {isEdit && (
-              <>
-                <div className='flex w-full items-center justify-between gap-2'>
-                  <TextInput
-                    value={editTitle || ''}
-                    onChange={(e) => setEditTitle(e.target.value)}
-                    className='new-issue-input no-border-input w-[80%]'
-                    trailingVisual={() => (loading ? <LoadingSpinner /> : '')}
-                  />
-                  <div className='flex gap-4'>
-                    <Button onClick={handleSave}>Save</Button>
-                    <Button onClick={() => setIsEdit(false)}>Cancel</Button>
-                  </div>
-                </div>
-              </>
-            )}
-          </div>
+          {mrDetail && (
+            <TitleInput title={mrDetail.title} whoami='mr' id={id} callback={() => refetch({ throwOnError: true })} />
+          )}
           <div>
             <TabLayout>
               {tab === 'check' && <Checks mr={id} />}