diff --git a/app/(pages)/articles/page.tsx b/app/(pages)/articles/page.tsx
deleted file mode 100644
index 6a0b4a06..00000000
--- a/app/(pages)/articles/page.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import type { Metadata } from "next";
-
-import { RssIcon } from "../../_components";
-import { ArticleList, UniversalLink } from "../../_features";
-
-export default function Page() {
-  return (
-    <div className="grid gap-8">
-      <h1 className="flex items-center gap-2 font-bold text-3xl">
-        <span>Articles</span>
-        <UniversalLink href="/articles/feed">
-          <RssIcon className="h-6 w-6" />
-        </UniversalLink>
-      </h1>
-      <ArticleList />
-    </div>
-  );
-}
-
-export const metadata: Metadata = {
-  title: "Articles",
-};
diff --git a/app/_features/articles/ArticleList.tsx b/app/_features/articles/ArticleList.tsx
index e41fe97f..d73b56e1 100644
--- a/app/_features/articles/ArticleList.tsx
+++ b/app/_features/articles/ArticleList.tsx
@@ -1,3 +1,4 @@
+import { UniversalLink } from "../viewTransition";
 import { ArticleListItem } from "./ArticleListItem";
 import { getArticlesMeta } from "./getArticlesMeta";
 import type { TagEnum } from "./type";
@@ -12,10 +13,16 @@ export const ArticleList = ({ tag }: Props): JSX.Element => {
   const articlesMeta = getArticlesMeta({ tag });
 
   return (
-    <div className="grid gap-12">
-      {articlesMeta.map((article) => (
-        <ArticleListItem key={article.title} {...article} />
-      ))}
+    <div className="blur-enter-content">
+      <UniversalLink href="/" isEnabledUnderline className="text-zinc-700 dark:text-zinc-300">
+        ← Go back
+      </UniversalLink>
+
+      <div className="mt-12 grid gap-6 blur-enter-content enter-step-150">
+        {articlesMeta.map((article) => (
+          <ArticleListItem key={article.title} {...article} />
+        ))}
+      </div>
     </div>
   );
 };
diff --git a/app/_features/articles/ArticleListItem.tsx b/app/_features/articles/ArticleListItem.tsx
index b0e646a1..dd68cee2 100644
--- a/app/_features/articles/ArticleListItem.tsx
+++ b/app/_features/articles/ArticleListItem.tsx
@@ -1,8 +1,8 @@
-import { ExternalLinkIcon, Time } from "../../_components";
+import { MoveUpRight } from "lucide-react";
+import { Time } from "../../_components";
 import { format } from "../../_utils";
 import { UniversalLink } from "../viewTransition";
 
-import { Tag } from "./Tag";
 import type { ArticleMeta } from "./type";
 
 type Props = ArticleMeta;
@@ -12,26 +12,22 @@ export const ArticleListItem = ({
   href,
   externalLink,
   publishedAt: _publishedAt,
-  tags,
 }: Props) => {
   const publishedAt = format(_publishedAt);
 
   return (
-    <article className="grid gap-4">
-      <h2 className="text-xl">
-        <UniversalLink href={href} isExternal={externalLink} isEnabledUnderline>
+    <article className="flex gap-2 items-center justify-between">
+      <h2 className="text-base font-normal">
+        <UniversalLink href={href} isExternal={externalLink} isEnabledHoveredUnderline>
           {title}
-          {externalLink && <ExternalLinkIcon />}
+          {externalLink && (
+            <MoveUpRight className="mb-[-3px] ml-0.5 inline-block h-4 w-auto align-top text-zinc-500 dark:text-zinc-400" />
+          )}
         </UniversalLink>
       </h2>
-      <div className="flex justify-between">
-        <div className="flex gap-2">
-          {tags.map((tag) => (
-            <Tag key={tag} tag={tag} />
-          ))}
-        </div>
-        <Time dateTime={publishedAt}>{publishedAt}</Time>
-      </div>
+      <Time dateTime={publishedAt} className="shrink-0">
+        {publishedAt}
+      </Time>
     </article>
   );
 };
diff --git a/app/articles/page.tsx b/app/articles/page.tsx
new file mode 100644
index 00000000..bdc8d89f
--- /dev/null
+++ b/app/articles/page.tsx
@@ -0,0 +1,15 @@
+import type { Metadata } from "next";
+
+import { ArticleList } from "../_features";
+
+export default function Page() {
+  return (
+    <main className="max-w-3xl mx-auto py-16 md:py-32 px-4 md:px-0">
+      <ArticleList />
+    </main>
+  );
+}
+
+export const metadata: Metadata = {
+  title: "Articles",
+};
diff --git a/app/globals.css b/app/globals.css
index 1e29ac24..b72a6a33 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -112,6 +112,10 @@
       animation-delay: calc(var(--enter-initial) + var(--enter-stage) * var(--enter-step));
     }
 
+    .blur-enter-content.enter-step-150 > * {
+      --enter-step: 150ms;
+    }
+
     .blur-enter-content > *:nth-child(1) {
       --enter-stage: 1;
     }