diff --git a/.vercelignore b/.vercelignore
new file mode 100644
index 0000000..412392d
--- /dev/null
+++ b/.vercelignore
@@ -0,0 +1,2 @@
+*.md
+.gitignore
diff --git a/LICENSE.md b/LICENSE.md
new file mode 100644
index 0000000..a25cb58
--- /dev/null
+++ b/LICENSE.md
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Shane B.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
index 029b656..1d5cde5 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,8 @@
 # Wormroller (To be renamed maybe?)
 
-This is a simple app built with Vue on Vite to help plan rolling off wormholes in Eve Online.
+The repo for http://wormroller.dotlag.info.
+
+This is just a calculator built on Vue to help simplify the process of rolling wormholes in Eve Online.
 
 ## Documentation
 
diff --git a/package-lock.json b/package-lock.json
index f284104..46fa957 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "@fortawesome/vue-fontawesome": "^3.0.3",
         "@vueuse/core": "^10.3.0",
         "pinia": "^2.1.4",
+        "pinia-plugin-persistedstate": "^3.2.0",
         "vue": "^3.3.4",
         "vuedraggable": "^4.1.0"
       },
@@ -1449,6 +1450,14 @@
         }
       }
     },
+    "node_modules/pinia-plugin-persistedstate": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/pinia-plugin-persistedstate/-/pinia-plugin-persistedstate-3.2.0.tgz",
+      "integrity": "sha512-tZbNGf2vjAQcIm7alK40sE51Qu/m9oWr+rEgNm/2AWr1huFxj72CjvpQcIQzMknDBJEkQznCLAGtJTIcLKrKdw==",
+      "peerDependencies": {
+        "pinia": "^2.0.0"
+      }
+    },
     "node_modules/pinia/node_modules/vue-demi": {
       "version": "0.14.5",
       "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.5.tgz",
diff --git a/package.json b/package.json
index 29ecdee..2f4bf92 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "@fortawesome/vue-fontawesome": "^3.0.3",
     "@vueuse/core": "^10.3.0",
     "pinia": "^2.1.4",
+    "pinia-plugin-persistedstate": "^3.2.0",
     "vue": "^3.3.4",
     "vuedraggable": "^4.1.0"
   },
diff --git a/src/App.vue b/src/App.vue
index cbc5a8c..d597bce 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,33 +1,34 @@
 <script setup>
-import { ref, watch, computed } from "vue";
+import { ref, watch } from "vue";
 import draggable from "vuedraggable";
 
 import { useSolverStore } from "./stores/solver";
+import { useShipStore } from "./stores/ship";
 
 import Toggle from "./components/Toggle.vue";
 import RadioGroup from "./components/RadioGroup.vue";
+import RollerControls from "./components/RollerControls.vue";
 import Ship from "./components/Ship.vue";
 
-const store = useSolverStore();
-const { wormholes, stages, solver, getJumpStyles } = store;
+const solverStore = useSolverStore();
+const { wormholes, stages, solver, getJumpStyles } = solverStore;
+const shipStore = useShipStore();
 
 const displayTons = ref(true);
 const rollFast = ref(true);
 const useText = ref(true);
 
+const showRollerControls = ref(true);
+
 const displayMass = (value) => {
   return (value / (displayTons.value ? 1000 : 1)).toLocaleString();
 };
 
