diff --git a/changelog/unreleased/branded-sidebar b/changelog/unreleased/branded-sidebar
new file mode 100644
index 00000000000..a1c78a7e027
--- /dev/null
+++ b/changelog/unreleased/branded-sidebar
@@ -0,0 +1,6 @@
+Change: Permanently visible branded left navigation sidebar
+
+We've made left navigation sidebar permanently visible and moved branding (logo and brand color) into it.
+
+https://github.com/owncloud/phoenix/issues/3395
+https://github.com/owncloud/phoenix/pull/3442
\ No newline at end of file
diff --git a/src/Phoenix.vue b/src/Phoenix.vue
index 77aef0e60df..79b4999cdb0 100644
--- a/src/Phoenix.vue
+++ b/src/Phoenix.vue
@@ -1,30 +1,35 @@
 <template>
-  <div>
+  <div class="uk-height-1-1">
     <skip-to target="main">Skip to main</skip-to>
     <div id="Phoenix" class="uk-height-1-1">
       <template v-if="!showHeader">
-        <router-view name="fullscreen"></router-view>
+        <router-view name="fullscreen" />
       </template>
-      <template v-else>
-        <message-bar :active-messages="activeMessages" @deleteMessage="$_deleteMessage" />
-        <top-bar
-          :applications-list="$_applicationsList"
-          :active-notifications="activeNotifications"
-          :user-id="user.id"
-          :user-display-name="user.displayname"
-          :has-app-navigation="appNavigationEntries.length > 1"
-          @toggleAppNavigationVisibility="toggleAppNavigationVisibility"
+      <div v-else key="core-content" class="uk-height-1-1 uk-flex uk-flex-row uk-flex-row">
+        <oc-sidebar
+          class="oc-app-navigation"
+          :logo-img="logoImage"
+          :product-name="productName"
+          :nav-items="navItems"
+          :class="sidebarClasses"
+          :fixed="isSidebarFixed"
+          @closed="toggleAppNavigationVisibility"
         />
-        <side-menu
-          v-if="appNavigationEntries.length > 1"
-          :visible="appNavigationVisible"
-          :entries="appNavigationEntries"
-          @closed="hideAppNavigation"
-        />
-        <main id="main">
-          <router-view id="oc-app-container" name="app" class="uk-height-1-1"></router-view>
-        </main>
-      </template>
+        <div class="uk-width-expand">
+          <top-bar
+            class="uk-width-expand"
+            :applications-list="$_applicationsList"
+            :active-notifications="activeNotifications"
+            :user-id="user.id"
+            :user-display-name="user.displayname"
+            @toggleAppNavigationVisibility="toggleAppNavigationVisibility"
+          />
+          <main id="main">
+            <message-bar :active-messages="activeMessages" @deleteMessage="$_deleteMessage" />
+            <router-view id="oc-app-container" name="app" class="uk-height-1-1" />
+          </main>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -32,21 +37,20 @@
 import 'inert-polyfill'
 import { mapGetters, mapState, mapActions } from 'vuex'
 import TopBar from './components/Top-Bar.vue'
