diff --git a/frontend/public/icons/wizard.svg b/frontend/public/icons/wizard.svg
new file mode 100644
index 000000000..f3f27b97c
--- /dev/null
+++ b/frontend/public/icons/wizard.svg
@@ -0,0 +1 @@
+<svg width="32" height="32" version="1.1" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="m16.04 2.7333e-5c-1.2683 0.0089521-1.7367 1.4846-2.3265 2.7954-2.1956 5.9675-4.4206 11.926-6.5983 17.899-0.011715 0.05478-0.017645 0.09813-0.027934 0.14964-0.27274 0.08988-0.53999 0.18258-0.79611 0.28133-1.281 0.49392-2.3592 1.0888-3.1784 1.8356s-1.4087 1.7187-1.4087 2.8213 0.58936 2.0765 1.4087 2.8233 1.8974 1.3397 3.1784 1.8336c2.5621 0.98783 5.9589 1.5603 9.7089 1.5603s7.1468-0.57246 9.7089-1.5603c1.281-0.49392 2.3592-1.0868 3.1784-1.8336 0.81929-0.74683 1.4087-1.7207 1.4087-2.8233s-0.58936-2.0745-1.4087-2.8213c-0.81929-0.74683-1.8974-1.3417-3.1784-1.8356-0.25623-0.0988-0.52328-0.19133-0.79611-0.28133-0.0701-0.33692-0.16011-0.65871-0.22945-0.73226-2.3473-6.348-4.1592-11.095-6.5125-17.441-0.4063-0.99198-1.0057-2.6796-2.1309-2.6717zm-0.03991 3.2363c2.2251 6.0443 4.4718 12.083 6.6881 18.129 0.10076 1.2132-1.1531 1.9648-2.103 2.4163-2.8676 1.202-6.2404 1.2027-9.1163 0.02594-0.96648-0.45401-2.2496-1.1773-2.1529-2.4123 1.1527-3.2582 2.3918-6.4918 3.5755-9.7409zm-8.6215 19.943c1.0333 2.0257 3.3799 3.0125 5.5029 3.4817 3.3522 0.64967 7.0862 0.37348 9.9962-1.5463 0.71559-0.48775 1.357-1.1534 1.7419-1.9354 0.08696 0.03104 0.17987 0.05959 0.26337 0.09178 1.098 0.42333 1.945 0.92273 2.4562 1.3887 0.51119 0.46598 0.65844 0.82624 0.65844 1.1233 0 0.29709-0.14725 0.65736-0.65844 1.1233-0.51119 0.46598-1.3582 0.96537-2.4562 1.3887-2.1959 0.84665-5.3724 1.4067-8.8829 1.4067s-6.687-0.56-8.8829-1.4067c-1.098-0.42333-1.945-0.92273-2.4562-1.3887-0.51119-0.46598-0.65844-0.82624-0.65844-1.1233 0-0.29709 0.14725-0.65736 0.65844-1.1233s1.3582-0.96537 2.4562-1.3887c0.082904-0.03196 0.17507-0.0609 0.26138-0.09178z"/></svg>
diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
index acf3c4ec8..502887671 100644
--- a/frontend/src/App.svelte
+++ b/frontend/src/App.svelte
@@ -42,20 +42,23 @@
     selectedResource,
     settings,
     dataLength,
+    viewCrumbs,
   } from "./stores.js";
   import { keyEventToString, shortcuts } from "./keyboard.js";
 
+  import RootWizardView from "./patch_wizard/RootWizardView.svelte";
+
   printConsoleArt();
 
-  let showRootResource = false,
-    showProjectManager = false,
-    dataLenPromise = Promise.resolve([]),
+  let dataLenPromise = Promise.resolve([]),
     useAssemblyView = false,
     useTextView = false,
     rootResourceLoadPromise = new Promise((resolve) => {}),
     resources = {};
   let currentResource, rootResource, modifierView, bottomLeftPane;
 
+  let topLevelView = null;
+
   // TODO: Move to settings
   let riddleAnswered = JSON.parse(window.localStorage.getItem("riddleSolved"));
   if (riddleAnswered === null || riddleAnswered === undefined) {
@@ -154,12 +157,14 @@ Answer by running riddle.answer('your answer here') from the console.`);
   $: docstyle.setProperty("--accent-text-color", $settings.accentText);
   $: docstyle.setProperty("--last-modified-color", $settings.lastModified);
   $: docstyle.setProperty("--all-modified-color", $settings.allModified);
+
+  $: topLevelView = $viewCrumbs[$viewCrumbs.length - 1];
 </script>
 
 <svelte:window on:popstate="{backButton}" on:keyup="{handleShortcut}" />
 <Gamepad />
 
-{#if showRootResource}
+{#if topLevelView === "rootResource"}
   {#await rootResourceLoadPromise}
     <LoadingAnimation />
   {:then _}
@@ -176,8 +181,6 @@ Answer by running riddle.answer('your answer here') from the console.`);
               rootResource="{rootResource}"
               bind:bottomLeftPane="{bottomLeftPane}"
               bind:modifierView="{modifierView}"
-              bind:showProjectManager="{showProjectManager}"
-              bind:showRootResource="{showRootResource}"
             />
           {/if}
         </Pane>
