diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
index 5ea5e57..9cf599f 100644
--- a/assets/css/tailwind.css
+++ b/assets/css/tailwind.css
@@ -19,8 +19,8 @@
     --border: 214.3 31.8% 91.4%;
     --input: 214.3 31.8% 91.4%;
  
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
+    --primary: 47.75deg 92.27% 59.41%;
+    --primary-foreground: 39deg 62.5% 6.27%;
  
     --secondary: 210 40% 96.1%;
     --secondary-foreground: 222.2 47.4% 11.2%;
diff --git a/components/public/Catalog.vue b/components/public/Catalog.vue
index e46bbed..13429c7 100644
--- a/components/public/Catalog.vue
+++ b/components/public/Catalog.vue
@@ -85,6 +85,6 @@ onUnmounted(() => {
 }
 
 .active {
-  @apply bg-[#f7d038] text-[#1a1306] hover:bg-[#f7d038];
+  @apply bg-primary text-primary-foreground hover:bg-primary;
 }
 </style>
diff --git a/components/public/Footer.vue b/components/public/Footer.vue
index 214618f..4b54391 100644
--- a/components/public/Footer.vue
+++ b/components/public/Footer.vue
@@ -1,18 +1,46 @@
-<script setup>
+<script setup lang="ts">
 import dayjs from 'dayjs'
 
-const config = await useGetConfig()
+interface List {
+	title: string
+	url: string
+}
+
+export interface Sitemap {
+	title: string
+	list: List[]
+}
+
+export interface Props {
+	sitemap?: Sitemap[]
+	siteName: string
+}
+
+const props = defineProps<Props>()
 </script>
 
 <template>
-	<div class="container flex">
-		<div class="footer my-16">
-			Copyright © {{ dayjs(new Date()).format('YYYY') }} {{ config.siteName }}, Powered by <a
-				class="underline"
-				href="https://github.com/nexmoe/roam-space" target="_blank"
-			>Roam Space</a>
+	<footer class="mt-12 bg-white dark:bg-gray-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 py-6 lg:py-8 md:grid-cols-4">
+				<div v-for="item in props.sitemap" :key="item.title">
+					<h2 class="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">{{ item.title }}</h2>
+					<ul v-for="list in item.list" :key="list.title"
+						class="text-gray-500 dark:text-gray-400 font-medium">
+						<li class="mb-4">
+							<a :href="list.url" class="hover:underline">{{ 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-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>
+			</div>
 		</div>
-	</div>
+	</footer>
 </template>
 
 <style>
diff --git a/components/public/Header.vue b/components/public/Header.vue
index 70baa59..5896347 100644
--- a/components/public/Header.vue
+++ b/components/public/Header.vue
@@ -72,7 +72,7 @@ const config = await useGetConfig()
 }
 
 .item.active {
-	@apply bg-[#f7d038] text-[#1a1306];
+	@apply bg-primary text-primary-foreground;
 }
 
 .author {}
diff --git a/layouts/default.vue b/layouts/default.vue
index 6b268c6..0a578ba 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -4,6 +4,7 @@ useHead({
 		lang: 'zh-CN',
 	},
 })
+const config = await useGetConfig()
 </script>
 
 <template>
@@ -11,7 +12,11 @@ useHead({
 		<PublicHeader />
 		<slot />
 		<LazyPublicTool />
-		<LazyPublicFooter v-once />
+		<LazyPublicFooter
+			v-once
+			:site-name="config.siteName"
+			:sitemap="config.footerLinks"
+		/>
 	</div>
 </template>
 
diff --git a/server/trpc/routers/config.ts b/server/trpc/routers/config.ts
index ed136e3..f3a0aed 100644
--- a/server/trpc/routers/config.ts
+++ b/server/trpc/routers/config.ts
@@ -1,5 +1,7 @@
 import { publicProcedure, router } from '../trpc'
 import type { Props as SocialProps } from '~/components/public/Social.vue'
+import type { Sitemap as FooterSitemap } from '~/components/public/Footer.vue'
+
 import defaultData from '~/config/hero.json'
 
 interface PrismaConfigItem {
@@ -14,6 +16,7 @@ interface Config {
 	tags?: string[]
 	menus?: Menu[]
 	socials?: SocialProps[]
+	footerLinks?: FooterSitemap[]
 	siteUrl: string
 	siteName: string
 	siteDescription: string