diff --git a/moon/apps/web/components/Issues/IssueDetailPage.tsx b/moon/apps/web/components/Issues/IssueDetailPage.tsx
index e2d236b8f..f8f1bdf69 100644
--- a/moon/apps/web/components/Issues/IssueDetailPage.tsx
+++ b/moon/apps/web/components/Issues/IssueDetailPage.tsx
@@ -41,7 +41,7 @@ import {
   useLabelsSelector,
   useMemberMap
 } from './utils/sideEffect'
-import { idAtom } from './utils/store'
+import { editIdAtom, FALSE_EDIT_VAL, idAtom, refreshAtom } from './utils/store'
 
 export default function IssueDetailPage({ link }: { link: string }) {
   const [id] = useAtom(idAtom)
@@ -107,6 +107,19 @@ export default function IssueDetailPage({ link }: { link: string }) {
     fetchDetail()
   }, [fetchDetail, link])
 
+  const [refresh, setRefresh] = useAtom(refreshAtom)
+  const [_, setEditId] = useAtom(editIdAtom)
+
+  useEffect(() => {
+    const load = async () => {
+      await refetch()
+      setEditId(FALSE_EDIT_VAL)
+      setRefresh(0)
+    }
+
+    load()
+  }, [refresh, refetch, setEditId, setRefresh])
+
   const [_loadings, setLoadings] = useState<boolean[]>([])
   const router = useRouter()
 
