diff --git a/src/boot/after_store.js b/src/boot/after_store.js
index 00ca74a21..3cbbf020c 100644
--- a/src/boot/after_store.js
+++ b/src/boot/after_store.js
@@ -130,6 +130,7 @@ const setSettings = async ({ apiConfig, staticConfig, store }) => {
       ? 0
       : config.logoMargin
   })
+  copyInstanceOption('logoLeft')
   store.commit('authFlow/setInitialStrategy', config.loginMethod)
 
   copyInstanceOption('redirectRootNoLogin')
diff --git a/src/components/desktop_nav/desktop_nav.js b/src/components/desktop_nav/desktop_nav.js
index 70722320b..ee99ec102 100644
--- a/src/components/desktop_nav/desktop_nav.js
+++ b/src/components/desktop_nav/desktop_nav.js
@@ -67,6 +67,7 @@ export default {
     logo () { return this.$store.state.instance.logo },
     sitename () { return this.$store.state.instance.name },
     hideSitename () { return this.$store.state.instance.hideSitename },
+    logoLeft () { return this.$store.state.instance.logoLeft },
     currentUser () { return this.$store.state.users.currentUser },
     privateMode () { return this.$store.state.instance.private },
   },
diff --git a/src/components/desktop_nav/desktop_nav.scss b/src/components/desktop_nav/desktop_nav.scss
index 95f925aa4..45d0bcf37 100644
--- a/src/components/desktop_nav/desktop_nav.scss
+++ b/src/components/desktop_nav/desktop_nav.scss
@@ -4,10 +4,17 @@
   display: grid;
   height: 50px;
   grid-template-rows: 50px;
-  grid-template-columns: 2fr minmax(min-content, min-content) 2fr;
+  grid-template-columns: 2fr auto 2fr;
+  grid-template-areas: "sitename logo actions";
   width: 100%;
   position: fixed;
   box-sizing: border-box;
+  padding: 0 1.2em;
+
+  &.-logoLeft {
+    grid-template-columns: auto 2fr 2fr;
+    grid-template-areas: "logo sitename actions";
+  }
 
   button {
     &, i[class*=icon-], svg {
@@ -36,6 +43,7 @@
   }
 
   .logo {
+    grid-area: logo;
     position: relative;
     transition: opacity;
     transition-timing-function: ease-out;
@@ -75,8 +83,15 @@
     color: var(--topBarLink, $fallback--link);
   }
 
+  .sitename {
+    grid-area: sitename;
+  }
+
+  .actions {
+    grid-area: actions;
+  }
+
   .item {
-    margin: 0 1.2em;
     flex: 1;
     line-height: 50px;
     height: 50px;
diff --git a/src/components/desktop_nav/desktop_nav.vue b/src/components/desktop_nav/desktop_nav.vue
index a1c7afd66..da675a2af 100644
--- a/src/components/desktop_nav/desktop_nav.vue
+++ b/src/components/desktop_nav/desktop_nav.vue
@@ -2,9 +2,10 @@
   <nav
     id="nav"
     class="DesktopNav"
+    :class="{ '-logoLeft': logoLeft }"
     @click="scrollToTop()"
     >
-    <div class="item">
+    <div class="item sitename">
       <router-link
         v-if="!hideSitename"
         class="site-name"
@@ -14,8 +15,9 @@
         {{ sitename }}
       </router-link>
     </div>
-    <div
+    <router-link
       class="logo"
+      :to="{ name: 'root' }"
       :style="logoBgStyle"
       >
       <div
@@ -26,8 +28,8 @@
         :src="logo"
         :style="logoStyle"
         >
-    </div>
-    <div class="item right mobile-hidden">
+    </router-link>
+    <div class="item right actions">
       <search-bar
         v-if="currentUser || !privateMode"
         @toggled="onSearchBarToggled"
diff --git a/src/modules/instance.js b/src/modules/instance.js
index b3cbffc6c..0c35f5d6d 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -30,6 +30,7 @@ const defaultState = {
   logo: '/static/logo.png',
   logoMargin: '.2em',
   logoMask: true,
+  logoLeft: false,
   minimalScopesMode: false,
   nsfwCensorImage: undefined,
   postContentType: 'text/plain',
diff --git a/static/config.json b/static/config.json
index 458a7b04b..7386ac88a 100644
--- a/static/config.json
+++ b/static/config.json
@@ -13,6 +13,7 @@
   "logo": "/static/logo.svg",
   "logoMargin": ".1em",
   "logoMask": true,
+  "logoLeft": false,
   "minimalScopesMode": false,
   "nsfwCensorImage": "",
   "postContentType": "text/plain",