-import Menu from './components/Menu.vue'
 import MessageBar from './components/MessageBar.vue'
 import SkipTo from './components/SkipTo.vue'
 
 export default {
   components: {
     MessageBar,
-    'side-menu': Menu,
     TopBar,
     SkipTo
   },
   data() {
     return {
       appNavigationVisible: false,
-      $_notificationsInterval: null
+      $_notificationsInterval: null,
+      windowWidth: 0
     }
   },
   computed: {
@@ -73,7 +77,22 @@ export default {
       return list.flat()
     },
 
-    appNavigationEntries() {
+    showHeader() {
+      return this.$route.meta.hideHeadbar !== true
+    },
+    favicon() {
+      return this.configuration.theme.logo.favicon
+    },
+
+    logoImage() {
+      return `/themes/${this.configuration.theme.name}/assets/logo.png`
+    },
+
+    productName() {
+      return this.configuration.theme.general.name
+    },
+
+    navItems() {
       if (this.publicPage()) {
         return []
       }
@@ -85,24 +104,36 @@ export default {
         return []
       }
 
-      return items.filter(item => {
-        if (item.enabled === undefined) {
-          return true
-        }
-
+      items.filter(item => {
         if (this.capabilities === undefined) {
           return false
         }
 
+        if (item.enabled === undefined) {
+          return true
+        }
+
         return item.enabled(this.capabilities)
       })
+
+      return items.map(item => {
+        item.name = this.$gettext(item.name)
+        item.active = this.$route.name === item.route.name
+
+        return item
+      })
     },
 
-    showHeader() {
-      return this.$route.meta.hideHeadbar !== true
+    sidebarClasses() {
+      if (this.appNavigationVisible) {
+        return ''
+      }
+
+      return 'uk-visible@l'
     },
-    favicon() {
-      return this.configuration.theme.logo.favicon
+
+    isSidebarFixed() {
+      return this.windowWidth <= 960
     }
   },
   watch: {
@@ -126,11 +157,17 @@ export default {
       }
     }
   },
+
+  beforeDestroy() {
+    window.removeEventListener('resize', this.onResize)
+  },
+
   destroyed() {
     if (this.$_notificationsInterval) {
       clearInterval(this.$_notificationsInterval)
     }
   },
+
   metaInfo() {
     const metaInfo = {
       title: this.configuration.theme.general.name
@@ -140,9 +177,18 @@ export default {
     }
     return metaInfo
   },
+
+  mounted() {
+    this.$nextTick(() => {
+      window.addEventListener('resize', this.onResize)
+      this.onResize()
+    })
+  },
+
   beforeMount() {
     this.initAuth()
   },
+
   methods: {
     ...mapActions(['initAuth', 'fetchNotifications', 'deleteMessage']),
 
@@ -163,6 +209,17 @@ export default {
 
     $_deleteMessage(item) {
       this.deleteMessage(item)
+    },
+
+    onResize() {
+      const width = window.innerWidth
+
+      // Reset navigation visibility in case of switching back to permanently visible sidebar
+      if (width >= 1200) {
+        this.appNavigationVisible = false
+      }
+
+      this.windowWidth = width
     }
   }
 }
diff --git a/src/components/ApplicationsMenu.vue b/src/components/ApplicationsMenu.vue
index e0940797a7e..9754aa53837 100644
--- a/src/components/ApplicationsMenu.vue
+++ b/src/components/ApplicationsMenu.vue
@@ -1,13 +1,14 @@
 <template>
-  <div v-if="!!applicationsList.length">
+  <div>
     <oc-button
       id="_appSwitcherButton"
       ref="menubutton"
-      icon="apps"
-      variation="primary"
-      class="oc-topbar-menu-burger uk-height-1-1"
+      variation="raw"
+      class="oc-topbar-menu-burger"
       :aria-label="$gettext('Application Switcher')"
-    />
+    >
+      <oc-icon name="apps" aria-hidden="true" class="uk-flex" />
+    </oc-button>
     <oc-drop
       ref="menu"
       drop-id="app-switcher-dropdown"
diff --git a/src/components/Menu.vue b/src/components/Menu.vue
deleted file mode 100644
index d7577304e93..00000000000
--- a/src/components/Menu.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<template>
-  <oc-application-menu
-    ref="sidebar"
-    v-model="visible"
-    name="coreMenu"
-    :inert="!visible"
-    @close="close"
-  >
-    <oc-sidebar-nav-item
-      v-for="(n, nid) in entries"
-      :key="nid"
-      :active="isActive(n)"
-      :icon="n.iconMaterial"
-      :target="n.route ? n.route.path : null"
-      @click="openItem(n.url)"
-      >{{ translateMenu(n) }}</oc-sidebar-nav-item
-    >
-  </oc-application-menu>
-</template>
-
-<script>
-export default {
-  props: {
-    visible: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    entries: {
-      type: Array,
-      required: false,
-      default: () => []
-    }
-  },
-  data() {
-    return {}
-  },
-  watch: {
-    visible(val) {
-      this.isOpen = val
-      if (val) {
-        this.focusFirstLink()
-      }
-    }
-  },
-  methods: {
-    close() {
-      this.$emit('closed')
-    },
-    navigateTo(route) {
-      this.$router.push(route)
-    },
-    translateMenu(navItem) {
-      return this.$gettext(navItem.name)
-    },
-    openItem(url) {
-      if (url) {
-        const win = window.open(url, '_blank')
-        win.focus()
-      }
-      this.close()
-    },
-    isActive(navItem) {
-      return navItem.route.name === this.$route.name
-    },
-    focusFirstLink() {
-      /*
-       * Delay for two reasons:
-       * - for screen readers Virtual buffer
-       * - to outsmart uikit's focus management
-       */
-      setTimeout(() => {
-        this.$refs.sidebar.$el.querySelector('a:first-of-type').focus()
-      }, 500)
-    }
-  }
-}
-</script>
-
-<style scoped>
-/* Workaround until we decide what to do with the sidebar navigation */
-#coreMenu {
-  top: 60px;
-}
-</style>
diff --git a/src/components/Notifications.vue b/src/components/Notifications.vue
index bf4ee8a13a4..2e509e33501 100644
--- a/src/components/Notifications.vue
+++ b/src/components/Notifications.vue
@@ -1,10 +1,9 @@
 <template>
-  <div id="oc-notification" class="uk-navbar-item">
+  <div id="oc-notification">
     <oc-icon
       id="oc-notification-bell"
-      class="oc-cursor-pointer"
+      class="oc-cursor-pointer uk-flex uk-flex-middle"
       name="bell"
-      variation="inverted"
       aria-label="Notifications"
     />
     <oc-drop
diff --git a/src/components/Top-Bar.vue b/src/components/Top-Bar.vue
index bfacbaa76ef..03847ae2bf7 100644
--- a/src/components/Top-Bar.vue
+++ b/src/components/Top-Bar.vue
@@ -1,34 +1,22 @@
 <template>
-  <oc-navbar id="oc-topbar" tag="header" class="oc-topbar uk-position-relative uk-navbar">
-    <oc-navbar-item position="left">
-      <oc-button
-        v-if="hasAppNavigation"
-        key="extension-navigation-button"
-        ref="menubutton"
-        icon="menu"
-        variation="primary"
-        class="oc-topbar-menu-burger uk-height-1-1"
-        :aria-label="$gettext('Menu')"
-        @click="toggleAppNavigationVisibility"
-      >
-        <span v-translate class="oc-topbar-menu-burger-label">Menu</span>
-      </oc-button>
-      <span
-        v-else
-        key="extension-title"
-        class="topbar-current-extension-title uk-margin-left"
-        v-text="currentExtensionName"
-      />
-    </oc-navbar-item>
-    <oc-navbar-item position="center">
-      <router-link to="/" class="oc-topbar-icon">ownCloud X</router-link>
-    </oc-navbar-item>
-    <oc-navbar-item v-if="!isPublicPage" position="right">
+  <header
+    id="oc-topbar"
+    class="uk-flex uk-flex-middle uk-flex-wrap oc-border-bottom uk-padding-small"
+  >
+    <oc-button
+      variation="raw"
+      class="oc-app-navigation-toggle uk-hidden@l"
+      :aria-label="$gettext('Open navigation menu')"
+      @click="toggleAppNavigationVisibility"
+    >
+      <oc-icon name="menu" class="uk-flex" aria-hidden="true" />
+    </oc-button>
+    <oc-grid v-if="!isPublicPage" flex gutter="small" class="uk-width-expand uk-flex-right">
       <notifications v-if="activeNotifications.length" />
-      <applications-menu :applications-list="applicationsList" />
+      <applications-menu v-if="applicationsList.length > 0" :applications-list="applicationsList" />
       <user-menu :user-id="userId" :user-display-name="userDisplayName" />
-    </oc-navbar-item>
-  </oc-navbar>
+    </oc-grid>
+  </header>
 </template>
 
 <script>
@@ -94,9 +82,13 @@ export default {
 }
 </script>
 
-TODO: Move to ODS and enable theming
 <style scoped>
+/* TODO: Move to ODS and enable theming */
 .topbar-current-extension-title {
   color: white;
 }
+
+#oc-topbar {
+  background: white;
+}
 </style>
diff --git a/src/components/UserMenu.vue b/src/components/UserMenu.vue
index 16018a7389d..705050bd0ab 100644
--- a/src/components/UserMenu.vue
+++ b/src/components/UserMenu.vue
@@ -4,17 +4,17 @@
       id="_userMenuButton"
       ref="menuButton"
       class="oc-topbar-personal uk-height-1-1"
-      variation="primary"
+      variation="raw"
       :aria-label="$gettext('User Menu')"
     >
-      <oc-grid gutter="small">
+      <oc-grid gutter="small" flex>
         <avatar-image
           class="oc-topbar-personal-avatar"
           :width="32"
           :userid="userId"
           :user-name="userDisplayName"
         />
-        <div class="oc-topbar-personal-label">{{ userDisplayName }}</div>
+        <div class="oc-topbar-personal-label uk-text-primary" v-text="userDisplayName" />
       </oc-grid>
     </oc-button>
     <oc-drop
@@ -108,9 +108,6 @@ export default {
 </script>
 <style scoped>
 /* FIXME: https://github.com/owncloud/owncloud-design-system/issues/596 */
-.oc-topbar-personal-avatar {
-  margin-top: 3px;
-}
 .oc-topbar-personal-label {
   margin-left: 0px !important;
 }
diff --git a/src/phoenix.js b/src/phoenix.js
index dc988a867ec..b07b058d20b 100644
--- a/src/phoenix.js
+++ b/src/phoenix.js
@@ -179,7 +179,7 @@ function loadApps () {
   fetch(`themes/${config.theme}.json`)
     .then(res => res.json())
     .then(res => {
-      store.dispatch('loadTheme', res)
+      store.dispatch('loadTheme', { theme: res, name: config.theme })
     })
 }
 
diff --git a/src/store/config.js b/src/store/config.js
index 81e41d5974c..02df0b1224e 100644
--- a/src/store/config.js
+++ b/src/store/config.js
@@ -14,6 +14,7 @@ const state = {
   },
   rootFolder: '',
   theme: {
+    name: 'owncloud',
     general: {
       name: '',
       slogan: '',
@@ -34,7 +35,8 @@ const actions = {
   loadConfig(context, config) {
     context.commit('LOAD_CONFIG', config)
   },
-  loadTheme(context, theme) {
+  loadTheme(context, { theme, name }) {
+    theme.name = name
     context.commit('LOAD_THEME', theme)
   }
 }
diff --git a/tests/acceptance/pageObjects/phoenixPage.js b/tests/acceptance/pageObjects/phoenixPage.js
index adf4793a5af..6b70f08fa8e 100644
--- a/tests/acceptance/pageObjects/phoenixPage.js
+++ b/tests/acceptance/pageObjects/phoenixPage.js
@@ -30,17 +30,31 @@ module.exports = {
     /**
      * @param {string} page
      */
-    navigateToUsingMenu: function(page) {
+    navigateToUsingMenu: async function(page) {
       const menuItemSelector = util.format(this.elements.menuItem.selector, page)
-      return this.waitForElementVisible('@menuButton')
-        .click('@menuButton')
-        .useXpath()
+      let isAppNavigationVisible = true
+
+      // Check if the navigation is visible
+      await this.api.element('@appNavigationHidden', result => {
+        if (result.status > -1) {
+          isAppNavigationVisible = false
+        }
+      })
+
+      // If app navigation is not visible, try to click on the menu button
+      if (!isAppNavigationVisible) {
+        this.click('@menuButton').waitForAnimationToFinish()
+      }
+
+      this.useXpath()
         .waitForElementVisible(menuItemSelector)
-        .waitForAnimationToFinish()
         .click(menuItemSelector)
         .api.page.FilesPageElement.filesList()
         .waitForElementPresent({ selector: '@filesListProgressBar', abortOnFailure: false }) // don't fail if we are too late
         .waitForElementNotPresent('@filesListProgressBar')
+        .useCss()
+
+      return this
     },
     markNotificationAsRead: function() {
       return this.waitForElementVisible('@notificationBell')
@@ -208,11 +222,10 @@ module.exports = {
       selector: '#_userMenuButton'
     },
     menuButton: {
-      selector: '//button[@aria-label="Menu"]',
-      locateStrategy: 'xpath'
+      selector: '.oc-app-navigation-toggle'
     },
     menuItem: {
-      selector: '//ul[contains(@class, "oc-main-menu")]/li/a[contains(text(),"%s")]',
+      selector: '//nav[contains(@class, "oc-sidebar-nav")]/ul/li/a[contains(text(),"%s")]',
       locateStrategy: 'xpath'
     },
     logoutMenuItem: {
@@ -240,6 +253,10 @@ module.exports = {
       selector:
         '//div[@id="oc-notification"]//h5[contains(text(),\'%s\')]/../div/button/span[.="Accept"]',
       locateStrategy: 'xpath'
+    },
+    appNavigationHidden: {
+      selector: '//div[contains(@class, "oc-app-navigation") and contains(@class, "uk-visible@l")]',
+      locateStrategy: 'xpath'
     }
   }
 }
diff --git a/themes/owncloud/assets/logo.png b/themes/owncloud/assets/logo.png
new file mode 100644
index 00000000000..8476d43490e
Binary files /dev/null and b/themes/owncloud/assets/logo.png differ