@@ -207,19 +210,17 @@ Answer by running riddle.answer('your answer here') from the console.`);
       <AudioPlayer />
     </div>
   {/if}
-{:else if showProjectManager}
+{:else if topLevelView === "projectManager"}
   <ProjectManagerView
     bind:rootResourceLoadPromise="{rootResourceLoadPromise}"
     bind:rootResource="{rootResource}"
     bind:resources="{resources}"
-    bind:showRootResource="{showRootResource}"
-    bind:showProjectManager="{showProjectManager}"
   />
-{:else}
+{:else if topLevelView === "patchWizard"}
+  <RootWizardView />
+{:else if topLevelView === "start"}
   <StartView
     bind:rootResourceLoadPromise="{rootResourceLoadPromise}"
-    bind:showRootResource="{showRootResource}"
-    bind:showProjectManager="{showProjectManager}"
     bind:resources="{resources}"
     bind:rootResource="{rootResource}"
   />
diff --git a/frontend/src/ofrak/remote_resource.js b/frontend/src/ofrak/remote_resource.js
index 77cad8187..03dd07202 100644
--- a/frontend/src/ofrak/remote_resource.js
+++ b/frontend/src/ofrak/remote_resource.js
@@ -646,7 +646,7 @@ export class RemoteResource extends Resource {
     });
   }
 
-  async run_component(component, configtype, response) {
+  async run_component(component, configtype, config) {
     const result = await fetch(
       `${this.uri}/run_component?component=${component}`,
       {
@@ -654,7 +654,7 @@ export class RemoteResource extends Resource {
         headers: {
           "Content-Type": "application/json",
         },
-        body: JSON.stringify([configtype, response]),
+        body: JSON.stringify(config),
       }
     ).then(async (r) => {
       if (!r.ok) {
diff --git a/frontend/src/patch_wizard/FreeSpaceView.svelte b/frontend/src/patch_wizard/FreeSpaceView.svelte
new file mode 100644
index 000000000..032bc910b
--- /dev/null
+++ b/frontend/src/patch_wizard/FreeSpaceView.svelte
@@ -0,0 +1,408 @@
+<style>
+  .outlined-box {
+    border: thin solid;
+    padding: 1em;
+    margin-bottom: 1.5em;
+  }
+  .alloc-box {
+    display: inline-flex;
+    height: fit-content;
+    width: 100%;
+  }
+
+  .seg-box {
+    width: 50%;
+    min-height: 100%;
+  }
+
+  .freespace-box {
+    width: 50%;
+    min-height: 100%;
+  }
+
+  .invalid {
+    opacity: 50%;
+  }
+
+  .complex-block {
+    display: flex;
+  }
+
+  .cb-info {
+    margin-left: 1em;
+  }
+
+  .cb-list {
+    max-height: 10em;
+    overflow-y: scroll;
+  }
+
+  .extension-tech-box {
+    border: thin dotted;
+    margin-top: 1em;
+    padding: 0.5em;
+  }
+
+  .warning {
+    text-decoration-line: underline;
+    text-decoration-color: red;
+  }
+</style>
+
+<script>
+  import Button from "../utils/Button.svelte";
+
+  import { selectedResource, settings } from "../stores";
+  import Checkbox from "../utils/Checkbox.svelte";
+  import SegmentWidget from "./SegmentWidget.svelte";
+  import LoadingText from "../utils/LoadingText.svelte";
+
+  export let patchInfo, refreshOverviewCallback;
+
+  let unallocatedSegments = [];
+
+  let freeSpacePromise = getFreeSpace();
+
+  let segFilterR = false,
+    segFilterW = false,
+    segFilterX = false;
+  let unallocatedOnly = false;
+  let filteredUnallocatedSegments = [];
+  let freeFilterR = false,
+    freeFilterW = false,
+    freeFilterX = false;
+  let filteredFreeSpacePromise = Promise.resolve([]);
+
+  if (patchInfo.extensionMethodStatus === undefined) {
+    patchInfo.extensionMethodStatus = {
+      note: { valid: true, status: null },
+      load_align: { valid: true, status: null },
+    };
+  }
+
+  let complexBlocksToFree = {};
+
+  const canExtend = $selectedResource.tags.includes("ofrak.core.elf.model.Elf");
+
+  async function getFreeSpace() {
+    await $selectedResource.run_component("FreeSpaceAnalyzer", "", [
+      "ofrak.model.component_model.ComponentConfig",
+      {},
+    ]);
+    return $selectedResource.attributes[
+      "ofrak.model._auto_attributes.AttributesType[Allocatable]"
+    ].free_space_ranges;
+  }
+
+  async function extendElf(method) {
+    // await $selectedResource.run_component("ElfLoadAlignmentModifier");
+    fetch(
+      `${$settings.backendUrl}/patch_wizard/extend_elf?patch_name=${patchInfo.name}&method=${method}`,
+      {
+        method: "POST",
+      }
+    ).then(async (r) => {
+      if (!r.ok) {
+        if (r.status === 520) {
+          patchInfo.extensionMethodStatus[method].valid = false;
+        } else {
+          throw Error(JSON.stringify(await r.json(), undefined, 2));
+        }
+      } else {
+        freeSpacePromise = getFreeSpace();
+        if (method === "note") {
+          patchInfo.extensionMethodStatus["load_align"] = {
+            valid: false,
+            status:
+              "After introducing a new segment with NOTE-replacing, alignment recovery would give uncertain results.",
+          };
+        }
+      }
+      patchInfo.extensionMethodStatus[method].status = await r.text();
+    });
+  }
+
+  async function getComplexBlocks() {
+    return fetch(
+      `${$settings.backendUrl}/patch_wizard/get_complex_blocks?patch_name=${patchInfo.name}`,
+      {
+        method: "POST",
+      }
+    ).then(async (r) => {
+      if (!r.ok) {
+        throw Error(JSON.stringify(await r.json(), undefined, 2));
+      } else {
+        return await r.json();
+      }
+    });
+  }
+
+  function totalSelectedComplexBlockSize(_complexBlocksToFree, complexBlocks) {
+    const complexBlockSizeMap = Object.fromEntries(
+      complexBlocks.map((cbObject) => [cbObject.id, cbObject.size])
+    );
+    return Object.entries(_complexBlocksToFree)
+      .filter(([id, _]) => _complexBlocksToFree.hasOwnProperty(id)) // Filter generic object stuff
+      .filter(([_, selected]) => selected) // Get IDs of selected CBs
+      .map(([id, _]) => complexBlockSizeMap[id]) // Get sizes of selected CBs
+      .reduce((sum, size) => sum + size, 0); // Sum sizes of selected CBs
+  }
+
+  async function freeComplexBlocks() {
+    const idsToFree = Object.entries(complexBlocksToFree)
+      .filter(([id, _]) => complexBlocksToFree.hasOwnProperty(id)) // Filter generic object stuff
+      .filter(([_, selected]) => selected) // Get IDs of selected CBs
+      .map(([id, _]) => id); // Only need the IDs
+
+    await fetch(
+      `${$settings.backendUrl}/patch_wizard/free_complex_blocks?patch_name=${patchInfo.name}`,
+      {
+        method: "POST",
+        body: JSON.stringify(idsToFree),
+      }
+    ).then(async (r) => {
+      if (!r.ok) {
+        throw Error(JSON.stringify(await r.json(), undefined, 2));
+      }
+      freeSpacePromise = getFreeSpace();
+      complexBlocksPromise = getComplexBlocks();
+    });
+  }
+
+  function permsMatch(perms, r, w, x) {
+    // Permissions "match" if either:
+    // 1. No specific permissions have been checked
+    // 2. The permissions checked EXACTLY match the passed perms
+    return (
+      (!r && !w && !x) ||
+      (perms.includes("r") === r &&
+        perms.includes("w") === w &&
+        perms.includes("x") === x)
+    );
+  }
+
+  function permsToString(r, w, x) {
+    return (r ? "R" : "") + (w ? "W" : "") + (x ? "X" : "");
+  }
+
+  function totalSize(segInfos) {
+    return segInfos.reduce((sum, segInfo) => sum + segInfo.size, 0);
+  }
+
+  let complexBlocksPromise = getComplexBlocks();
+
+  // Update overall list of unallocated segments
+  $: if (patchInfo.objectInfos) {
+    unallocatedSegments = patchInfo.objectInfos
+      .map((objInfo) => objInfo.segments) // Extract the segments
+      .flat() // Convert from array of arrays to flat array of all segments
+      .filter((segInfo) => segInfo.include) // Only segments included in patch
+      .filter((segInfo) => typeof segInfo.allocatedVaddr !== "number"); // Only unallocated segs
+  }
+
+  // Update filtered list of unallocated segments matching selected segment permissions
+  $: if (patchInfo.objectInfos) {
+    filteredUnallocatedSegments = patchInfo.objectInfos
+      .map((objInfo) => objInfo.segments) // Extract the segments
+      .flat() // Convert from array of arrays to flat array of all segments
+      .filter((segInfo) => segInfo.include) // Only segments included in patch
+      .filter(
+        (segInfo) =>
+          !unallocatedOnly || typeof segInfo.allocatedVaddr !== "number"
+      ) // Only unallocated segs?
+      .filter((segInfo) =>
+        permsMatch(segInfo.permissions, segFilterR, segFilterW, segFilterX)
+      );
+  }
+
+  // Update the list of free space blocks matching selected free space permissions
+  $: if (freeSpacePromise) {
+    filteredFreeSpacePromise = freeSpacePromise.then((fs) => {
+      const filteredFreeBlocks = fs
+        .filter(([perms, ranges]) =>
+          permsMatch(
+            perms.split(".").at(-1).toLowerCase(),
+            freeFilterR,
+            freeFilterW,
+            freeFilterX
+          )
+        ) // Only blocks matching the selected permissions
+        .map(([perms, ranges]) => ranges) // Only need the free blocks
+        .flat(); // Convert from array of arrays to flat array of free block ranges
+      filteredFreeBlocks.sort(
+        ([start1, end1], [start2, end2]) => end2 - start2 - (end1 - start1)
+      );
+      return filteredFreeBlocks;
+    });
+  }
+</script>
+
+{#if unallocatedSegments.length > 0}
+  <p class="warning">
+    {unallocatedSegments.length} segment(s) totaling 0x{totalSize(
+      unallocatedSegments
+    ).toString(16)} bytes still need to be allocated.
+  </p>
+{:else if patchInfo?.objectInfos}
+  <p>
+    No unallocated segments (out of {patchInfo.objectInfos
+      .map((objInfo) => objInfo.segments)
+      .flat()
+      .filter((seg) => seg.include).length} segments included).
+  </p>
+{:else}
+  <p>No segments.</p>
+{/if}
+<div class="alloc-box">
+  <div class="seg-box outlined-box">
+    <div class="perms-select">
+      <h3>Segments to allocate:</h3>
+      <Checkbox bind:value="{segFilterR}" checked="{false}">R</Checkbox>
+      <Checkbox bind:value="{segFilterW}" checked="{false}">W</Checkbox>
+      <Checkbox bind:value="{segFilterX}" checked="{false}">X</Checkbox>
+
+      <Checkbox bind:value="{unallocatedOnly}" checked="{false}"
+        >Unallocated Only</Checkbox
+      >
+    </div>
+
+    <p>
+      Total {unallocatedOnly ? "unallocated" : ""}
+      {permsToString(segFilterR, segFilterW, segFilterX)} segment size: 0x{totalSize(
+        filteredUnallocatedSegments
+      ).toString(16)}
+    </p>
+
+    {#each filteredUnallocatedSegments as segInfo}
+      <SegmentWidget
+        segmentInfo="{segInfo}"
+        refreshOverviewCallback="{refreshOverviewCallback}"
+        lockInclude="{true}"
+      />
+    {/each}
+  </div>
+
+  <div class="freespace-box outlined-box">
+    <div class="perms-select">
+      <h3>Free Space to allocate:</h3>
+      <Checkbox bind:value="{freeFilterR}" checked="{false}">R</Checkbox>
+      <Checkbox bind:value="{freeFilterW}" checked="{false}">W</Checkbox>
+      <Checkbox bind:value="{freeFilterX}" checked="{false}">X</Checkbox>
+    </div>
+
+    {#await freeSpacePromise}
+      <p>Fetching free space...</p>
+    {:then freeSpace}
+      {#await filteredFreeSpacePromise}
+        <p>Processing free space...</p>
+      {:then filteredFreeSpace}
+        <p>
+          {filteredFreeSpace.length} matching blocks of {permsToString(
+            freeFilterR,
+            freeFilterW,
+            freeFilterX
+          )} free space (out of {freeSpace.map(([_, ranges]) => ranges).flat()
+            .length} total ranges with {freeSpace.length} unique permission spec{freeSpace.length >
+          1
+            ? "s"
+            : ""}).
+        </p>
+        {#each filteredFreeSpace as [blockStart, blockEnd]}
+          <p>
+            [0x{blockStart.toString(16)}-0x{blockEnd.toString(16)} (0x{(
+              blockEnd - blockStart
+            ).toString(16)} bytes)]
+          </p>
+        {/each}
+        <p>
+          Total {permsToString(freeFilterR, freeFilterW, freeFilterX)} free space:
+          0x{filteredFreeSpace
+            .reduce((sum, [start, end]) => sum + end - start, 0)
+            .toString(16)}
+        </p>
+      {/await}
+    {/await}
+  </div>
+</div>
+
+<div class="extension-box outlined-box" class:invalid="{!canExtend}">
+  <h3>Create Free Space: Extend Binary (ELF Only)</h3>
+  <div class="extension-tech-box">
+    <h4>Recover Unused Alignment</h4>
+    <p>
+      Reclaim unused alignment bytes between adjacent PT_LOAD segment in an ELF
+      and tag them as free space. Alignment bytes often exist between PT_LOAD
+      sections in ELF binaries. These alignment bytes are added to the preceding
+      PT_LOAD segment. This is the least invasive ELF extension technique.
+    </p>
+
+    <Button
+      on:click="{() => extendElf('load_align')}"
+      disabled="{!canExtend ||
+        !patchInfo.extensionMethodStatus.load_align.valid}">Apply</Button
+    >
+    {#if patchInfo.extensionMethodStatus.load_align.status}
+      {#if patchInfo.extensionMethodStatus.load_align.valid}
+        <p>Success! {patchInfo.extensionMethodStatus.load_align.status}</p>
+      {:else}
+        <p class="warning">
+          {patchInfo.extensionMethodStatus.load_align.status}
+        </p>
+      {/if}
+    {/if}
+  </div>
+  <div class="extension-tech-box">
+    <h4>Replace NOTE Segment</h4>
+    <p>
+      If the ELF has a .NOTE segment, we can replace the .NOTE header with a
+      .LOAD header pointing to some new space we weill add at the end. Adds
+      0x1000 bytes by default. WARNING: Will require the ELF to be re-analyzed
+      and unpacked.
+    </p>
+    <Button
+      on:click="{() => extendElf('note')}"
+      disabled="{!canExtend || !patchInfo.extensionMethodStatus.note.valid}"
+      >Apply</Button
+    >
+    {#if patchInfo.extensionMethodStatus.note.status}
+      {#if patchInfo.extensionMethodStatus.note.valid}
+        <p>Success! {patchInfo.extensionMethodStatus.note.status}</p>
+      {:else}
+        <p class="warning">{patchInfo.extensionMethodStatus.note.status}</p>
+      {/if}
+    {/if}
+  </div>
+</div>
+
+<div class="functions-box outlined-box">
+  <h3>Create Free Space: Overwrite Existing Functions</h3>
+
+  {#await complexBlocksPromise}
+    <LoadingText />
+  {:then complexBlocks}
+    <div class="cb-list">
+      {#each complexBlocks as cbObject}
+        <div class="complex-block">
+          <Checkbox
+            checked="{false}"
+            bind:value="{complexBlocksToFree[cbObject.id]}"
+          />
+          <p class="cb-info">
+            {cbObject.name} (0x{cbObject.vaddr.toString(16)}-0x{(
+              cbObject.vaddr + cbObject.size
+            ).toString(16)})
+          </p>
+        </div>
+      {/each}
+    </div>
+
+    <p>
+      0x{totalSelectedComplexBlockSize(
+        complexBlocksToFree,
+        complexBlocks
+      ).toString(16)} bytes of RX space will be created.
+    </p>
+
+    <Button on:click="{freeComplexBlocks}">Free</Button>
+  {/await}
+</div>
diff --git a/frontend/src/patch_wizard/ObjectMappingView.svelte b/frontend/src/patch_wizard/ObjectMappingView.svelte
new file mode 100644
index 000000000..ea151f706
--- /dev/null
+++ b/frontend/src/patch_wizard/ObjectMappingView.svelte
@@ -0,0 +1,15 @@
+<script>
+  import ObjectWidget from "./ObjectWidget.svelte";
+
+  export let patchInfo, refreshOverviewCallback;
+</script>
+
+<div>
+  {#each patchInfo.objectInfos as objInfo}
+    <ObjectWidget
+      objectInfo="{objInfo}"
+      symbolRefMap="{patchInfo.symbolRefMap}"
+      refreshOverviewCallback="{refreshOverviewCallback}"
+    />
+  {/each}
+</div>
diff --git a/frontend/src/patch_wizard/ObjectWidget.svelte b/frontend/src/patch_wizard/ObjectWidget.svelte
new file mode 100644
index 000000000..a86234f02
--- /dev/null
+++ b/frontend/src/patch_wizard/ObjectWidget.svelte
@@ -0,0 +1,102 @@
+<style>
+  .box {
+    border: thin solid;
+    margin-bottom: 1ch;
+  }
+
+  .body {
+    display: inline-flex;
+    width: 100%;
+  }
+
+  .header-bar {
+    border: thin solid;
+    font-size: medium;
+    padding: 0.3em;
+  }
+
+  .column {
+    width: 50%;
+    padding-left: 1ch;
+    padding-right: 1ch;
+  }
+
+  .column-left {
+    border-right: thin dashed;
+  }
+
+  .column-header {
+    font-weight: bold;
+    text-align: center;
+    border-bottom: thin dashed;
+  }
+
+  .body-segments {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .body-symbols {
+    text-align: left;
+  }
+
+  .warning {
+    text-decoration-line: underline;
+    text-decoration-color: red;
+  }
+</style>
+
+<script>
+  import SegmentWidget from "./SegmentWidget.svelte";
+  import PatchSymbol from "./PatchSymbol.svelte";
+
+  export let objectInfo, symbolRefMap, refreshOverviewCallback;
+
+  let locallyUndefinedSymbols;
+
+  $: if (symbolRefMap) {
+    locallyUndefinedSymbols = objectInfo.unresolvedSymbols.filter((s) => {
+      return symbolRefMap[s].providedBy.length === 0;
+    });
+  } else {
+    locallyUndefinedSymbols = [];
+  }
+</script>
+
+<div class="box">
+  <div class="header-bar">
+    {objectInfo.name}
+  </div>
+  <div class="body">
+    <div class="column column-left">
+      <p class="column-header">Segments</p>
+      <div class="body-segments">
+        {#each objectInfo.segments as segInfo (segInfo.name)}
+          <SegmentWidget
+            segmentInfo="{segInfo}"
+            refreshOverviewCallback="{refreshOverviewCallback}"
+          />
+        {/each}
+      </div>
+    </div>
+    <div class="column">
+      <p class="column-header">Symbols</p>
+      <div class="body-symbols">
+        {#if locallyUndefinedSymbols.length > 0}
+          <p class="warning">
+            {locallyUndefinedSymbols.length} unresolved symbol(s)!
+          </p>
+        {/if}
+        Provides:
+        {#each objectInfo.strongSymbols as sym}
+          <PatchSymbol symbolName="{sym}" symbolRefMap="{symbolRefMap}" />
+        {/each}
+        <br />
+        Requires:
+        {#each objectInfo.unresolvedSymbols as sym}
+          <PatchSymbol symbolName="{sym}" symbolRefMap="{symbolRefMap}" />
+        {/each}
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/frontend/src/patch_wizard/PatchMakerLogsView.svelte b/frontend/src/patch_wizard/PatchMakerLogsView.svelte
new file mode 100644
index 000000000..18635a886
--- /dev/null
+++ b/frontend/src/patch_wizard/PatchMakerLogsView.svelte
@@ -0,0 +1,147 @@
+<style>
+  .title {
+    height: calc(10% - 1em);
+    text-decoration: underline;
+  }
+
+  .logs {
+    height: calc(90% - 2em);
+    overflow-y: scroll;
+  }
+
+  .message {
+  }
+</style>
+
+<script>
+  import { onMount, onDestroy, tick } from "svelte";
+  import { settings } from "../stores";
+
+  export let patchInfo, addLogBreak;
+
+  let scrollingLogsNode;
+  let abortController = new AbortController();
+  let prevName = patchInfo.name;
+  let messages = [];
+
+  const linebreakMarker = {};
+
+  addLogBreak = () => {
+    // Add linebreak to separate latest messages from old messages
+    // But don't add double line breaks
+    if (messages?.at(-1) !== linebreakMarker) {
+      messages = [...messages, linebreakMarker];
+    }
+  };
+
+  async function getNextMessage(patchName, aborter) {
+    return fetch(
+      `${$settings.backendUrl}/patch_wizard/listen_logs?patch_name=${patchName}`,
+      {
+        method: "POST",
+        signal: aborter.signal,
+      }
+    )
+      .then(async (r) => {
+        if (!r.ok) {
+          return {
+            ok: false,
+            continue: true,
+            err: JSON.stringify(await r.json(), undefined, 2),
+          };
+        } else {
+          return {
+            ok: true,
+            continue: true,
+            err: null,
+            message: await r.text(),
+          };
+        }
+      })
+      .catch((err) => {
+        if (err.name === "AbortError") {
+          // Aborted by either destroying this logs view, or by selecting a different patch
+          return { ok: true, continue: false, err: null };
+        } else if (err.name === "TypeError") {
+          // Likely just timed out, or backend is down
+          return { ok: false, continue: true, err: err };
+        } else {
+          // Other unspecified problem
+          return { ok: false, continue: true, err: err };
+        }
+      });
+  }
+
+  async function repeatedlyGetNextMessage(
+    patchName,
+    prevMessageResult,
+    aborter,
+    retries = 5
+  ) {
+    // Long polling with a recursive function
+    if (prevMessageResult.message) {
+      messages = [...messages, prevMessageResult.message];
+      // waits for svelte to update
+      await tick();
+      await scrollToBottom(scrollingLogsNode);
+    }
+    if (prevMessageResult.continue && retries) {
+      if (!prevMessageResult.ok) {
+        // small backoff if something went wrong with previous request
+        // sleep for 3000 milliseconds
+        console.error(prevMessageResult.err);
+        retries -= 1;
+        await new Promise((resolve) => setTimeout(resolve, 3000));
+      }
+      // Either timed out or got next log message successfully
+      getNextMessage(patchName, aborter).then((r) =>
+        repeatedlyGetNextMessage(patchName, r, aborter, retries)
+      );
+    } else if (retries === 0) {
+      messages = [...messages, "Connection to OFRAK backend lost!"];
+      // waits for svelte to update
+      await tick();
+      await scrollToBottom(scrollingLogsNode);
+    }
+  }
+
+  const scrollToBottom = async (node) => {
+    node.scroll({ top: node.scrollHeight, behavior: "smooth" });
+  };
+
+  onMount(() =>
+    repeatedlyGetNextMessage(
+      patchInfo.name,
+      { ok: true, continue: true },
+      abortController
+    )
+  );
+
+  onDestroy(() => abortController.abort());
+
+  $: {
+    if (patchInfo.name !== prevName) {
+      prevName = patchInfo.name;
+      if (!abortController.signal.aborted) {
+        abortController.abort();
+        abortController = new AbortController();
+        repeatedlyGetNextMessage(
+          patchInfo.name,
+          { ok: true, continue: true },
+          abortController
+        );
+      }
+    }
+  }
+</script>
+
+<h3 class="title">PatchMaker Logs</h3>
+<div bind:this="{scrollingLogsNode}" class="logs">
+  {#each messages as message}
+    {#if message === linebreakMarker}
+      <hr />
+    {:else}
+      <p class="message">{message}</p>
+    {/if}
+  {/each}
+</div>
diff --git a/frontend/src/patch_wizard/PatchSymbol.svelte b/frontend/src/patch_wizard/PatchSymbol.svelte
new file mode 100644
index 000000000..f39ac6d02
--- /dev/null
+++ b/frontend/src/patch_wizard/PatchSymbol.svelte
@@ -0,0 +1,51 @@
+<style>
+  p {
+    font-family: monospace;
+    border-style: none;
+  }
+
+  .warning {
+    text-decoration-line: underline;
+    text-decoration-color: red;
+  }
+</style>
+
+<script>
+  export let symbolName, symbolRefMap;
+
+  let titleText = "";
+
+  let symbolInfo;
+  $: {
+    if (symbolRefMap) {
+      symbolInfo = symbolRefMap[symbolName];
+    } else {
+      symbolInfo = { name: symbolName, providedBy: [], requiredBy: [] };
+    }
+
+    titleText = "";
+    if (symbolInfo.providedBy?.length > 0) {
+      titleText += "Provided by ";
+      titleText += symbolInfo.providedBy.join(",");
+    }
+
+    if (symbolInfo.requiredBy?.length > 0) {
+      if (titleText.length > 0) {
+        titleText += " and required by ";
+      } else {
+        titleText += "Required by ";
+      }
+      titleText += symbolInfo.requiredBy.join(",");
+    }
+  }
+</script>
+
+{#if symbolInfo.providedBy?.length > 0}
+  <p title="{titleText}">
+    {symbolInfo.name}
+  </p>
+{:else}
+  <p title="{titleText}" class="warning">
+    {symbolInfo.name}
+  </p>
+{/if}
diff --git a/frontend/src/patch_wizard/RootWizardView.svelte b/frontend/src/patch_wizard/RootWizardView.svelte
new file mode 100644
index 000000000..56cb1197a
--- /dev/null
+++ b/frontend/src/patch_wizard/RootWizardView.svelte
@@ -0,0 +1,554 @@
+<style>
+  .title-bar {
+    border: thin solid;
+    font-size: medium;
+    padding: 0.3em;
+    display: flex;
+    align-items: center;
+  }
+
+  .title {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .summary-body {
+    padding-top: 1em;
+  }
+
+  .warning {
+    text-decoration-line: underline;
+    text-decoration-color: red;
+  }
+
+  .inject-button-bar {
+    display: inline-flex;
+    align-items: center;
+    width: 100%;
+    justify-content: center;
+    margin-top: 1em;
+  }
+</style>
+
+<script>
+  import Split from "../utils/Split.svelte";
+  import Pane from "../utils/Pane.svelte";
+  import Button from "../utils/Button.svelte";
+
+  import { popViewCrumb, selectedResource, settings } from "../stores";
+  import SourceMenuView from "./SourceMenuView.svelte";
+  import ObjectMappingView from "./ObjectMappingView.svelte";
+  import ToolchainSetupView from "./ToolchainSetupView.svelte";
+  import SummaryWidget from "./SummaryWidget.svelte";
+  import PatchSymbol from "./PatchSymbol.svelte";
+  import SymbolView from "./SymbolView.svelte";
+  import PatchMakerLogsView from "./PatchMakerLogsView.svelte";
+  import Loading from "../utils/LoadingText.svelte";
+  import FreeSpaceView from "./FreeSpaceView.svelte";
+
+  let injectionStatus = "";
+
+  async function fetchPatchesInProgress() {
+    let r = await fetch(
+      `${$settings.backendUrl}/patch_wizard/get_all_patches_in_progress`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: "",
+      }
+    );
+    if (!r.ok) {
+      throw Error(JSON.stringify(await r.json(), undefined, 2));
+    }
+
+    return await r.json();
+  }
+
+  async function fetchObjectInfos(patchName, toolchain, toolchainConfig) {
+    let r = await fetch(
+      `${$settings.backendUrl}/patch_wizard/get_object_infos?patch_name=${patchName}`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          toolchain: toolchain,
+          toolchainConfig: toolchainConfig,
+        }),
+      }
+    );
+    if (!r.ok) {
+      throw Error(JSON.stringify(await r.json(), undefined, 2));
+    }
+    return await r.json();
+  }
+
+  async function fetchTargetInfo(patchName) {
+    let r = await fetch(
+      `${$settings.backendUrl}/patch_wizard/get_target_info?patch_name=${patchName}`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+      }
+    );
+    if (!r.ok) {
+      throw Error(JSON.stringify(await r.json(), undefined, 2));
+    }
+    return await r.json();
+  }
+
+  async function doPatch(patchInfo) {
+    addLogBreak();
+    let r = await fetch(
+      `${$settings.backendUrl}/patch_wizard/inject_patch?patch_name=${patchInfo.name}`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          objectInfos: patchInfo.objectInfos,
+          userSymbols: patchInfo.userInputs.symbols,
+        }),
+      }
+    );
+    if (!r.ok) {
+      throw Error(JSON.stringify(await r.json(), undefined, 2));
+    }
+    injectionStatus = await r.text();
+  }
+
+  let subMenu = undefined;
+  let addLogBreak;
+
+  let overview = {
+    totalBytes: 0,
+    nSegments: 0,
+    unresolvedSyms: new Set(),
+    unallocatedSegments: [],
+    nSources: 0,
+    readyToPatch: false,
+  };
+
+  let patchInfo;
+
+  function assignSegmentColors(patchInfo) {
+    let idx = 0;
+    for (const obj of patchInfo.objectInfos) {
+      for (const seg of obj.segments) {
+        seg.color = $settings.colors[idx];
+        if (idx++ >= $settings.colors.length) {
+          idx = 0;
+        }
+      }
+    }
+  }
+
+  function buildSymbolRefMap(patchInfo) {
+    let refMap = { allSyms: new Set() };
+
+    for (const objInfo of patchInfo.objectInfos) {
+      for (const sym of objInfo.strongSymbols) {
+        if (refMap.hasOwnProperty(sym)) {
+          refMap[sym].providedBy.push(objInfo.name);
+        } else {
+          refMap[sym] = {
+            name: sym,
+            providedBy: [objInfo.name],
+            requiredBy: [],
+          };
+        }
+        refMap.allSyms.add(sym);
+      }
+      for (const sym of objInfo.unresolvedSymbols) {
+        if (refMap.hasOwnProperty(sym)) {
+          refMap[sym].requiredBy.push(objInfo.name);
+        } else {
+          refMap[sym] = {
+            name: sym,
+            providedBy: [],
+            requiredBy: [objInfo.name],
+          };
+        }
+        refMap.allSyms.add(sym);
+      }
+    }
+
+    for (const sym of patchInfo.targetInfo.symbols) {
+      if (refMap.hasOwnProperty(sym)) {
+        refMap[sym].providedBy.push("target binary");
+      } else {
+        refMap[sym] = {
+          name: sym,
+          providedBy: ["target binary"],
+          requiredBy: [],
+        };
+      }
+      refMap.allSyms.add(sym);
+    }
+
+    for (const [symName, symVal] of patchInfo.userInputs.symbols) {
+      if (refMap.hasOwnProperty(symName)) {
+        refMap[symName].providedBy.push("user input");
+      } else {
+        refMap[symName] = {
+          name: symName,
+          providedBy: ["user input"],
+          requiredBy: [],
+        };
+      }
+      refMap.allSyms.add(symName);
+    }
+
+    return refMap;
+  }
+
+  function importObjectInfos(updatedObjectInfos) {
+    // May mutate updatedObjectInfos
+
+    // Keep track of when source files were renamed, but their object placements should still be preserved
+    const currentObjNames = new Map();
+    for (const sourceInfo of patchInfo.sourceInfos) {
+      if (sourceInfo.originalName) {
+        currentObjNames.set(sourceInfo.originalName, sourceInfo.name);
+      } else {
+        currentObjNames.set(sourceInfo.name, sourceInfo.name);
+      }
+    }
+
+    // Map from current object names -> old object mappings
+    let previousObjectSegmentInfos = new Map();
+    // Carry over segment mapping and inclusion info from previous configuration
+    // Allows for iterative patch development without losing all patch situation work
+    if (patchInfo.objectInfos) {
+      for (const objInfo of patchInfo.objectInfos) {
+        for (const segInfo of objInfo.segments) {
+          previousObjectSegmentInfos.set(
+            currentObjNames.get(objInfo.name) + segInfo.name,
+            {
+              include: segInfo.include,
+              allocatedVaddr: segInfo.allocatedVaddr,
+            }
+          );
+        }
+      }
+    }
+
+    for (const objInfo of updatedObjectInfos) {
+      for (const segInfo of objInfo.segments) {
+        const prevInfo = previousObjectSegmentInfos.get(
+          objInfo.name + segInfo.name
+        );
+        if (prevInfo) {
+          segInfo.allocatedVaddr = prevInfo.allocatedVaddr;
+          segInfo.include = prevInfo.include;
+        }
+      }
+    }
+
+    patchInfo.objectInfos = updatedObjectInfos;
+    patchInfo.objectInfosValid = true;
+
+    assignSegmentColors(patchInfo);
+  }
+
+  function validVaddr(vaddr) {
+    return vaddr || 0 === vaddr;
+  }
+
+  function updateSummary() {
+    patchInfo.symbolRefMap = buildSymbolRefMap(patchInfo);
+
+    const newOverview = {};
+    newOverview.totalBytes = 0;
+    newOverview.nSegments = 0;
+    for (const obj of patchInfo.objectInfos) {
+      for (const seg of obj.segments) {
+        if (seg.include) {
+          newOverview.totalBytes += seg.size;
+          newOverview.nSegments++;
+        }
+      }
+    }
+
+    newOverview.unresolvedSyms = new Set();
+    if (patchInfo.symbolRefMap) {
+      for (const symName of patchInfo.symbolRefMap.allSyms) {
+        if (patchInfo.symbolRefMap[symName].providedBy.length === 0) {
+          newOverview.unresolvedSyms.add(symName);
+        }
+      }
+    }
+
+    newOverview.unallocatedSegments = [];
+    for (const obj of patchInfo.objectInfos) {
+      for (const seg of obj.segments) {
+        if (seg.include && !validVaddr(seg.allocatedVaddr)) {
+          newOverview.unallocatedSegments.push(seg);
+        }
+      }
+    }
+
+    newOverview.nSources = patchInfo.sourceInfos.length;
+
+    newOverview.readyToPatch =
+      newOverview.totalBytes > 0 &&
+      newOverview.unresolvedSyms.size === 0 &&
+      newOverview.unallocatedSegments.length === 0;
+
+    overview = newOverview;
+  }
+
+  async function updatePatchPlacement() {
+    if (addLogBreak) {
+      addLogBreak();
+    }
+    // Rebuild BOM, fetch updated objectInfos
+    let updatedObjectInfos = await fetchObjectInfos(
+      patchInfo.name,
+      patchInfo.userInputs.toolchain,
+      patchInfo.userInputs.toolchainConfig
+    );
+    // If that succeeds
+    importObjectInfos(updatedObjectInfos);
+    updateSummary();
+  }
+
+  async function updateSymbolDefines() {
+    if (!patchInfo.objectInfosValid) {
+      // rebuilds BOM if it is outdated
+      // must be build to know what symbols it needs and grab those from target
+      await updatePatchPlacement();
+    } else {
+      if (addLogBreak) {
+        addLogBreak();
+      }
+    }
+
+    patchInfo.targetInfo = await fetchTargetInfo(patchInfo.name);
+
+    patchInfo.targetInfoValid = true;
+    updateSummary();
+  }
+
+  function goBack() {
+    fetch(
+      `${$settings.backendUrl}/${$selectedResource.resource_id}/patch_wizard/save_current_patch`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(patchInfo),
+      }
+    ).then(async (r) => {
+      if (!r.ok) {
+        throw Error(JSON.stringify(await r.json(), undefined, 2));
+      }
+    });
+    popViewCrumb();
+  }
+
+  async function populatePatchInfo() {
+    const patches = await fetchPatchesInProgress();
+
+    if (patches.length === 1) {
+      patchInfo = patches[0];
+      updateSummary();
+    } else {
+      const r = await fetch(
+        `${$settings.backendUrl}/${
+          $selectedResource.resource_id
+        }/patch_wizard/start_new_patch?patch_name=${"Example_Patch"}`,
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: "",
+        }
+      );
+      if (!r.ok) {
+        throw Error(JSON.stringify(await r.json(), undefined, 2));
+      } else {
+        patchInfo = await r.json();
+      }
+    }
+  }
+
+  let patchInfoPromise = populatePatchInfo();
+</script>
+
+<Split>
+  <Split slot="first" vertical="{true}" percentOfFirstSplit="{66.666}">
+    <Pane slot="first">
+      <div class="title-bar">
+        <Button on:click="{goBack}">← Back</Button>
+        <h2 class="title">PATCH WIZARD</h2>
+      </div>
+      {#await patchInfoPromise}
+        <Loading />
+      {:then _}
+        <div class="summary-body">
+          <SummaryWidget
+            title="Step 1. Toolchain & Patch Source"
+            markError="{!(
+              patchInfo.userInputs.toolchain && overview.nSources > 0
+            )}"
+            valid="{null}"
+            updateFunction="{() => {}}"
+            errorReason=""
+          >
+            {#if patchInfo.userInputs.toolchain && overview.nSources}
+              <p>
+                Using {patchInfo.userInputs.toolchain.split(".").pop()} to build
+                patch from
+                {overview.nSources} source code files.
+              </p>
+            {:else if overview.nSources}
+              <p class="warning">No toolchain selected</p>
+              <p>to build {overview.nSources} source code files.</p>
+            {:else if patchInfo.userInputs.toolchain}
+              <p>Using {patchInfo.userInputs.toolchain.split(".").pop()}</p>
+              <p class="warning">
+                but no source code files to build patch from!
+              </p>
+            {:else}
+              <p class="warning">
+                No toolchain selected and no source code files provided!
+              </p>
+            {/if}
+            <br />
+            <Button on:click="{() => (subMenu = ToolchainSetupView)}"
+              >Configure Toolchain</Button
+            >
+            <Button on:click="{() => (subMenu = SourceMenuView)}"
+              >Configure Patch Sources</Button
+            >
+          </SummaryWidget>
+          <SummaryWidget
+            title="Step 2. Patch Placement"
+            markError="{overview.nSegments === 0 ||
+              overview.unallocatedSegments.length > 0}"
+            valid="{patchInfo.objectInfosValid}"
+            updateFunction="{updatePatchPlacement}"
+            errorReason="Must allocate segments!"
+          >
+            {#if overview.nSegments}
+              <p>
+                {overview.nSegments} segment{overview.nSegments > 1 ? "s" : ""} totaling
+                0x{overview.totalBytes.toString(16)} bytes will be extracted from
+                the compiled sources and injected into the target binary at unique
+                addresses.
+              </p>
+            {:else}
+              <p class="warning">No segments chosen for injection!</p>
+            {/if}
+            {#if overview.unallocatedSegments.length > 0}
+              <p class="warning">
+                {overview.unallocatedSegments.length} segment(s) still need to be
+                allocated:
+              </p>
+              {#each overview.unallocatedSegments as seg}
+                <p>{seg.unit}{seg.name}</p>
+              {/each}
+            {/if}
+            <br />
+            <Button on:click="{() => (subMenu = ObjectMappingView)}"
+              >Configure Patch Placement</Button
+            >
+            <Button on:click="{() => (subMenu = FreeSpaceView)}"
+              >Manage Free Space</Button
+            >
+          </SummaryWidget>
+          <SummaryWidget
+            title="Step 3. Symbol Definitions"
+            markError="{overview.unresolvedSyms.size > 0}"
+            valid="{patchInfo.targetInfoValid}"
+            updateFunction="{updateSymbolDefines}"
+            errorReason="There are unresolved symbols!"
+          >
+            {#if patchInfo.symbolRefMap}
+              <p>
+                Target binary provides {patchInfo.targetInfo.symbols.length} symbols:
+              </p>
+
+              {#each patchInfo.targetInfo.symbols as sym}
+                <PatchSymbol
+                  symbolName="{sym}"
+                  symbolRefMap="{patchInfo.symbolRefMap}"
+                />
+              {/each}
+
+              {#if patchInfo.userInputs.symbols}
+                <p>
+                  You are providing {patchInfo.userInputs.symbols.length} symbol(s).
+                </p>
+              {/if}
+
+              {#if overview.unresolvedSyms.size > 0}
+                {#if overview.unresolvedSyms.size === 1}
+                  <p class="warning">There as an unresolved symbol!</p>
+                {:else}
+                  <p class="warning">
+                    There are {overview.unresolvedSyms.size} unresolved symbols!
+                  </p>
+                {/if}
+                {#each Array.from(overview.unresolvedSyms) as sym}
+                  <PatchSymbol
+                    symbolName="{sym}"
+                    symbolRefMap="{patchInfo.symbolRefMap}"
+                  />
+                {/each}
+                <p>
+                  These symbols are referenced by the patch code, but not
+                  defined in the patch code or the binary.
+                </p>
+              {:else}
+                <p>There are no unresolved symbols.</p>
+              {/if}
+            {/if}
+            <br />
+            <Button on:click="{() => (subMenu = SymbolView)}"
+              >Define Symbols Manually</Button
+            >
+          </SummaryWidget>
+        </div>
+      {/await}
+
+      <div class="inject-button-bar">
+        <Button
+          disabled="{!overview.readyToPatch}"
+          on:click="{() => doPatch(patchInfo)}">Step 4. Inject!</Button
+        >
+      </div>
+
+      <p>{injectionStatus}</p>
+    </Pane>
+    <Pane slot="second" paddingVertical="{'1em'}">
+      {#await patchInfoPromise}
+        <Loading />
+      {:then _}
+        <PatchMakerLogsView
+          patchInfo="{patchInfo}"
+          bind:addLogBreak="{addLogBreak}"
+        />
+      {/await}
+    </Pane>
+  </Split>
+  <Pane slot="second">
+    {#if subMenu}
+      <svelte:component
+        this="{subMenu}"
+        bind:subMenu="{subMenu}"
+        bind:patchInfo="{patchInfo}"
+        refreshOverviewCallback="{updateSummary}"
+      />
+    {/if}
+  </Pane>
+</Split>
diff --git a/frontend/src/patch_wizard/SegmentWidget.svelte b/frontend/src/patch_wizard/SegmentWidget.svelte
new file mode 100644
index 000000000..4499e2328
--- /dev/null
+++ b/frontend/src/patch_wizard/SegmentWidget.svelte
@@ -0,0 +1,117 @@
+<style>
+  .box {
+    border: thin solid;
+    background-color: var(--own-bg-color);
+    color: var(--own-txt-color);
+    margin-bottom: 1ch;
+    width: 100%;
+  }
+
+  .warning {
+    text-decoration-line: underline;
+    text-decoration-color: red;
+  }
+
+  .header-bar {
+    border: thin solid;
+    width: 100%;
+    align-items: center;
+    display: flex;
+  }
+
+  .seg-vaddr-input {
+    background-color: var(--own-bg-color);
+    color: var(--own-txt-color);
+    max-width: 10em;
+  }
+
+  .details-box {
+    padding-left: 1ch;
+    padding-right: 1ch;
+  }
+</style>
+
+<script>
+  import Checkbox from "../utils/Checkbox.svelte";
+  import { settings } from "../stores";
+
+  export let segmentInfo,
+    refreshOverviewCallback,
+    lockInclude = false;
+
+  function validVaddr(vaddr) {
+    return typeof vaddr === "number";
+  }
+
+  let placeholderVaddr, inputVaddr;
+  let prevInclude = segmentInfo.include;
+
+  if (validVaddr(segmentInfo.allocatedVaddr)) {
+    inputVaddr = `0x${segmentInfo.allocatedVaddr.toString(16)}`;
+  }
+
+  let backgroundColor, textColor;
+
+  $: {
+    if (!inputVaddr) {
+      segmentInfo.allocatedVaddr = undefined;
+    } else {
+      const parsed = parseInt(inputVaddr, 16);
+      if (parsed >= 0) {
+        // filters out NaN
+        segmentInfo.allocatedVaddr = parsed;
+      }
+    }
+    refreshOverviewCallback();
+  }
+
+  $: {
+    if (segmentInfo.include) {
+      backgroundColor = segmentInfo.color;
+      textColor = $settings.background;
+    } else {
+      backgroundColor = $settings.background;
+      textColor = $settings.foreground;
+    }
+
+    if (segmentInfo.include !== prevInclude) {
+      // Although this reactive block should only be called when `include` has in fact changed, it will also be called once when this component is created.
+      // This conditional prevents the overview being re-updating a ton of times each time the segment widgets are loaded
+      refreshOverviewCallback();
+    }
+    prevInclude = segmentInfo.include;
+  }
+</script>
+
+<div
+  class="box"
+  style="--own-bg-color: {backgroundColor}; --own-txt-color: {textColor}"
+>
+  <div class="header-bar">
+    {#if !lockInclude}
+      <Checkbox
+        checked="{segmentInfo.include}"
+        bind:value="{segmentInfo.include}"
+      />
+    {/if}
+    ({segmentInfo.unit}){segmentInfo.name} [{segmentInfo.permissions.toUpperCase()}]
+  </div>
+  <div class="details-box">
+    {#if segmentInfo.include}
+      [0x{segmentInfo.size.toString(16)} bytes] =>
+      <label
+        class="seg-vaddr-input"
+        class:warning="{!validVaddr(segmentInfo.allocatedVaddr)}"
+      >
+        <input
+          class="seg-vaddr-input"
+          class:warning="{!validVaddr(segmentInfo.allocatedVaddr)}"
+          placeholder="Needs allocation!"
+          bind:value="{inputVaddr}"
+        />
+      </label>
+    {:else}
+      [0x{segmentInfo.size.toString(16)} bytes] (discarded)
+    {/if}
+  </div>
+</div>
diff --git a/frontend/src/patch_wizard/SourceMenuView.svelte b/frontend/src/patch_wizard/SourceMenuView.svelte
new file mode 100644
index 000000000..f35e3e351
--- /dev/null
+++ b/frontend/src/patch_wizard/SourceMenuView.svelte
@@ -0,0 +1,93 @@
+<script>
+  import Button from "../utils/Button.svelte";
+  import SourceWidget from "./SourceWidget.svelte";
+  import { settings } from "../stores";
+
+  export let patchInfo, refreshOverviewCallback;
+
+  function invalidateOnChange() {
+    // Changes to source invalidate everything
+    patchInfo.objectInfosValid = false;
+    patchInfo.targetInfoValid = false;
+  }
+
+  async function addNewSourceFile() {
+    let input = document.createElement("input");
+    input.type = "file";
+    let newSourceInfo = { name: undefined, body: undefined };
+    input.onchange = async (_) => {
+      const file = Array.from(input.files).pop();
+      for (const existingSourceInfo of patchInfo.sourceInfos) {
+        if (existingSourceInfo.name === file.name) {
+          alert(
+            "Source file with name " +
+              file.name +
+              " already exists! Delete it and try again."
+          );
+          console.error(
+            "Source file with name " +
+              file.name +
+              " already exists! Delete it and try again."
+          );
+          return;
+        }
+      }
+
+      file.text().then(async (t) => {
+        newSourceInfo.body = t.split("\n");
+        newSourceInfo.name = file.name;
+        newSourceInfo.originalName = file.name;
+        fetch(
+          `${$settings.backendUrl}/patch_wizard/add_file?patch_name=${patchInfo.name}&file_name=${newSourceInfo.name}`,
+          {
+            method: "POST",
+            body: t,
+          }
+        ).then(async (r) => {
+          if (!r.ok) {
+            throw Error(JSON.stringify(await r.json(), undefined, 2));
+          } else {
+            patchInfo.sourceInfos = patchInfo.sourceInfos.concat([
+              newSourceInfo,
+            ]);
+            invalidateOnChange();
+            refreshOverviewCallback();
+          }
+        });
+      });
+    };
+    input.click();
+  }
+
+  async function deleteSourceFile(sourceInfo) {
+    fetch(
+      `${$settings.backendUrl}/patch_wizard/delete_file?patch_name=${patchInfo.name}&file_name=${sourceInfo.name}`,
+      {
+        method: "POST",
+        body: "",
+      }
+    ).then(async (r) => {
+      if (!r.ok) {
+        throw Error(JSON.stringify(await r.json(), undefined, 2));
+      } else {
+        patchInfo.sourceInfos = patchInfo.sourceInfos.filter(
+          (e) => e.name !== sourceInfo.name
+        );
+        invalidateOnChange();
+        refreshOverviewCallback();
+      }
+    });
+  }
+</script>
+
+<div>
+  {#each patchInfo.sourceInfos as sourceInfo}
+    <SourceWidget
+      bind:sourceInfo="{sourceInfo}"
+      parentDeleteSource="{deleteSourceFile}"
+      onChangeCallback="{invalidateOnChange}"
+    />
+  {/each}
+
+  <Button on:click="{addNewSourceFile}">Add new source or header file</Button>
+</div>
diff --git a/frontend/src/patch_wizard/SourceWidget.svelte b/frontend/src/patch_wizard/SourceWidget.svelte
new file mode 100644
index 000000000..93cd2c701
--- /dev/null
+++ b/frontend/src/patch_wizard/SourceWidget.svelte
@@ -0,0 +1,145 @@
+<style>
+  .box {
+    border: thin solid;
+    margin: 0.5em 0.5em 1em;
+  }
+  .header {
+    display: inline-flex;
+    height: 2em;
+    border: thin solid;
+    width: 100%;
+    align-items: center;
+  }
+
+  .header-title {
+    margin-left: 1em;
+  }
+
+  button {
+    border-style: none;
+  }
+
+  .options-toggle {
+    margin-left: auto;
+    margin-right: 0.5em;
+  }
+
+  .optional-button {
+    height: 100%;
+    padding-left: 1ch;
+  }
+
+  .script-box {
+    padding-left: 0.5em;
+    overflow-x: scroll;
+  }
+
+  .edit-name-input {
+    width: 100%;
+    background-color: var(--main-bg-color);
+    color: var(--main-fg-color);
+    margin-right: 1em;
+  }
+</style>
+
+<script>
+  import Script from "../utils/Script.svelte";
+  import Icon from "../utils/Icon.svelte";
+  import Button from "../utils/Button.svelte";
+
+  export let sourceInfo, parentDeleteSource, onChangeCallback;
+  let sourceHidden = true;
+  let showOptions = false;
+
+  let useCFormatting = ["c", "h"].includes(sourceInfo.name.split(".").at(-1));
+
+  async function downloadSource() {
+    const lines = sourceInfo.body.join("\n");
+    if (lines.length === 0) {
+      return;
+    }
+    const blob = new Blob([lines], { type: "application/x-python-code" });
+    const blobUrl = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = blobUrl;
+    a.target = "_blank";
+    a.download = sourceInfo.name;
+    a.click();
+    URL.revokeObjectURL(blobUrl);
+  }
+
+  async function replaceSource() {
+    let input = document.createElement("input");
+    input.type = "file";
+    input.onchange = async (_) => {
+      const file = Array.from(input.files).pop();
+      // TODO: Send file to backend in here
+      file.text().then((t) => (sourceInfo.body = t.split("\n")));
+    };
+    input.click();
+    onChangeCallback();
+  }
+
+  async function deleteSource() {
+    await parentDeleteSource(sourceInfo);
+  }
+</script>
+
+<div class="box">
+  <div class="header">
+    <button on:click="{() => (sourceHidden = !sourceHidden)}">
+      {#if sourceHidden}
+        [+]
+      {:else}
+        [-]
+      {/if}
+    </button>
+    {#if showOptions}
+      <label class="edit-name-input">
+        <input
+          class="edit-name-input"
+          placeholder="{sourceInfo.name}"
+          bind:value="{sourceInfo.name}"
+          on:focusout="{onChangeCallback}"
+        />
+      </label>
+      <button
+        class="optional-button"
+        title="Download file"
+        on:click="{downloadSource}"
+      >
+        <Icon url="/icons/download.svg" />
+      </button>
+      <button
+        class="optional-button"
+        title="Upload new version"
+        on:click="{replaceSource}"
+      >
+        <Icon url="/icons/upload.svg" />
+      </button>
+      <button class="optional-button" title="Delete" on:click="{deleteSource}">
+        <Icon url="/icons/trash.svg" />
+      </button>
+      <button
+        class="options-toggle"
+        on:click="{() => (showOptions = !showOptions)}"
+        ><Icon url="/icons/error.svg" /></button
+      >
+    {:else}
+      <p class="header-title">{sourceInfo.name}</p>
+      <button
+        class="options-toggle"
+        on:click="{() => (showOptions = !showOptions)}">...</button
+      >
+    {/if}
+  </div>
+
+  {#if !sourceHidden}
+    <div class="script-box">
+      <Script
+        language="{useCFormatting ? 'c' : ''}"
+        script="{sourceInfo.body}"
+      />
+    </div>
+  {/if}
+</div>
diff --git a/frontend/src/patch_wizard/SummaryWidget.svelte b/frontend/src/patch_wizard/SummaryWidget.svelte
new file mode 100644
index 000000000..c1597b89b
--- /dev/null
+++ b/frontend/src/patch_wizard/SummaryWidget.svelte
@@ -0,0 +1,112 @@
+<style>
+  button {
+    border: none;
+    margin-block-start: 1ch;
+    margin-block-end: 1ch;
+  }
+
+  .body {
+    border: thin solid;
+  }
+
+  .header-bar {
+    border: thin solid;
+    border-right: none;
+    display: inline-flex;
+    align-items: center;
+    width: 100%;
+  }
+
+  .slot {
+    padding: 1em;
+  }
+
+  .error-mark {
+    color: red;
+    font-weight: bold;
+    margin-left: auto;
+    margin-right: 1em;
+    user-select: none;
+  }
+
+  .invalid {
+    opacity: 60%;
+  }
+
+  .updateButton {
+    margin-left: 2em;
+  }
+</style>
+
+<script>
+  import Button from "../utils/Button.svelte";
+
+  export let title, markError, valid, updateFunction, errorReason;
+
+  let collapsed = false;
+
+  let updatePromise = Promise.resolve();
+
+  let _valid = valid;
+
+  $: if (valid === null) {
+    // Null means this widget is always valid
+    _valid = true;
+  } else {
+    _valid = valid;
+  }
+</script>
+
+<div class="body">
+  <div class="header-bar">
+    <button on:click="{() => (collapsed = !collapsed)}">
+      {#if collapsed}
+        [+]
+      {:else}
+        [-]
+      {/if}
+    </button>
+    {title}
+
+    {#if valid !== null}
+      <span class="updateButton" class:invalid="{_valid}">
+        {#await updatePromise}
+          <Button on:click="{() => {}}">Updating...</Button>
+        {:then e}
+          <Button
+            on:click="{() => {
+              updatePromise = updateFunction();
+            }}"
+          >
+            {#if !_valid}
+              ⮕Update⬅
+            {:else}
+              Update
+            {/if}
+          </Button>
+        {:catch err}
+          <Button
+            on:click="{() => {
+              updatePromise = updateFunction();
+            }}"
+          >
+            {#if !_valid}
+              ⮕Update⬅
+            {:else}
+              Update
+            {/if}
+          </Button>
+        {/await}
+      </span>
+    {/if}
+
+    {#if markError}
+      <p class="error-mark" title="{errorReason}">[ ! ]</p>
+    {/if}
+  </div>
+  {#if !collapsed}
+    <div class="slot" class:invalid="{!_valid}">
+      <slot />
+    </div>
+  {/if}
+</div>
diff --git a/frontend/src/patch_wizard/SymbolView.svelte b/frontend/src/patch_wizard/SymbolView.svelte
new file mode 100644
index 000000000..22e730f53
--- /dev/null
+++ b/frontend/src/patch_wizard/SymbolView.svelte
@@ -0,0 +1,154 @@
+<style>
+  .box {
+    width: calc(100% - 2px);
+  }
+
+  .undefined-syms-box {
+    margin: 1em;
+    width: 100%;
+  }
+
+  .new-sym-box {
+    display: inline-flex;
+    align-items: center;
+    height: fit-content;
+    border: thin solid;
+    width: 100%;
+  }
+
+  label {
+    background-color: var(--main-bg-color);
+    color: var(--main-fg-color);
+    width: 40%;
+    margin: 0.5em;
+  }
+
+  input {
+    background-color: var(--main-bg-color);
+    color: var(--main-fg-color);
+    width: 100%;
+  }
+
+  .name-label {
+    margin-right: auto;
+  }
+
+  .vaddr-label {
+    margin-left: auto;
+    margin-right: auto;
+  }
+</style>
+
+<script>
+  import UserInputSymbol from "./UserInputSymbol.svelte";
+  import Button from "../utils/Button.svelte";
+  import PatchSymbol from "./PatchSymbol.svelte";
+  import Icon from "../utils/Icon.svelte";
+
+  export let patchInfo, refreshOverviewCallback;
+
+  let newName = null,
+    newVaddr = null;
+  let undefinedSymsCollapse = false;
+
+  let unresolvedSyms = new Set();
+
+  function pushNewSymbol() {
+    if (!newName || newVaddr === null) {
+      return;
+    }
+    let parsedVaddr;
+    if (newVaddr.startsWith("0x")) {
+      parsedVaddr = parseInt(newVaddr, 16);
+    } else {
+      parsedVaddr = parseInt(newVaddr);
+    }
+    // newVaddr is a string you buffoon, it needs to be an int
+    patchInfo.userInputs.symbols = [
+      [newName, parsedVaddr],
+      ...patchInfo.userInputs.symbols,
+    ];
+    newName = null;
+    newVaddr = null;
+    refreshOverviewCallback();
+  }
+
+  function deleteSym(idx) {
+    patchInfo.userInputs.symbols = patchInfo.userInputs.symbols.toSpliced(
+      idx,
+      1
+    );
+    refreshOverviewCallback();
+  }
+
+  $: {
+    if (patchInfo.symbolRefMap) {
+      unresolvedSyms = new Set();
+      for (const symName of patchInfo.symbolRefMap.allSyms) {
+        if (patchInfo.symbolRefMap[symName].providedBy.length === 0) {
+          unresolvedSyms.add(symName);
+        }
+      }
+    }
+  }
+</script>
+
+<div class="description">
+  Define symbols which are required by the patch code and not provided by the
+  target binary.
+</div>
+
+<div class="undefined-syms-box">
+  <button
+    on:click="{() => {
+      undefinedSymsCollapse = !undefinedSymsCollapse;
+    }}"
+  >
+    {#if undefinedSymsCollapse}
+      [+]
+    {:else}
+      [-]
+    {/if}
+  </button>
+  {#if unresolvedSyms}
+    There are {unresolvedSyms.size} unresolved symbols.
+  {:else}
+    There are no unresolved symbols.
+  {/if}
+  {#if !undefinedSymsCollapse}
+    <div class="undefined-syms-collapse-box">
+      {#each Array.from(unresolvedSyms) as sym}
+        <PatchSymbol
+          symbolName="{sym}"
+          symbolRefMap="{patchInfo.symbolRefMap}"
+        />
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<div class="box">
+  <div class="new-sym-box">
+    <label class="name-label">
+      <input placeholder="Symbol name" bind:value="{newName}" />
+    </label>
+
+    <label class="vaddr-label">
+      <input placeholder="Address" bind:value="{newVaddr}" />
+    </label>
+
+    <Button on:click="{pushNewSymbol}" --button-margin="0.5em 0.5em 0.5em auto"
+      ><Icon url="/icons/plus.svg" /></Button
+    >
+  </div>
+
+  {#each patchInfo.userInputs.symbols as [name, vaddr], idx}
+    <UserInputSymbol
+      bind:name="{name}"
+      bind:vaddr="{vaddr}"
+      deleteSym="{() => {
+        deleteSym(idx);
+      }}"
+    />
+  {/each}
+</div>
diff --git a/frontend/src/patch_wizard/ToolchainSetupView.svelte b/frontend/src/patch_wizard/ToolchainSetupView.svelte
new file mode 100644
index 000000000..039c52d6a
--- /dev/null
+++ b/frontend/src/patch_wizard/ToolchainSetupView.svelte
@@ -0,0 +1,67 @@
+<script>
+  import { selectedResource } from "../stores";
+  import BaseSerializerInputForm from "../utils/serializer_inputs/BaseSerializerInputForm.svelte";
+  import Loading from "../utils/LoadingText.svelte";
+
+  export let patchInfo;
+
+  // Should have some helpful hint about ARM vs. Thumb somewhere?
+
+  async function getToolchainList() {
+    let pfsm_config = await $selectedResource.get_config_for_component(
+      "PatchFromSourceModifier"
+    );
+
+    return pfsm_config.fields;
+  }
+
+  let toolchain, toolchainConfig;
+
+  if (patchInfo.userInputs.toolchain !== null) {
+    toolchain = patchInfo.userInputs.toolchain;
+  }
+
+  if (patchInfo.userInputs.toolchainConfig !== null) {
+    toolchainConfig = patchInfo.userInputs.toolchainConfig;
+  }
+
+  $: {
+    let invalidate = false;
+    if (toolchain && toolchain !== patchInfo.userInputs.toolchain) {
+      patchInfo.userInputs.toolchain = toolchain;
+      invalidate = true;
+    }
+    // The worst, best way to do deep comparisons and deep copies :)
+    if (
+      toolchainConfig &&
+      JSON.stringify(toolchainConfig) !==
+        JSON.stringify(patchInfo.userInputs.toolchainConfig)
+    ) {
+      patchInfo.userInputs.toolchainConfig = JSON.parse(
+        JSON.stringify(toolchainConfig)
+      );
+      invalidate = true;
+    }
+
+    if (invalidate) {
+      // Changes to toolchain config invalidate everything
+      patchInfo.objectInfosValid = false;
+      patchInfo.targetInfoValid = false;
+    }
+  }
+</script>
+
+{#await getToolchainList()}
+  <Loading />
+{:then toolchainConfig_structs}
+  <BaseSerializerInputForm
+    node="{toolchainConfig_structs[3]}"
+    bind:element="{toolchain}"
+  />
+  <BaseSerializerInputForm
+    node="{toolchainConfig_structs[2]}"
+    bind:element="{toolchainConfig}"
+  />
+{:catch err}
+  Failed to fetch toolchain configuration structure!
+{/await}
diff --git a/frontend/src/patch_wizard/UserInputSymbol.svelte b/frontend/src/patch_wizard/UserInputSymbol.svelte
new file mode 100644
index 000000000..9d69ac50c
--- /dev/null
+++ b/frontend/src/patch_wizard/UserInputSymbol.svelte
@@ -0,0 +1,67 @@
+<style>
+  .box {
+    display: inline-flex;
+    align-items: center;
+    height: fit-content;
+    border: thin solid;
+    width: 100%;
+  }
+
+  label {
+    background-color: var(--main-bg-color);
+    color: var(--main-fg-color);
+    width: 40%;
+    margin: 0.5em;
+  }
+
+  input {
+    background-color: var(--main-bg-color);
+    color: var(--main-fg-color);
+    width: 100%;
+  }
+
+  .name-label {
+    margin-right: auto;
+  }
+
+  .vaddr-label {
+    margin-left: auto;
+    margin-right: auto;
+  }
+</style>
+
+<script>
+  import Button from "../utils/Button.svelte";
+  import Icon from "../utils/Icon.svelte";
+
+  export let name,
+    vaddr,
+    deleteSym = () => {};
+
+  let _vaddr = "0x" + vaddr.toString(16),
+    prevVaddr = vaddr;
+
+  $: {
+    if (vaddr !== prevVaddr) {
+      // vaddr has been bound and changed by outside forces
+      _vaddr = "0x" + vaddr.toString(16);
+    } else {
+      vaddr = _vaddr.startsWith("0x") ? parseInt(_vaddr, 16) : parseInt(_vaddr);
+    }
+    prevVaddr = vaddr;
+  }
+</script>
+
+<div class="box">
+  <label class="name-label">
+    <input placeholder="{name}" bind:value="{name}" />
+  </label>
+
+  <label class="vaddr-label">
+    <input placeholder="{vaddr}" bind:value="{_vaddr}" />
+  </label>
+
+  <Button on:click="{deleteSym}" --button-margin="0.5em 0.5em 0.5em auto"
+    ><Icon url="/icons/trash.svg" /></Button
+  >
+</div>
diff --git a/frontend/src/project/ProjectManagerToolbar.svelte b/frontend/src/project/ProjectManagerToolbar.svelte
index 0dbbedc9f..692a4185d 100644
--- a/frontend/src/project/ProjectManagerToolbar.svelte
+++ b/frontend/src/project/ProjectManagerToolbar.svelte
@@ -1,10 +1,10 @@
 <script>
-  import { settings, selectedProject } from "../stores.js";
+  import { settings, selectedProject, popViewCrumb } from "../stores.js";
   import ProjectManagerAddBinaryToProject from "./ProjectManagerAddBinaryToProject.svelte";
   import ProjectManagerAddScriptToProject from "./ProjectManagerAddScriptToProject.svelte";
   import Toolbar from "../utils/Toolbar.svelte";
 
-  export let focus, openProject, showProjectManager, forceRefreshProject;
+  export let focus, openProject, forceRefreshProject;
   let toolbarButtons;
 
   toolbarButtons = [
@@ -12,9 +12,7 @@
       text: "Back",
       iconUrl: "/icons/back-arrow.svg",
       shortcut: "b",
-      onclick: async (e) => {
-        showProjectManager = false;
-      },
+      onclick: async (e) => popViewCrumb(),
     },
     {
       text: "Launch",
diff --git a/frontend/src/project/ProjectManagerView.svelte b/frontend/src/project/ProjectManagerView.svelte
index e16ad8f2b..340e688a9 100644
--- a/frontend/src/project/ProjectManagerView.svelte
+++ b/frontend/src/project/ProjectManagerView.svelte
@@ -85,7 +85,12 @@
   import Split from "../utils/Split.svelte";
   import ProjectManagerFocusableLabel from "./ProjectManagerFocusableLabel.svelte";
   import ProjectManagerOptions from "./ProjectManagerOptions.svelte";
-  import { selectedProject, settings, selected } from "../stores";
+  import {
+    selectedProject,
+    settings,
+    selected,
+    pushViewCrumb,
+  } from "../stores";
   import { remote_model_to_resource } from "../ofrak/remote_resource";
   import ProjectManagerToolbar from "./ProjectManagerToolbar.svelte";
   import ProjectManagerAddBinaryToProject from "./ProjectManagerAddBinaryToProject.svelte";
@@ -105,11 +110,7 @@
 
   let binariesForProject = [];
 
-  export let resources,
-    rootResourceLoadPromise,
-    rootResource,
-    showRootResource,
-    showProjectManager;
+  export let resources, rootResourceLoadPromise, rootResource;
 
   async function openProject() {
     if (!selectedBinaryName) {
@@ -133,12 +134,11 @@
     });
     rootResource = remote_model_to_resource(rootModel, resources);
     $selected = rootModel.id;
-    showProjectManager = false;
     if (!$selectedProject.loaded) {
       $selectedProject.loaded = {};
     }
     $selectedProject.loaded[rootModel.id] = selectedBinaryName;
-    showRootResource = true;
+    pushViewCrumb("rootResource");
   }
 
   onMount(async () => {
@@ -184,7 +184,6 @@
       <ProjectManagerToolbar
         bind:focus="{focus}"
         openProject="{openProject}"
-        bind:showProjectManager="{showProjectManager}"
         bind:forceRefreshProject="{forceRefreshProject}"
       />
     </div>
diff --git a/frontend/src/resource/ResourceTreeToolbar.svelte b/frontend/src/resource/ResourceTreeToolbar.svelte
index 933e39ce3..bdb67604e 100644
--- a/frontend/src/resource/ResourceTreeToolbar.svelte
+++ b/frontend/src/resource/ResourceTreeToolbar.svelte
@@ -16,9 +16,10 @@
     settings,
     selectedProject,
     resourceNodeDataMap,
+    pushViewCrumb,
   } from "../stores.js";
 
-  export let modifierView, bottomLeftPane, showProjectManager, showRootResource;
+  export let modifierView, bottomLeftPane;
   $: rootResource = $selectedResource;
 
   function refreshResource() {
@@ -47,6 +48,18 @@
           modifierView = RunScriptView;
         },
       },
+
+      {
+        text: "Patch Wizard",
+        iconUrl: "/icons/wizard.svg",
+        onclick: async (e) => {
+          pushViewCrumb("patchWizard");
+        },
+        disabled: () =>
+          !$selectedResource.tags.includes(
+            "ofrak.core.patch_maker.linkable_binary.LinkableBinary"
+          ),
+      },
     ];
   }
 
@@ -60,11 +73,11 @@
             let state = {
               $selectProject: $selectedProject,
             };
-            showProjectManager = true;
-            showRootResource = false;
+            pushViewCrumb("projectManager");
             history.pushState(state, "", "/");
           }
         },
+        disabled: () => !$selectedProject,
       },
     ];
   }
diff --git a/frontend/src/resource/ResourceTreeView.svelte b/frontend/src/resource/ResourceTreeView.svelte
index 8c3416777..04d4de29f 100644
--- a/frontend/src/resource/ResourceTreeView.svelte
+++ b/frontend/src/resource/ResourceTreeView.svelte
@@ -55,11 +55,7 @@
   import ResourceTreeNode from "./ResourceTreeNode.svelte";
   import ResourceTreeToolbar from "./ResourceTreeToolbar.svelte";
 
-  export let rootResource,
-    modifierView,
-    bottomLeftPane,
-    showProjectManager,
-    showRootResource;
+  export let rootResource, modifierView, bottomLeftPane;
 
   let searchFilter;
   let searchResults = {};
@@ -82,8 +78,6 @@
     <ResourceTreeToolbar
       bind:modifierView="{modifierView}"
       bind:bottomLeftPane="{bottomLeftPane}"
-      bind:showProjectManager="{showProjectManager}"
-      bind:showRootResource="{showRootResource}"
     />
   </div>
   <div class="resources">
diff --git a/frontend/src/stores.js b/frontend/src/stores.js
index 0cd75bc04..0b1059816 100644
--- a/frontend/src/stores.js
+++ b/frontend/src/stores.js
@@ -14,6 +14,16 @@ export const selectedProject = writable(undefined);
 // User-generated OFRAK script (array of lines)
 export const script = writable([]);
 
+export const viewCrumbs = writable(["start"]);
+
+export function pushViewCrumb(newCrumb) {
+  viewCrumbs.update((vCrumbs) => vCrumbs.concat([newCrumb]));
+}
+
+export function popViewCrumb() {
+  viewCrumbs.update((vCrumbs) => vCrumbs.slice(0, -1));
+}
+
 export function loadSettings(forceReset) {
   const defaultSettings = {
     background: "#000000",
diff --git a/frontend/src/utils/Script.svelte b/frontend/src/utils/Script.svelte
index a51914121..f7696d49d 100644
--- a/frontend/src/utils/Script.svelte
+++ b/frontend/src/utils/Script.svelte
@@ -29,7 +29,9 @@
 <script>
   import hljs from "highlight.js";
   import python from "highlight.js/lib/languages/python";
+  import c from "highlight.js/lib/languages/c";
   hljs.registerLanguage("python", python);
+  hljs.registerLanguage("c", c);
   export let script;
   export let language = "python";
 </script>
@@ -46,7 +48,11 @@
 
   <div class="textarea">
     <code>
-      {@html hljs.highlight(script.join("\n"), { language: language }).value}
+      {#if language}
+        {@html hljs.highlight(script.join("\n"), { language: language }).value}
+      {:else}
+        {script.join("\n")}
+      {/if}
     </code>
   </div>
 </div>
diff --git a/frontend/src/utils/SerializerInputForm.svelte b/frontend/src/utils/SerializerInputForm.svelte
deleted file mode 100644
index 9f40efe1f..000000000
--- a/frontend/src/utils/SerializerInputForm.svelte
+++ /dev/null
@@ -1,353 +0,0 @@
-<style>
-  .container {
-    min-height: 100%;
-    display: flex;
-    flex-direction: column;
-    flex-wrap: nowrap;
-    justify-content: center;
-    align-items: stretch;
-    align-content: center;
-  }
-
-  label {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    justify-content: flex-start;
-    align-items: baseline;
-  }
-
-  input {
-    background: inherit;
-    color: inherit;
-    border: none;
-    border-bottom: 1px solid var(--main-fg-color);
-    flex-grow: 1;
-    margin-left: 1ch;
-    /* width: 100%;
-    margin: 0;
-    padding: 0; */
-  }
-
-  input:invalid {
-    border-bottom: 1px solid var(--comment-color);
-  }
-
-  input:focus {
-    outline: none;
-    box-shadow: inset 0 -1px 0 var(--main-fg-color);
-  }
-
-  input:focus:invalid {
-    outline: none;
-    box-shadow: inset 0 -1px 0 var(--comment-color);
-  }
-
-  .input {
-    padding-left: 2em;
-    padding-bottom: 0.5em;
-    border-left: 1px dashed white;
-  }
-
-  select {
-    background-color: var(--main-bg-color);
-    color: inherit;
-    border: 1px solid;
-    border-color: inherit;
-    border-radius: 0;
-    padding: 0.5em 1em;
-    margin-left: 0.5em;
-    margin-right: 0.5em;
-    font-size: inherit;
-    font-family: var(--font);
-    box-shadow: none;
-  }
-
-  select {
-    width: 100%;
-    margin: 0;
-    margin-bottom: 1em;
-  }
-
-  option {
-    font-family: monospace;
-  }
-
-  .boxed {
-    border: 2px solid var(--main-fg-color);
-    padding: 2em;
-    margin: 1em 0 2em 0;
-  }
-
-  .buttonbar {
-    top: 0;
-    left: 0;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    align-items: start;
-    justify-content: start;
-  }
-</style>
-
-<script>
-  import Checkbox from "./Checkbox.svelte";
-  import { calculator, splitAndCapitalize } from "../helpers";
-  import Icon from "./Icon.svelte";
-  import FileBrowser from "./FileBrowser.svelte";
-  import Button from "./Button.svelte";
-  export let node, element;
-  let unionTypeSelect,
-    _element,
-    intInput,
-    files = null;
-  let skip = [];
-
-  const INT_PLACEHOLDERS = [
-    "0x10 * 2 + 8",
-    "(0x10 * 0x100 + 25) * 69",
-    "0x3 + 5 - 0x2",
-    "6 * 0x2 + 1",
-    "0x4 * (0x2 + 2)",
-    "12 / (0x3 * 0x2)",
-    "0x7 - 0x2 * 0x3",
-    "0x2 * (0x3 + 3)",
-    "(0x2 ^ 3) - 1",
-    "10 + 0x3 * 2",
-    "0x3 * (0x2 + 2) + 2",
-    "0x7 - 1 + 10",
-  ];
-
-  function doCalc() {
-    try {
-      element = calculator.calculate(_element);
-      intInput?.setCustomValidity("");
-    } catch {
-      element = undefined;
-      intInput?.setCustomValidity("Invalid expression.");
-    }
-  }
-
-  $: if (node["type"] == "builtins.int") {
-    doCalc(_element);
-  }
-
-  async function slurpSourceBundle(files) {
-    for (const file of files) {
-      let text = await file.text();
-      element.push([file.name, text]);
-    }
-    return element;
-  }
-
-  $: if (files) {
-    slurpSourceBundle(files);
-  }
-
-  function setArray() {
-    element = _element.filter((e) => !skip.includes(e));
-  }
-
-  $: if (
-    node["type"] == "typing.List" ||
-    node["type"] == "typing.Tuple" ||
-    node["type"] == "typing.Dict" ||
-    node["type"] == "ofrak.core.patch_maker.modifiers.SourceBundle" ||
-    node["type"] == "typing.Iterable"
-  ) {
-    setArray(_element, skip);
-  }
-
-  if (
-    node["type"] == "typing.List" ||
-    node["type"] == "typing.Tuple" ||
-    node["type"] == "typing.Dict" ||
-    node["type"] == "ofrak.core.patch_maker.modifiers.SourceBundle" ||
-    node["type"] == "typing.Iterable"
-  ) {
-    _element = [];
-  } else if (
-    node["type"] == "typing.Union" ||
-    node["type"] == "typing.Optional"
-  ) {
-    unionTypeSelect = node["args"][0];
-  }
-  if (node["type"] == "ofrak_type.range.Range") {
-    element = [];
-  } else if (node["fields"] != null) {
-    element = {};
-  }
-  if (node["default"] != null) {
-    element = node["default"];
-  }
-
-  const addElementToArray = () => {
-    _element = [..._element, null];
-  };
-
-  const addElementToDict = () => {
-    _element = [..._element, [null, null]];
-  };
-
-  if (node["type"] == "builtins.NoneType") {
-    element = null;
-  }
-
-  $: nodeName = node["name"] ? splitAndCapitalize(node["name"]) : "";
-</script>
-
-<div class="container">
-  <div class="input">
-    {#if node["name"] && !["builtins.bool", "builtins.str", "builtins.bytes", "builtins.int"].includes(node["type"])}
-      {nodeName}
-    {/if}
-
-    <!---->
-    {#if node["type"] == "builtins.bool"}
-      <Checkbox bind:checked="{element}" leftbox="{true}">
-        {nodeName}
-      </Checkbox>
-
-      <!---->
-    {:else if node["type"] == "builtins.str"}
-      <label>
-        {nodeName}
-        <input bind:value="{element}" />
-      </label>
-
-      <!---->
-    {:else if node["type"] == "builtins.bytes"}
-      <label>
-        {nodeName}
-        <input
-          pattern="([0-9a-fA-F][0-9a-fA-F])*"
-          placeholder="00deadbeef00"
-          bind:value="{element}"
-        />
-      </label>
-
-      <!---->
-    {:else if node["type"] == "builtins.int"}
-      <label>
-        {nodeName}
-        <input
-          placeholder="{INT_PLACEHOLDERS[
-            Math.floor(Math.random() * INT_PLACEHOLDERS.length)
-          ]}"
-          bind:value="{_element}"
-        />
-      </label>
-
-      <!---->
-    {:else if node["type"] == "typing.List" || node["type"] == "typing.Iterable"}
-      <div class="buttonbar">
-        <Button
-          --button-padding="0.5em 1em 0em 1em"
-          on:click="{addElementToArray}"
-        >
-          <Icon url="/icons/plus.svg" />
-        </Button>
-      </div>
-      {#each _element as elements}
-        {#if !skip.includes(elements)}
-          <div class="boxed">
-            <div class="buttonbar">
-              <Button
-                --button-padding="0.5em 1em 0em 1em"
-                on:click="{(e) => {
-                  skip.push(elements);
-                  skip = skip;
-                }}"
-              >
-                <Icon url="/icons/error.svg" />
-              </Button>
-            </div>
-            <svelte:self node="{node['args'][0]}" bind:element="{elements}" />
-          </div>
-        {/if}
-      {/each}
-
-      <!---->
-    {:else if node["type"] == "typing.Tuple"}
-      {#each node["args"] as arg, i}
-        <svelte:self node="{arg}" bind:element="{element[i]}" />
-      {/each}
-
-      <!---->
-    {:else if node["type"] == "typing.Dict"}
-      <div class="buttonbar">
-        <Button
-          --button-padding="0.5em 1em 0em 1em"
-          on:click="{addElementToDict}"
-        >
-          <Icon url="/icons/plus.svg" />
-        </Button>
-      </div>
-      {#each _element as elements, index}
-        {#if !skip.includes(elements)}
-          <div class="boxed">
-            <div class="buttonbar">
-              <Button
-                --button-padding="0.5em 1em 0em 1em"
-                on:click="{(e) => {
-                  skip.push(elements);
-                  skip = skip;
-                }}"
-              >
-                <Icon url="/icons/error.svg" />
-              </Button>
-              {elements}
-            </div>
-            <p>Key</p>
-            <svelte:self
-              node="{node['args'][0]}"
-              bind:element="{elements[0]}"
-            />
-            <p>Value</p>
-            <svelte:self
-              node="{node['args'][1]}"
-              bind:element="{elements[1]}"
-            />
-          </div>
-        {/if}
-      {/each}
-
-      <!---->
-    {:else if node["type"] == "typing.Union" || node["type"] == "typing.Optional"}
-      <select bind:value="{unionTypeSelect}">
-        {#each node["args"] as arg}
-          <option value="{arg}">
-            {arg.type}
-          </option>
-        {/each}
-      </select>
-      {#if unionTypeSelect != null}
-        <svelte:self node="{unionTypeSelect}" bind:element="{element}" />
-      {/if}
-
-      <!---->
-    {:else if node["type"] == "ofrak.core.patch_maker.modifiers.SourceBundle"}
-      <FileBrowser multiple="{true}" bind:files="{files}" />
-
-      <!---->
-    {:else if node["enum"] != null}
-      <select bind:value="{element}">
-        {#each Object.entries(node["enum"]) as [name, enum_value]}
-          <option value="{enum_value}">
-            {name}
-          </option>
-        {/each}
-      </select>
-
-      <!---->
-    {:else if node["fields"] != null}
-      {#each node["fields"] as field, i}
-        {#if node["type"] == "ofrak_type.range.Range"}
-          <svelte:self node="{field}" bind:element="{element[i]}" />
-        {:else}
-          <svelte:self node="{field}" bind:element="{element[field['name']]}" />
-        {/if}
-      {/each}
-    {/if}
-  </div>
-</div>
diff --git a/frontend/src/utils/Toolbar.svelte b/frontend/src/utils/Toolbar.svelte
index cebcbaec5..b0387cbb6 100644
--- a/frontend/src/utils/Toolbar.svelte
+++ b/frontend/src/utils/Toolbar.svelte
@@ -61,6 +61,7 @@
             button.shortcut.split('+').reverse().join(' + ') +
             ')'
           : '')}"
+      disabled="{button.disabled && button.disabled()}"
     >
       {#if button.iconUrl}
         <Icon url="{button.iconUrl}" />
diff --git a/frontend/src/utils/serializer_inputs/BaseSerializerInputForm.svelte b/frontend/src/utils/serializer_inputs/BaseSerializerInputForm.svelte
new file mode 100644
index 000000000..32ebe9c7c
--- /dev/null
+++ b/frontend/src/utils/serializer_inputs/BaseSerializerInputForm.svelte
@@ -0,0 +1,75 @@
+<style>
+  .container {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    justify-content: center;
+    align-items: stretch;
+    align-content: center;
+  }
+
+  .input {
+    padding-left: 2em;
+    padding-bottom: 0.5em;
+    border-left: 1px dashed white;
+  }
+</style>
+
+<script>
+  import PrimitivesInputForm from "./PrimitivesInputForm.svelte";
+  import ListInputForm from "./ListInputForm.svelte";
+  import TupleInputForm from "./TupleInputForm.svelte";
+  import DictInputForm from "./DictInputForm.svelte";
+  import UnionInputForm from "./UnionInputForm.svelte";
+  import SourceBundleInputForm from "./SourceBundleInputForm.svelte";
+  import EnumInputForm from "./EnumInputForm.svelte";
+  import ObjectInputForm from "./ObjectInputForm.svelte";
+  import { splitAndCapitalize } from "../../helpers";
+  import BaseSerializerInputForm from "./BaseSerializerInputForm.svelte";
+
+  const nodeTypeMap = {
+    "builtins.bool": PrimitivesInputForm,
+    "builtins.str": PrimitivesInputForm,
+    "builtins.int": PrimitivesInputForm,
+    "builtins.bytes": PrimitivesInputForm,
+    "typing.List": ListInputForm,
+    "typing.Iterable": ListInputForm,
+    "typing.Tuple": TupleInputForm,
+    "typing.Dict": DictInputForm,
+    "typing.Union": UnionInputForm,
+    "typing.Optional": UnionInputForm,
+    "ofrak.core.patch_maker.modifiers.SourceBundle": SourceBundleInputForm,
+  };
+
+  export let node, element;
+
+  function getFormType() {
+    if (nodeTypeMap.hasOwnProperty(node.type)) {
+      return nodeTypeMap[node.type];
+    } else if (node.enum !== null) {
+      return EnumInputForm;
+    } else if (node.fields !== null) {
+      return ObjectInputForm;
+    } else {
+      throw Error("Cannot determine form type for node " + node);
+    }
+  }
+
+  const nodeName = node.name ? splitAndCapitalize(node.name) : "";
+</script>
+
+<div class="container">
+  <div class="input">
+    {#if node.name && !["builtins.bool", "builtins.str", "builtins.bytes", "builtins.int"].includes(node.type)}
+      {nodeName}
+    {/if}
+
+    <svelte:component
+      this="{getFormType()}"
+      node="{node}"
+      nodeName="{nodeName}"
+      bind:element="{element}"
+      baseForm="{BaseSerializerInputForm}"
+    />
+  </div>
+</div>
diff --git a/frontend/src/utils/serializer_inputs/DictInputForm.svelte b/frontend/src/utils/serializer_inputs/DictInputForm.svelte
new file mode 100644
index 000000000..c5931e06f
--- /dev/null
+++ b/frontend/src/utils/serializer_inputs/DictInputForm.svelte
@@ -0,0 +1,63 @@
+<style>
+  .boxed {
+    border: 2px solid var(--main-fg-color);
+    padding: 2em;
+    margin: 1em 0 2em 0;
+  }
+
+  .buttonbar {
+    top: 0;
+    left: 0;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-items: start;
+    justify-content: start;
+  }
+</style>
+
+<script>
+  import Button from "../Button.svelte";
+  import Icon from "../Icon.svelte";
+
+  export let node, nodeName, element, baseForm;
+
+  const addSubElementToDict = () => {
+    element = [...element, [null, null]];
+  };
+
+  function removeSubElementFromDict(idx) {
+    element = element.toSpliced(idx, 1);
+  }
+</script>
+
+<div class="buttonbar">
+  <Button --button-padding="0.5em 1em 0em 1em" on:click="{addSubElementToDict}">
+    <Icon url="/icons/plus.svg" />
+  </Button>
+</div>
+{#each element as [subElementKey, subElementValue], index}
+  <div class="boxed">
+    <div class="buttonbar">
+      <Button
+        --button-padding="0.5em 1em 0em 1em"
+        on:click="{(e) => removeSubElementFromDict(index)}"
+      >
+        <Icon url="/icons/error.svg" />
+      </Button>
+    </div>
+    <p>Key</p>
+    <svelte:component
+      this="{baseForm}"
+      node="{node.args[0]}"
+      nodeName="{nodeName}"
+      bind:element="{subElementKey}"
+    />
+    <p>Value</p>
+    <svelte:component
+      this="{baseForm}"
+      node="{node.args[1]}"
+      bind:element="{subElementValue}"
+    />
+  </div>
+{/each}
diff --git a/frontend/src/utils/serializer_inputs/EnumInputForm.svelte b/frontend/src/utils/serializer_inputs/EnumInputForm.svelte
new file mode 100644
index 000000000..0eb32d6e7
--- /dev/null
+++ b/frontend/src/utils/serializer_inputs/EnumInputForm.svelte
@@ -0,0 +1,44 @@
+<style>
+  select {
+    background-color: var(--main-bg-color);
+    color: inherit;
+    border: 1px solid;
+    border-color: inherit;
+    border-radius: 0;
+    padding: 0.5em 1em;
+    font-size: inherit;
+    font-family: var(--font);
+    box-shadow: none;
+    width: 100%;
+    margin: 0 0 1em;
+  }
+
+  option {
+    font-family: monospace;
+  }
+</style>
+
+<script>
+  export let node, element;
+
+  if (element === undefined) {
+    if (node.default !== null) {
+      element = node.default[1];
+    } else {
+      element = null;
+    }
+  }
+</script>
+
+<select bind:value="{element}">
+  {#if !element}
+    <option selected disabled value="{null}">
+      Please select a {node.type.split(".").at(-1)}
+    </option>
+  {/if}
+  {#each Object.entries(node.enum) as [name, enum_value]}
+    <option value="{enum_value}">
+      {name}
+    </option>
+  {/each}
+</select>
diff --git a/frontend/src/utils/serializer_inputs/ListInputForm.svelte b/frontend/src/utils/serializer_inputs/ListInputForm.svelte
new file mode 100644
index 000000000..1eec0233e
--- /dev/null
+++ b/frontend/src/utils/serializer_inputs/ListInputForm.svelte
@@ -0,0 +1,66 @@
+<style>
+  .boxed {
+    border: 2px solid var(--main-fg-color);
+    padding: 2em;
+    margin: 1em 0 2em 0;
+  }
+
+  .buttonbar {
+    top: 0;
+    left: 0;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-items: start;
+    justify-content: start;
+  }
+</style>
+
+<script>
+  import Button from "../Button.svelte";
+  import Icon from "../Icon.svelte";
+
+  export let node, element, baseForm;
+
+  if (node.default !== null) {
+    element = node.default[1];
+  } else {
+    element = [];
+  }
+
+  const addSubElementToArray = () => {
+    element = [...element, null];
+  };
+
+  function removeSubElementFromArray(idx) {
+    element = element.toSpliced(idx, 1);
+  }
+</script>
+
+<div class="buttonbar">
+  <Button
+    --button-padding="0.5em 1em 0em 1em"
+    on:click="{addSubElementToArray}"
+  >
+    <Icon url="/icons/plus.svg" />
+  </Button>
+</div>
+{#each element as subElement, i}
+  <div class="boxed">
+    <div class="buttonbar">
+      <Button
+        --button-padding="0.5em 1em 0em 1em"
+        on:click="{(e) => {
+          removeSubElementFromArray(i);
+        }}"
+      >
+        <Icon url="/icons/error.svg" />
+      </Button>
+    </div>
+    <svelte:component
+      this="{baseForm}"
+      node="{node.args[0]}"
+      bind:element="{subElement}"
+    />
+  </div>
+{/each}
diff --git a/frontend/src/utils/serializer_inputs/ObjectInputForm.svelte b/frontend/src/utils/serializer_inputs/ObjectInputForm.svelte
new file mode 100644
index 000000000..fcdfa45bd
--- /dev/null
+++ b/frontend/src/utils/serializer_inputs/ObjectInputForm.svelte
@@ -0,0 +1,21 @@
+<script>
+  export let node, element, baseForm;
+
+  if (element === undefined) {
+    if (node.default !== null) {
+      element = node.default[1];
+    } else {
+      element = [node.type, {}];
+    }
+  }
+
+  const [objectType, objectFieldVals] = element;
+</script>
+
+{#each node.fields as field, i}
+  <svelte:component
+    this="{baseForm}"
+    node="{field}"
+    bind:element="{objectFieldVals[field.name]}"
+  />
+{/each}
diff --git a/frontend/src/utils/serializer_inputs/PrimitivesInputForm.svelte b/frontend/src/utils/serializer_inputs/PrimitivesInputForm.svelte
new file mode 100644
index 000000000..e20fd5644
--- /dev/null
+++ b/frontend/src/utils/serializer_inputs/PrimitivesInputForm.svelte
@@ -0,0 +1,117 @@
+<style>
+  label {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    align-items: baseline;
+  }
+
+  input {
+    background: inherit;
+    color: inherit;
+    border: none;
+    border-bottom: 1px solid var(--main-fg-color);
+    flex-grow: 1;
+    margin-left: 1ch;
+    /* width: 100%;
+    margin: 0;
+    padding: 0; */
+  }
+
+  input:invalid {
+    border-bottom: 1px solid var(--comment-color);
+  }
+
+  input:focus {
+    outline: none;
+    box-shadow: inset 0 -1px 0 var(--main-fg-color);
+  }
+
+  input:focus:invalid {
+    outline: none;
+    box-shadow: inset 0 -1px 0 var(--comment-color);
+  }
+</style>
+
+<script>
+  import Checkbox from "../Checkbox.svelte";
+  import { calculator } from "../../helpers";
+
+  export let node, nodeName, element;
+
+  const INT_PLACEHOLDERS = [
+    "0x10 * 2 + 8",
+    "(0x10 * 0x100 + 25) * 69",
+    "0x3 + 5 - 0x2",
+    "6 * 0x2 + 1",
+    "0x4 * (0x2 + 2)",
+    "12 / (0x3 * 0x2)",
+    "0x7 - 0x2 * 0x3",
+    "0x2 * (0x3 + 3)",
+    "(0x2 ^ 3) - 1",
+    "10 + 0x3 * 2",
+    "0x3 * (0x2 + 2) + 2",
+    "0x7 - 1 + 10",
+  ];
+
+  if (element === undefined) {
+    if (node.default !== null) {
+      element = node.default[1];
+    } else {
+      element = null;
+    }
+  }
+
+  let _element = element;
+  let intInput;
+
+  $: if (node.type === "builtins.int") {
+    try {
+      element = calculator.calculate(_element);
+      intInput?.setCustomValidity("");
+    } catch {
+      element = null;
+      intInput?.setCustomValidity("Invalid expression.");
+    }
+  }
+</script>
+
+{#if node.type === "builtins.bool"}
+  <Checkbox checked="{element}" bind:value="{element}" leftbox="{true}">
+    {nodeName}
+  </Checkbox>
+
+  <!---->
+{:else if node.type === "builtins.str"}
+  <label>
+    {nodeName}
+    <input bind:value="{element}" />
+  </label>
+
+  <!---->
+{:else if node.type === "builtins.bytes"}
+  <label>
+    {nodeName}
+    <input
+      pattern="([0-9a-fA-F][0-9a-fA-F])*"
+      placeholder="00deadbeef00"
+      bind:value="{element}"
+    />
+  </label>
+
+  <!---->
+{:else if node.type === "builtins.int"}
+  <label>
+    {nodeName}
+    <input
+      placeholder="{INT_PLACEHOLDERS[
+        Math.floor(Math.random() * INT_PLACEHOLDERS.length)
+      ]}"
+      bind:value="{_element}"
+      bind:this="{intInput}"
+    />
+  </label>
+
+  <!---->
+{/if}
diff --git a/frontend/src/utils/serializer_inputs/RangeInputForm.svelte b/frontend/src/utils/serializer_inputs/RangeInputForm.svelte
new file mode 100644
index 000000000..a988a7510
--- /dev/null
+++ b/frontend/src/utils/serializer_inputs/RangeInputForm.svelte
@@ -0,0 +1,19 @@
+<script>
+  export let node, nodeName, element, baseForm;
+
+  if (element === undefined) {
+    if (node.default !== null) {
+      element = node.default[1];
+    } else {
+      element = [];
+    }
+  }
+</script>
+
+{#each node.fields as field, i}
+  <svelte:component
+    this="{baseForm}"
+    node="{field}"
+    bind:element="{element[i]}"
+  />
+{/each}
diff --git a/frontend/src/utils/serializer_inputs/SourceBundleInputForm.svelte b/frontend/src/utils/serializer_inputs/SourceBundleInputForm.svelte
new file mode 100644
index 000000000..75921e648
--- /dev/null
+++ b/frontend/src/utils/serializer_inputs/SourceBundleInputForm.svelte
@@ -0,0 +1,28 @@
+<script>
+  import FileBrowser from "../FileBrowser.svelte";
+
+  export let node, element;
+  let files = null;
+
+  if (element === undefined) {
+    if (node.default !== null) {
+      throw Error("Default values for SourceBundle inputs not supported");
+    } else {
+      element = [];
+    }
+  }
+
+  async function slurpSourceBundle(files) {
+    for (const file of files) {
+      let text = await file.text();
+      element.push([file.name, text]);
+    }
+    return element;
+  }
+
+  $: if (files) {
+    slurpSourceBundle(files);
+  }
+</script>
+
+<FileBrowser multiple="{true}" bind:files="{files}" />
diff --git a/frontend/src/utils/serializer_inputs/TupleInputForm.svelte b/frontend/src/utils/serializer_inputs/TupleInputForm.svelte
new file mode 100644
index 000000000..350b465da
--- /dev/null
+++ b/frontend/src/utils/serializer_inputs/TupleInputForm.svelte
@@ -0,0 +1,19 @@
+<script>
+  export let node, element, baseForm;
+
+  if (element === undefined) {
+    if (node.default !== null) {
+      element = node.default[1];
+    } else {
+      element = [];
+    }
+  }
+</script>
+
+{#each node.args as arg, i}
+  <svelte:component
+    this="{baseForm}"
+    node="{arg}"
+    bind:element="{element[i]}"
+  />
+{/each}
diff --git a/frontend/src/utils/serializer_inputs/UnionInputForm.svelte b/frontend/src/utils/serializer_inputs/UnionInputForm.svelte
new file mode 100644
index 000000000..dc0c19060
--- /dev/null
+++ b/frontend/src/utils/serializer_inputs/UnionInputForm.svelte
@@ -0,0 +1,130 @@
+<style>
+  select {
+    background-color: var(--main-bg-color);
+    color: inherit;
+    border: 1px solid;
+    border-color: inherit;
+    border-radius: 0;
+    padding: 0.5em 1em;
+    font-size: inherit;
+    font-family: var(--font);
+    box-shadow: none;
+    width: 100%;
+    margin: 0 0 1em;
+  }
+
+  option {
+    font-family: monospace;
+  }
+</style>
+
+<script>
+  import Checkbox from "../Checkbox.svelte";
+
+  export let node, element, baseForm;
+
+  function extractTypeNodeFromOptional(optionalNode) {
+    for (const arg of optionalNode.args) {
+      if (arg.type !== "builtins.NoneType") {
+        return arg;
+      }
+    }
+    return null;
+  }
+
+  function guessSelectedTypeFromExistingValue() {
+    const t = typeof element;
+
+    // Each filter will run on each arg (possible type in union) to see if the existing element
+    // could be of the given type arg
+    // WHAT WE DON'T DO: the first arg matching a filter will be returned
+    // INSTEAD: The first filter that matches an arg, will cause that arg to be returned
+    // This allows prioritizing which matches we make based PRIMARILY on the order of the filters
+    // and SECONDARILY on the order of args, RATHER THAN PRIMARILY on the order of the args and
+    // SECONDARILY on the order of the filters
+
+    const filters = [
+      (arg) => arg.type === "builtins.int" && t === "number",
+      (arg) => arg.type === "builtins.bool" && t === "boolean",
+      (arg) =>
+        arg.type === "builtins.bytes" &&
+        t === "string" &&
+        element.match("([0-9a-fA-F][0-9a-fA-F])*"),
+      (arg) => arg.type === "builtins.str" && t === "string",
+      (arg) => arg.type === "typing.Iterable" && Array.isArray(element),
+      (arg) => arg.type === "typing.List" && Array.isArray(element),
+      (arg) => arg.type === "typing.Tuple" && Array.isArray(element),
+      (arg) => arg.type === "typing.Dict" && Array.isArray(element),
+      (arg) => arg.type === "typing.Optional", // Union[Optional[xyz], etc.] is bad form but possible
+      (arg) =>
+        !arg.type.startsWith("typing") &&
+        !arg.type.startsWith("builtins") &&
+        t === "object",
+    ];
+
+    for (const f of filters) {
+      const matches = node.args.filter(f);
+      if (matches) {
+        return matches[0];
+      }
+    }
+
+    return null;
+  }
+
+  // sets the initially selected value
+  let unionTypeSelect;
+  if (element === undefined) {
+    if (node.default !== null) {
+      [unionTypeSelect, element] = node.default;
+    } else {
+      unionTypeSelect = node.args[0];
+      element = null;
+    }
+  } else {
+    unionTypeSelect = guessSelectedTypeFromExistingValue();
+  }
+
+  let optionalSupplied = element !== null;
+
+  $: {
+    if (!optionalSupplied) {
+      element = null;
+    }
+  }
+</script>
+
+{#if node.type === "typing.Union"}
+  <select bind:value="{unionTypeSelect}">
+    {#if !unionTypeSelect}
+      <option value="{element}" selected disabled> Select a type </option>
+    {/if}
+    {#each node.args as arg}
+      {#if unionTypeSelect === arg}
+        <option value="{arg}" selected>
+          {arg.type}
+        </option>
+      {:else}
+        <option value="{arg}">
+          {arg.type}
+        </option>
+      {/if}
+    {/each}
+  </select>
+  {#if unionTypeSelect != null}
+    <svelte:component
+      this="{baseForm}"
+      node="{unionTypeSelect}"
+      bind:element="{element}"
+    />
+  {/if}
+{:else if node.type === "typing.Optional"}
+  <Checkbox checked="{optionalSupplied}" bind:value="{optionalSupplied}" />
+  {#if optionalSupplied}
+    <svelte:component
+      this="{baseForm}"
+      node="{extractTypeNodeFromOptional(node)}"
+      bind:element="{element}"
+    />
+  {/if}
+{/if}
diff --git a/frontend/src/views/ComponentsView.svelte b/frontend/src/views/ComponentsView.svelte
index d91e349a0..98e237048 100644
--- a/frontend/src/views/ComponentsView.svelte
+++ b/frontend/src/views/ComponentsView.svelte
@@ -120,10 +120,10 @@
   import { splitAndCapitalize } from "../helpers.js";
   import { onMount } from "svelte";
 
-  import SerializerInputForm from "../utils/SerializerInputForm.svelte";
   import LoadingText from "../utils/LoadingText.svelte";
   import Checkbox from "../utils/Checkbox.svelte";
   import Button from "../utils/Button.svelte";
+  import BaseSerializerInputForm from "../utils/serializer_inputs/BaseSerializerInputForm.svelte";
 
   export let modifierView;
   let errorMessage,
@@ -137,7 +137,7 @@
     ofrakComponentsPromise = new Promise(() => {}),
     ofrakTargetsPromise = new Promise(() => {}),
     ofrakConfigsPromise = new Promise(() => {}),
-    config = {},
+    config,
     ofrakConfigName = null;
 
   async function getTargetsAndComponents() {
@@ -306,7 +306,7 @@
           {:then ofrakConfig}
             {#if ofrakConfig.length != 0}
               <p>Configure {splitAndCapitalize(selectedComponent)}:</p>
-              <SerializerInputForm
+              <BaseSerializerInputForm
                 node="{ofrakConfig}"
                 bind:element="{config}"
               />
diff --git a/frontend/src/views/RunScriptView.svelte b/frontend/src/views/RunScriptView.svelte
index 6690d6123..e22f5d793 100644
--- a/frontend/src/views/RunScriptView.svelte
+++ b/frontend/src/views/RunScriptView.svelte
@@ -82,7 +82,6 @@
 <script>
   import FileBrowser from "../utils/FileBrowser.svelte";
   import LoadingText from "../utils/LoadingText.svelte";
-  import SerializerInputForm from "../utils/SerializerInputForm.svelte";
   import Icon from "../utils/Icon.svelte";
   import Button from "../utils/Button.svelte";
 
@@ -97,6 +96,7 @@
     resourceNodeDataMap,
   } from "../stores";
   import { onMount } from "svelte";
+  import BaseSerializerInputForm from "../utils/serializer_inputs/BaseSerializerInputForm.svelte";
 
   hljs.registerLanguage("python", python);
 
@@ -134,7 +134,10 @@
       results = await $selectedResource.run_component(
         "RunScriptModifier",
         "ofrak.core.run_script_modifier.RunScriptModifierConfig",
-        Object.assign({ code: loadedScript.join("\n") }, scriptParams)
+        [
+          "ofrak.core.run_script_modifier.RunScriptModifierConfig",
+          Object.assign({ code: loadedScript.join("\n") }, scriptParams),
+        ]
       );
     } catch (err) {
       $selectedResource.flush_cache();
@@ -199,7 +202,7 @@
       {#if ofrakConfig.length != 0}
         {#each ofrakConfig["fields"] as field, i}
           {#if field.name != "code"}
-            <SerializerInputForm
+            <BaseSerializerInputForm
               node="{field}"
               bind:element="{scriptParams[field.name]}"
             />
diff --git a/frontend/src/views/StartView.svelte b/frontend/src/views/StartView.svelte
index 3fff40d81..f598976db 100644
--- a/frontend/src/views/StartView.svelte
+++ b/frontend/src/views/StartView.svelte
@@ -144,15 +144,15 @@
     settings,
     selectedProject,
     resourceNodeDataMap,
+    popViewCrumb,
   } from "../stores.js";
   import { remote_model_to_resource } from "../ofrak/remote_resource";
   import { numBytesToQuantity, saveSettings } from "../helpers";
 
   import { onMount } from "svelte";
+  import { pushViewCrumb } from "../stores";
 
   export let rootResourceLoadPromise,
-    showRootResource,
-    showProjectManager,
     resources,
     rootResource,
     browsedFiles,
@@ -193,7 +193,7 @@
         )} > ${numBytesToQuantity(warnFileSize)}) may be slow. Are you sure?`
       )
     ) {
-      showRootResource = false;
+      popViewCrumb();
       return;
     }
     if (f.size > warnFileSize) {
@@ -231,7 +231,7 @@
   function choosePreExistingRoot() {
     if (selectedPreExistingRoot) {
       dragging = false;
-      showRootResource = true;
+      pushViewCrumb("rootResource");
 
       rootResource = remote_model_to_resource(
         selectedPreExistingRoot,
@@ -266,7 +266,7 @@
       }
       return r.json();
     });
-    showProjectManager = true;
+    pushViewCrumb("projectManager");
   }
 
   async function cloneProjectFromGit() {
@@ -302,7 +302,7 @@
       }
       return r.json();
     });
