diff --git a/dashboard/src/components/Applinks.vue b/dashboard/src/components/Applinks.vue
new file mode 100644
index 000000000..614ef3f07
--- /dev/null
+++ b/dashboard/src/components/Applinks.vue
@@ -0,0 +1,37 @@
+<script setup>
+
+import { inject, useTemplateRef } from 'vue';
+import { Button, FormGroup } from '@cloudron/pankow';
+import ApplinkDialog from './ApplinkDialog.vue';
+import Section from './Section.vue';
+import SettingsItem from './SettingsItem.vue';
+
+const features = inject('features');
+
+const applinkDialog = useTemplateRef('applinkDialog');
+
+function onAddExternalLink() {
+  applinkDialog.value.open();
+}
+
+function onApplinkAdded() {
+  window.location.href = '#/apps';
+}
+
+</script>
+
+<template>
+  <ApplinkDialog ref="applinkDialog" @success="onApplinkAdded"/>
+
+  <Section :title="$t('dashboard.title')">
+    <SettingsItem>
+    <FormGroup>
+      <label>{{ $t('externallinks.label') }}</label>
+      <div>{{  $t('externallinks.description') }}</div>
+    </FormGroup>
+    <div style="display: flex; position: relative; align-items: center">
+      <Button tool plain @click="onAddExternalLink()" :disabled="!features.branding">{{ $t('main.action.add') }}</Button>
+    </div>
+    </SettingsItem>
+  </Section>
+</template>
diff --git a/dashboard/src/components/Branding.vue b/dashboard/src/components/Branding.vue
new file mode 100644
index 000000000..8e805e758
--- /dev/null
+++ b/dashboard/src/components/Branding.vue
@@ -0,0 +1,97 @@
+<script setup>
+
+import { ref, onMounted, inject } from 'vue';
+import { API_ORIGIN } from '../constants.js';
+import Section from './Section.vue';
+import SettingsItem from './SettingsItem.vue';
+import EditableField from './EditableField.vue';
+import ImagePicker from './ImagePicker.vue';
+import BrandingModel from '../models/BrandingModel.js';
+import DashboardModel from '../models/DashboardModel.js';
+
+const brandingModel = BrandingModel.create();
+const dashboardModel = DashboardModel.create();
+
+const avatarUrl = ref(`${API_ORIGIN}/api/v1/cloudron/avatar?${String(Math.random()).slice(2)}`);
+const backgroundUrl = ref(`${API_ORIGIN}/api/v1/cloudron/background?${String(Math.random()).slice(2)}`);
+
+const features = inject('features');
+
+const name = ref('');
+const savingName = ref(false);
+
+async function onNameSave(newName) {
+  savingName.value = true;
+
+  const [error] = await brandingModel.setName(newName);
+  savingName.value = false;
+  if (error) return console.error(error);
+
+  name.value = newName;
+}
+
+async function onAvatarSubmit(file) {
+  const [error] = await brandingModel.setAvatar(file);
+  if (error) return console.error(error);
+}
+
+async function onBackgroundSubmit(file) {
+  const [error] = await brandingModel.setBackground(file);
+  if (error) return console.error(error);
+}
+
+async function onBackgroundUnset() {
+  const [error] = await brandingModel.unsetBackground();
+  if (error) return console.error(error);
+  backgroundUrl.value = '';
+}
+
+// Footer
+const footer = ref('');
+const savingFooter = ref(false);
+
+async function onFooterSave(newFooter) {
+  savingFooter.value = true;
+
+  const [error] = await brandingModel.setFooter(newFooter);
+  savingFooter.value = false;
+  if (error) return console.error(error);
+
+  footer.value = newFooter;
+}
+
+onMounted(async () => {
+  let [error, result] = await dashboardModel.config();
+  if (error) return console.error(error);
+  name.value = result.cloudronName;
+
+  [error, result] = await brandingModel.getFooter();
+  if (error) return console.error(error);
+  footer.value = result;
+});
+
+</script>
+
+<template>
+  <Section :title="$t('branding.title')" :title-badge="!features.branding ? 'Upgrade' : ''">
+    <div style="display: flex; justify-content: space-around; margin-bottom: 20px;">
+    <div style="display: flex; flex-direction: column; align-content: stretch; align-items: center;">
+      <label>{{ $t('branding.logo') }}</label>
+      <ImagePicker mode="editable" :src="avatarUrl" :save-handler="onAvatarSubmit" :size="512" display-height="128px" :disabled="!features.branding"/>
+    </div>
+
+    <div style="display: flex; flex-direction: column; align-content: stretch; align-items: center;">
+      <label>{{ $t('branding.backgroundImage') }}</label>
+      <ImagePicker mode="editable" :src="backgroundUrl" :save-handler="onBackgroundSubmit" :unset-handler="onBackgroundUnset" :disabled="!features.branding" fallback-src="/img/background-image-placeholder.svg" display-height="128px" :max-size="1280"/>
+    </div>
+    </div>
+
+    <SettingsItem>
+      <EditableField :label="$t('branding.cloudronName')" :saving="savingName" :value="name" :disabled="!features.branding" @save="onNameSave"/>
+    </SettingsItem>
+
+    <SettingsItem>
+      <EditableField :label="$t('branding.footer.title')" helpUrl="https://docs.cloudron.io/branding/#footer" multiline markdown :saving="savingFooter" :value="footer" :disabled="!features.branding" @save="onFooterSave"/>
+    </SettingsItem>
+  </Section>
+</template>
diff --git a/dashboard/src/views/AppearanceView.vue b/dashboard/src/views/AppearanceView.vue
index 675f79b32..be2be69b8 100644
--- a/dashboard/src/views/AppearanceView.vue
+++ b/dashboard/src/views/AppearanceView.vue
@@ -1,125 +1,13 @@
 <script setup>
 
