diff --git a/app/tags/layout.tsx b/app/tags/layout.tsx
new file mode 100644
index 0000000..bc49698
--- /dev/null
+++ b/app/tags/layout.tsx
@@ -0,0 +1,27 @@
+import clsx from 'clsx';
+import { ReactNode } from 'react';
+
+const Layout = ({ children }: { children: ReactNode }) => {
+  return (
+    <>
+      <main
+        className={clsx(
+          'flex-1 max-w-4xl px-8 py-8 mx-auto',
+          'lg:px-0 w-full flex-1',
+        )}
+      >
+        <h1
+          className={clsx(
+            'text-5xl font-bold text-center font-Barlow',
+            'mt-8 mb-20 text-gray-800 dark:text-gray-200',
+          )}
+        >
+          Tags
+        </h1>
+        {children}
+      </main>
+    </>
+  );
+};
+
+export default Layout;
diff --git a/app/tags/page.tsx b/app/tags/page.tsx
new file mode 100644
index 0000000..492dad0
--- /dev/null
+++ b/app/tags/page.tsx
@@ -0,0 +1,60 @@
+import clsx from 'clsx';
+import { postLists } from 'lib/posts';
+import { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'RUA - Tags',
+};
+
+const Page = async () => {
+  const posts = await postLists();
+  // tag ["Rust", "React"] or "Rust"
+  // tag object {"Rust": 1, "React": 1}
+  const tags = posts.reduce<{
+    [key: string]: number;
+  }>((prev, cur) => {
+    if (cur.tags?.length <= 0) {
+      return prev;
+    }
+    if (typeof cur.tags === 'string') {
+      const tag = prev[cur.tags];
+      if (tag) {
+        prev[cur.tags] += 1;
+      } else {
+        prev[cur.tags] = 1;
+      }
+    }
+    if (Array.isArray(cur.tags)) {
+      cur.tags.forEach((tag) => {
+        const tagCount = prev[tag];
+        if (tagCount) {
+          prev[tag] += 1;
+        } else {
+          prev[tag] = 1;
+        }
+      });
+    }
+    return prev;
+  }, {});
+
+  return (
+    <div className={clsx('flex gap-4 flex-wrap')}>
+      {Object.entries(tags).map(([tag, count]) => (
+        <div
+          key={tag}
+          className={clsx(
+            'px-4 py-2 bg-gray-200',
+            'rounded-lg flex items-center',
+            'gap-2 cursor-pointer',
+            'dark:bg-rua-gray-800',
+          )}
+        >
+          <div>{tag}</div>
+          <div>{count}</div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default Page;
diff --git a/app/g/[id]/page.tsx b/backup/g/[id]/page.tsx
similarity index 100%
rename from app/g/[id]/page.tsx
rename to backup/g/[id]/page.tsx
diff --git a/app/g/layout.tsx b/backup/g/layout.tsx
similarity index 100%
rename from app/g/layout.tsx
rename to backup/g/layout.tsx
diff --git a/app/g/loading.tsx b/backup/g/loading.tsx
similarity index 100%
rename from app/g/loading.tsx
rename to backup/g/loading.tsx
diff --git a/app/gists/[page]/page.tsx b/backup/gists/[page]/page.tsx
similarity index 100%
rename from app/gists/[page]/page.tsx
rename to backup/gists/[page]/page.tsx
diff --git a/app/gists/layout.tsx b/backup/gists/layout.tsx
similarity index 100%
rename from app/gists/layout.tsx
rename to backup/gists/layout.tsx
diff --git a/app/gists/loading.tsx b/backup/gists/loading.tsx
similarity index 100%
rename from app/gists/loading.tsx
rename to backup/gists/loading.tsx
diff --git a/app/gists/page.tsx b/backup/gists/page.tsx
similarity index 100%
rename from app/gists/page.tsx
rename to backup/gists/page.tsx
diff --git a/components/pages/nav-bar.tsx b/components/pages/nav-bar.tsx
index a669b92..4147cdb 100644
--- a/components/pages/nav-bar.tsx
+++ b/components/pages/nav-bar.tsx
@@ -25,8 +25,8 @@ const txtMenu = [
   },
   {
     id: 3,
-    name: 'Gists',
-    path: '/gists',
+    name: 'Tags',
+    path: '/tags',
   },
   {
     id: 4,