-    showProjectManager = true;
+    pushViewCrumb("projectManager");
   }
 
   async function changeProjectPath() {
@@ -341,7 +341,7 @@
   async function handleDrop(e) {
     dragging = false;
     if (e.dataTransfer.files.length > 0) {
-      showRootResource = true;
+      pushViewCrumb("rootResource");
       const f = e.dataTransfer.files[0];
       rootResourceLoadPromise = createRootResource(f);
       await rootResourceLoadPromise;
@@ -349,7 +349,7 @@
   }
 
   $: if (browsedFiles && browsedFiles.length > 0) {
-    showRootResource = true;
+    pushViewCrumb("rootResource");
     const f = browsedFiles[0];
     rootResourceLoadPromise = createRootResource(f);
   }
@@ -397,7 +397,7 @@
       $resourceNodeDataMap[resource.id].collapsed = false;
     }
 
-    showRootResource = true;
+    pushViewCrumb("rootResource");
     rootResourceLoadPromise = Promise.resolve(undefined);
     $selected = resourceId;
     $selectedProject = await fetch(
@@ -592,7 +592,7 @@
                   disabled="{!$selectedProject}"
                   on:click="{(e) => {
                     e.stopPropagation;
-                    showProjectManager = true;
+                    pushViewCrumb('projectManager');
                   }}">Open Existing Project</Button
                 >
               {/await}
