diff --git a/moon/apps/web/components/Issues/IssueDetailPage.tsx b/moon/apps/web/components/Issues/IssueDetailPage.tsx
index 3c1e7fe4d..7b35d6b3e 100644
--- a/moon/apps/web/components/Issues/IssueDetailPage.tsx
+++ b/moon/apps/web/components/Issues/IssueDetailPage.tsx
@@ -1,25 +1,36 @@
 'use client'
 
-import React, { useCallback, useEffect, useState, useRef } from 'react'
-import { Card, Flex, Space, Tabs, TabsProps, Timeline } from 'antd'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { IssueClosedIcon, IssueOpenedIcon, IssueReopenedIcon } from '@primer/octicons-react'
+import { Stack } from '@primer/react'
+import { ItemInput } from '@primer/react/lib/deprecated/ActionList'
 import { useRouter } from 'next/router'
 import toast from 'react-hot-toast'
 
-import { CanvasCommentIcon, ResolveCommentIcon, PicturePlusIcon, Button } from '@gitmono/ui'
+import { Button, LoadingSpinner, PicturePlusIcon } from '@gitmono/ui'
 
-import Comment from '@/components/MrView/MRComment'
+import { EMPTY_HTML } from '@/atoms/markdown'
+import { useHandleBottomScrollOffset } from '@/components/NoteEditor/useHandleBottomScrollOffset'
+import { ComposerReactionPicker } from '@/components/Reactions/ComposerReactionPicker'
+import { SimpleNoteContent, SimpleNoteContentRef } from '@/components/SimpleNoteEditor/SimpleNoteContent'
 import { useGetIssueDetail } from '@/hooks/issues/useGetIssueDetail'
 import { usePostIssueClose } from '@/hooks/issues/usePostIssueClose'
 import { usePostIssueComment } from '@/hooks/issues/usePostIssueComment'
 import { usePostIssueReopen } from '@/hooks/issues/usePostIssueReopen'
+import { useGetCurrentUser } from '@/hooks/useGetCurrentUser'
+import { useGetOrganizationMember } from '@/hooks/useGetOrganizationMember'
+import { useSyncedMembers } from '@/hooks/useSyncedMembers'
+import { useUploadHelpers } from '@/hooks/useUploadHelpers'
 import { apiErrorToast } from '@/utils/apiErrorToast'
-import { SimpleNoteContent, SimpleNoteContentRef } from '@/components/SimpleNoteEditor/SimpleNoteContent';
-import { EMPTY_HTML } from '@/atoms/markdown'
-import { useHandleBottomScrollOffset } from '@/components/NoteEditor/useHandleBottomScrollOffset'
-import { useUploadHelpers } from '@/hooks/useUploadHelpers';
-import { ComposerReactionPicker } from '@/components/Reactions/ComposerReactionPicker';
 import { trimHtml } from '@/utils/trimHtml'
 
