diff --git a/dashboard/src/Index.vue b/dashboard/src/Index.vue
index 01e3cf1d8..907232ee9 100644
--- a/dashboard/src/Index.vue
+++ b/dashboard/src/Index.vue
@@ -7,6 +7,7 @@ import { redirectIfNeeded } from './utils.js';
 import ProfileModel from './models/ProfileModel.js';
 import ProvisionModel from './models/ProvisionModel.js';
 import DashboardModel from './models/DashboardModel.js';
+import BrandingModel from './models/BrandingModel.js';
 import Headerbar from './components/Headerbar.vue';
 import OfflineOverlay from './components/OfflineOverlay.vue';
 import AppsView from './views/AppsView.vue';
@@ -98,6 +99,7 @@ const subscription = ref({
   plan: {},
 });
 const config = ref({});
+const avatarUrl = ref('');
 
 function onSidebarClose() {
   sidebar.value.close();
@@ -164,6 +166,16 @@ function onHashChange() {
   }
 }
 
+BrandingModel.onChange(BrandingModel.KEYS.NAME, (value) => {
+  window.document.title = value;
+  config.value.cloudronName = value;
+});
+
+BrandingModel.onChange(BrandingModel.KEYS.AVATAR, (value) => {
+  avatarUrl.value = value;
+  document.getElementById('favicon').href = value;
+});
+
 onMounted(async () => {
   let [error, result] = await provisionModel.status();
   if (error) return console.error(error);
@@ -187,7 +199,7 @@ onMounted(async () => {
   if (error) return console.error(error);
   config.value = result;
 
-  // TODO need to be reactive when name or icon changes
+  avatarUrl.value = `https://${config.value.adminFqdn}/api/v1/cloudron/avatar`;
   window.document.title = result.cloudronName;
   document.getElementById('favicon').href = `${API_ORIGIN}/api/v1/cloudron/avatar?ts=${Date.now()}`;
 
@@ -212,7 +224,7 @@ onMounted(async () => {
         <!-- <Sidebar :profile="profile" :config="config"/> -->
         <SideBar v-if="profile.isAtLeastUserManager" ref="sidebar">
           <a href="#/" class="sidebar-logo" @click="onSidebarClose()">
-            <img :src="`https://${config.adminFqdn}/api/v1/cloudron/avatar`" width="40" height="40"/> {{ config.cloudronName || 'Cloudron' }}
+            <img :src="avatarUrl" width="40" height="40"/> {{ config.cloudronName || 'Cloudron' }}
           </a>
           <div class="sidebar-list">
             <a class="sidebar-item" :class="{ active: activeSidebarItem === 'apps' }" href="#/apps" @click="onSidebarClose()"><i class="fa fa-grip fa-fw"></i> {{ $t('apps.title') }}</a>
diff --git a/dashboard/src/models/BrandingModel.js b/dashboard/src/models/BrandingModel.js
index 0c5d124f8..c29700daf 100644
--- a/dashboard/src/models/BrandingModel.js
+++ b/dashboard/src/models/BrandingModel.js
@@ -2,6 +2,29 @@
 import { fetcher } from 'pankow';
 import { API_ORIGIN } from '../constants.js';
 
+const changeHandlers = {};
+const KEYS = {
+  NAME: 'name',
+  FOOTER: 'footer',
+  BACKGROUND: 'background', // only returns a URI with cachebusting
+  AVATAR: 'avatar',         // only returns a URI with cachebusting
+};
+
+function notifyChange(key, value) {
+  console.log('notifying for ', key, value, changeHandlers)
+  const listener = changeHandlers[key] || [];
+  listener.forEach(h => h(value));
+}
+
+// key is one of KEYS
+function onChange(key, handler) {
+  if (typeof handler !== 'function') return;
+
+  if (!changeHandlers[key]) changeHandlers[key] = [];
+
+  changeHandlers[key].push(handler);
+}
+
 function create() {
   const accessToken = localStorage.token;
 
@@ -26,6 +49,9 @@ function create() {
       }
 
       if (error || result.status !== 200) return [error || result];
+
+      notifyChange(KEYS.FOOTER, footer);
+
       return [null];
     },
     async setName(name) {
@@ -37,6 +63,9 @@ function create() {
       }
 
       if (error || result.status !== 200) return [error || result];
+
+      notifyChange(KEYS.NAME, name);
+
       return [null];
     },
     async setBackground(image) {
@@ -52,6 +81,9 @@ function create() {
       }
 
       if (error || result.status !== 202) return [error || result];
+
+      notifyChange(KEYS.BACKGROUND, `${API_ORIGIN}/api/v1/cloudron/background?ts=${Date.now()}`);
+
       return [null];
     },
     async setAvatar(image) {
@@ -67,11 +99,16 @@ function create() {
       }
 
       if (error || result.status !== 200) return [error || result];
+
+      notifyChange(KEYS.AVATAR, `${API_ORIGIN}/api/v1/cloudron/avatar?ts=${Date.now()}`);
+
       return [null];
     },
   };
 }
 
 export default {
+  KEYS,
+  onChange,
   create,
 };