diff --git a/src/lib/components/modals/ExportSelectionModal.svelte b/src/lib/components/modals/ExportSelectionModal.svelte
index ef63713..9f87512 100644
--- a/src/lib/components/modals/ExportSelectionModal.svelte
+++ b/src/lib/components/modals/ExportSelectionModal.svelte
@@ -1,16 +1,17 @@
 <script lang="ts">
     import Modal from "$lib/components/Modal.svelte";
-    import { Editor } from "@tiptap/core";
+    import { Editor, generateHTML } from "@tiptap/core";
     import Key from "../Key.svelte";
     import MiniRenderer from "../text/MiniRenderer.svelte";
     import { appSettings } from "$lib/settings";
     import { convert } from "$lib/text/nbt/export";
-    import { json, typescript } from "svelte-highlight/languages";
+    import { json, typescript, v } from "svelte-highlight/languages";
     import Highlight from "svelte-highlight";
 
     import IconCopy from "~icons/tabler/copy";
     import IconCheck from "~icons/tabler/check";
     import CheckBox from "../CheckBox.svelte";
+    import { defaultExtensions } from "$lib/text/utils";
 
     let recentlyCopied: boolean = $state(false);
     let jsonOutput: boolean = $state(false);
@@ -47,11 +48,12 @@
             content.pop();
         }
 
-        // Format in document
-        value = {
+        content = {
             type: "doc",
             content: content,
         };
+        
+        value = content
     }
 </script>
 
diff --git a/src/lib/components/text/MiniRenderer.svelte b/src/lib/components/text/MiniRenderer.svelte
index cb9913e..e3c0775 100644
--- a/src/lib/components/text/MiniRenderer.svelte
+++ b/src/lib/components/text/MiniRenderer.svelte
@@ -1,65 +1,22 @@
 <script lang="ts">
-    import { browser } from "$app/environment";
-    import { appSettings } from "$lib/settings";
-    import {
-        AtlasObjectNode,
-        BlockNBTNode,
-        ClickEventMark,
-        EntityNBTNode,
-        FixedTextStyle,
-        FontsExtension,
-        HoverEventMark,
-        KeybindNode,
-        Obfuscation,
-        PlayerObjectNode,
-        ScoreNode,
-        SelectorNode,
-        ShadowColorMark,
-        StorageNBTNode,
-        TranslateNode,
-    } from "$lib/tiptap/extensions/index";
     import { generateHTML, type JSONContent } from "@tiptap/core";
-    import Color from "@tiptap/extension-color";
-    import StarterKit from "@tiptap/starter-kit";
     import { onMount } from "svelte";
 
+    import { browser } from "$app/environment";
+    import { appSettings } from "$lib/settings";
+    import { defaultExtensions } from "$lib/text/utils";
+
     let { value }: { value: JSONContent } = $props();
 
