diff --git a/src/App.vue b/src/App.vue
index 7a9cb30..7a2862e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="flex flex-row m-10 justify-around">
+    <div class="flex flex-row flex-wrap m-10 justify-around">
         <router-view />
     </div>
 </template>
diff --git a/src/components/GunForm.vue b/src/components/GunForm.vue
new file mode 100644
index 0000000..c83cbf9
--- /dev/null
+++ b/src/components/GunForm.vue
@@ -0,0 +1,98 @@
+<template>
+  <Card>
+    <template #header>
+      <div class="ml-5 pt-10">
+        <h2 v-if="gun.id" class="text-3xl">Edit Gun</h2>
+        <h2 v-else class="text-3xl">Add Gun</h2>
+      </div>
+    </template>
+    <template #content>
+      <div class="flex flex-row flex-wrap">
+        <div class="w-full">
+          <div class="flex gap-2" style="flex-direction: column">
+            <label for="make">Make</label>
+            <InputText v-model="gun.make" id="make"/>
+          </div>
+        </div>
+        <div class="w-full mt-5">
+          <div class="flex gap-2" style="flex-direction: column">
+            <label for="model">Model</label>
+            <InputText v-model="gun.model" id="model"/>
+          </div>
+        </div>
+        <div class="w-full mt-5">
+          <div class="flex gap-2" style="flex-direction: column">
+            <label for="serial_number">Serial Number</label>
+            <InputText v-model="gun.serial_number" id="serial_number"/>
+          </div>
+        </div>
+        <div class="w-full mt-5">
+          <div class="flex gap-2" style="flex-direction: column">
+            <label for="purchase_amount">Purchase Amount</label>
+            <InputNumber
+                v-model="gun.purchase_amount"
+                :maxFractionDigits="0"
+                :minFractionDigits="0"
+                :min="0"
+                id="purchase_amount"
+            />
+          </div>
+        </div>
+        <div class="w-full mt-5">
+          <div class="flex gap-2" style="flex-direction: column">
+            <label for="value_amount">Value Amount</label>
+            <InputNumber
+                v-model="gun.value_amount"
+                :maxFractionDigits="0"
+                :minFractionDigits="0"
+                :min="0"
+                id="value_amount"
+            />
+          </div>
+        </div>
+        <div class="w-full mt-5">
+          <div class="flex gap-2" style="flex-direction: column">
+            <label for="date_purchased">Date Purchased</label>
+            <Calendar v-model="gun.date_purchased"/>
+          </div>
+        </div>
+        <div class="w-full mt-5">
+          <div class="flex gap-2" style="flex-direction: column">
+            <label for="value_amount">Notes</label>
+            <Textarea v-model="gun.notes"/>
+          </div>
+        </div>
+        <div class="w-full mt-5">
+          <div class="flex gap-2" style="flex-direction: column">
+            <label for="value_amount">Photos</label>
+            <FileUpload
+                :showUploadButton="gun.id === false"
+                :showCancelButton="false"
+                accept="image/*"
+                :multiple="gun.id === null"
+            />
+          </div>
+        </div>
+        <div class="w-full mt-5">
+          <Button @click="$emit('save')" class="p-button-success" icon="fa-sharp fa-light fa-floppy-disk" label="Save"/>
+          <router-link to="/guns">
+            <Button class="p-button-warning ml-3" icon="fa-sharp fa-light fa-times" label="Cancel"/>
+          </router-link>
+        </div>
+      </div>
+    </template>
+  </Card>
+
+</template>
+<script lang="ts">
+import {defineComponent} from "vue";
+
+export default defineComponent({
+  props: {
+    gun: {
+      type: Object,
+      required: true
+    }
+  }
+})
+</script>
\ No newline at end of file
diff --git a/src/pages/Add.vue b/src/pages/Add.vue
index 8c8645f..66e65a4 100644
--- a/src/pages/Add.vue
+++ b/src/pages/Add.vue
@@ -1,87 +1,14 @@
 <template>
