diff --git a/public/index.html b/public/index.html
index a7ec0d77..7bca5d3b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -23,7 +23,7 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
   <title>Rustchat Web APP</title>
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/styles/github.min.css">
+  <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/styles/github.min.css"> -->
   <style>
     html {
       font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
diff --git a/src/assets/icons/bookmark.svg b/src/assets/icons/bookmark.svg
new file mode 100644
index 00000000..41ceb6f6
--- /dev/null
+++ b/src/assets/icons/bookmark.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.19045 21.854C5.69432 22.211 5.00244 21.8564 5.00244 21.2452V6.24927C5.00244 4.45434 6.45752 2.99927 8.25244 2.99927H15.7508C17.5458 2.99927 19.0008 4.45434 19.0008 6.24927V21.2452C19.0008 21.8564 18.309 22.211 17.8128 21.854L12.0016 17.6731L6.19045 21.854Z" fill="#667085"/>
+</svg>
diff --git a/src/common/component/MarkdownStyleOverride.js b/src/common/component/MarkdownStyleOverride.js
index c7cc5cd5..2edb50a6 100644
--- a/src/common/component/MarkdownStyleOverride.js
+++ b/src/common/component/MarkdownStyleOverride.js
@@ -8,6 +8,9 @@ const MarkdownOverrides = createGlobalStyle`
     .toastui-editor-md-splitter{
       background-color:#D0D5DD ;
     }
+    .ProseMirror{
+      height: 100%;
+    }
   }
     *{
         margin: 0 ;
diff --git a/src/common/component/MixedInput/index.js b/src/common/component/MixedInput/index.js
index b98b0690..debf9450 100644
--- a/src/common/component/MixedInput/index.js
+++ b/src/common/component/MixedInput/index.js
@@ -13,6 +13,11 @@ import {
   createSoftBreakPlugin,
   createComboboxPlugin,
   createMentionPlugin,
+  // comboboxSelectors,
+  // getMentionOnSelectItem,
+  // findMentionInput,
+  // removeMentionInput,
+  // isSelectionInMentionInput,
   createPlugins,
   ELEMENT_PARAGRAPH,
   getPlateEditorRef,
@@ -147,6 +152,18 @@ const Plugins = ({
   const handleChange = useCallback(
     async (val) => {
       console.log("tmps changed", val);
+      // const wtf = getMentionOnSelectItem();
+      // const plateEditor = getPlateEditorRef(`${TEXT_EDITOR_PREFIX}_${id}`);
+      // const currentMentionInput = findMentionInput(plateEditor);
+      // const items = comboboxSelectors.filteredItems();
+      // console.log(
+      //   "mention check",
+      //   items,
+      //   isSelectionInMentionInput(plateEditor)
+      // );
+      // if (items?.length == 0 && isSelectionInMentionInput(plateEditor)) {
+      //   removeMentionInput(plateEditor, currentMentionInput[1]);
+      // }
       const tmps = [];
       const getMixedText = (children) => {
         const mentions = [];
@@ -202,7 +219,9 @@ const Plugins = ({
           ? {
               type: "text",
               content: tmp.map((t) => t.content).join("\n"),
-              properties: { mentions: tmp.map((t) => t.mentions).flat() },
+              properties: {
+                mentions: tmp.map((t) => t.properties?.mentions || []).flat(),
+              },
             }
           : tmp;
       });
diff --git a/src/common/component/StyledSettingContainer.js b/src/common/component/StyledSettingContainer.js
index 311df4e4..35a43dab 100644
--- a/src/common/component/StyledSettingContainer.js
+++ b/src/common/component/StyledSettingContainer.js
@@ -1,5 +1,7 @@
 // import React from 'react'
 import styled from "styled-components";
+import { useLocation, NavLink } from "react-router-dom";
+
 import backIcon from "../../assets/icons/arrow.left.svg?url";
 const StyledWrapper = styled.div`
   width: 100vw;
@@ -39,8 +41,6 @@ const StyledWrapper = styled.div`
         margin-bottom: 2px;
       }
       .item {
-        cursor: pointer;
-        padding: 4px 12px;
         font-weight: 500;
         font-size: 14px;
         line-height: 20px;
@@ -50,8 +50,14 @@ const StyledWrapper = styled.div`
         &.curr {
           background: #e7e5e4;
         }
+        > a {
+          display: block;
+          padding: 4px 12px;
+        }
       }
       &.danger .item {
+        cursor: pointer;
+        padding: 4px 12px;
         color: #ef4444;
         &:hover {
           background: none;
@@ -81,12 +87,9 @@ export default function StyledSettingContainer({
   navs = [],
   dangers = [],
   nav,
-  updateNav,
   children,
 }) {
-  const handleNavClick = (name) => {
-    updateNav(name);
-  };
+  const { pathname } = useLocation();
   return (
     <StyledWrapper>
       <div className="left">
@@ -100,10 +103,9 @@ export default function StyledSettingContainer({
                 return (
                   <li
                     key={name}
-                    onClick={handleNavClick.bind(null, name)}
                     className={`item ${name == nav?.name ? "curr" : ""}`}
                   >
-                    {title}
+                    <NavLink to={`${pathname}?nav=${name}`}>{title}</NavLink>
                   </li>
                 );
               })}