diff --git a/src/routes/Chapter.tsx b/src/routes/Chapter.tsx
index d6bbed0..c1ba310 100644
--- a/src/routes/Chapter.tsx
+++ b/src/routes/Chapter.tsx
@@ -10,7 +10,7 @@ import {
   Title,
   CloseButton,
 } from "@mantine/core";
-import { useMediaQuery } from "@mantine/hooks";
+import { useMediaQuery, useViewportSize } from "@mantine/hooks";
 import { Tree } from "react-arborist";
 import { useAtom } from "jotai";
 import { useDisclosure } from "@mantine/hooks";
@@ -55,6 +55,7 @@ export function Chapter() {
   const chapterId = parseInt(rawChapterId || "-1");
   const snippetId = parseInt(rawSnippetId || "-1");
 
+  const { height: innerHeight } = useViewportSize();
   const shouldHideTreeColumn = useMediaQuery(`(max-width: 1024px)`);
 
   const [ready] = useAtom(appReady);
@@ -191,7 +192,13 @@ export function Chapter() {
                 open: snippetsMenuOpened,
               })}
             >
-              <Flex justify={"space-between"} align={"center"}>
+              <Flex
+                justify={"space-between"}
+                align={"center"}
+                mx={"-10px"}
+                mt={"-10px"}
+                bg={"white"}
+              >
                 <Flex align="center" maw={"80dvw"}>
                   {/* <ActionIcon variant="subtle" onClick={openEditChapterModal}>
                     <IconEdit />
@@ -250,6 +257,7 @@ export function Chapter() {
 
               {!!snippets?.length && snippets?.length > 0 && (
                 <Tree
+                  height={innerHeight - 120}
                   rowHeight={36}
                   onMove={async (e) => {
                     let newSortOrder = 0;
@@ -311,7 +319,11 @@ export function Chapter() {
               className="snippets-menu-button"
               mb="1rem"
               onClick={() => {
-                openSnippetsMenu();
+                if (!snippetsMenuOpened) {
+                  openSnippetsMenu();
+                } else {
+                  closeSnippetsMenu();
+                }
               }}
             >
               <Flex align="center">
diff --git a/src/routes/Snippet.tsx b/src/routes/Snippet.tsx
index a4d4d01..107de41 100644
--- a/src/routes/Snippet.tsx
+++ b/src/routes/Snippet.tsx
@@ -10,6 +10,7 @@ import {
   fetchTimestamp,
   whisperInstance,
   currentSettings,
+  currentChapterId,
 } from "../state/main";
 import { IconCirclePlus } from "@tabler/icons-react";
 import { SnippetModel, SnippetsCRUD } from "../data/repositories/snippets";
@@ -44,6 +45,7 @@ export function Snippet() {
   const snippetId = parseInt(rawSnippetId || "-1");
   const [, setFetchTimestamp] = useAtom(fetchTimestamp);
   const [, setCurrentSnippetId] = useAtom(currentSnippetId);
+  const [chapterId] = useAtom(currentChapterId);
   const [snippet] = useAtom(currentSnippet);
   const [snippets] = useAtom(currentSnippets);
   const [settings] = useAtom(currentSettings);
@@ -295,7 +297,23 @@ export function Snippet() {
             openRecordingModal();
             startRecording();
           }}
-          onDelete={() => {}}
+          onDelete={async () => {
+            await SnippetsCRUD.delete(snippetId);
+            startTransition(() => {
+              setFetchTimestamp(Date.now());
+            });
+            if (nextSnippet) {
+              navigate(
+                `/books/${bookId}/chapters/${chapterId}/snippets/${nextSnippet.id}`
+              );
+            } else if (previousSnippet) {
+              navigate(
+                `/books/${bookId}/chapters/${chapterId}/snippets/${previousSnippet.id}`
+              );
+            } else {
+              navigate(`/books/${bookId}/chapters/${chapterId}`);
+            }
+          }}
         />
 
         <Flex direction={"column"} align="center" justify="center" my={20}>