+import { MemberAvatar } from '../MemberAvatar'
+import TimelineItems from '../MrView/TimelineItems'
+import { BadgeItem } from './IssueNewPage'
+import { tags } from './utils/consts'
+import { extractTextArray } from './utils/extractText'
+import { pickWithReflect } from './utils/pickWithReflectDeep'
+
 interface IssueDetail {
   status: string
   conversations: Conversation[]
@@ -29,9 +40,9 @@ interface Conversation {
   id: number
   conv_type: string
   comment: string
-  created_at: number,
-  updated_at: number,
-  username: string,
+  created_at: number
+  updated_at: number
+  username: string
 }
 
 interface detailRes {
@@ -57,13 +68,17 @@ export default function IssueDetailPage({ id }: { id: string }) {
     setButtonLoading((prev) => ({ ...prev, [key]: value }))
   }
 
+  const [closeHint, setCloseHint] = useState('Close issue')
+
   const { mutate: closeIssue } = usePostIssueClose()
 
   const { mutate: reopenIssue } = usePostIssueReopen()
 
   const { mutate: saveComment } = usePostIssueComment()
 
-  const { data: issueDetailObj, error, isError, refetch } = useGetIssueDetail(id)
+  const { data: issueDetailObj, error, isError, refetch, isLoading: detailIsLoading } = useGetIssueDetail(id)
+
+  const issueDetail = issueDetailObj?.data as IssueDetail | undefined
 
   const applyDetailData = (detail: detailRes | undefined) => {
     if (!detail || !detail.req_result) return
@@ -105,7 +120,37 @@ export default function IssueDetailPage({ id }: { id: string }) {
     })
   }
 
+  const save_comment = useCallback(() => {
+    const currentContentHTML = editorRef.current?.editor?.getHTML() ?? '<p></p>'
+
+    if (trimHtml(currentContentHTML) === '') {
+      toast.error('comment can not be empty!')
+      return
+    }
+    setLoading('comment', true)
+    set_to_loading(3)
+    saveComment(
+      { link: id, data: { content: currentContentHTML } },
+      {
+        onSuccess: async () => {
+          editorRef.current?.clearAndBlur()
+          const { data: issueDetailObj } = await refetch({ throwOnError: true })
+
+          applyDetailData(issueDetailObj)
+          cancel_loading(3)
+          toast.success('comment successfully!')
+        },
+        onError: apiErrorToast,
+        onSettled: () => setLoading('comment', false)
+      }
+    )
+  }, [id, refetch, saveComment])
+
   const close_issue = useCallback(() => {
+    if (closeHint === 'Close with comment') {
+      save_comment()
+    }
+
     setLoading('close', true)
     set_to_loading(3)
     closeIssue(
@@ -119,7 +164,7 @@ export default function IssueDetailPage({ id }: { id: string }) {
         onSettled: () => setLoading('close', false)
       }
     )
-  }, [id, router, closeIssue])
+  }, [id, router, closeIssue, closeHint, save_comment])
 
   const reopen_issue = useCallback(() => {
     setLoading('reopen', true)
@@ -136,58 +181,7 @@ export default function IssueDetailPage({ id }: { id: string }) {
     )
   }, [id, router, reopenIssue])
 
-  const save_comment = useCallback(
-    () => {
-      const currentContentHTML = editorRef.current?.editor?.getHTML() ?? '<p></p>';
-      
-      if (trimHtml(currentContentHTML) === '') {
-        toast.error('comment can not be empty!')
-        return
-      }
-      setLoading('comment', true)
-      set_to_loading(3)
-      saveComment(
-        { link: id, data: { content: currentContentHTML } },
-        {
-          onSuccess: async () => {
-            editorRef.current?.clearAndBlur()
-            const { data: issueDetailObj } = await refetch({ throwOnError: true })
-
-            applyDetailData(issueDetailObj)
-            cancel_loading(3)
-            toast.success('comment successfully!')
-          },
-          onError: apiErrorToast,
-          onSettled: () => setLoading('comment', false)
-        }
-      )
-    },
-    [id, refetch, saveComment]
-  )
-
-  const conv_items = info?.conversations.map((conv) => {
-    let icon
-    let children
-
-    switch (conv.conv_type) {
-      case 'Comment':
-        icon = <CanvasCommentIcon />
-        children = <Comment conv={conv} id={id} whoamI='issue' />
-        break
-      case 'Closed':
-        icon = <ResolveCommentIcon />
-        children = conv.comment
-    }
-
-    const element = {
-      dot: icon,
-      children: children
-    }
-
-    return element
-  })
-
-  const editorRef = useRef<SimpleNoteContentRef>(null);
+  const editorRef = useRef<SimpleNoteContentRef>(null)
   const onKeyDownScrollHandler = useHandleBottomScrollOffset({
     editor: editorRef.current?.editor
   })
@@ -195,75 +189,286 @@ export default function IssueDetailPage({ id }: { id: string }) {
     upload: editorRef.current?.uploadAndAppendAttachments
   })
 