diff --git a/ofrak_core/ofrak/gui/modules/__init__.py b/ofrak_core/ofrak/gui/modules/__init__.py
new file mode 100644
index 000000000..e69de29bb
diff --git a/ofrak_core/ofrak/gui/modules/patch_wizard.py b/ofrak_core/ofrak/gui/modules/patch_wizard.py
new file mode 100644
index 000000000..6aa4a4aa3
--- /dev/null
+++ b/ofrak_core/ofrak/gui/modules/patch_wizard.py
@@ -0,0 +1,646 @@
+import asyncio
+import logging
+import os
+import re
+import shutil
+import sys
+import tempfile
+from io import StringIO
+from subprocess import CalledProcessError
+from typing import Dict, List, Optional, Tuple, Type
+
+from aiohttp import web
+from aiohttp.web_request import Request
+from aiohttp.web_response import Response, StreamResponse
+
+from ofrak import Resource
+from ofrak.core import (
+    ProgramAttributes,
+    Program,
+    SegmentInjectorModifier,
+    SegmentInjectorModifierConfig,
+    LinkableBinary,
+    Allocatable,
+    LiefAddSegmentModifier,
+    LiefAddSegmentConfig,
+    Elf,
+    ElfProgramHeaderType,
+    ElfUnpacker,
+    FreeSpace,
+    FreeSpaceAnalyzer,
+    ComplexBlock,
+    FreeSpaceModifier,
+)
+from ofrak.core.elf.load_alignment_modifier import ElfLoadAlignmentModifier
+from ofrak.core.free_space import FreeSpaceModifierConfig
+from ofrak.gui.utils import OfrakServerHelper, exceptions_to_http, json_response
+from ofrak.service.error import SerializedError
+from ofrak.service.resource_service_i import ResourceFilter
+from ofrak_patch_maker.model import BOM, PatchRegionConfig, PatchMakerException
+from ofrak_patch_maker.patch_maker import PatchMaker
+from ofrak_patch_maker.toolchain.abstract import Toolchain
+from ofrak_patch_maker.toolchain.model import ToolchainConfig, ToolchainException, Segment
+from ofrak_type import MemoryPermissions, Range
+
+
+class InvalidStateException(Exception):
+    def __init__(self, current_step: str, missing_step: str):
+        super().__init__(f"Could not {current_step}, required step ({missing_step}) not completed")
+
+
+class PatchWizard:
+    def __init__(self, shim: OfrakServerHelper):
+        self.patches: Dict[str, PatchInProgress] = {}
+        self.helper: OfrakServerHelper = shim
+
+    def routes(self) -> List:
+        return [
+            web.post(
+                "/{resource_id}/patch_wizard/start_new_patch",
+                self.start_new_patch,
+            ),
+            web.post(
+                "/patch_wizard/remove_patch",
+                self.remove_patch,
+            ),
+            web.post(
+                "/patch_wizard/add_file",
+                self.add_file,
+            ),
+            web.post(
+                "/patch_wizard/delete_file",
+                self.delete_file,
+            ),
+            web.post(
+                "/patch_wizard/get_object_infos",
+                self.get_object_infos,
+            ),
+            web.post(
+                "/patch_wizard/get_target_info",
+                self.get_target_info,
+            ),
+            web.post("/patch_wizard/get_all_patches_in_progress", self.get_patches_in_progress),
+            web.post("/patch_wizard/listen_logs", self.get_next_log_message),
+            web.post("/{resource_id}/patch_wizard/save_current_patch", self.save_current_patch),
+            web.post("/patch_wizard/inject_patch", self.inject_patch),
+            web.post("/patch_wizard/extend_elf", self.extend_elf),
+            web.post("/patch_wizard/get_complex_blocks", self.get_complex_blocks),
+            web.post("/patch_wizard/free_complex_blocks", self.free_complex_blocks),
+        ]
+
+    @exceptions_to_http(SerializedError)
+    async def start_new_patch(self, request: Request) -> Response:
+        resource = await self.helper.get_resource_for_request(request)
+        name = request.query["patch_name"]
+        patch = PatchInProgress(name, resource)
+        self.patches[name] = patch
+
+        return json_response(patch.latest_metadata)
+
+    @exceptions_to_http(SerializedError)
+    async def remove_patch(self, request: Request) -> Response:
+        name = request.query["patch_name"]
+        del self.patches[name]
+
+        return Response(status=200)
+
+    @exceptions_to_http(SerializedError)
+    async def add_file(self, request: Request) -> Response:
+        patch_name = request.query["patch_name"]
+        file_name = request.query["file_name"]
+        body = await request.read()
+        self.patches[patch_name].files[file_name] = body
+
+        return Response(status=200)
+
+    @exceptions_to_http(SerializedError)
+    async def delete_file(self, request: Request) -> Response:
+        patch_name = request.query["patch_name"]
+        file_name = request.query["file_name"]
+
+        del self.patches[patch_name].files[file_name]
+
+        return Response(status=200)
+
+    @exceptions_to_http(SerializedError)
+    async def get_object_infos(self, request: Request) -> Response:
+        patch_name = request.query["patch_name"]
+        patch_in_progress = self.patches[patch_name]
+
+        body = await request.json()
+        toolchain = self.helper.serializer.from_pjson(body["toolchain"], Type[Toolchain])
+        toolchain_config = self.helper.serializer.from_pjson(
+            body["toolchainConfig"], ToolchainConfig
+        )
+
+        patch_in_progress.latest_metadata["userInputs"]["toolchain"] = body["toolchain"]
+        patch_in_progress.latest_metadata["userInputs"]["toolchainConfig"] = body["toolchainConfig"]
+
+        patch_bom = await patch_in_progress.build_patch_bom(toolchain, toolchain_config)
+
+        object_infos_struct = [
+            {
+                "name": os.path.basename(source_name),
+                "segments": [
+                    {
+                        "name": seg.segment_name,
+                        "size": seg.length,
+                        "permissions": seg.access_perms.as_str(),
+                        "include": False,
+                        "allocatedVaddr": None,
+                        "unit": os.path.basename(obj.path),
+                    }
+                    for seg in obj.segment_map.values()
+                ],
+                "strongSymbols": list(obj.strong_symbols.keys()),
+                "unresolvedSymbols": list(obj.unresolved_symbols.keys()),
+            }
+            for source_name, obj in patch_bom.object_map.items()
+        ]
+
+        return json_response(object_infos_struct)
+
+    @exceptions_to_http(SerializedError)
+    async def get_patches_in_progress(self, request: Request) -> Response:
+        # Get all patches in progress, with populated patchInfos according to how much stuff is ready for each patch
+        patches = [
+            p.latest_metadata for p in self.patches.values() if p.latest_metadata is not None
+        ]
+        return json_response(patches)
+
+    @exceptions_to_http(SerializedError)
+    async def get_source_file_body(self, request: Request) -> Response:
+        # Get the source file body for one patch
+        raise NotImplementedError()
+
+    @exceptions_to_http(SerializedError)
+    async def get_target_info(self, request: Request) -> Response:
+        patch_name = request.query["patch_name"]
+        patch_in_progress = self.patches[patch_name]
+
+        target_bom, _ = await patch_in_progress.build_target_bom()
+
+        symbols = set()
+        for obj in target_bom.object_map.values():
+            symbols.update(obj.strong_symbols)
+
+        if "empty_source.c" in symbols:
+            # Empty source file created by LinkableBinary.make_linkable_bom so that it can always make a stub BOM
+            symbols.remove("empty_source.c")
+
+        target_info_struct = {"symbols": list(symbols)}
+
+        return json_response(target_info_struct)
+
+    @exceptions_to_http(SerializedError)
+    async def get_next_log_message(self, request: Request) -> Response:
+        patch_name = request.query["patch_name"]
+
+        logged_message = await self.patches[patch_name].logs.listen()
+
+        return Response(status=200, text=logged_message)
+
+    @exceptions_to_http(SerializedError)
+    async def save_current_patch(self, request: Request) -> Response:
+        resource = await self.helper.get_resource_for_request(request)
+
+        patch_info = await request.json()
+
+        self.patches[patch_info["name"]].latest_metadata = patch_info
+        return Response(
+            status=200,
+        )
+
+    @exceptions_to_http(SerializedError)
+    async def inject_patch(self, request: Request) -> Response:
+        patch_name = request.query["patch_name"]
+        patch = self.patches[patch_name]
+
+        patch_spec = await request.json()
+
+        extra_syms = patch_spec["userSymbols"]
+        object_infos = patch_spec["objectInfos"]
+
+        obj_to_segs = {}
+
+        for obj in object_infos:
+            segments = []
+            for segInfo in obj["segments"]:
+                if not segInfo["include"]:
+                    continue
+
+                seg = Segment(
+                    segInfo["name"],
+                    segInfo["allocatedVaddr"],
+                    0,
+                    False,
+                    segInfo["size"],
+                    MemoryPermissions[segInfo["permissions"].upper()],
+                )
+                segments.append(seg)
+            obj_path = patch.source_file_name_to_object_path(obj["name"])
+
+            obj_to_segs[obj_path] = tuple(segments)
+
+        patch_regions = PatchRegionConfig(
+            patch_name,
+            obj_to_segs,
+        )
+
+        injected_bytes = await patch.inject_bom(patch_regions, dict(extra_syms))
+
+        return Response(status=200, text=f"Success! Injected {hex(injected_bytes)} bytes")
+
+    @exceptions_to_http(SerializedError)
+    async def extend_elf(self, request) -> StreamResponse:
+        patch_name = request.query["patch_name"]
+        method = request.query.get("method")
+        # extension_size = request.query.get("ext_size")
+        patch = self.patches[patch_name]
+        resource = patch.resource
+
+        # Guess a reasonable vaddr
+        elf = await resource.view_as(Elf)
+
+        # Option 1: Use lief modifier to replace NOTE segment
+        if method == "note":
+            note_idx = None
+            for ph in await elf.get_program_headers():
+                if ph.p_type == ElfProgramHeaderType.NOTE.value:
+                    note_idx = ph.segment_index
+                    break
+            if note_idx is None:
+                return Response(status=520, text="No NOTE segment found")
+            MIN_SIZE = 0x1000
+            DEFAULT_SIZE = 0x1000
+            DEFAULT_ALIGN = 0x1000
+
+            def align_up(x):
+                if x % DEFAULT_ALIGN != 0:
+                    return x + (DEFAULT_ALIGN - (x % DEFAULT_ALIGN))
+                else:
+                    return x
+
+            def align_down(x):
+                if x % DEFAULT_ALIGN != 0:
+                    return x - (x % DEFAULT_ALIGN)
+                else:
+                    return x
+
+            occupied_mem = Range.merge_ranges(
+                [Range.from_size(ph.p_vaddr, ph.p_memsz) for ph in await elf.get_program_headers()]
+            )
+
+            existing_code_mem = Range.merge_ranges(
+                [
+                    Range.from_size(ph.p_vaddr, ph.p_memsz)
+                    for ph in await elf.get_program_headers()
+                    if ph.p_type == ElfProgramHeaderType.LOAD.value
+                    and ph.p_flags & MemoryPermissions.RX.value
+                ]
+            )
+
+            free_space_between_occupied_mem = [
+                Range(free_block_start, free_block_end)
+                for free_block_start, free_block_end in zip(
+                    [r.start for r in occupied_mem[:-1]], [r.start for r in occupied_mem[1:]]
+                )
+            ]
+
+            free_space_between_occupied_mem = [
+                Range(align_up(r.start), align_down(r.end))
+                for r in free_space_between_occupied_mem
+                if align_up(r.start) < align_down(r.end)
+            ]
+
+            closest_to_existing: Tuple[Optional[Range], int, bool] = (None, sys.maxsize, False)
+            # Iterate over all
+            for free_block in free_space_between_occupied_mem:
+                # for i, occupied_range in enumerate(occupied_mem):
+                for existing_code in existing_code_mem:
+                    _, closest_distance, _ = closest_to_existing
+
+                    distance_up = abs(free_block.end - existing_code.start)
+                    distance_down = abs(free_block.start - existing_code.end)
+
+                    if distance_up < closest_distance:
+                        # This free memory is closest to existing code memory at a HIGHER vaddr
+                        closest_to_existing = (free_block, distance_up, True)
+                    if distance_down < closest_distance:
+                        # This free memory is closest to existing code memory at a LOWER vaddr
+                        closest_to_existing = (free_block, distance_down, False)
+
+            closest_free_block, _, closest_high = closest_to_existing
+            if closest_free_block is None:
+                # This should only make sense when there are no gaps in occupied memory
+                if len(occupied_mem) > 1:
+                    if len(existing_code_mem) == 0:
+                        raise ValueError("No existing code memory to base new vaddr off of!")
+                    else:
+                        raise ValueError(
+                            "Found no closest vaddr but there are gaps in existing memory!"
+                        )
+                closest_free_block = Range.from_size(align_up(occupied_mem[-1].end), DEFAULT_SIZE)
+                closest_high = False
+
+            ext_size = min(closest_free_block.length(), DEFAULT_SIZE)
+            if ext_size < MIN_SIZE:
+                raise ValueError(
+                    f"Best place to add a block would be {closest_free_block}, but it would be smaller than the minimum size!"
+                )
+
+            if closest_high:
+                new_block = Range(closest_free_block.end - ext_size, closest_free_block.end)
+            else:
+                new_block = Range(closest_free_block.start, closest_free_block.start + ext_size)
+
+            children = list(await resource.get_children())
+            for child in children:
+                await child.delete()
+                await child.save()
+
+            resource.remove_component(ElfUnpacker.get_id())
+            await resource.save()
+
+            await resource.run(
+                LiefAddSegmentModifier,
+                LiefAddSegmentConfig(
+                    new_block.start,
+                    new_block.length(),
+                    [0 * new_block.length()],
+                    "rx",
+                ),
+            )
+
+            await resource.unpack()
+            elf = await resource.view_as(Elf)
+            load_idx = None
+            for ph in await elf.get_program_headers():
+                if ph.p_vaddr == new_block.start:
+                    await resource.create_child_from_view(
+                        FreeSpace(ph.p_vaddr, ph.p_memsz, MemoryPermissions.RX),
+                        data_range=Range.from_size(ph.p_offset, ph.p_filesz),
+                    )
+                    load_idx = ph.segment_index
+                    break
+            resource.remove_component(FreeSpaceAnalyzer.get_id())
+            await resource.save()
+
+            return Response(
+                status=200,
+                text=f"Replaced NOTE program header at #{note_idx} with a LOAD header at #{load_idx}",
+            )
+
+        elif method == "load_align":
+            # Option 2: LoadAlignmentModifier
+            resource.add_tag(Allocatable)
+            await resource.save()
+            alloc = await resource.view_as(Allocatable)
+            original_range_count = sum(len(ranges) for ranges in alloc.free_space_ranges.values())
+
+            await resource.run(ElfLoadAlignmentModifier)
+
+            resource.remove_component(FreeSpaceAnalyzer.get_id())
+            await resource.save()
+            alloc = await resource.view_as(Allocatable)
+            updated_range_count = sum(len(ranges) for ranges in alloc.free_space_ranges.values())
+
+            if updated_range_count > original_range_count:
+                n_new_ranges = updated_range_count - original_range_count
+                possesion_suffixes = ("'s", "") if n_new_ranges == 1 else ("s'", "s")
+                return json_response(
+                    status=200,
+                    text=f"Recovered free space from {n_new_ranges} segment{possesion_suffixes[0]} alignment{possesion_suffixes[1]}",
+                )
+            else:
+                return Response(
+                    status=520, text="Load alignment modifier could not recover any free space!"
+                )
+
+        return Response(status=400, text="No extension method specified")
+
+    @exceptions_to_http(SerializedError)
+    async def get_complex_blocks(self, request: Request) -> Response:
+        patch_name = request.query["patch_name"]
+        patch = self.patches[patch_name]
+
+        results = [
+            {
+                "id": cb.resource.get_id().hex(),
+                "name": cb.name,
+                "vaddr": cb.virtual_address,
+                "size": cb.size,
+            }
+            for cb in await patch.resource.get_descendants_as_view(
+                ComplexBlock, r_filter=ResourceFilter.with_tags(ComplexBlock)
+            )
+        ]
+        return json_response(results)
+
+    @exceptions_to_http(SerializedError)
+    async def free_complex_blocks(self, request: Request) -> Response:
+        patch_name = request.query["patch_name"]
+        patch = self.patches[patch_name]
+
+        cb_ids = {bytes.fromhex(id_str) for id_str in await request.json()}
+
+        cbs_to_free = [
+            cb_r
+            for cb_r in await patch.resource.get_descendants(
+                r_filter=ResourceFilter.with_tags(ComplexBlock)
+            )
+            if cb_r.get_id() in cb_ids
+        ]
+
+        await asyncio.gather(
+            *(
+                cb_r.run(FreeSpaceModifier, FreeSpaceModifierConfig(MemoryPermissions.RX))
+                for cb_r in cbs_to_free
+            )
+        )
+
+        patch.resource.remove_component(FreeSpaceAnalyzer.get_id())
+        await patch.resource.save()
+
+        return Response(status=200)
+
+
+class LogStreamer(StringIO):
+    tmpfile_regex = re.compile(r"/tmp/tmp[a-zA-Z0-9]+/")
+
+    def __init__(self):
+        self.message_queue = asyncio.Queue()
+        super().__init__()
+
+    def write(self, msg: str):
+        stripped_msg = self.tmpfile_regex.sub("", msg)
+        self.message_queue.put_nowait(stripped_msg)
+
+    def flush(self):
+        pass
+
+    async def listen(self) -> str:
+        return await self.message_queue.get()
+
+
+class PatchInProgress:
+    def __init__(self, name: str, target_resource: Resource):
+        self.name = name
+        self.resource = target_resource
+        self.build_tmp_dir = tempfile.TemporaryDirectory()
+
+        self.logs = LogStreamer()
+        self.currentLogger: Optional[logging.Logger] = None
+
+        self.files: Dict[str, bytes] = {}
+
+        self.patch_maker: Optional[PatchMaker] = None
+        self.patch_bom: Optional[BOM] = None
+        self.patch_bom_dir: Optional[str] = None
+        self.target_linkable_bom_info: Optional[Tuple[BOM, PatchRegionConfig]] = None
+
+        self.latest_metadata: Dict = {
+            "name": self.name,
+            "sourceInfos": [],
+            "objectInfosValid": False,
+            "objectInfos": [],
+            "targetInfo": {"symbols": []},
+            "targetInfoValid": False,
+            "userInputs": {
+                "symbols": [],
+                "toolchain": None,
+                "toolchainConfig": None,
+            },
+            "symbolRefMap": None,
+        }
+
+    def __del__(self):
+        if self.build_tmp_dir:
+            self.build_tmp_dir.cleanup()
+
+    def source_file_name_to_object_path(self, src_fname):
+        for old_src_path, obj in self.patch_bom.object_map.items():
+            if os.path.basename(old_src_path) == src_fname:
+                return obj.path
+
+    def add_file(self, name: str, body: bytes):
+        self.files[name] = body
+
+    def delete_file(self, name: str):
+        del self.files[name]
+
+    async def build_patch_bom(self, toolchain_type, toolchain_config):
+        program_attributes = await self.resource.analyze(ProgramAttributes)
+
+        self.currentLogger = logging.Logger("patchmaker logs", level=logging.DEBUG)
+        self.currentLogger.addHandler(logging.StreamHandler(stream=self.logs))
+
+        toolchain = self._try_and_log_errors(
+            toolchain_type,
+            program_attributes,
+            toolchain_config,
+            logger=self.currentLogger,
+        )
+
+        self.patch_maker = self._try_and_log_errors(
+            PatchMaker,
+            toolchain=toolchain,
+            build_dir=self.build_tmp_dir.name,
+            logger=self.currentLogger,
+        )
+
+        if self.patch_bom_dir:
+            shutil.rmtree(self.patch_bom_dir)
+
+        # Need to save this to make it possible to clear it later
+        self.patch_bom_dir = os.path.join(self.build_tmp_dir.name, f"{self.name}_bom_files")
+
+        with tempfile.TemporaryDirectory() as source_temp_dir:
+            with tempfile.TemporaryDirectory() as header_temp_dir:
+                source_list = []
+                for filename, contents in self.files.items():
+                    if filename.split(".")[-1] in ("c", "as", "S"):
+                        # source file
+                        path = os.path.join(source_temp_dir, filename)
+                        with open(path, "wb") as f:
+                            f.write(contents)
+                        source_list.append(path)
+                    else:
+                        # header file (presumably)
+                        path = os.path.join(header_temp_dir, filename)
+                        with open(path, "wb") as f:
+                            f.write(contents)
+
+                self.patch_bom = self._try_and_log_errors(
+                    self.patch_maker.make_bom,
+                    name=self.name,
+                    source_list=source_list,
+                    object_list=[],
+                    header_dirs=[header_temp_dir],
+                )
+
+        return self.patch_bom
+
+    async def build_target_bom(self):
+        target_program = await self.resource.view_as(Program)
+
+        stubs_bom_dir = os.path.join(self.build_tmp_dir.name, "stubs_bom_files")
+        if os.path.exists(stubs_bom_dir):
+            shutil.rmtree(stubs_bom_dir)
+
+        with tempfile.TemporaryDirectory() as stubs_sources_dir:
+            self.target_linkable_bom_info = await target_program.make_linkable_bom(
+                self.patch_maker,
+                stubs_sources_dir,
+                self.patch_bom.unresolved_symbols,
+            )
+
+        return self.target_linkable_bom_info
+
+    async def inject_bom(self, patch_regions: PatchRegionConfig, extra_syms: Dict[str, int]):
+        exec_path = os.path.join(self.build_tmp_dir.name, "output_exec")
+
+        if self.patch_maker is None or self.patch_bom is None:
+            raise InvalidStateException("inject BOM", "build patch BOM")
+
+        fem = self._try_and_log_errors(
+            self.patch_maker.make_fem,
+            [(self.patch_bom, patch_regions), self.target_linkable_bom_info],
+            exec_path,
+            additional_symbols=extra_syms,
+        )
+
+        config = SegmentInjectorModifierConfig.from_fem(fem)
+
+        final_injected_size = 0
+        for _, data in config.segments_and_data:
+            final_injected_size += len(data)
+
+        await self.resource.run(
+            SegmentInjectorModifier,
+            config,
+        )
+
+        # Refresh LinkableBinary with the LinkableSymbols used in this patch
+        target_binary = await self.resource.view_as(LinkableBinary)
+        program_attributes = await self.resource.analyze(ProgramAttributes)
+        await target_binary.define_linkable_symbols_from_patch(
+            fem.executable.symbols, program_attributes
+        )
+
+        return final_injected_size
+
+    def _try_and_log_errors(self, f, *args, **kwargs):
+        try:
+            return f(*args, **kwargs)
+        except ToolchainException as e:
+            self.currentLogger.error(str(e))
+            raise
+
+        except PatchMakerException as e:
+            self.currentLogger.error(str(e))
+            raise
+
+        except CalledProcessError as e:
+            self.currentLogger.error(str(e))
+            raise
diff --git a/ofrak_core/ofrak/gui/server.py b/ofrak_core/ofrak/gui/server.py
index 60a69cbe1..802ac6b47 100644
--- a/ofrak_core/ofrak/gui/server.py
+++ b/ofrak_core/ofrak/gui/server.py
@@ -3,15 +3,21 @@
 import dataclasses
 import re
 from enum import Enum
