diff --git a/.demo/app.config.ts b/.demo/app.config.ts
index d22b3f8..e7cbc86 100644
--- a/.demo/app.config.ts
+++ b/.demo/app.config.ts
@@ -3,6 +3,7 @@ export default defineAppConfig({
   cover: '/cover.jpg',
   socials: {
     twitter: 'Atinux',
-    github: 'Atinux/content-wind'
+    github: 'Atinux/content-wind',
+    mastodon: '@atinux@webtoo.ls'
   }
 })
diff --git a/.demo/content/1.index.md b/.demo/content/1.index.md
index d7fd080..be62c64 100644
--- a/.demo/content/1.index.md
+++ b/.demo/content/1.index.md
@@ -93,6 +93,7 @@ interface AppConfigInput {
   socials?: {
     twitter?: string
     github?: string
+    mastodon?: string
   }
 }
 ```
@@ -104,6 +105,7 @@ export default defineAppConfig({
   socials: {
     twitter: 'Atinux',
     github: 'Atinux/content-wind'
+    mastodon: '@atinux@webtoo.ls'
   }
 })
 ```
diff --git a/app.config.ts b/app.config.ts
index ca9a820..1fd90ad 100644
--- a/app.config.ts
+++ b/app.config.ts
@@ -1,7 +1,8 @@
 export default defineAppConfig({
   socials: {
     twitter: '',
-    github: ''
+    github: '',
+    mastodon: '',
   },
   nuxtIcon: {
     aliases: {
diff --git a/components/AppNavbar.vue b/components/AppNavbar.vue
index 2f41af7..fc95b07 100644
--- a/components/AppNavbar.vue
+++ b/components/AppNavbar.vue
@@ -21,6 +21,7 @@ const appConfig = useAppConfig()
     <div class="space-x-3 transition text-gray-500">
       <a v-if="appConfig.socials?.twitter" :href="`https://twitter.com/${appConfig.socials?.twitter}`" title="Twitter" class="dark:text-gray-100 hover:text-gray-700 dark:hover:text-gray-300"><Icon name="fa-brands:twitter" class="w-5 h-5" /></a>
       <a v-if="appConfig.socials?.github" :href="`https://github.com/${appConfig.socials?.github}`" title="GitHub" class="dark:text-gray-100 hover:text-gray-700 dark:hover:text-gray-300"><Icon name="fa-brands:github" class="w-5 h-5" /></a>
+      <a v-if="appConfig.socials?.mastodon" :href="`https://elk.zone/${appConfig.socials?.mastodon}`" title="Mastodon" class="dark:text-gray-100 hover:text-gray-700 dark:hover:text-gray-300"><Icon name="fa-brands:mastodon" class="w-5 h-5" /></a>
       <ColorModeSwitch class="dark:text-gray-100 hover:text-gray-700 dark:hover:text-gray-300" />
     </div>
   </div>
diff --git a/nuxt.schema.ts b/nuxt.schema.ts
index f6c509b..732993e 100644
--- a/nuxt.schema.ts
+++ b/nuxt.schema.ts
@@ -18,7 +18,13 @@ export default defineNuxtSchema({
        * @example 'nuxt/framework'
        * @studioIcon simple-icons:github
        * */
-      github: ''
+      github: '',
+      /**
+       * Mastodon handle
+       * @example '@nuxt@webtoo.ls'
+       * @studioIcon simple-icons:mastodon
+       * */
+      mastodon: ''
     }
   }
 })