diff --git a/app/caramel/[id]/_components/Card.tsx b/app/caramel/[id]/_components/Card.tsx
new file mode 100644
index 0000000..16c7d1c
--- /dev/null
+++ b/app/caramel/[id]/_components/Card.tsx
@@ -0,0 +1,35 @@
+import React from 'react'
+
+export type CardProps = {
+  by: string
+  descendants: number
+  id: number
+  score: number
+  time: number
+  title: string
+  type: 'job' | 'story' | 'comment' | 'poll'
+  url: string
+}
+
+const Card: React.FC<CardProps> = ({ by, descendants, id, score, time, title, type, url }) => {
+  return (
+    <div className='bg-white rounded-lg shadow-lg p-6'>
+      <h2 className='text-2xl font-bold mb-2'>
+        {id}: {title}
+      </h2>
+      <p className='text-gray-600 mb-2'>By: {by}</p>
+      <p className='text-gray-600 mb-2'>Score: {score}</p>
+      <p className='text-gray-600 mb-2'>Type: {type}</p>
+      <p className='text-gray-600 mb-2'>Time: {new Date(time * 1000).toLocaleString()}</p>
+      <p className='text-gray-600 mb-2'>
+        URL:{' '}
+        <a href={url} className='text-blue-500 hover:underline'>
+          {url}
+        </a>
+      </p>
+      <p className='text-gray-600'>Got {descendants} comments</p>
+    </div>
+  )
+}
+
+export default Card
diff --git a/app/caramel/[id]/page.tsx b/app/caramel/[id]/page.tsx
new file mode 100644
index 0000000..e01eb91
--- /dev/null
+++ b/app/caramel/[id]/page.tsx
@@ -0,0 +1,17 @@
+import Link from 'next/link'
+import Card from './_components/Card'
+// before routing: import Card, { CardProps } from '@/components/Card'
+
+export default async function Article({ params }: { params: { id: string } }) {
+  const res = await fetch(`https://hacker-news.firebaseio.com/v0/item/${params.id}.json`)
+  const article = await res.json()
+
+  return (
+    <div className='bg-[#bc611e] p-8'>
+      {article ? <Card {...article} /> : <div />}
+      <Link href='/caramel' className='btn btn-primary'>
+        Back
+      </Link>
+    </div>
+  )
+}
diff --git a/pages/caramel/[id].tsx b/pages/caramel/[id].tsx
deleted file mode 100644
index 7fda074..0000000
--- a/pages/caramel/[id].tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import Card, { CardProps } from '@/components/Card'
-import Link from 'next/link'
-import { useRouter } from 'next/router'
-import { useEffect, useState } from 'react'
-
-export default function Article() {
-  const router = useRouter()
-  const { id } = router.query
-
-  const [article, setArticle] = useState<CardProps>()
-
-  useEffect(() => {
-    if (!id) return
-    ;(async () => {
-      const res = await fetch(`https://hacker-news.firebaseio.com/v0/item/${id}.json`)
-      const article = await res.json()
-      setArticle(article)
-    })()
-  }, [])
-
-  return (
-    <div className='bg-[#bc611e] p-8'>
-      {article ? <Card {...article} /> : <div />}
-      <Link href='/caramel' className='btn btn-primary'>
-        Back
-      </Link>
-    </div>
-  )
-}