-  <Card class="w-full md:w-2/3">
-    <template #header>
-      <div class="ml-5 mt-7">
-        <h2 class="text-3xl">Add Gun</h2>
-      </div>
-    </template>
-    <template #content>
-      <div class="flex flex-row flex-wrap">
-        <div class="w-full">
-          <div class="flex gap-2" style="flex-direction: column">
-            <label for="make">Make</label>
-            <InputText v-model="gun.make" id="make"/>
-          </div>
-        </div>
-        <div class="w-full mt-5">
-          <div class="flex gap-2" style="flex-direction: column">
-            <label for="model">Model</label>
-            <InputText v-model="gun.model" id="model"/>
-          </div>
-        </div>
-        <div class="w-full mt-5">
-          <div class="flex gap-2" style="flex-direction: column">
-            <label for="serial_number">Serial Number</label>
-            <InputText v-model="gun.serial_number" id="serial_number"/>
-          </div>
-        </div>
-        <div class="w-full mt-5">
-          <div class="flex gap-2" style="flex-direction: column">
-            <label for="purchase_amount">Purchase Amount</label>
-            <InputNumber
-                v-model="gun.purchase_amount"
-                :maxFractionDigits="0"
-                :minFractionDigits="0"
-                :min="0"
-                id="purchase_amount"
-            />
-          </div>
-        </div>
-        <div class="w-full mt-5">
-          <div class="flex gap-2" style="flex-direction: column">
-            <label for="value_amount">Value Amount</label>
-            <InputNumber
-                v-model="gun.value_amount"
-                :maxFractionDigits="0"
-                :minFractionDigits="0"
-                :min="0"
-                id="value_amount"
-            />
-          </div>
-        </div>
-        <div class="w-full mt-5">
-          <div class="flex gap-2" style="flex-direction: column">
-            <label for="date_purchased">Date Purchased</label>
-            <Calendar v-model="gun.date_purchased"/>
-          </div>
-        </div>
-        <div class="w-full mt-5">
-          <div class="flex gap-2" style="flex-direction: column">
-            <label for="value_amount">Notes</label>
-            <Textarea v-model="gun.notes"/>
-          </div>
-        </div>
-        <div class="w-full mt-5">
-          <div class="flex gap-2" style="flex-direction: column">
-            <label for="value_amount">Photos</label>
-            <FileUpload :showUploadButton="false" :showCancelButton="false" accept="image/*" multiple/>
-          </div>
-        </div>
-        <div class="w-full mt-5">
-          <Button @click="save" class="p-button-success" icon="fa-sharp fa-light fa-floppy-disk" label="Save"/>
-          <router-link to="/guns">
-            <Button class="p-button-warning ml-3" icon="fa-sharp fa-light fa-times" label="Cancel"/>
-          </router-link>
-        </div>
-      </div>
-    </template>
-  </Card>
+  <div class="md:w-2/3">
+    <GunForm @save="save" :gun="gun" />
+  </div>
 </template>
 <script lang="ts">
 import {defineComponent} from "vue";
 import {Nullable} from "primevue/ts-helpers";
 import axios from "axios";
 import {Response} from "../types/Response";
+import GunForm from "../components/GunForm.vue";
 
 interface Data {
   gun: {
@@ -96,6 +23,7 @@ interface Data {
 }
 
 export default defineComponent({
+  components: {GunForm},
   data: (): Data => ({
     gun: {
       make: "",
diff --git a/src/pages/Edit.vue b/src/pages/Edit.vue
index d5f7dd0..ae26c6d 100644
--- a/src/pages/Edit.vue
+++ b/src/pages/Edit.vue
@@ -1,18 +1,65 @@
 <template>
-  <img :src="`${remoteUrl}/gun/photo/1/IMG_0436.jpg`" />
+  <div class="w-full flex flex-row flex-wrap justify-around">
+    <div class="w-full lg:w-1/2 m-5">
+      <GunForm @save="save" :gun="gun"/>
+    </div>
+    <div class="mt-10 w-full lg:w-1/2 m-5">
+      <Card>
+        <template #content v-if="gun != null">
+          <h3 class="text-lg font-bold">
+            Images
+          </h3>
+          <div style="border-top: 1px rgba(123,123,123,0.4) solid; border-bottom: 1px rgba(123,123,123,0.4) solid;" class="p-5 mt-4 flex justify-evenly" v-for="photo in gun.photos">
+            <div>
+              <a target="_blank" :href="`${remoteUrl}/gun/photo/${photo.id}/${photo.file_name}`">
+                <img :alt="photo.file_name" :src="`${remoteUrl}/gun/photo/${photo.id}/100/${photo.file_name}`"/>
+                {{ photo.file_name }}
+              </a>
+            </div>
+            <div>
+              <i style="color: red;" class="fa-regular fa-2x fa-trash"></i>
+            </div>
+          </div>
+        </template>
+      </Card>
+    </div>
+  </div>
+
 </template>
 <script lang="ts">
-import {defineComponent} from "vue";
+import {defineComponent} from "vue"
 import axios from "axios"
+import {Response} from "../types/Response"
+import {Guns} from "../types/guns";
+import GunForm from "../components/GunForm.vue";
+
+interface Data {
+  gun: Guns | null
+}
 
 export default defineComponent({
+  components: {GunForm},
+  data: (): Data => ({
+    gun: null
+  }),
   created() {
-    axios.get(import.meta.env.VITE_API + `/gun/${this.$route.params.id}`)
+    this.getGun()
   },
   computed: {
     remoteUrl() {
       return import.meta.env.VITE_API
     }
+  },
+  methods: {
+    getGun() {
+      axios.get(import.meta.env.VITE_API + `/gun/${this.$route.params.id}`)
+          .then((r: Response<Guns>) => {
+            this.gun = r.data.payload
+          })
+    },
+    save() {
+
+    }
   }
 })
 </script>
\ No newline at end of file
diff --git a/src/types/guns.d.ts b/src/types/guns.d.ts
index 696dffe..b4c111b 100644
--- a/src/types/guns.d.ts
+++ b/src/types/guns.d.ts
@@ -3,4 +3,11 @@ export interface Guns {
     make: string
     model: string
     value_amount: Number
+    purchase_amount: number
+    photos: Array<Photo>
+}
+
+export interface Photo {
+    id: Number
+    file_name: string
 }
\ No newline at end of file