diff --git a/example/gotosocial/css/night-owl.css b/example/gotosocial/css/night-owl.css
new file mode 100644
index 0000000..949c949
--- /dev/null
+++ b/example/gotosocial/css/night-owl.css
@@ -0,0 +1,129 @@
+/*
+ * NIGHT OWL CSS THEME FOR GOTOSOCIAL
+ *
+ * -- Background Image --
+ *
+ * The background image is called 'Photo of Starry Night'
+ * which you can download from Pexels here:
+ * https://www.pexels.com/photo/photo-of-starry-night-1421903/
+ *
+ * To use the background image download it from Pexels and
+ * place it in the web assets directory as background.jpg.
+ *
+ * -- Font --
+ *
+ * Karla can be found in found in Google Fonts here:
+ * https://fonts.google.com/specimen/Karla
+ *
+ * To use the font download a copy from Google Fonts,
+ * extract the TTF file and place it in the web assets/fonts
+ * directory.
+ *
+*/
+
+:root {
+  --night-owl-bg: #0d0e0fd9;
+  --night-owl-text: #c1c1e7;
+  --night-owl-link-default-fg: #5198c6;
+  --night-owl-link-hover-fg: #9eecf7;
+  --night-owl-light-purple: #3d46b9;
+  --night-owl-dark-purple: #222333;
+  --night-owl-green: #1fdaa0;
+  --night-owl-button-light: var(--night-owl-green);
+  --night-owl-button-dark: #000910;
+
+  --avatar-border: var(--night-owl-dark-purple);
+}
+
+@font-face {
+  font-family: "Karla";
+  src: url("/assets/fonts/Karla-VariableFont_wght.ttf") format("truetype");
+}
+
+html, body {
+    scrollbar-color: var(--night-owl-light-purple) var(--night-owl-dark-purple);
+}
+
+.page {
+  background-image: url("/assets/background.jpg");
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  font-family: "Karla", sans-serif;
+  font-weight: 400;
+  font-size: 16px;
+}
+
+.profile .header {
+  background: linear-gradient(#6d9fef, 30%, #000000);
+}
+
+.profile .col-header {
+  background: linear-gradient(#545454, 5%, #0E0E0E);
+}
+
+.profile .column-split {
+  gap: 1rem;
+}
+
+.profile .about-user .fields .field:first-child {
+  border-top: none;
+}
+
+.profile .about-user .fields .field {
+  padding: 0.5rem;
+  border-style: none none dotted none;
+  border-width: 0.1rem;
+}
+
+.profile .about-user .fields,
+.profile .about-user .bio,
+.profile .about-user .accountstats,
+.profile .toots .toot,
+.profile .toots .toot .info,
+.toot.expanded,
+.toot.expanded .info {
+  background: var(--night-owl-bg);
+}
+
+.profile .toots .toot {
+  border: none;
+}
+
+.toot:only-child {
+  border: none;
+  box-shadow: 5px 5px 5px black;
+}
+
+.role.admin {
+  border: none !important;
+  color: var(--night-owl-green) !important;
+  background-color: transparent !important;
+}
+
+a:link, a:visited {
+  color: var(--night-owl-link-default-fg);
+  text-decoration: none;
+}
+
+a:hover, a:active {
+  color: var(--night-owl-link-hover-fg);
+}
+
+.page footer #version:before {
+  content: 'Powered by: ';
+}
+
+.button {
+  background-color: var(--night-owl-button-dark);
+  color: var(--night-owl-button-light);
+  border: none;
+  box-shadow: none;
+  transition: 0.5s
+}
+
+.button:hover {
+  background-color: var(--night-owl-button-light);
+  color: var(--night-owl-button-dark);
+  transition: 0.5s
+}