diff --git a/src/components/Markdown/index.scss b/src/components/Markdown/index.scss
new file mode 100644
index 0000000..a53c67c
--- /dev/null
+++ b/src/components/Markdown/index.scss
@@ -0,0 +1,7 @@
+.markdown-body {
+  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
+
+  pre, code {
+    font-family: monospace, monospace;
+  }
+}
\ No newline at end of file
diff --git a/src/components/Markdown/index.tsx b/src/components/Markdown/index.tsx
new file mode 100644
index 0000000..55bcddf
--- /dev/null
+++ b/src/components/Markdown/index.tsx
@@ -0,0 +1,44 @@
+import { FC } from 'react';
+import ReactMarkdown from 'react-markdown';
+import SyntaxHighlighter from 'react-syntax-highlighter';
+import agate from 'react-syntax-highlighter/dist/esm/styles/hljs/agate';
+
+import './index.scss';
+
+interface MarkdownProps {
+  children: string;
+}
+
+const Markdown: FC<MarkdownProps> = ({ children }) => {
+
+  return (
+    <div className='markdown-body'>
+      <ReactMarkdown
+        children={children}
+        linkTarget="_blank"
+        components={{
+          code({node, inline, className, children, ...props}) {
+            const match = /language-(\w+)/.exec(className || '')
+            return !inline && match ? (
+              <SyntaxHighlighter
+                children={String(children).replace(/\n$/, '')}
+                style={agate as any}
+                language={match[1]}
+                showLineNumbers
+                lineNumberStyle={{ color: '#999' }}
+                PreTag="div"
+                {...props}
+              />
+            ) : (
+              <code className={className} {...props}>
+                {children}
+              </code>
+            )
+          }
+        }}
+      />
+    </div>
+  )
+}
+
+export default Markdown;
\ No newline at end of file
diff --git a/src/view/notes/index.tsx b/src/view/notes/index.tsx
index 38f0ab0..5b29c6e 100644
--- a/src/view/notes/index.tsx
+++ b/src/view/notes/index.tsx
@@ -1,14 +1,12 @@
 import { useEffect, useState } from 'react';
 import { Table, Modal, Popconfirm, Button, message } from 'antd';
 import { invoke, path, shell, fs } from '@tauri-apps/api';
-import ReactMarkdown from 'react-markdown';
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { a11yDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
 
 import useInit from '@/hooks/useInit';
 import useJson from '@/hooks/useJson';
 import useData from '@/hooks/useData';
 import useColumns from '@/hooks/useColumns';
+import Markdown from '@/components/Markdown';
 import { useTableRowSelection, TABLE_PAGINATION } from '@/hooks/useTable';
 import { chatRoot, CHAT_NOTES_JSON } from '@/utils';
 import { notesColumns } from './config';
@@ -132,29 +130,9 @@ export default function Notes() {
         onCancel={handleCancel}
         footer={false}
         destroyOnClose
+        width={600}
       >
-        <ReactMarkdown
-          children={source}
-          linkTarget="_blank"
-          components={{
-            code({node, inline, className, children, ...props}) {
-              const match = /language-(\w+)/.exec(className || '')
-              return !inline && match ? (
-                <SyntaxHighlighter
-                  children={String(children).replace(/\n$/, '')}
-                  style={a11yDark as any}
-                  language={match[1]}
-                  PreTag="div"
-                  {...props}
-                />
-              ) : (
-                <code className={className} {...props}>
-                  {children}
-                </code>
-              )
-            }
-          }}
-        />
+        <Markdown children={source} />
       </Modal>
     </div>
   )