-const randomInt = (min, max) => {
-  return Math.floor(Math.random() * (max - min + 1)) + min;
-};
-
 const swapShips = (ev) => {
-  if (ev.newIdx >= 0 && ev.newIdx < store.ships.length) {
-    let a = store.ships[Math.min(ev.oldIdx, ev.newIdx)];
-    let b = store.ships[Math.max(ev.oldIdx, ev.newIdx)];
-    store.ships.splice(Math.min(ev.oldIdx, ev.newIdx), 2, b, a);
+  if (ev.newIdx >= 0 && ev.newIdx < solverStore.ships.length) {
+    let a = solverStore.ships[Math.min(ev.oldIdx, ev.newIdx)];
+    let b = solverStore.ships[Math.max(ev.oldIdx, ev.newIdx)];
+    solverStore.ships.splice(Math.min(ev.oldIdx, ev.newIdx), 2, b, a);
   }
 };
 
@@ -38,7 +39,11 @@ const copyShip = (ship) => {
 };
 
 watch(
-  [store.ships, () => store.selectedStage.name, () => store.selectedWH.type],
+  [
+    solverStore.ships,
+    () => solverStore.selectedStage.name,
+    () => solverStore.selectedWH.type,
+  ],
   () => {
     solver(rollFast);
   }
@@ -48,7 +53,7 @@ watch(
 <template>
   <main class="container">
     <div class="wh-info">
-      <select v-model="store.selectedWH" @change="solver(rollFast)">
+      <select v-model="solverStore.selectedWH" @change="solver(rollFast)">
         <option disabled>Static</option>
         <option
           v-for="wh in wormholes.filter((elem) =>
@@ -83,56 +88,43 @@ watch(
       <div class="col-span-all row-span-1">
         <span class="mass-label">Total Mass:</span>{{ " " }}
         <span>
-          {{ displayMass(store.selectedWH.totalMass * 0.9) }} —
-          {{ displayMass(store.selectedWH.totalMass * 1.1) }}
+          {{ displayMass(solverStore.selectedWH.totalMass * 0.9) }} —
+          {{ displayMass(solverStore.selectedWH.totalMass * 1.1) }}
           {{ displayTons ? "tons" : "kg" }}
         </span>
       </div>
       <div class="col-span-all row-span-1">
         <span class="mass-label">Jump Mass:</span>{{ " " }}
         <span>
-          {{ displayMass(store.selectedWH.jumpMass) }}
+          {{ displayMass(solverStore.selectedWH.jumpMass) }}
           {{ displayTons ? "tons" : "kg" }}
         </span>
       </div>
       <div class="col-span-all row-span-1">
         <span class="mass-label">Remaining:</span>{{ " " }}
         <span>
-          {{ displayMass(store.planMassKg.min) }} —
-          {{ displayMass(store.planMassKg.max) }}
+          {{ displayMass(solverStore.planMassKg.min) }} —
+          {{ displayMass(solverStore.planMassKg.max) }}
           {{ displayTons ? "tons" : "kg" }}
         </span>
       </div>
-      <div class="col-span-full flex justify-around mt-4">
-        <button
-          class="w-max"
-          @click="
-            store.ships.push({
-              id: Math.floor(Math.random() * 1000000),
-              name: 'roller',
-              cold: 174_000_000,
-              hot: 274_000_000,
-              isThreader: false,
-              color: {
-                h: randomInt(0, 360),
-                s: randomInt(42, 98),
-                l: randomInt(40, 90),
-              },
-            });
-            solver(rollFast);
-          "
-        >
-          Add Ship
-        </button>
-        <button
-          class="clear w-max"
-          @click="
-            store.plan.length = 0;
-            store.ships.length = 0;
-          "
+      <div
+        class="col-span-full flex flex-wrap justify-around mt-4 content-center gap-3"
+      >
+        <select
+          class="text-sm mb-0"
+          v-model="shipStore.selectedShip"
+          @change="solver(rollFast)"
         >
-          Clear Ships
-        </button>
+          <option
+            v-for="ship in shipStore.savedShips"
+            :key="ship.name"
+            :value="ship"
+          >
+            {{ ship.name }}
+          </option>
+        </select>
+        <RollerControls :use-tons="displayTons" v-model="showRollerControls" />
       </div>
     </div>
     <div>
@@ -141,7 +133,7 @@ watch(
         <Toggle label-left="icons" label-right="text" v-model="useText" />
         <div class="col-span-full h-24 w-full pr-8">
           <RadioGroup
-            v-model:model-value="store.selectedStage"
+            v-model:model-value="solverStore.selectedStage"
             :options="stages"
           />
         </div>
@@ -149,9 +141,14 @@ watch(
     </div>
     <hr class="col-span-full my-4" />
     <h3>Plan</h3>
-    <div :class="`wh-bar h-12 ${store.selectedStage.name.replace(/\s/, '_')}`">
+    <div
+      :class="`wh-bar h-12 ${solverStore.selectedStage.name.replace(
+        /\s/,
+        '_'
+      )}`"
+    >
       <div
-        v-for="jump in store.plan"
+        v-for="jump in solverStore.plan"
         class="ship-bar"
         :style="getJumpStyles(jump)"
       >
@@ -164,11 +161,11 @@ watch(
         </template>
       </div>
     </div>
-    <hr v-if="store.ships.length" class="col-span-full my-4" />
+    <hr v-if="solverStore.ships.length" class="col-span-full my-4" />
     <div class="ships-list">
-      <h3 v-if="store.ships.length">Ships</h3>
+      <h3 v-if="solverStore.ships.length">Ships</h3>
       <draggable
-        v-model="store.ships"
+        v-model="solverStore.ships"
         item-key="id"
         @end="solver(rollFast)"
         :on-remove="(ev) => console.log(ev)"
@@ -180,10 +177,10 @@ watch(
             :idx="idx"
             :ship="ship"
             :use-tons="displayTons"
-            @change:ship="store.ships.splice(idx, 1, $event)"
+            @change:ship="solverStore.ships.splice(idx, 1, $event)"
             @change:ship-idx="swapShips($event)"
-            @delete:ship="store.ships.splice(idx, 1)"
-            @copy:ship="store.ships.push(copyShip(ship))"
+            @delete:ship="solverStore.ships.splice(idx, 1)"
+            @copy:ship="solverStore.ships.push(copyShip(ship))"
           />
         </template>
       </draggable>
diff --git a/src/components/RollerControls.vue b/src/components/RollerControls.vue
new file mode 100644
index 0000000..ba468a8
--- /dev/null
+++ b/src/components/RollerControls.vue
@@ -0,0 +1,127 @@
+<script setup>
+import { ref, computed } from "vue";
+
+import { useSolverStore } from "../stores/solver";
+import { useShipStore } from "../stores/ship";
+
+import Toggle from "./Toggle.vue";
+
+const { modelValue, useTons } = defineProps(["modelValue", "useTons"]);
+defineEmits(["update:modelValue"]);
+
+const shipStore = useShipStore();
+const solverStore = useSolverStore();
+
+const tempShip = ref(JSON.parse(JSON.stringify(shipStore.selectedShip)));
+const idx = computed(() => {
+  return shipStore.savedShips.findIndex((item) => {
+    return item.name === shipStore.selectedShip.name;
+  });
+});
+</script>
+
+<template>
+  <template v-if="modelValue">
+    <span>
+      <button class="w-max" @click="$emit('update:modelValue', false)">
+        Edit Ship
+      </button>
+      <button
+        class="w-max"
+        @click="
+          shipStore.addShip(solverStore.ships);
+          solverStore.solver(rollFast);
+        "
+      >
+        Add Ship
+      </button>
+      <button
+        class="clear w-max"
+        @click="
+          solverStore.plan.length = 0;
+          solverStore.ships.length = 0;
+        "
+      >
+        Clear Ships
+      </button>
+    </span>
+  </template>
+  <template v-else>
+    <button
+      class="save w-max"
+      @click="
+        shipStore.savedShips.splice(idx, 1, tempShip);
+        $emit('update:modelValue', true);
+      "
+    >
+      Save Ship
+    </button>
+    <button class="clear w-max" @click="$emit('update:modelValue', true)">
+      Cancel
+    </button>
+    <div class="w-full flex flex-col mt-4 gap-2 items-center">
+      <label>
+        <input
+          type="text"
+          :value="shipStore.selectedShip.name"
+          @change="
+            tempShip = shipStore.updateShipProperty(
+              'name',
+              $event.target.value,
+              shipStore.selectedShip,
+              useTons
+            )
+          "
+          placeholder="Ship Name"
+        />
+      </label>
+      <label>
+        <input
+          type="number"
+          :value="
+            useTons
+              ? Math.floor(shipStore.selectedShip.cold / 1000)
+              : shipStore.selectedShip.cold
+          "
+          @change="
+            tempShip = shipStore.updateShipProperty(
+              'cold',
+              $event.target.valueAsNumber * (useTons ? 1000 : 1),
+              shipStore.selectedShip,
+              useTons
+            )
+          "
+          placeholder="Cold Mass"
+          :min="0"
+        />
+        {{ useTons ? "tons" : "kg" }}
+      </label>
+      <label>
+        <input
+          type="number"
+          :value="
+            useTons
+              ? Math.floor(shipStore.selectedShip.hot / 1000)
+              : shipStore.selectedShip.hot
+          "
+          @change="
+            tempShip = shipStore.updateShipProperty(
+              'hot',
+              $event.target.valueAsNumber * (useTons ? 1000 : 1),
+              shipStore.selectedShip,
+              useTons
+            )
+          "
+          placeholder="Hot Mass"
+          :min="0"
+        />
+        {{ useTons ? "tons" : "kg" }}
+      </label>
+      <Toggle
+        label-left="roller"
+        label-right="threader"
+        v-model="tempShip.isThreader"
+      />
+    </div>
+  </template>
+</template>
diff --git a/src/components/Ship.vue b/src/components/Ship.vue
index 09028cc..623766a 100644
--- a/src/components/Ship.vue
+++ b/src/components/Ship.vue
@@ -3,8 +3,10 @@ import ColorPicker from "./ColorPicker.vue";
 import Toggle from "./Toggle.vue";
 
 import { useSolverStore } from "../stores/solver";
+import { useShipStore } from "../stores/ship";
 
 const store = useSolverStore();
+const { updateShipProperty } = useShipStore();
 
 const {
   useTons = false,
@@ -15,17 +17,13 @@ const {
   useTons: Boolean,
   ship: Object,
 });
-defineEmits(["change:ship", "change:shipIdx", "delete:ship", "copy:ship"]);
-
-const updateShipProperty = (key, val) => {
-  let updatedShip = ship;
-  if (["hot", "cold"].includes(key)) {
-    updatedShip[key] = val * (useTons ? 1 : 1000);
-  } else {
-    updatedShip[key] = val;
-  }
-  return updatedShip;
-};
+defineEmits([
+  "change:ship",
+  "change:shipIdx",
+  "delete:ship",
+  "copy:ship",
+  "save:ship",
+]);
 </script>
 
 <template>
@@ -38,7 +36,10 @@ const updateShipProperty = (key, val) => {
         type="text"
         :value="ship.name"
         @change="
-          $emit('change:ship', updateShipProperty('name', $event.target.value))
+          $emit(
+            'change:ship',
+            updateShipProperty('name', $event.target.value, ship, useTons)
+          )
         "
         placeholder="Ship Name"
       />
@@ -51,7 +52,9 @@ const updateShipProperty = (key, val) => {
               'change:ship',
               updateShipProperty(
                 'cold',
-                $event.target.valueAsNumber * (useTons ? 1000 : 1)
+                $event.target.valueAsNumber * (useTons ? 1000 : 1),
+                ship,
+                useTons
               )
             )
           "
@@ -69,7 +72,10 @@ const updateShipProperty = (key, val) => {
               'change:ship',
               updateShipProperty(
                 'hot',
-                $event.target.valueAsNumber * (useTons ? 1000 : 1)
+                $event.target.valueAsNumber * (useTons ? 1000 : 1),
+                $event.target.value,
+                ship,
+                useTons
               )
             )
           "
@@ -90,13 +96,13 @@ const updateShipProperty = (key, val) => {
         class="rounded-full font-regular w-1/4"
         @click="$emit('copy:ship')"
       >
-        Copy
+        <font-awesome-icon icon="copy" />
       </button>
       <button
         class="clear rounded-full font-regular w-1/4"
         @click="$emit('delete:ship')"
       >
-        X
+        <font-awesome-icon icon="x" />
       </button>
     </div>
     <div class="buttons sm:hidden">
diff --git a/src/main.js b/src/main.js
index 3f383de..3dd453b 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,6 +2,7 @@ import { createApp } from 'vue'
 import './style.css'
 import App from './App.vue'
 import { createPinia } from 'pinia'
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
 
 /* import the fontawesome core */
 import { library } from '@fortawesome/fontawesome-svg-core'
@@ -16,7 +17,10 @@ import {
   faArrowDown,
   faFire,
   faSnowflake,
-  faTag
+  faTag,
+  faX,
+  faCopy,
+  faFloppyDisk,
 } from '@fortawesome/free-solid-svg-icons'
 
 /* add icons to the library */
@@ -26,10 +30,16 @@ library.add(
   faArrowDown,
   faFire,
   faSnowflake,
-  faTag
+  faTag,
+  faX,
+  faCopy,
+  faFloppyDisk,
 )
 
+const pinia = createPinia()
+  .use(piniaPluginPersistedstate)
+
 createApp(App)
-  .use(createPinia())
+  .use(pinia)
   .component('font-awesome-icon', FontAwesomeIcon)
   .mount('#app')
diff --git a/src/stores/ship.js b/src/stores/ship.js
new file mode 100644
index 0000000..0e9d0c3
--- /dev/null
+++ b/src/stores/ship.js
@@ -0,0 +1,64 @@
+import { defineStore } from "pinia";
+import { ref, computed } from "vue";
+
+export const useShipStore = defineStore("ships", () => {
+  const randomInt = (min, max) => {
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+  };
+
+  const savedShips = ref([
+    {
+      name: "174/274 Praxis",
+      cold: 174_000_000,
+      hot: 274_000_000,
+      isThreader: false,
+    }, {
+      name: "196/296 Megathron",
+      cold: 196_000_000,
+      hot: 296_000_000,
+      isThreader: false,
+    },
+  ]);
+  const selectedShip = ref(savedShips.value[0]);
+
+  const addShip = (shipsList) => {
+    shipsList.push({
+      ...selectedShip.value,
+      id: randomInt(0, 100_000_000),
+      color: {
+        h: randomInt(0, 360),
+        s: randomInt(42, 98),
+        l: randomInt(40, 90),
+      },
+    });
+  }
+
+  const saveShip = (ship) => {
+    savedShips.value.push({
+      name: ship.name,
+      cold: ship.cold,
+      hot: ship.hot,
+      isThreader: ship.isThreader
+    })
+  }
+
+  const updateShipProperty = (key, val, ship, useTons) => {
+    let updatedShip = ship;
+    if (["hot", "cold"].includes(key)) {
+      updatedShip[key] = val * (useTons ? 1 : 1000);
+    } else {
+      updatedShip[key] = val;
+    }
+    return updatedShip;
+  };
+
+  return {
+    savedShips,
+    selectedShip,
+    addShip,
+    saveShip,
+    updateShipProperty
+  }
+}, {
+  persist: true
+})
\ No newline at end of file
diff --git a/src/stores/solver.js b/src/stores/solver.js
index 71fb9d0..3469d99 100644
--- a/src/stores/solver.js
+++ b/src/stores/solver.js
@@ -7,6 +7,7 @@ export const useSolverStore = defineStore('solver', () => {
 
   const selectedWH = ref(wormholes[0]);
   const selectedStage = ref(stages[0]);
+  const plan = ref([]);
 
   const url = computed(() => new URL(window.location));
   if (url.value.search) {
@@ -23,7 +24,6 @@ export const useSolverStore = defineStore('solver', () => {
   }));
 
   const ships = ref([]);
-  const plan = ref([]);
 
   const totalPlanMass = computed(() => plan.value.reduce((prevTotal, jump) => {
     return prevTotal + jump.mass
@@ -133,6 +133,6 @@ export const useSolverStore = defineStore('solver', () => {
     plan,
     solver,
     resetApp,
-    getJumpStyles
+    getJumpStyles,
   }
 })
diff --git a/src/style.css b/src/style.css
index 61b003b..b711808 100644
--- a/src/style.css
+++ b/src/style.css
@@ -60,6 +60,10 @@ button {
   @apply bg-red-700 hover:bg-red-500 border-red-800 hover:border-red-600;
 }
 
+.save {
+  @apply bg-teal-700 hover:bg-teal-500 border-teal-800 hover:border-teal-600;
+}
+
 select {
   @apply col-span-1 bg-gray-700 w-fit;
 }