diff --git a/src/components/desktop_nav/desktop_nav.js b/src/components/desktop_nav/desktop_nav.js
new file mode 100644
index 000000000..70722320b
--- /dev/null
+++ b/src/components/desktop_nav/desktop_nav.js
@@ -0,0 +1,88 @@
+import SearchBar from 'components/search_bar/search_bar.vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faSignInAlt,
+  faSignOutAlt,
+  faHome,
+  faComments,
+  faBell,
+  faUserPlus,
+  faBullhorn,
+  faSearch,
+  faTachometerAlt,
+  faCog,
+  faInfoCircle
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faSignInAlt,
+  faSignOutAlt,
+  faHome,
+  faComments,
+  faBell,
+  faUserPlus,
+  faBullhorn,
+  faSearch,
+  faTachometerAlt,
+  faCog,
+  faInfoCircle
+)
+
+export default {
+  components: {
+    SearchBar
+  },
+  data: () => ({
+    searchBarHidden: true,
+    supportsMask: window.CSS && window.CSS.supports && (
+      window.CSS.supports('mask-size', 'contain') ||
+        window.CSS.supports('-webkit-mask-size', 'contain') ||
+        window.CSS.supports('-moz-mask-size', 'contain') ||
+        window.CSS.supports('-ms-mask-size', 'contain') ||
+        window.CSS.supports('-o-mask-size', 'contain')
+    )
+  }),
+  computed: {
+    enableMask () { return this.supportsMask && this.$store.state.instance.logoMask },
+    logoStyle () {
+      return {
+        'visibility': this.enableMask ? 'hidden' : 'visible'
+      }
+    },
+    logoMaskStyle () {
+      return this.enableMask ? {
+        'mask-image': `url(${this.$store.state.instance.logo})`
+      } : {
+        'background-color': this.enableMask ? '' : 'transparent'
+      }
+    },
+    logoBgStyle () {
+      return Object.assign({
+        'margin': `${this.$store.state.instance.logoMargin} 0`,
+        opacity: this.searchBarHidden ? 1 : 0
+      }, this.enableMask ? {} : {
+        'background-color': this.enableMask ? '' : 'transparent'
+      })
+    },
+    logo () { return this.$store.state.instance.logo },
+    sitename () { return this.$store.state.instance.name },
+    hideSitename () { return this.$store.state.instance.hideSitename },
+    currentUser () { return this.$store.state.users.currentUser },
+    privateMode () { return this.$store.state.instance.private },
+  },
+  methods: {
+    scrollToTop () {
+      window.scrollTo(0, 0)
+    },
+    logout () {
+      this.$router.replace('/main/public')
+      this.$store.dispatch('logout')
+    },
+    onSearchBarToggled (hidden) {
+      this.searchBarHidden = hidden
+    },
+    openSettingsModal () {
+      this.$store.dispatch('openSettingsModal')
+    },
+  }
+}
diff --git a/src/components/desktop_nav/desktop_nav.scss b/src/components/desktop_nav/desktop_nav.scss
new file mode 100644
index 000000000..95f925aa4
--- /dev/null
+++ b/src/components/desktop_nav/desktop_nav.scss
@@ -0,0 +1,92 @@
+@import '../../_variables.scss';
+
+.DesktopNav {
+  display: grid;
+  height: 50px;
+  grid-template-rows: 50px;
+  grid-template-columns: 2fr minmax(min-content, min-content) 2fr;
+  width: 100%;
+  position: fixed;
+  box-sizing: border-box;
+
+  button {
+    &, i[class*=icon-], svg {
+      color: $fallback--text;
+      color: var(--btnTopBarText, $fallback--text);
+    }
+
+    &:active {
+      background-color: $fallback--fg;
+      background-color: var(--btnPressedTopBar, $fallback--fg);
+      color: $fallback--text;
+      color: var(--btnPressedTopBarText, $fallback--text);
+    }
+
+    &:disabled {
+      color: $fallback--text;
+      color: var(--btnDisabledTopBarText, $fallback--text);
+    }
+
+    &.toggled {
+      color: $fallback--text;
+      color: var(--btnToggledTopBarText, $fallback--text);
+      background-color: $fallback--fg;
+      background-color: var(--btnToggledTopBar, $fallback--fg)
+    }
+  }
+
+  .logo {
+    position: relative;
+    transition: opacity;
+    transition-timing-function: ease-out;
+    transition-duration: 100ms;
+
+    @media all and (min-width: 800px) {
+      opacity: 1 !important;
+    }
+
+    .mask {
+      mask-repeat: no-repeat;
+      mask-position: center;
+      mask-size: contain;
+      background-color: $fallback--fg;
+      background-color: var(--topBarText, $fallback--fg);
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+    }
+
+    img {
+      display: inline-block;
+      height: 50px;
+    }
+  }
+
+  .nav-icon {
+    margin-left: 0.2em;
+    width: 2em;
+    text-align: center;
+  }
+
+  a, a svg {
+    color: $fallback--link;
+    color: var(--topBarLink, $fallback--link);
+  }
+
+  .item {
+    margin: 0 1.2em;
+    flex: 1;
+    line-height: 50px;
+    height: 50px;
+    overflow: hidden;
+    display: flex;
+    flex-wrap: wrap;
+
+    &.right {
+      justify-content: flex-end;
+      text-align: right;
+    }
+  }
+}
diff --git a/src/components/desktop_nav/desktop_nav.vue b/src/components/desktop_nav/desktop_nav.vue
new file mode 100644
index 000000000..a1c7afd66
--- /dev/null
+++ b/src/components/desktop_nav/desktop_nav.vue
@@ -0,0 +1,75 @@
+<template>
+  <nav
+    id="nav"
+    class="DesktopNav"
+    @click="scrollToTop()"
+    >
+    <div class="item">
+      <router-link
+        v-if="!hideSitename"
+        class="site-name"
+        :to="{ name: 'root' }"
+        active-class="home"
+        >
+        {{ sitename }}
+      </router-link>
+    </div>
+    <div
+      class="logo"
+      :style="logoBgStyle"
+      >
+      <div
+        class="mask"
+        :style="logoMaskStyle"
+        />
+      <img
+        :src="logo"
+        :style="logoStyle"
+        >
+    </div>
+    <div class="item right mobile-hidden">
+      <search-bar
+        v-if="currentUser || !privateMode"
+        @toggled="onSearchBarToggled"
+        @click.stop.native
+        />
+      <a
+        href="#"
+        class="nav-icon"
+        @click.stop="openSettingsModal"
+        >
+        <FAIcon
+          fixed-width
+          class="fa-scale-110 fa-old-padding"
+          icon="cog"
+          :title="$t('nav.preferences')"
+          />
+      </a>
+      <a
+        v-if="currentUser && currentUser.role === 'admin'"
+        href="/pleroma/admin/#/login-pleroma"
+        class="nav-icon"
+        target="_blank"
+        ><FAIcon
+           fixed-width
+           class="fa-scale-110 fa-old-padding"
+           icon="tachometer-alt"
+           :title="$t('nav.administration')"
+           /></a>
+      <a
+        v-if="currentUser"
+        href="#"
+        class="nav-icon"
+        @click.prevent="logout"
+        ><FAIcon
+           fixed-width
+           class="fa-scale-110 fa-old-padding"
+           icon="sign-out-alt"
+           :title="$t('login.logout')"
+           /></a>
+    </div>
+  </nav>
+</template>
+<script src="./desktop_nav.js"></script>
+
+<style src="./desktop_nav.scss" lang="scss"></style>