diff --git a/apps/changelog_public/astro.config.mjs b/apps/changelog_public/astro.config.mjs
index ebeaab9..e94a8f8 100644
--- a/apps/changelog_public/astro.config.mjs
+++ b/apps/changelog_public/astro.config.mjs
@@ -7,5 +7,6 @@ import tailwind from '@astrojs/tailwind'
 
 // https://astro.build/config
 export default defineConfig({
+  output: 'server',
   integrations: [react(), tailwind({ nesting: true })],
 })
diff --git a/apps/changelog_public/package.json b/apps/changelog_public/package.json
index 5adbee3..95c452b 100644
--- a/apps/changelog_public/package.json
+++ b/apps/changelog_public/package.json
@@ -15,12 +15,15 @@
     "@astrojs/tailwind": "^5.1.2",
     "@boring.tools/schema": "workspace:*",
     "@boring.tools/ui": "workspace:*",
+    "@tailwindcss/typography": "^0.5.15",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "astro": "^4.16.7",
+    "date-fns": "^4.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "tailwindcss": "^3.4.14",
+    "tailwindcss-animate": "^1.0.7",
     "typescript": "^5.6.3"
   }
 }
diff --git a/apps/changelog_public/src/pages/[id].astro b/apps/changelog_public/src/pages/[id].astro
new file mode 100644
index 0000000..2ccd8f1
--- /dev/null
+++ b/apps/changelog_public/src/pages/[id].astro
@@ -0,0 +1,49 @@
+---
+import { Button } from '@boring.tools/ui'
+import { format } from 'date-fns'
+
+const { id } = Astro.params
+const response = await fetch(`http://localhost:3000/v1/changelog/public/${id}`)
+const data = await response.json()
+console.log(data)
+---
+
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<meta name="viewport" content="width=device-width" />
+		<meta name="generator" content={Astro.generator} />
+		<title>{data.title} | boring.tools</title>
+	</head>
+	<body>
+		<div class="w-full flex items-center justify-center">
+			<div class="w-full max-w-screen-sm flex my-6 flex-col gap-8">
+
+				<div class="flex flex-col">
+					<h1 class="prose prose-2xl">{data.title}</h1>
+					<p class="prose">{data.description}</p>
+				</div>
+
+				{data.versions.map((version) => {
+					return (
+						<div class="flex gap-10">
+							<div>
+								<h2 class="prose text-3xl font-bold">
+									{version.version}
+								</h2>
+								<p class="prose prose-sm">
+									{format(new Date(version.releasedAt), "dd-MM-yy")}
+								</p>
+							</div>
+
+							<p>
+								{version.markdown}
+							</p>
+						</div>
+					)
+				})}
+			</div>
+		</div>
+	</body>
+</html>
diff --git a/apps/changelog_public/src/pages/index.astro b/apps/changelog_public/src/pages/index.astro
index 0b2319e..890ea6f 100644
--- a/apps/changelog_public/src/pages/index.astro
+++ b/apps/changelog_public/src/pages/index.astro
@@ -1,5 +1,4 @@
 ---
-import { Button } from '@boring.tools/ui'
 ---
 
 <html lang="en">
@@ -11,7 +10,9 @@ import { Button } from '@boring.tools/ui'
 		<title>Astro</title>
 	</head>
 	<body>
-		<h1>Astro</h1>
-		<Button variant={"destructive"}>some</Button>
+		<div class="flex items-center justify-center w-full h-screen flex-col">
+			<h1 class="prose prose-2xl">boring.tools</h1>
+			<p class="prose prose-sm">CHANGELOG</p>
+		</div>
 	</body>
 </html>
diff --git a/apps/changelog_public/tailwind.config.mjs b/apps/changelog_public/tailwind.config.mjs
index 01a7788..ae2c83d 100644
--- a/apps/changelog_public/tailwind.config.mjs
+++ b/apps/changelog_public/tailwind.config.mjs
@@ -82,5 +82,5 @@ export default {
       },
     },
   },
-  plugins: [],
+  plugins: [require('tailwindcss-animate'), require('@tailwindcss/typography')],
 }
diff --git a/bun.lockb b/bun.lockb
index df3cbf3..e994512 100755
Binary files a/bun.lockb and b/bun.lockb differ
