diff --git a/src/components/Editor/index.tsx b/src/components/Editor/index.tsx
index 17dc8aa6..bef215bb 100644
--- a/src/components/Editor/index.tsx
+++ b/src/components/Editor/index.tsx
@@ -20,7 +20,11 @@ import {
 } from 'features/docSlices';
 import { makeStyles } from 'styles/common';
 import { Presence, syncPeer } from 'features/peerSlices';
-import { Alert, Box, CircularProgress, Snackbar } from '@mui/material';
+import Alert from '@mui/material/Alert';
+import Box from '@mui/material/Box';
+import CircularProgress from '@mui/material/CircularProgress';
+import Snackbar from '@mui/material/Snackbar';
+
 import WhiteBoardEditor from './mime/application/whiteboard/Editor';
 import Editor from './mime/text/md/Editor';
 
diff --git a/src/components/Editor/mime/text/md/CodeEditor/ChartView.tsx b/src/components/Editor/mime/text/md/CodeEditor/ChartView.tsx
index 02f01af7..9e738bd9 100644
--- a/src/components/Editor/mime/text/md/CodeEditor/ChartView.tsx
+++ b/src/components/Editor/mime/text/md/CodeEditor/ChartView.tsx
@@ -1,21 +1,15 @@
-import React, { useId, useLayoutEffect, useMemo, useState } from 'react';
-import mermaid from 'mermaid';
+import React, { useId, useMemo } from 'react';
 import { makeStyles } from 'styles/common';
 import { Theme } from 'features/settingSlices';
-import { TabContext, TabList, TabPanel } from '@mui/lab';
-import { Box, Tab, ThemeProvider, createTheme } from '@mui/material';
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-
-import oneLight from 'react-syntax-highlighter/dist/esm/styles/prism/one-light';
-import oneDark from 'react-syntax-highlighter/dist/esm/styles/prism/one-dark';
+import { ThemeProvider, createTheme } from '@mui/material';
 
 const useStyles = makeStyles<{ theme: string }>()((_, { theme }) => {
   return {
     root: {
-      backgroundColor: theme === Theme.Dark ? '#282c34' : '#fff',
-      borderRadius: 8,
+      backgroundColor: theme === Theme.Dark ? '#282c34' : '#f6f6f6',
+      // borderRadius: 8,
       padding: 8,
-      border: theme === Theme.Dark ? '1px solid #555555' : '1px solid rgba(0, 0, 0, 0.12)',
+      // border: theme === Theme.Dark ? '1px solid #555555' : '1px solid rgba(0, 0, 0, 0.12)',
     },
   };
 });
