diff --git a/pages/notes/index.vue b/pages/notes/index.vue
index 368e8e9..405364f 100644
--- a/pages/notes/index.vue
+++ b/pages/notes/index.vue
@@ -3,13 +3,22 @@
 		<Header />
 
 		<button @click="signout">Sign Out</button>
+		<button @click="create">
+			<LoadingSpinner v-if="isCreating" />
+			<Icon
+				v-if="!isCreating"
+				name="fa6-solid:square-plus"
+				size="24" />
+		</button>
 
 		<div class="content">
-			<div v-if="data">
+			<div
+				v-if="data"
+				class="notes">
 				<div v-for="note in data.notes">
 					<LazyCardNote
 						:id="note.id"
-						:title="`hello`"
+						:title="note.title ? note.title : 'untitled'"
 						:description="note.description" />
 				</div>
 			</div>
@@ -18,14 +27,27 @@
 </template>
 
 <script setup lang="ts">
+	import { title } from 'process';
+
 	definePageMeta({
 		middleware: ['auth'],
 	});
 
 	const router = useRouter();
 	const supabase = useSupabaseAuthClient();
+	const isCreating = ref<boolean>(false);
+
+	const { data: data, refresh } = await useFetch('/api/notes');
 
-	const { data: data } = await useFetch('/api/notes');
+	const create = async () => {
+		isCreating.value = true;
+		await useFetch('/api/note/new', {
+			onResponse({ response }) {
+				isCreating.value = false;
+				router.push(`/notes/${response._data.note.id}`);
+			},
+		});
+	};
 
 	const signout = async () => {
 		const { error } = await supabase.auth.signOut();
@@ -35,7 +57,13 @@
 		router.push('/');
 	};
 
-	onMounted(() => {});
+	onMounted(() => {
+		refresh();
+	});
 </script>
 
-<style scoped></style>
+<style scoped>
+	.notes {
+		@apply flex flex-col gap-4;
+	}
+</style>
diff --git a/server/api/note/new.ts b/server/api/note/new.ts
new file mode 100644
index 0000000..74138a6
--- /dev/null
+++ b/server/api/note/new.ts
@@ -0,0 +1,30 @@
+import { serverSupabaseUser, serverSupabaseClient } from '#supabase/server';
+import { Database } from 'utils/database.types';
+
+export default defineEventHandler(async (event) => {
+	const user = await serverSupabaseUser(event);
+	const supabase = serverSupabaseClient<Database>(event);
+
+	if (!user) {
+		throw createError({ statusCode: 401, message: 'Unauthorized' });
+	}
+
+	const { data: status, error: insertError } = await supabase
+		.from('notes')
+		.insert({ title: '', description: '', user_id: user.id });
+
+	const { data: note, error: fetchError } = await supabase
+		.from('notes')
+		.select('id')
+		.order('created_at', { ascending: false })
+		.limit(1)
+		.single();
+
+	return {
+		statusCode: 200,
+		note: note,
+		message: 'Note Created',
+		insertError: insertError,
+		fetchError: fetchError,
+	};
+});
diff --git a/utils/database.types.ts b/utils/database.types.ts
index ea17125..a716976 100644
--- a/utils/database.types.ts
+++ b/utils/database.types.ts
@@ -4,6 +4,7 @@ export interface Database {
 			notes: {
 				Row: {
 					id: number;
+					uuid: string;
 					title: string;
 					description: string;
 					user_id: string;
@@ -11,6 +12,7 @@ export interface Database {
 				}; // The data expected to be returned from a "select" statement.
 				Insert: {}; // The data expected passed to an "insert" statement.
 				Update: {
+					title: string;
 					description: string;
 				}; // The data expected passed to an "update" statement.
 			};