diff --git a/package-lock.json b/package-lock.json
index 2d15284..8ff9b64 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
 				"@sveltejs/adapter-node": "^5.0.1"
 			},
 			"devDependencies": {
+				"@portabletext/svelte": "^2.1.11",
 				"@sveltejs/adapter-auto": "^3.0.0",
 				"@sveltejs/kit": "^2.0.0",
 				"@sveltejs/vite-plugin-svelte": "^3.0.0",
@@ -623,6 +624,39 @@
 			"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.25.tgz",
 			"integrity": "sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ=="
 		},
+		"node_modules/@portabletext/svelte": {
+			"version": "2.1.11",
+			"resolved": "https://registry.npmjs.org/@portabletext/svelte/-/svelte-2.1.11.tgz",
+			"integrity": "sha512-ecatiEd80Mw72XXya1swRnzZePuMnrbRf3OGgjTFe1iePcyQ89n8PMpfO3Dpn6bXvjMkIq9yvqB4b9oLLlGOfA==",
+			"dev": true,
+			"dependencies": {
+				"@portabletext/toolkit": "^2.0.15"
+			},
+			"peerDependencies": {
+				"svelte": ">=3.47.0 <5.0.0"
+			}
+		},
+		"node_modules/@portabletext/toolkit": {
+			"version": "2.0.15",
+			"resolved": "https://registry.npmjs.org/@portabletext/toolkit/-/toolkit-2.0.15.tgz",
+			"integrity": "sha512-KRNEUAd6eOxE9y591qC0sE24ZG2q27OHXe0dsPclj4IoEzf8aEuDcHR64wfFtB0aHq9Wdx3pIinmhZZcl35/vg==",
+			"dev": true,
+			"dependencies": {
+				"@portabletext/types": "^2.0.13"
+			},
+			"engines": {
+				"node": "^14.13.1 || >=16.0.0"
+			}
+		},
+		"node_modules/@portabletext/types": {
+			"version": "2.0.13",
+			"resolved": "https://registry.npmjs.org/@portabletext/types/-/types-2.0.13.tgz",
+			"integrity": "sha512-5xk5MSyQU9CrDho3Rsguj38jhijhD36Mk8S6mZo3huv6PM+t4M/5kJN2KFIxgvt4ONpvOEs1pVIZAV0cL0Vi+Q==",
+			"dev": true,
+			"engines": {
+				"node": "^14.13.1 || >=16.0.0 || >=18.0.0"
+			}
+		},
 		"node_modules/@rollup/plugin-commonjs": {
 			"version": "25.0.7",
 			"resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-25.0.7.tgz",
diff --git a/package.json b/package.json
index 6a2dcbf..d98ced8 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
 		"format": "prettier --write ."
 	},
 	"devDependencies": {
+		"@portabletext/svelte": "^2.1.11",
 		"@sveltejs/adapter-auto": "^3.0.0",
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^3.0.0",
diff --git a/src/routes/learnings/+page.server.js b/src/routes/learnings/+page.server.js
index f75e3c0..a109260 100644
--- a/src/routes/learnings/+page.server.js
+++ b/src/routes/learnings/+page.server.js
@@ -4,6 +4,7 @@ export async function load({ params }) {
   const data = await client.fetch(`*[_type == "post"] {
     title,
     slug,
+    _createdAt,
     coverImage {
       ...,
       asset->
diff --git a/src/routes/learnings/+page.svelte b/src/routes/learnings/+page.svelte
index 374ef54..aeda407 100644
--- a/src/routes/learnings/+page.svelte
+++ b/src/routes/learnings/+page.svelte
@@ -1,17 +1,20 @@
 <script>
-	import { text } from "@sveltejs/kit";
+    import {PortableText} from '@portabletext/svelte'
     export let data;
-    function setElement(style, text) {
-        const targetElement = 
-    }
+
 </script>
 
 {#each data.posts as post}
-    <h2>{post.title}</h2>
-    {#each post.body as block, i}
-        <p id="post-text-{i}">{setElement(block.style, block.children[0].text)}</p>
-    {/each}
-
-    <img src="{post.coverImage.asset.url}" alt="yes">
-    <a href="/learnings/{post.slug.current}">read more...</a>
+    <div class="border-2 border-slate-500 rounded my-2 text-l p-4">
+        <img class="max-h-32 mx-auto" src={post.coverImage.asset.url} alt={post.title}>
+        <h2 class="text-xl">{post.title}</h2>
+        {#each post.body as block}
+            <PortableText
+            value={[
+                block
+            ]}
+            />
+        {/each}
+        <p>{post._createdAt}</p>
+    </div>
 {/each}
\ No newline at end of file