-    let html: string = $derived(
-        browser
-            ? generateHTML(value, [
-                  StarterKit.configure({
-                      blockquote: false,
-                      bulletList: false,
-                      codeBlock: false,
-                      hardBreak: false,
-                      heading: false,
-                      horizontalRule: false,
-                      listItem: false,
-                      orderedList: false,
-                      link: false,
-                  }),
-                  Color,
-                  FixedTextStyle,
-                  Obfuscation,
-                  ClickEventMark,
-                  HoverEventMark,
-                  ShadowColorMark,
-                  ScoreNode,
-                  TranslateNode,
-                  BlockNBTNode,
-                  StorageNBTNode,
-                  EntityNBTNode,
-                  KeybindNode,
-                  SelectorNode,
-                  AtlasObjectNode,
-                  PlayerObjectNode,
-                  FontsExtension,
-              ])
-            : "",
-    );
+    let html: string = $state(")");
 
     onMount(() => {
+        html = browser
+            ? generateHTML(value, [
+                  ...defaultExtensions
+              ])
+            : ""
+        
         appSettings.subscribe(() => {
             const el = document.querySelectorAll(".tiptap") as NodeListOf<HTMLElement>;
 
@@ -83,4 +40,6 @@
     });
 </script>
 
+{#if html}
 <div class="tiptap tiptap-minirenderer">{@html html}</div>
+{/if}
\ No newline at end of file
diff --git a/src/lib/text/utils.ts b/src/lib/text/utils.ts
index 68f4762..641f0ff 100644
--- a/src/lib/text/utils.ts
+++ b/src/lib/text/utils.ts
@@ -1,5 +1,54 @@
 import type { MinecraftText } from "$lib/types";
-import type { Editor, JSONContent } from "@tiptap/core";
+import type { Editor, Extensions, JSONContent } from "@tiptap/core";
+import {
+    AtlasObjectNode,
+    BlockNBTNode,
+    ClickEventMark,
+    EntityNBTNode,
+    FixedTextStyle,
+    FontsExtension,
+    HoverEventMark,
+    KeybindNode,
+    Obfuscation,
+    PlayerObjectNode,
+    ScoreNode,
+    SelectorNode,
+    ShadowColorMark,
+    StorageNBTNode,
+    TranslateNode,
+} from "$lib/tiptap/extensions/index";
+import { StarterKit } from "@tiptap/starter-kit";
+import { Color } from "@tiptap/extension-text-style";
+
+export const defaultExtensions : Extensions = [
+    StarterKit.configure({
+        blockquote: false,
+        bulletList: false,
+        codeBlock: false,
+        hardBreak: false,
+        heading: false,
+        horizontalRule: false,
+        listItem: false,
+        orderedList: false,
+        link: false,
+    }),
+    Color,
+    FixedTextStyle,
+    Obfuscation,
+    ClickEventMark,
+    HoverEventMark,
+    ShadowColorMark,
+    ScoreNode,
+    TranslateNode,
+    BlockNBTNode,
+    StorageNBTNode,
+    EntityNBTNode,
+    KeybindNode,
+    SelectorNode,
+    AtlasObjectNode,
+    PlayerObjectNode,
+    FontsExtension,
+]
 
 export const colourMap = [
     { name: "dark_red", value: "#AA0000", code: "4" },
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 79c82e3..4ccd27b 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,8 +1,13 @@
 <script lang="ts">
-    import WelcomeScreen from "../lib/components/WelcomeScreen.svelte";
-
     import { page } from "$app/state";
+    import { Editor, type JSONContent } from "@tiptap/core";
+    import Placeholder from "@tiptap/extension-placeholder";
+    import { onDestroy, onMount } from "svelte";
+    import { Highlight } from "svelte-highlight";
+    import typescript from "svelte-highlight/languages/typescript";
+
     import Modal from "$lib/components/Modal.svelte";
+    import WelcomeScreen from "../lib/components/WelcomeScreen.svelte";
     import ControlBar from "$lib/components/toolbar/Toolbar.svelte";
     import TopUI from "$lib/components/TopUI.svelte";
     import { openDataStore } from "$lib/db";
@@ -11,32 +16,10 @@
     import { convert } from "$lib/text/nbt/export";
     import { ExportButtonExtension } from "$lib/tiptap/extensions/ExportButton";
     import { fontLUT } from "$lib/tiptap/extensions/fonts";
-    import {
-        AtlasObjectNode,
-        BlockNBTNode,
-        ClickEventMark,
-        EntityNBTNode,
-        FixedTextStyle,
-        FontsExtension,
-        HoverEventMark,
-        KeybindNode,
-        Obfuscation,
-        PlayerObjectNode,
-        ScoreNode,
-        SelectorNode,
-        ShadowColorMark,
-        StorageNBTNode,
-        TranslateNode,
-    } from "$lib/tiptap/extensions/index";
     import { tooltip } from "$lib/tooltip";
     import { versions, type Version } from "$lib/types";
-    import { Editor, type JSONContent } from "@tiptap/core";
-    import Color from "@tiptap/extension-color";
-    import Placeholder from "@tiptap/extension-placeholder";
-    import StarterKit from "@tiptap/starter-kit";
-    import { onDestroy, onMount } from "svelte";
-    import { Highlight } from "svelte-highlight";
-    import typescript from "svelte-highlight/languages/typescript";
+    import { defaultExtensions } from "$lib/text/utils";
+
     import IconTick from "~icons/tabler/check";
     import IconCopy from "~icons/tabler/copy";
 
@@ -99,33 +82,7 @@
                 },
             },
             extensions: [
-                StarterKit.configure({
-                    blockquote: false,
-                    bulletList: false,
-                    codeBlock: false,
-                    hardBreak: false,
-                    heading: false,
-                    horizontalRule: false,
-                    listItem: false,
-                    orderedList: false,
-                    link: false,
-                }),
-                Color,
-                FixedTextStyle,
-                Obfuscation,
-                ClickEventMark,
-                HoverEventMark,
-                ShadowColorMark,
-                ScoreNode,
-                TranslateNode,
-                BlockNBTNode,
-                StorageNBTNode,
-                EntityNBTNode,
-                KeybindNode,
-                SelectorNode,
-                AtlasObjectNode,
-                PlayerObjectNode,
-                FontsExtension,
+                ...defaultExtensions,
                 Placeholder.configure({
                     placeholder:
                         "Write text here, style it with the options above, and the output text components will appear at the bottom. You can also import text components with the Import button above!",
diff --git a/src/routes/book/+page.svelte b/src/routes/book/+page.svelte
index c09c514..5478c57 100644
--- a/src/routes/book/+page.svelte
+++ b/src/routes/book/+page.svelte
@@ -1,5 +1,11 @@
 <script lang="ts">
     import { page } from "$app/state";
+    import { Editor, type JSONContent } from "@tiptap/core";
+    import Placeholder from "@tiptap/extension-placeholder";
+    import { onDestroy, onMount } from "svelte";
+    import { Highlight } from "svelte-highlight";
+    import typescript from "svelte-highlight/languages/typescript";
+    
     import Modal from "$lib/components/Modal.svelte";
     import BookMiniRenderer from "$lib/components/text/BookMiniRenderer.svelte";
     import ControlBar from "$lib/components/toolbar/Toolbar.svelte";
@@ -9,34 +15,9 @@
     import { appSettings } from "$lib/settings";
     import { outputVersion } from "$lib/settings";
     import { convert } from "$lib/text/nbt/export";
-    import { ExportButtonExtension } from "$lib/tiptap/extensions/ExportButton";
     import { fontLUT } from "$lib/tiptap/extensions/fonts";
-    import {
-        AtlasObjectNode,
-        BlockNBTNode,
-        ClickEventMark,
-        EntityNBTNode,
-        FixedTextStyle,
-        FontsExtension,
-        HoverEventMark,
-        KeybindNode,
-        Obfuscation,
-        PlayerObjectNode,
-        ScoreNode,
-        SelectorNode,
-        ShadowColorMark,
-        StorageNBTNode,
-        TranslateNode,
-    } from "$lib/tiptap/extensions/index";
     import { tooltip } from "$lib/tooltip";
     import { versions, type Version } from "$lib/types";
-    import { Editor, type JSONContent } from "@tiptap/core";
-    import Color from "@tiptap/extension-color";
-    import Placeholder from "@tiptap/extension-placeholder";
-    import StarterKit from "@tiptap/starter-kit";
-    import { onDestroy, onMount } from "svelte";
-    import { Highlight } from "svelte-highlight";
-    import typescript from "svelte-highlight/languages/typescript";
 
     import IconTick from "~icons/tabler/check";
     import IconCopy from "~icons/tabler/copy";
@@ -45,6 +26,7 @@
     import IconSettings from "~icons/tabler/settings";
     import IconUp from "~icons/tabler/chevron-up";
     import IconDown from "~icons/tabler/chevron-down";
+    import { defaultExtensions } from "$lib/text/utils";
 
     let currentTiptapJSON: JSONContent = $state()!;
     let pageJSONs: JSONContent[] = $state([{ type: "doc", content: [] }]);
@@ -70,6 +52,8 @@
     let hideDetails = $state(false);
     let generation = $state(0);
 
+    let bookPagesThumbnails: HTMLDivElement[] = []
+
     async function loadData() {
         if (localStorage.getItem("book_content")) {
             pageJSONs = JSON.parse(localStorage.getItem("book_content")!);
@@ -114,42 +98,11 @@
                 },
             },
             extensions: [
-                StarterKit.configure({
-                    blockquote: false,
-                    bulletList: false,
-                    codeBlock: false,
-                    hardBreak: false,
-                    heading: false,
-                    horizontalRule: false,
-                    listItem: false,
-                    orderedList: false,
-                    link: false,
-                }),
-                Color,
-                FixedTextStyle,
-                Obfuscation,
-                ClickEventMark,
-                HoverEventMark,
-                ShadowColorMark,
-                ScoreNode,
-                TranslateNode,
-                BlockNBTNode,
-                StorageNBTNode,
-                EntityNBTNode,
-                KeybindNode,
-                SelectorNode,
-                AtlasObjectNode,
-                PlayerObjectNode,
-                FontsExtension,
+                ...defaultExtensions,
                 Placeholder.configure({
                     placeholder:
                         "Write text here, style it with the options above, and the output text components will appear at the bottom. You can also import text components with the Import button above!",
-                }),
-                ExportButtonExtension.configure({
-                    onClick: () => {
-                        exportSelectionDialog.open();
-                    },
-                }),
+                })
             ],
             onTransaction: ({ editor: newEditor }) => {
                 editor = undefined;
@@ -260,7 +213,7 @@
             id="page-box"
             class="h-[calc(100vh-11rem )] flex w-80 flex-col items-center overflow-y-scroll p-2">
             <div class="flex w-full items-center space-x-2 pl-2">
-                <span class="grow font-bold">Book Pages</span>
+                <span class="grow font-bold">Pages</span>
                 <button
                     {@attach tooltip}
                     aria-label="Book Details"
@@ -269,7 +222,7 @@
             </div>
             {#key pageJSONs}
                 {#each pageJSONs as page, index}
-                    <div class="w-55 p-2">
+                    <div class="w-55 p-2" bind:this={bookPagesThumbnails[index]}>
                         {#if $appSettings.bookPreviewMode === "normal"}
                             <div
                                 role="button"