diff --git a/package.json b/package.json
index 5e040e6..3e2c9aa 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "@tiptap/react": "^2.1.13",
     "@tiptap/starter-kit": "^2.1.13",
     "case": "^1.6.3",
+    "clsx": "^2.1.0",
     "dayjs": "^1.11.10",
     "debounce": "^2.0.0",
     "drizzle-orm": "^0.29.2",
@@ -52,6 +53,7 @@
     "postcss": "^8.4.32",
     "postcss-preset-mantine": "^1.12.2",
     "postcss-simple-vars": "^7.0.1",
+    "sass": "^1.70.0",
     "ts-node": "^10.9.2",
     "tsx": "^4.7.0",
     "typescript": "^5.2.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 051cb83..cb86727 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -40,6 +40,9 @@ dependencies:
   case:
     specifier: ^1.6.3
     version: 1.6.3
+  clsx:
+    specifier: ^2.1.0
+    version: 2.1.0
   dayjs:
     specifier: ^1.11.10
     version: 1.11.10
@@ -117,6 +120,9 @@ devDependencies:
   postcss-simple-vars:
     specifier: ^7.0.1
     version: 7.0.1(postcss@8.4.32)
+  sass:
+    specifier: ^1.70.0
+    version: 1.70.0
   ts-node:
     specifier: ^10.9.2
     version: 10.9.2(@types/node@20.10.5)(typescript@5.3.3)
@@ -128,7 +134,7 @@ devDependencies:
     version: 5.3.3
   vite:
     specifier: ^5.0.8
-    version: 5.0.10(@types/node@20.10.5)
+    version: 5.0.10(@types/node@20.10.5)(sass@1.70.0)
 
 packages:
 
@@ -3277,7 +3283,7 @@ packages:
       vite: ^4 || ^5
     dependencies:
       '@swc/core': 1.3.101
-      vite: 5.0.10(@types/node@20.10.5)
+      vite: 5.0.10(@types/node@20.10.5)(sass@1.70.0)
     transitivePeerDependencies:
       - '@swc/helpers'
     dev: true
@@ -3388,6 +3394,14 @@ packages:
     resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
     dev: false
 
