diff --git a/package.json b/package.json
index 2f953206..326f19ef 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "husky": "^8.0.3",
     "lodash.get": "^4.4.2",
+    "sass": "^1.58.3",
     "tailwindcss-themer": "^3.0.1",
     "typescript": "^4.9.5"
   }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 03dce9e8..ba7f41e9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -20,13 +20,14 @@ specifiers:
   eslint-plugin-simple-import-sort: ^10.0.0
   husky: ^8.0.3
   lodash.get: ^4.4.2
+  sass: ^1.58.3
   tailwindcss: ^3.0.24
   tailwindcss-themer: ^3.0.1
   typescript: ^4.9.5
 
 dependencies:
   '@astrojs/tailwind': 3.0.1_hf2kjfio2dr6w52rh4mpociq2u
-  astro: 2.0.14_@types+node@18.14.0
+  astro: 2.0.14_hlkwzk2izwsolfmdrejei4vrty
   astro-compress: 1.1.33
   astro-purgecss: 2.0.0_astro@2.0.14
   tailwindcss: 3.2.7
@@ -47,6 +48,7 @@ devDependencies:
   eslint-plugin-simple-import-sort: 10.0.0_eslint@8.34.0
   husky: 8.0.3
   lodash.get: 4.4.2
+  sass: 1.58.3
   tailwindcss-themer: 3.0.1_tailwindcss@3.2.7
   typescript: 4.9.5
 
@@ -91,7 +93,7 @@ packages:
       astro: ^2.0.2
     dependencies:
       '@astrojs/prism': 2.0.0
-      astro: 2.0.14_@types+node@18.14.0
+      astro: 2.0.14_hlkwzk2izwsolfmdrejei4vrty
       github-slugger: 1.5.0
       import-meta-resolve: 2.2.0
       rehype-raw: 6.1.1
@@ -122,7 +124,7 @@ packages:
       tailwindcss: ^3.0.24
     dependencies:
       '@proload/core': 0.3.3
-      astro: 2.0.14_@types+node@18.14.0
+      astro: 2.0.14_hlkwzk2izwsolfmdrejei4vrty
       autoprefixer: 10.4.13_postcss@8.4.21
       postcss: 8.4.21
       postcss-load-config: 4.0.1_postcss@8.4.21
@@ -1389,11 +1391,11 @@ packages:
     peerDependencies:
       astro: ^2.0.0
     dependencies:
-      astro: 2.0.14_@types+node@18.14.0
+      astro: 2.0.14_hlkwzk2izwsolfmdrejei4vrty
       purgecss: 5.0.0
     dev: false
 
-  /astro/2.0.14_@types+node@18.14.0:
+  /astro/2.0.14_hlkwzk2izwsolfmdrejei4vrty:
     resolution: {integrity: sha512-BiXnHyK3rj5Uz45V5p9jRi0xtJc/zxhCxnXYAekHHF1bVvvoa3aXMwl0GZ3Bc0mxP6vPLmbRcjNKdqfyZn1B3Q==}
     engines: {node: '>=16.12.0', npm: '>=6.14.0'}
     hasBin: true
@@ -1446,7 +1448,7 @@ packages:
       typescript: 4.9.5
       unist-util-visit: 4.1.1
       vfile: 5.3.6
-      vite: 4.1.2_@types+node@18.14.0
+      vite: 4.1.2_hlkwzk2izwsolfmdrejei4vrty
       vitefu: 0.2.4_vite@4.1.2
       yargs-parser: 21.1.1
       zod: 3.20.2
@@ -2964,6 +2966,9 @@ packages:
     engines: {node: '>= 4'}
     dev: true
 
+  /immutable/4.2.4:
+    resolution: {integrity: sha512-WDxL3Hheb1JkRN3sQkyujNlL/xRjAo3rJtaU5xeufUauG66JdMr32bLj4gF+vWl84DIA3Zxw7tiAjneYzRRw+w==}
+
   /import-fresh/3.3.0:
     resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
     engines: {node: '>=6'}
@@ -4678,6 +4683,15 @@ packages:
       suf-log: 2.5.3
     dev: false
 