@@ -25,7 +19,7 @@ function ChartView({ code, theme }: { code: string; theme: string }) {
   const { classes } = useStyles({
     theme,
   });
-  const [value, setValue] = useState('viewer');
+
   const themeValue = useMemo(
     () =>
       createTheme({
@@ -36,57 +30,13 @@ function ChartView({ code, theme }: { code: string; theme: string }) {
     [theme],
   );
 
-  const handleChange = (event: React.SyntheticEvent, newValue: string) => {
-    setValue(newValue);
-  };
-
-  useLayoutEffect(() => {
-    mermaid.initialize({
-      startOnLoad: false,
-      theme,
-    });
-
-    if (value === 'code') return;
-
-    (async () => {
-      const currentId = id.replaceAll(':', 'mermaid');
-      const element = document.querySelector(`#${currentId}`);
-
-      if (element) {
-        const graphDefinition = code.trim();
-
-        const { svg } = await mermaid.render(`${currentId}svg`, graphDefinition, element);
-
-        element.innerHTML = svg;
-      }
-    })();
-  }, [code, theme, id, value]);
-
   /* eslint-disable react/no-danger */
   return (
     <ThemeProvider theme={themeValue}>
       <div className={classes.root}>
-        <TabContext value={value}>
-          <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
-            <TabList onChange={handleChange} aria-label="lab API tabs example">
-              <Tab label="Mermaid" value="viewer" />
-              <Tab label="Code" value="code" />
-            </TabList>
-          </Box>
-          <TabPanel value="viewer">
-            <div id={id.replaceAll(':', 'mermaid')}>fdsafdsf</div>
-          </TabPanel>
-          <TabPanel
-            value="code"
-            style={{
-              padding: 10,
-            }}
-          >
-            <SyntaxHighlighter style={theme === Theme.Dark ? oneDark : oneLight} language="mermaid" PreTag="div">
-              {code}
-            </SyntaxHighlighter>
-          </TabPanel>
-        </TabContext>
+        <div id={id.replaceAll(':', 'chart')}>
+          <pre>{code}</pre>
+        </div>
       </div>
     </ThemeProvider>
   );
diff --git a/src/components/Editor/mime/text/md/CodeEditor/EditorSettings.tsx b/src/components/Editor/mime/text/md/CodeEditor/EditorSettings.tsx
index 615a0c08..e8b193ef 100644
--- a/src/components/Editor/mime/text/md/CodeEditor/EditorSettings.tsx
+++ b/src/components/Editor/mime/text/md/CodeEditor/EditorSettings.tsx
@@ -8,7 +8,8 @@ import { CodeKeyMap, TabSize, setCodeKeyMap, setTabSize } from 'features/setting
 import { AppDispatch } from 'app/store';
 import { AppState } from 'app/rootReducer';
 import { makeStyles } from 'styles/common';
-import { FormControl, NativeSelect } from '@mui/material';
+import FormControl from '@mui/material/FormControl';
+import NativeSelect from '@mui/material/NativeSelect';
 
 const useStyles = makeStyles()((theme) => ({
   root: {
diff --git a/src/components/Editor/mime/text/md/CodeEditor/MarkdownRenderer.tsx b/src/components/Editor/mime/text/md/CodeEditor/MarkdownRenderer.tsx
new file mode 100644
index 00000000..39950b21
--- /dev/null
+++ b/src/components/Editor/mime/text/md/CodeEditor/MarkdownRenderer.tsx
@@ -0,0 +1,116 @@
+import React from 'react';
+
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { Theme } from 'features/settingSlices';
+import oneLight from 'react-syntax-highlighter/dist/esm/styles/prism/one-light';
+import oneDark from 'react-syntax-highlighter/dist/esm/styles/prism/one-dark';
+
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import remarkMath from 'remark-math';
+import remarkToc from 'remark-toc';
+import remarkEmoji from 'remark-emoji';
+
+import rehypeKatex from 'rehype-katex';
+import fenceparser from 'fenceparser';
+import { MetaInfo } from 'constants/editor';
+import MermaidView from './MermaidView';
+import MiniDraw from './MiniDraw';
+
+import ChartView from './ChartView';
+
+interface MarkdownRendererProps {
+  theme: string;
+  markdown: string;
+}
+
+type StyleObject = {
+  [key: string]: string;
+};
+
+export function MarkdownRenderer({ theme, markdown }: MarkdownRendererProps) {
+  return (
+    <div className="markdown-renderer">
+      <ReactMarkdown
+        remarkPlugins={[remarkMath, remarkGfm, remarkToc, remarkEmoji]}
+        rehypePlugins={[rehypeKatex]}
+        components={{
+          // eslint-disable-next-line react/no-unstable-nested-components
+          code: ({ node, inline, className, children, ...props }) => {
+            const match = /language-(\w+)/.exec(className || '');
+
+            const text = children[0];
+
+            const tempMetaInfo = fenceparser(`${node.data?.meta}`);
+
+            const metaInfo: MetaInfo = {};
+            Object.keys(tempMetaInfo).reduce((acc: any, key) => {
+              if (!key || key === 'undefined') {
+                return acc;
+              }
+
+              acc[key] = tempMetaInfo[key];
+
+              return acc;
+            }, metaInfo);
+
+            if (className === 'language-chart') {
+              return <ChartView code={text as string} theme={theme} />;
+            }
+
+            if (className === 'language-mermaid') {
+              return <MermaidView code={text as string} theme={theme} />;
+            }
+
+            if (className === 'language-tldraw') {
+              return <MiniDraw content={`${text}`.trim()} theme={theme} readOnly meta={metaInfo} />;
+            }
+
+            return !inline && match ? (
+              <SyntaxHighlighter
+                {...props}
+                showLineNumbers={metaInfo.showlinenumbers}
+                showInlineLineNumbers={metaInfo.showinlinelinenumbers}
+                data-language={match[1]}
+                style={theme === Theme.Dark ? oneDark : oneLight}
+                language={match[1]}
+                wrapLines
+                lineProps={(lineNumber) => {
+                  console.log(lineNumber, metaInfo.highlight);
+                  const style: StyleObject = { display: 'block' };
+
+                  // check line numbers
+                  const hasHighlightedLineNumbers = Object.keys(metaInfo.highlight as any).some((key) => {
+                    const lines = key.split('-');
+
+                    if (lines.length === 1) {
+                      if (key === `${lineNumber}`) {
+                        return true;
+                      }
+                    } else if (lineNumber >= Number(lines[0]) && lineNumber <= Number(lines[1])) {
+                      return true;
+                    }
+                    return false;
+                  });
+                  if (hasHighlightedLineNumbers) {
+                    style.backgroundColor = '#ffe7a4';
+                  }
+                  return { style };
+                }}
+                PreTag="div"
+              >
+                {String(children).replace(/\n$/, '')}
+              </SyntaxHighlighter>
+            ) : (
+              <code {...props} className={className}>
+                {children}
+              </code>
+            );
+          },
+        }}
+      >
+        {markdown}
+      </ReactMarkdown>
+    </div>
+  );
+}
diff --git a/src/components/Editor/mime/text/md/CodeEditor/index.tsx b/src/components/Editor/mime/text/md/CodeEditor/index.tsx
index bd4aa164..b3ae5ddb 100644
--- a/src/components/Editor/mime/text/md/CodeEditor/index.tsx
+++ b/src/components/Editor/mime/text/md/CodeEditor/index.tsx
@@ -9,11 +9,6 @@ import { ActorID, DocEvent, TextChange } from 'yorkie-js-sdk';
 import CodeMirror from 'codemirror';
 import SimpleMDE from 'easymde';
 import SimpleMDEReact from 'react-simplemde-editor';
-import ReactMarkdown from 'react-markdown';
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-
-import oneLight from 'react-syntax-highlighter/dist/esm/styles/prism/one-light';
-import oneDark from 'react-syntax-highlighter/dist/esm/styles/prism/one-dark';
 
 import { AppState } from 'app/rootReducer';
 import { ConnectionStatus, Presence } from 'features/peerSlices';
@@ -32,17 +27,10 @@ import {
   Theme,
   Typography,
 } from '@mui/material';
-import { MetaInfo, NAVBAR_HEIGHT } from 'constants/editor';
+import { NAVBAR_HEIGHT } from 'constants/editor';
 import { addRecentPage } from 'features/currentSlices';
 import { setActionStatus } from 'features/actionSlices';
 import { updateLinkNameWithHeading } from 'features/linkSlices';
-import remarkMath from 'remark-math';
-import remarkGfm from 'remark-gfm';
-import remarkToc from 'remark-toc';
-import remarkEmoji from 'remark-emoji';
-
-import rehypeKatex from 'rehype-katex';
-import fenceparser from 'fenceparser';
 
 import 'katex/dist/katex.min.css'; // `rehype-katex` does not import the CSS for you
 import 'easymde/dist/easymde.min.css';
@@ -65,14 +53,10 @@ import Cursor from './Cursor';
 import SlideView from './slideView';
 import { CodeEditorMenu } from './Menu';
 
-import MermaidView from './MermaidView';
 import MiniDraw from './MiniDraw';
 import MiniMermaid from './MiniMermaid';
 import { MermaidSampleType, samples } from './mermaid-samples';
-
-type StyleObject = {
-  [key: string]: string;
-};
+import { MarkdownRenderer } from './MarkdownRenderer';
 
 const WIDGET_HEIGHT = 40;
 
@@ -544,87 +528,7 @@ export default function CodeEditor() {
               globalContainer.rootElement = createRoot(previewElement) as any;
             }
 
-            (globalContainer.rootElement as any)?.render(
-              <ReactMarkdown
-                remarkPlugins={[remarkMath, remarkGfm, remarkToc, remarkEmoji]}
-                rehypePlugins={[rehypeKatex]}
-                components={{
-                  code: ({ node, inline, className, children, ...props }) => {
-                    const match = /language-(\w+)/.exec(className || '');
-
-                    const text = children[0];
-
-                    const tempMetaInfo = fenceparser(`${node.data?.meta}`);
-
-                    const metaInfo: MetaInfo = {};
-                    Object.keys(tempMetaInfo).reduce((acc: any, key) => {
-                      if (!key || key === 'undefined') {
-                        return acc;
-                      }
-
-                      acc[key] = tempMetaInfo[key];
-
-                      return acc;
-                    }, metaInfo);
-
-                    // if (className === 'language-chart') {
-                    //   return <ChartView code={text as string} theme={menu.theme} />;
-                    // }
-
-                    if (className === 'language-mermaid') {
-                      return <MermaidView code={text as string} theme={menu.theme} />;
-                    }
-
-                    if (className === 'language-tldraw') {
-                      return <MiniDraw content={`${text}`.trim()} theme={menu.theme} readOnly meta={metaInfo} />;
-                    }
-
-                    return !inline && match ? (
-                      <SyntaxHighlighter
-                        {...props}
-                        showLineNumbers={metaInfo.showlinenumbers}
-                        showInlineLineNumbers={metaInfo.showinlinelinenumbers}
-                        data-language={match[1]}
-                        style={menu.theme === ThemeType.Dark ? oneDark : oneLight}
-                        language={match[1]}
-                        wrapLines
-                        lineProps={(lineNumber) => {
-                          console.log(lineNumber, metaInfo.highlight);
-                          const style: StyleObject = { display: 'block' };
-
-                          // check line numbers
-                          const hasHighlightedLineNumbers = Object.keys(metaInfo.highlight as any).some((key) => {
-                            const lines = key.split('-');
-
-                            if (lines.length === 1) {
-                              if (key === `${lineNumber}`) {
-                                return true;
-                              }
-                            } else if (lineNumber >= Number(lines[0]) && lineNumber <= Number(lines[1])) {
-                              return true;
-                            }
-                            return false;
-                          });
-                          if (hasHighlightedLineNumbers) {
-                            style.backgroundColor = '#ffe7a4';
-                          }
-                          return { style };
-                        }}
-                        PreTag="div"
-                      >
-                        {String(children).replace(/\n$/, '')}
-                      </SyntaxHighlighter>
-                    ) : (
-                      <code {...props} className={className}>
-                        {children}
-                      </code>
-                    );
-                  },
-                }}
-              >
-                {markdown}
-              </ReactMarkdown>,
-            );
+            (globalContainer.rootElement as any)?.render(<MarkdownRenderer theme={menu.theme} markdown={markdown} />);
           } catch (err) {
             console.error(err);
           }
diff --git a/src/components/NavBar/LinkNavigation.tsx b/src/components/NavBar/LinkNavigation.tsx
index 64571a54..82e999cd 100644
--- a/src/components/NavBar/LinkNavigation.tsx
+++ b/src/components/NavBar/LinkNavigation.tsx
@@ -21,7 +21,9 @@ import Home from '@mui/icons-material/Home';
 import { MimeType } from 'constants/editor';
 import BorderAll from '@mui/icons-material/BorderAll';
 import Gesture from '@mui/icons-material/Gesture';
-import { AccountTree, DescriptionOutlined, Folder } from '@mui/icons-material';
+import AccountTree from '@mui/icons-material/AccountTree';
+import DescriptionOutlined from '@mui/icons-material/DescriptionOutlined';
+import Folder from '@mui/icons-material/Folder';
 import { Theme } from 'features/settingSlices';
 import MoreHoriz from '@mui/icons-material/MoreHoriz';
 
diff --git a/src/components/NavBar/PageButton.tsx b/src/components/NavBar/PageButton.tsx
index 67748a16..056ca91b 100644
--- a/src/components/NavBar/PageButton.tsx
+++ b/src/components/NavBar/PageButton.tsx
@@ -11,7 +11,7 @@ import { makeStyles } from 'styles/common';
 import { MimeType } from 'constants/editor';
 import { useNavigate } from 'react-router-dom';
 import { createDocumentKey, createRandomColor } from 'utils/document';
-import { DescriptionOutlined } from '@mui/icons-material';
+import DescriptionOutlined from '@mui/icons-material/DescriptionOutlined';
 
 const useStyles = makeStyles()(() => ({
   menu: {
diff --git a/src/components/NavBar/SubPageButton.tsx b/src/components/NavBar/SubPageButton.tsx
index 8f3302ff..44ba69a8 100644
--- a/src/components/NavBar/SubPageButton.tsx
+++ b/src/components/NavBar/SubPageButton.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
-import { ArrowDropDown, DescriptionOutlined } from '@mui/icons-material';
+import ArrowDropDown from '@mui/icons-material/ArrowDropDown';
+import DescriptionOutlined from '@mui/icons-material/DescriptionOutlined';
 import { Button, List, ListItemButton, ListItemIcon, ListItemText, Popover } from '@mui/material';
 import { findCurrentPageLink, LinkItemType } from 'features/linkSlices';
 import { useSelector } from 'react-redux';
diff --git a/src/components/SideBar/CustomViewer/CalendarListItem.tsx b/src/components/SideBar/CustomViewer/CalendarListItem.tsx
index ec8a5e3a..82d762b0 100644
--- a/src/components/SideBar/CustomViewer/CalendarListItem.tsx
+++ b/src/components/SideBar/CustomViewer/CalendarListItem.tsx
@@ -39,7 +39,7 @@ import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 
 import { addRecentPage } from 'features/currentSlices';
-import { DescriptionOutlined } from '@mui/icons-material';
+import DescriptionOutlined from '@mui/icons-material/DescriptionOutlined';
 import { Theme } from 'features/settingSlices';
 import { findColor } from 'utils/document';
 
diff --git a/src/components/SideBar/CustomViewer/CalendarView.tsx b/src/components/SideBar/CustomViewer/CalendarView.tsx
index 1be2eed6..9cad5e8a 100644
--- a/src/components/SideBar/CustomViewer/CalendarView.tsx
+++ b/src/components/SideBar/CustomViewer/CalendarView.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
-import { TabPanel } from '@mui/lab';
-import { Box, List } from '@mui/material';
+import TabPanel from '@mui/lab/TabPanel';
+import Box from '@mui/material/Box';
+import List from '@mui/material/List';
 
 import { useSelector } from 'react-redux';
 import { AppState } from 'app/rootReducer';
diff --git a/src/components/SideBar/CustomViewer/HeadingItem.tsx b/src/components/SideBar/CustomViewer/HeadingItem.tsx
index 742afe35..4c8d1017 100644
--- a/src/components/SideBar/CustomViewer/HeadingItem.tsx
+++ b/src/components/SideBar/CustomViewer/HeadingItem.tsx
@@ -21,7 +21,8 @@ import {
   Snackbar,
 } from '@mui/material';
 import { Theme } from 'features/settingSlices';
-import { LaunchOutlined, LinkOutlined } from '@mui/icons-material';
+import LaunchOutlined from '@mui/icons-material/LaunchOutlined';
+import LinkOutlined from '@mui/icons-material/LinkOutlined';
 
 const useStyles = makeStyles()((theme) => ({
   title: {
diff --git a/src/components/SideBar/CustomViewer/PagesView.tsx b/src/components/SideBar/CustomViewer/PagesView.tsx
index bed708f2..7993ff34 100644
--- a/src/components/SideBar/CustomViewer/PagesView.tsx
+++ b/src/components/SideBar/CustomViewer/PagesView.tsx
@@ -1,11 +1,16 @@
 import React from 'react';
-import { TabPanel } from '@mui/lab';
+import TabPanel from '@mui/lab/TabPanel';
 import { useNavigate } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import { toggleRecents } from 'features/navSlices';
 import { removeCurrentPage } from 'features/currentSlices';
 
-import { Collapse, IconButton, List, ListItem, ListItemText, ListSubheader } from '@mui/material';
+import Collapse from '@mui/material/Collapse';
+import IconButton from '@mui/material/IconButton';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
+import ListSubheader from '@mui/material/ListSubheader';
 import Delete from '@mui/icons-material/Delete';
 import ExpandMore from '@mui/icons-material/ExpandMore';
 import NavigateNext from '@mui/icons-material/NavigateNext';
@@ -14,7 +19,8 @@ import { recentsSelector } from 'features/linkSlices';
 import { makeStyles } from 'styles/common';
 
 import { Theme } from 'features/settingSlices';
-import { DescriptionOutlined, MouseOutlined } from '@mui/icons-material';
+import DescriptionOutlined from '@mui/icons-material/DescriptionOutlined';
+import MouseOutlined from '@mui/icons-material/MouseOutlined';
 
 import { LinkTreeView } from '../LinkTreeView';
 
diff --git a/src/components/SideBar/CustomViewer/SidebarItem.tsx b/src/components/SideBar/CustomViewer/SidebarItem.tsx
index b0531292..214a440d 100644
--- a/src/components/SideBar/CustomViewer/SidebarItem.tsx
+++ b/src/components/SideBar/CustomViewer/SidebarItem.tsx
@@ -47,7 +47,9 @@ import { PageButton } from 'components/NavBar/PageButton';
 import Description from '@mui/icons-material/Description';
 import dayjs from 'dayjs';
 import { addRecentPage } from 'features/currentSlices';
-import { ArrowDropDown, ArrowRight, DescriptionOutlined } from '@mui/icons-material';
+import ArrowDropDown from '@mui/icons-material/ArrowDropDown';
+import ArrowRight from '@mui/icons-material/ArrowRight';
+import DescriptionOutlined from '@mui/icons-material/DescriptionOutlined';
 import { Theme } from 'features/settingSlices';
 import { findColor } from 'utils/document';
 import { SideBarItemList } from '../SidebarItemList';
diff --git a/src/components/SideBar/index.tsx b/src/components/SideBar/index.tsx
index a7c07785..99b9d4ba 100644
--- a/src/components/SideBar/index.tsx
+++ b/src/components/SideBar/index.tsx
@@ -9,10 +9,11 @@ import ListAlt from '@mui/icons-material/ListAlt';
 import { useLocation } from 'react-router-dom';
 import { Box, Drawer, Tab } from '@mui/material';
 
-import { TabContext, TabList } from '@mui/lab';
+import TabContext from '@mui/lab/TabContext';
+import TabList from '@mui/lab/TabList';
 import { MimeType } from 'constants/editor';
 import CalendarMonth from '@mui/icons-material/CalendarMonth';
-import { DescriptionOutlined } from '@mui/icons-material';
+import DescriptionOutlined from '@mui/icons-material/DescriptionOutlined';
 import { findCurrentPageLink } from 'features/linkSlices';
 import { CustomViewer } from './CustomViewer';
 import { PagesView } from './CustomViewer/PagesView';
diff --git a/src/components/application/LogoMenu.tsx b/src/components/application/LogoMenu.tsx
index 77a09afd..68a024ca 100644
--- a/src/components/application/LogoMenu.tsx
+++ b/src/components/application/LogoMenu.tsx
@@ -1,18 +1,17 @@
 import React from 'react';
-import {
-  Divider,
-  IconButton,
-  List,
-  ListItemButton,
-  ListItemIcon,
-  ListItemText,
-  Popover,
-  Typography,
-} from '@mui/material';
+import Divider from '@mui/material/Divider';
+import IconButton from '@mui/material/IconButton';
+import List from '@mui/material/List';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+
 import { makeStyles } from 'styles/common';
 import { Theme } from 'features/settingSlices';
 import { CreateButton } from 'components/NavBar/CreateButton';
-import { PetsOutlined } from '@mui/icons-material';
+import PetsOutlined from '@mui/icons-material/PetsOutlined';
+import Popover from '@mui/material/Popover';
+import Typography from '@mui/material/Typography';
 
 const useStyles = makeStyles()((theme) => ({
   iconButton: {
diff --git a/src/components/commons/Fade.tsx b/src/components/commons/Fade.tsx
index d5a15992..1269bdfd 100644
--- a/src/components/commons/Fade.tsx
+++ b/src/components/commons/Fade.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import React, { useEffect, useRef, ReactNode } from 'react';
-import { Fade as MaterialFade } from '@mui/material';
+import MaterialFade from '@mui/material/Fade';
 
 interface FadeProps {
   timeout?: number;
diff --git a/src/components/commons/Guide.tsx b/src/components/commons/Guide.tsx
index 51c31165..461537c8 100644
--- a/src/components/commons/Guide.tsx
+++ b/src/components/commons/Guide.tsx
@@ -4,7 +4,7 @@ import { LyingDown } from 'components/icon/LyingDown';
 import { StandUp } from 'components/icon/StandUp';
 import { toggleInstant } from 'features/navSlices';
 import { useDispatch, useSelector } from 'react-redux';
-import { Badge } from '@mui/material';
+import Badge from '@mui/material/Badge';
 
 export function Guide() {
   const dispatch = useDispatch();
diff --git a/src/index.scss b/src/index.scss
index 60ef73bf..55bb9af1 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -606,6 +606,8 @@ blockquote {
 
     .CodeMirror-foldmarker {
       color: #ffffff !important;
+      background-color: #111 !important;
+      border: 1px solid rgb(113, 113, 113) !important;
     }
 
     .CodeMirror-dialog {
@@ -721,7 +723,7 @@ blockquote {
     }
 
     .CodeMirror-line span.cm-builtin {
-      color: #30a;
+      color: #66d9ef;
     }
 
     .CodeMirror-line span.cm-bracket {