diff --git a/css/sideMenu.css b/css/sideMenu.css
index 930a82e..63f72a9 100644
--- a/css/sideMenu.css
+++ b/css/sideMenu.css
@@ -21,7 +21,7 @@
   left: 0;
   height: 100vh;
   width: 100%;
-  max-width: 250px;
+  max-width: 290px;
   background: linear-gradient(90deg, var(--side-menu-background-color, #333) 0%, var(--side-menu-background-color-to, #333) 100%);
   z-index: 3000;
   color: var(--side-menu-text-color, #fff);
@@ -103,27 +103,19 @@
   position: fixed;
   top: 150px;
   width: 100%;
-  max-width: 250px;
+  max-width: 290px;
   overflow: auto;
 }
 
 .side-menu-app-icon {
   width: 20px;
-  vertical-align: top;
+  vertical-align: middle;
+  margin-top: -4px;
   margin-right: 10px;
   filter: invert(var(--side-menu-icon-invert-filter, 0%));
   opacity: var(--side-menu-icon-opacity, 1);
 }
 
-.side-menu-app-icon svg {
-  vertical-align: middle;
-  margin-top: -3px;
-}
-
-.side-menu-app-icon .app-icon-notification {
-  display: none;
-}
-
 .side-menu-app a {
   line-height: 30px;
   color: var(--side-menu-text-color, #fff);
@@ -151,7 +143,7 @@
   height: 150px;
   width: 100%;
   z-index: 2300;
-  max-width: 250px;
+  max-width: 290px;
   position: fixed;
   padding-top: 2px;
   top: 0;
diff --git a/src/SideMenu.vue b/src/SideMenu.vue
index 2450967..65707ef 100644
--- a/src/SideMenu.vue
+++ b/src/SideMenu.vue
@@ -59,6 +59,7 @@ import OpenerButton from './OpenerButton'
 import SettingsButton from './SettingsButton'
 import SideMenuApp from './SideMenuApp'
 import Logo from './Logo'
+import { loadState } from '@nextcloud/initial-state'
 
 export default {
   name: 'SideMenu',
@@ -81,89 +82,31 @@ export default {
   },
   methods: {
     retrieveApps() {
-      this.apps = []
-      const links = document.querySelectorAll('#appmenu a')
-      const menu = document.querySelector('#appmenu')
-      let menuIsHidden = true
+      this.apps = loadState('core', 'apps', {})
 
-      if (menu) {
-        menuIsHidden = window.getComputedStyle(menu, null).getPropertyValue('display') === 'none'
-      }
-
-      for (let element of links) {
-        let href = element.getAttribute('href')
-        let parent = element.parentNode
-
-        if (!parent) {
-          continue
-        }
-
-        let dataId = parent.getAttribute('data-id')
-        dataId = dataId !== null ? dataId : ''
-
-        if (!parent.classList.contains('app-top-side-menu') && !parent.classList.contains('app-hidden') && !menuIsHidden) {
-          continue
-        }
-
-        if (href !== '#') {
-          let svg = element.querySelector('svg').outerHTML
-
-          svg = svg
-            .replace(/(height|width)="20"/, '')
-            .replace('id="invertMenuMain', 'id="invertSideMenu')
-            .replace('url(#invertMenuMain', 'url(#invertSideMenu')
-
-          if (this.forceLightIcon) {
-            svg = svg.replace(/filter="url[^"]+"/, '')
-          }
-
-          this.apps.push({
-            id: dataId,
-            href: href,
-            name: trim(element.querySelector('span').innerHTML),
-            icon: svg,
-            active: element.classList.contains('active')
-          })
-        }
-      }
-
-      (function(apps) {
-        window.setTimeout(function() {
-          document.querySelector('body').dispatchEvent(new CustomEvent('side-menu.apps', {
-            detail: {apps: apps},
-          }))
-        }, 1000)
-      })(this.apps)
+      document.querySelector('body').dispatchEvent(new CustomEvent('side-menu.apps', {
+        detail: {apps: this.apps},
+      }))
     },
 
     retrieveConfig() {
-      let that = this
-
       axios
         .get(OC.generateUrl('/apps/side_menu/js/config'))
-        .then(function(response) {
+        .then((response) => {
           const config = response.data
 
-          that.targetBlankApps = config['target-blank-apps']
-          that.forceLightIcon = config['force-light-icon']
-          that.avatar = config['avatar']
-          that.logo = config['logo']
-          that.logoLink = config['logo-link']
-          that.settings = config['settings']
+          this.targetBlankApps = config['target-blank-apps']
+          this.forceLightIcon = config['force-light-icon']
+          this.avatar = config['avatar']
+          this.logo = config['logo']
+          this.logoLink = config['logo-link']
+          this.settings = config['settings']
         })
     },
   },
   mounted() {
     this.retrieveConfig()
     this.retrieveApps()
-
-    const menu = document.querySelector('#appmenu')
-
-    if (menu) {
-      const config = {attributes: true, childList: true, subtree: true}
-      const observer = new MutationObserver(this.retrieveApps)
-      observer.observe(menu, config)
-    }
   }
 }
 </script>
diff --git a/src/SideMenuApp.vue b/src/SideMenuApp.vue
index 85ad969..c910dce 100644
--- a/src/SideMenuApp.vue
+++ b/src/SideMenuApp.vue
@@ -17,7 +17,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 <template>
   <li v-bind:class="classes">
     <a v-bind:href="href" :target="target" v-bind:title="label">
-      <span class="side-menu-app-icon" v-html="icon"></span>
+      <img class="side-menu-app-icon" v-bind:src="icon" v-bind:alt="label" />
       <span class="side-menu-app-text" v-text="label"></span>
     </a>
   </li>