-import { ref, onMounted, inject, useTemplateRef } from 'vue';
-import { Button, FormGroup } from '@cloudron/pankow';
-import { API_ORIGIN } from '../constants.js';
-import ApplinkDialog from '../components/ApplinkDialog.vue';
-import Section from '../components/Section.vue';
-import SettingsItem from '../components/SettingsItem.vue';
-import EditableField from '../components/EditableField.vue';
-import ImagePicker from '../components/ImagePicker.vue';
-import BrandingModel from '../models/BrandingModel.js';
-import DashboardModel from '../models/DashboardModel.js';
-
-const brandingModel = BrandingModel.create();
-const dashboardModel = DashboardModel.create();
-
-const avatarUrl = ref(`${API_ORIGIN}/api/v1/cloudron/avatar?${String(Math.random()).slice(2)}`);
-const backgroundUrl = ref(`${API_ORIGIN}/api/v1/cloudron/background?${String(Math.random()).slice(2)}`);
-
-const features = inject('features');
-
-const name = ref('');
-const savingName = ref(false);
-
-async function onNameSave(newName) {
-  savingName.value = true;
-
-  const [error] = await brandingModel.setName(newName);
-  savingName.value = false;
-  if (error) return console.error(error);
-
-  name.value = newName;
-}
-
-async function onAvatarSubmit(file) {
-  const [error] = await brandingModel.setAvatar(file);
-  if (error) return console.error(error);
-}
-
-async function onBackgroundSubmit(file) {
-  const [error] = await brandingModel.setBackground(file);
-  if (error) return console.error(error);
-}
-
-async function onBackgroundUnset() {
-  const [error] = await brandingModel.unsetBackground();
-  if (error) return console.error(error);
-  backgroundUrl.value = '';
-}
-
-// Footer
-const footer = ref('');
-const savingFooter = ref(false);
-
-async function onFooterSave(newFooter) {
-  savingFooter.value = true;
-
-  const [error] = await brandingModel.setFooter(newFooter);
-  savingFooter.value = false;
-  if (error) return console.error(error);
-
-  footer.value = newFooter;
-}
-
-const applinkDialog = useTemplateRef('applinkDialog');
-
-function onAddExternalLink() {
-  applinkDialog.value.open();
-}
-
-function onApplinkAdded() {
-  window.location.href = '#/apps';
-}
-
-onMounted(async () => {
-  let [error, result] = await dashboardModel.config();
-  if (error) return console.error(error);
-  name.value = result.cloudronName;
-
-  [error, result] = await brandingModel.getFooter();
-  if (error) return console.error(error);
-  footer.value = result;
-});
+import Branding from '../components/Branding.vue';
+import Applinks from '../components/Applinks.vue';
 
 </script>
 
 <template>
   <div class="content">
-    <ApplinkDialog ref="applinkDialog" @success="onApplinkAdded"/>
-
-    <Section :title="$t('appearance.title')" :title-badge="!features.branding ? 'Upgrade' : ''">
-      <div style="display: flex; justify-content: space-around; margin-bottom: 20px;">
-        <div style="display: flex; flex-direction: column; align-content: stretch; align-items: center;">
-          <label>{{ $t('branding.logo') }}</label>
-          <ImagePicker mode="editable" :src="avatarUrl" :save-handler="onAvatarSubmit" :size="512" display-height="128px" :disabled="!features.branding"/>
-        </div>
-
-        <div style="display: flex; flex-direction: column; align-content: stretch; align-items: center;">
-          <label>{{ $t('branding.backgroundImage') }}</label>
-          <ImagePicker mode="editable" :src="backgroundUrl" :save-handler="onBackgroundSubmit" :unset-handler="onBackgroundUnset" :disabled="!features.branding" fallback-src="/img/background-image-placeholder.svg" display-height="128px" :max-size="1280"/>
-        </div>
-      </div>
-
-      <SettingsItem>
-        <EditableField :label="$t('branding.cloudronName')" :saving="savingName" :value="name" :disabled="!features.branding" @save="onNameSave"/>
-      </SettingsItem>
-
-      <SettingsItem>
-        <EditableField :label="$t('branding.footer.title')" helpUrl="https://docs.cloudron.io/branding/#footer" multiline markdown :saving="savingFooter" :value="footer" :disabled="!features.branding" @save="onFooterSave"/>
-      </SettingsItem>
-    </Section>
-
-    <Section :title="$t('dashboard.title')">
-      <SettingsItem>
-        <FormGroup>
-          <label>{{ $t('externallinks.label') }}</label>
-          <div>{{  $t('externallinks.description') }}</div>
-        </FormGroup>
-        <div style="display: flex; position: relative; align-items: center">
-          <Button tool plain @click="onAddExternalLink()" :disabled="!features.branding">{{ $t('main.action.add') }}</Button>
-        </div>
-      </SettingsItem>
-    </Section>
+    <Branding />
+    <Applinks />
   </div>
 </template>