diff --git a/src/components/AppFooter.astro b/src/components/AppFooter.astro
new file mode 100644
index 00000000..fe77fb2f
--- /dev/null
+++ b/src/components/AppFooter.astro
@@ -0,0 +1,64 @@
+---
+import CounterAnalytics from '@/components/analytics/CounterAnalytics.astro'
+import GoogleAnalytics from '@/components/analytics/GoogleAnalytics.astro'
+import Swetrix from '@/components/analytics/Swetrix.astro'
+import Icon from '@/components/Icon.astro'
+import siteConfig from '@/configs/site'
+import { getPluginConfig, isPluginEnabled } from '@/utils/plugin'
+
+const { author } = siteConfig
+const { name, nickname, email, homepage, github, twitter, telegram, reddit } =
+  author
+const socialNetworks: Record<string, string> = {
+  github,
+  twitter,
+  telegram,
+  reddit,
+}
+---
+
+<footer class="my-9 text-primary">
+  <div class="flex justify-center items-center mb-3">
+    <a href={`mailto:${email}`} class="footer-icon">
+      <Icon name={'bi:envelope-fill'} size={32} />
+    </a>
+    {
+      Object.keys(socialNetworks).map((network: string) => (
+        <a href={socialNetworks[network]} class="footer-icon">
+          <Icon name={`bi:${network}`} size={32} />
+        </a>
+      ))
+    }
+  </div>
+  <div class="flex justify-center items-center">
+    Built with
+    <span class="px-2">
+      <Icon name="bi:suit-heart-fill" />
+    </span>
+    by
+    <span class="px-2">
+      <a href={homepage}>{nickname} ({name})</a>.
+    </span>
+  </div>
+</footer>
+{
+  isPluginEnabled('googleAnalytics') ? (
+    <GoogleAnalytics {...getPluginConfig('googleAnalytics')} />
+  ) : (
+    ''
+  )
+}
+{isPluginEnabled('swetrix') ? <Swetrix {...getPluginConfig('swetrix')} /> : ''}
+{
+  isPluginEnabled('counterAnalytics') ? (
+    <CounterAnalytics {...getPluginConfig('counterAnalytics')} />
+  ) : (
+    ''
+  )
+}
+
+<style>
+  a.footer-icon {
+    @apply text-primary hover:text-secondary mx-1;
+  }
+</style>
diff --git a/src/components/AppHeader.astro b/src/components/AppHeader.astro
index 07a3a014..7b194b23 100644
--- a/src/components/AppHeader.astro
+++ b/src/components/AppHeader.astro
@@ -8,7 +8,7 @@ import Icon from './Icon.astro'
 export interface Props extends HTMLAttributes<'svg'> {}
 
 const { ...props } = Astro.props
-const { title, description, authorAvatar } = siteConfig
+const { title, description, author } = siteConfig
 ---
 
 <div class="header-container">
@@ -22,7 +22,7 @@ const { title, description, authorAvatar } = siteConfig
       <div class="header-logo mr-3">
         <a href="/">
           <img
-            src={authorAvatar}
+            src={author.avatar}
             alt="Author's avatar"
             class="rounded-full"
             style="margin-bottom: 0 !important;"
diff --git a/src/configs/site.ts b/src/configs/site.ts
index 0876ed63..01ba0d13 100644
--- a/src/configs/site.ts
+++ b/src/configs/site.ts
@@ -3,19 +3,29 @@ const env = process.env
 export default {
   title: 'LeetCode Blog',
   description: 'Solutions for LeetCode problems - Written by ansidev',
-  author: 'ansidev',
-  authorAvatar: '/ansidev.png',
+  author: {
+    name: 'Le Minh Tri',
+    nickname: 'ansidev',
+    email: 'ansidev@gmail.com',
+    avatar: '/ansidev.png',
+    homepage: 'https://ansidev.xyz',
+    github: 'https://github.com/ansidev',
+    twitter: 'https://twitter.com/ansidev',
+    telegram: 'https://t.me/ansidev',
+    reddit: 'https://reddit.com/u/ansidev',
+  },
   favicon: '/favicon.ico',
   faviconMimeType: 'image/x-icon',
   plugins: {
     counterAnalytics: {
-      pid: env.COUNTER_ANALYTICS_ID,
+      projectId: env.COUNTER_ANALYTICS_ID,
+      utcOffset: 7,
     },
     googleAnalytics: {
-      id: env.GA_ID,
+      projectId: env.GA_ID,
     },
     swetrix: {
-      pid: env.SWETRIX_ID,
+      projectId: env.SWETRIX_ID,
     },
   }
 }
diff --git a/src/layouts/AppLayout.astro b/src/layouts/AppLayout.astro
index 2244f0d4..5ddee69d 100644
--- a/src/layouts/AppLayout.astro
+++ b/src/layouts/AppLayout.astro
@@ -1,4 +1,5 @@
 ---
+import AppFooter from '@/components/AppFooter.astro'
 import AppHeader from '@/components/AppHeader.astro'
 import SEOMeta from '@/components/SEOMeta.astro'
 import siteConfig from '@/configs/site'
@@ -30,5 +31,6 @@ const pageDescription =
   <body class="max-w-8xl mx-auto bg-site-bg">
     <AppHeader class={headerCssClasses} />
     <slot />
+    <AppFooter />
   </body>
 </html>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 71e18a39..d5153dcc 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -9,7 +9,7 @@ const { title, description, author } = siteConfig
 <AppLayout
   title={title}
   description={description}
-  author={author}
+  author={author.name}
   headerCssClasses="max-w-xl px-8"
 >
   <main class="mx-auto my-4 p-4 max-w-2xl text-site-header-text">
diff --git a/src/utils/plugin.ts b/src/utils/plugin.ts
new file mode 100644
index 00000000..84332939
--- /dev/null
+++ b/src/utils/plugin.ts
@@ -0,0 +1,8 @@
+import _get from 'lodash.get'
+
+import siteConfig from '@/configs/site'
+
+const { plugins } = siteConfig
+
+export const isPluginEnabled = (pluginName: string) => typeof _get(plugins, pluginName) === 'object'
+export const getPluginConfig = (key: string) => _get(plugins, key)