+  /sass/1.58.3:
+    resolution: {integrity: sha512-Q7RaEtYf6BflYrQ+buPudKR26/lH+10EmO9bBqbmPh/KeLqv8bjpTNqxe71ocONqXq+jYiCbpPUmQMS+JJPk4A==}
+    engines: {node: '>=12.0.0'}
+    hasBin: true
+    dependencies:
+      chokidar: 3.5.3
+      immutable: 4.2.4
+      source-map-js: 1.0.2
+
   /section-matter/1.0.0:
     resolution: {integrity: sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==}
     engines: {node: '>=4'}
@@ -5362,7 +5376,7 @@ packages:
       vfile-message: 3.1.3
     dev: false
 
-  /vite/4.1.2_@types+node@18.14.0:
+  /vite/4.1.2_hlkwzk2izwsolfmdrejei4vrty:
     resolution: {integrity: sha512-MWDb9Rfy3DI8omDQySbMK93nQqStwbsQWejXRY2EBzEWKmLAXWb1mkI9Yw2IJrc+oCvPCI1Os5xSSIBYY6DEAw==}
     engines: {node: ^14.18.0 || >=16.0.0}
     hasBin: true
@@ -5392,6 +5406,7 @@ packages:
       postcss: 8.4.21
       resolve: 1.22.1
       rollup: 3.14.0
+      sass: 1.58.3
     optionalDependencies:
       fsevents: 2.3.2
     dev: false
@@ -5404,7 +5419,7 @@ packages:
       vite:
         optional: true
     dependencies:
-      vite: 4.1.2_@types+node@18.14.0
+      vite: 4.1.2_hlkwzk2izwsolfmdrejei4vrty
     dev: false
 
   /vscode-css-languageservice/6.2.1:
diff --git a/public/ansidev.png b/public/ansidev.png
new file mode 100644
index 00000000..b22cfb94
Binary files /dev/null and b/public/ansidev.png differ
diff --git a/src/components/AppHeader.astro b/src/components/AppHeader.astro
new file mode 100644
index 00000000..07a3a014
--- /dev/null
+++ b/src/components/AppHeader.astro
@@ -0,0 +1,67 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+import siteConfig from '@/configs/site'
+
+import Icon from './Icon.astro'
+
+export interface Props extends HTMLAttributes<'svg'> {}
+
+const { ...props } = Astro.props
+const { title, description, authorAvatar } = siteConfig
+---
+
+<div class="header-container">
+  <div
+    class:list={[
+      'header mx-auto flex justify-between items-center',
+      props.class,
+    ]}
+  >
+    <div class="header-meta flex mr-3">
+      <div class="header-logo mr-3">
+        <a href="/">
+          <img
+            src={authorAvatar}
+            alt="Author's avatar"
+            class="rounded-full"
+            style="margin-bottom: 0 !important;"
+            width="56"
+            height="56"
+          />
+        </a>
+      </div>
+      <div class="flex flex-col">
+        <h1 class="text-xl uppercase font-semibold">
+          <a href="/" class="site-title">{title}</a>
+        </h1>
+        <h2 class="site-description">{description}</h2>
+      </div>
+    </div>
+    <div class="header-button flex items-center">
+      <a href="/rss.xml" class="header-icon">
+        <Icon name="bi:rss-fill" size={20} class="ml-2" />
+      </a>
+    </div>
+  </div>
+</div>
+
+<style lang="scss">
+  .header-container {
+    @apply sticky top-0 z-50 px-4 md:px-7 py-4 border-b;
+    @apply bg-site-header-bg border-b-site-header-border;
+  }
+
+  .header-icon {
+    @apply text-site-header-text hover:text-site-header-text-hover;
+  }
+
+  .site-title {
+    @apply text-site-title hover:text-site-header-text-hover;
+  }
+
+  .site-description {
+    @apply text-sm md:text-base italic;
+    @apply text-site-header-text;
+  }
+</style>
diff --git a/src/configs/site.ts b/src/configs/site.ts
index 0e9697ef..3e85b573 100644
--- a/src/configs/site.ts
+++ b/src/configs/site.ts
@@ -2,6 +2,7 @@ export default {
   title: 'LeetCode Blog',
   description: 'Solutions for LeetCode problems - Written by ansidev',
   author: 'ansidev',
+  authorAvatar: '/ansidev.png',
   favicon: '/favicon.ico',
   faviconMimeType: 'image/x-icon',
 }
