diff --git a/.gitignore b/.gitignore
index 10b99be..a300b20 100644
--- a/.gitignore
+++ b/.gitignore
@@ -11,4 +11,5 @@ dist-ssr
 .vinxi
 __unconfig*
 todos.json
-dudesky.db*
\ No newline at end of file
+dudesky.db*
+.playwright-mcp/*
diff --git a/package-lock.json b/package-lock.json
index 429a033..78bc3bc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "dependencies": {
         "@atproto/api": "^0.19.8",
         "@atproto/oauth-client-node": "^0.3.17",
+        "@playwright/test": "^1.59.1",
         "@tailwindcss/vite": "^4.1.18",
         "@tanstack/react-devtools": "latest",
         "@tanstack/react-router": "latest",
@@ -1362,6 +1363,21 @@
         "node": ">=20.0"
       }
     },
+    "node_modules/@playwright/test": {
+      "version": "1.59.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.59.1.tgz",
+      "integrity": "sha512-PG6q63nQg5c9rIi4/Z5lR5IVF7yU5MqmKaPOe0HSc0O2cX1fPi96sUQu5j7eo4gKCkB2AnNGoWt7y4/Xx3Kcqg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright": "1.59.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@rolldown/pluginutils": {
       "version": "1.0.0-beta.40",
       "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.40.tgz",
@@ -4968,6 +4984,50 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/playwright": {
+      "version": "1.59.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.59.1.tgz",
+      "integrity": "sha512-C8oWjPR3F81yljW9o5OxcWzfh6avkVwDD2VYdwIGqTkl+OGFISgypqzfu7dOe4QNLL2aqcWBmI3PMtLIK233lw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.59.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.59.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.59.1.tgz",
+      "integrity": "sha512-HBV/RJg81z5BiiZ9yPzIiClYV/QMsDCKUyogwH9p3MCP6IYjUFu/MActgYAvK0oWyV9NlwM3GLBjADyWgydVyg==",
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/playwright/node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.5.9",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.9.tgz",
diff --git a/package.json b/package.json
index aa6797a..2ed1b6f 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
   "dependencies": {
     "@atproto/api": "^0.19.8",
     "@atproto/oauth-client-node": "^0.3.17",
+    "@playwright/test": "^1.59.1",
     "@tailwindcss/vite": "^4.1.18",
     "@tanstack/react-devtools": "latest",
     "@tanstack/react-router": "latest",
diff --git a/src/routes/feed.tsx b/src/routes/feed.tsx
index c2009c6..35bb02e 100644
--- a/src/routes/feed.tsx
+++ b/src/routes/feed.tsx
@@ -23,6 +23,7 @@ const getTimeline = createServerFn({ method: 'GET' }).handler(async () => {
         displayName: item.post.author.displayName ?? null,
         avatar: item.post.author.avatar ?? null,
       },
+      createdAt: (item.post.record as { createdAt?: string }).createdAt,
     })),
   }
 })
@@ -36,16 +37,18 @@ function FeedPage() {
   const { feed } = Route.useLoaderData()
 
   return (
-    <div className="max-w-2xl mx-auto py-8 px-4 space-y-4">
+    <div className="bg-[--bg-base] max-w-2xl mx-auto py-8 px-4 space-y-4">
       {feed.map((item) => (
-        <article key={item.uri} className="border rounded-lg p-4 space-y-2">
+        <article key={item.uri} className="island-shell p-4 space-y-2">
           <div className="flex items-center gap-2">
             {item.author.avatar && (
               <img src={item.author.avatar} alt="" className="w-8 h-8 rounded-full" />
             )}
             <div>
               <span className="font-semibold">{item.author.displayName ?? item.author.handle}</span>
-              <span className="text-sm text-gray-500 ml-1">@{item.author.handle}</span>
+              <span className="text-sm text-[--sea-ink-soft] mx-1">@{item.author.handle}</span>
+              ||
+              <span className="text-sm text-[--sea-ink-soft] ml-1">{item.createdAt}</span>
             </div>
           </div>
           <p className="whitespace-pre-wrap">{item.text}</p>