diff --git a/src/app.html b/src/app.html
index 670ca5e..72db984 100644
--- a/src/app.html
+++ b/src/app.html
@@ -3,7 +3,7 @@
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-		<title>EaglerForge Builder - Make mods with blocks</title>
+		<title>EaglerBuilder - Make mods with blocks</title>
     	<meta name="description" content="Create EaglerForge mods using Scratch-like block coding." />
     	<meta name="keywords" content="EaglerForge, Eaglercraft, blocks, EaglerForge mod, Minecraft" />
     	<meta name="author" content="Oeildelynx" />
@@ -12,7 +12,7 @@
 		<meta name="viewport" content="width=device-width" />
 		<style id="XTI0GZwZotMzDMi0wcGctLFttIWctMdtLPXI9M0aGGDQyMHRpMViW3E="></style>
 		<style>
-			*:not(code, .token) {
+			*:not(code, textarea, .token) {
 				font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 			}
 			body {
@@ -24,13 +24,15 @@
 			}
 
 			a {
-				color: #ff4b4b;
+				color: rgb(86, 114, 205);
+        		text-decoration: none;
 			}
 			a:hover {
-				color: #ff7373;
+				color: rgb(126, 154, 245);
+        		text-decoration: underline;
 			}
 			a:active {
-				color: #a52b2b;
+				color: rgb(54, 82, 173);
 			}
 
 			/* blockly overrides */
@@ -114,7 +116,7 @@
 	</head>
 	<body data-sveltekit-preload-data="hover">
 		<div class="__alert_prompt" id="Zm5BSEgzQW5HeW9yZkFkNEhpbGJiamtpZmdoOGNDc2lMR29JSzF0K2JnPT0=">
-			<p style="margin-block: 0;">EaglerForge Builder is currently in development, some project files may break due to code changing all the time.</p>
+			<p style="margin-block: 0;">EaglerBuilder is currently in development, some project files may break due to code changing all the time.</p>
 			<button
 				style="margin: 0; margin-left: 8px; background: transparent; border: 0; outline: 0; padding: 0; cursor: pointer;"
 				onclick="closeAlert()"
diff --git a/src/lib/Documentation/Documentation.svelte b/src/lib/Documentation/Documentation.svelte
deleted file mode 100644
index 43202f9..0000000
--- a/src/lib/Documentation/Documentation.svelte
+++ /dev/null
@@ -1,74 +0,0 @@
-<script>
-    //import EaglerForge from "$lib/EaglerCraft/EaglerCraft.svelte";
-
-    import { createEventDispatcher } from "svelte";
-
-    const dispatch = createEventDispatcher();
-
-    function event() {
-        dispatch("click");
-    }
-
-</script>
-<div id="documentation" opened="false">
-    <button onclick="closeDoc()" id="closeDocButton" opened="false">×</button>
-</div>
-
-<style>
-    #documentation{
-        position: absolute;
-        right: 0;
-        height: calc(100% - 16px);
-        width: 0%;
-        z-index: 1;
-        transition: width 0.5s ease-out;
-        border: none;
-        background-color: #f9f9f9;
-    }
-
-    :global(body.dark) #documentation{
-        background-color: #111111;
-    }
-
-    #documentation:not([opened="false"]){
-        border-left: 1px solid #c6c6c6;
-        width: 35%;
-    }
-
-    :global(body.dark) #documentation:not([opened="false"]){
-        border-left: 1px solid #575757;
-    }
-
-
-    #closeDocButton {
-        position: absolute;
-        border: 0px;
-        background-color: transparent;
-        width: 40px;
-        height: 40px;
-        cursor: pointer;
-        top: 10px;
-        right: 10px;
-        transform: translateX(100px);
-        font-size: 2rem;
-        transition: transform 0.5s ease-out;
-        color: #000;
-    }
-
-    #closeDocButton:not([opened="false"]) {
-        transform: translate(0px);
-    }
-
-    :global(body.dark) #closeDocButton {
-        color: #fff;
-    }
-
-    :global(.fa.fa-expand, .fa.fa-compress) {
-        vertical-align: text-bottom;
-        font-size: large;
-        color: #000;
-    }
-    :global(body.dark .fa.fa-expand, body.dark .fa.fa-compress) {
-        color: #e9e9e9;
-    }
-</style>
\ No newline at end of file
diff --git a/src/lib/DocumentationComponents/codeBlock.svelte b/src/lib/DocumentationComponents/codeBlock.svelte
new file mode 100644
index 0000000..659fbe1
--- /dev/null
+++ b/src/lib/DocumentationComponents/codeBlock.svelte
@@ -0,0 +1,78 @@
+<script>
+    import { onMount } from 'svelte';
+    import Prism from 'prismjs';
+    import beautify from "js-beautify";
+    export let title = "";
+    export let code = ``;
+    export let file = "";
+
+    function highlight(code) {
+        const beautified = beautify.js(code, {
+            indent_size: 4,
+            space_in_empty_paren: true,
+        });
+        const highlighted = Prism.highlight(
+            beautified,
+            Prism.languages.javascript
+        );
+        return highlighted;
+    }
+
+    onMount(async () => {
+        if (file) {
+            code = await (await fetch(file)).text();
+            title = file.split("/")[file.split("/").length - 1];
+        }
+    })
+</script>
+
+<div class="code-wrapper">
+    {#if title}
+        <p class="title">{title}</p>
+        <hr>
+    {/if}
+    {#each code.split("\n") as line,i}
+        <div class="line">{#if title}<span class="line-count" style="width: {Math.floor(code.split("\n").length.toString().length) * 10}px;">{i + 1}</span>{/if} <code class="code-line language-javascript">{@html highlight(line)}</code></div>
+    {/each}
+</div>
+
+<style>
+    .code-line {
+        border-radius: 0;
+        white-space: pre;
+        border: none;
+    }
+    .line-count {
+        font-family: Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;
+        color: lightgray;
+        text-align: right;
+        padding-right: 5px;
+        display: inline-block;
+        user-select: none;
+    }
+    :global(body.dark) .line-count {
+        color: gray;
+    }
+    .line {
+        display: block;
+    }
+    .title {
+        margin: 0;
+        padding: .75rem;
+        font-size: 90%;
+    }
+    hr {
+        width: calc(100% + 17px);
+        position: relative;
+        left: -10px;
+        margin-bottom: 10px;
+    }
+    .code-wrapper {
+        padding: 10px;
+        background: #f5f2f0;
+        border-radius: 5px;
+    }
+    :global(body.dark) .code-wrapper {
+        background: #2d2d2d;
+    }
+</style>
\ No newline at end of file
diff --git a/src/lib/MenuModals/CreateBlock.svelte b/src/lib/MenuModals/CreateBlock.svelte
deleted file mode 100644
index a8f6985..0000000
--- a/src/lib/MenuModals/CreateBlock.svelte
+++ /dev/null
@@ -1,455 +0,0 @@
-<script>
-    import { createEventDispatcher, onMount } from "svelte";
-    import EventManager from "../../resources/events";
-    import ModalScript from "./createblock.js";
-    import ColorUtil from "./color.js";
-
-    import Blockly from "blockly/core";
-    const Theme = Blockly.Theme.defineTheme("MakeABlockTheme", {
-        base: Blockly.Themes.Classic,
-        blockStyles: {
-            core_makeablock_test: {
-                colourPrimary: "#ff0000",
-                colourSecondary: "#00ff00",
-                colourTertiary: "#0000ff",
-            },
-        },
-        fontStyle: {
-            family: '"Helvetica Neue", Helvetica, Arial, sans-serif',
-            weight: "600",
-            size: 12,
-        },
-        startHats: true,
-    });
-
-    import En from "blockly/msg/en";
-    import "blockly/blocks";
-
-    import BlocklyComponent from "svelte-blockly";
-
-    const en = {
-        rtl: false,
-        msg: {
-            ...En,
-        },
-    };
-
-    const config = {
-        scrollbars: true,
-        disable: false,
-        theme: Theme,
-        renderer: "custom_renderer",
-        grid: {
-            spacing: 25,
-            length: 3,
-            colour: "#00000011",
-            snap: false,
-        },
-        zoom: {
-            controls: true,
-            wheel: false,
-            startScale: 1.2,
-            maxScale: 4,
-            minScale: 0.25,
-            scaleSpeed: 1.1,
-        },
-        move: {
-            scrollbars: {
-                horizontal: true,
-                vertical: true,
-            },
-            drag: true,
-            wheel: true,
-        },
-    };
-
-    let workspace;
-    const defaultWorkspaceXML = `<xml><block type="core_builderblock" /></xml>`;
-
-    const validation = {
-        id: (id) => {
-            return !String(id).match(/[^a-zA-Z0-9_]+/gim);
-        },
-    };
-
-    onMount(() => {
-        EventManager.allowAttachment();
-        EventManager.on(EventManager.EVENT_THEME_CHANGED, () => {
-            workspace.refreshTheme();
-        });
-    });
-
-    export let color1 = "#ff0000";
-    export let color2 = "#00ff00";
-    export let color3 = "#0000ff";
-    let visible = false;
-
-    function generateColor3(color1) {
-        const rgb = ColorUtil.hexToRGB(color1);
-        const r = Math.max(0, rgb.r - 51);
-        const g = Math.max(0, rgb.g - 51);
-        const b = Math.max(0, rgb.b - 51);
-        return ColorUtil.rgbToHex(r, g, b);
-    }
-    function getBlockStyle() {
-        return {
-            colourPrimary: color1,
-            colourSecondary: color2,
-            colourTertiary: color3 ? color3 : generateColor3(color1),
-        };
-    }
-
-    function getDefaultState() {
-        return {
-            block: {
-                id: "",
-            },
-        };
-    }
-    const dispatch = createEventDispatcher();
-    let state = getDefaultState();
-
-    function event() {
-        // validate all
-        if (!state.block.id || !validation.id(state.block.id)) {
-            return alert("Block ID is either invalid or not set.");
-        }
-        // set state
-        dispatch("completed", state);
-        visible = false;
-    }
-    function cancel() {
-        dispatch("cancel");
-        visible = false;
-    }
-
-    ModalScript.onopened = () => {
-        // create block style
-        Theme.blockStyles["core_makeablock_colors"] = getBlockStyle();
-        console.log(Theme);
-        workspace.refreshTheme();
-
-        visible = true;
-        state = getDefaultState();
-
-        // reset & load
-        workspace.clear();
-        const newXml = Blockly.utils.xml.textToDom(defaultWorkspaceXML);
-        Blockly.Xml.domToWorkspace(newXml, workspace);
-
-        // modify block
-        const block = workspace.getAllBlocks()[0];
-        block.setStyle("core_makeablock_colors");
-        block.setEditable(false);
-        block.setMovable(false);
-        block.setDeletable(false);
-        console.log(block);
-
-        // center
-        workspace.centerOnBlock(block.id, true);
-        setTimeout(() => {
-            workspace.centerOnBlock(block.id, true);
-            block.setStyle("core_makeablock_colors");
-        }, 50);
-    };
-</script>
-
-<div class="bg" style={visible ? "" : "display:none"}>
-    <div class="modal">
-        <div class="modal-title">
-            <p>Make a Block</p>
-        </div>
-        <div class="modal-content">
-            <div class="blockly-wrapper">
-                <BlocklyComponent {config} locale={en} bind:workspace />
-            </div>
-            <div class="button-space">
-                <input
-                    type="text"
-                    placeholder="Block ID (ex: numberIsWithinNumbers)"
-                    class="block-id"
-                    data-invalid={!validation.id(state.block.id)}
-                    bind:value={state.block.id}
-                />
-                {#if !validation.id(state.block.id)}
-                    <p class="block-id-warning">
-                        Block ID can only contain letters A-Z, numbers 0-9, and
-                        the _ symbol.
-                    </p>
-                {:else}
-                    <br />
-                {/if}
-                <div
-                    style="display: flex; flex-direction: row; justify-content: center;"
-                >
-                    <button class="block-addition">
-                        Add Text label
-                        <div style="height:4px" />
-                        <img
-                            alt="Label"
-                            src="/images/blockBuilder/block_label.svg"
-                            height={50}
-                        />
-                    </button>
-                    <button class="block-addition">
-                        Add Text input
-                        <div style="height:4px" />
-                        <img
-                            alt="Text input"
-                            src="/images/blockBuilder/block_input_text.svg"
-                            height={50}
-                        />
-                    </button>
-                    <button class="block-addition">
-                        Add Number input
-                        <div style="height:4px" />
-                        <img
-                            alt="Number input"
-                            src="/images/blockBuilder/block_input_number.svg"
-                            height={50}
-                        />
-                    </button>
-                    <button class="block-addition">
-                        Add Boolean input
-                        <div style="height:4px" />
-                        <img
-                            alt="Boolean input"
-                            src="/images/blockBuilder/block_boolean.svg"
-                            height={50}
-                        />
-                    </button>
-                    <button class="block-addition">
-                        Add Color input
-                        <div style="height:4px" />
-                        <img
-                            alt="Color input"
-                            src="/images/blockBuilder/block_input_color.svg"
-                            height={50}
-                        />
-                    </button>
-                </div>
-                <div
-                    style="display: flex; flex-direction: row; justify-content: center;"
-                >
-                    <details>
-                        <summary>Advanced Inputs</summary>
-                        <button class="block-addition">
-                            Add Angle input
-                            <div style="height:4px" />
-                            <img
-                                alt="Angle input"
-                                src="/images/blockBuilder/block_input_angle.svg"
-                                height={50}
-                            />
-                        </button>
-                        <button class="block-addition">
-                            Add Matrix input
-                            <div style="height:4px" />
-                            <img
-                                alt="Matrix input"
-                                src="/images/blockBuilder/block_input_matrix.svg"
-                                height={50}
-                            />
-                        </button>
-                        <button class="block-addition">
-                            Add Note input
-                            <div style="height:4px" />
-                            <img
-                                alt="Note input"
-                                src="/images/blockBuilder/block_input_note.svg"
-                                height={50}
-                            />
-                        </button>
-                        <button class="block-addition">
-                            Add Image label
-                            <div style="height:4px" />
-                            <!-- svelte-ignore a11y-img-redundant-alt -->
-                            <img
-                                alt="Image Label"
-                                src="/images/blockBuilder/block_label_image.svg"
-                                height={50}
-                            />
-                        </button>
-                        <button class="block-addition">
-                            Add Empty input
-                            <div style="height:4px" />
-                            <img
-                                alt="Empty Input"
-                                src="/images/blockBuilder/block_empty.svg"
-                                height={50}
-                            />
-                        </button>
-                        <button class="block-addition">
-                            Use Enum Name
-                            <div style="height:4px" />
-                            <img
-                                alt="Empty"
-                                src="/images/blockBuilder/block_label_none.svg"
-                                height={50}
-                            />
-                        </button>
-                    </details>
-                </div>
-            </div>
-        </div>
-        <div class="modal-buttons">
-            <button class="button-cancel" on:click={cancel}>Cancel</button>
-            <div style="margin-left:6px" />
-            <button class="button-accept" on:click={event}>OK</button>
-            <div style="margin-left:24px" />
-        </div>
-    </div>
-</div>
-
-<style>
-    .button-cancel {
-        border: 1px solid rgba(0, 0, 0, 0.15);
-        background: white;
-        color: black;
-        font-weight: bold;
-        padding: 0.75rem 1rem;
-        border-radius: 0.25rem;
-        font-size: 0.85rem;
-        cursor: pointer;
-    }
-    .button-accept {
-        border: 1px solid #ff4b4b;
-        background: #ff4b4b;
-        color: white;
-        font-weight: bold;
-        padding: 0.75rem 1rem;
-        border-radius: 0.25rem;
-        font-size: 0.85rem;
-        cursor: pointer;
-    }
-
-    .blockly-wrapper {
-        width: 100%;
-        height: 70%;
-    }
-    .button-space {
-        width: 100%;
-        height: 30%;
-    }
-
-    .bg {
-        position: fixed;
-        left: 0px;
-        top: 0px;
-        width: 100%;
-        height: 100%;
-        background: #ff4b4bb0;
-        z-index: 999999;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-    }
-    .modal {
-        width: 60%;
-        height: 80%;
-        outline: 4px solid hsla(0, 100%, 100%, 0.25);
-        border-radius: 0.5rem;
-        background: white;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        overflow: hidden;
-    }
-    :global(body.dark) .bg {
-        background-color: #333333b0;
-    }
-    :global(body.dark) .modal {
-        background-color: #111;
-    }
-
-    .modal-title {
-        width: 100%;
-        height: 7%;
-        background: #ff4b4b;
-        color: white;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-    }
-    :global(body.dark) .modal-title {
-        background-color: #333;
-    }
-    .modal-content {
-        width: 100%;
-        height: 83%;
-        overflow: auto;
-    }
-    .modal-buttons {
-        width: 100%;
-        height: 10%;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: flex-end;
-    }
-
-    .block-id {
-        width: 90%;
-        height: 24px;
-        margin-top: 4px;
-        margin-left: 5%;
-        border-radius: 1024px;
-        text-align: center;
-        border: 1px solid rgba(0, 0, 0, 0.2);
-        outline: 0px solid #ff4b4b44;
-        transition: 0.25s linear;
-    }
-    .block-id:focus,
-    .block-id:active {
-        border: 1px solid #ff4b4b;
-        outline: 4px solid #ff4b4b44;
-        transition: 0.25s linear;
-    }
-    :global(body.dark) .block-id {
-        background: transparent;
-        border-color: rgba(255, 255, 255, 0.7);
-        color: white;
-    }
-    .block-id[data-invalid="true"] {
-        background-color: #ffabab;
-        text-decoration: red underline;
-    }
-    :global(body.dark) .block-id[data-invalid="true"] {
-        background-color: #9b0000 !important;
-        text-decoration: red underline;
-    }
-
-    .block-id-warning {
-        width: 100%;
-        margin-block: 0;
-        margin: 8px 0px;
-        text-align: center;
-        font-weight: bold;
-    }
-
-    .block-addition {
-        background: transparent;
-        font-weight: bold;
-        margin: 5px;
-        padding: 8px 32px;
-        border: 1px solid rgba(0, 0, 0, 0.2);
-        border-radius: 12px;
-        cursor: pointer;
-    }
-    :global(body.dark) .block-addition {
-        color: white;
-        border-color: #ccc;
-    }
-    .block-addition:focus,
-    .block-addition:hover {
-        border-color: #ff4b4b !important;
-    }
-    .block-addition:active {
-        border-color: black !important;
-    }
-    :global(body.dark) .block-addition:active {
-        border-color: rgb(114, 114, 114) !important;
-    }
-</style>
diff --git a/src/lib/MenuModals/ExtensionColors.svelte b/src/lib/MenuModals/ExtensionColors.svelte
deleted file mode 100644
index fb65b22..0000000
--- a/src/lib/MenuModals/ExtensionColors.svelte
+++ /dev/null
@@ -1,311 +0,0 @@
-<script>
-    import { createEventDispatcher } from "svelte";
-    import ColorUtil from "./color.js";
-
-    import colorExample from "./extensionColorExample.svg?raw";
-
-    export let color1 = "#ff0000";
-    export let color2 = "#00ff00";
-    export let color3 = "#0000ff";
-
-    let color3Included = false;
-    export let tbShow = true;
-
-    const dispatch = createEventDispatcher();
-
-    function event() {
-        console.log(color3Included);
-        if (!color3Included) {
-            color3 = "";
-        }
-        if (color3Included && !color3) {
-            color3 = "#000000";
-        }
-        dispatch("completed", {
-            color1,
-            color2,
-            color3,
-            tbShow
-        });
-    }
-    function cancel() {
-        dispatch("cancel");
-    }
-
-    function getExampleData(color1, color2, color3, color3Included) {
-        const tokens = ["[{{COLOR1}}]", "[{{COLOR2}}]", "[{{COLOR3}}]"];
-        if (color3Included && !color3) {
-            color3 = "#000000";
-        }
-        if (!color3 || !color3Included) {
-            const rgb = ColorUtil.hexToRGB(color1);
-            const r = Math.max(0, rgb.r - 51);
-            const g = Math.max(0, rgb.g - 51);
-            const b = Math.max(0, rgb.b - 51);
-            color3 = ColorUtil.rgbToHex(r, g, b);
-        }
-        return colorExample
-            .replaceAll(tokens[0], color1)
-            .replaceAll(tokens[1], color2)
-            .replaceAll(tokens[2], color3);
-    }
-    function getExampleURL(...args) {
-        const data = getExampleData(...args);
-        return "data:image/svg+xml," + encodeURIComponent(data);
-    }
-</script>
-
-<div class="bg">
-    <div class="modal">
-        <div class="modal-title">
-            <p>Colors</p>
-        </div>
-        <div class="modal-content">
-            <div
-                style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%"
-            >
-                <p>Choose the colors used in your extension's blocks & menu.</p>
-                <div
-                    style="display:flex;flex-direction:row;align-items:center;"
-                >
-                    <label>
-                        Primary
-                        <input type="color" bind:value={color1} />
-                    </label>
-                    <div style="margin-left:6px" />
-                    <label>
-                        Secondary
-                        <input type="color" bind:value={color2} />
-                    </label>
-                    <div style="margin-left:6px" />
-                    <label>
-                        Teritary
-                        <input type="color" bind:value={color3} />
-                    </label>
-                </div>
-                <div
-                    style="display:flex;flex-direction:row;align-items:center;"
-                >
-                    <label>
-                        Include Teritary Color
-                        <input type="checkbox" bind:checked={color3Included} />
-                    </label>
-                </div>
-                <div
-                    style="display:flex;flex-direction:row;align-items:center;"
-                >
-                    <label>
-                        TurboBuilder Indicator (PenguinMod Experimental Feature)
-                        <input type="checkbox" bind:checked={tbShow} />
-                    </label>
-                </div>
-                <div
-                    style="display:flex;flex-direction:row;align-items:center;"
-                >
-                    <div class="extensionMenuPreview">
-                        <div style="text-align: center;">
-                            <div
-                                class="extensionBubbleIcon"
-                                style={`background: ${color1}; border-color: ${color2}`}
-                            >
-                                {#if tbShow}
-                                    <img
-                                        class="tbBubbleIcon"
-                                        src="favicon.png"
-                                        alt="TurboBuilder"
-                                    />
-                                {/if}
-                            </div>
-                            <div class="extensionBubbleName">Extension</div>
-                        </div>
-                    </div>
-
-                    <img
-                        alt="Color preview"
-                        src={getExampleURL(
-                            color1,
-                            color2,
-                            color3,
-                            color3Included
-                        )}
-                    />
-                </div>
-            </div>
-        </div>
-        <div class="modal-buttons">
-            <button class="button-cancel" on:click={cancel}>Cancel</button>
-            <div style="margin-left:6px" />
-            <button class="button-accept" on:click={event}>OK</button>
-            <div style="margin-left:24px" />
-        </div>
-    </div>
-</div>
-
-<style>
-    .button-cancel {
-        border: 1px solid rgba(0, 0, 0, 0.15);
-        background: white;
-        color: black;
-        font-weight: bold;
-        padding: 0.75rem 1rem;
-        border-radius: 0.25rem;
-        font-size: 0.85rem;
-        cursor: pointer;
-    }
-    .button-accept {
-        border: 1px solid #ff4b4b;
-        background: #ff4b4b;
-        color: white;
-        font-weight: bold;
-        padding: 0.75rem 1rem;
-        border-radius: 0.25rem;
-        font-size: 0.85rem;
-        cursor: pointer;
-    }
-
-    label {
-        font-weight: bold;
-        font-size: 0.625rem;
-        user-select: none;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-    }
-    input[type="color"] {
-        margin-left: 3px;
-    }
-    img {
-        cursor: not-allowed;
-    }
-
-    /* color picker */
-    input[type="color"] {
-        -webkit-appearance: none;
-        -moz-appearance: none;
-        appearance: none;
-        width: 40px;
-        height: 40px;
-        background-color: transparent;
-        border: none;
-        cursor: pointer;
-    }
-    input[type="color"]::-webkit-color-swatch {
-        border-radius: 4px;
-        border: 1px solid rgba(0, 0, 0, 0.25);
-    }
-    input[type="color"]::-moz-color-swatch {
-        border-radius: 4px;
-        border: 1px solid rgba(0, 0, 0, 0.25);
-    }
-
-    :global(body.dark) input[type="color"]::-webkit-color-swatch {
-        border-color: rgba(255, 255, 255, 0.5);
-    }
-    :global(body.dark) input[type="color"]::-moz-color-swatch {
-        border-color: rgba(255, 255, 255, 0.5);
-    }
-
-    .bg {
-        position: fixed;
-        left: 0px;
-        top: 0px;
-        width: 100%;
-        height: 100%;
-        background: #ff4b4bb0;
-        z-index: 999999;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-    }
-    .modal {
-        width: 60%;
-        height: 50%;
-        outline: 4px solid hsla(0, 100%, 100%, 0.25);
-        border-radius: 0.5rem;
-        background: white;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        overflow: hidden;
-    }
-    :global(body.dark) .bg {
-        background-color: #333333b0;
-    }
-    :global(body.dark) .modal {
-        background-color: #111;
-    }
-
-    .modal-title {
-        width: 100%;
-        height: 10%;
-        background: #ff4b4b;
-        color: white;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-    }
-    :global(body.dark) .modal-title {
-        background-color: #333;
-    }
-    .modal-content {
-        width: 100%;
-        height: 75%;
-        overflow: auto;
-    }
-    .modal-buttons {
-        width: 100%;
-        height: 15%;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: right;
-    }
-
-    .extensionMenuPreview {
-        width: 60px;
-        position: relative;
-        cursor: pointer;
-        color: #575e75;
-        user-select: none;
-    }
-    .extensionMenuPreview:hover {
-        color: #4c97ff !important;
-    }
-    .extensionMenuPreview:focus,
-    .extensionMenuPreview:active {
-        background-color: #e9eef2;
-    }
-
-    .tbBubbleIcon {
-        width: 16px;
-        height: 16px;
-        background: #0006;
-        backdrop-filter: blur(2px);
-        border-radius: 8px;
-        position: absolute;
-        top: -3px;
-        right: -3px;
-    }
-
-    :global(body.dark) .extensionMenuPreview {
-        color: #ccc;
-    }
-    :global(body.dark) .extensionMenuPreview:focus,
-    :global(body.dark) .extensionMenuPreview:active {
-        background-color: #1e1e1e;
-    }
-    .extensionBubbleIcon {
-        width: 20px;
-        height: 20px;
-        background-size: 100%;
-        border-radius: 100%;
-        margin: 0 auto 0.125rem;
-        border: 1px rgba(0, 0, 0, 0.2) solid;
-        position: relative;
-    }
-    .extensionBubbleName {
-        font-size: 0.65rem;
-    }
-</style>
diff --git a/src/lib/MenuModals/LoadExtension.svelte b/src/lib/MenuModals/LoadExtension.svelte
new file mode 100644
index 0000000..bdaa301
--- /dev/null
+++ b/src/lib/MenuModals/LoadExtension.svelte
@@ -0,0 +1,253 @@
+<script>
+    import { createEventDispatcher } from "svelte";
+    import fileDialog from "../../resources/fileDialog";
+
+    let URL = "";
+    let Text = "";
+    let File = "";
+    let selected = "URL";
+    let btnText = "No file selected.";
+
+    const dispatch = createEventDispatcher();
+
+    function event() {
+        dispatch("completed", {
+            selected,
+            URL,
+            Text,
+            File,
+        });
+    }
+    function cancel() {
+        dispatch("cancel");
+    }
+    function file() {
+        fileDialog({ accept: ".js" }).then((files) => {
+            if (!files) return;
+            File = files[0];
+            btnText = "Selected: " + File.name;
+        })
+    }
+</script>
+
+<div class="bg">
+    <div class="modal">
+        <div class="modal-title">
+            <p>Load Custom Extension</p>
+        </div>
+        <div class="modal-content">
+            <div class="tabs">
+                <div class="tab {(selected == "URL" ? "selected" : "")}" on:click={() => {selected = "URL"}}>URL</div>
+                <div class="tab {(selected == "Files" ? "selected" : "")}" on:click={() => {selected = "Files"}}>Files</div>
+                <div class="tab {(selected == "Text" ? "selected" : "")}" on:click={() => {selected = "Text"}}>Text</div>
+            </div>
+            {#if selected == "URL"}
+                <p>Enter the extension's URL:</p>
+                <input
+                    class="extension-import-input"
+                    type="text"
+                    placeholder="https://eaglerforge-builder.vercel.app/extensions/..."
+                    style=""
+                    bind:value={URL}
+                />
+            {:else if selected == "Files"}
+                <p>Select or drop an extension's JavaScript file:</p>
+                <button class="file-selector-button" on:click={file}>{btnText}</button>
+            {:else if selected == "Text"}
+                <p>Paste the extension's JavaScript source code:</p>
+                <textarea
+                    class="extension-import-input"
+                    type="text"
+                    placeholder="{`class Extension {
+    // ...
+}
+EaglerBuilder.extensions.register(new Extension());`}"
+                    style="resize: vertical;height:100px;"
+                    bind:value={Text}
+                />
+            {/if}
+        </div>
+        <div class="modal-buttons">
+            <button class="button-cancel" on:click={cancel}>Cancel</button>
+            <div style="margin-left:6px" />
+            <button class="button-accept" on:click={event}>Load</button>
+            <div style="margin-left:24px" />
+        </div>
+    </div>
+</div>
+
+<style>
+    .button-cancel {
+        border: 1px solid rgba(0, 0, 0, 0.15);
+        background: white;
+        color: black;
+        font-weight: bold;
+        padding: 0.75rem 1rem;
+        border-radius: 0.25rem;
+        font-size: 0.85rem;
+        cursor: pointer;
+    }
+    .button-accept {
+        border: 1px solid rgb(86, 114, 205);
+        background: rgb(86, 114, 205);
+        color: white;
+        font-weight: bold;
+        padding: 0.75rem 1rem;
+        border-radius: 0.25rem;
+        font-size: 0.85rem;
+        cursor: pointer;
+    }
+
+    input[type="text"] {
+        margin-left: 3px;
+    }
+
+    .file-selector-button {
+        padding: 0.35rem 1.65rem;
+        font-size: 1rem;
+        width: 100%;
+        height: 50px;
+        color: black;
+        background: transparent;
+        cursor: pointer;
+        border: 3px dashed rgba(0, 0, 0, 0.15);
+        border-radius: 4px;
+    }
+    .file-selector-button:focus,
+    .file-selector-button:hover,
+    .file-selector-button:active {
+        background: white;
+    }
+
+    :global(body.dark) .file-selector-button {
+        color: white;
+        border-color: #2e2e2e;
+    }
+    :global(body.dark) .file-selector-button:focus,
+    :global(body.dark) .file-selector-button:hover,
+    :global(body.dark) .file-selector-button:active {
+        background: #111;
+    }
+
+    .tabs {
+        width: 100%;
+        height: 50px;
+        display: flex;
+        justify-content: center;
+    }
+
+    .tab {
+        height: 40px;
+        width: 100px;
+        border-bottom: 5px hsla(215, 50%, 90%, 1) solid;
+        font-size: 20px;
+        text-align: center;
+        margin-right: 10px;
+        margin-left: 10px;
+        cursor: pointer;
+        transition-duration: 0.25s;
+    }
+
+    :global(body.dark) .tab {
+        border-bottom: 5px #2e2e2e solid;
+    }
+
+    .tab.selected, :global(body.dark) .tab.selected {
+        border-bottom: 5px rgb(86, 114, 205) solid;
+    }
+
+    :global(body.dark) input[type="text"], :global(body.dark) textarea {
+        background: inherit;
+        border: 1px solid rgba(255, 255, 255, 0.7);
+        color: white;
+    }
+    :global(body.dark) input[type="text"]:hover, :global(body.dark) textarea:hover {
+        background: inherit;
+        border: 1px solid dodgerblue;
+    }
+    .extension-import-input {
+        font-size: 20px;
+        border-radius: 6px;
+        outline: 1px dashed rgba(0, 0, 0, 0.15);
+        border: 0;
+        font-size: 1rem;
+        padding: 0.5rem;
+        transition: 0.25s;
+        margin-left:4px;
+        margin-right:4px;
+        margin-bottom:4px;
+        width:calc(100% - 25px);
+    }
+    .extension-import-input:hover {
+        transition: 0.25s;
+    }
+    .extension-import-input:active,
+    .extension-import-input:focus {
+        box-shadow: 0 0 0 calc(0.5rem * 0.5) hsla(0, 100%, 100%, 0.25);
+        transition: 0.25s;
+    }
+    .extension-import-input:active,
+    .extension-import-input:focus {
+        box-shadow: 0 0 0 calc(0.5rem * 0.5) hsla(0, 100%, 100%, 0.25);
+        transition: 0.25s;
+    }
+
+    .bg {
+        position: fixed;
+        left: 0px;
+        top: 0px;
+        width: 100%;
+        height: 100%;
+        background: rgba(86, 114, 205, 0.69019607843);
+        z-index: 999999;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    }
+    .modal {
+        width: 60%;
+        height: 50%;
+        outline: 4px solid hsla(0, 100%, 100%, 0.25);
+        border-radius: 0.5rem;
+        background: white;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        overflow: hidden;
+    }
+    :global(body.dark) .bg {
+        background-color: #333333b0;
+    }
+    :global(body.dark) .modal {
+        background-color: #111;
+    }
+
+    .modal-title {
+        width: 100%;
+        height: 10%;
+        background: rgb(86, 114, 205);
+        color: white;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    }
+    :global(body.dark) .modal-title {
+        background-color: #333;
+    }
+    .modal-content {
+        width: calc(100% - 50px);
+        height: 75%;
+        overflow: auto;
+        padding: 25px;
+    }
+    .modal-buttons {
+        width: 100%;
+        height: 15%;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: right;
+    }
+</style>
diff --git a/src/lib/MenuModals/color.js b/src/lib/MenuModals/color.js
deleted file mode 100644
index 9ab69d6..0000000
--- a/src/lib/MenuModals/color.js
+++ /dev/null
@@ -1,120 +0,0 @@
-class Color {
-    static hexToRGB(h) {
-        let r = 0, g = 0, b = 0;
-
-        // 3 digits
-        if (h.length == 4) {
-            r = "0x" + h[1] + h[1];
-            g = "0x" + h[2] + h[2];
-            b = "0x" + h[3] + h[3];
-
-            // 6 digits
-        } else if (h.length == 7) {
-            r = "0x" + h[1] + h[2];
-            g = "0x" + h[3] + h[4];
-            b = "0x" + h[5] + h[6];
-        }
-
-        return { r: +r, g: +g, b: +b };
-    }
-    static rgbToHex(r, g, b) {
-        r = r.toString(16);
-        g = g.toString(16);
-        b = b.toString(16);
-
-        if (r.length == 1)
-            r = "0" + r;
-        if (g.length == 1)
-            g = "0" + g;
-        if (b.length == 1)
-            b = "0" + b;
-
-        return "#" + r + g + b;
-    }
-
-    static hexToHSL(H) {
-        // Convert hex to RGB first
-        let r = 0, g = 0, b = 0;
-        if (H.length == 4) {
-            r = "0x" + H[1] + H[1];
-            g = "0x" + H[2] + H[2];
-            b = "0x" + H[3] + H[3];
-        } else if (H.length == 7) {
-            r = "0x" + H[1] + H[2];
-            g = "0x" + H[3] + H[4];
-            b = "0x" + H[5] + H[6];
-        }
-        // Then to HSL
-        r /= 255;
-        g /= 255;
-        b /= 255;
-        let cmin = Math.min(r, g, b),
-            cmax = Math.max(r, g, b),
-            delta = cmax - cmin,
-            h = 0,
-            s = 0,
-            l = 0;
-
-        if (delta == 0)
-            h = 0;
-        else if (cmax == r)
-            h = ((g - b) / delta) % 6;
-        else if (cmax == g)
-            h = (b - r) / delta + 2;
-        else
-            h = (r - g) / delta + 4;
-
-        h = Math.round(h * 60);
-
-        if (h < 0)
-            h += 360;
-
-        l = (cmax + cmin) / 2;
-        s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
-        s = +(s * 100).toFixed(1);
-        l = +(l * 100).toFixed(1);
-
-        return { h, s, l };
-    }
-    static hslToHex(h, s, l) {
-        s /= 100;
-        l /= 100;
-
-        let c = (1 - Math.abs(2 * l - 1)) * s,
-            x = c * (1 - Math.abs((h / 60) % 2 - 1)),
-            m = l - c / 2,
-            r = 0,
-            g = 0,
-            b = 0;
-
-        if (0 <= h && h < 60) {
-            r = c; g = x; b = 0;
-        } else if (60 <= h && h < 120) {
-            r = x; g = c; b = 0;
-        } else if (120 <= h && h < 180) {
-            r = 0; g = c; b = x;
-        } else if (180 <= h && h < 240) {
-            r = 0; g = x; b = c;
-        } else if (240 <= h && h < 300) {
-            r = x; g = 0; b = c;
-        } else if (300 <= h && h < 360) {
-            r = c; g = 0; b = x;
-        }
-        // Having obtained RGB, convert channels to hex
-        r = Math.round((r + m) * 255).toString(16);
-        g = Math.round((g + m) * 255).toString(16);
-        b = Math.round((b + m) * 255).toString(16);
-
-        // Prepend 0s, if necessary
-        if (r.length == 1)
-            r = "0" + r;
-        if (g.length == 1)
-            g = "0" + g;
-        if (b.length == 1)
-            b = "0" + b;
-
-        return "#" + r + g + b;
-    }
-}
-
-export default Color;
\ No newline at end of file
diff --git a/src/lib/MenuModals/createblock.js b/src/lib/MenuModals/createblock.js
deleted file mode 100644
index d7e536c..0000000
--- a/src/lib/MenuModals/createblock.js
+++ /dev/null
@@ -1,8 +0,0 @@
-class ModalScript {
-    static onopened = () => { };
-    static open = () => {
-        ModalScript.onopened();
-    };
-}
-
-export default ModalScript;
\ No newline at end of file
diff --git a/src/lib/MenuModals/extensionColorExample.svg b/src/lib/MenuModals/extensionColorExample.svg
deleted file mode 100644
index 3be2afe..0000000
--- a/src/lib/MenuModals/extensionColorExample.svg
+++ /dev/null
@@ -1,72 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"
-    xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="610" height="47"
-    viewBox="60 63 600 47">
-    <style xmlns="http://www.w3.org/1999/xhtml">
-        .blocklyText {
-            fill: #fff;
-            font-family: "Helvetica Neue", Helvetica, sans-serif;
-            font-size: 12pt;
-            font-weight: 500;
-        }
-
-        .blocklyNonEditableText&gt;
-        text,
-        .blocklyEditableText&gt;
-
-        text {
-            fill: #575E75;
-        }
-
-        .blocklyDropdownText {
-            fill: #fff !important;
-        }
-    </style>
-    <g class="blocklyBlockCanvas" transform="translate(50.25925925925878,-245.1111111111107) ">
-        <g data-id="g](S2C.?x|-b4JmCKOwt" class="blocklyDraggable" data-shapes="reporter round"
-            data-category="Color Example" transform="translate(7.55555555555577,311.555555555557)">
-            <path class="blocklyPath blocklyBlockBackground" stroke="[{{COLOR3}}]" fill="[{{COLOR1}}]" fill-opacity="1"
-                d="m 0,0 m 20,0 H 583.2361068725586 a 20 20 0 0 1 0 40 H 20 a 20 20 0 0 1 0 -40 z" />
-            <g data-id="-M:/l`Z%A[/Px0zD=s3z" data-argument-type="text" data-shapes="argument round"
-                transform="translate(45.810184478759766,4)">
-                <path class="blocklyPath blocklyBlockBackground" stroke="[{{COLOR3}}]" fill="#FFFFFF" fill-opacity="1"
-                    d="m 0,0 m 16,0 H 31.810184478759766 a 16 16 0 0 1 0 32 H 16 a 16 16 0 0 1 0 -32 z" />
-                <g class="blocklyEditableText" transform="translate(8, 0) " style="cursor: text;"><text
-                        class="blocklyText" x="15.905092239379883" y="18" dominant-baseline="middle" dy="0"
-                        text-anchor="middle">abc</text></g>
-            </g>
-            <g data-id="Mx?Tr{J@YX*x;2raXMtA" data-argument-type="dropdown" data-shapes="argument round"
-                transform="translate(310.6574020385742,4)">
-                <path class="blocklyPath blocklyBlockBackground" stroke="[{{COLOR3}}]" fill="[{{COLOR2}}]" fill-opacity="1"
-                    d="m 0,0 m 16,0 H 69.58796310424805 a 16 16 0 0 1 0 32 H 16 a 16 16 0 0 1 0 -32 z" />
-                <g class="blocklyEditableText" transform="translate(8, 0) " style="cursor: default;"><text
-                        class="blocklyText blocklyDropdownText" x="24.793981552124023" y="18" dominant-baseline="middle"
-                        dy="0" text-anchor="middle">item 1</text>
-                    <image height="12px" width="12px" xmlns:xlink="http://www.w3.org/1999/xlink"
-                        xlink:href="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43MSIgaGVpZ2h0PSI4Ljc5IiB2aWV3Qm94PSIwIDAgMTIuNzEgOC43OSI+PHRpdGxlPmRyb3Bkb3duLWFycm93PC90aXRsZT48ZyBvcGFjaXR5PSIwLjEiPjxwYXRoIGQ9Ik0xMi43MSwyLjQ0QTIuNDEsMi40MSwwLDAsMSwxMiw0LjE2TDguMDgsOC4wOGEyLjQ1LDIuNDUsMCwwLDEtMy40NSwwTDAuNzIsNC4xNkEyLjQyLDIuNDIsMCwwLDEsMCwyLjQ0LDIuNDgsMi40OCwwLDAsMSwuNzEuNzFDMSwwLjQ3LDEuNDMsMCw2LjM2LDBTMTEuNzUsMC40NiwxMiwuNzFBMi40NCwyLjQ0LDAsMCwxLDEyLjcxLDIuNDRaIiBmaWxsPSIjMjMxZjIwIi8+PC9nPjxwYXRoIGQ9Ik02LjM2LDcuNzlhMS40MywxLjQzLDAsMCwxLTEtLjQyTDEuNDIsMy40NWExLjQ0LDEuNDQsMCwwLDEsMC0yYzAuNTYtLjU2LDkuMzEtMC41Niw5Ljg3LDBhMS40NCwxLjQ0LDAsMCwxLDAsMkw3LjM3LDcuMzdBMS40MywxLjQzLDAsMCwxLDYuMzYsNy43OVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4="
-                        transform="translate(53.58796310424805,11)" />
-                </g>
-            </g><text class="blocklyText" y="2" text-anchor="middle" dominant-baseline="middle" dy="0"
-                x="12.905092239379883" transform="translate(12, 20) ">text</text>
-            <path class="blocklyPath" style="visibility: hidden" d="" fill="[{{COLOR3}}]" /><text class="blocklyText" y="2"
-                text-anchor="middle" dominant-baseline="middle" dy="0" x="28.483795166015625"
-                transform="translate(101.62036895751953, 20) ">boolean</text>
-            <path class="blocklyPath" style="visibility: visible"
-                d="M 16,0  h 16 l 16,16 l -16,16 h -16 l -16,-16 l 16,-16 z" fill="[{{COLOR3}}]"
-                transform="translate(166.58795928955078,4)" data-argument-type="boolean" /><text class="blocklyText"
-                y="2" text-anchor="middle" dominant-baseline="middle" dy="0" x="40.03472137451172"
-                transform="translate(222.58795928955078, 20) ">open menu</text>
-            <path class="blocklyPath" style="visibility: hidden" d="" fill="[{{COLOR3}}]" /><text class="blocklyText" y="2"
-                text-anchor="middle" dominant-baseline="middle" dy="0" x="46.70138931274414"
-                transform="translate(404.24536514282227, 20) ">square menu</text>
-            <g data-argument-type="dropdown" class="blocklyEditableText" transform="translate(505.64814376831055, 4) "
-                style="cursor: default;">
-                <rect rx="4" ry="4" x="0" y="0" width="85.58796310424805" height="32" stroke="[{{COLOR3}}]" fill="[{{COLOR1}}]"
-                    class="blocklyBlockBackground" fill-opacity="1" /><text class="blocklyText blocklyDropdownText"
-                    x="32.79398155212402" y="18" dominant-baseline="middle" dy="0" text-anchor="middle">item 1</text>
-                <image height="12px" width="12px" xmlns:xlink="http://www.w3.org/1999/xlink"
-                    xlink:href="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43MSIgaGVpZ2h0PSI4Ljc5IiB2aWV3Qm94PSIwIDAgMTIuNzEgOC43OSI+PHRpdGxlPmRyb3Bkb3duLWFycm93PC90aXRsZT48ZyBvcGFjaXR5PSIwLjEiPjxwYXRoIGQ9Ik0xMi43MSwyLjQ0QTIuNDEsMi40MSwwLDAsMSwxMiw0LjE2TDguMDgsOC4wOGEyLjQ1LDIuNDUsMCwwLDEtMy40NSwwTDAuNzIsNC4xNkEyLjQyLDIuNDIsMCwwLDEsMCwyLjQ0LDIuNDgsMi40OCwwLDAsMSwuNzEuNzFDMSwwLjQ3LDEuNDMsMCw2LjM2LDBTMTEuNzUsMC40NiwxMiwuNzFBMi40NCwyLjQ0LDAsMCwxLDEyLjcxLDIuNDRaIiBmaWxsPSIjMjMxZjIwIi8+PC9nPjxwYXRoIGQ9Ik02LjM2LDcuNzlhMS40MywxLjQzLDAsMCwxLTEtLjQyTDEuNDIsMy40NWExLjQ0LDEuNDQsMCwwLDEsMC0yYzAuNTYtLjU2LDkuMzEtMC41Niw5Ljg3LDBhMS40NCwxLjQ0LDAsMCwxLDAsMkw3LjM3LDcuMzdBMS40MywxLjQzLDAsMCwxLDYuMzYsNy43OVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4="
-                    transform="translate(61.58796310424805,11)" />
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/src/lib/NavigationBar/NavigationBar.svelte b/src/lib/NavigationBar/NavigationBar.svelte
index c47b0be..a8d888a 100644
--- a/src/lib/NavigationBar/NavigationBar.svelte
+++ b/src/lib/NavigationBar/NavigationBar.svelte
@@ -1,6 +1,7 @@
 <script>
     // Components
     import Divider from "$lib/NavigationBar/Divider.svelte";
+    import Button from "$lib/NavigationBar/Button.svelte";
 
     const switchTheme = () => {
         const id = "tb:theme";
@@ -16,6 +17,10 @@
             currentData === "dark" ? "light" : "dark"
         );
     };
+
+    function link(link) {
+        window.location.href = link;
+    }
 </script>
 
 <div class="nav">
@@ -29,6 +34,9 @@
         <img src="/images/theme_switcher.svg" alt="Theme Switcher" />
     </button>
     <Divider />
+    <Button on:click={() => link("/")}>Editor</Button>
+    <Button on:click={() => link("/docs")}>Docs</Button>
+    <Divider />
     <slot />
 </div>
 
@@ -48,7 +56,8 @@
         flex-direction: row;
         align-items: center;
 
-        background: rgb(86, 114, 205)
+        background: rgb(86, 114, 205);
+        z-index: 99;
     }
     .logo-margin {
         margin: 0 6px;
diff --git a/src/lib/Toolbox/Toolbox.xml b/src/lib/Toolbox/Toolbox.xml
index c710fe2..c1f0826 100644
--- a/src/lib/Toolbox/Toolbox.xml
+++ b/src/lib/Toolbox/Toolbox.xml
@@ -53,10 +53,6 @@
         <block type="sound_startsound" />
     </category>
     <category name="Sensing" colour="#5CB1D6">
-        <!--
-        <block type="sensing_keypress" />
-        <sep gap="48"></sep>
-        -->
         <block type="sensing_alert" />
         <block type="sensing_prompt" />
         <block type="sensing_confirm" />
@@ -104,7 +100,6 @@
         <sep gap="48"></sep>
         <block type="operators_join" />
         <block type="operators_letter" />
-        <!--<block type="operators_addblock" />-->
     </category>
     <category name="Conversions" colour="#8BC059">
         <block type="conversions_tonumber" />
@@ -139,13 +134,6 @@
         <block type="json_objectvalues" />
     </category>
     <sep></sep>
-    <!--<category name="Blocks" colour="#FF6680">
-        <block type="blocks_create" />
-        <block type="blocks_input" />
-        <sep gap="48"></sep>
-        <block type="blocks_get" />
-        <block type="blocks_return" />
-    </category>-->
     <category name="Functions" colour="#5531D6">
         <block type="functions_create">
             <statement name="FUNC">
@@ -237,4 +225,5 @@
         <sep gap="48"></sep>
         <block type="interface_currentscreen"/>
     </category>
+    <sep></sep>
 </xml>
\ No newline at end of file
diff --git a/src/resources/blocks/sensing.js b/src/resources/blocks/sensing.js
index 54a8937..2cd67bc 100644
--- a/src/resources/blocks/sensing.js
+++ b/src/resources/blocks/sensing.js
@@ -208,10 +208,14 @@ const keyBoard = [
     ["F12", "123"],
 ];
 
+try {
 Blockly.Extensions.register('single_character_validation', function() {
     this.getField('KEY').setValidator(function(newValue) {
         return newValue.substring(Math.max(newValue.length - 1, 0),newValue.length);
     });
 });
+} catch {
+    console.log("Reload")
+}
 
 export default register;
diff --git a/src/resources/compiler/index.js b/src/resources/compiler/index.js
index c9916be..d5ebceb 100644
--- a/src/resources/compiler/index.js
+++ b/src/resources/compiler/index.js
@@ -8,12 +8,15 @@ class Compiler {
      * @param {object} imageStates 
      * @returns {string} Generated code.
      */
-    compile(workspace, extensionMetadata, imageStates) {
+    compile(workspace) {
         const code = javascriptGenerator.workspaceToCode(workspace);
         let start = '';
         if (code.indexOf('ModAPI.player') > -1) {
             start+= "ModAPI.require('player');";
         }
+        if (code.indexOf('ModAPI.settings') > -1) {
+            start+= "ModAPI.require('settings');";
+        }
         if (code.indexOf('sendData(') > -1) {
             start+= `function sendData(message,url) {
     var request = new XMLHttpRequest();
@@ -55,39 +58,6 @@ class Compiler {
             end+= 'onload();';
         }
         const footerCode = end;
-
-        if (imageStates) {
-            if (imageStates.icon.image) {
-                // add icon uri
-                const url = imageStates.icon.image;
-                classRegistry.extensionInfo.blockIconURI = url;
-            }
-            if (imageStates.menuicon.image) {
-                // add icon uri
-                const url = imageStates.menuicon.image;
-                classRegistry.extensionInfo.menuIconURI = url;
-            }
-        }
-        if (extensionMetadata) {
-            classRegistry.extensionInfo.id = extensionMetadata.id;
-            classRegistry.extensionInfo.name = extensionMetadata.name;
-            if (extensionMetadata.docsURL) {
-                classRegistry.extensionInfo.docsURI = extensionMetadata.docsURL;
-            }
-            if (extensionMetadata.color1) {
-                classRegistry.extensionInfo.color1 = extensionMetadata.color1;
-            }
-            if (extensionMetadata.color2) {
-                classRegistry.extensionInfo.color2 = extensionMetadata.color2;
-            }
-            if (extensionMetadata.color3) {
-                classRegistry.extensionInfo.color3 = extensionMetadata.color3;
-            }
-            if (extensionMetadata.tbShow) {
-                classRegistry.extensionInfo.tbShow = extensionMetadata.tbShow;
-            }
-        }
-
         return [].concat(headerCode, classRegistry.top, [], classRegistry.bottom, code, footerCode).join('\n');
     }
 }
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 4157404..4a0c3c0 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -12,17 +12,35 @@
     import OpenButton from "$lib/ControlBar/OpenButton.svelte";
     import FullscreenButton from "$lib/ControlBar/FullscreenButton.svelte";
     import EaglerCraft from "$lib/EaglerCraft/EaglerCraft.svelte";
-    import Documentation from "$lib/Documentation/Documentation.svelte";
 
     // Modals
-    import ExtensionColorsModal from "$lib/MenuModals/ExtensionColors.svelte";
-    import CreateBlockModal from "$lib/MenuModals/CreateBlock.svelte";
+    import LoadExtensionModal from "$lib/MenuModals/LoadExtension.svelte";
+
+    // Extension Stuff
+    import javascriptGenerator from '../resources/javascriptGenerator';
+    import registerBlock from '../resources/register';
+
+    let EaglerBuilder = {
+        extensions: {},
+        BlockType: {
+            "COMMAND": "command",
+            "REPORTER": "reporter",
+            "BOOLEAN": "boolean",
+            "EVENT": "event",
+        },
+        ArgumentType: {
+            "STRING": "string",
+            "NUMBER": "number",
+            "BOOLEAN": "boolean",
+            "MENU": "menu",
+        }
+    };
+    let Extensions = [];
 
-    // Modal Scripts
-    import CreateBlockModalScript from "$lib/MenuModals/createblock.js";
 
     // Toolbox
     import Toolbox from "$lib/Toolbox/Toolbox.xml?raw";
+    let EToolbox = Toolbox;
 
     import JSZip from "jszip";
     import beautify from "js-beautify";
@@ -67,7 +85,6 @@
     import registerConversions from "../resources/blocks/conversions.js";
     import registerVariables from "../resources/blocks/variables.js";
     import registerJSON from "../resources/blocks/json.js";
-    import registerBlocks from "../resources/blocks/blocks.js";
     import registerFunctions from "../resources/blocks/functions.js";
     import registerDebug from "../resources/blocks/debug.js";
     import registerPlayer from "../resources/blocks/player.js";
@@ -88,7 +105,6 @@
     registerConversions();
     registerVariables();
     registerJSON();
-    registerBlocks();
     registerFunctions();
     registerDebug();
     registerPlayer();
@@ -131,7 +147,6 @@
             scaleSpeed: 1.1,
         },
         plugins: {
-            toolbox: ContinuousToolboxPlugin.ContinuousToolbox,
             flyoutsVerticalToolbox: ContinuousToolboxPlugin.ContinuousFlyout,
             metricsManager: ContinuousToolboxPlugin.ContinuousMetrics,
         },
@@ -194,7 +209,8 @@
         lastGeneratedCode = code;
     }
 
-    import pkg from '@blockly/workspace-minimap';
+    
+    import * as pkg from '@blockly/workspace-minimap';
     const { PositionedMinimap } = pkg;
     onMount(() => {
         console.log("ignore the warnings above we dont care about those");
@@ -211,14 +227,186 @@
 
         const minimap = new PositionedMinimap(workspace);
         minimap.init();
+
+        let loadedExtensions = [];
+
+        EaglerBuilder.extensions.register = (extensionClass) => {
+            let info = extensionClass.info();
+            if (loadedExtensions.includes(info.id)) {
+                alert("Extension has already been loaded.");
+                return;
+            } else {
+                loadedExtensions.push(info.id);
+            }
+
+            function FormatBlockText(text, args) {
+                const regex = /\[([^\]]+)\]/g;
+
+                const blocklyText = text.replace(regex, (_, argid) => {
+                    const arg = argid.trim();
+                    if (args.hasOwnProperty(arg)) {
+                        return `%${Object.keys(args).indexOf(arg) + 1}`;
+                    }
+                    return `[${arg}]`;
+                });
+
+                return blocklyText;
+            }
+
+            function FormatMenu(menu) {
+                let dropdownOptions = [];
+                for (const item of menu) {
+                    if (typeof item === 'object' && !Array.isArray(item)) {
+                        dropdownOptions.push([item.text.toString(),item.value.toString()])
+                    } else if (typeof item === "string") {
+                        dropdownOptions.push([item,item])
+                    }
+                }
+                return dropdownOptions;
+            }
+
+            function FormatArgument(id,arg) {
+                switch (arg.type) {
+                    case EaglerBuilder.ArgumentType.STRING:
+                        return [{
+                            "type": "input_value",
+                            "name": id,
+                            "check": "String"
+                        }, `<value name="${id.replace(new RegExp("\"",'g'),"\\\"")}"><block type="literals_string"><field name="STRING">${(arg.default ? arg.default : "")}</field></block></value>`];
+                    case EaglerBuilder.ArgumentType.NUMBER:
+                        return [{
+                            "type": "input_value",
+                            "name": id,
+                            "check": "Number"
+                        }, `<value name="${id.replace(new RegExp("\"",'g'),"\\\"")}"><block type="literals_number"><field name="NUMBER">${(arg.default ? arg.default : 0)}</field></block></value>`];
+                    
+                    case EaglerBuilder.ArgumentType.BOOLEAN:
+                        return [{
+                            "type": "input_value",
+                            "name": id,
+                            "check": "Boolean"
+                        }, ""];
+
+                    case EaglerBuilder.ArgumentType.MENU:
+                        return [{
+                            "type": "field_dropdown",
+                            "name": id,
+                            "options": FormatMenu(info.menus[arg.menu])
+                        }, ""];
+
+                    default:
+                        return [{
+                            "type": "input_dummy"
+                        }, ""];
+                }
+            }
+
+            function makeBlockJson(type,message0,args0) {
+                switch (type) {
+                    case EaglerBuilder.BlockType.COMMAND:
+                        return {
+                            message0,
+                            args0,
+                            previousStatement: null,
+                            nextStatement: null,
+                            inputsInline: true,
+                            colour: info.color ? info.color : "#00ff55"
+                        };
+                    
+                    case EaglerBuilder.BlockType.REPORTER:
+                        return {
+                            message0,
+                            args0,
+                            output: null,
+                            inputsInline: true,
+                            colour: info.color ? info.color : "#00ff55"
+                        };
+                    
+                    case EaglerBuilder.BlockType.BOOLEAN:
+                        return {
+                            message0,
+                            args0,
+                            output: "Boolean",
+                            inputsInline: true,
+                            colour: info.color ? info.color : "#00ff55"
+                        };
+
+                    case EaglerBuilder.BlockType.EVENT:
+                        if (args0.length == 0) {
+                            args0.push({
+                                "type": "input_dummy"
+                            })
+                        }
+                        args0.push({
+                            "type": "input_statement",
+                            "name": "EAGLERBUILDER_EVENT_INNERCODE",
+                        })
+                        message0 += ` ${args0.length - 1 == 1 ? `%${args0.length - 1}` : ""} %${args0.length}`
+                        return {
+                            message0,
+                            args0,
+                            inputsInline: true,
+                            colour: info.color ? info.color : "#00ff55"
+                        };
+
+                    default:
+                        return {};
+                }
+            }
+
+            let xmlblocks = "";
+
+            for (const block of info.blocks) {
+                let xmlinputs = "";
+                let message0 = FormatBlockText(block.text,block.arguments);
+                let args0 = [];
+                for (const argument in block.arguments) {
+                    let arg = FormatArgument(argument,block.arguments[argument],xmlinputs);
+                    args0.push(arg[0])
+                    xmlinputs += arg[1];
+                }
+
+                let blockjson = makeBlockJson(block.type,message0,args0);
+
+                registerBlock(`${info.id}_${block.id}`,blockjson,(blocklyBlock) => {
+                    let args = {};
+                    for (const argument in block.arguments) {
+                        if (block.arguments[argument].type === EaglerBuilder.ArgumentType.MENU) {
+                            args[argument] = blocklyBlock.getFieldValue(argument);
+                        } else if (block.arguments[argument].type === EaglerBuilder.ArgumentType.NUMBER || block.arguments[argument].type === EaglerBuilder.ArgumentType.BOOLEAN || block.arguments[argument].type === EaglerBuilder.ArgumentType.STRING) {
+                            args[argument] = javascriptGenerator.valueToCode(blocklyBlock, argument, javascriptGenerator.ORDER_ATOMIC);
+                        }
+                    }
+                    let code = "";
+                    if (block.type == EaglerBuilder.BlockType.EVENT) {
+                        code = block.func(args,javascriptGenerator.statementToCode(blocklyBlock, 'EAGLERBUILDER_EVENT_INNERCODE'));
+                    } else {
+                        code = block.func(args);
+                    }
+                    console.log
+                    if (block.type == EaglerBuilder.BlockType.COMMAND || block.type == EaglerBuilder.BlockType.EVENT) {
+                        return `${code}\n`;
+                    } else if (block.type == EaglerBuilder.BlockType.REPORTER || block.type == EaglerBuilder.BlockType.BOOLEAN) {
+                        return [`(${code})`, javascriptGenerator.ORDER_ATOMIC];
+                    }
+                })
+
+                xmlblocks += `  <block type="${info.id}_${block.id}">${xmlinputs}</block>\n`;
+            }
+            let extension = `<category name="${info.name ? info.name : info.id}" colour="${info.color ? info.color : "#00ff55"}">
+${xmlblocks}</category>`;
+            EToolbox = EToolbox.replace('</xml>', extension + '</xml>');
+            console.log(extension)
+            workspace.updateToolbox(EToolbox);
+        }
     });
 
     function downloadProject() {
         // generate file name
         let filteredProjectName = (projectName || projectID).replace(/[^a-z0-9\-]+/gim, "_");
-        let fileName = filteredProjectName + ".tb";
+        let fileName = filteredProjectName + ".eb";
         if (!filteredProjectName) {
-            fileName = "MyProject.tb";
+            fileName = "MyProject.eb";
         }
 
         // data
@@ -227,8 +415,7 @@
         // modify data by me wow
         projectData = {
             blockly: projectData,
-            metadata: extensionMetadata,
-            images: extensionImageStates
+            extensions: Extensions
         }
 
         // zip
@@ -249,11 +436,11 @@
         });
     }
     function loadProject() {
-        fileDialog({ accept: ".tb" }).then((files) => {
+        fileDialog({ accept: ".eb" }).then((files) => {
             if (!files) return;
             const file = files[0];
 
-            const projectNameIdx = file.name.lastIndexOf(".tb");
+            const projectNameIdx = file.name.lastIndexOf(".efb");
 
             JSZip.loadAsync(file.arrayBuffer()).then(async (zip) => {
                 console.log("loaded zip file...");
@@ -265,16 +452,9 @@
                     .async("string");
                 const projectJson = JSON.parse(projectJsonString);
 
-                // do your thing
-                projectName = projectJson.metadata.name
-                projectID = projectJson.metadata.id
-                for (var i in projectJson.metadata) {
-                    var v = projectJson.metadata[i]
-                    extensionMetadata[i] = v
-                }
-                for (var i in projectJson.images) {
-                    var v = projectJson.images[i]
-                    extensionImageStates[i] = v
+                // Load Extension stuff i guess
+                for (const extension of projectJson.extensions) {
+                    eval(extension);
                 }
 
                 // get project workspace xml stuffs
@@ -371,7 +551,8 @@
 
     // Modals
     const ModalState = {
-        extensionColors: false,
+        loadExtension: false,
+        extensionGallery: false,
     };
 
     function discordInvite() {
@@ -475,66 +656,130 @@
     }
 </script>
 
-<CreateBlockModal
-    color1={extensionMetadata.color1}
-    color2={extensionMetadata.color2}
-    color3={extensionMetadata.color3}
-/>
-{#if ModalState.extensionColors}
-    <ExtensionColorsModal
-        color1={extensionMetadata.color1}
-        color2={extensionMetadata.color2}
-        color3={extensionMetadata.color3}
-        tbShow={extensionMetadata.tbShow}
-        on:completed={(colors) => {
-            ModalState.extensionColors = false;
-            extensionMetadata.color1 = colors.detail.color1;
-            extensionMetadata.color2 = colors.detail.color2;
-            extensionMetadata.color3 = colors.detail.color3;
-            extensionMetadata.tbShow = colors.detail.tbShow;
-            updateGeneratedCode();
+{#if ModalState.loadExtension}
+    <LoadExtensionModal
+        on:completed={async (data) => {
+            ModalState.loadExtension = false;
+            if (data.detail.selected == "URL") {
+                Extensions.push(await (await fetch(data.detail.URL)).text());
+                eval(await (await fetch(data.detail.URL)).text());
+            } else if (data.detail.selected == "Files") {
+                const fileReader = new FileReader();
+                fileReader.onload = () => {
+                    Extensions.push(fileReader.result);
+                    eval(fileReader.result);
+                };
+                fileReader.readAsText(data.detail.File);
+            } else if (data.detail.selected == "Text") {
+                Extensions.push(data.detail.Text);
+                eval(data.detail.Text);
+            }
         }}
         on:cancel={() => {
-            ModalState.extensionColors = false;
-            updateGeneratedCode();
+            ModalState.loadExtension = false;
         }}
     />
 {/if}
+{#if ModalState.extensionGallery}
+<div class="full-modal">
+    <div class="nav">
+        <button class="back-button" on:click={() => {
+            ModalState.extensionGallery = false;
+        }}>
+            <span class="back-span">
+                <img
+                    class="arrow"
+                    draggable="false"
+                    src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQ4LjIgKDQ3MzI3KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5iYWNrLWljb248L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iYmFjay1pY29uIiBmaWxsPSIjRkZGRkZGIj4KICAgICAgICAgICAgPHBhdGggZD0iTTQuMTA4MDQ5MTIsOC41Nzc2NTA1NSBMOS4zMzIwMzYzOCwzLjM1MzY2MzI5IEM5LjYzODIwNDEzLDMuMDQ1NTgxOTkgMTAuMTE2NTkxMiwzLjA0NTU4MTk5IDEwLjQyMjc1OSwzLjM1MzY2MzI5IEwxNS42NDY3NDYyLDguNTc3NjUwNTUgQzE2LjE0NDI2ODgsOS4wNzUxNzMxNCAxNS43ODA2OTQ2LDkuODk2MDg1NDMgMTUuMDkxODE3Miw5Ljg5NjA4NTQzIEwxMi40ODkzOTEzLDkuODk2MDg1NDMgTDEwLjkzOTQxNzEsMTYuMDM4NTc1OSBDMTAuNzg2MzMzMiwxNi42MzM2ODk1IDEwLjE3Mzk5NzcsMTYuOTk1MzUwMiA5LjU4MDc5NzY4LDE2Ljg0MjI2NjMgQzkuMTU5ODE3MDIsMTYuNzQ4NTAyNCA4Ljg1MzY0OTI3LDE2LjQyMzE5OTIgOC43NTc5NzE4NCwxNi4wMzg1NzU5IEw3LjIwNzk5NzYsOS44OTYwODU0MyBMNC42NjI5NzgxNyw5Ljg5NjA4NTQzIEMzLjk3NDEwMDczLDkuODk2MDg1NDMgMy42MTA1MjY1Myw5LjA3NTE3MzE0IDQuMTA4MDQ5MTIsOC41Nzc2NTA1NSIgaWQ9IkZpbGwtMSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoOS44NzczOTgsIDEwLjAwMDAwMCkgcm90YXRlKC05MC4wMDAwMDApIHRyYW5zbGF0ZSgtOS44NzczOTgsIC0xMC4wMDAwMDApICI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+"
+                >
+                Back
+            </span>
+        </button>
+        <span class="full-modal-title">Choose an Extension</span>
+    </div>
+    <div class="main">
+        <div class="library">
+            <div class="extension" on:click={() => {
+                ModalState.extensionGallery = false;
+                ModalState.loadExtension = true;
+            }}>
+                <img class="extension-img" draggable="false" src="/images/extensions/custom_extension.svg">
+                <div class="extension-about">
+                    <span class="extension-title">
+                        Custom Extension
+                    </span>
+                    <br>
+                    <span class="extension-description">
+                        Load custom extensions from URLs, files, or JavaScript source code.
+                    </span>
+                </div>
+            </div>
+            <div class="extension" on:click={async () => {
+                Extensions.push(await (await fetch("/extensions/text-edit.js")).text());
+                eval(await (await fetch("/extensions/text-edit.js")).text());
+                ModalState.extensionGallery = false;
+            }}>
+                <img class="extension-img" draggable="false" src="/images/extensions/text_edit.png">
+                <div class="extension-about">
+                    <span class="extension-title">
+                        Text Edit
+                    </span>
+                    <br>
+                    <span class="extension-description">
+                        Transform Text into other text.
+                    </span>
+                </div>
+            </div>
+            <div class="extension" on:click={async () => {
+                Extensions.push(await (await fetch("/extensions/operators-expansion.js")).text());
+                eval(await (await fetch("/extensions/operators-expansion.js")).text());
+                ModalState.extensionGallery = false;
+            }}>
+                <img class="extension-img" draggable="false" src="/images/extensions/operators_expansion.png">
+                <div class="extension-about">
+                    <span class="extension-title">
+                        Operators Expansion
+                    </span>
+                    <br>
+                    <span class="extension-description">
+                        More operators like nand, xor, etc.
+                    </span>
+                </div>
+            </div>
+            <div class="extension" on:click={async () => {
+                Extensions.push(await (await fetch("/extensions/game-settings.js")).text());
+                eval(await (await fetch("/extensions/game-settings.js")).text());
+                ModalState.extensionGallery = false;
+            }}>
+                <img class="extension-img" draggable="false" src="/images/extensions/game_settings.svg">
+                <div class="extension-about">
+                    <span class="extension-title">
+                        Game Settings
+                    </span>
+                    <br>
+                    <span class="extension-description">
+                        Manage in-game Settings.
+                    </span>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{/if}
 <NavigationBar>
     <NavigationButton on:click={discordInvite}>Discord</NavigationButton>
     <NavigationButton on:click={github}>Github</NavigationButton>
     <NavigationDivider />
     <NavigationButton on:click={downloadProject}>Save</NavigationButton>
-    <NavigationButton on:click={loadProject}>Load</NavigationButton><!--
-    <NavigationDivider />
-    <input
-        class="project-name"
-        type="text"
-        placeholder="Extension ID (ex: extensionID)"
-        style="margin-left:4px;margin-right:4px"
-        data-invalid={isExtensionIDInvalid(projectID)}
-        bind:value={projectID}
-        on:change={updateGeneratedCode}
-    />
-    {#if isExtensionIDInvalid(projectID)}
-        <p style="color:white;margin-left:4px">
-            <b>Extension ID must be only letters and numbers.</b>
-        </p>
-    {/if}
-    <NavigationDivider />
-    <input
-        class="project-name"
-        type="text"
-        placeholder="Extension Name (ex: Extension)"
-        style="margin-left:4px;margin-right:4px"
-        bind:value={projectName}
-        on:change={updateGeneratedCode}
-    />-->
+    <NavigationButton on:click={loadProject}>Load</NavigationButton>
 </NavigationBar>
 <div class="main">
     <div class="row-menus">
         <div class="row-first-submenus">
             <div class="blockMenuButtons">
+                <StyledButton on:click={() => {
+                    ModalState.extensionGallery = true;
+                }}>Load Extension</StyledButton>
             </div>
             <div class="blocklyWrapper">
                 <BlocklyComponent {config} locale={en} bind:workspace />
@@ -557,7 +802,6 @@
                 <EaglerCraft>
                 </EaglerCraft>
             </div>
-            <Documentation/>
             <div class="row-subsubmenus">
                 <div class="codeActionsWrapper">
                     <p style="margin-right: 12px"><b>Mod Code</b></p>
@@ -642,6 +886,47 @@
         border: 1px solid dodgerblue;
     }
 
+    .full-modal {
+        background: white;
+        width: 100%;
+        height: 100vh;
+        position: fixed;
+        left: 0;
+        top: 0;
+        z-index: 100;
+    }
+
+    :global(body.dark) .full-modal {
+        background: #111;
+    }
+
+    .full-modal-title {
+        width: 100%;
+        text-align: center;
+        position: absolute;
+        left: 0;
+        color: white;
+        z-index: -1;
+    }
+
+    .arrow {
+        height: 1.5rem;
+    }
+
+    .back-span {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        font-size: 1rem;
+    }
+
+    .back-button {
+        background: transparent;
+        color: white;
+        border: none;
+        cursor: pointer;
+    }
+
     .main {
         position: absolute;
         left: 0px;
@@ -652,6 +937,88 @@
         min-width: 870px;
     }
 
+    .nav {
+        position: fixed;
+        left: 0px;
+        top: 0px;
+        width: 100%;
+        height: var(--nav-height);
+
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+
+        background: rgb(86, 114, 205);
+    }
+
+    :global(body.dark) .nav {
+        background: #333;
+    }
+
+    .library {
+        display: flex;
+        justify-content: flex-start;
+        align-content: flex-start;
+        align-items: flex-start;
+        flex-grow: 1;
+        flex-wrap: wrap;
+        overflow-y: auto;
+        padding: 0.5rem;
+    }
+
+    .extension {
+        display: flex;
+        flex-direction: column;
+        border-radius: 0.5rem;
+        width: 300px;
+        overflow: hidden;
+        border: 1px #bbbbbb solid;
+        cursor: pointer;
+        margin: 0.5rem;
+        height: auto;
+        overflow: hidden;
+        align-self: stretch;
+        flex-basis: 300px;
+    }
+
+    :global(body.dark) .extension {
+        border-color: #3b3b3b;
+    }
+
+    .extension:hover, :global(body.dark) .extension:hover {
+        border: 2px rgb(86, 114, 205) solid;
+    }
+
+    .extension-img {
+        width: 100%;
+        height: 11.5rem;
+        object-fit: cover;
+    }
+
+    .extension-about {
+        text-align: left;
+        padding: 10px;
+        padding-left: 1.25rem;
+        font-weight: bold;
+    }
+
+    .extension-title {
+        margin: 0.25rem 0;
+        text-align: center;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        min-width: 0;
+    }
+
+    .extension-description {
+        display: block;
+        font-weight: normal;
+        line-height: 1.375rem;
+        padding-top: .3125rem;
+        padding-bottom: .25rem;
+    }
+
     .project-name {
         width: 236px;
 
@@ -858,10 +1225,4 @@
     :global(.blocklyScrollbarBackground:hover + .blocklyScrollbarHandle, .blocklyScrollbarHandle:hover) {
         fill: #575E75; /* fix strange scrollbar issue */
     }
-
-    :global(.blocklyToolboxDiv) {
-        overflow-x: hidden;
-        scrollbar-color: #797e8e80 transparent;
-        scrollbar-width: thin;
-    }
 </style>
diff --git a/src/routes/docs/+layout.svelte b/src/routes/docs/+layout.svelte
new file mode 100644
index 0000000..f3ce9db
--- /dev/null
+++ b/src/routes/docs/+layout.svelte
@@ -0,0 +1,175 @@
+<script>
+    // Components
+    import NavigationBar from "$lib/NavigationBar/NavigationBar.svelte";
+
+    // Variables
+    let ceOpen = false;
+</script>
+
+<NavigationBar>
+</NavigationBar>
+<div class="main">
+    <div class="sidebar">
+        <h3 class="title">EaglerBuilder Docs</h3>
+        <a class="link" href="/docs/">Intro</a>
+        <p class="link ce" style={ceOpen ? "--rot: 180deg" : "--rot: 90deg"} on:click={() => {ceOpen = !ceOpen}}>Custom Extensions</p>
+        <div class="innerlinks" style={!ceOpen ? "height: 0px;" : "height: 100%;"}>
+            <a class="link" href="/docs/extensions/">Overview</a>
+            <a class="link" href="/docs/extensions/hello-world">Hello, world!</a>
+            <a class="link" href="/docs/extensions/inputs">Dealing with inputs</a>
+            <a class="link" href="/docs/extensions/events">Events</a>
+        </div>
+    </div>
+    <div class="content">
+        <slot />
+    </div>
+</div>
+
+<style>
+    :root {
+        --nav-height: 3rem;
+    }
+
+    .main {
+        position: absolute;
+        left: 0px;
+        top: var(--nav-height);
+        width: 100%;
+        height: calc(100% - var(--nav-height));
+
+        min-width: 870px;
+    }
+
+    .sidebar {
+        width: 200px;
+        position: fixed;
+        left: 0;
+        top: var(--nav-height);
+        padding-top: 0px;
+        padding-left: 10px;
+        height: 100%;
+        background-color: rgb(240, 240, 240);
+        border-right: solid 4px rgb(220, 220, 220);
+    }
+
+    :global(body.dark) .sidebar {
+        background-color: rgb(30, 30, 30);
+        border-right: solid 4px rgb(40, 40, 40);
+    }
+
+    .content {
+        margin-left: 240px;
+        margin-right: 12px;
+        padding-bottom: 5px;
+    }
+
+    .title {
+        width: calc(100% + 0px);
+        text-align: left;
+        position: relative;
+    }
+    
+    .link {
+        color: inherit;
+        display: block;
+        width: calc(100% - 20px);
+        border-radius: 5px;
+        padding: 5px;
+        margin: 0;
+        cursor: pointer;
+    }
+
+    .link:hover {
+        background: rgba(0,0,0,.05);
+        text-decoration: none;
+    }
+
+    :global(body.dark) .link:hover {
+        background: hsla(0,0%,100%,.05);
+    }
+
+    .ce::after {
+        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 24 24"><path fill="rgba(0,0,0,0.5)" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path></svg>') 50%/2rem 2rem;
+        margin-left: 5px;
+        min-width: 1.25rem;
+        content: "";
+        height: 1rem;
+        transform: rotate(var(--rot));
+        transition: transform 200ms linear;
+        width: 1.25rem;
+        filter: invert(100%) sepia(94%) saturate(17%) hue-rotate(223deg) brightness(104%) contrast(98%);
+        display: inline-block;
+        position: relative;
+        top: 2px;
+    }
+
+    .innerlinks {
+        position: relative;
+        left: 10px;
+        width: calc(100% - 10px);
+        will-change: height;
+        transition: height 326ms ease-in-out 0s;
+        display: block;
+        overflow: hidden;
+    }
+
+    :global(code) {
+        background-color: hsla(0,0%,100%,.1);
+        border: .1rem solid rgba(0,0,0,.1);
+        border-radius: 0.4rem;
+        font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
+        font-size: 90%;
+        padding: 0.1rem;
+    }
+
+    /* Style the table */
+:global(table) {
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: 20px;
+}
+
+/* Style table header */
+:global(th) {
+  background-color: #f2f2f2;
+  border: 1px solid #ddd;
+  padding: 18px;
+}
+
+/* Style table cells */
+:global(td) {
+  border: 1px solid #ddd;
+  padding: 18px;
+}
+
+/* Style even rows */
+:global(tr:nth-child(even)) {
+  background-color: #f2f2f2;
+}
+/* Style the table for dark mode */
+:global(body.dark) :global(table) {
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: 20px;
+}
+
+/* Style table header for dark mode */
+:global(body.dark) :global(th) {
+  background-color: #333; /* Dark background color */
+  color: #fff; /* Light text color */
+  border: 1px solid #555; /* Dark border color */
+  padding: 18px;
+}
+
+/* Style table cells for dark mode */
+:global(body.dark) :global(td) {
+  border: 1px solid #555; /* Dark border color */
+  padding: 18px;
+}
+
+/* Style even rows for dark mode */
+:global(body.dark) :global(tr:nth-child(even)) {
+  background-color: #444; /* Dark background color */
+}
+
+</style>
diff --git a/src/routes/docs/+page.svelte b/src/routes/docs/+page.svelte
new file mode 100644
index 0000000..24ce459
--- /dev/null
+++ b/src/routes/docs/+page.svelte
@@ -0,0 +1,2 @@
+<h1>EaglerBuilder Documentation</h1>
+<p><a href="/" target=_blank>EaglerBuilder</a> is a website made by <a href="https://discord.com/users/864214504941158441" target=_blank>@oeildelynx31</a> to create <a href="https://eaglerforge.github.io/" target=_blank>EaglerForge</a> Mods using Scratch-Like block coding. This is the place where its documentation is.</p>
\ No newline at end of file
diff --git a/src/routes/docs/extensions/+page.svelte b/src/routes/docs/extensions/+page.svelte
new file mode 100644
index 0000000..66a8dde
--- /dev/null
+++ b/src/routes/docs/extensions/+page.svelte
@@ -0,0 +1,11 @@
+<h1>Custom Extensions</h1>
+<p>Custom extensions are a way for you to add new blocks to EaglerBuilder using JavaScript.</p>
+<p>In this tutorial, we will describe how to build custom extensions. The pages can be navigated using the sidebar or links at the bottom of each page. We assume that you read each page in full and do the exercises listed (if any) before going to the next page.</p>
+<h1>Prerequisites</h1>
+<p>Custom extension development requires knowledge of writing JavaScript. If you aren't familiar with JavaScript, please learn it first. Your favorite search engine can help you find places to learn. If you don't know things like the difference between <code>"1"</code> and <code>1</code>, developing extensions will be very difficult. As volunteers, we don't have a lot of time to spend helping you learn JavaScript -- sorry.</p>
+<p>We assume that you have access to the developer tools built in to your browser or the desktop app. Typically this is accessible through right click > inspect element. In the desktop app, it can be shown with Ctrl+Shift+I (Option+Command+I on macOS). Writing JavaScript without access to the developer tools is extremely painful and not something we can provide help for.</p>
+<h1>Tutorial structure</h1>
+<p>This tutorial is follows a fundamentals-up approach. We're going to start with the most basic extensions imaginable that are effectively useless and gradually build up to things that are more useful.</p>
+<p>We know that some of you will be eager to start sharing your extensions around, but <strong>we ask that you read through this whole tutorial before publishing your extensions</strong> so that the extensions you share are actually useful.</p>
+<h1>Next steps</h1>
+<p>Next, let's <a href="/docs/extensions/hello-world">make your first extension</a>.</p>
\ No newline at end of file
diff --git a/src/routes/docs/extensions/events/+page.svelte b/src/routes/docs/extensions/events/+page.svelte
new file mode 100644
index 0000000..52e3125
--- /dev/null
+++ b/src/routes/docs/extensions/events/+page.svelte
@@ -0,0 +1,25 @@
+<script>
+    import CodeBlock from "$lib/DocumentationComponents/codeBlock.svelte";
+</script>
+
+<h1>Events</h1>
+<p>Event blocks are for running scripts in response to something. An example of this is "when mod loaded do" - the event is when the mod loads. "every frame do" similarly starts in response to every frame. Event blocks can be used for anything that lets you run a callback or a piece of code (like if conditions).</p>
+<p>Event blocks are never actions they are conditions to callbacks. For example, consider this block you're familiar with:</p>
+<svg>
+    <g transform="translate(-87.61963478915662, -294.04216867469876) scale(0.8012048192771084)">
+        <g data-id="gLIO:p=UDJ2,h2Nf+})B" transform="translate(147, 387)">
+            <path stroke="#bf8f00" fill="#ffbf00" d=" m 0,22  h 0  c 25,-22  71,-22  96,0  h 74.34375 a 4 4 0 0,1 4,4  v 26  V 30  V 62  V 66 a 4 4 0 0,1 -4,4  H 64  c -2,0  -3,1  -4,2  l -4,4  c -1,1  -2,2  -4,2  h -12  c -2,0  -3,-1  -4,-2  l -4,-4  c -1,-1  -2,-2  -4,-2  h -8 a 4 4 0 0,0 -4,4  v 16 a 4 4 0 0,0 4,4  h 8  c 2,0  3,1  4,2  l 4,4  c 1,1  2,2  4,2  h 12  c 2,0  3,-1  4,-2  l 4,-4  c 1,-1  2,-2  4,-2  H 170.34375 a 4 4 0 0,1 4,4  V 102  V 122 a 4 4 0 0,1 -4,4  h -166.34375 a 4 4 0 0,1 -4,-4 z"></path>
+            <g transform="translate(8,36.5)">
+                <text dominant-baseline="central" x="0" y="9.5" style="fill: white;font: 700 12pt &quot;Source Code Pro&quot;, monospace;">when&nbsp;mod&nbsp;loaded&nbsp;do</text>
+            </g>
+        </g>
+    </g>
+</svg>
+<p>When this block is compiled to code and ran it doesnt do anything on its own. We can create our own event block with similar functionality using <code>EaglerBuilder.BlockType.EVENT</code>:</p>
+<CodeBlock file="/extensions/when-mod-loaded-do.js" />
+<p>The block is defined similar to every other block. Note that it has a second argument in it's function which is the inner blocks compiled to code.</p>
+<h1>Excercises</h1>
+<p>1. Create an event-based block that runs once every second, another one every 5th second, and another every 10th second.</p>
+<p>2. Combine each of those event blocks into one block with a menu.</p>
+<p>3. Create a command block and event block and make them be like a message block.</p>
+<p>4. Combine each of those event blocks into one block with a menu.</p>
\ No newline at end of file
diff --git a/src/routes/docs/extensions/hello-world/+page.svelte b/src/routes/docs/extensions/hello-world/+page.svelte
new file mode 100644
index 0000000..c3640f6
--- /dev/null
+++ b/src/routes/docs/extensions/hello-world/+page.svelte
@@ -0,0 +1,145 @@
+<script>
+    import CodeBlock from "$lib/DocumentationComponents/codeBlock.svelte";
+</script>
+
+<h1>Hello, world!</h1>
+<p>Let's start by creating a very simple extension. This extension just adds a block that reports "Hello, world!":</p>
+<CodeBlock file="/extensions/hello-world.js" />
+<p>Save the code into a file called "hello-world.js".</p>
+<p>Now, go to the EaglerBuilder editor, click on the load extension button, and choose the "Custom Extension" option. Go to the File tab and click "Select File". Now find you file and select it. Then click load.</p>
+<p>After a second, an extension named "It works!" should appear in the sidebar. If it doesn't appear, open up your developer tools and look for any warnings in the console. Some of the most common errors are:</p>
+<ul>
+    <li>Syntax error in the JavaScript. This should appear in your browser's developer tools.</li>
+    <li>Runtime error in the JavaScript. This should appear in your browser's developer tools</li>
+</ul>
+<p>Now, we will dissect what is going on in this file in the order it runs.</p>
+<h1>Constructing and registering</h1>
+<CodeBlock code={"class MyExtension {"} />
+<p>This is a standard <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes" target="_blank" rel="noopener noreferrer">JavaScript class</a>. It is conventional to define your extension in the form of a class. The name of the class doesn't matter, but we suggest making it somehow based on the extension's name. It doesn't have to be unique at this stage.</p>
+<CodeBlock code={"EaglerBuilder.extensions.register(new HelloWorld());"} />
+<p>This constructs your class into an object and introduces the special API that allows extensions to function: <code>EaglerBuilder</code>. There's not a lot on <code>EaglerBuilder</code>, but one of the most important functions is <code>EaglerBuilder.extensions.register</code>.</p>
+<p>Make sure to always call register() exactly once. If you don't call it, your extension will never get added. If you call it multiple times, an alert will pop up saying the extension has already been loaded.</p>
+<h1>info()</h1>
+<CodeBlock code={`info() {
+    return {
+        id: 'helloworld',
+        name: 'It works!',
+        blocks: [
+            {
+                id: 'hello',
+                type: EaglerBuilder.BlockType.REPORTER,
+                text: 'Hello!',
+                func: () => {
+                    return '"World!"';
+                }
+            }
+        ]
+    };
+}`} />
+<p>When you call register(), EaglerBuilder will then call the info() function on the provided object. This object must return an object with metadata about the extension. Some of the fields are <code>id</code>, <code>name</code>, and <code>blocks</code>. Here's a short summary of those:</p>
+<table>
+    <thead>
+        <tr>
+            <th style="text-align: center;"></th>
+            <th style="text-align: center;">Type</th>
+            <th style="text-align: center;">Description</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td style="text-align: center;">id</td>
+            <td style="text-align: center;">string</td>
+            <td style="text-align: center;">A unique ID used only by this extension. Multiple extensions cannot share the same ID.</td>
+        </tr>
+        <tr>
+            <td style="text-align: center;">name</td>
+            <td style="text-align: center;">string</td>
+            <td style="text-align: center;">The name of the extension that appears in the toolbox. If not provided, it will default to the extension id.</td>
+        </tr>
+        <tr>
+            <td style="text-align: center;">blocks</td>
+            <td style="text-align: center;">array</td>
+            <td style="text-align: center;">A list of objects that describe the blocks in the project.</td>
+        </tr>
+    </tbody>
+</table>
+<p>Here's a short summary of what each block should have:</p>
+<table>
+    <thead>
+        <tr>
+            <th style="text-align: center;"></th>
+            <th style="text-align: center;">Type</th>
+            <th style="text-align: center;">Description</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td style="text-align: center;">id</td>
+            <td style="text-align: center;">string</td>
+            <td style="text-align: center;">A unique ID used only by this block. Multiple blocks cannot share the same ID.</td>
+        </tr>
+        <tr>
+            <td style="text-align: center;">type</td>
+            <td style="text-align: center;">EaglerBuilder.BlockType.*</td>
+            <td style="text-align: center;">Determines the block's shape. Most commonly EaglerBuilder.BlockType.COMMAND, EaglerBuilder.BlockType.REPORTER, or EaglerBuilder.BlockType.BOOLEAN. See the table below for details.</td>
+        </tr>
+        <tr>
+            <td style="text-align: center;">text</td>
+            <td style="text-align: center;">string</td>
+            <td style="text-align: center;">The text that will appear in the editor for the block. There is a bit of special syntax here for dealing with arguments that will be discussed in the next segment.</td>
+        </tr>
+        <tr>
+            <td style="text-align: center;">arguments</td>
+            <td style="text-align: center;">object</td>
+            <td style="text-align: center;">Optional. Discussed in the next section.</td>
+        </tr>
+        <tr>
+            <td style="text-align: center;">func</td>
+            <td style="text-align: center;">function</td>
+            <td style="text-align: center;">The Function of the block which will return the corresponding code from the Block.</td>
+        </tr>
+    </tbody>
+</table>
+<p>These are the acceptable values for type:</p>
+<table>
+    <thead>
+        <tr>
+            <th style="text-align: center;"></th>
+            <th style="text-align: center;">Description</th>
+            <th style="text-align: center;">Example</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td style="text-align: center;">EaglerBuilder.BlockType.COMMAND</td>
+            <td style="text-align: center;">A block that doesn't report a value	</td>
+            <td style="text-align: center;">wait 1000 (ms)</td>
+        </tr>
+        <tr>
+            <td style="text-align: center;">EaglerBuilder.BlockType.REPORTER</td>
+            <td style="text-align: center;">A round block that usually reports a string or number</td>
+            <td style="text-align: center;">current FPS, 'string'</td>
+        </tr>
+        <tr>
+            <td style="text-align: center;">EaglerBuilder.BlockType.BOOLEAN</td>
+            <td style="text-align: center;">A block with pointy edges that reports a boolean (true or false)</td>
+            <td style="text-align: center;">is key SPACE pressed?</td>
+        </tr>
+        <tr>
+            <td style="text-align: center;">EaglerBuilder.BlockType.EVENT</td>
+            <td style="text-align: center;">A block which has Inner Blocks. Discussed later.</td>
+            <td style="text-align: center;">when mod loaded do</td>
+        </tr>
+    </tbody>
+</table>
+<h1>The blocks</h1>
+<CodeBlock code={`(args) => {
+    return '"Whatever, ' + args.name + '"';
+}`} />
+<p>This is a function that will return the code from a block. In this case, our function is very simple and just returns a "Whatever, " following the argument name from the block. Blocks are expected to return a string.</p>
+<h1>Excercises</h1>
+<p>1. Change the "Whatever," block to return your favorite number instead. Remember to rename the block accordingly.</p>
+<p>2. Change the block's id.</p>
+<p>3. Add another block. Make this block use a <code>type</code> of <code>EaglerBuilder.BlockType.BOOLEAN</code> and return code which when ran returns a boolean (true or false) at random.</p>
+<h1>Next steps</h1>
+<p>Next, let's <a href="/docs/extensions/inputs">allow our blocks to take in arguments</a>.</p>
\ No newline at end of file
diff --git a/src/routes/docs/extensions/inputs/+page.svelte b/src/routes/docs/extensions/inputs/+page.svelte
new file mode 100644
index 0000000..e4c90a7
--- /dev/null
+++ b/src/routes/docs/extensions/inputs/+page.svelte
@@ -0,0 +1,114 @@
+<script>
+    import CodeBlock from "$lib/DocumentationComponents/codeBlock.svelte";
+</script>
+
+<h1>Dealing with inputs</h1>
+<p>Often you will want your blocks to take something in as an "input", "argument", or "parameter". Let's learn how to do that with a new example:</p>
+<CodeBlock file="/extensions/nor.js"/>
+<p>Save this code to a file called "nor.js" beside "hello-world.js", and load it the same way you loaded the hello world extension. Most of the code is very similar to the hello world extension. Notice that the nor block in this extension will be false if any of the inputs are true but be true when none are true.</p>
+<p>Now let's talk about the arguments.</p>
+<p>To add arguments to a block, you give it an <code>arguments</code> property. It should be set to an object that contains other objects. Each property you put in <code>arguments</code> corresponds to a single argument. Each one has a name. The names can be all capitals or any format you desire.</p>
+<p>Here's a summary of the most common properties to set for an argument:</p>
+<table>
+    <thead>
+        <tr>
+            <th style="text-align: center;"></th>
+            <th style="text-align: center;">Type</th>
+            <th style="text-align: center;">Description</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td style="text-align: center;">type</td>
+            <td style="text-align: center;">EaglerBuilder.ArgumentType.*</td>
+            <td style="text-align: center;">Determines the shape of the input and what it accepts. See the table below for acceptable values.</td>
+        </tr>
+        <tr>
+            <td style="text-align: center;">default</td>
+            <td style="text-align: center;">string</td>
+            <td style="text-align: center;">Optional. The default value in the toolbox. Unique to inputs with type EaglerBuilder.ArgumentType.STRING and EaglerBuilder.ArgumentType.NUMBER.</td>
+        </tr>
+        <tr>
+            <td style="text-align: center;">menu</td>
+            <td style="text-align: center;">string</td>
+            <td style="text-align: center;">Unique to inputs with type EaglerBuilder.ArgumentType.MENU. Discussed later.</td>
+        </tr>
+    </tbody>
+</table>
+<p>These are the acceptable values for type:</p>
+<table>
+    <thead>
+        <tr>
+            <th style="text-align: center;"></th>
+            <th style="text-align: center;">Description</th>
+            <th style="text-align: center;">Example</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td style="text-align: center;">EaglerBuilder.ArgumentType.STRING</td>
+            <td style="text-align: center;">Any text</td>
+            <td style="text-align: center;">apple, 123, true</td>
+        </tr>
+        <tr>
+            <td style="text-align: center;">EaglerBuilder.ArgumentType.NUMBER</td>
+            <td style="text-align: center;">Any number</td>
+            <td style="text-align: center;">123</td>
+        </tr>
+        <tr>
+            <td style="text-align: center;">EaglerBuilder.ArgumentType.BOOLEAN</td>
+            <td style="text-align: center;">True or false</td>
+            <td style="text-align: center;">true</td>
+        </tr>
+        <tr>
+            <td style="text-align: center;">EaglerBuilder.ArgumentType.MENU</td>
+            <td style="text-align: center;">An input with a menu (dropdown)</td>
+            <td style="text-align: center;">ANY</td>
+        </tr>
+    </tbody>
+</table>
+<p>Next, EaglerBuilder needs to know where to put each of the arguments in the block. Are they at the start, end, or somewhere in the middle? It can't guess, so you have to tell it. To do this, you use the <code>text</code> property on the block by using <code>[ARGUMENT_NAME]</code> syntax to denote where each input goes. Each argument in the <code>arguments</code> object should appear in <code>text</code> exactly once. Arguments can be in any order, it doesn't matter.</p>
+<p>When EaglerBuilder runs your block functions and compiles your blocks, it will pass in an object for the first value. This object will contain a value for each argument name that the block has. Conventionally we call this <code>args</code> or use destructuring syntax. As an example, if the block has an argument named <code>X</code> and <code>Y</code>, these could be accessed in any of these ways:</p>
+<CodeBlock code={`// Using args.XYZ format...
+function(args) {
+    console.log(args.X, args.Y);
+}
+
+// Or using destructuring...
+function({X, Y}) {
+    console.log(X, Y);
+}`} />
+<p>Arguments are always provided as a string because they are another snippet of code.</p>
+<h1>Menus</h1>
+<p>Sometimes you might prefer your blocks to have a dropdown. These are called menus.</p>
+<CodeBlock file="/extensions/strings-1.js"/>
+<p>To make an argument into a menu, set its <code>type</code> to <code>EaglerBuilder.ArgumentType.MENU</code> and set its <code>menu</code> property to the name of the menu. This corresponds to a new property in the object returned by info(): <code>menus</code>.</p>
+<p><code>menus</code> is an array of strings / objects. Each item in <code>menus</code> is typically a string or object with these properties:</p>
+<table>
+    <thead>
+        <tr>
+            <th style="text-align: center;"></th>
+            <th style="text-align: center;">Type</th>
+            <th style="text-align: center;">Description</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td style="text-align: center;">text</td>
+            <td style="text-align: center;">string</td>
+            <td style="text-align: center;">The Text shown in the dropdown.</td>
+        </tr>
+        <tr>
+            <td style="text-align: center;">value</td>
+            <td style="text-align: center;">string</td>
+            <td style="text-align: center;">The Text returned from the argument.</td>
+        </tr>
+    </tbody>
+</table>
+<CodeBlock file="/extensions/strings-2.js"/>
+<p>Notice that, although the dropdown displays UPPERCASE in the editor, the block actually receives "up".</p>
+<h1>Excercises</h1>
+<p>1. Add a block that does the same thing as the built-in "join" block. It should take two arguments and produce a new string joining them together. Make sure your block casts the arguments to strings so when someone runs "join ((1 + 2)) ((3 + 4))" they get "(1 + 2)(3 + 4)" not 10.</p>
+<p>2. Create a boolean block that takes a number argument and a menu argument with the options "odd" and "even". The block should return whether the given number is either odd or even, as the menu says.</p>
+<h1>Next steps</h1>
+<p>Next, let's see <a href="/docs/extensions/events">how to make blocks like "every frame do" or "when mod loaded do"</a>.</p>
\ No newline at end of file
diff --git a/static/extensions/game-settings.js b/static/extensions/game-settings.js
new file mode 100644
index 0000000..1adfe39
--- /dev/null
+++ b/static/extensions/game-settings.js
@@ -0,0 +1,116 @@
+class GameSettings {
+    info() {
+      return {
+        id: 'gamesettings',
+        name: 'Game Settings',
+        color: '#999999',
+        blocks: [
+          {
+            id: 'setnumsetting',
+            type: EaglerBuilder.BlockType.COMMAND,
+            text: 'set [setting] (number) to [value]',
+            arguments: {
+              setting: {
+                type: EaglerBuilder.ArgumentType.MENU,
+                menu: "ALL_NUMBER_GAME_SETTINGS"
+              },
+              value: {
+                type: EaglerBuilder.ArgumentType.NUMBER,
+                default: 10
+              }
+            },
+            func: (args) => {
+                return `ModAPI.settings.${args.setting} = ${args.value}`;
+            }
+          },
+          {
+            id: 'setboolsetting',
+            type: EaglerBuilder.BlockType.COMMAND,
+            text: 'set [setting] (boolean) to [value]',
+            arguments: {
+              setting: {
+                type: EaglerBuilder.ArgumentType.MENU,
+                menu: "ALL_BOOLEAN_GAME_SETTINGS"
+              },
+              value: {
+                type: EaglerBuilder.ArgumentType.BOOLEAN
+              }
+            },
+            func: (args) => {
+                return `ModAPI.settings.${args.setting} = ${args.value}`;
+            }
+          },
+          {
+            id: 'getsetting',
+            type: EaglerBuilder.BlockType.REPORTER,
+            text: 'get [setting]',
+            arguments: {
+              setting: {
+                type: EaglerBuilder.ArgumentType.MENU,
+                menu: "ALL_TEXTUAL_GAME_SETTINGS"
+              }
+            },
+            func: (args) => {
+                return `ModAPI.settings.${args.setting}`;
+            }
+          },
+          {
+            id: 'settingisenabled',
+            type: EaglerBuilder.BlockType.BOOLEAN,
+            text: '[setting] is enabled?',
+            arguments: {
+              setting: {
+                type: EaglerBuilder.ArgumentType.MENU,
+                menu: "ALL_BOOLEAN_GAME_SETTINGS"
+              }
+            },
+            func: (args) => {
+                return `ModAPI.settings.${args.setting}`;
+            }
+          },
+        ],
+        menus: {
+          ALL_NUMBER_GAME_SETTINGS: [
+            {
+              text: "Render Distance",
+              value: "renderDistanceChunks"
+            },
+            {
+              text: "Mouse Sensitivity",
+              value: "mouseSensitivity"
+            },
+            {
+              text: "FOV",
+              value: "fovSetting"
+            },
+          ],
+          ALL_BOOLEAN_GAME_SETTINGS: [
+            {
+              text: "Inverted Mouse",
+              value: "invertMouse"
+            },
+            {
+              text: "Hidden Gui",
+              value: "hideGUI"
+            }
+          ],
+          ALL_TEXTUAL_GAME_SETTINGS: [
+            {
+              text: "Render Distance",
+              value: "renderDistanceChunks"
+            },
+            {
+              text: "Mouse Sensitivity",
+              value: "mouseSensitivity"
+            },
+            {
+              text: "FOV",
+              value: "fovSetting"
+            },
+          ]
+        }
+      };
+    }
+}
+  
+EaglerBuilder.extensions.register(new GameSettings());
\ No newline at end of file
diff --git a/static/extensions/hello-world.js b/static/extensions/hello-world.js
new file mode 100644
index 0000000..e17b128
--- /dev/null
+++ b/static/extensions/hello-world.js
@@ -0,0 +1,20 @@
+class HelloWorld {
+    info() {
+      return {
+        id: 'helloworld',
+        name: 'It works!',
+        blocks: [
+          {
+            id: 'hello',
+            type: EaglerBuilder.BlockType.REPORTER,
+            text: 'Hello!',
+            func: () => {
+                return '"World!"';
+            }
+          }
+        ]
+      };
+    }
+}
+  
+EaglerBuilder.extensions.register(new HelloWorld());
\ No newline at end of file
diff --git a/static/extensions/nor.js b/static/extensions/nor.js
new file mode 100644
index 0000000..67c5dd5
--- /dev/null
+++ b/static/extensions/nor.js
@@ -0,0 +1,28 @@
+class NorExample {
+    info() {
+      return {
+        id: 'norexample',
+        name: 'Nor',
+        blocks: [
+          {
+            id: 'nor',
+            type: EaglerBuilder.BlockType.BOOLEAN,
+            text: '[A] nor [B]',
+            arguments: {
+              A: {
+                type: EaglerBuilder.ArgumentType.BOOLEAN
+              },
+              B: {
+                type: EaglerBuilder.ArgumentType.BOOLEAN,
+              }
+            },
+            func: (args) => {
+                return `!(${args.A} || ${args.B})`;
+            }
+          }
+        ]
+      };
+    }
+}
+
+EaglerBuilder.extensions.register(new NorExample());
\ No newline at end of file
diff --git a/static/extensions/operators-expansion.js b/static/extensions/operators-expansion.js
new file mode 100644
index 0000000..dddec93
--- /dev/null
+++ b/static/extensions/operators-expansion.js
@@ -0,0 +1,112 @@
+class OperatorsExpansion {
+    info() {
+      return {
+        id: 'operatorsexpansion',
+        name: 'Operators Expansion',
+        color: "#59C059",
+        blocks: [
+          {
+            id: 'nand',
+            type: EaglerBuilder.BlockType.BOOLEAN,
+            text: '[A] nand [B]',
+            arguments: {
+              A: {
+                type: EaglerBuilder.ArgumentType.BOOLEAN
+              },
+              B: {
+                type: EaglerBuilder.ArgumentType.BOOLEAN,
+              }
+            },
+            func: (args) => {
+                return `!(${args.A} && ${args.B})`;
+            }
+          },
+          {
+            id: 'nor',
+            type: EaglerBuilder.BlockType.BOOLEAN,
+            text: '[A] nor [B]',
+            arguments: {
+              A: {
+                type: EaglerBuilder.ArgumentType.BOOLEAN
+              },
+              B: {
+                type: EaglerBuilder.ArgumentType.BOOLEAN,
+              }
+            },
+            func: (args) => {
+                return `!(${args.A} || ${args.B})`;
+            }
+          },
+          {
+            id: 'xor',
+            type: EaglerBuilder.BlockType.BOOLEAN,
+            text: '[A] xor [B]',
+            arguments: {
+              A: {
+                type: EaglerBuilder.ArgumentType.BOOLEAN
+              },
+              B: {
+                type: EaglerBuilder.ArgumentType.BOOLEAN,
+              }
+            },
+            func: (args) => {
+                return `(${args.A} || ${args.B}) && !(${args.A} && ${args.B})`;
+            }
+          },
+          {
+            id: 'lessthanorequalto',
+            type: EaglerBuilder.BlockType.BOOLEAN,
+            text: '[A] <= [B]',
+            arguments: {
+              A: {
+                type: EaglerBuilder.ArgumentType.BOOLEAN
+              },
+              B: {
+                type: EaglerBuilder.ArgumentType.BOOLEAN,
+              }
+            },
+            func: (args) => {
+                return `${args.A} <= ${args.B}`;
+            }
+          },
+          {
+            id: 'greaterthanorequalto',
+            type: EaglerBuilder.BlockType.BOOLEAN,
+            text: '[A] >= [B]',
+            arguments: {
+              A: {
+                type: EaglerBuilder.ArgumentType.BOOLEAN
+              },
+              B: {
+                type: EaglerBuilder.ArgumentType.BOOLEAN,
+              }
+            },
+            func: (args) => {
+                return `${args.A} >= ${args.B}`;
+            }
+          },
+          
+          {
+            id: 'contains',
+            type: EaglerBuilder.BlockType.BOOLEAN,
+            text: '[A] contains [B]?',
+            arguments: {
+              A: {
+                type: EaglerBuilder.ArgumentType.STRING,
+                default: "Apple"
+              },
+              B: {
+                type: EaglerBuilder.ArgumentType.STRING,
+                default: "Banana"
+              }
+            },
+            func: (args) => {
+                return `${args.A}.includes(${args.B})`;
+            }
+          }
+        ]
+      };
+    }
+}
+
+EaglerBuilder.extensions.register(new OperatorsExpansion());
\ No newline at end of file
diff --git a/static/extensions/sampleExtension.js b/static/extensions/sampleExtension.js
new file mode 100644
index 0000000..81419ca
--- /dev/null
+++ b/static/extensions/sampleExtension.js
@@ -0,0 +1,156 @@
+class SampleExtension {
+    info() {
+      return {
+        "name": "Sample Extension",
+        "id": "sample",
+        "blocks": [{
+            "type": EaglerBuilder.BlockType.COMMAND,
+            "id": "cool",
+            "text": "My Cool Block [cooly]",
+            "arguments": {
+                cooly: {
+                    "type": EaglerBuilder.ArgumentType.STRING,
+                    "default": "hi"
+                }
+            },
+            "func": (args) => {
+                return `console.log(${args.cooly})`;
+            }
+        },
+        {
+            "type": EaglerBuilder.BlockType.COMMAND,
+            "id": "waitif",
+            "text": "wait [time] seconds if [condition]",
+            "arguments": {
+                time: {
+                    "type": EaglerBuilder.ArgumentType.NUMBER
+                },
+                condition: {
+                    "type": EaglerBuilder.ArgumentType.BOOLEAN
+                }
+            },
+            "func": (args) => {
+                return `if (${args.condition}) {await new Promise(resolve => setTimeout(resolve, ${args.time * 1000}))}`;
+            }
+        },
+        {
+            "type": EaglerBuilder.BlockType.COMMAND,
+            "id": "test",
+            "text": "test menu [menu]",
+            "arguments": {
+                menu: {
+                    "type": EaglerBuilder.ArgumentType.MENU,
+                    "menu": "test",
+                }
+            },
+            "func": (args) => {
+                return `console.log("${args.menu}")`;
+            }
+        },
+        {
+            "type": EaglerBuilder.BlockType.BOOLEAN,
+            "id": "getpropertyboolean",
+            "text": "get player property [PROPERTIES]",
+            "arguments": {
+                PROPERTIES: {
+                    "type": EaglerBuilder.ArgumentType.MENU,
+                    "menu": "is",
+                }
+            },
+            "func": (args) => {
+                const PROPERTY = args.PROPERTIES;
+                let code;
+                if (PROPERTY === "isdead") {
+                    code = 'ModAPI.player.isDead';
+                } else if (PROPERTY === "isinvisible") {
+                   code = `ModAPI.player.isInvisible()`
+                } else if (PROPERTY === "isinweb") {
+                    code = `ModAPI.player.isInWeb`
+                } else if (PROPERTY === "issprinting") {
+                    code = `ModAPI.player.isSprinting()`
+                } else if (PROPERTY === "issneaking") {
+                    code = `ModAPI.player.isSneaking()`
+                } else if (PROPERTY === "issilent") {
+                    code = `ModAPI.player.isSilent()`
+                } else if (PROPERTY === "canedit") {
+                    code = `ModAPI.player.isAllowEdit()`
+                } else if (PROPERTY === "onground") {
+                    code = `ModAPI.player.onGround`
+                } else if (PROPERTY === "isdead") {
+                    code = `ModAPI.player.isDead`
+                } else if (PROPERTY === "ismoving") {
+                    code = `ModAPI.player.isMoving()`
+                }
+                return code;
+            }
+        },
+        {
+            "type": EaglerBuilder.BlockType.EVENT,
+            "id": "delayif",
+            "text": "delay [time] seconds if [condition]",
+            "arguments": {
+                time: {
+                    "type": EaglerBuilder.ArgumentType.NUMBER
+                },
+                condition: {
+                    "type": EaglerBuilder.ArgumentType.BOOLEAN
+                }
+            },
+            "func": (args,innercode) => {
+                return `if (${args.condition}) {
+                    setTimeout(() => {${innercode}}, ${args.time * 1000})
+                }`;
+            }
+        }],
+        "menus": {
+            "test": [
+                "test",
+                {
+                    "text": "different",
+                    "value": "menu"
+                }
+            ],
+            "is": [
+                {
+                    "text": "is dead",
+                    "value": "isdead"
+                },
+                {
+                    "text": "is invisible",
+                    "value": "isinvisible"
+                },
+                {
+                    "text": "is in web",
+                    "value": "isinweb"
+                },
+                {
+                    "text": "is sprinting",
+                    "value": "issprinting"
+                },
+                {
+                    "text": "is sneaking",
+                    "value": "issneaking"
+                },
+                {
+                    "text": "is silent",
+                    "value": "issilent"
+                },
+                {
+                    "text": "can edit",
+                    "value": "canedit"
+                },
+                {
+                    "text": "on ground",
+                    "value": "onground"
+                },
+                {
+                    "text": "is moving",
+                    "value": "ismoving"
+                },
+            ]
+        }
+      };
+    }
+}
+
+EaglerBuilder.extensions.register(new SampleExtension());
\ No newline at end of file
diff --git a/static/extensions/strings-1.js b/static/extensions/strings-1.js
new file mode 100644
index 0000000..d10f899
--- /dev/null
+++ b/static/extensions/strings-1.js
@@ -0,0 +1,37 @@
+class Strings1 {
+    info() {
+      return {
+        id: 'strings1example',
+        name: 'Encoding',
+        blocks: [
+          {
+            id: 'convert',
+            type: EaglerBuilder.BlockType.REPORTER,
+            text: 'convert [TEXT] to [FORMAT]',
+            arguments: {
+              TEXT: {
+                type: EaglerBuilder.ArgumentType.STRING,
+                default: 'Apple'
+              },
+              FORMAT: {
+                type: EaglerBuilder.ArgumentType.MENU,
+                menu: 'FORMAT_MENU'
+              }
+            },
+            func: (args) => {
+                if (args.FORMAT === 'uppercase') {
+                  return `${args.TEXT}.toUpperCase()`;
+                } else {
+                  return `${args.TEXT}.toLowerCase()`;
+                }
+            }
+          }
+        ],
+        menus: {
+          FORMAT_MENU: ['uppercase', 'lowercase']
+        }
+      };
+    }
+}
+
+EaglerBuilder.extensions.register(new Strings1());
\ No newline at end of file
diff --git a/static/extensions/strings-2.js b/static/extensions/strings-2.js
new file mode 100644
index 0000000..84eb6de
--- /dev/null
+++ b/static/extensions/strings-2.js
@@ -0,0 +1,46 @@
+class Strings2 {
+    info() {
+      return {
+        id: 'strings2example',
+        name: 'Encoding',
+        blocks: [
+          {
+            id: 'convert',
+            type: EaglerBuilder.BlockType.REPORTER,
+            text: 'convert [TEXT] to [FORMAT]',
+            arguments: {
+              TEXT: {
+                type: EaglerBuilder.ArgumentType.STRING,
+                default: 'Apple'
+              },
+              FORMAT: {
+                type: EaglerBuilder.ArgumentType.MENU,
+                menu: 'FORMAT_MENU'
+              }
+            },
+            func: (args) => {
+                if (args.FORMAT === 'up') {
+                  return `${args.TEXT}.toUpperCase()`;
+                } else {
+                  return `${args.TEXT}.toLowerCase()`;
+                }
+            }
+          }
+        ],
+        menus: {
+          FORMAT_MENU: [
+            {
+                text: 'uppercase',
+                value: 'up'
+            },
+            {
+                text: 'lowercase',
+                value: 'low'
+            }  
+          ]
+        }
+      };
+    }
+}
+
+EaglerBuilder.extensions.register(new Strings2());
\ No newline at end of file
diff --git a/static/extensions/text-edit.js b/static/extensions/text-edit.js
new file mode 100644
index 0000000..78b454c
--- /dev/null
+++ b/static/extensions/text-edit.js
@@ -0,0 +1,127 @@
+class TextEdit {
+    info() {
+      return {
+        id: 'textedit',
+        name: 'Text Edit',
+        color: "#00ff00",
+        blocks: [
+          {
+            id: 'replaceinwith',
+            type: EaglerBuilder.BlockType.REPORTER,
+            text: 'replace [string] in [text] with [replace]',
+            arguments: {
+                string: {
+                    type: EaglerBuilder.ArgumentType.STRING,
+                    default: "Hello"
+                },
+                text: {
+                    type: EaglerBuilder.ArgumentType.STRING,
+                    default: "Hello, world!"
+                },
+                replace: {
+                    type: EaglerBuilder.ArgumentType.STRING,
+                    default: "Goodbye"
+                }
+            },
+            func: (args) => {
+                return `${args.text}.replace(new RegExp(${args.string},'g'),${args.replace})`;
+            }
+          },
+          {
+            id: 'lettersfromtoof',
+            type: EaglerBuilder.BlockType.REPORTER,
+            text: 'letters from [start] to [end] of [text]',
+            arguments: {
+                start: {
+                    type: EaglerBuilder.ArgumentType.NUMBER,
+                    default: 1
+                },
+                end: {
+                    type: EaglerBuilder.ArgumentType.NUMBER,
+                    default: 3
+                },
+                text: {
+                    type: EaglerBuilder.ArgumentType.STRING,
+                    default: "Banana"
+                }
+            },
+            func: (args) => {
+                return `${args.text}.substring(${args.start}-1,${args.end})`;
+            }
+          },
+          {
+            id: 'removeletterof',
+            type: EaglerBuilder.BlockType.REPORTER,
+            text: 'remove letter [index] of [text]',
+            arguments: {
+                index: {
+                    type: EaglerBuilder.ArgumentType.NUMBER,
+                    default: 3
+                },
+                text: {
+                    type: EaglerBuilder.ArgumentType.STRING,
+                    default: "Pineapple"
+                }
+            },
+            func: (args) => {
+                return `${args.text}.slice(0, ${args.index} - 1) + ${args.text}.slice(${args.index})`;
+            }
+          },
+          {
+            id: 'removelettersfromtoof',
+            type: EaglerBuilder.BlockType.REPORTER,
+            text: 'remove letters from [start] to [end] of [text]',
+            arguments: {
+                start: {
+                    type: EaglerBuilder.ArgumentType.NUMBER,
+                    default: 1
+                },
+                end: {
+                    type: EaglerBuilder.ArgumentType.NUMBER,
+                    default: 3
+                },
+                text: {
+                    type: EaglerBuilder.ArgumentType.STRING,
+                    default: "Grape"
+                }
+            },
+            func: (args) => {
+                return `${args.text}.slice(0, ${args.start} - 1) + ${args.text}.slice(${args.end})`;
+            }
+          },
+          {
+            id: 'convert',
+            type: EaglerBuilder.BlockType.REPORTER,
+            text: 'convert [text] to [format]',
+            arguments: {
+                text: {
+                    type: EaglerBuilder.ArgumentType.STRING,
+                    default: "Apple"
+                },
+                format: {
+                  type: EaglerBuilder.ArgumentType.MENU,
+                  menu: 'FORMAT_MENU'
+                }
+            },
+            func: (args) => {
+                return `${args.text}.${args.format}()`;
+            }
+          }
+        ],
+        menus: {
+            FORMAT_MENU: [
+                {
+                    text: "uppercase",
+                    value: "toUpperCase"
+                },
+                {
+                    text: "lowercase",
+                    value: "toLowerCase"
+                }
+            ]
+        }
+      };
+    }
+}
+  
+EaglerBuilder.extensions.register(new TextEdit());
\ No newline at end of file
diff --git a/static/extensions/when-mod-loaded-do.js b/static/extensions/when-mod-loaded-do.js
new file mode 100644
index 0000000..3eece72
--- /dev/null
+++ b/static/extensions/when-mod-loaded-do.js
@@ -0,0 +1,20 @@
+class WhenModLoadedDo {
+    info() {
+      return {
+        id: 'eventexample',
+        name: 'Event Block Example',
+        blocks: [
+          {
+            id: 'modload',
+            type: EaglerBuilder.BlockType.EVENT,
+            text: 'when mod loaded do',
+            func: (args, innercode) => {
+                return `${innercode.indexOf('await') > -1 ? 'async' : ''} function onload() {\n${innercode}}`;
+            }
+          }
+        ]
+      };
+    }
+}
+  
+EaglerBuilder.extensions.register(new WhenModLoadedDo());
\ No newline at end of file
diff --git a/static/favicon.png b/static/favicon.png
index d967180..20e86ab 100644
Binary files a/static/favicon.png and b/static/favicon.png differ
diff --git a/static/favicon_dark.png b/static/favicon_dark.png
deleted file mode 100644
index 8504d49..0000000
Binary files a/static/favicon_dark.png and /dev/null differ
diff --git a/static/images/extensions/custom_extension.svg b/static/images/extensions/custom_extension.svg
new file mode 100644
index 0000000..ca0d270
--- /dev/null
+++ b/static/images/extensions/custom_extension.svg
@@ -0,0 +1,90 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="600"
+   height="300"
+   version="1.1"
+   id="svg10"
+   sodipodi:docname="cf07199bb768b01e6ac2a5c68fd8c3bb.svg"
+   inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs10" />
+  <sodipodi:namedview
+     id="namedview10"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="2.2733333"
+     inkscape:cx="300"
+     inkscape:cy="149.78006"
+     inkscape:window-width="1920"
+     inkscape:window-height="1013"
+     inkscape:window-x="1366"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg10" />
+  <path
+     fill="#0fbd8c"
+     d="M0 0h600v300H0Z"
+     style="stroke-width:0.898027;fill:#6d85d1;fill-opacity:1"
+     id="path1" />
+  <path
+     fill="#ffd641"
+     d="M-19.344061 186C-19.344061 9.631143 123.63114-133.34406 300-133.34406c176.36885 0 319.34406 142.975203 319.34406 319.34406 0 176.36885-142.97521 319.34406-319.34406 319.34406-176.36886 0-319.344061-142.97521-319.344061-319.34406Z"
+     style="fill:#3b57b5;fill-opacity:1;fill-rule:nonzero;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-dashoffset:0"
+     transform="matrix(.93943 0 0 .93943 18.172307 -24.73317)"
+     id="path2" />
+  <path
+     fill="#ffc800"
+     d="M20.155927 186C20.155927 31.446397 145.44638-93.844074 300-93.844074c154.5536 0 279.84407 125.29046 279.84407 279.844074 0 154.5536-125.29046 279.84407-279.84407 279.84407S20.155937 340.55361 20.155937 186Z"
+     style="fill:#6d85d1;fill-opacity:1;fill-rule:nonzero;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-dashoffset:0"
+     transform="matrix(.93943 0 0 .93943 18.172307 -24.73317)"
+     id="path3" />
+  <path
+     fill="#ffd641"
+     d="M60.155932 186c0-132.462224 107.381848-239.844074 239.844078-239.844074 132.46222 0 239.84406 107.38185 239.84406 239.844074 0 132.46222-107.38185 239.84407-239.84406 239.84407-132.46223 0-239.844078-107.38185-239.844078-239.84407Z"
+     style="fill:#3b57b5;fill-opacity:1;fill-rule:nonzero;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-dashoffset:0"
+     transform="matrix(.93943 0 0 .93943 18.172307 -24.73317)"
+     id="path4" />
+  <path
+     fill="#ffc800"
+     d="M100.65593 185.99999C100.65593 75.905307 189.9053-13.344074 300-13.344074c110.09469 0 199.34407 89.249381 199.34407 199.344074 0 110.09469-89.24938 199.34407-199.34406 199.34407-110.09469 0-199.34406-89.24938-199.34406-199.34406z"
+     style="fill:#6d85d1;fill-opacity:1;fill-rule:nonzero;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-dashoffset:0"
+     transform="matrix(.93943 0 0 .93943 18.172307 -24.73317)"
+     id="path5" />
+  <path
+     fill="#ffd641"
+     d="M139.90593 185.99999c0-88.417506 71.67656-160.094063 160.09407-160.094063S460.09407 97.582494 460.09407 186c0 88.41751-71.67656 160.09407-160.09406 160.09407-88.41752 0-160.09407-71.67656-160.09407-160.09406z"
+     style="fill:#3b57b5;fill-opacity:1;fill-rule:nonzero;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-dashoffset:0"
+     transform="matrix(.93943 0 0 .93943 18.172307 -24.73317)"
+     id="path6" />
+  <path
+     fill="#ffc800"
+     d="M180.65593 185.99999c0-65.9119 53.43216-119.344064 119.34408-119.344064 65.9119 0 119.34407 53.432164 119.34407 119.344074 0 65.9119-53.43216 119.34407-119.34406 119.34407s-119.34407-53.43216-119.34407-119.34406z"
+     style="fill:#6d85d1;fill-opacity:1;fill-rule:nonzero;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-dashoffset:0"
+     transform="matrix(.93943 0 0 .93943 18.172307 -24.73317)"
+     id="path7" />
+  <path
+     fill="#ffd641"
+     d="M219.90593 185.99999c0-44.23473 35.85933-80.09406 80.09407-80.09406 44.23473 0 80.09407 35.85933 80.09407 80.09407 0 44.23473-35.85933 80.09407-80.09406 80.09407s-80.09406-35.85933-80.09406-80.09406z"
+     style="fill:#3b57b5;fill-opacity:1;fill-rule:nonzero;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-dashoffset:0"
+     transform="matrix(.93943 0 0 .93943 18.172307 -24.73317)"
+     id="path8" />
+  <path
+     fill="#ffc800"
+     d="M260.0726 186c0-22.05129 17.87611-39.9274 39.9274-39.9274 22.05129 0 39.9274 17.87611 39.9274 39.9274 0 22.05129-17.87611 39.9274-39.9274 39.9274-22.05129 0-39.9274-17.87611-39.9274-39.9274z"
+     style="fill:#6d85d1;fill-opacity:1;fill-rule:nonzero;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-dashoffset:0"
+     transform="matrix(.93943 0 0 .93943 18.172307 -24.73317)"
+     id="path9" />
+  <path
+     fill="#fff"
+     d="M169.4570363 135.41041823c23.03677403 0 26.10859254-12.286654 26.10859254-23.03801407 0-9.21495762-1.53578243-16.89437707-1.53578243-26.10859254 0-9.21421548-1.53578243-18.42967006-1.53578243-26.1085916 0-32.25222486 19.96619557-46.07478812 52.21841572-46.07478812h12.28664461v29.18042138h-6.14324245c-15.35787128 0-19.96620496 9.2149473-19.96620496 24.57328828 0 6.1432697 1.53579182 12.28664367 1.53579182 19.96618524 0 6.14327064 1.53578243 13.82256795 1.53578243 23.03801408 0 26.10859254-10.75074005 35.32404806-29.18042044 39.93116049 18.42968039 4.60746942 29.18042044 13.82254916 29.18042044 39.9311417 0 9.21496702-1.53578243 16.89439586-1.53578243 23.03678343 0 6.14327064-1.53579182 13.82255856-1.53579182 18.429671 0 15.35785249 4.6074788 24.57328922 19.96620496 24.57328922h6.14324245v29.18041104h-12.2866446c-30.71693563 0-50.68189116-12.2866446-50.68189116-46.07477871 0-9.21495763 0-16.89438646 1.53578243-26.10860194 1.53579183-9.21420608 1.53579183-18.4296616 1.53579183-26.10859254 0-9.21495762-3.07169638-23.03800468-26.10860194-23.03800468zm261.0859254 26.10859255c-23.03677403 0-26.10859254 13.82254916-26.10859254 23.03676464 0 9.21495762 1.53578243 16.89437706 1.53578243 26.10859254 1.53579183 9.21495762 1.53579183 18.429671 1.53579183 26.10859254 0 33.78875413-21.5014801 46.07478811-52.21842512 46.07478811h-12.28664461v-26.10859254h6.14326124c15.35785249 0 19.96619557-9.21495762 19.96619557-24.57329861 0-6.14326124 0-12.28664461-1.53579183-18.429671 0-7.6791658-1.53578243-15.35785248-1.53578243-23.03677403 0-26.10859254 10.75074006-35.32403867 29.18041105-39.9311511-18.429671-4.60747881-29.18041105-13.82255856-29.18041105-39.9311511 0-9.21495762 1.53578243-16.89437707 1.53578243-23.03801408 1.53579183-7.6791658 1.53579183-13.82254916 1.53579183-19.96618524 0-15.35785248-6.14327064-23.03800186-19.96619557-24.57329015h-6.14326124V14.07919938h12.2866446c32.25222016 0 52.21842513 13.82256325 52.21842513 46.0747806 0 9.21495668-1.53579183 16.89438551-1.53579183 26.10860099-1.53578243 9.21495762-1.53578243 18.429671-1.53578243 26.10859254 0 10.75073066 3.07168699 23.03800468 26.10859254 23.03800468z"
+     id="path10" />
+</svg>
diff --git a/static/images/extensions/game_settings.svg b/static/images/extensions/game_settings.svg
new file mode 100644
index 0000000..d32295a
--- /dev/null
+++ b/static/images/extensions/game_settings.svg
@@ -0,0 +1,3681 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="600"
+   height="300"
+   version="1.1"
+   id="svg10"
+   sodipodi:docname="cf07199bb768b01e6ac2a5c68fd8c3bb.svg"
+   inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)"
+   xml:space="preserve"
+   inkscape:export-filename="thumbnail.svg"
+   inkscape:export-xdpi="958.17"
+   inkscape:export-ydpi="958.17"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs10"><path
+       d="m 277,265 c -21,1 -32,1 -52,3 l 15,-47 q 4,-17 10,-2 z"
+       id="P0" /><path
+       d="m 249,239 9,3 -1,16 -18,-7 z"
+       id="P1" /><path
+       d="m 244,221 q 45,7 30,47 c -2,3 -4,6 -10,8 -21,-10 -31,-23 -35,-48 q -1,-17 15,-7 z"
+       id="P2" /><path
+       d="m 267,243 -11,24 -22,-9 v -17 z"
+       id="P3" /><path
+       d="m 270,242 c -9,8 -10,12 -6,23 -10,7 -22,6 -31,-3 -6,-13 0,-28 13,-33 7,10 11,12 24,13 z"
+       id="P4" /><path
+       d="m 270,253 -25,16 -6,-36 28,6 z"
+       id="P5" /><path
+       d="m 270,239 q 14,9 0,22 -7,21 -27,11 -20,0 -16,-19 z"
+       id="P6" /><path
+       d="m 263,235 -12,35 -15,-5 9,-34 z"
+       id="P7" /><path
+       d="m 246,226 q 23,-6 27,17 l 1,9 -43,12 z"
+       id="P8" /><path
+       d="m 247,237 11,2 -6,24 -13,-19 z"
+       id="P9" /><path
+       d="m 284,269 q -49,38 -73,-21 c 20,-6 23,-11 18,-31 18,-9 39,-5 51,8 z"
+       id="P10" /><path
+       d="m 269,245 -14,24 -24,-13 25,-25 z"
+       id="P11" /><path
+       d="m 278,223 10,37 c -29,10 -47,10 -76,0 -2,-26 15,-46 40,-49 11,0 20,5 26,12 z"
+       id="P12" /><path
+       d="m 247,262 -9,-14 11,-10 7,23 z"
+       id="P13" /></defs><sodipodi:namedview
+     id="namedview10"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="2.2733333"
+     inkscape:cx="300"
+     inkscape:cy="149.78006"
+     inkscape:window-width="1920"
+     inkscape:window-height="1013"
+     inkscape:window-x="1366"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg10"
+     showgrid="false" /><rect
+     style="fill:#cccccc;fill-opacity:1;stroke:#ffcc00;stroke-width:0"
+     id="rect1"
+     width="600"
+     height="300"
+     x="0.24405113"
+     y="-0.10485607" /><g
+     id="group"
+     fill="#9e9e9e"
+     filter=""
+     transform="matrix(0.10867596,0,0,0.10841484,2.5925,2.5017)"><use
+       x="-181"
+       y="-137"
+       href="#P13"
+       id="use1" /><use
+       x="-87"
+       y="104"
+       href="#P10"
+       id="use2" /><use
+       x="-245"
+       y="269"
+       href="#P8"
+       id="use3" /><use
+       x="-160"
+       y="435"
+       href="#P6"
+       id="use4" /><use
+       x="-131"
+       y="542"
+       href="#P1"
+       id="use5" /><use
+       x="-110"
+       y="808"
+       href="#P4"
+       id="use6" /><use
+       x="-144"
+       y="924"
+       href="#P10"
+       id="use7" /><use
+       x="-236"
+       y="1123"
+       href="#P9"
+       id="use8" /><use
+       x="-89"
+       y="1290"
+       href="#P2"
+       id="use9" /><use
+       x="-159"
+       y="1423"
+       href="#P2"
+       id="use10" /><use
+       x="-81"
+       y="1677"
+       href="#P2"
+       id="use11" /><use
+       x="-178"
+       y="1832"
+       href="#P6"
+       id="use12" /><use
+       x="-244"
+       y="2093"
+       href="#P0"
+       id="use13" /><use
+       x="-178"
+       y="2307"
+       href="#P0"
+       id="use14" /><use
+       x="-170"
+       y="2418"
+       href="#P13"
+       id="use15" /><use
+       x="-169"
+       y="2552"
+       href="#P4"
+       id="use16" /><use
+       x="-197"
+       y="2864"
+       href="#P1"
+       id="use17" /><use
+       x="-90"
+       y="2961"
+       href="#P3"
+       id="use18" /><use
+       x="-238"
+       y="3114"
+       href="#P13"
+       id="use19" /><use
+       x="-68"
+       y="3257"
+       href="#P10"
+       id="use20" /><use
+       x="-219"
+       y="3430"
+       href="#P0"
+       id="use21" /><use
+       x="-203"
+       y="3628"
+       href="#P8"
+       id="use22" /><use
+       x="-161"
+       y="3842"
+       href="#P12"
+       id="use23" /><use
+       x="-221"
+       y="4016"
+       href="#P0"
+       id="use24" /><use
+       x="-202"
+       y="4276"
+       href="#P6"
+       id="use25" /><use
+       x="-193"
+       y="4483"
+       href="#P4"
+       id="use26" /><use
+       x="-71"
+       y="4672"
+       href="#P12"
+       id="use27" /><use
+       x="-103"
+       y="4702"
+       href="#P5"
+       id="use28" /><use
+       x="-151"
+       y="4951"
+       href="#P2"
+       id="use29" /><use
+       x="-245"
+       y="5142"
+       href="#P1"
+       id="use30" /><use
+       x="-58"
+       y="-237"
+       href="#P5"
+       id="use31" /><use
+       x="-54"
+       y="24"
+       href="#P13"
+       id="use32" /><use
+       x="-49"
+       y="235"
+       href="#P7"
+       id="use33" /><use
+       x="5"
+       y="336"
+       href="#P9"
+       id="use34" /><use
+       x="-63"
+       y="587"
+       href="#P8"
+       id="use35" /><use
+       x="11"
+       y="781"
+       href="#P13"
+       id="use36" /><use
+       x="5"
+       y="920"
+       href="#P1"
+       id="use37" /><use
+       x="-11"
+       y="1130"
+       href="#P4"
+       id="use38" /><use
+       x="-50"
+       y="1351"
+       href="#P8"
+       id="use39" /><use
+       x="-32"
+       y="1456"
+       href="#P1"
+       id="use40" /><use
+       x="18"
+       y="1758"
+       href="#P9"
+       id="use41" /><use
+       x="10"
+       y="1901"
+       href="#P13"
+       id="use42" /><use
+       x="89"
+       y="2087"
+       href="#P9"
+       id="use43" /><use
+       x="59"
+       y="2231"
+       href="#P8"
+       id="use44" /><use
+       x="36"
+       y="2364"
+       href="#P9"
+       id="use45" /><use
+       x="18"
+       y="2654"
+       href="#P5"
+       id="use46" /><use
+       x="-48"
+       y="2837"
+       href="#P0"
+       id="use47" /><use
+       x="80"
+       y="3002"
+       href="#P7"
+       id="use48" /><use
+       x="-41"
+       y="3076"
+       href="#P11"
+       id="use49" /><use
+       x="97"
+       y="3376"
+       href="#P10"
+       id="use50" /><use
+       x="-11"
+       y="3493"
+       href="#P3"
+       id="use51" /><use
+       x="65"
+       y="3633"
+       href="#P10"
+       id="use52" /><use
+       x="-24"
+       y="3960"
+       href="#P10"
+       id="use53" /><use
+       x="37"
+       y="4059"
+       href="#P6"
+       id="use54" /><use
+       x="-15"
+       y="4318"
+       href="#P9"
+       id="use55" /><use
+       x="17"
+       y="4366"
+       href="#P3"
+       id="use56" /><use
+       x="-29"
+       y="4571"
+       href="#P7"
+       id="use57" /><use
+       x="33"
+       y="4805"
+       href="#P13"
+       id="use58" /><use
+       x="-55"
+       y="4906"
+       href="#P11"
+       id="use59" /><use
+       x="55"
+       y="5112"
+       href="#P6"
+       id="use60" /><use
+       x="200"
+       y="-128"
+       href="#P10"
+       id="use61" /><use
+       x="278"
+       y="9"
+       href="#P6"
+       id="use62" /><use
+       x="180"
+       y="246"
+       href="#P3"
+       id="use63" /><use
+       x="131"
+       y="353"
+       href="#P9"
+       id="use64" /><use
+       x="271"
+       y="604"
+       href="#P0"
+       id="use65" /><use
+       x="220"
+       y="681"
+       href="#P8"
+       id="use66" /><use
+       x="140"
+       y="879"
+       href="#P13"
+       id="use67" /><use
+       x="227"
+       y="1102"
+       href="#P1"
+       id="use68" /><use
+       x="217"
+       y="1231"
+       href="#P7"
+       id="use69" /><use
+       x="237"
+       y="1411"
+       href="#P3"
+       id="use70" /><use
+       x="245"
+       y="1687"
+       href="#P3"
+       id="use71" /><use
+       x="262"
+       y="1873"
+       href="#P4"
+       id="use72" /><use
+       x="217"
+       y="2022"
+       href="#P4"
+       id="use73" /><use
+       x="126"
+       y="2175"
+       href="#P10"
+       id="use74" /><use
+       x="192"
+       y="2338"
+       href="#P2"
+       id="use75" /><use
+       x="183"
+       y="2664"
+       href="#P9"
+       id="use76" /><use
+       x="124"
+       y="2779"
+       href="#P10"
+       id="use77" /><use
+       x="211"
+       y="3028"
+       href="#P2"
+       id="use78" /><use
+       x="254"
+       y="3140"
+       href="#P0"
+       id="use79" /><use
+       x="211"
+       y="3377"
+       href="#P5"
+       id="use80" /><use
+       x="175"
+       y="3546"
+       href="#P12"
+       id="use81" /><use
+       x="191"
+       y="3641"
+       href="#P3"
+       id="use82" /><use
+       x="151"
+       y="3961"
+       href="#P13"
+       id="use83" /><use
+       x="262"
+       y="4032"
+       href="#P6"
+       id="use84" /><use
+       x="159"
+       y="4292"
+       href="#P5"
+       id="use85" /><use
+       x="139"
+       y="4471"
+       href="#P3"
+       id="use86" /><use
+       x="148"
+       y="4641"
+       href="#P0"
+       id="use87" /><use
+       x="236"
+       y="4720"
+       href="#P11"
+       id="use88" /><use
+       x="247"
+       y="4989"
+       href="#P8"
+       id="use89" /><use
+       x="273"
+       y="5167"
+       href="#P12"
+       id="use90" /><use
+       x="377"
+       y="-243"
+       href="#P3"
+       id="use91" /><use
+       x="483"
+       y="28"
+       href="#P10"
+       id="use92" /><use
+       x="390"
+       y="213"
+       href="#P6"
+       id="use93" /><use
+       x="421"
+       y="474"
+       href="#P6"
+       id="use94" /><use
+       x="335"
+       y="544"
+       href="#P10"
+       id="use95" /><use
+       x="435"
+       y="788"
+       href="#P4"
+       id="use96" /><use
+       x="354"
+       y="984"
+       href="#P0"
+       id="use97" /><use
+       x="445"
+       y="1194"
+       href="#P7"
+       id="use98" /><use
+       x="482"
+       y="1275"
+       href="#P7"
+       id="use99" /><use
+       x="403"
+       y="1486"
+       href="#P9"
+       id="use100" /><use
+       x="423"
+       y="1667"
+       href="#P12"
+       id="use101" /><use
+       x="440"
+       y="1779"
+       href="#P11"
+       id="use102" /><use
+       x="435"
+       y="2118"
+       href="#P2"
+       id="use103" /><use
+       x="340"
+       y="2201"
+       href="#P0"
+       id="use104" /><use
+       x="448"
+       y="2407"
+       href="#P5"
+       id="use105" /><use
+       x="326"
+       y="2556"
+       href="#P2"
+       id="use106" /><use
+       x="404"
+       y="2770"
+       href="#P10"
+       id="use107" /><use
+       x="437"
+       y="2952"
+       href="#P10"
+       id="use108" /><use
+       x="322"
+       y="3102"
+       href="#P2"
+       id="use109" /><use
+       x="408"
+       y="3316"
+       href="#P2"
+       id="use110" /><use
+       x="361"
+       y="3499"
+       href="#P11"
+       id="use111" /><use
+       x="402"
+       y="3623"
+       href="#P10"
+       id="use112" /><use
+       x="439"
+       y="3877"
+       href="#P10"
+       id="use113" /><use
+       x="475"
+       y="4003"
+       href="#P12"
+       id="use114" /><use
+       x="330"
+       y="4238"
+       href="#P4"
+       id="use115" /><use
+       x="317"
+       y="4431"
+       href="#P0"
+       id="use116" /><use
+       x="473"
+       y="4641"
+       href="#P7"
+       id="use117" /><use
+       x="397"
+       y="4784"
+       href="#P5"
+       id="use118" /><use
+       x="416"
+       y="4980"
+       href="#P4"
+       id="use119" /><use
+       x="469"
+       y="5123"
+       href="#P6"
+       id="use120" /><use
+       x="507"
+       y="-205"
+       href="#P9"
+       id="use121" /><use
+       x="639"
+       y="-62"
+       href="#P8"
+       id="use122" /><use
+       x="528"
+       y="270"
+       href="#P5"
+       id="use123" /><use
+       x="502"
+       y="367"
+       href="#P10"
+       id="use124" /><use
+       x="619"
+       y="531"
+       href="#P6"
+       id="use125" /><use
+       x="561"
+       y="729"
+       href="#P13"
+       id="use126" /><use
+       x="664"
+       y="1005"
+       href="#P10"
+       id="use127" /><use
+       x="596"
+       y="1149"
+       href="#P0"
+       id="use128" /><use
+       x="557"
+       y="1268"
+       href="#P3"
+       id="use129" /><use
+       x="502"
+       y="1436"
+       href="#P10"
+       id="use130" /><use
+       x="592"
+       y="1612"
+       href="#P4"
+       id="use131" /><use
+       x="580"
+       y="1933"
+       href="#P13"
+       id="use132" /><use
+       x="626"
+       y="1963"
+       href="#P7"
+       id="use133" /><use
+       x="497"
+       y="2267"
+       href="#P11"
+       id="use134" /><use
+       x="561"
+       y="2407"
+       href="#P7"
+       id="use135" /><use
+       x="573"
+       y="2551"
+       href="#P4"
+       id="use136" /><use
+       x="576"
+       y="2826"
+       href="#P1"
+       id="use137" /><use
+       x="600"
+       y="2993"
+       href="#P10"
+       id="use138" /><use
+       x="555"
+       y="3217"
+       href="#P2"
+       id="use139" /><use
+       x="608"
+       y="3371"
+       href="#P4"
+       id="use140" /><use
+       x="583"
+       y="3503"
+       href="#P1"
+       id="use141" /><use
+       x="636"
+       y="3719"
+       href="#P8"
+       id="use142" /><use
+       x="517"
+       y="3965"
+       href="#P11"
+       id="use143" /><use
+       x="566"
+       y="4042"
+       href="#P2"
+       id="use144" /><use
+       x="617"
+       y="4208"
+       href="#P4"
+       id="use145" /><use
+       x="509"
+       y="4382"
+       href="#P10"
+       id="use146" /><use
+       x="509"
+       y="4636"
+       href="#P0"
+       id="use147" /><use
+       x="628"
+       y="4867"
+       href="#P1"
+       id="use148" /><use
+       x="596"
+       y="5018"
+       href="#P4"
+       id="use149" /><use
+       x="525"
+       y="5126"
+       href="#P6"
+       id="use150" /><use
+       x="727"
+       y="-118"
+       href="#P7"
+       id="use151" /><use
+       x="786"
+       y="71"
+       href="#P9"
+       id="use152" /><use
+       x="809"
+       y="271"
+       href="#P11"
+       id="use153" /><use
+       x="676"
+       y="480"
+       href="#P9"
+       id="use154" /><use
+       x="725"
+       y="566"
+       href="#P13"
+       id="use155" /><use
+       x="689"
+       y="822"
+       href="#P12"
+       id="use156" /><use
+       x="846"
+       y="901"
+       href="#P10"
+       id="use157" /><use
+       x="824"
+       y="1053"
+       href="#P5"
+       id="use158" /><use
+       x="838"
+       y="1374"
+       href="#P13"
+       id="use159" /><use
+       x="670"
+       y="1581"
+       href="#P7"
+       id="use160" /><use
+       x="707"
+       y="1617"
+       href="#P6"
+       id="use161" /><use
+       x="826"
+       y="1941"
+       href="#P10"
+       id="use162" /><use
+       x="668"
+       y="2013"
+       href="#P1"
+       id="use163" /><use
+       x="738"
+       y="2262"
+       href="#P11"
+       id="use164" /><use
+       x="842"
+       y="2470"
+       href="#P0"
+       id="use165" /><use
+       x="778"
+       y="2651"
+       href="#P11"
+       id="use166" /><use
+       x="726"
+       y="2712"
+       href="#P11"
+       id="use167" /><use
+       x="817"
+       y="2925"
+       href="#P9"
+       id="use168" /><use
+       x="682"
+       y="3166"
+       href="#P9"
+       id="use169" /><use
+       x="699"
+       y="3302"
+       href="#P0"
+       id="use170" /><use
+       x="838"
+       y="3451"
+       href="#P7"
+       id="use171" /><use
+       x="712"
+       y="3709"
+       href="#P6"
+       id="use172" /><use
+       x="827"
+       y="3815"
+       href="#P5"
+       id="use173" /><use
+       x="710"
+       y="3969"
+       href="#P7"
+       id="use174" /><use
+       x="723"
+       y="4158"
+       href="#P5"
+       id="use175" /><use
+       x="713"
+       y="4372"
+       href="#P1"
+       id="use176" /><use
+       x="795"
+       y="4591"
+       href="#P7"
+       id="use177" /><use
+       x="850"
+       y="4856"
+       href="#P4"
+       id="use178" /><use
+       x="817"
+       y="5043"
+       href="#P13"
+       id="use179" /><use
+       x="713"
+       y="5220"
+       href="#P6"
+       id="use180" /><use
+       x="921"
+       y="-185"
+       href="#P4"
+       id="use181" /><use
+       x="868"
+       y="-34"
+       href="#P4"
+       id="use182" /><use
+       x="929"
+       y="160"
+       href="#P11"
+       id="use183" /><use
+       x="869"
+       y="303"
+       href="#P7"
+       id="use184" /><use
+       x="869"
+       y="585"
+       href="#P10"
+       id="use185" /><use
+       x="1031"
+       y="686"
+       href="#P4"
+       id="use186" /><use
+       x="891"
+       y="1004"
+       href="#P11"
+       id="use187" /><use
+       x="883"
+       y="1064"
+       href="#P11"
+       id="use188" /><use
+       x="965"
+       y="1244"
+       href="#P6"
+       id="use189" /><use
+       x="1008"
+       y="1406"
+       href="#P4"
+       id="use190" /><use
+       x="889"
+       y="1649"
+       href="#P12"
+       id="use191" /><use
+       x="867"
+       y="1791"
+       href="#P0"
+       id="use192" /><use
+       x="935"
+       y="2004"
+       href="#P12"
+       id="use193" /><use
+       x="872"
+       y="2190"
+       href="#P5"
+       id="use194" /><use
+       x="944"
+       y="2337"
+       href="#P5"
+       id="use195" /><use
+       x="860"
+       y="2609"
+       href="#P3"
+       id="use196" /><use
+       x="937"
+       y="2697"
+       href="#P5"
+       id="use197" /><use
+       x="892"
+       y="2951"
+       href="#P8"
+       id="use198" /><use
+       x="946"
+       y="3177"
+       href="#P2"
+       id="use199" /><use
+       x="921"
+       y="3243"
+       href="#P6"
+       id="use200" /><use
+       x="957"
+       y="3501"
+       href="#P1"
+       id="use201" /><use
+       x="943"
+       y="3709"
+       href="#P8"
+       id="use202" /><use
+       x="984"
+       y="3907"
+       href="#P5"
+       id="use203" /><use
+       x="889"
+       y="3989"
+       href="#P5"
+       id="use204" /><use
+       x="950"
+       y="4158"
+       href="#P11"
+       id="use205" /><use
+       x="949"
+       y="4439"
+       href="#P5"
+       id="use206" /><use
+       x="1025"
+       y="4695"
+       href="#P3"
+       id="use207" /><use
+       x="963"
+       y="4812"
+       href="#P4"
+       id="use208" /><use
+       x="857"
+       y="4906"
+       href="#P2"
+       id="use209" /><use
+       x="906"
+       y="5158"
+       href="#P2"
+       id="use210" /><use
+       x="1117"
+       y="-232"
+       href="#P11"
+       id="use211" /><use
+       x="1064"
+       y="72"
+       href="#P6"
+       id="use212" /><use
+       x="1125"
+       y="231"
+       href="#P13"
+       id="use213" /><use
+       x="1086"
+       y="470"
+       href="#P1"
+       id="use214" /><use
+       x="1034"
+       y="519"
+       href="#P10"
+       id="use215" /><use
+       x="1144"
+       y="707"
+       href="#P3"
+       id="use216" /><use
+       x="1178"
+       y="887"
+       href="#P10"
+       id="use217" /><use
+       x="1069"
+       y="1196"
+       href="#P9"
+       id="use218" /><use
+       x="1044"
+       y="1246"
+       href="#P0"
+       id="use219" /><use
+       x="1090"
+       y="1440"
+       href="#P4"
+       id="use220" /><use
+       x="1203"
+       y="1592"
+       href="#P5"
+       id="use221" /><use
+       x="1190"
+       y="1933"
+       href="#P8"
+       id="use222" /><use
+       x="1139"
+       y="2048"
+       href="#P0"
+       id="use223" /><use
+       x="1162"
+       y="2229"
+       href="#P6"
+       id="use224" /><use
+       x="1171"
+       y="2494"
+       href="#P4"
+       id="use225" /><use
+       x="1115"
+       y="2610"
+       href="#P11"
+       id="use226" /><use
+       x="1040"
+       y="2714"
+       href="#P1"
+       id="use227" /><use
+       x="1064"
+       y="2958"
+       href="#P1"
+       id="use228" /><use
+       x="1213"
+       y="3059"
+       href="#P0"
+       id="use229" /><use
+       x="1180"
+       y="3393"
+       href="#P11"
+       id="use230" /><use
+       x="1142"
+       y="3500"
+       href="#P12"
+       id="use231" /><use
+       x="1090"
+       y="3688"
+       href="#P8"
+       id="use232" /><use
+       x="1172"
+       y="3830"
+       href="#P6"
+       id="use233" /><use
+       x="1136"
+       y="4071"
+       href="#P10"
+       id="use234" /><use
+       x="1216"
+       y="4225"
+       href="#P4"
+       id="use235" /><use
+       x="1045"
+       y="4365"
+       href="#P2"
+       id="use236" /><use
+       x="1114"
+       y="4602"
+       href="#P8"
+       id="use237" /><use
+       x="1084"
+       y="4737"
+       href="#P0"
+       id="use238" /><use
+       x="1173"
+       y="5029"
+       href="#P5"
+       id="use239" /><use
+       x="1183"
+       y="5212"
+       href="#P1"
+       id="use240" /><use
+       x="1241"
+       y="-129"
+       href="#P0"
+       id="use241" /><use
+       x="1368"
+       y="26"
+       href="#P6"
+       id="use242" /><use
+       x="1365"
+       y="200"
+       href="#P4"
+       id="use243" /><use
+       x="1376"
+       y="421"
+       href="#P1"
+       id="use244" /><use
+       x="1239"
+       y="499"
+       href="#P3"
+       id="use245" /><use
+       x="1378"
+       y="723"
+       href="#P9"
+       id="use246" /><use
+       x="1281"
+       y="919"
+       href="#P11"
+       id="use247" /><use
+       x="1343"
+       y="1162"
+       href="#P0"
+       id="use248" /><use
+       x="1233"
+       y="1231"
+       href="#P8"
+       id="use249" /><use
+       x="1400"
+       y="1462"
+       href="#P3"
+       id="use250" /><use
+       x="1325"
+       y="1587"
+       href="#P4"
+       id="use251" /><use
+       x="1217"
+       y="1844"
+       href="#P1"
+       id="use252" /><use
+       x="1220"
+       y="1964"
+       href="#P11"
+       id="use253" /><use
+       x="1306"
+       y="2154"
+       href="#P12"
+       id="use254" /><use
+       x="1320"
+       y="2340"
+       href="#P6"
+       id="use255" /><use
+       x="1228"
+       y="2597"
+       href="#P4"
+       id="use256" /><use
+       x="1238"
+       y="2797"
+       href="#P1"
+       id="use257" /><use
+       x="1336"
+       y="2943"
+       href="#P6"
+       id="use258" /><use
+       x="1353"
+       y="3196"
+       href="#P2"
+       id="use259" /><use
+       x="1229"
+       y="3403"
+       href="#P12"
+       id="use260" /><use
+       x="1335"
+       y="3554"
+       href="#P11"
+       id="use261" /><use
+       x="1343"
+       y="3774"
+       href="#P7"
+       id="use262" /><use
+       x="1239"
+       y="3893"
+       href="#P13"
+       id="use263" /><use
+       x="1281"
+       y="4099"
+       href="#P0"
+       id="use264" /><use
+       x="1356"
+       y="4253"
+       href="#P11"
+       id="use265" /><use
+       x="1370"
+       y="4394"
+       href="#P11"
+       id="use266" /><use
+       x="1380"
+       y="4653"
+       href="#P5"
+       id="use267" /><use
+       x="1328"
+       y="4825"
+       href="#P3"
+       id="use268" /><use
+       x="1289"
+       y="4926"
+       href="#P1"
+       id="use269" /><use
+       x="1299"
+       y="5186"
+       href="#P4"
+       id="use270" /><use
+       x="1535"
+       y="-111"
+       href="#P4"
+       id="use271" /><use
+       x="1514"
+       y="55"
+       href="#P6"
+       id="use272" /><use
+       x="1583"
+       y="150"
+       href="#P3"
+       id="use273" /><use
+       x="1405"
+       y="373"
+       href="#P10"
+       id="use274" /><use
+       x="1512"
+       y="654"
+       href="#P9"
+       id="use275" /><use
+       x="1492"
+       y="814"
+       href="#P10"
+       id="use276" /><use
+       x="1489"
+       y="910"
+       href="#P1"
+       id="use277" /><use
+       x="1426"
+       y="1190"
+       href="#P11"
+       id="use278" /><use
+       x="1457"
+       y="1384"
+       href="#P8"
+       id="use279" /><use
+       x="1523"
+       y="1414"
+       href="#P5"
+       id="use280" /><use
+       x="1471"
+       y="1666"
+       href="#P4"
+       id="use281" /><use
+       x="1436"
+       y="1931"
+       href="#P0"
+       id="use282" /><use
+       x="1546"
+       y="2127"
+       href="#P11"
+       id="use283" /><use
+       x="1549"
+       y="2310"
+       href="#P4"
+       id="use284" /><use
+       x="1467"
+       y="2360"
+       href="#P6"
+       id="use285" /><use
+       x="1515"
+       y="2548"
+       href="#P3"
+       id="use286" /><use
+       x="1552"
+       y="2813"
+       href="#P1"
+       id="use287" /><use
+       x="1583"
+       y="2900"
+       href="#P9"
+       id="use288" /><use
+       x="1549"
+       y="3082"
+       href="#P1"
+       id="use289" /><use
+       x="1433"
+       y="3396"
+       href="#P5"
+       id="use290" /><use
+       x="1489"
+       y="3459"
+       href="#P10"
+       id="use291" /><use
+       x="1487"
+       y="3735"
+       href="#P9"
+       id="use292" /><use
+       x="1434"
+       y="3956"
+       href="#P7"
+       id="use293" /><use
+       x="1572"
+       y="4040"
+       href="#P8"
+       id="use294" /><use
+       x="1440"
+       y="4210"
+       href="#P8"
+       id="use295" /><use
+       x="1555"
+       y="4478"
+       href="#P7"
+       id="use296" /><use
+       x="1505"
+       y="4517"
+       href="#P4"
+       id="use297" /><use
+       x="1495"
+       y="4715"
+       href="#P11"
+       id="use298" /><use
+       x="1426"
+       y="4925"
+       href="#P2"
+       id="use299" /><use
+       x="1468"
+       y="5149"
+       href="#P6"
+       id="use300" /><use
+       x="1707"
+       y="-118"
+       href="#P8"
+       id="use301" /><use
+       x="1669"
+       y="-12"
+       href="#P10"
+       id="use302" /><use
+       x="1655"
+       y="231"
+       href="#P3"
+       id="use303" /><use
+       x="1597"
+       y="312"
+       href="#P8"
+       id="use304" /><use
+       x="1754"
+       y="616"
+       href="#P1"
+       id="use305" /><use
+       x="1695"
+       y="837"
+       href="#P0"
+       id="use306" /><use
+       x="1616"
+       y="925"
+       href="#P5"
+       id="use307" /><use
+       x="1681"
+       y="1127"
+       href="#P6"
+       id="use308" /><use
+       x="1676"
+       y="1352"
+       href="#P2"
+       id="use309" /><use
+       x="1585"
+       y="1445"
+       href="#P10"
+       id="use310" /><use
+       x="1722"
+       y="1699"
+       href="#P8"
+       id="use311" /><use
+       x="1669"
+       y="1812"
+       href="#P6"
+       id="use312" /><use
+       x="1656"
+       y="2036"
+       href="#P5"
+       id="use313" /><use
+       x="1607"
+       y="2239"
+       href="#P7"
+       id="use314" /><use
+       x="1660"
+       y="2442"
+       href="#P6"
+       id="use315" /><use
+       x="1642"
+       y="2549"
+       href="#P13"
+       id="use316" /><use
+       x="1749"
+       y="2698"
+       href="#P2"
+       id="use317" /><use
+       x="1620"
+       y="2915"
+       href="#P9"
+       id="use318" /><use
+       x="1586"
+       y="3153"
+       href="#P1"
+       id="use319" /><use
+       x="1619"
+       y="3414"
+       href="#P13"
+       id="use320" /><use
+       x="1767"
+       y="3508"
+       href="#P3"
+       id="use321" /><use
+       x="1742"
+       y="3646"
+       href="#P12"
+       id="use322" /><use
+       x="1765"
+       y="3809"
+       href="#P7"
+       id="use323" /><use
+       x="1714"
+       y="3972"
+       href="#P5"
+       id="use324" /><use
+       x="1662"
+       y="4229"
+       href="#P8"
+       id="use325" /><use
+       x="1700"
+       y="4457"
+       href="#P9"
+       id="use326" /><use
+       x="1612"
+       y="4529"
+       href="#P8"
+       id="use327" /><use
+       x="1679"
+       y="4735"
+       href="#P3"
+       id="use328" /><use
+       x="1719"
+       y="5008"
+       href="#P13"
+       id="use329" /><use
+       x="1612"
+       y="5113"
+       href="#P6"
+       id="use330" /><use
+       x="1920"
+       y="-216"
+       href="#P4"
+       id="use331" /><use
+       x="1885"
+       y="-54"
+       href="#P7"
+       id="use332" /><use
+       x="1856"
+       y="210"
+       href="#P9"
+       id="use333" /><use
+       x="1799"
+       y="380"
+       href="#P0"
+       id="use334" /><use
+       x="1904"
+       y="488"
+       href="#P4"
+       id="use335" /><use
+       x="1950"
+       y="747"
+       href="#P1"
+       id="use336" /><use
+       x="1915"
+       y="929"
+       href="#P11"
+       id="use337" /><use
+       x="1849"
+       y="1048"
+       href="#P9"
+       id="use338" /><use
+       x="1842"
+       y="1233"
+       href="#P8"
+       id="use339" /><use
+       x="1885"
+       y="1403"
+       href="#P3"
+       id="use340" /><use
+       x="1875"
+       y="1598"
+       href="#P9"
+       id="use341" /><use
+       x="1876"
+       y="1780"
+       href="#P5"
+       id="use342" /><use
+       x="1864"
+       y="2097"
+       href="#P7"
+       id="use343" /><use
+       x="1870"
+       y="2267"
+       href="#P11"
+       id="use344" /><use
+       x="1856"
+       y="2466"
+       href="#P6"
+       id="use345" /><use
+       x="1902"
+       y="2519"
+       href="#P5"
+       id="use346" /><use
+       x="1845"
+       y="2711"
+       href="#P2"
+       id="use347" /><use
+       x="1882"
+       y="3049"
+       href="#P7"
+       id="use348" /><use
+       x="1821"
+       y="3095"
+       href="#P9"
+       id="use349" /><use
+       x="1913"
+       y="3406"
+       href="#P13"
+       id="use350" /><use
+       x="1810"
+       y="3552"
+       href="#P1"
+       id="use351" /><use
+       x="1940"
+       y="3621"
+       href="#P4"
+       id="use352" /><use
+       x="1874"
+       y="3891"
+       href="#P12"
+       id="use353" /><use
+       x="1840"
+       y="4060"
+       href="#P5"
+       id="use354" /><use
+       x="1781"
+       y="4240"
+       href="#P13"
+       id="use355" /><use
+       x="1887"
+       y="4391"
+       href="#P10"
+       id="use356" /><use
+       x="1939"
+       y="4558"
+       href="#P8"
+       id="use357" /><use
+       x="1848"
+       y="4805"
+       href="#P7"
+       id="use358" /><use
+       x="1810"
+       y="5008"
+       href="#P12"
+       id="use359" /><use
+       x="1807"
+       y="5183"
+       href="#P1"
+       id="use360" /><use
+       x="2019"
+       y="-175"
+       href="#P10"
+       id="use361" /><use
+       x="2052"
+       y="-8"
+       href="#P9"
+       id="use362" /><use
+       x="2120"
+       y="261"
+       href="#P4"
+       id="use363" /><use
+       x="2014"
+       y="453"
+       href="#P7"
+       id="use364" /><use
+       x="2038"
+       y="607"
+       href="#P2"
+       id="use365" /><use
+       x="2021"
+       y="778"
+       href="#P13"
+       id="use366" /><use
+       x="2075"
+       y="861"
+       href="#P11"
+       id="use367" /><use
+       x="2032"
+       y="1049"
+       href="#P9"
+       id="use368" /><use
+       x="2106"
+       y="1269"
+       href="#P10"
+       id="use369" /><use
+       x="2008"
+       y="1488"
+       href="#P2"
+       id="use370" /><use
+       x="2130"
+       y="1723"
+       href="#P7"
+       id="use371" /><use
+       x="2041"
+       y="1924"
+       href="#P1"
+       id="use372" /><use
+       x="2079"
+       y="2053"
+       href="#P12"
+       id="use373" /><use
+       x="2122"
+       y="2148"
+       href="#P6"
+       id="use374" /><use
+       x="1965"
+       y="2410"
+       href="#P3"
+       id="use375" /><use
+       x="1963"
+       y="2543"
+       href="#P10"
+       id="use376" /><use
+       x="2041"
+       y="2748"
+       href="#P11"
+       id="use377" /><use
+       x="2063"
+       y="2902"
+       href="#P4"
+       id="use378" /><use
+       x="2099"
+       y="3057"
+       href="#P8"
+       id="use379" /><use
+       x="1974"
+       y="3404"
+       href="#P4"
+       id="use380" /><use
+       x="2000"
+       y="3460"
+       href="#P3"
+       id="use381" /><use
+       x="2107"
+       y="3763"
+       href="#P3"
+       id="use382" /><use
+       x="2020"
+       y="3913"
+       href="#P7"
+       id="use383" /><use
+       x="2082"
+       y="4138"
+       href="#P5"
+       id="use384" /><use
+       x="1973"
+       y="4200"
+       href="#P7"
+       id="use385" /><use
+       x="1953"
+       y="4377"
+       href="#P1"
+       id="use386" /><use
+       x="2029"
+       y="4617"
+       href="#P3"
+       id="use387" /><use
+       x="2015"
+       y="4705"
+       href="#P1"
+       id="use388" /><use
+       x="2122"
+       y="4989"
+       href="#P0"
+       id="use389" /><use
+       x="2066"
+       y="5106"
+       href="#P3"
+       id="use390" /><use
+       x="2280"
+       y="-102"
+       href="#P6"
+       id="use391" /><use
+       x="2249"
+       y="-55"
+       href="#P10"
+       id="use392" /><use
+       x="2271"
+       y="150"
+       href="#P3"
+       id="use393" /><use
+       x="2135"
+       y="357"
+       href="#P0"
+       id="use394" /><use
+       x="2171"
+       y="570"
+       href="#P9"
+       id="use395" /><use
+       x="2253"
+       y="830"
+       href="#P2"
+       id="use396" /><use
+       x="2229"
+       y="1029"
+       href="#P12"
+       id="use397" /><use
+       x="2304"
+       y="1168"
+       href="#P12"
+       id="use398" /><use
+       x="2273"
+       y="1320"
+       href="#P3"
+       id="use399" /><use
+       x="2262"
+       y="1566"
+       href="#P12"
+       id="use400" /><use
+       x="2274"
+       y="1662"
+       href="#P1"
+       id="use401" /><use
+       x="2199"
+       y="1823"
+       href="#P10"
+       id="use402" /><use
+       x="2207"
+       y="1985"
+       href="#P3"
+       id="use403" /><use
+       x="2207"
+       y="2213"
+       href="#P6"
+       id="use404" /><use
+       x="2152"
+       y="2318"
+       href="#P6"
+       id="use405" /><use
+       x="2187"
+       y="2640"
+       href="#P6"
+       id="use406" /><use
+       x="2153"
+       y="2746"
+       href="#P5"
+       id="use407" /><use
+       x="2147"
+       y="3019"
+       href="#P3"
+       id="use408" /><use
+       x="2193"
+       y="3211"
+       href="#P4"
+       id="use409" /><use
+       x="2158"
+       y="3411"
+       href="#P13"
+       id="use410" /><use
+       x="2156"
+       y="3436"
+       href="#P3"
+       id="use411" /><use
+       x="2143"
+       y="3736"
+       href="#P9"
+       id="use412" /><use
+       x="2195"
+       y="3927"
+       href="#P10"
+       id="use413" /><use
+       x="2203"
+       y="4132"
+       href="#P8"
+       id="use414" /><use
+       x="2203"
+       y="4259"
+       href="#P3"
+       id="use415" /><use
+       x="2161"
+       y="4341"
+       href="#P2"
+       id="use416" /><use
+       x="2275"
+       y="4553"
+       href="#P2"
+       id="use417" /><use
+       x="2312"
+       y="4721"
+       href="#P6"
+       id="use418" /><use
+       x="2247"
+       y="5022"
+       href="#P2"
+       id="use419" /><use
+       x="2274"
+       y="5181"
+       href="#P9"
+       id="use420" /><use
+       x="2486"
+       y="-182"
+       href="#P7"
+       id="use421" /><use
+       x="2421"
+       y="-52"
+       href="#P6"
+       id="use422" /><use
+       x="2420"
+       y="205"
+       href="#P7"
+       id="use423" /><use
+       x="2364"
+       y="312"
+       href="#P10"
+       id="use424" /><use
+       x="2481"
+       y="639"
+       href="#P10"
+       id="use425" /><use
+       x="2404"
+       y="832"
+       href="#P8"
+       id="use426" /><use
+       x="2470"
+       y="886"
+       href="#P6"
+       id="use427" /><use
+       x="2453"
+       y="1079"
+       href="#P6"
+       id="use428" /><use
+       x="2387"
+       y="1375"
+       href="#P10"
+       id="use429" /><use
+       x="2329"
+       y="1520"
+       href="#P0"
+       id="use430" /><use
+       x="2365"
+       y="1707"
+       href="#P8"
+       id="use431" /><use
+       x="2342"
+       y="1786"
+       href="#P8"
+       id="use432" /><use
+       x="2409"
+       y="1990"
+       href="#P13"
+       id="use433" /><use
+       x="2348"
+       y="2169"
+       href="#P4"
+       id="use434" /><use
+       x="2479"
+       y="2495"
+       href="#P12"
+       id="use435" /><use
+       x="2336"
+       y="2645"
+       href="#P8"
+       id="use436" /><use
+       x="2355"
+       y="2754"
+       href="#P13"
+       id="use437" /><use
+       x="2432"
+       y="2899"
+       href="#P11"
+       id="use438" /><use
+       x="2317"
+       y="3166"
+       href="#P1"
+       id="use439" /><use
+       x="2323"
+       y="3380"
+       href="#P8"
+       id="use440" /><use
+       x="2479"
+       y="3476"
+       href="#P8"
+       id="use441" /><use
+       x="2410"
+       y="3703"
+       href="#P12"
+       id="use442" /><use
+       x="2348"
+       y="3872"
+       href="#P2"
+       id="use443" /><use
+       x="2427"
+       y="4012"
+       href="#P4"
+       id="use444" /><use
+       x="2406"
+       y="4221"
+       href="#P12"
+       id="use445" /><use
+       x="2337"
+       y="4398"
+       href="#P13"
+       id="use446" /><use
+       x="2403"
+       y="4583"
+       href="#P8"
+       id="use447" /><use
+       x="2478"
+       y="4725"
+       href="#P10"
+       id="use448" /><use
+       x="2500"
+       y="5040"
+       href="#P11"
+       id="use449" /><use
+       x="2325"
+       y="5228"
+       href="#P3"
+       id="use450" /><use
+       x="2541"
+       y="-113"
+       href="#P3"
+       id="use451" /><use
+       x="2543"
+       y="8"
+       href="#P7"
+       id="use452" /><use
+       x="2609"
+       y="146"
+       href="#P1"
+       id="use453" /><use
+       x="2576"
+       y="465"
+       href="#P5"
+       id="use454" /><use
+       x="2577"
+       y="619"
+       href="#P2"
+       id="use455" /><use
+       x="2652"
+       y="739"
+       href="#P12"
+       id="use456" /><use
+       x="2549"
+       y="1028"
+       href="#P10"
+       id="use457" /><use
+       x="2515"
+       y="1109"
+       href="#P10"
+       id="use458" /><use
+       x="2635"
+       y="1299"
+       href="#P9"
+       id="use459" /><use
+       x="2569"
+       y="1421"
+       href="#P5"
+       id="use460" /><use
+       x="2671"
+       y="1633"
+       href="#P9"
+       id="use461" /><use
+       x="2638"
+       y="1921"
+       href="#P10"
+       id="use462" /><use
+       x="2561"
+       y="2017"
+       href="#P12"
+       id="use463" /><use
+       x="2642"
+       y="2237"
+       href="#P12"
+       id="use464" /><use
+       x="2582"
+       y="2446"
+       href="#P5"
+       id="use465" /><use
+       x="2629"
+       y="2645"
+       href="#P5"
+       id="use466" /><use
+       x="2642"
+       y="2831"
+       href="#P13"
+       id="use467" /><use
+       x="2644"
+       y="2979"
+       href="#P3"
+       id="use468" /><use
+       x="2600"
+       y="3170"
+       href="#P9"
+       id="use469" /><use
+       x="2635"
+       y="3387"
+       href="#P5"
+       id="use470" /><use
+       x="2512"
+       y="3524"
+       href="#P3"
+       id="use471" /><use
+       x="2528"
+       y="3692"
+       href="#P12"
+       id="use472" /><use
+       x="2505"
+       y="3897"
+       href="#P6"
+       id="use473" /><use
+       x="2634"
+       y="3968"
+       href="#P5"
+       id="use474" /><use
+       x="2636"
+       y="4247"
+       href="#P11"
+       id="use475" /><use
+       x="2517"
+       y="4390"
+       href="#P7"
+       id="use476" /><use
+       x="2540"
+       y="4585"
+       href="#P1"
+       id="use477" /><use
+       x="2577"
+       y="4715"
+       href="#P2"
+       id="use478" /><use
+       x="2608"
+       y="5027"
+       href="#P8"
+       id="use479" /><use
+       x="2684"
+       y="5208"
+       href="#P10"
+       id="use480" /><use
+       x="2782"
+       y="-158"
+       href="#P4"
+       id="use481" /><use
+       x="2779"
+       y="75"
+       href="#P3"
+       id="use482" /><use
+       x="2723"
+       y="188"
+       href="#P12"
+       id="use483" /><use
+       x="2802"
+       y="432"
+       href="#P10"
+       id="use484" /><use
+       x="2730"
+       y="583"
+       href="#P0"
+       id="use485" /><use
+       x="2732"
+       y="722"
+       href="#P3"
+       id="use486" /><use
+       x="2845"
+       y="903"
+       href="#P10"
+       id="use487" /><use
+       x="2731"
+       y="1152"
+       href="#P9"
+       id="use488" /><use
+       x="2863"
+       y="1387"
+       href="#P2"
+       id="use489" /><use
+       x="2839"
+       y="1481"
+       href="#P3"
+       id="use490" /><use
+       x="2815"
+       y="1618"
+       href="#P6"
+       id="use491" /><use
+       x="2729"
+       y="1794"
+       href="#P12"
+       id="use492" /><use
+       x="2694"
+       y="1988"
+       href="#P1"
+       id="use493" /><use
+       x="2745"
+       y="2220"
+       href="#P3"
+       id="use494" /><use
+       x="2711"
+       y="2317"
+       href="#P6"
+       id="use495" /><use
+       x="2784"
+       y="2635"
+       href="#P8"
+       id="use496" /><use
+       x="2791"
+       y="2825"
+       href="#P11"
+       id="use497" /><use
+       x="2856"
+       y="2907"
+       href="#P0"
+       id="use498" /><use
+       x="2843"
+       y="3059"
+       href="#P6"
+       id="use499" /><use
+       x="2733"
+       y="3290"
+       href="#P10"
+       id="use500" /><use
+       x="2734"
+       y="3433"
+       href="#P0"
+       id="use501" /><use
+       x="2736"
+       y="3638"
+       href="#P2"
+       id="use502" /><use
+       x="2686"
+       y="3922"
+       href="#P13"
+       id="use503" /><use
+       x="2843"
+       y="4046"
+       href="#P7"
+       id="use504" /><use
+       x="2723"
+       y="4286"
+       href="#P11"
+       id="use505" /><use
+       x="2749"
+       y="4363"
+       href="#P1"
+       id="use506" /><use
+       x="2775"
+       y="4595"
+       href="#P11"
+       id="use507" /><use
+       x="2834"
+       y="4854"
+       href="#P2"
+       id="use508" /><use
+       x="2782"
+       y="5008"
+       href="#P9"
+       id="use509" /><use
+       x="2834"
+       y="5069"
+       href="#P7"
+       id="use510" /><use
+       x="2923"
+       y="-176"
+       href="#P2"
+       id="use511" /><use
+       x="2976"
+       y="58"
+       href="#P3"
+       id="use512" /><use
+       x="2994"
+       y="196"
+       href="#P5"
+       id="use513" /><use
+       x="3029"
+       y="444"
+       href="#P12"
+       id="use514" /><use
+       x="2869"
+       y="641"
+       href="#P4"
+       id="use515" /><use
+       x="3045"
+       y="690"
+       href="#P2"
+       id="use516" /><use
+       x="2987"
+       y="1031"
+       href="#P0"
+       id="use517" /><use
+       x="3031"
+       y="1202"
+       href="#P2"
+       id="use518" /><use
+       x="3022"
+       y="1382"
+       href="#P6"
+       id="use519" /><use
+       x="2986"
+       y="1455"
+       href="#P10"
+       id="use520" /><use
+       x="2891"
+       y="1592"
+       href="#P12"
+       id="use521" /><use
+       x="2881"
+       y="1919"
+       href="#P6"
+       id="use522" /><use
+       x="2913"
+       y="2050"
+       href="#P4"
+       id="use523" /><use
+       x="2972"
+       y="2194"
+       href="#P9"
+       id="use524" /><use
+       x="2964"
+       y="2467"
+       href="#P11"
+       id="use525" /><use
+       x="2927"
+       y="2562"
+       href="#P3"
+       id="use526" /><use
+       x="2867"
+       y="2835"
+       href="#P2"
+       id="use527" /><use
+       x="2947"
+       y="3014"
+       href="#P1"
+       id="use528" /><use
+       x="3038"
+       y="3117"
+       href="#P6"
+       id="use529" /><use
+       x="2982"
+       y="3272"
+       href="#P12"
+       id="use530" /><use
+       x="2880"
+       y="3529"
+       href="#P10"
+       id="use531" /><use
+       x="2957"
+       y="3696"
+       href="#P0"
+       id="use532" /><use
+       x="3018"
+       y="3820"
+       href="#P3"
+       id="use533" /><use
+       x="3025"
+       y="4101"
+       href="#P8"
+       id="use534" /><use
+       x="3019"
+       y="4171"
+       href="#P5"
+       id="use535" /><use
+       x="2898"
+       y="4396"
+       href="#P10"
+       id="use536" /><use
+       x="2933"
+       y="4574"
+       href="#P3"
+       id="use537" /><use
+       x="2874"
+       y="4705"
+       href="#P5"
+       id="use538" /><use
+       x="2987"
+       y="4891"
+       href="#P0"
+       id="use539" /><use
+       x="2868"
+       y="5161"
+       href="#P8"
+       id="use540" /><use
+       x="3066"
+       y="-73"
+       href="#P6"
+       id="use541" /><use
+       x="3183"
+       y="-6"
+       href="#P3"
+       id="use542" /><use
+       x="3066"
+       y="239"
+       href="#P2"
+       id="use543" /><use
+       x="3081"
+       y="317"
+       href="#P2"
+       id="use544" /><use
+       x="3210"
+       y="642"
+       href="#P7"
+       id="use545" /><use
+       x="3052"
+       y="780"
+       href="#P3"
+       id="use546" /><use
+       x="3192"
+       y="1021"
+       href="#P2"
+       id="use547" /><use
+       x="3193"
+       y="1077"
+       href="#P1"
+       id="use548" /><use
+       x="3167"
+       y="1358"
+       href="#P1"
+       id="use549" /><use
+       x="3194"
+       y="1404"
+       href="#P3"
+       id="use550" /><use
+       x="3106"
+       y="1743"
+       href="#P13"
+       id="use551" /><use
+       x="3131"
+       y="1906"
+       href="#P0"
+       id="use552" /><use
+       x="3163"
+       y="2040"
+       href="#P11"
+       id="use553" /><use
+       x="3069"
+       y="2211"
+       href="#P2"
+       id="use554" /><use
+       x="3078"
+       y="2382"
+       href="#P7"
+       id="use555" /><use
+       x="3152"
+       y="2661"
+       href="#P9"
+       id="use556" /><use
+       x="3184"
+       y="2743"
+       href="#P11"
+       id="use557" /><use
+       x="3090"
+       y="2925"
+       href="#P2"
+       id="use558" /><use
+       x="3116"
+       y="3128"
+       href="#P2"
+       id="use559" /><use
+       x="3168"
+       y="3265"
+       href="#P13"
+       id="use560" /><use
+       x="3224"
+       y="3572"
+       href="#P0"
+       id="use561" /><use
+       x="3056"
+       y="3728"
+       href="#P12"
+       id="use562" /><use
+       x="3228"
+       y="3908"
+       href="#P8"
+       id="use563" /><use
+       x="3068"
+       y="4126"
+       href="#P0"
+       id="use564" /><use
+       x="3190"
+       y="4167"
+       href="#P2"
+       id="use565" /><use
+       x="3099"
+       y="4350"
+       href="#P10"
+       id="use566" /><use
+       x="3095"
+       y="4617"
+       href="#P9"
+       id="use567" /><use
+       x="3218"
+       y="4719"
+       href="#P4"
+       id="use568" /><use
+       x="3106"
+       y="4883"
+       href="#P1"
+       id="use569" /><use
+       x="3134"
+       y="5160"
+       href="#P3"
+       id="use570" /><use
+       x="3315"
+       y="-68"
+       href="#P12"
+       id="use571" /><use
+       x="3242"
+       y="24"
+       href="#P6"
+       id="use572" /><use
+       x="3242"
+       y="268"
+       href="#P8"
+       id="use573" /><use
+       x="3273"
+       y="386"
+       href="#P5"
+       id="use574" /><use
+       x="3298"
+       y="535"
+       href="#P5"
+       id="use575" /><use
+       x="3328"
+       y="836"
+       href="#P13"
+       id="use576" /><use
+       x="3268"
+       y="966"
+       href="#P2"
+       id="use577" /><use
+       x="3253"
+       y="1099"
+       href="#P11"
+       id="use578" /><use
+       x="3276"
+       y="1300"
+       href="#P6"
+       id="use579" /><use
+       x="3401"
+       y="1423"
+       href="#P12"
+       id="use580" /><use
+       x="3272"
+       y="1767"
+       href="#P7"
+       id="use581" /><use
+       x="3235"
+       y="1944"
+       href="#P10"
+       id="use582" /><use
+       x="3370"
+       y="2068"
+       href="#P2"
+       id="use583" /><use
+       x="3249"
+       y="2194"
+       href="#P6"
+       id="use584" /><use
+       x="3248"
+       y="2406"
+       href="#P10"
+       id="use585" /><use
+       x="3281"
+       y="2619"
+       href="#P7"
+       id="use586" /><use
+       x="3356"
+       y="2858"
+       href="#P11"
+       id="use587" /><use
+       x="3385"
+       y="2961"
+       href="#P8"
+       id="use588" /><use
+       x="3376"
+       y="3134"
+       href="#P11"
+       id="use589" /><use
+       x="3284"
+       y="3273"
+       href="#P11"
+       id="use590" /><use
+       x="3259"
+       y="3551"
+       href="#P10"
+       id="use591" /><use
+       x="3388"
+       y="3731"
+       href="#P3"
+       id="use592" /><use
+       x="3243"
+       y="3899"
+       href="#P7"
+       id="use593" /><use
+       x="3380"
+       y="3993"
+       href="#P10"
+       id="use594" /><use
+       x="3277"
+       y="4157"
+       href="#P6"
+       id="use595" /><use
+       x="3349"
+       y="4413"
+       href="#P7"
+       id="use596" /><use
+       x="3387"
+       y="4698"
+       href="#P10"
+       id="use597" /><use
+       x="3288"
+       y="4706"
+       href="#P9"
+       id="use598" /><use
+       x="3270"
+       y="4951"
+       href="#P10"
+       id="use599" /><use
+       x="3389"
+       y="5214"
+       href="#P6"
+       id="use600" /><use
+       x="3500"
+       y="-97"
+       href="#P13"
+       id="use601" /><use
+       x="3594"
+       y="86"
+       href="#P1"
+       id="use602" /><use
+       x="3420"
+       y="169"
+       href="#P10"
+       id="use603" /><use
+       x="3481"
+       y="393"
+       href="#P7"
+       id="use604" /><use
+       x="3525"
+       y="495"
+       href="#P9"
+       id="use605" /><use
+       x="3553"
+       y="818"
+       href="#P13"
+       id="use606" /><use
+       x="3566"
+       y="934"
+       href="#P1"
+       id="use607" /><use
+       x="3563"
+       y="1098"
+       href="#P12"
+       id="use608" /><use
+       x="3553"
+       y="1302"
+       href="#P4"
+       id="use609" /><use
+       x="3432"
+       y="1547"
+       href="#P11"
+       id="use610" /><use
+       x="3422"
+       y="1641"
+       href="#P1"
+       id="use611" /><use
+       x="3529"
+       y="1844"
+       href="#P11"
+       id="use612" /><use
+       x="3536"
+       y="2110"
+       href="#P11"
+       id="use613" /><use
+       x="3454"
+       y="2222"
+       href="#P10"
+       id="use614" /><use
+       x="3493"
+       y="2445"
+       href="#P11"
+       id="use615" /><use
+       x="3416"
+       y="2535"
+       href="#P0"
+       id="use616" /><use
+       x="3508"
+       y="2852"
+       href="#P3"
+       id="use617" /><use
+       x="3492"
+       y="3050"
+       href="#P3"
+       id="use618" /><use
+       x="3452"
+       y="3223"
+       href="#P6"
+       id="use619" /><use
+       x="3475"
+       y="3408"
+       href="#P13"
+       id="use620" /><use
+       x="3477"
+       y="3425"
+       href="#P2"
+       id="use621" /><use
+       x="3475"
+       y="3633"
+       href="#P1"
+       id="use622" /><use
+       x="3508"
+       y="3883"
+       href="#P8"
+       id="use623" /><use
+       x="3570"
+       y="4136"
+       href="#P13"
+       id="use624" /><use
+       x="3493"
+       y="4269"
+       href="#P10"
+       id="use625" /><use
+       x="3507"
+       y="4469"
+       href="#P12"
+       id="use626" /><use
+       x="3565"
+       y="4533"
+       href="#P10"
+       id="use627" /><use
+       x="3555"
+       y="4788"
+       href="#P12"
+       id="use628" /><use
+       x="3487"
+       y="4920"
+       href="#P4"
+       id="use629" /><use
+       x="3486"
+       y="5246"
+       href="#P4"
+       id="use630" /><use
+       x="3724"
+       y="-237"
+       href="#P1"
+       id="use631" /><use
+       x="3601"
+       y="-42"
+       href="#P5"
+       id="use632" /><use
+       x="3640"
+       y="191"
+       href="#P10"
+       id="use633" /><use
+       x="3746"
+       y="427"
+       href="#P11"
+       id="use634" /><use
+       x="3613"
+       y="603"
+       href="#P4"
+       id="use635" /><use
+       x="3663"
+       y="835"
+       href="#P13"
+       id="use636" /><use
+       x="3684"
+       y="946"
+       href="#P9"
+       id="use637" /><use
+       x="3745"
+       y="1190"
+       href="#P10"
+       id="use638" /><use
+       x="3685"
+       y="1241"
+       href="#P4"
+       id="use639" /><use
+       x="3725"
+       y="1458"
+       href="#P2"
+       id="use640" /><use
+       x="3728"
+       y="1702"
+       href="#P4"
+       id="use641" /><use
+       x="3653"
+       y="1891"
+       href="#P5"
+       id="use642" /><use
+       x="3761"
+       y="2020"
+       href="#P11"
+       id="use643" /><use
+       x="3765"
+       y="2243"
+       href="#P4"
+       id="use644" /><use
+       x="3707"
+       y="2422"
+       href="#P13"
+       id="use645" /><use
+       x="3739"
+       y="2508"
+       href="#P11"
+       id="use646" /><use
+       x="3748"
+       y="2752"
+       href="#P5"
+       id="use647" /><use
+       x="3762"
+       y="3040"
+       href="#P13"
+       id="use648" /><use
+       x="3740"
+       y="3217"
+       href="#P10"
+       id="use649" /><use
+       x="3661"
+       y="3322"
+       href="#P13"
+       id="use650" /><use
+       x="3666"
+       y="3534"
+       href="#P11"
+       id="use651" /><use
+       x="3779"
+       y="3747"
+       href="#P8"
+       id="use652" /><use
+       x="3613"
+       y="3947"
+       href="#P1"
+       id="use653" /><use
+       x="3656"
+       y="4095"
+       href="#P10"
+       id="use654" /><use
+       x="3614"
+       y="4249"
+       href="#P5"
+       id="use655" /><use
+       x="3667"
+       y="4462"
+       href="#P1"
+       id="use656" /><use
+       x="3733"
+       y="4560"
+       href="#P5"
+       id="use657" /><use
+       x="3710"
+       y="4802"
+       href="#P2"
+       id="use658" /><use
+       x="3732"
+       y="4992"
+       href="#P5"
+       id="use659" /><use
+       x="3642"
+       y="5188"
+       href="#P9"
+       id="use660" /><use
+       x="3842"
+       y="-240"
+       href="#P13"
+       id="use661" /><use
+       x="3815"
+       y="117"
+       href="#P6"
+       id="use662" /><use
+       x="3905"
+       y="208"
+       href="#P1"
+       id="use663" /><use
+       x="3933"
+       y="310"
+       href="#P4"
+       id="use664" /><use
+       x="3906"
+       y="585"
+       href="#P4"
+       id="use665" /><use
+       x="3817"
+       y="834"
+       href="#P9"
+       id="use666" /><use
+       x="3876"
+       y="873"
+       href="#P3"
+       id="use667" /><use
+       x="3927"
+       y="1036"
+       href="#P8"
+       id="use668" /><use
+       x="3873"
+       y="1271"
+       href="#P13"
+       id="use669" /><use
+       x="3815"
+       y="1548"
+       href="#P0"
+       id="use670" /><use
+       x="3865"
+       y="1635"
+       href="#P8"
+       id="use671" /><use
+       x="3868"
+       y="1879"
+       href="#P5"
+       id="use672" /><use
+       x="3916"
+       y="2085"
+       href="#P9"
+       id="use673" /><use
+       x="3795"
+       y="2242"
+       href="#P11"
+       id="use674" /><use
+       x="3784"
+       y="2426"
+       href="#P11"
+       id="use675" /><use
+       x="3959"
+       y="2638"
+       href="#P11"
+       id="use676" /><use
+       x="3876"
+       y="2737"
+       href="#P4"
+       id="use677" /><use
+       x="3958"
+       y="2972"
+       href="#P12"
+       id="use678" /><use
+       x="3965"
+       y="3224"
+       href="#P12"
+       id="use679" /><use
+       x="3838"
+       y="3235"
+       href="#P1"
+       id="use680" /><use
+       x="3830"
+       y="3476"
+       href="#P0"
+       id="use681" /><use
+       x="3841"
+       y="3774"
+       href="#P13"
+       id="use682" /><use
+       x="3818"
+       y="3917"
+       href="#P13"
+       id="use683" /><use
+       x="3959"
+       y="4132"
+       href="#P9"
+       id="use684" /><use
+       x="3857"
+       y="4206"
+       href="#P4"
+       id="use685" /><use
+       x="3836"
+       y="4489"
+       href="#P11"
+       id="use686" /><use
+       x="3827"
+       y="4578"
+       href="#P2"
+       id="use687" /><use
+       x="3797"
+       y="4859"
+       href="#P4"
+       id="use688" /><use
+       x="3898"
+       y="5041"
+       href="#P9"
+       id="use689" /><use
+       x="3855"
+       y="5111"
+       href="#P5"
+       id="use690" /><use
+       x="4098"
+       y="-225"
+       href="#P6"
+       id="use691" /><use
+       x="4047"
+       y="-32"
+       href="#P8"
+       id="use692" /><use
+       x="4130"
+       y="223"
+       href="#P11"
+       id="use693" /><use
+       x="4075"
+       y="404"
+       href="#P5"
+       id="use694" /><use
+       x="4116"
+       y="526"
+       href="#P10"
+       id="use695" /><use
+       x="4088"
+       y="835"
+       href="#P1"
+       id="use696" /><use
+       x="4056"
+       y="1004"
+       href="#P2"
+       id="use697" /><use
+       x="3978"
+       y="1084"
+       href="#P4"
+       id="use698" /><use
+       x="4031"
+       y="1340"
+       href="#P0"
+       id="use699" /><use
+       x="4036"
+       y="1563"
+       href="#P0"
+       id="use700" /><use
+       x="3973"
+       y="1724"
+       href="#P0"
+       id="use701" /><use
+       x="4079"
+       y="1864"
+       href="#P13"
+       id="use702" /><use
+       x="4107"
+       y="1981"
+       href="#P5"
+       id="use703" /><use
+       x="4011"
+       y="2251"
+       href="#P12"
+       id="use704" /><use
+       x="4038"
+       y="2332"
+       href="#P13"
+       id="use705" /><use
+       x="4074"
+       y="2604"
+       href="#P13"
+       id="use706" /><use
+       x="4051"
+       y="2767"
+       href="#P4"
+       id="use707" /><use
+       x="4092"
+       y="3046"
+       href="#P3"
+       id="use708" /><use
+       x="4086"
+       y="3062"
+       href="#P13"
+       id="use709" /><use
+       x="4133"
+       y="3235"
+       href="#P9"
+       id="use710" /><use
+       x="3971"
+       y="3518"
+       href="#P9"
+       id="use711" /><use
+       x="4057"
+       y="3761"
+       href="#P13"
+       id="use712" /><use
+       x="4058"
+       y="3955"
+       href="#P11"
+       id="use713" /><use
+       x="4144"
+       y="4042"
+       href="#P11"
+       id="use714" /><use
+       x="3989"
+       y="4322"
+       href="#P2"
+       id="use715" /><use
+       x="4149"
+       y="4409"
+       href="#P2"
+       id="use716" /><use
+       x="3995"
+       y="4581"
+       href="#P1"
+       id="use717" /><use
+       x="4054"
+       y="4804"
+       href="#P4"
+       id="use718" /><use
+       x="4002"
+       y="4927"
+       href="#P8"
+       id="use719" /><use
+       x="4042"
+       y="5209"
+       href="#P4"
+       id="use720" /><use
+       x="4262"
+       y="-247"
+       href="#P4"
+       id="use721" /><use
+       x="4203"
+       y="-53"
+       href="#P0"
+       id="use722" /><use
+       x="4196"
+       y="240"
+       href="#P4"
+       id="use723" /><use
+       x="4218"
+       y="452"
+       href="#P9"
+       id="use724" /><use
+       x="4164"
+       y="568"
+       href="#P7"
+       id="use725" /><use
+       x="4153"
+       y="768"
+       href="#P6"
+       id="use726" /><use
+       x="4321"
+       y="952"
+       href="#P11"
+       id="use727" /><use
+       x="4169"
+       y="1214"
+       href="#P5"
+       id="use728" /><use
+       x="4158"
+       y="1367"
+       href="#P12"
+       id="use729" /><use
+       x="4208"
+       y="1558"
+       href="#P4"
+       id="use730" /><use
+       x="4273"
+       y="1601"
+       href="#P1"
+       id="use731" /><use
+       x="4333"
+       y="1936"
+       href="#P7"
+       id="use732" /><use
+       x="4190"
+       y="1954"
+       href="#P13"
+       id="use733" /><use
+       x="4290"
+       y="2168"
+       href="#P6"
+       id="use734" /><use
+       x="4150"
+       y="2462"
+       href="#P10"
+       id="use735" /><use
+       x="4306"
+       y="2667"
+       href="#P8"
+       id="use736" /><use
+       x="4321"
+       y="2699"
+       href="#P0"
+       id="use737" /><use
+       x="4266"
+       y="2910"
+       href="#P10"
+       id="use738" /><use
+       x="4261"
+       y="3081"
+       href="#P13"
+       id="use739" /><use
+       x="4318"
+       y="3407"
+       href="#P8"
+       id="use740" /><use
+       x="4184"
+       y="3441"
+       href="#P10"
+       id="use741" /><use
+       x="4170"
+       y="3723"
+       href="#P2"
+       id="use742" /><use
+       x="4250"
+       y="3794"
+       href="#P3"
+       id="use743" /><use
+       x="4226"
+       y="4025"
+       href="#P9"
+       id="use744" /><use
+       x="4240"
+       y="4231"
+       href="#P9"
+       id="use745" /><use
+       x="4198"
+       y="4392"
+       href="#P1"
+       id="use746" /><use
+       x="4205"
+       y="4558"
+       href="#P10"
+       id="use747" /><use
+       x="4153"
+       y="4712"
+       href="#P1"
+       id="use748" /><use
+       x="4294"
+       y="4939"
+       href="#P13"
+       id="use749" /><use
+       x="4151"
+       y="5157"
+       href="#P8"
+       id="use750" /><use
+       x="4512"
+       y="-181"
+       href="#P2"
+       id="use751" /><use
+       x="4512"
+       y="-27"
+       href="#P3"
+       id="use752" /><use
+       x="4335"
+       y="183"
+       href="#P9"
+       id="use753" /><use
+       x="4370"
+       y="460"
+       href="#P10"
+       id="use754" /><use
+       x="4356"
+       y="555"
+       href="#P13"
+       id="use755" /><use
+       x="4470"
+       y="700"
+       href="#P7"
+       id="use756" /><use
+       x="4370"
+       y="898"
+       href="#P3"
+       id="use757" /><use
+       x="4424"
+       y="1042"
+       href="#P11"
+       id="use758" /><use
+       x="4515"
+       y="1290"
+       href="#P10"
+       id="use759" /><use
+       x="4499"
+       y="1484"
+       href="#P11"
+       id="use760" /><use
+       x="4361"
+       y="1755"
+       href="#P3"
+       id="use761" /><use
+       x="4459"
+       y="1898"
+       href="#P6"
+       id="use762" /><use
+       x="4362"
+       y="2012"
+       href="#P1"
+       id="use763" /><use
+       x="4378"
+       y="2209"
+       href="#P13"
+       id="use764" /><use
+       x="4342"
+       y="2399"
+       href="#P4"
+       id="use765" /><use
+       x="4433"
+       y="2625"
+       href="#P11"
+       id="use766" /><use
+       x="4502"
+       y="2841"
+       href="#P12"
+       id="use767" /><use
+       x="4502"
+       y="2976"
+       href="#P11"
+       id="use768" /><use
+       x="4491"
+       y="3069"
+       href="#P1"
+       id="use769" /><use
+       x="4498"
+       y="3344"
+       href="#P9"
+       id="use770" /><use
+       x="4334"
+       y="3573"
+       href="#P3"
+       id="use771" /><use
+       x="4353"
+       y="3660"
+       href="#P13"
+       id="use772" /><use
+       x="4490"
+       y="3855"
+       href="#P12"
+       id="use773" /><use
+       x="4401"
+       y="4099"
+       href="#P4"
+       id="use774" /><use
+       x="4423"
+       y="4191"
+       href="#P13"
+       id="use775" /><use
+       x="4501"
+       y="4441"
+       href="#P11"
+       id="use776" /><use
+       x="4344"
+       y="4530"
+       href="#P13"
+       id="use777" /><use
+       x="4436"
+       y="4853"
+       href="#P2"
+       id="use778" /><use
+       x="4389"
+       y="4985"
+       href="#P4"
+       id="use779" /><use
+       x="4453"
+       y="5170"
+       href="#P2"
+       id="use780" /><use
+       x="4621"
+       y="-83"
+       href="#P8"
+       id="use781" /><use
+       x="4584"
+       y="-40"
+       href="#P11"
+       id="use782" /><use
+       x="4525"
+       y="198"
+       href="#P7"
+       id="use783" /><use
+       x="4529"
+       y="454"
+       href="#P13"
+       id="use784" /><use
+       x="4557"
+       y="610"
+       href="#P13"
+       id="use785" /><use
+       x="4697"
+       y="817"
+       href="#P8"
+       id="use786" /><use
+       x="4568"
+       y="912"
+       href="#P4"
+       id="use787" /><use
+       x="4526"
+       y="1202"
+       href="#P0"
+       id="use788" /><use
+       x="4617"
+       y="1307"
+       href="#P12"
+       id="use789" /><use
+       x="4563"
+       y="1460"
+       href="#P3"
+       id="use790" /><use
+       x="4521"
+       y="1660"
+       href="#P0"
+       id="use791" /><use
+       x="4575"
+       y="1938"
+       href="#P4"
+       id="use792" /><use
+       x="4607"
+       y="2109"
+       href="#P13"
+       id="use793" /><use
+       x="4595"
+       y="2186"
+       href="#P10"
+       id="use794" /><use
+       x="4624"
+       y="2327"
+       href="#P6"
+       id="use795" /><use
+       x="4674"
+       y="2677"
+       href="#P0"
+       id="use796" /><use
+       x="4684"
+       y="2864"
+       href="#P7"
+       id="use797" /><use
+       x="4533"
+       y="2947"
+       href="#P5"
+       id="use798" /><use
+       x="4559"
+       y="3213"
+       href="#P9"
+       id="use799" /><use
+       x="4556"
+       y="3288"
+       href="#P10"
+       id="use800" /><use
+       x="4571"
+       y="3594"
+       href="#P0"
+       id="use801" /><use
+       x="4539"
+       y="3673"
+       href="#P4"
+       id="use802" /><use
+       x="4698"
+       y="3787"
+       href="#P13"
+       id="use803" /><use
+       x="4539"
+       y="4089"
+       href="#P12"
+       id="use804" /><use
+       x="4644"
+       y="4251"
+       href="#P5"
+       id="use805" /><use
+       x="4645"
+       y="4420"
+       href="#P7"
+       id="use806" /><use
+       x="4607"
+       y="4629"
+       href="#P1"
+       id="use807" /><use
+       x="4558"
+       y="4793"
+       href="#P1"
+       id="use808" /><use
+       x="4598"
+       y="5023"
+       href="#P5"
+       id="use809" /><use
+       x="4520"
+       y="5119"
+       href="#P12"
+       id="use810" /><use
+       x="4812"
+       y="-117"
+       href="#P1"
+       id="use811" /><use
+       x="4816"
+       y="-52"
+       href="#P10"
+       id="use812" /><use
+       x="4878"
+       y="230"
+       href="#P5"
+       id="use813" /><use
+       x="4793"
+       y="386"
+       href="#P8"
+       id="use814" /><use
+       x="4762"
+       y="609"
+       href="#P1"
+       id="use815" /><use
+       x="4721"
+       y="808"
+       href="#P8"
+       id="use816" /><use
+       x="4841"
+       y="939"
+       href="#P13"
+       id="use817" /><use
+       x="4773"
+       y="1193"
+       href="#P5"
+       id="use818" /><use
+       x="4790"
+       y="1382"
+       href="#P6"
+       id="use819" /><use
+       x="4813"
+       y="1553"
+       href="#P7"
+       id="use820" /><use
+       x="4746"
+       y="1669"
+       href="#P2"
+       id="use821" /><use
+       x="4844"
+       y="1877"
+       href="#P0"
+       id="use822" /><use
+       x="4817"
+       y="2110"
+       href="#P0"
+       id="use823" /><use
+       x="4805"
+       y="2169"
+       href="#P12"
+       id="use824" /><use
+       x="4778"
+       y="2466"
+       href="#P9"
+       id="use825" /><use
+       x="4850"
+       y="2506"
+       href="#P3"
+       id="use826" /><use
+       x="4868"
+       y="2703"
+       href="#P2"
+       id="use827" /><use
+       x="4876"
+       y="3001"
+       href="#P10"
+       id="use828" /><use
+       x="4766"
+       y="3089"
+       href="#P10"
+       id="use829" /><use
+       x="4782"
+       y="3301"
+       href="#P11"
+       id="use830" /><use
+       x="4819"
+       y="3467"
+       href="#P12"
+       id="use831" /><use
+       x="4729"
+       y="3651"
+       href="#P13"
+       id="use832" /><use
+       x="4829"
+       y="3893"
+       href="#P10"
+       id="use833" /><use
+       x="4793"
+       y="4092"
+       href="#P6"
+       id="use834" /><use
+       x="4859"
+       y="4167"
+       href="#P1"
+       id="use835" /><use
+       x="4755"
+       y="4467"
+       href="#P4"
+       id="use836" /><use
+       x="4713"
+       y="4660"
+       href="#P10"
+       id="use837" /><use
+       x="4865"
+       y="4846"
+       href="#P6"
+       id="use838" /><use
+       x="4816"
+       y="5041"
+       href="#P11"
+       id="use839" /><use
+       x="4877"
+       y="5177"
+       href="#P2"
+       id="use840" /><use
+       x="4902"
+       y="-236"
+       href="#P2"
+       id="use841" /><use
+       x="5047"
+       y="-35"
+       href="#P2"
+       id="use842" /><use
+       x="4996"
+       y="279"
+       href="#P5"
+       id="use843" /><use
+       x="4931"
+       y="400"
+       href="#P12"
+       id="use844" /><use
+       x="4986"
+       y="647"
+       href="#P5"
+       id="use845" /><use
+       x="4995"
+       y="724"
+       href="#P9"
+       id="use846" /><use
+       x="5013"
+       y="1005"
+       href="#P4"
+       id="use847" /><use
+       x="5032"
+       y="1132"
+       href="#P6"
+       id="use848" /><use
+       x="4956"
+       y="1255"
+       href="#P0"
+       id="use849" /><use
+       x="4963"
+       y="1403"
+       href="#P6"
+       id="use850" /><use
+       x="5000"
+       y="1760"
+       href="#P8"
+       id="use851" /><use
+       x="4980"
+       y="1902"
+       href="#P5"
+       id="use852" /><use
+       x="4947"
+       y="2043"
+       href="#P6"
+       id="use853" /><use
+       x="4937"
+       y="2267"
+       href="#P2"
+       id="use854" /><use
+       x="4998"
+       y="2384"
+       href="#P2"
+       id="use855" /><use
+       x="5040"
+       y="2531"
+       href="#P5"
+       id="use856" /><use
+       x="4952"
+       y="2813"
+       href="#P0"
+       id="use857" /><use
+       x="5041"
+       y="2924"
+       href="#P13"
+       id="use858" /><use
+       x="4891"
+       y="3114"
+       href="#P2"
+       id="use859" /><use
+       x="4994"
+       y="3341"
+       href="#P6"
+       id="use860" /><use
+       x="4942"
+       y="3536"
+       href="#P9"
+       id="use861" /><use
+       x="4970"
+       y="3732"
+       href="#P9"
+       id="use862" /><use
+       x="4909"
+       y="3966"
+       href="#P1"
+       id="use863" /><use
+       x="5052"
+       y="3993"
+       href="#P11"
+       id="use864" /><use
+       x="4985"
+       y="4268"
+       href="#P12"
+       id="use865" /><use
+       x="4936"
+       y="4475"
+       href="#P4"
+       id="use866" /><use
+       x="4910"
+       y="4547"
+       href="#P11"
+       id="use867" /><use
+       x="5052"
+       y="4763"
+       href="#P7"
+       id="use868" /><use
+       x="4991"
+       y="5015"
+       href="#P3"
+       id="use869" /><use
+       x="4933"
+       y="5198"
+       href="#P1"
+       id="use870" /><use
+       x="5170"
+       y="-100"
+       href="#P7"
+       id="use871" /><use
+       x="5159"
+       y="57"
+       href="#P12"
+       id="use872" /><use
+       x="5072"
+       y="238"
+       href="#P6"
+       id="use873" /><use
+       x="5130"
+       y="371"
+       href="#P9"
+       id="use874" /><use
+       x="5119"
+       y="627"
+       href="#P4"
+       id="use875" /><use
+       x="5141"
+       y="682"
+       href="#P13"
+       id="use876" /><use
+       x="5187"
+       y="899"
+       href="#P1"
+       id="use877" /><use
+       x="5139"
+       y="1102"
+       href="#P10"
+       id="use878" /><use
+       x="5195"
+       y="1388"
+       href="#P5"
+       id="use879" /><use
+       x="5175"
+       y="1474"
+       href="#P13"
+       id="use880" /><use
+       x="5213"
+       y="1711"
+       href="#P0"
+       id="use881" /><use
+       x="5146"
+       y="1918"
+       href="#P1"
+       id="use882" /><use
+       x="5091"
+       y="2058"
+       href="#P7"
+       id="use883" /><use
+       x="5225"
+       y="2142"
+       href="#P6"
+       id="use884" /><use
+       x="5159"
+       y="2358"
+       href="#P9"
+       id="use885" /><use
+       x="5182"
+       y="2571"
+       href="#P4"
+       id="use886" /><use
+       x="5211"
+       y="2818"
+       href="#P10"
+       id="use887" /><use
+       x="5152"
+       y="2905"
+       href="#P5"
+       id="use888" /><use
+       x="5167"
+       y="3088"
+       href="#P10"
+       id="use889" /><use
+       x="5086"
+       y="3277"
+       href="#P7"
+       id="use890" /><use
+       x="5097"
+       y="3434"
+       href="#P1"
+       id="use891" /><use
+       x="5092"
+       y="3780"
+       href="#P5"
+       id="use892" /><use
+       x="5090"
+       y="3873"
+       href="#P9"
+       id="use893" /><use
+       x="5174"
+       y="4003"
+       href="#P6"
+       id="use894" /><use
+       x="5133"
+       y="4241"
+       href="#P12"
+       id="use895" /><use
+       x="5165"
+       y="4461"
+       href="#P0"
+       id="use896" /><use
+       x="5097"
+       y="4579"
+       href="#P4"
+       id="use897" /><use
+       x="5136"
+       y="4848"
+       href="#P8"
+       id="use898" /><use
+       x="5080"
+       y="4899"
+       href="#P1"
+       id="use899" /><use
+       x="5201"
+       y="5206"
+       href="#P11"
+       id="use900" /></g><path
+     fill="#607d8b"
+     d="m 367.99048,159.89717 c 0.45986,-3.21908 0.91973,-6.43816 0.91973,-10.11711 0,-3.67895 -0.45987,-6.89803 -0.91973,-10.11711 l 20.69408,-14.71579 c 1.83947,-1.3796 2.75921,-4.13881 1.3796,-6.43815 L 369.82995,84.478741 c -1.37961,-2.299343 -3.67895,-3.21908 -5.97829,-1.839474 l -22.99342,10.576974 c -5.51842,-4.138816 -11.03685,-7.357895 -17.475,-10.117106 L 321.08389,57.80637 c -0.45986,-2.299342 -2.29934,-4.138816 -4.59868,-4.138816 h -39.54869 c -2.29934,0 -4.59868,1.839474 -4.59868,4.138816 l -2.29934,25.292765 c -6.43816,2.759211 -12.41645,5.97829 -17.475,10.117106 L 229.57007,82.639267 c -2.29934,-0.919737 -5.05855,0 -5.97829,1.839474 l -19.77434,34.030269 c -1.37961,2.29934 -0.45987,5.05855 1.3796,6.43815 l 20.69409,14.71579 c -0.45987,3.21908 -0.91974,6.43816 -0.91974,10.11711 0,3.67895 0.45987,6.89803 0.91974,10.11711 l -21.61382,14.71579 c -1.83948,1.3796 -2.75921,4.13881 -1.37961,6.43816 l 19.77435,34.03026 c 1.3796,2.29934 3.67894,3.21908 5.97829,1.83947 l 22.99342,-10.57697 c 5.51842,4.13882 11.03684,7.3579 17.475,10.11711 l 2.29934,25.29276 c 0.45987,2.29934 2.29934,4.13882 4.59869,4.13882 h 39.54868 c 2.29935,0 4.59869,-1.83948 4.59869,-4.13882 l 2.29934,-25.29276 c 6.43816,-2.75921 12.41645,-5.97829 17.475,-10.11711 l 22.99342,10.57697 c 2.29935,0.91974 5.05856,0 5.97829,-1.83947 l 19.77435,-34.03026 c 1.3796,-2.29935 0.45986,-5.05856 -1.37961,-6.43816 z M 296.251,195.76691 c -25.29277,0 -45.98685,-20.69408 -45.98685,-45.98685 0,-25.29276 20.69408,-45.98684 45.98685,-45.98684 25.29276,0 45.98684,20.69408 45.98684,45.98684 0,25.29277 -20.69408,45.98685 -45.98684,45.98685 z"
+     id="path1"
+     style="fill:#818181;fill-opacity:1;stroke-width:4.59868" /><path
+     fill="#455a64"
+     d="m 296.251,94.595846 c -30.35132,0 -55.18422,24.832894 -55.18422,55.184214 0,30.35132 24.8329,55.18421 55.18422,55.18421 30.35132,0 55.18421,-24.83289 55.18421,-55.18421 0,-30.35132 -24.83289,-55.184214 -55.18421,-55.184214 z m 0,78.177634 c -12.87632,0 -22.99342,-10.1171 -22.99342,-22.99342 0,-12.87632 10.1171,-22.99342 22.99342,-22.99342 12.87631,0 22.99342,10.1171 22.99342,22.99342 0,12.87632 -10.11711,22.99342 -22.99342,22.99342 z"
+     id="path2"
+     style="fill:#5a5a5a;fill-opacity:1;stroke-width:4.59868" /></svg>
diff --git a/static/images/extensions/operators_expansion.png b/static/images/extensions/operators_expansion.png
new file mode 100644
index 0000000..7920e3a
Binary files /dev/null and b/static/images/extensions/operators_expansion.png differ
diff --git a/static/images/extensions/text_edit.png b/static/images/extensions/text_edit.png
new file mode 100644
index 0000000..4b5ac84
Binary files /dev/null and b/static/images/extensions/text_edit.png differ