-import functools
 import itertools
 import logging
+
+from ofrak.gui.modules.patch_wizard import PatchWizard
+from ofrak.gui.utils import (
+    exceptions_to_http,
+    json_response,
+    pluck_id,
+    get_query_string_as_pjson,
+    OfrakServerHelper,
+)
 from ofrak.project.project import OfrakProject
 
 import typing_inspect
 from typing_inspect import get_args
-import json
-import orjson
 import inspect
 import os
 import sys
@@ -26,7 +32,6 @@
     Tuple,
     Union,
     Type,
-    Callable,
     TypeVar,
     Any,
     List,
@@ -49,6 +54,7 @@
 from ofrak.ofrak_context import get_current_ofrak_context
 from ofrak.service.component_locator_i import ComponentFilter
 from ofrak_patch_maker.toolchain.abstract import Toolchain
+from ofrak_patch_maker.toolchain.model import BinFileType, CompilerOptimizationLevel
 from ofrak_type.error import NotFoundError
 from ofrak_type.range import Range
 from ofrak import (
@@ -101,32 +107,6 @@
 LOGGER = logging.getLogger(__name__)
 
 
-def exceptions_to_http(error_class: Type[SerializedError]):
-    """
-    Decorator for a server function that attempts to do some work, and
-    forwards the exception, if any, to the client over HTTP.
-
-    Usage:
-
-    @exceptions_to_http(MyErrorClass)
-    async def handle_some_request(self, request...):
-        ...
-    """
-
-    def exceptions_to_http_decorator(func: Callable):
-        @functools.wraps(func)
-        async def wrapper(*args, **kwargs):
-            try:
-                return await func(*args, **kwargs)
-            except Exception as error:
-                LOGGER.exception("Exception raised in aiohttp endpoint")
-                return respond_with_error(error, error_class)
-
-        return wrapper
-
-    return exceptions_to_http_decorator
-
-
 class AiohttpOFRAKServer:
     routes = web.RouteTableDef()
 
@@ -150,92 +130,105 @@ def __init__(
         self.resource_builder: Dict[str, Tuple[Resource, memoryview]] = {}
         self.projects: Optional[Set[OfrakProject]] = None
         self.projects_dir: str = "/tmp/ofrak-projects"
-        self._app.add_routes(
-            [
-                web.post("/create_root_resource", self.create_root_resource),
-                web.post("/init_chunked_root_resource", self.init_chunked_root_resource),
-                web.post("/root_resource_chunk", self.root_resource_chunk),
-                web.post("/create_chunked_root_resource", self.create_chunked_root_resource),
-                web.get("/get_root_resources", self.get_root_resources),
-                web.get("/{resource_id}/", self.get_resource),
-                web.get("/{resource_id}/get_data", self.get_data),
-                web.get("/{resource_id}/get_data_length", self.get_data_length),
-                web.post(
-                    "/batch/get_data_range_within_parent",
-                    self.batch_get_range,
-                ),
-                web.get(
-                    "/{resource_id}/get_child_data_ranges",
-                    self.get_child_data_ranges,
-                ),
-                web.get("/{resource_id}/get_root", self.get_root_resource_from_child),
-                web.post("/{resource_id}/unpack", self.unpack),
-                web.post("/{resource_id}/unpack_recursively", self.unpack_recursively),
-                web.post("/{resource_id}/pack", self.pack),
-                web.post("/{resource_id}/pack_recursively", self.pack_recursively),
-                web.post("/{resource_id}/analyze", self.analyze),
-                web.post("/{resource_id}/identify", self.identify),
-                web.post("/{resource_id}/identify_recursively", self.identify_recursively),
-                web.post("/{resource_id}/data_summary", self.data_summary),
-                web.get("/{resource_id}/get_parent", self.get_parent),
-                web.get("/{resource_id}/get_ancestors", self.get_ancestors),
-                web.get("/{resource_id}/get_descendants", self.get_descendants),
-                web.post("/batch/get_children", self.batch_get_children),
-                web.post("/{resource_id}/queue_patch", self.queue_patch),
-                web.post("/{resource_id}/create_mapped_child", self.create_mapped_child),
-                web.post("/{resource_id}/find_and_replace", self.find_and_replace),
-                web.post("/{resource_id}/add_comment", self.add_comment),
-                web.post("/{resource_id}/delete_comment", self.delete_comment),
-                web.post("/{resource_id}/search_for_vaddr", self.search_for_vaddr),
-                web.post("/{resource_id}/search_for_string", self.search_for_string),
-                web.post("/{resource_id}/search_for_bytes", self.search_for_bytes),
-                web.post("/{resource_id}/add_tag", self.add_tag),
-                web.post(
-                    "/{resource_id}/add_flush_to_disk_to_script", self.add_flush_to_disk_to_script
-                ),
-                web.get("/get_all_tags", self.get_all_tags),
-                web.get("/{resource_id}/get_script", self.get_script),
-                web.post(
-                    "/{resource_id}/get_components",
-                    self.get_components,
-                ),
-                web.get("/{resource_id}/get_config_for_component", self.get_config_for_component),
-                web.post("/{resource_id}/run_component", self.run_component),
-                web.post(
-                    "/{resource_id}/get_tags_and_num_components", self.get_tags_and_num_components
-                ),
-                web.post("/{resource_id}/search_data", self.search_data),
-                web.post("/create_new_project", self.create_new_project),
-                web.get("/get_all_projects", self.get_all_projects),
-                web.get("/get_project_by_id", self.get_project_by_id),
-                web.post("/add_binary_to_project", self.add_binary_to_project),
-                web.post("/add_script_to_project", self.add_script_to_project),
-                web.post("/open_project", self.open_project),
-                web.post("/clone_project_from_git", self.clone_project_from_git),
-                web.get("/get_projects_path", self.get_projects_path),
-                web.post("/set_projects_path", self.set_projects_path),
-                web.post("/save_project_data", self.save_project_data),
-                web.post("/delete_binary_from_project", self.delete_binary_from_project),
-                web.post("/delete_script_from_project", self.delete_script_from_project),
-                web.post("/reset_project", self.reset_project),
-                web.get(
-                    "/{resource_id}/get_project_by_resource_id", self.get_project_by_resource_id
-                ),
-                web.get("/get_project_script", self.get_project_script),
-                web.get("/", self.get_static_files),
-                web.static(
-                    "/",
-                    os.path.join(os.path.dirname(__file__), "./public"),
-                    show_index=True,
-                ),
-            ]
-        )
+        routes = [
+            web.post("/create_root_resource", self.create_root_resource),
+            web.post("/init_chunked_root_resource", self.init_chunked_root_resource),
+            web.post("/root_resource_chunk", self.root_resource_chunk),
+            web.post("/create_chunked_root_resource", self.create_chunked_root_resource),
+            web.get("/get_root_resources", self.get_root_resources),
+            web.get("/{resource_id}/", self.get_resource),
+            web.get("/{resource_id}/get_data", self.get_data),
+            web.get("/{resource_id}/get_data_length", self.get_data_length),
+            web.post(
+                "/batch/get_data_range_within_parent",
+                self.batch_get_range,
+            ),
+            web.get(
+                "/{resource_id}/get_child_data_ranges",
+                self.get_child_data_ranges,
+            ),
+            web.get("/{resource_id}/get_root", self.get_root_resource_from_child),
+            web.post("/{resource_id}/unpack", self.unpack),
+            web.post("/{resource_id}/unpack_recursively", self.unpack_recursively),
+            web.post("/{resource_id}/pack", self.pack),
+            web.post("/{resource_id}/pack_recursively", self.pack_recursively),
+            web.post("/{resource_id}/analyze", self.analyze),
+            web.post("/{resource_id}/identify", self.identify),
+            web.post("/{resource_id}/identify_recursively", self.identify_recursively),
+            web.post("/{resource_id}/data_summary", self.data_summary),
+            web.get("/{resource_id}/get_parent", self.get_parent),
+            web.get("/{resource_id}/get_ancestors", self.get_ancestors),
+            web.get("/{resource_id}/get_descendants", self.get_descendants),
+            web.post("/batch/get_children", self.batch_get_children),
+            web.post("/{resource_id}/queue_patch", self.queue_patch),
+            web.post("/{resource_id}/create_mapped_child", self.create_mapped_child),
+            web.post("/{resource_id}/find_and_replace", self.find_and_replace),
+            web.post("/{resource_id}/add_comment", self.add_comment),
+            web.post("/{resource_id}/delete_comment", self.delete_comment),
+            web.post("/{resource_id}/search_for_vaddr", self.search_for_vaddr),
+            web.post("/{resource_id}/search_for_string", self.search_for_string),
+            web.post("/{resource_id}/search_for_bytes", self.search_for_bytes),
+            web.post("/{resource_id}/add_tag", self.add_tag),
+            web.post(
+                "/{resource_id}/add_flush_to_disk_to_script", self.add_flush_to_disk_to_script
+            ),
+            web.get("/get_all_tags", self.get_all_tags),
+            web.get("/{resource_id}/get_script", self.get_script),
+            web.post(
+                "/{resource_id}/get_components",
+                self.get_components,
+            ),
+            web.get("/{resource_id}/get_config_for_component", self.get_config_for_component),
+            web.post("/{resource_id}/run_component", self.run_component),
+            web.post(
+                "/{resource_id}/get_tags_and_num_components", self.get_tags_and_num_components
+            ),
+            web.post("/{resource_id}/search_data", self.search_data),
+            web.post("/create_new_project", self.create_new_project),
+            web.get("/get_all_projects", self.get_all_projects),
+            web.get("/get_project_by_id", self.get_project_by_id),
+            web.post("/add_binary_to_project", self.add_binary_to_project),
+            web.post("/add_script_to_project", self.add_script_to_project),
+            web.post("/open_project", self.open_project),
+            web.post("/clone_project_from_git", self.clone_project_from_git),
+            web.get("/get_projects_path", self.get_projects_path),
+            web.post("/set_projects_path", self.set_projects_path),
+            web.post("/save_project_data", self.save_project_data),
+            web.post("/delete_binary_from_project", self.delete_binary_from_project),
+            web.post("/delete_script_from_project", self.delete_script_from_project),
+            web.post("/reset_project", self.reset_project),
+            web.get("/{resource_id}/get_project_by_resource_id", self.get_project_by_resource_id),
+            web.get("/get_project_script", self.get_project_script),
+            web.get("/", self.get_static_files),
+            web.static(
+                "/",
+                os.path.join(os.path.dirname(__file__), "./public"),
+                show_index=True,
+            ),
+        ]
 
         self._job_ids: Dict[str, bytes] = defaultdict(
             lambda: ofrak_context.id_service.generate_id()
         )
         self._all_tags: Dict[str, ResourceTag] = {tag.__name__: tag for tag in ResourceTag.all_tags}
 
+        module_helper = OfrakServerHelper(
+            self._ofrak_context,
+            self._serializer,
+            self._job_ids,
+            self.resource_context,
+            self.resource_view_context,
+            self.component_context,
+            self.script_builder,
+        )
+
+        modules = [PatchWizard(module_helper)]
+
+        for module in modules:
+            routes.extend(module.routes())
+
+        self._app.add_routes(routes)
+
         if enable_cors:
             try:
                 import aiohttp_cors  # type: ignore
@@ -925,8 +918,6 @@ async def get_config_for_component(self, request: Request) -> Response:
             _fields = []
             for field in fields(config):
                 field.type = self._modify_by_case(field.type)
-                if isinstance(field.default, dataclasses._MISSING_TYPE):
-                    field.default = None
                 _fields.append(
                     {
                         "name": field.name,
@@ -934,9 +925,7 @@ async def get_config_for_component(self, request: Request) -> Response:
                         "args": self._construct_arg_response(field.type),
                         "fields": self._construct_field_response(field.type),
                         "enum": self._construct_enum_response(field.type),
-                        "default": _format_default(field.default)
-                        if not isinstance(field.default, dataclasses._MISSING_TYPE)
-                        else None,
+                        "default": self._construct_default_response(field),
                     }
                 )
             return json_response(
@@ -946,6 +935,7 @@ async def get_config_for_component(self, request: Request) -> Response:
                     "args": self._construct_arg_response(self._convert_to_class_name_str(config)),
                     "enum": self._construct_enum_response(config),
                     "fields": _fields,
+                    "default": None,
                 }
             )
         else:
@@ -1252,9 +1242,7 @@ def _construct_field_response(self, obj):
                             "args": self._construct_arg_response(field.type),
                             "fields": self._construct_field_response(field.type),
                             "enum": self._construct_enum_response(field.type),
-                            "default": field.default
-                            if not isinstance(field.default, dataclasses._MISSING_TYPE)
-                            else None,
+                            "default": self._construct_default_response(field),
                         }
                     )
             return res
