diff --git a/client/components/app/SettingsContent.vue b/client/components/app/SettingsContent.vue
new file mode 100644
index 000000000..df079711a
--- /dev/null
+++ b/client/components/app/SettingsContent.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="bg-bg rounded-md shadow-lg border border-white border-opacity-5 p-4 mb-8">
+    <div class="flex items-center mb-2">
+      <h1 class="text-xl">{{ headerText }}</h1>
+
+      <div v-if="showAddButton" class="mx-2 w-7 h-7 flex items-center justify-center rounded-full cursor-pointer hover:bg-white hover:bg-opacity-10 text-center" @click="clicked">
+        <span class="material-icons" style="font-size: 1.4rem">add</span>
+      </div>
+    </div>
+
+    <p v-if="description" id="description" class="mb-6 text-gray-200" v-html="description" />
+
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    headerText: String,
+    description: String,
+    note: String,
+    showAddButton: Boolean
+  },
+  methods: {
+    clicked() {
+      this.$emit('clicked');
+    }
+  }
+}
+</script>
+
+<style>
+#description a {
+  color: rgb(96 165 250);
+}
+#description a:hover {
+  color: rgb(147 197 253);
+  text-decoration-line: underline;
+}
+#description code {
+  font-size: 0.875rem;
+  border-radius: 6px;
+  background-color: rgb(82, 82, 82);
+  color: white;
+  padding: 2px 4px;
+}
+</style>
\ No newline at end of file