+  /anymatch@3.1.3:
+    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
+    engines: {node: '>= 8'}
+    dependencies:
+      normalize-path: 3.0.0
+      picomatch: 2.3.1
+    dev: true
+
   /application-config-path@0.1.1:
     resolution: {integrity: sha512-zy9cHePtMP0YhwG+CfHm0bgwdnga2X3gZexpdCwEj//dpb+TKajtiC8REEUJUSq6Ab4f9cgNy2l8ObXzCXFkEw==}
     dev: false
@@ -3541,6 +3555,11 @@ packages:
     engines: {node: '>=0.6'}
     dev: false
 
+  /binary-extensions@2.2.0:
+    resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
+    engines: {node: '>=8'}
+    dev: true
+
   /blueimp-md5@2.19.0:
     resolution: {integrity: sha512-DRQrD6gJyy8FbiE4s+bDoXS9hiW3Vbx5uCdwvcCf3zLHL+Iv7LtGHLpr+GZV8rHG8tK766FGYBwRbu8pELTt+w==}
     dev: false
@@ -3722,6 +3741,21 @@ packages:
     resolution: {integrity: sha512-yrLQ/yVUFXkzg7EDQsPieE/53+0RlaWTs+wBrvW36cyilJ2SaDWfl4Yj7MtLTXleV9uEKefbAGUPv2/iWSooRA==}
     dev: false
 
+  /chokidar@3.5.3:
+    resolution: {integrity: sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==}
+    engines: {node: '>= 8.10.0'}
+    dependencies:
+      anymatch: 3.1.3
+      braces: 3.0.2
+      glob-parent: 5.1.2
+      is-binary-path: 2.1.0
+      is-glob: 4.0.3
+      normalize-path: 3.0.0
+      readdirp: 3.6.0
+    optionalDependencies:
+      fsevents: 2.3.3
+    dev: true
+
   /chownr@2.0.0:
     resolution: {integrity: sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==}
     engines: {node: '>=10'}
@@ -3764,6 +3798,11 @@ packages:
     engines: {node: '>=6'}
     dev: false
 
+  /clsx@2.1.0:
+    resolution: {integrity: sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==}
+    engines: {node: '>=6'}
+    dev: false
+
   /color-convert@1.9.3:
     resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
     dependencies:
@@ -5039,6 +5078,10 @@ packages:
     resolution: {integrity: sha512-HR7EVodfFUdQCTIeySw+WDRFJlPcLOJbXfwwZ7Oom6tjsvZ3bOkCDJHehQC3nxJrv7+f9XecwazynjU8e4Vw3Q==}
     dev: false
 
+  /immutable@4.3.4:
+    resolution: {integrity: sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==}
+    dev: true
+
   /import-fresh@3.3.0:
     resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
     engines: {node: '>=6'}
@@ -5097,6 +5140,13 @@ packages:
     engines: {node: '>= 0.10'}
     dev: false
 
+  /is-binary-path@2.1.0:
+    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
+    engines: {node: '>=8'}
+    dependencies:
+      binary-extensions: 2.2.0
+    dev: true
+
   /is-buffer@1.1.6:
     resolution: {integrity: sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==}
     dev: false
@@ -5838,6 +5888,11 @@ packages:
     resolution: {integrity: sha512-pQ8vODlgXt2e7A3mIbFDlizkr46r75V+BJxVAyat8Jl7YmI513gG5cfyRL0FedKraoZ+VAouI1h4/IWpus5pcQ==}
     dev: false
 
+  /normalize-path@3.0.0:
+    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
   /npm-package-arg@7.0.0:
     resolution: {integrity: sha512-xXxr8y5U0kl8dVkz2oK7yZjPBvqM2fwaO5l3Yg13p03v8+E3qQcD0JNhHzjL1vyGgxcKkD0cco+NLR72iuPk3g==}
     dependencies:
@@ -6677,6 +6732,13 @@ packages:
       loose-envify: 1.4.0
     dev: false
 
+  /readdirp@3.6.0:
+    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
+    engines: {node: '>=8.10.0'}
+    dependencies:
+      picomatch: 2.3.1
+    dev: true
+
   /redux@4.2.1:
     resolution: {integrity: sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==}
     dependencies:
@@ -6855,6 +6917,16 @@ packages:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
     dev: false
 
+  /sass@1.70.0:
+    resolution: {integrity: sha512-uUxNQ3zAHeAx5nRFskBnrWzDUJrrvpCPD5FNAoRvTi0WwremlheES3tg+56PaVtCs5QDRX5CBLxxKMDJMEa1WQ==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+    dependencies:
+      chokidar: 3.5.3
+      immutable: 4.3.4
+      source-map-js: 1.0.2
+    dev: true
+
   /sax@1.3.0:
     resolution: {integrity: sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA==}
     dev: false
@@ -7629,7 +7701,7 @@ packages:
       builtins: 1.0.3
     dev: false
 
-  /vite@5.0.10(@types/node@20.10.5):
+  /vite@5.0.10(@types/node@20.10.5)(sass@1.70.0):
     resolution: {integrity: sha512-2P8J7WWgmc355HUMlFrwofacvr98DAjoE52BfdbwQtyLH06XKwaL/FMnmKM2crF0iX4MpmMKoDlNCB1ok7zHCw==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
@@ -7661,6 +7733,7 @@ packages:
       esbuild: 0.19.10
       postcss: 8.4.32
       rollup: 4.9.1
+      sass: 1.70.0
     optionalDependencies:
       fsevents: 2.3.3
     dev: true
diff --git a/src/App.css b/src/App.css
index b9d355d..08f3f4a 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,3 +1,7 @@
+body {
+  overflow: hidden;
+}
+
 #root {
   max-width: 1280px;
   margin: 0 auto;
diff --git a/src/App.tsx b/src/App.tsx
index 70bb4d4..ecfe5bf 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -82,7 +82,12 @@ export function App() {
                 hiddenFrom="sm"
                 size="sm"
               />
-              <Text>Orderly</Text>
+              <Flex>
+                <Text>Orderly</Text>
+                <Text c="red" ml={4}>
+                  ALPHA
+                </Text>
+              </Flex>
             </Group>
             <Group>
               <Button
@@ -259,8 +264,6 @@ export function App() {
             }}
           />
 
-          <div>{currentBook?.title}</div>
-
           <CreateOrUpdateModal
             opened={editBookModalOpened}
             inputLabel="Book Title"
diff --git a/src/components/SnippetForm.scss b/src/components/SnippetForm.scss
new file mode 100644
index 0000000..8ea6b23
--- /dev/null
+++ b/src/components/SnippetForm.scss
@@ -0,0 +1,54 @@
+.snippet-form {
+  color: inherit;
+  position: relative;
+  &:hover {
+    color: inherit;
+  }
+
+  &.disabled {
+    padding: 1rem;
+    margin-top: -20%;
+
+    .contents {
+      opacity: 0.84;
+      transform: scale(0.9);
+      filter: blur(2px);
+      pointer-events: none;
+    }
+
+    .other-snippet-label-wrapper {
+      position: absolute;
+      bottom: 2rem;
+      left: 0;
+      right: 0;
+      display: none;
+
+      .other-snippet-label {
+        border-radius: 1rem;
+        background: gray;
+        margin: 0 auto;
+        padding: 0.5rem 1rem;
+        color: white;
+        width: 10rem;
+        text-align: center;
+      }
+    }
+
+    &.below {
+      margin-top: 0;
+      margin-bottom: -20%;
+
+      .other-snippet-label-wrapper {
+        bottom: auto;
+        top: 2rem;
+      }
+    }
+
+    &:hover,
+    &:focus {
+      .other-snippet-label-wrapper {
+        display: flex;
+      }
+    }
+  }
+}
diff --git a/src/components/SnippetForm.tsx b/src/components/SnippetForm.tsx
new file mode 100644
index 0000000..217d863
--- /dev/null
+++ b/src/components/SnippetForm.tsx
@@ -0,0 +1,150 @@
+import { RefObject, useEffect, useState } from "react";
+import { TextInput, Textarea, Flex, Group, Button, Box } from "@mantine/core";
+import { IconMicrophone, IconTrash } from "@tabler/icons-react";
+import { clsx } from "clsx";
+import { Link } from "react-router-dom";
+
+import dayjs from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
+dayjs.extend(relativeTime);
+
+import { SnippetModel } from "../data/repositories/snippets";
+
+import "./SnippetForm.scss";
+
+interface BaseSnippetProps {
+  bookId: string;
+  snippet: SnippetModel | undefined;
+  contentRef?: RefObject<HTMLTextAreaElement>;
+  disabled?: boolean;
+  below?: boolean;
+  onEditLabel?: (label: string) => void | Promise<void>;
+  onEditContent?: (content: string) => void | Promise<void>;
+  onDelete?: () => void | Promise<void>;
+  onRecord?: () => void | Promise<void>;
+}
+
+interface SnippetFormProps extends BaseSnippetProps {
+  disabled?: false;
+  onEditLabel: (label: string) => void | Promise<void>;
+  onEditContent: (content: string) => void | Promise<void>;
+  onDelete: () => void | Promise<void>;
+  onRecord: () => void | Promise<void>;
+}
+
+interface DisabledSnippetProps extends BaseSnippetProps {
+  disabled: true;
+}
+
+export function SnippetForm({
+  snippet,
+  contentRef,
+  disabled,
+  onEditLabel = () => {},
+  onEditContent = () => {},
+  onDelete = () => {},
+  onRecord = () => {},
+  below,
+  bookId,
+}: SnippetFormProps | DisabledSnippetProps) {
+  const [labelValue, setLabelValue] = useState(snippet?.label || "");
+  const [contentValue, setContentValue] = useState(snippet?.content || "");
+
+  useEffect(() => {
+    setLabelValue(snippet?.label || "");
+    setContentValue(snippet?.content || "");
+  }, [snippet]);
+
+  const contents = (
+    <>
+      <Box>
+        <Box>Created At: {dayjs(snippet?.createdAt).fromNow()}</Box>
+        <Box>Modified At: {dayjs(snippet?.modifiedAt).fromNow()}</Box>
+        {!!snippet?.recordedAt && (
+          <Box>Recorded At: {dayjs(snippet?.recordedAt).fromNow()}</Box>
+        )}
+        {!!snippet?.recordedAt && (
+          <Box>Processed At: {dayjs(snippet?.processedAt).fromNow()}</Box>
+        )}
+        {!!snippet?.recordedAt && (
+          <Box>Finished At: {dayjs(snippet?.finishedAt).fromNow()}</Box>
+        )}
+      </Box>
+
+      <TextInput
+        label="Label"
+        value={labelValue}
+        onChange={async (e) => {
+          setLabelValue(e.currentTarget.value);
+          onEditLabel(e.currentTarget.value);
+        }}
+        disabled={disabled}
+      />
+      <Textarea
+        ref={contentRef}
+        value={contentValue}
+        label="Content"
+        onInput={async (e) => {
+          setContentValue(e.currentTarget.value);
+          onEditContent(e.currentTarget.value);
+        }}
+        disabled={disabled}
+      />
+
+      <Group mt={8} justify="space-between">
+        <Button
+          color="red"
+          variant="outline"
+          onClick={() => {
+            onRecord();
+          }}
+          disabled={disabled}
+        >
+          Record Audio
+          <IconMicrophone />
+        </Button>
+        <Button
+          color="red"
+          onClick={() => {
+            onDelete();
+          }}
+          disabled={disabled}
+        >
+          Delete <IconTrash />
+        </Button>
+      </Group>
+    </>
+  );
+
+  return (
+    <>
+      {!disabled ? (
+        <Flex
+          direction="column"
+          className={clsx("snippet-form", {
+            disabled,
+            below: disabled && below,
+          })}
+        >
+          {contents}
+        </Flex>
+      ) : (
+        <Link
+          to={`/books/${bookId}/chapters/${snippet?.chapterId}/snippets/${snippet?.id}`}
+          className={clsx("snippet-form", {
+            disabled,
+            below: disabled && below,
+          })}
+        >
+          <div className="contents">{contents}</div>
+
+          <div className="other-snippet-label-wrapper">
+            <div className="other-snippet-label">
+              {!below ? "Previous" : "Next"}
+            </div>
+          </div>
+        </Link>
+      )}
+    </>
+  );
+}
diff --git a/src/routes/Chapter.tsx b/src/routes/Chapter.tsx
index cad9f23..648aa63 100644
--- a/src/routes/Chapter.tsx
+++ b/src/routes/Chapter.tsx
@@ -1,6 +1,6 @@
 import { useEffect } from "react";
 import { Link, Outlet, useNavigate, useParams } from "react-router-dom";
-import { ActionIcon, Box, Flex, Menu, Text } from "@mantine/core";
+import { ActionIcon, Box, Flex, Menu, Text, ScrollArea } from "@mantine/core";
 import { Tree } from "react-arborist";
 import { useAtom } from "jotai";
 
@@ -150,7 +150,10 @@ export function Chapter() {
         )}
         {(!snippets || snippets?.length === 0) && <div>No Snippets found</div>}
       </Flex>
-      <Outlet />
+
+      <ScrollArea.Autosize mah={"90vh"} w={"100%"} mx="auto">
+        <Outlet />
+      </ScrollArea.Autosize>
 
       <CreateOrUpdateModal
         opened={editChapterModalOpened}
diff --git a/src/routes/Snippet.tsx b/src/routes/Snippet.tsx
index 4584bc9..0587ef1 100644
--- a/src/routes/Snippet.tsx
+++ b/src/routes/Snippet.tsx
@@ -1,26 +1,18 @@
-import { useEffect, useRef, useState } from "react";
-import { useParams } from "react-router-dom";
-import {
-  TextInput,
-  Textarea,
-  Flex,
-  Group,
-  Button,
-  Box,
-  Modal,
-  Text,
-  Loader,
-} from "@mantine/core";
+import { useEffect, useRef, useState, startTransition } from "react";
+import { useParams, useNavigate } from "react-router-dom";
+import { Flex, Button, Modal, Text, Loader } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
 import { useAtom } from "jotai";
 import {
   currentSnippet,
+  currentSnippets,
   currentSnippetId,
   fetchTimestamp,
   whisperInstance,
 } from "../state/main";
-import { SnippetsCRUD } from "../data/repositories/snippets";
-import { IconMicrophone, IconTrash } from "@tabler/icons-react";
+import { IconCirclePlus } from "@tabler/icons-react";
+import { SnippetModel, SnippetsCRUD } from "../data/repositories/snippets";
+import { SnippetForm } from "../components/SnippetForm";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
 dayjs.extend(relativeTime);
@@ -43,11 +35,13 @@ function blobToDataURL(blob: Blob): Promise<string> {
 }
 
 export function Snippet() {
-  const { snippetId: rawSnippetId } = useParams();
+  const navigate = useNavigate();
+  const { snippetId: rawSnippetId, bookId } = useParams();
   const snippetId = parseInt(rawSnippetId || "-1");
   const [, setFetchTimestamp] = useAtom(fetchTimestamp);
   const [, setCurrentSnippetId] = useAtom(currentSnippetId);
   const [snippet] = useAtom(currentSnippet);
+  const [snippets] = useAtom(currentSnippets);
   const contentRef = useRef<HTMLTextAreaElement>(null);
   const [isRecording, setIsRecording] = useState(false);
   const [recordingDuration, setRecordingDuration] = useState(0);
@@ -56,6 +50,8 @@ export function Snippet() {
   const [audioBlob, setAudioBlob] = useState<Blob>();
   const [, setAudioString] = useState("");
   const audioRef = useRef<HTMLAudioElement>(null);
+  const [previousSnippet, setPreviousSnippet] = useState<SnippetModel>();
+  const [nextSnippet, setNextSnippet] = useState<SnippetModel>();
 
   const [{ start: startRecording, stop: stopRecording }, setMicrophone] =
     useState({
@@ -149,63 +145,140 @@ export function Snippet() {
     setCurrentSnippetId(snippetId);
   }, [snippetId, setCurrentSnippetId]);
 
+  useEffect(() => {
+    if (snippets) {
+      let previous: SnippetModel | undefined = undefined;
+      let next: SnippetModel | undefined = undefined;
+
+      for (let i = 0; i < snippets.length; i++) {
+        if (snippets[i].id === snippetId) {
+          previous = snippets[i - 1];
+          next = snippets[i + 1];
+        }
+      }
+
+      setPreviousSnippet(previous);
+      setNextSnippet(next);
+    }
+  }, [snippetId, snippets]);
+
   return (
     <>
-      <Flex direction={"column"} w="100%" maw={"600px"} mx={"auto"} px={24}>
-        <Box>
-          <Box>Created At: {dayjs(snippet?.createdAt).fromNow()}</Box>
-          <Box>Modified At: {dayjs(snippet?.modifiedAt).fromNow()}</Box>
-          {!!snippet?.recordedAt && (
-            <Box>Recorded At: {dayjs(snippet?.recordedAt).fromNow()}</Box>
-          )}
-          {!!snippet?.recordedAt && (
-            <Box>Processed At: {dayjs(snippet?.processedAt).fromNow()}</Box>
-          )}
-          {!!snippet?.recordedAt && (
-            <Box>Finished At: {dayjs(snippet?.finishedAt).fromNow()}</Box>
-          )}
-        </Box>
-
-        <TextInput
-          label="Label"
-          defaultValue={snippet?.label}
-          onChange={async (e) => {
-            if (snippet) {
-              await SnippetsCRUD.update(snippet?.id, {
-                label: e.currentTarget.value,
-              });
+      <Flex
+        direction={"column"}
+        w="100%"
+        maw={"600px"}
+        mih={"90vh"}
+        mah="90vh"
+        h="90vh"
+        mx={"auto"}
+        px={24}
+        justify={"space-between"}
+        align="space-between"
+      >
+        {!!previousSnippet && (
+          <SnippetForm
+            snippet={previousSnippet}
+            bookId={bookId || ""}
+            disabled={true}
+          />
+        )}
+
+        <Flex direction={"column"} align="center" justify="center" my={42}>
+          <Button
+            variant="light"
+            onClick={async () => {
+              if (snippet) {
+                const currentSnippetSortOrder = snippet.sortOrder;
+                const previousSnippetSortOrder =
+                  previousSnippet?.sortOrder || currentSnippetSortOrder - 1;
+                const sortOrder =
+                  (currentSnippetSortOrder + previousSnippetSortOrder) / 2;
+
+                const newSnippet = await SnippetsCRUD.create({
+                  sortOrder,
+                  chapterId: snippet.chapterId,
+                  label: "New Snippet",
+                });
+
+                navigate(
+                  `/books/${bookId}/chapters/${snippet.chapterId}/snippets/${newSnippet?.id}`
+                );
+
+                startTransition(() => {
+                  setFetchTimestamp(Date.now());
+                });
+              }
+            }}
+          >
+            Insert Before <IconCirclePlus />
+          </Button>
+        </Flex>
+
+        <SnippetForm
+          snippet={snippet}
+          bookId={bookId || ""}
+          onEditLabel={async (label) => {
+            await SnippetsCRUD.update(snippetId, {
+              label,
+            });
+            startTransition(() => {
               setFetchTimestamp(Date.now());
-            }
+            });
           }}
-        />
-        <Textarea
-          ref={contentRef}
-          defaultValue={snippet?.content}
-          label="Content"
-          onInput={async (e) => {
+          onEditContent={async (content) => {
             await SnippetsCRUD.update(snippetId, {
-              content: e.currentTarget.value,
+              content,
             });
-            setFetchTimestamp(Date.now());
+            startTransition(() => {
+              setFetchTimestamp(Date.now());
+            });
+          }}
+          onRecord={() => {
+            openRecordingModal();
+            startRecording();
           }}
+          onDelete={() => {}}
         />
 
-        <Group mt={8} justify="space-between">
+        <Flex direction={"column"} align="center" justify="center" my={42}>
           <Button
-            color="red"
-            variant="outline"
-            onClick={() => {
-              openRecordingModal();
-              startRecording();
+            variant="light"
+            onClick={async () => {
+              if (snippet) {
+                const currentSnippetSortOrder = snippet.sortOrder;
+                const nextSnippetSortOrder =
+                  nextSnippet?.sortOrder || currentSnippetSortOrder + 1;
+                const newSnippet = await SnippetsCRUD.create({
+                  sortOrder:
+                    (currentSnippetSortOrder + nextSnippetSortOrder) / 2,
+                  chapterId: snippet.chapterId,
+                  label: "New Snippet",
+                });
+
+                navigate(
+                  `/books/${bookId}/chapters/${snippet.chapterId}/snippets/${newSnippet?.id}`
+                );
+
+                startTransition(() => {
+                  setFetchTimestamp(Date.now());
+                });
+              }
             }}
           >
-            Record Audio
-            <IconMicrophone />
-          </Button>
-          <Button color="red">
-            Delete <IconTrash />
+            Insert After <IconCirclePlus />
           </Button>
-        </Group>
+        </Flex>
+
+        {!!nextSnippet && (
+          <SnippetForm
+            snippet={nextSnippet}
+            bookId={bookId || ""}
+            disabled={true}
+            below={true}
+          />
+        )}
+
         <Modal
           opened={recordingModalOpened}
           closeOnClickOutside={false}
diff --git a/src/state/main.ts b/src/state/main.ts
index 524a17a..daf76c1 100644
--- a/src/state/main.ts
+++ b/src/state/main.ts
@@ -34,7 +34,6 @@ export const currentSnippets = atom((get) => {
 
 export const currentSnippetId = atom<number | undefined>(undefined);
 export const currentSnippet = atom((get) => {
-  get(fetchTimestamp);
   const snippetId = get(currentSnippetId);
   return SnippetsCRUD.read(snippetId || -1);
 });