diff --git a/apps/web/components/editor/advanced-editor.tsx b/apps/web/components/editor/advanced-editor.tsx
index b6565c82..f08cd15a 100644
--- a/apps/web/components/editor/advanced-editor.tsx
+++ b/apps/web/components/editor/advanced-editor.tsx
@@ -45,6 +45,7 @@ type tContent = {
 	isActive: boolean;
 	itemIndex: number;
 	isScrolledOver: boolean;
+	pos: number;
 };
 
 const TailwindAdvancedEditor = memo(
@@ -60,18 +61,20 @@ const TailwindAdvancedEditor = memo(
 			TableOfContents.configure({
 				getIndex: getHierarchicalIndexes,
 				onUpdate(content) {
+					console.log(content);
 					setItems(content);
 				},
 			}),
 		];
 
 		return (
-			<div className="relative w-full h-full">
+			<div className="relative w-full h-full bg-[#171B1F]">
 				<EditorRoot>
 					<EditorContent
+						autofocus
 						initialContent={defaultEditorContent}
 						extensions={extensions}
-						className="relative max-w-[98vw] h-[98vh] overflow-auto w-full bg-[#171B1F] sm:rounded-lg sm:shadow-lg"
+						className="relative w-full h-full py-10 max-w-5xl m-auto overflow-auto bg-transparent sm:rounded-lg sm:shadow-lg"
 						editorProps={{
 							handleDOMEvents: {
 								keydown: (_view, event) => handleCommandNavigation(event),
@@ -103,7 +106,7 @@ const TailwindAdvancedEditor = memo(
 										className="flex w-full items-center space-x-2 rounded-md px-2 py-1 text-left text-sm hover:bg-[#21303D] group aria-selected:bg-[#21303D]"
 										key={item.title}
 									>
-										<div className="flex h-10 w-10 items-center justify-center rounded-md bg-[#2D343A] group-hover:bg-[#369DFD33] group-aria-selected:bg-[#369DFD33]">
+										<div className="flex h-12 w-12 items-center justify-center rounded-md bg-[#2D343A] group-hover:bg-[#369DFD33] group-aria-selected:bg-[#369DFD33]">
 											{item.icon}
 										</div>
 										<div>
diff --git a/apps/web/components/editor/toc.tsx b/apps/web/components/editor/toc.tsx
index 1bca6a11..4f5a3abb 100644
--- a/apps/web/components/editor/toc.tsx
+++ b/apps/web/components/editor/toc.tsx
@@ -1,6 +1,6 @@
-import { TextSelection } from "@tiptap/pm/state";
 import { useEditor } from "novel";
 import { motion } from "framer-motion";
+
 type tContent = {
 	id: string;
 	textContent: string;
@@ -8,6 +8,7 @@ type tContent = {
 	isActive: boolean;
 	itemIndex: number;
 	isScrolledOver: boolean;
+	pos: number;
 };
 
 export const ToCItem = ({
@@ -15,7 +16,7 @@ export const ToCItem = ({
 	onItemClick,
 }: {
 	item: tContent;
-	onItemClick: (e: MouseEvent, id: string) => void;
+	onItemClick: (pos: number) => void;
 }) => {
 	return (
 		<div
@@ -23,24 +24,23 @@ export const ToCItem = ({
 				item.level === 2 ? "pl-2" : item.level === 3 ? "pl-4" : "pl-0"
 			}`}
 		>
-			<a
-				href={`#${item.id}`}
-				onClick={(e) => onItemClick(e, item.id)}
-				data-item-index={item.itemIndex}
+			<div
+				onClick={() => onItemClick(item.pos)}
+				className={`cursor-pointer text-base font-medium py-1 px-2 w-full hover:bg-[#2b3238] transition-colors rounded-sm ${item.isActive && "text-blue-500"}`}
 			>
 				{item.textContent}
-			</a>
+			</div>
 		</div>
 	);
 };
 
 export const ToC = ({ items }: { items: tContent[] }) => {
-	if (items.length === 0) {
+	if (items.length < 2) {
 		return;
 	}
 
 	return (
-		<div className="fixed w-40 right-0 top-1/2 -translate-y-1/2 mr-12">
+		<div className="fixed right-0 top-1/4 -translate-y-1/2 mr-12">
 			<div className="items-end space-y-3 py-2 max-h-[60vh] overflow-hidden">
 				{items.map((item, i) => (
 					<ToCItemStick key={item.id} item={item} />
@@ -50,7 +50,7 @@ export const ToC = ({ items }: { items: tContent[] }) => {
 				initial={{ x: 15, opacity: 0 }}
 				whileHover={{ x: 5, opacity: 1 }}
 				transition={{ ease: "easeOut", duration: 0.15 }}
-				className="absolute top-0 right-0 space-y-3"
+				className="absolute top-0 right-0 space-y-3 min-w-72 max-w-72"
 			>
 				<Container items={items} />
 			</motion.div>
@@ -61,36 +61,15 @@ export const ToC = ({ items }: { items: tContent[] }) => {
 function Container({ items }: { items: tContent[] }) {
 	const { editor } = useEditor();
 
-	const onItemClick = (e, id) => {
-		e.preventDefault();
-
+	const onItemClick = (pos: number) => {
+		console.log(pos);
 		if (editor) {
-			const element = editor.view.dom.querySelector(`[data-toc-id="${id}"`);
-			const pos = editor.view.posAtDOM(element, 0);
-
-			// set focus
-			const tr = editor.view.state.tr;
-
-			tr.setSelection(new TextSelection(tr.doc.resolve(pos)));
-
-			editor.view.dispatch(tr);
-
-			editor.view.focus();
-
-			if (history.pushState) {
-				// eslint-disable-line
-				history.pushState(null, null, `#${id}`); // eslint-disable-line
-			}
-
-			window.scrollTo({
-				top: element.getBoundingClientRect().top + window.scrollY,
-				behavior: "smooth",
-			});
+			editor.commands.focus(pos ? pos : 1, { scrollIntoView: true });
 		}
 	};
 
 	return (
-		<div className="bg-[#1F2428] rounded-xl overflow-auto max-h-[60vh] px-4">
+		<div className="bg-[#1F2428] rounded-xl overflow-auto max-h-[60vh] px-4 py-6">
 			{items.map((item, i) => (
 				<ToCItem onItemClick={onItemClick} key={item.id} item={item} />
 			))}