diff --git a/public/base.css b/public/base.css
index ca32254..ebe6948 100644
--- a/public/base.css
+++ b/public/base.css
@@ -981,6 +981,18 @@ body[data-perms*="files.write.own"] [data-requires-permission="files.write.own"]
 	left: -6px;
 }
 
+/* ICON - MINUS */
+.icon.minus {
+	box-sizing: border-box;
+	position: relative;
+	display: block;
+	transform: scale(var(--icon-scale, 1));
+	width: 16px;
+	height: 2px;
+	background: currentColor;
+	border-radius: 10px;
+}
+
 /* ICON - MORE */
 .icon.more {
 	box-sizing: border-box;
diff --git a/public/images/placeholders/01.svg b/public/images/placeholders/01.svg
new file mode 100644
index 0000000..76ec5cb
--- /dev/null
+++ b/public/images/placeholders/01.svg
@@ -0,0 +1 @@
+<svg id="visual" viewBox="0 0 900 600" width="900" height="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><g stroke-width="1" stroke-linejoin="bevel"><path d="M464 309L392 312L410 374Z" fill="#9b9b9b" stroke="#9b9b9b"></path><path d="M410 374L498 421L464 309Z" fill="#545454" stroke="#545454"></path><path d="M392 312L301 385L410 374Z" fill="#222222" stroke="#222222"></path><path d="M410 374L375 497L498 421Z" fill="#545454" stroke="#545454"></path><path d="M312 218L288 304L392 312Z" fill="#2e2e2e" stroke="#2e2e2e"></path><path d="M392 312L288 304L301 385Z" fill="#707070" stroke="#707070"></path><path d="M464 309L388 195L392 312Z" fill="#222222" stroke="#222222"></path><path d="M388 195L312 218L392 312Z" fill="#3a3a3a" stroke="#3a3a3a"></path><path d="M301 385L375 497L410 374Z" fill="#9b9b9b" stroke="#9b9b9b"></path><path d="M498 421L603 338L464 309Z" fill="#626262" stroke="#626262"></path><path d="M464 309L508 168L388 195Z" fill="#707070" stroke="#707070"></path><path d="M375 497L472 514L498 421Z" fill="#707070" stroke="#707070"></path><path d="M498 421L639 366L603 338Z" fill="#3a3a3a" stroke="#3a3a3a"></path><path d="M603 338L508 168L464 309Z" fill="#aaaaaa" stroke="#aaaaaa"></path><path d="M184 234L227 314L288 304Z" fill="#707070" stroke="#707070"></path><path d="M288 304L227 314L301 385Z" fill="#3a3a3a" stroke="#3a3a3a"></path><path d="M301 385L268 532L375 497Z" fill="#626262" stroke="#626262"></path><path d="M571 496L639 366L498 421Z" fill="#9b9b9b" stroke="#9b9b9b"></path><path d="M638 162L515 137L508 168Z" fill="#545454" stroke="#545454"></path><path d="M472 514L571 496L498 421Z" fill="#545454" stroke="#545454"></path><path d="M638 162L508 168L603 338Z" fill="#aaaaaa" stroke="#aaaaaa"></path><path d="M508 168L515 137L388 195Z" fill="#8c8c8c" stroke="#8c8c8c"></path><path d="M388 195L363 85L312 218Z" fill="#7e7e7e" stroke="#7e7e7e"></path><path d="M195 499L268 532L301 385Z" fill="#626262" stroke="#626262"></path><path d="M375 497L376 600L472 514Z" fill="#aaaaaa" stroke="#aaaaaa"></path><path d="M515 137L363 85L388 195Z" fill="#222222" stroke="#222222"></path><path d="M312 218L184 234L288 304Z" fill="#222222" stroke="#222222"></path><path d="M301 84L184 234L312 218Z" fill="#626262" stroke="#626262"></path><path d="M227 314L172 418L301 385Z" fill="#3a3a3a" stroke="#3a3a3a"></path><path d="M113 303L172 418L227 314Z" fill="#7e7e7e" stroke="#7e7e7e"></path><path d="M268 532L376 600L375 497Z" fill="#474747" stroke="#474747"></path><path d="M472 514L498 600L571 496Z" fill="#707070" stroke="#707070"></path><path d="M728 281L638 162L603 338Z" fill="#545454" stroke="#545454"></path><path d="M467 0L404 0L363 85Z" fill="#8c8c8c" stroke="#8c8c8c"></path><path d="M376 600L498 600L472 514Z" fill="#9b9b9b" stroke="#9b9b9b"></path><path d="M363 85L301 84L312 218Z" fill="#474747" stroke="#474747"></path><path d="M172 418L195 499L301 385Z" fill="#626262" stroke="#626262"></path><path d="M268 532L276 600L376 600Z" fill="#2e2e2e" stroke="#2e2e2e"></path><path d="M707 487L716 380L639 366Z" fill="#626262" stroke="#626262"></path><path d="M639 366L728 281L603 338Z" fill="#8c8c8c" stroke="#8c8c8c"></path><path d="M707 487L639 366L571 496Z" fill="#474747" stroke="#474747"></path><path d="M638 162L591 93L515 137Z" fill="#9b9b9b" stroke="#9b9b9b"></path><path d="M716 380L728 281L639 366Z" fill="#3a3a3a" stroke="#3a3a3a"></path><path d="M638 162L682 73L591 93Z" fill="#7e7e7e" stroke="#7e7e7e"></path><path d="M187 600L276 600L268 532Z" fill="#222222" stroke="#222222"></path><path d="M628 600L707 487L571 496Z" fill="#9b9b9b" stroke="#9b9b9b"></path><path d="M716 380L828 318L728 281Z" fill="#aaaaaa" stroke="#aaaaaa"></path><path d="M66 199L113 303L184 234Z" fill="#aaaaaa" stroke="#aaaaaa"></path><path d="M184 234L113 303L227 314Z" fill="#3a3a3a" stroke="#3a3a3a"></path><path d="M172 418L76 522L195 499Z" fill="#2e2e2e" stroke="#2e2e2e"></path><path d="M498 600L628 600L571 496Z" fill="#545454" stroke="#545454"></path><path d="M467 0L363 85L515 137Z" fill="#626262" stroke="#626262"></path><path d="M363 85L309 0L301 84Z" fill="#8c8c8c" stroke="#8c8c8c"></path><path d="M591 93L467 0L515 137Z" fill="#7e7e7e" stroke="#7e7e7e"></path><path d="M728 281L735 192L638 162Z" fill="#2e2e2e" stroke="#2e2e2e"></path><path d="M591 93L593 0L467 0Z" fill="#aaaaaa" stroke="#aaaaaa"></path><path d="M113 303L82 396L172 418Z" fill="#2e2e2e" stroke="#2e2e2e"></path><path d="M195 499L187 600L268 532Z" fill="#8c8c8c" stroke="#8c8c8c"></path><path d="M404 0L309 0L363 85Z" fill="#9b9b9b" stroke="#9b9b9b"></path><path d="M301 84L186 72L184 234Z" fill="#9b9b9b" stroke="#9b9b9b"></path><path d="M190 0L186 72L301 84Z" fill="#7e7e7e" stroke="#7e7e7e"></path><path d="M113 303L0 338L82 396Z" fill="#545454" stroke="#545454"></path><path d="M115 600L187 600L195 499Z" fill="#2e2e2e" stroke="#2e2e2e"></path><path d="M735 192L682 73L638 162Z" fill="#8c8c8c" stroke="#8c8c8c"></path><path d="M682 73L593 0L591 93Z" fill="#707070" stroke="#707070"></path><path d="M729 600L772 511L707 487Z" fill="#222222" stroke="#222222"></path><path d="M707 487L772 511L716 380Z" fill="#aaaaaa" stroke="#aaaaaa"></path><path d="M728 281L807 191L735 192Z" fill="#545454" stroke="#545454"></path><path d="M90 81L66 199L184 234Z" fill="#7e7e7e" stroke="#7e7e7e"></path><path d="M830 380L828 318L716 380Z" fill="#3a3a3a" stroke="#3a3a3a"></path><path d="M735 192L769 64L682 73Z" fill="#9b9b9b" stroke="#9b9b9b"></path><path d="M0 393L76 522L82 396Z" fill="#2e2e2e" stroke="#2e2e2e"></path><path d="M82 396L76 522L172 418Z" fill="#8c8c8c" stroke="#8c8c8c"></path><path d="M628 600L729 600L707 487Z" fill="#222222" stroke="#222222"></path><path d="M772 511L830 380L716 380Z" fill="#474747" stroke="#474747"></path><path d="M828 318L807 191L728 281Z" fill="#222222" stroke="#222222"></path><path d="M76 522L115 600L195 499Z" fill="#7e7e7e" stroke="#7e7e7e"></path><path d="M309 0L190 0L301 84Z" fill="#474747" stroke="#474747"></path><path d="M186 72L90 81L184 234Z" fill="#3a3a3a" stroke="#3a3a3a"></path><path d="M125 0L90 81L186 72Z" fill="#707070" stroke="#707070"></path><path d="M66 199L0 338L113 303Z" fill="#626262" stroke="#626262"></path><path d="M0 202L0 338L66 199Z" fill="#7e7e7e" stroke="#7e7e7e"></path><path d="M0 338L0 393L82 396Z" fill="#222222" stroke="#222222"></path><path d="M76 522L0 600L115 600Z" fill="#222222" stroke="#222222"></path><path d="M807 191L769 64L735 192Z" fill="#707070" stroke="#707070"></path><path d="M682 73L730 0L593 0Z" fill="#7e7e7e" stroke="#7e7e7e"></path><path d="M729 600L790 600L772 511Z" fill="#aaaaaa" stroke="#aaaaaa"></path><path d="M900 485L900 370L830 380Z" fill="#2e2e2e" stroke="#2e2e2e"></path><path d="M0 137L0 202L66 199Z" fill="#8c8c8c" stroke="#8c8c8c"></path><path d="M769 64L730 0L682 73Z" fill="#222222" stroke="#222222"></path><path d="M190 0L125 0L186 72Z" fill="#474747" stroke="#474747"></path><path d="M90 81L0 137L66 199Z" fill="#222222" stroke="#222222"></path><path d="M0 393L0 522L76 522Z" fill="#3a3a3a" stroke="#3a3a3a"></path><path d="M830 380L900 370L828 318Z" fill="#626262" stroke="#626262"></path><path d="M828 318L900 283L807 191Z" fill="#9b9b9b" stroke="#9b9b9b"></path><path d="M807 191L900 131L769 64Z" fill="#7e7e7e" stroke="#7e7e7e"></path><path d="M900 485L830 380L772 511Z" fill="#626262" stroke="#626262"></path><path d="M0 0L0 137L90 81Z" fill="#3a3a3a" stroke="#3a3a3a"></path><path d="M900 370L900 283L828 318Z" fill="#8c8c8c" stroke="#8c8c8c"></path><path d="M900 600L900 485L772 511Z" fill="#aaaaaa" stroke="#aaaaaa"></path><path d="M900 283L900 180L807 191Z" fill="#aaaaaa" stroke="#aaaaaa"></path><path d="M769 64L815 0L730 0Z" fill="#2e2e2e" stroke="#2e2e2e"></path><path d="M0 522L0 600L76 522Z" fill="#2e2e2e" stroke="#2e2e2e"></path><path d="M900 131L815 0L769 64Z" fill="#626262" stroke="#626262"></path><path d="M900 180L900 131L807 191Z" fill="#545454" stroke="#545454"></path><path d="M790 600L900 600L772 511Z" fill="#8c8c8c" stroke="#8c8c8c"></path><path d="M125 0L0 0L90 81Z" fill="#474747" stroke="#474747"></path><path d="M900 131L900 0L815 0Z" fill="#9b9b9b" stroke="#9b9b9b"></path></g></svg>
\ No newline at end of file
diff --git a/public/images/placeholders/02.svg b/public/images/placeholders/02.svg
new file mode 100644
index 0000000..99621d6
--- /dev/null
+++ b/public/images/placeholders/02.svg
@@ -0,0 +1 @@
+<svg id="visual" viewBox="0 0 900 600" width="900" height="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><rect x="0" y="0" width="900" height="600" fill="#999"></rect><path d="M0 402L129 365L257 425L386 435L514 371L643 433L771 356L900 436L900 601L771 601L643 601L514 601L386 601L257 601L129 601L0 601Z" fill="#777777"></path><path d="M0 427L129 444L257 416L386 405L514 415L643 423L771 432L900 454L900 601L771 601L643 601L514 601L386 601L257 601L129 601L0 601Z" fill="#656565"></path><path d="M0 507L129 485L257 451L386 474L514 463L643 479L771 456L900 450L900 601L771 601L643 601L514 601L386 601L257 601L129 601L0 601Z" fill="#545454"></path><path d="M0 511L129 482L257 526L386 503L514 495L643 514L771 486L900 535L900 601L771 601L643 601L514 601L386 601L257 601L129 601L0 601Z" fill="#434343"></path><path d="M0 568L129 529L257 552L386 554L514 564L643 555L771 550L900 571L900 601L771 601L643 601L514 601L386 601L257 601L129 601L0 601Z" fill="#333333"></path></svg>
\ No newline at end of file
diff --git a/public/images/placeholders/03.svg b/public/images/placeholders/03.svg
new file mode 100644
index 0000000..eec7429
--- /dev/null
+++ b/public/images/placeholders/03.svg
@@ -0,0 +1 @@
+<svg id="visual" viewBox="0 0 900 600" width="900" height="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><path d="M0 265L82 271L164 133L245 205L327 241L409 187L491 187L573 217L655 235L736 229L818 163L900 235L900 0L818 0L736 0L655 0L573 0L491 0L409 0L327 0L245 0L164 0L82 0L0 0Z" fill="#cccccc"></path><path d="M0 325L82 331L164 271L245 349L327 307L409 253L491 259L573 343L655 319L736 301L818 247L900 319L900 233L818 161L736 227L655 233L573 215L491 185L409 185L327 239L245 203L164 131L82 269L0 263Z" fill="#a3a3a3"></path><path d="M0 463L82 451L164 451L245 415L327 493L409 451L491 499L573 433L655 415L736 439L818 427L900 427L900 317L818 245L736 299L655 317L573 341L491 257L409 251L327 305L245 347L164 269L82 329L0 323Z" fill="#7b7b7b"></path><path d="M0 529L82 487L164 511L245 505L327 559L409 487L491 553L573 481L655 493L736 529L818 511L900 469L900 425L818 425L736 437L655 413L573 431L491 497L409 449L327 491L245 413L164 449L82 449L0 461Z" fill="#565656"></path><path d="M0 601L82 601L164 601L245 601L327 601L409 601L491 601L573 601L655 601L736 601L818 601L900 601L900 467L818 509L736 527L655 491L573 479L491 551L409 485L327 557L245 503L164 509L82 485L0 527Z" fill="#333333"></path></svg>
\ No newline at end of file
diff --git a/public/images/placeholders/04.svg b/public/images/placeholders/04.svg
new file mode 100644
index 0000000..d98ec0c
--- /dev/null
+++ b/public/images/placeholders/04.svg
@@ -0,0 +1 @@
+<svg id="visual" viewBox="0 0 900 600" width="900" height="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><rect width="900" height="600" fill="#222"></rect><g><g transform="translate(228 438)"><path d="M0 -120.8L104.6 -60.4L104.6 60.4L0 120.8L-104.6 60.4L-104.6 -60.4Z" fill="none" stroke="#999" stroke-width="2"></path></g><g transform="translate(225 182)"><path d="M0 -82L71 -41L71 41L0 82L-71 41L-71 -41Z" fill="none" stroke="#999" stroke-width="2"></path></g><g transform="translate(630 373)"><path d="M0 -69L59.8 -34.5L59.8 34.5L0 69L-59.8 34.5L-59.8 -34.5Z" stroke="#999" fill="none" stroke-width="2"></path></g><g transform="translate(761 170)"><path d="M0 -60L52 -30L52 30L0 60L-52 30L-52 -30Z" stroke="#999" fill="none" stroke-width="2"></path></g><g transform="translate(481 155)"><path d="M0 -86L74.5 -43L74.5 43L0 86L-74.5 43L-74.5 -43Z" stroke="#999" fill="none" stroke-width="2"></path></g></g></svg>
\ No newline at end of file
diff --git a/public/images/placeholders/05.svg b/public/images/placeholders/05.svg
new file mode 100644
index 0000000..ead2494
--- /dev/null
+++ b/public/images/placeholders/05.svg
@@ -0,0 +1 @@
+<svg id="visual" viewBox="0 0 900 600" width="900" height="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><path d="M0 193L82 193L82 223L164 223L164 187L245 187L245 193L327 193L327 103L409 103L409 163L491 163L491 115L573 115L573 193L655 193L655 205L736 205L736 133L818 133L818 79L900 79L900 187L900 0L900 0L818 0L818 0L736 0L736 0L655 0L655 0L573 0L573 0L491 0L491 0L409 0L409 0L327 0L327 0L245 0L245 0L164 0L164 0L82 0L82 0L0 0Z" fill="#222222"></path><path d="M0 325L82 325L82 427L164 427L164 295L245 295L245 295L327 295L327 397L409 397L409 397L491 397L491 367L573 367L573 307L655 307L655 313L736 313L736 349L818 349L818 283L900 283L900 409L900 185L900 77L818 77L818 131L736 131L736 203L655 203L655 191L573 191L573 113L491 113L491 161L409 161L409 101L327 101L327 191L245 191L245 185L164 185L164 221L82 221L82 191L0 191Z" fill="#353535"></path><path d="M0 379L82 379L82 463L164 463L164 397L245 397L245 391L327 391L327 457L409 457L409 475L491 475L491 415L573 415L573 355L655 355L655 403L736 403L736 409L818 409L818 379L900 379L900 451L900 407L900 281L818 281L818 347L736 347L736 311L655 311L655 305L573 305L573 365L491 365L491 395L409 395L409 395L327 395L327 293L245 293L245 293L164 293L164 425L82 425L82 323L0 323Z" fill="#4a4a4a"></path><path d="M0 505L82 505L82 529L164 529L164 445L245 445L245 481L327 481L327 535L409 535L409 517L491 517L491 541L573 541L573 433L655 433L655 481L736 481L736 523L818 523L818 451L900 451L900 505L900 449L900 377L818 377L818 407L736 407L736 401L655 401L655 353L573 353L573 413L491 413L491 473L409 473L409 455L327 455L327 389L245 389L245 395L164 395L164 461L82 461L82 377L0 377Z" fill="#606060"></path><path d="M0 601L82 601L82 601L164 601L164 601L245 601L245 601L327 601L327 601L409 601L409 601L491 601L491 601L573 601L573 601L655 601L655 601L736 601L736 601L818 601L818 601L900 601L900 601L900 503L900 449L818 449L818 521L736 521L736 479L655 479L655 431L573 431L573 539L491 539L491 515L409 515L409 533L327 533L327 479L245 479L245 443L164 443L164 527L82 527L82 503L0 503Z" fill="#777777"></path></svg>
\ No newline at end of file
diff --git a/public/images/placeholders/06.svg b/public/images/placeholders/06.svg
new file mode 100644
index 0000000..be6e844
--- /dev/null
+++ b/public/images/placeholders/06.svg
@@ -0,0 +1 @@
+<svg id="visual" viewBox="0 0 900 600" width="900" height="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><rect width="900" height="600" fill="#999"></rect><g><g transform="translate(533 443)"><path d="M51.8 -44.1C63.2 -27 65.9 -5.7 61.8 14.9C57.8 35.5 47 55.5 30.3 63.8C13.6 72.1 -9 68.9 -28.1 59.3C-47.1 49.8 -62.5 33.8 -67.4 14.8C-72.2 -4.3 -66.4 -26.3 -53.4 -43.8C-40.4 -61.2 -20.2 -74.1 0 -74.1C20.2 -74.1 40.3 -61.2 51.8 -44.1Z" stroke="#333" fill="none" stroke-width="20"></path></g><g transform="translate(237 212)"><path d="M40.5 -31C50.9 -19.2 56.7 -2.5 53.6 12.7C50.5 27.8 38.5 41.4 23.9 47.7C9.3 53.9 -7.9 53 -24.2 46.6C-40.6 40.1 -56.1 28.2 -59.6 13.4C-63.1 -1.4 -54.7 -19.1 -42.8 -31.2C-30.8 -43.3 -15.4 -49.8 -0.2 -49.6C15 -49.5 30 -42.7 40.5 -31Z" stroke="#333" fill="none" stroke-width="20"></path></g><g transform="translate(454 167)"><path d="M39.9 -32.8C48.6 -20.9 50.4 -4.5 46.2 9.1C42 22.7 31.6 33.4 19 39.4C6.4 45.5 -8.4 46.8 -21.7 41.7C-35 36.6 -46.7 25 -48.9 12.1C-51.1 -0.7 -43.6 -14.8 -33.9 -27C-24.1 -39.2 -12.1 -49.5 1.8 -50.9C15.6 -52.3 31.2 -44.8 39.9 -32.8Z" stroke="#333" fill="none" stroke-width="20"></path></g><g transform="translate(645 265)"><path d="M55.5 -41.4C69.6 -26.5 77.2 -3.6 72.3 16C67.4 35.5 50 51.6 29.6 61.4C9.2 71.2 -14.2 74.6 -33.1 66.4C-52.1 58.2 -66.6 38.4 -69.8 17.9C-72.9 -2.7 -64.7 -23.8 -51.2 -38.6C-37.6 -53.3 -18.8 -61.6 0.9 -62.3C20.7 -63.1 41.3 -56.3 55.5 -41.4Z" stroke="#333" fill="none" stroke-width="20"></path></g><g transform="translate(775 446)"><path d="M47.7 -37.6C59.3 -23.5 64.5 -3.8 60.1 13.1C55.7 29.9 41.8 44 24.6 52.9C7.5 61.8 -13 65.6 -29.7 58.7C-46.4 51.8 -59.3 34.2 -63 15.2C-66.7 -3.8 -61.1 -24 -49 -38.3C-37 -52.5 -18.5 -60.8 -0.2 -60.6C18 -60.4 36.1 -51.8 47.7 -37.6Z" stroke="#333" fill="none" stroke-width="20"></path></g><g transform="translate(785 95)"><path d="M56.4 -45.4C68.5 -29.7 70.8 -6.5 64.8 12.8C58.8 32.1 44.6 47.6 27.6 54.8C10.7 62 -9.1 60.9 -27 53.3C-45 45.8 -61.2 31.7 -67.2 13.2C-73.1 -5.4 -68.8 -28.4 -55.9 -44.3C-43 -60.1 -21.5 -68.8 0.3 -69.1C22.1 -69.3 44.2 -61.1 56.4 -45.4Z" stroke="#333" fill="none" stroke-width="20"></path></g><g transform="translate(277 494)"><path d="M58.4 -44.6C72.3 -29.1 77.9 -5 72.8 16.3C67.6 37.5 51.8 56 31.5 66.1C11.1 76.2 -13.6 77.9 -32.4 68.4C-51.2 58.9 -64 38.2 -67.1 17.4C-70.2 -3.4 -63.5 -24.3 -50.7 -39.6C-37.9 -54.9 -18.9 -64.6 1.6 -65.9C22.2 -67.2 44.4 -60.2 58.4 -44.6Z" stroke="#333" fill="none" stroke-width="20"></path></g><g transform="translate(101 416)"><path d="M39.6 -30.4C49.9 -18.7 55.9 -2.3 52.3 11.4C48.8 25.1 35.8 36.1 21.3 42.5C6.7 48.9 -9.2 50.6 -21.9 44.7C-34.5 38.9 -43.9 25.5 -48.1 10.1C-52.3 -5.4 -51.5 -22.9 -42.6 -34.2C-33.7 -45.6 -16.9 -50.9 -1.1 -50C14.7 -49.2 29.3 -42.1 39.6 -30.4Z" stroke="#333" fill="none" stroke-width="20"></path></g></g></svg>
\ No newline at end of file
diff --git a/public/images/placeholders/07.svg b/public/images/placeholders/07.svg
new file mode 100644
index 0000000..2af61e7
--- /dev/null
+++ b/public/images/placeholders/07.svg
@@ -0,0 +1 @@
+<svg id="visual" viewBox="0 0 900 600" width="900" height="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><path d="M0 73L50 89C100 105 200 137 300 156C400 175 500 181 600 181C700 181 800 175 850 172L900 169L900 0L850 0C800 0 700 0 600 0C500 0 400 0 300 0C200 0 100 0 50 0L0 0Z" fill="#646464"></path><path d="M0 187L50 196C100 205 200 223 300 235C400 247 500 253 600 252C700 251 800 243 850 239L900 235L900 167L850 170C800 173 700 179 600 179C500 179 400 173 300 154C200 135 100 103 50 87L0 71Z" fill="#919191"></path><path d="M0 283L50 282C100 281 200 279 300 290C400 301 500 325 600 332C700 339 800 329 850 324L900 319L900 233L850 237C800 241 700 249 600 250C500 251 400 245 300 233C200 221 100 203 50 194L0 185Z" fill="#ababab"></path><path d="M0 481L50 475C100 469 200 457 300 456C400 455 500 465 600 467C700 469 800 463 850 460L900 457L900 317L850 322C800 327 700 337 600 330C500 323 400 299 300 288C200 277 100 279 50 280L0 281Z" fill="#919191"></path><path d="M0 601L50 601C100 601 200 601 300 601C400 601 500 601 600 601C700 601 800 601 850 601L900 601L900 455L850 458C800 461 700 467 600 465C500 463 400 453 300 454C200 455 100 467 50 473L0 479Z" fill="#646464"></path></svg>
\ No newline at end of file
diff --git a/public/images/placeholders/08.svg b/public/images/placeholders/08.svg
new file mode 100644
index 0000000..995dd19
--- /dev/null
+++ b/public/images/placeholders/08.svg
@@ -0,0 +1 @@
+<svg id="visual" viewBox="0 0 900 600" width="900" height="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><rect x="0" y="0" width="900" height="600" fill="#222"></rect><defs><linearGradient id="grad1_0" x1="33.3%" y1="0%" x2="100%" y2="100%"><stop offset="20%" stop-color="#222222" stop-opacity="1"></stop><stop offset="80%" stop-color="#222222" stop-opacity="1"></stop></linearGradient></defs><defs><linearGradient id="grad2_0" x1="0%" y1="0%" x2="66.7%" y2="100%"><stop offset="20%" stop-color="#222222" stop-opacity="1"></stop><stop offset="80%" stop-color="#222222" stop-opacity="1"></stop></linearGradient></defs><g transform="translate(900, 0)"><path d="M0 486.7C-60.9 466.7 -121.8 446.7 -173.4 418.5C-225 390.3 -267.3 353.9 -316.1 316.1C-364.9 278.3 -420.2 239.2 -449.7 186.3C-479.2 133.4 -483 66.7 -486.7 0L0 0Z" fill="#aaa"></path></g><g transform="translate(0, 600)"><path d="M0 -486.7C49.1 -448.4 98.2 -410.1 163 -393.6C227.9 -377 308.4 -382.2 344.2 -344.2C379.9 -306.2 370.8 -224.9 387.1 -160.3C403.4 -95.8 445.1 -47.9 486.7 0L0 0Z" fill="#aaa"></path></g></svg>
\ No newline at end of file
diff --git a/public/images/placeholders/09.svg b/public/images/placeholders/09.svg
new file mode 100644
index 0000000..2bd1635
--- /dev/null
+++ b/public/images/placeholders/09.svg
@@ -0,0 +1 @@
+<svg id="visual" viewBox="0 0 900 600" width="900" height="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><rect x="0" y="0" width="900" height="600" fill="#111"></rect><g transform="translate(452.3432295685876 318.99801093507597)"><path d="M133.1 -219.4C166 -186 181.7 -138.1 184.2 -95.1C186.7 -52.2 176 -14.2 180.9 33.6C185.8 81.3 206.2 138.9 185.7 158.9C165.2 178.9 103.8 161.4 53 172.8C2.3 184.2 -37.8 224.5 -70.7 223C-103.7 221.5 -129.7 178.2 -150.4 138.9C-171.1 99.6 -186.5 64.3 -194.4 26.4C-202.2 -11.5 -202.5 -52.1 -182.6 -78.2C-162.6 -104.4 -122.4 -116.1 -88.6 -149.2C-54.8 -182.2 -27.4 -236.6 11.4 -254.3C50.1 -272 100.2 -252.9 133.1 -219.4" fill="#999"></path></g></svg>
\ No newline at end of file
diff --git a/public/js/datetimeutils.js b/public/js/datetimeutils.js
index c84907e..6774e10 100644
--- a/public/js/datetimeutils.js
+++ b/public/js/datetimeutils.js
@@ -17,5 +17,7 @@ function datetime_to_local(input) {
 		}),
 
 		value: local_datetime.valueOf(),
