diff --git a/src/lib/components/App-original.svelte b/src/lib/components/App-original.svelte
new file mode 100644
index 0000000..9de857f
--- /dev/null
+++ b/src/lib/components/App-original.svelte
@@ -0,0 +1,188 @@
+<Ribbon />
+<Header />
+
+<nav>
+  <button class="button is-danger" type="button" on:click={reset}
+    >reset</button
+  >
+
+  <div class="spacer" />
+
+  <button class="button is-info about" on:click={toggle_notes}>about</button>
+
+  <div class="field has-addons">
+    <p class="control">
+      <button class="button" on:click={() => set_output(null)}>editor</button>
+    </p>
+    <p class="control">
+      <button class="button" on:click={() => set_output("json")}>json</button>
+    </p>
+    <p class="control">
+      <button class="button" on:click={() => set_output("print")}
+        >print</button
+      >
+    </p>
+  </div>
+</nav>
+
+{#if show_notes}
+  <Notes show={show_notes} on:close={toggle_notes} />
+{/if}
+
+{#if output === "json"}
+  <OutputJson ship={$ship} on:close={() => set_output(null)} />
+{:else if output === "print"}
+  <Print ship={$ship} />
+{:else}
+  <main>
+    <ShipSpecs />
+
+    <Propulsion
+      ftl={$ship.ftl}
+      engine={$ship.engine}
+      on:change_ftl={change_ftl}
+      on:change_engine={change_engine}
+    />
+
+    <Hull
+      ship_mass={$ship.general.mass}
+      {...$ship.structure.hull}
+      on:change_hull={change_hull}
+      screens={$ship.structure.screens}
+      armour={$ship.structure.armour}
+      on:set_screens={set_screens}
+      cargo={$ship.cargo}
+      streamlining={$ship.streamlining}
+      on:set_cargo={ship_dispatch}
+      on:ship_change={ship_dispatch}
+    />
+
+    <Section label="weaponry">
+      <Firecons
+        {...$ship.weaponry.firecons}
+        on:change_firecons={change_firecons}
+      />
+
+      <ADFC {...$ship.weaponry.adfc} />
+
+      <AddWeapon />
+
+      {#each weapons as weapon (weapon.id)}
+        <Weapon
+          {weapon}
+          id={weapon.id}
+          cost={weapon.cost}
+          mass={weapon.mass}
+        />
+      {/each}
+    </Section>
+
+    <Carrier {...$ship.carrier} />
+  </main>
+  <footer>
+    Written by <a href="https://twitter.com/yenzie">Yanick Champoux</a>. Code
+    available on
+    <a href="https://github.com/aotds/aotds-shipyard">Github</a>
+  </footer>
+{/if}
+
+<script>
+  import { setContext } from "svelte";
+
+  import Header from "./Header.svelte";
+  import Ribbon from "./Ribbon.svelte";
+  import shipStore from "../stores/ship";
+  import OutputJson from "./Output/Json.svelte";
+  import Print from "./Output/Print/index.svelte";
+
+  import ShipSpecs from "./ShipSpecs/index.svelte";
+  import Notes from "./Notes.svelte";
+  import ShipItem from "./ShipItem/index.svelte";
+  import Field from "./Field/index.svelte";
+  import Hull from "./Hull/index.svelte";
+  import Firecons from "./Firecons.svelte";
+  import Propulsion from "./Propulsion/index.svelte";
+  import Section from "./Section/index.svelte";
+  import Weapon from "./Weapon/index.svelte";
+  import Carrier from "./Carrier/index.svelte";
+  import ADFC from "./Weaponry/ADFC/index.svelte";
+  import AddWeapon from "./Weaponry/AddWeapon/index.svelte";
+
+  const ship = shipStore();
+
+  setContext("ship", ship);
+
+  let ship_name = $ship.general.name;
+
+  const change_name = (event) =>
+    ship.dispatch(ship.actions.set_name(event.target.value));
+
+  const change_mass = ({ target: { value } }) =>
+    ship.dispatch(ship.actions.set_ship_mass(parseInt(value)));
+
+  const add_weapon = () => ship.dispatch.add_weapon();
+
+  const change_ftl = ({ detail }) => ship.dispatch.set_ftl(detail);
+  const change_engine = ({ detail }) => ship.dispatch.set_engine(detail);
+  const change_hull = ({ detail }) => ship.dispatch.set_hull(detail);
+  const change_firecons = ({ detail }) => ship.dispatch.set_firecons(detail);
+  const change_weapon = ({ detail }) => ship.dispatch.set_weapon(detail);
+
+  let weapons = [];
+  $: console.log(weapons);
+  $: weapons = $ship.weaponry.weapons;
+
+  const reset = ship.dispatch.reset;
+
+  const set_screens = ({ detail }) => ship.dispatch.set_screens(detail);
+
+  const ship_dispatch = ({ detail }) => ship.dispatch(detail);
+
+  let show_notes = false;
+  const toggle_notes = () => (show_notes = !show_notes);
+
+  let output = null;
+
+  const set_output = (value) => (output = value);
+</script>
+
+<style>
+  main {
+    display: grid;
+    grid-template-columns: 1fr 14em 8em;
+    width: 60em;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  nav {
+    grid-column: 1 / span 3 !important;
+    display: flex;
+    width: 60em;
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: 1em;
+  }
+
+  nav .spacer {
+    flex: 1;
+  }
+
+  :global(main > *) {
+    grid-column: 1;
+  }
+
+  input.reset {
+    grid-column: 2;
+  }
+
+  footer {
+    width: var(--main-width);
+    margin: 0 auto;
+    text-align: right;
+  }
+
+  .about {
+    margin-right: 2em;
+  }
+</style>
diff --git a/src/lib/components/App.svelte b/src/lib/components/App.svelte
index 9de857f..624dfa9 100644
--- a/src/lib/components/App.svelte
+++ b/src/lib/components/App.svelte
@@ -1,188 +1,9 @@
 <Ribbon />
-<Header />
-
-<nav>
-  <button class="button is-danger" type="button" on:click={reset}
-    >reset</button
-  >
-
-  <div class="spacer" />
-
-  <button class="button is-info about" on:click={toggle_notes}>about</button>
-
-  <div class="field has-addons">
-    <p class="control">
-      <button class="button" on:click={() => set_output(null)}>editor</button>
-    </p>
-    <p class="control">
-      <button class="button" on:click={() => set_output("json")}>json</button>
-    </p>
-    <p class="control">
-      <button class="button" on:click={() => set_output("print")}
-        >print</button
-      >
-    </p>
-  </div>
-</nav>
-
-{#if show_notes}
-  <Notes show={show_notes} on:close={toggle_notes} />
-{/if}
-
-{#if output === "json"}
-  <OutputJson ship={$ship} on:close={() => set_output(null)} />
-{:else if output === "print"}
-  <Print ship={$ship} />
-{:else}
-  <main>
-    <ShipSpecs />
-
-    <Propulsion
-      ftl={$ship.ftl}
-      engine={$ship.engine}
-      on:change_ftl={change_ftl}
-      on:change_engine={change_engine}
-    />
-
-    <Hull
-      ship_mass={$ship.general.mass}
-      {...$ship.structure.hull}
-      on:change_hull={change_hull}
-      screens={$ship.structure.screens}
-      armour={$ship.structure.armour}
-      on:set_screens={set_screens}
-      cargo={$ship.cargo}
-      streamlining={$ship.streamlining}
-      on:set_cargo={ship_dispatch}
-      on:ship_change={ship_dispatch}
-    />
-
-    <Section label="weaponry">
-      <Firecons
-        {...$ship.weaponry.firecons}
-        on:change_firecons={change_firecons}
-      />
-
-      <ADFC {...$ship.weaponry.adfc} />
-
-      <AddWeapon />
-
-      {#each weapons as weapon (weapon.id)}
-        <Weapon
-          {weapon}
-          id={weapon.id}
-          cost={weapon.cost}
-          mass={weapon.mass}
-        />
-      {/each}
-    </Section>
-
-    <Carrier {...$ship.carrier} />
-  </main>
-  <footer>
-    Written by <a href="https://twitter.com/yenzie">Yanick Champoux</a>. Code
-    available on
-    <a href="https://github.com/aotds/aotds-shipyard">Github</a>
-  </footer>
-{/if}
 
 <script>
-  import { setContext } from "svelte";
+import Ribbon from '$lib/components/Ribbon.svelte';
 
-  import Header from "./Header.svelte";
-  import Ribbon from "./Ribbon.svelte";
-  import shipStore from "../stores/ship";
-  import OutputJson from "./Output/Json.svelte";
-  import Print from "./Output/Print/index.svelte";
-
-  import ShipSpecs from "./ShipSpecs/index.svelte";
-  import Notes from "./Notes.svelte";
-  import ShipItem from "./ShipItem/index.svelte";
-  import Field from "./Field/index.svelte";
-  import Hull from "./Hull/index.svelte";
-  import Firecons from "./Firecons.svelte";
-  import Propulsion from "./Propulsion/index.svelte";
-  import Section from "./Section/index.svelte";
-  import Weapon from "./Weapon/index.svelte";
-  import Carrier from "./Carrier/index.svelte";
-  import ADFC from "./Weaponry/ADFC/index.svelte";
-  import AddWeapon from "./Weaponry/AddWeapon/index.svelte";
-
-  const ship = shipStore();
-
-  setContext("ship", ship);
-
-  let ship_name = $ship.general.name;
-
-  const change_name = (event) =>
-    ship.dispatch(ship.actions.set_name(event.target.value));
-
-  const change_mass = ({ target: { value } }) =>
-    ship.dispatch(ship.actions.set_ship_mass(parseInt(value)));
-
-  const add_weapon = () => ship.dispatch.add_weapon();
-
-  const change_ftl = ({ detail }) => ship.dispatch.set_ftl(detail);
-  const change_engine = ({ detail }) => ship.dispatch.set_engine(detail);
-  const change_hull = ({ detail }) => ship.dispatch.set_hull(detail);
-  const change_firecons = ({ detail }) => ship.dispatch.set_firecons(detail);
-  const change_weapon = ({ detail }) => ship.dispatch.set_weapon(detail);
-
-  let weapons = [];
-  $: console.log(weapons);
-  $: weapons = $ship.weaponry.weapons;
-
-  const reset = ship.dispatch.reset;
-
-  const set_screens = ({ detail }) => ship.dispatch.set_screens(detail);
-
-  const ship_dispatch = ({ detail }) => ship.dispatch(detail);
-
-  let show_notes = false;
-  const toggle_notes = () => (show_notes = !show_notes);
-
-  let output = null;
-
-  const set_output = (value) => (output = value);
 </script>
 
 <style>
-  main {
-    display: grid;
-    grid-template-columns: 1fr 14em 8em;
-    width: 60em;
-    margin-left: auto;
-    margin-right: auto;
-  }
-
-  nav {
-    grid-column: 1 / span 3 !important;
-    display: flex;
-    width: 60em;
-    margin-left: auto;
-    margin-right: auto;
-    margin-bottom: 1em;
-  }
-
-  nav .spacer {
-    flex: 1;
-  }
-
-  :global(main > *) {
-    grid-column: 1;
-  }
-
-  input.reset {
-    grid-column: 2;
-  }
-
-  footer {
-    width: var(--main-width);
-    margin: 0 auto;
-    text-align: right;
-  }
-
-  .about {
-    margin-right: 2em;
-  }
 </style>
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 6bc1d4b..cb657b4 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,16 +1,9 @@
 <App />
 
-<svelte:head>
-  {#each stylesheets as href (href)}
-    <link rel="stylesheet" {href} />
-  {/each}
-</svelte:head>
-
 <script>
   import '../../static/fonts/faktos.css';
   import '../../static/fonts/dosis/dosis.css';
   import '../../static/global.css';
 
   import App from "$lib/components/App.svelte";
-
 </script>