diff --git a/frontend/src/lib/EventDisplay.svelte b/frontend/src/lib/EventDisplay.svelte
new file mode 100644
index 0000000..8df1b00
--- /dev/null
+++ b/frontend/src/lib/EventDisplay.svelte
@@ -0,0 +1,131 @@
+<script lang="ts">
+	import { createEventDispatcher } from "svelte";
+	import { fade } from "svelte/transition";
+
+	const dispatch = createEventDispatcher();
+
+	// PROPS AND MODELS
+	import { models } from "$lib/wailsjs/go/models";
+	import { UpdateEvent, DismissEvent, DeleteEvent } from "$lib/wailsjs/go/main/App";
+	export let event: models.Event;
+	const currentTime: Date = new Date();
+	const EVENT_TIMEOUT_DURATION_SCALE_FACTOR: number = 1000000;
+	let previousTriggerDate = new Date(event.StartTime);
+	let nextTriggerTime = event.TimeoutDuration / EVENT_TIMEOUT_DURATION_SCALE_FACTOR;
+
+	async function updateEvent(r: models.Event) {
+		if (r !== undefined) {
+			event = new models.Event(await UpdateEvent(r));
+		}
+	}
+
+	async function dismissEvent() {
+		var dismissResult = await DismissEvent(event);
+		if (dismissResult !== null) {
+			event = new models.Event(dismissResult);
+		} else {
+			dispatch("eventDeleted");
+		}
+	}
+
+	async function deleteEvent() {
+		var dismissResult = await DeleteEvent(event);
+		if (dismissResult !== null) {
+			event = new models.Event(dismissResult);
+		} else {
+			dispatch("eventDeleted");
+		}
+	}
+
+	// MODAL SETTINGS
+	import { getModalStore } from "@skeletonlabs/skeleton";
+	import type { ModalSettings, ModalComponent } from "@skeletonlabs/skeleton";
+	import EventForm from "./EventForm.svelte";
+	const modalStore = getModalStore();
+	const eventFormModalComponent: ModalComponent = {
+		ref: EventForm,
+		props: { event: event },
+	};
+	function eventFormModal(): void {
+		const modal: ModalSettings = {
+			type: "component",
+			title: "Edit Event",
+			component: eventFormModalComponent,
+			response: (r: models.Event) => updateEvent(r),
+		};
+		modalStore.trigger(modal);
+	}
+
+	// PROGRESS BAR SETTINGS
+	import ProgressBar from "@okrad/svelte-progressbar";
+	import { cssVarToHexString } from "$lib/cssColorVariableParsing";
+	const PROGRESS_BAR_1_COLOR_HEX = cssVarToHexString("--color-secondary-500");
+	const PROGRESS_BAR_2_COLOR_HEX = cssVarToHexString("--color-primary-500");
+
+	// Time difference between now and the event start time, in milliseconds
+	let timeDifference = Math.max(Math.min(currentTime.getTime() - event.StartTime.getTime(), nextTriggerTime), 0);
+
+	// Time between interval triggers, in millisecond
+	const INTERVAL_PERIOD = 100;
+	let timeIncrementInterval = setInterval(function () {
+		if (timeDifference <= 0) {
+			return;
+		}
+		if (timeDifference / nextTriggerTime >= 1) {
+			timeDifference = nextTriggerTime+1;
+			clearInterval(timeIncrementInterval);
+			return;
+		}
+		timeDifference = timeDifference + INTERVAL_PERIOD;
+	}, INTERVAL_PERIOD);
+
+	$: backgroundColorClass = timeDifference / nextTriggerTime < 1 ? "variant-ghost" : "variant-ghost-primary";
+</script>
+
+{#if event !== null}
+	<div transition:fade class="eventGridContainer px-5 pt-2 pb-5 h-full w-full {backgroundColorClass} rounded-lg gap-x-5 items-center">
+		<div>
+			{#if event.IsRecurring}
+				<img src="/recurringIcon.svg" alt="Recurring Event" class="w-8" />
+			{/if}
+		</div>
+		<div class="text-sm">Last Triggered</div>
+		<div class="text-sm justify-self-center">Progress</div>
+		<div class="text-sm justify-self-end"><img src="/bin.png" alt="Recurring Event" class="w-8 cursor-pointer" on:click={deleteEvent}/></div>
+
+		<div>{event.Name}</div>
+		<div>{previousTriggerDate.toLocaleString()}</div>
+		<div class="justify-self-center">
+			<ProgressBar
+				style="radial"
+				thickness={20}
+				series={(100 * timeDifference) / nextTriggerTime}
+				valueLabel=" "
+				cls="w-16 pt-5 h-auto mx-auto"
+				addBackground={false}
+				thresholds={[
+					{
+						till: 100,
+						color: PROGRESS_BAR_1_COLOR_HEX,
+					},
+					{
+						till: 101,
+						color: PROGRESS_BAR_2_COLOR_HEX,
+					},
+				]}
+			/>
+		</div>
+		<div class="flex gap-2">
+			<button class="btn variant-filled" on:click={eventFormModal}>Edit</button>
+			<button class="btn variant-filled" on:click={dismissEvent}>Dismiss</button>
+		</div>
+	</div>
+{/if}
+
+<style>
+	.eventGridContainer {
+		display: grid;
+		grid-template-rows: 1fr 3fr;
+		grid-template-columns: 5fr 4fr 3fr 1fr;
+	}
+</style>
diff --git a/frontend/src/lib/Header.svelte b/frontend/src/lib/Header.svelte
new file mode 100644
index 0000000..e7f4b9b
--- /dev/null
+++ b/frontend/src/lib/Header.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+    import { createEventDispatcher } from "svelte";
+	import { models } from "$lib/wailsjs/go/models";
+	import { CreateEvent } from "$lib/wailsjs/go/main/App";
+
+	const dispatch = createEventDispatcher();
+
+	// MODAL SETTINGS
+	import { getModalStore } from "@skeletonlabs/skeleton";
+	import type { ModalSettings, ModalComponent } from "@skeletonlabs/skeleton";
+	import EventForm from "./EventForm.svelte";
+	const modalStore = getModalStore();
+
+	async function createEvent(r: models.Event) {
+		if (r !== undefined) {
+			dispatch('eventCreated', new models.Event(await CreateEvent(r)));
+		}
+	}
+
+	const eventFormModalComponent: ModalComponent = {
+		ref: EventForm,
+		props: { event: new models.Event({
+			"Name": "",
+			"StartTime": new Date(),
+			"TimeoutDuration": 0,
+			"IsRecurring": false,
+		}) },
+	};
+	function eventFormModal(): void {
+		const modal: ModalSettings = {
+			type: "component",
+			title: "Create Event",
+			component: eventFormModalComponent,
+			response: (r: models.Event) => createEvent(r),
+		};
+		modalStore.trigger(modal);
+	}
+</script>
+
+<div id="header" class="h-full space-y-5">
+	<div class="h-full mx-auto flex justify-start">
+		<h1 class="h1">Event Tracker App</h1>
+		<div class="flex-grow" />
+		<!-- <h4 class="text-right">Developed by<br>Hayden McAlister</h4> -->
+	</div>
+
+	<div id="navDiv" class="h-full mx-auto flex justify-center gap-5">
+		<button class="w-full btn variant-filled-primary" on:click={eventFormModal}>New Event</button>
+	</div>
+</div>
+
+<style>
+</style>
diff --git a/frontend/src/lib/event.svelte b/frontend/src/lib/event.svelte
deleted file mode 100644
index 3a90f00..0000000
--- a/frontend/src/lib/event.svelte
+++ /dev/null
@@ -1,90 +0,0 @@
-<script lang="ts">
-	// PROPS AND MODELS
-	import { models } from "$lib/wailsjs/go/models";
-	export let unparsedEventData: models.Event;
-	
-	// MODAL SETTINGS
-	import { getModalStore } from "@skeletonlabs/skeleton";
-	import type { ModalSettings } from "@skeletonlabs/skeleton";
-	const modalStore = getModalStore();
-	function modalDemo(): void {
-		const modal: ModalSettings = {
-			type: "alert",
-			title: "Hello Skeleton",
-			body: "This modal example includes a title, body, and image.",
-		};
-		modalStore.trigger(modal);
-	}
-	
-	// PROGRESS BAR SETTINGS
-	import ProgressBar from "@okrad/svelte-progressbar";
-	import { cssVarToHexString } from "$lib/cssColorVariableParsing";
-	const PROGRESS_BAR_1_COLOR_HEX = cssVarToHexString("--color-secondary-500");
-	const PROGRESS_BAR_2_COLOR_HEX = cssVarToHexString("--color-primary-500");
-	
-	// Parsing props data
-	let event = new models.Event(unparsedEventData);
-	const currentTime: Date = new Date();
-	const EVENT_TIMEOUT_DURATION_SCALE_FACTOR: number = 1000000;
-	let previousTriggerDate = new Date(event.StartTime);
-	let nextTriggerTime = event.TimeoutDuration / EVENT_TIMEOUT_DURATION_SCALE_FACTOR;
-
-	// Time difference between now and the event start time, in milliseconds
-	let timeDifference = Math.min(currentTime.getTime() - event.StartTime.getTime(), nextTriggerTime);
-
-	// Time between interval triggers, in millisecond
-	const INTERVAL_PERIOD = 100;
-	let timeIncrementInterval = setInterval(function () {
-		if (timeDifference / nextTriggerTime >= 1) {
-			timeDifference = nextTriggerTime;
-			clearInterval(timeIncrementInterval);
-			return;
-		}
-		timeDifference = timeDifference + INTERVAL_PERIOD;
-	}, INTERVAL_PERIOD);
-
-	$: backgroundColorClass = (timeDifference / nextTriggerTime < 1) ? 'variant-ghost' : 'variant-ghost-primary';
-</script>
-
-<div class="eventGridContainer px-5 pt-2 pb-5 h-full w-full {backgroundColorClass} rounded-lg gap-x-5 items-center">
-	<div>
-		{#if event.IsRecurring}
-			<img src="static/recurringIcon.svg" alt="Recurring Event" class="w-8">
-		{/if}
-	</div>
-	<div class="text-sm">Last Triggered</div>
-	<div class="text-sm justify-self-center">Progress</div>
-	<div class="text-sm"></div>
-
-	<div>{event.Name}</div>
-	<div>{previousTriggerDate.toLocaleString()}</div>
-	<div class="justify-self-center">
-		<ProgressBar 
-			style="radial" 
-			thickness={20}
-			series={(100 * timeDifference) / nextTriggerTime} 
-			valueLabel=" "
-			cls="w-16 pt-5 h-auto mx-auto"
-			addBackground={false}
-			thresholds={[
-				{
-					till: 99,
-					color: PROGRESS_BAR_1_COLOR_HEX,
-				},
-				{
-					till: 100,
-					color: PROGRESS_BAR_2_COLOR_HEX,
-				}
-			]}
-		/>
-	</div>
-	<div><button class="btn variant-filled">Dismiss</div>
-</div>
-
-<style>
-	.eventGridContainer {
-		display: grid;
-		grid-template-rows: 1fr 3fr;
-		grid-template-columns: 5fr 4fr 3fr 1fr;
-	}
-</style>
diff --git a/frontend/src/lib/header.svelte b/frontend/src/lib/header.svelte
deleted file mode 100644
index f6c77d5..0000000
--- a/frontend/src/lib/header.svelte
+++ /dev/null
@@ -1,29 +0,0 @@
-<script lang="ts">
-	import { getModalStore } from "@skeletonlabs/skeleton";
-	import type { ModalSettings } from "@skeletonlabs/skeleton";
-	const modalStore = getModalStore();
-
-	function modalDemo(): void {
-		const modal: ModalSettings = {
-			type: "alert",
-			title: "Hello Skeleton",
-			body: "This modal example includes a title, body, and image.",
-		};
-		modalStore.trigger(modal);
-	}
-</script>
-
-<div id="header" class="h-full space-y-5">
-	<div class="h-full mx-auto flex justify-start">
-		<h1 class="h1">Event Tracker App</h1>
-		<div class="flex-grow" />
-		<!-- <h4 class="text-right">Developed by<br>Hayden McAlister</h4> -->
-	</div>
-
-	<div id="navDiv" class="h-full mx-auto flex justify-center gap-5">
-		<button class="w-full btn variant-filled-primary" on:click={modalDemo}>New Event</button>
-	</div>
-</div>
-
-<style>
-</style>
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index a224c9f..13da5c0 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -1,39 +1,42 @@
 <script lang="ts">
 	import { Modal } from "@skeletonlabs/skeleton";
 	import { initializeStores } from "@skeletonlabs/skeleton";
-	import type { models } from "$lib/wailsjs/go/models";
+	import { models } from "$lib/wailsjs/go/models";
 	initializeStores();
 
 	import { fade } from "svelte/transition";
 	const MODAL_TRANSITION_DURATION = 200;
 
-	import Header from "$lib/header.svelte";
-	import Event from "$lib/event.svelte";
+	import Header from "$lib/Header.svelte";
+	import EventDisplay from "$lib/EventDisplay.svelte";
 	import { GetAllEvents } from "$lib/wailsjs/go/main/App";
 
 	var allEvents: models.Event[] = [];
 	async function AsyncGetEventsDummyFunction() {
-		allEvents = await GetAllEvents();
+		var asyncResponse = await GetAllEvents();
+		allEvents = asyncResponse.map((x) => new models.Event(x));
 	}
 </script>
 
-<Modal
-	transitionIn={fade}
-	transitionInParams={{ duration: MODAL_TRANSITION_DURATION }}
-	transitionOut={fade}
-	transitionOutParams={{ duration: MODAL_TRANSITION_DURATION }}
-/>
+<Modal transitionIn={fade} transitionInParams={{ duration: MODAL_TRANSITION_DURATION }} transitionOut={fade} transitionOutParams={{ duration: MODAL_TRANSITION_DURATION }} />
 
 <div id="appContainer" class="h-full w-full p-12">
-	<Header />
+	<Header
+		on:eventCreated={(r) => {
+			allEvents.push(r.detail);
+			allEvents = allEvents;
+		}}
+	/>
 
 	<div id="body" class="h-full w-full mx-auto flex justify-center items-center pt-12">
 		<div class="space-y-5 mx-auto w-full">
 			{#await AsyncGetEventsDummyFunction()}
 				<h4>Loading Events</h4>
-			{:then _} 
-				{#each allEvents as event}
-					<Event unparsedEventData={event} />
+			{:then _}
+				{#each allEvents as event (event)}
+					<EventDisplay bind:event on:eventDeleted={(r) => {
+						allEvents = allEvents.filter((e) => e.ID != event.ID);
+					}}/>
 				{/each}
 			{:catch}
 				<h4>Could not get Events from backend!</h4>