diff --git a/src/layouts/AppLayout.astro b/src/layouts/AppLayout.astro
index 32ee3a28..2244f0d4 100644
--- a/src/layouts/AppLayout.astro
+++ b/src/layouts/AppLayout.astro
@@ -1,4 +1,5 @@
 ---
+import AppHeader from '@/components/AppHeader.astro'
 import SEOMeta from '@/components/SEOMeta.astro'
 import siteConfig from '@/configs/site'
 
@@ -6,10 +7,13 @@ export interface Props {
   title: string
   description: string
   author: string
+  headerCssClasses?: string
 }
 
-const { title, author } = Astro.props
+const { title, description = '', author, headerCssClasses = '' } = Astro.props
 const { favicon, faviconMimeType } = siteConfig
+const pageDescription =
+  description.length > 0 ? description : `${title} - ${siteConfig.description}`
 ---
 
 <!DOCTYPE html>
@@ -17,12 +21,14 @@ const { favicon, faviconMimeType } = siteConfig
   <head>
     <SEOMeta
       title={title}
+      description={pageDescription}
       favicon={favicon}
       faviconMimeType={faviconMimeType}
       author={author}
     />
   </head>
-  <body>
+  <body class="max-w-8xl mx-auto bg-site-bg">
+    <AppHeader class={headerCssClasses} />
     <slot />
   </body>
 </html>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index b1fc4987..71e18a39 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -6,10 +6,13 @@ import AppLayout from '@/layouts/AppLayout.astro'
 const { title, description, author } = siteConfig
 ---
 
-<AppLayout title={title} description={description} author={author}>
-  <main class="mx-auto p-4 max-w-2xl">
-    <h1 class="text-4xl font-semibold text-center">{title}</h1>
-    <p class="text-center p-4">{description}</p>
+<AppLayout
+  title={title}
+  description={description}
+  author={author}
+  headerCssClasses="max-w-xl px-8"
+>
+  <main class="mx-auto my-4 p-4 max-w-2xl text-site-header-text">
     <ul role="list" class="grid grid-cols-1 md:grid-cols-2 gap-4">
       <Card
         href="https://docs.astro.build/"
diff --git a/theme.config.cjs b/theme.config.cjs
index 946fc068..8ea6b653 100644
--- a/theme.config.cjs
+++ b/theme.config.cjs
@@ -1,6 +1,11 @@
 const colors = require('tailwindcss/colors')
 
 const themeColors = {
+  leetcode: {
+    easy: '#00af9b',
+    medium: '#ffb800',
+    hard: '#ff2d55',
+  },
   light: {
     secondary: colors.zinc['900'],
     tertiary: colors.zinc['50'],
@@ -12,18 +17,50 @@ const themeColors = {
 }
 
 const darkTheme = ({ primary, secondary, tertiary }) => {
+  const baseColors = {
+    fill: primary,
+    text: secondary,
+    'text-inverted': tertiary,
+    link: colors.blue['500'],
+    'link-hover': colors.pink['500'],
+  }
+
   return {
     primary: primary,
     secondary: secondary,
     tertiary: tertiary,
+    site: {
+      'bg': '#1a1a1a',
+      'header-bg': '#282828',
+      'header-border': colors.zinc['600'],
+      'title': baseColors.text,
+      'header-text': baseColors.text,
+      'header-text-hover': baseColors.fill,
+    },
   }
 }
 
 const lightTheme = ({ primary, secondary, tertiary }) => {
+  const baseColors = {
+    fill: primary,
+    text: secondary,
+    'text-inverted': tertiary,
+    link: colors.blue['500'],
+    'link-hover': colors.pink['500'],
+  }
+
   return {
     primary: primary,
     secondary: secondary,
     tertiary: tertiary,
+    site: {
+      'bg': colors.white,
+      'header-bg': primary,
+      'header-border': primary,
+      'title': baseColors['text-inverted'],
+      'header-text': baseColors['text-inverted'],
+      'header-text-hover': colors.gray['300'],
+    },
   }
 }