diff --git a/moon/apps/web/components/Issues/IssueDetailPage.tsx b/moon/apps/web/components/Issues/IssueDetailPage.tsx
index 3438f4666..a3a84c87c 100644
--- a/moon/apps/web/components/Issues/IssueDetailPage.tsx
+++ b/moon/apps/web/components/Issues/IssueDetailPage.tsx
@@ -326,7 +326,7 @@ export default function IssueDetailPage({ link }: { link: string }) {
                     <UIText size='text-2xl' weight='font-bold' className='-tracking-[1px] lg:flex'>
                       {`${issueDetail?.title || ''}`}
                       <span>&nbsp;</span>
-                      <span className='font-light !text-[#59636e]'>${issueDetail?.id}</span>
+                      <span className='font-light !text-[#59636e]'>${link}</span>
                     </UIText>
                     <Button
                       onClick={() => {
@@ -384,7 +384,7 @@ export default function IssueDetailPage({ link }: { link: string }) {
                     <LoadingSpinner />
                   </div>
                 ) : (
-                  <TimelineItems detail={issueDetail} id={link} type='issue' editorRef={editorRef}/>
+                  <TimelineItems detail={issueDetail} id={link} type='issue' editorRef={editorRef} />
                 )}
 
                 {info && info.status === 'open' && (
diff --git a/moon/apps/web/components/Issues/utils/store.tsx b/moon/apps/web/components/Issues/utils/store.tsx
index 80b3d5a16..1877c1bc2 100644
--- a/moon/apps/web/components/Issues/utils/store.tsx
+++ b/moon/apps/web/components/Issues/utils/store.tsx
@@ -48,4 +48,4 @@ export const editIdAtom = atom(0)
 
 export const refreshAtom = atom(0)
 
-export const buildId = atom('')
+export const buildIdAtom = atom('')
diff --git a/moon/apps/web/components/Layout/TabLayout.tsx b/moon/apps/web/components/Layout/TabLayout.tsx
new file mode 100644
index 000000000..ea52f8f6e
--- /dev/null
+++ b/moon/apps/web/components/Layout/TabLayout.tsx
@@ -0,0 +1,36 @@
+import { PropsWithChildren } from 'react'
+import { ChecklistIcon, CommentDiscussionIcon, FileDiffIcon } from '@primer/octicons-react'
+import { UnderlineNav } from '@primer/react'
+import { useAtom } from 'jotai'
+
+import { tabAtom } from '../MrView/components/Checks/cpns/store'
+
+export const TabLayout = ({ children }: PropsWithChildren) => {
+  const [tab, setTab] = useAtom(tabAtom)
+
+  return (
+    <>
+      <UnderlineNav aria-label='Repository with leading icons'>
+        <UnderlineNav.Item
+          aria-selected={tab === 'conversation'}
+          onClick={() => setTab('conversation')}
+          icon={CommentDiscussionIcon}
+          // aria-current='page'
+        >
+          Conversation
+        </UnderlineNav.Item>
+        <UnderlineNav.Item aria-selected={tab === 'check'} onClick={() => setTab('check')} icon={ChecklistIcon}>
+          Checks
+        </UnderlineNav.Item>
+        <UnderlineNav.Item
+          aria-selected={tab === 'filechange'}
+          onClick={() => setTab('filechange')}
+          icon={FileDiffIcon}
+        >
+          Files Changed
+        </UnderlineNav.Item>
+      </UnderlineNav>
+      {children}
+    </>
+  )
+}
diff --git a/moon/apps/web/components/MrView/components/Checks/cpns/Task.tsx b/moon/apps/web/components/MrView/components/Checks/cpns/Task.tsx
index e9d6b3f9e..e6eadb0ba 100644
--- a/moon/apps/web/components/MrView/components/Checks/cpns/Task.tsx
+++ b/moon/apps/web/components/MrView/components/Checks/cpns/Task.tsx
@@ -4,15 +4,15 @@ import { useAtom } from 'jotai'
 
 import { LoadingSpinner } from '@gitmono/ui/Spinner'
 
-import { buildId } from '@/components/Issues/utils/store'
+import { buildIdAtom } from '@/components/Issues/utils/store'
 import { TaskResult } from '@/hooks/SSE/useGetMrTask'
 
-import { loadingAtom, Status, statusAtom } from './store'
+import { Status, statusMapAtom } from './store'
 
 export const mocks = [
   {
     arguments: '--env=prod --force',
-    build_id: 'BUILD_20250813001',
+    build_id: '0198b32b-6ede-7be2-99dc-aee8c7ef358d',
     end_at: '2025-08-13T16:20:00Z',
     exit_code: 0,
     mr: 'MR-125',
@@ -47,31 +47,8 @@ export const mocks = [
 
 export const Task = ({ list }: { list: TaskResult[] }) => {
   const [extend, setExtend] = useState(false)
-  const [_, setBuildId] = useAtom(buildId)
-  const [_loading, setLoading] = useAtom(loadingAtom)
-  const [status] = useAtom(statusAtom)
 
-  list = mocks
-
-  const handleClick = (build_id: string) => {
-    // 此处建立连接
-    setLoading(true)
-    setBuildId(build_id)
-    // if (eventSourcesRef.current[build_id]) return
-    // setEventSource(build_id)
-  }
-
-  const identifyStatus = (status: string) => {
-    switch (status) {
-      case Status.Success:
-        return <CheckIcon size={14} className='text-[#1a7f37]' />
-      case Status.Fail:
-        return <XIcon size={14} className='text-[#d53d46]' />
-
-      default:
-        return <LoadingSpinner />
-    }
-  }
+  // list = mocks
 
   return (
     <>
@@ -89,17 +66,54 @@ export const Task = ({ list }: { list: TaskResult[] }) => {
       {!extend && list && (
         <div className='fz-[14px] border-b pl-4 font-medium text-[#0969da]'>
           {list.map((i) => (
-            <div
-              onClick={() => handleClick(i.build_id)}
-              className='!fz-[14px] flex !h-[37px] items-center gap-2'
-              key={i.build_id}
-            >
-              {identifyStatus(status[i.build_id])}
-              <span className='cursor-pointer hover:text-[#1f2328]'>{i.mr}</span>
-            </div>
+            <TaskItem key={i.build_id} task={i} />
           ))}
         </div>
       )}
     </>
   )
 }
+
+export const TaskItem = ({ task }: { task: TaskResult }) => {
+  const [statusMap] = useAtom(statusMapAtom)
+
+  const [_, setBuildId] = useAtom(buildIdAtom)
+  const handleClick = (build_id: string) => {
+    // 此处建立连接
+    // setLoading(true)
+    setBuildId(build_id)
+    // if (eventSourcesRef.current[build_id]) return
+    // setEventSource(build_id)
+  }
+
+  return (
+    <>
+      <div
+        onClick={() => handleClick(task.build_id)}
+        className='!fz-[14px] flex !h-[37px] items-center gap-2'
+        key={task.build_id}
+      >
+        {identifyStatus(statusMap.get(task.build_id)?.status || Status.NotFound)}
+        <span className='cursor-pointer hover:text-[#1f2328]'>{task.build_id}</span>
+      </div>
+    </>
+  )
+}
+
+export const identifyStatus = (status: Status[keyof Status]) => {
+  switch (status) {
+    case Status.Completed:
+      return <CheckIcon size={14} className='text-[#1a7f37]' />
+    case Status.Failed:
+      return <XIcon size={14} className='text-[#d53d46]' />
+    case Status.Building:
+      return <LoadingSpinner />
+    case Status.Pending:
+      return <LoadingSpinner />
+    case Status.NotFound:
+      return <LoadingSpinner />
+
+    default:
+      return <XIcon size={14} className='text-[#d53d46]' />
+  }
+}
diff --git a/moon/apps/web/components/MrView/components/Checks/cpns/store.ts b/moon/apps/web/components/MrView/components/Checks/cpns/store.ts
index aca7a61a1..9757c19c6 100644
--- a/moon/apps/web/components/MrView/components/Checks/cpns/store.ts
+++ b/moon/apps/web/components/MrView/components/Checks/cpns/store.ts
@@ -1,11 +1,18 @@
 import { atom } from 'jotai'
 
+import { MRTaskStatus } from '@/hooks/SSE/useGetMrTaskStatus'
+
 export enum Status {
-  Pending = 'pending',
-  Success = 'success',
-  Fail = 'fail'
+  Pending = 'Pending',
+  Completed = 'Completed',
+  Failed = 'Failed',
+  Building = 'Building',
+  Interrupted = 'Interrupted',
+  NotFound = 'NotFound'
 }
 
-export const logsAtom = atom<Record<string, string[]>>({})
+export const logsAtom = atom<Record<string, string>>({})
 export const statusAtom = atom<Record<string, Status>>({})
-export const loadingAtom = atom(false)
+export const loadingAtom = atom(true)
+export const statusMapAtom = atom<Map<string, MRTaskStatus>>(new Map())
+export const tabAtom = atom<'conversation' | 'check' | 'filechange'>('conversation')
diff --git a/moon/apps/web/components/MrView/components/Checks/index.tsx b/moon/apps/web/components/MrView/components/Checks/index.tsx
index 0cda08734..190c33663 100644
--- a/moon/apps/web/components/MrView/components/Checks/index.tsx
+++ b/moon/apps/web/components/MrView/components/Checks/index.tsx
@@ -1,32 +1,67 @@
-import { memo, useEffect } from 'react'
+import { useEffect } from 'react'
 import { LazyLog } from '@melloware/react-logviewer'
 import { useAtom } from 'jotai'
 
 import { LoadingSpinner } from '@gitmono/ui/Spinner'
 
-import { buildId } from '@/components/Issues/utils/store'
-import { TaskResult, useGetMrTask } from '@/hooks/SSE/useGetMrTask'
+import { buildIdAtom } from '@/components/Issues/utils/store'
+import { HttpTaskRes } from '@/hooks/SSE/ssmRequest'
+// import { TaskResult } from '@/hooks/SSE/useGetMrTask'
+import { useGetMrTaskStatus } from '@/hooks/SSE/useGetMrTaskStatus'
 
 import { useTaskSSE } from '../../hook/useSSM'
-import { loadingAtom } from './cpns/store'
-import { mocks, Task } from './cpns/Task'
+import { statusMapAtom } from './cpns/store'
+import { Task } from './cpns/Task'
 
 const Checks = ({ mr }: { mr: string }) => {
-  const { data } = useGetMrTask(mr)
-  const [buildid, setBuildId] = useAtom(buildId)
-  const { logsMap, setEventSource } = useTaskSSE()
-  const [loading] = useAtom(loadingAtom)
+  // const { data } = useGetMrTask(mr)
+  const [buildid, setBuildId] = useAtom(buildIdAtom)
+  const { logsMap, setEventSource, eventSourcesRef, setLogsMap } = useTaskSSE()
+  const [statusMap, _setStatusMap] = useAtom(statusMapAtom)
+  // 获取所有构建任务
+  const { data: status } = useGetMrTaskStatus(mr)
+
+  useEffect(() => {
+    // 构建日志id与日志映射，同时获取已存在日志
+    if (!status) return
+    // setBuildId((prev) => prev ?? status[0].build_id)
+    const fetchLogs = async () => {
+      const logsResult = await Promise.allSettled(
+        status.map(async (i) => {
+          statusMap.set(i.build_id, i)
+          const res = await HttpTaskRes(i.build_id, 0, 4096)
+
+          return res
+        })
+      )
+      const newLogsMap = logsResult.reduce(
+        (acc, i) => {
+          if (i.status === 'fulfilled' && i.value) {
+            acc[i.value.task_id] = i.value.data === '' ? 'empty logs, please check it later' : i.value.data
+          }
+          return acc
+        },
+        { ...logsMap }
+      )
+
+      setLogsMap(newLogsMap)
+    }
+
+    fetchLogs()
+    setBuildId(status[0].build_id)
+    return () => {
+      statusMap.clear()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [status])
 
   // 页面加载时建立连接
   useEffect(() => {
-    if (data) {
-      setBuildId(data[0].build_id)
-      data.map((i) => setEventSource(i.build_id))
+    if (status?.length) {
+      status.map((i) => setEventSource(i.build_id))
     }
-    setBuildId(mocks[0].build_id)
-    mocks.map((i) => setEventSource(i.build_id))
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+  }, [status])
 
   return (
     <>
@@ -39,27 +74,29 @@ const Checks = ({ mr }: { mr: string }) => {
         <div className='flex justify-between' style={{ height: `calc(100vh - 164px)` }}>
           {/* left side */}
           <div className='h-full w-[40%] border-r'>
-            {/* {data &&  <Task list={data} />} */}
-            <Task list={data as TaskResult[]} />
+            {status && <Task list={status} />}
+            {/* <Task list={status as TaskResult[]} /> */}
           </div>
           {/* right side */}
           <div className='flex-1'>
-            {logsMap[buildid] ? (
-              <LazyLog
-                extraLines={1}
-                text={(logsMap[buildid] ?? []).join('\n')}
-                stream
-                enableSearch
-                caseInsensitive
-                follow
-              />
-            ) : (
-              loading && (
+            {
+              logsMap[buildid] && eventSourcesRef.current[buildid] ? (
+                <LazyLog extraLines={1} text={logsMap[buildid]} stream enableSearch caseInsensitive follow />
+              ) : eventSourcesRef.current[buildid] ? (
+                <div></div>
+              ) : (
+                // <LazyLog extraLines={1} text={logsMap[buildid]} stream enableSearch caseInsensitive follow />
                 <div className='flex h-full flex-1 items-center justify-center'>
                   <LoadingSpinner />
                 </div>
               )
-            )}
+
+              // loading && (
+              //   <div className='flex h-full flex-1 items-center justify-center'>
+              //     <LoadingSpinner />
+              //   </div>
+              // )
+            }
           </div>
         </div>
       </div>
@@ -67,4 +104,5 @@ const Checks = ({ mr }: { mr: string }) => {
   )
 }
 
-export default memo(Checks)
+// export default memo(Checks)
+export default Checks
diff --git a/moon/apps/web/components/MrView/hook/useSSM.ts b/moon/apps/web/components/MrView/hook/useSSM.ts
index a1631a9ed..96b78b739 100644
--- a/moon/apps/web/components/MrView/hook/useSSM.ts
+++ b/moon/apps/web/components/MrView/hook/useSSM.ts
@@ -38,18 +38,27 @@ export const useTaskSSE = () => {
   const [_status, setStatus] = useAtom(statusAtom)
 
   const setEventSource: (taskId: string) => void = (taskId: string) => {
-    // const es = new EventSource(`/sse/task-output/${taskId}`)
-    const es = new EventSource(`/api/event?id=${taskId}`)
+    if (eventSourcesRef.current[taskId]) return
+    const es = new EventSource(`/sse/task-output/${taskId}`)
+    // const es = new EventSource(`/api/event?id=${taskId}`)
 
     es.onmessage = (e) => {
       setLogsMap((prev) => {
-        const prevLogs = prev[taskId] ?? []
+        const prevLogs = prev[taskId] ?? ''
+        const newLog = e.data + '\n'
+
+        // 判断最后一条是否重复
+        if (prevLogs.endsWith(newLog)) {
+          return prev // 重复就直接返回原对象
+        }
 
         return {
           ...prev,
-          [taskId]: [...prevLogs, e.data] // 每条消息生成新数组
+          [taskId]: prevLogs + newLog
         }
       })
+
+      setLoading(false)
     }
 
     // status
@@ -78,11 +87,12 @@ export const useTaskSSE = () => {
       Object.values(eventSourcesRef.current).forEach((es) => es.close())
       eventSourcesRef.current = {}
       setLoading(false)
+      setLogsMap({})
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
-  return { eventSourcesRef, setEventSource, logsMap }
+  return { eventSourcesRef, setEventSource, logsMap, setLogsMap }
 }
 
 export const useMultiTaskSSE = (taskIds: string[]) => {
diff --git a/moon/apps/web/hooks/SSE/ssmRequest.ts b/moon/apps/web/hooks/SSE/ssmRequest.ts
new file mode 100644
index 000000000..4c66b6aa0
--- /dev/null
+++ b/moon/apps/web/hooks/SSE/ssmRequest.ts
@@ -0,0 +1,57 @@
+import { HTTPLogRes } from './useGetHTTPLog'
+
+export const fetchTask = async (mr: string) => {
+  const res = await fetch(`/sse/mr-task/${mr}`, {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  })
+
+  if (!res.ok) {
+    throw new Error(`HTTP error ${res.status}`)
+  }
+  return res.json()
+}
+
+export const taskStatus = async (taskId: string) => {
+  const res = await fetch(`/sse/task-status/${taskId}`, {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  })
+
+  if (!res.ok) {
+    throw new Error(`HTTP error ${res.status}`)
+  }
+  return res.json()
+}
+
+export const MrTaskStatus = async (mr: string) => {
+  const res = await fetch(`/sse/tasks/${mr}`, {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  })
+
+  if (!res.ok) {
+    throw new Error(`HTTP error ${res.status}`)
+  }
+  return res.json()
+}
+
+export const HttpTaskRes = async (taskId: string, offset: number, len: number): Promise<HTTPLogRes> => {
+  const res = await fetch(`/sse/task-output-segment/${taskId}?offset=${offset}&len=${len}`, {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  })
+
+  if (!res.ok) {
+    throw new Error(`HTTP error ${res.status}`)
+  }
+  return res.json()
+}
diff --git a/moon/apps/web/hooks/SSE/useGetHTTPLog.ts b/moon/apps/web/hooks/SSE/useGetHTTPLog.ts
new file mode 100644
index 000000000..d9537cdfd
--- /dev/null
+++ b/moon/apps/web/hooks/SSE/useGetHTTPLog.ts
@@ -0,0 +1,23 @@
+import { useQuery } from '@tanstack/react-query'
+
+import { HttpTaskRes } from './ssmRequest'
+
+export interface HTTPLogRes {
+  task_id: string
+  offset: number
+  len: number
+  data: string
+  next_offset: number
+  file_size: number
+  eof: boolean
+}
+
+export function useGetHTTPLog(taskId: string) {
+  return useQuery<HTTPLogRes, Error>({
+    queryKey: [taskId],
+    queryFn: () => HttpTaskRes(taskId, 0, 4096)
+    // refetchInterval: 15000,
+    // refetchIntervalInBackground: true,
+    // enabled: !!mr
+  })
+}
diff --git a/moon/apps/web/hooks/SSE/useGetMrTask.ts b/moon/apps/web/hooks/SSE/useGetMrTask.ts
index 3aea405fe..3c0dbaf7c 100644
--- a/moon/apps/web/hooks/SSE/useGetMrTask.ts
+++ b/moon/apps/web/hooks/SSE/useGetMrTask.ts
@@ -1,6 +1,6 @@
 import { useQuery } from '@tanstack/react-query'
 
-import { fetchTask } from './useRequest'
+import { fetchTask } from './ssmRequest'
 
 export interface TaskResult {
   arguments: string
@@ -17,6 +17,9 @@ export interface TaskResult {
 export function useGetMrTask(mr: string) {
   return useQuery<TaskResult[], Error>({
     queryKey: [mr],
-    queryFn: () => fetchTask(mr)
+    queryFn: () => fetchTask(mr),
+    // refetchInterval: 15000,
+    // refetchIntervalInBackground: true,
+    // enabled: !!mr
   })
 }
diff --git a/moon/apps/web/hooks/SSE/useGetMrTaskStatus.ts b/moon/apps/web/hooks/SSE/useGetMrTaskStatus.ts
new file mode 100644
index 000000000..490bab38b
--- /dev/null
+++ b/moon/apps/web/hooks/SSE/useGetMrTaskStatus.ts
@@ -0,0 +1,28 @@
+import { useQuery } from '@tanstack/react-query'
+
+import { Status } from '@/components/MrView/components/Checks/cpns/store'
+
+import { MrTaskStatus } from './ssmRequest'
+
+export interface MRTaskStatus {
+  arguments: string
+  build_id: string
+  end_at: string
+  exit_code: number
+  mr: string
+  output_file: string
+  repo_name: string
+  start_at: string
+  status: Status
+  target: string
+}
+
+export function useGetMrTaskStatus(mr: string) {
+  return useQuery<MRTaskStatus[], Error>({
+    queryKey: [mr],
+    queryFn: () => MrTaskStatus(mr),
+    refetchInterval: 15000,
+    refetchIntervalInBackground: true,
+    enabled: !!mr
+  })
+}
diff --git a/moon/apps/web/hooks/SSE/useGetTaskStatus.ts b/moon/apps/web/hooks/SSE/useGetTaskStatus.ts
new file mode 100644
index 000000000..03275d904
--- /dev/null
+++ b/moon/apps/web/hooks/SSE/useGetTaskStatus.ts
@@ -0,0 +1,16 @@
+import { useQuery } from '@tanstack/react-query'
+
+import { taskStatus } from './ssmRequest'
+
+export interface TaskStatus {
+  exit_code: number
+  message: string
+  status: string
+}
+
+export function useGetTaskStatus(taskId: string) {
+  return useQuery<TaskStatus, Error>({
+    queryKey: [taskId],
+    queryFn: () => taskStatus(taskId)
+  })
+}
diff --git a/moon/apps/web/hooks/SSE/useRequest.ts b/moon/apps/web/hooks/SSE/useRequest.ts
deleted file mode 100644
index 3651aae82..000000000
--- a/moon/apps/web/hooks/SSE/useRequest.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-export const fetchTask = async (mr: string) => {
-  const res = await fetch(`/sse/mr-task/${mr}`, {
-    method: 'GET',
-    headers: {
-      'Content-Type': 'application/json'
-    }
-  })
-
-  if (!res.ok) {
-    throw new Error(`HTTP error ${res.status}`)
-  }
-  return res.json()
-}
diff --git a/moon/apps/web/pages/[org]/mr/[link]/index.tsx b/moon/apps/web/pages/[org]/mr/[link]/index.tsx
index 27c67258d..d909fcfec 100644
--- a/moon/apps/web/pages/[org]/mr/[link]/index.tsx
+++ b/moon/apps/web/pages/[org]/mr/[link]/index.tsx
@@ -1,9 +1,9 @@
 'use client'
 
 import React, { useEffect, useRef, useState } from 'react'
-import { ChecklistIcon, CommentDiscussionIcon, FileDiffIcon } from '@primer/octicons-react'
 import { BaseStyles, TextInput, ThemeProvider } from '@primer/react'
 import { useAtom } from 'jotai'
+import dynamic from 'next/dynamic'
 import { useRouter } from 'next/router'
 import { toast } from 'react-hot-toast'
 
@@ -26,8 +26,9 @@ import {
 } from '@/components/Issues/utils/sideEffect'
 import { editIdAtom, FALSE_EDIT_VAL, mridAtom, refreshAtom } from '@/components/Issues/utils/store'
 import { AppLayout } from '@/components/Layout/AppLayout'
+import { TabLayout } from '@/components/Layout/TabLayout'
 import { MemberAvatar } from '@/components/MemberAvatar'
-import Checks from '@/components/MrView/components/Checks'
+import { tabAtom } from '@/components/MrView/components/Checks/cpns/store'
 import TimelineItems from '@/components/MrView/TimelineItems'
 import { useHandleBottomScrollOffset } from '@/components/NoteEditor/useHandleBottomScrollOffset'
 import AuthAppProviders from '@/components/Providers/AuthAppProviders'
@@ -48,8 +49,6 @@ import { apiErrorToast } from '@/utils/apiErrorToast'
 import { trimHtml } from '@/utils/trimHtml'
 import { PageWithLayout } from '@/utils/types'
 
-const { UnderlinePanels } = require('@primer/react/experimental')
-
 export interface MRDetail {
   status: string
   conversations: ConversationItem[]
@@ -72,6 +71,7 @@ const MRDetailPage: PageWithLayout<any> = () => {
   const [isEdit, setIsEdit] = useState(false)
   const [editTitle, setEditTitle] = useState(mrDetail?.title)
   const [loading, setLoading] = useState(false)
+  const Checks = dynamic(() => import('@/components/MrView/components/Checks'))
 
   if (mrDetail && typeof mrDetail.status === 'string') {
     mrDetail.status = mrDetail.status.toLowerCase()
@@ -235,6 +235,175 @@ const MRDetailPage: PageWithLayout<any> = () => {
     )
   }
 
+  const [tab] = useAtom(tabAtom)
+  const Conversation = () => (
+    <div className='flex gap-40'>
+      <div className='mt-3 flex w-[60%] flex-col'>
+        {detailIsLoading ? (
+          <div className='flex h-16 items-center justify-center'>
+            <LoadingSpinner />
+          </div>
+        ) : (
+          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>
+          <h2>Add a comment</h2>
+          <input {...dropzone.getInputProps()} />
+          <div className='rounded-lg border p-6'>
+            <SimpleNoteContent
+              commentId='temp' //  Temporary filling, replacement later
+              ref={editorRef}
+              editable='all'
+              content={EMPTY_HTML}
+              onKeyDown={onKeyDownScrollHandler}
+              onChange={(html) => handleChange(html)}
+            />
+            <Button
+              variant='plain'
+              iconOnly={<PicturePlusIcon />}
+              accessibilityLabel='Add files'
+              onClick={dropzone.open}
+              tooltip='Add files'
+            />
+            <ComposerReactionPicker
+              editorRef={editorRef}
+              open={isReactionPickerOpen}
+              onOpenChange={setIsReactionPickerOpen}
+            />
+          </div>
+          <div className='flex justify-end gap-2'>
+            {mrDetail && mrDetail.status === 'open' && (
+              <Button
+                disabled={!login || mrCloseIsPending}
+                onClick={handleMrClose}
+                aria-label='Close Merge Request'
+                className={cn(buttonClasses)}
+                loading={mrCloseIsPending}
+              >
+                {closeHint}
+              </Button>
+            )}
+            {mrDetail && mrDetail.status === 'closed' && (
+              <Button
+                disabled={!login || mrReopenIsPending}
+                onClick={handleMrReopen}
+                aria-label='Reopen Merge Request'
+                className={cn(buttonClasses)}
+                loading={mrReopenIsPending}
+              >
+                Reopen Merge Request
+              </Button>
+            )}
+            <Button
+              disabled={!login || mrCommentIsPending}
+              onClick={() => send_comment()}
+              aria-label='Comment'
+              className={cn(buttonClasses)}
+              loading={mrCommentIsPending}
+            >
+              Comment
+            </Button>
+          </div>
+        </div>
+      </div>
+      {/* <SideBar /> */}
+      <div className='flex flex-1 flex-col flex-wrap items-center'>
+        <BadgeItem
+          selectPannelProps={{ title: 'Assign up to 10 people to this issue' }}
+          items={avatars}
+          title='Assignees'
+          handleGroup={(selected) => handleAssignees(selected)}
+          open={open}
+          // eslint-disable-next-line react-hooks/rules-of-hooks
+          onOpenChange={(open) => handleOpenChange(open)}
+          selected={fetchSelected}
+        >
+          {(el) => {
+            const names = Array.from(new Set(splitFun(el)))
+
+            return (
+              <>
+                {names.map((i, index) => (
+                  // eslint-disable-next-line react/no-array-index-key
+                  <div key={index} className='mb-4 flex items-center gap-2 px-4 text-sm text-gray-500'>
+                    <MemberAvatar size='sm' member={memberMap.get(i)} />
+                    <span>{i}</span>
+                  </div>
+                ))}
+              </>
+            )
+          }}
+        </BadgeItem>
+        <BadgeItem
+          selectPannelProps={{ title: 'Apply labels to this issue' }}
+          items={labels}
+          title='Labels'
+          handleGroup={(selected) => handleLabels(selected)}
+          open={label_open}
+          onOpenChange={(open) => label_handleOpenChange(open)}
+          selected={label_fetchSelected}
+        >
+          {(el) => {
+            const names = splitFun(el)
+
+            return (
+              <>
+                <div className='flex flex-wrap items-start px-4'>
+                  {names.map((i, index) => {
+                    const label = labelMap.get(i) ?? {}
+
+                    return (
+                      // eslint-disable-next-line react/no-array-index-key
+                      <div key={index} className='mb-4 flex items-center justify-center pr-2'>
+                        <div
+                          className='rounded-full border px-2 text-sm text-[#fff]'
+                          //eslint-disable-next-line react/forbid-dom-props
+                          style={{ backgroundColor: label.color, borderColor: label.color }}
+                        >
+                          {label.name}
+                        </div>
+                      </div>
+                    )
+                  })}
+                </div>
+              </>
+            )
+          }}
+        </BadgeItem>
+        <BadgeItem title='Type' items={labels} />
+        <BadgeItem title='Projects' items={labels} />
+        <BadgeItem title='Milestones' items={labels} />
+      </div>
+    </div>
+  )
+  const FileChange = () => (
+    <>
+      {fileChgIsLoading ? (
+        <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?.content ? (
+        // <FileDiff diffs={MrFilesChangedData.data.content} treeData={MrFilesChangedData.data} />
+        <div>files</div>
+      ) : (
+        <div>No files changed</div>
+      )}
+    </>
+  )
+
   return (
     <ThemeProvider>
       <BaseStyles>
@@ -277,179 +446,11 @@ const MRDetailPage: PageWithLayout<any> = () => {
             )}
           </div>
           <div>
-            <UnderlinePanels aria-label='Select a tab'>
-              <UnderlinePanels.Tab icon={CommentDiscussionIcon}>Conversation</UnderlinePanels.Tab>
-              <UnderlinePanels.Tab icon={ChecklistIcon}>Checks</UnderlinePanels.Tab>
-              <UnderlinePanels.Tab icon={FileDiffIcon}>Files Changed</UnderlinePanels.Tab>
-              <UnderlinePanels.Panel>
-                <div className='flex gap-40'>
-                  <div className='mt-3 flex w-[60%] flex-col'>
-                    {detailIsLoading ? (
-                      <div className='flex h-16 items-center justify-center'>
-                        <LoadingSpinner />
-                      </div>
-                    ) : (
-                      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>
-                      <h2>Add a comment</h2>
-                      <input {...dropzone.getInputProps()} />
-                      <div className='rounded-lg border p-6'>
-                        <SimpleNoteContent
-                          commentId='temp' //  Temporary filling, replacement later
-                          ref={editorRef}
-                          editable='all'
-                          content={EMPTY_HTML}
-                          onKeyDown={onKeyDownScrollHandler}
-                          onChange={(html) => handleChange(html)}
-                        />
-                        <Button
-                          variant='plain'
-                          iconOnly={<PicturePlusIcon />}
-                          accessibilityLabel='Add files'
-                          onClick={dropzone.open}
-                          tooltip='Add files'
-                        />
-                        <ComposerReactionPicker
-                          editorRef={editorRef}
-                          open={isReactionPickerOpen}
-                          onOpenChange={setIsReactionPickerOpen}
-                        />
-                      </div>
-                      <div className='flex justify-end gap-2'>
-                        {mrDetail && mrDetail.status === 'open' && (
-                          <Button
-                            disabled={!login || mrCloseIsPending}
-                            onClick={handleMrClose}
-                            aria-label='Close Merge Request'
-                            className={cn(buttonClasses)}
-                            loading={mrCloseIsPending}
-                          >
-                            {closeHint}
-                          </Button>
-                        )}
-                        {mrDetail && mrDetail.status === 'closed' && (
-                          <Button
-                            disabled={!login || mrReopenIsPending}
-                            onClick={handleMrReopen}
-                            aria-label='Reopen Merge Request'
-                            className={cn(buttonClasses)}
-                            loading={mrReopenIsPending}
-                          >
-                            Reopen Merge Request
-                          </Button>
-                        )}
-                        <Button
-                          disabled={!login || mrCommentIsPending}
-                          onClick={() => send_comment()}
-                          aria-label='Comment'
-                          className={cn(buttonClasses)}
-                          loading={mrCommentIsPending}
-                        >
-                          Comment
-                        </Button>
-                      </div>
-                    </div>
-                  </div>
-                  {/* <SideBar /> */}
-                  <div className='flex flex-1 flex-col flex-wrap items-center'>
-                    <BadgeItem
-                      selectPannelProps={{ title: 'Assign up to 10 people to this issue' }}
-                      items={avatars}
-                      title='Assignees'
-                      handleGroup={(selected) => handleAssignees(selected)}
-                      open={open}
-                      // eslint-disable-next-line react-hooks/rules-of-hooks
-                      onOpenChange={(open) => handleOpenChange(open)}
-                      selected={fetchSelected}
-                    >
-                      {(el) => {
-                        const names = Array.from(new Set(splitFun(el)))
-
-                        return (
-                          <>
-                            {names.map((i, index) => (
-                              // eslint-disable-next-line react/no-array-index-key
-                              <div key={index} className='mb-4 flex items-center gap-2 px-4 text-sm text-gray-500'>
-                                <MemberAvatar size='sm' member={memberMap.get(i)} />
-                                <span>{i}</span>
-                              </div>
-                            ))}
-                          </>
-                        )
-                      }}
-                    </BadgeItem>
-                    <BadgeItem
-                      selectPannelProps={{ title: 'Apply labels to this issue' }}
-                      items={labels}
-                      title='Labels'
-                      handleGroup={(selected) => handleLabels(selected)}
-                      open={label_open}
-                      onOpenChange={(open) => label_handleOpenChange(open)}
-                      selected={label_fetchSelected}
-                    >
-                      {(el) => {
-                        const names = splitFun(el)
-
-                        return (
-                          <>
-                            <div className='flex flex-wrap items-start px-4'>
-                              {names.map((i, index) => {
-                                const label = labelMap.get(i) ?? {}
-
-                                return (
-                                  // eslint-disable-next-line react/no-array-index-key
-                                  <div key={index} className='mb-4 flex items-center justify-center pr-2'>
-                                    <div
-                                      className='rounded-full border px-2 text-sm text-[#fff]'
-                                      //eslint-disable-next-line react/forbid-dom-props
-                                      style={{ backgroundColor: label.color, borderColor: label.color }}
-                                    >
-                                      {label.name}
-                                    </div>
-                                  </div>
-                                )
-                              })}
-                            </div>
-                          </>
-                        )
-                      }}
-                    </BadgeItem>
-                    <BadgeItem title='Type' items={labels} />
-                    <BadgeItem title='Projects' items={labels} />
-                    <BadgeItem title='Milestones' items={labels} />
-                  </div>
-                </div>
-              </UnderlinePanels.Panel>
-              <UnderlinePanels.Panel>
-                <Checks mr={id} />
-              </UnderlinePanels.Panel>
-              <UnderlinePanels.Panel>
-                {fileChgIsLoading ? (
-                  <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?.content ? (
-                  // <FileDiff diffs={MrFilesChangedData.data.content} treeData={MrFilesChangedData.data} />
-                  <div>files</div>
-                ) : (
-                  <div>No files changed</div>
-                )}
-              </UnderlinePanels.Panel>
-            </UnderlinePanels>
+            <TabLayout>
+              {tab === 'check' && <Checks mr={id} />}
+              {tab === 'conversation' && <Conversation />}
+              {tab === 'filechange' && <FileChange />}
+            </TabLayout>
           </div>
         </div>
       </BaseStyles>