diff --git a/client/src/app/Main.tsx b/client/src/app/Main.tsx
index 7c4ee16..6b24ba3 100644
--- a/client/src/app/Main.tsx
+++ b/client/src/app/Main.tsx
@@ -1,8 +1,8 @@
 "use client";
 
+import Loading from "@/components/Loading";
 import { apiCall } from "@/lib";
 import zustand, { StateUser } from "@/Zustand";
-import { Spinner } from "@heroui/react";
 import { usePathname, useRouter } from "next/navigation";
 import React, { useEffect, useState } from "react";
 
@@ -58,7 +58,7 @@ export default function Main({ children }: { children: React.ReactNode }) {
 
 	switch (auth) {
 		case AuthState.Loading:
-			return <Spinner label="Loading..." />;
+			return <Loading />;
 		case AuthState.LoggedIn:
 		case AuthState.LoginScreen:
 			return children;
diff --git a/client/src/app/MyEvents.tsx b/client/src/app/MyEvents.tsx
index 28ebc15..9942674 100644
--- a/client/src/app/MyEvents.tsx
+++ b/client/src/app/MyEvents.tsx
@@ -2,6 +2,7 @@
 
 import AssignmentTable from "@/components/Event/AssignmentTable";
 import Event from "@/components/Event/Event";
+import Loading from "@/components/Loading";
 import { apiCall } from "@/lib";
 import zustand, { EventData } from "@/Zustand";
 import { useAsyncList } from "@react-stately/data";
@@ -27,17 +28,30 @@ export default function MyEvents() {
 		},
 	});
 
+	console.debug(events);
+
 	return (
-		<div className="flex justify-center gap-4">
-			{events.items.map((e) => (
-				<Event key={e.eventID} event={e}>
-					<AssignmentTable
-						className="mt-auto"
-						tasks={e.tasks}
-						highlightUser={user?.userName}
-					/>
-				</Event>
-			))}
+		<div>
+			<h1 className="mb-4 text-center text-4xl">My Events</h1>
+			{events.isLoading ? (
+				<Loading />
+			) : events.items.length > 0 ? (
+				<div className="flex justify-center gap-4">
+					{events.items.map((e) => (
+						<Event key={e.eventID} event={e}>
+							<AssignmentTable
+								className="mt-auto"
+								tasks={e.tasks}
+								highlightUser={user?.userName}
+							/>
+						</Event>
+					))}
+				</div>
+			) : (
+				<div className="text-center italic text-gray-400">
+					No assigned events
+				</div>
+			)}
 		</div>
 	);
 }
diff --git a/client/src/app/PendingEvents.tsx b/client/src/app/PendingEvents.tsx
index 1979146..036923e 100644
--- a/client/src/app/PendingEvents.tsx
+++ b/client/src/app/PendingEvents.tsx
@@ -2,6 +2,7 @@
 
 import AvailabilitySelector from "@/components/Event/AvailabilitySelector";
 import Event from "@/components/Event/Event";
+import Loading from "@/components/Loading";
 import { apiCall } from "@/lib";
 import { EventAvailability } from "@/Zustand";
 import { useAsyncList } from "@react-stately/data";
@@ -28,12 +29,25 @@ export default function PendingEvents() {
 	});
 
 	return (
-		<div className="flex justify-center gap-4">
-			{events.items.map((e) => (
-				<Event key={e.eventID} event={e}>
-					<AvailabilitySelector event={e} className="mt-auto" />
-				</Event>
-			))}
+		<div>
+			<h1 className="mb-4 mt-8 w-full text-center text-4xl lg:mt-0">
+				Pending Events
+			</h1>
+			{events.isLoading ? (
+				<Loading />
+			) : events.items.length > 0 ? (
+				<div className="flex justify-center gap-4">
+					{events.items.map((e) => (
+						<Event key={e.eventID} event={e}>
+							<AvailabilitySelector event={e} className="mt-auto" />
+						</Event>
+					))}
+				</div>
+			) : (
+				<div className="text-center italic text-gray-400">
+					No events with missing availability
+				</div>
+			)}
 		</div>
 	);
 }
diff --git a/client/src/app/page.tsx b/client/src/app/page.tsx
index e1dba79..9977522 100644
--- a/client/src/app/page.tsx
+++ b/client/src/app/page.tsx
@@ -3,17 +3,9 @@ import PendingEvents from "./PendingEvents";
 
 export default function Overview() {
 	return (
-		<div className="relative mx-auto flex-1 grid-cols-2 lg:grid lg:max-w-screen-lg">
-			<div>
-				<h1 className="mb-4 text-center text-4xl">My Events</h1>
-				<MyEvents />
-			</div>
-			<div>
-				<h1 className="mb-4 mt-8 text-center text-4xl lg:mt-0">
-					Pending Events
-				</h1>
-				<PendingEvents />
-			</div>
+		<div className="relative mx-auto flex-1 grid-cols-2 gap-8 lg:grid lg:max-w-screen-lg">
+			<MyEvents />
+			<PendingEvents />
 		</div>
 	);
 }
diff --git a/client/src/components/Event/EventEditor.tsx b/client/src/components/Event/EventEditor.tsx
index 4c9e86f..b564baa 100644
--- a/client/src/components/Event/EventEditor.tsx
+++ b/client/src/components/Event/EventEditor.tsx
@@ -15,12 +15,12 @@ import {
 	ModalContent,
 	ModalFooter,
 	ModalHeader,
-	Spinner,
 	Textarea,
 } from "@heroui/react";
 import { EventData } from "@/Zustand";
 import { useAsyncList } from "@react-stately/data";
 import { getTasks } from "@/lib";
+import Loading from "../Loading";
 
 export interface EventSubmitData {
 	eventID: number;
@@ -128,7 +128,7 @@ export default function EventEditor(props: {
 										</div>
 									))
 							) : (
-								<Spinner label="Loading" />
+								<Loading />
 							)}
 						</CheckboxGroup>
 					</ModalBody>
diff --git a/client/src/components/Loading.tsx b/client/src/components/Loading.tsx
new file mode 100644
index 0000000..fe7db1e
--- /dev/null
+++ b/client/src/components/Loading.tsx
@@ -0,0 +1,5 @@
+import { Spinner } from "@heroui/react";
+
+export default function Loading() {
+	return <Spinner label="Loading..." />;
+}