diff --git a/package-lock.json b/package-lock.json
index c1ce898..23137d0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
 				"@sveltejs/adapter-static": "^3.0.1",
 				"@sveltejs/kit": "^2.0.0",
 				"@sveltejs/vite-plugin-svelte": "^3.0.0",
+				"@tailwindcss/typography": "^0.5.15",
 				"@zerodevx/svelte-img": "^2.1.0",
 				"autoprefixer": "^10.4.20",
 				"daisyui": "^4.12.12",
@@ -1451,6 +1452,34 @@
 				"@svgr/core": "*"
 			}
 		},
+		"node_modules/@tailwindcss/typography": {
+			"version": "0.5.15",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.15.tgz",
+			"integrity": "sha512-AqhlCXl+8grUz8uqExv5OTtgpjuVIwFTSXTrh8y9/pw6q2ek7fJ+Y8ZEVw7EB2DCcuCOtEjf9w3+J3rzts01uA==",
+			"dev": true,
+			"dependencies": {
+				"lodash.castarray": "^4.4.0",
+				"lodash.isplainobject": "^4.0.6",
+				"lodash.merge": "^4.6.2",
+				"postcss-selector-parser": "6.0.10"
+			},
+			"peerDependencies": {
+				"tailwindcss": ">=3.0.0 || insiders || >=4.0.0-alpha.20"
+			}
+		},
+		"node_modules/@tailwindcss/typography/node_modules/postcss-selector-parser": {
+			"version": "6.0.10",
+			"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+			"integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+			"dev": true,
+			"dependencies": {
+				"cssesc": "^3.0.0",
+				"util-deprecate": "^1.0.2"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
 		"node_modules/@trysound/sax": {
 			"version": "0.2.0",
 			"resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
@@ -3007,6 +3036,24 @@
 			"integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==",
 			"dev": true
 		},
+		"node_modules/lodash.castarray": {
+			"version": "4.4.0",
+			"resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
+			"integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==",
+			"dev": true
+		},
+		"node_modules/lodash.isplainobject": {
+			"version": "4.0.6",
+			"resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+			"integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
+			"dev": true
+		},
+		"node_modules/lodash.merge": {
+			"version": "4.6.2",
+			"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+			"integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+			"dev": true
+		},
 		"node_modules/lower-case": {
 			"version": "2.0.2",
 			"resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
diff --git a/package.json b/package.json
index 47fc7dc..4e0804f 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
 		"@sveltejs/adapter-static": "^3.0.1",
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"@tailwindcss/typography": "^0.5.15",
 		"@zerodevx/svelte-img": "^2.1.0",
 		"autoprefixer": "^10.4.20",
 		"daisyui": "^4.12.12",
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 8b08623..7b2982b 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -9,6 +9,7 @@
 
 
     import BackgroundVideo from "$lib/videos/DeprivedDevMontage.gif"
+    import FrontFold from './comps/FrontFold.svelte';
 
     export let data; // <- contains post data
 
@@ -34,32 +35,20 @@
         </div>        
     </ParallaxLayer>
     <ParallaxLayer offset={0.6} rate={0.3} class="bg-base-200">
-        <div class="grid place-items-center">
+        <div class="grid place-items-center prose font-mono">
             <div class="p-4 grid gap-4" style="{!mobile ? "max-width: 50vw;" : ""}">
-                <div class="collapse collapse-arrow bg-base-100 text-start">
-                    <input type="radio" name="my-accordion-2" checked/>
-                    <div class="collapse-title text-xl font-medium "><b>Alex / Zhen</b></div>
-                    <div class="collapse-content">
-                        <p>Hi, I am Alex/Zhen, I'm that chinese guy.</p>
-                        <p>Here's my CV: <a href="/zhen/cv/rev1?hideOnPrint=1" style="color:lightblue;">pdf</a></p>
-                    </div>
-                </div>
-                <div class="collapse collapse-arrow bg-base-100 text-start">
-                    <input type="radio" name="my-accordion-2"/>
-                    <div class="collapse-title text-xl font-medium "><b>Sveske / Benjamin</b></div>
-                    <div class="collapse-content">
-                        <p>Hi, I use Arch, btw.</p>
-                        <p>Here's my Linked-in: <a href="https://www.linkedin.com/in/benjamin-dreyer/" style="color:lightblue;">Linked-in</a></p>
-                    </div>
-                </div>
-                <div class="collapse collapse-arrow bg-base-100 text-start">
-                    <input type="radio" name="my-accordion-2"/>
-                    <div class="collapse-title text-xl font-medium "><b>Zylvester</b></div>
-                    <div class="collapse-content">
-                        <p>Hi, I am [insert text here]</p>
-                        <p>Here's a joke about recursion: <a href="" style="color:lightblue;">recursion</a></p>
-                    </div>
-                </div>
+                <FrontFold Title="Alex / Zhen">
+                    <p>Hi, I am Alex/Zhen, I'm that chinese guy.</p>
+                    <p>Here's my CV: <a href="/zhen/cv/rev1?hideOnPrint=1" style="color:lightblue;">pdf</a></p>
+                </FrontFold>
+                <FrontFold Title="Sveske / Benjamin">
+                    <p>Hi, I use Arch, btw.</p>
+                    <p>Here's my Linked-in: <a href="https://www.linkedin.com/in/benjamin-dreyer/" style="color:lightblue;">Linked-in</a></p>'
+                </FrontFold>
+                <FrontFold Title="Zylvester">
+                    <p>Hi, I am [insert text here]</p>
+                    <p>Here's a joke about recursion: <a href="" style="color:lightblue;">recursion</a></p>
+                </FrontFold>
             </div>
         </div>
     </ParallaxLayer>
diff --git a/src/routes/comps/FrontFold.svelte b/src/routes/comps/FrontFold.svelte
new file mode 100644
index 0000000..97e057f
--- /dev/null
+++ b/src/routes/comps/FrontFold.svelte
@@ -0,0 +1,11 @@
+<script>
+    export let Title = "";
+</script>
+
+<div class="collapse collapse-arrow bg-base-100 text-start" {...$$restProps}>
+    <input type="radio" name="my-accordion-2" checked/>
+    <div class="collapse-title text-xl font-medium "><b>{Title}</b></div>
+    <div class="collapse-content ">
+        <slot/>
+    </div>
+</div>
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index d9eba18..51ca9bf 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,6 +4,6 @@ export default {
   theme: {
     extend: {},
   },
-  plugins: [require('daisyui'),],
+  plugins: [require("@tailwindcss/typography"), require('daisyui'),],
 }