@@ -1303,7 +1291,10 @@ def _construct_enum_response(self, obj):
         elif not issubclass(obj, Enum):
             return None
         else:
-            return {name: value.value for name, value in obj.__members__.items()}
+            return {
+                name: f"{obj.__module__}.{obj.__qualname__}.{name}"
+                for name, value in obj.__members__.items()
+            }
 
     def _has_elipsis(self, obj):
         return any([isinstance(arg, type(...)) for arg in get_args(obj)])
@@ -1330,9 +1321,35 @@ def _convert_to_class_name_str(self, obj: Any):
                     return "typing.Tuple"
                 elif origin is dict:
                     return "typing.Dict"
+                elif origin is type:
+                    return self._convert_to_class_name_str(get_args(obj)[0])
             else:
                 return repr(obj).split("[")[0]
 
+    def _construct_default_response(self, field: dataclasses.Field):
+        if field.default is not dataclasses.MISSING:
+            # field has a default
+            return [
+                self._convert_to_class_name_str(type(field.default)),
+                self._serializer.to_pjson(field.default, type(field.default)),
+            ]
+        elif field.type is BinFileType:
+            # TODO: Hacked in a fake default because this field of Toolchain really should have a default!
+            return [
+                self._convert_to_class_name_str(BinFileType),
+                self._serializer.to_pjson(BinFileType.ELF, BinFileType),
+            ]
+        elif field.type is CompilerOptimizationLevel:
+            # TODO: Hacked in a fake default because this field of Toolchain really should have a default!
+            return [
+                self._convert_to_class_name_str(CompilerOptimizationLevel),
+                self._serializer.to_pjson(
+                    CompilerOptimizationLevel.NONE, CompilerOptimizationLevel
+                ),
+            ]
+        else:
+            return None
+
     async def _get_resource_by_id(self, resource_id: bytes, job_id: bytes) -> Resource:
         resource = await self._ofrak_context.resource_factory.create(
             job_id,
@@ -1495,27 +1512,6 @@ async def start_server(
     return server
 
 
-def respond_with_error(error: Exception, error_cls: Type[SerializedError]) -> Response:
-    if isinstance(error, error_cls):
-        text = error.to_json()
-    else:
-        text = json.dumps(error_cls.to_dict(error))
-    response = Response(text=text, status=500)
-    return response
-
-
-def pluck_id(request: Request, get_parameter_name: str) -> bytes:
-    return bytes.fromhex(request.match_info[get_parameter_name])
-
-
-def get_query_string_as_pjson(request: Request) -> Dict[str, PJSONType]:
-    """
-    URL-encoded GET parameters are all strings. For example, None is encoded as 'None',
-    or 1 as '1', which isn't valid PJSON. We fix this by applying `json.loads` on each parameter.
-    """
-    return {key: json.loads(value) for key, value in request.query.items()}
-
-
 async def open_gui(
     host: str,
     port: int,
@@ -1539,33 +1535,3 @@ async def open_gui(
         webbrowser.open(url)
 
     return server
-
-
-def json_response(
-    data: Any = None,
-    *,
-    text: Optional[str] = None,
-    body: Optional[bytes] = None,
-    status: int = 200,
-    reason: Optional[str] = None,
-    headers=None,
-    content_type: str = "application/json",
-    dumps=orjson.dumps,
-) -> Response:
-    if data is not None:
-        if text or body:
-            raise ValueError("only one of data, text, or body should be specified")
-        else:
-            body = dumps(data)
-    return Response(
-        text=text,
-        body=body,
-        status=status,
-        reason=reason,
-        headers=headers,
-        content_type=content_type,
-    )
-
-
-def _format_default(default):
-    return default.decode() if isinstance(default, bytes) else default
diff --git a/ofrak_core/ofrak/gui/utils.py b/ofrak_core/ofrak/gui/utils.py
new file mode 100644
index 000000000..7a910e97f
--- /dev/null
+++ b/ofrak_core/ofrak/gui/utils.py
@@ -0,0 +1,180 @@
+import functools
+import json
+import logging
+from typing import Type, Callable, Any, Optional, Dict, Iterable, Union
+
+import orjson
+from aiohttp.web_request import Request
+from aiohttp.web_response import Response
+
+from ofrak import Resource
+from ofrak.gui.script_builder import ScriptBuilder
+from ofrak.model.component_model import ComponentContext, ClientComponentContext
+from ofrak.model.resource_model import (
+    ResourceContext,
+    ClientResourceContext,
+    ResourceAttributes,
+    ResourceModel,
+    MutableResourceModel,
+)
+from ofrak.model.viewable_tag_model import ResourceViewContext
+from ofrak.service.error import SerializedError
+from ofrak.service.serialization.pjson_types import PJSONType
+from ofrak.service.serialization.service_i import SerializationServiceInterface
+
+LOGGER = logging.getLogger(__name__)
+
+
+def exceptions_to_http(error_class: Type[SerializedError]):
+    """
+    Decorator for a server function that attempts to do some work, and
+    forwards the exception, if any, to the client over HTTP.
+
+    Usage:
+
+    @exceptions_to_http(MyErrorClass)
+    async def handle_some_request(self, request...):
+        ...
+    """
+
+    def exceptions_to_http_decorator(func: Callable):
+        @functools.wraps(func)
+        async def wrapper(*args, **kwargs):
+            try:
+                return await func(*args, **kwargs)
+            except Exception as error:
+                LOGGER.exception("Exception raised in aiohttp endpoint")
+                return respond_with_error(error, error_class)
+
+        return wrapper
+
+    return exceptions_to_http_decorator
+
+
+def json_response(
+    data: Any = None,
+    *,
+    text: Optional[str] = None,
+    body: Optional[bytes] = None,
+    status: int = 200,
+    reason: Optional[str] = None,
+    headers=None,
+    content_type: str = "application/json",
+    dumps=orjson.dumps,
+) -> Response:
+    if data is not None:
+        if text or body:
+            raise ValueError("only one of data, text, or body should be specified")
+        else:
+            body = dumps(data)
+    return Response(
+        text=text,
+        body=body,
+        status=status,
+        reason=reason,
+        headers=headers,
+        content_type=content_type,
+    )
+
+
+def respond_with_error(error: Exception, error_cls: Type[SerializedError]) -> Response:
+    if isinstance(error, error_cls):
+        text = error.to_json()
+    else:
+        text = json.dumps(error_cls.to_dict(error))
+    response = Response(text=text, status=500)
+    return response
+
+
+def pluck_id(request: Request, get_parameter_name: str) -> bytes:
+    return bytes.fromhex(request.match_info[get_parameter_name])
+
+
+def get_query_string_as_pjson(request: Request) -> Dict[str, PJSONType]:
+    """
+    URL-encoded GET parameters are all strings. For example, None is encoded as 'None',
+    or 1 as '1', which isn't valid PJSON. We fix this by applying `json.loads` on each parameter.
+    """
+    return {key: json.loads(value) for key, value in request.query.items()}
+
+
+class OfrakServerHelper:
+    def __init__(
+        self,
+        ofrak_context,
+        serializer: SerializationServiceInterface,
+        job_ids: Dict[str, bytes],
+        resource_context: ResourceContext = ClientResourceContext(),
+        resource_view_context: ResourceViewContext = ResourceViewContext(),
+        component_context: ComponentContext = ClientComponentContext(),
+        script_builder: ScriptBuilder = ScriptBuilder(),
+    ):
+        # Use all the same ones server is using
+        self.serializer: SerializationServiceInterface = serializer
+        self._ofrak_context = ofrak_context
+        self.resource_context: ResourceContext = resource_context
+        self.resource_view_context: ResourceViewContext = resource_view_context
+        self.component_context: ComponentContext = component_context
+        self.script_builder: ScriptBuilder = script_builder
+        self._job_ids: Dict[str, bytes] = job_ids
+
+    async def get_resource_model_by_id(
+        self,
+        resource_id: bytes,
+    ) -> Optional[Union[ResourceModel, MutableResourceModel]]:
+        resource_m: Optional[
+            Union[ResourceModel, MutableResourceModel]
+        ] = self.resource_context.resource_models.get(resource_id)
+        if resource_m is None:
+            resource_m = await self._ofrak_context.resource_factory._resource_service.get_by_id(
+                resource_id
+            )
+        return resource_m
+
+    async def get_resource_by_id(self, resource_id: bytes, job_id: bytes) -> Resource:
+        resource = await self._ofrak_context.resource_factory.create(
+            job_id,
+            resource_id,
+            self.resource_context,
+            self.resource_view_context,
+            self.component_context,
+        )
+        return resource
+
+    async def get_resource_for_request(self, request: Request) -> Resource:
+        resource_id = pluck_id(request, "resource_id")
+        if request.remote is not None:
+            job_id = self._job_ids[request.remote]
+        else:
+            raise ValueError("No IP address found for the remote request!")
+        return await self.get_resource_by_id(resource_id, job_id)
+
+    def serialize_resource_model(self, resource_model: ResourceModel) -> PJSONType:
+        """
+        Serialize the resource model, stripped of information irrelevant to the frontend.
+        """
+        result = {
+            "id": resource_model.id.hex(),
+            "data_id": resource_model.data_id.hex() if resource_model.data_id else None,
+            "parent_id": resource_model.parent_id.hex() if resource_model.parent_id else None,
+            "tags": [tag.__module__ + "." + tag.__qualname__ for tag in resource_model.tags],
+            "attributes": self.serializer.to_pjson(
+                resource_model.attributes, Dict[Type[ResourceAttributes], ResourceAttributes]
+            ),
+            "caption": resource_model.caption,
+        }
+        return result
+
+    def serialize_resource(self, resource: Resource) -> PJSONType:
+        """
+        Serialize the resource as a serialized model, stripped of information irrelevant to the
+        frontend.
+        """
+        return self.serialize_resource_model(resource.get_model())
+
+    def serialize_multi_resource(self, resources: Iterable[Resource]) -> PJSONType:
+        """
+        Serialize the resources as serialized models, stripped of information irrelevant to the
+        frontend.
+        """
+        return list(map(self.serialize_resource, resources))
diff --git a/ofrak_core/ofrak/service/serialization/pjson.py b/ofrak_core/ofrak/service/serialization/pjson.py
index 4ac815c32..fa8358322 100644
--- a/ofrak_core/ofrak/service/serialization/pjson.py
+++ b/ofrak_core/ofrak/service/serialization/pjson.py
@@ -70,7 +70,10 @@ def to_pjson(self, obj: Any, type_hint: Any) -> PJSONType:
     def from_pjson(self, pjson_obj: PJSONType, type_hint: Any) -> Any:
         """Opposite of `to_pjson`."""
         serializer = self._get_serializer(pjson_obj, type_hint)
-        return serializer.pjson_to_obj(pjson_obj, type_hint)
+        try:
+            return serializer.pjson_to_obj(pjson_obj, type_hint)
+        except Exception as e:
+            raise type(e)(f"Exception when deserializing {pjson_obj} as {type_hint}") from e
 
     def _get_serializer(self, obj: Any, type_hint: Any) -> SerializerInterface:
         """Return the first serializer/deserializer pair found for `type_hint`."""
diff --git a/ofrak_core/setup.py b/ofrak_core/setup.py
index 76ab677d8..0be811717 100644
--- a/ofrak_core/setup.py
+++ b/ofrak_core/setup.py
@@ -40,7 +40,7 @@ def read_requirements(requirements_path):
 
 setuptools.setup(
     name="ofrak",
-    version="3.2.0post0",
+    version="3.2.1rc1",
     description="A binary analysis and modification platform",
     packages=setuptools.find_packages(exclude=["test_ofrak", "test_ofrak.*"]),
     package_data={
@@ -60,7 +60,6 @@ def read_requirements(requirements_path):
             "ofrak_capstone~=1.0",
         ]
         + read_requirements("requirements-test.txt"),
-        "non-pypi": read_requirements("requirements-non-pypi.txt"),
     },
     author="Red Balloon Security",
     author_email="ofrak@redballoonsecurity.com",
diff --git a/ofrak_core/test_ofrak/unit/test_ofrak_server.py b/ofrak_core/test_ofrak/unit/test_ofrak_server.py
index 3c4f46bc2..6d748c0f2 100644
--- a/ofrak_core/test_ofrak/unit/test_ofrak_server.py
+++ b/ofrak_core/test_ofrak/unit/test_ofrak_server.py
@@ -882,7 +882,12 @@ async def test_get_config(ofrak_client: TestClient, hello_world_elf):
                                 "type": "ofrak_type.symbol_type.LinkableSymbolType",
                                 "args": None,
                                 "fields": None,
-                                "enum": {"FUNC": 0, "RW_DATA": 1, "RO_DATA": 2, "UNDEF": -1},
+                                "enum": {
+                                    "FUNC": "ofrak_type.symbol_type.LinkableSymbolType.FUNC",
+                                    "RW_DATA": "ofrak_type.symbol_type.LinkableSymbolType.RW_DATA",
+                                    "RO_DATA": "ofrak_type.symbol_type.LinkableSymbolType.RO_DATA",
+                                    "UNDEF": "ofrak_type.symbol_type.LinkableSymbolType.UNDEF",
+                                },
                                 "default": None,
                             },
                             {
@@ -890,8 +895,15 @@ async def test_get_config(ofrak_client: TestClient, hello_world_elf):
                                 "type": "ofrak_type.architecture.InstructionSetMode",
                                 "args": None,
                                 "fields": None,
-                                "enum": {"NONE": 0, "THUMB": 1, "VLE": 2},
-                                "default": 0,
+                                "enum": {
+                                    "NONE": "ofrak_type.architecture.InstructionSetMode.NONE",
+                                    "THUMB": "ofrak_type.architecture.InstructionSetMode.THUMB",
+                                    "VLE": "ofrak_type.architecture.InstructionSetMode.VLE",
+                                },
+                                "default": [
+                                    "ofrak_type.architecture.InstructionSetMode",
+                                    "ofrak_type.architecture.InstructionSetMode.NONE",
+                                ],
                             },
                         ],
                         "enum": None,
@@ -903,6 +915,7 @@ async def test_get_config(ofrak_client: TestClient, hello_world_elf):
                 "default": None,
             }
         ],
+        "default": None,
     }
 
 
diff --git a/ofrak_patch_maker/ofrak_patch_maker/toolchain/abstract.py b/ofrak_patch_maker/ofrak_patch_maker/toolchain/abstract.py
index 9f437a482..716329f75 100644
--- a/ofrak_patch_maker/ofrak_patch_maker/toolchain/abstract.py
+++ b/ofrak_patch_maker/ofrak_patch_maker/toolchain/abstract.py
@@ -268,12 +268,13 @@ def _execute_tool(
                 my_env.update(env)
                 self._logger.info(f"With env: {my_env}")
                 proc = subprocess.run(
-                    args, stdout=subprocess.PIPE, encoding="utf-8", check=True, env=my_env
+                    args, capture_output=True, encoding="utf-8", check=True, env=my_env
                 )
             else:
-                proc = subprocess.run(args, stdout=subprocess.PIPE, encoding="utf-8", check=True)
+                proc = subprocess.run(args, capture_output=True, encoding="utf-8", check=True)
         except subprocess.CalledProcessError as e:
             cmd = " ".join(args)
+            self._logger.error(e.stderr)
             raise ValueError(f'Command "{cmd}" returned non-zero exit status {e.returncode}')
 
         return proc.stdout