diff --git a/app/layouts/admin.vue b/app/layouts/admin.vue
new file mode 100644
index 0000000..fe3dcb0
--- /dev/null
+++ b/app/layouts/admin.vue
@@ -0,0 +1,92 @@
+<template>
+	<Sidebar>
+		<template #sidebar>
+			<p class="title">Music - Admin</p>
+
+			<div class="category">
+				<Button
+					full
+					variant="ghost"
+					to="/admin"
+					type="link"
+					icon-name="lucide:house"
+				>
+					Dashboard
+				</Button>
+			</div>
+
+			<div class="category">
+				<p>Manage</p>
+
+				<Button
+					full
+					variant="ghost"
+					to="/admin/artists"
+					type="link"
+					icon-name="lucide:mic-vocal"
+				>
+					Manage Artists
+				</Button>
+				<Button
+					full
+					variant="ghost"
+					to="/admin/albums"
+					type="link"
+					icon-name="lucide:gallery-vertical-end"
+				>
+					Manage Albums
+				</Button>
+				<Button
+					full
+					variant="ghost"
+					to="/admin/songs"
+					type="link"
+					icon-name="lucide:music"
+				>
+					Manage Songs
+				</Button>
+			</div>
+
+			<div class="category">
+				<p>Exit</p>
+
+				<Button
+					full
+					variant="ghost"
+					to="/"
+					type="link"
+					icon-name="lucide:settings-2"
+				>
+					Exit Admin Panel
+				</Button>
+			</div>
+		</template>
+
+		<template #default>
+			<slot />
+		</template>
+	</Sidebar>
+</template>
+
+<style lang="scss" scoped>
+@use "@/styles/util" as *;
+
+.title {
+	@include fontSize(24px);
+}
+
+.search-input,
+.title {
+	margin-bottom: 1rem;
+}
+
+.category {
+	margin-bottom: 0.8rem;
+
+	& > p {
+		@include fontSize(13px);
+		font-weight: 600;
+		margin-bottom: 0.1rem;
+	}
+}
+</style>
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index 5eaa024..8f25c6c 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -11,6 +11,8 @@ const onSearchInput = (v: string) => {
 		else router.replace("/search")
 	}, 300)
 }
+
+const { data: user } = useApiFetch<any>("/user")
 </script>
 
 <template>
@@ -69,6 +71,20 @@ const onSearchInput = (v: string) => {
 					Songs
 				</Button>
 			</div>
+
+			<div v-if="user?.role == 'admin'" class="category">
+				<p>Secret stuff</p>
+
+				<Button
+					full
+					variant="ghost"
+					to="/admin"
+					type="link"
+					icon-name="lucide:settings-2"
+				>
+					Go To Admin Panel
+				</Button>
+			</div>
 		</template>
 
 		<template #default>
diff --git a/app/pages/admin.vue b/app/pages/admin.vue
new file mode 100644
index 0000000..f805b6b
--- /dev/null
+++ b/app/pages/admin.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+definePageMeta({
+	layout: "admin",
+})
+</script>
+
+<template>
+	<NuxtPage />
+</template>
diff --git a/app/pages/admin/albums.vue b/app/pages/admin/albums.vue
new file mode 100644
index 0000000..cc340bc
--- /dev/null
+++ b/app/pages/admin/albums.vue
@@ -0,0 +1 @@
+<template></template>
diff --git a/app/pages/admin/artists.vue b/app/pages/admin/artists.vue
new file mode 100644
index 0000000..cc340bc
--- /dev/null
+++ b/app/pages/admin/artists.vue
@@ -0,0 +1 @@
+<template></template>
diff --git a/app/pages/admin/index.vue b/app/pages/admin/index.vue
new file mode 100644
index 0000000..773d3dd
--- /dev/null
+++ b/app/pages/admin/index.vue
@@ -0,0 +1 @@
+<template>Hello</template>
diff --git a/app/pages/admin/songs.vue b/app/pages/admin/songs.vue
new file mode 100644
index 0000000..63eef66
--- /dev/null
+++ b/app/pages/admin/songs.vue
@@ -0,0 +1 @@
+<template>Songs</template>