diff --git a/app.config.ts b/app.config.ts
index 919ec00..915f0a2 100644
--- a/app.config.ts
+++ b/app.config.ts
@@ -1,5 +1,11 @@
 export default defineAppConfig({
   title: 'Sink',
+  twitter: 'https://x.com/0xKaiBi',
+  github: 'https://github.com/ccbikai/sink',
+  email: 'sink.cool@miantiao.me',
+  telegram: 'https://t.me/htmlzone',
+  mastodon: 'https://c.im/@mt',
+  blog: 'https://mt.ci',
   description: 'A Simple / Speedy / Secure Link Shortener with Analytics, 100% run on Cloudflare.',
   image: 'https://sink.cool/banner.png',
   previewTTL: 24 * 3600, // 24h
diff --git a/components/dashboard/Breadcrumb.vue b/components/dashboard/Breadcrumb.vue
index ad84c85..5cd5077 100644
--- a/components/dashboard/Breadcrumb.vue
+++ b/components/dashboard/Breadcrumb.vue
@@ -7,6 +7,7 @@ defineProps({
     required: true,
   },
 })
+const { title } = useAppConfig()
 </script>
 
 <template>
@@ -14,7 +15,7 @@ defineProps({
     <BreadcrumbList>
       <BreadcrumbItem>
         <BreadcrumbLink href="/">
-          Sink
+          {{ title }}
         </BreadcrumbLink>
       </BreadcrumbItem>
       <BreadcrumbSeparator />
diff --git a/components/home/Hero.vue b/components/home/Hero.vue
index d1f7e15..dc1e47b 100644
--- a/components/home/Hero.vue
+++ b/components/home/Hero.vue
@@ -3,7 +3,7 @@ import { AreaChart } from 'lucide-vue-next'
 import { GitHubIcon } from 'vue3-simple-icons'
 import heroImg from '@/assets/images/hero.svg?raw'
 
-const { title, description } = useAppConfig()
+const { title, description, github } = useAppConfig()
 </script>
 
 <template>
@@ -36,7 +36,7 @@ const { title, description } = useAppConfig()
           size="lg"
           type="outline"
           rel="noopener"
-          href="https://github.com/ccbikai/sink"
+          :href="github"
           title="Github"
           class="flex items-center justify-center gap-1"
           target="_blank"
diff --git a/components/home/Twitter.vue b/components/home/Twitter.vue
index a29d563..c93e7fc 100644
--- a/components/home/Twitter.vue
+++ b/components/home/Twitter.vue
@@ -1,11 +1,13 @@
 <script setup>
 import { XIcon } from 'vue3-simple-icons'
 import { ArrowRight } from 'lucide-vue-next'
+
+const { twitter } = useAppConfig()
 </script>
 
 <template>
   <a
-    href="https://x.com/0xKaiBi"
+    :href="twitter"
     target="_blank"
     title="X(Twitter)"
     class="inline-flex items-center px-3 py-1 mx-auto my-4 space-x-1 text-sm font-medium rounded-lg bg-muted"
diff --git a/components/layouts/Footer.vue b/components/layouts/Footer.vue
index 829192d..cc17095 100644
--- a/components/layouts/Footer.vue
+++ b/components/layouts/Footer.vue
@@ -1,10 +1,7 @@
 <script setup>
 import { BloggerIcon, GitHubIcon, GmailIcon, MastodonIcon, TelegramIcon, XIcon } from 'vue3-simple-icons'
 
-const email = ref(null)
-onMounted(() => {
-  email.value.href = email.value.href.replace('$', '@')
-})
+const { title, email, telegram, blog, twitter, mastodon, github } = useAppConfig()
 </script>
 
 <template>
@@ -13,8 +10,8 @@ onMounted(() => {
       <a
         href="/"
         class="text-xl font-black leading-none text-gray-900 select-none dark:text-gray-100 logo"
-        title="Sink"
-      >Sink</a>
+        :title="title"
+      >{{ title }}</a>
       <a
         class="mt-4 text-sm text-gray-500 sm:ml-4 sm:pl-4 sm:border-l sm:border-gray-200 sm:mt-0"
         href="https://html.zone"
@@ -27,8 +24,8 @@ onMounted(() => {
         class="inline-flex justify-center mt-4 space-x-5 sm:ml-auto sm:mt-0 sm:justify-start"
       >
         <a
-          ref="email"
-          href="mailto:sink.cool$miantiao.me"
+          v-if="email"
+          :href="`mailto:${email}`"
           title="Email"
           class="text-gray-400 hover:text-gray-500"
         >
@@ -38,7 +35,8 @@ onMounted(() => {
           />
         </a>
         <a
-          href="https://t.me/htmlzone"
+          v-if="telegram"
+          :href="telegram"
           target="_blank"
           title="Telegram"
           class="text-gray-400 hover:text-gray-500"
@@ -49,7 +47,8 @@ onMounted(() => {
           />
         </a>
         <a
-          href="https://mt.ci"
+          v-if="blog"
+          :href="blog"
           target="_blank"
           title="Blog"
           class="text-gray-400 hover:text-gray-500"
@@ -61,7 +60,8 @@ onMounted(() => {
         </a>
 
         <a
-          href="https://x.com/0xKaiBi"
+          v-if="twitter"
+          :href="twitter"
           target="_blank"
           title="Twitter"
           class="text-gray-400 hover:text-gray-500"
@@ -73,7 +73,8 @@ onMounted(() => {
         </a>
 
         <a
-          href="https://miantiao.me/@chi"
+          v-if="mastodon"
+          :href="mastodon"
           target="_blank"
           title="Mastodon"
           class="text-gray-400 hover:text-gray-500"
@@ -85,7 +86,8 @@ onMounted(() => {
         </a>
 
         <a
-          href="https://github.com/ccbikai"
+          v-if="github"
+          :href="github"
           target="_blank"
           title="GitHub"
           class="text-gray-400 hover:text-gray-500"
diff --git a/components/layouts/Header.vue b/components/layouts/Header.vue
index 900d4a8..36251e9 100644
--- a/components/layouts/Header.vue
+++ b/components/layouts/Header.vue
@@ -4,6 +4,7 @@ import { GitHubIcon } from 'vue3-simple-icons'
 import SwitchTheme from '../SwitchTheme.vue'
 
 const showMenu = ref(false)
+const { title, github } = useAppConfig()
 </script>
 
 <template>
@@ -15,7 +16,7 @@ const showMenu = ref(false)
         <div class="flex items-center justify-start w-1/4 h-full pr-4">
           <a
             href="/"
-            title="Sink"
+            :title="title"
             class="flex items-center py-4 space-x-2 text-xl font-black text-gray-900 dark:text-gray-100 md:py-0"
           >
             <span
@@ -23,11 +24,11 @@ const showMenu = ref(false)
             >
               <img
                 src="/sink.png"
-                alt="Sink"
+                :alt="title"
                 class="w-full h-full rounded-full"
               >
             </span>
-            <span class="mx-2">Sink</span>
+            <span class="mx-2">{{ title }}</span>
           </a>
         </div>
 
@@ -41,7 +42,7 @@ const showMenu = ref(false)
           >
             <a
               href="/"
-              title="Sink"
+              :title="title"
               class="inline-flex items-center w-auto h-16 px-4 text-xl font-black leading-none text-gray-900 dark:text-gray-100 md:hidden"
             >
               <span
@@ -49,11 +50,11 @@ const showMenu = ref(false)
               >
                 <img
                   src="/sink.png"
-                  alt="Sink"
+                  :alt="title"
                   class="w-full h-full rounded-full"
                 >
               </span>
-              <span class="mx-2">Sink</span>
+              <span class="mx-2">{{ title }}</span>
             </a>
             <div class="w-full mx-4" />
             <div
@@ -62,10 +63,10 @@ const showMenu = ref(false)
               <a
                 class="w-full px-6 py-2 mr-0 text-gray-700 cursor-pointer dark:text-gray-300 md:px-3 md:mr-2 lg:mr-3 md:w-auto"
                 href="/dashboard"
-                title="Sink Dashboard"
+                :title="`${title} Dashboard`"
               >Dashboard</a>
               <a
-                href="https://github.com/ccbikai/sink"
+                :href="github"
                 target="_blank"
                 title="Github"
                 class="inline-flex items-center w-full px-6 py-3 text-sm font-medium leading-4 text-white bg-gray-900 md:px-3 md:w-auto md:rounded-full hover:bg-gray-800 focus:outline-none md:focus:ring-2 focus:ring-0 focus:ring-offset-2 focus:ring-gray-800"