diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
index 163a7de..d1c3976 100644
--- a/assets/css/tailwind.css
+++ b/assets/css/tailwind.css
@@ -29,3 +29,7 @@ html {
 .card {
 	@apply bg-secondary;
 }
+
+textarea {
+	@apply bg-secondary outline-none border-none focus:outline-none resize-none;
+}
diff --git a/components/card/Note.vue b/components/card/Note.vue
index 5418432..327cddd 100644
--- a/components/card/Note.vue
+++ b/components/card/Note.vue
@@ -1,3 +1,37 @@
 <template>
-	<!-- card class css located at /assets/css/tailwind.css -->
+	<div
+		class="note"
+		@click="noteDetail(props.id)">
+		<div class="title">
+			{{ props.title }}
+		</div>
+		<div>
+			{{ props.description }}
+		</div>
+	</div>
 </template>
+
+<script setup lang="ts">
+	interface Props {
+		id: string | number;
+		title: string;
+		description: string;
+	}
+
+	const props = defineProps<Props>();
+	const router = useRouter();
+
+	const noteDetail = (id: string | number) => {
+		router.push(`/notes/${id}`);
+	};
+</script>
+
+<style scoped>
+	.note {
+		@apply bg-secondary flex w-96 cursor-pointer flex-col gap-4 rounded-lg p-4;
+	}
+
+	.title {
+		@apply w-full text-center text-2xl font-bold;
+	}
+</style>
diff --git a/middleware/auth.ts b/middleware/auth.ts
index 538b956..eccc268 100644
--- a/middleware/auth.ts
+++ b/middleware/auth.ts
@@ -1,7 +1,7 @@
 export default defineNuxtRouteMiddleware((to, from) => {
 	const user = useSupabaseUser();
 
-	if (!user.value && to.path === '/notes') {
+	if (!user.value && to.path.startsWith('/notes')) {
 		return navigateTo('/login');
 	} else if (user.value && to.path === '/login') {
 		return navigateTo('/notes');
diff --git a/pages/notes/[id].vue b/pages/notes/[id].vue
new file mode 100644
index 0000000..fa4b773
--- /dev/null
+++ b/pages/notes/[id].vue
@@ -0,0 +1,63 @@
+<template>
+	<div class="app">
+		<button @click="submit()">
+			<Icon
+				name="fa6-solid:floppy-disk"
+				size="24" />
+		</button>
+		<textarea
+			v-model="description"
+			class="noteTextArea"></textarea>
+	</div>
+</template>
+
+<script setup lang="ts">
+	definePageMeta({
+		middleware: ['auth'],
+	});
+
+	const description = ref<string>('');
+	const route = useRoute();
+	const isLoading = ref<Boolean>(false);
+	const isSubmitting = ref<Boolean>(false);
+
+	const { refresh } = await useFetch('/api/note', {
+		method: 'GET',
+		query: {
+			id: route.params.id[0],
+		},
+		onResponse({ response }) {
+			description.value = response._data.note.description;
+			console.log(response);
+		},
+	});
+
+	const submit = async () => {
+		isSubmitting.value = true;
+		await useFetch('/api/note', {
+			method: 'POST',
+			query: {
+				id: route.params.id[0],
+			},
+			body: {
+				description: description.value,
+			},
+			onResponse({ response }) {
+				console.log('POST:', response._data.message);
+			},
+		});
+		isSubmitting.value = false;
+	};
+
+	onMounted(() => {
+		isLoading.value = true;
+		refresh();
+		isLoading.value = false;
+	});
+</script>
+
+<style scoped>
+	.noteTextArea {
+		@apply h-full w-full max-w-2xl p-4;
+	}
+</style>
diff --git a/pages/notes/index.vue b/pages/notes/index.vue
index acbb4b5..368e8e9 100644
--- a/pages/notes/index.vue
+++ b/pages/notes/index.vue
@@ -2,14 +2,18 @@
 	<div class="app">
 		<Header />
 
+		<button @click="signout">Sign Out</button>
+
 		<div class="content">
-			<div v-for="note in data?.notes">
-				<LazyCardNote />
+			<div v-if="data">
+				<div v-for="note in data.notes">
+					<LazyCardNote
+						:id="note.id"
+						:title="`hello`"
+						:description="note.description" />
+				</div>
 			</div>
 		</div>
-		{{ data }}
-
-		<button @click="signout">Sign Out</button>
 	</div>
 </template>
 
@@ -20,28 +24,18 @@
 
 	const router = useRouter();
 	const supabase = useSupabaseAuthClient();
-	const user = useSupabaseUser();
-
-	interface FetchOption {
-		key?: string;
-		headers: Record<'cookie', string | undefined>;
-	}
-
-	onMounted(() => {
-		console.log(user.value);
-	});
-
-	const fetchOption: FetchOption = {
-		key: user.value?.id,
-		headers: useRequestHeaders(['cookie']),
-	};
 
-	const { data: data } = await useFetch('/api/notes', fetchOption);
+	const { data: data } = await useFetch('/api/notes');
 
 	const signout = async () => {
 		const { error } = await supabase.auth.signOut();
+
+		if (error) return error;
+
 		router.push('/');
 	};
+
+	onMounted(() => {});
 </script>
 
 <style scoped></style>
diff --git a/server/api/note.get.ts b/server/api/note.get.ts
new file mode 100644
index 0000000..c5fd998
--- /dev/null
+++ b/server/api/note.get.ts
@@ -0,0 +1,18 @@
+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);
+	const query = getQuery(event);
+
+	const { data: note, error } = await supabase
+		.from('notes')
+		.select('*')
+		.eq('id', query.id);
+
+	if (!user) {
+		throw createError({ statusCode: 401, message: 'Unauthorized' });
+	}
+	return { note: note ? note[0] : null, error: error };
+});
diff --git a/server/api/note.post.ts b/server/api/note.post.ts
new file mode 100644
index 0000000..3a1d671
--- /dev/null
+++ b/server/api/note.post.ts
@@ -0,0 +1,21 @@
+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);
+	const query = getQuery(event);
+	const body = await readBody(event);
+
+	const description: string = body.description;
+
+	const { data: note, error } = await supabase
+		.from('notes')
+		.update({ description: description })
+		.eq('id', query.id);
+
+	if (!user) {
+		throw createError({ statusCode: 401, message: 'Unauthorized' });
+	}
+	return { statusCode: 200, message: 'Note Updated', error: error };
+});
diff --git a/server/api/notes.ts b/server/api/notes.ts
index 2112f99..55de8f8 100644
--- a/server/api/notes.ts
+++ b/server/api/notes.ts
@@ -1,10 +1,9 @@
 import { serverSupabaseUser, serverSupabaseClient } from '#supabase/server';
-
-const config = useRuntimeConfig();
+import { Database } from 'utils/database.types';
 
 export default defineEventHandler(async (event) => {
 	const user = await serverSupabaseUser(event);
-	const supabase = serverSupabaseClient(event);
+	const supabase = serverSupabaseClient<Database>(event);
 
 	const { data: notes, error } = await supabase.from('notes').select('*');
 
diff --git a/utils/database.types.ts b/utils/database.types.ts
new file mode 100644
index 0000000..ea17125
--- /dev/null
+++ b/utils/database.types.ts
@@ -0,0 +1,19 @@
+export interface Database {
+	public: {
+		Tables: {
+			notes: {
+				Row: {
+					id: number;
+					title: string;
+					description: string;
+					user_id: string;
+					created_at: string;
+				}; // The data expected to be returned from a "select" statement.
+				Insert: {}; // The data expected passed to an "insert" statement.
+				Update: {
+					description: string;
+				}; // The data expected passed to an "update" statement.
+			};
+		};
+	};
+}