diff --git a/components/card/Panel.vue b/components/card/Panel.vue
new file mode 100644
index 0000000..dceae18
--- /dev/null
+++ b/components/card/Panel.vue
@@ -0,0 +1,53 @@
+<template>
+	<div
+		class="panel"
+		:class="props.mode === 'horizontal' ? 'flex-row' : 'flex-col'">
+		<div class="top">
+			<Icon
+				:name="props.icon"
+				size="24" />
+			<div class="title">
+				{{ props.title }}
+			</div>
+		</div>
+		<div class="middle">
+			<div class="data">
+				{{ props.data }}
+			</div>
+		</div>
+		<div class="bottom"> </div>
+	</div>
+</template>
+
+<script setup lang="ts">
+	interface Props {
+		mode: 'horizontal' | 'vertical';
+		icon: string;
+		title: string;
+		description?: string;
+		data: string | number;
+	}
+
+	const props = defineProps<Props>();
+</script>
+
+<style scoped>
+	.panel {
+		@apply bg-secondary flex h-fit w-full justify-start gap-8 p-4 text-center;
+	}
+	.top {
+		@apply flex flex-row items-center justify-start gap-4;
+	}
+	.middle {
+		@apply flex flex-row items-center gap-4;
+	}
+	.bottom {
+		@apply flex flex-row items-center gap-4;
+	}
+	.title {
+		@apply text-2xl font-bold;
+	}
+	.data {
+		@apply text-2xl font-bold;
+	}
+</style>
diff --git a/middleware/auth.ts b/middleware/auth.ts
index eccc268..5f4d65d 100644
--- a/middleware/auth.ts
+++ b/middleware/auth.ts
@@ -1,7 +1,10 @@
 export default defineNuxtRouteMiddleware((to, from) => {
 	const user = useSupabaseUser();
 
-	if (!user.value && to.path.startsWith('/notes')) {
+	if (
+		!user.value &&
+		(to.path.startsWith('/notes') || to.path.startsWith('/profile'))
+	) {
 		return navigateTo('/login');
 	} else if (user.value && to.path === '/login') {
 		return navigateTo('/notes');
diff --git a/pages/profile/index.vue b/pages/profile/index.vue
new file mode 100644
index 0000000..26bd5f0
--- /dev/null
+++ b/pages/profile/index.vue
@@ -0,0 +1,60 @@
+<template>
+	<div class="app">
+		<Header />
+		<div class="dashboard">
+			<CardPanel
+				v-for="data in dashboardData"
+				:mode="data.mode"
+				:icon="data.icon"
+				:title="data.title"
+				:description="data.description"
+				:data="data.data" />
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+	definePageMeta({
+		middleware: ['auth'],
+	});
+
+	interface DashboardData {
+		noteCount: {
+			title: string;
+			description: string;
+			data: number;
+			mode: 'horizontal' | 'vertical';
+			icon: string;
+		};
+	}
+
+	const isLoading = ref<boolean>(true);
+
+	const dashboardData: DashboardData = reactive({
+		noteCount: {
+			title: 'Note Count',
+			description: 'The number of notes this account is currently having',
+			data: 0,
+			mode: 'horizontal',
+			icon: 'fa6-solid:note-sticky',
+		},
+	});
+
+	const { data: data, refresh } = await useFetch('/api/profile', {
+		onResponse({ response }) {
+			dashboardData.noteCount.data = response._data.count;
+		},
+	});
+
+	onMounted(() => {
+		isLoading.value = true;
+		refresh();
+		isLoading.value = false;
+	});
+</script>
+
+<style scoped>
+	.dashboard {
+		@apply w-full max-w-3xl;
+	}
+</style>
diff --git a/server/api/profile.ts b/server/api/profile.ts
new file mode 100644
index 0000000..bc97d85
--- /dev/null
+++ b/server/api/profile.ts
@@ -0,0 +1,16 @@
+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 { count, error } = await supabase
+		.from('notes')
+		.select('*', { count: 'exact', head: true });
+
+	if (!user) {
+		throw createError({ statusCode: 401, message: 'Unauthorized' });
+	}
+	return { count: count, message: 'Profile', error: error };
+});