diff --git a/frontend/src/lib/components/Energy/Energy.svelte b/frontend/src/lib/components/Energy/Energy.svelte
index 390f694..4555643 100644
--- a/frontend/src/lib/components/Energy/Energy.svelte
+++ b/frontend/src/lib/components/Energy/Energy.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
 	import { foodStore } from "$lib/store/FoodStore";
+	import FoodTable from "./Food/FoodTable.svelte";
 </script>
 
 <template>
-	{#each $foodStore as f}
-		<div>{f.food}</div>
-	{/each}
+	<FoodTable items={$foodStore} />
 </template>
\ No newline at end of file
diff --git a/frontend/src/lib/components/Energy/Food/EmptyFoodComp.svelte b/frontend/src/lib/components/Energy/Food/EmptyFoodComp.svelte
index 8b0dcb4..b16ed84 100644
--- a/frontend/src/lib/components/Energy/Food/EmptyFoodComp.svelte
+++ b/frontend/src/lib/components/Energy/Food/EmptyFoodComp.svelte
@@ -1,4 +1,4 @@
-<script lang="ts">
+<!-- <script lang="ts">
 	import { type Food, FoodService } from '$lib/database/food'
 	import { toast } from 'svelte-sonner'
 	import type { Err } from '$lib/types'
@@ -92,4 +92,4 @@
 		    on:keydown={update}>
 		</td>
 	</tr>
-</template>
+</template> -->
diff --git a/frontend/src/lib/components/Energy/Food/FoodComp.svelte b/frontend/src/lib/components/Energy/Food/FoodComp.svelte
index dfc3008..464437f 100644
--- a/frontend/src/lib/components/Energy/Food/FoodComp.svelte
+++ b/frontend/src/lib/components/Energy/Food/FoodComp.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
-	import { type Food, FoodService } from '$lib/database/food'
+	import { UpdateFood } from '$wails/main/App';
+	import {main} from '$wails/models'
+	import { toast } from 'svelte-sonner'
 
-	export let item: Food
+	export let item: main.Food
 	export let energyColor: string
 	export let nameColor: string
 	export let dateColor: string
@@ -33,10 +35,11 @@
 		item.amount = parseInt(amount)
 		item.per100 = parseInt(per100)
 
-		const [newItem, err] = await FoodService.Update(item)
-
-		if (newItem && !err) {
-			item = newItem
+		const res = await UpdateFood(item)
+		if (!res.success) {
+			toast.error(`failed to update food item with error ${res.error}`)
+		} else {
+			item = res.data
 		}
 		name = item.food
 		description = item.description ?? ''
diff --git a/frontend/src/lib/components/Energy/Food/FoodTable.svelte b/frontend/src/lib/components/Energy/Food/FoodTable.svelte
index 3b5c136..905d446 100644
--- a/frontend/src/lib/components/Energy/Food/FoodTable.svelte
+++ b/frontend/src/lib/components/Energy/Food/FoodTable.svelte
@@ -1,57 +1,57 @@
 <script lang="ts">
-	import EmptyFoodComp from '$components/Energy/Food/EmptyFoodComp.svelte'
-	import FoodComp from '$components/Energy/Food/FoodComp.svelte'
-	import type { Food } from '$lib/database/food'
-	import { GenerateColor } from '$lib/utils'
+	import EmptyFoodComp from "$components/Energy/Food/EmptyFoodComp.svelte";
+	import FoodComp from "$components/Energy/Food/FoodComp.svelte";
+	import { GenerateColor } from "$lib/utils";
+	import { main } from "$wails/models";
 
-	export let items: Food[] = []
+	export let items: main.Food[] = [];
 
-	let minCal = 1e5
-	let maxCal = 0
+	let minCal = 1e5;
+	let maxCal = 0;
 	for (let item of items) {
-		if (!item.energy) continue
-		if (item.energy > maxCal) maxCal = item.energy
-		if (item.energy < minCal) minCal = item.energy
+		if (!item.energy) continue;
+		if (item.energy > maxCal) maxCal = item.energy;
+		if (item.energy < minCal) minCal = item.energy;
 	}
 
-	const start = '#99ff99'
-	const end = '#ff9999'
+	const start = "#99ff99";
+	const end = "#ff9999";
 
-	function lerp(item: Food) {
-		if (!item) return start
-		if (!item.energy) return start
-		const t = (item.energy - minCal) / (maxCal - minCal)
-		const r = parseInt(start.slice(1, 3), 16) * (1 - t) + parseInt(end.slice(1, 3), 16) * t
-		const g = parseInt(start.slice(3, 5), 16) * (1 - t) + parseInt(end.slice(3, 5), 16) * t
-		const b = parseInt(start.slice(5, 7), 16) * (1 - t) + parseInt(end.slice(5, 7), 16) * t
-		return `rgb(${r}, ${g}, ${b})`
+	function lerp(item: main.Food) {
+		if (!item) return start;
+		if (!item.energy) return start;
+		const t = (item.energy - minCal) / (maxCal - minCal);
+		const r = parseInt(start.slice(1, 3), 16) * (1 - t) + parseInt(end.slice(1, 3), 16) * t;
+		const g = parseInt(start.slice(3, 5), 16) * (1 - t) + parseInt(end.slice(3, 5), 16) * t;
+		const b = parseInt(start.slice(5, 7), 16) * (1 - t) + parseInt(end.slice(5, 7), 16) * t;
+		return `rgb(${r}, ${g}, ${b})`;
 	}
 
-	const itemColors: Map<string, string> = new Map<string, string>()
+	const itemColors: Map<string, string> = new Map<string, string>();
 
-	function getNameColor(item: Food): string {
-		if (!item) return GenerateColor()
-		if (!item.food) return GenerateColor()
-		if (!itemColors.has(item.food)) itemColors.set(item.food, GenerateColor())
+	function getNameColor(item: main.Food): string {
+		if (!item) return GenerateColor();
+		if (!item.food) return GenerateColor();
+		if (!itemColors.has(item.food)) itemColors.set(item.food, GenerateColor());
 		// THERE'S NOTHING UNDEFINED HERE
 		// WE GOT RID OF UNDEFINED ON LINE 33
 		// ASSHOLE
 		// @ts-ignore
-		return itemColors.get(item.food)
+		return itemColors.get(item.food);
 	}
 
-	const dateColors: Map<string, string> = new Map<string, string>()
-	function getDateColor(item: Food): string {
-		if (!item) return GenerateColor()
-		if (!item.date) return GenerateColor()
-		const date = item.date.toString().split(" ")[0]
-		if (!date) return GenerateColor()
-		if (!dateColors.has(date)) dateColors.set(date, GenerateColor())
+	const dateColors: Map<string, string> = new Map<string, string>();
+	function getDateColor(item: main.Food): string {
+		if (!item) return GenerateColor();
+		if (!item.date) return GenerateColor();
+		const date = item.date.toString().split(" ")[0];
+		if (!date) return GenerateColor();
+		if (!dateColors.has(date)) dateColors.set(date, GenerateColor());
 		// THERE'S NOTHING UNDEFINED HERE
 		// WE GOT RID OF UNDEFINED ON LINE 33
 		// ASSHOLE
 		// @ts-ignore
-		return dateColors.get(date)
+		return dateColors.get(date);
 	}
 </script>
 
@@ -60,36 +60,23 @@
 		<div class="relative overflow-auto h-full shadow-md sm:rounded-lg">
 			<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
 				<thead class="text-xs text-gray-700 uppercase dark:text-gray-400">
-				<tr>
-					<th class="px-6 py-3 bg-gray-50 dark:bg-gray-800 w-2/12" scope="col">
-						Date
-					</th>
-					<th class="px-6 py-3 w-3/12" scope="col">
-						Food
-					</th>
-					<th class="px-6 py-3 bg-gray-50 dark:bg-gray-800 w-4/12" scope="col">
-						Description
-					</th>
-					<th class="px-6 py-3 w-1/12" scope="col">
-						Amount
-					</th>
-					<th class="px-6 py-3 bg-gray-50 dark:bg-gray-800 w-1/12" scope="col">
-						Cal Per 100
-					</th>
-					<th class="px-6 py-3 w-1/12" scope="col">
-						Energy
-					</th>
-				</tr>
+					<tr>
+						<th class="px-6 py-3 bg-gray-50 dark:bg-gray-800 w-2/12" scope="col"> Date </th>
+						<th class="px-6 py-3 w-3/12" scope="col"> Food </th>
+						<th class="px-6 py-3 bg-gray-50 dark:bg-gray-800 w-4/12" scope="col"> Description </th>
+						<th class="px-6 py-3 w-1/12" scope="col"> Amount </th>
+						<th class="px-6 py-3 bg-gray-50 dark:bg-gray-800 w-1/12" scope="col"> Cal Per 100 </th>
+						<th class="px-6 py-3 w-1/12" scope="col"> Energy </th>
+					</tr>
 				</thead>
 				<tbody>
-				<EmptyFoodComp />
-				{#each items as f}
-					<FoodComp item="{f}" energyColor="{lerp(f)}" nameColor="{getNameColor(f)}" dateColor="{getDateColor(f)}" />
-				{/each}
+					<EmptyFoodComp />
+					{#each items as f}
+						<FoodComp item="{f}" energyColor="{lerp(f)}" nameColor="{getNameColor(f)}" dateColor="{getDateColor(f)}" />
+					{/each}
 				</tbody>
 			</table>
 		</div>
-		<div>
-		</div>
+		<div></div>
 	</div>
 </template>