-  const tab_items: TabsProps['items'] = [
-    {
-      key: '1',
-      label: 'Conversation',
-      children: (
-        <Space direction='vertical' style={{ width: '100%' }}>
-          <Timeline items={conv_items} />
-          {info && info.status === 'open' && (
-            <>
-              <div className="prose flex flex-col w-full">
-                <h2>Add a comment</h2>
-                <input {...dropzone.getInputProps()} />
-                <div className='border p-6 rounded-lg'>
-                  <SimpleNoteContent
-                    commentId="temp" //  Temporary filling, replacement later
-                    ref={editorRef}
-                    editable="all"
-                    content={EMPTY_HTML}
-                    autofocus={true}
-                    onKeyDown={onKeyDownScrollHandler}
-                  />
-                  <Button
-                    variant='plain'
-                    iconOnly={<PicturePlusIcon />}
-                    accessibilityLabel='Add files'
-                    onClick={dropzone.open}
-                    tooltip='Add files'
-                  />
-                  <ComposerReactionPicker
-                    editorRef={editorRef}
-                    open={isReactionPickerOpen}
-                    onOpenChange={setIsReactionPickerOpen}
-                  />
-                </div>
-              </div>
-              <Flex gap='small' justify={'flex-end'}>
-                <Button
-                  // loading={motivation === 'close' ? loadings[3] : undefined}
-                  loading={buttonLoading.close}
-                  disabled={!login}
-                  onClick={() => close_issue()}
-                >
-                  Close issue
-                </Button>
-                <Button
-                  loading={buttonLoading.comment}
-                  disabled={!login}
-                  onClick={() => save_comment()}
-                >
-                  Comment
-                </Button>
-              </Flex>
-            </>
-          )}
-          {info && info.status === 'closed' && (
-            <Flex gap='small' justify={'flex-end'}>
-              <Button loading={buttonLoading.reopen} disabled={!login} onClick={() => reopen_issue()}>
-                Reopen issue
-              </Button>
-            </Flex>
-          )}
-        </Space>
-      )
+  const { data } = useGetCurrentUser()
+  const { data: user } = useGetOrganizationMember({ username: data?.username })
+
+  const avatarUser = useMemo(() => {
+    if (!user) return undefined
+    return {
+      deactivated: user['deactivated'],
+      user: pickWithReflect(user?.user ?? {}, [
+        'id',
+        'display_name',
+        'username',
+        'avatar_urls',
+        'notifications_paused',
+        'integration'
+      ])
     }
-  ]
+  }, [user])
+
+  const splitFun = (el: React.ReactNode): string[] => {
+    return extractTextArray(el)
+      .flatMap((name) => name.split(',').map((n) => n.trim()))
+      .filter((n) => n.length > 0)
+  }
+
+  const { members } = useSyncedMembers()
+
+  const avatars: ItemInput[] = useMemo(
+    () =>
+      members?.map((i) => ({
+        groupId: 'end',
+        text: i.user.display_name,
+        leadingVisual: () => <MemberAvatar size='sm' member={i} />
+      })) || [],
+    [members]
+  )
+  // const [avatarTems, setAvatarItems] = useState<ItemInput[]>(avatars)
+
+  const labels: ItemInput[] = useMemo(
+    () =>
+      tags.map((i) => ({
+        text: i.description,
+        leadingVisual: () => (
+          <div
+            className='h-[14px] w-[14px] rounded-full border'
+            //eslint-disable-next-line react/forbid-dom-props
+            style={{ backgroundColor: i.color, borderColor: i.color }}
+          />
+        )
+      })),
+    []
+  )
+
+  const memberMap = useMemo(() => {
+    const map = new Map()
+
+    members?.forEach((i) => {
+      map.set(i.user.display_name, i)
+    })
+    return map
+  }, [members])
+
+  const labelMap = useMemo(() => {
+    const map = new Map()
+
+    tags.map((i) => {
+      map.set(i.description, i)
+    })
+    return map
+  }, [])
+
+  const handleChange = (html: string) => {
+    if (html && html === '<p></p>') {
+      setCloseHint('Close issue')
+    } else {
+      setCloseHint('Close with comment')
+    }
+  }
 
   return (
-    <Card className='max-h-64 overflow-y-auto' title={info.title + ' #' + id}>
-      <Tabs defaultActiveKey='1' items={tab_items} />
-    </Card>
+    <>
+      <div className='h-screen overflow-auto pt-10'>
+        {info.title && (
+          <div className='px-10 pb-4 text-xl'>
+            <div className='mb-4'>{info.title}</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>
+              </>
+            )}
+          </div>
+        )}
+        <div className='container flex gap-4 p-10 pt-0'>
+          {avatarUser && <MemberAvatar member={avatarUser} />}
+
+          <Stack className='flex-1'>
+            <div className='flex h-[100vh] gap-9'>
+              <div className='flex w-[70%] flex-col'>
+                {detailIsLoading ? (
+                  <div className='flex items-center justify-center'>
+                    <LoadingSpinner />
+                  </div>
+                ) : (
+                  <TimelineItems mrDetail={issueDetail} id={id} />
+                )}
+
+                {info && info.status === 'open' && (
+                  <>
+                    <div className='prose mt-4 flex w-full flex-col'>
+                      <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}
+                          autofocus={true}
+                          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>
+                    <div className='mt-4 flex justify-end gap-4'>
+                      <Button
+                        className='!mb-32'
+                        // loading={motivation === 'close' ? loadings[3] : undefined}
+                        loading={buttonLoading.close}
+                        disabled={!login}
+                        onClick={() => close_issue()}
+                      >
+                        <span className='flex items-center gap-2'>
+                          <IssueClosedIcon className='text-[#8250df]' />
+                          {closeHint}
+                        </span>
+                      </Button>
+                      <Button
+                        className='bg-[#1f883d] text-white'
+                        loading={buttonLoading.comment}
+                        disabled={!login}
+                        onClick={() => save_comment()}
+                      >
+                        Comment
+                      </Button>
+                    </div>
+                  </>
+                )}
+
+                {info && info.status === 'closed' && (
+                  <>
+                    <div className='prose mt-4 flex w-full flex-col'>
+                      <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}
+                          autofocus={true}
+                          onKeyDown={onKeyDownScrollHandler}
+                        />
+                        <Button
+                          variant='plain'
+                          iconOnly={<PicturePlusIcon />}
+                          accessibilityLabel='Add files'
+                          onClick={dropzone.open}
+                          tooltip='Add files'
+                        />
+                        <ComposerReactionPicker
+                          editorRef={editorRef}
+                          open={isReactionPickerOpen}
+                          onOpenChange={setIsReactionPickerOpen}
+                        />
+                      </div>
+                    </div>
+                    <div className='mt-4 flex justify-end gap-4'>
+                      <Button
+                        className='!mb-32'
+                        loading={buttonLoading.reopen}
+                        disabled={!login}
+                        onClick={() => reopen_issue()}
+                      >
+                        <span className='flex items-center gap-2'>
+                          <IssueReopenedIcon className='text-[#1f883d]' />
+                          Reopen issue
+                        </span>
+                      </Button>
+                      <Button
+                        className='bg-[#1f883d] text-white'
+                        loading={buttonLoading.comment}
+                        disabled={!login}
+                        onClick={() => save_comment()}
+                      >
+                        Comment
+                      </Button>
+                    </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'
+                >
+                  {(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'>
+                  {(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>
+          </Stack>
+        </div>
+      </div>
+    </>
   )
 }
diff --git a/moon/apps/web/components/Issues/IssueList.tsx b/moon/apps/web/components/Issues/IssueList.tsx
index ab1339eef..1876f4ee6 100644
--- a/moon/apps/web/components/Issues/IssueList.tsx
+++ b/moon/apps/web/components/Issues/IssueList.tsx
@@ -192,6 +192,40 @@ export const DropdownOrder = ({
     </>
   )
 }
+export const DropdownReview = ({
+  name,
+  dropdownArr,
+  dropdownItem,
+  onOpen,
+  open
+}: {
+  name: string
+  dropdownArr: MenuItem[]
+  dropdownItem?: MenuItem[]
+  onOpen?: (open: boolean) => void
+  open?: boolean
+  inside?: React.ReactNode
+}) => {
+  return (
+    <>
+      <DropdownMenu
+        open={open}
+        onOpenChange={onOpen}
+        key={name}
+        align='end'
+        desktop={{ width: 'w-72 max-h-[50vh] overflow-auto bg-white' }}
+        items={[...dropdownArr, ...(dropdownItem as MenuItem[])]}
+        trigger={
+          <Button size='sm' variant={'plain'} tooltipShortcut={name}>
+            <div className='flex items-center'>
+              {name} <ChevronDownIcon />
+            </div>
+          </Button>
+        }
+      />
+    </>
+  )
+}
 
 // dropdownArr是不一样的，其他一样
 export const Dropdown = ({
diff --git a/moon/apps/web/components/Issues/IssueNewPage.tsx b/moon/apps/web/components/Issues/IssueNewPage.tsx
index 970ebda68..fb66475e3 100644
--- a/moon/apps/web/components/Issues/IssueNewPage.tsx
+++ b/moon/apps/web/components/Issues/IssueNewPage.tsx
@@ -310,7 +310,7 @@ type SelectPanelExcludedProps =
   | 'renderAnchor'
   | 'variant'
 
-const BadgeItem = ({
+export const BadgeItem = ({
   title,
   selectPannelProps,
   items,
@@ -376,7 +376,7 @@ const BadgeItem = ({
   )
 }
 
-const SideBarItem = ({ emptyState }: { emptyState: string }) => {
+export const SideBarItem = ({ emptyState }: { emptyState: string }) => {
   return (
     <>
       <div className='mx-4 text-sm text-gray-500'>
diff --git a/moon/apps/web/components/Issues/IssuesContent.tsx b/moon/apps/web/components/Issues/IssuesContent.tsx
index 2f573c550..51ad6d0d7 100644
--- a/moon/apps/web/components/Issues/IssuesContent.tsx
+++ b/moon/apps/web/components/Issues/IssuesContent.tsx
@@ -430,7 +430,7 @@ export const RightAvatar = ({ member, commentNum }: { member?: Member; commentNu
       <div className='mr-10 flex items-center justify-between gap-10'>
         <div className='flex items-center gap-2 text-sm text-gray-500'>
           <ChatBubbleIcon />
-          <span>{commentNum}</span>
+          {commentNum !== 0 && <span>{commentNum}</span>}
         </div>
         {member && (
           <MemberHovercard username={member.user.display_name} side='top' align='end' member={member}>
diff --git a/moon/apps/web/components/Issues/utils/consts.ts b/moon/apps/web/components/Issues/utils/consts.ts
index c73f282ac..8a696131c 100644
--- a/moon/apps/web/components/Issues/utils/consts.ts
+++ b/moon/apps/web/components/Issues/utils/consts.ts
@@ -39,6 +39,8 @@ export const tags: LabelItem[] = [
 
 export const orderTags = ['Created on', 'Last updated', 'Total comments', 'Best match', 'Oldest', 'Newest']
 
+export const reviewTags = ['No reviews', 'Review required', 'Approved review', 'Changes requested']
+
 export const searchList: SearchType = [
   {
     type: 'item',
diff --git a/moon/apps/web/components/MrView/index.tsx b/moon/apps/web/components/MrView/index.tsx
index f9d619546..e3455dfa7 100644
--- a/moon/apps/web/components/MrView/index.tsx
+++ b/moon/apps/web/components/MrView/index.tsx
@@ -16,6 +16,7 @@ import {
   DropdownItemwithAvatar,
   DropdownItemwithLabel,
   DropdownOrder,
+  DropdownReview,
   ListBanner,
   ListItem as MrItem,
   IssueList as MrList
@@ -29,7 +30,7 @@ import { atomWithWebStorage } from '@/utils/atomWithWebStorage'
 import { IndexPageContainer, IndexPageContent } from '../IndexPages/components'
 import { AdditionType, RightAvatar } from '../Issues/IssuesContent'
 import { Pagination } from '../Issues/Pagenation'
-import { orderTags, tags } from '../Issues/utils/consts'
+import { orderTags, reviewTags, tags } from '../Issues/utils/consts'
 import { generateAllMenuItems, MenuConfig } from '../Issues/utils/generateAllMenuItems'
 import { filterAtom, sortAtom } from '../Issues/utils/store'
 import { Heading } from './catalyst/heading'
@@ -63,12 +64,16 @@ export default function MrView() {
     [scope]
   )
 
+  const reviewAtom = useMemo(() => atomWithWebStorage(`${scope}:mr-review`, ''), [scope])
+
   const labelAtom = useMemo(() => atomWithWebStorage<string[]>(`${scope}:mr-label`, []), [scope])
 
   const [order, setOrder] = useAtom(orderAtom)
 
   const [label, setLabel] = useAtom(labelAtom)
 
+  const [review, setReview] = useAtom(reviewAtom)
+
   const additions = useCallback(
     (labels: number[]): AdditionType => {
       const additional: AdditionType = { status, asc: false }
@@ -240,6 +245,29 @@ export default function MrView() {
     }
   ]
 
+  const ReviewConfig: MenuConfig<string>[] = [
+    {
+      key: 'Review',
+      isChosen: () => true,
+
+      onSelectFactory: (item) => (e: Event) => {
+        e.preventDefault()
+        if (item === review) {
+          setReview('')
+        } else {
+          setReview(item)
+        }
+      },
+      className: 'overflow-hidden',
+      labelFactory: (item) => (
+        <div className='flex items-center gap-2'>
+          <div className='h-4 w-4'>{review === item && <CheckIcon />}</div>
+          <span className='flex-1'>{item}</span>
+        </div>
+      )
+    }
+  ]
+
   const OrderConfig: MenuConfig<string>[] = [
     {
       key: 'Order',
@@ -292,6 +320,8 @@ export default function MrView() {
 
   const orders = generateAllMenuItems(orderTags, OrderConfig)
 
+  const reviews = generateAllMenuItems(reviewTags, ReviewConfig)
+
   const ListHeaderItem = (p: string) => {
     switch (p) {
       case 'Author':
@@ -314,6 +344,15 @@ export default function MrView() {
             dropdownItem={member?.get('Assignees').chosen}
           />
         )
+      case 'Reviews':
+        return (
+          <DropdownReview
+            key={p}
+            name={p}
+            dropdownArr={reviews?.get('Review').all}
+            dropdownItem={reviews?.get('Review').chosen}
+          />
+        )
       case 'Labels':
         return (
           <Dropdown
@@ -367,7 +406,16 @@ export default function MrView() {
             Issuelists={mrList}
             header={
               <ListBanner
-                pickerTypes={['Author', 'Labels', 'Projects', 'Milestones', 'Assignees', 'Types', `${order.sort}`]}
+                pickerTypes={[
+                  'Author',
+                  'Labels',
+                  'Projects',
+                  'Milestones',
+                  'Reviews',
+                  'Assignees',
+                  'Types',
+                  `${order.sort}`
+                ]}
                 tabfilter={<MRIndexTabFilter part='mr' />}
               >
                 {(p) => ListHeaderItem(p)}
diff --git a/moon/apps/web/components/SimpleNoteEditor/SimpleNoteContent.tsx b/moon/apps/web/components/SimpleNoteEditor/SimpleNoteContent.tsx
index e35f9c718..bf3b30460 100644
--- a/moon/apps/web/components/SimpleNoteEditor/SimpleNoteContent.tsx
+++ b/moon/apps/web/components/SimpleNoteEditor/SimpleNoteContent.tsx
@@ -1,4 +1,14 @@
-import { DragEvent, forwardRef, KeyboardEvent, memo, MouseEvent, useImperativeHandle, useRef, useState } from 'react'
+import {
+  DragEvent,
+  forwardRef,
+  KeyboardEvent,
+  memo,
+  MouseEvent,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState
+} from 'react'
 import { Editor as TTEditor } from '@tiptap/core'
 import { EditorContent } from '@tiptap/react'
 
@@ -28,6 +38,7 @@ interface Props {
   content: string
   onBlurAtTop?: BlurAtTopOptions['onBlur']
   onKeyDown?: (event: KeyboardEvent) => void
+  onChange?: (html: string) => void
 }
 
 export interface SimpleNoteContentRef {
@@ -42,7 +53,7 @@ export interface SimpleNoteContentRef {
 
 export const SimpleNoteContent = memo(
   forwardRef<SimpleNoteContentRef, Props>((props, ref) => {
-    const { commentId, editable = 'viewer', autofocus = false, onBlurAtTop, content } = props
+    const { commentId, editable = 'viewer', autofocus = false, onBlurAtTop, content, onChange } = props
 
     const [activeComment, setActiveComment] = useState<ActiveEditorComment | null>(null)
     const [hoverComment, setHoverComment] = useState<ActiveEditorComment | null>(null)
@@ -120,6 +131,22 @@ export const SimpleNoteContent = memo(
       enabled: true
     })
 
+    useEffect(() => {
+      if (!editor || !onChange) return
+
+      const handleUpdate = () => {
+        const html = editor.getHTML()
+
+        onChange?.(html)
+      }
+
+      editor.on('update', handleUpdate)
+
+      return () => {
+        editor.off('update', handleUpdate)
+      }
+    }, [editor, onChange])
+
     return (
       <div ref={containerRef} className='relative mb-2 h-[95%] min-h-[100px] overflow-auto'>
         <LayeredHotkeys
diff --git a/moon/apps/web/pages/[org]/issue/[id]/index.tsx b/moon/apps/web/pages/[org]/issue/[id]/index.tsx
index 4ff4c5af0..b3c5edb8e 100644
--- a/moon/apps/web/pages/[org]/issue/[id]/index.tsx
+++ b/moon/apps/web/pages/[org]/issue/[id]/index.tsx
@@ -1,3 +1,4 @@
+import { BaseStyles, ThemeProvider } from '@primer/react'
 import { GetServerSideProps } from 'next'
 
 import IssueDetailPage from '@/components/Issues/IssueDetailPage'
@@ -24,7 +25,11 @@ export const getServerSideProps: GetServerSideProps = async ({ query }) => {
 const OrganizationIssueDetailPage: PageWithLayout<any> = ({ id }) => {
   return (
     <>
-      <IssueDetailPage id={id} key={id} />
+      <ThemeProvider>
+        <BaseStyles>
+          <IssueDetailPage id={id} key={id} />
+        </BaseStyles>
+      </ThemeProvider>
     </>
   )
 }
diff --git a/moon/apps/web/pages/[org]/issue/new/index.tsx b/moon/apps/web/pages/[org]/issue/new/index.tsx
index 8b3fd3ebd..9f2d7080c 100644
--- a/moon/apps/web/pages/[org]/issue/new/index.tsx
+++ b/moon/apps/web/pages/[org]/issue/new/index.tsx
@@ -12,10 +12,10 @@ const OrganizationIssueNewPage: PageWithLayout<any> = () => {
   return (
     <>
       <ThemeProvider>
-          <BaseStyles>
-            <IssueNewPage key={router.pathname} />
-      </BaseStyles>
-    </ThemeProvider>
+        <BaseStyles>
+          <IssueNewPage key={router.pathname} />
+        </BaseStyles>
+      </ThemeProvider>
     </>
   )
 }