diff --git a/components/public/Footer.vue b/components/public/Footer.vue
index b850925..fe57597 100644
--- a/components/public/Footer.vue
+++ b/components/public/Footer.vue
@@ -20,21 +20,21 @@ const props = defineProps<Props>()
 </script>
 
 <template>
-	<footer class="mt-12 bg-white dark:bg-neutral-900">
-		<div class="mx-auto w-full max-w-screen-xl">
-			<div v-if="props.sitemap" class="grid grid-cols-2 gap-8 px-4 pt-12 md:grid-cols-4">
+	<footer class="mt-12 dark:bg-neutral-900">
+		<div class="container">
+			<div v-if="props.sitemap" class="bg-white rounded-2xl grid grid-cols-2 gap-8 p-12 px-16 md:grid-cols-4">
 				<div v-for="item in props.sitemap" :key="item.title">
 					<h2 class="mb-6 text-sm font-semibold text-neutral-900 uppercase dark:text-white">{{ item.title }}</h2>
 					<ul v-for="list in item.list" :key="list.title"
-						class="text-neutral-500 dark:neutral-gray-400 font-medium">
+						class="text-gray-500 dark:text-gray-400 font-medium">
 						<li class="mb-4">
-							<a :href="list.url" class="hover:underline">{{ list.title }}</a>
+							<a :href="list.url" class="underline" target="_blank">{{ list.title }}</a>
 						</li>
 					</ul>
 				</div>
 			</div>
-			<div class="px-4 py-6 md:flex md:items-center md:justify-between">
-				<span class="text-sm text-neutral-500 dark:text-neutral-300 sm:text-center">© {{ dayjs(new
+			<div class="px-4 py-12 md:flex md:items-center md:justify-between">
+				<span class="text-sm text-gray-500 dark:text-gray-300 sm:text-center">© {{ dayjs(new
 			Date()).format('YYYY') }} {{ props.siteName }} All Rights Reserved. Powered by <a class="underline"
 						href="https://github.com/nexmoe/roam-space" target="_blank">Roam Space</a>
 				</span>
@@ -47,4 +47,5 @@ const props = defineProps<Props>()
 .footer {
 	padding-left: var(--n-spacing)
 }
+
 </style>