diff --git a/app/blog/[slug]/page.tsx b/app/blog/[slug]/page.tsx
index 58139c0..e83f39e 100644
--- a/app/blog/[slug]/page.tsx
+++ b/app/blog/[slug]/page.tsx
@@ -55,17 +55,28 @@ export default function BlogPostPage({ params }: Props) {
             </h1>
             {post.tags && (
               <div className="flex flex-wrap gap-2 pt-1">
-                {post.tags.map((t) => (
-                  <Link
-                    key={t}
-                    href={`/tags/${encodeURIComponent(
-                      t.toLowerCase().replace(/\s+/g, '-')
-                    )}`}
-                    className="rounded-full bg-slate-100 px-2 py-0.5 text-xs text-slate-700 hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-700"
-                  >
-                    #{t}
-                  </Link>
-                ))}
+                {post.tags.map((t, i) => {
+                  const tagColorClasses = [
+                    'bg-rose-100 text-rose-700 dark:bg-rose-900/60 dark:text-rose-200',
+                    'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/60 dark:text-emerald-200',
+                    'bg-sky-100 text-sky-700 dark:bg-sky-900/60 dark:text-sky-200',
+                    'bg-amber-100 text-amber-700 dark:bg-amber-900/60 dark:text-amber-200',
+                    'bg-violet-100 text-violet-700 dark:bg-violet-900/60 dark:text-violet-200'
+                  ];
+                  const color =
+                    tagColorClasses[i % tagColorClasses.length];
+                  return (
+                    <Link
+                      key={t}
+                      href={`/tags/${encodeURIComponent(
+                        t.toLowerCase().replace(/\s+/g, '-')
+                      )}`}
+                      className={`rounded-full px-2 py-0.5 text-xs transition ${color}`}
+                    >
+                      #{t}
+                    </Link>
+                  );
+                })}
               </div>
             )}
           </header>
diff --git a/components/hero.tsx b/components/hero.tsx
index e8dc60e..2fada87 100644
--- a/components/hero.tsx
+++ b/components/hero.tsx
@@ -58,7 +58,7 @@ export function Hero() {
   }[];
 
   return (
-    <section className="mb-8 rounded-xl border bg-gradient-to-r from-slate-50 to-slate-100 px-6 py-6 shadow-sm dark:border-slate-800 dark:from-slate-900 dark:to-slate-950">
+    <section className="mb-8 rounded-xl border bg-gradient-to-r from-sky-50 via-indigo-50 to-slate-50 px-6 py-6 shadow-sm dark:border-slate-800 dark:from-slate-900 dark:via-slate-950 dark:to-slate-900">
       <div className="flex items-center gap-4">
         <div className="flex h-16 w-16 items-center justify-center rounded-full bg-slate-900 text-2xl font-semibold text-slate-50 dark:bg-slate-100 dark:text-slate-900">
           {initial}
diff --git a/components/post-list-item.tsx b/components/post-list-item.tsx
index 99382fb..0c55238 100644
--- a/components/post-list-item.tsx
+++ b/components/post-list-item.tsx
@@ -15,6 +15,14 @@ export function PostListItem({ post }: Props) {
   const excerpt =
     post.description || post.custom_excerpt || post.body?.raw?.slice(0, 120);
 
+  const tagColorClasses = [
+    'bg-rose-100 text-rose-700 dark:bg-rose-900/60 dark:text-rose-200',
+    'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/60 dark:text-emerald-200',
+    'bg-sky-100 text-sky-700 dark:bg-sky-900/60 dark:text-sky-200',
+    'bg-amber-100 text-amber-700 dark:bg-amber-900/60 dark:text-amber-200',
+    'bg-violet-100 text-violet-700 dark:bg-violet-900/60 dark:text-violet-200'
+  ];
+
   return (
     <li>
       <Link href={post.url}>
@@ -42,17 +50,21 @@ export function PostListItem({ post }: Props) {
             </h2>
             {post.tags && post.tags.length > 0 && (
               <div className="flex flex-wrap gap-2 pt-0.5">
-                {post.tags.slice(0, 4).map((t) => (
-                  <Link
-                    key={t}
-                    href={`/tags/${encodeURIComponent(
-                      t.toLowerCase().replace(/\s+/g, '-')
-                    )}`}
-                    className="rounded-full bg-slate-100 px-2 py-0.5 text-[11px] text-slate-600 hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-700"
-                  >
-                    #{t}
-                  </Link>
-                ))}
+                {post.tags.slice(0, 4).map((t, i) => {
+                  const color =
+                    tagColorClasses[i % tagColorClasses.length];
+                  return (
+                    <Link
+                      key={t}
+                      href={`/tags/${encodeURIComponent(
+                        t.toLowerCase().replace(/\s+/g, '-')
+                      )}`}
+                      className={`rounded-full px-2 py-0.5 text-[11px] transition ${color}`}
+                    >
+                      #{t}
+                    </Link>
+                  );
+                })}
               </div>
             )}
             {excerpt && (
diff --git a/components/right-sidebar.tsx b/components/right-sidebar.tsx
index e75f1d3..46c9ebe 100644
--- a/components/right-sidebar.tsx
+++ b/components/right-sidebar.tsx
@@ -41,16 +41,26 @@ export function RightSidebar() {
             標籤雲
           </h2>
           <div className="mt-2 flex flex-wrap gap-2 text-xs">
-            {tags.map(({ tag, slug, count }) => {
+            {tags.map(({ tag, slug, count }, index) => {
               let sizeClass = 'text-[11px]';
               if (count >= 5) sizeClass = 'text-sm font-semibold';
               else if (count >= 3) sizeClass = 'text-xs font-medium';
 
+              const colorClasses = [
+                'bg-rose-100 text-rose-700 dark:bg-rose-900/60 dark:text-rose-200',
+                'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/60 dark:text-emerald-200',
+                'bg-sky-100 text-sky-700 dark:bg-sky-900/60 dark:text-sky-200',
+                'bg-amber-100 text-amber-700 dark:bg-amber-900/60 dark:text-amber-200',
+                'bg-violet-100 text-violet-700 dark:bg-violet-900/60 dark:text-violet-200'
+              ];
+              const color =
+                colorClasses[index % colorClasses.length];
+
               return (
                 <Link
                   key={tag}
                   href={`/tags/${slug}`}
-                  className={`${sizeClass} rounded-full bg-slate-100 px-2 py-0.5 text-slate-700 hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-700`}
+                  className={`${sizeClass} rounded-full px-2 py-0.5 transition ${color}`}
                 >
                   {tag}
                 </Link>