diff --git a/package.json b/package.json
index 6241b264..26a1d514 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "@iconify-json/bi": "^1.1.15",
     "@tailwindcss/typography": "^0.5.9",
     "@types/lodash.get": "^4.4.7",
+    "@types/lodash.kebabcase": "^4.1.7",
     "@types/node": "^18.14.1",
     "@typescript-eslint/eslint-plugin": "^5.53.0",
     "@typescript-eslint/parser": "^5.53.0",
@@ -38,6 +39,7 @@
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "husky": "^8.0.3",
     "lodash.get": "^4.4.2",
+    "lodash.kebabcase": "^4.1.1",
     "sass": "^1.58.3",
     "tailwindcss-themer": "^3.0.1",
     "typescript": "^4.9.5"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ee1e1f7e..452373a5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,7 @@ specifiers:
   '@iconify-json/bi': ^1.1.15
   '@tailwindcss/typography': ^0.5.9
   '@types/lodash.get': ^4.4.7
+  '@types/lodash.kebabcase': ^4.1.7
   '@types/node': ^18.14.1
   '@typescript-eslint/eslint-plugin': ^5.53.0
   '@typescript-eslint/parser': ^5.53.0
@@ -21,6 +22,7 @@ specifiers:
   eslint-plugin-simple-import-sort: ^10.0.0
   husky: ^8.0.3
   lodash.get: ^4.4.2
+  lodash.kebabcase: ^4.1.1
   sass: ^1.58.3
   tailwindcss: ^3.2.7
   tailwindcss-themer: ^3.0.1
@@ -40,6 +42,7 @@ devDependencies:
   '@iconify-json/bi': 1.1.15
   '@tailwindcss/typography': 0.5.9_tailwindcss@3.2.7
   '@types/lodash.get': 4.4.7
+  '@types/lodash.kebabcase': 4.1.7
   '@types/node': 18.14.1
   '@typescript-eslint/eslint-plugin': 5.53.0_ny4s7qc6yg74faf3d6xty2ofzy
   '@typescript-eslint/parser': 5.53.0_7kw3g6rralp5ps6mg3uyzz6azm
@@ -50,6 +53,7 @@ devDependencies:
   eslint-plugin-simple-import-sort: 10.0.0_eslint@8.34.0
   husky: 8.0.3
   lodash.get: 4.4.2
+  lodash.kebabcase: 4.1.1
   sass: 1.58.3
   tailwindcss-themer: 3.0.1_tailwindcss@3.2.7
   typescript: 4.9.5
@@ -1024,6 +1028,12 @@ packages:
       '@types/lodash': 4.14.191
     dev: true
 
+  /@types/lodash.kebabcase/4.1.7:
+    resolution: {integrity: sha512-qzrcpK5uiADZ9OyZaegalM0b9Y3WetoBQ04RAtP3xZFGC5ul1UxmbjZ3j6suCh0BDkvgQmoMh8t5e9cVrdJYMw==}
+    dependencies:
+      '@types/lodash': 4.14.191
+    dev: true
+
   /@types/lodash/4.14.191:
     resolution: {integrity: sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ==}
     dev: true