@@ -306,12 +319,14 @@ export default function IssueDetailPage({ link }: { link: string }) {
       <div className='h-screen overflow-auto pt-10'>
         {info?.title && (
           <div className='px-10 pb-4 text-xl'>
-            <div className='mb-4 w-[70%]'>
+            <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]'>${issueDetail?.id}</span>
                     </UIText>
                     <Button
                       onClick={() => {
diff --git a/moon/apps/web/components/Issues/utils/store.tsx b/moon/apps/web/components/Issues/utils/store.tsx
index de3121010..c9d41651f 100644
--- a/moon/apps/web/components/Issues/utils/store.tsx
+++ b/moon/apps/web/components/Issues/utils/store.tsx
@@ -42,3 +42,8 @@ export const labelsCloseCurrentPage = atomWithWebStorage('LabelsCloseCurrentPage
 
 export const idAtom = atom(0)
 export const mridAtom = atom(0)
+
+export const FALSE_EDIT_VAL = -1
+export const editIdAtom = atom(0)
+
+export const refreshAtom = atom(0)
diff --git a/moon/apps/web/components/MrView/CommentDropdownMenu.tsx b/moon/apps/web/components/MrView/CommentDropdownMenu.tsx
index 35bd5469a..292038dff 100644
--- a/moon/apps/web/components/MrView/CommentDropdownMenu.tsx
+++ b/moon/apps/web/components/MrView/CommentDropdownMenu.tsx
@@ -1,10 +1,24 @@
-import { Button, CopyIcon, DotsHorizontal, PreferenceIcon, PencilIcon, QuoteIcon, TrashIcon, EyeHideIcon } from '@gitmono/ui'
+import { useAtom } from 'jotai'
+
+import { ConversationItem } from '@gitmono/types/generated'
+import {
+  Button,
+  CopyIcon,
+  DotsHorizontal,
+  EyeHideIcon,
+  PencilIcon,
+  PreferenceIcon,
+  QuoteIcon,
+  TrashIcon
+} from '@gitmono/ui'
 import { DropdownMenu } from '@gitmono/ui/DropdownMenu'
 import { buildMenuItems } from '@gitmono/ui/Menu'
-import { ConversationItem } from '@gitmono/types/generated';
+
 import { useDeleteIssueComment } from '@/hooks/issues/useDeleteIssueComment'
 import { useDeleteMrCommentDelete } from '@/hooks/useDeleteMrCommentDelete'
 
+import { editIdAtom } from '../Issues/utils/store'
+
 interface CommentDropdownMenuProps {
   id: string
   Conversation: ConversationItem
@@ -14,6 +28,7 @@ interface CommentDropdownMenuProps {
 export function CommentDropdownMenu({ Conversation, id, CommentType }: CommentDropdownMenuProps) {
   const { mutate: deleteComment } = useDeleteMrCommentDelete(id)
   const { mutate: deleteIssueComment } = useDeleteIssueComment(id)
+  const [_editId, setEditId] = useAtom(editIdAtom)
 
   const handleDelete = () => {
     switch (CommentType) {
@@ -32,28 +47,29 @@ export function CommentDropdownMenu({ Conversation, id, CommentType }: CommentDr
     {
       type: 'item',
       label: 'Copy',
-      leftSlot: <CopyIcon />,
+      leftSlot: <CopyIcon />
     },
     {
       type: 'item',
       label: 'Quote',
-      leftSlot: <QuoteIcon />,
+      leftSlot: <QuoteIcon />
     },
     {
       type: 'item',
       label: 'Reference',
-      leftSlot: <PreferenceIcon />,
+      leftSlot: <PreferenceIcon />
     },
     { type: 'separator' },
     {
       type: 'item',
       label: 'Edit',
       leftSlot: <PencilIcon />,
+      onSelect: () => setEditId(Conversation.id)
     },
     {
       type: 'item',
       label: 'Hide',
-      leftSlot: <EyeHideIcon />,
+      leftSlot: <EyeHideIcon />
     },
     {
       type: 'item',
@@ -64,8 +80,6 @@ export function CommentDropdownMenu({ Conversation, id, CommentType }: CommentDr
     }
   ])
 
-
-
   return (
     <>
       <DropdownMenu
diff --git a/moon/apps/web/components/MrView/MRComment.tsx b/moon/apps/web/components/MrView/MRComment.tsx
index 4310d9d03..17ecbee0f 100644
--- a/moon/apps/web/components/MrView/MRComment.tsx
+++ b/moon/apps/web/components/MrView/MRComment.tsx
@@ -1,17 +1,32 @@
+import { forwardRef, useImperativeHandle, useMemo, useRef, useState } from 'react'
+import { useAtom } from 'jotai'
+import toast from 'react-hot-toast'
+
 import { getNoteExtensions } from '@gitmono/editor'
+import { ConversationItem } from '@gitmono/types/generated'
+import { Button, ConditionalWrap, FaceSmilePlusIcon, PicturePlusIcon, UIText } from '@gitmono/ui'
+
+import { EMPTY_HTML } from '@/atoms/markdown'
 import { RichTextRenderer } from '@/components/RichTextRenderer'
-import { useMemo } from 'react'
-import { Button, ConditionalWrap, FaceSmilePlusIcon, UIText } from '@gitmono/ui'
+import { usePostComment } from '@/hooks/issues/usePostComment'
+import { useGetOrganizationMember } from '@/hooks/useGetOrganizationMember'
+import { useUploadHelpers } from '@/hooks/useUploadHelpers'
+import { apiErrorToast } from '@/utils/apiErrorToast'
+import { trimHtml } from '@/utils/trimHtml'
+
 import { MemberHovercard } from '../InlinePost/MemberHovercard'
+import { useChange } from '../Issues/utils/sideEffect'
+import { editIdAtom, FALSE_EDIT_VAL, refreshAtom } from '../Issues/utils/store'
 import { MemberAvatar } from '../MemberAvatar'
-import { useGetOrganizationMember } from '@/hooks/useGetOrganizationMember'
-import { UserLinkByName } from './components/UserLinkByName'
-import HandleTime from './components/HandleTime'
+import { useHandleBottomScrollOffset } from '../NoteEditor/useHandleBottomScrollOffset'
+import { ComposerReactionPicker } from '../Reactions/ComposerReactionPicker'
 import { ReactionPicker } from '../Reactions/ReactionPicker'
-import { useHandleExpression } from './hook/useHandleExpression'
-import { CommentDropdownMenu } from './CommentDropdownMenu'
-import { ConversationItem } from '@gitmono/types/generated'
 import { ReactionShow } from '../Reactions/ReactionShow'
+import { SimpleNoteContent, SimpleNoteContentRef } from '../SimpleNoteEditor/SimpleNoteContent'
+import { CommentDropdownMenu } from './CommentDropdownMenu'
+import HandleTime from './components/HandleTime'
+import { UserLinkByName } from './components/UserLinkByName'
+import { useHandleExpression } from './hook/useHandleExpression'
 
 interface CommentProps {
   conv: ConversationItem
@@ -21,13 +36,16 @@ interface CommentProps {
 
 const Comment = ({ conv, id, whoamI }: CommentProps) => {
   const { data: member } = useGetOrganizationMember({ username: conv.username })
-  
+
   const extensions = useMemo(() => getNoteExtensions({ linkUnfurl: {} }), [])
   const handleReactionSelect = useHandleExpression({ conv, id, type: whoamI })
+  const [editId, setEditId] = useAtom(editIdAtom)
+  const editInputRef = useRef<{ handleUpdate: () => void }>()
+  const [refresh, setRefresh] = useAtom(refreshAtom)
 
   return (
     <div className='overflow-hidden rounded-lg border border-gray-300 bg-white'>
-      <div className='flex items-center justify-between border-b border-gray-300 py-2 px-4'>
+      <div className='flex items-center justify-between border-b border-gray-300 px-4 py-2'>
         <div className='flex items-center space-x-3'>
           <div className='cursor-pointer'>
             <ConditionalWrap
@@ -40,7 +58,7 @@ const Comment = ({ conv, id, whoamI }: CommentProps) => {
                 </MemberHovercard>
               )}
             >
-              { member ? <MemberAvatar member={member} size='sm'/> : "Avatar not found"}
+              {member ? <MemberAvatar member={member} size='sm' /> : 'Avatar not found'}
             </ConditionalWrap>
           </div>
           <div className='cursor-pointer'>
@@ -58,7 +76,7 @@ const Comment = ({ conv, id, whoamI }: CommentProps) => {
             </ConditionalWrap>
           </div>
           <div className='text-sm text-gray-500 hover:text-gray-700'>
-            <HandleTime created_at={conv.created_at}/>
+            <HandleTime created_at={conv.created_at} />
           </div>
         </div>
         <div className='flex items-center'>
@@ -75,16 +93,109 @@ const Comment = ({ conv, id, whoamI }: CommentProps) => {
             }
             onReactionSelect={handleReactionSelect}
           />
-          <CommentDropdownMenu id={id} Conversation={conv} CommentType={whoamI}/>
+          <CommentDropdownMenu id={id} Conversation={conv} CommentType={whoamI} />
         </div>
       </div>
 
       <div className='prose copyable-text p-3'>
-        { conv.comment && <RichTextRenderer content={conv.comment} extensions={extensions} /> }
+        {conv.comment && editId !== conv.id && <RichTextRenderer content={conv.comment} extensions={extensions} />}
+        {editId === conv.id && (
+          <>
+            <EditInput ref={editInputRef} comment={conv} />
+            <div className='flex justify-end gap-4'>
+              <Button disabled={refresh !== 0} onClick={() => setEditId(FALSE_EDIT_VAL)}>
+                Cancel
+              </Button>
+              <Button
+                disabled={refresh !== 0}
+                onClick={() => {
+                  // setEditId(FALSE_EDIT_VAL)
+                  setRefresh(Date.now())
+                  editInputRef.current && editInputRef.current.handleUpdate()
+                }}
+                className='bg-[#1f883d] text-white'
+              >
+                Update Comment
+              </Button>
+            </div>
+          </>
+        )}
         <ReactionShow comment={conv} id={id} type={whoamI} />
       </div>
     </div>
   )
 }
 
+const EditInput = forwardRef(({ comment }: { comment: ConversationItem }, ref) => {
+  const editorRef = useRef<SimpleNoteContentRef>(null)
+  const onKeyDownScrollHandler = useHandleBottomScrollOffset({
+    editor: editorRef.current?.editor
+  })
+  const { dropzone } = useUploadHelpers({
+    upload: editorRef.current?.uploadAndAppendAttachments
+  })
+  const { handleChange } = useChange({})
+  const [isReactionPickerOpen, setIsReactionPickerOpen] = useState(false)
+  const { mutateAsync: updateComment } = usePostComment()
+
+  const [_refresh, setRefresh] = useAtom(refreshAtom)
+
+  const handleUpdate = async () => {
+    const currentContentHTML = editorRef.current?.editor?.getHTML() ?? '<p></p>'
+
+    if (trimHtml(currentContentHTML) === '') {
+      toast.error('comment can not be empty!')
+      setRefresh(0)
+      return
+    }
+
+    try {
+      await updateComment({ commentId: comment.id, data: { content: currentContentHTML } })
+      toast.success('update successfully!')
+    } catch (err: any) {
+      apiErrorToast(new Error(err.message))
+    }
+    // finally {
+    //   setRefresh(Date.now())
+    // }
+  }
+
+  useImperativeHandle(ref, () => ({
+    handleUpdate
+  }))
+
+  return (
+    <>
+      <div className='prose mt-4 flex w-full flex-col'>
+        <input {...dropzone.getInputProps()} />
+        <div className='relative rounded-lg border p-6 pb-12'>
+          <SimpleNoteContent
+            commentId='temp' //  Temporary filling, replacement later
+            ref={editorRef}
+            editable='all'
+            content={comment.comment || 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>
+    </>
+  )
+})
+
+EditInput.displayName = 'EditInput'
+
 export default Comment
diff --git a/moon/apps/web/components/MrView/components/Checks/index.tsx b/moon/apps/web/components/MrView/components/Checks/index.tsx
index 65fa8b017..d6eb08279 100644
--- a/moon/apps/web/components/MrView/components/Checks/index.tsx
+++ b/moon/apps/web/components/MrView/components/Checks/index.tsx
@@ -9,10 +9,13 @@ enum Status {
   Rejected = 'rejected'
 }
 
+const root = '/sse/'
+
 const Checks = () => {
   const serverStream = useRef('')
   const es = useRef<EventSource | null>()
-  const baseUrl = useRef('http://47.79.95.33:3000/logs?follow=true')
+  // const baseUrl = useRef('http://47.79.95.33:3000/logs?follow=true')
+  const baseUrl = useRef(`${root}logs?follow=true`)
   const status = useRef(Status.Pending)
   const [displayTest, setDisplayText] = useState('')
   const { createEventSource } = useSSM()
@@ -40,7 +43,7 @@ const Checks = () => {
       serverStream.current = ''
       setDisplayText('')
     }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   return (
diff --git a/moon/apps/web/hooks/issues/usePostComment.ts b/moon/apps/web/hooks/issues/usePostComment.ts
new file mode 100644
index 000000000..916b2c48a
--- /dev/null
+++ b/moon/apps/web/hooks/issues/usePostComment.ts
@@ -0,0 +1,16 @@
+import { useMutation } from '@tanstack/react-query'
+
+import { ContentPayload, PostApiConversationByCommentIdData, RequestParams } from '@gitmono/types/generated'
+
+import { legacyApiClient } from '@/utils/queryClient'
+
+export function usePostComment() {
+  return useMutation<
+    PostApiConversationByCommentIdData,
+    Error,
+    { commentId: number; data: ContentPayload; params?: RequestParams }
+  >({
+    mutationFn: ({ commentId, data, params }) =>
+      legacyApiClient.v1.postApiConversationByCommentId().request(commentId, data, params)
+  })
+}
diff --git a/moon/apps/web/next.config.js b/moon/apps/web/next.config.js
index ce2ba1ee1..dd4206b4b 100644
--- a/moon/apps/web/next.config.js
+++ b/moon/apps/web/next.config.js
@@ -62,7 +62,8 @@ const cspResourcesByDirective = {
     process.env.NODE_ENV !== 'production' && 'https://campsite-dev.imgix.net',
     'https://react-tweet.vercel.app', // for react-tweet embeds
     'https://media.tenor.com', // used for Tenor gifs
-    'http://47.79.95.33:3000'
+    // 'http://47.79.95.33:3000'
+    'https://orion.gitmega.com'
   ],
   'font-src': ["'self'"],
   'img-src': [
@@ -221,6 +222,10 @@ const moduleExports = {
       {
         source: '/ingest/decide',
         destination: 'https://us.i.posthog.com/decide'
+      },
+      {
+        source: '/sse/:path*',
+        destination: `https://orion.gitmega.com/:path*`
       }
     ]
   },
diff --git a/moon/apps/web/pages/[org]/mr/[link]/index.tsx b/moon/apps/web/pages/[org]/mr/[link]/index.tsx
index b996aab14..c50c930f0 100644
--- a/moon/apps/web/pages/[org]/mr/[link]/index.tsx
+++ b/moon/apps/web/pages/[org]/mr/[link]/index.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import React, { useRef, useState } from 'react'
+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'
@@ -25,7 +25,7 @@ import {
   useLabelsSelector,
   useMemberMap
 } from '@/components/Issues/utils/sideEffect'
-import { mridAtom } from '@/components/Issues/utils/store'
+import { editIdAtom, FALSE_EDIT_VAL, mridAtom, refreshAtom } from '@/components/Issues/utils/store'
 import { AppLayout } from '@/components/Layout/AppLayout'
 import { MemberAvatar } from '@/components/MemberAvatar'
 import Checks from '@/components/MrView/components/Checks'
@@ -90,6 +90,19 @@ const MRDetailPage: PageWithLayout<any> = () => {
     })
   }
 
+  const [_, setEditId] = useAtom(editIdAtom)
+  const [refresh, setRefresh] = useAtom(refreshAtom)
+
+  useEffect(() => {
+    const load = async () => {
+      await refetch()
+      setEditId(FALSE_EDIT_VAL)
+      setRefresh(0)
+    }
+
+    load()
+  }, [refresh, refetch, setEditId, setRefresh])
+
   const { mutate: closeMr, isPending: mrCloseIsPending } = usePostMrClose(id)
   const handleMrClose = () => {
     if (closeHint === 'Close with comment') {
diff --git a/moon/apps/web/tsconfig.json b/moon/apps/web/tsconfig.json
index f046db93b..3370dd324 100644
--- a/moon/apps/web/tsconfig.json
+++ b/moon/apps/web/tsconfig.json
@@ -2,22 +2,54 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "@/components/*": ["components/*"],
-      "@/contexts/*": ["contexts/*"],
-      "@/atoms/*": ["atoms/*"],
-      "@/hooks/*": ["hooks/*"],
-      "@/pages/*": ["pages/*"],
-      "@/utils/*": ["utils/*"],
-      "@gitmono/editor/*": ["../../packages/editor/src/*"],
-      "@gitmono/editor": ["../../packages/editor/src/index"],
-      "@gitmono/config/*": ["../../packages/config/src/*"],
-      "@gitmono/config": ["../../packages/config/src/index"],
-      "@gitmono/ui/*": ["../../packages/ui/src/*"],
-      "@gitmono/ui": ["../../packages/ui/src/index"],
-      "@gitmono/types/*": ["../../packages/types/*"],
-      "@gitmono/types": ["../../packages/types/index"],
-      "@gitmono/regex/*": ["../../packages/regex/*"],
-      "@gitmono/regex": ["../../packages/regex/src/index.ts"]
+      "@/components/*": [
+        "components/*"
+      ],
+      "@/contexts/*": [
+        "contexts/*"
+      ],
+      "@/atoms/*": [
+        "atoms/*"
+      ],
+      "@/hooks/*": [
+        "hooks/*"
+      ],
+      "@/pages/*": [
+        "pages/*"
+      ],
+      "@/utils/*": [
+        "utils/*"
+      ],
+      "@gitmono/editor/*": [
+        "../../packages/editor/src/*"
+      ],
+      "@gitmono/editor": [
+        "../../packages/editor/src/index"
+      ],
+      "@gitmono/config/*": [
+        "../../packages/config/src/*"
+      ],
+      "@gitmono/config": [
+        "../../packages/config/src/index"
+      ],
+      "@gitmono/ui/*": [
+        "../../packages/ui/src/*"
+      ],
+      "@gitmono/ui": [
+        "../../packages/ui/src/index"
+      ],
+      "@gitmono/types/*": [
+        "../../packages/types/*"
+      ],
+      "@gitmono/types": [
+        "../../packages/types/index"
+      ],
+      "@gitmono/regex/*": [
+        "../../packages/regex/*"
+      ],
+      "@gitmono/regex": [
+        "../../packages/regex/src/index.ts"
+      ]
     },
     "plugins": [
       {
@@ -36,6 +68,10 @@
     ".next/types/**/*.ts"
   ],
   "exclude": [
-    "node_modules"
+    "node_modules",
+    "dist",
+    "build",
+    ".next",
+    "out"
   ]
 }
\ No newline at end of file