diff --git a/pages/notes/[id].vue b/pages/notes/[id].vue
index fa4b773..168fa26 100644
--- a/pages/notes/[id].vue
+++ b/pages/notes/[id].vue
@@ -1,5 +1,8 @@
 <template>
 	<div class="app">
+		<textarea
+			v-model="title"
+			class="titleTextArea" />
 		<button @click="submit()">
 			<Icon
 				name="fa6-solid:floppy-disk"
@@ -16,6 +19,7 @@
 		middleware: ['auth'],
 	});
 
+	const title = ref<string>('');
 	const description = ref<string>('');
 	const route = useRoute();
 	const isLoading = ref<Boolean>(false);
@@ -27,6 +31,7 @@
 			id: route.params.id[0],
 		},
 		onResponse({ response }) {
+			title.value = response._data.note.title;
 			description.value = response._data.note.description;
 			console.log(response);
 		},
@@ -40,6 +45,7 @@
 				id: route.params.id[0],
 			},
 			body: {
+				title: title.value,
 				description: description.value,
 			},
 			onResponse({ response }) {
@@ -60,4 +66,10 @@
 	.noteTextArea {
 		@apply h-full w-full max-w-2xl p-4;
 	}
+	.titleTextArea {
+		@apply bg-primary focus:bg-secondary w-full max-w-2xl text-center;
+	}
+	.app {
+		@apply h-full p-4;
+	}
 </style>
diff --git a/server/api/note.post.ts b/server/api/note.post.ts
index 3a1d671..d28f59c 100644
--- a/server/api/note.post.ts
+++ b/server/api/note.post.ts
@@ -7,11 +7,12 @@ export default defineEventHandler(async (event) => {
 	const query = getQuery(event);
 	const body = await readBody(event);
 
+	const title: string = body.title;
 	const description: string = body.description;
 
 	const { data: note, error } = await supabase
 		.from('notes')
-		.update({ description: description })
+		.update({ title: title, description: description })
 		.eq('id', query.id);
 
 	if (!user) {