+
+		ms: local_datetime.getMilliseconds(),
 	};
 }
diff --git a/public/tabs/chat/chat.js b/public/tabs/chat/chat.js
index eb6e343..e8147fb 100644
--- a/public/tabs/chat/chat.js
+++ b/public/tabs/chat/chat.js
@@ -145,14 +145,6 @@ async function load_active_topic_for_chat() {
 
 	topic_chat_content.innerHTML = "";
 
-	const topic_selectors = document.querySelectorAll("li.topic");
-	for (const topic_selector of topic_selectors) {
-		topic_selector.classList.remove("active");
-		if (topic_selector.id === `topic-selector-${topic_id}`) {
-			topic_selector.classList.add("active");
-		}
-	}
-
 	const events_response = await api.fetch(
 		`/api/topics/${topic_id}/events?type=chat&limit=100&sort=newest`,
 	);
diff --git a/public/tabs/forum/forum.html b/public/tabs/forum/forum.html
index 27d3d72..0dd3d47 100644
--- a/public/tabs/forum/forum.html
+++ b/public/tabs/forum/forum.html
@@ -1,8 +1,128 @@
 <style>
-	.forum-container {
-		padding: 2rem;
+	#forum-posts.container {
+		padding: 2rem 0.5rem;
+	}
+
+	.post-container {
+		position: relative;
+		display: grid;
+		grid-template-rows: auto auto 1fr;
+		grid-template-columns: auto auto 1fr;
+		grid-template-areas:
+			"expander preview info"
+			"expander preview subject"
+			"expander preview content";
+		max-height: 6rem;
+		padding: 1rem;
+		border: 1px solid var(--border-subtle);
+		overflow-y: hidden;
+		transition: all ease-in-out 0.33s;
+		margin-bottom: 2rem;
+	}
+
+	.post-container:has(input[name="expanded"]:checked) {
+		max-height: 40rem;
+		overflow-y: scroll;
+	}
+
+	.expand-toggle-container input[name="expanded"] {
+		display: none;
+		visibility: hidden;
+		opacity: 0;
+	}
+	.post-container:has(input[name="expanded"]) .icon.minus,
+	.post-container:has(input[name="expanded"]:checked) .icon.plus {
+		display: block;
+		opacity: 1;
+		visibility: visible;
+	}
+
+	.post-container:has(input[name="expanded"]) .icon.plus,
+	.post-container:has(input[name="expanded"]:checked) .icon.minus {
+		display: none;
+		opacity: 0;
+		visibility: hidden;
+	}
+
+	.post-container .expand-toggle-container {
+		grid-area: expander;
+		margin-right: 0.5rem;
+	}
+
+	.post-container .expand-toggle-container label {
+		display: flex;
+		align-items: center;
+		width: 22px;
+		height: 22px;
+	}
+
+	.post-container .media-preview-container {
+		grid-area: preview;
+		width: 6rem;
+		height: 4rem;
+		margin-right: 1rem;
+	}
+
+	.post-container .media-preview-container img {
+		max-width: 100%;
+		max-height: 100%;
+	}
+
+	.post-container .info-container {
+		grid-area: info;
+		display: flex;
+	}
+
+	.post-container .info-container .avatar-container {
+		display: block;
+		margin: 0.5rem;
+		width: 3rem;
+		height: 3rem;
+		border-radius: 16%;
+		overflow: hidden;
+	}
+
+	.post-container .info-container .avatar-container img {
+		width: 100%;
+	}
+
+	.post-container .info-container .username-container {
+		display: block;
+		margin: 0 0.5rem;
+		font-weight: bold;
+	}
+
+	.post-container .info-container .datetime-container {
+		display: block;
+		margin: 0 0.5rem;
+	}
+
+	.post-container .info-container .datetime-container .long {
+		font-size: x-small;
+		text-transform: uppercase;
+		visibility: hidden;
+		display: none;
+	}
+
+	.post-container .info-container .datetime-container .short {
+		font-size: xx-small;
+	}
+
+	.post-container .subject-container {
+		grid-area: subject;
+		padding-left: 5rem;
+		margin-top: -2.5rem;
+		font-size: larger;
+		font-weight: bold;
+	}
+
+	.post-container .content-container {
+		grid-area: content;
+		padding-left: 5rem;
+		margin-top: 2rem;
 	}
 </style>
+
 <div id="forum" class="tab">
 	<input
 		type="radio"
@@ -11,77 +131,186 @@
 		class="tab-switch"
 		data-view="forum"
 	/>
-	<label for="forum-tab-input" class="tab-label mockup"
+	<label for="forum-tab-input" class="tab-label"
 		><div class="icon forum"></div>
 		<div class="label">Forum</div></label
 	>
 	<div class="tab-content forum-container">
-		<div id="forum-thread-list"></div>
+		<div id="forum-posts" class="container">
+			<div id="forum-posts-list"></div>
+			<script>
+				const forum_posts_list = document.getElementById("forum-posts-list");
 
-		<div id="thread-creation-container" data-requires-permission="topics.threads.write">
+				async function render_post(post) {
+					const creator = await USERS.get(post.creator_id);
+					const existing_element =
+						document.getElementById(`post-${post.id.substring(0, 49)}`) ??
+						document.getElementById(`post-${post.meta.temp_id}`);
+					const post_datetime = datetime_to_local(post.timestamps.created);
+
+					const html_content = `<div class="post-container" data-creator_id="${creator.id}">
+						<div class="expand-toggle-container">
+							<label>
+								<input type="checkbox" name="expanded"/><i class="icon plus"></i><i class="icon minus"></i>
+							</label>
+						</div>
+
+						<div class="media-preview-container">
+							<img src="/images/placeholders/${String(post_datetime.ms % 10).padStart(2, "0")}.svg" />
+						</div>
+
+						<div class="info-container">
+							<div class="avatar-container">
+								<img src="${creator.meta?.avatar ?? "/images/default_avatar.gif"}" alt="user avatar" />
+							</div>
+							<div class="username-container">
+								<span class="username">${creator.username}</span>
+							</div>
+							<div class="datetime-container">
+								<span class="long">${post_datetime.long}</span>
+								<span class="short">${post_datetime.short}</span>
+							</div>
+						</div>
+						<div class="subject-container">${post.data.subject}</div>
+						<div class="content-container">${htmlify(post.data.content)}</div>
+					</div>`;
+
+					if (existing_element) {
+						const template = document.createElement("template");
+						template.innerHTML = html_content;
+						existing_element.replaceWith(template.content.firstChild);
+					} else {
+						forum_posts_list.insertAdjacentHTML("beforeend", html_content);
+					}
+				}
+
+				async function append_posts(posts) {
+					let last_post_id = forum_posts_list.dataset.last_post_id ?? "";
+					for await (const post of posts) {
+						// if the last post is undefined, it becomes this event, otherwise, if this event's id is newer,
+						// it becomes the latest post
+						last_post_id =
+							post.id > last_post_id && post.id.indexOf("TEMP") !== 0
+								? post.id
+								: last_post_id;
+
+						// if the last post has been updated, update the content's dataset to reflect that
+						if (last_post_id !== forum_posts_list.dataset.last_post_id) {
+							forum_posts_list.dataset.last_post_id = last_post_id;
+						}
+
+						await render_post(post);
+					}
+
+					forum_posts_list.scrollTop = 0;
+				}
+
+				// TODO: we need some abortcontroller handling here or something
+				// similar for when we change topics, this is the most basic
+				// first pass outline
+				let post_polling_abort_controller = null;
+				async function poll_for_new_posts() {
+					const forum_posts_list = document.getElementById("forum-posts-list");
+					const topic_id = document.body.dataset.topic;
+					const last_post_id = forum_posts_list.dataset.last_post_id;
+
+					if (!topic_id) {
+						return;
+					}
+
+					const message_polling_url = `/api/topics/${topic_id}/events?type=post&limit=100&sort=newest&wait=true${last_post_id ? `&after_id=${last_post_id}` : ""}`;
+
+					post_polling_abort_controller =
+						post_polling_abort_controller || new AbortController();
+
+					api.fetch(message_polling_url, {
+						signal: post_polling_abort_controller.signal,
+					})
+						.then(async (new_events_response) => {
+							const new_events = (await new_events_response.json()) ?? [];
+							await append_posts(new_events);
+							poll_for_new_posts(topic_id);
+						})
+						.catch((error) => {
+							// TODO: poll again? back off?
+							console.error(error);
+						});
+				}
+
+				async function load_active_topic_for_forum() {
+					const topic_id = document.body.dataset.topic;
+					if (!topic_id) return;
+
+					const user = document.body.dataset.user
+						? JSON.parse(document.body.dataset.user)
+						: null;
+					if (!user) return;
+
+					const forum_posts_list = document.getElementById("forum-posts-list");
+
+					if (post_polling_abort_controller) {
+						post_polling_abort_controller.abort();
+						post_polling_abort_controller = null;
+						delete forum_posts_list.dataset.last_post_id;
+					}
+
+					const topic_response = await api.fetch(`/api/topics/${topic_id}`);
+					if (!topic_response.ok) {
+						const error = await topic_response.json();
+						alert(error.message ?? JSON.stringify(error));
+						return;
+					}
+
+					const topic = await topic_response.json();
+
+					forum_posts_list.innerHTML = "";
+
+					const events_response = await api.fetch(
+						`/api/topics/${topic_id}/events?type=post&limit=100&sort=newest`,
+					);
+					if (!events_response.ok) {
+						const error = await events_response.json();
+						alert(error.message ?? JSON.stringify(error));
+						return;
+					}
+
+					const events = await events_response.json();
+
+					await append_posts(events);
+					poll_for_new_posts();
+				}
+				document.addEventListener("topic_changed", load_active_topic_for_forum);
+				document.addEventListener("user_logged_in", load_active_topic_for_forum);
+			</script>
+		</div>
+
+		<div id="post-creation-container" data-requires-permission="topics.posts.create">
 			<button
-				onclick="(() => { document.querySelector( '#thread-creation' ).classList.toggle( 'collapsed' ); })()"
-				class="mockup"
+				onclick="(() => { document.querySelector( '#post-creation' ).classList.toggle( 'collapsed' ); })()"
 			>
-				<i class="icon plus" style="display: inline-block; margin-right: 1rem"></i>New
-				Thread
+				<i class="icon plus" style="display: inline-block; margin-right: 1rem"></i>New Post
 			</button>
 			<form
-				id="thread-creation"
+				id="post-creation"
 				data-smart="true"
-				action="/api/topics"
 				method="POST"
-				class="collapsed mockup"
+				class="collapsed"
 				style="
-					margin-top: 1rem;
+					margin-top: 1rem
 					width: 100%;
 					overflow: hidden;
 					overflow: hidden;
 					transition: all 0.5s;
 				"
 			>
-				<input
-					id="new-thread-subject"
-					type="text"
-					name="data.subject"
-					value=""
-					placeholder="Thread subject..."
-					style="margin-bottom: 1rem"
-					class="mockup"
-				/>
-
-				<input
-					id="file-upload-and-share-input-for-thread"
-					aria-label="Upload and share file"
-					type="file"
-					multiple
-				/>
-				<label for="file-upload-and-share-input-for-thread" class="mockup">
-					<div class="icon attachment"></div>
-				</label>
-
-				<textarea
-					id="new-thread-content"
-					type="text"
-					name="data.content"
-					value=""
-					placeholder=" ... "
-					class="mockup"
-				></textarea>
-
-				<input type="submit" hidden />
 				<script>
-					{
-						const form = document.currentScript.closest("form");
-						const file_input = document.querySelector('input[type="file"]');
-						const subject_input = document.getElementById('input[name="subject"]');
-						const content_input = document.getElementById('input[name="content"]');
+					const form = document.currentScript.closest("form");
 
-						const parent_id_input = document.getElementById("parent-id");
-
-						const forum_thread_list = document.getElementById("forum-thread-list");
-
-						let threads_in_flight = {};
+					document.addEventListener("DOMContentLoaded", () => {
+						const file_input = form.querySelector('input[type="file"]');
+						const subject_input = form.querySelector('[name="data.subject"]');
+						const content_input = form.querySelector('[name="data.content"]');
+						const parent_id_input = form.querySelector('[name="parent_id"]');
 
 						form.on_submit = async (event) => {
 							const user = JSON.parse(document.body.dataset.user);
@@ -120,8 +349,10 @@
 								return false;
 							}
 
-							const message = chat_input.value.trim();
-							if (form.uploaded_urls.length === 0 && message.length === 0) {
+							const subject = subject_input.value.trim();
+							const content = content_input.value.trim();
+
+							if (subject.length === 0) {
 								return false;
 							}
 
@@ -133,7 +364,7 @@
 
 							const temp_id = `TEMP-${now}`;
 							json.id = temp_id;
-							json.type = "chat";
+							json.type = "post";
 							json.meta = {
 								temp_id,
 							};
@@ -141,9 +372,9 @@
 								created: now,
 								updated: now,
 							};
+							json.data = json.data ?? {};
 
 							if (form.uploaded_urls.length) {
-								json.data = json.data ?? {};
 								json.data.content =
 									(typeof json.data.content === "string" &&
 									json.data.content.trim().length
@@ -151,29 +382,58 @@
 										: "") + form.uploaded_urls.join("\n");
 							}
 
-							const user = JSON.parse(document.body.dataset.user);
-							render_text_event(topic_chat_content, json, user);
-							document.getElementById(`chat-${temp_id}`)?.classList.add("sending");
+							render_post(json);
+							document.getElementById(`post-${temp_id}`)?.classList.add("sending");
 						};
 
 						form.on_error = (error) => {
 							// TODO: mark the temporary message element with the failed class?
 							alert(error);
-							chat_input.focus();
+							content_input.focus();
 						};
 
-						form.on_reply = (sent_message) => {
-							document
-								.getElementById(`chat-${sent_message.meta?.temp_id ?? ""}`)
-								?.classList.remove("sending");
+						form.on_reply = (post) => {
+							const post_id = `post-${post.meta?.temp_id ?? ""}`;
+							document.getElementById(post_id)?.classList.remove("sending");
 
-							append_topic_events([sent_message]);
+							append_posts([post]);
 							parent_id_input.value = "";
-							chat_input.value = "";
-							chat_input.focus();
+							subject_input.value = "";
+							content_input.value = "";
 						};
-					}
+					});
 				</script>
+
+				<input type="hidden" name="parent_id" value="" />
+
+				<input
+					id="new-thread-subject"
+					type="text"
+					name="data.subject"
+					value=""
+					placeholder="Thread subject..."
+					style="margin-bottom: 1rem"
+				/>
+
+				<input
+					id="file-upload-and-share-input-for-thread"
+					aria-label="Upload and share file"
+					type="file"
+					multiple
+				/>
+				<label for="file-upload-and-share-input-for-thread">
+					<div class="icon attachment"></div>
+				</label>
+
+				<textarea
+					id="new-thread-content"
+					type="text"
+					name="data.content"
+					value=""
+					placeholder=" ... "
+				></textarea>
+
+				<input type="submit" value="Post" />
 			</form>
 		</div>
 	</div>