diff --git a/app/components/Edit/DesktopTodoDataSelect.vue b/app/components/Edit/DesktopTodoDataSelect.vue
index 60a7b07..c19e3a4 100644
--- a/app/components/Edit/DesktopTodoDataSelect.vue
+++ b/app/components/Edit/DesktopTodoDataSelect.vue
@@ -65,10 +65,16 @@
 			icon: category.icon,
 		});
 	}
+
+	const isSideBarCollapesed = ref(false);
 </script>
 
 <template>
-	<SplitterGroup direction="horizontal" class="h-full flex gap-1">
+	<SplitterGroup
+		direction="horizontal"
+		class="h-full flex"
+		auto-save-id="todo-data"
+	>
 		<SplitterPanel class="h-full flex flex-col flex-1">
 			<TitleSelect v-model:title="todoData.title" />
 			<div class="relative flex-1 overflow-auto py-1">
@@ -78,10 +84,20 @@
 				<slot />
 			</div>
 		</SplitterPanel>
-		<SplitterResizeHandle id="splitter-group-1-resize-handle-1" class="w-2" />
+		<SplitterResizeHandle
+			id="splitter-group-1-resize-handle-1"
+			class="w-4 h-full flex flex-col justify-center items-center group"
+		>
+			<div
+				:data-sidebar="isSideBarCollapesed ? 'collapsed' : 'expanded'"
+				class="transition data-[sidebar=collapsed]:bg-secondary group-hover:bg-secondary w-1 h-2/10 rounded-full"
+			></div>
+		</SplitterResizeHandle>
 		<SplitterPanel
 			class="data-[state=expanded]:pr-2 data-[state=expanded]:overflow-auto!"
 			collapsible
+			@collapse="() => isSideBarCollapesed = true"
+			@expand="() => isSideBarCollapesed = false"
 			:min-size="225"
 			:defaultSize="300"
 			sizeUnit="px"