docs-plus
diff --git a/‎packages/webapp/components/TipTap/tableOfContents/TocDesktop.tsx
Copy file name to clipboardExpand all lines: packages/webapp/components/TipTap/tableOfContents/TocDesktop.tsx
+2Lines changed: 2 additions & 0 deletions b/‎packages/webapp/components/TipTap/tableOfContents/TocDesktop.tsx
Copy file name to clipboardExpand all lines: packages/webapp/components/TipTap/tableOfContents/TocDesktop.tsx
+2Lines changed: 2 additions & 0 deletions
diff --git a/‎packages/webapp/components/pages/document/components/AppendHeadingButton.tsx
Copy file name to clipboardExpand all lines: packages/webapp/components/pages/document/components/AppendHeadingButton.tsx
+5-3Lines changed: 5 additions & 3 deletions b/‎packages/webapp/components/pages/document/components/AppendHeadingButton.tsx
Copy file name to clipboardExpand all lines: packages/webapp/components/pages/document/components/AppendHeadingButton.tsx
+5-3Lines changed: 5 additions & 3 deletions
@@ -3,6 +3,7 @@ import { useChatStore } from '@stores'
 import useHandelTocUpdate from './hooks/useHandelTocUpdate'
 import { RenderTocs } from './RenderTocs'
 import { DocTitleChatRoomDesktop } from './components/DocTitleChatRoom'
+import AppendHeadingButton from '@components/pages/document/components/AppendHeadingButton'
 
 const TOCDesktop = ({ className }: any) => {
   const { headingId } = useChatStore((state) => state.chatRoom)
@@ -22,6 +23,7 @@ const TOCDesktop = ({ className }: any) => {
     <div className={`${className}`}>
       <DocTitleChatRoomDesktop className="mt-1" />
       <ul className="toc__list menu p-0">{renderedTocs}</ul>
+      <AppendHeadingButton className="mt-4" />
     </div>
   )
 }
 
@@ -3,6 +3,7 @@ import { FaPlus } from 'react-icons/fa6'
 import ENUMS from '@components/TipTap/enums'
 import { useModal } from '@components/ui/ModalDrawer'
 import { useStore } from '@stores'
+import { MdAdd } from 'react-icons/md'
 
 const AppendHeadingButton = ({ className }: { className: string }) => {
   const { close: closeModal } = useModal() || {}
@@ -52,9 +53,10 @@ const AppendHeadingButton = ({ className }: { className: string }) => {
   }, [editor])
 
   return (
-    <div className={`flex justify-center p-3 ${className}`}>
-      <button className="btn btn-sm btn-block bg-docsy text-white" onClick={appendHeadingToEnd}>
-        <FaPlus size={22} />
+    <div className={`p-3 ${className}`}>
+      <button className="btn btn-sm btn-primary btn-outline btn-block" onClick={appendHeadingToEnd}>
+        <MdAdd size={20} />
+        <span className="">Add headings</span>
       </button>
     </div>
   )