diff --git a/src/components/StaticPage.vue b/src/components/StaticPage.vue
new file mode 100644
index 0000000..8743d88
--- /dev/null
+++ b/src/components/StaticPage.vue
@@ -0,0 +1,60 @@
+<template>
+  <div class="page">
+    <div class="page-content">
+      <router-link class="back" to="/" title="Back">
+        <img :src="require('@/assets/feather/arrow-left.svg')">
+      </router-link>
+      <h1><slot name="heading"></slot></h1>
+      <div class="static-text"><slot name="text"></slot></div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@import "../styles/layout";
+@import "../styles/theme";
+
+.page {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: row;
+  gap: $content-gap;
+  margin: 0 auto;
+  max-width: $wide-content-width + $content-gap + $wide-sidebar-width;
+  padding-top: 20vh;
+}
+
+.page-content {
+  max-width: $wide-content-width;
+  min-width: 0;
+}
+
+.back {
+  position: absolute;
+  top: $body-padding;
+
+  img {
+    filter: $text-colorizer;
+    width: 40px;
+  }
+}
+
+h1 {
+  font-size: 90px;
+  font-weight: bold;
+  margin: 0 0 20px;
+  text-transform: uppercase;
+  word-wrap: break-word;
+}
+
+.static-text {
+  font-size: 24px;
+  line-height: 1.75;
+}
+
+@media screen and (max-width: $screen-breakpoint-small) {
+  .page {
+    padding-top: $content-gap;
+  }
+}
+</style>
diff --git a/src/views/AboutPublic.vue b/src/views/AboutPublic.vue
index 8de8d1e..a4e23bd 100644
--- a/src/views/AboutPublic.vue
+++ b/src/views/AboutPublic.vue
@@ -1,85 +1,18 @@
 <template>
-  <div class="about-page">
-    <div class="about" v-if="instance">
-      <router-link class="back" to="/" title="Back">
-        <img :src="require('@/assets/feather/arrow-left.svg')">
-      </router-link>
-      <h1>{{ instance.title }}</h1>
-      <div class="description static-text" v-html="renderMarkdown(instance.description)"></div>
-    </div>
-  </div>
+  <static-page v-if="instance">
+    <template #heading>{{ instance.title }}</template>
+    <template #text>
+      <div v-html="renderMarkdown(instance.description)"></div>
+    </template>
+  </static-page>
 </template>
 
-<script lang="ts">
-import { Vue, setup } from "vue-class-component"
+<script setup lang="ts">
+import { $ } from "vue/macros"
 
-import { InstanceInfo } from "@/api/instance"
+import StaticPage from "@/components/StaticPage.vue"
 import { useInstanceInfo } from "@/store/instance"
 import { renderMarkdown } from "@/utils/markdown"
 
-export default class AboutPublicPage extends Vue {
-
-  private store = setup(() => {
-    const { instance } = useInstanceInfo()
-    return { instance }
-  })
-
-  get instance(): InstanceInfo | null {
-    return this.store.instance
-  }
-
-  renderMarkdown(description: string): string {
-    return renderMarkdown(description)
-  }
-
-}
+const { instance } = $(useInstanceInfo())
 </script>
-
-<style scoped lang="scss">
-@import "../styles/layout";
-@import "../styles/theme";
-
-.about-page {
-  align-items: flex-start;
-  display: flex;
-  flex-direction: row;
-  gap: $content-gap;
-  margin: 0 auto;
-  max-width: $wide-content-width + $content-gap + $wide-sidebar-width;
-  padding-top: 20vh;
-}
-
-.about {
-  max-width: $wide-content-width;
-  min-width: 0;
-}
-
-.back {
-  position: absolute;
-  top: $body-padding;
-
-  img {
-    filter: $text-colorizer;
-    width: 40px;
-  }
-}
-
-h1 {
-  font-size: 90px;
-  font-weight: bold;
-  margin: 0 0 20px;
-  text-transform: uppercase;
-  word-wrap: break-word;
-}
-
-.description {
-  font-size: 24px;
-  line-height: 1.75;
-}
-
-@media screen and (max-width: $screen-breakpoint-small) {
-  .about-page {
-    padding-top: $content-gap;
-  }
-}
-</style>