diff --git a/app/gists/page.tsx b/app/gists/page.tsx
new file mode 100644
index 0000000..bb9432d
--- /dev/null
+++ b/app/gists/page.tsx
@@ -0,0 +1,41 @@
+import { getGists } from 'lib/fetcher';
+import { notFound } from 'next/navigation';
+import UserInfo from './user-info';
+import { Suspense } from 'react';
+import FileContent from 'components/gists/file-content';
+import Pagination from 'components/rua/rua-pagination';
+
+export default async function Page() {
+  const gists = await getGists();
+  if (!gists) notFound();
+
+  const prev = Number(gists.pageSize.prev);
+  const next = Number(gists.pageSize.next);
+  const total = Number(gists.pageSize.last);
+
+  return (
+    <>
+      <main className="max-w-5xl px-4 mx-auto lg:px-0">
+        <div className="md:flex">
+          <Suspense fallback>
+            {/* @ts-expect-error Async Server Component */}
+            <UserInfo />
+          </Suspense>
+
+          <div className="flex-1 px-1 py-4 overflow-hidden md:pl-8">
+            <FileContent gists={gists.gists} />
+            <Pagination
+              className="mt-4"
+              hasPrev={!!prev}
+              hasNext={!!next}
+              prevLink={prev === 1 ? `/gists/` : `/gists/${prev}`}
+              nextLink={`/gists/${next}`}
+              current={prev == null ? next - 1 : prev + 1}
+              total={total}
+            />
+          </div>
+        </div>
+      </main>
+    </>
+  );
+}
diff --git a/components/gists/user-info.tsx b/app/gists/user-info.tsx
similarity index 91%
rename from components/gists/user-info.tsx
rename to app/gists/user-info.tsx
index 1b6e203..101372d 100644
--- a/components/gists/user-info.tsx
+++ b/app/gists/user-info.tsx
@@ -1,15 +1,12 @@
 import clsx from 'clsx';
-import { GetUser } from 'lib/fetcher';
+import { getUser } from 'lib/fetcher';
 import Image from 'next/image';
 import avatar from 'public/images/img/avatar.svg';
-import { memo } from 'react';
 import { FiLink, FiMail, FiTwitter } from 'react-icons/fi';
 
-type Props = {
-  user: GetUser;
-};
+const UserInfo = async () => {
+  const user = await getUser();
 
-const UserInfo = ({ user }: Props) => {
   return (
     <>
       <div
@@ -80,4 +77,4 @@ const UserInfo = ({ user }: Props) => {
   );
 };
 
-export default memo(UserInfo);
+export default UserInfo;
diff --git a/app/layout.tsx b/app/layout.tsx
index b9b1d0c..dc903ea 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,5 +1,8 @@
 import 'styles/globals.css';
 import '@docsearch/css/dist/style.css';
+import 'styles/prism-one-dark.css';
+import 'styles/prism-one-light.css';
+import 'styles/rua.css';
 import RUAThemeProvider from './theme-provider';
 import HeadBar from './nav-bar';
 import Footer from './footer';
diff --git a/components/gists/file-content.tsx b/components/gists/file-content.tsx
index 6394c17..0333c2b 100644
--- a/components/gists/file-content.tsx
+++ b/components/gists/file-content.tsx
@@ -5,10 +5,10 @@ import { GistData } from 'lib/fetcher';
 import dynamic from 'next/dynamic';
 import Link from 'next/link';
 import { memo, Suspense } from 'react';
+import GistsCode from './gists-code';
+import relativeTime from 'dayjs/plugin/relativeTime';
 
-const GistsCode = dynamic(() => import('components/gists/gists-code'), {
-  suspense: true,
-});
+dayjs.extend(relativeTime);
 
 type Props = {
   gists: GistData[];
@@ -38,9 +38,7 @@ const FileContent = ({ gists }: Props) => {
                 {/* Description */}
                 <p className="text-gray-500">{g.description}</p>
 
-                <Suspense fallback={<Loading className="h-[300px]" />}>
-                  <GistsCode file={g.files[f]} />
-                </Suspense>
+                <GistsCode file={g.files[f]} />
               </div>
             ))}
           </div>