diff --git a/api/src/Controller/FruitController.php b/api/src/Controller/FruitController.php
index 33a68b7..5635980 100644
--- a/api/src/Controller/FruitController.php
+++ b/api/src/Controller/FruitController.php
@@ -232,7 +232,7 @@ private function serializedForm(Request $request, Fruit $fruit): Fruit
         return $fruit->setName($data['name'] ?? $fruit->getName() ?: '')
             ->setGenus($data['genus'] ?? $fruit->getGenus() ?: '')
             ->setFamily($data['family'] ?? $fruit->getFamily() ?: '')
-            ->setFruitOrder($data['fruit_order'] ?? $fruit->getFruitOrder() ?: '')
+            ->setFruitOrder($data['fruitOrder'] ?? $fruit->getFruitOrder() ?: '')
             ->setCarbohydrates($data['carbohydrates'] ?? $fruit->getCarbohydrates() ?: 0)
             ->setFat($data['fat'] ?? $fruit->getFat() ?: 0)
             ->setProtein($data['protein'] ?? $fruit->getProtein() ?: 0)
diff --git a/app/src/types/Fruit.ts b/app/src/types/Fruit.ts
index 32bf4ae..2f5e0ff 100644
--- a/app/src/types/Fruit.ts
+++ b/app/src/types/Fruit.ts
@@ -1,15 +1,12 @@
 export default interface Fruit {
-  id: null|number,
+  id: number,
   name: string,
-  genus: string
+  genus: string,
   family: string,
   fruitOrder: string,
   carbohydrates: number,
-  fat: number,
   protein: number,
+  fat: number,
   sugar: number,
   calories: number,
-  source: string,
-  createdAt: Date,
-  updatedAt: Date
 }
diff --git a/app/src/views/Form.vue b/app/src/views/Form.vue
new file mode 100644
index 0000000..a3d67ec
--- /dev/null
+++ b/app/src/views/Form.vue
@@ -0,0 +1,98 @@
+<template>
+  <div class="p-5 mb-4 box rounded-3">
+    <div class="container-fluid">
+      <h1 class="display-5 fw-bold mb-3">Fruit Details</h1>
+      <form method="POST" action="#">
+        <div class="form-floating mb-3">
+          <input type="text" class="form-control" id="name" name="name" placeholder="Name" v-model="fruit.name">
+          <label for="name">Name</label>
+        </div>
+        <div class="form-floating mb-3">
+          <input type="text" class="form-control" id="genus" name="genus" placeholder="Genus" v-model="fruit.genus">
+        </div>
+        <label for="genus">jGenus</label>
+        <div class="form-floating mb-3">
+          <input type="text" class="form-control" id="family" name="family" placeholder="Family" v-model="fruit.family">
+          <label for="family">Family</label>
+        </div>
+        <div class="form-floating mb-3">
+          <input type="text" class="form-control" id="order" name="order" placeholder="Order" v-model="fruit.fruitOrder">
+          <label for="order">Order</label>
+        </div>
+        <div class="form-floating mb-3">
+          <input type="text" class="form-control" id="carbohydrates" name="carbohydrates" placeholder="Carbohydrates"
+            v-model="fruit.carbohydrates">
+          <label for="carbohydrates">Carbohydrates</label>
+        </div>
+        <div class="form-floating mb-3">
+          <input type="text" class="form-control" id="protein" name="protein" placeholder="Protein"
+            v-model="fruit.protein">
+          <label for="protein">Protein</label>
+        </div>
+        <div class="form-floating mb-3">
+          <input type="text" class="form-control" id="fat" name="fat" placeholder="Fat" v-model="fruit.fat">
+          <label for="fat">Fat</label>
+        </div>
+        <div class="form-floating mb-3">
+          <input type="text" class="form-control" id="sugar" name="sugar" placeholder="Sugar" v-model="fruit.sugar">
+          <label for="sugar">Sugar</label>
+        </div>
+        <div class="form-floating mb-3">
+          <input type="text" class="form-control" id="calories" name="calories" placeholder="Calories"
+            v-model="fruit.calories">
+          <label for="calories">Calories</label>
+        </div>
+        <button type="submit" class="btn btn-success btn-lg float-end">
+          Submit
+        </button>
+      </form>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from "vue";
+import FruitsApi from '@/api/fruits'
+import type Fruit from '@/types/Fruit'
+
+export default defineComponent({
+  name: 'form',
+  data() {
+    return {
+      fruit: {} as Fruit,
+      message: '' as string,
+    }
+  },
+  methods: {
+    async retrieveData(id: number) {
+      await FruitsApi.get(id)
+        .then((response: any) => {
+          console.log(response);
+          this.fruit = response.data;
+        })
+    },
+
+    async updateData() {
+      await FruitsApi.update(this.fruit.id, this.fruit)
+      .then((response: any) => {
+        this.message = 'Fruit data has been updated'
+      })
+      .error((e: Error) => {
+        console.error(e);
+      })
+    }
+  },
+  mounted() {
+    this.retrieveData(this.$route.params.id)
+    this.message = ''
+  },
+  onUnmounted() {
+    this.fruit = {}
+    this.message = ''
+  }
+})
+
+
+
+</script>
+
+<style lang="scss" scoped></style>