diff --git a/layouts/main.vue b/layouts/main.vue
new file mode 100644
index 0000000..c1d655a
--- /dev/null
+++ b/layouts/main.vue
@@ -0,0 +1,20 @@
+<template>
+	<div class="common-layout">
+		<el-container>
+			<el-header>
+				<Header />
+			</el-header>
+			<el-main>
+				<div class="flex flex-col items-center justify-center">
+					<slot />
+				</div>
+			</el-main>
+		</el-container>
+	</div>
+</template>
+
+<style scoped>
+.el-header {
+	--el-header-padding: 0;
+}
+</style>
diff --git a/pages/login/index.vue b/pages/login/index.vue
index 738934b..8bef763 100644
--- a/pages/login/index.vue
+++ b/pages/login/index.vue
@@ -1,52 +1,50 @@
 <template>
-	<App>
-		<Header />
-		<el-card>
-			<div
-				class="mx-auto my-4 flex h-80 w-96 flex-col items-center justify-center gap-8 rounded-xl p-8">
-				<div class="flex w-full flex-col gap-2">
-					<label class="w-full text-[#b3b3b3]"> Email </label>
-					<el-input
-						v-model="credential.email"
-						placeholder="Username"
-						clearable
-						class="h-12" />
-				</div>
-				<div class="flex w-full flex-col gap-2">
-					<label class="w-full text-[#b3b3b3]"> Password </label>
-					<el-input
-						v-model="credential.password"
-						type="password"
-						placeholder="Password"
-						show-password
-						class="h-12" />
-				</div>
-				<p
-					class="cursor-pointer text-blue-500 underline"
-					@click="toggleSignup()">
-					{{
-						isSignup
-							? 'Already have an account? Login'
-							: "Don't have an account? Sign up"
-					}}
-				</p>
-				<button
-					class="w-fit rounded-lg bg-blue-500 px-8 py-4"
-					v-on="
-						isSignup
-							? { click: () => signUp() }
-							: { click: () => signIn() }
-					">
-					{{ isSignup ? 'Sign Up' : 'Login' }}
-				</button>
+	<el-card class="w-fit">
+		<div
+			class="mx-auto my-4 flex h-80 w-96 flex-col items-center justify-center gap-8 rounded-xl p-8">
+			<div class="flex w-full flex-col gap-2">
+				<label class="w-full text-[#b3b3b3]"> Email </label>
+				<el-input
+					v-model="credential.email"
+					placeholder="Username"
+					clearable
+					class="h-12" />
 			</div>
-		</el-card>
-	</App>
+			<div class="flex w-full flex-col gap-2">
+				<label class="w-full text-[#b3b3b3]"> Password </label>
+				<el-input
+					v-model="credential.password"
+					type="password"
+					placeholder="Password"
+					show-password
+					class="h-12" />
+			</div>
+			<p
+				class="cursor-pointer text-blue-500 underline"
+				@click="toggleSignup()">
+				{{
+					isSignup
+						? 'Already have an account? Login'
+						: "Don't have an account? Sign up"
+				}}
+			</p>
+			<button
+				class="w-fit rounded-lg bg-blue-500 px-8 py-4"
+				v-on="
+					isSignup
+						? { click: () => signUp() }
+						: { click: () => signIn() }
+				">
+				{{ isSignup ? 'Sign Up' : 'Login' }}
+			</button>
+		</div>
+	</el-card>
 </template>
 
 <script setup lang="ts">
 definePageMeta({
 	middleware: ['auth'],
+	layout: 'main',
 })
 
 const credential = reactive({