diff --git a/src/components/LeetCodeDifficulty.astro b/src/components/LeetCodeDifficulty.astro
new file mode 100644
index 00000000..19f6908a
--- /dev/null
+++ b/src/components/LeetCodeDifficulty.astro
@@ -0,0 +1,45 @@
+---
+import kebabCase from 'lodash.kebabcase'
+
+export interface Props {
+  difficulty: string
+}
+
+const { difficulty } = Astro.props
+const difficultyStyleMap: Record<string, string> = {
+  Easy: 'difficulty-easy',
+  Medium: 'difficulty-medium',
+  Hard: 'difficulty-hard',
+}
+
+const getDifficultyCssClass: (difficulty: string) => string = (
+  difficulty: string
+) => {
+  return Object.keys(difficultyStyleMap).includes(difficulty)
+    ? difficultyStyleMap[difficulty] || ''
+    : ''
+}
+---
+
+<a
+  href={`/difficulties/${kebabCase(difficulty)}`}
+  class:list={['px-2 py-1', getDifficultyCssClass(difficulty)]}
+>
+  {difficulty}
+</a>
+
+<style lang="scss">
+  $difficulties: 'easy', 'medium', 'hard';
+
+  @each $difficulty in $difficulties {
+    .difficulty-#{$difficulty} {
+      @apply bg-difficulty-#{$difficulty};
+      @apply border-2;
+      @apply border-difficulty-#{$difficulty};
+      @apply text-difficulty-#{$difficulty};
+      @apply hover:bg-transparent;
+      @apply hover:border-difficulty-#{$difficulty}-hover;
+      @apply hover:text-difficulty-#{$difficulty}-hover;
+    }
+  }
+</style>
diff --git a/src/components/post/PostItem.astro b/src/components/post/PostItem.astro
index 35b7d35c..002f8e3b 100644
--- a/src/components/post/PostItem.astro
+++ b/src/components/post/PostItem.astro
@@ -9,8 +9,8 @@ export interface Props {
 const { title, href } = Astro.props
 ---
 
-<a href={href}>
-  <div class="post-item flex items-center justify-between">
+<a href={href} class="post-item">
+  <div class="flex items-center justify-between">
     <div>
       <h2>{title}</h2>
     </div>
@@ -20,8 +20,17 @@ const { title, href } = Astro.props
 
 <style lang="scss">
   .post-item {
-    @apply mx-3 my-2 p-3;
-    @apply border-2 border-solid border-style-primary;
-    @apply hover:bg-style-primary text-style-secondary hover:text-style-primary-inverted;
+    &:first-child {
+      @apply mt-4;
+    }
+    &:last-child {
+      @apply mb-4;
+    }
+
+    & > div {
+      @apply mx-4 p-4;
+      @apply border-2 border-solid border-style-primary;
+      @apply hover:bg-style-primary text-style-secondary hover:text-style-primary-inverted;
+    }
   }
 </style>
diff --git a/src/components/post/PostList.astro b/src/components/post/PostList.astro
index 7f69d10b..85999ff2 100644
--- a/src/components/post/PostList.astro
+++ b/src/components/post/PostList.astro
@@ -4,19 +4,12 @@ import type { CollectionEntry } from 'astro:content'
 import PostItem from '@/components/post/PostItem.astro'
 
 export interface Props {
-  posts: CollectionEntry<any>[];
+  posts: CollectionEntry<any>[]
 }
 
 const { posts = [] } = Astro.props
 ---
 
 <div role="list" class="grid grid-cols-1 gap-4">
-  {
-    posts.map((p) => (
-      <PostItem
-        title={`${p.data.title}`}
-        href={`/${p.slug}`}
-      />
-    ))
-  }
+  {posts.map((p) => <PostItem title={`${p.data.title}`} href={`/${p.slug}`} />)}
 </div>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index deea56c1..32617b04 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,6 +1,7 @@
 ---
 import { getCollection } from 'astro:content'
 
+import LeetCodeDifficulty from '@/components/LeetCodeDifficulty.astro'
 import PostList from '@/components/post/PostList.astro'
 import siteConfig from '@/configs/site'
 import AppLayout from '@/layouts/AppLayout.astro'
@@ -17,6 +18,11 @@ const posts = await getCollection('leetcode-solutions')
   headerCssClasses="max-w-xl px-8"
 >
   <main class="mx-auto my-4 p-4 max-w-xl text-site-header-text">
+    <div class="grid grid-flow-col auto-cols-max gap-2 m-4 justify-center">
+      <LeetCodeDifficulty difficulty="Easy" />
+      <LeetCodeDifficulty difficulty="Medium" />
+      <LeetCodeDifficulty difficulty="Hard" />
+    </div>
     <PostList posts={posts} />
   </main>
 </AppLayout>
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 8b4f0c9c..f740f9fa 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -6,7 +6,11 @@ const typography = require('@tailwindcss/typography')
 module.exports = {
   content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        transparent: 'transparent',
+      }
+    },
   },
   plugins: [
     tailwindCssTheme(themeConfig),
diff --git a/theme.config.cjs b/theme.config.cjs
index 9ba0dbf4..1fc1d78d 100644
--- a/theme.config.cjs
+++ b/theme.config.cjs
@@ -7,8 +7,8 @@ const themeColors = {
     hard: '#ff2d55',
   },
   light: {
-    secondary: colors.zinc['900'],
-    tertiary: colors.zinc['50'],
+    secondary: colors.gray['900'],
+    tertiary: colors.gray['50'],
   },
   dark: {
     secondary: colors.zinc['100'],
@@ -25,6 +25,15 @@ const darkTheme = ({ primary, secondary, tertiary }) => {
     'link-hover': colors.pink['500'],
   }
 
+  const textDifficultyColors = {
+    easy: baseColors['text-inverted'],
+    medium: baseColors['text-inverted'],
+    hard: baseColors['text-inverted'],
+    'easy-hover': themeColors.leetcode.easy,
+    'medium-hover': themeColors.leetcode.medium,
+    'hard-hover': themeColors.leetcode.hard,
+  }
+
   return {
     textColor: {
       style: {
@@ -36,7 +45,10 @@ const darkTheme = ({ primary, secondary, tertiary }) => {
         'title': baseColors.text,
         'header-text': baseColors.text,
         'header-text-hover': baseColors.fill,
-      }
+      },
+      difficulty: {
+        ...textDifficultyColors,
+      },
     },
     backgroundColor: {
       style: {
@@ -48,6 +60,14 @@ const darkTheme = ({ primary, secondary, tertiary }) => {
         'bg': '#1a1a1a',
         'header-bg': '#282828',
       },
+      difficulty: {
+        easy: themeColors.leetcode.easy,
+        'easy-hover': baseColors.text,
+        medium: themeColors.leetcode.medium,
+        'medium-hover': baseColors.text,
+        hard: themeColors.leetcode.hard,
+        'hard-hover': baseColors.text,
+      },
     },
     borderColor: {
       style: {
@@ -57,7 +77,13 @@ const darkTheme = ({ primary, secondary, tertiary }) => {
       },
       site: {
         'header-border': colors.zinc['600'],
-      }
+      },
+      difficulty: {
+        ...themeColors.leetcode,
+        'easy-hover': themeColors.leetcode.easy,
+        'medium-hover': themeColors.leetcode.medium,
+        'hard-hover': themeColors.leetcode.hard,
+      },
     },
   }
 }
@@ -71,6 +97,15 @@ const lightTheme = ({ primary, secondary, tertiary }) => {
     'link-hover': colors.pink['500'],
   }
 
+  const textDifficultyColors = {
+    easy: baseColors.text,
+    medium: baseColors.text,
+    hard: baseColors.text,
+    'easy-hover': themeColors.leetcode.easy,
+    'medium-hover': themeColors.leetcode.medium,
+    'hard-hover': themeColors.leetcode.hard,
+  }
+
   return {
     textColor: {
       style: {
@@ -82,7 +117,10 @@ const lightTheme = ({ primary, secondary, tertiary }) => {
         'title': baseColors['text-inverted'],
         'header-text': baseColors['text-inverted'],
         'header-text-hover': colors.gray['300'],
-      }
+      },
+      difficulty: {
+        ...textDifficultyColors,
+      },
     },
     backgroundColor: {
       style: {
@@ -94,6 +132,14 @@ const lightTheme = ({ primary, secondary, tertiary }) => {
         'bg': colors.white,
         'header-bg': primary,
       },
+      difficulty: {
+        easy: themeColors.leetcode.easy,
+        'easy-hover': baseColors.text,
+        medium: themeColors.leetcode.medium,
+        'medium-hover': baseColors.text,
+        hard: themeColors.leetcode.hard,
+        'hard-hover': baseColors.text,
+      },
     },
     borderColor: {
       style: {
@@ -105,13 +151,19 @@ const lightTheme = ({ primary, secondary, tertiary }) => {
         'header-border': primary,
       }
     },
+    difficulty: {
+      ...themeColors.leetcode,
+      'easy-hover': themeColors.leetcode.easy,
+      'medium-hover': themeColors.leetcode.medium,
+      'hard-hover': themeColors.leetcode.hard,
+    },
   }
 }
 
 const siteTheme = ({ primary, secondary, tertiary }, isDark = true) =>
   isDark
     ? darkTheme({ primary, secondary, tertiary })
-    : lightTheme(darkTheme({ primary, secondary, tertiary }))
+    : lightTheme({ primary, secondary, tertiary })
 
 module.exports = {
   defaultTheme: {
@@ -129,6 +181,6 @@ module.exports = {
         secondary: themeColors.light['secondary'],
         tertiary: themeColors.light['tertiary'],
       }, false)
-    }
+    },
   ]
 }